:root{color-scheme:dark;--deep:rgb(10,30,170);--electric:rgb(110,160,210);--ease:cubic-bezier(.22,1,.36,1)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#000}body{font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;color:#f5f5f7;overflow-x:hidden;font-weight:500;-webkit-font-smoothing:auto}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--electric);outline-offset:6px}button{border:0}a{color:inherit;text-decoration:none}.header{position:fixed;z-index:5;top:30px;left:5%;width:90%;height:74px;display:flex;align-items:center;justify-content:space-between;padding:0 26px}.header-surface{position:absolute;inset:0;z-index:-1;border:1px solid #ffffff12;border-radius:20px;background:linear-gradient(110deg,#121215d9,#0c0c0ec9);backdrop-filter:blur(24px);transform-origin:42px 50%}.brand{display:flex;align-items:center;gap:21px;height:100%}.logo-slot{display:block;width:70px;height:32px}.brand-label{color:#9b9ba5;font-size:13px;letter-spacing:.025em}.header nav{display:flex;align-items:center;gap:34px;font-size:13px;color:#929299}.header nav button{padding:12px 0;background:none;transition:color .25s}.header nav button:hover{color:#fff}.header nav .active{color:#ececf1}.header nav button:last-child{color:#dfdfe5}.header nav button span{margin-left:9px;color:#91b5e2}.intro-logo{position:fixed;z-index:8;width:290px;height:130px;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;will-change:transform}.intro-logo svg{width:100%;height:100%;display:block}.hero{position:relative;min-height:760px;height:100svh;max-height:1200px;isolation:isolate;display:flex;align-items:center}.copy{position:relative;z-index:2;margin-left:10%;width:39%;padding-top:20px;pointer-events:none}.copy>*{pointer-events:auto}.eyebrow{font-size:11px;letter-spacing:.24em;font-weight:500;color:#7c7c87;margin-bottom:26px}h1{font-size:clamp(40px,4.2vw,64px);font-weight:600;letter-spacing:-.057em;line-height:1.08;margin:0 0 21px}h1 span{color:#6ea0d2}.copy p{font-size:clamp(20px,2vw,28px);line-height:1.4;font-weight:500;letter-spacing:-.015em;color:#ffffff;margin:0}.actions{display:flex;gap:12px;margin-top:36px;align-items:center}.button{height:48px;padding:0 24px;border-radius:999px;font-size:13px;font-weight:600;transition:filter .25s,transform .25s,box-shadow .25s;white-space:nowrap}.button:hover{filter:brightness(1.15);transform:translateY(-2px)}.button:active{transform:translateY(0)}.primary{background:linear-gradient(115deg,var(--deep) 0%,#2547b8 55%,var(--electric) 130%);box-shadow:inset 0 1px 0 #ffffff28,0 5px 26px #0a1eaa28}.primary span{margin-left:17px;color:#c7dcff}.secondary{background:linear-gradient(115deg,#10224966,#253c5566);border:1px solid #668bc640;padding:0 26px}.device-stage{position:absolute;z-index:1;right:-3%;top:15%;width:65%;height:78%;pointer-events:none}.device-stage canvas{position:relative;width:100%;height:100%;display:block}.light-pool{position:absolute;left:19%;right:15%;bottom:15%;height:15%;border-radius:50%;background:radial-gradient(ellipse,#1b3a8129,transparent 68%);filter:blur(30px);opacity:0;transition:opacity 2s}.settled .light-pool{opacity:1}.model-error{position:absolute;inset:45% 15% auto;text-align:center;color:#909098;font-size:14px}.replay{position:fixed;z-index:6;right:6.8%;bottom:32px;display:flex;align-items:center;gap:9px;background:none;font-size:11px;color:#63636c;padding:10px;transition:color .25s}.replay:hover{color:#d9d9df}.replay span{font-size:18px}.js .copy,.js .brand-label,.js .header nav,.js .replay{opacity:0;transform:translateY(14px);transition:opacity 1.2s ease,transform 1.4s var(--ease)}.js .header-surface{opacity:0;transform:scaleX(.04);transition:transform 1.5s var(--ease),opacity .5s ease}.header-open .header-surface{opacity:1;transform:scaleX(1)}.header-open .brand-label,.header-open .header nav{opacity:1;transform:translateY(0);transition-delay:.25s}.content-in .copy,.content-in .replay{opacity:1;transform:translateY(0)}.content-in .replay{transition-delay:1s}@media(min-width:1600px){.header{left:7%;width:86%}.copy{margin-left:13%}.device-stage{right:0;width:61%}}@media(max-width:900px){.header{left:5%;width:90%;padding:0 18px;top:22px;height:64px}.brand-label{display:none}.header nav{gap:24px}.copy{margin-left:7%;width:44%}.device-stage{right:-12%;width:73%}h1{font-size:46px}.copy p{font-size:22px}.button{padding:0 19px}.actions{gap:9px}.eyebrow{font-size:10px}.hero{min-height:640px}}@media(max-width:650px){.header{top:18px;padding:0 17px;height:62px}.header nav{gap:20px;font-size:12px}.header nav .active{display:none}.logo-slot{width:63px;height:29px}.hero{height:100svh;min-height:790px;max-height:1000px;display:block}.copy{margin:0;padding:160px 24px 0;width:100%;text-align:center}.eyebrow{margin-bottom:20px;font-size:10px;letter-spacing:.21em}h1{font-size:43px;margin-bottom:17px}.copy p{font-size:23px;line-height:1.35}.actions{justify-content:center;margin-top:28px}.button{height:46px;font-size:12px;padding:0 22px}.device-stage{width:116%;right:-8%;top:405px;height:360px}.light-pool{bottom:9%}.replay{position:absolute;right:50%;transform:translateX(50%)!important;bottom:auto;top:755px;white-space:nowrap}.intro-logo{width:240px;height:108px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}.intro-logo{will-change:auto}}

.intro-backdrop{display:none}.js .intro-backdrop{display:block;position:fixed;inset:0;z-index:4;background:#000;pointer-events:none;opacity:1;transition:opacity 1.5s cubic-bezier(.4,0,.2,1)}.header-open .intro-backdrop{opacity:0}

/* Scroll scene: devices stay pinned while the comparison rises below them. */
.scroll-story{position:relative;display:flow-root;isolation:isolate}
.hero{position:sticky;top:0;max-height:none;min-height:0;height:100svh}
.copy{will-change:opacity,transform}.copy.scroll-controlled{transition:none!important}
.device-stage{will-change:top,left,width,height}
.replay{position:absolute;top:calc(100svh - 58px);bottom:auto}
.comparison{position:relative;z-index:3;width:min(1120px,86%);margin:190svh auto 0;padding-bottom:100px;background:#000;border-radius:28px}
.comparison-heading{padding:24px 0 35px;text-align:center}
.comparison-heading .eyebrow{margin-bottom:15px}
.comparison h2{font-size:clamp(30px,3.4vw,46px);font-weight:600;line-height:1.15;letter-spacing:-.04em;margin:0}
.comparison h2 span{color:var(--electric)}
.comparison-labels{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;font-size:14px;font-weight:600;color:#f5f5f7}
.comparison-labels span:first-child{color:#94b8ed}
.comparison-slider{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:20px;border:1px solid #ffffff26;background:#151519;isolation:isolate;touch-action:pan-y}
.comparison-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;pointer-events:none}
.designer-image{clip-path:inset(0 calc(100% - var(--split)) 0 0)}
.comparison-divider{position:absolute;left:var(--split);top:0;bottom:0;width:2px;transform:translateX(-50%);background:white;box-shadow:0 0 15px #0005;pointer-events:none}
.comparison-divider span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:54px;height:54px;display:flex;align-items:center;justify-content:center;gap:9px;border-radius:50%;background:#f8faff;color:#102461;box-shadow:0 2px 24px #0004;font-size:26px;font-weight:600}
.comparison-divider i{height:15px;width:1px;background:#d5dbe8}
.comparison-slider input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.comparison-slider:focus-within{outline:2px solid var(--electric);outline-offset:6px}

@media(max-width:650px){.hero{height:max(790px,100svh)}.comparison{width:90%;margin-top:155svh;padding-bottom:60px}.comparison-heading{padding:20px 0 28px}.comparison h2{font-size:31px}.comparison-slider{border-radius:13px}.comparison-divider span{width:42px;height:42px;font-size:23px;gap:7px}.comparison-labels{font-size:13px}.replay{top:755px}}

/* Requested typography, consistent across breakpoints. */
.comparison h2{font-size:32px}.copy h1{font-size:48px}.copy p{font-size:24px}

.comparison{isolation:isolate}.comparison::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);background:#000}

/* Opaque full-width section; retain the centered content width. */
.comparison{width:100%;padding-left:max(7%,calc((100% - 1120px)/2));padding-right:max(7%,calc((100% - 1120px)/2));border-radius:0;background:#000}
.comparison::before{content:none}
@media(max-width:650px){.comparison{width:100%;padding-left:5%;padding-right:5%}}

.actions{flex-wrap:wrap}.actions .button{font-size:19.5px;min-height:56px;height:auto;padding:16px 24px}
@media(max-width:650px){.actions .button{font-size:18px;padding:14px 20px;min-height:54px}.device-stage{top:440px}.hero{min-height:830px}}