:root{font-family:Arial,Helvetica,sans-serif;color:#eef7fc;background:#030b12}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0}button{font:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid #62d5ff;outline-offset:6px}header{position:absolute;z-index:10;top:0;width:100%;height:110px;display:flex;align-items:center;padding:0 5vw;gap:40px}header img{width:147px;display:block}header>span{font-size:12px;color:#a9c1d0}header button{margin-left:auto;color:#e1f6ff;background:#092535b0;border:1px solid #63889966;border-radius:30px;padding:15px 22px;font-size:12px}.hero{min-height:850px;height:100svh;position:relative;overflow:hidden;border-bottom:1px solid #23404f}.backdrop{position:absolute;inset:0;background:linear-gradient(90deg,#030b12 2%,#030b12ee 25%,#030b1210 72%),linear-gradient(0deg,#030b12,transparent 45%),url(assets/hero-cinematic-v2-poster.jpg) 100% 48%/auto 110% no-repeat;animation:reveal 1.8s both}.hero-copy{position:relative;padding:190px 0 120px 8vw;max-width:850px}.eyebrow{font-size:10px;letter-spacing:.2em;color:#57bce9;text-transform:uppercase;font-weight:600}h1{font-size:clamp(64px,6.8vw,112px);line-height:.99;letter-spacing:-.06em;margin:30px 0}h1 em{font-style:normal;color:#36b7f5}.intro{font-size:16px;line-height:1.8;color:#b4c5d1}h1,.intro,.actions,.assurances{animation:rise 1s both}h1{animation-delay:.1s}.intro{animation-delay:.2s}.actions{display:flex;gap:14px;margin-top:34px;animation-delay:.3s}.primary,.secondary{border-radius:8px;padding:19px 23px;font-size:13px;font-weight:600;transition:transform .25s}.primary{background:#16aff0;color:#031321;border:1px solid #6cdaff;box-shadow:0 5px 28px #008dce2a}.secondary{background:#0b1b26b0;border:1px solid #52748677;color:#e2f4ff}.actions b{margin-left:25px}button:hover{transform:translateY(-2px);filter:brightness(1.12)}.assurances{display:flex;gap:25px;color:#8fa8b8;font-size:11px;margin-top:36px;animation-delay:.4s}.signature{position:absolute;right:7vw;bottom:125px;font-size:9px;letter-spacing:.19em;color:#c1e7fa}.scroll{position:absolute;bottom:35px;left:8vw;font-size:11px;color:#a5becd;display:flex;align-items:center;gap:32px}.scroll b{font-size:25px;animation:bob 2s infinite}.prototype{position:absolute;right:5vw;bottom:42px;font-size:8px;letter-spacing:.15em;color:#67818f}.mist{position:absolute;right:-10%;bottom:10%;width:70%;height:17%;filter:blur(40px);background:radial-gradient(ellipse,#aad9eb26,transparent 65%);animation:drift 12s ease-in-out infinite alternate}.transform{height:550svh;position:relative}.sticky{height:100svh;min-height:680px;position:sticky;top:0;overflow:hidden;background:radial-gradient(ellipse at 70% 40%,#0b2739,#04101b 36%,#030b12 72%)}.section-top{position:absolute;top:40px;left:8vw;right:8vw;display:flex;justify-content:space-between}.section-top>p:last-child{font-size:11px;color:#7c9baa}.story{position:absolute;top:29%;left:8vw;width:34%;z-index:3;animation:rise .55s both}.story h2{font-size:clamp(30px,3.3vw,54px);letter-spacing:-.045em;line-height:1.12;margin:24px 0}.story>p:not(.eyebrow){font-size:14px;line-height:1.8;color:#92aab9;max-width:320px}.counter{display:block;font-size:42px;font-weight:300;color:#3a657e;margin-top:35px}.counter small{font-size:12px;color:#6a8796}.scene{position:absolute;right:4%;width:52%;height:70%;top:12%}.bin{position:absolute;left:25%;top:5%;width:50%;height:86%;will-change:transform}.bin img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mask-image:linear-gradient(0deg,transparent,black 8%,black 89%,transparent);transition:opacity .65s ease;filter:contrast(1.1) saturate(.9);mix-blend-mode:lighten}.halo{position:absolute;inset:8%;border-radius:50%;background:radial-gradient(ellipse,#008dcc33,transparent 63%);filter:blur(25px)}.floor{position:absolute;bottom:4%;left:5%;width:90%;height:25%;background:radial-gradient(ellipse,#1289c233,transparent 65%);transform:rotateX(60deg);border-radius:50%;border:1px solid #31adf025;box-shadow:0 0 70px #03a9e21a}.orbit{position:absolute;left:7%;top:61%;width:85%;height:15%;border:1px solid #8cdbff45;border-top-color:transparent;transform:rotate(-8deg);border-radius:50%;pointer-events:none}.spray{position:absolute;right:13%;top:24%;width:15%;height:50%;background:repeating-linear-gradient(112deg,transparent 0 11px,#b6e5ff55 12px,transparent 14px);filter:blur(2px);transform:rotate(24deg);transition:opacity 1s;mask-image:radial-gradient(ellipse,black,transparent 65%)}.fresh{position:absolute;right:16%;top:23%;font-size:55px;color:#85e8c2;transition:opacity 1s;text-shadow:0 0 30px #4dd7aa}.scene-note{position:absolute;bottom:-15px;width:100%;text-align:center;font-size:8px;color:#5e8da4;letter-spacing:.22em}.timeline{position:absolute;bottom:60px;left:8vw;right:8vw;display:grid;grid-template-columns:repeat(5,1fr);gap:16px;padding-top:25px}.track{position:absolute;top:0;height:1px;background:#1c3747;width:100%}.track i{display:block;height:2px;background:#30baf4;box-shadow:0 0 12px #26b9fa}.timeline>div:not(.track){display:flex;gap:12px;align-items:center;color:#4e6a7c;transition:color .5s}.timeline span{font-size:10px}.timeline strong{font-size:12px;font-weight:500}.timeline .active{color:#bdeaff!important}.timeline .done{color:#548da9!important}.visual-note{position:absolute;bottom:20px;left:8vw;font-size:9px;color:#45606e}dialog{color:#eaf6ff;background:#091924;border:1px solid #355368;border-radius:18px;padding:42px;max-width:480px;width:calc(100% - 32px)}dialog::backdrop{background:#000b;backdrop-filter:blur(8px)}dialog h2{font-size:32px;letter-spacing:-.04em}dialog>p:not(.eyebrow){font-size:14px;color:#a5bdcb;line-height:1.8}.close{position:absolute;right:18px;top:12px;background:none;color:#9db6c5;border:0;font-size:30px}@keyframes rise{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes reveal{0%{opacity:0;transform:scale(1.04)}to{opacity:1;transform:scale(1)}}@keyframes bob{50%{transform:translateY(5px)}}@keyframes drift{to{transform:translate(-15%)}}@media(min-width:1600px){.hero-copy{padding-top:22vh}}@media(max-width:700px){header{height:80px;padding:0 6vw;gap:10px}header img{width:117px}header>span{display:none}header button{padding:12px;font-size:10px}.hero{min-height:850px}.backdrop{background:linear-gradient(0deg,#030b12,#030b1233 56%,#030b1280),url(assets/hero-cinematic-v2-poster.jpg) 76% 0/auto 65% no-repeat;opacity:.8}.hero-copy{padding:350px 6vw 80px;max-width:100%}.hero .eyebrow{font-size:8px}h1{font-size:60px;margin:20px 0}h1 br:nth-child(2){display:none}.intro{font-size:13px;line-height:1.6}.desktop{display:none}.actions{gap:9px;margin-top:24px}.primary,.secondary{padding:16px 13px;font-size:11px}.actions b{margin-left:9px}.assurances{font-size:9px;gap:16px;margin-top:22px}.signature{display:none}.scroll{left:6vw;bottom:25px;font-size:10px}.prototype{font-size:7px;right:6vw;bottom:30px}.sticky{min-height:690px}.section-top{top:23px;left:6vw;right:6vw}.section-top .eyebrow{font-size:8px}.section-top>p:last-child{font-size:8px}.story{top:12%;left:6vw;width:88%}.story h2{font-size:31px;margin:14px 0;max-width:310px}.story>p:not(.eyebrow){font-size:12px;max-width:280px;margin-top:0;line-height:1.6}.story .eyebrow{font-size:8px}.counter{position:absolute;right:0;top:5px;font-size:28px;margin:0}.counter small{font-size:9px}.scene{right:0;width:100%;top:35%;height:47%}.bin{left:29%;width:42%;top:0;height:95%}.timeline{left:6vw;right:6vw;bottom:49px;gap:5px;padding-top:15px}.timeline>div:not(.track){flex-direction:column;align-items:flex-start;gap:8px}.timeline strong{font-size:9px}.timeline span{font-size:8px}.visual-note{left:6vw;bottom:17px;font-size:7px}.scene-note{font-size:7px;bottom:-4px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.bin{transform:none!important}}.backdrop{background:linear-gradient(90deg,#030b12 12%,#030b12ed 35%,transparent 77%),linear-gradient(0deg,#030b12,transparent 35%),url(assets/hero-cinematic-v2-poster.jpg) 94% 50%/auto 95% no-repeat;background-color:#030c15}@media(max-width:700px){.backdrop{background:linear-gradient(0deg,#030b12 25%,transparent 75%),url(assets/hero-cinematic-v2-poster.jpg) 82% 0/auto 56% no-repeat;background-color:#030c15}.hero-copy{padding-top:360px}}.bin img{object-fit:contain;mask-image:radial-gradient(ellipse at center,black 47%,transparent 75%)}@media(max-width:700px){h1{font-size:48px;line-height:1.02}h1 br:nth-child(2){display:block}.hero{min-height:920px}.hero-copy{padding-top:360px}.assurances{margin-top:23px}.prototype{bottom:13px;font-size:6px}.scroll{bottom:40px}.story h2{max-width:265px}}