:root {
      --font-sans: 'Inter', system-ui, sans-serif;
      --font-mono: 'IBM Plex Mono', monospace; /* retained for code/data contexts only */

      /* Surfaces */
      --bg-base:    #ffffff;
      --bg-surface: #f6f9f8;
      --bg-raised:  #eef5f2;
      --bg-overlay: #dfeae6;

      /* Borders */
      --border:     #e1e9e6;
      --border-dim: #f0f5f3;

      /* Text */
      --text-primary:   #1a2e2a;
      --text-secondary: #5f6b68;
      --text-muted:     #97a4a0;

      /* CoreHR accent — teal (people & growth) */
      --accent:         #0F6E56;   /* teal-700 */
      --accent-hover:   #0a5240;   /* teal-800 */
      --accent-light:   #1D9E75;   /* teal-500 */
      --accent-dim:     rgba(15,110,86,0.07);
      --accent-border:  rgba(15,110,86,0.18);

      /* Semantic */
      --green:          #3b6d11;
      --green-bg:       rgba(99,153,34,0.08);
      --green-border:   rgba(99,153,34,0.22);
      --amber:          #854f0b;
      --amber-bg:       rgba(239,159,39,0.08);
      --amber-border:   rgba(239,159,39,0.25);
      --red:            #a32d2d;
      --red-bg:         rgba(226,75,74,0.07);
      --red-border:     rgba(226,75,74,0.22);

      /* Radius scale */
      --r-sm: 6px;
      --r-md: 8px;
      --r-lg: 12px;
      --r-pill: 999px;
    }

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

    body {
      font-family: var(--font-sans);
      background: var(--bg-base);
      color: var(--text-primary);
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
      letter-spacing: -0.01em;
    }

    h1, h2, h3, h4 { letter-spacing: -0.02em; }

    .mono { font-family: var(--font-mono); }

    /* ── Soft hero background (replaces dot-grid) ── */
    .dot-grid {
      background:
        radial-gradient(ellipse 70% 55% at 75% 0%, rgba(15,110,86,0.06) 0%, transparent 60%),
        radial-gradient(ellipse 50% 45% at 8% 95%, rgba(29,158,117,0.05) 0%, transparent 55%),
        var(--bg-base);
    }

    /* ── Section alternation ── */
    .section-surface { background: var(--bg-surface); }
    .section-base    { background: var(--bg-base); }

    /* ── Live pulse dot ── */
    @keyframes pulse-dot { 0%,100%{opacity:1}50%{opacity:.3} }
    .dot-live {
      display: inline-block; width:6px; height:6px; border-radius:50%;
      background: var(--accent-light);
      animation: pulse-dot 2.4s ease-in-out infinite;
    }

    /* ── Nav ── */
    .nav-link {
      font-family: var(--font-sans);
      font-size: 0.875rem;
      font-weight: 500;
      letter-spacing: -0.005em;
      color: var(--text-secondary);
      text-decoration: none;
      padding-bottom: 2px;
      border-bottom: 1px solid transparent;
      transition: color .12s, border-color .12s;
    }
    .nav-link:hover { color: var(--accent); border-color: var(--accent); }

    /* ── Section label (eyebrow) ── */
    .section-label {
      font-family: var(--font-sans);
      font-size: 0.8rem;
      font-weight: 600;
      letter-spacing: -0.005em;
      text-transform: none;
      color: var(--accent);
    }

    /* ── Tags / badges ── */
    .tag {
      font-family: var(--font-sans);
      font-size: 0.72rem;
      font-weight: 500;
      letter-spacing: -0.005em;
      padding: 3px 10px;
      border-radius: var(--r-pill);
      border: 1px solid var(--border);
      color: var(--text-secondary);
      background: var(--bg-raised);
      white-space: nowrap;
    }
    .tag-blue  { border-color:var(--accent-border); color:var(--accent);  background:var(--accent-dim); }
    .tag-green { border-color:var(--green-border);  color:var(--green);   background:var(--green-bg); }
    .tag-amber { border-color:var(--amber-border);  color:var(--amber);   background:var(--amber-bg); }
    .tag-red   { border-color:var(--red-border);    color:var(--red);     background:var(--red-bg); }

    /* ── Bordered panel ── */
    .panel { border:1px solid var(--border); background:var(--bg-base); border-radius:var(--r-lg); }
    .panel-hover { transition:border-color .12s, background .12s; }
    .panel-hover:hover { border-color:var(--accent-border); background:var(--bg-surface); }

    /* ── CTA primary (solid teal) ── */
    .btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--accent);
      color: #fff;
      font-weight: 600;
      font-size: 0.875rem;
      padding: 10px 22px;
      border-radius: var(--r-md);
      border: 1px solid var(--accent);
      text-decoration: none;
      transition: background .12s, opacity .12s;
      cursor: pointer;
    }
    .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

    /* ── CTA secondary (outlined) ── */
    .btn-secondary {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--bg-base);
      color: var(--accent);
      font-weight: 600;
      font-size: 0.875rem;
      padding: 10px 22px;
      border-radius: var(--r-md);
      border: 1px solid var(--accent-border);
      text-decoration: none;
      transition: background .12s, border-color .12s;
      cursor: pointer;
    }
    .btn-secondary:hover { background: var(--accent-dim); border-color: var(--accent); }

    /* ── Stat card ── */
    .stat-card {
      border: 1px solid var(--border);
      background: var(--bg-base);
      border-radius: var(--r-lg);
      padding: 16px;
      transition: border-color .12s;
    }
    .stat-card:hover { border-color: var(--accent-border); }

    /* ── Feature card ── */
    .feature-card {
      border: 1px solid var(--border);
      background: var(--bg-base);
      border-radius: var(--r-lg);
      transition: border-color .12s, background .12s;
    }
    .feature-card:hover { border-color: var(--accent-border); background: var(--bg-surface); }

    /* ── Module icon badge ── */
    .mod-icon {
      width: 40px; height: 40px;
      border-radius: var(--r-md);
      border: 1px solid var(--border);
      background: var(--bg-raised);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }

    .field {
      width:100%;
      padding: 10px 14px;
      background: var(--bg-base);
      border: 1px solid var(--border);
      border-radius: var(--r-md);
      font-family: var(--font-sans);
      font-size: 0.9rem;
      color: var(--text-primary);
      transition: border-color .12s, box-shadow .12s;
      outline: none;
    }
    .field::placeholder { color: var(--text-muted); }
    .field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }

    /* ── Contact message ── */
    .message { display:none; padding:12px 16px; border-radius:var(--r-md); font-size:.85rem; margin-top:12px; }
    .message.success { background:var(--green-bg); border:1px solid var(--green-border); color:var(--green); }
    .message.error   { background:var(--red-bg);   border:1px solid var(--red-border);    color:var(--red); }

    /* ── Module card link ── */
    .mod-card-link {
      display: inline-flex; align-items: center; gap: 4px;
      margin-top: 12px;
      font-family: var(--font-sans);
      font-weight: 600;
      font-size: 0.8rem;
      color: var(--accent);
      text-decoration: none;
    }
    .mod-card-link:hover { text-decoration: underline; }

    /* ── Module row (about section) ── */
    .module-row {
      display:flex; align-items:flex-start; gap:14px; padding:14px;
      border-bottom:1px solid var(--border-dim);
      transition:background .1s;
    }
    .module-row:last-child { border-bottom:none; }
    .module-row:hover { background:var(--bg-surface); }

    /* ── Scrollbar ── */
    ::-webkit-scrollbar { width:4px; height:4px; }
    ::-webkit-scrollbar-track { background:var(--bg-surface); }
    ::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }