/* ============================================================
   tftior-hp-v2.css
   REPLACES tftior-hp.css + tftior-hp-fixes.css
   Load only this file (after tftior.css) on the homepage.

   Changes in v2:
   1. Signal green → #71bc40 (TFTIOR logo green, all variants)
   2. Light mode fixed — token cascade works correctly,
      tftior.css !important rules neutralised via specificity
   3. All hp- prefix classes preserved (no breaking changes)
   ============================================================ */

/* ============================================================
   FONTS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&display=swap');

/* ============================================================
   DESIGN TOKENS — DARK (default)

   Signal green system — based on #71bc40 (logo green):
   --hp-signal        #71bc40   full green
   --hp-signal-dark   #5a9a30   darker, for hover states
   --hp-signal-glow   rgba(113,188,64,0.10)  subtle bg tint
   --hp-signal-line   rgba(113,188,64,0.28)  border/divider
   ============================================================ */
:root {
  /* Ground */
  --hp-bg:           #0c0f18;
  --hp-bg-alt:       #111420;
  --hp-bg-card:      #171b28;
  --hp-bg-lift:      #1e2235;
  --hp-bg-ink:       #090c14;

  /* Type */
  --hp-cream:        #e6ddd0;
  --hp-cream-soft:   #b8af9f;
  --hp-cream-muted:  #5e5d58;

  /* Borders */
  --hp-border:       rgba(255,255,255,0.07);
  --hp-border-soft:  rgba(255,255,255,0.04);

  /* Signal — TFTIOR logo green */
  --hp-signal:       #71bc40;
  --hp-signal-dark:  #5a9a30;
  --hp-signal-glow:  rgba(113,188,64,0.10);
  --hp-signal-line:  rgba(113,188,64,0.28);
  --hp-signal-text:  #71bc40;   /* for text on dark bg — readable */

  /* Amber accent */
  --hp-amber:        #e8a020;

  /* Shadows */
  --hp-shadow:       0 4px 24px rgba(0,0,0,0.5);
  --hp-shadow-lg:    0 12px 48px rgba(0,0,0,0.6);

  /* Typography */
  --hp-serif:  'DM Serif Display', Georgia, serif;
  --hp-sans:   'DM Sans', system-ui, -apple-system, sans-serif;

  /* Layout */
  --hp-shell:     1240px;
  --hp-radius:    6px;
  --hp-radius-lg: 14px;

  /* Ease */
  --hp-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   LIGHT THEME OVERRIDES

   NOTE on tftior.css conflict:
   tftior.css has a "universal dark fix" block (lines ~1720-1760)
   that uses:
     section, div[class*="card"] { background: var(--page-bg-soft) !important; }
   This only fires on body.theme-dark — NOT on body.theme-light —
   so it does NOT interfere with our light mode. Safe.

   The remaining issue was that body.hp-theme was being stripped
   when theme-light toggled. Fixed in hp-footer.php JS:
   toggle now only adds/removes theme-light, never touches hp-theme.
   ============================================================ */
body.theme-light {
  /* Surfaces */
  --hp-bg:          #f4f6f9;
  --hp-bg-alt:      #ebedf4;
  --hp-bg-card:     #ffffff;
  --hp-bg-lift:     #f0f2f8;
  --hp-bg-ink:      #e4e7f0;

  /* Type — dark on light */
  --hp-cream:       #0f1117;
  --hp-cream-soft:  #3d4455;
  --hp-cream-muted: #8b909e;

  /* Borders — light */
  --hp-border:      rgba(0,0,0,0.08);
  --hp-border-soft: rgba(0,0,0,0.04);

  /* Signal — slightly deeper for light bg readability */
  --hp-signal:       #4e8a22;
  --hp-signal-dark:  #3a6b18;
  --hp-signal-glow:  rgba(78,138,34,0.08);
  --hp-signal-line:  rgba(78,138,34,0.22);
  --hp-signal-text:  #3a6b18;

  /* Amber */
  --hp-amber: #b45309;

  /* Shadows */
  --hp-shadow:    0 2px 12px rgba(0,0,0,0.08);
  --hp-shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
}

/* ============================================================
   SCOPE — all hp- rules are inside .hp-page or body.hp-theme
   This prevents any bleed onto other pages loaded with tftior.css
   ============================================================ */

/* Base */
.hp-page {
  font-family: var(--hp-sans);
  background: var(--hp-bg);
  color: var(--hp-cream);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
.hp-page *, .hp-page *::before, .hp-page *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.hp-page a { color: inherit; text-decoration: none; }

/* Light mode: override tftior.css body background on homepage */
body.hp-theme.theme-light {
  background: var(--hp-bg);
}

/* Shell */
.hp-shell {
  max-width: var(--hp-shell);
  margin: 0 auto;
  padding: 0 2rem;
}
@media (max-width: 768px) { .hp-shell { padding: 0 1.25rem; } }

/* Section rhythm */
.hp-section         { padding: 5.5rem 0; }
.hp-section--sm     { padding: 3rem 0; }
.hp-section--alt    { background: var(--hp-bg-alt); }
.hp-section--ink    { background: var(--hp-bg-ink); }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.hp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hp-signal-text);
  margin-bottom: 1rem;
}
.hp-eyebrow::before {
  content: '';
  display: inline-block;
  width: 1.25rem;
  height: 1px;
  background: var(--hp-signal);
  flex-shrink: 0;
}

