/* ============================================================================
   NEURAL CHESS — scrapyard-industrial / neon-circuit landing page
   Dark derelict-arena palette per GDD.md art direction: rust, sparks, servos,
   salvage — amber weld-glow accents over charcoal steel, circuit-teal traces.
   Static, dependency-free: system font stacks only, no CDNs.
   ========================================================================== */

:root {
  /* base steel */
  --coal:        #0b0d10;
  --void:        #050607;
  --steel:       #14181d;
  --panel-fill:  rgba(22, 26, 31, 0.94);
  --ink:         #f2ede4;
  --ink-dim:     rgba(242, 237, 228, 0.68);
  --ink-faint:   rgba(242, 237, 228, 0.42);

  /* salvage accents */
  --weld-amber:  #ffb02e;   /* weld glow / primary accent */
  --spark:      #ff6a2e;    /* spark orange / danger, damage */
  --circuit:    #35e8c7;    /* neural-circuit teal / "brains" */
  --hazard:     #ffd23f;    /* hazard-stripe yellow */
  --rust:       #b0562b;    /* oxidized panel edges */

  --accent: var(--weld-amber);

  --chamfer: 10px;
  --maxw: 1140px;

  --font-display: "Segoe UI Variable Display", "Segoe UI", "Arial Narrow", system-ui, sans-serif;
  --font-mono:    "Cascadia Code", "Consolas", ui-monospace, monospace;
  --font-body:    "Segoe UI", system-ui, -apple-system, sans-serif;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background:
    radial-gradient(120% 80% at 50% -10%, #181c22 0%, var(--coal) 55%, var(--void) 100%);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--weld-amber); text-decoration: none; }
a:hover { text-shadow: 0 0 10px color-mix(in srgb, var(--weld-amber) 55%, transparent); }

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

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

/* skip link for a11y */
.skip {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--coal); color: var(--weld-amber); padding: .6em 1em;
  border: 1px solid var(--weld-amber);
}
.skip:focus { left: 1rem; top: 1rem; }

/* ---- shared type treatments -------------------------------------------- */

.stencil-title {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-family: var(--font-display);
  font-weight: 700;
  color: color-mix(in srgb, var(--ink) 78%, var(--accent) 22%);
  text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 40%, transparent);
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.4em;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.72rem;
  color: var(--circuit);
}

/* hazard stripe divider */
.divider {
  height: 4px;
  background: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--hazard) 34%, transparent) 0 12px,
    transparent 12px 24px);
  border-block: 1px solid color-mix(in srgb, var(--rust) 45%, transparent);
  opacity: .7;
}

/* ---- buttons ------------------------------------------------------------ */

.rivet-btn {
  --accent: var(--weld-amber);
  display: inline-block;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 700;
  font-size: 0.92rem;
  color: color-mix(in srgb, var(--ink) 72%, var(--accent) 28%);
  padding: 14px 34px;
  background: color-mix(in srgb, var(--accent) 12%, var(--steel) 88%);
  border: 1px solid color-mix(in srgb, var(--accent) 75%, transparent);
  clip-path: polygon(
    var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)),
    calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 28%, transparent);
  transition: background .15s ease, box-shadow .15s ease, transform .08s ease;
  cursor: pointer;
}
.rivet-btn:hover {
  background: color-mix(in srgb, var(--accent) 46%, var(--steel) 54%);
  box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 55%, transparent);
  text-shadow: none;
}
.rivet-btn:active { transform: translateY(1px); }
.rivet-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.rivet-btn.brain { --accent: var(--circuit); }
.rivet-btn.danger { --accent: var(--spark); }

/* ---- circuit-trace background motif ------------------------------------ */

.circuit-bed {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
}
.circuit-bed::after {
  content: ""; position: absolute; inset: -20%;
  background:
    repeating-linear-gradient(90deg,
      color-mix(in srgb, var(--circuit) 10%, transparent) 0 1px, transparent 1px 84px),
    repeating-linear-gradient(0deg,
      color-mix(in srgb, var(--circuit) 10%, transparent) 0 1px, transparent 1px 84px),
    radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--circuit) 8%, transparent) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 60%, color-mix(in srgb, var(--weld-amber) 7%, transparent) 0 2px, transparent 3px);
  mask-image: radial-gradient(90% 90% at 50% 40%, #000 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(90% 90% at 50% 40%, #000 0%, transparent 80%);
  opacity: .8;
}

