/* ============================================================================
 * Sinh Vũ Cockpit Design System v2.0 — Premium Studio Grade
 * ----------------------------------------------------------------------------
 * Layers:  0. Tokens  ·  1. Reset  ·  2. Base  ·  3. Layout  ·  4. Components
 *          5. Motion  ·  6. Responsive  ·  7. A11y  ·  8. Utils
 *
 * Standards:
 *   - Modular type scale 1.250 (Major Third) + fluid clamp()
 *   - 4pt spacing grid (rigid)
 *   - Motion tokens: 5 durations × 5 easings (named)
 *   - WCAG 2.2 AAA contrast + focus-visible
 *   - Container queries (modern 2025)
 *   - prefers-reduced-motion respected
 *
 * Font: Noto Serif Display (display) · Noto Sans (UI) · Noto Sans Mono (data)
 * Brand: Cam #F47521 · Navy #1F2A44
 * ============================================================================ */

/* ════════════════════════════════════════════════════════════════════════════
 * LAYER 0 · TOKENS
 * ════════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── COLOR · BRAND ──────────────────────────────────────────── */
  /* Orange ramp 50→900 (saturation tuned for design studio premium) */
  --c-orange-50:  #FFF7ED;
  --c-orange-100: #FFEDD5;
  --c-orange-200: #FED7AA;
  --c-orange-300: #FDBA74;
  --c-orange-400: #FB9A3C;
  --c-orange-500: #F47521;  /* ★ brand primary */
  --c-orange-600: #DB5C11;
  --c-orange-700: #B85918;
  --c-orange-800: #8F3F12;
  --c-orange-900: #6B2F0F;

  /* Navy ramp (deep, sophisticated) */
  --c-navy-50:  #F4F5F8;
  --c-navy-100: #E5E8EF;
  --c-navy-200: #C9CFDC;
  --c-navy-300: #9BA5BB;
  --c-navy-400: #6B7691;
  --c-navy-500: #4F5A75;  /* slate body text */
  --c-navy-600: #364260;
  --c-navy-700: #1F2A44;  /* ★ brand secondary, headlines */
  --c-navy-800: #131A2C;
  --c-navy-900: #0A0E1A;

  /* Neutrals (warm paper, not cold) */
  --c-paper:        #FCFCFA;  /* page bg */
  --c-paper-card:   #FFFFFF;  /* card bg */
  --c-paper-sunk:   #F4F5F7;  /* subtle bg */
  --c-paper-cream:  #FFF8E6;  /* hover accent */
  --c-line:         #E8E5DE;  /* default border */
  --c-line-strong:  #D6D2C8;  /* emphasis border */

  /* Semantic */
  --c-success-50:  #E8F5EE;
  --c-success-500: #2D7D5F;
  --c-success-700: #1F5C44;
  --c-warning-50:  #FFF4E5;
  --c-warning-500: #B85918;
  --c-danger-50:   #FBE9EC;
  --c-danger-500:  #B23A48;

  /* Semantic aliases (for readability in components) */
  --c-text:        var(--c-navy-700);   /* default body text */
  --c-text-muted:  var(--c-navy-500);   /* secondary */
  --c-text-faint:  var(--c-navy-400);   /* tertiary, captions */
  --c-text-on-dark: #FFFFFF;
  --c-accent:      var(--c-orange-500);
  --c-accent-hover: var(--c-orange-600);

  /* ── TYPOGRAPHY ─────────────────────────────────────────────── */
  --f-display: 'Noto Serif Display', 'Noto Serif', Georgia, serif;
  --f-sans: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --f-mono: 'Noto Sans Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Modular scale 1.250 (Major Third). Base 16px = 1rem.
   * Fluid range: min for mobile, max for large screens. */
  --t-xs:    clamp(0.75rem,  0.71rem + 0.18vw, 0.875rem);  /* 12 → 14 */
  --t-sm:    clamp(0.875rem, 0.83rem + 0.21vw, 1rem);      /* 14 → 16 */
  --t-base:  clamp(1rem,     0.94rem + 0.26vw, 1.125rem);  /* 16 → 18 */
  --t-md:    clamp(1.125rem, 1.05rem + 0.36vw, 1.25rem);   /* 18 → 20 */
  --t-lg:    clamp(1.25rem,  1.13rem + 0.55vw, 1.5625rem); /* 20 → 25 */
  --t-xl:    clamp(1.5625rem,1.36rem + 0.95vw, 1.953rem);  /* 25 → 31 */
  --t-2xl:   clamp(1.953rem, 1.65rem + 1.42vw, 2.441rem);  /* 31 → 39 */
  --t-3xl:   clamp(2.441rem, 1.98rem + 2.16vw, 3.052rem);  /* 39 → 49 */
  --t-4xl:   clamp(3.052rem, 2.36rem + 3.24vw, 3.815rem);  /* 49 → 61 */
  --t-5xl:   clamp(3.815rem, 2.78rem + 4.84vw, 4.768rem);  /* 61 → 76 */
  --t-display: clamp(3.815rem, 2.5rem + 6.15vw, 5.96rem);  /* 61 → 95 hero only */

  /* Line-heights (rigorous) */
  --lh-tight:    1;       /* display */
  --lh-snug:     1.1;     /* h1-h3 */
  --lh-normal:   1.3;     /* h4-h6 */
  --lh-relaxed:  1.5;     /* UI text */
  --lh-loose:    1.65;    /* body prose */
  --lh-prose:    1.75;    /* long-form reading */

  /* Letter-spacing (tighter for big sizes, looser for small caps) */
  --ls-tight:    -0.03em;   /* display */
  --ls-snug:     -0.02em;   /* h1-h2 */
  --ls-normal:   -0.005em;  /* body */
  --ls-wide:     0.04em;    /* meta */
  --ls-wider:    0.12em;    /* eyebrow */
  --ls-widest:   0.18em;    /* badge/label */

  /* Font weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold: 800;
  --fw-black:    900;

  /* ── SPACING · 4pt grid ─────────────────────────────────────── */
  --s-0:   0;
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   24px;
  --s-6:   32px;
  --s-7:   48px;
  --s-8:   64px;
  --s-9:   96px;
  --s-10:  128px;
  --s-11:  192px;

  /* ── RADII ──────────────────────────────────────────────────── */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-2xl:  24px;
  --r-full: 9999px;

  /* ── SHADOWS · light-direction consistent (top-down) ────────── */
  --shadow-xs:   0 1px 2px rgba(19, 26, 44, 0.04);
  --shadow-sm:   0 2px 4px rgba(19, 26, 44, 0.05), 0 1px 2px rgba(19, 26, 44, 0.03);
  --shadow-md:   0 4px 12px rgba(19, 26, 44, 0.07), 0 2px 4px rgba(19, 26, 44, 0.04);
  --shadow-lg:   0 12px 32px rgba(19, 26, 44, 0.10), 0 4px 8px rgba(19, 26, 44, 0.05);
  --shadow-xl:   0 24px 64px rgba(19, 26, 44, 0.14), 0 8px 16px rgba(19, 26, 44, 0.06);
  --shadow-2xl:  0 40px 96px rgba(19, 26, 44, 0.18);
  --shadow-glow: 0 0 0 4px rgba(244, 117, 33, 0.18);  /* focus ring */

  /* ── MOTION · durations ─────────────────────────────────────── */
  --d-instant: 80ms;    /* button press, immediate feedback */
  --d-fast:    150ms;   /* hover, color change */
  --d-base:    240ms;   /* cards, panels, links */
  --d-slow:    400ms;   /* drawers, modals */
  --d-lazy:    640ms;   /* hero entrance, page transition */

  /* ── MOTION · easings (premium spring curves) ───────────────── */
  --e-out:      cubic-bezier(0.16, 1, 0.3, 1);       /* premium spring */
  --e-in:       cubic-bezier(0.7, 0, 0.84, 0);
  --e-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --e-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);   /* subtle overshoot */
  --e-linear:   linear;

  /* ── LAYOUT ─────────────────────────────────────────────────── */
  --max-content: 1240px;
  --max-prose:   720px;
  --max-narrow:  560px;
  --max-hero:    1080px;

  --bp-sm:  640px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1536px;

  /* ── Z-INDEX scale ──────────────────────────────────────────── */
  --z-base:   0;
  --z-card:   10;
  --z-sticky: 100;
  --z-modal:  1000;
  --z-toast:  2000;
}

