/* ============================================================ Bull Project — Landing page styles Theming via CSS variables. Dark mode = ============================================================ */ /* ---------- Design tokens ---------- */ :root { --font-d: "Space Grotesk", sans-serif; /* display */ --font-b: "Manrope", sans-serif; /* body */ --font-m: "Space Mono", monospace; /* mono */ --accent: #6D4FE0; --accent-dark: #4F35B0; --accent-soft: #F1EDFE; --secondary: #16966A; --bg: #FAFAFC; --bg-tint: #F5F3FA; --surface: #FFFFFF; --text: #14121F; --text-2: #332F47; --text-muted: #4A4660; --text-soft: #8783A0; --border: #ECE9F5; --border-strong: #DAD6EA; --border-hover: #DED7F3; --nav-bg: rgba(255,255,255,0.9); --logo-filter: grayscale(1); } html[data-theme="dark"] { --bg: #0E0D16; --bg-tint: #15131F; --surface: #1B1828; --text: #F4F2FA; --text-2: #DCD8EE; --text-muted: #ADA8C6; --text-soft: #8B86A8; --border: #2B2740; --border-strong: #3A3552; --border-hover: #4A4372; --nav-bg: rgba(18,16,28,0.82); --logo-filter: grayscale(1) invert(1); } /* ---------- Reset / base ---------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-b); background: var(--bg); color: var(--text); line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background .3s ease, color .3s ease; } img { max-width: 100%; } a { color: inherit; } h1, h2, h3, h4 { margin: 0; } /* ---------- Layout helpers ---------- */ .container { max-width: 1280px; margin: 0 auto; } .section { position: relative; z-index: 2; padding: 110px 64px; } .section--tint { background: var(--bg-tint); } .section--dark { background: #12101C; color: #fff; overflow: hidden; } .center-head { max-width: 640px; margin: 0 auto; text-align: center; } .head-block { max-width: 680px; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-family: var(--font-d); font-weight: 600; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; } .eyebrow--dark { background: rgba(255,255,255,0.08); color: #B7B2CF; font-family: var(--font-d); } h2.h2 { font-family: var(--font-d); font-weight: 600; font-size: 44px; line-height: 1.14; letter-spacing: -.01em; margin: 18px 0 0; } .h2--dark { color: #fff; } .section-sub { font-size: 17px; color: var(--text-muted); margin-top: 16px; line-height: 1.6; } .section-sub--center { max-width: 480px; margin-left: auto; margin-right: auto; } /* ---------- Decorative background blobs ---------- */ .blob { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; filter: blur(90px); } .blob-1 { top: -120px; left: -160px; width: 480px; height: 480px; background: var(--accent); opacity: .10; } .blob-2 { top: 180px; right: -180px; width: 520px; height: 520px; background: var(--secondary); opacity: .12; filter: blur(100px); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-family: var(--font-b); font-weight: 600; text-decoration: none; cursor: pointer; transition: transform .2s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease; } .btn-primary { padding: 16px 30px; background: var(--accent); color: #fff; font-size: 16px; border: none; box-shadow: 0 12px 26px rgba(20,18,31,.18); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(20,18,31,.24); } .btn-ghost { padding: 16px 28px; background: transparent; color: var(--text); border: 1.5px solid var(--border-strong); font-size: 16px; } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); } .btn-sm { padding: 11px 22px; font-size: 14.5px; background: var(--accent); color: #fff; box-shadow: 0 8px 18px rgba(20,18,31,.16); white-space: nowrap; } .btn-sm:hover { transform: translateY(-2px); } /* ---------- Navbar ---------- */ .site-nav { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); width: min(1180px, 92%); z-index: 100; background: var(--nav-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--border); border-radius: 999px; box-shadow: 0 8px 30px rgba(20,18,31,.06); display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 10px 26px; height: 68px; opacity: 1; transition: top .5s cubic-bezier(.4,0,.2,1), opacity .4s ease; } .site-nav.is-hidden { top: -130px; opacity: 0; pointer-events: none; } .nav-logo { height: 38px; width: auto; display: block; } .nav-logo--dark { display: none; } html[data-theme="dark"] .nav-logo--light { display: none; } html[data-theme="dark"] .nav-logo--dark { display: block; } .nav-links { display: flex; align-items: center; gap: 32px; } .nav-links a { font-family: var(--font-b); font-size: 14.5px; font-weight: 600; color: var(--text-muted); text-decoration: none; } .nav-links a:hover { color: var(--accent); } .nav-right { display: flex; align-items: center; gap: 14px; } .nav-login { display: inline-flex; align-items: center; padding: 10px 20px; background: transparent; color: var(--text); border: 1.5px solid var(--border-strong); border-radius: 999px; font-family: var(--font-b); font-weight: 600; font-size: 14.5px; text-decoration: none; white-space: nowrap; } .nav-login:hover { border-color: var(--accent); color: var(--accent); } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; background: transparent; border: 1px solid var(--border); color: var(--text); cursor: pointer; flex-shrink: 0; padding: 0; } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); } .theme-toggle .icon-sun { display: none; } html[data-theme="dark"] .theme-toggle .icon-sun { display: block; } html[data-theme="dark"] .theme-toggle .icon-moon { display: none; } .hamburger { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; background: var(--bg-tint); border-radius: 999px; border: 1px solid var(--border); cursor: pointer; } .hamburger span { display: block; width: 18px; height: 2px; background: var(--text); margin: 2px 0; } /* ---------- Mobile menu ---------- */ .mobile-menu { position: fixed; inset: 0; z-index: 99; background: var(--bg); transform: translateY(-100%); transition: transform .4s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; } .mobile-menu.open { transform: translateY(0); } .mobile-menu a.m-link { font-family: var(--font-d); font-size: 26px; font-weight: 600; color: var(--text); text-decoration: none; } .mobile-menu .m-close { position: absolute; top: 24px; right: 24px; width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: 20px; cursor: pointer; color: var(--text); } /* ---------- Hero ---------- */ .hero { position: relative; z-index: 2; } .hero-wrap { display: flex; align-items: center; gap: 40px; padding: 190px 64px 100px; max-width: 1280px; margin: 0 auto; position: relative; z-index: 2; } .hero-left { flex: 1 1 54%; display: flex; flex-direction: column; align-items: flex-start; } .hero-right { flex: 1 1 46%; display: flex; justify-content: center; } .hero-img { width: 500px; max-width: 540px; position: relative; z-index: 1; animation: floatY 6s ease-in-out infinite; } .hero h1 { font-family: var(--font-d); font-weight: 600; font-size: 62px; line-height: 1.08; letter-spacing: -.02em; margin: 22px 0 0; max-width: 620px; } .hero-sub { font-size: 18.5px; color: var(--text-muted); max-width: 540px; margin: 24px 0 0; } .hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; } .hero-trust { font-size: 13.5px; color: var(--text-soft); margin-top: 22px; font-family: var(--font-b); font-weight: 600; } /* ---------- Awards marquee ---------- */ .trusted { position: relative; z-index: 2; padding: 36px 0 56px; } .trusted-label { text-align: center; font-family: var(--font-b); font-size: 13.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); margin: 0 0 28px; } .marquee { width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee-track { display: flex; align-items: center; gap: 64px; width: max-content; animation: marqueeScroll 26s linear infinite; } .marquee-track .award { height: 52px; display: flex; align-items: center; justify-content: center; } .marquee-track img { height: 100%; width: auto; max-width: 160px; object-fit: contain; filter: var(--logo-filter); opacity: .6; transition: filter .2s, opacity .2s; } .marquee-track img:hover { filter: grayscale(0); opacity: 1; } /* ---------- Cards / pillars ---------- */ .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 52px; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 34px; position: relative; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .card--hoverable:hover { transform: translateY(-6px); box-shadow: 0 24px 44px rgba(20,18,31,.10); border-color: var(--border-hover); } .pill-badge { width: 48px; height: 48px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; font-family: var(--font-d); font-weight: 700; font-size: 16px; } .card h3 { font-family: var(--font-d); font-size: 22px; font-weight: 600; margin: 22px 0 10px; letter-spacing: -.01em; } .card p.copy { font-size: 15.5px; color: var(--text-muted); line-height: 1.65; margin: 0 0 20px; } .divider { height: 1px; background: var(--border); margin: 0 0 18px; } .blist { list-style: none; margin: 0; padding: 0; } .blist li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 11px; font-size: 14.5px; color: var(--text-2); } .blist li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--secondary); margin-top: 8px; flex-shrink: 0; } /* ---------- Benefits + chain panel ---------- */ .benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 48px; } .benefit { display: flex; gap: 16px; align-items: flex-start; } .benefit .num { width: 38px; height: 38px; border-radius: 11px; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-family: var(--font-d); font-weight: 700; font-size: 13px; color: var(--accent); flex-shrink: 0; } .benefit h4 { font-family: var(--font-d); font-size: 17.5px; font-weight: 600; margin: 0 0 6px; } .benefit p { font-size: 15px; color: var(--text-muted); line-height: 1.6; margin: 0; } .chain-panel { position: relative; margin-top: 44px; background: linear-gradient(160deg, #201C38 0%, #141021 100%); border-radius: 24px; padding: 36px 34px; box-shadow: 0 30px 60px rgba(20,18,31,.16); overflow: hidden; } .chain-glow { position: absolute; top: -80px; left: 50%; transform: translateX(-50%); width: 420px; height: 220px; background: var(--accent); opacity: .22; filter: blur(90px); pointer-events: none; } .chain-inner { position: relative; z-index: 1; } .chain-kicker { text-align: center; font-family: var(--font-b); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #B7B2CF; margin: 0 0 6px; } .chain-title { text-align: center; font-family: var(--font-d); font-size: 22px; font-weight: 600; color: #fff; margin: 0 0 26px; } .flow-row { display: flex; align-items: stretch; justify-content: center; gap: 0; margin-bottom: 24px; } .stage { flex: 1 1 0; min-width: 0; max-width: 300px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 20px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); } .stage--hub { align-items: center; text-align: center; justify-content: center; background: rgba(109,79,224,.12); border: 1px solid rgba(109,79,224,.42); box-shadow: 0 0 0 4px rgba(109,79,224,.07); } .stage-badge { font-family: var(--font-b); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--secondary); margin-bottom: 10px; } .stage-title { font-family: var(--font-d); font-size: 19px; font-weight: 600; color: #fff; margin: 0 0 8px; } .stage-desc { font-family: var(--font-b); font-size: 14.5px; color: #B4AFCF; line-height: 1.5; margin: 0; } .chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; } .m-chip { display: inline-flex; align-items: center; padding: 6px 13px; border-radius: 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); font-family: var(--font-m); font-size: 13px; font-weight: 700; color: #EDEBF7; letter-spacing: .02em; } .cur-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 5px; border-radius: 999px; background: transparent; border: 1px solid rgba(255,255,255,.14); font-family: var(--font-b); font-size: 13px; font-weight: 600; color: #B4AFCF; } .cur-chip .flag { width: 18px; height: 18px; border-radius: 50%; overflow: hidden; flex-shrink: 0; display: inline-flex; box-shadow: 0 0 0 1px rgba(255,255,255,.14); } .cur-chip .flag img { width: 100%; height: 100%; object-fit: cover; } .net-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 6px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); font-family: var(--font-b); font-size: 13px; font-weight: 600; color: #EDEBF7; } .net-chip .ic { width: 20px; height: 20px; border-radius: 50%; background: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .net-chip .ic img { width: 13px; height: 13px; object-fit: contain; } .more-pill { display: inline-flex; align-items: center; padding: 5px 13px; border-radius: 999px; background: rgba(109,79,224,.18); border: 1px solid rgba(109,79,224,.40); font-family: var(--font-b); font-size: 13px; font-weight: 700; color: #C9C0F2; } .hub-circle { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--secondary)); display: flex; align-items: center; justify-content: center; font-size: 25px; color: #fff; font-weight: 700; margin-bottom: 14px; box-shadow: 0 10px 26px rgba(109,79,224,.45); } .hub-pill { display: inline-block; margin-top: 14px; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); font-family: var(--font-b); font-size: 13px; font-weight: 600; color: #C9C3EA; } .flow-link { position: relative; align-self: center; flex: 1 1 auto; min-width: 28px; max-width: 64px; height: 2px; background: rgba(255,255,255,.14); margin: 0 4px; } .flow-link .dot { position: absolute; top: 50%; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--secondary); box-shadow: 0 0 8px var(--secondary); transform: translateY(-50%); animation: flowDot 2.4s ease-in-out infinite; } .ledger-divider { height: 1px; background: rgba(255,255,255,.08); margin: 2px 0 16px; } .ledger-caption { text-align: center; font-family: var(--font-b); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8B86A8; margin: 0 0 16px; } .ledger-row { display: flex; align-items: center; justify-content: center; gap: 0; } .block { flex: 0 0 auto; width: 112px; display: flex; flex-direction: column; align-items: center; padding: 15px 12px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); animation: blockFloat 5s ease-in-out infinite; } .block--active { background: rgba(109,79,224,.14); border: 1px solid rgba(109,79,224,.45); box-shadow: 0 0 0 4px rgba(109,79,224,.10); } .block--done { background: rgba(22,150,106,.14); border: 1px solid rgba(22,150,106,.45); box-shadow: 0 0 0 4px rgba(22,150,106,.10); } .block .hash { font-family: var(--font-m); font-size: 12px; color: #8B86A8; letter-spacing: .02em; } .block .chk { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; margin-top: 12px; color: #fff; } .block .lbl { font-family: var(--font-b); font-size: 11.5px; color: #6F6A8A; margin-top: 10px; } /* ---------- Networks / chips ---------- */ .chip-heading { margin: 44px 0 14px; font-family: var(--font-b); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); } .chip-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .token-chip { display: inline-flex; align-items: center; gap: 9px; padding: 9px 18px 9px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-family: var(--font-b); font-size: 14.5px; font-weight: 600; color: var(--text-2); } .token-chip:hover { border-color: var(--accent); } .token-chip img { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; } .token-chip.with-flag { padding-left: 9px; } .token-chip .flag { width: 22px; height: 22px; border-radius: 50%; overflow: hidden; flex-shrink: 0; display: inline-flex; box-shadow: 0 0 0 1px rgba(20,18,31,.08); } .token-chip .flag img { width: 100%; height: 100%; object-fit: cover; } /* ---------- Contracts ---------- */ .contract-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 52px; } .contract-badge { width: 44px; height: 44px; border-radius: 13px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; font-family: var(--font-d); font-weight: 700; font-size: 16px; } .contract-card h3 { font-family: var(--font-d); font-size: 19px; font-weight: 600; margin: 20px 0 9px; letter-spacing: -.01em; } .contract-card p { font-size: 14.5px; color: var(--text-muted); line-height: 1.6; margin: 0; } .contract-note { display: flex; align-items: center; gap: 12px; margin-top: 26px; padding: 16px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; } .contract-note .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--secondary); flex-shrink: 0; } .contract-note span.txt { font-family: var(--font-b); font-size: 14.5px; color: var(--text-2); } /* ---------- Testimonials ---------- */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 52px; } .testi { background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 34px; box-shadow: 0 22px 48px rgba(20,18,31,.13); } .testi p.quote { font-family: var(--font-d); font-size: 17.5px; line-height: 1.55; color: var(--text); margin: 0 0 24px; } .testi-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .testi-foot img { height: 40px; width: auto; max-width: 180px; object-fit: contain; filter: var(--logo-filter); opacity: .82; } .testi-foot img.tall { height: 52px; max-width: 120px; } .testi-role { font-family: var(--font-b); font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-soft); white-space: nowrap; } /* ---------- Pricing ---------- */ .pricing-row { display: flex; gap: 24px; margin-top: 52px; align-items: stretch; } .plan { flex: 1 1 0; min-width: 300px; max-width: 380px; background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 34px; position: relative; } .plan--featured { border: 2px solid var(--accent); box-shadow: 0 24px 50px rgba(20,18,31,.14); transform: scale(1.035); } .plan-tag { position: absolute; top: 0; left: 50%; transform: translate(-50%,-50%); background: var(--accent); color: #fff; font-family: var(--font-b); font-size: 12.5px; font-weight: 700; padding: 7px 16px; border-radius: 999px; white-space: nowrap; box-shadow: 0 8px 16px rgba(20,18,31,.18); } .plan h3 { font-family: var(--font-d); font-size: 21px; font-weight: 600; margin: 8px 0 4px; text-align: center; } .plan .price { text-align: center; margin: 18px 0 6px; } .plan .price b { font-family: var(--font-d); font-size: 40px; font-weight: 700; } .plan .unit { text-align: center; font-size: 13.5px; color: var(--text-soft); margin: 0 0 26px; } .plan .plan-bl { display: flex; flex-direction: column; gap: 13px; margin-bottom: 28px; list-style: none; padding: 0; } .plan .plan-bl li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--text-2); } .plan .plan-bl li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--secondary); margin-top: 8px; flex-shrink: 0; } .plan-cta { display: block; text-align: center; padding: 14px; border-radius: 12px; font-family: var(--font-b); font-weight: 700; font-size: 15px; text-decoration: none; } .plan-cta--solid { background: var(--accent); color: #fff; } .plan-cta--solid:hover { background: var(--accent-dark); } .plan-cta--ghost { border: 1.5px solid var(--border-strong); color: var(--text); } .plan-cta--ghost:hover { border-color: var(--accent); color: var(--accent); } /* ---------- FAQ ---------- */ .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 44px; } .faq-item { border-bottom: 1px solid var(--border); padding: 22px 0; } .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: none; border: none; padding: 0; cursor: pointer; text-align: left; } .faq-q span { font-family: var(--font-d); font-size: 16.5px; font-weight: 600; color: var(--text); } .faq-chevron { width: 30px; height: 30px; border-radius: 50%; background: var(--bg-tint); color: var(--text-soft); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; transition: transform .25s ease, background .2s, color .2s; } .faq-item.open .faq-chevron { transform: rotate(45deg); background: var(--accent); color: #fff; } .faq-a { font-size: 15px; color: var(--text-muted); line-height: 1.65; margin: 16px 0 0; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; box-shadow: 0 12px 28px rgba(20,18,31,.07); display: none; } .faq-item.open .faq-a { display: block; } /* ---------- CTA ---------- */ .cta-glow { position: absolute; bottom: -140px; right: -140px; width: 420px; height: 420px; border-radius: 50%; background: var(--accent); opacity: .18; filter: blur(100px); pointer-events: none; } .cta-row { display: flex; gap: 80px; align-items: flex-start; position: relative; } .cta-left { flex: 1 1 44%; } .cta-right { flex: 1 1 48%; width: 100%; } .cta-sub { font-size: 17px; color: #B7B2CF; margin: 16px 0 0; line-height: 1.6; } .cta-points { display: flex; flex-direction: column; gap: 14px; margin-top: 32px; } .cta-points .pt { display: flex; align-items: center; gap: 10px; } .cta-points .pt span.d { width: 7px; height: 7px; border-radius: 50%; background: var(--secondary); } .cta-points .pt span.t { font-size: 15px; color: #D8D4E8; } .form-card { background: #171325; border: 1px solid rgba(255,255,255,.08); border-radius: 24px; padding: 36px; width: 100%; } .form-card h3 { font-family: var(--font-d); font-size: 19px; font-weight: 600; margin: 0 0 6px; } .form-card form { display: flex; flex-direction: column; gap: 16px; } .form-card input, .form-card textarea { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1.5px solid #2A2640; background: #211C38; color: #fff; font-size: 15px; font-family: var(--font-b); outline: none; } .form-card textarea { resize: vertical; } .form-card input:focus, .form-card textarea:focus { border-color: var(--accent); } .form-card button { margin-top: 6px; padding: 15px; background: var(--accent); color: #fff; border: none; border-radius: 12px; font-family: var(--font-b); font-weight: 700; font-size: 15.5px; cursor: pointer; } .form-card button:hover { background: var(--accent-dark); } .form-success { text-align: center; padding: 40px 10px; display: none; } .form-success .ok { width: 52px; height: 52px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; margin: 0 auto 18px; } .form-success p { font-size: 15px; color: #B7B2CF; margin: 0; } /* ---------- Footer ---------- */ .footer { position: relative; z-index: 2; background: #12101C; color: #fff; padding: 64px 64px 32px; } .footer-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 24px; } .footer img { height: 60px; width: auto; display: block; } .footer .tag { font-size: 14.5px; color: var(--text-soft); line-height: 1.6; margin: 20px 0 22px; max-width: 280px; } .socials { display: flex; gap: 10px; } .social { width: 36px; height: 36px; border-radius: 999px; background: rgba(255,255,255,.08); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; text-decoration: none; font-family: var(--font-b); } .social:hover { background: var(--accent); } .footer-head { font-family: var(--font-d); font-size: 13.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-soft); margin: 0 0 18px; } .footer-links { display: flex; flex-direction: column; gap: 12px; } .footer-links a, .footer-links span { font-size: 14.5px; color: #D8D4E8; text-decoration: none; } .footer-links a:hover { color: #fff; } .footer-bottom { height: 1px; background: rgba(255,255,255,.08); margin: 48px 0 24px; } .footer-copy { text-align: center; font-size: 13.5px; color: #6F6B85; margin: 0; } /* ---------- Keyframes ---------- */ @keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-18px); } } @keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes flowDot { 0% { left: -6px; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { left: calc(100% - 6px); opacity: 0; } } @keyframes blockFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } /* ============================================================ Responsive ============================================================ */ @media (max-width: 1080px) { .section { padding: 80px 40px; } h2.h2 { font-size: 36px; } .hero-wrap { flex-direction: column; align-items: center; gap: 48px; padding: 170px 40px 80px; text-align: center; } .hero-left { flex: none; align-items: center; } .hero-right { flex: none; width: 86%; } .hero-img { width: 86%; } .hero h1 { font-size: 50px; } .hero-cta { justify-content: center; } .grid-3 { grid-template-columns: 1fr 1fr; } .benefits-grid { grid-template-columns: 1fr 1fr; } .contract-grid { grid-template-columns: 1fr 1fr; } .flow-row { flex-direction: column; align-items: center; gap: 10px; } .stage { max-width: 360px; width: 100%; align-items: center; text-align: center; } .stage .chip-row { justify-content: center; } .flow-link { width: 2px; height: 26px; min-width: 0; max-width: none; flex: none; margin: 4px 0; } .flow-link .dot { display: none; } .ledger-row { flex-direction: column; } .block { width: 168px; } .pricing-row { flex-direction: column; align-items: center; } .plan--featured { transform: none; } .faq-grid { grid-template-columns: 1fr; gap: 0; } .cta-row { flex-direction: column; gap: 44px; } .footer-cols { grid-template-columns: 1fr 1fr 1fr; } } @media (max-width: 760px) { .section { padding: 60px 20px; } h2.h2 { font-size: 30px; } .site-nav { top: 10px; width: 94%; padding: 8px 10px 8px 18px; height: 56px; } .site-nav.is-hidden { top: -130px; } .nav-links, .nav-login { display: none; } .nav-right { gap: 8px; } .hamburger { display: flex; } .hero-wrap { padding: 150px 20px 64px; } .hero h1 { font-size: 38px; } .hero-sub { font-size: 16.5px; } .grid-3, .benefits-grid, .contract-grid, .grid-2 { grid-template-columns: 1fr; } .footer { padding: 56px 24px 28px; } .footer-cols { grid-template-columns: 1fr; gap: 34px; } } @media (max-width: 420px) { .hero h1 { font-size: 32px; } }