/* TrailCoach landing — 21 TSI style reference + accents cinématiques
 * Dark, typographic, deep reds/oranges sur la base monochrome. */

:root {
  /* Colors */
  --color-absolute-zero: #000000;
  --color-canvas-white: #ffffff;
  --color-iron-gray: #4d4d4d;
  --color-base-background: #161a1c;
  --color-text-primary: #ebf3f6;
  --color-text-secondary: #aebbc5;
  --color-button-control: #c2d0e0;
  --color-button-hover: #98a7b6;
  --color-secondary-button: #242c31;
  --color-secondary-button-hover: #353d43;
  --color-separator-line: #222a30;
  --color-cookie-block: #1e2428;

  /* Palette nature & terrain — terreuse, mate, organique */
  --color-ember: #c25a3a;        /* terre brûlée, dossard mat */
  --color-ember-deep: #8e3520;   /* terre cuite profonde */
  --color-magenta: #7c4a4a;      /* rouille fanée */
  --color-violet: #3d3a52;       /* ardoise lavande */
  --color-amber: #c89a4c;        /* ocre soleil bas */
  --color-mint: #6b8e6f;         /* mousse forêt */
  --color-moss: #4a5d3c;         /* vert sous-bois */
  --color-clay: #8a6f4e;         /* argile sèche */
  --color-bone: #d8cdb8;         /* os, lichen pâle */

  /* Typography */
  --font-saans: 'Saans', 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --text-caption: 12px;
  --text-body-sm: 14px;
  --text-body: 18px;
  --text-body-lg: 20px;
  --text-heading-sm: 47px;
  --text-heading: 79px;
  --text-heading-lg: 130px;
  --text-display-sm: 136px;
  --text-display: 245px;

  --font-weight-light: 300;
  --font-weight-w380: 380;
  --font-weight-w570: 570;
  --font-weight-w790: 790;

  /* Spacing */
  --spacing-10: 10px;
  --spacing-15: 15px;
  --spacing-20: 20px;
  --spacing-30: 30px;
  --spacing-38: 38px;
  --spacing-60: 60px;
  --spacing-108: 108px;
  --spacing-150: 150px;
  --spacing-172: 172px;

  /* Layout */
  --page-max-width: 1350px;
  --section-gap: 30px;
  --card-padding: 20px;
  --element-gap: 20px;

  /* Radius */
  --radius-default: 8px;
  --radius-buttons: 70px;

  /* Transitions */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #0a0907;
  color: var(--color-text-primary);
  font-family: var(--font-saans);
  font-size: var(--text-body);
  font-weight: var(--font-weight-w380);
  line-height: 1.22;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}

/* Body ambient — atmosphère terre/sous-bois fixée au scroll */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(1400px 700px at -10% -10%, rgba(74, 93, 60, 0.10), transparent 60%),
    radial-gradient(1200px 600px at 110% 110%, rgba(194, 90, 58, 0.07), transparent 60%);
  pointer-events: none;
  z-index: 0;
  filter: blur(30px);
}

/* Grain analogique global — SVG noise inline, fixé au viewport pour le côté film */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch' seed='4'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.85'/></svg>");
  background-size: 220px 220px;
  pointer-events: none;
  z-index: 999;
  opacity: 0.22;
  mix-blend-mode: overlay;
}

.nav, .hero, .section, .footer { position: relative; z-index: 1; }

::selection {
  background: var(--color-canvas-white);
  color: var(--color-absolute-zero);
}

a {
  color: var(--color-canvas-white);
  text-decoration: none;
  transition: opacity 0.3s var(--ease), color 0.3s var(--ease);
}
a:hover { opacity: 0.7; }

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.container {
  width: 100%;
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-30);
}

.mono { font-feature-settings: "tnum" 1, "ss01" 1; }

.muted { color: var(--color-text-secondary); }

/* Caption — small uppercase labels */
.caption {
  font-size: var(--text-caption);
  font-weight: var(--font-weight-w570);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-bottom: 1px solid var(--color-separator-line);
}
.nav-inner {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: var(--spacing-20) var(--spacing-30);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-30);
}
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: var(--spacing-15);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-w570);
  letter-spacing: 0.02em;
  color: var(--color-canvas-white);
}
.brand-tag {
  font-size: var(--text-caption);
  font-weight: var(--font-weight-w380);
  color: var(--color-text-secondary);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--spacing-30);
}
.nav-links a {
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-w380);
  color: var(--color-canvas-white);
}