/* ════════════════════════════════════════════════════════════════════════════
 * LAYER 1 · RESET
 * ════════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  hanging-punctuation: first allow-end last;
  tab-size: 4;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
img, picture, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

/* ════════════════════════════════════════════════════════════════════════════
 * LAYER 2 · BASE
 * ════════════════════════════════════════════════════════════════════════════ */

body {
  font-family: var(--f-sans);
  font-size: var(--t-sm);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-normal);
  color: var(--c-text);
  background: var(--c-paper);
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern', 'liga', 'calt';
}

::selection { background: var(--c-orange-200); color: var(--c-navy-900); }

/* ════════════════════════════════════════════════════════════════════════════
 * LAYER 3 · LAYOUT
 * ════════════════════════════════════════════════════════════════════════════ */

.container {
  width: 100%;
  max-width: var(--max-content);
  margin-inline: auto;
  padding-inline: clamp(var(--s-4), 4vw, var(--s-6));
}
.container-narrow { max-width: var(--max-prose); }

.section { padding-block: clamp(var(--s-7), 8vw, var(--s-9)); }
.section-sm { padding-block: clamp(var(--s-6), 5vw, var(--s-7)); }
.section-lg { padding-block: clamp(var(--s-8), 10vw, var(--s-10)); }

.surface {
  background: var(--c-paper-sunk);
  border-radius: var(--r-2xl);
  padding: clamp(var(--s-6), 6vw, var(--s-8));
}

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.flex-wrap { flex-wrap: wrap; }
.gap-2 { gap: var(--s-2); }
.gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); }
.gap-5 { gap: var(--s-5); }
.gap-6 { gap: var(--s-6); }

