/* ─── RESET & BASE ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #0a0c0f;
  --bg2:       #0f1318;
  --bg3:       #161c24;
  --border:    #1e2733;
  --accent:    #76b900;
  --accent2:   #5a8f00;
  --text:      #e2e8f0;
  --text2:     #8b98a9;
  --text3:     #7a8fa3;
  --font:      'Inter', system-ui, sans-serif;
  --mono:      'JetBrains Mono', monospace;
  --radius:    12px;
  --radius-sm: 6px;
  --transition: 0.2s ease;
  --shadow:    0 4px 24px rgba(0,0,0,0.4);
  --glow:      0 0 40px rgba(118,185,0,0.08);
}

/* ─── LIGHT MODE ────────────────────────────────────────── */
[data-theme="light"] {
  --bg:        #f5f7fa;
  --bg2:       #edf0f4;
  --bg3:       #e2e7ee;
  --border:    #ccd3dd;
  --accent:    #4a7800;
  --accent2:   #3a6000;
  --text:      #111827;
  --text2:     #4b5563;
  --text3:     #575f6b;
  --shadow:    0 4px 24px rgba(0,0,0,0.1);
  --glow:      0 0 40px rgba(90,143,0,0.12);
}

html { scroll-behavior: smooth; font-size: 16px; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.7;
  overflow-x: hidden;
  transition: background 0.3s ease, color 0.3s ease;
}

a { color: inherit; text-decoration: none; }
strong { color: var(--text); font-weight: 600; }

/* ─── SCROLLBAR ────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--bg3); border-radius: 3px; }

/* ─── SECTIONS ─────────────────────────────────────────── */
section { padding: 6rem 2rem; }
section:nth-child(even) { background: var(--bg2); }

.container {
  max-width: 1100px; margin: 0 auto;
}
.section-title {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 700; letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
}
.section-title::after {
  content: '';
  display: block; width: 48px; height: 3px;
  background: var(--accent); margin-top: 0.5rem;
  border-radius: 2px;
}
.section-sub {
  color: var(--text2); font-size: 1.05rem;
  margin-bottom: 3rem; max-width: 600px;
}