/* Karate Duel — WEB-01 marketing landing
   Dark dojo / sakura / neon-accent · mobile-first */

:root {
  /* Karate Duel brand palette (X key art B, keyart.py palette 'B' + steel logo face) */
  --brand-steel-hi: #fbfcfd;
  --brand-steel-lo: #7d8691;
  --brand-orange: #ff8a2a;
  --brand-orange-deep: #ff7a1a;
  --brand-glow: #ffe0a0;
  --brand-blue: #a8c4ff;
  --brand-slate: #4a5878;
  --brand-panel: #22252b;
  --brand-panel-deep: #101318;
  --brand-night: #02060f;
  /* rgb triplets for translucent uses */
  --rgb-orange: 255, 138, 42;
  --rgb-glow: 255, 224, 160;
  --rgb-blue: 168, 196, 255;
  --rgb-night: 2, 6, 15;
  --rgb-slate: 74, 88, 120;
  --rgb-panel: 16, 19, 24;

  --bg: var(--brand-night);
  --bg-elevated: #070c18;
  --bg-card: var(--brand-panel);
  --ink: var(--brand-steel-hi);
  --ink-muted: var(--brand-blue);
  --sakura: var(--brand-orange);
  --sakura-soft: var(--brand-glow);
  --neon: var(--brand-blue);
  --neon-dim: var(--brand-slate);
  --gold: var(--brand-glow);
  --border: rgba(var(--rgb-blue), 0.18);
  --radius: 14px;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  --font: "Segoe UI", system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  --font-display: "KD Unbounded Logo", "Segoe UI", system-ui, sans-serif;
  --max: 1080px;
}

@font-face {
  font-family: "KD Unbounded Logo";
  src: url("assets/fonts/KDUnboundedLogoK1b-latin.woff") format("woff"),
       url("assets/fonts/KDUnboundedLogoK1b-latin.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  min-height: 100vh;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--neon); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--sakura-soft); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--neon);
  color: var(--brand-night);
  padding: 0.6rem 1rem;
  z-index: 100;
  font-weight: 700;
}
.skip-link:focus { left: 0.75rem; top: 0.75rem; }

.wrap {
  width: min(100% - 2rem, var(--max));
  margin-inline: auto;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(12px);
  background: rgba(var(--rgb-night), 0.82);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.logo:hover { color: var(--sakura-soft); }

.logo-mark {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--brand-orange), var(--brand-orange-deep));
  color: #fff;
  font-size: 0.95rem;
  box-shadow: 0 0 16px rgba(var(--rgb-orange), 0.45);
}

.nav {
  display: none;
  gap: 1.1rem;
  font-size: 0.92rem;
}
.nav a {
  color: var(--ink-muted);
  text-decoration: none;
  font-weight: 600;
}
.nav a:hover, .nav a:focus-visible { color: var(--sakura-soft); }

@media (min-width: 720px) {
  .nav { display: flex; }
}

/* Hero — full first viewport; fighters absolute L/R flanking title */
.hero {
  --header-h: 3.5rem;
  position: relative;
  isolation: isolate;
  height: calc(100vh - var(--header-h));
  height: calc(100dvh - var(--header-h));
  min-height: 0;
  max-height: calc(100dvh - var(--header-h));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 0 1.5rem;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background:
    image-set(url("assets/hero_dojo_rain_1920.webp") type("image/webp"), url("assets/hero_dojo_rain_1920.jpg") type("image/jpeg")) center / cover no-repeat,
    linear-gradient(160deg, var(--brand-panel-deep), var(--brand-slate) 55%, var(--brand-night));
  z-index: -2;
  transform: scale(1.02);
}

