/* =============================================================
   SALES EDC — Marketplace Site Styles
   Design tokens from sales_edc/DESIGN.md (verbatim)
   Voice: Therapist not Showman / American traditional workwear
   Last revised: 2026-05-31
   ============================================================= */

:root {
  --surface: #12140e;                /* Midnight Teal (sponsor page exact) */
  --surface-dim: #12140e;
  --surface-bright: #383a33;
  --surface-container-lowest: #0d0f09;
  --surface-container-low: #1a1c16;
  --surface-container: #1e201a;
  --surface-container-high: #292b24;
  --surface-container-highest: #34362f;
  --on-surface: #ffffff;             /* Pure white body text */
  --on-surface-variant: #e2bfb4;     /* Warm off-white for muted text */
  --outline: #a98a80;
  --outline-variant: #594139;
  --primary: #E85A1D;                /* Safety Orange (stats, accents) */
  --on-primary: #5b1a00;
  --primary-container: #e85a1d;      /* Safety Orange — brand kit v3 */
  --on-primary-container: #fff7f4;   /* High-contrast warm white on orange */
  --brand-blue: #2563eb;             /* Primary Blue — Brand Anchor / Technical */
  --success-green: #10b981;          /* Success Green — Value / Credit Signals */
  --secondary: #ccc6b7;
  --tertiary: #cac6bc;
  --industrial-line: #3a3f35;
  --margin-mobile: 16px;
  --margin-desktop: 48px;
  --unit-1: 4px;
  --unit-2: 8px;
  --unit-4: 16px;
  --unit-6: 24px;
  --unit-8: 32px;
  --unit-16: 64px;
  --gutter: 24px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }

body {
  background: var(--surface);
  color: var(--on-surface);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* TACTICAL OVERLAYS ============================================== */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 1;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('https://lh3.googleusercontent.com/aida/ADBb0uhuWbBcEwY7ZyGR_kZMTdyQkOM5TJdbhdbPa60jItJXzWbu-0z6CUQzHkVZyhGpAoPGLMP-1Ltx7A4fhD2WE39fTdh8152KG0vhbg6YrLSe9Fds-oPHimePV0oZJx8Xxs7U5ZqJM0k51r-lWA6iPv6FBlR6zLZmcDa_N6vbIznf1Ca5P0wfNK9RllwhMMM5WkPYFzkvI1vOO7kGf07jhVFzYtG2aRn7O2V9Pmw1m9dVocHHbocfrooDfQ');
  background-size: cover;
  background-position: center;
  opacity: 0.12;
  mix-blend-mode: screen;
  filter: brightness(0.8) contrast(1.2);
  pointer-events: none;
  z-index: 1;
}

/* Scanline animation */
@keyframes scanline {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

.scanline-effect {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(180deg, 
    rgba(0, 0, 0, 0) 0%, 
    rgba(37, 99, 235, 0.05) 50%, 
    rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
  z-index: 2;
  animation: scanline 8s linear infinite;
  will-change: transform;
}
::selection { background: var(--primary-container); color: var(--on-primary-container); }

/* TYPOGRAPHY ============================================== */
.headline-xl {
  font-family: 'Anton', sans-serif;
  font-size: 48px;
  line-height: 0.95;
  letter-spacing: 0.02em;
  font-weight: 400;
  text-transform: uppercase;
  margin: 0;
}
@media (min-width: 768px) { .headline-xl { font-size: 96px; } }
@media (min-width: 1024px) { .headline-xl { font-size: 112px; } }

.headline-lg {
  font-family: 'Anton', sans-serif;
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: 0.02em;
  font-weight: 400;
  text-transform: uppercase;
  margin: 0;
}
@media (min-width: 768px) { .headline-lg { font-size: 48px; } }

.headline-md {
  font-family: 'Anton', sans-serif;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: 0.02em;
  font-weight: 400;
  text-transform: uppercase;
  margin: 0;
}
@media (min-width: 768px) { .headline-md { font-size: 36px; } }

.manifesto-italic {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 20px;
  line-height: 1.4;
  font-weight: 400;
}
@media (min-width: 768px) { .manifesto-italic { font-size: 26px; } }

.label-mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.0;
  letter-spacing: 0.05em;
  font-weight: 500;
  text-transform: uppercase;
}

.data-point {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 400;
}

.label-orange { color: var(--primary-container); }
.label-mute { color: var(--on-surface-variant); }

.label-with-dot {
  display: inline-flex;
  align-items: center;
  gap: var(--unit-2);
  margin-bottom: var(--unit-4);
}
.label-with-dot::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  background: var(--primary-container);
  flex-shrink: 0;
}

