/* ============================================================================
   SpeedGFX — SpeedTools dark brand
   Bebas Neue (display) · Barlow Condensed (body/UI) · JetBrains Mono (data)
   Cyan #00D7FF is signal only.
   Base shell + shared primitives. Per-section CSS is appended below the marker.
   ============================================================================ */

:root {
  /* surfaces */
  --bg:        #0E0F12;
  --bg2:       #14161A;
  --surface:   #1A1D24;
  --surface2:  #20242C;
  --border:    #2A2F39;

  /* text */
  --fg:        #F3F1EC;
  --muted:     #9AA1AD;
  --faint:     #6B7280;

  /* signal */
  --cyan:      #00D7FF;
  --cyan-dim:  #0e9fc4;
  --error:     #DB3537;
  --ok:        #3FB950;

  /* type */
  --display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --cond:    'Barlow Condensed', system-ui, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;

  --pad-x: clamp(20px, 5vw, 64px);
  --maxw: 1240px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--cond);
  font-size: 17px;
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--cyan); color: #04121a; }

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--cyan); color: #04121a; padding: 10px 16px;
  font-family: var(--mono); font-size: 13px; letter-spacing: 1px;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- shared primitives (referenced by section agents) ---------- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x); }

.block { position: relative; }

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cyan);
  display: inline-flex; align-items: center; gap: 8px;
}
.eyebrow::before {
  content: ""; width: 22px; height: 1px; background: var(--cyan); opacity: .7;
}

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 13px; font-weight: 500;
  letter-spacing: 1.5px; text-transform: uppercase;
  padding: 14px 22px; border: 1px solid var(--border);
  border-radius: 4px; cursor: pointer; background: transparent; color: var(--fg);
  transition: border-color .18s, background .18s, color .18s, transform .18s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-cyan { background: var(--cyan); color: #04121a; border-color: var(--cyan); font-weight: 600; }
.btn-cyan:hover { background: #5fe6ff; border-color: #5fe6ff; }
.btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); }
.btn .arr { transition: transform .18s; }
.btn:hover .arr { transform: translateX(3px); }

/* ============================ MASTHEAD ============================ */
.mast {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 14px var(--pad-x);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.mast-brand { display: flex; align-items: center; }
.mast-logo { height: 42px; width: auto; display: block; }
.mast-nav { display: flex; gap: 16px; flex-wrap: nowrap; }
.mast-nav a {
  font-family: var(--mono); font-size: 12px; letter-spacing: .5px;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
  transition: color .16s; position: relative; padding: 4px 0;
}
.mast-nav a:hover { color: var(--fg); }
.mast-nav a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0;
  background: var(--cyan); transition: width .2s;
}
.mast-nav a:hover::after { width: 100%; }
.mast-suite {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .5px;
  color: var(--muted); border: 1px solid var(--border);
  padding: 8px 12px; border-radius: 4px; transition: border-color .16s, color .16s;
}
.mast-suite:hover { border-color: var(--cyan); color: var(--cyan); }
.mast-suite .suite-arr { color: var(--cyan); }
.mast-right { display: flex; align-items: center; gap: 12px; }
.mast-buy {
  display: inline-flex; align-items: center;
  font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; color: #04121a; background: var(--cyan);
  padding: 9px 16px; border-radius: 4px; border: 1px solid var(--cyan);
  transition: background .16s, transform .16s; white-space: nowrap;
}
.mast-buy:hover { background: #5fe6ff; transform: translateY(-1px); }

/* contact licensing note */
.contact-note {
  margin-top: 22px; font-family: var(--mono); font-size: 12px; letter-spacing: .5px;
  color: var(--faint); line-height: 1.7;
}
.contact-note a { color: var(--cyan); }
.contact-note a:hover { text-decoration: underline; }

/* ============================ HERO ============================ */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(90px, 14vh, 180px) 0 clamp(70px, 9vw, 120px);
  background:
    radial-gradient(900px 500px at 78% -8%, color-mix(in srgb, var(--cyan) 14%, transparent), transparent 60%),
    var(--bg);
}
.hero-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 30%, transparent 78%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 30%, transparent 78%);
}
.hero-wrap { position: relative; z-index: 1; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x); }
.hero-eyebrow { margin-bottom: 26px; }
.hero-title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(64px, 12vw, 168px); line-height: 0.86;
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 30px;
}
.hero-title .line { display: block; }
.hero-title .accent { color: var(--cyan); }
.hero-lede {
  max-width: 720px; font-size: clamp(17px, 2.1vw, 21px); line-height: 1.55;
  color: var(--muted); margin-bottom: 38px;
}
.hero-lede strong { color: var(--fg); font-weight: 600; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 64px; }

.hero-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--border); border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
}
.hero-stats > div { background: var(--surface); padding: 22px 24px; }
.hero-stats dt {
  font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--faint); margin-bottom: 8px;
}
.hero-stats dd {
  font-family: var(--display); font-size: clamp(34px, 4vw, 48px); line-height: 1;
  letter-spacing: .5px;
}
.hero-stats dd .plus { color: var(--cyan); }
.hero-stats dd.small { font-size: clamp(15px, 1.6vw, 18px); font-family: var(--mono); letter-spacing: 1px; color: var(--muted); padding-top: 6px; }

/* ============================ TICKER ============================ */
.ticker {
  border-block: 1px solid var(--border); background: var(--bg2);
  overflow: hidden; padding: 14px 0;
}
.ticker-track { display: flex; width: max-content; animation: ticker 46s linear infinite; }
.ticker-set { display: flex; align-items: center; flex-shrink: 0; }
.ticker-set span {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--muted); padding: 0 10px;
}
.ticker-set .dot { color: var(--cyan); font-size: 8px; }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* ============================ CONTACT / FOOTER ============================ */
.contact {
  border-top: 1px solid var(--border);
  padding-block: clamp(80px, 10vw, 140px);
  background:
    radial-gradient(700px 400px at 50% 120%, color-mix(in srgb, var(--cyan) 12%, transparent), transparent 60%),
    var(--bg);
}
.contact-inner { text-align: center; max-width: 760px; margin-inline: auto; }
.contact .eyebrow { margin-bottom: 22px; }
.contact-title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(44px, 7vw, 96px); line-height: .9; text-transform: uppercase;
  margin-bottom: 22px;
}
.contact-title .accent { color: var(--cyan); }
.contact-lede { color: var(--muted); font-size: clamp(17px, 2vw, 20px); margin-bottom: 36px; }
.contact-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.foot {
  border-top: 1px solid var(--border); background: var(--bg2);
  padding: 40px var(--pad-x);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
}
.foot-brand { display: flex; align-items: center; gap: 14px; }
.foot-logo { height: 40px; width: auto; opacity: .95; }
.foot-meta { font-family: var(--mono); font-size: 11.5px; letter-spacing: .5px; color: var(--faint); line-height: 1.7; }
.foot-links { display: flex; gap: 22px; flex-wrap: wrap; }
.foot-links a { font-family: var(--mono); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); transition: color .16s; }
.foot-links a:hover { color: var(--cyan); }