.hp-h1 {
  font-family: var(--hp-serif);
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  line-height: 1.08;
  color: var(--hp-cream);
  font-weight: 400;
}
.hp-h1 em     { font-style: italic; color: var(--hp-cream-soft); }
.hp-h1 strong { color: #fff; font-weight: 400; }

body.theme-light .hp-h1 strong { color: #0f1117; }

.hp-h2 {
  font-family: var(--hp-serif);
  font-size: clamp(1.65rem, 3vw, 2.5rem);
  line-height: 1.1;
  color: var(--hp-cream);
  font-weight: 400;
}
.hp-h2 em { font-style: italic; color: var(--hp-cream-soft); }

.hp-h3 {
  font-family: var(--hp-serif);
  font-size: 1.15rem;
  line-height: 1.25;
  color: var(--hp-cream);
  font-weight: 400;
}

.hp-lead {
  font-size: 1rem;
  color: var(--hp-cream-soft);
  line-height: 1.75;
  max-width: 46ch;
}
.hp-body {
  font-size: 0.875rem;
  color: var(--hp-cream-soft);
  line-height: 1.7;
}

/* Section headers */
.hp-head { margin-bottom: 3rem; }
.hp-head--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: end;
  margin-bottom: 3rem;
}
@media (max-width: 860px) { .hp-head--split { grid-template-columns: 1fr; } }

/* Divider */
.hp-rule { width: 100%; height: 1px; background: var(--hp-border); }

/* ============================================================
   BUTTONS
   ============================================================ */
.hp-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--hp-sans);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--hp-radius);
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s var(--hp-ease);
}
.hp-btn--primary {
  background: var(--hp-signal);
  color: #0a1f00;
  font-weight: 600;
  border-color: var(--hp-signal);
}
.hp-btn--primary:hover {
  background: var(--hp-signal-dark);
  border-color: var(--hp-signal-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px var(--hp-signal-glow);
}
.hp-btn--ghost {
  background: transparent;
  color: var(--hp-cream-soft);
  border-color: var(--hp-border);
}
.hp-btn--ghost:hover {
  border-color: rgba(255,255,255,0.2);
  color: var(--hp-cream);
}
body.theme-light .hp-btn--ghost:hover {
  border-color: rgba(0,0,0,0.25);
  color: var(--hp-cream);
}
.hp-btn--sm { padding: 0.5rem 1rem; font-size: 0.8rem; }

.hp-btn-text {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--hp-signal-text);
  text-decoration: none;
  transition: gap 0.2s var(--hp-ease);
}
.hp-btn-text:hover { gap: 0.65rem; }

.hp-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

/* ============================================================
   HEADER — dark-native overrides (body.hp-theme)
   ============================================================ */
