a containing block would shift every offsetTop */ body.future main{isolation:isolate} body.future main::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(900px 600px at 85% 10%,rgba(214,41,118,.10),transparent 60%), radial-gradient(800px 600px at 5% 60%,rgba(63,185,141,.10),transparent 60%), linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px) 0 0/56px 56px, linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px) 0 0/56px 56px, #040C08} body.future .section, body.future .section.alt, body.future .section.dark, body.future .check-sec, body.future .contact{background:transparent} body.future .section + .section, body.future .section + section{border-top:1px solid rgba(255,255,255,.06)} /* ---- header: dark glass ---- */ body.future .nav{background:rgba(4,12,8,.72);border-bottom:1px solid var(--edge); -webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px)} body.future .nav-links a{color:var(--ink)} body.future .nav-links a:hover{color:var(--neon)} body.future .nav .btn--ghost,body.future .nav-tool-btn{color:var(--ink);border-color:var(--edge);background:transparent} body.future .burger span{background:var(--ink)} body.future .nav-links.open{background:#06110C} /* ---- type ---- */ body.future .h2, body.future .section h3, body.future .case h3, body.future .card h3{color:#F3FBF6} body.future .h2{background:linear-gradient(180deg,#FFFFFF 30%,#BFE3D2); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} body.future .lead,body.future .ac-why{color:var(--muted)} /* kickers become little "live" tags */ body.future .kicker{display:inline-flex;padding:6px 12px 6px 10px;border-radius:999px; border:1px solid var(--edge);background:var(--glass);color:#BFF3DC;gap:8px} body.future .kicker::before{width:7px;height:7px;border-radius:50%;background:#FF4D6D; box-shadow:0 0 0 0 rgba(255,77,109,.6);animation:liveDot 2s ease-out infinite;transform:none} @keyframes liveDot{0%{box-shadow:0 0 0 0 rgba(255,77,109,.55)}80%,100%{box-shadow:0 0 0 8px rgba(255,77,109,0)}} /* ---- buttons: lit from within ---- */ body.future .btn{box-shadow:0 0 0 1px rgba(255,181,71,.35),0 10px 30px -10px rgba(240,144,24,.75)} body.future .btn:hover{box-shadow:0 0 0 1px rgba(255,181,71,.6),0 14px 40px -10px rgba(240,144,24,.95)} body.future .btn--ghost{background:var(--glass);color:var(--ink);border-color:var(--edge);box-shadow:none} body.future .btn--ghost:hover{background:var(--glass-2);color:#fff;border-color:rgba(255,255,255,.4)} /* ---- glass cards ---- */ body.future .why-card, body.future .case, body.future .cmp, body.future .faq details, body.future .step, body.future .ccard, body.future .check-card, body.future .check-box{background:var(--glass);border:1px solid var(--edge); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} body.future .why-card{transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease} body.future .why-card:hover{border-color:rgba(255,181,71,.45); box-shadow:0 0 0 1px rgba(255,181,71,.2),0 20px 60px -24px rgba(214,41,118,.55)} body.future .why-n{background:var(--ig);-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent} body.future .section .step,body.future .section.dark .step{background:var(--glass);border:1px solid var(--edge)} body.future .step h3,body.future .section.dark .step h3{color:#F3FBF6} body.future .step p{color:var(--muted)} /* comparison table on dark */ body.future .cmp-head{background:rgba(255,255,255,.06)} body.future .cmp-row .cmp-us{background:rgba(240,144,24,.12)} body.future .cmp b.yes{background:#0A7355;color:#fff;box-shadow:0 0 16px rgba(91,224,174,.35)} body.future .cmp b.some{background:rgba(240,144,24,.16);color:#FFC061} body.future .cmp b.no{background:rgba(255,255,255,.08);color:#A9BEB3} /* ---- case studies: the picker reads like a row of stories ---- */ body.future .work-pick button{background:var(--glass);border:1px solid var(--edge);color:var(--ink)} body.future .work-pick button span,body.future .work-pick button small{color:var(--muted)} body.future .work-pick button[aria-selected="true"]{background:#10231A;color:#fff;border-color:transparent; box-shadow:0 0 0 2px #040C08,0 0 0 4px #D62976,0 12px 30px -10px rgba(214,41,118,.7)} body.future .work-pick button[aria-selected="true"] span, body.future .work-pick button[aria-selected="true"] small{color:#FFC061} body.future .case-stats b{background:linear-gradient(90deg,#5BE0AE,#FFC061);-webkit-background-clip:text; background-clip:text;-webkit-text-fill-color:transparent} /* ---- clients: story rings ---- */ body.future .clients{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:22px 14px;isolation:isolate} body.future .client{aspect-ratio:1;border-radius:50%;overflow:visible; box-shadow:0 0 0 3px #040C08;margin:6px} body.future .client > a,body.future .client > img{border-radius:50%} body.future .client::before{content:"";position:absolute;inset:-6px;border-radius:50%;z-index:-1; background:rgba(255,255,255,.16)} body.future .client.has-case::before{background:conic-gradient(from 210deg,#FEDA75,#FA7E1E,#D62976,#962FBF,#4F5BD5,#FEDA75); animation:ringSpin 6s linear infinite} body.future .client.has-case::after{display:none} body.future .client img{max-width:74%;max-height:74%} body.future .client-name{position:absolute;left:50%;top:calc(100% + 10px);transform:translateX(-50%); width:max-content;max-width:120px;font-size:.75rem;font-weight:600;color:var(--muted);text-align:center; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none; background:#040C08;padding:0 4px;border-radius:4px} body.future .client.has-case .client-name{color:#F3FBF6} body.future .clients li{margin-bottom:18px} @keyframes ringSpin{to{transform:rotate(360deg)}} body.future .case-dot{background:var(--ig);box-shadow:none} /* ---- the hero: floating notification chips from real launches ---- */ body.future .hero-chips{position:absolute;inset:0;pointer-events:none;z-index:2} body.future .hero-chip{position:absolute;display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px; border-radius:16px;background:rgba(10,24,18,.72);border:1px solid var(--edge);color:#F3FBF6; font-size:.8rem;line-height:1.25;white-space:nowrap; -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); box-shadow:0 16px 40px -18px rgba(0,0,0,.8);animation:chipFloat 7s ease-in-out infinite} body.future .hero-chip b{display:block;font-weight:800} body.future .hero-chip small{display:block;font-size:.75rem;color:#BFE3D2} body.future .chip-av{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center; font-family:var(--display);font-size:1rem;color:#fff;background:#10231A; box-shadow:0 0 0 2px #0A1812,0 0 0 4px #D62976} body.future .chip-live{flex:none;padding:3px 7px;border-radius:6px;background:#C8102E;color:#fff; font-size:.75rem;font-weight:800;letter-spacing:.08em} body.future .chip-heart{color:#FF4D6D} body.future .hero-chip:nth-child(1){top:11%;right:5%;animation-delay:-1s} body.future .hero-chip:nth-child(2){bottom:7%;right:25%;animation-delay:-3s} body.future .hero-chip:nth-child(3){bottom:12%;right:3%;animation-delay:-5s} body.future .hero-chip:nth-child(4){top:8%;right:27%;animation-delay:-2s} @keyframes chipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} @media (max-width:1199px){body.future .hero-chips{display:none}} /* ---- the rest of the page on dark ---- */ body.future .guide-card{background:linear-gradient(135deg,rgba(214,41,118,.14),rgba(63,185,141,.10)); border-color:rgba(255,255,255,.14)} body.future .guide-f input{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.22)} body.future .check-form{background:rgba(255,255,255,.05);border:1px solid var(--edge);color:var(--ink)} body.future .check-form .check-sub,body.future .check-f{color:var(--muted)} body.future .check-f input,body.future .check-f select{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.2)} body.future .check-f select option{color:#10231A} body.future .check-form .btn--ghost{background:var(--glass);color:var(--ink);border-color:var(--edge)} body.future .check-msg.is-good{color:#5BE0AE} body.future .check-msg.is-bad{color:#FF8A7A} body.future .faq summary{color:#F3FBF6} body.future .faq details[open]{border-color:rgba(255,181,71,.35)} body.future .ticker{background:rgba(255,255,255,.03);border-color:var(--edge)} body.future .foot{background:#030906} @media (prefers-reduced-motion:reduce){ body.future .hero-chip,body.future .client.has-case::before,body.future .kicker::before{animation:none} } /* ---- header: one login that becomes "Dashboard", visible at every width ---- */ .nav-login{white-space:nowrap;margin-left:auto} @media (max-width:1179px){ .nav-login{min-height:44px;padding:8px 14px;font-size:.84rem;margin-right:6px} } @media (max-width:359px){.nav-login{padding:8px 10px;font-size:.78rem}} /* ---- shorter page (Sep 2026) ---- */ @media (min-width:640px){ body.future .section{padding-top:clamp(52px,5.5vw,76px);padding-bottom:clamp(52px,5.5vw,76px)} } .contact-quick{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:18px 0 22px} .contact-quick a{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border-radius:999px; border:1px solid var(--edge,rgba(255,255,255,.14));background:var(--glass,rgba(255,255,255,.05)); color:#EEF7F2;font-weight:700;font-size:.9rem;text-decoration:none;overflow-wrap:anywhere} .contact-quick a:first-child{background:#0B7A3E;border-color:#0B7A3E;color:#fff} .contact-quick a:hover{border-color:rgba(255,181,71,.5)} .brief-more{margin:0} .brief-more summary{display:flex;align-items:center;min-height:44px;cursor:pointer;font-weight:700; font-size:.9rem;color:#BFE3D2;list-style:none} .brief-more summary::-webkit-details-marker{display:none} .brief-more summary::before{content:"+";display:inline-grid;place-items:center;width:22px;height:22px; margin-right:8px;border-radius:50%;border:1px solid rgba(255,255,255,.3);font-weight:800} .brief-more[open] summary::before{content:"\2212"} .brief-more label{margin-top:4px} /* the guide: one row, email and the button */ @media (min-width:640px){ body.future .guide-form{grid-template-columns:minmax(0,1fr) auto;align-items:end} body.future .guide-form .guide-msg{grid-column:1/-1} body.future .guide-form .btn{justify-self:stretch} } /* phones: the client rings are a story tray you swipe, not a wall you scroll past */ @media (max-width:639px){ body.future .clients{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity; margin:18px -16px 0;padding:10px 24px 30px;scroll-padding-inline:24px;scrollbar-width:none} body.future .clients::-webkit-scrollbar{display:none} body.future .client{flex:0 0 74px;width:74px;height:74px;margin:6px 4px;scroll-snap-align:start} body.future .clients li{margin-bottom:0} body.future .client-name{max-width:84px;font-size:.75rem} }