/* ============================ RESPONSIVE SHELL ============================ */
.tiers-portal-link { color: var(--cyan); }
.tiers-portal-link:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .mast-nav { display: none; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .mast-suite { display: none; }
}
@media (max-width: 520px) {
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .hero-cta .btn { flex: 1 1 auto; justify-content: center; }
}

/* ====================================================================== */
/* SECTION STYLES (appended below) */
/* ===== variants ===== */
#variants {
  border-top: 1px solid var(--border);
  padding-block: clamp(72px, 9vw, 128px);
  background: var(--bg);
}

#variants .variants-head {
  margin-bottom: clamp(36px, 5vw, 64px);
}

#variants .variants-head .eyebrow {
  display: block;
  margin-bottom: 14px;
}

#variants .variants-title {
  font-family: var(--display);
  font-size: clamp(40px, 6vw, 82px);
  line-height: 0.92;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--fg);
  margin: 0;
  max-width: 18ch;
}

#variants .variants-accent {
  color: var(--cyan);
}

#variants .variants-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
}

#variants .variants-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

#variants .variants-card:hover {
  border-color: var(--cyan-dim);
  transform: translateY(-2px);
}

#variants .variants-accentbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
  z-index: 2;
}

#variants .variants-card:hover .variants-accentbar,
#variants .variants-card:focus-within .variants-accentbar {
  transform: scaleX(1);
}

#variants .variants-figure {
  margin: 0;
  padding: clamp(14px, 1.6vw, 20px);
  padding-bottom: 0;
}

#variants .variants-frame {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
}

#variants .variants-frame img {
  max-width: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

#variants .variants-caption {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: 10px;
}

#variants .variants-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(18px, 2vw, 26px);
  padding-top: clamp(14px, 1.6vw, 18px);
}

#variants .variants-titlerow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
}

#variants .variants-name {
  font-family: var(--display);
  font-size: clamp(26px, 3vw, 38px);
  line-height: 0.92;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--fg);
  margin: 0;
}

#variants .variants-discipline {
  color: var(--cyan);
}

#variants .variants-prefix {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 8px;
  white-space: nowrap;
  flex-shrink: 0;
  background: var(--bg2);
}

#variants .variants-class {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--faint);
  margin: 12px 0 0;
}

#variants .variants-tagline {
  font-family: var(--cond);
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 500;
  line-height: 1.2;
  color: var(--fg);
  margin: 14px 0 0;
}

#variants .variants-bullets {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

#variants .variants-bullets li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-family: var(--cond);
  font-size: 16px;
  line-height: 1.35;
  color: var(--muted);
}

#variants .variants-tick {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  margin-top: 7px;
  background: var(--cyan);
  border-radius: 1px;
  transform: rotate(45deg);
}

#variants .variants-cta {
  margin-top: auto;
  align-self: flex-start;
  margin-top: clamp(22px, 2.6vw, 30px);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

@media (max-width: 720px) {
  #variants .variants-grid {
    grid-template-columns: 1fr;
  }
  #variants .variants-title {
    max-width: none;
  }
}

@media (max-width: 400px) {
  #variants .variants-titlerow {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #variants .variants-card,
  #variants .variants-accentbar {
    transition: none;
  }
  #variants .variants-card:hover {
    transform: none;
  }
}

/* ===== road ===== */
#road{padding-block:clamp(72px,9vw,128px);border-top:1px solid var(--border);background:var(--bg);position:relative}
#road .road-head{max-width:760px}
#road .road-eyebrow{margin:0 0 18px}
#road .road-title{font-family:var(--display);font-size:clamp(40px,6vw,82px);line-height:0.92;letter-spacing:0.5px;text-transform:uppercase;color:var(--fg);margin:0}
#road .road-accent{color:var(--cyan)}
#road .road-intro{font-family:var(--cond);font-weight:400;font-size:clamp(16px,1.9vw,21px);line-height:1.5;color:var(--muted);margin:22px 0 0;max-width:680px}
#road .road-intro strong{color:var(--fg);font-weight:600}

#road .road-packages{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:34px 0 0;padding:0}
#road .road-chip{font-family:var(--mono);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--fg);background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:9px 16px;display:inline-flex;align-items:center;gap:8px}
#road .road-chip-sub{font-size:9px;letter-spacing:1px;color:var(--cyan);border:1px solid var(--cyan-dim);border-radius:3px;padding:1px 5px}

#road .road-grid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:6px;overflow:hidden;margin:clamp(48px,6vw,72px) 0 0;padding:0}
#road .road-card{background:var(--surface);padding:clamp(24px,2.6vw,32px);position:relative;transition:background .18s ease}
#road .road-card:hover{background:var(--surface2)}
#road .road-card-no{font-family:var(--mono);font-size:11px;letter-spacing:2px;color:var(--faint)}
#road .road-card-title{font-family:var(--cond);font-weight:600;font-size:clamp(19px,2.2vw,24px);text-transform:uppercase;letter-spacing:0.5px;color:var(--fg);margin:14px 0 10px;line-height:1.05}
#road .road-card-body{font-family:var(--cond);font-weight:400;font-size:15px;line-height:1.5;color:var(--muted);margin:0}
#road .road-card-feature{background:var(--bg2)}
#road .road-card-feature::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--cyan)}
#road .road-card-feature .road-card-no{color:var(--cyan)}
#road .road-sw{font-family:var(--mono);font-size:12px;letter-spacing:0.5px;font-weight:600}
#road .road-sw-purple{color:#9d6bff}
#road .road-sw-green{color:var(--ok)}
#road .road-sw-yellow{color:#E8C547}
#road .road-sw-red{color:var(--error)}