.grid { display: grid; gap: var(--s-5); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* ════════════════════════════════════════════════════════════════════════════
 * LAYER 4 · TYPOGRAPHY (semantic + utility)
 * ════════════════════════════════════════════════════════════════════════════ */

.h-display {
  font-family: var(--f-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-snug);
  color: var(--c-navy-700);
  text-wrap: balance;
}
.h-display em {
  color: var(--c-orange-500);
  font-style: italic;
  font-weight: inherit;
}

.h-display-hero {
  font-family: var(--f-display);
  font-size: var(--t-display);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  color: var(--c-navy-700);
  text-wrap: balance;
}
.h-display-hero em {
  color: var(--c-orange-500);
  font-style: italic;
  font-weight: inherit;
}

.h1 { font-size: var(--t-4xl); font-weight: var(--fw-extrabold); letter-spacing: var(--ls-tight); }
.h2 { font-size: var(--t-3xl); font-weight: var(--fw-bold);      letter-spacing: var(--ls-snug); }
.h3 { font-size: var(--t-2xl); font-weight: var(--fw-bold);      letter-spacing: var(--ls-snug); }
.h4 { font-size: var(--t-xl);  font-weight: var(--fw-semibold);  letter-spacing: var(--ls-normal); }
.h5 { font-size: var(--t-lg);  font-weight: var(--fw-semibold);  letter-spacing: var(--ls-normal); }
.h6 { font-size: var(--t-md);  font-weight: var(--fw-semibold);  letter-spacing: var(--ls-normal); }

.eyebrow {
  display: inline-block;
  font-family: var(--f-sans);
  font-size: var(--t-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--c-orange-500);
}

.lede {
  font-size: var(--t-md);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  color: var(--c-text-muted);
  text-wrap: balance;
  max-width: var(--max-prose);
}

.meta {
  font-family: var(--f-sans);
  font-size: var(--t-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-faint);
}

.mono { font-family: var(--f-mono); font-size: 0.9em; }

/* Link with elegant underline animation */
.link {
  color: var(--c-orange-500);
  position: relative;
  font-weight: var(--fw-medium);
}
.link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: right;
  transition: transform var(--d-base) var(--e-out);
}
.link:hover::after {
  transform-origin: left;
  transform: scaleX(1);
}
.link:not(:hover)::after {
  animation: underline-out var(--d-base) var(--e-out);
}
@keyframes underline-out {
  from { transform: scaleX(1); transform-origin: right; }
  to { transform: scaleX(0); transform-origin: right; }
}

