/* =========================================================
   Direction A — THE MEDICAL INSTRUMENT
   Base: reset, tokens, typography
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
button { background: none; border: 0; cursor: pointer; }

:root {
  /* Palette — Clinical Precision */
  --bg-midnight: #0B1220;
  --bg-elevated: #131B2E;
  --bg-elevated-2: #1A2238;
  --precision-blue: #2D6BFF;
  --precision-blue-hover: #4A82FF;
  --scan-cyan: #4FD1E0;
  --credential-gold: #C9A961;
  --ink: #0F172A;
  --muted: #64748B;
  --light: #F5F6F8;
  --white: #ffffff;
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.16);

  /* Type */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* Spacing */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  --container: 1240px;
  --radius: 10px;
  --radius-lg: 18px;

  --shadow-lg: 0 30px 60px -20px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body {
  font-family: var(--font-body);
  background: var(--bg-midnight);
  color: var(--light);
  font-size: 17px;
  line-height: 1.6;
  font-feature-settings: "ss01","cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Typography */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--white);
}
h1 { font-size: clamp(2.4rem, 6vw, 5.25rem); font-weight: 350; }
h2 { font-size: clamp(2rem, 4.5vw, 3.6rem); font-weight: 400; }
h3 { font-size: clamp(1.4rem, 2.4vw, 1.95rem); font-weight: 450; }
h4 { font-size: 1.15rem; font-weight: 500; font-family: var(--font-body); letter-spacing: -0.01em; }

p { color: rgba(245,246,248,0.78); max-width: 62ch; }
.lead { font-size: 1.2rem; color: rgba(245,246,248,0.88); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--scan-cyan);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.eyebrow::before {
  content: "";
  width: 24px; height: 1px;
  background: var(--scan-cyan);
  display: inline-block;
}

.mono { font-family: var(--font-mono); }
.num  { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Selection + focus */
::selection { background: var(--precision-blue); color: #fff; }
:focus-visible { outline: 2px solid var(--scan-cyan); outline-offset: 3px; border-radius: 4px; }

/* Light section inversions */
.section--light {
  background: var(--light);
  color: var(--ink);
}
.section--light h1,
.section--light h2,
.section--light h3,
.section--light h4 { color: var(--ink); }
.section--light p { color: #2A3446; }

/* Noise overlay utility */
.noise::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.3  0 0 0 0 0.8  0 0 0 0 0.9  0 0 0 0.07 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  opacity: 0.6;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  html { scroll-behavior: auto; }
  .marquee__track { animation: none !important; }
  .nb-placeholder::after { animation: none !important; }
}

/* Content is always visible by default.
   GSAP uses fromTo() so it briefly sets start state then animates to visible. */