#road .road-gallery-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;margin:clamp(56px,7vw,88px) 0 22px}
#road .road-gallery-eyebrow{margin:0}
#road .road-gallery-note{font-family:var(--cond);font-weight:400;font-size:14px;color:var(--faint);margin:0;text-transform:uppercase;letter-spacing:0.5px}

#road .road-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
#road .road-shot{margin:0;display:flex;flex-direction:column}
#road .road-shot-wide{grid-column:span 2}
#road .road-frame{background:var(--bg2);border:1px solid var(--border);border-radius:6px;overflow:hidden;flex:1;display:flex;align-items:center;justify-content:center;padding:18px;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:28px 28px;background-position:center;position:relative}
#road .road-frame::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 120% at 50% 40%,transparent 40%,rgba(14,15,18,0.55) 100%);pointer-events:none}
#road .road-frame img{max-width:100%;height:auto;display:block;position:relative;z-index:1}
#road .road-cap{font-family:var(--mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin:11px 0 0;padding-left:1px}

#road .road-protocols{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin:clamp(48px,6vw,72px) 0 0;padding:22px 24px;background:var(--surface);border:1px solid var(--border);border-radius:6px}
#road .road-protocols-label{font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--faint)}
#road .road-proto-divider{width:1px;height:18px;background:var(--border)}
#road .road-proto-list{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0}
#road .road-proto{font-family:var(--mono);font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--fg);border:1px solid var(--border);border-left:2px solid var(--cyan);border-radius:4px;padding:7px 14px;background:var(--bg2)}

@media(max-width:980px){
  #road .road-grid{grid-template-columns:repeat(2,1fr)}
  #road .road-gallery{grid-template-columns:repeat(2,1fr)}
  #road .road-shot-wide{grid-column:span 2}
}
@media(max-width:720px){
  #road .road-grid{grid-template-columns:1fr}
  #road .road-gallery{grid-template-columns:1fr}
  #road .road-shot-wide{grid-column:auto}
}
@media(max-width:420px){
  #road .road-chip{padding:8px 13px}
  #road .road-protocols{padding:18px}
}

/* ===== circle ===== */
#circle{
  border-top:1px solid var(--border);
  padding-block:clamp(72px,9vw,128px);
  background:var(--bg);
}
#circle .circle-eyebrow{display:inline-block;margin-bottom:22px;}

#circle .circle-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:32px;flex-wrap:wrap;
}
#circle .circle-title{
  font-family:var(--display);
  font-size:clamp(40px,6vw,82px);
  line-height:0.92;letter-spacing:0.5px;
  text-transform:uppercase;color:var(--fg);margin:0;
}
#circle .circle-accent{color:var(--cyan);}

#circle .circle-license{
  display:flex;flex-direction:column;align-items:flex-end;gap:4px;
  border:1px solid var(--border);border-radius:6px;
  padding:10px 16px;background:var(--surface);
}
#circle .circle-license-k{
  font-family:var(--mono);font-size:10px;letter-spacing:2px;
  text-transform:uppercase;color:var(--faint);
}
#circle .circle-license-v{
  font-family:var(--mono);font-size:22px;letter-spacing:3px;
  font-weight:600;color:var(--cyan);
}

#circle .circle-intro{
  font-family:var(--cond);font-weight:400;
  font-size:clamp(16px,1.5vw,19px);line-height:1.5;
  color:var(--muted);max-width:70ch;
  margin:28px 0 22px;
}

#circle .circle-source-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:56px;}
#circle .circle-source{
  font-family:var(--mono);font-size:11px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--fg);
  border:1px solid var(--border);border-left:2px solid var(--cyan);
  border-radius:3px;padding:7px 12px;background:var(--bg2);
}

/* feature cards */
#circle .circle-cards{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--border);
  border:1px solid var(--border);border-radius:6px;overflow:hidden;
  margin-bottom:64px;
}
#circle .circle-card{
  background:var(--surface);padding:30px 26px 32px;
  position:relative;display:flex;flex-direction:column;
}
#circle .circle-card-ai{background:var(--surface2);}
#circle .circle-card-no{
  font-family:var(--mono);font-size:12px;letter-spacing:2px;
  color:var(--cyan);margin-bottom:18px;
}
#circle .circle-card-tag{
  position:absolute;top:26px;right:26px;
  font-family:var(--mono);font-size:9px;letter-spacing:2px;
  color:var(--bg);background:var(--cyan);
  padding:4px 8px;border-radius:3px;font-weight:600;
}
#circle .circle-card-title{
  font-family:var(--cond);font-weight:600;
  font-size:clamp(20px,2vw,25px);letter-spacing:0.4px;
  text-transform:uppercase;color:var(--fg);margin:0 0 12px;
}
#circle .circle-card-body{
  font-family:var(--cond);font-weight:400;
  font-size:15px;line-height:1.5;color:var(--muted);margin:0;
}

/* overlay chips */
#circle .circle-overlays{margin-bottom:72px;}
#circle .circle-overlays-label{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:2px;
  text-transform:uppercase;color:var(--faint);
  padding-bottom:14px;margin-bottom:18px;
  border-bottom:1px solid var(--border);
}
#circle .circle-chips{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:8px;
}
#circle .circle-chip{
  font-family:var(--mono);font-size:11px;letter-spacing:1px;
  text-transform:uppercase;color:var(--muted);
  border:1px solid var(--border);border-radius:3px;
  padding:6px 11px;background:var(--bg2);
  transition:color .15s,border-color .15s;
}
#circle .circle-chip:hover{color:var(--cyan);border-color:var(--cyan-dim);}

/* gallery */
#circle .circle-gallery-head{
  display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;
  margin-bottom:24px;
}
#circle .circle-gallery-eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:2px;
  text-transform:uppercase;color:var(--cyan);white-space:nowrap;
}
#circle .circle-gallery-note{
  font-family:var(--cond);font-weight:400;font-size:14px;
  line-height:1.4;color:var(--faint);margin:0;max-width:54ch;
}

