/* =========================================================================
   TECH TATWA — Design tokens
   Locked to master-prompt spec. Any change should be reflected on every page.
   ========================================================================= */

:root {
  /* Brand palette */
  --navy:        #1E2761;
  --navy-card:   #273572;
  --navy-deep:   #161C4A;  /* one shade darker for footer/final-CTA */
  --gold:        #F5A623;
  --gold-deep:   #C97F0E;
  --coral:       #FF6F51;
  --teal:        #0EA5A0;
  --ice:         #CADCFC;

  /* Neutrals */
  --bg:          #FFFFFF;
  --bg-tint:     #F3F6FC;
  --bg-tint-2:   #F4F6FB;
  --text:        #23283B;
  --text-muted:  #6B7280;
  --line:        #E5E9F2;

  /* Type */
  --font-serif:  'Lora', Georgia, 'Times New Roman', serif;
  --font-sans:   'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:   'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Scale (fluid) */
  --step--1: clamp(0.83rem, 0.79rem + 0.2vw, 0.94rem);
  --step-0:  clamp(1.00rem, 0.95rem + 0.25vw, 1.13rem);
  --step-1:  clamp(1.20rem, 1.13rem + 0.35vw, 1.38rem);
  --step-2:  clamp(1.44rem, 1.32rem + 0.6vw, 1.72rem);
  --step-3:  clamp(1.73rem, 1.55rem + 0.9vw, 2.15rem);
  --step-4:  clamp(2.07rem, 1.80rem + 1.35vw, 2.69rem);
  --step-5:  clamp(2.49rem, 2.10rem + 2.0vw, 3.36rem);
  --step-6:  clamp(2.99rem, 2.44rem + 2.75vw, 4.20rem);
  --step-7:  clamp(3.58rem, 2.83rem + 3.75vw, 5.25rem);
  --step-8:  clamp(4.30rem, 3.28rem + 5.1vw, 6.56rem);

  /* Radius, shadow, motion */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(30, 39, 97, 0.05), 0 1px 3px rgba(30, 39, 97, 0.06);
  --shadow-md: 0 4px 12px rgba(30, 39, 97, 0.08), 0 2px 4px rgba(30, 39, 97, 0.05);
  --shadow-lg: 0 16px 40px rgba(30, 39, 97, 0.12), 0 4px 12px rgba(30, 39, 97, 0.06);
  --shadow-gold: 0 10px 28px rgba(245, 166, 35, 0.35);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur:      280ms;
  --dur-slow: 480ms;

  /* Layout */
  --container: 1200px;
  --container-wide: 1360px;
  --gutter: clamp(20px, 4vw, 40px);
  --section-y: clamp(72px, 8vw, 128px);

  --header-h: 76px;
  --header-h-scrolled: 60px;
}

/* Reset-lite */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }
h1, h2, h3, h4, h5 { font-family: var(--font-serif); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; margin: 0; color: var(--text); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }

/* Type utilities */
.h-display { font-size: var(--step-8); font-weight: 700; line-height: 0.95; letter-spacing: -0.025em; }
.h1 { font-size: var(--step-7); }
.h2 { font-size: var(--step-5); }
.h3 { font-size: var(--step-3); }
.h4 { font-size: var(--step-2); }
.eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.eyebrow.on-dark { color: var(--gold); }
.lede { font-size: var(--step-1); color: var(--text-muted); line-height: 1.55; max-width: 62ch; }
.lede.on-dark { color: var(--ice); }
.muted { color: var(--text-muted); }
.serif { font-family: var(--font-serif); }
.mono  { font-family: var(--font-mono); }
.stat-num {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--step-8);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--gold);
}

/* Focus */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}