:root{--bg:#eaf1fb;--ink:#0b2545;--muted:#4a5f77;--line:rgba(11,37,69,.08);--line2:rgba(11,37,69,.16);--panel:#fff;--y:#ffc21a;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0a1f3d;--ink:#eef4fc;--muted:#a3b6cc;--line:rgba(255,255,255,.06);--line2:rgba(255,255,255,.13);--panel:#10305a}}
:root[data-theme="dark"]{--bg:#0a1f3d;--ink:#eef4fc;--muted:#a3b6cc;--line:rgba(255,255,255,.06);--line2:rgba(255,255,255,.13);--panel:#10305a}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);font:400 1.05rem/1.65 "Public Sans",system-ui,sans-serif;overflow-x:hidden;background-color:var(--bg);
background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px),linear-gradient(var(--line2) 1px,transparent 1px),linear-gradient(90deg,var(--line2) 1px,transparent 1px);
background-size:32px 32px,32px 32px,160px 160px,160px 160px}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 75% 20%,color-mix(in srgb,var(--y) 22%,transparent),transparent 55%),radial-gradient(ellipse at 10% 90%,color-mix(in srgb,#3b82f6 18%,transparent),transparent 55%)}
.tape{height:18px;position:relative;background:repeating-linear-gradient(-45deg,var(--y) 0 20px,#16120a 20px 40px);animation:belt 3s linear infinite}
@keyframes belt{to{background-position:56.57px 0}}
main{position:relative;max-width:1100px;margin:0 auto;padding:0 22px 48px}
header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 0}
.logo{font:800 1.9rem/1 "Big Shoulders Display",Impact,"Arial Narrow",sans-serif;text-transform:uppercase;letter-spacing:.02em}
.pill{display:inline-flex;gap:9px;align-items:center;padding:7px 14px;border:2px solid var(--ink);background:var(--panel);font-weight:600;font-size:.88rem}
.dot{width:9px;height:9px;border-radius:50%;background:var(--y);animation:ping 1.8s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 var(--y)}80%,100%{box-shadow:0 0 0 9px transparent}}
.hero{display:grid;grid-template-columns:1fr 1.05fr;gap:34px;align-items:center;padding:14px 0 10px}
h1{font:800 clamp(3.8rem,11vw,7.6rem)/.86 "Big Shoulders Display",Impact,"Arial Narrow",sans-serif;text-transform:uppercase;margin:0 0 20px;letter-spacing:.01em;animation:in .9s cubic-bezier(.2,.8,.2,1) both}
h1::after{content:"";display:block;height:10px;margin-top:12px;width:100%;max-width:230px;background:var(--y);transform-origin:left;animation:wipe 1.2s .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes in{from{opacity:0;transform:translateY(24px)}}
@keyframes wipe{from{transform:scaleX(0)}}
.sign{display:inline-block;background:var(--y);color:#16120a;font:800 clamp(1.3rem,3.4vw,1.9rem)/1 "Big Shoulders Display",Impact,sans-serif;text-transform:uppercase;padding:10px 18px;transform:rotate(-1.5deg);margin:0 0 18px;border:3px solid #16120a;box-shadow:5px 5px 0 #16120a}
.lead{max-width:42ch;color:var(--muted);margin:0 0 22px}
.countdown{display:grid;grid-template-columns:repeat(4,minmax(0,92px));gap:10px;margin-bottom:10px}
.countdown div{background:var(--panel);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--y);padding:10px 4px;text-align:center}
.countdown b{display:block;font:800 2.1rem/1 "Big Shoulders Display",Impact,sans-serif;font-variant-numeric:tabular-nums}
.countdown span{font-size:.8rem;color:var(--muted)}
.when{color:var(--muted);font-size:.95rem;margin:0 0 18px}.when strong{color:var(--ink)}
.prog{max-width:420px}
.track{height:18px;border:2px solid var(--ink);background:var(--panel);overflow:hidden}
.track i{display:block;height:100%;width:0;background:repeating-linear-gradient(-45deg,var(--y) 0 10px,#16120a 10px 20px);animation:fill 2.4s .4s cubic-bezier(.2,.8,.2,1) forwards,belt 1.2s linear infinite}
@keyframes fill{to{width:72%}}
.plab{display:flex;justify-content:space-between;font-weight:600;font-size:.9rem;margin-top:6px}
.scene{border:3px solid var(--ink);box-shadow:10px 10px 0 var(--y);overflow:hidden;background:#0b0f33}
.scene svg{display:block;width:100%;height:auto}
.slide{animation:slide 4s ease-in-out infinite}
.drop{animation:drop 24s ease-in-out infinite}
.blk{animation:blk 4s infinite}
.swing{transform-origin:341px 76px;animation:sw 3s ease-in-out infinite alternate}
.s{animation:tw 3s ease-in-out infinite alternate}
.cl{animation:cl 70s linear infinite}
.bk{animation:bl 1.4s steps(2) infinite}
.fl{animation:24s linear infinite}
.f0{animation-name:f0}.f1{animation-name:f1}.f2{animation-name:f2}.f3{animation-name:f3}.f4{animation-name:f4}
@keyframes slide{0%{transform:translateX(0)}35%,85%{transform:translateX(90px)}100%{transform:translateX(0)}}
@keyframes drop{0%,5.83%,14.17%,16.67%,22.5%,30.83%,33.33%,39.17%,47.5%,50%,55.83%,64.17%,66.67%,72.5%,80.83%,100%{transform:translateY(40px)}9.17%,10.83%{transform:translateY(220px)}25.83%,27.5%{transform:translateY(180px)}42.5%,44.17%{transform:translateY(140px)}59.17%,60.83%{transform:translateY(100px)}75.83%,77.5%{transform:translateY(60px)}}
@keyframes blk{0%{opacity:0}6%,62%{opacity:1}64%,100%{opacity:0}}
@keyframes sw{from{transform:rotate(-2.5deg)}to{transform:rotate(2.5deg)}}
@keyframes tw{from{opacity:.15}to{opacity:1}}
@keyframes cl{from{transform:translateX(-140px)}to{transform:translateX(660px)}}
@keyframes bl{50%{opacity:.1}}
@keyframes f0{0%,8.5%{opacity:0;transform:translateY(-26px)}11%,95%{opacity:1;transform:none}100%{opacity:0}}
@keyframes f1{0%,25%{opacity:0;transform:translateY(-26px)}27.5%,95%{opacity:1;transform:none}100%{opacity:0}}
@keyframes f2{0%,41.7%{opacity:0;transform:translateY(-26px)}44.2%,95%{opacity:1;transform:none}100%{opacity:0}}
@keyframes f3{0%,58.3%{opacity:0;transform:translateY(-26px)}60.8%,95%{opacity:1;transform:none}100%{opacity:0}}
@keyframes f4{0%,75%{opacity:0;transform:translateY(-26px)}77.5%,95%{opacity:1;transform:none}100%{opacity:0}}
h2{font:800 clamp(2rem,5vw,2.8rem)/1 "Big Shoulders Display",Impact,sans-serif;text-transform:uppercase;margin:56px 0 18px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.card{position:relative;background:var(--panel);border:2px solid var(--ink);padding:24px 20px 20px}
.card::before{content:"";position:absolute;top:-2px;left:-2px;width:44px;height:9px;background:var(--y)}
.card h3{margin:0 0 6px;font-size:1.1rem}.card p{margin:0;color:var(--muted);font-size:.96rem}
.road{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));border-top:3px solid var(--ink)}
.road div{position:relative;padding:22px 14px 0 0}
.road div::before{content:"";position:absolute;top:-11px;left:0;width:19px;height:19px;background:var(--bg);border:3px solid var(--ink)}
.road .done::before{background:var(--y)}
.road .now::before{background:var(--y);animation:ping 1.8s infinite}
.road b{display:block}.road span{color:var(--muted);font-size:.93rem}
.contact{margin-top:56px;background:var(--y);color:#16120a;border:3px solid #16120a;box-shadow:8px 8px 0 #16120a;padding:24px 26px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.contact h2{margin:0 0 2px;font-size:2rem}.contact p{margin:0;font-weight:600}
.btn{background:#16120a;color:#fff;padding:13px 24px;text-decoration:none;font-weight:600}
a:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
footer{text-align:center;color:var(--muted);font-size:.9rem;margin-top:32px}
@media(max-width:860px){.hero{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{animation:none!important}.track i{width:72%}}