/* Homepage v3 — configurator-first, uses style.css tokens for one visual world with the rest of the site. */
.hm-hero{position:relative;display:grid;grid-template-columns:1.15fr 1fr;gap:34px;align-items:center;padding:40px 0 36px}
.hm-hero::before{content:"";position:absolute;inset:-40px 0;background:radial-gradient(760px 460px at 30% 45%,rgba(0,136,201,.16),transparent 62%);pointer-events:none}
.hm-shot{position:relative;border-radius:10px;overflow:hidden;background:#000;box-shadow:0 20px 50px rgba(0,0,0,.45)}
.hm-shot img{width:100%;height:auto;display:block}
.hm-shot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
.hm-shot video.on{opacity:1}
.hm-shot .badge{position:absolute;left:14px;top:14px;display:inline-flex;align-items:center;gap:8px;background:rgba(6,8,13,.78);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:8px 14px;font-family:var(--display);text-transform:uppercase;font-size:.72rem;letter-spacing:.06em;color:#fff}
.hm-shot .badge b{color:var(--blue-lit);font-weight:400}
.hm-hero .eyebrow{color:var(--blue-lit);font-family:var(--display);text-transform:uppercase;font-size:.76rem;letter-spacing:.16em}
.hm-hero h1{font-family:var(--display);text-transform:uppercase;font-size:clamp(2.2rem,4vw,3.4rem);line-height:.98;margin:10px 0 0}
.hm-hero .sub{color:#dfe5ef;font-size:1.05rem;margin:16px 0 12px;max-width:44ch}
.hm-hero .microproof{color:var(--muted);font-size:.9rem;margin-bottom:18px}.hm-hero .microproof b{color:var(--text)}
.hm-pick-t{font-family:var(--display);text-transform:uppercase;font-size:.82rem;letter-spacing:.06em;color:var(--muted);margin-bottom:10px}
.hm-pick{display:flex;flex-direction:column;gap:8px}
.hm-pick a{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;background:var(--panel);border:1px solid rgba(53,64,127,.55);border-radius:8px;padding:12px 14px;text-decoration:none;color:inherit;min-height:56px;transition:border-color .12s,background .12s}
.hm-pick a:hover,.hm-pick a:focus-visible{border-color:var(--blue);background:rgba(0,136,201,.08)}
.hm-pick a.on{border-color:var(--blue);background:rgba(0,136,201,.1)}
.hm-pick b{display:block;font-family:var(--display);text-transform:uppercase;font-size:.92rem}
.hm-pick span{display:block;color:var(--muted);font-size:.84rem;margin-top:2px}
.hm-pick .price{font-family:var(--display);color:var(--amber);font-size:.95rem;white-space:nowrap}
.hm-hero .cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:16px}
.hm-hero .cta .btn-coin{text-decoration:none;display:inline-block}
.hm-hero .cta .more{color:var(--blue-lit);text-decoration:none;font-family:var(--display);text-transform:uppercase;font-size:.82rem;letter-spacing:.04em}
/* line-up grouped */
.hm-groups{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:22px}
.hm-group{background:var(--panel);border:1px solid rgba(53,64,127,.5);border-radius:10px;overflow:hidden}
.hm-group .gh{padding:14px 18px;border-bottom:1px solid rgba(53,64,127,.4)}
.hm-group .gh b{font-family:var(--display);text-transform:uppercase;font-size:.95rem}.hm-group .gh span{display:block;color:var(--muted);font-size:.86rem;margin-top:2px}
.hm-group .gm{display:flex;gap:10px;padding:14px}
.hm-gm{flex:1;text-decoration:none;color:inherit;background:var(--bg);border:1px solid rgba(53,64,127,.4);border-radius:8px;overflow:hidden;display:block}
.hm-gm .im{height:120px;background:radial-gradient(ellipse at 50% 80%,#141a2e,#0d0f18)}.hm-gm .im img{width:100%;height:100%;object-fit:contain;display:block}
.hm-gm b{display:block;font-family:var(--display);text-transform:uppercase;font-size:.72rem;padding:8px 8px 0;line-height:1.2}
.hm-gm span{display:block;color:var(--amber);font-family:var(--display);font-size:.76rem;padding:2px 8px 10px}
/* how it works */
.hm-steps{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin-top:22px}
/* Full-bleed cinematic hero on desktop: the media fills the band edge to edge and the copy sits
   over it on the right. Below 960px the original stacked card layout takes over unchanged. */
@media(min-width:961px){
  /* Full-screen film hero: the video owns the whole viewport with nothing over it, and every
     word of the copy sits below the fold. Runs edge to edge and up behind the fixed header. */
  .hm-hero{display:block;margin-inline:calc(50% - 50vw);margin-top:-110px;padding:0;min-height:0}
  .hm-hero::before{display:none}
  .hm-shot{position:relative;height:100vh;border-radius:0;box-shadow:none;max-width:none;margin:0;background:#080810}
  /* Dennis, bug sheet row 59: "in desktop view, final boss marquee is cut off — want to see the whole arcade
     top and bottom." The clip is 16:9; with object-fit:cover any window WIDER than 16:9 crops top AND bottom
     (measured with research/_r59-measure.mjs: 13% at 1920x800, 12.5% at 2560x1080, 8.3% at 1536x720), and the
     render only carries ~10% headroom above the marquee — so past ~10% the marquee lost its top. `contain`
     keeps the whole machine in frame at every window shape. The letterbox is invisible: the clip's own
     background is rgb(8,8,16), which .hm-shot now matches exactly. */
  .hm-shot img,.hm-shot video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center}
  /* only a soft top wash so the header stays readable, and a fade into the page at the bottom */
  /* left scrim carries the headline; it is fully clear by 66% so the machine and players are untouched */
  .hm-shot::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(8,11,18,.92) 0%,rgba(8,11,18,.72) 26%,rgba(8,11,18,.28) 48%,rgba(8,11,18,0) 66%),linear-gradient(180deg,rgba(8,11,18,.62) 0%,rgba(8,11,18,.12) 16%,rgba(8,11,18,0) 34%,rgba(8,11,18,0) 74%,rgba(8,11,18,.9) 100%)}
  /* The page's only h1 lifts out of the copy block and sits over the video, aligned to the
     content column. Mobile leaves it in normal flow, so there is still exactly one h1. */
  .hm-hero h1{position:absolute;z-index:3;margin:0;pointer-events:none;
    top:clamp(9rem,24vh,17rem);left:max(3vw,calc((100vw - 1180px)/2));
    width:min(14ch,46vw);font-size:clamp(2.6rem,4.6vw,4.8rem);line-height:1;letter-spacing:.015em;
    color:#fff;opacity:.88;text-shadow:0 2px 2px rgba(0,0,0,.72),0 8px 28px rgba(0,0,0,.64);
    transform-origin:left center;will-change:opacity,transform}
  .hm-shot .badge{z-index:2;top:auto;left:50%;transform:translateX(-50%);bottom:30px}
  /* static on purpose: it must not become the h1's containing block, and it never overlaps the video */
  .hm-hero>div:not(.hm-shot){position:static;max-width:1180px;margin:0 auto;padding:52px 5vw 8px}
}
/* clip on body, never on .page: .page is capped at 1180px and would crop the full-bleed hero.
   Global, because the hero bleeds full width on phones too. */
body{overflow-x:clip}
@media(max-width:960px){
  .hm-hero{grid-template-columns:1fr;gap:22px;padding:28px 0}
  /* phones get the video too, edge to edge at its native 16:9 rather than boxed in a small card */
  .hm-shot{max-width:none;margin-inline:calc(50% - 50vw);border-radius:0;aspect-ratio:16/9}
  .hm-shot img,.hm-shot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .hm-shot .badge{top:auto;bottom:12px;left:12px;right:auto;font-size:.64rem;padding:7px 12px;white-space:nowrap}   /* phones: off the marquee, onto the kick panel, one line */
  .hm-shot .badge b{display:none}   /* the explainer is in the headline below anyway */
  .hm-hero h1{font-size:2.1rem}
  .hm-groups{grid-template-columns:1fr}
  .hm-steps{grid-template-columns:1fr 1fr}
}
/* motion (OpenRouter plan 2026-08-17): one-way reveals, transform+opacity only, reduced-motion -> final */
.rv{opacity:0;transform:translateY(26px) scale(.985);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
.hm-hero h1 .w{display:inline-block;opacity:0;transform:translateY(18px);animation:wRise .72s cubic-bezier(.16,1,.3,1) both}
@keyframes wRise{to{opacity:1;transform:none}}
.hm-pick a{opacity:0;transform:translateY(10px);animation:chip .5s cubic-bezier(.33,1,.68,1) both}
@keyframes chip{to{opacity:1;transform:none}}
.hm-rule{display:block;height:2px;background:var(--blue-lit);transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.16,1,.3,1);margin:8px 0 4px;width:44px;border-radius:2px}
.hm-rule.in{transform:scaleX(1)}
@media(max-width:960px){.rv{transform:translateY(22px) scale(.985)}.hm-hero h1 .w{transform:translateY(12px)}}
html[data-motion="final"] .rv,html[data-motion="final"] .hm-pick a,html[data-motion="final"] .hm-hero h1 .w{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
html[data-motion="final"] .hm-rule{transform:scaleX(1)!important;transition:none!important}


/* Built around you (sheet rows 268-271, 9/1). Replaces Why Phantom; How it works removed at his request.
   His purple #7926DA is 2.91:1 on the page background - it fails even large-text contrast, so it paints the
   decorative glyphs only (no contrast requirement) and TEXT uses #A353FF, the same hue, 4.92 on the page AND 4.58 on the panel.
   ⛔ Measure against --panel too, not just the page: #9D49FF passed the page at 4.54 and failed the
   cards at 4.22, and axe caught it. */
.hm-bay{--bay-ac:#A353FF;--bay-glyph:#7926DA}
.hm-bay h2 em{color:var(--bay-ac);font-style:normal}
.hm-bay .bay-sub{color:var(--muted);font-size:1.05rem;max-width:62ch;margin:14px 0 26px}
.hm-bay .bay-sub b{color:var(--bay-ac);font-weight:400}
.bay-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.bay-card{border:1px solid rgba(53,64,127,.55);border-radius:10px;background:var(--panel);padding:20px 18px}
.bay-card h3{font-family:var(--display);text-transform:uppercase;font-size:.95rem;letter-spacing:.03em;margin:14px 0 8px;color:var(--text)}
.bay-card p{color:var(--muted);font-size:.94rem;margin:0}
.bay-i,.bay-shield{width:34px;height:34px;fill:none;stroke:var(--bay-glyph);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;display:block}
.bay-bar{display:grid;grid-template-columns:auto 1fr 1fr;gap:20px;align-items:start;margin-top:16px;padding:20px;border:1px solid rgba(53,64,127,.55);border-radius:10px;background:var(--panel)}
.bay-bar .bay-shield{width:40px;height:40px}
.bay-bar p{color:var(--muted);font-size:.92rem;margin:0}
.bay-bt{font-family:var(--display);text-transform:uppercase;letter-spacing:.04em;color:var(--bay-ac)!important;font-size:.86rem;margin:0 0 6px!important}
.bay-bt-lg{font-size:1.15rem}
.bay-cta{display:grid;grid-template-columns:1.2fr .8fr;gap:26px;align-items:center;margin-top:16px;padding:24px;border:1px solid rgba(53,64,127,.55);border-radius:10px;background:radial-gradient(700px 300px at 20% 50%,rgba(121,38,218,.14),transparent 70%),var(--panel)}
.bay-cta p{color:var(--muted);margin:0}
.bay-act{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.bay-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0}
.bay-chips li{border:1px solid rgba(53,64,127,.6);border-radius:999px;padding:6px 12px;font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
@media(max-width:960px){.bay-grid{grid-template-columns:1fr 1fr}.bay-bar{grid-template-columns:1fr}.bay-cta{grid-template-columns:1fr}}
@media(max-width:620px){.bay-grid{grid-template-columns:1fr}}