/* Absolute L/R layers — no grid (grid collapsed both fighters to left on live) */
.hero-fighters {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero-fighter {
  position: absolute;
  bottom: 0;
  display: block;
  /* Scale to 2x where the first viewport has room; never clip vertically. */
  height: min(100%, 96vh);
  width: auto;
  /* Beat global img max-width:100% so stills keep L/R size */
  max-width: min(84vw, 960px);
  object-fit: contain;
  object-position: bottom center;
  opacity: 0.95;
  mix-blend-mode: normal;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.55));
  user-select: none;
  -webkit-user-drag: none;
}

.hero-fighter--left {
  left: clamp(0px, 2vw, 1.5rem);
  /* Raw male still already leads toward viewer-right (raised guard fist on
     the right, rear foot turned out on the left), i.e. toward the centre.
     No flip: scaleX(-1) turned him away from the female. */
  transform: none;
}

.hero-fighter--right {
  right: clamp(0px, 2vw, 1.5rem);
  /* Flipped: the raw female still turns toward viewer-right (away from the
     male); scaleX(-1) turns her to face him (owner, 24 Oct 2026). */
  transform: scaleX(-1);
}

@media (max-width: 720px) {
  .hero-fighter {
    height: min(100%, 96vh);
    max-width: min(92vw, 560px);
    opacity: 0.82;
  }
  .hero-content {
    padding-inline: min(18vw, 6rem);
  }
}

@media (max-width: 420px) {
  .hero-fighter {
    height: min(100%, 96vh);
    max-width: min(88vw, 420px);
    opacity: 0.72;
  }
  .hero h1 {
    font-size: clamp(1.75rem, 9vw, 2.4rem);
  }
  .hero-tagline {
    font-size: 0.9rem;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .hero-fighter {
    mix-blend-mode: normal;
    opacity: 0.75;
  }
}

.hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(var(--rgb-night), 0.22) 0%, rgba(var(--rgb-night), 0.35) 40%, rgba(var(--rgb-night), 0.82) 100%),
    linear-gradient(90deg, rgba(var(--rgb-night), 0.12) 0%, transparent 20%, transparent 80%, rgba(var(--rgb-night), 0.12) 100%),
    radial-gradient(ellipse 70% 55% at 50% 100%, rgba(var(--rgb-orange), 0.14), transparent 70%);
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 38rem;
  margin-inline: auto;
  text-align: center;
  /* Keep title clear of flanking fighters */
  padding-inline: min(22vw, 12rem);
}

.eyebrow {
  display: inline-block;
  margin: 0 0 0.6rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid rgba(var(--rgb-blue), 0.35);
  border-radius: 999px;
  color: var(--neon);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(var(--rgb-blue), 0.08);
}

.hero h1 {
  margin: 0 0 0.55rem;
  font-size: clamp(2rem, 7vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-shadow: 0 0 40px rgba(var(--rgb-orange), 0.35);
}

.hero-tagline {
  margin: 0 auto 1.15rem;
  color: var(--ink-muted);
  font-size: clamp(0.92rem, 2.4vw, 1.1rem);
  max-width: 32rem;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.25rem;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; }
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: linear-gradient(135deg, var(--brand-glow) -20%, var(--brand-orange) 45%, var(--brand-orange-deep));
  color: var(--brand-night);
  box-shadow: 0 0 24px rgba(var(--rgb-orange), 0.4);
}
.btn-primary:hover { color: var(--brand-night); filter: brightness(1.06); }

.btn-ghost {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--ink);
}
.btn-ghost:hover { border-color: var(--sakura); color: var(--sakura-soft); }

/* Portrait phones/tablets: title on top, fighters side by side at the
   bottom, each kept in its own half so they never merge or cover text.
   Stills are 720x720 with the figure in roughly the middle 40%, so each
   image is pushed partly off its edge (hero clips overflow). Placed after
   the base hero rules so it wins the cascade. */
