/* ═══════════════════════════════════════════════════
   Design Tokens — Executive Dark Theme
═══════════════════════════════════════════════════ */
:root {
  /* Core palette */
  --clr-bg:           #0a0f1c;
  --clr-bg-alt:        #0d1424;
  --clr-panel:         #111a2e;
  --clr-panel-alt:     #15213a;
  --clr-border:        rgba(255,255,255,0.08);
  --clr-border-strong: rgba(255,255,255,0.14);

  --clr-accent:        #2dd4bf;
  --clr-accent-strong:  #14b8a6;
  --clr-accent-soft:    rgba(45,212,191,0.12);
  --clr-blue:          #38bdf8;
  --clr-blue-soft:      rgba(56,189,248,0.12);

  --clr-text:          #f1f5f9;
  --clr-text-dim:       #cbd5e1;
  --clr-muted:         #8b97ad;
  --clr-faint:         #5b6880;

  /* Typography */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing (8-point grid) */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 40px;
  --sp-6: 48px;
  --sp-8: 64px;
  --sp-10: 80px;
  --sp-12: 96px;

  /* Shape */
  --r-sm:   8px;
  --r:      12px;
  --r-lg:   20px;
  --r-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.2);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.45), 0 4px 16px rgba(0,0,0,0.25);
  --shadow-glow: 0 0 0 1px rgba(45,212,191,0.25), 0 8px 32px rgba(45,212,191,0.12);

  /* Motion */
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --dur:      0.3s;
  --dur-slow: 0.6s;
}


/* ═══════════════════════════════════════════════════
   Reset
═══════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  background: var(--clr-bg);
  color: var(--clr-text-dim);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

ul, ol  { list-style: none; }
a       { color: inherit; text-decoration: none; }
button  { background: none; border: none; cursor: pointer; font-family: inherit; }
img, svg { display: block; max-width: 100%; }
strong  { color: var(--clr-text); font-weight: 700; }

h1, h2, h3, h4 { color: var(--clr-text); }


/* ═══════════════════════════════════════════════════
   Section Typography
═══════════════════════════════════════════════════ */
.eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clr-accent);
  margin-bottom: var(--sp-1);
}

.section-title {
  font-size: clamp(1.65rem, 4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--clr-text);
  margin-bottom: var(--sp-3);
}

.section-sub {
  font-size: 1.05rem;
  color: var(--clr-muted);
  line-height: 1.7;
  max-width: 680px;
  margin-bottom: var(--sp-6);
}

.section-head {
  margin-bottom: var(--sp-6);
}


/* ═══════════════════════════════════════════════════
   Accessibility & Focus
═══════════════════════════════════════════════════ */
:focus-visible {
  outline: 2px solid var(--clr-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}