#circle .circle-gallery{
  display:grid;grid-template-columns:repeat(2,1fr);gap:16px;
}
#circle .circle-shot{margin:0;display:flex;flex-direction:column;}
#circle .circle-shot-wide{grid-column:span 2;}
#circle .circle-frame{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:6px;overflow:hidden;
}
#circle .circle-frame-overlay{
  background:
    linear-gradient(var(--bg),var(--bg)),
    repeating-linear-gradient(0deg,transparent,transparent 23px,var(--surface) 23px,var(--surface) 24px),
    repeating-linear-gradient(90deg,transparent,transparent 23px,var(--surface) 23px,var(--surface) 24px);
}
#circle .circle-frame img{display:block;max-width:100%;width:100%;height:auto;}
#circle .circle-cap{
  font-family:var(--mono);font-size:11px;letter-spacing:2px;
  text-transform:uppercase;color:var(--muted);
  padding-top:12px;
}
#circle .circle-cap-overlay{color:var(--cyan);}
#circle .circle-cap::before{content:"// ";color:var(--faint);}

@media (max-width:720px){
  #circle .circle-cards{grid-template-columns:1fr;}
  #circle .circle-gallery{grid-template-columns:1fr;}
  #circle .circle-shot-wide{grid-column:span 1;}
  #circle .circle-license{align-self:flex-start;align-items:flex-start;}
}
@media (max-width:380px){
  #circle .circle-source-row{gap:8px;}
  #circle .circle-chips{gap:6px;}
}

/* ===== flo ===== */
#flo{
  border-top:1px solid var(--border);
  padding-block:clamp(72px,9vw,128px);
  background:var(--bg);
  position:relative;
}
#flo .flo-top{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,0.92fr);
  gap:clamp(28px,5vw,72px);
  align-items:start;
  margin-bottom:clamp(48px,6vw,80px);
}
#flo .flo-intro{
  max-width:560px;
  grid-column:1 / -1;
}
#flo .flo-eyebrow{
  margin:0 0 18px;
  display:inline-block;
}
#flo .flo-title{
  font-family:var(--display);
  font-size:clamp(40px,6vw,82px);
  text-transform:uppercase;
  line-height:0.92;
  letter-spacing:0.5px;
  color:var(--fg);
  margin:0 0 24px;
}
#flo .flo-accent{ color:var(--cyan); }
#flo .flo-lede{
  font-family:var(--cond);
  font-weight:400;
  font-size:clamp(16px,1.5vw,19px);
  line-height:1.5;
  color:var(--muted);
  margin:0 0 26px;
  max-width:52ch;
}
#flo .flo-tag{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--fg);
  background:var(--surface);
  border:1px solid var(--border);
  border-left:2px solid var(--cyan);
  padding:9px 14px;
  border-radius:4px;
  margin-bottom:30px;
}
#flo .flo-tag-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 0 3px rgba(0,215,255,0.15);
  flex:0 0 auto;
}
#flo .flo-specs{
  list-style:none;
  margin:0;padding:0;
  border-top:1px solid var(--border);
}
#flo .flo-spec{
  display:flex;
  align-items:baseline;
  gap:16px;
  padding:14px 0;
  border-bottom:1px solid var(--border);
}
#flo .flo-spec-k{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:1px;
  color:var(--cyan);
  flex:0 0 auto;
  width:24px;
}
#flo .flo-spec-v{
  font-family:var(--cond);
  font-size:15px;
  line-height:1.4;
  color:var(--fg);
}
#flo .flo-spec-v em{
  font-style:normal;
  color:var(--cyan);
  text-transform:uppercase;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:1px;
}

#flo .flo-strip{ margin-bottom:clamp(40px,5vw,64px); }
#flo .flo-strip:last-of-type{ margin-bottom:clamp(36px,4vw,48px); }
#flo .flo-strip-label{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--faint);
  margin:0 0 18px;
  padding-bottom:10px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
}
#flo .flo-strip-label::before{
  content:"";
  width:6px;height:6px;
  background:var(--cyan);
  margin-right:10px;
  flex:0 0 auto;
}

#flo .flo-grid{
  display:grid;
  gap:14px;
}
#flo .flo-grid-overlays{
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-flow:dense;
}
#flo .flo-card-wide{ grid-column:span 2; }
#flo .flo-card-tall{ grid-row:span 2; }
#flo .flo-grid-remote{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

#flo .flo-card{
  margin:0;
  display:flex;
  flex-direction:column;
  min-width:0;
}
#flo .flo-frame{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:6px;
  overflow:hidden;
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  transition:border-color 0.18s ease;
}
#flo .flo-card:hover .flo-frame{ border-color:var(--cyan-dim); }
#flo .flo-frame img{
  max-width:100%;
  height:auto;
  display:block;
}
#flo .flo-theme-light .flo-frame{ background:var(--surface2); }
#flo .flo-cap{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:9px;
  padding-left:1px;
}

#flo .flo-cta{
  font-family:var(--cond);
  font-size:clamp(16px,1.6vw,20px);
  color:var(--muted);
  margin:0;
  padding-top:clamp(28px,4vw,40px);
  border-top:1px solid var(--border);
  text-align:center;
}
#flo .flo-cta-link{
  color:var(--cyan);
  text-decoration:none;
  font-weight:500;
  border-bottom:1px solid transparent;
  transition:border-color 0.18s ease;
  white-space:nowrap;
}
#flo .flo-cta-link:hover{ border-bottom-color:var(--cyan); }
#flo .flo-cta-link:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
  border-radius:2px;
}

@media (max-width:900px){
  #flo .flo-grid-overlays{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  #flo .flo-card-wide{ grid-column:span 2; }
  #flo .flo-card-tall{ grid-row:auto; }
}
@media (max-width:720px){
  #flo .flo-grid-overlays,
  #flo .flo-grid-remote{ grid-template-columns:1fr; }
  #flo .flo-card-wide{ grid-column:auto; }
}

/* ===== remote ===== */
#remote{border-top:1px solid var(--border);padding-block:clamp(72px,9vw,128px);background:var(--bg);}
#remote .remote-head{max-width:760px;}
#remote .remote-eyebrow{margin:0 0 18px;}
#remote .remote-title{font-family:var(--display);font-size:clamp(40px,6vw,82px);line-height:0.92;letter-spacing:0.5px;text-transform:uppercase;color:var(--fg);margin:0 0 22px;}
#remote .remote-accent{color:var(--cyan);}
#remote .remote-intro{font-family:var(--cond);font-weight:400;font-size:clamp(16px,1.6vw,19px);line-height:1.5;color:var(--muted);margin:0;max-width:620px;}