@media (orientation: portrait) and (max-width: 820px) {
  .hero {
    --fw: min(80vw, 40svh);
    height: auto;
    max-height: none;
    min-height: calc(100vh - var(--header-h));
    min-height: calc(100svh - var(--header-h));
    align-items: center;
    padding: 1.5rem 0 calc(var(--fw) * 0.96 + 0.75rem);
  }
  .hero-fighters { z-index: 2; }
  .hero-fighter {
    width: var(--fw);
    height: var(--fw);
    max-width: none;
    opacity: 0.95;
  }
  .hero-fighter--left { left: calc(var(--fw) * -0.26); }
  .hero-fighter--right { right: calc(var(--fw) * -0.26); }
  .hero-content {
    padding-inline: 0;
    z-index: 3;
  }
  .hero h1 { font-size: clamp(2.2rem, 11vw, 3.4rem); }
  .hero-tagline {
    font-size: clamp(0.95rem, 4.2vw, 1.1rem);
    max-width: 26rem;
    color: var(--ink);
    text-shadow: 0 1px 2px rgba(var(--rgb-night), 0.95), 0 0 14px rgba(var(--rgb-night), 0.85);
  }
  .hero h1 { text-shadow: 0 2px 4px rgba(var(--rgb-night), 0.8), 0 0 40px rgba(var(--rgb-orange), 0.35); }
}

/* Sections */
.section {
  padding: 3.5rem 0;
}

.section h2 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.6rem, 4.5vw, 2.15rem);
  letter-spacing: 0.01em;
}

.lede, .section-note {
  color: var(--ink-muted);
  max-width: 42rem;
  margin: 0 0 1.75rem;
}

.about {
  background:
    radial-gradient(ellipse 60% 40% at 10% 0%, rgba(var(--rgb-blue), 0.07), transparent 55%),
    var(--bg);
  border-top: 1px solid var(--border);
}

.feature-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .feature-grid { grid-template-columns: 1fr 1fr; }
}

.feature-grid li {
  background: linear-gradient(165deg, rgba(34, 37, 43, 0.92), rgba(var(--rgb-panel), 0.95));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
}

.feature-icon {
  display: inline-block;
  margin-bottom: 0.55rem;
  color: var(--sakura);
  font-weight: 700;
  letter-spacing: 0.12em;
  font-size: 0.95rem;
}

.feature-grid h3 {
  margin: 0 0 0.4rem;
  font-size: 1.1rem;
  color: var(--ink);
}

.feature-grid p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.95rem;
}

/* Screenshots */
.screenshots {
  background: var(--bg-elevated);
  border-block: 1px solid var(--border);
}

.shot-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .shot-grid { grid-template-columns: repeat(3, 1fr); }
}

.shot-slot { margin: 0; }

.shot-frame {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  border: 1px dashed rgba(var(--rgb-orange), 0.45);
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(var(--rgb-orange), 0.05),
      rgba(var(--rgb-orange), 0.05) 8px,
      rgba(var(--rgb-blue), 0.04) 8px,
      rgba(var(--rgb-blue), 0.04) 16px
    ),
    var(--brand-panel-deep);
  display: grid;
  place-content: center;
  text-align: center;
  gap: 0.35rem;
  padding: 1rem;
}

.shot-label {
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sakura-soft);
  font-size: 0.85rem;
}

.shot-sub {
  color: var(--ink-muted);
  font-size: 0.82rem;
}

.shot-slot figcaption {
  margin-top: 0.55rem;
  font-size: 0.88rem;
  color: var(--ink-muted);
  text-align: center;
}
.shot-slot figcaption em { color: var(--gold); font-style: normal; }

/* Stores */
.stores {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(var(--rgb-orange), 0.12), transparent 60%),
    var(--bg);
}

.stores-inner { text-align: center; }
.stores-inner .section-note { margin-inline: auto; }

.store-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
  margin-top: 0.5rem;
}

.store-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  min-width: min(100%, 15rem);
  padding: 1rem 1.35rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink-muted);
  text-decoration: none;
  cursor: not-allowed;
  opacity: 0.85;
  pointer-events: none;
}
.store-btn:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; }

