html { background: #F7F9F8; }

    /* Dashboard mock colors — dark inset for product preview */
    :root {
      /* Brand 3-tone system (FSPD-10) */
      --fs-brand: #2D7A5F;
      --fs-brand-hover: #256B52;
      --fs-brand-active: #1E5C45;
      --fs-neutral: #557364;

      /* Mock panel palette (exempt from 3-tone — dark bg scoped) */
      --mock-bg: #1A2320;
      --mock-surface: #1F2D28;
      --mock-text: #E0EBE5;
      --mock-muted: #6A9A85;
    }

    /* Scroll-triggered fade-in — only when JS is enabled (html.js class) */
    .js .fade-in {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
    .js .fade-in.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
      .js .fade-in { opacity: 1; transform: none; transition: none; }
      .stat-card, .feature-card { transition: none; }
      .form-success { animation: none; }
    }

    /* Code block styling — dark inset for contrast */
    .code-block {
      background: #1A2320;
      border: 1px solid #2A3E36;
      border-radius: 0.75rem;
      overflow: hidden;
    }
    .code-block .code-header {
      background: rgba(45,122,95,0.12);
      padding: 0.5rem 1rem;
      font-size: 0.75rem;
      color: var(--fs-brand);
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      letter-spacing: 0.05em;
      border-bottom: 1px solid #2A3E36;
    }
    .code-block pre {
      margin: 0;
      padding: 1rem 1.25rem;
      overflow-x: auto;
    }
    .code-block code {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.85rem;
      line-height: 1.7;
      color: #E0EBE5;
    }

    /* Syntax highlighting — aperture spectrum (on dark code bg) */
    .tok-kw { color: #A78BFA; }
    .tok-str { color: #34D399; }
    .tok-fn { color: #22D3EE; }
    .tok-cm { color: #6A9A85; }
    .tok-num { color: #f9a8d4; }
    .tok-op { color: rgba(224,235,229,0.5); }
    .tok-type { color: #34D399; }
    .tok-prop { color: #0BC5D4; }
    .tok-sh { color: #34D399; }

    /* Stat card hover */
    .stat-card {
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .stat-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    }

    /* Feature card */
    .feature-card {
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .feature-card:hover {
      border-color: #D4E0DA;
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }

    /* Form success state */
    .form-success {
      animation: fadeScale 0.4s ease;
    }
    @keyframes fadeScale {
      from { opacity: 0; transform: scale(0.95); }
      to { opacity: 1; transform: scale(1); }
    }

    /* Smooth anchor scroll offset for nav */
    section[id] {
      scroll-margin-top: 80px;
    }

    /* Focus states */
    a:focus-visible, button:focus-visible, input:focus-visible {
      outline: 2px solid var(--fs-brand);
      outline-offset: 2px;
    }

    /* Processor logo strip — muted grayscale */
    .processor-logo {
      opacity: 0.5;
      transition: opacity 0.2s ease;
    }
    .processor-logo:hover {
      opacity: 0.8;
    }

/* Honeypot field — hidden from users */
.honeypot { display: none; }

/* Chart bar heights and opacity levels */
.bar-h-45 { height: 45%; background: rgba(45,122,95,0.25); }
.bar-h-60 { height: 60%; background: rgba(45,122,95,0.3); }
.bar-h-55 { height: 55%; background: rgba(45,122,95,0.35); }
.bar-h-70 { height: 70%; background: rgba(45,122,95,0.4); }
.bar-h-80 { height: 80%; background: rgba(45,122,95,0.45); }
.bar-h-75 { height: 75%; background: rgba(45,122,95,0.5); }
.bar-h-90 { height: 90%; background: rgba(45,122,95,0.55); }
.bar-h-85 { height: 85%; background: rgba(45,122,95,0.6); }
.bar-h-95 { height: 95%; background: rgba(45,122,95,0.7); }
.bar-h-100 { height: 100%; background: var(--fs-brand); }
.bar-h-92 { height: 92%; background: rgba(45,122,95,0.65); }
.bar-h-88 { height: 88%; background: rgba(45,122,95,0.55); }