#remote .remote-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:6px;overflow:hidden;margin-top:clamp(40px,5vw,64px);}
#remote .remote-card{background:var(--surface);padding:24px 22px 26px;position:relative;display:flex;flex-direction:column;}
#remote .remote-card-idx{font-family:var(--mono);font-size:12px;letter-spacing:2px;color:var(--cyan);display:block;margin-bottom:18px;}
#remote .remote-card-title{font-family:var(--mono);font-size:14px;letter-spacing:1.5px;text-transform:uppercase;color:var(--fg);margin:0 0 12px;line-height:1.2;}
#remote .remote-card-body{font-family:var(--cond);font-weight:400;font-size:15px;line-height:1.45;color:var(--muted);margin:0;}

#remote .remote-stage{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(16px,2vw,24px);align-items:start;margin-top:clamp(40px,5vw,64px);}
#remote .remote-shot{margin:0;}
#remote .remote-frame{background:var(--bg2);border:1px solid var(--border);border-radius:6px;overflow:hidden;}
#remote .remote-frame img{max-width:100%;width:100%;display:block;height:auto;}
#remote .remote-cap{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--faint);margin-top:12px;}
#remote .remote-cap-dot{width:6px;height:6px;background:var(--cyan);display:inline-block;flex:none;}
#remote .remote-shot-inset .remote-cap{color:var(--muted);}

#remote .remote-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);margin-top:clamp(24px,3vw,32px);}
#remote .remote-thumb{margin:0;}

#remote .remote-foot{margin-top:clamp(40px,5vw,56px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.5vw,40px);border-top:1px solid var(--border);padding-top:28px;}
#remote .remote-foot-line{font-family:var(--cond);font-weight:400;font-size:15px;line-height:1.5;color:var(--muted);margin:0;}
#remote .remote-foot-key{font-family:var(--mono);font-size:12px;letter-spacing:1px;color:var(--fg);}

@media(max-width:980px){
  #remote .remote-cards{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:720px){
  #remote .remote-cards{grid-template-columns:1fr;}
  #remote .remote-stage{grid-template-columns:1fr;}
  #remote .remote-thumbs{grid-template-columns:1fr;}
  #remote .remote-foot{grid-template-columns:1fr;gap:18px;}
}
@media(max-width:380px){
  #remote .remote-card{padding:20px 18px 22px;}
}

/* ===== protocols ===== */
#protocols{
  border-top:1px solid var(--border);
  padding-block:clamp(72px,9vw,128px);
  background:var(--bg);
}
#protocols .protocols-head{max-width:760px}
#protocols .protocols-title{
  font-family:var(--display);
  font-size:clamp(40px,6vw,82px);
  line-height:0.92;
  letter-spacing:0.5px;
  text-transform:uppercase;
  color:var(--fg);
  margin:14px 0 0;
}
#protocols .protocols-accent{color:var(--cyan)}
#protocols .protocols-lede{
  font-family:var(--cond);
  font-weight:400;
  font-size:clamp(16px,1.6vw,19px);
  line-height:1.4;
  color:var(--muted);
  margin:18px 0 0;
  max-width:620px;
}

/* flow line */
#protocols .protocols-flow{
  display:flex;
  align-items:center;
  gap:0;
  margin:clamp(36px,5vw,56px) 0 clamp(28px,4vw,44px);
  flex-wrap:wrap;
}
#protocols .protocols-flow-node{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  padding:9px 14px;
  border:1px solid var(--border);
  border-radius:4px;
  background:var(--surface);
  color:var(--muted);
  white-space:nowrap;
  flex:0 0 auto;
}
#protocols .protocols-flow-core{
  color:var(--bg);
  background:var(--cyan);
  border-color:var(--cyan);
  font-weight:700;
}
#protocols .protocols-flow-out{color:var(--fg)}
#protocols .protocols-flow-line{
  flex:1 1 40px;
  height:1px;
  min-width:24px;
  background:linear-gradient(90deg,var(--border),var(--cyan-dim));
  position:relative;
}
#protocols .protocols-flow-line::after{
  content:"";
  position:absolute;
  right:-1px;top:50%;
  width:5px;height:5px;
  border-top:1px solid var(--cyan-dim);
  border-right:1px solid var(--cyan-dim);
  transform:translateY(-50%) rotate(45deg);
}

/* protocol grid */
#protocols .protocols-grid{
  list-style:none;
  margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
  border-radius:6px;
  overflow:hidden;
}
#protocols .protocols-card{
  background:var(--surface);
  padding:22px 22px 20px;
  display:flex;
  flex-direction:column;
  gap:12px;
  transition:background .15s ease;
}
#protocols .protocols-card:hover{background:var(--surface2)}
#protocols .protocols-card-signal{
  box-shadow:inset 3px 0 0 var(--cyan);
}
#protocols .protocols-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
#protocols .protocols-name{
  font-family:var(--mono);
  font-size:clamp(16px,1.9vw,20px);
  letter-spacing:1px;
  color:var(--fg);
  text-transform:uppercase;
  font-weight:600;
  line-height:1.1;
}
#protocols .protocols-name-sub{
  font-size:0.62em;
  letter-spacing:2px;
  color:var(--faint);
  margin-left:3px;
  vertical-align:middle;
}
#protocols .protocols-tag{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:1.5px;
  padding:4px 8px;
  border-radius:3px;
  border:1px solid var(--border);
  color:var(--muted);
  white-space:nowrap;
  flex:0 0 auto;
  margin-top:2px;
}
#protocols .protocols-tag-base{color:var(--muted)}
#protocols .protocols-tag-pro{
  color:var(--cyan);
  border-color:var(--cyan-dim);
}
#protocols .protocols-tag-live{
  color:var(--bg);
  background:var(--cyan);
  border-color:var(--cyan);
  font-weight:700;
}
#protocols .protocols-role{
  font-family:var(--cond);
  font-weight:400;
  font-size:15.5px;
  line-height:1.38;
  color:var(--muted);
  margin:0;
  flex:1 1 auto;
}
#protocols .protocols-meta{
  display:flex;
  align-items:baseline;
  gap:10px;
  padding-top:12px;
  border-top:1px solid var(--border);
}
#protocols .protocols-meta-k{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:1.5px;
  color:var(--faint);
}
#protocols .protocols-meta-v{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:1.5px;
  color:var(--fg);
  font-weight:600;
}

