/* Homepage, rebuilt from the Claude Design board.
 *
 * The board ships 256 inline styles and no classes because its canvas editor needs them
 * that way. Every value here was read out of that source: the radii, the glass, the pill
 * shapes, the section backgrounds, the dial's layers. Loads after styles.css and touches
 * nothing outside the homepage. Tokens (--accent-cyan, --font-display and so on) come from
 * styles.css; the few colours the design adds are declared here.
 * ------------------------------------------------------------------------------------- */

:root{
  --band:#12121a;
  --ink-2:#c8c8d4;            /* body copy on dark */
  --ink-3:#a8a8be;            /* kickers, small labels */
  --ink-4:#a0a0b0;            /* nav links, quiet notes */
  --ink-dim:#8a8a9e;          /* disabled */
  --line:rgba(255,255,255,.08);
  --glass:rgba(255,255,255,.03);
  --cyan:#00F5FF;
}


/* An explicit display on a rule beats the browser's own [hidden] rule, which silently
   broke the trailer's play button and left the mint card visible on every roadmap stop.
   Guard it once here rather than remembering it at each call site. */
[hidden]{display:none!important}

/* ---- primitives ------------------------------------------------------------- */
.home section{position:relative;padding:8rem 2rem}
.home section.band{background:var(--band)}
.home #game{padding:9rem 2rem}
.home #anticheat{padding:10rem 2rem;overflow:hidden}
.home #watch{padding:7rem 2rem}
.home #trailer,.home #workshop{padding:0}

.home .wrap-1400{max-width:1400px;margin:0 auto}
.home .wrap-1200{max-width:1200px;margin:0 auto}
.home .wrap-1100{max-width:1100px;margin:0 auto}
.home .wrap-1000{max-width:1000px;margin:0 auto}
.home .wrap-720 {max-width:720px;margin:0 auto;text-align:center}