.store-platform {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
}

.store-status {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Contact */
.contact {
  border-top: 1px solid var(--border);
}

.contact-placeholder {
  margin: 0;
  padding: 1.25rem 1.35rem;
  border-radius: var(--radius);
  border: 1px dashed rgba(var(--rgb-glow), 0.55);
  background: rgba(var(--rgb-glow), 0.08);
  color: var(--ink-muted);
  max-width: 36rem;
}
.contact-placeholder strong {
  color: var(--gold);
  letter-spacing: 0.06em;
}

/* Footer */
.site-footer {
  padding: 2rem 0 2.5rem;
  border-top: 1px solid var(--border);
  background: var(--brand-night);
}

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.footer-brand {
  margin: 0;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.footer-brand .logo-mark {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.75rem;
  box-shadow: none;
}

.footer-note {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.85rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}


/* Disabled store placeholders (button, not links) */
button.store-btn {
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--border);
  cursor: not-allowed;
  opacity: 0.85;
}
button.store-btn:disabled {
  cursor: not-allowed;
}

/* Short landscape screens (phones held sideways): the fixed-height hero
   clipped the title under the header and cut off the buttons. Let the hero
   grow to fit its content and compact the text so it all shows. */
@media (orientation: landscape) and (max-height: 560px) {
  .hero {
    height: auto;
    max-height: none;
    min-height: calc(100vh - var(--header-h));
    min-height: calc(100svh - var(--header-h));
    padding: 1rem 0 1.25rem;
  }
  .hero-fighter {
    height: min(100%, 100svh);
    max-width: min(42vw, 520px);
  }
  .hero-content {
    max-width: 26rem;
    padding-inline: 1rem;
  }
  .eyebrow { margin-bottom: 0.4rem; font-size: 0.7rem; }
  .hero h1 { font-size: clamp(1.8rem, 9svh, 2.6rem); margin-bottom: 0.4rem; }
  .hero-tagline { font-size: 0.88rem; margin-bottom: 0.8rem; }
  .hero-ctas { gap: 0.5rem; }
  .hero-ctas .btn { padding: 0.6rem 1.1rem; }
}

/* Mid-width landscape (tablets, small laptops): the square stills grew to
   the full hero height and covered the title and each other. Cap each to
   just under half the width and tuck it slightly off its edge. */
@media (min-width: 721px) and (max-width: 1200px) and (min-height: 561px) and (orientation: landscape) {
  .hero-fighter {
    height: auto;
    width: min(48vw, 600px);
    max-width: none;
  }
  .hero-fighter--left { left: -6vw; }
  .hero-fighter--right { right: -6vw; }
}

/* ===== Content v1: features, belts, dojos, platforms, contact =====
   All colours/fonts for these sections come from the variables below so the
   site can be rethemed to the brand palette in one place. */
:root {
  --cv-font: var(--font);
  --cv-section-alt: var(--bg-elevated);
  --cv-section-base: var(--bg);
  --cv-border: var(--border);
  --cv-ink: var(--ink);
  --cv-ink-muted: var(--ink-muted);
  --cv-accent: var(--gold);
  --cv-link: var(--neon);
  --cv-glow: rgba(var(--rgb-glow), 0.08);
  --cv-swatch-edge: rgba(255, 255, 255, 0.55);
  --cv-shadow: var(--shadow);
  --cv-radius: var(--radius);
  /* Game belt colours (karate_rank.gd via Ivy's SITE2 README) - not brand colours */
  --belt-white: #F7F7FA;
  --belt-yellow: #F2D12E;
  --belt-orange: #EB7A1F;
  --belt-green: #298C47;
  --belt-blue: #2957D1;
  --belt-purple: #7A33B3;
  --belt-red: #BF1F24;
  --belt-brown: #6B3D1F;
  --belt-black: #141417;
  --belt-gold: #DBAD2E;
}
html { scroll-padding-top: 4rem; }

@media (min-width: 720px) and (max-width: 979px) {
  .nav { gap: 0.75rem; font-size: 0.82rem; }
}


.features {
  background: var(--cv-section-alt);
  border-top: 1px solid var(--cv-border);
}

@media (min-width: 900px) {
  .feature-grid--three { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 640px) and (max-width: 899px) {
  .feature-grid--three li:last-child { grid-column: 1 / -1; }
}

.belts {
  background:
    radial-gradient(ellipse 60% 40% at 90% 0%, var(--cv-glow), transparent 55%),
    var(--cv-section-base);
  border-top: 1px solid var(--cv-border);
}

.belt-chart {
  width: 100%;
  border-radius: var(--cv-radius);
  border: 1px solid var(--cv-border);
  box-shadow: var(--cv-shadow);
}

.belt-list-title {
  margin: 1.75rem 0 0.75rem;
  font-size: 1.1rem;
}

.belt-list {
  font-family: var(--cv-font);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: belt;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem 1rem;
}
@media (min-width: 720px) {
  .belt-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .belt-list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.belt-list li {
  counter-increment: belt;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  color: var(--cv-ink);
  font-size: 0.92rem;
}
.belt-list li::before {
  content: counter(belt) ".";
  min-width: 1.6em;
  color: var(--cv-ink-muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.belt-swatch {
  flex: none;
  width: 1.4rem;
  height: 0.55rem;
  border-radius: 3px;
  border: 1px solid var(--cv-swatch-edge);
}
/* Game belt colours (karate_rank.gd via Ivy's SITE2 README) */
.belt-swatch--white { background: var(--belt-white); }
.belt-swatch--yellow { background: var(--belt-yellow); }
.belt-swatch--orange { background: var(--belt-orange); }
.belt-swatch--green { background: var(--belt-green); }
.belt-swatch--blue { background: var(--belt-blue); }
.belt-swatch--purple { background: var(--belt-purple); }
.belt-swatch--red { background: var(--belt-red); }
.belt-swatch--brown { background: var(--belt-brown); }
.belt-swatch--black { background: var(--belt-black); }
.belt-swatch--gold { background: var(--belt-gold); }

.dojos {
  background: var(--cv-section-alt);
  border-top: 1px solid var(--cv-border);
}

.dojo-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .dojo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.dojo-card { margin: 0; }
.dojo-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--cv-radius);
  border: 1px solid var(--cv-border);
  box-shadow: var(--cv-shadow);
}
.dojo-card figcaption {
  margin-top: 0.55rem;
  font-size: 0.88rem;
  color: var(--cv-ink-muted);
  text-align: center;
}

.screenshots { border-top: 1px solid var(--cv-border); }

.platforms-line {
  margin: 0 0 0.4rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--cv-accent);
}

.contact-mail { color: var(--cv-link); font-weight: 700; overflow-wrap: anywhere; }
.contact-social { color: var(--cv-link); font-weight: 700; }
@media (max-width: 719px) {
  .belt-chart { max-width: 420px; margin-inline: auto; }
}

/* ===== Brand retheme (X @karateduel key art B) ===== */
.hero-bg {
  filter: saturate(0.9) brightness(0.85) hue-rotate(-8deg);
}
@media (max-width: 960px) {
  .hero-bg {
    background:
      image-set(url("assets/hero_dojo_rain_960.webp") type("image/webp"), url("assets/hero_dojo_rain_960.jpg") type("image/jpeg")) center / cover no-repeat,
      linear-gradient(160deg, var(--brand-panel-deep), var(--brand-slate) 55%, var(--brand-night));
  }
}
.hero-veil {
  background:
    radial-gradient(ellipse 45% 40% at 50% 42%, rgba(var(--rgb-orange), 0.16), transparent 70%),
    linear-gradient(180deg, rgba(var(--rgb-night), 0.25) 0%, rgba(var(--rgb-night), 0.35) 45%, rgba(var(--rgb-night), 0.88) 100%),
    linear-gradient(90deg, rgba(var(--rgb-night), 0.35) 0%, transparent 25%, transparent 75%, rgba(var(--rgb-night), 0.35) 100%),
    radial-gradient(ellipse 80% 60% at 50% 30%, rgba(var(--rgb-blue), 0.16), transparent 70%);
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--rgb-slate), 0.38), rgba(var(--rgb-night), 0.2));
  mix-blend-mode: color;
}