/* render targets strip */
#protocols .protocols-targets{
  margin-top:clamp(28px,4vw,40px);
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--bg2);
  padding:clamp(22px,3vw,32px) clamp(22px,3.5vw,40px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  flex-wrap:wrap;
}
#protocols .protocols-targets-copy{max-width:520px}
#protocols .protocols-targets-eyebrow{
  display:block;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:2px;
  color:var(--cyan);
  margin-bottom:8px;
}
#protocols .protocols-targets-line{
  font-family:var(--cond);
  font-weight:400;
  font-size:16px;
  line-height:1.4;
  color:var(--muted);
  margin:0;
}
#protocols .protocols-targets-line strong{
  color:var(--fg);
  font-family:var(--mono);
  font-size:14px;
  letter-spacing:1px;
  font-weight:600;
}
#protocols .protocols-targets-row{
  display:flex;
  align-items:center;
  gap:14px;
  flex:0 0 auto;
}
#protocols .protocols-target{
  font-family:var(--mono);
  font-size:clamp(20px,3vw,30px);
  letter-spacing:2px;
  color:var(--fg);
  font-weight:700;
}
#protocols .protocols-target-dot{
  font-family:var(--mono);
  color:var(--cyan);
  font-size:clamp(20px,3vw,30px);
  line-height:1;
}

@media (max-width:720px){
  #protocols .protocols-grid{grid-template-columns:1fr}
  #protocols .protocols-card-signal{box-shadow:inset 0 3px 0 var(--cyan)}
  #protocols .protocols-targets{
    flex-direction:column;
    align-items:flex-start;
    gap:22px;
  }
  #protocols .protocols-flow{gap:4px}
  #protocols .protocols-flow-line{flex:1 1 20px}
}
@media (max-width:420px){
  #protocols .protocols-flow-node{font-size:11px;letter-spacing:1.5px;padding:8px 10px}
  #protocols .protocols-target{letter-spacing:1px}
}

/* ===== tiers ===== */
#tiers{
  border-top:1px solid var(--border);
  padding-block:clamp(72px,9vw,128px);
  background:var(--bg);
}
#tiers .tiers-head{max-width:760px;margin-bottom:clamp(40px,5vw,64px);}
#tiers .tiers-eyebrow{display:block;margin-bottom:18px;}
#tiers .tiers-title{
  font-family:var(--display);
  font-size:clamp(40px,6vw,82px);
  line-height:0.92;
  letter-spacing:0.5px;
  text-transform:uppercase;
  color:var(--fg);
  margin:0 0 22px;
}
#tiers .tiers-accent{color:var(--cyan);}
#tiers .tiers-intro{
  font-family:var(--cond);
  font-weight:400;
  font-size:clamp(16px,1.5vw,19px);
  line-height:1.5;
  color:var(--muted);
  max-width:640px;
  margin:0;
}
#tiers .tiers-key{
  font-family:var(--mono);
  font-size:0.82em;
  letter-spacing:1px;
  color:var(--cyan);
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:3px;
  padding:1px 6px;
}

#tiers .tiers-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}

#tiers .tiers-card{
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:6px;
  padding:24px 22px 22px;
}
#tiers .tiers-card--flagship{
  background:var(--surface2);
  border:1px solid var(--cyan);
  box-shadow:0 0 0 1px var(--cyan-dim) inset;
}

#tiers .tiers-badge{
  position:absolute;
  top:-9px;
  left:22px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--bg);
  background:var(--cyan);
  padding:3px 9px;
  border-radius:3px;
}

#tiers .tiers-card-top{
  display:flex;
  align-items:baseline;
  gap:10px;
  padding-bottom:14px;
  margin-bottom:16px;
  border-bottom:1px solid var(--border);
}
#tiers .tiers-rank{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:1px;
  color:var(--faint);
}
#tiers .tiers-rank--cyan{color:var(--cyan);}
#tiers .tiers-name{
  font-family:var(--mono);
  font-size:18px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--fg);
  margin:0;
  line-height:1;
}
#tiers .tiers-name--cyan{color:var(--cyan);}

#tiers .tiers-tagline{
  font-family:var(--cond);
  font-weight:500;
  font-size:16px;
  line-height:1.25;
  color:var(--muted);
  margin:0 0 18px;
  min-height:40px;
}

#tiers .tiers-feats{
  list-style:none;
  margin:0 0 24px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:11px;
  flex:1 1 auto;
}
#tiers .tiers-feats li{
  display:flex;
  align-items:flex-start;
  gap:9px;
  font-family:var(--cond);
  font-weight:400;
  font-size:15px;
  line-height:1.3;
  color:var(--fg);
}
#tiers .tiers-check{
  flex:0 0 auto;
  font-size:12px;
  line-height:1.3;
  color:var(--ok);
  margin-top:1px;
}
#tiers .tiers-check--cyan{color:var(--cyan);}

#tiers .tiers-cta{
  width:100%;
  text-align:center;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  margin-top:auto;
}

#tiers .tiers-footnote{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin:clamp(28px,3.5vw,40px) 0 0;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.5px;
  line-height:1.5;
  color:var(--faint);
}
#tiers .tiers-foot-mark{color:var(--cyan);font-size:10px;}

@media (max-width:960px){
  #tiers .tiers-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:720px){
  #tiers .tiers-grid{grid-template-columns:1fr;}
  #tiers .tiers-tagline{min-height:0;}
}

/* ====================================================================== */
/* Cropped-overlay display — tight broadcast graphics shown contained on   */
/* uniform tiles (no empty 16:9 backing around them).                      */
/* ====================================================================== */
#road .road-frame { aspect-ratio: 4 / 3; flex: none; }
#road .road-shot-wide .road-frame { aspect-ratio: 18 / 7; }
#road .road-frame img {
  width: auto; height: auto; max-width: 100%; max-height: 100%;
  object-fit: contain;
}
/* flo broadcast overlays (ticker/pylon/results/title) — contain, capped */
#flo .flo-frame img {
  width: auto; height: auto; max-width: 100%; max-height: 360px;
  object-fit: contain; margin: auto;
}
/* full-width ticker strip */
#road .road-shot-full { grid-column: 1 / -1; }
#road .road-shot-full .road-frame { aspect-ratio: auto; padding: 16px 22px; }
#road .road-shot-full .road-frame img { width: 100%; height: auto; max-height: none; }


