/* ============================================================
   Connected 30 — base: reset, tokens, typography
   ============================================================ */

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

* { margin: 0; padding: 0; }

:root {
  /* Colour system (from the Red & White key visual) */
  --bg:            #0a0608;
  --bg-elev:       rgba(255, 255, 255, .03);
  --red:           #E4123B;
  --pink:          #FF5A7A;
  --maroon:        #3a0d1a;

  --text:          #F4EEF0;
  --text-muted:    rgba(244, 238, 240, .58);
  --text-faint:    rgba(244, 238, 240, .40);

  --hairline:      rgba(255, 255, 255, .10);
  --hairline-str:  rgba(255, 255, 255, .18);

  --grad-red:      linear-gradient(90deg, #E4123B, #FF5A7A);

  /* Type */
  --font-display:  'Space Grotesk', system-ui, sans-serif;
  --font-body:     'Manrope', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, monospace;

  /* Layout */
  --maxw:          1080px;
  --radius:        18px;
  --radius-lg:     24px;
}

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; }

button, input, select { font: inherit; color: inherit; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; line-height: 1.05; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--pink);
}

.container { max-width: var(--maxw); margin: 0 auto; padding-left: 28px; padding-right: 28px; }