/* Connect 3 public scrollytelling page */
html.story-active { scroll-behavior: smooth; background: #08050d; }
html.story-active body { overflow-x: hidden; background: #08050d; }
.story-page { --p:#8b5cf6; --pl:#b9a3ff; --ink:#08050d; --muted:rgba(244,240,255,.62); min-height:100vh; overflow:clip; color:#f7f4ff; background:var(--ink); font-family:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.story-page *,.story-page *::before,.story-page *::after { box-sizing:border-box; }
.story-page a { color:inherit; text-decoration:none; }
.story-progress { position:fixed; z-index:100; inset:0 0 auto; height:2px; background:#ffffff0d; }
.story-progress i { display:block; width:calc(var(--progress)*100%); height:100%; background:linear-gradient(90deg,#6d3abe,var(--pl)); box-shadow:0 0 18px #8b5cf6cc; }

/* Fixed navigation and one canonical logo, cropped to its visible mark. */
.story-header { position:fixed; z-index:90; inset:0 0 auto; height:82px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(1.25rem,4.5vw,5rem) 0 clamp(1.5rem,7vw,8rem); background:linear-gradient(#08050dd9,transparent); }
.story-header nav { display:flex; align-items:center; gap:clamp(1.2rem,3vw,2.5rem); font-size:.82rem; font-weight:600; }
.story-header nav a { opacity:.72; transition:.2s; }.story-header nav a:hover { opacity:1; color:var(--pl); }
.story-header .story-login { padding:.62rem 1rem; opacity:1; border:1px solid #a78bfa6b; border-radius:99px; background:#8b5cf61a; }
.story-brand-mark { position:relative; display:block; width:47px; height:33px; overflow:hidden; }
.story-brand-mark img { position:absolute; width:119px; max-width:none; height:auto; left:-36px; top:-23px; }

/* Opening frame. */
.story-hero { position:relative; min-height:100svh; display:grid; grid-template-columns:minmax(0,.95fr) minmax(380px,1.05fr); align-items:center; gap:2rem; padding:8rem clamp(1.5rem,8vw,9rem) 5rem; isolation:isolate; }
.hero-grid { position:absolute; z-index:-3; inset:0; background-image:linear-gradient(#a78bfa09 1px,transparent 1px),linear-gradient(90deg,#a78bfa09 1px,transparent 1px); background-size:64px 64px; mask-image:radial-gradient(circle at 72% 46%,#000,transparent 58%); }
.hero-glow { position:absolute; z-index:-2; width:min(70vw,880px); aspect-ratio:1; right:-5%; top:2%; border-radius:50%; background:radial-gradient(circle,#6d3abe61,#2d124e1f 44%,transparent 70%); filter:blur(16px); animation:breathe 8s ease-in-out infinite alternate; }
@keyframes breathe { to { transform:scale(1.12) translate(-3%,2%); opacity:.8; } }
.hero-copy { position:relative; z-index:2; max-width:700px; }.hero-copy>span,.finale-copy>span { display:inline-block; margin-bottom:1.35rem; color:var(--pl); font-size:.7rem; font-weight:700; letter-spacing:.28em; }
.hero-copy h1 { max-width:11ch; margin:0; font-size:clamp(3.3rem,6.8vw,7rem); font-weight:500; line-height:.93; letter-spacing:-.065em; }
.hero-copy h1 em,.finale-copy h2 em { color:var(--pl); font-style:normal; }.hero-copy p { max-width:35rem; margin:2rem 0 0; color:var(--muted); font-size:clamp(1rem,1.4vw,1.17rem); line-height:1.75; }
.hero-product { position:relative; display:grid; place-items:center; min-height:560px; }.hero-product img { position:relative; z-index:2; width:min(48vw,620px); min-width:420px; filter:drop-shadow(0 38px 45px #000a); animation:float 5.5s ease-in-out infinite; }
.product-halo { position:absolute; width:min(39vw,500px); aspect-ratio:1; border:1px solid #a78bfa24; border-radius:50%; box-shadow:0 0 100px #6d3abe38,inset 0 0 90px #8b5cf614; animation:spin 25s linear infinite; }.product-halo::before,.product-halo::after { content:""; position:absolute; inset:11%; border:1px dashed #a78bfa26; border-radius:50%; }.product-halo::after { inset:27%; border-style:solid; }
.product-shadow { position:absolute; bottom:15%; width:54%; height:8%; border-radius:50%; background:#000b; filter:blur(22px); }
@keyframes float { 50% { transform:translateY(-16px) rotateX(1.5deg); } } @keyframes spin { to { transform:rotate(360deg); } }
.scroll-cue { position:absolute; z-index:3; left:50%; bottom:2rem; display:flex; flex-direction:column; align-items:center; gap:.65rem; color:#ffffff6b; font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; transform:translateX(-50%); }.scroll-cue>i { position:relative; width:1px; height:42px; overflow:hidden; background:#ffffff24; }.scroll-cue>i::after { content:""; position:absolute; inset:-100% 0 auto; height:100%; background:var(--pl); animation:scroll-cue 2.2s ease-in-out infinite; } @keyframes scroll-cue { 60%,100% { transform:translateY(200%); } }

/* Scroll narrative. */
.story-narrative { display:grid; grid-template-columns:minmax(0,.9fr) minmax(480px,1.1fr); padding:0 clamp(1.5rem,7vw,8rem); background:radial-gradient(circle at 76% 40%,#2d124e29,transparent 38%); }
.story-feature { min-height:88vh; max-width:560px; display:flex; flex-direction:column; justify-content:center; padding:8rem 2rem 8rem 0; opacity:.22; transform:translateY(3rem); transition:opacity .6s,transform .6s; }.story-feature.active { opacity:1; transform:none; }
.feature-meta { display:flex; align-items:center; gap:.7rem; margin-bottom:1.6rem; color:var(--pl); font-size:.66rem; font-weight:650; letter-spacing:.2em; text-transform:uppercase; }.feature-meta i { width:36px; height:1px; background:#a78bfa80; }
.story-feature h2 { max-width:12ch; margin:0; font-size:clamp(2.4rem,5vw,5.2rem); font-weight:500; line-height:.98; letter-spacing:-.055em; }.story-feature h3 { margin:1.65rem 0 0; color:var(--pl); font-size:clamp(1rem,1.6vw,1.28rem); font-weight:520; }.story-feature p { max-width:31rem; margin:1rem 0 0; color:var(--muted); font-size:clamp(.95rem,1.3vw,1.08rem); line-height:1.72; }
.story-stage { position:sticky; top:0; height:100vh; display:grid; place-items:center; overflow:hidden; }.story-stage::before { content:""; position:absolute; width:min(40vw,570px); aspect-ratio:1; border:1px solid #a78bfa17; border-radius:50%; }.stage-glow { position:absolute; width:min(45vw,650px); aspect-ratio:1; border-radius:50%; background:#4c1d7c29; filter:blur(65px); }.stage-label { position:absolute; z-index:4; top:14%; left:7%; right:7%; display:flex; justify-content:space-between; color:#ffffff4d; font-size:.61rem; letter-spacing:.18em; text-transform:uppercase; }.stage-label b { color:#a78bfaa6; }.stage-dots { position:absolute; z-index:4; right:3%; display:flex; flex-direction:column; gap:7px; }.stage-dots i { width:3px; height:3px; border-radius:2px; background:#ffffff2e; transition:.25s; }.stage-dots i.active { height:19px; background:var(--pl); }
.story-scene { position:relative; width:min(42vw,610px); aspect-ratio:1; display:grid; place-items:center; animation:scene-in .65s cubic-bezier(.2,.8,.2,1) both; } @keyframes scene-in { from { opacity:0; transform:scale(.92) translateY(25px); filter:blur(10px); } }
.scene-number { position:absolute; z-index:-1; color:#a78bfa09; font-size:clamp(12rem,24vw,23rem); font-weight:700; line-height:1; letter-spacing:-.1em; }.story-orbit { position:absolute; z-index:-1; width:78%; aspect-ratio:1; border:1px solid #a78bfa1a; border-radius:50%; }.orbit-b { width:56%; border-style:dashed; animation:spin 22s linear infinite reverse; }

/* Encryption. */
.story-shield { position:relative; width:205px; height:245px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:2px solid #a78bfacc; background:linear-gradient(145deg,#8b5cf62e,#2d124e40); box-shadow:0 0 80px #8b5cf638,inset 0 0 55px #8b5cf61a; clip-path:polygon(50% 0,94% 16%,88% 72%,50% 100%,12% 72%,6% 16%); }.story-shield::before,.story-shield::after { content:""; position:absolute; inset:-32px; border:1px solid #a78bfa24; border-radius:50%; animation:pulse 2.8s ease-out infinite; }.story-shield::after { animation-delay:1.4s; } @keyframes pulse { to { inset:-95px; opacity:0; } }
.story-lock { width:54px; height:45px; margin-bottom:1.2rem; border:2px solid #c4b5fd; border-radius:8px; }.story-lock i { display:block; width:31px; height:27px; margin:-26px auto 0; border:2px solid #c4b5fd; border-bottom:0; border-radius:18px 18px 0 0; }.story-shield b { font-size:.7rem; letter-spacing:.2em; }.story-shield span { margin-top:.5rem; color:#ffffff66; font-size:.43rem; letter-spacing:.15em; }

/* Interface scenes. */
.story-window { width:82%; overflow:hidden; border:1px solid #a78bfa4d; border-radius:14px; background:#0c0814e8; box-shadow:0 30px 80px #0007,0 0 60px #6d3abe1f; backdrop-filter:blur(16px); }.story-window-bar { height:38px; display:flex; align-items:center; gap:7px; padding:0 13px; border-bottom:1px solid #ffffff12; }.story-window-bar i { width:6px; height:6px; border-radius:50%; background:#ffffff2e; }.story-window-bar span { margin-left:auto; color:#ffffff57; font-size:.51rem; letter-spacing:.14em; }
.avid-body { display:grid; grid-template-columns:.42fr 1fr; min-height:205px; }.avid-body aside { display:flex; flex-direction:column; gap:11px; padding:20px 14px; border-right:1px solid #ffffff0f; color:#ffffff73; font-size:.48rem; }.avid-body aside b { margin-bottom:5px; color:var(--pl); letter-spacing:.15em; }.avid-body main { padding:18px; }.avid-monitor { height:100%; display:grid; place-items:center; border-radius:5px; background:linear-gradient(155deg,#191020,#342044); }.avid-monitor i { width:42px; aspect-ratio:1; display:grid; place-items:center; padding-left:3px; border:1px solid #ffffff42; border-radius:50%; color:#ffffff9e; font-style:normal; font-size:.72rem; }.avid-timeline { height:74px; display:flex; flex-direction:column; justify-content:center; gap:5px; padding:0 15px; border-top:1px solid #ffffff0f; }.avid-timeline i { width:var(--w); height:4px; border-radius:2px; background:linear-gradient(90deg,#6d3abe,var(--pl)); animation:grow .8s ease both; } @keyframes grow { from { width:0; } }

/* Bins and Link. */
.story-bins { width:94%; display:flex; align-items:center; justify-content:center; gap:1rem; }.bin-card { width:175px; min-height:205px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid #a78bfa4d; border-radius:12px; background:linear-gradient(145deg,#211630f2,#0c0814f2); box-shadow:0 24px 55px #0006; transform:rotate(-4deg); }.bin-card-new { transform:rotate(4deg); }.bin-card small,.bin-card span { color:#ffffff66; font-size:.48rem; letter-spacing:.15em; }.bin-card b { margin-top:.3rem; font-size:1.8rem; letter-spacing:.1em; }.bin-card>i { margin:1.2rem 0 .7rem; color:var(--pl); font-style:normal; }.bin-lock { width:22px; height:18px; border:1px solid var(--pl); border-radius:3px; }.bin-lock::before { content:""; display:block; width:12px; height:11px; margin:-10px auto 0; border:1px solid var(--pl); border-bottom:0; border-radius:7px 7px 0 0; }.bin-refresh { color:var(--pl); font-size:2rem; animation:spin 2.2s ease-in-out infinite; }
.link-window { width:72%; }.link-state { margin:1.1rem; padding:.8rem; border:1px solid #10b98133; border-radius:7px; color:#ffffffb8; background:#10b9810f; font-size:.62rem; }.link-state i,.online i { display:inline-block; width:6px; height:6px; margin-right:.5rem; border-radius:50%; background:#10b981; box-shadow:0 0 10px #10b981; }.link-chat { display:flex; flex-direction:column; gap:.65rem; padding:0 1.1rem 1.2rem; }.link-chat span { align-self:flex-start; padding:.65rem .8rem; border-radius:4px 9px 9px 9px; color:#ffffff94; background:#8b5cf617; font-size:.56rem; }.link-chat span+span { align-self:flex-end; background:#8b5cf63d; }.link-chat b { display:block; margin-bottom:.16rem; color:#c4b5fd; }.link-window footer { display:flex; gap:1.2rem; padding:.8rem 1.1rem; border-top:1px solid #ffffff12; color:#ffffff42; font-size:.46rem; letter-spacing:.12em; }.link-window footer b { margin-left:auto; color:#10b981; }

/* OD, Stream and storage. */
.od-flow { width:96%; display:flex; align-items:center; justify-content:center; gap:1.1rem; }.od-library,.od-result { width:185px; min-height:190px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:1.5rem; border:1px solid #a78bfa40; border-radius:14px; background:#0c0814db; }.od-library b,.od-result b { font-size:2.5rem; line-height:1; }.od-library>span,.od-result>span { margin:.35rem 0 1rem; color:#ffffff59; font-size:.48rem; letter-spacing:.16em; }.od-library>div { display:flex; flex-wrap:wrap; gap:5px; }.od-library i { width:12px; height:15px; border:1px solid #ffffff2e; border-radius:2px; }.od-library i.used { border-color:var(--pl); background:#8b5cf673; box-shadow:0 0 8px #8b5cf659; }.od-flow>strong { color:var(--pl); font-size:2rem; }.od-result { width:165px; min-height:175px; border-color:#10b9813d; }.od-result b { color:var(--pl); }.od-result small { color:#10b981; font-size:.44rem; letter-spacing:.12em; }
.stream-flow { width:98%; display:flex; align-items:center; justify-content:center; }.stream-end,.stream-core { flex:0 0 auto; width:92px; aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid #a78bfa47; border-radius:50%; color:#c4b5fd; background:#0c0814e6; font-size:1.1rem; font-weight:650; }.stream-end small,.stream-core span { margin-top:.25rem; color:#ffffff59; font-size:.42rem; letter-spacing:.14em; }.stream-core { width:140px; border-radius:16px; background:linear-gradient(145deg,#6d3abe4d,#0c0814f0); box-shadow:0 0 50px #6d3abe38; }.stream-core b { font-size:.88rem; letter-spacing:.12em; }.signal { width:65px; display:flex; flex-direction:column; gap:8px; }.signal i { height:1px; background:linear-gradient(90deg,transparent,var(--pl)); animation:signal 1.4s linear infinite; }.signal i:nth-child(2){animation-delay:-.4s}.signal i:nth-child(3){animation-delay:-.8s}.signal-out i{background:linear-gradient(90deg,var(--pl),transparent)} @keyframes signal { 50% { opacity:.25; transform:translateX(8px); } }.stream-live { color:#fff; font-size:.75rem; }.stream-live>i { width:7px; height:7px; margin-bottom:.4rem; border-radius:50%; background:#ef4444; box-shadow:0 0 12px #ef4444; animation:live 1.4s infinite; } @keyframes live { 50% { opacity:.3; } }
.storage-visual { width:88%; }.storage-visual header { display:flex; justify-content:space-between; margin-bottom:.8rem; color:#ffffff59; font-size:.55rem; letter-spacing:.15em; }.storage-visual header b { color:var(--pl); }.data-lanes { display:flex; flex-direction:column; gap:10px; padding:1.4rem; border:1px solid #a78bfa33; border-radius:14px; background:#0c0814cc; }.data-lanes i { position:relative; height:9px; overflow:hidden; border-radius:99px; background:#ffffff0f; }.data-lanes i::before { content:""; position:absolute; left:-30%; width:28%; height:100%; border-radius:inherit; background:linear-gradient(90deg,transparent,var(--p),#c4b5fd); animation:data 1.2s linear infinite; }.data-lanes i:nth-child(2)::before{animation-delay:-.55s}.data-lanes i:nth-child(3)::before{animation-delay:-.25s}.data-lanes i:nth-child(4)::before{animation-delay:-.85s}@keyframes data{to{left:105%}}.speed { margin-top:1.4rem; text-align:right; }.speed b { font-size:5rem; font-weight:500; line-height:.8; letter-spacing:-.07em; }.speed>span { margin-left:.35rem; color:var(--pl); font-size:1.2rem; }.speed small { display:block; margin-top:.8rem; color:#ffffff4d; font-size:.48rem; letter-spacing:.15em; }

/* Remote sync, mobile and cloud. */
.sync-visual { width:92%; display:flex; align-items:center; justify-content:space-between; }.sync-place { display:flex; flex-direction:column; align-items:center; gap:.7rem; color:#ffffff66; font-size:.48rem; letter-spacing:.13em; }.sync-place>i { display:block; }.post { width:72px; height:84px; border:1px solid #a78bfa4d; border-radius:6px 6px 0 0; background:repeating-linear-gradient(90deg,transparent 0 12px,#a78bfa1f 12px 17px); }.dish { width:66px; height:50px; border:2px solid var(--pl); border-top-color:transparent; border-left-color:transparent; border-radius:50%; transform:rotate(8deg); }.sync-link { position:relative; flex:1; height:150px; display:flex; align-items:flex-end; justify-content:center; margin:0 1rem; border-bottom:5px solid #ffffff12; }.sync-link::after { content:""; position:absolute; bottom:-5px; left:0; width:86%; height:5px; border-radius:5px; background:linear-gradient(90deg,#6d3abe,var(--pl)); box-shadow:0 0 13px #8b5cf673; animation:grow 1.4s ease both; }.satellite { position:absolute; top:0; color:#c4b5fd; font-size:1.5rem; transform:rotate(45deg); }.sync-link>b,.sync-link>span { position:absolute; bottom:-25px; left:0; color:var(--pl); font-size:.43rem; letter-spacing:.11em; }.sync-link>span { left:auto; right:0; color:#ffffff47; }
.story-phone { position:relative; width:225px; height:440px; overflow:hidden; padding:3.2rem 1.15rem 1.1rem; border:5px solid #251a30; border-radius:38px; background:linear-gradient(165deg,#160e20,#09060e); box-shadow:0 40px 80px #0008,0 0 0 1px #a78bfa47; transform:rotate(3deg); }.phone-island { position:absolute; top:11px; left:50%; width:68px; height:18px; border-radius:12px; background:#030205; transform:translateX(-50%); }.story-phone>small { color:var(--pl); font-size:.43rem; letter-spacing:.18em; }.story-phone>b { display:block; margin-top:.25rem; font-size:1.4rem; font-weight:520; }.online { display:block; margin-top:.9rem; color:#ffffff85; font-size:.55rem; }.phone-devices { display:flex; flex-direction:column; gap:.55rem; margin-top:1.2rem; }.phone-devices>span { padding:.7rem; border:1px solid #a78bfa1f; border-radius:8px; background:#8b5cf60f; font-size:.55rem; }.phone-devices small { display:block; margin-top:.2rem; color:#10b981; font-size:.42rem; }
.cloud-visual { position:relative; width:92%; aspect-ratio:1; }.cloud-visual::before,.cloud-visual::after { content:""; position:absolute; inset:14%; border:1px solid #a78bfa24; border-radius:50%; }.cloud-visual::after { inset:28%; border-style:dashed; animation:spin 28s linear infinite; }.cloud-core { position:absolute; z-index:2; inset:36%; display:grid; place-items:center; overflow:hidden; border:1px solid #a78bfa66; border-radius:50%; background:radial-gradient(circle,#6d3abe66,#0c0814f0); box-shadow:0 0 60px #6d3abe47; }.cloud-core .story-brand-mark { transform:scale(.65); }.cloud-node { position:absolute; z-index:2; display:flex; flex-direction:column; align-items:center; gap:.45rem; color:#ffffff73; font-size:.44rem; letter-spacing:.12em; }.cloud-node i { width:38px; height:38px; border:1px solid #a78bfa52; border-radius:10px; background:#0c0814e0; box-shadow:0 0 24px #6d3abe33; }.cloud-node::after { content:""; position:absolute; z-index:-1; width:120px; height:1px; top:19px; left:19px; background:linear-gradient(90deg,#a78bfa80,transparent); transform-origin:left; }.cloud-node.n1{top:5%;left:44%}.cloud-node.n1::after{transform:rotate(82deg)}.cloud-node.n2{top:27%;right:4%}.cloud-node.n2::after{transform:rotate(153deg)}.cloud-node.n3{right:16%;bottom:8%}.cloud-node.n3::after{transform:rotate(220deg)}.cloud-node.n4{left:13%;bottom:11%}.cloud-node.n4::after{transform:rotate(318deg)}.cloud-node.n5{top:28%;left:1%}.cloud-node.n5::after{transform:rotate(28deg)}

.facilities-window { width:86%; }
.facilities-summary { display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid #ffffff12; }
.facilities-summary span { display:flex; flex-direction:column; gap:.35rem; padding:1.15rem; border-right:1px solid #ffffff12; }.facilities-summary span:last-child { border:0; }
.facilities-summary small { color:#ffffff59; font-size:.43rem; letter-spacing:.12em; }.facilities-summary b { color:#c4b5fd; font-size:1.65rem; font-weight:520; }
.facilities-fleet { display:flex; flex-direction:column; padding:.65rem 1rem; }
.facilities-fleet>span { display:grid; grid-template-columns:8px 1fr auto auto; align-items:center; gap:.65rem; min-height:38px; border-bottom:1px solid #ffffff0d; font-size:.54rem; }.facilities-fleet>span:last-child { border:0; }
.facilities-fleet i,.facilities-window footer i { width:6px; height:6px; border-radius:50%; background:#10b981; box-shadow:0 0 8px #10b981; }.facilities-fleet i.attention { background:#f59e0b; box-shadow:0 0 8px #f59e0b; }
.facilities-fleet b { font-weight:520; }.facilities-fleet small { color:#10b981; }.facilities-fleet i.attention~small { color:#f59e0b; }.facilities-fleet em { min-width:54px; color:#ffffff59; font-style:normal; text-align:right; }
.facilities-window footer { display:flex; align-items:center; gap:.5rem; padding:.8rem 1rem; border-top:1px solid #ffffff12; color:#ffffff59; font-size:.44rem; letter-spacing:.12em; }.facilities-window footer b { margin-left:auto; color:#a78bfa; }
.security-visual { display:flex; flex-direction:column; align-items:center; gap:1.4rem; }
.security-specs { display:flex; gap:.45rem; }
.security-specs span { padding:.42rem .58rem; border:1px solid #a78bfa3d; border-radius:99px; color:#c4b5fd; background:#0c0814cc; font-size:.42rem; font-weight:650; letter-spacing:.11em; }
.phone-platforms { display:grid; grid-template-columns:1fr 1fr; gap:.45rem; margin-top:.8rem; }
.phone-platforms span { display:flex; align-items:center; justify-content:center; gap:.35rem; min-height:28px; border:1px solid #a78bfa2e; border-radius:7px; color:#ffffffa6; background:#ffffff08; }
.phone-platforms svg { width:14px; height:14px; overflow:visible; fill:none; stroke:#c4b5fd; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.phone-platforms b { font-size:.44rem; font-weight:600; letter-spacing:.04em; }
.cloud-core .story-brand-mark { transform:scale(1.1); }

/* Closing frame. */
.story-finale { position:relative; min-height:100svh; display:grid; place-items:center; overflow:hidden; padding:8rem 2rem 4rem; text-align:center; isolation:isolate; }.finale-glow { position:absolute; z-index:-2; width:min(90vw,1000px); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,#6d3abe5c,#2d124e1f 42%,transparent 68%); filter:blur(20px); }.finale-devices { position:absolute; z-index:-1; inset:0; display:flex; align-items:center; justify-content:center; opacity:.25; }.finale-devices img { position:absolute; width:min(40vw,520px); filter:blur(1px) drop-shadow(0 20px 30px #0009); }.finale-devices img:first-child{left:-7%;transform:scale(.75) rotate(-8deg)}.finale-devices img:nth-child(2){opacity:.3}.finale-devices img:last-child{right:-7%;transform:scale(.75) rotate(8deg)}.finale-copy { position:relative; z-index:2; }.finale-copy h2 { margin:0 0 2.5rem; font-size:clamp(4rem,10vw,9.5rem); font-weight:500; line-height:.86; letter-spacing:-.07em; }.final-actions { display:flex; align-items:center; justify-content:center; gap:1.8rem; font-size:.82rem; }.final-actions .primary { padding:.9rem 1.25rem; border:1px solid #a78bfa73; border-radius:99px; background:#8b5cf626; box-shadow:0 0 35px #6d3abe26; }.final-actions>a:last-child { color:#ffffff8c; }
.story-footer { min-height:130px; display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:2rem clamp(1.5rem,5vw,5rem); border-top:1px solid #a78bfa1a; color:#ffffff4d; font-size:.63rem; }.story-footer img { width:105px; opacity:.42; }

@media(max-width:900px){.story-hero{grid-template-columns:1fr;align-content:center;padding-top:7rem;text-align:center}.hero-copy{margin:auto}.hero-copy h1,.hero-copy p{margin-inline:auto}.hero-product{min-height:370px;margin-top:-2rem}.hero-product img{width:min(90vw,500px);min-width:0}.product-halo{width:min(68vw,390px)}.story-narrative{grid-template-columns:1fr;padding:0}.feature-column{display:contents}.story-feature{min-height:76vh;max-width:none;padding:7rem 8vw;opacity:1;transform:none;position:relative;z-index:2;text-shadow:0 2px 14px #08050d}.story-feature h2{max-width:15ch}.stage-column{display:contents}.story-stage{position:sticky;z-index:1;top:20vh;height:56vh;order:-1;margin-bottom:-56vh;pointer-events:none;opacity:.17}.story-scene{width:min(82vw,540px)}.stage-label,.stage-dots{display:none}}
@media(max-width:600px){.story-header{height:70px;padding-inline:1rem}.story-brand-mark{width:43px;height:30px}.story-brand-mark img{width:109px;left:-33px;top:-21px}.story-header nav{gap:.85rem;font-size:.72rem}.story-header .story-login{padding:.5rem .75rem}.story-hero{padding:7rem 1.25rem 5rem}.hero-copy h1{font-size:clamp(3rem,15vw,5rem)}.hero-copy p{font-size:.92rem;line-height:1.65}.hero-product{min-height:280px}.hero-product img{width:min(105vw,420px)}.product-halo{width:72vw}.scroll-cue{bottom:1rem}.story-feature{min-height:82vh;padding:7rem 1.5rem;background:linear-gradient(90deg,#08050deb,#08050da6)}.story-feature h2{font-size:clamp(2.45rem,13vw,4rem)}.story-feature h3{margin-top:1.25rem}.story-feature p{font-size:.92rem}.story-stage{top:22vh;height:52vh;margin-bottom:-52vh;opacity:.13;transform:translateX(14%)}.story-scene{width:105vw}.story-stage::before{width:88vw}.story-finale{padding-inline:1.25rem}.finale-copy h2{font-size:clamp(4rem,21vw,7rem)}.final-actions{flex-direction:column;gap:1.25rem}.story-footer{flex-direction:column;justify-content:center;text-align:center}}
@media(prefers-reduced-motion:reduce){html.story-active{scroll-behavior:auto}.story-page *,.story-page *::before,.story-page *::after{animation:none!important;transition-duration:.01ms!important}}