/* ---- site header -------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(8px);
  background: linear-gradient(var(--coal), color-mix(in srgb, var(--coal) 72%, transparent));
  border-bottom: 1px solid color-mix(in srgb, var(--rust) 55%, transparent);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; padding: .85rem 0; }
.brand { display: flex; align-items: center; gap: .7rem; }
.brand img { width: 34px; height: 34px; border-radius: 6px; }
.brand b {
  font-family: var(--font-display); font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; font-size: 1.02rem;
}
.brand .n { color: var(--circuit); }
.brand .c { color: var(--weld-amber); }
.nav { display: flex; gap: 1.7rem; align-items: center; }
.nav a {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .16em;
  font-size: .78rem; color: var(--ink-dim);
}
.nav a:hover { color: var(--weld-amber); }
@media (max-width: 720px) { .nav a:not(.nav-cta) { display: none; } }

/* ---- hero --------------------------------------------------------------- */

.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero::before { /* rusty vignette */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 80% at 50% 30%, rgba(11,13,16,.2) 0%, rgba(11,13,16,.7) 60%, rgba(5,6,7,.95) 100%),
    linear-gradient(to bottom, rgba(176,86,43,.06), transparent 40%);
}
.hero .wrap { position: relative; z-index: 1; text-align: center; padding: 6rem 0 5.5rem; }

.hero-mark {
  width: 132px; height: 132px; margin: 0 auto 1.5rem;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--weld-amber) 45%, transparent);
  box-shadow:
    0 0 30px color-mix(in srgb, var(--weld-amber) 30%, transparent),
    0 0 60px color-mix(in srgb, var(--circuit) 12%, transparent);
}
.hero h1 {
  margin: 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.4rem, 8.5vw, 5.6rem);
  letter-spacing: clamp(.08em, 1.6vw, .2em);
  text-transform: uppercase; line-height: 1.05;
}
.hero h1 .neural { color: var(--circuit);    text-shadow: 0 0 24px color-mix(in srgb, var(--circuit) 50%, transparent); }
.hero h1 .chess  { color: var(--weld-amber); text-shadow: 0 0 24px color-mix(in srgb, var(--weld-amber) 50%, transparent); }
.hero .tagline {
  margin: 1.3rem auto 1.5rem; max-width: 46ch;
  font-size: 1.1rem; color: var(--ink-dim); letter-spacing: .02em;
}
.hero-pitch {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: .35rem 1.1rem;
  margin: 0 auto 2.4rem;
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  font-size: clamp(.92rem, 2.1vw, 1.2rem);
}
.hero-pitch span { white-space: nowrap; }
.hero-pitch .dot { color: var(--ink-faint); font-weight: 400; }
.hero-pitch .k1 { color: var(--circuit);    text-shadow: 0 0 14px color-mix(in srgb, var(--circuit) 50%, transparent); }
.hero-pitch .k2 { color: var(--weld-amber); text-shadow: 0 0 14px color-mix(in srgb, var(--weld-amber) 50%, transparent); }
.hero-pitch .k3 { color: var(--spark);      text-shadow: 0 0 14px color-mix(in srgb, var(--spark) 50%, transparent); }
.hero .cta-row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* corner weld-brackets framing the hero */
.brackets { position: absolute; inset: 2rem; z-index: 0; pointer-events: none; }
.brackets span { position: absolute; width: 32px; height: 32px; border: 2px solid color-mix(in srgb, var(--rust) 85%, transparent); }
.brackets .tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.brackets .tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.brackets .bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.brackets .br { bottom: 0; right: 0; border-left: 0; border-top: 0; }
@media (max-width: 560px) { .brackets { display: none; } }

/* ---- generic section ---------------------------------------------------- */

section { position: relative; padding: 5rem 0; }
.section-head { text-align: center; margin-bottom: 2.8rem; }
.section-head h2 { margin: .5rem 0 0; font-size: clamp(1.5rem, 4vw, 2.3rem); }

/* ---- panels (riveted steel plates) -------------------------------------- */

.panel {
  --accent: var(--weld-amber);
  background: var(--panel-fill);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 12%, transparent), inset 0 0 30px rgba(0,0,0,.5);
  clip-path: polygon(
    14px 0, 100% 0, 100% calc(100% - 14px),
    calc(100% - 14px) 100%, 0 100%, 0 14px);
  padding: 1.7rem 1.5rem;
}

/* feature grid */
.features { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.feature h3 {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .12em;
  font-size: 1.02rem; margin: .2rem 0 .6rem;
  color: color-mix(in srgb, var(--ink) 72%, var(--accent) 28%);
}
.feature p { margin: 0; color: var(--ink-dim); font-size: .95rem; }
.feature .ic { width: 40px; height: 40px; margin-bottom: .8rem; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 55%, transparent)); }
.feature.brain  { --accent: var(--circuit); }
.feature.amber  { --accent: var(--weld-amber); }
.feature.spark  { --accent: var(--spark); }
.feature.hazard { --accent: var(--hazard); }