body.hp-theme .site-header {
  background: rgba(9,12,20,0.95);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
body.hp-theme .site-header.scrolled {
  box-shadow: 0 2px 20px rgba(0,0,0,0.4);
}
body.hp-theme .brand-name    { color: #e6ddd0; }
body.hp-theme .brand-tagline { color: #5e5d58; }
body.hp-theme .nav-link      { color: #b8af9f; }
body.hp-theme .nav-link:hover,
body.hp-theme .nav-link.is-active { color: #e6ddd0; }
body.hp-theme .nav-link::after    { background: var(--hp-signal); }
body.hp-theme .top-bar {
  background: #060810;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
body.hp-theme .lang-pill-btn,
body.hp-theme .theme-toggle {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
  color: #b8af9f;
}
body.hp-theme .mobile-toggle svg { stroke: #b8af9f; }
body.hp-theme .mobile-nav {
  background: #0c0f18;
  border-top-color: rgba(255,255,255,0.07);
}
body.hp-theme .mobile-nav .nav-link { color: #b8af9f; }
body.hp-theme .mobile-nav .nav-link:hover { color: #e6ddd0; }

/* Header CTA button — use logo green */
body.hp-theme .btn.btn-primary {
  background: var(--hp-signal);
  background-image: none;
  color: #0a1f00;
  box-shadow: none;
  border-radius: var(--hp-radius);
  font-weight: 600;
}
body.hp-theme .btn.btn-primary:hover {
  background: var(--hp-signal-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px var(--hp-signal-glow);
}

/* Light mode header */
body.hp-theme.theme-light .site-header {
  background: rgba(244,246,249,0.96);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
body.hp-theme.theme-light .brand-name    { color: #0f1117; }
body.hp-theme.theme-light .brand-tagline { color: #8b909e; }
body.hp-theme.theme-light .nav-link      { color: #3d4455; }
body.hp-theme.theme-light .nav-link:hover,
body.hp-theme.theme-light .nav-link.is-active { color: #0f1117; }
body.hp-theme.theme-light .top-bar {
  background: #e4e7f0;
  border-bottom: 1px solid rgba(0,0,0,0.07);
  color: #3d4455;
}
body.hp-theme.theme-light .top-bar-right { color: #0f1117; }
body.hp-theme.theme-light .lang-pill-btn,
body.hp-theme.theme-light .theme-toggle {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.12);
  color: #3d4455;
}
body.hp-theme.theme-light .mobile-toggle svg { stroke: #3d4455; }
body.hp-theme.theme-light .mobile-nav {
  background: #f4f6f9;
  border-top-color: rgba(0,0,0,0.08);
}
body.hp-theme.theme-light .mobile-nav .nav-link { color: #3d4455; }

/* ============================================================
   LIGHT/DARK TOGGLE BUTTON — in nav
   ============================================================ */
.hp-theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.7rem;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: #b8af9f;
  font-size: 0.78rem;
  font-family: var(--hp-sans);
  cursor: pointer;
  transition: all 0.18s;
  white-space: nowrap;
}
.hp-theme-toggle-btn:hover {
  border-color: rgba(255,255,255,0.22);
  color: #e6ddd0;
  background: rgba(255,255,255,0.07);
}
.hp-theme-toggle-btn .hp-toggle-icon { font-size: 0.85rem; line-height: 1; }

body.hp-theme.theme-light .hp-theme-toggle-btn {
  border-color: rgba(0,0,0,0.14);
  background: rgba(0,0,0,0.04);
  color: #3d4455;
}
body.hp-theme.theme-light .hp-theme-toggle-btn:hover {
  border-color: rgba(0,0,0,0.22);
  color: #0f1117;
}

/* ============================================================
   CLIENT PORTAL NAV BUTTON
   ============================================================ */
.hp-portal-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border-radius: 100px;
  border: 1px solid var(--hp-signal-line);
  background: var(--hp-signal-glow);
  color: var(--hp-signal-text);
  font-size: 0.8rem;
  font-family: var(--hp-sans);
  font-weight: 500;
  text-decoration: none;
  transition: all 0.18s;
  white-space: nowrap;
}
.hp-portal-nav-btn:hover {
  border-color: var(--hp-signal);
  background: rgba(113,188,64,0.15);
  color: var(--hp-signal);
}
.hp-portal-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--hp-signal);
  flex-shrink: 0;
}
/* Hide on mobile */
@media (max-width: 880px) {
  .hp-portal-nav-btn   { display: none; }
  .hp-theme-toggle-btn { display: none; }
}

/* ============================================================
   1. HERO
   ============================================================ */
.hp-hero {
  position: relative;
  overflow: hidden;
  padding: 5.5rem 0 4.5rem;
  background: var(--hp-bg-ink);
}
.hp-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
}
.hp-hero::after {
  content: '';
  position: absolute;
  top: -160px; left: -80px;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(113,188,64,0.06) 0%, transparent 65%);
  pointer-events: none;
}
.hp-hero .hp-shell { position: relative; z-index: 1; }

.hp-hero-layout {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 3.5rem;
  align-items: center;
}
@media (max-width: 1100px) {
  .hp-hero-layout { grid-template-columns: 1fr 360px; gap: 2.5rem; }
}
@media (max-width: 1060px) {
  .hp-hero-layout { grid-template-columns: 1fr; gap: 3rem; }
}

/* Hero tag */
.hp-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--hp-signal-glow);
  border: 1px solid var(--hp-signal-line);
  border-radius: 100px;
  padding: 0.28rem 0.85rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hp-signal-text);
  margin-bottom: 1.75rem;
}
.hp-hero-tag::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--hp-signal);
  flex-shrink: 0;
}

/* Proof badges */
.hp-hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.5rem 0 2rem;
}
.hp-proof-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.775rem;
  color: var(--hp-cream-soft);
  background: var(--hp-bg-card);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius);
  padding: 0.3rem 0.75rem;
  white-space: nowrap;
}
@media (max-width: 640px) { .hp-proof-item { white-space: normal; } }
.hp-proof-item svg {
  width: 11px; height: 11px;
  flex-shrink: 0;
  color: var(--hp-signal);
}

/* Hero card */
.hp-hero-card {
  background: var(--hp-bg-card);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius-lg);
  padding: 1.6rem;
  position: relative;
  overflow: hidden;
}
.hp-hero-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--hp-signal) 0%, transparent 60%);
}

