a non-stacking pass-through, so a static .wrap is painted over by the fixed .bg (z-index:0) and #network canvas (z-index:1) — same bug fixed for the developers page in 6751a20. Scoped to DIRECT children of

so .wrap instances nested inside sections (homepage .problem/.check-sec/.constel-pin) keep their existing stacking and are untouched. */ main > .wrap { position:relative; z-index:2; } /* Global content margin: only the header (.nav) and footer — which sit OUTSIDE

— stay full-width; interior page content sits in a centered container.

is `display:contents` site-wide (rule below) so its children lay out against ; here we restore a real, centered, max-width box for interior pages. The homepage (the one full-bleed scroll experience) opts out via .home, keeping display:contents. App shells use #app/.au-main/#main-content, not #main, so they're unaffected. */ main#main:not(.home) { display: block; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(16px, 4vw, 24px); } /* A top-level block that already self-wraps in .wrap shouldn't double-pad. */ main#main:not(.home) > .wrap { max-width: none; padding-inline: 0; } .sec-head { max-width:680px; margin:0 auto clamp(40px,6vh,64px); text-align:center; } .sec-head h2 { font-size:clamp(2rem,4.6vw,3.2rem); margin:16px 0 14px; } .sec-head p { color:var(--dim); font-size:1.08rem; } [data-cam] { transform:translateY(var(--cam-y,0)) scale(var(--cam-s,1)); transform-origin:50% 70%; will-change:transform; } /* reveals — driven by @keyframes (NOT transitions): animations run on their own timeline and are immune to the per-frame style-invalidation that can freeze a transition at frame 0 while rAF loops write to the page. */ .rv { opacity:0; } .rv.in { animation:riseIn .7s cubic-bezier(.22,1,.36,1) forwards; } .rv-1.in { animation-delay:.08s; } .rv-2.in { animation-delay:.16s; } .rv-3.in { animation-delay:.24s; } .deck-item { opacity:0; } .deck-item.in { animation:deckIn .6s cubic-bezier(.22,1,.36,1) forwards; animation-delay:calc(var(--i,0) * 80ms); } .stagger .tok-line { display:block; overflow:hidden; } .stagger .tok { display:block; transform:translateY(110%); } .stagger.in .tok { animation:tokRise .8s cubic-bezier(.22,1,.36,1) forwards; animation-delay:calc(var(--i,0) * 90ms); } .draw-line { height:1px; background:linear-gradient(90deg,transparent,var(--border2),transparent); transform:scaleX(0); transform-origin:0 50%; } .draw-line.in { animation:drawIn 1s cubic-bezier(.22,1,.36,1) forwards; } @keyframes riseIn { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:none} } @keyframes deckIn { from{opacity:0;transform:translateY(34px) scale(.985)} to{opacity:1;transform:none} } @keyframes tokRise { from{transform:translateY(110%)} to{transform:none} } @keyframes drawIn { from{transform:scaleX(0)} to{transform:scaleX(1)} } /* safety net: forces the final state even if the entrance animation stalled */ .rv.shown, .deck-item.shown { opacity:1!important; transform:none!important; animation:none!important; } .stagger.shown .tok { transform:none!important; animation:none!important; } .draw-line.shown { transform:scaleX(1)!important; animation:none!important; } @media (prefers-reduced-motion:reduce) { *{ animation:none!important; } .rv,.deck-item{opacity:1;transform:none;} .stagger .tok{transform:none;} .draw-line{transform:scaleX(1);} .reveal-head{--reveal:100%!important;} .reveal-head .rv-accent{--reveal:100%!important;} .fill-h,.fill-h .gt{--reveal:100%!important;} .sol-pillar{opacity:1;} .join-card .jc-top,.join-card h3,.join-card > p,.join-card .jc-list,.join-card .jc-cta{opacity:1;} } /* ---------------- hero ---------------- */ .hero { position:relative; min-height:100svh; display:flex; align-items:center; justify-content:center; padding:120px 24px 70px; overflow:hidden; } .hero-veil { position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(60% 55% at 50% 46%, transparent 30%, var(--bg) 78%); /* feather the bottom edge — the veil's solid base used to end in a hard line exactly at the s1/s2 boundary, visible sliding over the world during the dive. The last ~28% now dissolves into the next scene. */ -webkit-mask-image:linear-gradient(to bottom, #000 72%, transparent 100%); mask-image:linear-gradient(to bottom, #000 72%, transparent 100%); } .hud { position:absolute; z-index:2; font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; color:var(--faint); text-transform:uppercase; } .hud-tl { top:96px; left:clamp(20px,4vw,46px); } .hud-tr { top:96px; right:clamp(20px,4vw,46px); text-align:right; } .hud-bl { bottom:34px; left:clamp(20px,4vw,46px); } .hud-status { display:flex; align-items:center; gap:8px; } .hud .dot { width:7px; height:7px; border-radius:50%; background:var(--a3); box-shadow:0 0 10px var(--a3); animation:blink 1.6s infinite; } @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} } .shards { position:absolute; inset:0; z-index:2; pointer-events:none; } .hshard { position:absolute; transform:translate(calc(var(--mx,0)*var(--pan,40px)),calc(var(--my,0)*var(--pan,40px))); } .hshard-c { display:flex; align-items:center; gap:9px; width:212px; box-sizing:border-box; font-family:var(--mono); font-size:.72rem; letter-spacing:.02em; color:var(--dim); background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:14px; padding:11px 15px; white-space:nowrap; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); box-shadow:0 20px 60px -24px #000, inset 0 1px 0 rgba(255,255,255,.05); /* entrance: fade+rise+scale, staggered via --sd; then gentle float */ opacity:0; transform:translateY(16px) scale(.94); animation:shardIn .7s cubic-bezier(.22,1,.36,1) forwards, floaty 7s ease-in-out infinite; animation-delay:var(--sd,0s), calc(var(--sd,0s) + .7s); } .hshard-c .lbl { color:var(--faint); text-transform:uppercase; letter-spacing:.06em; font-size:.68rem; } .hshard-c .val { margin-left:auto; color:var(--text); font-weight:600; } .hshard-c .hs-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; } .hshard-c .hs-dot.ok { background:var(--success); box-shadow:0 0 8px var(--success); animation:blink 2s infinite; } .hshard-c .hs-dot.p { background:var(--a1); box-shadow:0 0 8px var(--a1); } .hshard-c .hs-dot.c { background:var(--a3); box-shadow:0 0 8px var(--a3); } .hshard-c .hs-dot.live { background:var(--a3); box-shadow:0 0 8px var(--a3); animation:blink 1.6s infinite; } @keyframes shardIn { to { opacity:1; transform:translateY(0) scale(1); } } @keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} } .hero-inner { position:relative; z-index:3; text-align:center; max-width:840px; } /* hero headline cycle: each line is an object that rises with a focus-pull */ .hero h1 .hl-line { display:block; } .hero h1 .hl-in { display:inline-block; will-change:transform, opacity, filter; } .hero .chip { display:inline-flex; align-items:center; gap:9px; padding:7px 16px; border:1px solid var(--border2); border-radius:999px; font-size:.82rem; color:var(--dim); background:rgba(19,19,31,.66); margin-bottom:28px; backdrop-filter:blur(6px); } .hero .chip .d { width:7px; height:7px; border-radius:50%; background:var(--a3); box-shadow:0 0 12px var(--a3); } .hero .chip b { color:var(--text); font-weight:600; } .hero h1 { font-size:clamp(2.7rem,7.5vw,5.4rem); letter-spacing:-.035em; margin-bottom:22px; } .hero .lead { max-width:660px; margin:0 auto 30px; font-size:clamp(1.06rem,2.1vw,1.3rem); color:var(--dim); } /* hero search widget — the product centerpiece */ .hero-searchlabel { font-size:1.02rem; font-weight:600; color:var(--text); margin-bottom:16px; letter-spacing:-.01em; } .hero-search { position:relative; display:flex; align-items:center; gap:12px; max-width:620px; margin:0 auto 14px; padding:9px 9px 9px 20px; border:1.5px solid transparent; border-radius:18px; background: linear-gradient(rgba(13,13,24,.86), rgba(13,13,24,.86)) padding-box, linear-gradient(120deg, var(--a1), var(--a2) 55%, var(--a3)) border-box; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); box-shadow:0 30px 80px -32px color-mix(in srgb,var(--a1) 60%,transparent), inset 0 1px 0 rgba(255,255,255,.06); transition:box-shadow .3s, transform .3s; } .hero-search::after { content:""; position:absolute; inset:-2px; z-index:-1; border-radius:20px; background:linear-gradient(120deg, var(--a1), var(--a2) 55%, var(--a3)); filter:blur(26px); opacity:.26; transition:opacity .3s; } .hero-search:focus-within { transform:translateY(-1px); box-shadow:0 36px 90px -30px color-mix(in srgb,var(--a1) 78%,transparent), inset 0 1px 0 rgba(255,255,255,.06); } .hero-search:focus-within::after { opacity:.5; } .hs-icon { width:20px; height:20px; flex-shrink:0; fill:none; stroke:var(--faint); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:stroke .25s; } .hero-search:focus-within .hs-icon { stroke:var(--a3); } .hero-search input { flex:1; min-width:0; background:transparent; border:0; outline:none; color:var(--text); font-family:inherit; font-size:1.08rem; padding:15px 0; } .hero-search input::placeholder { color:var(--faint); } .hero-search .btn { flex-shrink:0; border-radius:12px; padding:14px 26px; font-size:1rem; } .hero-subnote { font-size:.92rem; color:var(--faint); margin-bottom:8px; } .hero-res { font-family:var(--mono); font-size:.86rem; min-height:22px; margin-bottom:26px; color:var(--faint); transition:color .2s; } .hero-res.scanning { color:var(--a3); } .hero-res.ok { color:var(--success); } .hero-res.bad { color:var(--danger); } .hero-res b { font-weight:700; } /* compact proof strip — the narrow-screen stand-in for the floating stat shards */ .hero-proof { display:none; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; font-family:var(--mono); font-size:.74rem; letter-spacing:.04em; color:var(--faint); margin-top:2px; } .hero-proof b { color:var(--text); font-weight:600; } .hero-proof i { width:3px; height:3px; border-radius:50%; background:var(--faint); opacity:.6; } .scroll-cue { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:8px; font-family:var(--mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); background:none; border:0; cursor:pointer; padding:10px 14px; transition:color .25s; } .scroll-cue:hover { color:var(--text); } .scroll-cue .line { width:1px; height:34px; background:linear-gradient(var(--a3),transparent); transition:height .25s; } .scroll-cue:hover .line { height:42px; } /* ---------------- multi-layer parallax depth ---------------- */ [data-plx] { transform:translate3d(0,var(--ty,0),0); will-change:transform; } /* problem section: 2-class override so it always stays viewport height */ .section-pad.problem { height:100svh; padding:clamp(80px,10vh,96px) 0 clamp(28px,4vh,44px); overflow:hidden; justify-content:center; } /* ---- section-2 staggered entrance (transition-based on .p2-in; robust — transitions never get stranded play-pending the way delayed keyframe animations can, and they reverse cleanly on scroll-up) ---- */ .problem.p2anim .problem-intro { opacity:0; transform:translateX(-48px); transition:opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1); } .problem.p2anim .problem-canvas-col { opacity:0; transition:opacity .9s ease; } .problem.p2anim .pcard { opacity:0; transform:translateY(52px); transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); } .problem.p2anim.p2-in .problem-intro { opacity:1; transform:none; transition-delay:.05s; } .problem.p2anim.p2-in .problem-canvas-col { opacity:1; transition-delay:.25s; } .problem.p2anim.p2-in .pcard { opacity:1; transform:none; } .problem.p2anim.p2-in .pcard:nth-child(1) { transition-delay:.18s; } .problem.p2anim.p2-in .pcard:nth-child(2) { transition-delay:.30s; } .problem.p2anim.p2-in .pcard:nth-child(3) { transition-delay:.42s; } @media (prefers-reduced-motion:reduce) { .problem.p2anim .problem-intro, .problem.p2anim .problem-canvas-col, .problem.p2anim .pcard { opacity:1!important; transform:none!important; } } /* s2 depth blobs removed — glow discipline: the three fixed orbs are the only ambient glows; s2 recolors .o2 to danger red via body.threat-zone instead. */ .problem .wrap { position:relative; z-index:2; } /* ---------------- problem layout (2-col with infographic) ---------------- */ /* 2-col top: intro left, canvas right */ .problem-top { display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,4vw,48px); align-items:stretch; margin-bottom:clamp(20px,3vh,34px); } .problem-intro { display:flex; flex-direction:column; justify-content:center; } /* canvas col: relative container, canvas fills it */ .problem-canvas-col { position:relative; min-height:min(280px,36vh); } @property --reveal { syntax:''; inherits:true; initial-value:0%; } .reveal-head { font-size:clamp(2.2rem,6vw,4.4rem); max-width:14ch; margin:18px 0 22px; letter-spacing:-.03em; text-wrap:balance; --reveal:0%; background:linear-gradient(90deg, var(--head) 0, var(--head) var(--reveal), color-mix(in srgb,var(--head) 20%,transparent) calc(var(--reveal) + 1%)); -webkit-background-clip:text; background-clip:text; color:transparent; } /* .rv-accent gradient defined above (inherits --reveal from parent) */ .reveal-head.fill { animation:fillSweep 1.5s cubic-bezier(.5,0,.2,1) forwards; } /* accent words end at FULL .gt vibrancy — the old fill mixed the accents with --head (white), leaving "move to the next server" looking washed out. The filled state now matches the electric t1→t2→t3 text ramp every .gt uses. */ .reveal-head .rv-accent, .fill-h .gt { background:linear-gradient(90deg, var(--t1) 0, var(--t2) calc(var(--reveal) * .55), var(--t3) var(--reveal), color-mix(in srgb,var(--t1) 18%,transparent) calc(var(--reveal) + 1%)); -webkit-background-clip:text; background-clip:text; color:transparent; } @keyframes fillSweep { from{--reveal:0%} to{--reveal:100%} } /* generic fill header — every section h2 sweeps in like s2's (size unchanged; triggered by .fill via the data-fill-head observer, replays on re-entry). Delayed .3s so the kicker's typewriter leads the beat. */ .fill-h { --reveal:0%; background:linear-gradient(90deg, var(--head) 0, var(--head) var(--reveal), color-mix(in srgb,var(--head) 20%,transparent) calc(var(--reveal) + 1%)); -webkit-background-clip:text; background-clip:text; color:transparent; } .fill-h.fill { animation:fillSweep 1.15s .3s cubic-bezier(.5,0,.2,1) forwards; } .problem-sub { max-width:600px; color:var(--dim); font-size:1.1rem; margin-bottom:clamp(40px,6vh,60px); } /* ---------------- horizontal journey ---------------- */ .hsec { position:relative; height:480vh; z-index:2; } .hpin { position:sticky; top:0; height:100svh; overflow:hidden; display:flex; align-items:center; } .htrack { display:flex; height:100%; align-items:center; will-change:transform; padding:0 max(6vw, calc(50vw - 350px)); gap:4vw; } .hpanel { flex:0 0 auto; width:min(700px,88vw); display:flex; flex-direction:column; justify-content:center; transition:opacity .4s, transform .4s; opacity:.4; } .hpanel.focus { opacity:1; } .hp-intro h2 { font-size:clamp(2.2rem,5vw,3.6rem); margin:14px 0 16px; } .hp-intro .lead { color:var(--dim); font-size:1.1rem; max-width:380px; } .hp-scrollhint { margin-top:30px; font-family:var(--mono); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--a3); } .hp-step { flex-direction:row; align-items:center; gap:22px; } .hp-num { font-family:var(--mono); font-size:clamp(3rem,7vw,5.5rem); font-weight:600; line-height:1; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; opacity:.7; flex-shrink:0; } .hp-card { flex:1; min-width:0; position:relative; overflow:hidden; background:rgba(255,255,255,.034); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:26px; transition:border-color .3s, box-shadow .3s; } .hp-card::before { content:""; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--a1),var(--a2) 60%,var(--a3)); opacity:.5; } .hp-tag { font-family:var(--mono); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--a3); margin-bottom:10px; } .hp-card h3 { font-size:clamp(1.5rem,3vw,2.1rem); margin-bottom:12px; } .hp-card p { color:var(--dim); font-size:1rem; } .hp-card .mono { color:var(--text); } .hp-chip { display:inline-block; margin-top:18px; font-family:var(--mono); font-size:.76rem; letter-spacing:.06em; padding:8px 14px; border-radius:999px; border:1px solid var(--border2); } .hp-chip.bad { color:var(--danger); border-color:color-mix(in srgb,var(--danger) 45%,transparent); background:color-mix(in srgb,var(--danger) 10%,transparent); } .hp-chip.warn { color:var(--warning); border-color:color-mix(in srgb,var(--warning) 45%,transparent); background:color-mix(in srgb,var(--warning) 10%,transparent); } .hp-chip.ok { color:var(--success); border-color:color-mix(in srgb,var(--success) 45%,transparent); background:color-mix(in srgb,var(--success) 10%,transparent); } /* shared skip button — the journey "Continue" cue */ .hnext-wrap { position:absolute; bottom:28px; left:50%; transform:translateX(-50%); z-index:4; } .scene-skip { display:inline-flex; align-items:center; gap:7px; background:none; border:none; cursor:pointer; font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; color:rgba(255,255,255,.28); padding:8px 4px; transition:color .25s; } .scene-skip:hover { color:rgba(255,255,255,.7); } /* journey "Continue" — same visual language as the hero scroll-cue */ .scene-skip.skip-cue { flex-direction:column; gap:8px; font-family:var(--mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); } .scene-skip.skip-cue .line { width:1px; height:34px; background:linear-gradient(var(--a3),transparent); } .scene-skip.skip-cue:hover { color:rgba(255,255,255,.75); } /* ---------------- problem cards ---------------- */ .section-pad { padding:clamp(70px,10vh,110px) 0; min-height:100svh; display:flex; flex-direction:column; justify-content:safe center; } .prob { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; } .prob .pcard { position:relative; overflow:hidden; padding:20px 22px 22px; background:rgba(255,255,255,.034); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1px solid rgba(255,255,255,.08); border-radius:16px; transition:border-color .3s, transform .3s cubic-bezier(.22,1,.36,1); } .prob .pcard::before { content:""; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--danger),color-mix(in srgb,var(--danger) 40%,var(--a1))); opacity:.5; transition:opacity .3s; } .prob .pcard:hover { border-color:rgba(248,113,113,.22); transform:translateY(-3px); } .prob .pcard:hover::before { opacity:.9; } /* reuse identical .card-head / .ic / h3 / p from section 4 — danger-tinted icon only */ .prob .pcard .card-head { display:flex; align-items:center; gap:10px; margin-bottom:10px; } .prob .pcard .ic { width:30px; height:30px; border-radius:8px; display:grid; place-items:center; flex-shrink:0; background:color-mix(in srgb,var(--danger) 16%,transparent); border:1px solid color-mix(in srgb,var(--danger) 28%,transparent); } .prob .pcard .ic svg { width:15px; height:15px; stroke:var(--danger); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .prob .pcard h3 { font-size:1rem; font-weight:600; letter-spacing:-.01em; margin:0; } .prob .pcard p { color:var(--dim); font-size:.875rem; line-height:1.6; } /* ---------------- features scaffold (s6 uses .sol-pillars; the old bento .card family was removed with the section in v5 — dead rules deleted in the v7 style pass) ---------------- */ .features-sec { min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:clamp(60px,9vh,100px) 0; } /* ---------------- check demo ---------------- */ .check-sec { min-height:100svh; display:flex; align-items:center; padding:clamp(40px,6vh,70px) 0; } .check-sec > .wrap { width:100%; } /* console TALL on the LEFT · intro copy off to the RIGHT — the full scan log fits with no scrollbar, and the sonar show plays in the open space around it */ .check-layout { display:grid; grid-template-columns:minmax(440px,640px) 1fr; gap:clamp(32px,5vw,80px); align-items:center; } .check-intro { display:flex; flex-direction:column; align-items:flex-start; text-align:left; gap:12px; max-width:560px; order:2; justify-self:center; } .check-intro h2 { font-size:clamp(2rem,4.6vw,3.2rem); margin:0; } .check-intro p { color:var(--dim); font-size:clamp(.95rem,1.3vw,1.06rem); line-height:1.6; max-width:48ch; } /* TRY chips — live inside the scanner under the search field; each is tinted to the verdict it demos (green · verified / yellow · caution / red · blacklisted) */ .check-chips { display:flex; align-items:center; justify-content:flex-start; gap:8px; flex-wrap:wrap; padding:0 16px 13px; } .cc-lbl { font-family:var(--mono); font-size:.72rem; color:var(--faint); letter-spacing:.12em; text-transform:uppercase; } .chip-btn { display:inline-flex; align-items:center; gap:7px; } .chip-btn::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 9px currentColor; flex:none; } .chip-btn.cb-ok { color:var(--success); border-color:color-mix(in srgb,var(--success) 42%,transparent); background:color-mix(in srgb,var(--success) 8%,transparent); } .chip-btn.cb-warn { color:#fbbf24; border-color:color-mix(in srgb,#fbbf24 42%,transparent); background:color-mix(in srgb,#fbbf24 8%,transparent); } .chip-btn.cb-bad { color:var(--danger); border-color:color-mix(in srgb,var(--danger) 42%,transparent); background:color-mix(in srgb,var(--danger) 8%,transparent); } .chip-btn.cb-ok:hover { border-color:var(--success); color:var(--success); } .chip-btn.cb-warn:hover { border-color:#fbbf24; color:#fbbf24; } .chip-btn.cb-bad:hover { border-color:var(--danger); color:var(--danger); } .demo-shell { position:relative; width:100%; max-width:640px; margin:0; order:1; background:rgba(255,255,255,.034); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1px solid rgba(255,255,255,.1); border-radius:18px; overflow:hidden; box-shadow:0 30px 70px -30px color-mix(in srgb,var(--a1) 22%,transparent); } .demo-shell::before { content:""; position:absolute; top:0; left:0; right:0; height:2px; z-index:2; background:linear-gradient(90deg,var(--a1),var(--a2) 60%,var(--a3)); opacity:.7; } .demo-bar { display:flex; align-items:center; gap:12px; padding:11px 16px; border-bottom:1px solid var(--border); background:rgba(7,7,16,.3); } .demo-bar .dots { display:flex; gap:6px; } .demo-bar .dots i { width:10px; height:10px; border-radius:50%; background:var(--border2); } .demo-bar .title { font-family:var(--mono); font-size:.76rem; color:var(--faint); } .demo-bar .live { margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; color:var(--a3); } .demo-bar .live .dot { width:6px; height:6px; border-radius:50%; background:var(--a3); box-shadow:0 0 8px var(--a3); animation:blink 1.4s infinite; } .demo-input { display:flex; gap:10px; padding:13px 16px 10px; } .demo-field { flex:1; min-width:0; display:flex; align-items:center; gap:8px; background:var(--bg2); border:1px solid var(--border2); border-radius:10px; padding:0 14px; } .demo-field:focus-within { border-color:var(--a1); box-shadow:0 0 0 3px color-mix(in srgb,var(--a1) 22%,transparent); } .demo-field span { color:var(--faint); font-family:var(--mono); font-size:.9rem; } .demo-field input { flex:1; background:none; border:none; outline:none; color:var(--text); font-family:var(--mono); font-size:.9rem; padding:10px 0; } .chip-btn { font-family:var(--mono); font-size:.82rem; color:var(--dim); background:var(--bg2); border:1px solid var(--border2); border-radius:999px; padding:6px 13px; cursor:pointer; transition:border-color .2s, color .2s; } .chip-btn:hover { border-color:var(--a1); color:var(--text); } .demo-body { display:grid; grid-template-columns:1.05fr .95fr; gap:14px 18px; padding:0 16px 16px; } .demo-body > .d-log { grid-column:1 / -1; } /* reserve the results' space BEFORE they populate — the console's height never changes, so snap anchors computed at load stay correct on the very first visit */ [data-d-factors] { min-height:200px; } [data-d-plats] { min-height:26px; } [data-d-speed] { min-height:20px; display:block; } .demo-left { display:flex; flex-direction:column; gap:9px; } .d-dial { position:relative; width:150px; height:150px; margin:0 auto; } .d-dial svg { width:100%; height:100%; transform:rotate(0deg); } .d-dial .track { fill:none; stroke:var(--border2); stroke-width:8; stroke-linecap:round; } .d-dial .arc { fill:none; stroke:var(--a1); stroke-width:8; stroke-linecap:round; filter:drop-shadow(0 0 8px var(--acc-glow)); } .v-good .d-dial .arc { stroke:var(--success); } .v-warn .d-dial .arc { stroke:var(--warning); } .v-bad .d-dial .arc { stroke:var(--danger); } .d-dialmeta { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; } .d-num { font-family:var(--mono); font-size:2rem; font-weight:600; color:var(--head); line-height:1; } .d-num small { font-size:.78rem; color:var(--faint); } .d-verdict { font-family:var(--mono); font-size:.82rem; letter-spacing:.12em; color:var(--faint); } .v-good .d-verdict { color:var(--success); } .v-warn .d-verdict { color:var(--warning); } .v-bad .d-verdict { color:var(--danger); } .d-meta { display:flex; align-items:center; gap:6px; justify-content:center; font-size:.78rem; color:var(--dim); flex-wrap:wrap; } .d-meta .mono { color:var(--text); } .d-log { font-family:var(--mono); font-size:.74rem; color:var(--dim); background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:10px 12px; min-height:148px; overflow-y:auto; } .d-logline { display:flex; gap:8px; opacity:0; transform:translateY(6px); transition:opacity .25s, transform .25s; padding:2px 0; } .d-logline.show { opacity:1; transform:none; } .d-logline.warn { color:var(--danger); } .d-caret { color:var(--a3); } .demo-right { display:flex; align-items:center; } .d-factors { width:100%; display:flex; flex-direction:column; gap:9px; } .d-factor { opacity:0; transform:translateX(10px); transition:opacity .35s, transform .35s; } .d-factor.show { opacity:1; transform:none; } .d-frow { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:4px; } .d-flabel { font-size:.8rem; color:var(--text); } .d-fval { font-size:.78rem; color:var(--head); } .d-fmax { color:var(--faint); margin-left:4px; font-size:.7rem; } .d-bar { height:5px; border-radius:3px; background:var(--bg2); overflow:hidden; } .d-bar i { display:block; height:100%; width:0; border-radius:3px; background:var(--grad); transition:width .9s cubic-bezier(.22,1,.36,1); } .d-bar i.bad { background:linear-gradient(90deg,var(--danger),#fb7185); } .d-speed { font-family:var(--mono); font-size:.74rem; color:var(--a3); opacity:0; transform:translateY(6px); transition:opacity .3s, transform .3s; } .d-speed.show { opacity:1; transform:none; } .d-speed b { color:var(--text); } .d-plats { display:flex; align-items:center; gap:11px; flex-wrap:wrap; justify-content:center; opacity:0; transform:translateY(6px); transition:opacity .35s, transform .35s; } .d-plats.show { opacity:1; transform:none; } .d-plats-lbl { font-family:var(--mono); font-size:.7rem; color:var(--faint); letter-spacing:.1em; text-transform:uppercase; margin-right:4px; } /* linked accounts — bare white glyphs (flagged lookups tint danger-red) */ .d-plat-ic { width:16px; height:16px; flex:none; color:#fff; opacity:.88; } .d-plat-ic.bad { color:var(--danger); opacity:.95; } .d-factor.show .d-bar i { width:var(--w); } /* ---------------- linked-identity graph ---------------- */ .constel { position:relative; min-height:112vh; } .constel-pin { position:sticky; top:0; height:100svh; display:flex; align-items:center; overflow:hidden; perspective:1200px; } /* the wrap is a flex item here — force it full-width so the copy sits at the standard wrap LEFT edge (matching s3), instead of shrink-to-fit centering itself mid-screen */ .constel-pin .wrap { width:100%; } .constel-svg { position:absolute; inset:0; width:100%; height:100%; opacity:.92; will-change:transform; } .constel-copy { position:relative; z-index:3; max-width:480px; } /* type scale — standard section h2 tier (matches .sec-head h2) */ .constel-copy h2 { font-size:clamp(2rem,4.6vw,3.2rem); margin:14px 0 14px; } .constel-copy .lead { color:var(--dim); font-size:1.06rem; } .constel-stats { margin-top:26px; display:flex; flex-direction:column; gap:12px; max-width:420px; font-family:var(--mono); font-size:.82rem; color:var(--dim); } .constel-stats > div { display:flex; justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:8px; } .constel-stats b { color:#fda4af; } /* s4 — a slower, more deliberate build: type → fill → lead → stats */ .constel .rv-2.in { animation-delay:.7s; animation-duration:.95s; } .constel .rv-3.in { animation-delay:1.1s; animation-duration:.95s; } /* ---------------- faq ---------------- */ .faq { max-width:780px; margin:0 auto; } .faq details { position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:0 22px; margin-bottom:10px; background:rgba(255,255,255,.034); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); } .faq summary { cursor:pointer; padding:20px 0; font-family:var(--display); font-weight:600; font-size:1.06rem; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; } .faq summary::-webkit-details-marker { display:none; } .faq summary::after { content:"+"; color:var(--a1); font-size:1.4rem; transition:transform .35s cubic-bezier(.22,1,.36,1); } .faq details[open] summary::after { transform:rotate(45deg); } .faq details p { color:var(--dim); padding:0 0 20px; } /* ---------------- final cta ---------------- */ .final { position:relative; min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; overflow:hidden; } /* footer merged into the final scene (s10) — brand left · links right · legal bar below */ /* the closing copy is pinned to the SAME anchor the finale camera parks the core at (50%, 46% of the viewport — see network.js s10 frame): the scanner rings, the core and the text read as ONE instrument, exactly like the hero. (translate is used for the centering so the .rv reveal transform still composes with it.) */ .final-inner { position:absolute; left:0; right:0; top:46svh; translate:0 -50%; z-index:2; margin:0 auto; max-width:680px; padding:0 24px; } .final-foot { margin-top:auto; } /* short / narrow viewports: footer collisions are possible at 46svh — fall back to flow centering (the radar still tracks the core, which sits near centre anyway) */ @media (max-height:740px), (max-width:720px) { .final-inner { position:relative; top:auto; translate:none; margin:auto; } } .final-foot { position:relative; z-index:2; width:100%; text-align:left; color:var(--faint); font-size:.9rem; padding-bottom:20px; } .ff-grid { display:flex; justify-content:space-between; align-items:flex-start; gap:clamp(24px,4vw,60px); flex-wrap:wrap; margin-bottom:8px; } .ff-brand { max-width:300px; } .ff-brand p { font-size:.88rem; color:var(--dim); margin-top:10px; } .ff-links { display:flex; gap:clamp(28px,5vw,72px); } .final-foot .foot-bottom { margin-top:18px; padding-top:18px; } @media (max-width:720px){ .ff-grid { flex-direction:column; } } /* radar sits BENEATH the dimming veil (same layering as the hero, where the scanner draws on the world canvas under the vignette): the veil's radial falloff softens the ring edges so the scanner glows through the darkness instead of sitting crisply on top of it. */ .final-radar { position:absolute; inset:0; display:grid; place-items:center; z-index:0; pointer-events:none; } /* sized to MATCH the hero scanner: hero rings span ≈1.09×vmin of the viewport (SCALE·1.05·2); the radar draws its outer ring at 0.92× its canvas, so the canvas needs ≈119vmin for the two scanners to read as the same instrument. */ .final-radar canvas { width:119vmin; height:119vmin; opacity:.5; } /* hero-style vignette so the 3-D node graph FILLS the section like every other scene (visible through the centre, fading to bg at the edges) — just enough centre tint to keep the closing copy legible. */ .final-veil { position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(66% 60% at 50% 46%, rgba(7,7,16,.44) 12%, rgba(7,7,16,.66) 56%, var(--bg) 84%); /* fade the darker backdrop IN over the first ~260px so the hand-off from the scene above is a soft dissolve instead of a hard horizontal break */ -webkit-mask-image:linear-gradient(to bottom, transparent, #000 260px); mask-image:linear-gradient(to bottom, transparent, #000 260px); } .final-inner h2 { font-size:clamp(2.4rem,6vw,4rem); margin-bottom:18px; } .final-inner .lead { color:var(--dim); max-width:520px; margin:0 auto 30px; font-size:1.1rem; } .loop-hint { margin-top:28px; font-family:var(--mono); font-size:.78rem; color:var(--faint); } .replay { background:none; border:none; color:var(--a3); cursor:pointer; font-family:var(--mono); font-size:.78rem; } .replay:hover { color:var(--text); } /* ---------------- footer (merged into s10) ---------------- */ .foot-col h5 { color:var(--text); font-family:var(--display); font-size:.92rem; margin-bottom:14px; } .foot-col a { display:block; color:var(--dim); margin-bottom:9px; transition:color .2s; } .foot-col a:hover { color:var(--text); } .foot-bottom { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:40px; padding-top:24px; border-top:1px solid var(--border); font-family:var(--mono); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; } /* ---------------- responsive · ≤9 20px = stacked, native-scroll world ---------------- */ @media (max-width:920px) { /* Mobile header: KEEP the auth affordance visible — avatar chip when signed in, "Sign in" / login link when signed out — so logging in is always possible, and HIDE the bulky "Add the bot" CTA so it can't hog the header. The bot moves into the drawer (nav.js injects `.nav-bot-m`). `margin-left:auto` pushes the chip to the right next to the burger so it can't overlap the brand / CTA / hero. */ .nav-cta { margin-left:auto; } .nav-cta .btn-nav { display:none; } .nav-acct .h { display:none; } /* avatar-only chip on mobile */ .nav-acct { padding:5px; } .nav-burger { display:block; width:44px; height:44px; margin-left:10px; } /* burger opens a real dropdown sheet (was display:none with no .open rule — dead button) */ .nav-links { display:none; position:fixed; top:70px; left:0; right:0; z-index:54; flex-direction:column; align-items:stretch; gap:0; padding:6px 22px 14px; background:rgba(7,7,16,.96); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid var(--border); } .nav-links.open { display:flex; } .nav-links a { padding:15px 2px; font-size:1.04rem; border-bottom:1px solid var(--border); } .nav-links a:last-child { border-bottom:0; } /* dropdown items in mobile drawer */ .nd { border-bottom:1px solid var(--border); } .nd-btn { width:100%; justify-content:space-between; padding:15px 2px; font-size:1.04rem; } .nd-panel { position:static; transform:none; min-width:0; background:none; border:0; box-shadow:none; padding:0 0 12px; backdrop-filter:none; -webkit-backdrop-filter:none; opacity:1; pointer-events:auto; } .nd-panel::before { display:none; } .nd:not(.open) .nd-panel { display:none; } /* Neutralize the desktop centering transform on OPEN panels too: the base rule `.nd.open .nd-panel{transform:translateX(-50%)}` (specificity 0,3,0) otherwise beats the `.nd-panel{transform:none}` above (0,1,0) and shifts the inline mobile submenu off-screen to the left. This high-specificity reset keeps it on-screen. */ .nd.open .nd-panel { transform:none; } .nd-grid { grid-template-columns:1fr; } .nav-links .nav-bot-m { display:block; color:var(--a2); font-weight:600; } /* floating stat shards collide with the headline on narrow screens — swap for the proof strip */ .shards { display:none; } .hero-proof { display:flex; } .prob { grid-template-columns:1fr; } .problem-top { grid-template-columns:1fr; } .problem-canvas-col { display:none; } .section-pad.problem { height:auto; min-height:100svh; overflow:visible; } .hsec { height:auto; } .hpin { position:relative; height:auto; overflow:visible; padding:70px 0 36px; } .htrack { flex-direction:column; transform:none!important; padding:0 24px; gap:26px; } .hpanel { width:100%; opacity:1; } .hp-step { flex-direction:row; } .hnext-wrap { display:none; } .demo-body { grid-template-columns:1fr; } .check-layout { grid-template-columns:1fr; } .check-intro { order:1; margin-top:0; } .demo-shell { order:2; max-width:100%; } .constel { min-height:auto; } .constel-pin { position:relative; height:auto; padding:90px 0; } .hud { display:none; } .reveal-head, .fill-h, .fill-h .gt { --reveal:100%!important; } } @media (max-width:600px) { input,select,textarea { font-size:16px!important; } .hero h1 { font-size:clamp(2rem,9.6vw,5.4rem); } .hero-search { padding-left:14px; gap:8px; } .hero-search .btn { padding:14px 18px; } } /* ================================================================ v5 — back-half scenes (s5 solution · s7 two-ways-in) + footer trim ================================================================ */ /* ===== s5 · the solution — copy left, living world parked right ===== */ .sol-sec { min-height:100svh; display:flex; align-items:center; } /* content sits LOW in the frame — the upper half belongs to the chase-cam node graph */ .sol-wrap { display:grid; grid-template-columns:1.02fr 0.98fr; gap:clamp(28px,5vw,64px); align-items:center; width:100%; margin-top:clamp(60px,14vh,170px); } .sol-copy { max-width:560px; } .sol-copy h2 { font-size:clamp(2.1rem,4.6vw,3.4rem); margin:14px 0 18px; } .sol-lead { color:var(--dim); font-size:clamp(1rem,1.4vw,1.12rem); max-width:50ch; margin-bottom:clamp(22px,3.2vh,34px); } .sol-pillars { display:flex; flex-direction:column; gap:16px; } .sol-pillar { display:flex; gap:15px; align-items:flex-start; } .sp-ic { width:40px; height:40px; flex:none; border-radius:12px; display:grid; place-items:center; background:color-mix(in srgb,var(--a3) 13%,transparent); border:1px solid color-mix(in srgb,var(--a3) 30%,transparent); } .sp-ic svg { width:19px; height:19px; stroke:var(--a3); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .sp-txt h3 { font-size:1.04rem; font-weight:600; letter-spacing:-.01em; margin-bottom:3px; } .sp-txt p { color:var(--dim); font-size:.91rem; line-height:1.55; } /* s6 entrance — type → header fill → lead → id-card pops out of the world reticle → pillars slide in from the left, one at a time */ .sol-sec .rv-2.in { animation-delay:.55s; } @keyframes pillarIn { from{opacity:0;transform:translateX(-36px)} to{opacity:1;transform:none} } .sol-sec .sol-pillar.in { animation-name:pillarIn; animation-duration:.6s; } .sol-sec .sol-pillar:nth-child(1).in { animation-delay:1.5s; } .sol-sec .sol-pillar:nth-child(2).in { animation-delay:1.7s; } .sol-sec .sol-pillar:nth-child(3).in { animation-delay:1.9s; } @keyframes idcPop { 0%{opacity:0;transform:translateX(-44px) scale(.55)} 60%{opacity:1} 100%{opacity:1;transform:none} } .sol-stage .idcard.in { transform-origin:0% 38%; animation-name:idcPop; animation-duration:.85s; animation-delay:.95s; } .sol-stage { position:relative; min-height:min(440px,54vh); display:flex; align-items:center; justify-content:center; } /* ===== s5 · verified-identity card (replaces the wandering-dot stage) ===== */ /* pinned-HUD readability — the live panel sits at the top of the stack, solid enough to read while the world flows behind it */ .idcard { position:relative; z-index:4; width:min(420px,100%); display:flex; flex-direction:column; gap:14px; background:rgba(13,16,28,.85); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid color-mix(in srgb,var(--a3) 26%,transparent); border-radius:20px; padding:22px 22px 18px; box-shadow:0 30px 80px -34px color-mix(in srgb,var(--a3) 40%,transparent); } .idcard::before { content:""; position:absolute; inset:0; border-radius:20px; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.04); } .idc-head { display:flex; align-items:center; gap:12px; } .idc-av { width:42px; height:42px; flex:none; border-radius:12px; display:grid; place-items:center; font-weight:700; font-size:1.1rem; color:#04121a; background:linear-gradient(135deg,#67e8f9,var(--a3)); box-shadow:0 0 20px color-mix(in srgb,var(--a3) 50%,transparent); } .idc-id { display:flex; flex-direction:column; line-height:1.25; } .idc-id b { font-size:1rem; letter-spacing:-.01em; } .idc-id span { font-size:.76rem; color:var(--faint); } .idc-badge { margin-left:auto; font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; color:var(--a3); background:color-mix(in srgb,var(--a3) 14%,transparent); border:1px solid color-mix(in srgb,var(--a3) 34%,transparent); border-radius:999px; padding:4px 9px; white-space:nowrap; } .idc-sub { font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); } .idc-plats { display:flex; align-items:center; gap:14px; } /* linked accounts — bare white glyphs, no pills: just the public connections. Icons are mask-rendered from the official SVG files (assets/icons/), painted with currentColor so status tints (e.g. flagged red) come free. */ .pic { display:inline-block; background-color:currentColor; -webkit-mask:var(--ic) no-repeat center / contain; mask:var(--ic) no-repeat center / contain; } .ic-rb { --ic:url("/assets/icons/roblox.svg"); } .ic-fn { --ic:url("/assets/icons/fortnite.svg"); } .ic-mc { --ic:url("/assets/icons/minecraft.svg"); } .ic-x { --ic:url("/assets/icons/x.svg"); } .ic-bsky { --ic:url("/assets/icons/bluesky.svg"); } .ic-sp { --ic:url("/assets/icons/spotify.svg"); } .ic-ds { --ic:url("/assets/icons/discord.svg"); } .ic-yt { --ic:url("/assets/icons/youtube.svg"); } .ic-tw { --ic:url("/assets/icons/twitch.svg"); } .ic-gh { --ic:url("/assets/icons/github.svg"); } .ic-ig { --ic:url("/assets/icons/instagram.svg"); } .ic-ps { --ic:url("/assets/icons/playstation.svg"); } .ic-rd { --ic:url("/assets/icons/reddit.svg"); } .ic-tt { --ic:url("/assets/icons/tiktok.svg"); } .ic-xb { --ic:url("/assets/icons/xbox.svg"); } .ic-pp { --ic:url("/assets/icons/paypal.svg"); } .ic-rt { --ic:url("/assets/icons/riot.svg"); } .ic-web { --ic:url("/assets/icons/website.svg"); } .ic-fb { --ic:url("/assets/icons/facebook.svg"); } .ic-lol { --ic:url("/assets/icons/league.svg"); } .acct-ic { width:18px; height:18px; flex:none; color:#fff; opacity:.85; transition:opacity .2s; } .acct-ic:hover { opacity:1; } .srv-ic { width:15px; height:15px; flex:none; color:#fff; opacity:.8; } .idc-rec { display:flex; flex-direction:column; gap:7px; margin-top:2px; } .idc-reclbl { font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-bottom:1px; } .idc-row { display:flex; align-items:center; gap:9px; font-size:.86rem; padding:7px 11px; border-radius:9px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.07); } .idc-row span { color:var(--text); flex:1; } .idc-row b.ok { color:var(--a3); font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; } /* tracker re-acquire — the head swaps to the new creator's identity */ .idc-head.resync, .idc-plats.resync { animation:idcResync .55s cubic-bezier(.22,1,.36,1); } @keyframes idcResync { 0% { opacity:.15; transform:translateY(-7px); } 100% { opacity:1; transform:none; } } /* staged reveal — the "recognized" feed is NEWEST-FIRST: each arrival slides in at the TOP (from the front — slightly raised + scaled, like it's dropping out of the tether) while the older entries get pushed down a slot */ .idc-rec .idc-row { opacity:0; } .idc-rec .idc-row.on { opacity:1; transform:none; animation:idcRowIn .55s cubic-bezier(.22,1,.36,1); } .idc-rec .idc-row.on.push { animation:idcRowPush .45s cubic-bezier(.22,1,.36,1); } @keyframes idcRowIn { 0% { opacity:0; transform:translateY(-14px) scale(1.06); } 100% { opacity:1; transform:none; } } @keyframes idcRowPush { 0% { transform:translateY(-38px); } 100% { transform:none; } } @media (prefers-reduced-motion:reduce){ .idc-rec .idc-row{ opacity:1; transform:none; } } /* ===== s7 · two ways in — the dual CTA ===== */ .join-sec { min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:clamp(60px,9vh,100px) 0; } .join-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.4vw,26px); max-width:940px; margin:0 auto; width:100%; } .join-card { position:relative; overflow:hidden; display:flex; flex-direction:column; background:rgba(255,255,255,.04); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1px solid rgba(255,255,255,.1); border-radius:20px; padding:clamp(24px,3vw,36px); transition:transform .3s cubic-bezier(.22,1,.36,1), border-color .3s, box-shadow .3s; } .join-card::before { content:""; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--a1),var(--a2) 60%,var(--a3)); opacity:.6; } .join-card:hover { transform:translateY(-4px); border-color:rgba(255,255,255,.16); box-shadow:0 24px 70px -24px color-mix(in srgb,var(--a1) 32%,transparent); } .jc-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; } .jc-tag { font-family:var(--mono); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); } .jc-dot { width:10px; height:10px; border-radius:50%; } .jc-dot.s { background:var(--a1); box-shadow:0 0 12px var(--a1); } .join-card h3 { font-size:clamp(1.5rem,2.7vw,2.05rem); margin-bottom:10px; } .join-card > p { color:var(--dim); font-size:.96rem; line-height:1.6; margin-bottom:18px; } .jc-list { list-style:none; display:flex; flex-direction:column; gap:11px; margin-bottom:28px; } .jc-list li { position:relative; padding-left:28px; color:var(--text); font-size:.9rem; line-height:1.45; } .jc-list li::before { content:""; position:absolute; left:0; top:1px; width:17px; height:17px; border-radius:50%; background:color-mix(in srgb,var(--a3) 16%,transparent); border:1px solid color-mix(in srgb,var(--a3) 36%,transparent); } .jc-list li::after { content:""; position:absolute; left:5.5px; top:4.5px; width:4px; height:8px; border:solid var(--a3); border-width:0 2px 2px 0; transform:rotate(40deg); } .jc-cta { margin-top:auto; align-self:flex-start; } /* s8 entrance — maximalist, deliberate: type + fill first, then each card makes an ENTRANCE — a long rise from deep below with a slow-blooming accent flare — Create takes the stage, holds it, then Add answers. Contents follow inside each card as their own measured cascade; the subheader closes the scene. Nothing rushes; every element presents itself. */ @keyframes joinIn { 0% { opacity:0; transform:translateY(72px) scale(.9); } 45% { opacity:1; } 70% { box-shadow:0 42px 130px -24px color-mix(in srgb,var(--a3) 55%,transparent); } 100% { opacity:1; transform:none; box-shadow:0 0 0 transparent; } } .join-grid .deck-item.in { animation-name:joinIn; animation-duration:1.2s; animation-timing-function:cubic-bezier(.16,1,.3,1); animation-delay:calc(.7s + var(--i) * .65s); } .join-card .jc-top, .join-card h3, .join-card > p, .join-card .jc-list, .join-card .jc-cta { opacity:0; } .join-card.in .jc-top, .join-card.in h3, .join-card.in > p, .join-card.in .jc-list, .join-card.in .jc-cta { animation:riseIn .75s cubic-bezier(.16,1,.3,1) forwards; } .join-card.in .jc-top { animation-delay:calc(1.45s + var(--i) * .65s); } .join-card.in h3 { animation-delay:calc(1.63s + var(--i) * .65s); } .join-card.in > p { animation-delay:calc(1.81s + var(--i) * .65s); } .join-card.in .jc-list { animation-delay:calc(1.99s + var(--i) * .65s); } .join-card.in .jc-cta { animation-delay:calc(2.17s + var(--i) * .65s); } .join-card.shown .jc-top, .join-card.shown h3, .join-card.shown > p, .join-card.shown .jc-list, .join-card.shown .jc-cta { opacity:1!important; animation:none!important; } .join-sec .sec-head p.in { animation-delay:3.3s; animation-duration:1s; } /* v6 — conversion hierarchy: the account card is the primary path */ .join-card.jc-primary { border-color:color-mix(in srgb,var(--a3) 34%,transparent); box-shadow:0 24px 70px -30px color-mix(in srgb,var(--a3) 40%,transparent); } .join-card.jc-primary::before { opacity:1; height:3px; } .jc-badge { font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--a3); background:color-mix(in srgb,var(--a3) 14%,transparent); border:1px solid color-mix(in srgb,var(--a3) 30%,transparent); border-radius:999px; padding:3px 10px; } /* ===== footer trim ===== */ @media (max-width:920px) { .sol-wrap { grid-template-columns:1fr; margin-top:clamp(40px,8vh,90px); } /* the verified id-card is the belonging payoff — stack it under the pillars instead of hiding it */ .sol-stage { min-height:0; margin-top:10px; justify-content:flex-start; } .join-grid { grid-template-columns:1fr; max-width:520px; } } /* ===== s8 · FAQ — calm centred-graph breathe ===== */ .faq-sec { position:relative; min-height:100svh; display:flex; align-items:center; justify-content:center; overflow:hidden; } .faq-veil { position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(64% 56% at 50% 50%, color-mix(in srgb,var(--bg) 78%,transparent) 30%, transparent 80%); } .faq-wrap { position:relative; z-index:1; width:100%; } .faq-sec .sec-head { margin-bottom:clamp(22px,3.4vh,40px); } /* ===== s9 · FAQ — a reachable last anchor ===== */ /* ===== s4.5 · the storm clears — held calm exhale ===== */ .calm-sec { position:relative; min-height:100svh; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; } .calm-veil { position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(60% 52% at 50% 50%, color-mix(in srgb,var(--bg) 72%,transparent) 28%, transparent 78%); } .calm-inner { position:relative; z-index:1; max-width:680px; padding:0 24px; } .calm-inner h2 { font-size:clamp(2.4rem,5.4vw,3.8rem); margin:14px 0 16px; letter-spacing:-.02em; } .calm-lead { color:var(--dim); font-size:clamp(1.02rem,1.5vw,1.2rem); max-width:42ch; margin:0 auto; } /* s5 — the header materialises from the calm world first; the line under it exhales in well after */ .calm-sec .rv-2.in { animation-delay:1.15s; animation-duration:1.1s; } /* ===== s4.5 · the storm clears — held calm exhale (end) ===== */ /* ================================================================ v7 — responsive staging layer (touch · tablet · widescreen · perf) ================================================================ */ /* touch ergonomics — every tappable control ≥ 44px effective target */ @media (pointer:coarse) { .chip-btn { padding:11px 16px; font-size:.88rem; } .faq summary { padding:22px 0; } .nav-cta .btn { padding:12px 18px; } .scene-skip { padding:12px 10px; } } /* widescreen ≥ 1680px — let the canvas breathe, don't stretch the measure */ @media (min-width:1680px) { :root { --maxw:1320px; } .hero-inner { max-width:920px; } .hero h1 { font-size:clamp(2.7rem,6.5vw,6rem); } .sol-copy { max-width:620px; } } /* short viewports (split-screen laptops, small landscape windows): the centred hero copy grows into shard territory regardless of width — same swap as the narrow-width rule: shards out, proof strip in. */ @media (max-height:620px) { .shards { display:none; } .hero-proof { display:flex; } } /* small-screen perf — backdrop blurs are the single most expensive paint on mobile GPUs; swap glass for solid panels, soften the bg orbs, drop the grain */ @media (max-width:720px) { .pcard, .hp-card, .join-card, .idcard, .demo-shell, .faq details, .hero-search { backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } .prob .pcard, .hp-card, .join-card, .faq details { background:rgba(15,16,28,.82); } .idcard { background:rgba(13,16,28,.9); } .demo-shell { background:rgba(15,16,28,.88); } .bg .orb { filter:blur(70px); } .fx-grain { display:none; } } /* ================================================================ v7 — mobile homepage: strip the 3-D node world + scene choreography On phones (≤768px) the canvas-driven storytelling is heavy on GPU/ battery and reads poorly without the animated backdrop. Hide the canvas (network.js also bails at this width, so it never even inits) and the purely-atmospheric, canvas-dependent beats — leaving the clean hero + real content sections, which already stack via the ≤920px rules above and now sit on the site-palette bg gradient. Desktop untouched. ================================================================ */ @media (max-width:768px) { /* the 3-D node graph — gone (network.js skips init at this width too) */ #network { display:none !important; } /* scene-skip / "dive to the next scene" affordance — desktop-only choreography UI */ .scroll-cue, .scene-skip { display:none; } /* "and then it's quiet" — a pure mood beat that only lands with the node world calming behind it; on a static page it's just a near-empty full-height panel */ .calm-sec { display:none; } /* final-CTA radar sweep is a decorative canvas with nothing behind it now */ .final-radar { display:none; } } /* ---------------- production integration ---------------- */ /*