/* ============================================================
   PILL BUTTONS
   ============================================================ */
.btn-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  background: transparent;
  color: var(--color-canvas-white);
  border: 1px solid var(--color-canvas-white);
  border-radius: var(--radius-buttons);
  font-family: var(--font-saans);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-w570);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  z-index: 1;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), opacity 0.3s var(--ease);
}
.btn-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--color-ember), var(--color-clay), var(--color-moss));
  border-radius: inherit;
  z-index: -1;
  transform: translateX(-101%);
  transition: transform 0.4s var(--ease);
}
.btn-pill:hover {
  color: var(--color-canvas-white);
  border-color: transparent;
  opacity: 1;
}
.btn-pill:hover::before {
  transform: translateX(0);
}
.btn-pill-sm {
  padding: 7px 35px 8px 20px;
  font-size: var(--text-caption);
  border-color: var(--color-canvas-white);
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  padding: var(--spacing-60) 0 var(--spacing-108);
  background: var(--color-absolute-zero);
  overflow: hidden;
  border-bottom: 1px solid var(--color-separator-line);
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
}

/* Vidéo background full-bleed, gradée façon film analogique */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
  opacity: 0.62;
  /* Grade nature : on baisse la saturation, on warmise, on durcit légèrement */
  filter: saturate(80%) contrast(108%) sepia(15%) brightness(95%);
  animation: hero-video-zoom 28s ease-in-out infinite alternate;
}
@keyframes hero-video-zoom {
  0%   { transform: scale(1.02); }
  100% { transform: scale(1.12); }
}

/* Couche 1 : wash terre/mousse sur la vidéo, blend multiply pour assombrir naturel */
.hero::before {
  content: "";
  position: absolute;
  inset: -300px;
  background:
    radial-gradient(800px 600px at 20% 25%, rgba(194, 90, 58, 0.35), transparent 65%),
    radial-gradient(900px 600px at 85% 20%, rgba(74, 93, 60, 0.35), transparent 65%),
    radial-gradient(700px 500px at 60% 95%, rgba(61, 58, 82, 0.45), transparent 65%),
    radial-gradient(500px 400px at 10% 95%, rgba(200, 154, 76, 0.18), transparent 65%);
  filter: blur(60px) saturate(95%);
  pointer-events: none;
  animation: hero-drift 22s ease-in-out infinite alternate;
  opacity: 0.85;
  mix-blend-mode: multiply;
  z-index: 1;
}

/* Couche 2 : vignette + gradient bas + ridges + grain dense pour le côté film */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, transparent 25%, rgba(0, 0, 0, 0.65) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.10) 40%, rgba(0, 0, 0, 0.85) 100%),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 3px),
    url("data:image/svg+xml;utf8,<svg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch' seed='9'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: auto, auto, auto, 220px 220px;
  pointer-events: none;
  z-index: 2;
}
.hero > .container {
  position: relative;
  z-index: 3;
  width: 100%;
}

/* prefers-reduced-motion : pas d animation de zoom + autoplay paused via vidéo */
@media (prefers-reduced-motion: reduce) {
  .hero-video { animation: none; }
  .hero::before { animation: none; }
}

@keyframes hero-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-40px, 30px, 0) scale(1.05); }
  100% { transform: translate3d(40px, -20px, 0) scale(1.02); }
}

.hero-eyebrow {
  margin-bottom: var(--spacing-30);
}

.hero h1 {
  font-family: var(--font-saans);
  font-size: clamp(48px, 9vw, 110px);
  font-weight: var(--font-weight-light);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 var(--spacing-30);
  color: var(--color-canvas-white);
  max-width: 1100px;
}
.hero h1 .em {
  font-weight: var(--font-weight-w790);
  background: linear-gradient(135deg, var(--color-ember) 0%, var(--color-amber) 60%, var(--color-magenta) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-sub {
  max-width: 720px;
  font-size: var(--text-body-lg);
  font-weight: var(--font-weight-light);
  color: var(--color-text-primary);
  line-height: 1.4;
  margin-bottom: var(--spacing-38);
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-38);
  align-items: center;
}
.hero-logos {
  display: flex;
  align-items: center;
  gap: var(--spacing-30);
  flex-wrap: wrap;
}
.hero-logos .trust-label {
  margin-right: var(--spacing-10);
}
.hero-logos .trust-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-10);
  opacity: 0.7;
  transition: opacity 0.3s var(--ease);
}
.hero-logos .trust-logo:hover { opacity: 1; }
.hero-logos .trust-logo img {
  height: 22px;
  width: auto;
  display: block;
}
.hero-logos .trust-logo:nth-child(2) img { height: 26px; }  /* Garmin wordmark un peu plus large */
.hero-logos .trust-name {
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-w570);
  letter-spacing: 0.01em;
  color: var(--color-bone);
}