/* LAYOUT ============================================== */
section {
  padding: var(--unit-16) var(--margin-mobile);
  border-bottom: 1px solid var(--industrial-line);
  position: relative;
  z-index: 10;
}
@media (min-width: 768px) {
  section { padding: var(--unit-16) var(--margin-desktop); }
}
.section-inner { max-width: 1200px; margin: 0 auto; }
.section-header { margin-bottom: var(--unit-8); }
.section-header .headline-lg { margin-top: var(--unit-2); }
.section-header .description {
  font-size: 16px;
  color: var(--on-surface-variant);
  max-width: 720px;
  margin-top: var(--unit-4);
}

/* HEADER ============================================== */
.site-header {
  position: sticky;
  top: 0;
  background: rgba(18, 20, 14, 0.90);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--surface-container-highest);
  padding: var(--unit-4) var(--margin-mobile);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
}
}
@media (min-width: 768px) {
  .site-header { padding: var(--unit-2) var(--margin-desktop); }
}
.site-header .brand {
  font-family: 'Anton', sans-serif;
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.site-header nav {
  display: none;
  gap: var(--unit-6);
}
@media (min-width: 768px) {
  .site-header nav { display: flex; }
}
.site-header nav a {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.05em;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  transition: color 0.15s;
}
.site-header nav a:hover { color: var(--on-surface); }

/* BUTTONS ============================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--unit-2);
  padding: var(--unit-4);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.05em;
  font-weight: 500;
  text-transform: uppercase;
  border-radius: 4px;
  transition: opacity 0.15s, transform 0.15s, background 0.15s;
  text-align: center;
}
.btn-primary { background: var(--primary-container); color: var(--on-primary-container); }
.btn-primary:hover { opacity: 0.92; }
.btn-primary:active { transform: scale(0.98); }
.btn-outline { border: 1px solid var(--on-surface); color: var(--on-surface); }
.btn-outline:hover { background: var(--surface-container-low); }
.btn-sm { padding: var(--unit-2) var(--unit-4); font-size: 11px; }
.btn-arrow::after { content: '→'; margin-left: var(--unit-2); transition: transform 0.15s; }
.btn-arrow:hover::after { transform: translateX(4px); }

/* HERO (LANDING) ============================================== */
.hero {
  min-height: calc(100dvh - 64px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--industrial-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--industrial-line) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.15;
  pointer-events: none;
}
.hero-content { position: relative; z-index: 1; max-width: 920px; }
.hero h1 { margin: 0 0 var(--unit-8); }
.hero h1 span { display: block; }
.hero h1 .orange { color: var(--primary-container); }
.hero-sub {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 20px;
  line-height: 1.4;
  color: var(--on-surface-variant);
  max-width: 560px;
  margin: 0 0 var(--unit-8);
}
@media (min-width: 768px) { .hero-sub { font-size: 26px; } }
.hero-ctas { display: flex; flex-direction: column; gap: var(--unit-4); max-width: 560px; }
@media (min-width: 640px) {
  .hero-ctas { flex-direction: row; }
  .hero-ctas .btn { flex: 1; }
}

/* SHORTER PAGE HERO ============================================== */
.page-hero {
  padding: var(--unit-16) var(--margin-mobile);
  border-bottom: 1px solid var(--industrial-line);
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) {
  .page-hero { padding: var(--unit-16) var(--margin-desktop); }
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--industrial-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--industrial-line) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.10;
  pointer-events: none;
}
.page-hero-inner { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }

