/* SETHignite - shared stylesheet
   Versioned filename on purpose: /assets/* is served immutable for a year,
   so a change here means bumping to site-v2.css and moving every <link>.
   See NOTES.md. */

/* ---------- tokens ---------- */
:root{
  --void:#06080B;
  --bg:#0A0E13;
  --panel:#0F151C;
  --panel-2:#141C25;
  --line:#1E2A36;
  --line-2:#2C3D4D;
  --text:#E9F0F7;
  --muted:#93A6B8;
  --dim:#5E7286;

  --ignite:#FF6A1A;
  --ignite-2:#FFB03A;
  --cyan:#3BE0FF;
  --violet:#9B6BFF;
  --ok:#3DD68C;

  --glow-ignite:0 0 0 1px rgba(255,106,26,.30), 0 8px 40px -8px rgba(255,106,26,.45);
  --glow-cyan:0 0 0 1px rgba(59,224,255,.25), 0 8px 40px -10px rgba(59,224,255,.35);

  --r:14px;
  --r-sm:9px;
  --r-lg:20px;
  /* The page runs the full width of the browser. Line length is kept sane
     by the components that carry prose (.lede, .ticks, .doc), not by a
     wrapper cap. */
  --maxw:100%;
  --pad:clamp(18px, 3.2vw, 64px);

  --f-disp:'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --f-body:'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --f-mono:'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  /* The page's own edges. Body is width:auto, so these come out of the
     content box rather than adding 2px of horizontal scroll. */
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
  background:var(--bg);
  color:var(--text);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
/* .app sets display:flex, which would otherwise beat the [hidden] default and
   leave filtered-out cards on screen. */
[hidden]{display:none !important}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--f-disp);line-height:1.12;letter-spacing:-.02em;margin:0;font-weight:700}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