/* Wordmark as the hero h1. Width is in em so the existing per-viewport
   .hero h1 font-size rules keep sizing it. */
.hero h1.hero-logo {
  line-height: 0;
  text-shadow: none;
}
.hero-logo img {
  width: min(100%, 6.6em);
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 0 18px rgba(var(--rgb-orange), 0.45)) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.6));
}

.eyebrow {
  border-color: rgba(var(--rgb-orange), 0.55);
  color: var(--brand-glow);
  background: rgba(var(--rgb-orange), 0.12);
  box-shadow: 0 0 14px rgba(var(--rgb-orange), 0.25);
}

.btn-primary {
  color: var(--brand-night);
  box-shadow: 0 0 22px rgba(var(--rgb-orange), 0.55), 0 0 2px rgba(var(--rgb-glow), 0.8) inset;
}
.btn-primary:hover { color: var(--brand-night); box-shadow: 0 0 30px rgba(var(--rgb-orange), 0.75); }
.btn-ghost {
  border-color: rgba(var(--rgb-blue), 0.35);
  background: rgba(var(--rgb-panel), 0.55);
}
.btn-ghost:hover { border-color: var(--brand-orange); color: var(--brand-glow); }
.btn:focus-visible, .store-btn:focus-visible { outline-color: var(--brand-glow); }

