/* ============================================================
   tokens.css — Design tokens (colours, typography scale)
   ============================================================ */

:root {
  /* Palette */
  --blue:        #00c8ff;
  --blue-dim:    rgba(0,200,255,0.12);
  --blue-glow:   rgba(0,200,255,0.22);
  --yellow:      #ffe600;
  --yellow-dim:  rgba(255,230,0,0.10);
  --yellow-glow: rgba(255,230,0,0.30);

  /* Backgrounds */
  --bg:   #09090b;
  --bg2:  #0e0f13;
  --bg3:  #13151c;
  --bg4:  #181b24;

  /* Foregrounds */
  --fg:       #eaeef3;
  --fg-muted: #5f6e7e;
  --fg-mid:   #9aaab8;

  /* Borders */
  --border:   rgba(0,200,255,0.09);
  --border-b: rgba(0,200,255,0.28);
  --border-y: rgba(255,230,0,0.25);
}

/* ── Base reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: 'DM Mono', monospace;
  font-weight: 300;
  overflow-x: hidden;
  line-height: 1;
}

/* Grain overlay */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9000; opacity: 0.3;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E");
}

/* ── Shared section primitives ── */
section { padding: 7rem 3rem; }

.section-label {
  font-size: 0.65rem; letter-spacing: 0.38em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 1rem;
  display: flex; align-items: center; gap: 0.75rem;
}
.section-label::before {
  content: ''; width: 1.5rem; height: 1px;
  background: var(--blue); display: inline-block;
}
.section-label.y { color: var(--yellow); }
.section-label.y::before { background: var(--yellow); }

.section-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.8rem, 4.5vw, 4.8rem);
  line-height: 1; letter-spacing: 0.03em; margin-bottom: 1.5rem;
}

/* ── Buttons ── */
.btn-primary {
  font-size: 0.74rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--bg); background: var(--yellow); font-weight: 500;
  padding: 0.9rem 2rem; text-decoration: none; display: inline-block;
  transition: box-shadow 0.25s, transform 0.2s;
}
.btn-primary:hover { box-shadow: 0 0 30px var(--yellow-glow); transform: translateY(-2px); }

.btn-ghost {
  font-size: 0.74rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--blue); border: 1px solid var(--border-b);
  padding: 0.9rem 2rem; text-decoration: none; display: inline-block;
  transition: background 0.2s, box-shadow 0.2s;
}
.btn-ghost:hover { background: var(--blue-dim); box-shadow: 0 0 18px var(--blue-glow); }

/* ── Scroll reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible { opacity: 1; transform: none; }