/* LeetCamp styles, built up day by day */

/* ---------- 1. Design tokens ---------- */

:root {
  --bg: #0f0d1a;
  --surface: #14111f;
  --surface-2: #181525;
  --border: #2a2640;
  --text: #ece9ff;
  --muted: #9893b8;
  --accent: #b88cff;
  --g1: #7c83e8;
  --g2: #c77dd0;
  --g3: #f0699f;
  --gradient: linear-gradient(90deg, var(--g1), var(--g2), var(--g3));
  --radius: 14px;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- 2. Reset & base ---------- */

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

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

.gradient-text {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.eyebrow::before { content: "// "; opacity: 0.6; }

.section-title {
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 8px 0 14px;
}

.section-lead { color: var(--muted); max-width: 680px; font-size: 1.05rem; }

/* ---------- 4. Tools showcase (pure-CSS tabs) ---------- */

.showcase { padding: 80px 0 90px; }

.showcase-head { margin-bottom: 36px; }

/* ---------- 5. How we do it ---------- */

.how { padding: 80px 0 90px; border-top: 1px solid var(--border); background: linear-gradient(180deg, var(--bg), #0c0a15); }

.how-head { margin-bottom: 40px; }

.card {
  position: relative;
  padding: 28px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: transform 0.2s, border-color 0.2s;
}

/* ---------- 7. Footer ---------- */

.footer { border-top: 1px solid var(--border); background: #0b0914; padding: 56px 0 28px; }