/* ========================================================================== AtoZApply — Landing page Direction: Enterprise Technical Precision Neutral base + one signal accent. Structure comes from hairlines and air. ========================================================================== */ :root{ /* neutrals */ --ink-950:#08090A; --ink-900:#0B0D0F; --ink-850:#101315; --ink-800:#161A1D; --line:#22272B; --line-soft:rgba(255,255,255,.055); --text:#ECEFEA; --text-2:#9BA3A8; --text-3:#5E666C; /* the one accent */ --signal:#D6FF4B; --signal-dim:#8FAF33; --signal-glow:rgba(214,255,75,.13); /* status — data only */ --flag-red:#FF5C48; --flag-amber:#FFB13D; --flag-cool:#5FB8FF; --display:'Clash Display','Satoshi',ui-sans-serif,sans-serif; --body:'Satoshi',ui-sans-serif,sans-serif; --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace; --shell:1280px; --gutter:clamp(20px,5vw,64px); --nav-h:78px; --ease:cubic-bezier(.16,1,.3,1); } *,*::before,*::after{box-sizing:border-box} html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth } /* NB: never put overflow/clip on — it propagates to the viewport and clips everything past the first screen. The only element that can overflow is the hero (its console bleeds to the viewport edge), so it clips itself. */ body{ margin:0; background:var(--ink-950); color:var(--text-2); font-family:var(--body); font-size:1.0625rem; line-height:1.62; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } h1,h2,h3,h4{ font-family:var(--display); font-weight:600; color:var(--text); letter-spacing:-.03em; line-height:1.02; margin:0; } p{margin:0} ul,ol{margin:0;padding:0;list-style:none} a{color:inherit;text-decoration:none} strong{color:var(--text);font-weight:700} em{font-style:normal;color:var(--signal)} ::selection{background:var(--signal);color:var(--ink-950)} :focus-visible{ outline:2px solid var(--signal); outline-offset:3px; border-radius:2px; } .shell{ max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter); } /* ── mono utility ─────────────────────────────────────────────────────── */ .mono{ font-family:var(--mono); font-size:.7rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); font-variant-numeric:tabular-nums; } /* ══════════════════════════════════════════════════════════════════════ NAV ══════════════════════════════════════════════════════════════════════ */ .nav{ position:fixed; inset:0 0 auto 0; z-index:80; height:var(--nav-h); transition:background .3s ease, border-color .3s ease; border-bottom:1px solid transparent; } .nav.scrolled{ background:rgba(8,9,10,.82); backdrop-filter:saturate(150%) blur(14px); -webkit-backdrop-filter:saturate(150%) blur(14px); border-bottom-color:var(--line); } .nav-inner{ height:var(--nav-h); display:flex; align-items:center; gap:40px; } .brand{ display:inline-flex; align-items:center; gap:10px; font-family:var(--display); font-weight:600; font-size:1.06rem; color:var(--text); letter-spacing:-.02em; } .logo-mark{ width:28px; height:28px; border-radius:7px; display:grid; place-items:center; background:var(--signal); color:var(--ink-950); } .nav-links{display:flex; gap:30px; margin-left:auto} .navlink{ font-size:.9rem; font-weight:500; color:var(--text-2); transition:color .16s ease; } .navlink:hover{color:var(--text)} .nav-cta{display:flex; align-items:center; gap:18px; margin-left:auto} .nav-links + .nav-cta{margin-left:0} .navlink-quiet{font-size:.88rem} .nav-toggle{ display:none; width:38px; height:38px; padding:0; background:none; border:1px solid var(--line); border-radius:6px; cursor:pointer; position:relative; } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{ position:absolute; left:50%; width:16px; height:1.5px; background:var(--text); transform:translateX(-50%); transition:.24s var(--ease); } .nav-toggle span{top:50%; margin-top:-.75px} .nav-toggle span::before{content:''; top:-5px; left:0; transform:none} .nav-toggle span::after{content:''; top:5px; left:0; transform:none} body.menu-open .nav-toggle span{background:transparent} body.menu-open .nav-toggle span::before{top:0; transform:rotate(45deg)} body.menu-open .nav-toggle span::after{top:0; transform:rotate(-45deg)} .mobile-menu{ display:none; flex-direction:column; gap:2px; padding:16px var(--gutter) 28px; background:var(--ink-900); border-bottom:1px solid var(--line); } .mobile-menu a{padding:12px 0; font-size:1rem; color:var(--text-2); border-bottom:1px solid var(--line-soft)} .mobile-menu a.btn{margin-top:16px; border-bottom:none; justify-content:center} body.menu-open .mobile-menu{display:flex} body.menu-open{overflow:hidden} /* ══════════════════════════════════════════════════════════════════════ BUTTONS ══════════════════════════════════════════════════════════════════════ */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; height:46px; padding:0 22px; border-radius:7px; font-family:var(--body); font-size:.945rem; font-weight:700; letter-spacing:-.005em; white-space:nowrap; cursor:pointer; border:1px solid transparent; transition:background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease; } .btn svg{width:17px; height:17px; flex:none} .btn-primary{ background:var(--signal); color:var(--ink-950); box-shadow:0 0 0 0 var(--signal-glow); } .btn-primary:hover{background:#E4FF7A; box-shadow:0 0 34px -6px var(--signal-glow)} .btn-primary:active{background:var(--signal-dim)} .btn-ghost{ background:transparent; color:var(--text); border-color:var(--line); } .btn-ghost:hover{border-color:#3A4248; background:var(--ink-850)} .btn-sm{height:38px; padding:0 16px; font-size:.875rem} .btn-lg{height:54px; padding:0 28px; font-size:1rem} .btn-block{display:flex; width:100%} /* ══════════════════════════════════════════════════════════════════════ LOAD ORCHESTRATION ══════════════════════════════════════════════════════════════════════ */ @keyframes rise{ from{opacity:0; transform:translateY(16px); filter:blur(6px)} to {opacity:1; transform:none; filter:none} } .rise{ opacity:0; animation:rise .78s var(--ease) forwards; animation-delay:var(--d,0s); } /* scroll reveals (driven by main.js adding .in) */ .reveal{ opacity:0; transform:translateY(20px); transition:opacity .8s var(--ease), transform .8s var(--ease); } .reveal.in{opacity:1; transform:none} .reveal.d1{transition-delay:.09s} .reveal.d2{transition-delay:.18s} .reveal.d3{transition-delay:.27s} .reveal.d4{transition-delay:.36s} /* ══════════════════════════════════════════════════════════════════════ HERO ══════════════════════════════════════════════════════════════════════ */ .hero{ position:relative; overflow-x:clip; padding-top:calc(var(--nav-h) + clamp(56px,8vw,104px)); } .hero::before{ content:''; position:absolute; inset:0 0 40% 0; pointer-events:none; background: radial-gradient(70% 55% at 62% 22%, rgba(214,255,75,.05), transparent 70%), radial-gradient(46% 40% at 10% 0%, rgba(255,255,255,.035), transparent 72%); } .hero-grid{ /* The same box as .shell — max-width, auto margins, gutter padding — so the hero lines up with the nav, every section and the footer by construction. It used to use spacer grid tracks instead, but a track is followed by a column-gap, which pushed the hero a full gap right of everything else. */ position:relative; max-width:var(--shell); margin:0 auto; padding:0 var(--gutter); display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:26px; align-items:start; } .hero-copy{grid-column:1 / 6; padding-top:6px} /* the console runs off the right edge of the viewport (.hero clips it). vw counts the scrollbar, so this can overshoot by a few px — overshoot is invisible once clipped, whereas falling short would leave a visible gap. */ .hero-console{ grid-column:7 / 13; min-width:0; margin-right:calc(-1 * max(var(--gutter), calc(50vw - var(--shell) / 2 + var(--gutter)))); } .kicker{ display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:.695rem; font-weight:500; letter-spacing:.11em; text-transform:uppercase; color:var(--text-2); padding:7px 14px 7px 12px; border:1px solid var(--line); border-radius:100px; background:var(--ink-850); } .kicker .tick{ width:6px; height:6px; border-radius:50%; background:var(--signal); box-shadow:0 0 0 4px var(--signal-glow); } .hero-title{ margin:30px 0 0; font-size:clamp(3.05rem,6.6vw,5.9rem); line-height:.94; letter-spacing:-.042em; font-weight:600; } .hero-title .line{display:block} .hero-lead{ max-width:31em; margin-top:28px; font-size:1.075rem; line-height:1.68; color:var(--text-2); } .hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px} .hero-trust{ display:flex; flex-wrap:wrap; gap:24px; margin-top:26px; font-family:var(--mono); font-size:.68rem; letter-spacing:.11em; text-transform:uppercase; color:var(--text-3); } .hero-trust li{display:flex; align-items:center; gap:8px} .hero-trust li::before{ content:''; width:4px; height:4px; border-radius:50%; background:var(--signal-dim); } /* ── console frame ── */ .console{ border:1px solid var(--line); border-radius:12px; background:var(--ink-900); overflow:hidden; box-shadow:0 40px 90px -50px rgba(0,0,0,.9); } .hero-console .console{ border-right:0; border-radius:12px 0 0 12px; } .console-bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:40px; padding:0 16px; border-bottom:1px solid var(--line); background:var(--ink-850); } .console-bar .mono{font-size:.655rem; color:var(--text-3)} .console-bar .live, .console-bar .alarm{display:inline-flex; align-items:center; gap:7px} .console-bar .live{color:var(--signal-dim)} .console-bar .alarm{color:var(--flag-red)} .console-bar i{ width:5px; height:5px; border-radius:50%; background:currentColor; animation:blip 2.4s ease-in-out infinite; } @keyframes blip{0%,100%{opacity:1}50%{opacity:.25}} .console-body{padding:22px} .engine-scroll{overflow-x:auto; overscroll-behavior-x:contain} .engine{display:block; width:100%; height:auto} /* ── engine SVG internals ── */ .ec-cap{font-family:var(--mono); font-size:9.5px; font-weight:500; letter-spacing:.16em; fill:var(--text-3)} .ec-t{font-family:var(--mono); font-size:8.4px; letter-spacing:.09em; fill:var(--text-2)} .ec-t.dim{fill:var(--text-3)} .ec-t.lime{fill:var(--signal)} .ec-t.red{fill:var(--flag-red)} .ec-t.cool{fill:var(--flag-cool)} .ec-t.mid{text-anchor:middle} .ec-t.end{text-anchor:end} .ec-t.big{font-size:11.5px; letter-spacing:.12em} .ec-num{font-family:var(--mono); font-size:26px; font-weight:500; fill:var(--text); text-anchor:middle} .ec-dot{fill:var(--signal)} .ec-chip rect{fill:var(--ink-850); stroke:var(--line); stroke-width:1} .ec-panel{fill:#0D1012; stroke:var(--line); stroke-width:1} .ec-lane rect{fill:var(--ink-850); stroke:var(--line); stroke-width:1} .ec-lane.on rect{stroke:rgba(214,255,75,.34)} .ec-lane.on .ec-t{fill:var(--text)} .ec-visa rect{fill:rgba(95,184,255,.07); stroke:rgba(95,184,255,.34); stroke-width:1} .ec-term rect{fill:var(--ink-850); stroke:var(--line); stroke-width:1} .ec-term .ec-term-edge{fill:var(--signal); stroke:none} .ec-bar{fill:var(--signal); transform-box:fill-box; transform-origin:left center} .ec-wire{fill:none; stroke:#2B3238; stroke-width:1.25} .ec-wire.lit{stroke:rgba(214,255,75,.42); stroke-width:1.5} .ec-reject{fill:none; stroke:url(#fade); stroke-width:1.5; stroke-dasharray:4 4} .ec-tick{fill:none; stroke:var(--text-3); stroke-width:1; stroke-dasharray:2 3} .ec-gate{fill:var(--ink-900); stroke:var(--signal); stroke-width:1.5} /* draw-on + fade-in choreography */ .ec-wire,.ec-reject,.ec-tick{ stroke-dasharray:1400; stroke-dashoffset:1400; animation:draw 1s ease forwards; animation-delay:var(--d,0s); } .ec-reject{animation-name:draw-dashed} .ec-tick{animation-name:draw-tick} @keyframes draw{to{stroke-dashoffset:0}} @keyframes draw-dashed{ from{stroke-dasharray:0 1400} to{stroke-dasharray:4 4; stroke-dashoffset:0} } @keyframes draw-tick{ from{stroke-dasharray:0 1400} to{stroke-dasharray:2 3; stroke-dashoffset:0} } .ec-chip,.ec-lane,.ec-panel,.ec-term,.ec-visa,.ec-gate{ opacity:0; animation:pop .6s var(--ease) forwards; animation-delay:var(--d,0s); } @keyframes pop{from{opacity:0}to{opacity:1}} .ec-ring{ stroke-dasharray:251.3; stroke-dashoffset:251.3; animation:ring 1.1s var(--ease) 2.1s forwards; } @keyframes ring{to{stroke-dashoffset:206.1}} .ec-num, .ec-t.mid.lime{opacity:0; animation:pop .7s ease 2.3s forwards} .ec-bar{transform:scaleX(0); animation:barfill 1s var(--ease) forwards; animation-delay:var(--d,0s)} @keyframes barfill{to{transform:scaleX(var(--w,1))}} .ec-cap{opacity:0; animation:pop .7s ease .8s forwards} .ec-t.red,.ec-t.dim{opacity:0; animation:pop .7s ease 2.9s forwards} .ec-t.dim{animation-delay:3.0s} .ec-lane .ec-t,.ec-chip .ec-t,.ec-term .ec-t,.ec-visa .ec-t{opacity:1; animation:none} /* ── hairline + metrics ── */ .hero-rule{ display:flex; flex-wrap:wrap; gap:34px; margin-top:clamp(64px,9vw,110px); padding-top:16px; border-top:1px solid var(--line); } .hero-rule .mono{font-size:.655rem} .hero-rule .mono:first-child{color:var(--signal-dim)} .metrics{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line-soft); margin-top:6px; } .metric{ padding:34px 26px 40px; border-left:1px solid var(--line-soft); } .metric:first-child{border-left:0; padding-left:0} .metric .num{ display:block; font-family:var(--display); font-weight:600; font-size:clamp(2.4rem,3.6vw,3.4rem); line-height:1; letter-spacing:-.04em; color:var(--text); font-variant-numeric:tabular-nums; } .metric-lbl{ display:block; margin-top:12px; max-width:16em; font-size:.855rem; line-height:1.45; color:var(--text-3); } /* ══════════════════════════════════════════════════════════════════════ MARQUEE ══════════════════════════════════════════════════════════════════════ */ .band{padding:56px 0 64px; border-top:1px solid var(--line)} .band-label{font-size:.66rem; color:var(--text-3)} .marquee{ margin-top:26px; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); } .marquee-track{ display:flex; width:max-content; gap:68px; animation:slide 42s linear infinite; } .marquee-track span{ font-family:var(--display); font-weight:500; font-size:1.4rem; letter-spacing:-.02em; color:#343B41; white-space:nowrap; transition:color .3s ease; } .marquee:hover .marquee-track span{color:#454D54} @keyframes slide{to{transform:translateX(-50%)}} /* ══════════════════════════════════════════════════════════════════════ SECTIONS ══════════════════════════════════════════════════════════════════════ */ .section{ padding:clamp(90px,11vw,150px) 0; border-top:1px solid var(--line); } .section.alt{background:var(--ink-900)} .sec-no{font-size:.68rem; color:var(--text-3)} .sec-no::first-line{color:inherit} .sec-head{max-width:46rem; margin-bottom:clamp(56px,7vw,88px)} .sec-head h2{ margin-top:24px; font-size:clamp(2.1rem,4.1vw,3.5rem); letter-spacing:-.038em; line-height:1.03; } .sec-lead{margin-top:22px; max-width:38em; font-size:1.045rem; color:var(--text-2)} /* ── asymmetric showcase ── */ .showcase{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:clamp(32px,5vw,80px); align-items:center; } .sc-copy{grid-column:1 / 6} .sc-media{grid-column:7 / 13; min-width:0} .showcase.flip .sc-copy{grid-column:8 / 13} .showcase.flip .sc-media{grid-column:1 / 7; grid-row:1} .sc-copy h2{ margin-top:24px; font-size:clamp(2rem,3.7vw,3.15rem); letter-spacing:-.038em; line-height:1.05; } .sc-lead{margin-top:24px; color:var(--text-2)} .ticks{margin-top:30px; border-top:1px solid var(--line)} .ticks li{ position:relative; padding:15px 0 15px 30px; border-bottom:1px solid var(--line); font-size:.965rem; color:var(--text-2); } /* a check, not a chevron: the box is twice as wide as it is tall */ .ticks li::before{ content:''; position:absolute; left:1px; top:24px; width:11px; height:5.5px; border-left:1.7px solid var(--signal); border-bottom:1.7px solid var(--signal); transform:rotate(-45deg); } /* ── run list (auto apply console) ── */ .runlist li{ display:flex; align-items:center; gap:14px; padding:15px 0; border-bottom:1px solid var(--line-soft); font-size:.95rem; color:var(--text-2); } .runlist li:last-child{border-bottom:0} .rl-ix{font-size:.64rem; color:var(--text-3); flex:none} .rl-st{margin-left:auto; font-size:.62rem; flex:none} .runlist .done .rl-st{color:var(--signal-dim)} .runlist .done{color:var(--text)} .runlist .active{color:var(--text)} .runlist .active .rl-ix{color:var(--signal)} .runlist .active .rl-st{ color:var(--ink-950); background:var(--signal); padding:3px 8px; border-radius:4px; } .runfoot{ display:flex; justify-content:space-between; align-items:center; margin-top:20px; padding-top:18px; border-top:1px solid var(--line); } .runfoot b{color:var(--text); font-weight:500} .runfoot .ok{color:var(--signal)} /* ── ghost score console ── */ .scorewrap{display:flex; align-items:center; gap:20px} .gauge{ --val:0; --c:var(--signal); position:relative; flex:none; width:76px; height:76px; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--c) calc(var(--val) * 3.6deg), var(--line) 0); } .gauge::after{ content:''; position:absolute; inset:6px; border-radius:50%; background:var(--ink-900); } .gauge b{ position:relative; z-index:1; font-family:var(--mono); font-size:1.15rem; font-weight:500; color:var(--text); font-variant-numeric:tabular-nums; } .score-verdict{ font-family:var(--display); font-weight:600; font-size:1.4rem; color:var(--flag-red); letter-spacing:-.02em; } .score-sub{margin-top:6px; font-size:.64rem} .signals{margin-top:26px; border-top:1px solid var(--line)} .signals li{ display:flex; align-items:baseline; gap:16px; padding:12px 0; border-bottom:1px solid var(--line-soft); font-size:.9rem; color:var(--text-2); } .signals .mono{ flex:none; width:88px; font-size:.6rem; color:var(--flag-red); opacity:.85; } .compare{margin-top:26px; padding-top:20px; border-top:1px solid var(--line)} .compare-lbl{font-size:.6rem; margin-bottom:14px; color:var(--text-3)} .bar-row{display:flex; align-items:center; gap:14px; margin-top:11px} .bar-row .mono{font-size:.6rem; color:var(--text-3)} .bar-row .mono:first-child{width:82px; flex:none} .bar-row .mono:last-child{width:22px; flex:none; text-align:right; color:var(--text-2)} .bar{flex:1; height:3px; background:var(--line); border-radius:2px; overflow:hidden} .bar > i{ display:block; height:100%; width:0; background:var(--signal); transition:width 1.1s var(--ease); } /* ── tailoring console: before → after résumé bullet ── */ .diff-row{padding:16px 0} .diff-row.was{padding-top:0} .diff-row.now{padding-bottom:0} .diff-tag{display:block; margin-bottom:9px; font-size:.6rem} .diff-row p{font-size:.94rem; line-height:1.55} .diff-row.was .diff-tag{color:var(--text-3)} .diff-row.was p{color:var(--text-3)} .diff-row.now .diff-tag{color:var(--signal-dim)} .diff-row.now p{color:var(--text)} .diff mark{ background:var(--signal-glow); color:var(--signal); padding:1px 5px; border-radius:3px; } /* the transformation: a hairline with the step marker sitting on it */ .diff-arrow{position:relative; height:1px; background:var(--line)} .diff-arrow span{ position:absolute; left:50%; top:50%; width:24px; height:24px; margin:-12px 0 0 -12px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; background:var(--ink-850); } .diff-arrow span::before{ content:''; width:6px; height:6px; margin-top:-3px; border-right:1.6px solid var(--signal); border-bottom:1.6px solid var(--signal); transform:rotate(45deg); } .kw{margin-top:24px; padding-top:20px; border-top:1px solid var(--line)} .kw-lbl{margin-bottom:13px; font-size:.6rem; color:var(--text-3)} .chips{display:flex; flex-wrap:wrap; gap:8px} .chips li{ padding:6px 10px; border-radius:5px; font-family:var(--mono); font-size:.63rem; letter-spacing:.06em; color:var(--text); background:var(--ink-850); border:1px solid rgba(214,255,75,.26); } .chips li.off{color:var(--text-3); border-color:var(--line)} .docs{margin-top:24px; border-top:1px solid var(--line)} .doc{ display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--line-soft); } .doc:last-child{border-bottom:0} .doc-ic{ flex:none; width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--line); border-radius:6px; background:var(--ink-850); font-size:.55rem; color:var(--text-3); } .doc-meta{min-width:0} .doc-meta b{display:block; font-size:.92rem; font-weight:500; color:var(--text)} .doc-meta .mono{display:block; margin-top:4px; font-size:.58rem; color:var(--text-3)} .doc-st{margin-left:auto; flex:none; font-size:.62rem; color:var(--signal)} /* ── sponsor register ── */ .register{border-top:1px solid var(--line)} .register li{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:15px 0; border-bottom:1px solid var(--line-soft); } .reg-co{font-family:var(--display); font-weight:500; font-size:1.06rem; color:var(--text); letter-spacing:-.02em} .reg-st{font-size:.6rem; color:var(--text-3)} .reg-st.ok{ color:var(--flag-cool); padding:4px 9px; border-radius:4px; background:rgba(95,184,255,.09); border:1px solid rgba(95,184,255,.26); } .register .off .reg-co{color:var(--text-3)} .reg-note{margin-top:18px; font-size:.83rem; color:var(--text-3)} /* ══════════════════════════════════════════════════════════════════════ CAPABILITY INDEX ══════════════════════════════════════════════════════════════════════ */ .index{border-top:1px solid var(--line)} .index li{ display:grid; grid-template-columns:78px minmax(0,1fr) minmax(0,1.15fr); gap:32px; align-items:baseline; padding:32px 0; border-bottom:1px solid var(--line); transition:background .2s ease; } .index li:hover{background:rgba(255,255,255,.016)} .index .ix{font-size:.68rem; color:var(--text-3); padding-top:6px} .index li:hover .ix{color:var(--signal)} .index h3{font-size:1.42rem; letter-spacing:-.03em; line-height:1.15} .index p{font-size:.965rem; color:var(--text-2)} /* ══════════════════════════════════════════════════════════════════════ STEPS ══════════════════════════════════════════════════════════════════════ */ .steps{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line)} .step{padding:38px 34px 8px; border-left:1px solid var(--line)} .step:first-child{border-left:0; padding-left:0} .step-no{font-size:.65rem; color:var(--signal-dim)} .step h3{margin-top:20px; font-size:1.5rem; letter-spacing:-.03em} .step p{margin-top:14px; font-size:.955rem; color:var(--text-2); max-width:24em} /* ══════════════════════════════════════════════════════════════════════ QUOTES ══════════════════════════════════════════════════════════════════════ */ .quotes{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(32px,5vw,72px)} .quotes blockquote{margin:0} .q-lead p{ font-family:var(--display); font-weight:500; font-size:clamp(1.5rem,2.5vw,2.1rem); line-height:1.24; letter-spacing:-.028em; color:var(--text); border-left:2px solid var(--signal); padding-left:26px; } .q-side{display:grid; gap:48px; align-content:center} .q-side p{font-size:1rem; color:var(--text-2); padding-left:22px; border-left:1px solid var(--line)} .quotes footer{display:flex; align-items:baseline; gap:14px; margin-top:18px; padding-left:26px} .q-side footer{padding-left:22px} .quotes footer b{font-family:var(--body); font-weight:700; color:var(--text); font-size:.93rem} .quotes footer .mono{font-size:.6rem} /* ══════════════════════════════════════════════════════════════════════ PRICING ══════════════════════════════════════════════════════════════════════ */ .region-chip{ display:inline-block; margin-top:26px; padding:7px 14px; border:1px solid var(--line); border-radius:100px; font-size:.64rem; background:var(--ink-850); } .plans{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line)} .plan{ position:relative; padding:36px 28px 40px; border-left:1px solid var(--line); display:flex; flex-direction:column; } .plan:first-child{border-left:0; padding-left:0} .plan:last-child{padding-right:0} .plan.featured{background:var(--ink-850); box-shadow:inset 0 2px 0 0 var(--signal)} .plan-flag{ position:absolute; top:-1px; right:28px; padding:5px 10px; font-size:.58rem; background:var(--signal); color:var(--ink-950); border-radius:0 0 4px 4px; } .plan-name{font-size:.68rem; color:var(--text-2)} .plan-price{display:flex; align-items:baseline; gap:8px; margin-top:20px} .plan-price .amt{ font-family:var(--display); font-weight:600; font-size:clamp(2rem,2.7vw,2.6rem); line-height:1; letter-spacing:-.04em; color:var(--text); font-variant-numeric:tabular-nums; } .plan-price .per{font-size:.62rem} .plan-desc{margin-top:16px; min-height:3.2em; font-size:.885rem; color:var(--text-3); line-height:1.5} .plan .btn{margin-top:24px} .plan-feats{margin-top:28px; border-top:1px solid var(--line-soft)} .plan-feats li{ position:relative; padding:11px 0 11px 22px; border-bottom:1px solid var(--line-soft); font-size:.875rem; color:var(--text-2); line-height:1.45; } .plan-feats li::before{ content:''; position:absolute; left:0; top:18px; width:9px; height:4.5px; border-left:1.5px solid var(--signal-dim); border-bottom:1.5px solid var(--signal-dim); transform:rotate(-45deg); } .plan-feats li.off{color:var(--text-3); opacity:.6} .plan-feats li.off::before{ border:0; left:0; top:20px; width:9px; height:1.5px; background:var(--text-3); transform:none; } .plan.featured .plan-feats li::before{border-color:var(--signal)} .price-note{margin-top:34px; font-size:.6rem; color:var(--text-3); line-height:1.9} /* ══════════════════════════════════════════════════════════════════════ FAQ ══════════════════════════════════════════════════════════════════════ */ .faq{border-top:1px solid var(--line)} .faq-item{border-bottom:1px solid var(--line)} .faq-q{ display:flex; align-items:center; gap:20px; width:100%; padding:26px 0; background:none; border:0; cursor:pointer; font-family:var(--display); font-weight:500; font-size:1.18rem; letter-spacing:-.025em; color:var(--text); text-align:left; transition:color .18s ease; } .faq-q:hover{color:var(--signal)} .fq-ix{font-size:.64rem; color:var(--text-3); flex:none; font-weight:400} .faq-q .ic{ position:relative; margin-left:auto; flex:none; width:26px; height:26px; border:1px solid var(--line); border-radius:50%; transition:border-color .2s ease, transform .3s var(--ease); } .faq-q .ic::before,.faq-q .ic::after{ content:''; position:absolute; top:50%; left:50%; width:9px; height:1.5px; background:var(--text-2); transform:translate(-50%,-50%); transition:.3s var(--ease); } .faq-q .ic::after{transform:translate(-50%,-50%) rotate(90deg)} .faq-item.open .faq-q{color:var(--signal)} .faq-item.open .ic{border-color:var(--signal); transform:rotate(180deg)} .faq-item.open .ic::before,.faq-item.open .ic::after{background:var(--signal)} .faq-item.open .ic::after{transform:translate(-50%,-50%) rotate(0deg)} .faq-a{max-height:0; overflow:hidden; transition:max-height .42s var(--ease)} .faq-a-inner{ padding:0 60px 30px 46px; font-size:.985rem; color:var(--text-2); max-width:70ch; } .faq-a-inner a{color:var(--signal); text-decoration:underline; text-underline-offset:3px} /* ══════════════════════════════════════════════════════════════════════ FINAL CTA ══════════════════════════════════════════════════════════════════════ */ .cta{ position:relative; overflow:hidden; padding:clamp(100px,13vw,180px) 0; border-top:1px solid var(--line); } .cta::before{ content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(58% 70% at 50% 108%, rgba(214,255,75,.11), transparent 68%); } .cta::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg,transparent,var(--signal),transparent); opacity:.5; } .cta-inner{position:relative; text-align:center} .cta h2{ margin-top:26px; font-size:clamp(3rem,8vw,7rem); line-height:.93; letter-spacing:-.045em; } .cta-lead{margin:26px auto 0; max-width:34em; font-size:1.075rem} .cta .hero-actions{justify-content:center; margin-top:38px} .cta .hero-trust{justify-content:center; margin-top:30px} /* ══════════════════════════════════════════════════════════════════════ FOOTER ══════════════════════════════════════════════════════════════════════ */ .footer{border-top:1px solid var(--line); padding:74px 0 34px; background:var(--ink-900)} .footer-grid{ display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)); gap:clamp(32px,5vw,64px); } .footer-brand p{margin-top:20px; max-width:30ch; font-size:.9rem; color:var(--text-3)} .socials{display:flex; gap:10px; margin-top:24px} .socials a{ width:36px; height:36px; border:1px solid var(--line); border-radius:7px; display:grid; place-items:center; color:var(--text-3); transition:color .18s ease, border-color .18s ease; } .socials a:hover{color:var(--signal); border-color:var(--signal-dim)} .footer-col h4{font-family:var(--mono); font-size:.64rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); margin-bottom:18px} .footer-col a{display:block; padding:6px 0; font-size:.92rem; color:var(--text-2); transition:color .16s ease} .footer-col a:hover{color:var(--signal)} .footer-bottom{ display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; margin-top:64px; padding-top:26px; border-top:1px solid var(--line); } .footer-bottom .mono{font-size:.6rem} /* ══════════════════════════════════════════════════════════════════════ RESPONSIVE ══════════════════════════════════════════════════════════════════════ */ @media (max-width:1180px){ .nav-links{display:none} } @media (max-width:1040px){ .hero-copy{grid-column:1 / 13} .hero-console{grid-column:1 / 13; margin-top:56px; margin-right:0} .hero-console .console{border-right:1px solid var(--line); border-radius:12px} .hero-title{font-size:clamp(3rem,9vw,4.6rem)} .showcase{gap:56px 0} .sc-copy,.showcase.flip .sc-copy{grid-column:1 / 13; grid-row:auto} .sc-media,.showcase.flip .sc-media{grid-column:1 / 13; grid-row:auto} .quotes{grid-template-columns:1fr} .plans{grid-template-columns:repeat(2,1fr)} .plan{padding:36px 26px 40px; border-left:1px solid var(--line)} .plan:nth-child(odd){border-left:0; padding-left:0} .plan:nth-child(-n+2){border-bottom:1px solid var(--line)} .plan:last-child{padding-right:26px} .footer-grid{grid-template-columns:1fr 1fr} } @media (max-width:860px){ .metrics{grid-template-columns:repeat(2,1fr)} .metric{padding:28px 20px 30px} .metric:nth-child(odd){border-left:0; padding-left:0} .metric:nth-child(-n+2){border-bottom:1px solid var(--line-soft)} .index li{grid-template-columns:56px minmax(0,1fr); gap:8px 24px} .index p{grid-column:2} .steps{grid-template-columns:1fr} .step{padding:30px 0; border-left:0; border-bottom:1px solid var(--line)} .step:last-child{border-bottom:0} } @media (max-width:720px){ .nav-toggle{display:block} .nav-cta .btn-sm{display:none} .navlink-quiet{display:none} .nav-cta{margin-left:auto} /* the diagram stops being legible below ~560px of drawing width — let it keep that width and swipe instead of shrinking the labels to nothing */ .engine-scroll{margin-inline:-18px; padding-inline:18px} .engine{min-width:560px} .hero-title{letter-spacing:-.035em} .hero-actions .btn{flex:1 1 100%} .console-body{padding:18px} .plans{grid-template-columns:1fr} .plan{padding:32px 0; border-left:0; border-bottom:1px solid var(--line)} .plan:last-child{padding-right:0; border-bottom:0} .plan.featured{padding:32px 22px; margin-block:8px} .faq-q{font-size:1.05rem; gap:14px} .faq-a-inner{padding:0 0 26px 34px} .footer-grid{grid-template-columns:1fr} .signals .mono{width:74px} } @media (max-width:520px){ .metrics{grid-template-columns:1fr} .metric{padding:22px 0; border-left:0; border-bottom:1px solid var(--line-soft)} .hero-trust{gap:14px 20px} } /* ══════════════════════════════════════════════════════════════════════ REDUCED MOTION ══════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } .rise{opacity:1; animation:none} .reveal{opacity:1; transform:none} .ec-packets{display:none} .marquee-track{animation:none; transform:none} .ec-wire,.ec-tick{stroke-dashoffset:0; stroke-dasharray:none; animation:none} .ec-tick{stroke-dasharray:2 3} .ec-reject{stroke-dasharray:4 4; stroke-dashoffset:0; animation:none} .ec-chip,.ec-lane,.ec-panel,.ec-term,.ec-visa,.ec-gate,.ec-cap,.ec-num,.ec-t{opacity:1; animation:none} .ec-ring{stroke-dashoffset:206.1; animation:none} .ec-bar{transform:scaleX(var(--w,1)); animation:none} .console-bar i{animation:none} }