/* the ambient field behind everything */
body::before{
  content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(255,106,26,.13), transparent 60%),
    radial-gradient(760px 480px at 92% 4%, rgba(59,224,255,.10), transparent 62%),
    radial-gradient(1000px 700px at 50% 108%, rgba(155,107,255,.08), transparent 65%);
}
body::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(1200px 800px at 50% 0%, #000 20%, transparent 78%);
  mask-image:radial-gradient(1200px 800px at 50% 0%, #000 20%, transparent 78%);
}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.sec{padding-block:clamp(56px, 9vw, 104px);position:relative}
.sec.tight{padding-block:clamp(40px, 6vw, 68px)}
.sec + .sec{border-top:1px solid var(--line)}
.center{text-align:center}
.lede{color:var(--muted);font-size:clamp(1rem,1.6vw,1.14rem);max-width:62ch}
.center .lede{margin-inline:auto}

.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.split{display:grid;gap:clamp(28px,5vw,56px);grid-template-columns:1fr;align-items:center}
@media(min-width:900px){
  .split{grid-template-columns:1fr 1fr}
  .split.wide-left{grid-template-columns:1.15fr .85fr}
}

/* ---------- type helpers ---------- */
.kicker{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.20em;text-transform:uppercase;
  color:var(--ignite-2);display:inline-flex;align-items:center;gap:9px;margin-bottom:16px;
}
.kicker::before{content:'';width:24px;height:1px;background:linear-gradient(90deg,transparent,var(--ignite))}
.kicker.cy{color:var(--cyan)}
.kicker.cy::before{background:linear-gradient(90deg,transparent,var(--cyan))}

h1{font-size:clamp(2.3rem, 6.2vw, 4.1rem)}
h2{font-size:clamp(1.75rem, 3.6vw, 2.6rem)}
h3{font-size:clamp(1.08rem, 1.6vw, 1.28rem)}
.sec h2 + .lede{margin-top:16px}
.mono{font-family:var(--f-mono)}
.hot{
  background:linear-gradient(100deg,var(--ignite),var(--ignite-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.cool{
  background:linear-gradient(100deg,var(--cyan),var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- buttons ---------- */
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.center .btns{justify-content:center}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 22px;border-radius:var(--r-sm);
  font-family:var(--f-disp);font-weight:600;font-size:.95rem;letter-spacing:-.01em;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn.pri{
  background:linear-gradient(100deg,var(--ignite),#FF8A2B);
  color:#150802;box-shadow:var(--glow-ignite);
}
.btn.pri:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(255,106,26,.5), 0 14px 46px -8px rgba(255,106,26,.6)}
.btn.ghost{background:rgba(255,255,255,.02);border-color:var(--line-2);color:var(--text)}
.btn.ghost:hover{transform:translateY(-2px);border-color:var(--cyan);box-shadow:var(--glow-cyan)}
.btn .ar{transition:transform .18s ease}
.btn:hover .ar{transform:translateX(3px)}

/* ---------- header ---------- */
.hdr{
  position:sticky;top:0;z-index:60;
  background:rgba(10,14,19,.78);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line);
}
.hdr .wrap{display:flex;align-items:center;gap:18px;height:66px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto}
/* The badge is the eye, transparent and wider than it is tall (223x142).
   Height-driven so the aspect can never be squashed. */
.brand img{height:34px;width:auto;border-radius:0}
/* Wordmark over tagline. A column, so the two lines stay locked to each
   other however the row around them wraps. */
.brandtext{display:flex;flex-direction:column;justify-content:center}
.tagline{
  font-family:var(--f-mono);font-size:.585rem;letter-spacing:.055em;
  color:var(--dim);margin-top:3px;white-space:nowrap;line-height:1;
}
.wordmark{font-family:var(--f-disp);font-weight:700;font-size:1.12rem;letter-spacing:-.03em;white-space:nowrap;line-height:1.05}
.wordmark i{
  font-style:normal;
  background:linear-gradient(100deg,var(--ignite),var(--ignite-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.nav{display:none;margin-left:auto;align-items:center;gap:4px}
.nav a{
  text-decoration:none;color:var(--muted);font-size:.92rem;font-weight:500;
  padding:8px 13px;border-radius:7px;transition:color .16s ease, background .16s ease;
}
.nav a:hover{color:var(--text);background:rgba(255,255,255,.045)}
.nav a[aria-current="page"]{color:var(--text);background:rgba(255,106,26,.10);box-shadow:inset 0 0 0 1px rgba(255,106,26,.22)}
.nav .btn{margin-left:10px;padding:9px 16px;font-size:.88rem}
.burger{
  margin-left:auto;display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:9px;background:rgba(255,255,255,.03);
  border:1px solid var(--line-2);cursor:pointer;
}
.burger span{display:block;width:17px;height:1.6px;background:var(--text);position:relative;transition:background .18s}
.burger span::before,.burger span::after{
  content:'';position:absolute;left:0;width:17px;height:1.6px;background:var(--text);transition:transform .22s ease;
}
.burger span::before{top:-5.5px}
.burger span::after{top:5.5px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-5.5px) rotate(-45deg)}
.mnav{display:none;border-top:1px solid var(--line);background:var(--panel)}
.mnav.open{display:block}
.mnav a{
  display:block;padding:14px var(--pad);text-decoration:none;color:var(--muted);
  border-bottom:1px solid var(--line);font-weight:500;
}
.mnav a[aria-current="page"]{color:var(--ignite-2)}
@media(min-width:900px){
  .nav{display:flex}
  .burger{display:none}
  .mnav{display:none !important}
}

/* ---------- hero ---------- */
.hero{position:relative;padding-block:clamp(52px,8vw,96px) clamp(56px,9vw,104px);overflow:hidden}
.hero .split{align-items:center}
.hero h1{margin-bottom:20px}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.badge{
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line-2);border-radius:100px;padding:6px 13px;
  background:rgba(255,255,255,.02);
}

/* ---------- full-bleed hero ----------
   The picture is an <img> rather than a CSS background so it can carry a
   srcset - a 1672px hero has no business landing on a phone. */
.heroshot{
  position:relative;overflow:hidden;
  min-height:clamp(540px, 84vh, 880px);
  display:flex;align-items:center;
  padding-top:clamp(11px, 1.75vw, 22px);
  padding-bottom:clamp(44px, 7vw, 88px);
  border-bottom:1px solid var(--line);
}
.heroBg{position:absolute;inset:0;z-index:0}
/* Every frame is stacked in the same box and cross-fades. They are the
   same pixel dimensions and share one object-position, so the room lands
   identically in all eight and only the bar top appears to change. */
.heroFrame{position:absolute;inset:0;display:block;opacity:0;transition:opacity .9s ease}
.heroFrame.on{opacity:1}
.heroBg img{width:100%;height:100%;object-fit:cover;object-position:50% 54%}

/* The caption for whichever frame is showing. Right-justified, sat above the
   dots, and carrying its own shadow because it lives out over the picture
   where the scrim is at its lightest. */
.heroLabel{
  position:absolute;z-index:3;right:var(--pad);bottom:46px;margin:0;
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(233,240,247,.88);text-align:right;
  text-shadow:0 1px 3px rgba(0,0,0,.95), 0 2px 16px rgba(0,0,0,.85);
  transition:opacity .3s ease;pointer-events:none;
}
@media(max-width:700px){ .heroLabel{font-size:.64rem;bottom:40px} }
.heroDots{position:absolute;z-index:3;right:var(--pad);bottom:18px;display:flex;gap:8px}
.heroDots button{
  width:8px;height:8px;padding:0;border:none;border-radius:100px;cursor:pointer;
  background:rgba(233,240,247,.30);
  transition:width .2s ease, background .2s ease;
}
.heroDots button:hover{background:rgba(233,240,247,.62)}
.heroDots button.on{width:26px;background:linear-gradient(90deg,var(--ignite),var(--ignite-2))}
/* Two gradients: one pulls the left side down so the card has something to
   sit on, one blends the top into the sticky header and the bottom into the
   next section. Measured against the brightest part of the plate. */
.heroScrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    /* Stops in PIXELS, not percent: the card is a fixed 660px box, so the
       dark zone that keeps it legible should track the card rather than the
       viewport. In percent it thinned out exactly where the copy sits as the
       window widened. */
    linear-gradient(90deg,
      rgba(6,8,11,.92) 0px, rgba(6,8,11,.80) 640px,
      rgba(6,8,11,.30) 1040px, rgba(6,8,11,.34) 100%),
    linear-gradient(180deg,
      rgba(6,8,11,.82) 0%, rgba(6,8,11,.06) 24%,
      rgba(6,8,11,.20) 58%, rgba(10,14,19,.97) 100%);
}
@media(max-width:900px){
  .heroScrim{
    background:linear-gradient(180deg,
      rgba(6,8,11,.92) 0%, rgba(6,8,11,.72) 22%,
      rgba(6,8,11,.78) 62%, rgba(10,14,19,.97) 100%);
  }
}
.heroInner{position:relative;z-index:2;width:100%}
.heroCard{
  max-width:660px;
  padding:clamp(22px, 3.2vw, 38px);
  border-radius:var(--r-lg);
  background:rgba(8,11,15,.15);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 30px 90px -34px rgba(0,0,0,.95);
  backdrop-filter:blur(20px) saturate(125%);
  -webkit-backdrop-filter:blur(20px) saturate(125%);
}
.heroCard{position:relative}
.heroToggle{
  position:absolute;top:10px;right:10px;z-index:2;
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 11px;border-radius:100px;cursor:pointer;
  background:rgba(8,11,15,.55);border:1px solid rgba(255,255,255,.16);
  color:var(--muted);font-family:var(--f-mono);font-size:.6rem;
  letter-spacing:.14em;text-transform:uppercase;
  transition:color .16s ease, border-color .16s ease, background .16s ease;
}
.heroToggle:hover{color:var(--text);border-color:var(--cyan);background:rgba(8,11,15,.75)}
.heroToggle svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .25s ease}
/* Collapsed: the panel's chrome goes entirely and only the pill is left, so
   the plate behind it is genuinely unobstructed. The scrim eases off too -
   with no copy over the picture there is nothing left to keep legible except
   the pill and the dots, and both carry their own background. */
.heroshot.imgOnly{align-items:flex-start}
.heroshot.imgOnly .heroCard{
  max-width:none;width:auto;padding:0;background:none;border:none;
  box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
}
.heroshot.imgOnly .heroToggle{position:static}
.heroshot.imgOnly .heroToggle svg{transform:rotate(180deg)}
.heroshot.imgOnly .heroScrim{opacity:.34}
.heroScrim{transition:opacity .45s ease}
/* The hero headline is a sentence, not the three words it used to be; at the
   global h1 size it ran to five lines and swallowed the section. */
.heroCard h1{font-size:clamp(1.95rem, 4.4vw, 3.05rem)}
/* The plate changes under the copy eight times a minute. A soft shadow
   costs nothing and holds the worst frame up, so no single surface has to
   be the one that decides how dark the scrim is. */
.heroCard h1, .heroCard .lede{text-shadow:0 1px 14px rgba(0,0,0,.55)}
.heroCard .lede{color:#C6D3DE}
.heroCard .badge{background:rgba(8,11,15,.5);border-color:rgba(255,255,255,.16)}
/* No blur support means no local darkening, so the panel carries it alone. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .heroCard{background:rgba(8,11,15,.55)}
}
/* ---------- framed photograph / rendering ---------- */
.shot{margin:0;position:relative}
.shot picture{display:block}
.shot img{
  width:100%;border-radius:12px;
  border:1px solid var(--line-2);
  box-shadow:0 30px 90px -30px rgba(0,0,0,.95), 0 0 70px -26px rgba(59,224,255,.30);
}
.shotcap{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.09em;
  color:var(--dim);margin-top:12px;text-align:right;
}
/* The mock-up is a hero-sized component; anywhere else it needs reining in. */
.ledwrap.mid{max-width:560px;margin-inline:auto}

/* ---------- the LED bartop mockup ---------- */
.ledwrap{position:relative}
.led{
  position:relative;border-radius:12px;overflow:hidden;
  border:1px solid var(--line-2);
  background:#04070A;
  box-shadow:0 30px 90px -30px rgba(0,0,0,.95), 0 0 0 6px rgba(255,255,255,.014), 0 0 70px -22px rgba(59,224,255,.35);
  aspect-ratio:16/10;
}
.ledscreen{position:absolute;inset:0}
.ledslide{
  position:absolute;inset:0;padding:clamp(14px,3.4vw,26px);
  display:flex;flex-direction:column;justify-content:center;gap:10px;
  opacity:0;transition:opacity .7s ease;
}
.ledslide.on{opacity:1}
.ledslide .st{
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.42);margin-bottom:4px;
}
.ledslide .big{
  font-family:var(--f-disp);font-weight:700;
  font-size:clamp(1.2rem,3.6vw,2rem);line-height:1.05;letter-spacing:-.02em;
}
.bar-row{display:flex;align-items:center;gap:10px}
.bar-row .fill{height:9px;border-radius:100px;flex:0 0 auto}
.bar-row .lbl{font-family:var(--f-mono);font-size:.66rem;color:rgba(255,255,255,.5);letter-spacing:.06em}
.s-menu{background:linear-gradient(160deg,#160B04,#07090C)}
.s-game{background:linear-gradient(160deg,#04121A,#07090C)}
.s-sport{background:linear-gradient(160deg,#0B0518,#07090C)}
.s-amb{background:linear-gradient(150deg,#1A0A03,#04121A)}
.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:6px}
.tiles i{display:block;height:clamp(16px,3.2vw,26px);border-radius:4px;background:rgba(255,255,255,.07)}
.score{display:flex;align-items:baseline;gap:14px;font-family:var(--f-disp);font-weight:700}
.score b{font-size:clamp(1.6rem,5vw,2.6rem);letter-spacing:-.03em}

/* the pixel grid that makes it read as an LED panel */
.ledgrid{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(0,0,0,.34) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.34) 1px, transparent 1px);
  background-size:5px 5px;
  mix-blend-mode:multiply;
}
.ledglare{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.10) 0%, transparent 34%, transparent 66%, rgba(255,255,255,.05) 100%);
}
/* the bartop the panel is set into */
.ledlip{
  height:16px;margin:0 3%;border-radius:0 0 16px 16px;
  background:linear-gradient(180deg,#1B1208,#0D0906);
  border:1px solid #241809;border-top:none;
  box-shadow:0 24px 44px -22px rgba(0,0,0,.9);
}
.leddots{display:flex;gap:7px;justify-content:center;margin-top:18px}
.leddots button{
  width:7px;height:7px;padding:0;border-radius:100px;border:none;cursor:pointer;
  background:var(--line-2);transition:background .2s, width .2s;
}
.leddots button.on{width:22px;background:linear-gradient(90deg,var(--ignite),var(--ignite-2))}

/* ---------- stat strip ---------- */
.stats{
  display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
}
.stat{background:var(--panel);padding:24px 20px;text-align:center}
.stat b{
  display:block;font-family:var(--f-disp);font-size:clamp(1.5rem,3.4vw,2.1rem);
  font-weight:700;letter-spacing:-.03em;
}
.stat span{
  display:block;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);margin-top:7px;
}

/* ---------- cards ---------- */
.card{
  background:linear-gradient(180deg, var(--panel), rgba(15,21,28,.55));
  border:1px solid var(--line);border-radius:var(--r);padding:26px;
  position:relative;overflow:hidden;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.card::after{
  content:'';position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,106,26,.55),transparent);
  opacity:0;transition:opacity .25s ease;
}
.card:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:0 20px 50px -26px rgba(0,0,0,.9)}
.card:hover::after{opacity:1}
.card h3{margin-bottom:10px}
.card p{color:var(--muted);font-size:.95rem}
.card .num{
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.16em;color:var(--dim);
  display:block;margin-bottom:14px;
}
.ico{
  width:42px;height:42px;border-radius:11px;display:grid;place-items:center;margin-bottom:16px;
  background:rgba(255,106,26,.10);border:1px solid rgba(255,106,26,.22);
}
.ico svg{width:20px;height:20px;stroke:var(--ignite-2);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ico.cy{background:rgba(59,224,255,.09);border-color:rgba(59,224,255,.22)}
.ico.cy svg{stroke:var(--cyan)}
.ico.vi{background:rgba(155,107,255,.09);border-color:rgba(155,107,255,.22)}
.ico.vi svg{stroke:var(--violet)}

/* feature list */
.ticks{display:grid;gap:12px;margin-top:24px;max-width:70ch}
.ticks li{display:flex;gap:12px;align-items:flex-start;color:var(--muted);font-size:.96rem}
.ticks svg{
  width:17px;height:17px;flex:0 0 auto;margin-top:4px;
  stroke:var(--ignite);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.ticks b{color:var(--text);font-weight:600}

/* ---------- placeholder slots ---------- */
.ph{
  position:relative;border:1.5px dashed var(--line-2);border-radius:var(--r);
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.014) 0 10px, transparent 10px 20px),
    var(--panel);
  display:grid;place-items:center;text-align:center;padding:26px;min-height:180px;color:var(--dim);
}
.ph.tall{min-height:300px}
.ph.wide{aspect-ratio:16/9;min-height:0}
.ph.sq{aspect-ratio:1/1;min-height:0}
.ph .phl{
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);
}
.ph .phn{font-size:.82rem;margin-top:8px;max-width:36ch;color:var(--dim);line-height:1.5}
.ph svg{width:26px;height:26px;stroke:var(--line-2);fill:none;stroke-width:1.4;margin-bottom:12px}
.ph::before{
  content:'PLACEHOLDER';position:absolute;top:10px;left:12px;
  font-family:var(--f-mono);font-size:.56rem;letter-spacing:.2em;color:rgba(255,106,26,.55);
}

/* ---------- app cards ---------- */
.app{
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel);
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  display:flex;flex-direction:column;
}
.app:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:0 20px 50px -26px rgba(0,0,0,.9)}
.appart{aspect-ratio:16/10;position:relative;display:grid;place-items:center;border-bottom:1px solid var(--line)}
.appart span{
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.2em;
  color:rgba(255,255,255,.5);text-transform:uppercase;
}
.appart::after{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(0,0,0,.3) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,0,0,.3) 1px,transparent 1px);
  background-size:4px 4px;mix-blend-mode:multiply;
}
.appbody{padding:18px 20px 20px;flex:1;display:flex;flex-direction:column}
.appbody h3{font-size:1.02rem;margin-bottom:7px}
.appbody p{color:var(--muted);font-size:.88rem;flex:1}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.tag{
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);border:1px solid var(--line);border-radius:100px;padding:4px 10px;
}
.tag.st{color:var(--ok);border-color:rgba(61,214,140,.3);background:rgba(61,214,140,.07)}
.tag.soon{color:var(--ignite-2);border-color:rgba(255,176,58,.3);background:rgba(255,176,58,.07)}

