@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#080e13;--text:#eef1ef;--muted:#98a5ab;--accent:#9cf4ce}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:72px}body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:6px}header{height:88px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff12;position:absolute;top:0;z-index:10;width:100%}.brand{display:flex;align-items:center;gap:9px;font-family:Manrope,sans-serif;font-size:22px;font-weight:800;letter-spacing:-.8px}.brand-mark{color:var(--accent);font-size:35px;font-weight:400}.brand-dot{font-size:11px;align-self:flex-start;margin-top:11px;color:#94a0a5}nav{display:flex;gap:36px;align-items:center;font-size:14px}nav>a:first-child{color:#b6c0c3}.nav-cta{border:1px solid #ffffff26;padding:12px 18px;border-radius:25px}.nav-cta span{margin-left:20px;color:var(--accent)}.hero{min-height:850px;height:100svh;max-height:1100px;position:relative;overflow:hidden;display:flex;align-items:center}.hero-copy{position:relative;z-index:3;padding:100px 0 70px 8%;width:55%;pointer-events:none}.hero-copy a{pointer-events:auto}.eyebrow{font-size:11px;font-weight:700;letter-spacing:2.2px;color:#a9b9bb;display:flex;align-items:center;gap:10px}.eyebrow i,.map-badge i{width:6px;height:6px;background:var(--accent);border-radius:50%;box-shadow:0 0 12px #9cf4ce66}h1,h2{font-family:Manrope,sans-serif;letter-spacing:-5px;font-weight:500}h1{font-size:clamp(72px,7.5vw,120px);line-height:1.04;margin:35px 0 25px}em{font-style:normal;color:var(--accent)}.hero-copy p{color:#a5b0b6;font-size:18px;line-height:1.7;margin-bottom:32px}.button{display:inline-flex;align-items:center;gap:38px;background:var(--accent);color:#112820;padding:18px 24px;font-size:14px;font-weight:700;border-radius:8px;transition:background .2s,transform .2s}.button:hover{background:#c1ffe6;transform:translateY(-2px)}.hero-note{font-size:12px;color:#73818a;margin-top:20px}.hero-art{position:absolute;right:0;top:88px;width:60%;height:calc(100% - 88px);overflow:hidden}.hero-art>img{width:100%;height:100%;object-fit:cover;object-position:55% 50%;opacity:.75;transform:scale(1.08)}.art-shade{position:absolute;inset:0;background:linear-gradient(90deg,var(--bg),transparent 50%),linear-gradient(0deg,var(--bg),transparent 30%)}.hero-orbit{position:absolute;left:45%;top:37%;width:240px;height:100px;border:1px solid #9cf4ce77;background:#9cf4ce15;border-radius:50%;transform:rotate(-25deg);box-shadow:0 0 80px #9cf4ce16}.hero-place{position:absolute;top:36%;left:49%;display:flex;align-items:center;gap:10px}.hero-place>span{font-size:42px;color:var(--accent)}.hero-place div{font-size:14px;font-weight:600;text-shadow:0 2px 10px #000}.hero-place small{display:block;font-size:10px;font-weight:400;margin-top:5px;color:#c1d0ce}.hero-toast{position:absolute;bottom:24%;left:25%;display:flex;gap:14px;align-items:center;padding:20px;border:1px solid #ffffff27;background:#172429e8;backdrop-filter:blur(18px);border-radius:18px;box-shadow:0 20px 50px #0006;transform:rotate(-4deg);width:370px}.app-icon{width:35px;height:35px;flex-shrink:0;display:grid;place-items:center;background:var(--accent);color:#18362c;border-radius:10px;font-size:27px}.hero-toast small{font-size:9px;letter-spacing:1.2px;color:#b6c7c7;display:block;margin-bottom:9px}.hero-toast b{float:right;font-weight:400}.hero-toast strong{font-size:13px}.art-caption{position:absolute;bottom:70px;right:9%;font-size:9px;letter-spacing:2px;color:#8fa4a6}.scroll-cue{position:absolute;left:8%;bottom:35px;display:flex;gap:25px;align-items:center}.scroll-cue span{font-size:9px;letter-spacing:2px;color:#8b9a9f}.scroll-cue b{font-weight:400;font-size:20px;color:var(--accent)}.story{height:350svh;position:relative;border-top:1px solid #ffffff15}.sticky-scene{height:100svh;min-height:640px;position:sticky;top:0;display:flex;align-items:center;background:#0b1218;overflow:hidden}.story-layout{width:100%;max-width:1550px;padding:50px 7%;margin:auto;display:grid;grid-template-columns:.9fr 1.1fr;gap:7%;align-items:center}.narrative .eyebrow{font-size:10px;letter-spacing:2px}.step-counter{display:flex;align-items:baseline;gap:10px;margin-top:36px;font-family:Manrope,sans-serif}.step-counter span:first-child{font-size:42px;color:var(--accent);font-weight:500}.step-counter span:last-child{font-size:15px;color:#52636c}.copy-stack{display:grid;margin-top:20px}.step-copy{grid-area:1/1;opacity:0;transform:translateY(15px);transition:opacity .5s,transform .5s;pointer-events:none}.step-copy.active{opacity:1;transform:translateY(0)}.step-copy h2{font-size:clamp(34px,3.3vw,56px);letter-spacing:-2.5px;line-height:1.2;margin:0 0 23px}.step-copy p{font-size:16px;line-height:1.8;color:#9aa9b0;max-width:390px;margin:0}.step-rail{display:flex;gap:6px;margin-top:40px}.step-tab{border:0;border-top:1px solid #314048;background:none;color:#75868d;padding:16px 9px 0 0;text-align:left;font-size:12px;flex:1;transition:color .3s,border-color .3s}.step-tab span{font-size:10px;margin-right:6px}.step-tab.active{color:var(--accent);border-color:var(--accent)}.demo-controls{display:flex;align-items:center;gap:14px;margin-top:30px}.play-button{background:none;border:1px solid #32444b;color:#d7e3e4;border-radius:30px;padding:11px 14px;font-size:11px}.demo-controls>span{font-size:11px;color:#637782}.map-stage{position:relative;aspect-ratio:600/650;width:100%;max-height:78svh;border:1px solid #ffffff20;border-radius:24px;overflow:hidden;background:#132125;box-shadow:0 40px 120px #0005}.city-map{width:100%;height:100%;object-fit:cover;opacity:.72;transform:scale(1.12);will-change:transform}.map-tint{position:absolute;inset:0;background:linear-gradient(180deg,#07141950,transparent 45%,#061113dc)}.map-top{position:absolute;top:25px;left:25px;right:25px;display:flex;justify-content:space-between;align-items:center}.map-badge{font-size:9px;letter-spacing:1.5px;display:flex;gap:8px;align-items:center}.simulation{font-size:10px;color:#b0c2c6;background:#08141988;border:1px solid #ffffff20;border-radius:15px;padding:6px 9px}.route-map{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 0 10px #8af5d233)}.geo-ring{transition:opacity .5s}.store-pin{position:absolute;left:50.83%;top:50.77%;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center}.store-pin>span{width:46px;height:46px;display:grid;place-items:center;background:var(--accent);color:#0b342a;border-radius:15px;font-size:37px;box-shadow:0 10px 30px #0008}.store-pin b{position:absolute;bottom:54px;white-space:nowrap;font-size:11px;background:#0b191edf;padding:7px 12px;border:1px solid #ffffff22;border-radius:7px}.radius-label{position:absolute;left:35%;top:68%;font-size:8px;letter-spacing:1.2px;color:#b1f7dd;transform:rotate(-17deg);opacity:.8}.distance{position:absolute;bottom:65px;left:28px;transition:opacity .4s}.distance small{font-size:8px;letter-spacing:1.5px;color:#b2c3c5}.distance strong{display:block;font-family:Manrope,sans-serif;font-size:43px;font-weight:500;letter-spacing:-2px;margin:6px 0}.distance .unit{font-size:20px;color:#99afaf;letter-spacing:0}.distance>div{display:flex;gap:8px;align-items:center;font-size:10px;color:#c2d3d4}.distance i{width:5px;height:5px;background:var(--accent);border-radius:50%}.notification{position:absolute;left:8%;right:8%;top:42%;padding:22px;background:#eef8f1ed;color:#18312a;border:1px solid #fff9;border-radius:20px;box-shadow:0 24px 80px #0008;backdrop-filter:blur(18px);opacity:0;transform:translateY(60px) scale(.94);transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1);pointer-events:none}.notification.visible{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}.notification-top{display:flex;align-items:center;gap:9px;font-size:12px;margin-bottom:17px}.notification-top small{margin-left:auto;color:#71857b;font-size:10px}.notification-top .app-icon{width:27px;height:27px;font-size:23px;border-radius:8px;background:#164a3a;color:#b6f5d6}.notification>strong{font-size:22px;letter-spacing:-.6px}.notification p{font-size:12px;color:#526d61;margin:9px 0 14px}.shopping-items{font-size:12px;color:#375b49}.shopping-items span{margin:0 8px;color:#93a69d}.notification button{margin-top:20px;padding:12px;width:100%;background:#163d30;color:#e0ffed;border:0;border-radius:9px;font-size:12px}.scene-bottom{position:absolute;bottom:23px;left:25px;right:25px;display:flex;justify-content:space-between;font-size:9px;color:#a0b6b8}.scroll-progress{position:absolute;bottom:0;left:0;width:100%;height:2px;background:#ffffff09}.scroll-progress>div{width:0;height:100%;background:var(--accent)}.closing{text-align:center;padding:140px 20px 130px;background:radial-gradient(ellipse at 50% 100%,#13332a55,transparent 65%)}.closing .eyebrow{justify-content:center}.closing h2{font-size:clamp(32px,4.4vw,65px);letter-spacing:-2.7px;line-height:1.2;margin:30px 0 20px}.closing p{color:#91a4a9;font-size:16px;margin-bottom:30px}footer{display:flex;justify-content:space-between;align-items:center;margin:0 5%;padding:30px 0;border-top:1px solid #ffffff13}footer>span{font-size:11px;color:#72848d}footer .brand{font-size:17px}footer .brand-mark{font-size:28px}@media(min-width:1700px){.hero-copy{padding-left:12%}.hero-art{width:57%}}
@media(max-width:800px){header{height:72px;padding:0 6%}.brand{font-size:19px}nav>a:first-child{display:none}.nav-cta{font-size:11px;padding:10px 13px}.hero{height:auto;min-height:970px;display:block}.hero-copy{padding:120px 7% 0;width:100%}.hero-copy .eyebrow{font-size:9px;letter-spacing:1.7px}h1{font-size:76px;letter-spacing:-4px;margin-top:25px}.hero-copy p{font-size:15px;line-height:1.6}.hero-art{top:auto;bottom:0;height:500px;width:100%;opacity:.85}.art-shade{background:linear-gradient(180deg,var(--bg),transparent 40%,var(--bg))}.hero-art>img{object-position:center 60%}.hero-toast{width:290px;left:auto;right:8%;bottom:24%;padding:15px}.hero-toast strong{font-size:11px}.hero-place{top:37%;left:48%}.hero-orbit{top:38%;left:35%;width:200px;height:80px}.art-caption{display:none}.scroll-cue{left:7%;bottom:25px}.hero-note{font-size:10px}.hero-copy .button{font-size:12px;padding:15px 20px}.story{height:330svh}.sticky-scene{min-height:680px}.story-layout{padding:25px 6%;gap:22px;display:flex;flex-direction:column}.narrative{width:100%;position:relative}.narrative .eyebrow{font-size:8px}.step-counter{position:absolute;top:20px;right:0;margin:0;gap:4px}.step-counter span:first-child{font-size:27px}.step-counter span:last-child{font-size:10px}.copy-stack{margin-top:18px}.step-copy h2{font-size:30px;letter-spacing:-1.4px;margin-bottom:12px}.step-copy p{font-size:12px;line-height:1.5;max-width:90%}.step-rail{margin-top:17px;gap:12px}.step-tab{font-size:10px;padding-top:10px}.demo-controls{margin-top:14px;gap:10px}.play-button{font-size:10px;padding:8px 10px}.demo-controls>span{font-size:9px}.map-stage{width:100%;max-width:430px;height:44svh;min-height:310px;max-height:440px;aspect-ratio:auto;border-radius:18px}.map-top{top:16px;left:18px;right:18px}.notification{top:31%;padding:17px;left:7%;right:7%}.notification>strong{font-size:19px}.notification-top{margin-bottom:10px}.notification button{margin-top:13px;padding:10px}.notification p{margin:6px 0 10px}.distance{bottom:42px;left:18px}.distance strong{font-size:32px;margin:4px 0}.distance small{font-size:7px}.scene-bottom{bottom:15px;left:18px;right:18px;font-size:8px}.store-pin>span{height:34px;width:34px;font-size:28px;border-radius:10px}.store-pin b{bottom:42px;font-size:9px}.radius-label{font-size:6px}.closing{padding:85px 20px}.closing h2{font-size:34px;letter-spacing:-1.5px}.closing .eyebrow{font-size:8px}.closing p{font-size:13px}footer{flex-wrap:wrap;gap:20px}footer>span{font-size:9px}footer>span:nth-child(2){order:3;width:100%}}@media(max-height:730px) and (min-width:801px){.story-layout{padding:25px 7%}.step-counter{margin-top:16px}.step-rail{margin-top:20px}.demo-controls{margin-top:18px}.step-copy h2{font-size:38px}.map-stage{max-height:85svh}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}.hero-toast{transform:none}}