a { color: var(--brand-blue); }
a:hover { color: var(--brand-glow); }
.nav a:hover, .nav a:focus-visible { color: var(--brand-glow); }
.logo:hover { color: var(--brand-glow); }
.logo-mark { color: var(--brand-night); font-weight: 800; }
.site-header { background: rgba(var(--rgb-night), 0.85); }

/* Section headings: brand display font, steel */
.section h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.3rem, 5.4vw, 2rem);
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--brand-steel-hi);
  text-shadow: 0 2px 0 rgba(var(--rgb-panel), 0.9), 0 0 22px rgba(var(--rgb-orange), 0.28);
  overflow-wrap: break-word;
}
.section h2::after {
  content: "";
  display: block;
  width: 3.2rem;
  height: 3px;
  margin-top: 0.55rem;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--brand-orange), var(--brand-glow));
  box-shadow: 0 0 10px rgba(var(--rgb-orange), 0.6);
}
.stores-inner h2::after { margin-inline: auto; }

.feature-grid h3, .belt-list-title { color: var(--brand-steel-hi); }
.feature-icon { color: var(--brand-orange); }
.shot-label { color: var(--brand-glow); }
.store-status { color: var(--brand-orange); }
.platforms-line { color: var(--brand-orange); }

.site-footer { border-top-color: var(--border); }
.footer-credit {
  margin: 0;
  color: var(--brand-steel-lo);
  font-size: 0.78rem;
}
.footer-credit a { color: var(--brand-steel-lo); }

/* Brand strip: X key art banner at the top of About */
.about { padding-top: 0; }
.brand-strip {
  display: block;
  margin: 0 0 3rem;
  border-bottom: 1px solid rgba(var(--rgb-orange), 0.35);
  box-shadow: 0 10px 30px -12px rgba(var(--rgb-orange), 0.35);
  background: var(--brand-night);
}
.brand-strip img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 719px) {
  .brand-strip { margin-bottom: 2.25rem; }
}