.hp-card-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hp-signal-text);
  margin-bottom: 1.25rem;
}

/* Metrics */
.hp-metrics {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  background: var(--hp-border);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius);
  overflow: hidden;
  gap: 1px;
  margin-bottom: 1.4rem;
}
.hp-metric {
  background: var(--hp-bg-lift);
  padding: 0.9rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.hp-metric + .hp-metric { border-left: 1px solid var(--hp-border); }
.hp-metric-key {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hp-cream-muted);
}
.hp-metric-val {
  font-family: var(--hp-serif);
  font-size: 1.9rem;
  color: var(--hp-cream);
  line-height: 1;
}
.hp-metric-note {
  font-size: 0.64rem;
  color: var(--hp-cream-muted);
}

/* Cred list */
.hp-cred-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.4rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--hp-border);
}
.hp-cred-item {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.775rem;
  color: var(--hp-cream-soft);
  line-height: 1.4;
}
.hp-cred-item svg {
  width: 12px; height: 12px;
  color: var(--hp-signal);
  flex-shrink: 0;
  margin-top: 1px;
}

/* Pills */
.hp-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.hp-pill {
  font-size: 0.66rem;
  font-weight: 500;
  padding: 0.2rem 0.55rem;
  border-radius: 100px;
  background: var(--hp-bg-lift);
  color: var(--hp-cream-soft);
  border: 1px solid var(--hp-border);
}

/* ============================================================
   2. BUYER OUTCOMES
   ============================================================ */
.hp-outcomes {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  background: var(--hp-border);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius);
  overflow: hidden;
  gap: 1px;
}
@media (max-width: 860px) { .hp-outcomes { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) { .hp-outcomes { grid-template-columns: 1fr; } }

.hp-outcome {
  background: var(--hp-bg-card);
  padding: 2rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: background 0.2s;
}
.hp-outcome:hover { background: var(--hp-bg-lift); }

/* Numbers: subtle watermark, real color (no text-stroke) */
.hp-outcome-num {
  font-family: var(--hp-serif);
  font-size: 2.5rem;
  line-height: 1;
  color: rgba(113,188,64,0.12);
  user-select: none;
}
body.theme-light .hp-outcome-num { color: rgba(78,138,34,0.1); }

.hp-outcome-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--hp-cream);
  line-height: 1.35;
}
.hp-outcome-body {
  font-size: 0.8rem;
  color: var(--hp-cream-soft);
  line-height: 1.65;
}

/* ============================================================
   3. OPERATOR MODEL
   ============================================================ */
.hp-operator-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}
@media (max-width: 900px) { .hp-operator-layout { grid-template-columns: 1fr; gap: 3rem; } }

.hp-prose p {
  font-size: 0.925rem;
  color: var(--hp-cream-soft);
  line-height: 1.8;
  margin-bottom: 1.15rem;
}
.hp-prose p:last-of-type { margin-bottom: 1.75rem; }
.hp-prose strong { color: var(--hp-cream); font-weight: 600; }