@media (max-width: 720px) {
  .hero-logos { gap: var(--spacing-20); }
  .hero-logos .trust-logo img { height: 20px; }
  .hero-logos .trust-logo:nth-child(2) img { height: 22px; }
}

/* Display number — gros nombre cinématique */
.display-num {
  font-size: clamp(96px, 18vw, var(--text-display-sm));
  font-weight: var(--font-weight-w790);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--color-canvas-white);
}

/* ============================================================
   SECTIONS
   ============================================================ */
.section {
  position: relative;
  padding: var(--spacing-150) 0;
  background: var(--color-absolute-zero);
  border-bottom: 1px solid var(--color-separator-line);
  overflow: hidden;
}
.section-alt {
  background: var(--color-base-background);
}

/* Halo cinématique en pied de section, couleur variable par section */
.section::before {
  content: "";
  position: absolute;
  left: -200px;
  right: -200px;
  bottom: -300px;
  height: 600px;
  background: radial-gradient(closest-side, var(--section-glow, rgba(255, 107, 61, 0.18)), transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  opacity: 0.7;
}
#features { --section-glow: rgba(194, 90, 58, 0.18); }    /* terre brûlée */
#basis    { --section-glow: rgba(74, 93, 60, 0.20); }     /* mousse */
#stack    { --section-glow: rgba(61, 58, 82, 0.22); }     /* ardoise */
#loop     { --section-glow: rgba(200, 154, 76, 0.18); }   /* ocre */
#status   { --section-glow: rgba(107, 142, 111, 0.16); }  /* mousse claire */

.section > .container { position: relative; z-index: 2; }

.section-head {
  display: grid;
  grid-template-columns: minmax(120px, 200px) 1fr;
  gap: var(--spacing-60);
  margin-bottom: var(--spacing-108);
  align-items: start;
}
.section-num {
  font-family: var(--font-saans);
  font-size: var(--text-heading-sm);
  font-weight: var(--font-weight-light);
  line-height: 1;
  letter-spacing: -0.025em;
  background: linear-gradient(135deg, var(--color-ember), var(--color-magenta));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
#basis .section-num  { background: linear-gradient(135deg, var(--color-magenta), var(--color-violet)); -webkit-background-clip: text; background-clip: text; }
#stack .section-num  { background: linear-gradient(135deg, var(--color-violet), var(--color-ember)); -webkit-background-clip: text; background-clip: text; }
#loop .section-num   { background: linear-gradient(135deg, var(--color-amber), var(--color-ember-deep)); -webkit-background-clip: text; background-clip: text; }
#status .section-num { background: linear-gradient(135deg, var(--color-mint), var(--color-amber)); -webkit-background-clip: text; background-clip: text; }
.section-head h2 {
  font-family: var(--font-saans);
  font-size: clamp(36px, 6vw, var(--text-heading));
  font-weight: var(--font-weight-light);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0 0 var(--spacing-30);
  color: var(--color-canvas-white);
  max-width: 900px;
}
.section-head p {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  max-width: 700px;
  line-height: 1.4;
}

@media (max-width: 720px) {
  .section-head {
    grid-template-columns: 1fr;
    gap: var(--spacing-20);
    margin-bottom: var(--spacing-60);
  }
}

/* ============================================================
   FEATURE GRID
   ============================================================ */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--spacing-20);
}
.card {
  padding: var(--spacing-30);
  background: var(--color-base-background);
  border: 1px solid var(--color-separator-line);
  border-radius: var(--radius-default);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.section-alt .card {
  background: var(--color-absolute-zero);
}
.card {
  position: relative;
  overflow: hidden;
}
.card::after {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, var(--card-glow, rgba(255, 107, 61, 0.18)), transparent 70%);
  filter: blur(20px);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
}
.card:hover::after { opacity: 1; }
.card:nth-child(1) { --card-glow: rgba(194, 90, 58, 0.22); }   /* terre */
.card:nth-child(2) { --card-glow: rgba(74, 93, 60, 0.20); }    /* mousse */
.card:nth-child(3) { --card-glow: rgba(200, 154, 76, 0.20); }  /* ocre */
.card:nth-child(4) { --card-glow: rgba(61, 58, 82, 0.20); }    /* ardoise */
.card:nth-child(5) { --card-glow: rgba(138, 111, 78, 0.20); }  /* argile */
.card:nth-child(6) { --card-glow: rgba(142, 53, 32, 0.20); }   /* terre cuite */
.card:hover {
  border-color: var(--color-iron-gray);
  transform: translateY(-2px);
}
.card-num {
  font-size: var(--text-heading-sm);
  font-weight: var(--font-weight-light);
  line-height: 1;
  letter-spacing: -0.025em;
  margin-bottom: var(--spacing-30);
  background: linear-gradient(135deg, var(--color-ember), var(--color-amber));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.95;
}
.card:nth-child(2) .card-num { background: linear-gradient(135deg, var(--color-magenta), var(--color-ember)); -webkit-background-clip: text; background-clip: text; }
.card:nth-child(3) .card-num { background: linear-gradient(135deg, var(--color-violet), var(--color-magenta)); -webkit-background-clip: text; background-clip: text; }
.card:nth-child(4) .card-num { background: linear-gradient(135deg, var(--color-amber), var(--color-ember)); -webkit-background-clip: text; background-clip: text; }
.card:nth-child(5) .card-num { background: linear-gradient(135deg, var(--color-mint), var(--color-amber)); -webkit-background-clip: text; background-clip: text; }
.card:nth-child(6) .card-num { background: linear-gradient(135deg, var(--color-ember-deep), var(--color-magenta)); -webkit-background-clip: text; background-clip: text; }
.card h3 {
  font-size: var(--text-body-lg);
  font-weight: var(--font-weight-w570);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 var(--spacing-15);
  color: var(--color-canvas-white);
}
.card p {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* ============================================================
   BASIS COLUMNS
   ============================================================ */
.basis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-20);
}
.basis-col {
  padding: var(--spacing-30);
  border: 1px solid var(--color-separator-line);
  border-radius: var(--radius-default);
  background: var(--color-absolute-zero);
}
.section-alt .basis-col {
  background: var(--color-base-background);
}
.basis-col h3 {
  font-size: var(--text-caption);
  font-weight: var(--font-weight-w570);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 var(--spacing-30);
  color: var(--color-text-secondary);
}
.basis-col li {
  padding: var(--spacing-15) 0;
  border-top: 1px solid var(--color-separator-line);
  color: var(--color-text-secondary);
  font-size: var(--text-body-sm);
  line-height: 1.5;
}
.basis-col li:first-child {
  border-top: none;
  padding-top: 0;
}
.basis-col li strong {
  display: block;
  margin-bottom: 4px;
  color: var(--color-canvas-white);
  font-weight: var(--font-weight-w570);
}