/* ════════════════════════════════════════════════════════════════════════════
 * LAYER 5 · COMPONENTS
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── HEADER (sticky, blur) ──────────────────────────────────── */
.sv-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--c-paper) 88%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--c-line);
  transition: background var(--d-base) var(--e-out), border-color var(--d-base) var(--e-out);
}
.sv-header-inner {
  max-width: var(--max-content);
  margin-inline: auto;
  padding: var(--s-4) clamp(var(--s-4), 4vw, var(--s-6));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}
.sv-brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  transition: opacity var(--d-fast) var(--e-out);
}
.sv-brand:hover { opacity: 0.7; }
.sv-brand-mark { width: 32px; height: 32px; flex-shrink: 0; }
.sv-brand-text {
  font-family: var(--f-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--t-sm);
  color: var(--c-navy-700);
  line-height: 1.2;
}
.sv-brand-eyebrow {
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-orange-500);
  line-height: 1.2;
  margin-top: 2px;
}

/* ── NAV (smart, role-aware) ────────────────────────────────── */
.sv-nav {
  display: flex;
  gap: var(--s-5);
  flex-wrap: wrap;
  align-items: center;
}
.sv-nav a {
  font-family: var(--f-sans);
  font-size: var(--t-xs);
  font-weight: var(--fw-medium);
  color: var(--c-text-muted);
  padding: var(--s-2) 0;
  position: relative;
  letter-spacing: var(--ls-normal);
  transition: color var(--d-fast) var(--e-out);
}
.sv-nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--c-orange-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-base) var(--e-out);
}
.sv-nav a:hover { color: var(--c-navy-700); }
.sv-nav a:hover::after { transform: scaleX(0.4); }
.sv-nav a.active {
  color: var(--c-orange-500);
  font-weight: var(--fw-semibold);
}
.sv-nav a.active::after { transform: scaleX(1); }
.sv-nav-divider {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: var(--c-line-strong);
}
.sv-nav-action { color: var(--c-text-faint) !important; }
.sv-admin-pill {
  display: inline-block;
  color: var(--c-success-500);
  font-size: 8px;
  vertical-align: middle;
  margin-left: 4px;
  line-height: 1;
}

/* ── HERO ───────────────────────────────────────────────────── */
.hero {
  padding-block: clamp(var(--s-7), 10vw, var(--s-10)) clamp(var(--s-6), 8vw, var(--s-8));
}
.hero > * + * { margin-top: var(--s-5); }
.hero .eyebrow + .h-display-hero,
.hero .eyebrow + .h-display { margin-top: var(--s-4); }

/* ── CARD (premium hover with depth) ────────────────────────── */
.card {
  background: var(--c-paper-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  transition:
    transform var(--d-base) var(--e-out),
    border-color var(--d-base) var(--e-out),
    box-shadow var(--d-base) var(--e-out),
    background var(--d-base) var(--e-out);
  position: relative;
  overflow: hidden;
}
.card.interactive {
  cursor: pointer;
}
.card.interactive::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 60%, var(--c-orange-50));
  opacity: 0;
  transition: opacity var(--d-base) var(--e-out);
  pointer-events: none;
}
.card.interactive:hover {
  transform: translateY(-4px);
  border-color: var(--c-orange-300);
  box-shadow: var(--shadow-lg);
}
.card.interactive:hover::before { opacity: 1; }
.card.interactive:active { transform: translateY(-2px); transition-duration: var(--d-instant); }