/* Compare table */
.hp-compare {
  background: var(--hp-bg-card);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius);
  overflow: hidden;
  font-size: 0.8rem;
}
.hp-compare-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
}
.hp-compare-row + .hp-compare-row { border-top: 1px solid var(--hp-border); }
.hp-compare-cell {
  padding: 0.8rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--hp-cream-soft);
}
.hp-compare-cell + .hp-compare-cell { border-left: 1px solid var(--hp-border); }
.hp-compare-row:first-child .hp-compare-cell {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hp-cream-muted);
  background: var(--hp-bg-lift);
  padding: 0.65rem 1rem;
}
.hp-compare-cell--ours   { color: var(--hp-signal-text); font-weight: 500; }
.hp-compare-cell--theirs { color: var(--hp-cream-muted); }
.hp-compare-cell svg { width: 12px; height: 12px; flex-shrink: 0; }
@media (max-width: 760px) {
  .hp-compare { font-size: 0.73rem; }
  .hp-compare-cell { padding: 0.6rem 0.7rem; }
}

/* ============================================================
   4. TRUST STRIP
   ============================================================ */
.hp-trust-strip {
  background: var(--hp-bg-ink);
  border-top: 1px solid var(--hp-border);
  border-bottom: 1px solid var(--hp-border);
  padding: 2.25rem 0;
}
.hp-trust-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  background: var(--hp-border);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius);
  overflow: hidden;
  gap: 1px;
}
@media (max-width: 760px)  { .hp-trust-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px)  { .hp-trust-grid { grid-template-columns: 1fr; } }

.hp-trust-cell {
  background: var(--hp-bg-card);
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.hp-trust-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hp-cream-muted);
}
.hp-trust-value {
  font-family: var(--hp-serif);
  font-size: 1rem;
  color: var(--hp-cream);
  line-height: 1.3;
}
.hp-trust-sub {
  font-size: 0.7rem;
  color: var(--hp-cream-soft);
  line-height: 1.5;
  margin-top: 0.1rem;
}
@media (max-width: 860px) {
  .hp-trust-value { font-size: 0.875rem; }
  .hp-trust-sub   { font-size: 0.65rem; }
}

/* ============================================================
   5. SERVICE GRID
   ============================================================ */
.hp-service-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  background: var(--hp-border);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius);
  overflow: hidden;
  gap: 1px;
}
@media (max-width: 900px) { .hp-service-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 540px) { .hp-service-grid { grid-template-columns: 1fr; } }

/* Orphan last card on 2-col layout */
@media (min-width: 541px) and (max-width: 900px) {
  .hp-svc-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.hp-svc-card {
  background: var(--hp-bg-card);
  padding: 1.75rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-decoration: none;
  transition: background 0.18s;
}
.hp-svc-card:hover { background: var(--hp-bg-lift); }
.hp-svc-card:hover .hp-svc-arrow { opacity: 1; transform: translateX(0); }

.hp-svc-tag {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hp-signal-text);
}
.hp-svc-title {
  font-family: var(--hp-serif);
  font-size: 1.1rem;
  color: var(--hp-cream);
  font-weight: 400;
  line-height: 1.3;
}
.hp-svc-body {
  font-size: 0.8rem;
  color: var(--hp-cream-soft);
  line-height: 1.65;
  flex: 1;
}
.hp-svc-arrow {
  font-size: 0.78rem;
  color: var(--hp-signal-text);
  opacity: 0;
  transform: translateX(-4px);
  transition: all 0.18s var(--hp-ease);
}

/* ============================================================
   6. USE CASE GRID
   ============================================================ */
.hp-usecase-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 1.25rem;
}
@media (max-width: 680px) { .hp-usecase-grid { grid-template-columns: 1fr; } }
@media (min-width: 681px) {
  .hp-usecase-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.hp-usecase-card {
  background: var(--hp-bg-card);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  text-decoration: none;
  transition: border-color 0.18s, background 0.18s;
}
.hp-usecase-card:hover {
  border-color: var(--hp-signal-line);
  background: var(--hp-bg-lift);
}
.hp-usecase-eyebrow {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--hp-cream-muted);
}
.hp-usecase-title {
  font-family: var(--hp-serif);
  font-size: 1.2rem;
  color: var(--hp-cream);
  font-weight: 400;
  line-height: 1.25;
}
.hp-usecase-body {
  font-size: 0.8rem;
  color: var(--hp-cream-soft);
  line-height: 1.65;
}
.hp-usecase-link {
  font-size: 0.78rem;
  color: var(--hp-signal-text);
  font-weight: 500;
  margin-top: 0.35rem;
}

