:root {
      --font-sans: 'IBM Plex Sans', system-ui, sans-serif;
      --font-mono: 'IBM Plex Mono', monospace;

      /* Surfaces */
      --bg-base:    #ffffff;
      --bg-surface: #f8fafc;
      --bg-raised:  #f1f5f9;
      --bg-overlay: #e2e8f0;

      /* Borders */
      --border:     #e2e8f0;
      --border-dim: #f1f5f9;

      /* Text */
      --text-primary:   #0f172a;
      --text-secondary: #475569;
      --text-muted:     #94a3b8;

      /* CoreHR accent — blue */
      --accent:         #2563eb;   /* blue-600 */
      --accent-hover:   #1d4ed8;   /* blue-700 */
      --accent-light:   #3b82f6;   /* blue-500 */
      --accent-dim:     rgba(37,99,235,0.07);
      --accent-border:  rgba(37,99,235,0.18);

      /* Semantic */
      --green:          #16a34a;
      --green-bg:       rgba(22,163,74,0.07);
      --green-border:   rgba(22,163,74,0.2);
      --amber:          #d97706;
      --red:            #dc2626;
      --red-bg:         rgba(220,38,38,0.07);
    }

    *, *::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;
    }

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

    /* ── Dot-grid hero background ── */
    .dot-grid {
      background-image: radial-gradient(circle, #cbd5e1 1px, transparent 1px);
      background-size: 24px 24px;
    }

    /* ── 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(--green);
      animation: pulse-dot 2.4s ease-in-out infinite;
    }

    /* ── Nav ── */
    .nav-link {
      font-family: var(--font-mono);
      font-size: 0.72rem;
      letter-spacing: 0.05em;
      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-mono);
      font-size: 0.65rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--accent);
    }

    /* ── Tags / badges ── */
    .tag {
      font-family: var(--font-mono);
      font-size: 0.65rem;
      letter-spacing: 0.03em;
      padding: 2px 8px;
      border-radius: 3px;
      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:rgba(217,119,6,.2);   color:var(--amber);   background:rgba(217,119,6,.06); }
    .tag-red   { border-color:rgba(220,38,38,.2);   color:var(--red);     background:var(--red-bg); }

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

    /* ── CTA primary (solid blue) ── */
    .btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--accent);
      color: #fff;
      font-weight: 500;
      font-size: 0.85rem;
      padding: 10px 22px;
      border-radius: 4px;
      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: 500;
      font-size: 0.85rem;
      padding: 10px 22px;
      border-radius: 4px;
      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: 4px;
      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: 4px;
      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: 4px;
      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: 4px;
      font-family: var(--font-sans);
      font-size: 0.85rem;
      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:4px; font-size:.82rem; 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 rgba(220,38,38,.2);  color:var(--red); }

    /* ── Module card link ── */
    .mod-card-link {
      display: inline-flex; align-items: center; gap: 4px;
      margin-top: 12px;
      font-family: var(--font-mono);
      font-size: 0.7rem;
      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; }