/* SPEC CARDS (3-COL POUCH) ============================================== */
.spec-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--unit-4);
  margin-top: var(--unit-8);
}
@media (min-width: 768px) { .spec-grid { grid-template-columns: repeat(3, 1fr); } }
.spec-card {
  background: var(--surface-container-low);
  border: 1px solid var(--industrial-line);
  padding: var(--unit-6);
  position: relative;
  border-radius: 0;
}
.spec-card .rec-tag {
  position: absolute;
  top: 0;
  right: 0;
  padding: var(--unit-1) var(--unit-2);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--on-surface-variant);
  text-transform: uppercase;
  background: var(--industrial-line);
}
.spec-card .icon-glyph {
  font-family: 'Anton', sans-serif;
  font-size: 32px;
  color: var(--primary-container);
  margin-bottom: var(--unit-4);
  display: block;
  line-height: 1;
}
.spec-card h3 {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 var(--unit-2);
}
.spec-card p {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.5;
  color: var(--on-surface-variant);
  margin: 0;
}

/* SKU CARDS ============================================== */
.sku-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--unit-4);
  margin-top: var(--unit-8);
}
@media (min-width: 640px) { .sku-grid { grid-template-columns: repeat(2, 1fr); } }
.sku-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--surface);
  border: 1px solid var(--industrial-line);
  padding: var(--unit-6);
  position: relative;
  transition: background 0.15s;
  min-height: 240px;
}
.sku-card:hover { background: var(--surface-container); }
.sku-card.bundle { border: 2px solid var(--primary-container); }
.sku-card .sku-tag {
  position: absolute;
  top: 0;
  right: 0;
  padding: var(--unit-1) var(--unit-2);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--on-surface-variant);
  text-transform: uppercase;
  background: var(--industrial-line);
}
.sku-card.bundle .sku-tag {
  background: var(--primary-container);
  color: var(--on-primary-container);
  font-weight: 700;
}
.sku-card .sku-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.05em;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--primary-container);
  margin-bottom: var(--unit-2);
}
.sku-card .sku-desc { font-size: 16px; line-height: 1.5; margin: 0 0 var(--unit-4); }
.sku-card .sku-footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-top: 1px solid var(--outline-variant);
  padding-top: var(--unit-4);
  margin-top: var(--unit-4);
}
.sku-card .sku-price {
  font-family: 'Anton', sans-serif;
  font-size: 28px;
  letter-spacing: 0.02em;
}
.sku-card .sku-cta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.05em;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--primary-container);
  transition: transform 0.15s;
}
.sku-card:hover .sku-cta { transform: translateX(2px); }

/* CALLOUT BOX ============================================== */
.callout-box {
  border: 1px solid var(--industrial-line);
  background: var(--surface);
  padding: var(--unit-6);
  margin-top: var(--unit-8);
}
.callout-box a { color: var(--primary-container); text-decoration: underline; text-underline-offset: 4px; }

/* CREDIT LADDER ============================================== */
.ladder-grid {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--industrial-line);
  margin-top: var(--unit-8);
}
@media (min-width: 768px) { .ladder-grid { grid-template-columns: repeat(4, 1fr); } }
.ladder-card {
  padding: var(--unit-6);
  background: var(--surface-container-low);
  border-bottom: 1px solid var(--outline-variant);
}
.ladder-card:last-child { border-bottom: none; }
@media (min-width: 768px) {
  .ladder-card { border-bottom: none; border-right: 1px solid var(--outline-variant); }
  .ladder-card:last-child { border-right: none; }
}
.ladder-card.tipping { background: var(--surface-container); }
.ladder-card.tipping .ladder-amount, .ladder-card.tipping .ladder-tag { color: var(--primary-container); }
.ladder-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  margin-bottom: var(--unit-2);
}
.ladder-amount {
  font-family: 'Anton', sans-serif;
  font-size: 56px;
  line-height: 1;
  letter-spacing: 0.02em;
  margin-bottom: var(--unit-4);
}
.ladder-desc {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.4;
  margin: 0;
}
.ladder-tagline { margin-top: var(--unit-6); color: var(--on-surface-variant); max-width: 760px; }