/* ============================================================
   7. COUNTRY SECTION
   ============================================================ */
.hp-country-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 3rem;
  align-items: start;
}
@media (max-width: 900px) { .hp-country-layout { grid-template-columns: 1fr; } }

.hp-ctag-grid { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.hp-ctag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.85rem;
  background: var(--hp-bg-card);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius);
  font-size: 0.78rem;
  color: var(--hp-cream-soft);
  text-decoration: none;
  transition: all 0.15s;
}
.hp-ctag:hover {
  border-color: var(--hp-signal-line);
  color: var(--hp-cream);
  background: var(--hp-bg-lift);
}
.hp-ctag--featured {
  border-color: var(--hp-signal-line);
  color: var(--hp-signal-text);
  background: var(--hp-signal-glow);
}
.hp-ctag--featured:hover { border-color: var(--hp-signal); }
.hp-ctag--more {
  color: var(--hp-cream-muted);
  font-style: italic;
  border-style: dashed;
}

/* Sidebar */
.hp-country-sidebar {
  background: var(--hp-bg-card);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius);
  overflow: hidden;
  position: sticky;
  top: 4.5rem;       /* matches actual header height */
}
.hp-cs-head {
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--hp-border);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hp-signal-text);
  background: var(--hp-bg-lift);
}
.hp-cs-item {
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--hp-border);
}
.hp-cs-item:last-child { border-bottom: none; }
.hp-cs-country {
  font-weight: 600;
  font-size: 0.83rem;
  color: var(--hp-cream);
  margin-bottom: 0.2rem;
}
.hp-cs-detail {
  font-size: 0.74rem;
  color: var(--hp-cream-soft);
  line-height: 1.55;
}

/* ============================================================
   8. CASE PROOF
   ============================================================ */
.hp-proof-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 1.25rem;
  align-items: stretch;
}
@media (max-width: 680px) { .hp-proof-grid { grid-template-columns: 1fr; } }

.hp-proof-card {
  background: var(--hp-bg-card);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  position: relative;
  overflow: hidden;
}
.hp-proof-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--hp-signal) 0%, transparent 50%);
}
.hp-proof-tag {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hp-amber);
}
.hp-proof-title {
  font-family: var(--hp-serif);
  font-size: 1.1rem;
  color: var(--hp-cream);
  font-weight: 400;
  line-height: 1.3;
}
.hp-proof-stats {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.hp-proof-stat-val {
  font-family: var(--hp-serif);
  font-size: 1.55rem;
  color: var(--hp-cream);
  line-height: 1;
}
.hp-proof-stat-key {
  font-size: 0.65rem;
  color: var(--hp-cream-soft);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 0.2rem;
}
.hp-proof-body {
  font-size: 0.8rem;
  color: var(--hp-cream-soft);
  line-height: 1.65;
}
.hp-proof-flag {
  font-size: 0.74rem;
  color: var(--hp-cream-muted);
  font-style: italic;
  margin-top: 0.25rem;
}

/* ============================================================
   9. PROCESS STEPS
   ============================================================ */
.hp-process {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius);
  overflow: hidden;
  background: var(--hp-border);
  gap: 1px;
}
@media (max-width: 900px) {
  .hp-process { grid-template-columns: 1fr; }
  .hp-step { border-left: 2px solid var(--hp-signal-line); }
}

.hp-step {
  background: var(--hp-bg-card);
  padding: 1.75rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.hp-step-num {
  font-family: var(--hp-serif);
  font-size: 1.85rem;
  line-height: 1;
  color: rgba(113,188,64,0.12);
  user-select: none;
}
body.theme-light .hp-step-num { color: rgba(78,138,34,0.1); }
.hp-step-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--hp-cream);
  line-height: 1.3;
}
.hp-step-body {
  font-size: 0.775rem;
  color: var(--hp-cream-soft);
  line-height: 1.6;
  flex: 1;
}
.hp-step-tag {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hp-signal-text);
  background: var(--hp-signal-glow);
  border: 1px solid var(--hp-signal-line);
  border-radius: 100px;
  padding: 0.18rem 0.55rem;
}

/* ============================================================
   10. CTA MATRIX
   ============================================================ */
.hp-cta-matrix {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 1.25rem;
}
@media (max-width: 680px) { .hp-cta-matrix { grid-template-columns: 1fr; } }

