/* ============================================
   BASE: Reset, CSS Variables, Typography, Layout
   ============================================ */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--deep-black);
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }

:root {
  --neon: #00F0FF;
  --neon-rgb: 0, 240, 255;
  --neon-60: rgba(0, 240, 255, 0.6);
  --neon-20: rgba(0, 240, 255, 0.2);
  --neon-10: rgba(0, 240, 255, 0.1);
  --deep-black: #020a0f;
  --dark-navy: #041319;
  --mid-navy: #082028;
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.7);
  --text-muted: rgba(255, 255, 255, 0.5);

  --glow-neon: 0 0 20px rgba(0,240,255,0.3), 0 0 60px rgba(0,240,255,0.1);
  --glow-neon-strong: 0 0 20px rgba(0,240,255,0.5), 0 0 80px rgba(0,240,255,0.2);
  --shadow-card: 0 4px 24px rgba(0,0,0,0.4);

  --space-xs: 4px;
  --space-sm: 8px;
  --space-2sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-section: 56px;

  --font-heading: 'Lato', sans-serif;
  --font-body: 'Roboto', sans-serif;

  /* Type scale — 6 steps, ratio ~1.2 */
  --fs-micro: 0.75rem;     /* 12 */
  --fs-sm:    0.875rem;    /* 14 */
  --fs-base:  1rem;        /* 16 */
  --fs-md:    1.125rem;    /* 18 */
  --fs-lg:    1.25rem;     /* 20 */
  --fs-xl:    1.5rem;      /* 24 */

  /* Line-height — 3 steps */
  --lh-tight: 1.15;
  --lh-body:  1.5;
  --lh-loose: 1.7;

  /* Letter-spacing — 5 tokens */
  --ls-tighter: -1px;
  --ls-tight:   -0.5px;
  --ls-normal:  0;
  --ls-wide:    1.5px;
  --ls-widest:  3px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.1;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.section {
  position: relative;
  width: 100%;
}

.section-eyebrow {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--neon);
  margin-bottom: var(--space-md);
}

.section-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--text-primary);
  margin-bottom: var(--space-2xl);
}

::selection {
  background: var(--neon);
  color: var(--deep-black);
}