.card-eyebrow {
  display: inline-block;
  font-family: var(--f-sans);
  font-size: var(--t-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-orange-500);
  margin-bottom: var(--s-2);
}
.card h3, .card .card-title {
  font-family: var(--f-display);
  font-size: var(--t-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--c-navy-700);
  margin-bottom: var(--s-3);
}
.card p {
  font-size: var(--t-sm);
  line-height: var(--lh-loose);
  color: var(--c-text-muted);
  margin-bottom: var(--s-4);
}
.card-link {
  font-family: var(--f-sans);
  font-size: var(--t-xs);
  font-weight: var(--fw-semibold);
  color: var(--c-orange-500);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.card-link::after {
  content: '→';
  display: inline-block;
  transition: transform var(--d-base) var(--e-out);
}
.card.interactive:hover .card-link::after { transform: translateX(6px); }

/* ── STAT ───────────────────────────────────────────────────── */
.stat {
  padding: var(--s-5);
  background: var(--c-paper-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  transition: transform var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
}
.stat:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.stat-value {
  font-family: var(--f-display);
  font-size: var(--t-2xl);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-tight);
  color: var(--c-navy-700);
}
.stat-value em {
  color: var(--c-orange-500);
  font-style: italic;
  font-weight: inherit;
}
.stat-label {
  font-size: var(--t-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-text-faint);
  margin-top: var(--s-2);
}
.stat-trend {
  font-size: var(--t-xs);
  color: var(--c-success-500);
  margin-top: var(--s-1);
}

/* ── BADGE ──────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-family: var(--f-sans);
  font-size: var(--t-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  padding: 4px var(--s-3);
  border-radius: var(--r-full);
  line-height: 1.4;
}
.badge-live    { background: var(--c-success-50); color: var(--c-success-700); }
.badge-progress { background: var(--c-warning-50); color: var(--c-warning-500); }
.badge-draft   { background: var(--c-paper-sunk); color: var(--c-text-muted); }

/* ── BUTTON ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 12px var(--s-5);
  border-radius: var(--r-md);
  font-family: var(--f-sans);
  font-size: var(--t-sm);
  font-weight: var(--fw-medium);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background var(--d-fast) var(--e-out),
    color var(--d-fast) var(--e-out),
    border-color var(--d-fast) var(--e-out),
    transform var(--d-instant) var(--e-out),
    box-shadow var(--d-base) var(--e-out);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--c-navy-700);
  color: var(--c-text-on-dark);
  border-color: var(--c-navy-700);
}
.btn-primary:hover {
  background: var(--c-orange-500);
  border-color: var(--c-orange-500);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background: var(--c-paper-card);
  color: var(--c-navy-700);
  border-color: var(--c-line-strong);
}
.btn-secondary:hover {
  border-color: var(--c-orange-500);
  color: var(--c-orange-500);
  box-shadow: var(--shadow-sm);
}

.btn-ghost {
  background: transparent;
  color: var(--c-text-muted);
}
.btn-ghost:hover { color: var(--c-navy-700); background: var(--c-paper-sunk); }

/* ── CALLOUT ────────────────────────────────────────────────── */
.callout {
  background: var(--c-orange-50);
  border-left: 3px solid var(--c-orange-500);
  padding: var(--s-5) var(--s-5);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  margin-block: var(--s-5);
}
.callout-label {
  font-family: var(--f-sans);
  font-size: var(--t-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-orange-700);
  margin-bottom: var(--s-2);
}
.callout p { margin: 0; font-size: var(--t-sm); line-height: var(--lh-loose); color: var(--c-navy-700); }

/* ── TABLE ──────────────────────────────────────────────────── */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
  margin-block: var(--s-4);
}
.table th {
  font-family: var(--f-sans);
  font-size: var(--t-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-text-faint);
  padding: var(--s-3);
  text-align: left;
  border-bottom: 2px solid var(--c-line-strong);
}
.table td {
  padding: var(--s-3);
  border-bottom: 1px solid var(--c-line);
  vertical-align: top;
  color: var(--c-navy-700);
}
.table td code, .table td .mono {
  background: var(--c-paper-sunk);
  padding: 2px 6px;
  border-radius: var(--r-xs);
  font-family: var(--f-mono);
  font-size: 0.875em;
  color: var(--c-orange-700);
}
.table tbody tr {
  transition: background var(--d-fast) var(--e-out);
}
.table tbody tr:hover { background: var(--c-paper-sunk); }