.map-stage .city-map{transform:none!important}.hero-orbit{left:40%;top:43%}.hero-place{left:46%;top:41%}

/* Daylight city: preserve sunlight while keeping overlaid controls readable. */
.hero-art>img{opacity:.94}.map-stage .city-map{opacity:.96}.map-tint{background:linear-gradient(180deg,#07141955,transparent 28%,transparent 55%,#061113de)}.map-badge{background:#102329c9;padding:8px 10px;border-radius:16px}.radius-label{color:#103e32;background:#d4ffeadb;padding:5px 8px;border-radius:8px;opacity:1}

/* Scroll-controlled film */
.hero-art>img{object-position:47% center}.film-story{height:550svh}.film-sticky{min-height:650px;padding:28px 5%;display:flex;flex-direction:column;justify-content:center;gap:18px}.film-heading{width:100%;max-width:1320px;display:flex;align-items:end;justify-content:space-between}.film-heading h2{font-size:clamp(24px,2.8vw,42px);letter-spacing:-1.5px;line-height:1.2;margin:12px 0 0}.film-heading .eyebrow{font-size:9px}.film-count{font-size:12px;color:#829797;white-space:nowrap}.film-count b{font-size:26px;color:var(--accent);font-weight:500;margin-right:6px}.film-stage{position:relative;width:min(100%,calc((100svh - 235px)*1.77778));aspect-ratio:16/9;max-width:1320px;flex-shrink:0;overflow:hidden;border-radius:17px;background:#152329;border:1px solid #ffffff22;box-shadow:0 20px 80px #0005}.film-stage canvas,.film-stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.film-stage>img{z-index:1}.film-topline{position:absolute;z-index:2;left:0;right:0;top:0;padding:18px 22px;display:flex;justify-content:space-between;color:#f4fff9;background:linear-gradient(#0b212583,transparent);font-size:8px;letter-spacing:1.2px}.film-topline span:last-child{letter-spacing:.3px;color:#fff}.film-bottom{display:flex;justify-content:space-between;gap:40px;width:100%;max-width:1320px;align-items:center}.film-bottom .step-rail{margin:0;flex:1;max-width:750px}.film-bottom .step-tab{font-size:12px;padding-top:12px;min-height:44px}.film-bottom .demo-controls{margin:0;flex-direction:column;gap:7px}.film-bottom .play-button{font-size:12px;padding:12px 20px;min-width:180px}.film-bottom .demo-controls>span{font-size:10px}.zone-label{position:absolute;bottom:7%;left:50%;transform:translateX(-50%);white-space:nowrap;background:#103d31e8;border:1px solid #9cf4ce77;color:#d7ffea;padding:11px 18px;font-size:12px;border-radius:30px;opacity:0;transition:opacity .15s}.readable-notification{position:absolute;right:4%;top:23%;width:28%;padding:20px;border-radius:18px;background:#effaf3f5;color:#163c2b;box-shadow:0 15px 45px #0003;opacity:0;transform:translateY(12px);transition:opacity .18s,transform .18s;pointer-events:none}.readable-notification.visible{opacity:1;transform:none}.readable-notification>strong{font-size:clamp(14px,1.6vw,22px);letter-spacing:-.5px}.readable-notification>p{font-size:12px;line-height:1.5;color:#466052}.readable-notification .shopping-items{font-size:11px}.finish-label{position:absolute;bottom:7%;left:50%;transform:translateX(-50%);padding:12px 24px;border:1px solid #fff5;border-radius:30px;background:#102c24e8;color:#e0ffec;font-size:17px;opacity:0;transition:opacity .2s;white-space:nowrap}.finish-label span{color:var(--accent);margin-left:15px}.film-loading{position:absolute;z-index:4;bottom:15px;left:15px;background:#0c2028dc;color:#d5eee5;padding:8px 13px;border-radius:18px;font-size:11px}.hero-toast{transform:rotate(-3deg)}
@media(max-width:800px){.film-sticky{padding:35px 5%;min-height:590px;gap:26px}.film-heading h2{font-size:27px;max-width:270px}.film-heading .eyebrow{font-size:7px;letter-spacing:1.6px}.film-stage{width:100%;border-radius:12px;overflow:visible;margin-bottom:100px}.film-stage canvas,.film-stage>img{border-radius:12px}.film-topline{padding:9px;font-size:5px}.film-topline span:last-child{font-size:6px}.film-bottom{flex-direction:column;gap:22px}.film-bottom .step-rail{width:100%}.film-bottom .step-tab{font-size:9px;padding-right:2px}.film-bottom .step-tab span{display:block;margin-bottom:5px}.film-bottom .demo-controls{flex-direction:row;gap:12px}.film-bottom .play-button{font-size:10px;min-width:0;padding:11px 14px}.film-bottom .demo-controls>span{font-size:8px}.readable-notification{top:calc(100% + 14px);left:0;right:0;width:100%;border-radius:12px;padding:12px 15px;display:grid;grid-template-columns:1fr 1fr;gap:5px 10px;box-shadow:none}.readable-notification .notification-top{grid-row:1/4;align-self:start;font-size:10px;margin:0;flex-wrap:wrap;gap:6px}.readable-notification .notification-top small{display:none}.readable-notification>strong{font-size:13px;letter-spacing:0}.readable-notification>p{font-size:10px;margin:0}.readable-notification .shopping-items{font-size:9px}.zone-label{font-size:8px;padding:7px 11px;bottom:5%}.finish-label{font-size:11px;padding:8px 15px}.film-loading{font-size:8px;padding:6px 8px;bottom:8px;left:8px}}
@media(max-height:720px) and (min-width:801px){.film-sticky{min-height:540px;padding-top:16px;padding-bottom:16px;gap:12px}.film-heading h2{font-size:26px;margin-top:7px}.film-stage{width:min(100%,calc((100svh - 180px)*1.77778))}.film-bottom .play-button{padding:8px 12px}.readable-notification{padding:12px}.readable-notification>p{font-size:10px}}

/* One unbroken shot, fixed to the viewport throughout the scroll. */
.film-story{height:480svh}.film-heading h2{font-size:clamp(22px,2.6vw,38px)}.film-count{color:#a6dbff}.film-bottom>p{font-size:14px;line-height:1.6;color:#b4c6d1;margin:0;max-width:650px}.scroll-progress>div{background:#82ceff}.film-stage{border-color:#a6dcff33}.film-topline{background:linear-gradient(#10202c88,transparent)}
@media(max-width:800px){.film-stage{margin-bottom:0;overflow:hidden}.film-sticky{gap:24px;min-height:540px}.film-heading h2{font-size:25px}.film-bottom{align-items:stretch;gap:22px}.film-bottom>p{font-size:13px;min-height:44px}.film-bottom .demo-controls{justify-content:space-between}.film-count{font-size:12px}}

.brand-icon{width:40px;height:40px;object-fit:contain;border-radius:10px}.hero-toast img.app-icon{object-fit:contain;background:white}.hero-task{font-size:12px;color:#d4e2da;margin:8px 0 0;line-height:1.4}footer .brand-icon{width:32px;height:32px}