/* MANIFESTO CARD ============================================== */
.manifesto-section { background: var(--surface-container-highest); }
.manifesto-card {
  background: var(--primary-container);
  color: var(--on-primary-container);
  border: 1px solid var(--industrial-line);
  padding: var(--unit-8);
}
@media (min-width: 768px) { .manifesto-card { padding: var(--unit-16); } }
.manifesto-card .label-mono { margin-bottom: var(--unit-4); display: flex; align-items: center; gap: var(--unit-2); }
.manifesto-card .label-mono::before { content: '▌'; font-size: 14px; }
.manifesto-quote {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 22px;
  line-height: 1.35;
  max-width: 880px;
  margin: 0 0 var(--unit-6);
}
@media (min-width: 768px) { .manifesto-quote { font-size: 30px; } }
.manifesto-attr {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.05em;
  font-weight: 500;
  text-transform: uppercase;
  border-top: 1px solid var(--on-primary-container);
  padding-top: var(--unit-4);
  display: flex;
  flex-direction: column;
  gap: var(--unit-2);
}
@media (min-width: 640px) { .manifesto-attr { flex-direction: row; justify-content: space-between; } }

/* IDENTITY (PROSE) ============================================== */
.prose .section-inner { max-width: 760px; }
.prose p { font-size: 18px; line-height: 1.6; margin: 0 0 var(--unit-6); }
.prose p:last-child { margin-bottom: 0; }
.prose h3 {
  font-family: 'Anton', sans-serif;
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: var(--unit-8) 0 var(--unit-4);
  font-weight: 400;
}
.prose ul { list-style: none; padding: 0; margin: var(--unit-4) 0; }
.prose ul li {
  padding-left: var(--unit-6);
  position: relative;
  margin-bottom: var(--unit-2);
}
.prose ul li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--primary-container);
}

/* PRICE-DETAIL HEADER ============================================== */
.sku-detail-header {
  display: flex;
  flex-direction: column;
  gap: var(--unit-2);
  margin-bottom: var(--unit-8);
}
.sku-detail-header .price-line {
  font-family: 'Anton', sans-serif;
  font-size: 48px;
  letter-spacing: 0.02em;
  color: var(--primary);
}
@media (min-width: 768px) {
  .sku-detail-header .price-line { font-size: 64px; }
}

/* DATA BOXES (BENEFITS LIST) ============================================== */
.data-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--unit-4);
  margin-top: var(--unit-8);
}
@media (min-width: 768px) { .data-grid { grid-template-columns: repeat(2, 1fr); } }
.data-box {
  border: 1px solid var(--industrial-line);
  padding: var(--unit-6);
  background: var(--surface-container-low);
}
.data-box .label-mono { color: var(--on-surface-variant); margin-bottom: var(--unit-2); }
.data-box p { margin: 0; font-size: 15px; }

/* CODE EXAMPLE BLOCK ============================================== */
.example-block {
  background: var(--surface-container-lowest);
  border: 1px solid var(--industrial-line);
  padding: var(--unit-6);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.6;
  color: var(--on-surface-variant);
  margin-top: var(--unit-4);
  white-space: pre-wrap;
  overflow-x: auto;
}
.example-block .e-h {
  color: var(--primary-container);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* PURCHASE FORM ============================================== */
.purchase-card {
  background: var(--surface-container-low);
  border: 1px solid var(--industrial-line);
  padding: var(--unit-8);
  margin-top: var(--unit-8);
}
.purchase-card label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.05em;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  margin-bottom: var(--unit-2);
  margin-top: var(--unit-4);
}
.purchase-card label:first-child { margin-top: 0; }
.purchase-card input, .purchase-card textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--outline-variant);
  color: var(--on-surface);
  padding: var(--unit-4);
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  border-radius: 4px;
}
.purchase-card input:focus, .purchase-card textarea:focus {
  outline: none;
  border-color: var(--primary-container);
}
.purchase-card .btn-primary { width: 100%; margin-top: var(--unit-6); padding: var(--unit-4); font-size: 13px; }

/* SPONSOR PERSONA TABS ============================================== */
.persona-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--unit-4);
  margin-top: var(--unit-8);
}
@media (min-width: 768px) { .persona-grid { grid-template-columns: repeat(2, 1fr); } }
.persona-card {
  background: var(--surface-container-low);
  border: 1px solid var(--industrial-line);
  padding: var(--unit-6);
}
.persona-card .persona-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--primary-container);
  margin-bottom: var(--unit-2);
}
.persona-card h3 {
  font-family: 'Anton', sans-serif;
  font-size: 28px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 var(--unit-4);
  font-weight: 400;
}
.persona-card .stat-row {
  display: flex;
  flex-direction: column;
  gap: var(--unit-2);
  border-top: 1px solid var(--outline-variant);
  padding-top: var(--unit-4);
  margin-top: var(--unit-4);
}
.persona-card .stat-row .stat {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
}
.persona-card .stat-row .stat strong { color: var(--primary); font-weight: 500; }