.hp-cta-card {
  border-radius: var(--hp-radius);
  padding: 2.5rem 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.hp-cta-card--primary {
  background: var(--hp-signal-glow);
  border: 1px solid var(--hp-signal-line);
}
.hp-cta-card--secondary {
  background: var(--hp-bg-card);
  border: 1px solid var(--hp-border);
}
.hp-cta-eyebrow {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hp-signal-text);
}
.hp-cta-title {
  font-family: var(--hp-serif);
  font-size: 1.35rem;
  color: var(--hp-cream);
  font-weight: 400;
  line-height: 1.25;
}
.hp-cta-body {
  font-size: 0.825rem;
  color: var(--hp-cream-soft);
  line-height: 1.72;
}
.hp-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.4rem;
}

/* ============================================================
   11. PORTAL STRIP
   ============================================================ */
.hp-portal {
  background: var(--hp-bg-ink);
  border-top: 1px solid var(--hp-border);
  border-bottom: 1px solid var(--hp-border);
  padding: 1.75rem 0;
}
.hp-portal-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.hp-portal-text h3 {
  font-family: var(--hp-serif);
  font-size: 1rem;
  color: var(--hp-cream);
  font-weight: 400;
  margin-bottom: 0.25rem;
}
.hp-portal-text p { font-size: 0.78rem; color: var(--hp-cream-muted); }
.hp-portal-badges {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
}
.hp-portal-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--hp-bg-card);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius);
  padding: 0.4rem 0.85rem;
  font-size: 0.72rem;
  color: var(--hp-cream-soft);
}
.hp-portal-badge svg { width: 12px; height: 12px; flex-shrink: 0; }

/* ============================================================
   12. FOOTER
   ============================================================ */
.hp-footer {
  background: var(--hp-bg-ink);
  border-top: 1px solid var(--hp-border);
  padding: 3.5rem 0 2rem;
}
.hp-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3,1fr);
  gap: 3rem;
  margin-bottom: 2.5rem;
}
@media (max-width: 960px) { .hp-footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 520px)  { .hp-footer-grid { grid-template-columns: 1fr; } }

.hp-footer-brand p {
  font-size: 0.8rem;
  color: var(--hp-cream-muted);
  line-height: 1.7;
  margin-top: 0.75rem;
  max-width: 26ch;
}
.hp-footer-brand-name {
  font-family: var(--hp-serif);
  font-size: 1.05rem;
  color: var(--hp-cream);
}
.hp-footer-social {
  display: flex;
  gap: 1rem;
  margin-top: 1.1rem;
}
.hp-footer-social a {
  font-size: 0.73rem;
  color: var(--hp-cream-muted);
  text-decoration: none;
  transition: color 0.15s;
}
.hp-footer-social a:hover { color: var(--hp-cream-soft); }

.hp-footer-col-title {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hp-cream-muted);
  margin-bottom: 0.9rem;
}
.hp-footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.hp-footer-links a {
  font-size: 0.8rem;
  color: var(--hp-cream-soft);
  text-decoration: none;
  transition: color 0.15s;
}
.hp-footer-links a:hover { color: var(--hp-cream); }

.hp-cred-cluster { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; }
.hp-cred-entry { font-size: 0.73rem; color: var(--hp-cream-muted); line-height: 1.5; }
.hp-cred-entry strong { color: var(--hp-cream-soft); font-weight: 500; }

.hp-footer-bottom {
  border-top: 1px solid var(--hp-border);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.hp-footer-bottom p { font-size: 0.73rem; color: var(--hp-cream-muted); }
.hp-footer-bottom-links { display: flex; gap: 1.25rem; }
.hp-footer-bottom-links a {
  font-size: 0.73rem;
  color: var(--hp-cream-muted);
  text-decoration: none;
  transition: color 0.15s;
}
.hp-footer-bottom-links a:hover { color: var(--hp-cream-soft); }

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes hp-fadeup {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hp-animate  { animation: hp-fadeup 0.55s cubic-bezier(0.16,1,0.3,1) both; }
.hp-d1 { animation-delay: 0.08s; }
.hp-d2 { animation-delay: 0.16s; }
.hp-d3 { animation-delay: 0.25s; }
.hp-d4 { animation-delay: 0.35s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .hp-section { padding: 3.5rem 0; }
  .hp-hero    { padding: 3.5rem 0 3rem; }
  .hp-head--split { margin-bottom: 2rem; }
}