/* Luxury motion system (DESIGN.md). 4 px grid, weights 400/500/600, spring easing, strict CSP: no inline styles; dynamic values go through constructed stylesheets (motion.js). */
:root{--s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--spring:cubic-bezier(.22,1,.36,1);--smooth:cubic-bezier(.2,.7,.2,1);--cx:-400px;--cy:-400px}
/* ---- hero: blur-in words + word-swap pill + counters ---- */
.hero h1{font-weight:600}
.motion .hero h1 .w{display:inline-block;opacity:0;filter:blur(8px);transform:translateY(8px);animation:wordIn .9s var(--spring) forwards}
.hero h1 .w:nth-child(1){animation-delay:.05s}.hero h1 .w:nth-child(2){animation-delay:.13s}.hero h1 .w:nth-child(3){animation-delay:.21s}.hero h1 .w:nth-child(4){animation-delay:.29s}.hero h1 .w:nth-child(5){animation-delay:.37s}.hero h1 .w:nth-child(6){animation-delay:.45s}.hero h1 .w:nth-child(7){animation-delay:.53s}.hero h1 .w:nth-child(8){animation-delay:.61s}
@keyframes wordIn{to{opacity:1;filter:blur(0);transform:none}}
.swap-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);margin:var(--s-4) 0 var(--s-2);font-weight:500;color:var(--ink-mid,#B7C3D9)}
.swap-pill{position:relative;display:inline-block;min-width:min(100%,336px);height:48px;border:1px solid var(--line,rgba(212,175,55,.32));border-radius:24px;overflow:hidden;background:rgba(13,17,26,.7);box-shadow:0 0 24px rgba(212,175,55,.08)}
.swap-pill span{position:absolute;inset:0;display:flex;align-items:center;padding:0 var(--s-5);color:var(--gold,#D4AF37);font-weight:600;white-space:nowrap;opacity:0;transform:translateY(100%);transition:transform .6s var(--spring),opacity .4s var(--smooth)}
.swap-pill span.on{opacity:1;transform:none}
.swap-pill span.out{opacity:0;transform:translateY(-100%)}
.impact{display:grid;grid-template-columns:repeat(auto-fit,minmax(144px,1fr));gap:var(--s-4);margin:var(--s-5) 0 0;padding:0;list-style:none}
.impact li{border-top:1px solid var(--line-soft,rgba(212,175,55,.16));padding-top:var(--s-3)}
.impact b{display:block;font:600 2rem/1.2 "Space Grotesk",sans-serif;color:var(--accent,#00F0FF);font-variant-numeric:tabular-nums}
.impact span{color:var(--muted,#9AA7BD);font-weight:400;font-size:.9rem}
/* ---- corridor marquee ---- */
.marquee{position:relative;overflow:hidden;margin:var(--s-6) 0;border-block:1px solid var(--line-soft,rgba(212,175,55,.16));padding:var(--s-4) 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee .track{display:flex;width:max-content;animation:marq 36s linear infinite}
.marquee:hover .track,.marquee:focus-within .track{animation-play-state:paused}
.marquee ul{display:flex;gap:var(--s-6);list-style:none;margin:0;padding:0 var(--s-3);white-space:nowrap}
.marquee li{font:500 1.05rem "Space Grotesk",sans-serif;color:var(--text,#EAF0FA);font-variant-numeric:tabular-nums}
.marquee li i{color:var(--gold,#D4AF37);font-style:normal;margin-left:var(--s-3)}
.marquee li b{font-weight:500;color:var(--gold,#D4AF37)}
@keyframes marq{to{transform:translateX(-50%)}}
/* ---- bento + spotlight ---- */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s-5);margin:var(--s-5) 0}
.tile{position:relative;grid-column:span 4;padding:var(--s-5);border:1px solid var(--line,rgba(212,175,55,.32));border-radius:16px;background:linear-gradient(160deg,rgba(20,28,44,.8),rgba(8,12,20,.8));overflow:hidden;opacity:0;transform:translateY(24px) scale(.97);transition:opacity .7s var(--spring),transform .7s var(--spring),border-color .3s var(--smooth)}
.motion .tile.in,.no-motion .tile{opacity:1;transform:none}
.tile.w5{grid-column:span 5}.tile.w6{grid-column:span 6}.tile.w8{grid-column:span 8}.tile.w3{grid-column:span 3}.tile.w12{grid-column:1/-1}
.tile h3{margin:var(--s-3) 0 var(--s-2);font:600 1.15rem "Space Grotesk",sans-serif}
.tile p{margin:0;color:var(--ink-mid,#B7C3D9);font-weight:400}
.tile:hover{border-color:var(--gold,#D4AF37);transform:translateY(-4px)}
.spot::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s var(--smooth);background:radial-gradient(240px circle at var(--cx) var(--cy),rgba(246,224,138,.22),rgba(212,175,55,.08) 40%,transparent 70%);background-attachment:fixed}
.spot:hover::before{opacity:1}
.ico{display:block;width:32px;height:32px;stroke:var(--gold,#D4AF37);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.sectors{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-3);margin-top:var(--s-4)}
.sectors div{display:flex;align-items:center;gap:var(--s-3);font-weight:500;color:var(--text,#EAF0FA)}
.sectors .ico{width:24px;height:24px}
/* ---- path draw ---- */
.journey{margin:var(--s-6) 0}
.journey svg{width:100%;height:auto;display:block}
.journey .rail{fill:none;stroke:rgba(212,175,55,.18);stroke-width:2}
.journey .draw{fill:none;stroke:url(#pathgold);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 6px rgba(212,175,55,.55));transition:stroke-dashoffset 2.4s var(--smooth)}
.journey.in .draw,.no-motion .journey .draw{stroke-dashoffset:0}
.journey .node{fill:#0D111A;stroke:var(--gold,#D4AF37);stroke-width:2;opacity:.4;transition:opacity .5s var(--smooth),fill .5s}
.journey.in .node,.no-motion .journey .node{opacity:1}
.journey.in .node:nth-of-type(1){transition-delay:.1s}.journey.in .node:nth-of-type(2){transition-delay:.8s}.journey.in .node:nth-of-type(3){transition-delay:1.5s}.journey.in .node:nth-of-type(4){transition-delay:2.2s}
.journey text{fill:var(--text,#EAF0FA);font:500 15px Inter,sans-serif}
.journey text.sub{fill:var(--muted,#9AA7BD);font:400 13px Inter,sans-serif}
.journey text.num{fill:var(--gold,#D4AF37);font:600 16px "Space Grotesk",sans-serif}
/* ---- win table ---- */
.wintable{width:100%;border-collapse:collapse;margin:var(--s-5) 0}
.wintable th,.wintable td{padding:var(--s-4);text-align:left;border-bottom:1px solid var(--line-soft,rgba(212,175,55,.16));font-weight:400}
.wintable th{font-weight:500;color:var(--gold,#D4AF37)}
.wintable td:first-child{font-weight:500;color:var(--text,#EAF0FA)}
.wintable .yes{color:var(--emerald,#10B981);font-weight:500}
.wintable .no{color:var(--muted,#9AA7BD)}
.wintable tbody tr{opacity:.35;transition:opacity .6s var(--smooth),background .6s var(--smooth),box-shadow .6s}
.wintable.in tbody tr,.no-motion .wintable tbody tr{opacity:1}
.wintable.in tbody tr{background:linear-gradient(90deg,rgba(212,175,55,.10),transparent 60%)}
.wintable tbody tr:nth-child(1){transition-delay:.1s}.wintable tbody tr:nth-child(2){transition-delay:.3s}.wintable tbody tr:nth-child(3){transition-delay:.5s}.wintable tbody tr:nth-child(4){transition-delay:.7s}.wintable tbody tr:nth-child(5){transition-delay:.9s}.wintable tbody tr:nth-child(6){transition-delay:1.1s}
/* ---- price flip + toggles ---- */
.flipbar{display:flex;flex-wrap:wrap;gap:var(--s-4);margin:var(--s-3) 0}
.seg{display:inline-flex;border:1px solid var(--line,rgba(212,175,55,.32));border-radius:24px;overflow:hidden}
.seg button{background:transparent;color:var(--muted,#9AA7BD);border:0;box-shadow:none;border-radius:0;min-height:48px;padding:0 var(--s-5);font-weight:500}
.seg button[aria-pressed=true]{background:linear-gradient(135deg,var(--gold,#D4AF37),var(--amber,#F59E0B));color:#1a1203}
.flip{font-variant-numeric:tabular-nums;display:inline-block}
.flip.rolling{animation:flipPulse .48s var(--spring)}
@keyframes flipPulse{0%{transform:translateY(40%);opacity:.2}100%{transform:none;opacity:1}}
/* ---- completion burst ---- */
.burstwrap{position:relative;display:inline-block}
.burstbtn.done{background:linear-gradient(135deg,var(--emerald,#10B981),#0b7f5b);color:#fff;pointer-events:none;min-width:48px}
.burstbtn .chk{width:20px;height:20px;stroke:#fff;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;animation:chk .5s var(--spring) .1s forwards;vertical-align:-4px}
@keyframes chk{to{stroke-dashoffset:0}}
.burst{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.burst i{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--gold,#D4AF37);opacity:0;animation:pop .85s var(--spring) forwards}
.burst i:nth-child(3n){background:var(--emerald,#10B981)}.burst i:nth-child(4n){background:#F6E08A;width:4px;height:4px}
.burst i:nth-child(1){--dx:-56px;--dy:-34px}.burst i:nth-child(2){--dx:-32px;--dy:-52px}.burst i:nth-child(3){--dx:0px;--dy:-60px}.burst i:nth-child(4){--dx:34px;--dy:-50px}.burst i:nth-child(5){--dx:58px;--dy:-30px}.burst i:nth-child(6){--dx:60px;--dy:8px}
.burst i:nth-child(7){--dx:40px;--dy:44px}.burst i:nth-child(8){--dx:6px;--dy:56px}.burst i:nth-child(9){--dx:-30px;--dy:48px}.burst i:nth-child(10){--dx:-58px;--dy:16px}.burst i:nth-child(11){--dx:-44px;--dy:-4px}.burst i:nth-child(12){--dx:46px;--dy:-8px}
@keyframes pop{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.4)}}
@media (max-width:720px){.tile,.tile.w5,.tile.w6,.tile.w8,.tile.w3{grid-column:1/-1}.bento{gap:var(--s-4)}.sectors{grid-template-columns:1fr}.wintable th,.wintable td{padding:var(--s-3)}}
@media (prefers-reduced-motion:reduce){.motion .hero h1 .w{animation:none;opacity:1;filter:none;transform:none}.marquee .track{animation:none}.tile{opacity:1;transform:none;transition:none}.journey .draw{stroke-dashoffset:0;transition:none}.journey .node{opacity:1;transition:none}.wintable tbody tr{opacity:1;transition:none}.burst{display:none}.burstbtn .chk{animation:none;stroke-dashoffset:0}.flip.rolling{animation:none}.swap-pill span{transition:none}}
/* hero gradient survives the word split: each word paints its own solid colour (white to gold) */
.hero h1 .w{color:#F2F6FF;-webkit-text-fill-color:currentColor}
.hero h1 .w:nth-child(n+4){color:#F6E08A}
.hero h1 .w:nth-child(n+6){color:#D4AF37}

.chip.milestone{border-color:var(--emerald,#10B981);box-shadow:0 0 0 1px rgba(16,185,129,.35),0 0 24px rgba(212,175,55,.25);transition:box-shadow .6s var(--smooth)}