/* ── PROSE ──────────────────────────────────────────────────── */
.prose { max-width: var(--max-prose); }
.prose h2 {
  font-family: var(--f-display);
  font-size: var(--t-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  margin-top: var(--s-7);
  margin-bottom: var(--s-3);
  color: var(--c-navy-700);
  line-height: var(--lh-snug);
}
.prose h2 em { color: var(--c-orange-500); font-style: italic; font-weight: inherit; }
.prose h3 {
  font-family: var(--f-sans);
  font-size: var(--t-md);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-normal);
  color: var(--c-navy-700);
  margin-top: var(--s-6);
  margin-bottom: var(--s-2);
}
.prose p {
  font-size: var(--t-sm);
  line-height: var(--lh-prose);
  color: var(--c-navy-700);
  margin-bottom: var(--s-4);
}
.prose ul, .prose ol {
  font-size: var(--t-sm);
  line-height: var(--lh-prose);
  color: var(--c-navy-700);
  margin-bottom: var(--s-4);
  padding-left: var(--s-5);
  list-style: disc outside;
}
.prose ol { list-style: decimal outside; }
.prose li { margin-bottom: var(--s-1); }
.prose li::marker { color: var(--c-orange-500); }
.prose li strong { color: var(--c-orange-700); font-weight: var(--fw-semibold); }
.prose code {
  font-family: var(--f-mono);
  font-size: 0.875em;
  background: var(--c-paper-sunk);
  padding: 2px 6px;
  border-radius: var(--r-xs);
  color: var(--c-orange-700);
}
.prose a:not(.btn) {
  color: var(--c-orange-700);
  border-bottom: 1px solid var(--c-orange-200);
  transition: border-color var(--d-fast) var(--e-out);
}
.prose a:not(.btn):hover { border-bottom-color: var(--c-orange-500); }

.prose-stack {
  background: var(--c-paper-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: var(--s-5);
  margin-block: var(--s-5);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  line-height: var(--lh-prose);
  color: var(--c-navy-700);
  white-space: pre;
  overflow-x: auto;
}

/* ── FOOTER ─────────────────────────────────────────────────── */
.sv-footer {
  border-top: 1px solid var(--c-line);
  padding: var(--s-7) var(--s-5);
  text-align: center;
  font-family: var(--f-sans);
  font-size: var(--t-xs);
  color: var(--c-text-faint);
  margin-top: var(--s-9);
}
.sv-footer p { margin-bottom: var(--s-2); }
.sv-footer a { color: var(--c-text-muted); transition: color var(--d-fast) var(--e-out); }
.sv-footer a:hover { color: var(--c-orange-500); }

/* ════════════════════════════════════════════════════════════════════════════
 * LAYER 6 · MOTION (entrance animations + scroll triggers)
 * ════════════════════════════════════════════════════════════════════════════ */

@keyframes sv-fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes sv-slideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sv-scaleIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }

/* Hero entrance: orchestrated stagger */
.hero > * {
  opacity: 0;
  animation: sv-slideUp var(--d-lazy) var(--e-out) forwards;
}
.hero > :nth-child(1) { animation-delay: 100ms; }
.hero > :nth-child(2) { animation-delay: 200ms; }
.hero > :nth-child(3) { animation-delay: 300ms; }
.hero > :nth-child(4) { animation-delay: 400ms; }
.hero > :nth-child(5) { animation-delay: 500ms; }