/* ---- gallery (portrait phone shots) ------------------------------------ */

.gallery {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: start;
}
.shot {
  --accent: var(--weld-amber);
  position: relative; margin: 0; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 12%, transparent);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  background: var(--coal);
}
.shot img { width: 100%; height: auto; display: block; transition: transform .4s ease; }
.shot:hover img { transform: scale(1.03); }
.shot figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.4rem 1rem .8rem;
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .16em;
  font-size: .78rem; color: var(--ink);
  background: linear-gradient(transparent, rgba(5,6,7,.9));
}
.shot.brain { --accent: var(--circuit); }
.shot.spark { --accent: var(--spark); }
@media (prefers-reduced-motion: reduce) { .shot:hover img { transform: none; } }

/* ---- how-it-plays list -------------------------------------------------- */

.loop-steps { display: grid; gap: 1rem; max-width: 780px; margin-inline: auto; counter-reset: step; }
.loop-step {
  display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; align-items: start;
  padding: 1rem 1.1rem;
  background: color-mix(in srgb, var(--steel) 80%, transparent);
  border-left: 3px solid var(--weld-amber);
}
.loop-step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono); font-size: 1.5rem; font-weight: 700;
  color: var(--circuit); line-height: 1.2;
}
.loop-step h3 {
  margin: 0 0 .25rem; font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .1em; font-size: .98rem; color: var(--ink);
}
.loop-step p { margin: 0; color: var(--ink-dim); font-size: .93rem; }

/* ---- final CTA ---------------------------------------------------------- */

.cta-final { text-align: center; }
.cta-final h2 { font-size: clamp(1.7rem, 5vw, 2.8rem); margin: 0 0 1.3rem; }

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

.site-footer { position: relative; padding: 2.8rem 0 2.2rem; border-top: 1px solid color-mix(in srgb, var(--rust) 55%, transparent); overflow: hidden; }
.site-footer .wrap { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; }
.site-footer small { color: var(--ink-faint); }
.foot-links { display: flex; flex-wrap: wrap; gap: 1.3rem; }
.foot-links a { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; color: var(--ink-dim); }
.foot-links a:hover { color: var(--weld-amber); }

/* ---- legal pages (privacy / terms / support) ---------------------------- */

.legal { padding: 3.2rem 0 4.2rem; }
.legal .wrap { width: min(100% - 2.5rem, 820px); }
.legal .doc-head { text-align: center; margin-bottom: 2.8rem; }
.legal .doc-head h1 { margin: .4rem 0 0; font-size: clamp(1.7rem, 5vw, 2.6rem); }
.legal .updated {
  margin: .9rem 0 0; font-family: var(--font-mono); text-transform: uppercase;
  letter-spacing: .14em; font-size: .72rem; color: var(--ink-faint);
}
.legal article > section { padding: 0; margin: 0 0 2.3rem; }
.legal h2 {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .12em;
  font-size: 1.1rem; margin: 0 0 .7rem;
  color: color-mix(in srgb, var(--ink) 68%, var(--weld-amber) 32%);
}
.legal h3 {
  font-family: var(--font-display); letter-spacing: .05em;
  font-size: .98rem; color: var(--ink); margin: 1.3rem 0 .45rem;
}
.legal p, .legal li { color: var(--ink-dim); font-size: .97rem; }
.legal .lead { color: var(--ink); font-size: 1.05rem; }
.legal ul { padding-left: 1.25rem; margin: .6rem 0; }
.legal li { margin: .4rem 0; }
.legal strong { color: color-mix(in srgb, var(--ink) 84%, var(--weld-amber) 16%); font-weight: 600; }
.legal .uc { font-size: .9rem; letter-spacing: .01em; color: color-mix(in srgb, var(--ink) 60%, transparent); }
.legal .note {
  margin-top: 2.4rem; padding: 1rem 1.2rem; font-size: .82rem; color: var(--ink-faint);
  border-left: 2px solid color-mix(in srgb, var(--weld-amber) 40%, transparent);
  background: color-mix(in srgb, var(--weld-amber) 5%, transparent);
}
.legal .toc { display: flex; flex-wrap: wrap; gap: .5rem 1.3rem; justify-content: center; margin: 0 auto 2.4rem; max-width: 700px; }
.legal .toc a { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; color: var(--ink-dim); }
.legal .toc a:hover { color: var(--weld-amber); }