/* filter chips */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:30px}
.chip{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  padding:8px 15px;border-radius:100px;border:1px solid var(--line-2);
  background:rgba(255,255,255,.02);color:var(--muted);cursor:pointer;
  transition:color .16s ease, border-color .16s ease, background .16s ease;
}
.chip:hover{color:var(--text);border-color:var(--cyan)}
.chip.on{background:rgba(255,106,26,.12);border-color:rgba(255,106,26,.45);color:var(--ignite-2)}

/* ---------- spec table ---------- */
.specwrap{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel)}
table.spec{width:100%;border-collapse:collapse;font-size:.92rem}
table.spec caption{
  text-align:left;padding:16px 20px;border-bottom:1px solid var(--line);
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ignite-2);
  background:rgba(255,106,26,.05);
}
table.spec th,table.spec td{padding:13px 20px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
table.spec tr:last-child th,table.spec tr:last-child td{border-bottom:none}
table.spec th{font-weight:500;color:var(--muted);width:44%;font-size:.88rem}
table.spec td{font-family:var(--f-mono);font-size:.86rem;color:var(--text)}
table.spec td.tbd{color:var(--dim)}

/* ---------- steps ---------- */
.steps{counter-reset:s;display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.step{position:relative;padding-top:26px;border-top:1px solid var(--line)}
.step::before{
  counter-increment:s;content:'0' counter(s);
  position:absolute;top:-10px;left:0;background:var(--bg);padding-right:12px;
  font-family:var(--f-mono);font-size:.78rem;color:var(--ignite);letter-spacing:.1em;
}
.step h3{font-size:1.02rem;margin-bottom:8px}
.step p{color:var(--muted);font-size:.9rem}

/* ---------- CTA band ---------- */
.cta{
  border:1px solid var(--line-2);border-radius:var(--r-lg);padding:clamp(32px,5.5vw,58px);
  background:
    radial-gradient(600px 300px at 20% 0%, rgba(255,106,26,.15), transparent 62%),
    radial-gradient(600px 300px at 85% 100%, rgba(59,224,255,.11), transparent 62%),
    var(--panel);
  text-align:center;position:relative;overflow:hidden;
}

/* ---------- forms ---------- */
.form{display:grid;gap:16px}
.row2{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:640px){ .row2{grid-template-columns:1fr 1fr} }
.field label{
  display:block;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px;
}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.025);border:1px solid var(--line-2);color:var(--text);
  font-family:var(--f-body);font-size:.95rem;transition:border-color .16s, box-shadow .16s;
}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--ignite);box-shadow:0 0 0 3px rgba(255,106,26,.14);
}
.field select{appearance:none;cursor:pointer}
.notice{
  border:1px solid rgba(255,176,58,.3);background:rgba(255,176,58,.07);
  border-radius:var(--r-sm);padding:14px 16px;font-size:.88rem;color:var(--ignite-2);
}
.notice.done{border-color:rgba(61,214,140,.3);background:rgba(61,214,140,.07);color:var(--ok)}