/* Scroll-trigger fade (handled by JS adding .in-view) */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--d-lazy) var(--e-out), transform var(--d-lazy) var(--e-out);
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--d-base) var(--e-out), transform var(--d-base) var(--e-out);
}
.reveal-stagger.in-view > * {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger.in-view > :nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.in-view > :nth-child(2) { transition-delay: 80ms; }
.reveal-stagger.in-view > :nth-child(3) { transition-delay: 160ms; }
.reveal-stagger.in-view > :nth-child(4) { transition-delay: 240ms; }
.reveal-stagger.in-view > :nth-child(5) { transition-delay: 320ms; }
.reveal-stagger.in-view > :nth-child(6) { transition-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
  .hero > *, .reveal, .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
 * LAYER 7 · A11Y
 * ════════════════════════════════════════════════════════════════════════════ */

/* Skip link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--c-navy-700);
  color: white;
  padding: var(--s-3) var(--s-5);
  z-index: var(--z-modal);
  font-family: var(--f-sans);
  font-size: var(--t-sm);
  font-weight: var(--fw-semibold);
  border-radius: 0 0 var(--r-md) 0;
  transition: top var(--d-fast) var(--e-out);
}
.skip-link:focus { top: 0; }

/* Focus visible (premium ring, only keyboard nav) */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--c-orange-500);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
.btn:focus-visible {
  outline-offset: 3px;
  box-shadow: var(--shadow-glow);
}
.card.interactive:focus-visible {
  outline-offset: 4px;
}

/* Visually hidden but accessible */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ════════════════════════════════════════════════════════════════════════════
 * LAYER 8 · CTA BAND (used in landing)
 * ════════════════════════════════════════════════════════════════════════════ */

.cta-band {
  background: linear-gradient(135deg, var(--c-navy-700), var(--c-navy-800));
  color: var(--c-text-on-dark);
  padding: clamp(var(--s-7), 8vw, var(--s-9));
  border-radius: var(--r-2xl);
  text-align: center;
  margin-block: var(--s-7);
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: '';
  position: absolute;
  inset: -50%;
  background: radial-gradient(circle at 30% 50%, rgba(244, 117, 33, 0.15), transparent 50%);
  pointer-events: none;
}
.cta-band > * { position: relative; }
.cta-band h2 {
  font-family: var(--f-display);
  font-size: var(--t-3xl);
  font-weight: var(--fw-bold);
  color: var(--c-text-on-dark);
  margin-bottom: var(--s-3);
  text-wrap: balance;
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-snug);
}
.cta-band h2 em { color: var(--c-orange-300); font-style: italic; font-weight: inherit; }
.cta-band p {
  font-size: var(--t-sm);
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: var(--s-6);
  max-width: 580px;
  margin-inline: auto;
  line-height: var(--lh-loose);
}
.cta-band .btn {
  background: var(--c-orange-500);
  color: var(--c-text-on-dark);
  border-color: var(--c-orange-500);
}
.cta-band .btn:hover { background: var(--c-orange-700); border-color: var(--c-orange-700); box-shadow: 0 8px 24px rgba(244, 117, 33, 0.3); }
.cta-band .btn-secondary {
  background: transparent;
  color: var(--c-text-on-dark);
  border-color: rgba(255, 255, 255, 0.3);
}
.cta-band .btn-secondary:hover { border-color: white; background: rgba(255, 255, 255, 0.08); color: var(--c-text-on-dark); }

/* ════════════════════════════════════════════════════════════════════════════
 * LAYER 9 · CONTAINER QUERIES (modern responsive component-level)
 * ════════════════════════════════════════════════════════════════════════════ */

@supports (container-type: inline-size) {
  .cq-grid { container-type: inline-size; container-name: grid; }

  @container grid (max-width: 600px) {
    .card h3, .card .card-title { font-size: var(--t-lg); }
    .card { padding: var(--s-4); }
  }
}

/* ════════════════════════════════════════════════════════════════════════════
 * LAYER 10 · RESPONSIVE BREAKPOINTS
 * ════════════════════════════════════════════════════════════════════════════ */

/* sm: phone landscape and up */
@media (min-width: 640px) {
  .sm\:flex { display: flex; }
}

/* md: tablet */
@media (min-width: 768px) {
}

/* mobile-first reverse: hide on small */
@media (max-width: 767px) {
  .sv-header-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-3);
    padding-block: var(--s-3);
  }
  .sv-nav { gap: var(--s-4); }
  .cta-band { padding: var(--s-6); }
}

@media (max-width: 480px) {
  .sv-nav a { font-size: 12px; }
  .hero { padding-block: var(--s-6); }
}

/* ════════════════════════════════════════════════════════════════════════════
 * LAYER 11 · UTILS (last layer, can override)
 * ════════════════════════════════════════════════════════════════════════════ */

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-orange { color: var(--c-orange-500); }
.text-navy { color: var(--c-navy-700); }
.text-muted { color: var(--c-text-muted); }
.text-faint { color: var(--c-text-faint); }
.italic { font-style: italic; }

.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--s-2); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.mt-8 { margin-top: var(--s-8); }
.mb-2 { margin-bottom: var(--s-2); }
.mb-4 { margin-bottom: var(--s-4); }
.mb-5 { margin-bottom: var(--s-5); }
.mb-6 { margin-bottom: var(--s-6); }
.mb-7 { margin-bottom: var(--s-7); }