wraps the scenes for landmark semantics (skip link / a11y) without touching the shipped layout — display:contents keeps every child exactly where the design put it. */ main { display:contents; } /* skip-to-content (WCAG 2.4.1) — mirrors the sitewide .skip-link in tokens.css; duplicated here because the v7 homepage is intentionally self-contained. */ .skip-link { position:fixed; top:8px; left:8px; z-index:1000; transform:translateY(-150%); background:var(--surface); color:var(--text); border:1px solid var(--a1); border-radius:9px; padding:10px 16px; font-family:var(--sans); font-weight:600; font-size:.9rem; text-decoration:none; box-shadow:0 10px 30px rgba(0,0,0,.5); transition:transform .15s ease; } .skip-link:focus, .skip-link:focus-visible { transform:translateY(0); outline:2px solid var(--a1); outline-offset:2px; } @media (prefers-reduced-motion:reduce) { .skip-link { transition:none; } } /* ================================================================ READABILITY PASS — legibility over the live network + drifting orbs The copy floats directly on the animated world (canvas #network, the blurred orbs, bright zoomed clusters). Where text and a bright sweep share brightness it can wash out, so every text layer gets a soft contrast floor — kept gentle so the cinematic atmosphere survives. · plain copy / eyebrows → text-shadow · gradient-clipped heads → filter:drop-shadow (a text-shadow bleeds through the transparent clipped fill — see the .gt note up top) · two pure-text-over-graph columns get a faint blurred scrim ================================================================ */ /* plain body + eyebrow copy sitting on the world */ .hero .lead, .hero-searchlabel, .hero-subnote, .hero .chip, .problem-sub, .hp-intro .lead, .hp-card p, .sol-lead, .constel-copy .lead, .check-intro p, .calm-lead, .final-inner .lead, .sec-head p, .loop-hint { text-shadow:0 2px 12px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.5); } /* hero headline — the white line shadows cleanly; the .gt word keeps its own electric glow (a text-shadow would ghost through its clipped fill) */ .hero h1 { text-shadow:0 2px 16px rgba(0,0,0,.55); } .hero h1 .gt { text-shadow:none; } /* every section headline is gradient-clipped (.reveal-head / .fill-h) — drop-shadow lifts the glyphs off a bright scanner pass without dulling the ramp; the inner .gt's own glow still composes on top. */ .reveal-head, .fill-h { filter:drop-shadow(0 3px 14px rgba(0,0,0,.5)); } /* the constellation + solution copy are bare text columns laid over the busiest part of the node graph (the cluster is pushed to that side via data-focus) — a soft, blurred, left-anchored scrim gives them a floor of contrast no matter what's animating behind. Static; reduced-motion safe. */ .constel-copy, .sol-copy { position:relative; } .constel-copy::before, .sol-copy::before { content:""; position:absolute; z-index:-1; inset:-9% -13% -11% -15%; pointer-events:none; background:radial-gradient(62% 72% at 32% 46%, rgba(7,7,16,.6), rgba(7,7,16,.26) 56%, transparent 80%); filter:blur(16px); } /* ================================================================ ===== MOBILE (≤768px) — dedicated touch experience ===== The v7 homepage strips its 3-D scene choreography in the blocks above; THIS is the site-wide mobile polish every site.css page inherits (homepage · pricing · most compare pages): readable type, ≥44px tap targets, full-width CTAs, horizontally-scrollable data tables, iOS-zoom-proof inputs, and hard overflow guards. Appended last so these rules win the cascade at equal specificity. Desktop (≥769px) is completely untouched. ================================================================ */ /* ---- hard overflow guard: nothing may push the page sideways ---- */ @media (max-width:768px) { html, body { max-width:100%; overflow-x:clip; } img, svg, video, canvas, pre, table { max-width:100%; } pre, code { overflow-x:auto; } /* belt-and-suspenders: the fixed atmosphere layers never capture touch */ #network, .bg, .fx-vignette, .fx-grain, .hero-veil, .scene-flash, .lensframe, .final-radar, .final-veil { pointer-events:none !important; } } /* ---- iOS tap-to-zoom guard: every form control ≥16px ---- */ @media (max-width:768px) { input, select, textarea, .hero-search input, .demo-field input { font-size:16px !important; } } /* ---- touch targets: every interactive control ≥44px ---- */ @media (max-width:768px) { .btn, .btn-nav, .pp-btn, .nav-burger, .chip-btn, .nd-item, .nd-btn, .pp-seg button, .pp-acc-q, .faq summary, .nav-links > a, .nav-links a, .pp-link, .nd-all, .replay { min-height:44px; } /* center button labels so the larger target reads intentionally */ .btn, .pp-btn { display:inline-flex; align-items:center; justify-content:center; } .nav-burger { display:grid; place-items:center; } /* nd-item is a stacked label/desc — keep it left-aligned, just give it height */ .nd-item { justify-content:center; } } /* ---- full-width CTAs: thumb-friendly primary actions ---- */ @media (max-width:600px) { /* hero search: keep the icon+field on row 1, drop the button full-width below */ .hero-search { flex-wrap:wrap; padding:10px 10px 10px 16px; } .hero-search input { flex:1 1 auto; } .hero-search .btn { flex:1 0 100%; width:100%; margin-top:4px; } /* card / pricing / join CTAs stretch to the card edge */ .pp-act .pp-btn, .pp-bottom-row .pp-btn, .jc-cta, .jc-cta .btn, .join-card .btn { width:100%; } .pp-bottom-row { flex-direction:column; align-items:stretch; gap:12px; text-align:center; } } /* ---- responsive data tables — pricing + compare ---- `display:block` turns the into a scroll container while its row/cell children keep their default table display, so columns stay aligned. A faint edge fade hints there's more to swipe. */ @media (max-width:768px) { .pp-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; } main table, .pp-table, .article table, .post table, .prose table { display:block; width:max-content; min-width:100%; max-width:none; overflow-x:auto; -webkit-overflow-scrolling:touch; border-collapse:collapse; } /* keep cells from collapsing to one char; let the row scroll instead */ main table th, main table td, .article table th, .article table td { white-space:normal; min-width:max-content; } /* slim, on-brand scrollbar for the scroll containers */ .pp-table-wrap::-webkit-scrollbar, main table::-webkit-scrollbar, .article table::-webkit-scrollbar { height:6px; } .pp-table-wrap::-webkit-scrollbar-thumb, main table::-webkit-scrollbar-thumb, .article table::-webkit-scrollbar-thumb { background:color-mix(in srgb,var(--a2) 50%,transparent); border-radius:3px; } } /* ---- homepage stat strip: clean 2-up wrap on phones ---- */ @media (max-width:600px) { .hero-proof { gap:8px 14px; row-gap:8px; } .hero-proof i { display:none; } } /* drawer body-scroll lock (body.nav-open) lives in base.css */ /* ---- reduce hero crowding on the smallest phones ---- */ @media (max-width:380px) { .hero { padding:104px 16px 56px; } .wrap { padding:0 16px; } .hero .chip { font-size:.76rem; } } /* universal polish primitives — branded selection, keyboard focus ring, and the slim on-brand scrollbar — live in base.css (shared with the interior pages). The more-specific per-table scrollbar rules above still win where they apply. */