/* ============================================================
   base.css — Reset, variables, typography, layout helpers
   ============================================================ */

/* ---------- Reset & Variables ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:      #080c18;
  --navy2:     #0b0f1e;
  --charcoal:  #0f1624;
  --surface:   #141c2c;
  --surface2:  #1a2236;
  --border:    rgba(99,179,237,0.13);
  --teal:      #2dd4bf;
  --blue:      #38bdf8;
  --purple:    #a78bfa;
  --green:     #34d399;
  --red:       #f87171;
  --amber:     #fbbf24;
  --text:      #e2e8f0;
  --muted:     #94a3b8;
  --faint:     #475569;
  --section-alt: #0b0f1e;
  --font:      'Inter', system-ui, sans-serif;
  --mono:      'JetBrains Mono', 'Fira Code', monospace;
  --radius:    12px;
  --radius-lg: 20px;
  --glow:      0 0 30px rgba(45,212,191,0.18);
  --glow-lg:   0 0 60px rgba(45,212,191,0.15);
}

/* Light theme removed — dark only */

html { scroll-behavior: smooth; }

body {
  background: var(--navy);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
  transition: background 0.3s, color 0.3s;
}

.noise-overlay {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

h1, h2, h3, h4, h5 { line-height: 1.2; font-weight: 700; }
h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); letter-spacing: -1.5px; }
h2 { font-size: clamp(1.7rem, 4vw, 2.8rem); letter-spacing: -0.5px; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1rem; font-weight: 600; }
h5 { font-size: 0.9rem; font-weight: 600; color: var(--text); margin-bottom: 4px; }
p  { color: var(--muted); }
code {
  font-family: var(--mono); font-size: 0.85em;
  background: rgba(45,212,191,0.08); border-radius: 4px;
  padding: 1px 5px; color: var(--teal);
}
em { font-style: italic; color: var(--text); }

.gradient-text {
  background: linear-gradient(135deg, var(--teal) 0%, var(--blue) 50%, var(--purple) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

a { color: var(--teal); text-decoration: none; transition: opacity 0.2s; }
a:hover { opacity: 0.8; }

.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
section { padding: 100px 0; }
.alt-bg { background: var(--navy2); }

.section-label {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 3px;
  text-transform: uppercase; color: var(--teal); margin-bottom: 12px;
  display: block;
}
.section-title  { margin-bottom: 16px; }
.section-desc   { color: var(--muted); max-width: 620px; margin-bottom: 56px; font-size: 1.05rem; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.65s ease, transform 0.65s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}