/* ===== allsports ===== */
#allsports{
  border-top:1px solid var(--border);
  padding-block:clamp(88px,11vw,160px);
  background:var(--bg);
  color:var(--fg);
}
#allsports *{box-sizing:border-box;}

/* ---------- 1) HEADER ---------- */
#allsports .allsports-head{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);
  align-items:center;
}
#allsports .allsports-eyebrow{margin:0 0 22px;}
#allsports .allsports-h2{
  font-family:var(--display);
  font-size:clamp(46px,7vw,96px);
  line-height:0.9;
  letter-spacing:0.5px;
  text-transform:uppercase;
  margin:0 0 24px;
  color:var(--fg);
}
#allsports .allsports-accent{color:var(--cyan);}
#allsports .allsports-lede{
  font-family:var(--cond);
  font-size:clamp(17px,1.55vw,21px);
  line-height:1.5;
  color:var(--muted);
  max-width:60ch;
  margin:0 0 26px;
}
#allsports .allsports-head-meta{
  display:flex;flex-wrap:wrap;gap:10px;
}
#allsports .allsports-metachip{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--muted);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:4px;
  padding:7px 11px;
}
#allsports .allsports-hero{margin:0;}
#allsports .allsports-hero-frame{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:6px;
  overflow:hidden;
  position:relative;
  aspect-ratio:16/9;
  display:flex;align-items:center;justify-content:center;
}
#allsports .allsports-hero-frame::after{
  content:"";position:absolute;inset:0;
  box-shadow:inset 0 0 0 1px rgba(0,215,255,0.06);
  pointer-events:none;
}
#allsports .allsports-hero-frame img{
  width:100%;height:100%;
  object-fit:contain;
  display:block;
}
#allsports .allsports-cap{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--faint);
  margin-top:12px;
}

/* ---------- SECTION LABELS ---------- */
#allsports .allsports-sectlabel{
  display:flex;align-items:baseline;gap:14px;
  border-bottom:1px solid var(--border);
  padding-bottom:14px;
  margin-bottom:26px;
}
#allsports .allsports-sectnum{
  font-family:var(--mono);
  font-size:12px;letter-spacing:1.5px;
  color:var(--cyan);
}
#allsports .allsports-secttext{
  font-family:var(--mono);
  font-size:12px;letter-spacing:2px;
  text-transform:uppercase;
  color:var(--muted);
}

/* ---------- 2) SEVEN SPORTS ---------- */
#allsports .allsports-sports{margin-top:clamp(64px,8vw,112px);}
#allsports .allsports-sportgrid{
  list-style:none;margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:10px;
}
#allsports .allsports-sporttile{
  position:relative;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:6px;
  padding:22px 16px 18px;
  min-height:118px;
  display:flex;flex-direction:column;justify-content:space-between;
  transition:border-color .18s ease, background .18s ease, transform .18s ease;
}
#allsports .allsports-sporttile:hover{
  border-color:var(--cyan-dim);
  background:var(--surface2);
  transform:translateY(-2px);
}
#allsports .allsports-sportnum{
  font-family:var(--mono);
  font-size:11px;letter-spacing:1.5px;
  color:var(--faint);
}
#allsports .allsports-sportname{
  font-family:var(--display);
  font-size:clamp(20px,1.8vw,28px);
  letter-spacing:0.5px;
  line-height:0.92;
  text-transform:uppercase;
  color:var(--fg);
}

/* ---------- 3) FLOW: IN -> ENGINE -> OUT ---------- */
#allsports .allsports-flow{
  margin-top:clamp(40px,5vw,72px);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:clamp(16px,2.2vw,32px);
  align-items:stretch;
}
#allsports .allsports-io{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
  padding:clamp(20px,2.4vw,30px);
}
#allsports .allsports-io-head{margin-bottom:18px;}
#allsports .allsports-io-tag{
  display:block;
  font-family:var(--mono);
  font-size:12px;letter-spacing:2px;
  text-transform:uppercase;
  color:var(--cyan);
  margin-bottom:5px;
}
#allsports .allsports-io-sub{
  font-family:var(--cond);
  font-size:15px;
  color:var(--muted);
}
#allsports .allsports-io-list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;
}
#allsports .allsports-io-list li{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:11px 0;
  border-top:1px solid var(--border);
}
#allsports .allsports-io-list li:first-child{border-top:0;}
#allsports .allsports-io-key{
  font-family:var(--mono);
  font-size:12px;letter-spacing:1px;
  text-transform:uppercase;
  color:var(--fg);
}
#allsports .allsports-io-val{
  font-family:var(--cond);
  font-size:14px;
  color:var(--muted);
  text-align:right;
}
/* engine */
#allsports .allsports-io-engine{
  display:flex;align-items:center;justify-content:center;gap:14px;
  background:linear-gradient(180deg,var(--surface2),var(--surface));
  border-color:var(--cyan-dim);
  min-width:200px;
}
#allsports .allsports-engine-arrow{
  font-family:var(--mono);
  font-size:30px;
  color:var(--cyan);
  line-height:1;
}
#allsports .allsports-engine-core{
  position:relative;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:8px 4px;
}
#allsports .allsports-engine-mark{
  font-family:var(--display);
  font-size:clamp(26px,2.4vw,38px);
  letter-spacing:0.5px;
  text-transform:uppercase;
  color:var(--fg);
  line-height:0.92;
}
#allsports .allsports-engine-sub{
  font-family:var(--mono);
  font-size:10px;letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--cyan);
  margin-top:8px;
}
#allsports .allsports-engine-pulse{
  width:36px;height:3px;border-radius:2px;
  background:var(--cyan);
  margin-top:12px;
  animation:allsports-pulse 2.4s ease-in-out infinite;
}
@keyframes allsports-pulse{
  0%,100%{opacity:.35;transform:scaleX(.6);}
  50%{opacity:1;transform:scaleX(1);}
}
@media (prefers-reduced-motion:reduce){
  #allsports .allsports-engine-pulse{animation:none;opacity:.8;}
}
/* outputs */
#allsports .allsports-outbadges{
  display:flex;flex-direction:column;gap:12px;
}
#allsports .allsports-outbadge{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:6px;
  padding:16px 18px;
  transition:border-color .18s ease;
}
#allsports .allsports-outbadge:hover{border-color:var(--cyan-dim);}
#allsports .allsports-outbadge-name{
  font-family:var(--mono);
  font-size:clamp(15px,1.5vw,19px);
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--fg);
}
#allsports .allsports-outbadge-note{
  font-family:var(--cond);
  font-size:14px;
  color:var(--muted);
}

