/* 77.Lab — dark theme built around the product's own two colour sources:
 *   1. the unit itself — black anodised D16T, MOTO/AZI ringed in orange LED
 *   2. the sonar readout it produces — vivid blue with a hot return ramp
 * Minimal monochrome build: black ground, white data, one orange accent.
 * Loaded after styles.css and after the page's inline <style>, so it wins.
 */

:root {
  /* No accent colour. The only colour on the page is the sonar itself. */
  --color-bg:        #06080f;
  --color-surface:   #0d1017;
  --color-text:      #eceef2;
  --color-accent:    #ffffff;
  --color-accent-2:  #ffffff;
  --color-divider:   rgba(255,255,255,.15);

  --color-neutral-100: #0b0d13;
  --color-neutral-200: #d5d8de;
  --color-neutral-300: #3a3e46;
  --color-neutral-900: #04050a;

  --color-accent-500: #ffffff;
  --color-accent-600: #e6e8ec;
  --color-accent-700: #ffffff;
}

html { background: var(--color-bg); color-scheme: dark; }
body { background: var(--color-bg); color: var(--color-text); }

/* ── HERO: the sonar is the ground of the whole first screen ──────────── */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100svh; min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(96px, 12vh, 160px) 0 clamp(64px, 9vh, 110px);
  border-bottom: 1px solid var(--color-divider);
}
.hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; z-index: -2; pointer-events: none;
}
/* a whisper of grain so the flat areas never look like dead CSS */
.hero-grain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .05;
  background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 0);
  background-size: 3px 3px;
}

/* ── HUD: the numerals are what make a blue field read as a sonar readout ── */
.hud { position:absolute; inset:0; z-index:-1; pointer-events:none;
       font-family:var(--font-body); font-feature-settings:'tnum' 1;
       color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.6); }
.hud-depth { position:absolute; left:clamp(14px,2vw,30px); top:clamp(64px,9vh,104px);
             font-weight:800; font-size:clamp(34px,4.4vw,62px); line-height:.94;
             letter-spacing:-.03em; }
.hud-depth span { font-size:.42em; font-weight:600; margin-left:.08em; }
.hud-stats { position:absolute; left:clamp(16px,2.1vw,32px); top:clamp(108px,15vh,176px);
             font-size:clamp(10px,.9vw,13px); line-height:1.5; opacity:.95; }
.hud-stats i { font-style:normal; opacity:.65; margin-left:.25em; font-size:.85em; }
.hud-x, .hud-y { position:absolute; display:flex; font-size:clamp(9px,.85vw,12px); opacity:.75; }
.hud-x { top:clamp(60px,8vh,92px); left:9%; right:11%; justify-content:space-between; }
.hud-y { left:6px; top:clamp(96px,13vh,150px); bottom:11%; flex-direction:column;
         justify-content:space-between; align-items:flex-start; }
.hud-range { position:absolute; right:clamp(10px,1.2vw,18px); bottom:clamp(56px,8vh,96px);
             font-size:clamp(9px,.85vw,12px); border:1px solid rgba(255,255,255,.4);
             padding:3px 9px; }
.hud-tag { position:absolute; right:clamp(10px,1.2vw,18px); top:clamp(60px,8vh,92px);
           font-size:clamp(9px,.8vw,11px); letter-spacing:.12em; opacity:.75; }
@media (max-width:640px){ .hud-x, .hud-stats, .hud-tag { display:none; } }

.hero-inner { position: relative; }
.hero-kicker {
  margin: 0 0 clamp(20px, 3vh, 34px);
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 58%, transparent);
}
.hero-h1 {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(34px, 5.4vw, 78px); line-height: 1.04;
  letter-spacing: -0.03em; margin: 0 0 0 -0.05em; max-width: 16ch;
  color: #fff;
}
.hero-sub {
  font-size: clamp(16px, 1.4vw, 20px); line-height: 1.62; max-width: 48ch;
  margin: clamp(22px, 3vh, 38px) 0 0;
  color: color-mix(in srgb, var(--color-text) 82%, transparent);
}
.hero-cta { display: flex; gap: var(--space-3); flex-wrap: wrap; margin: clamp(26px, 3.4vh, 42px) 0 0; }

.hero-foot {
  position: absolute; left: 0; right: 0; bottom: clamp(18px, 3vh, 34px);
  display: flex; gap: 16px 32px; justify-content: space-between; flex-wrap: wrap;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 52%, transparent);
}
.hero-compat { display: flex; gap: 8px 26px; flex-wrap: wrap; }
.hero-read { font-feature-settings: 'tnum' 1; }
@media (max-width: 640px) { .hero-read { display: none; } }

/* ── media ─────────────────────────────────────────────────────────────── */
.figure { background: var(--color-surface); border: 1px solid var(--color-divider); }
/* The product is matte black — it only reads on WHITE. Keep these cards light. */
.figure--product { background: #fff;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 2px 4px rgba(0,0,0,.35), 0 18px 40px rgba(0,0,0,.35); }

/* ── chrome ────────────────────────────────────────────────────────────── */
.nav { background: color-mix(in srgb, var(--color-bg) 84%, transparent) !important;
       border-bottom: 1px solid var(--color-divider); }
.nav a { color: var(--color-neutral-200); }
.nav a:hover { color: #fff; }
.nav .btn-primary { color: #06080f; }

.btn-primary { background: #fff; color: #06080f; }
.btn-primary:hover { background: #d8dade; }
.btn-secondary { color: var(--color-text); border-color: var(--color-divider); }
.btn-ghost, a { color: var(--color-accent-700); }
.btn-ghost:hover, a:hover { color: var(--color-accent); }

.table td { border-color: var(--color-divider); }
.table tbody tr:hover { background: rgba(255,255,255,.05); }
.stat { color: var(--color-accent-2); }
.rule { background: var(--color-divider); }
#precision { background: var(--color-surface) !important; }
#request { background: #eceef2 !important; color: #06080f; }
#request .btn-ghost { color: #06080f !important; border-color: #06080f !important; }
footer { background: var(--color-neutral-900) !important; }