/* Design tokens */
:root {
  --bg: #061019;
  --bg-2: #091620;
  --panel: #0d1b26;
  --line: #173544;
  --text: #f5f8fb;
  --muted: #a8b6bf;
  --orange: #ff7600;
  --cyan: #26c8ff;
  --max: 1220px;
  --gutter: clamp(16px, 3vw, 40px);
  --section: clamp(72px, 9vw, 112px);
}

/* Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 15% 15%, rgba(38, 200, 255, .07), transparent 28rem),
    radial-gradient(circle at 85% 55%, rgba(255, 118, 0, .06), transparent 32rem),
    var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
  color: inherit;
}

p { line-height: 1.7; }

/* Layout helpers */
.container {
  width: min(var(--max), calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
}

/* Typography */
h1, h2, h3 { margin-top: 0; }

h2 {
  font-size: clamp(2.35rem, 5vw, 4.7rem);
  line-height: .98;
  letter-spacing: -.05em;
  margin-bottom: 24px;
}

.overline {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .22em;
  color: var(--cyan);
}

.section-number {
  font-family: ui-monospace, monospace;
  color: var(--orange);
  font-weight: 900;
  margin-bottom: 14px;
}

figure { margin: 0; }