/* ---------- 4) OVERLAY PACKAGE ---------- */
#allsports .allsports-pkg{margin-top:clamp(64px,8vw,112px);}
#allsports .allsports-pkg-lede{
  font-family:var(--cond);
  font-size:clamp(16px,1.4vw,19px);
  color:var(--muted);
  max-width:64ch;
  margin:0 0 22px;
}
#allsports .allsports-chips{
  list-style:none;margin:0 0 30px;padding:0;
  display:flex;flex-wrap:wrap;gap:8px;
}
#allsports .allsports-chip{
  font-family:var(--mono);
  font-size:11px;letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--muted);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:4px;
  padding:8px 12px;
  transition:color .18s ease, border-color .18s ease;
}
#allsports .allsports-chip:hover{color:var(--fg);border-color:var(--cyan-dim);}

#allsports .allsports-gallery{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:14px;
}
#allsports .allsports-shot{margin:0;}
#allsports .allsports-shot-wide{grid-column:span 3;}
#allsports .allsports-shot:not(.allsports-shot-wide){grid-column:span 2;}
#allsports .allsports-shot-frame{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:6px;
  overflow:hidden;
  aspect-ratio:16/9;
  display:flex;align-items:center;justify-content:center;
}
#allsports .allsports-shot-frame img{max-width:100%;display:block;}
#allsports .allsports-shot-frame-overlay img{
  width:100%;height:100%;object-fit:contain;
}
#allsports .allsports-shot-frame-ui img{
  width:100%;height:100%;object-fit:cover;object-position:top center;
}

/* ---------- 5) OPS STRIP ---------- */
#allsports .allsports-ops{margin-top:clamp(64px,8vw,112px);}
#allsports .allsports-opsgrid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px;
}

/* ---------- 6) DELIVERY + CTA ---------- */
#allsports .allsports-close{
  margin-top:clamp(64px,8vw,112px);
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:clamp(28px,4vw,56px);
  align-items:center;
  border-top:1px solid var(--border);
  padding-top:clamp(40px,5vw,64px);
}
#allsports .allsports-delivery-tag{
  display:block;
  font-family:var(--mono);
  font-size:12px;letter-spacing:2px;
  text-transform:uppercase;
  color:var(--cyan);
  margin-bottom:14px;
}
#allsports .allsports-delivery-copy{
  font-family:var(--cond);
  font-size:clamp(17px,1.6vw,22px);
  line-height:1.45;
  color:var(--fg);
  margin:0 0 20px;
  max-width:54ch;
}
#allsports .allsports-delivery-copy strong{color:var(--cyan);font-weight:600;}
#allsports .allsports-stackrow{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:8px;
}
#allsports .allsports-stackrow li{
  font-family:var(--mono);
  font-size:11px;letter-spacing:1.5px;
  color:var(--muted);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:4px;
  padding:7px 11px;
}
#allsports .allsports-cta{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  padding:clamp(26px,3vw,38px);
}
#allsports .allsports-cta-line{
  font-family:var(--display);
  font-size:clamp(24px,2.4vw,34px);
  letter-spacing:0.5px;
  line-height:0.95;
  text-transform:uppercase;
  color:var(--fg);
  margin:0 0 20px;
}
#allsports .allsports-cta-btns{
  display:flex;flex-wrap:wrap;gap:12px;
}
#allsports .allsports-btn{flex:0 0 auto;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1080px){
  #allsports .allsports-sportgrid{grid-template-columns:repeat(4,1fr);}
  #allsports .allsports-opsgrid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:980px){
  #allsports .allsports-flow{grid-template-columns:1fr;}
  #allsports .allsports-io-engine{
    flex-direction:row;min-width:0;
  }
  #allsports .allsports-engine-arrow{transform:rotate(90deg);}
  #allsports .allsports-engine-core{flex:1;}
}
@media (max-width:860px){
  #allsports .allsports-head{grid-template-columns:1fr;}
  #allsports .allsports-hero{order:-1;}
  #allsports .allsports-close{grid-template-columns:1fr;}
}
@media (max-width:720px){
  #allsports .allsports-sportgrid{grid-template-columns:repeat(2,1fr);}
  #allsports .allsports-gallery{grid-template-columns:1fr;}
  #allsports .allsports-shot-wide,
  #allsports .allsports-shot:not(.allsports-shot-wide){grid-column:span 1;}
  #allsports .allsports-opsgrid{grid-template-columns:1fr 1fr;}
}
@media (max-width:480px){
  #allsports .allsports-io-list li{flex-direction:column;gap:3px;}
  #allsports .allsports-io-val{text-align:left;}
  #allsports .allsports-outbadge{flex-direction:column;align-items:flex-start;gap:4px;}
  #allsports .allsports-opsgrid{grid-template-columns:1fr;}
  #allsports .allsports-cta-btns .allsports-btn{flex:1 1 100%;text-align:center;}
}
@media (max-width:380px){
  #allsports .allsports-sportgrid{grid-template-columns:1fr;}
}

/* Glass-on-scene showcase — full broadcast frames (overlay keyed over live race feed) */
#road .road-scenes { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:8px; }
#road .road-scene { margin:0; display:flex; flex-direction:column; }
#road .road-scene-full { grid-column:1 / -1; }
#road .road-scene-frame {
  aspect-ratio:16/9; border:1px solid var(--border); border-radius:6px;
  overflow:hidden; background:var(--bg2); position:relative;
}
#road .road-scene-frame img { width:100%; height:100%; object-fit:cover; display:block; }
#road .road-scene-cap {
  font-family:var(--mono); font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--faint); margin-top:10px;
}
@media (max-width:720px){ #road .road-scenes { grid-template-columns:1fr; } }