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

    :root {
      --primary:        #1A6B3C;
      --primary-light:  #25A85A;
      --primary-dark:   #0F3D22;
      --accent:         #25D366;
      --bg:             #F5F5F5;
      --surface:        #FFFFFF;
      --text-primary:   #1A1A1A;
      --text-secondary: #757575;
      --divider:        #E0E0E0;
      --primary-tint:   #F4F8F5;
      --nav-bg:         rgba(255,255,255,0.92);
      --footer-bg:      #1A1A1A;
      --radius:         16px;
    }
    [data-theme="dark"] {
      --bg:             #111A14;
      --surface:        #1C2B20;
      --text-primary:   #F0F0F0;
      --text-secondary: #9A9A9A;
      --divider:        #2E4033;
      --primary-tint:   #1C2B20;
      --nav-bg:         rgba(17,26,20,0.92);
      --footer-bg:      #0A1210;
    }
    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) {
        --bg:             #111A14;
        --surface:        #1C2B20;
        --text-primary:   #F0F0F0;
        --text-secondary: #9A9A9A;
        --divider:        #2E4033;
        --primary-tint:   #1C2B20;
        --nav-bg:         rgba(17,26,20,0.92);
        --footer-bg:      #0A1210;
      }
    }

    html { scroll-behavior: smooth; }
    body {
      font-family: 'Inter', sans-serif;
      background: var(--bg);
      color: var(--text-primary);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    /* ── Nav ─────────────────────────────────────────────────── */
    nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      background: var(--primary);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--primary-dark);
    }
    .nav-inner {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 24px;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .nav-logo {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
    }
    .nav-logo img { width: 36px; height: 36px; border-radius: 10px; }
    .nav-logo span { font-size: 18px; font-weight: 700; color: #fff; letter-spacing: -0.3px; }
    .nav-links {
      display: flex;
      align-items: center;
      gap: 32px;
      list-style: none;
    }
    .nav-links a {
      text-decoration: none;
      font-size: 14px;
      font-weight: 500;
      color: rgba(255,255,255,0.8);
      transition: color 0.2s;
    }
    .nav-links a:hover { color: #fff; }
    .nav-links a.active { color: #fff; font-weight: 600; }
    .theme-toggle {
      background: none;
      border: 1px solid rgba(255,255,255,0.25);
      border-radius: 8px;
      padding: 7px;
      cursor: pointer;
      color: rgba(255,255,255,0.8);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s, color 0.2s;
    }
    .theme-toggle:hover { background: rgba(255,255,255,0.15); color: #fff; }
    .icon-sun  { display: none; }
    .icon-moon { display: block; }
    [data-theme="dark"] .icon-sun  { display: block; }
    [data-theme="dark"] .icon-moon { display: none; }
    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) .icon-sun  { display: block; }
      :root:not([data-theme="light"]) .icon-moon { display: none; }
    }

    /* ── Page header ─────────────────────────────────────────── */
    .page-header {
      padding: 120px 24px 64px;
      background: linear-gradient(160deg, var(--surface) 0%, var(--primary-tint) 100%);
      border-bottom: 1px solid var(--divider);
      text-align: center;
    }