/* PEP Websites — Design System (generated from the Claude Design handoff tokens). */
/* PEP Websites — Webfonts
   Geometric-modern type system. The logo wordmark uses proprietary
   Kallisto-Bold / Futura-Medium (outlined in the SVGs). For all site/UI
   type we use a geometric web pairing loaded from Google Fonts:
     - Space Grotesk  → display / headings (technical, precise, geometric)
     - Manrope        → body / UI (geometric, highly legible)
     - Space Mono     → audit trails, code, numeric/eyebrow detail
   These are deliberate web choices, not font-file substitutions. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');
/* ============================================================
   PEP Websites — Color system
   Navy-dominant, brand-blue accent. Locked brand anchors:
     navy #013869 · blue #2d71b5 → #4a99c6
   Two themes: light (default on :root) + dark ([data-theme="dark"]).
   ============================================================ */
:root {
  /* ---- Brand anchors (locked) ---- */
  --pep-navy:        #013869; /* primary */
  --pep-blue:        #2d71b5; /* liquid / gradient start */
  --pep-blue-light:  #4a99c6; /* gradient end */
  --pep-blue-bright: #2d8fd6; /* interactive accent */

  /* ---- Navy / blue scale ---- */
  --navy-950: #021627;
  --navy-900: #03203a;
  --navy-800: #042c4f;
  --navy-700: #013869;
  --navy-600: #0a4c87;
  --navy-500: #2d71b5;
  --navy-400: #4a99c6;
  --navy-300: #7bb6d8;
  --navy-200: #aed3e8;
  --navy-100: #d8e8f3;
  --navy-50:  #eef5fa;

  /* ---- Cool neutrals (navy-tinted) ---- */
  --gray-950: #0b1420;
  --gray-900: #141d2b;
  --gray-800: #1f2a3a;
  --gray-700: #344152;
  --gray-600: #4b5a6e;
  --gray-500: #677687;
  --gray-400: #8a98a8;
  --gray-300: #b3bfcc;
  --gray-200: #d4dce4;
  --gray-100: #e7edf2;
  --gray-50:  #f4f7fa;
  --white:    #ffffff;

  /* ---- Semantic raw ---- */
  --green-500: #1f9d6b;
  --green-400: #34c98c;
  --amber-500: #d99211;
  --amber-400: #f2b53d;
  --red-500:   #d6453d;
  --red-400:   #f2675f;

  /* ---- Brand gradients ---- */
  --grad-brand: linear-gradient(120deg, #3b9bff 0%, #52e5ff 100%); /* @kind color */
  --grad-deep:  linear-gradient(135deg, #013869 0%, #2d8fd6 100%); /* @kind color */
  --grad-sky:   linear-gradient(135deg, #52e5ff 0%, #9af0ff 100%); /* @kind color */

  /* Profit accent — single warm gold highlight (Popular badge + final CTA only) */
  --profit-grad: linear-gradient(120deg, #f0a91e 0%, #ffd072 100%); /* @kind color */
  --profit-ink:  #241704; /* @kind color */

  /* ========== Semantic aliases — LIGHT (default) ========== */
  --bg:            #f4f7fa;
  --bg-subtle:     #eaf0f6;
  --surface:       #ffffff;
  --surface-2:     #f7fafc;
  --surface-inset: #eef3f8;
  --surface-navy:  #013869;  /* inverted panel inside light theme */

  --border:        #e1e8f0;
  --border-strong: #ccd8e4;
  --border-accent: #b6d2e6;

  --text:          #062a4d;
  --text-muted:    #4b5a6e;
  --text-faint:    #7c8a9c;
  --text-on-accent:#ffffff;
  --text-on-navy:  #eaf2fb;

  --accent:        #1f7fe0;
  --accent-hover:  #1668c0;
  --accent-soft:   #e6f1fd;
  --accent-strong: #013869;
  --profit:        #a9740a;
  --profit-soft:   #fbf0d6;

  --success:       #1f9d6b;
  --success-soft:  #e3f6ee;
  --warn:          #b9790c;
  --warn-soft:     #fbf0d8;
  --danger:        #c93a32;
  --danger-soft:   #fbe6e4;

  --ring:          rgba(59, 155, 255, .4);
  --overlay:       rgba(6, 22, 39, .48);

  /* ---- Elevation (light) ---- */
  --shadow-xs: 0 1px 2px rgba(6, 28, 55, .06);
  --shadow-sm: 0 1px 3px rgba(6, 28, 55, .08), 0 1px 2px rgba(6, 28, 55, .04);
  --shadow-md: 0 6px 18px rgba(6, 28, 55, .08), 0 2px 6px rgba(6, 28, 55, .05);
  --shadow-lg: 0 18px 44px rgba(6, 28, 55, .12), 0 6px 14px rgba(6, 28, 55, .06);
  --shadow-xl: 0 34px 80px rgba(6, 28, 55, .18), 0 10px 24px rgba(6, 28, 55, .08);
  --shadow-accent: 0 14px 36px rgba(59, 155, 255, .28);
}

/* ================= DARK theme ================= */
[data-theme="dark"] {
  --bg:            #061025;
  --bg-subtle:     #040b1c;
  --surface:       #0a1d3a;
  --surface-2:     #0d2547;
  --surface-inset: #08182f;
  --surface-navy:  #0a1d3a;

  --border:        rgba(255, 255, 255, .10);
  --border-strong: rgba(255, 255, 255, .18);
  --border-accent: rgba(74, 153, 198, .45);

  --text:          #eaf2fb;
  --text-muted:    #a9bdd4;
  --text-faint:    #6f87a3;
  --text-on-accent:#04182e;
  --text-on-navy:  #eaf2fb;

  --accent:        #4aa8ff;
  --accent-hover:  #6cbcff;
  --accent-soft:   rgba(74, 168, 255, .15);
  --accent-strong: #8cc8ff;
  --profit:        #ffc24b;
  --profit-soft:   rgba(255, 194, 75, .15);

  --success:       #34c98c;
  --success-soft:  rgba(52, 201, 140, .14);
  --warn:          #f2b53d;
  --warn-soft:     rgba(242, 181, 61, .14);
  --danger:        #f2675f;
  --danger-soft:   rgba(242, 103, 95, .14);

  --ring:          rgba(74, 168, 255, .45);
  --overlay:       rgba(2, 10, 20, .62);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .4);
  --shadow-md: 0 8px 22px rgba(0, 0, 0, .42);
  --shadow-lg: 0 22px 50px rgba(0, 0, 0, .5);
  --shadow-xl: 0 40px 90px rgba(0, 0, 0, .6);
  --shadow-accent: 0 16px 42px rgba(59, 155, 255, .4);
}
/* ============================================================
   PEP Websites — Typography tokens
   Geometric-modern pairing. Space Grotesk (display), Manrope (body/UI),
   Space Mono (audit/code/eyebrow detail).
   ============================================================ */
:root {
  /* ---- Families ---- */
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Manrope', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* ---- Weights ---- */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-extra:    800; /* @kind font */

  /* ---- Fluid display sizes ---- */
  --fs-display: clamp(44px, 6vw, 76px); /* @kind font */
  --fs-h1:      clamp(34px, 4.4vw, 56px); /* @kind font */
  --fs-h2:      clamp(27px, 3.2vw, 40px); /* @kind font */
  --fs-h3:      clamp(20px, 2vw, 26px); /* @kind font */
  --fs-h4:      18px; /* @kind font */

  /* ---- Body / UI sizes ---- */
  --fs-lead:    clamp(17px, 1.4vw, 20px); /* @kind font */
  --fs-body:    16px; /* @kind font */
  --fs-sm:      14px; /* @kind font */
  --fs-xs:      13px; /* @kind font */
  --fs-2xs:     11.5px; /* @kind font */
  --fs-eyebrow: 12.5px; /* @kind font */

  /* ---- Line heights ---- */
  --lh-tight:   1.08; /* @kind font */
  --lh-snug:    1.22; /* @kind font */
  --lh-normal:  1.5; /* @kind font */
  --lh-relaxed: 1.62; /* @kind font */

  /* ---- Tracking ---- */
  --ls-tight:   -0.025em; /* @kind font */
  --ls-snug:    -0.015em; /* @kind font */
  --ls-normal:  0; /* @kind font */
  --ls-wide:    0.04em; /* @kind font */
  --ls-eyebrow: 0.16em; /* @kind font */
  --ls-mono:    0.02em; /* @kind font */
}
/* ============================================================
   PEP Websites — Spacing, radii, layout, motion tokens
   4px base scale.
   ============================================================ */
:root {
  /* ---- Spacing scale (4px base) ---- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ---- Radii ---- */
  --r-xs:   6px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-pill: 999px;

  /* ---- Borders ---- */
  --bw-hair: 1px;
  --bw-med:  1.5px;
  --bw-thick: 2px;

  /* ---- Layout ---- */
  --maxw:      1180px;
  --maxw-text: 720px;
  --maxw-wide: 1320px;
  --gutter:    24px;
  --nav-h:     68px;

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-mid:    220ms; /* @kind other */
  --dur-slow:   380ms; /* @kind other */
}
/* ============================================================
   PEP Websites — Palette themes
   Each palette re-themes the WHOLE site by overriding the accent +
   gradient + glow tokens (and, in dark mode, the navy base surfaces).
   Apply with [data-palette="voltage|gold|lime|aurora|ember|emerald|orchid|slate"]
   on <html>, composable with [data-theme="light|dark"]. 8 tenant presets.
   No data-palette = the base navy/blue brand (tokens/colors.css).
   Light accents are deepened for text contrast; dark accents go vivid.
   ============================================================ */

/* ---------------- 01 · VOLTAGE BLUE ---------------- */
[data-palette="voltage"] {
  --accent: #1f7fe0;           /* @kind color */
  --accent-hover: #1668c0;     /* @kind color */
  --accent-soft: #e6f1fd;      /* @kind color */
  --accent-strong: #0a3f78;    /* @kind color */
  --border-accent: #b3d6f5;    /* @kind color */
  --grad-brand: linear-gradient(120deg, #3b9bff 0%, #52e5ff 100%);  /* @kind color */
  --grad-deep:  linear-gradient(135deg, #0a2c52 0%, #2d8fd6 100%);  /* @kind color */
  --grad-sky:   linear-gradient(135deg, #52e5ff 0%, #9af0ff 100%);  /* @kind color */
  --ring: rgba(59,155,255,.4); /* @kind color */
  --shadow-accent: 0 14px 36px rgba(59,155,255,.28); /* @kind shadow */
}
[data-theme="dark"][data-palette="voltage"] {
  --bg: #061025; --bg-subtle: #040b1c; --surface: #0a1d3a; --surface-2: #0d2547; --surface-inset: #08182f; --surface-navy: #0a1d3a;
  --accent: #4aa8ff; --accent-hover: #6cbcff; --accent-soft: rgba(74,168,255,.15); --accent-strong: #8cc8ff;
  --border-accent: rgba(74,168,255,.45);
  --shadow-accent: 0 16px 42px rgba(59,155,255,.4);
}

/* ---------------- 02 · PROFIT GOLD ---------------- */
[data-palette="gold"] {
  --accent: #a9740a;           /* @kind color */
  --accent-hover: #8a5f08;     /* @kind color */
  --accent-soft: #fbf0d6;      /* @kind color */
  --accent-strong: #6b4a07;    /* @kind color */
  --border-accent: #ecd29a;    /* @kind color */
  --grad-brand: linear-gradient(120deg, #f0a91e 0%, #ffd072 100%);  /* @kind color */
  --grad-deep:  linear-gradient(135deg, #0a2546 0%, #14365f 100%);  /* @kind color */
  --grad-sky:   linear-gradient(135deg, #ffc24b 0%, #ffe2a6 100%);  /* @kind color */
  --ring: rgba(240,169,30,.38); /* @kind color */
  --shadow-accent: 0 14px 36px rgba(240,169,30,.26); /* @kind shadow */
}
[data-theme="dark"][data-palette="gold"] {
  --bg: #061227; --bg-subtle: #040d1d; --surface: #0a2142; --surface-2: #0d294f; --surface-inset: #081b38; --surface-navy: #0a2142;
  --accent: #ffc24b; --accent-hover: #ffd072; --accent-soft: rgba(255,194,75,.15); --accent-strong: #ffd98a;
  --border-accent: rgba(255,194,75,.4);
  --shadow-accent: 0 16px 42px rgba(255,194,75,.32);
}

/* ---------------- 03 · SIGNAL LIME ---------------- */
[data-palette="lime"] {
  --accent: #4d7c0f;           /* @kind color */
  --accent-hover: #3f6810;     /* @kind color */
  --accent-soft: #eef7da;      /* @kind color */
  --accent-strong: #365209;    /* @kind color */
  --border-accent: #cbe79a;    /* @kind color */
  --grad-brand: linear-gradient(120deg, #84cc16 0%, #c4f042 100%);  /* @kind color */
  --grad-deep:  linear-gradient(135deg, #11203a 0%, #1f4a30 100%);  /* @kind color */
  --grad-sky:   linear-gradient(135deg, #a3e635 0%, #d9fa72 100%);  /* @kind color */
  --ring: rgba(132,204,22,.36); /* @kind color */
  --shadow-accent: 0 14px 36px rgba(132,204,22,.24); /* @kind shadow */
}
[data-theme="dark"][data-palette="lime"] {
  --bg: #080d18; --bg-subtle: #050911; --surface: #111a2c; --surface-2: #152136; --surface-inset: #0d1524; --surface-navy: #111a2c;
  --accent: #a3e635; --accent-hover: #bef264; --accent-soft: rgba(163,230,53,.15); --accent-strong: #c4f042;
  --border-accent: rgba(163,230,53,.4);
  --shadow-accent: 0 16px 42px rgba(163,230,53,.3);
}

/* ---------------- 04 · AURORA INDIGO ---------------- */
[data-palette="aurora"] {
  --accent: #4f46e5;           /* @kind color */
  --accent-hover: #4038c4;     /* @kind color */
  --accent-soft: #ebeafe;      /* @kind color */
  --accent-strong: #312b9e;    /* @kind color */
  --border-accent: #c5c2f6;    /* @kind color */
  --grad-brand: linear-gradient(120deg, #7b8cff 0%, #4fe0cf 100%);  /* @kind color */
  --grad-deep:  linear-gradient(135deg, #1c1f53 0%, #4145b8 100%);  /* @kind color */
  --grad-sky:   linear-gradient(135deg, #7b8cff 0%, #4fe0cf 100%);  /* @kind color */
  --ring: rgba(123,140,255,.4); /* @kind color */
  --shadow-accent: 0 14px 36px rgba(99,102,241,.28); /* @kind shadow */
}
[data-theme="dark"][data-palette="aurora"] {
  --bg: #0a0e2a; --bg-subtle: #06091e; --surface: #15183f; --surface-2: #1b1e4c; --surface-inset: #101333; --surface-navy: #15183f;
  --accent: #8c98ff; --accent-hover: #a6afff; --accent-soft: rgba(140,152,255,.15); --accent-strong: #b6bcff;
  --border-accent: rgba(140,152,255,.42);
  --shadow-accent: 0 16px 42px rgba(123,140,255,.38);
}

/* ---------------- 05 · EMBER (red / coral) ---------------- */
[data-palette="ember"] {
  --accent: #d63f3a;           /* @kind color */
  --accent-hover: #b83430;     /* @kind color */
  --accent-soft: #fdeae8;      /* @kind color */
  --accent-strong: #7d1f1c;    /* @kind color */
  --border-accent: #f3bdb9;    /* @kind color */
  --grad-brand: linear-gradient(120deg, #f5564e 0%, #ff8a6b 100%);  /* @kind color */
  --grad-deep:  linear-gradient(135deg, #2a1410 0%, #d6453d 100%);  /* @kind color */
  --grad-sky:   linear-gradient(135deg, #ff8a6b 0%, #ffc1a0 100%);  /* @kind color */
  --ring: rgba(214,63,58,.4); /* @kind color */
  --shadow-accent: 0 14px 36px rgba(245,86,78,.26); /* @kind shadow */
}
[data-theme="dark"][data-palette="ember"] {
  --bg: #1a1011; --bg-subtle: #120a0a; --surface: #281a1b; --surface-2: #322021; --surface-inset: #1f1414; --surface-navy: #281a1b;
  --accent: #ff7a6b; --accent-hover: #ff998d; --accent-soft: rgba(255,122,107,.15); --accent-strong: #ffa99e;
  --border-accent: rgba(255,122,107,.4);
  --shadow-accent: 0 16px 42px rgba(245,86,78,.38);
}

/* ---------------- 06 · EMERALD (green) ---------------- */
[data-palette="emerald"] {
  --accent: #0c8a5e;           /* @kind color */
  --accent-hover: #097049;     /* @kind color */
  --accent-soft: #e1f5ec;      /* @kind color */
  --accent-strong: #064a33;    /* @kind color */
  --border-accent: #aee2cb;    /* @kind color */
  --grad-brand: linear-gradient(120deg, #10b981 0%, #5fe6b0 100%);  /* @kind color */
  --grad-deep:  linear-gradient(135deg, #08231a 0%, #0f9d6b 100%);  /* @kind color */
  --grad-sky:   linear-gradient(135deg, #5fe6b0 0%, #a8f3d4 100%);  /* @kind color */
  --ring: rgba(16,185,129,.36); /* @kind color */
  --shadow-accent: 0 14px 36px rgba(16,185,129,.24); /* @kind shadow */
}
[data-theme="dark"][data-palette="emerald"] {
  --bg: #07140f; --bg-subtle: #040d09; --surface: #0e2620; --surface-2: #123029; --surface-inset: #0b1d18; --surface-navy: #0e2620;
  --accent: #34d399; --accent-hover: #5ee0b0; --accent-soft: rgba(52,211,153,.15); --accent-strong: #7defc1;
  --border-accent: rgba(52,211,153,.4);
  --shadow-accent: 0 16px 42px rgba(16,185,129,.32);
}

/* ---------------- 07 · ORCHID (magenta / pink) ---------------- */
[data-palette="orchid"] {
  --accent: #c0309a;           /* @kind color */
  --accent-hover: #a32882;     /* @kind color */
  --accent-soft: #fbe6f5;      /* @kind color */
  --accent-strong: #711c5a;    /* @kind color */
  --border-accent: #f0bce0;    /* @kind color */
  --grad-brand: linear-gradient(120deg, #e74dad 0%, #ff8fd0 100%);  /* @kind color */
  --grad-deep:  linear-gradient(135deg, #240f20 0%, #c0309a 100%);  /* @kind color */
  --grad-sky:   linear-gradient(135deg, #ff8fd0 0%, #ffc2e8 100%);  /* @kind color */
  --ring: rgba(192,48,154,.38); /* @kind color */
  --shadow-accent: 0 14px 36px rgba(231,77,173,.26); /* @kind shadow */
}
[data-theme="dark"][data-palette="orchid"] {
  --bg: #170a14; --bg-subtle: #0f060d; --surface: #271126; --surface-2: #31162f; --surface-inset: #1e0d1c; --surface-navy: #271126;
  --accent: #f072c8; --accent-hover: #f792d6; --accent-soft: rgba(240,114,200,.15); --accent-strong: #f9a9de;
  --border-accent: rgba(240,114,200,.4);
  --shadow-accent: 0 16px 42px rgba(231,77,173,.36);
}

/* ---------------- 08 · SLATE (neutral graphite) ---------------- */
[data-palette="slate"] {
  --accent: #51607a;           /* @kind color */
  --accent-hover: #41506a;     /* @kind color */
  --accent-soft: #eef1f6;      /* @kind color */
  --accent-strong: #2e3a52;    /* @kind color */
  --border-accent: #c9d2e0;    /* @kind color */
  --grad-brand: linear-gradient(120deg, #64748b 0%, #94a3b8 100%);  /* @kind color */
  --grad-deep:  linear-gradient(135deg, #131a26 0%, #475569 100%);  /* @kind color */
  --grad-sky:   linear-gradient(135deg, #94a3b8 0%, #c2cdda 100%);  /* @kind color */
  --ring: rgba(81,96,122,.38); /* @kind color */
  --shadow-accent: 0 14px 36px rgba(71,85,105,.24); /* @kind shadow */
}
[data-theme="dark"][data-palette="slate"] {
  --bg: #0e131b; --bg-subtle: #090d13; --surface: #1b232f; --surface-2: #212b39; --surface-inset: #151c26; --surface-navy: #1b232f;
  --accent: #9fb3cf; --accent-hover: #b8c8de; --accent-soft: rgba(159,179,207,.15); --accent-strong: #cdd9e8;
  --border-accent: rgba(159,179,207,.38);
  --shadow-accent: 0 16px 42px rgba(0,0,0,.45);
}
/* ============================================================
   PEP Websites — Base reset + primitives
   Lightweight. Sets body defaults and a few brand utilities that
   read entirely from tokens. Themeable via [data-theme].
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--text);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin: 0; text-wrap: pretty; }
a { color: var(--accent); text-decoration: none; }

/* ---- Brand utilities ---- */
.pep-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}
.pep-grad-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pep-mono { font-family: var(--font-mono); letter-spacing: var(--ls-mono); }

/* Subtle grid/dot field used behind hero + banners */
.pep-grid-bg {
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 44px 44px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ============================================================
   Component layer — realized from the design-system specs.
   ============================================================ */
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.section{border-top:1px solid var(--border);padding:76px 0}
.section--subtle{background:var(--bg-subtle)}
.section--flush{border-top:none}
.sec-head{max-width:720px;margin:0 0 44px}
.sec-head--center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h2{margin-bottom:14px}
.sec-head .lead{font-size:var(--fs-lead);color:var(--text-muted);line-height:1.5}
.lead{font-size:var(--fs-lead);color:var(--text-muted);line-height:1.5}
.muted{color:var(--text-muted)} .faint{color:var(--text-faint)}

/* grids that collapse */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.split-even{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}
@media(max-width:880px){.grid-3,.grid-4{grid-template-columns:1fr 1fr}.split,.split-even{grid-template-columns:1fr}}
@media(max-width:560px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-body);font-weight:700;font-size:14px;line-height:1;padding:11px 18px;border-radius:var(--r-md);border:1px solid transparent;cursor:pointer;text-decoration:none;transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast);white-space:nowrap}
.btn svg{width:1em;height:1em;display:block}
.btn--primary{background:var(--grad-brand);color:#fff;box-shadow:var(--shadow-accent)}
.btn--primary:hover{transform:translateY(-1px);filter:brightness(1.04)}
.btn--secondary{background:var(--surface);color:var(--text);border-color:var(--border-strong)}
.btn--secondary:hover{border-color:var(--border-accent);color:var(--accent)}
.btn--outline{background:transparent;color:var(--text);border-color:var(--border-strong)}
.btn--outline:hover{border-color:var(--accent);color:var(--accent)}
.btn--ghost{background:transparent;color:var(--text-muted)}
.btn--ghost:hover{color:var(--accent)}
.btn--gold{background:var(--profit-grad);color:var(--profit-ink);box-shadow:0 12px 30px rgba(240,169,30,.28)}
.btn--gold:hover{transform:translateY(-1px);filter:brightness(1.04)}
.btn--sm{padding:9px 14px;font-size:13px}
.btn--lg{padding:14px 24px;font-size:15px}
.btn--full{width:100%}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring)}

/* cards */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow-sm)}
.card--lg{box-shadow:var(--shadow-lg)}
.card--accent{border-color:var(--border-accent)}
.card--glass{background:color-mix(in srgb,var(--surface) 86%,transparent);backdrop-filter:blur(10px)}
.card--hover{transition:transform var(--dur-mid) var(--ease-out),box-shadow var(--dur-mid) var(--ease-out)}
.card--hover:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.card--feat{box-shadow:0 0 0 2px var(--accent),var(--shadow-lg)}

/* badges */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;line-height:1.5;padding:3px 9px;border-radius:var(--r-pill);letter-spacing:.01em}
.badge--brand{background:var(--accent-soft);color:var(--accent)}
.badge--success{background:var(--success-soft);color:var(--success)}
.badge--danger{background:var(--danger-soft);color:var(--danger)}
.badge--neutral{background:var(--surface-inset);color:var(--text-muted)}
.badge--accent{background:var(--accent-soft);color:var(--accent)}
.badge--solid{background:rgba(10,18,34,.72);color:#fff}
.badge--profit{background:var(--profit-grad);color:var(--profit-ink)}

/* check pill + tick */
.check-pill{display:inline-flex;align-items:center;gap:7px;font-size:13px;padding:7px 13px;border-radius:var(--r-pill);border:1px solid var(--border);background:var(--surface-2);color:var(--text-muted)}
.tick{color:var(--accent);font-weight:800}
.x{color:var(--danger);font-weight:800}

/* feature tile */
.feature-tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow-sm);transition:transform var(--dur-mid) var(--ease-out),box-shadow var(--dur-mid) var(--ease-out)}
.feature-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.feature-tile .ic{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-md);background:var(--accent-soft);color:var(--accent);margin-bottom:14px}
.feature-tile h3{font-size:17px;margin-bottom:8px}
.feature-tile p{color:var(--text-muted);font-size:14px}

/* stat */
.stat .stat-v{font-family:var(--font-display);font-weight:700;font-size:30px;letter-spacing:-.02em;color:var(--text)}
.stat .stat-l{font-size:12.5px;color:var(--text-faint);margin-top:2px;line-height:1.4}

/* input */
.input{width:100%;padding:12px 14px;border-radius:var(--r-md);border:1px solid var(--border-strong);background:var(--surface);color:var(--text);font-family:var(--font-body);font-size:14px;transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.input::placeholder{color:var(--text-faint)}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)}
textarea.input{resize:vertical;min-height:84px}

/* range slider */
.pep-range{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;background:var(--surface-inset);outline:none;cursor:pointer}
.pep-range::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:999px;background:var(--accent);border:3px solid var(--surface);box-shadow:var(--shadow-sm);cursor:pointer}
.pep-range::-moz-range-thumb{width:18px;height:18px;border-radius:999px;background:var(--accent);border:3px solid var(--surface);cursor:pointer}

/* nav + footer */
.site-nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);background:color-mix(in srgb,var(--bg) 80%,transparent);border-bottom:1px solid var(--border)}
.site-nav .nav-in{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:18px}
.logo-lockup{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:-.02em;color:var(--text)}
.logo-lockup img{height:28px;width:auto;display:block;flex:none}
.nav-links{display:flex;gap:26px;font-size:14px;font-weight:600}
.nav-links a{color:var(--text-muted)}
.nav-links a:hover{color:var(--accent)}
.theme-toggle,.icon-btn{width:36px;height:36px;border-radius:999px;border:1px solid var(--border-strong);background:var(--surface);color:var(--text);cursor:pointer;display:grid;place-items:center;font-size:14px}
.palette-switch{display:inline-flex;align-items:center;gap:6px;padding:5px 8px;border-radius:999px;border:1px solid var(--border-strong);background:var(--surface)}
.palette-switch button{width:18px;height:18px;border-radius:999px;cursor:pointer;padding:0;border:2px solid transparent;outline:none;transition:transform .12s;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.palette-switch button[aria-pressed="true"]{border-color:var(--text);transform:scale(1.12);box-shadow:0 0 0 2px var(--surface)}
@media(max-width:880px){.nav-links,.nav-extra-hide{display:none}}
.site-foot{border-top:1px solid var(--border);padding:40px 0 56px}
.site-foot a{color:var(--text-muted);font-size:13.5px}
.site-foot a:hover{color:var(--accent)}

/* browser frame + misc */
.browser{border-radius:var(--r-lg);overflow:hidden;background:var(--surface);border:1px solid var(--border-strong);box-shadow:var(--shadow-xl)}
.browser-bar{display:flex;align-items:center;gap:8px;padding:11px 14px;background:var(--surface-2);border-bottom:1px solid var(--border)}
.browser-dot{width:11px;height:11px;border-radius:999px}
.browser-url{margin-left:12px;flex:1;font-family:var(--font-mono);font-size:11.5px;color:var(--text-faint);background:var(--surface-inset);padding:5px 12px;border-radius:999px;display:inline-flex;align-items:center;gap:6px}
.icon{display:inline-block;vertical-align:middle}