/* ---------- footer ---------- */
.ftr{border-top:1px solid var(--line);background:var(--void);padding-block:52px 30px}
.fgrid{display:grid;gap:34px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-bottom:38px}
.fcol h4{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);margin-bottom:16px;font-weight:400;
}
.fcol li{margin-bottom:10px}
.fcol a{color:var(--muted);text-decoration:none;font-size:.92rem;transition:color .16s}
.fcol a:hover{color:var(--ignite-2)}
.fbot{
  border-top:1px solid var(--line);padding-top:24px;display:flex;flex-wrap:wrap;gap:14px;
  justify-content:space-between;align-items:center;font-size:.84rem;color:var(--dim);
}
.fbot p{font-family:var(--f-mono);font-size:.76rem;letter-spacing:.04em}

/* ---------- small utilities ----------
   Deliberately few. If you find yourself adding a tenth, the pattern
   probably wants a component class instead. */
.mt40{margin-top:40px}
.mt44{margin-top:44px}
.mt46{margin-top:46px}
.mb14{margin-bottom:14px}
.ctr{justify-content:center}
/* Column swap only once there are two columns to swap. On one column the
   text must still come before the picture it introduces. */
@media(min-width:900px){ .ord1{order:1} .ord2{order:2} }
.stat b.tbd{font-family:var(--f-mono);font-size:1.05rem;color:var(--dim);letter-spacing:.12em}
.phnote{
  margin-top:18px;text-align:center;font-size:.84rem;color:var(--dim);
  font-family:var(--f-mono);letter-spacing:.03em;
}
.fnote{color:var(--dim);font-size:.88rem;max-width:30ch}

/* ---------- reveal ---------- */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease}
.js .rv.in{opacity:1;transform:none}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .js .rv{opacity:1;transform:none}
}

/* ---------- focus ---------- */
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ignite);color:#150802;padding:10px 18px;border-radius:0 0 9px 0;
  font-family:var(--f-disp);font-weight:600;text-decoration:none;
}
.skip:focus{left:0}