/* FRANKENSTACK CALLOUT ============================================== */
.frankenstack {
  background: var(--surface-container);
  border: 1px solid var(--industrial-line);
  padding: var(--unit-8);
}
.frankenstack .headline-lg { color: var(--on-surface); }
.frankenstack p { color: var(--on-surface-variant); max-width: 780px; }

/* TRUST STRIP ============================================== */
.trust-section { background: var(--surface-container-low); padding: var(--unit-8) var(--margin-mobile); }
@media (min-width: 768px) { .trust-section { padding: var(--unit-8) var(--margin-desktop); } }
.trust-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--unit-4);
  max-width: 1200px;
  margin: 0 auto;
}
@media (min-width: 768px) { .trust-grid { grid-template-columns: repeat(4, 1fr); } }
.trust-item {
  display: flex;
  align-items: center;
  gap: var(--unit-2);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}
.trust-item::before { content: '■'; color: var(--primary-container); font-size: 10px; }

/* FOOTER ============================================== */
.site-footer {
  background: var(--surface-container);
  border-top: 2px solid var(--surface-container-highest);
  padding: var(--unit-8) var(--margin-mobile);
}
@media (min-width: 768px) { .site-footer { padding: var(--unit-8) var(--margin-desktop); } }
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--unit-8);
  max-width: 1200px;
  margin: 0 auto;
}
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: var(--gutter); } }
.footer-brand {
  font-family: 'Anton', sans-serif;
  font-size: 28px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.footer-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  margin-top: var(--unit-2);
}
.footer-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--unit-2);
}
.footer-links a {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  padding: var(--unit-1) 0;
  transition: color 0.15s;
}
.footer-links a:hover { color: var(--on-surface); }
.footer-contact {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}
.footer-contact > div { margin-bottom: var(--unit-2); }

/* STICKY MOBILE CTA ============================================== */
.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: var(--surface);
  border-top: 1px solid var(--surface-container-highest);
  padding: var(--unit-4);
}
@media (min-width: 768px) { .sticky-cta { display: none; } }
.sticky-cta .btn-primary { width: 100%; }
@media (max-width: 767px) { body { padding-bottom: 80px; } }

/* STAT SECTION ============================================== */
.stat-section { background: var(--surface-container-low); }
.stat-grid { display: grid; grid-template-columns: 1fr; gap: var(--unit-8); align-items: center; }
@media (min-width: 768px) { .stat-grid { grid-template-columns: 1fr 2fr; gap: var(--unit-16); } }
.stat-big {
  font-family: 'Anton', sans-serif;
  font-size: 72px;
  line-height: 1;
  color: var(--primary);
  letter-spacing: 0.02em;
}
.stat-big .arrow { color: var(--on-surface-variant); margin: 0 var(--unit-2); }
@media (min-width: 768px) { .stat-big { font-size: 108px; } }

/* UTILITY ============================================== */
.mt-4 { margin-top: var(--unit-4); }
.mt-8 { margin-top: var(--unit-8); }
.mb-4 { margin-bottom: var(--unit-4); }
.text-mute { color: var(--on-surface-variant); }
.bg-low { background: var(--surface-container-low); }
.bg-mid { background: var(--surface-container); }

/* HEADER LOGO ============================================== */
.site-header .brand {
  display: flex;
  align-items: center;
  gap: var(--unit-2);
}
.site-header .brand-mark {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  flex-shrink: 0;
}
.site-header .brand-text {
  font-family: 'Anton', sans-serif;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
@media (max-width: 480px) {
  .site-header .brand-text { font-size: 18px; }
}

/* FOOTER BRAND with logo ============================================== */
.site-footer .footer-brand {
  display: flex;
  align-items: center;
  gap: var(--unit-2);
}
.site-footer .footer-brand-mark {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 4px;
}