.home h2{font-family:var(--font-display);font-weight:900;line-height:1.1;margin:0 0 1.25rem;color:#fff}
.home .kicker,.home .kicker-grey,.home .kicker-sm{
  font-family:var(--font-ui);font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 1rem;font-size:.66rem;
}
.home .kicker-sm{font-size:.66rem;margin:0 0 .5rem}
/* A section label that has to hold the space a heading used to. */
.home .kicker-lit{color:var(--cyan);font-size:.78rem;font-weight:600}
/* Colour that carries the argument rather than decorating it: what the game rewards is lit,
   what it does not reward is dimmed, so the contrast in the sentence is visible before it is
   read. Cyan does the work; the brief keeps the other accents for elsewhere. */
.home .hl{color:var(--cyan)}
.home .quiet{color:var(--ink-4)}
.home .lede{font-family:var(--font-body);font-size:1.15rem;line-height:1.6;color:var(--ink-2);margin:0}
.home .lede-lg{font-family:var(--font-body);font-size:clamp(1.2rem,2.2vw,1.5rem);line-height:1.5;color:#fff;margin:0}
.home .note{font-family:var(--font-ui);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);margin:1.5rem 0 0}

.home .btn-solid,.home .btn-line{
  display:inline-block;font-family:var(--font-ui);font-size:.85rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;padding:1rem 1.75rem;border-radius:6px;
  transition:transform .2s,filter .2s,background .2s;
}
.home .btn-solid{background:var(--cyan);color:#0a0a0f}
.home .btn-solid:hover{filter:brightness(1.1);transform:translateY(-1px)}
.home .btn-line{color:#fff;border:1px solid rgba(255,255,255,.18)}
.home .btn-line:hover{background:rgba(255,255,255,.06)}
.home .btns{display:flex;flex-wrap:wrap;gap:1rem;margin-top:.5rem}
.home .btns.centre{justify-content:center;gap:.75rem;margin:0}

.skip-link{position:absolute;left:-9999px;top:0;z-index:2000;padding:.7rem 1.1rem;background:var(--cyan);color:#0a0a0f;font-family:var(--font-ui);font-size:.8rem;font-weight:700;text-decoration:none}
.skip-link:focus{left:0}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Header and footer now live in chrome.css, shared with the generated sub-pages. */


/* ---- hero: the centred statement ---------------------------------------------- */
.home #top{min-height:100vh;display:flex;flex-direction:column;padding:calc(var(--nav-h,96px) + 2rem) 2rem 3rem;overflow:hidden}
.home .hero-media{position:absolute;inset:0;z-index:0}
.home .hero-media img,
.home .hero-media video{width:100%;height:100%;object-fit:cover;display:block}
.home .hero-media::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(10,10,15,.55) 0%,rgba(10,10,15,.35) 35%,rgba(10,10,15,.92) 100%)}
.home .hero-wrap{position:relative;z-index:1;flex:1;min-height:0;max-width:1200px;margin:0 auto;width:100%;
  display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.home .hero-title{font-family:var(--font-display);font-weight:900;font-size:clamp(2.4rem,6.5vw,4.5rem);line-height:1.05;
  margin:0 0 1.25rem;text-transform:uppercase;color:#fff;text-shadow:0 4px 30px rgba(10,10,15,.9)}
.home .hero-title .w{display:inline-block;white-space:nowrap}
.home .hero-title .l{display:inline-block;position:relative;animation:sparkBuild 7s ease-in-out infinite}
.home .hero-title .sh::after{content:'';position:absolute;left:38%;top:12%;width:5px;height:5px;border-radius:1px;
  background:var(--cyan);box-shadow:0 0 12px var(--cyan);opacity:0;animation:sparkShard 7s ease-in-out infinite;animation-delay:inherit}
.home .hero-sub{font-family:var(--font-ui);font-size:clamp(.85rem,1.4vw,1.05rem);font-weight:600;letter-spacing:.3em;
  text-transform:uppercase;color:var(--cyan);max-width:700px;margin:0 auto;animation:sloganGlow 4.5s ease-in-out infinite}

.home .latest{position:relative;z-index:1;max-width:1200px;margin:0 auto;width:100%;padding-top:3rem}
.home .latest-h{font-family:var(--font-ui);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);
  text-align:center;margin:0 0 1rem}
.home .latest-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.home .upd{display:flex;align-items:center;gap:.9rem;padding:.7rem;border-radius:12px;
  border:1px solid rgba(255,255,255,.1);background:rgba(10,10,15,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  text-decoration:none;color:inherit;transition:border-color .2s,transform .2s}
.home .upd:hover{border-color:rgba(0,245,255,.45);transform:translateY(-2px)}
.home .upd-off{opacity:.42;filter:grayscale(1);cursor:default;pointer-events:none}
.home .upd-off:hover{border-color:rgba(255,255,255,.08);transform:none}
.home .upd-soon{display:block;margin-top:.2rem;font-family:var(--font-ui);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;font-style:normal;color:var(--ink-3)}
.home .upd-img{width:66px;height:46px;flex:none;border-radius:6px;background:center/cover no-repeat rgba(139,92,246,.25);
  display:flex;align-items:center;justify-content:center}
.home .upd-badge{font-family:var(--font-ui);font-size:.66rem;font-weight:700;letter-spacing:.18em;color:#fff;
  background:linear-gradient(135deg,rgba(139,92,246,.35),rgba(10,10,15,.9))}
.home .upd-t{min-width:0}
.home .upd b{font-family:var(--font-body);font-size:1rem;font-weight:600;line-height:1.25;color:#fff}

/* ---- a run, start to finish ---------------------------------------------------- */
.home .run{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4rem;align-items:center}
.home .run-media{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.home .run-media img,
.home .run-media video{width:100%;height:100%;min-height:420px;object-fit:cover;display:block}
.home .tag-abs{position:absolute;left:1.25rem;top:1.25rem;font-family:var(--font-ui);font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:#fff;padding:.4rem .8rem;border-radius:999px;background:rgba(10,10,15,.6);
  border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px)}
.home .run-copy{display:flex;flex-direction:column;gap:1.5rem}
.home .run-copy .lede{font-size:1.2rem}
/* Status, not controls. These used to be boxed rows with the live one lit cyan, which read
   as three buttons; two of the three have nowhere to go. A dot and a rule say the same thing
   without inviting a click. */
.home .modes{display:flex;flex-direction:column;gap:0;margin-top:1.75rem;list-style:none;padding:0}
.home .mode{display:flex;gap:1rem;align-items:baseline;padding:.85rem 0;
  border-top:1px solid rgba(255,255,255,.06)}
.home .mode:last-child{border-bottom:1px solid rgba(255,255,255,.06)}
/* The dot hangs off the title, not off the row. Pinned to the row it drifted, because the
   flex baseline is set by the description beside it, which is the larger of the two. */
.home .mode b::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.22)}
.home .mode.live b::before{background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.home .mode.live b{color:var(--cyan)}
.home .mode span{flex:1}
.home .mode em{font-style:normal;flex:none;align-self:baseline;font-family:var(--font-ui);font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding:.2rem .5rem;
  border:1px solid rgba(255,255,255,.14);border-radius:4px;white-space:nowrap}
.home .mode.live em{color:var(--cyan);border-color:rgba(0,245,255,.3)}
@media (max-width:640px){
  .home .mode{flex-wrap:wrap}
  .home .mode em{order:-1;margin-left:auto}
}
.home .mode b{font-family:var(--font-display);font-size:.85rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;flex:none;min-width:134px;position:relative;padding-left:1.4rem}
.home .mode span{font-family:var(--font-body);font-size:1.08rem;color:var(--ink-2)}
.home .money{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2.5rem;
  margin-top:3rem;padding-top:3rem;border-top:1px solid var(--line)}
.home .money p:last-child{font-family:var(--font-body);font-size:1.3rem;line-height:1.45;color:#fff;margin:0}

/* ---- trailer --------------------------------------------------------------------- */
.home #trailer{background:#000}
.home #trailer .frame{position:relative;width:100%;aspect-ratio:16/9;max-height:78vh;overflow:hidden}
.home #trailer video{width:100%;height:100%;object-fit:cover;display:block}
.home .frame-wash{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(10,10,15,.35) 0%,transparent 30%,rgba(10,10,15,.75) 100%)}
/* The play pill is gone: the player's own controls do the job without a slab of our
   chrome sitting in the middle of the picture. */
/* Clear of the player's control bar, which is always on screen now that the pill is gone.
   pointer-events off so the caption never swallows a click meant for the scrubber. */
.home #trailer .cap{position:absolute;left:2rem;bottom:4.5rem;margin:0;font-family:var(--font-ui);font-size:.7rem;
  letter-spacing:.16em;text-transform:uppercase;color:#fff;pointer-events:none;
  text-shadow:0 1px 12px rgba(0,0,0,.8)}

/* ---- roadmap: the dial ---------------------------------------------------------- */
.home #roadmap{overflow:hidden}
.home .road{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:3rem;align-items:center;justify-items:center;margin-top:2rem}

/* user-select:none is not cosmetic here. Without it the browser starts a text selection as
   soon as you drag across anything selectable, then fires pointercancel to take the pointer
   back, and the drag dies mid-gesture. It survived a grab near the hub, where there is
   nothing to select, and died everywhere else, which is exactly the "it works, then it
   doesn't" in Paul's recording. The design board had it; the port dropped it. */
.home .dial{position:relative;width:min(480px,100%);aspect-ratio:1;cursor:grab;touch-action:none;outline:none;
  user-select:none;-webkit-user-select:none}
.home .dial.dragging{cursor:grabbing}
.home .dial:focus-visible .d-outer{border-color:var(--cyan)}
.home .dial>div{position:absolute;border-radius:50%}
.home .d-glow{inset:0;background:conic-gradient(from 0deg,rgba(0,245,255,.35),rgba(139,92,246,.12) 40%,transparent 70%);
  filter:blur(18px);opacity:.9;animation:dialSweep 12s linear infinite}
.home .d-outer{inset:3.5%;border:1px solid rgba(0,245,255,.28);
  background:radial-gradient(circle at center,rgba(10,10,15,.2) 55%,rgba(0,245,255,.06) 100%)}
.home .d-faint{inset:11%;border:1px solid rgba(255,255,255,.06)}
.home .d-dashed{inset:17%;border:1px dashed rgba(0,245,255,.16)}
.home .d-ticks{inset:3.5%;animation:dialSweep 22s linear infinite reverse}
.home .d-ticks i{position:absolute;left:50%;top:0;bottom:0;width:1px;margin-left:-.5px;transform-origin:center center;
  background:linear-gradient(to bottom,var(--col) 0 var(--len),transparent var(--len))}
.home .d-pointer{inset:3.5%;transform:rotate(90deg);border-radius:0}
.home .d-pointer .tri{position:absolute;left:50%;top:-14px;transform:translateX(-50%);width:0;height:0;
  border-left:9px solid transparent;border-right:9px solid transparent;border-top:16px solid var(--cyan);
  filter:drop-shadow(0 0 8px rgba(0,245,255,.7))}
.home .d-pointer .stem{position:absolute;left:50%;top:4px;transform:translateX(-50%);width:2px;height:38px;
  background:linear-gradient(to bottom,var(--cyan),transparent)}
.home .d-ring{inset:0;will-change:transform}
.home .d-ring i{position:absolute;width:12px;height:12px;transform:translate(-50%,-50%);
  background:rgba(10,10,15,.9);border:2px solid var(--ring,#a0a0b0);transition:width .3s,height .3s,background .3s,box-shadow .3s}
.home .d-ring i.on{width:18px;height:18px;background:var(--ring);box-shadow:0 0 18px var(--ring)}
/* A 12px dot is a fair target with a mouse and a poor one with a thumb. The dot keeps its
   size and gets a larger invisible one around it, so aiming at a stop is enough. */
.home .d-ring i::after{content:"";position:absolute;inset:-11px;border-radius:50%}
.home .d-ring i{cursor:pointer}
.home .d-orbit{inset:24%;border:1px solid rgba(0,245,255,.14);animation:dialSweep 30s linear infinite}
.home .d-orbit i{position:absolute;left:50%;top:-3px;width:6px;height:6px;border-radius:50%;background:rgba(0,245,255,.55);transform:translateX(-50%)}
.home .d-hub{inset:27%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  background:radial-gradient(circle at 50% 32%,#23233a 0%,#12121a 55%,#0a0a0f 100%);border:1px solid rgba(0,245,255,.22);
  box-shadow:inset 0 0 40px rgba(0,245,255,.12),0 0 30px rgba(0,0,0,.6);pointer-events:none;padding:1rem}
.home .d-pos{font-family:var(--font-ui);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-4)}
.home .d-state{display:flex;align-items:center;gap:.4rem;font-family:var(--font-ui);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;margin-top:.35rem}
.home .d-state i{width:6px;height:6px;border-radius:50%;background:currentColor}
.home .d-state.pulse i{animation:badgePulse 2s infinite}
.home .d-when{font-family:var(--font-display);font-size:clamp(1.05rem,2.6vw,1.4rem);font-weight:700;color:#fff;margin-top:.25rem}
.home .d-rule{width:74px;height:1px;background:linear-gradient(to right,transparent,rgba(0,245,255,.6),transparent);margin:.6rem 0}
.home .d-hint{font-family:var(--font-ui);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}

.home .stop-col{width:100%}
.home .stop-card{padding:2rem;border-radius:14px;border:1px solid var(--line);background:var(--glass);height:260px;
  display:flex;flex-direction:column;justify-content:center;transition:border-color .3s,background .3s}
.home .stop-card.here{border-color:rgba(0,245,255,.45);background:rgba(0,245,255,.06)}
.home .stop-card h3{font-family:var(--font-display);font-size:clamp(1.2rem,2.4vw,1.6rem);font-weight:700;margin:0 0 .9rem;color:#fff}
.home .stop-card p{font-family:var(--font-body);font-size:1.15rem;color:var(--ink-2);margin:0;line-height:1.5}

.home .mint{margin-top:.85rem;padding:1rem 1.25rem;border-radius:12px;border:1px solid rgba(0,245,255,.3);background:rgba(0,245,255,.05);
  display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
.home .mint-body{flex:1;min-width:200px}
.home .mint-row{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.home .mint-n{font-family:var(--font-display);font-size:1.15rem;font-weight:700;color:#fff}
.home .mint-lab{font-family:var(--font-ui);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.home .mint-bar{height:3px;border-radius:999px;background:rgba(255,255,255,.12);margin-top:.6rem;overflow:hidden}
.home .mint-bar i{display:block;height:100%;border-radius:999px;background:var(--cyan);box-shadow:0 0 10px rgba(0,245,255,.6);transition:width .6s ease}
.home .mint-held{font-family:var(--font-body);font-size:.95rem;color:var(--ink-3);margin:.55rem 0 0}
.home .mint .btn-solid{padding:.7rem 1.2rem;font-size:.74rem}

.home .scale-wrap{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--line)}
.home .scale-wrap .kicker-grey{font-size:.66rem;letter-spacing:.2em;margin:0 0 .9rem}
.home .scale-track{position:relative;height:4px;background:rgba(255,255,255,.1);margin:0 14px}
.home .scale-track>i{position:absolute;left:0;top:0;height:100%;background:var(--cyan);box-shadow:0 0 14px rgba(0,245,255,.6);transition:width .6s ease}
.home .sc-dot{position:absolute;top:50%;transform:translate(-50%,-50%);width:10px;height:10px;border-radius:50%;padding:0;cursor:pointer;
  background:#0a0a0f;border:2px solid rgba(255,255,255,.28);transition:all .3s}
.home .sc-dot.on{width:16px;height:16px;background:var(--ring);border-color:var(--ring);box-shadow:0 0 16px var(--ring)}
.home .scale-labels{position:relative;height:76px;margin:0 14px}
.home .scale-labels>.lit{position:absolute;left:0;top:22px;height:2px;background:var(--cyan);box-shadow:0 0 12px rgba(0,245,255,.5);transition:width .6s ease;z-index:1}
.home .scale-labels>.dim{position:absolute;left:0;right:0;top:22px;height:2px;background:rgba(255,255,255,.08)}
.home .sc-lab{position:absolute;top:0;transform:translateX(var(--tx));background:none;border:0;padding:0;cursor:pointer;z-index:2}
.home .sc-lab i{display:block;width:1px;background:rgba(255,255,255,.28);margin:0 auto .4rem;transition:background .3s}
.home .sc-lab[style*="text-align:left"] i{margin-left:0}
.home .sc-lab[style*="text-align:right"] i{margin-right:0}
.home .sc-lab.on i{background:var(--ring)}
.home .sc-lab span{display:inline-block;font-family:var(--font-ui);font-size:.68rem;font-weight:600;letter-spacing:.08em;color:var(--ink-dim);
  background:var(--band);padding:0 .4rem;white-space:nowrap;transition:color .3s}
.home .sc-lab.on span,.home .sc-lab:hover span{color:#fff}

/* ---- droid workshop: full-bleed still with the copy on the left ------------------- */
.home #workshop{position:relative;overflow:hidden}
.home .ws-media img{width:100%;height:72vh;min-height:460px;object-fit:cover;display:block}
.home .ws-wash{position:absolute;inset:0;background:linear-gradient(to right,rgba(10,10,15,.9) 0%,rgba(10,10,15,.55) 45%,rgba(10,10,15,.15) 100%)}
.home .ws-copy{position:absolute;inset:0;display:flex;align-items:center}
.home .ws-copy .wrap-1200{padding:0 2rem;width:100%}
.home .ws-text{max-width:520px}
.home .ws-text h2{font-size:clamp(1.8rem,4.5vw,2.8rem)}
.home .ws-text p{font-family:var(--font-body);font-size:1.2rem;color:#fff;line-height:1.55;margin:0 0 2rem}
/* The workshop is not open yet, so this is a note about what is coming rather than a
   control. It used to be a filled, bordered box the size of a button, which is an
   invitation to click something that cannot be clicked. */
.home .ws-btn{display:inline-flex;align-items:baseline;gap:.75rem;font-family:var(--font-ui);font-size:.85rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim);padding:0;cursor:default}
.home .ws-btn em{font-style:normal;padding:.2rem .55rem;border-radius:4px;border:1px solid rgba(255,255,255,.16);
  font-size:.66rem;letter-spacing:.14em;color:var(--ink-3)}

/* ---- partners ---------------------------------------------------------------------- */
.home .partners{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;margin-top:2.5rem}
.home .partner{padding:2.5rem;border-radius:14px;border:1px solid var(--line);background:var(--glass);display:flex;flex-direction:column;gap:1.25rem}
.home .p-head{display:flex;align-items:center;gap:.9rem}
.home .p-icon{width:44px;height:44px;border-radius:10px;border:1px solid rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff}
.home .p-icon svg{opacity:.85}
.home .p-head b{display:block;font-family:var(--font-display);font-size:1.5rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#fff;line-height:1.1}
.home .p-head span{display:block;font-family:var(--font-ui);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-top:.3rem}
.home .partner p{font-family:var(--font-body);font-size:1.15rem;color:var(--ink-2);line-height:1.55;margin:0}
.home .p-link{display:inline-block;padding:.7rem 0;font-family:var(--font-ui);font-size:.8rem;font-weight:600;color:var(--cyan);text-decoration:none;margin-top:auto}
.home .p-link:hover{text-decoration:underline}
.home .p-note{font-family:var(--font-ui);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);margin-top:auto}

/* ---- weapons ----------------------------------------------------------------------- */
.home .w-head{display:flex;flex-wrap:wrap;gap:2rem;align-items:end;justify-content:space-between;margin-bottom:2rem}
.home .w-head>div{max-width:620px}
.home .w-head h2{font-size:clamp(1.8rem,4.5vw,2.8rem);line-height:1.15;margin:0}
.home .guns{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.75rem;margin-bottom:1.25rem}
.home .guns button{padding:.9rem .5rem;border-radius:8px;background:var(--glass);border:1px solid rgba(255,255,255,.1);color:#fff;
  font-family:var(--font-ui);font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:all .2s}
.home .guns button:hover{border-color:rgba(255,255,255,.3)}
.home .guns button[aria-pressed="true"]{background:rgba(0,245,255,.14);border-color:var(--cyan)}
.home .gun-stage{position:relative;border-radius:16px;border:1px solid rgba(255,255,255,.1);aspect-ratio:16/9;
  background:center/cover no-repeat var(--bg-tertiary,#1a1a25);overflow:hidden}
.home .gun-wash{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,15,.92) 0%,rgba(10,10,15,.1) 55%,transparent 100%)}
.home .gun-stage.unshot .gun-wash{background:linear-gradient(to top,rgba(10,10,15,.94) 0%,rgba(10,10,15,.45) 55%,rgba(10,10,15,.3) 100%)}
.home #gun-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0;background:#0a0a0f}
/* neither layer is interactive, and both sit over the video's own controls if it ever
   falls back to showing them */
.home .gun-wash{z-index:1;pointer-events:none}
.home .gun-meta{position:absolute;left:0;right:0;bottom:0;padding:2rem;display:flex;align-items:end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;z-index:2;pointer-events:none}
.home .gun-meta b{font-family:var(--font-display);font-size:clamp(1.1rem,2.6vw,1.6rem);font-weight:700;color:#fff;text-transform:uppercase}
.home .gun-meta span{font-family:var(--font-ui);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.home .gun-stage.unshot .gun-meta span{color:var(--ink-4)}


/* ---- anti-cheat ---------------------------------------------------------------------- */
.home .ac-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:700px;height:700px;border-radius:50%;
  background:var(--cyan);opacity:.14;filter:blur(140px);pointer-events:none}
.home #anticheat .wrap-1000{position:relative}
.home .ac-title{font-size:clamp(2.2rem,6vw,4rem);line-height:1.05;margin:0 0 2.5rem}
.home .ac-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:4rem;align-items:start}
.home .ac-copy{display:flex;flex-direction:column;gap:2rem}
.home .ac-cards{display:flex;flex-direction:column;gap:1rem}
.home .ac-card{padding:1.5rem;border-radius:12px;border:1px solid var(--line);background:var(--glass)}
.home .ac-card b{display:block;font-family:var(--font-display);font-size:.95rem;font-weight:600;color:#fff;margin-bottom:.5rem}
.home .ac-card p{font-family:var(--font-body);font-size:1.05rem;color:var(--ink-2);line-height:1.5;margin:0}

/* ---- watch it get built ---------------------------------------------------------------- */
.home #watch h2{font-size:clamp(1.6rem,4vw,2.4rem);line-height:1.15;margin:0 0 1rem}
.home #watch p{font-family:var(--font-body);font-size:1.2rem;color:var(--ink-2);margin:0 0 2.25rem}

/* ---- footer ------------------------------------------------------------------------------ */

/* ---- motion, from the board ---------------------------------------------------------------- */
@keyframes badgePulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(16,185,129,.4)}50%{opacity:.8;box-shadow:0 0 0 8px transparent}}
@keyframes ringPulse{0%{transform:scale(.85);opacity:.45}100%{transform:scale(1.5);opacity:0}}
@keyframes dialSweep{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes sloganGlow{
  0%,100%{text-shadow:0 0 18px rgba(0,245,255,.35),0 2px 14px rgba(0,0,0,.95);opacity:.92}
  50%{text-shadow:0 0 30px rgba(0,245,255,.85),0 0 60px rgba(0,245,255,.25),0 2px 14px rgba(0,0,0,.95);opacity:1}
}
@keyframes sparkBuild{
  0%,58%{opacity:1;filter:blur(0);transform:translate3d(0,0,0) scale(1);text-shadow:0 0 22px rgba(0,245,255,.22),0 4px 30px rgba(0,0,0,.9)}
  66%{opacity:.4;filter:blur(3px);transform:translate3d(2px,-3px,0) scale(1.04);text-shadow:0 0 30px rgba(0,245,255,.6),0 4px 30px rgba(0,0,0,.9)}
  74%{opacity:.85;filter:blur(0);transform:translate3d(-1px,1px,0) scale(.99)}
  82%,100%{opacity:1;filter:blur(0);transform:translate3d(0,0,0) scale(1);text-shadow:0 0 22px rgba(0,245,255,.22),0 4px 30px rgba(0,0,0,.9)}
}
@keyframes sparkShard{
  0%,58%{opacity:0;transform:translate(0,0) scale(.6)}
  70%{opacity:.9;transform:translate(-7px,-9px) scale(1)}
  80%{opacity:.5;transform:translate(6px,8px) scale(.8)}
  100%{opacity:0;transform:translate(0,0) scale(.6)}
}

/* ---- narrower screens ------------------------------------------------------------------------ */
}
@media (pointer:coarse),(max-width:768px){
  /* a 13px-tall link is not a tap target; 44px is the accessible minimum */
  .home .upd{padding:.9rem}
}
@media (max-width:980px){
  .home section{padding-left:1.25rem;padding-right:1.25rem}
  .home .run,.home .ac-grid,.home .partners{grid-template-columns:1fr;gap:2rem}
  .home .latest-row{grid-template-columns:1fr}
  .home .latest .upd:nth-child(n+3){display:none}
  .home .guns{grid-template-columns:repeat(3,minmax(0,1fr))}
  .home .dial{max-width:320px}
  .home .ws-media img{height:60vh;min-height:420px}
  .home .ac-glow{width:420px;height:420px}
}
@media (max-width:640px){
  .home .guns{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home .sc-lab span{font-size:.68rem;padding:0 .2rem}
  .home .mode{flex-direction:column;gap:.3rem}
}
@media (prefers-reduced-motion:reduce){
  .home *{animation:none!important;transition:none!important}
}

/* ---- touch: real tap targets -------------------------------------------------
 * The roadmap dots are 10px by design and the signup sits in a 999px pill, so both
 * need their hit area grown rather than their look changed. WCAG's inline exception
 * covers links inside a sentence, which is why prose links are left alone.
 * --------------------------------------------------------------------------- */
@media (pointer:coarse),(max-width:768px){
  .home .sc-dot{position:absolute}
  .home .sc-dot::after{content:'';position:absolute;inset:-11px;border-radius:50%}
  .home .sc-lab{padding-bottom:.4rem}
}

/* Eight stops will not fit legibly across a phone, so the scale scrolls instead of
   shrinking its type into illegibility. */
@media (max-width:640px){
  .home .scale-wrap{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;padding-bottom:.5rem}
  .home .scale-track,.home .scale-labels{min-width:560px}
}

/* Partner logo slot.
 * The drawn mark is what shows by default, and the real logo replaces it only once the
 * file in /media/partners has actually loaded. Done the other way round, a lazy image
 * below the fold is never requested, its error never fires, and the slot sits empty. */
.home .p-icon{position:relative;overflow:hidden}
.home .p-icon img{display:none;width:100%;height:100%;object-fit:contain}
.home .p-icon.has-logo{padding:5px}
.home .p-icon.has-logo img{display:block}
.home .p-icon.has-logo svg{display:none}

/* Chain marks on a roadmap stop, standing in for the names. Sized off the card title so
   they sit where the words did. */
.home .marks{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap}
/* A gentle radius so the Avalanche badge, which is a solid square, sits beside the
   Solana mark, which floats free on transparent. No effect on Solana. */
.home .marks img{height:1.5em;width:auto;display:block;border-radius:18%}
.home .marks i{font-style:normal;font-family:var(--font-ui);font-size:.62em;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-4)}