/* ============================================================
   STACK GRID
   ============================================================ */
.stack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-20);
}
.stack-card {
  padding: var(--spacing-30);
  border: 1px solid var(--color-separator-line);
  border-radius: var(--radius-default);
  background: var(--color-base-background);
}
.section-alt .stack-card {
  background: var(--color-absolute-zero);
}
.stack-card {
  position: relative;
  overflow: hidden;
}
.stack-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 40px;
  height: 3px;
  background: var(--stack-accent, var(--color-ember));
  opacity: 0.9;
}
.stack-card:nth-child(1) { --stack-accent: var(--color-ember); }
.stack-card:nth-child(2) { --stack-accent: var(--color-magenta); }
.stack-card:nth-child(3) { --stack-accent: var(--color-violet); }
.stack-card:nth-child(4) { --stack-accent: var(--color-amber); }
.stack-card:nth-child(5) { --stack-accent: var(--color-mint); }
.stack-card:nth-child(6) { --stack-accent: var(--color-ember-deep); }
.stack-card .caption {
  color: var(--stack-accent, var(--color-canvas-white));
  margin-bottom: var(--spacing-20);
  opacity: 0.95;
}
.stack-value {
  font-size: var(--text-body-lg);
  font-weight: var(--font-weight-w570);
  line-height: 1.25;
  color: var(--color-canvas-white);
  letter-spacing: -0.01em;
  margin-bottom: var(--spacing-15);
}
.stack-desc {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* ============================================================
   TIMELINE
   ============================================================ */
.timeline {
  display: grid;
  gap: var(--spacing-20);
}
.timeline li {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--spacing-60);
  padding: var(--spacing-38) var(--spacing-30);
  background: var(--color-base-background);
  border: 1px solid var(--color-separator-line);
  border-radius: var(--radius-default);
  transition: border-color 0.3s var(--ease);
}
.timeline li:hover {
  border-color: var(--color-iron-gray);
}
.tl-time {
  font-size: var(--text-heading-sm);
  font-weight: var(--font-weight-light);
  line-height: 1;
  letter-spacing: -0.025em;
  background: linear-gradient(135deg, var(--color-amber), var(--color-ember-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  align-self: start;
}
.timeline li:nth-child(1) .tl-time { background: linear-gradient(135deg, var(--color-amber), var(--color-ember)); -webkit-background-clip: text; background-clip: text; }
.timeline li:nth-child(2) .tl-time { background: linear-gradient(135deg, var(--color-ember), var(--color-magenta)); -webkit-background-clip: text; background-clip: text; }
.timeline li:nth-child(3) .tl-time { background: linear-gradient(135deg, var(--color-magenta), var(--color-violet)); -webkit-background-clip: text; background-clip: text; }
.timeline li:nth-child(4) .tl-time { background: linear-gradient(135deg, var(--color-violet), var(--color-amber)); -webkit-background-clip: text; background-clip: text; }
.tl-body strong {
  display: block;
  font-size: var(--text-body-lg);
  font-weight: var(--font-weight-w570);
  margin-bottom: var(--spacing-10);
  color: var(--color-canvas-white);
}
.tl-body p {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

@media (max-width: 720px) {
  .timeline li {
    grid-template-columns: 1fr;
    gap: var(--spacing-15);
  }
  .tl-time { font-size: 47px; }
}

/* ============================================================
   STATUS
   ============================================================ */
.status-box {
  border: 1px solid var(--color-separator-line);
  border-radius: var(--radius-default);
  overflow: hidden;
}
.status-row {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--spacing-20);
  padding: var(--spacing-38) var(--spacing-30);
  border-bottom: 1px solid var(--color-separator-line);
  background: var(--color-absolute-zero);
}
.section-alt .status-row { background: var(--color-base-background); }
.status-row:last-child { border-bottom: none; }
.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 10px;
  background: var(--color-canvas-white);
}
.status-dot.live {
  background: var(--color-moss);
  box-shadow: 0 0 0 4px rgba(74, 93, 60, 0.30), 0 0 16px rgba(107, 142, 111, 0.55);
  animation: pulse-live 2.6s ease-in-out infinite;
}
.status-dot.build {
  background: var(--color-amber);
  box-shadow: 0 0 0 4px rgba(200, 154, 76, 0.25);
}
.status-dot.todo {
  background: var(--color-clay);
  box-shadow: 0 0 0 4px rgba(138, 111, 78, 0.20);
}
@keyframes pulse-live {
  0%, 100% { box-shadow: 0 0 0 4px rgba(74, 93, 60, 0.30), 0 0 16px rgba(107, 142, 111, 0.45); }
  50%      { box-shadow: 0 0 0 9px rgba(74, 93, 60, 0.0), 0 0 22px rgba(107, 142, 111, 0.75); }
}
.status-row strong {
  display: block;
  font-size: var(--text-body-lg);
  font-weight: var(--font-weight-w570);
  margin-bottom: var(--spacing-10);
  color: var(--color-canvas-white);
}
.status-row p {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  padding: var(--spacing-108) 0 var(--spacing-60);
  background: var(--color-absolute-zero);
  border-top: 1px solid var(--color-separator-line);
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-30);
  flex-wrap: wrap;
}
.footer-inner .muted {
  font-size: var(--text-body-sm);
  margin-top: var(--spacing-15);
}
.footer-links {
  display: flex;
  gap: var(--spacing-30);
  align-items: center;
}
.footer-links a {
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-w380);
  color: var(--color-text-secondary);
  letter-spacing: 0.02em;
}
.footer-links a:hover { color: var(--color-canvas-white); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 720px) {
  .container { padding: 0 var(--spacing-20); }
  .nav-inner { padding: var(--spacing-15) var(--spacing-20); }
  .nav-links { gap: var(--spacing-20); }
  .nav-links a:not(.btn-pill) { display: none; }
  .hero { padding: var(--spacing-60) 0 var(--spacing-60); }
  .section { padding: var(--spacing-60) 0; }
  .hero-meta { gap: var(--spacing-15); }
}