/*
Theme Name: Trilly Co
Theme URI: https://trillycorp.com/
Author: Trilly Co
Version: 23.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: trillyco
Description: People operations & hiring support for small businesses and startups. ICP-differentiated landing page with HubSpot routing.
*/

@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700,900&f[]=cabinet-grotesk@500,700,800&f[]=clash-display@600,700&display=swap');

/* ──────────────────────────────────────────────
   DESIGN TOKENS
   ────────────────────────────────────────────── */
:root,
[data-theme="light"] {
  /* ── fluid type scale ── */
  --text-xs:   clamp(0.72rem,  0.66rem + 0.28vw, 0.82rem);
  --text-sm:   clamp(0.875rem, 0.82rem + 0.28vw, 0.975rem);
  --text-base: clamp(1rem,     0.96rem + 0.2vw,  1.0875rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.625vw, 1.375rem);
  --text-xl:   clamp(1.375rem, 1.1rem  + 1.375vw, 2rem);
  --text-2xl:  clamp(1.875rem, 1.25rem + 3.125vw, 3.375rem);
  --text-3xl:  clamp(2.625rem, 1rem    + 8.125vw, 5.875rem);

  /* ── 4px spacing grid ── */
  --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem;  --sp-10: 2.5rem;
  --sp-12: 3rem; --sp-14: 3.5rem; --sp-16: 4rem;
  --sp-20: 5rem; --sp-24: 6rem;

  /* ── surfaces — warm sand ── */
  --bg:     #f6f4ef;
  --surf:   #faf9f6;
  --surf2:  #f0ece3;
  --surf3:  #e8e2d8;
  --border: color-mix(in oklab, #1a1612 10%, transparent);
  --divider:color-mix(in oklab, #1a1612 7%, transparent);

  /* ── text ── */
  --tx:       #14110d;
  --tx-muted: #4a453c;
  --tx-faint: #7a7368;
  --tx-inv:   #faf8f3;

  /* ── primary accent — deep teal ── */
  --accent:       #0b5c62;
  --accent-hover: #09474c;
  --accent-soft:  color-mix(in oklab, #0b5c62 9%, var(--surf));

  /* ── SMB accent — warm amber ── */
  --smb:        #8b5e1a;
  --smb-hover:  #714d13;
  --smb-soft:   color-mix(in oklab, #8b5e1a 9%, var(--surf));
  --smb-mid:    color-mix(in oklab, #8b5e1a 18%, var(--surf));

  /* ── startup accent — slate blue ── */
  --startup:       #1a4a7a;
  --startup-hover: #143c64;
  --startup-soft:  color-mix(in oklab, #1a4a7a 9%, var(--surf));

  /* ── gold ── */
  --gold:      #b08818;
  --gold-soft: color-mix(in oklab, #b08818 12%, var(--surf));

  /* ── elevation ── */
  --sh-sm: 0 1px 3px rgb(0 0 0/.06), 0 1px 2px rgb(0 0 0/.04);
  --sh-md: 0 4px 16px rgb(0 0 0/.07), 0 2px 6px rgb(0 0 0/.04);
  --sh-lg: 0 12px 48px rgb(0 0 0/.11), 0 4px 16px rgb(0 0 0/.06);
  --sh-xl: 0 24px 80px rgb(0 0 0/.14), 0 8px 24px rgb(0 0 0/.08);

  /* ── radii ── */
  --r-sm: .375rem; --r-md: .625rem; --r-lg: 1rem;
  --r-xl: 1.5rem;  --r-2xl: 2rem;  --r-full: 9999px;

  /* ── fonts ── */
  --font-body:    'Satoshi', system-ui, sans-serif;
  --font-display: 'Satoshi', system-ui, sans-serif;
  --font-accent:  'Satoshi', system-ui, sans-serif;

  /* ── heading scale ── */
  --h1-size: clamp(2.2rem, 3.8vw, 3.6rem);
  --h2-size: clamp(1.75rem, 3vw, 2.8rem);
  --h3-size: clamp(1.375rem, 2.2vw, 1.875rem);
  --h1-weight: 800;
  --h2-weight: 800;
  --h3-weight: 800;

  /* ── spacing system ── */
  --space-1: .25rem; --space-2: .5rem;  --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-7: 1.75rem; --space-8: 2rem;
  --section-gap: var(--space-8);
  --card-padding: var(--space-6);

  --ease: cubic-bezier(.16,1,.3,1);
  --dur:  200ms;
  --content: 1160px;
}

/* ── dark theme ── */
[data-theme="dark"] {
  --bg:     #131210;
  --surf:   #1b1916;
  --surf2:  #22201d;
  --surf3:  #2b2925;
  --border: color-mix(in oklab, #f0ece3 9%, transparent);
  --divider:color-mix(in oklab, #f0ece3 6%, transparent);
  --tx:      #ede8df;
  --tx-muted:#ddd6ca;
  --tx-faint:#c9c1b4;
  --tx-inv:  #131210;
  --accent:       #3d8f95;
  --accent-hover: #57a4aa;
  --accent-soft:  color-mix(in oklab, #5fa8ae 10%, var(--surf));
  --smb:        #d4943a;
  --smb-hover:  #e8a84e;
  --smb-soft:   color-mix(in oklab, #d4943a 10%, var(--surf));
  --smb-mid:    color-mix(in oklab, #d4943a 18%, var(--surf));
  --startup:       #5b91d4;
  --startup-hover: #74a8e6;
  --startup-soft:  color-mix(in oklab, #5b91d4 10%, var(--surf));
  --gold:      #d4a830;
  --gold-soft: color-mix(in oklab, #d4a830 12%, var(--surf));
  --sh-sm: 0 1px 3px rgb(0 0 0/.25);
  --sh-md: 0 4px 16px rgb(0 0 0/.32);
  --sh-lg: 0 12px 48px rgb(0 0 0/.42);
  --sh-xl: 0 24px 80px rgb(0 0 0/.52);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg:#131210; --surf:#1b1916; --surf2:#22201d; --surf3:#2b2925;
    --border:color-mix(in oklab,#f0ece3 9%,transparent);
    --divider:color-mix(in oklab,#f0ece3 6%,transparent);
    --tx:#ede8df; --tx-muted:#c9c1b4; --tx-faint:#8a8377; --tx-inv:#131210;
    --accent:#3d8f95; --accent-hover:#57a4aa;
    --accent-soft:color-mix(in oklab,#5fa8ae 10%,#1b1916);
    --smb:#d4943a; --smb-hover:#e8a84e;
    --smb-soft:color-mix(in oklab,#d4943a 10%,#1b1916);
    --smb-mid:color-mix(in oklab,#d4943a 18%,#1b1916);
    --startup:#5b91d4; --startup-hover:#74a8e6;
    --startup-soft:color-mix(in oklab,#5b91d4 10%,#1b1916);
    --gold:#d4a830;
    --gold-soft:color-mix(in oklab,#d4a830 12%,#1b1916);
    --sh-sm:0 1px 3px rgb(0 0 0/.25);
    --sh-md:0 4px 16px rgb(0 0 0/.32);
    --sh-lg:0 12px 48px rgb(0 0 0/.42);
    --sh-xl:0 24px 80px rgb(0 0 0/.52);
  }
}

/* ──────────────────────────────────────────────
   RESET
   ────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--tx);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
}
h1,h2,h3,h4 { line-height: 1.12; text-wrap: balance; }
h1 { font-size: var(--h1-size); font-weight: var(--h1-weight); }
h2 { font-size: var(--h2-size); font-weight: var(--h2-weight); }
h3 { font-size: var(--h3-size); font-weight: var(--h3-weight); }
h1, h2, h3 { margin-block-end: var(--sp-3); }
p { line-height: 1.75; color: var(--tx-muted); max-width: 68ch; }
p + p { margin-top: var(--sp-3); }
a { text-decoration: none; color: inherit; }
img,svg { display: block; max-width: 100%; height: auto; }
button { background: none; border: 0; cursor: pointer; font: inherit; color: inherit; }
ul { list-style: none; }
input,textarea,select { font: inherit; color: inherit; }
:focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* ──────────────────────────────────────────────
   LAYOUT — consistent section rhythm
   ────────────────────────────────────────────── */
.wrap { width: min(calc(100% - var(--sp-8)), var(--content)); margin-inline: auto; }
.sec  { padding-block: var(--sp-12); }
.sec-tight { padding-block: var(--sp-8); }

/* consistent section spacing */
main > section + section { margin-top: 0; }

/* skip link */
.skip {
  position: absolute; left: -99em; top: var(--sp-4);
  background: var(--accent); color: var(--tx-inv);
  padding: .6rem 1rem; border-radius: var(--r-md);
  font-weight: 700; z-index: 9999;
}
.skip:focus { left: var(--sp-4); }

/* ──────────────────────────────────────────────
   NAVIGATION
   ────────────────────────────────────────────── */
.site-nav {
  position: sticky; top: 0; z-index: 800;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--divider);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-6); padding-block: .9rem;
}

/* brand */
.brand {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--font-display); font-size: var(--text-base);
  font-weight: 800; letter-spacing: -.04em; color: var(--tx);
  flex-shrink: 0;
}
.brand-logo-wrap {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: .875rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--surf);
  border: 1px solid var(--border);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.brand:hover .brand-logo-wrap {
  transform: translateY(-1px);
  box-shadow: var(--sh-md);
}
.brand-logo-img {
  width: 85%;
  height: 85%;
  object-fit: contain;
  display: block;
}
[data-theme="dark"] .brand-logo-wrap {
  background: var(--surf2);
  border-color: var(--border);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .brand-logo-wrap {
    background: var(--surf2);
    border-color: var(--border);
  }
}
.brand-sub {
  font-family: var(--font-body); font-size: var(--text-xs);
  font-weight: 700; color: var(--tx-muted);
  letter-spacing: .02em; display: block; margin-top: .1rem;
}

/* desktop nav links */
.nav-links {
  display: flex; align-items: center; gap: var(--sp-8);
}
.nav-links a {
  font-size: var(--text-sm); font-weight: 600; color: var(--tx-muted);
  transition: color var(--dur) var(--ease);
  letter-spacing: .01em;
}
.nav-links a:hover { color: var(--tx); font-weight: 700; }

/* right side controls */
.nav-right { display: flex; align-items: center; gap: var(--sp-3); }
.theme-btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surf);
  display: grid; place-items: center;
  color: var(--tx);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.theme-btn:hover { background: var(--surf2); color: var(--tx); }
[data-theme="dark"] .theme-btn,
:root:not([data-theme]) .theme-btn {
  color: var(--tx);
}

/* nav CTA — visible at tablet+ */
.nav-cta {
  display: none;
}
@media (min-width: 640px) {
  .nav-cta {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .65rem 1.25rem;
    border-radius: var(--r-full);
    background: var(--accent);
    color: white;
    font-size: var(--text-sm);
    font-weight: 800;
    line-height: 1;
    transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    white-space: nowrap;
    box-shadow: var(--sh-sm);
  }
  .nav-cta:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: var(--sh-md); }
}

/* mobile hamburger */
.menu-btn {
  display: none;
  width: 44px; height: 44px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--surf);
  place-items: center; color: var(--tx-muted);
  transition: background var(--dur) var(--ease);
}
.menu-btn:hover { background: var(--surf2); color: var(--tx); }
.menu-btn svg { pointer-events: none; }

/* mobile drawer */
.mobile-menu {
  display: none;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
  border-top: 1px solid var(--divider);
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--tx-muted);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.mobile-menu a:hover { background: var(--surf2); color: var(--tx); }
.mobile-menu .mobile-cta {
  margin-top: var(--sp-3);
  text-align: center;
  background: var(--smb);
  color: white;
  border-radius: var(--r-full);
  padding: var(--sp-4);
}
.mobile-menu .mobile-cta:hover { background: var(--smb-hover); }

/* ──────────────────────────────────────────────
   EYEBROW / LABELS
   ────────────────────────────────────────────── */
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .44rem .9rem;
  border-radius: var(--r-full);
  background: var(--accent-soft);
  border: 1px solid color-mix(in oklab, var(--accent) 18%, var(--border));
  font-size: var(--text-xs); font-weight: 800; letter-spacing: .06em;
  text-transform: none; color: var(--accent); line-height: 1;
}
.eyebrow .dot {
  width: .45rem; height: .45rem; border-radius: 50%;
  background: var(--gold); flex-shrink: 0;
}
.eyebrow-smb {
  background: var(--smb-soft);
  border-color: color-mix(in oklab, var(--smb) 18%, var(--border));
  color: var(--smb);
}
.eyebrow-startup {
  background: var(--startup-soft);
  border-color: color-mix(in oklab, var(--startup) 18%, var(--border));
  color: var(--startup);
}

/* ──────────────────────────────────────────────
   SECTION HEADER
   ────────────────────────────────────────────── */
.s-head {
  display: flex; flex-direction: column; gap: var(--sp-3);
  margin-bottom: var(--sp-10);
}
.s-head h2 {
  font-family: var(--font-display);
  font-size: var(--h2-size);
  font-weight: var(--h2-weight); letter-spacing: -.04em;
  color: var(--tx); max-width: 20ch;
}
.s-head p { font-size: var(--text-lg); max-width: 58ch; line-height: 1.65; }

/* ──────────────────────────────────────────────
   BUTTONS
   ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 52px; padding: .875rem 1.75rem;
  border-radius: var(--r-full);
  font-size: var(--text-sm); font-weight: 800; line-height: 1;
  transition:
    transform var(--dur) var(--ease),
    background var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
  white-space: nowrap;
  box-shadow: var(--sh-sm);
}
.btn:hover  { transform: translateY(-2px); box-shadow: var(--sh-md); }
.btn:active { transform: translateY(0); box-shadow: var(--sh-sm); }

.btn-primary { background: var(--accent); color: white; box-shadow: var(--sh-md); }
.btn-primary:hover { background: var(--accent-hover); box-shadow: var(--sh-lg); }

/* SMB-branded primary */
.btn-smb { background: var(--smb); color: #fff !important; box-shadow: var(--sh-md); }
.btn-smb:hover { background: var(--smb-hover); color: #fff !important; box-shadow: var(--sh-lg); }

/* Startup-branded primary */
.btn-startup { background: var(--startup); color: #fff !important; box-shadow: var(--sh-md); }
.btn-startup:hover { background: var(--startup-hover); color: #fff !important; box-shadow: var(--sh-lg); }

.btn-outline {
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--tx);
}
.btn-outline:hover { background: var(--surf2); }

.btn-ghost {
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--tx-muted);
}
.btn-ghost:hover { border-color: var(--tx-muted); color: var(--tx); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.btn-row.col { flex-direction: column; align-items: flex-start; }

/* ──────────────────────────────────────────────
   HERO
   ────────────────────────────────────────────── */
.hero {
  padding-top: var(--sp-10);
  padding-bottom: var(--sp-12);
  background: var(--bg);
  border-bottom: 1px solid var(--divider);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-10);
  align-items: start;
}

.hero-kicker { margin-bottom: var(--sp-4); }
.hero-h1 {
  font-family: var(--font-display);
  font-size: var(--h1-size);
  font-weight: var(--h1-weight); letter-spacing: -.04em;
  color: var(--tx); max-width: 14ch; line-height: 1.08;
}
.hero-lead {
  margin-top: var(--sp-6);
  font-size: var(--text-lg);
  color: var(--tx-muted); max-width: 54ch;
  line-height: 1.65;
}
.hero-title-link {
  display: inline-block;
}
.hero-title-link:hover {
  color: inherit;
}
.hero-link,
.hero-title-link {
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.hero-link:hover,
.hero-title-link:hover {
  transform: translateY(-1px);
}
.hero-cta-copy {
  margin-top: var(--sp-6);
  font-size: var(--text-base);
  color: var(--tx);
}
.hero-cta-copy strong {
  font-weight: 900;
}
.hero-btns { margin-top: var(--sp-5); }
.hero-micro {
  margin-top: var(--sp-5);
  font-size: var(--text-xs); color: var(--tx-faint);
  font-weight: 600;
}

/* right panel */
.hero-panel {
  background: var(--surf);
  border: 1px solid var(--border); border-radius: var(--r-xl);
  padding: var(--sp-6);
  box-shadow: var(--sh-md); position: relative; overflow: hidden;
}
.hero-panel::before {
  content: ''; position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 80% 60% at 85% 15%, color-mix(in oklab, var(--smb) 8%, transparent) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 15% 85%, color-mix(in oklab, var(--accent) 6%, transparent) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.hero-panel > * {
  position: relative;
  z-index: 1;
}

.panel-eyebrow { margin-bottom: var(--sp-4); }
.panel-brand {
  margin-bottom: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  letter-spacing: -.03em;
}
.panel-brand a {
  color: var(--tx);
}

/* signal cards 2×2 */
.signal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.signal-card {
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  background: color-mix(in oklab, var(--surf2) 90%, var(--accent) 4%);
  border: 1px solid var(--border);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  position: relative;
}
.signal-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r-md);
  border: 1.5px solid transparent;
  transition: border-color var(--dur) var(--ease);
  pointer-events: none;
}
.signal-link:hover::after {
  border-color: color-mix(in oklab, var(--accent) 45%, var(--border));
}
.signal-link:hover {
  background: var(--surf2);
  border-color: var(--border);
  transform: translateY(-1px);
}
.signal-link:hover strong {
  color: var(--accent);
}
[data-theme="dark"] .signal-link:hover {
  background: var(--surf3);
}
[data-theme="dark"] .signal-link:hover::after {
  border-color: color-mix(in oklab, var(--accent) 35%, var(--border));
}
.signal-card strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-sm); font-weight: 800; letter-spacing: -.01em;
  color: var(--tx); margin-bottom: var(--sp-1);
}
.signal-card p {
  font-size: var(--text-xs); color: var(--tx-muted);
  max-width: unset; line-height: 1.5;
}

/* metric strip */
.metric-strip {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
.metric-chip {
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--surf);
  border: 1px solid var(--border);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.metric-chip:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
  border-color: color-mix(in oklab, var(--accent) 25%, var(--border));
}
.metric-chip strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-sm); font-weight: 800; letter-spacing: -.01em;
  color: var(--tx); margin-bottom: 2px; line-height: 1.2;
}
.metric-chip span {
  display: block;
  font-size: var(--text-xs); color: var(--tx-faint);
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  line-height: 1.2;
}
[data-theme="dark"] .eyebrow,
[data-theme="dark"] .panel-eyebrow {
  background: var(--accent);
  border-color: color-mix(in oklab, var(--accent) 72%, white 8%);
  color: #fff;
}
[data-theme="dark"] .signal-card {
  background: color-mix(in oklab, var(--accent) 12%, var(--surf));
  border-color: color-mix(in oklab, var(--accent) 20%, var(--border));
}
[data-theme="dark"] .audience-card.is-smb::before {
  background: conic-gradient(
    from 180deg at 50% 50%,
    color-mix(in oklab, var(--smb) 65%, transparent) 0deg,
    color-mix(in oklab, var(--gold) 45%, transparent) 120deg,
    color-mix(in oklab, var(--smb) 35%, transparent) 240deg,
    color-mix(in oklab, var(--smb) 65%, transparent) 360deg
  );
  opacity: .5;
}
[data-theme="dark"] .audience-card.is-smb:hover::before {
  opacity: .8;
}
[data-theme="dark"] .metric-chip {
  background: var(--surf);
  border-color: var(--border);
}
[data-theme="dark"] .signal-card strong,
[data-theme="dark"] .metric-chip strong {
  color: var(--tx);
}
[data-theme="dark"] .signal-card p,
[data-theme="dark"] .metric-chip span {
  color: var(--tx-muted);
}
[data-theme="dark"] .hero-panel::before {
  background:
    radial-gradient(ellipse 80% 60% at 85% 15%, color-mix(in oklab, var(--smb) 12%, transparent) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 15% 85%, color-mix(in oklab, var(--accent) 8%, transparent) 0%, transparent 70%);
}

/* ──────────────────────────────────────────────
   STAT STRIP
   ────────────────────────────────────────────── */
.stat-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}
.stat-card {
  padding: var(--sp-5) var(--sp-4);
  border-radius: var(--r-xl);
  background: var(--surf);
  border: 1px solid var(--border); box-shadow: var(--sh-sm);
  text-align: center;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
  border-color: color-mix(in oklab, var(--accent) 20%, var(--border));
}
.stat-card .label {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tx-faint);
  display: block; margin-bottom: var(--sp-1);
}
.stat-card strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em;
  color: var(--tx); line-height: 1.1; margin-bottom: var(--sp-2);
}
.stat-card p {
  font-size: var(--text-sm); color: var(--tx-muted);
  max-width: unset; line-height: 1.6;
  margin-inline: auto;
}

/* ──────────────────────────────────────────────
   ICP CHOOSER — primary conversion section
   ────────────────────────────────────────────── */
.icp-section {
  background: var(--surf);
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
}
.icp-intro {
  text-align: center;
  max-width: 52ch;
  margin-inline: auto;
  margin-bottom: var(--sp-8);
}
.icp-intro h2 {
  font-family: var(--font-display);
  font-size: var(--h2-size);
  font-weight: var(--h2-weight); letter-spacing: -.04em;
  color: var(--tx); margin-bottom: var(--sp-4);
}
.icp-intro p { font-size: var(--text-base); margin-inline: auto; }

.icp-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-6); align-items: stretch;
}

/* base audience card */
.audience-card {
  display: flex; flex-direction: column;
  padding: var(--sp-6);
  border-radius: var(--r-xl);
  background: var(--surf);
  border: 1px solid var(--border); box-shadow: var(--sh-sm);
  position: relative; overflow: hidden;
  min-height: 100%;
}
/* SMB card — primary, featured */
.audience-card.is-smb {
  background: linear-gradient(160deg,
    color-mix(in oklab, var(--smb) 7%, var(--surf)) 0%,
    color-mix(in oklab, var(--smb) 3%, var(--surf2)) 100%);
  border: 1.5px solid color-mix(in oklab, var(--smb) 25%, var(--border));
  box-shadow: var(--sh-lg);
  order: -1;
  position: relative;
}
.audience-card.is-smb::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: var(--r-xl);
  padding: 1.5px;
  background: conic-gradient(
    from 180deg at 50% 50%,
    color-mix(in oklab, var(--smb) 55%, transparent) 0deg,
    color-mix(in oklab, var(--gold) 35%, transparent) 120deg,
    color-mix(in oklab, var(--smb) 25%, transparent) 240deg,
    color-mix(in oklab, var(--smb) 55%, transparent) 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  opacity: .7;
  transition: opacity .35s var(--ease);
}
.audience-card.is-smb:hover::before {
  opacity: 1;
}

/* Startup card */
.audience-card.is-startup {
  background: linear-gradient(160deg,
    color-mix(in oklab, var(--startup) 5%, var(--surf)) 0%,
    color-mix(in oklab, var(--startup) 2%, var(--surf2)) 100%);
  border-color: color-mix(in oklab, var(--startup) 14%, var(--border));
}

/* Prominent label badge */
.a-tag {
  display: inline-flex; padding: .35rem .85rem;
  border-radius: var(--r-full);
  font-size: var(--text-xs); font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase; line-height: 1;
  margin-bottom: var(--sp-5); align-self: flex-start;
}
.a-tag-smb {
  background: var(--smb-soft);
  border: 1px solid color-mix(in oklab, var(--smb) 20%, var(--border));
  color: var(--smb);
}
.a-tag-startup {
  background: var(--startup-soft);
  border: 1px solid color-mix(in oklab, var(--startup) 20%, var(--border));
  color: var(--startup);
}

/* SMB BEST FIT badge */
.a-best-fit {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .75rem;
  border-radius: var(--r-full);
  background: var(--smb);
  color: white;
  font-size: calc(var(--text-xs) * .9);
  font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  line-height: 1; align-self: flex-start; margin-bottom: var(--sp-3);
}
.a-best-fit::before { content: '★'; font-size: .7em; }

.audience-card h3 {
  font-family: var(--font-display);
  font-size: var(--h3-size);
  font-weight: var(--h3-weight); letter-spacing: -.03em;
  color: var(--tx); margin-bottom: var(--sp-4); line-height: 1.18;
}

/* card body description */
.a-desc {
  font-size: var(--text-base);
  color: var(--tx-muted);
  line-height: 1.7;
  margin-bottom: var(--sp-5);
}

.audience-card ul {
  display: flex; flex-direction: column; gap: var(--sp-3); flex: 1;
}
.audience-card li {
  position: relative; padding-left: 1.1rem;
  font-size: var(--text-sm); color: var(--tx-muted); line-height: 1.6;
}
.audience-card.is-smb li::before {
  content: ''; position: absolute; left: 0; top: .68rem;
  width: .38rem; height: .38rem; border-radius: 50%;
  background: var(--smb);
}
.audience-card.is-startup li::before {
  content: ''; position: absolute; left: 0; top: .68rem;
  width: .38rem; height: .38rem; border-radius: 50%;
  background: var(--startup);
}

.a-btns {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  margin-top: var(--sp-6);
}

/* ──────────────────────────────────────────────
   SERVICES GRID
   ────────────────────────────────────────────── */
.service-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
}
.service-card {
  padding: var(--sp-6);
  border-radius: var(--r-xl);
  background: var(--surf);
  border: 1px solid var(--border); box-shadow: var(--sh-sm);
  min-height: 100%;
}
.service-icon {
  width: 3.25rem; height: 3.25rem; border-radius: var(--r-lg);
  background: var(--accent-soft);
  display: grid; place-items: center; color: var(--accent);
  margin-bottom: var(--sp-5);
  border: 1px solid color-mix(in oklab, var(--accent) 14%, var(--border));
}
.service-icon svg { width: 1.4rem; height: 1.4rem; }
.service-card h3 {
  font-family: var(--font-display);
  font-size: var(--h3-size);
  font-weight: var(--h3-weight); letter-spacing: -.03em;
  color: var(--tx); margin-bottom: var(--sp-4);
}
.bullet-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.bullet-list li {
  position: relative; padding-left: 1.2rem;
  font-size: var(--text-base); color: var(--tx-muted); line-height: 1.65;
}
.bullet-list li::before {
  content: ''; position: absolute; left: 0; top: .68rem;
  width: .38rem; height: .38rem; border-radius: 50%;
  background: var(--accent);
}

/* ──────────────────────────────────────────────
   INFO PAIR (problem/solution)
   ────────────────────────────────────────────── */
.info-pair {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-6); align-items: stretch;
}
.info-card {
  padding: var(--sp-6);
  border-radius: var(--r-xl);
  background: var(--surf);
  border: 1px solid var(--border); box-shadow: var(--sh-sm);
  min-height: 100%;
}
.info-card h3 {
  font-family: var(--font-display);
  font-size: var(--h3-size);
  font-weight: var(--h3-weight); letter-spacing: -.03em;
  color: var(--tx); margin-bottom: var(--sp-4);
}
.info-card p { font-size: var(--text-base); line-height: 1.75; }

/* ──────────────────────────────────────────────
   PROCESS STEPS
   ────────────────────────────────────────────── */
.process-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}
.process-card {
  padding: var(--sp-5);
  border-radius: var(--r-xl);
  background: var(--surf);
  border: 1px solid var(--border); box-shadow: var(--sh-sm);
  min-height: 100%;
}
.process-num {
  font-family: var(--font-accent); font-size: 1.8rem; font-weight: 700;
  letter-spacing: -.04em; color: var(--accent);
  display: block; margin-bottom: var(--sp-2); line-height: 1;
}
.process-card h3 {
  font-family: var(--font-display); font-size: var(--text-base); font-weight: 800;
  letter-spacing: -.02em; color: var(--tx); margin-bottom: var(--sp-3);
}
.process-card p {
  font-size: var(--text-sm); color: var(--tx-muted);
  max-width: unset; line-height: 1.65;
}

/* ──────────────────────────────────────────────
   SUPPORT PANELS
   ────────────────────────────────────────────── */
.support-pair {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
}
.support-panel {
  padding: var(--sp-6);
  border-radius: var(--r-xl);
  background: var(--surf);
  border: 1px solid var(--border); box-shadow: var(--sh-sm);
  min-height: 100%;
}
.support-panel h3 {
  font-family: var(--font-display);
  font-size: var(--h3-size);
  font-weight: var(--h3-weight); letter-spacing: -.03em;
  color: var(--tx); margin-bottom: var(--sp-4);
}
.support-panel > p {
  font-size: var(--text-base); line-height: 1.7;
  margin-bottom: var(--sp-6);
}
.support-tiles {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4);
}
.support-tile {
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--surf2);
  border: 1px solid var(--border);
}
.support-tile strong {
  display: block; font-size: var(--text-sm); font-weight: 700;
  color: var(--tx); margin-bottom: var(--sp-2); line-height: 1.3;
}
.support-tile p {
  font-size: var(--text-sm); color: var(--tx-muted);
  max-width: unset; line-height: 1.55;
}

/* ──────────────────────────────────────────────
   TRILLIUM HIRING CROSS-LINK BAND
   ────────────────────────────────────────────── */
.trillium-band {
  padding: var(--sp-8);
  border-radius: var(--r-xl);
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--startup) 8%, var(--surf)) 0%,
    color-mix(in oklab, var(--accent) 6%, var(--surf2)) 100%);
  border: 1px solid color-mix(in oklab, var(--accent) 14%, var(--border));
  box-shadow: var(--sh-md);
  display: flex; gap: var(--sp-8);
  align-items: center; flex-wrap: wrap;
}
.trillium-band-copy { flex: 1; min-width: 260px; }
.trillium-band-copy .eyebrow { margin-bottom: var(--sp-3); }
.trillium-band-copy h3 {
  font-family: var(--font-display);
  font-size: var(--h3-size);
  font-weight: var(--h3-weight); letter-spacing: -.03em;
  color: var(--tx); margin-bottom: var(--sp-3);
}
.trillium-band-copy p {
  font-size: var(--text-base); line-height: 1.7;
  max-width: 54ch;
}
.trillium-band-actions { flex-shrink: 0; }

/* ──────────────────────────────────────────────
   QUOTE / CTA BAND
   ────────────────────────────────────────────── */
.quote-band {
  padding: var(--sp-10);
  border-radius: var(--r-xl);
  background:
    linear-gradient(135deg, #0b3d41 0%, var(--accent) 50%, #164245 100%);
  box-shadow: var(--sh-xl); position: relative; overflow: hidden;
}
.quote-band::before {
  content: ''; position: absolute;
  inset: -30% -10% auto auto; width: 400px; height: 400px;
  background:
    radial-gradient(ellipse at center, rgba(255,255,255,.1) 0%, transparent 60%),
    radial-gradient(ellipse at 30% 70%, rgba(176,136,24,.08) 0%, transparent 50%);
  pointer-events: none;
}
.quote-band::after {
  content: ''; position: absolute;
  inset: auto auto -20% -5%; width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 70%);
  pointer-events: none;
}
.quote-band .eyebrow {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.14);
  color: white; margin-bottom: var(--sp-4);
}
.quote-band h2 {
  font-family: var(--font-display);
  font-size: var(--h2-size);
  font-weight: var(--h2-weight); letter-spacing: -.04em;
  color: white; max-width: 18ch; margin-bottom: var(--sp-4);
}
.quote-band p {
  color: rgba(255,255,255,.88); font-size: var(--text-lg);
  max-width: 54ch; margin-bottom: var(--sp-6); line-height: 1.65;
}
.quote-band .btn-smb-inv {
  background: white; color: var(--smb); box-shadow: var(--sh-md);
}
.quote-band .btn-smb-inv:hover {
  background: var(--smb-soft); box-shadow: var(--sh-lg);
}
.quote-band .btn-outline {
  border-color: rgba(255,255,255,.28); color: white;
}
.quote-band .btn-outline:hover { background: rgba(255,255,255,.1); }

/* ──────────────────────────────────────────────
   FAQ
   ────────────────────────────────────────────── */
.faq-stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.faq-item {
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--r-xl);
  background: var(--surf);
  border: 1px solid var(--border);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.faq-item:hover {
  transform: translateY(-1px);
  box-shadow: var(--sh-md);
  border-color: color-mix(in oklab, var(--accent) 15%, var(--border));
}
.faq-item h3 {
  font-family: var(--font-display); font-size: var(--text-base);
  font-weight: 800; letter-spacing: -.02em;
  color: var(--tx); margin-bottom: var(--sp-3);
}
.faq-item p { font-size: var(--text-base); color: var(--tx-muted); max-width: unset; line-height: 1.7; }

/* ──────────────────────────────────────────────
   CONTACT FORM
   ────────────────────────────────────────────── */
.contact-shell {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-10);
  align-items: start;
  padding: var(--sp-8);
  border-radius: var(--r-xl);
  background: var(--surf);
  border: 1px solid var(--border); box-shadow: var(--sh-xl);
}
.contact-copy .eyebrow { margin-bottom: var(--sp-3); }
.contact-copy h2 {
  font-family: var(--font-display);
  font-size: var(--h2-size);
  font-weight: var(--h2-weight); letter-spacing: -.04em;
  color: var(--tx); margin-bottom: var(--sp-4);
}
.contact-copy > p { font-size: var(--text-base); line-height: 1.7; margin-bottom: var(--sp-6); }
.contact-meta { display: flex; flex-direction: column; gap: var(--sp-2); }
.contact-meta span {
  font-size: var(--text-sm); color: var(--tx-faint);
  display: flex; align-items: center; gap: .5rem;
}
.contact-meta span::before { content: '→'; color: var(--accent); font-weight: 800; }

/* form */
.c-form { display: flex; flex-direction: column; gap: var(--sp-5); }
.c-form label {
  display: flex; flex-direction: column; gap: var(--sp-2);
  font-size: var(--text-sm); font-weight: 700; color: var(--tx);
}
.c-form input,
.c-form textarea,
.c-form select {
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  border: 1.5px solid var(--border);
  background: var(--bg); color: var(--tx);
  font-size: var(--text-base);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  width: 100%;
}
.c-form input:focus,
.c-form textarea:focus,
.c-form select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 12%, transparent), 0 2px 8px color-mix(in oklab, var(--accent) 8%, transparent);
}
.c-form textarea { min-height: 148px; resize: vertical; line-height: 1.6; }
.c-form .helper {
  font-size: var(--text-xs); color: var(--tx-faint);
  margin-top: calc(-1 * var(--sp-2));
}
.form-status {
  font-size: var(--text-sm); color: var(--tx-muted); min-height: 1.4em;
}
/* Audience indicator in form */
.form-audience-tag {
  display: none;
  align-items: center; gap: .5rem;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg);
  font-size: var(--text-sm); font-weight: 700;
  margin-bottom: var(--sp-2);
}
.form-audience-tag.visible { display: flex; }
.form-audience-tag.smb  { background: var(--smb-soft);  color: var(--smb);  border: 1px solid color-mix(in oklab,var(--smb) 20%,var(--border)); }
.form-audience-tag.startup { background: var(--startup-soft); color: var(--startup); border: 1px solid color-mix(in oklab,var(--startup) 20%,var(--border)); }

/* ──────────────────────────────────────────────
   FOOTER
   ────────────────────────────────────────────── */
.site-footer { padding-block: var(--sp-12) var(--sp-12); }
.footer-top {
  border-top: 1px solid var(--divider); padding-top: var(--sp-10);
}
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--sp-10); margin-bottom: var(--sp-10);
}
.footer-col strong {
  display: block; font-family: var(--font-display);
  font-size: var(--text-sm); font-weight: 800; letter-spacing: -.025em;
  color: var(--tx); margin-bottom: var(--sp-4);
  text-transform: none;
}
.footer-col p, .footer-col a {
  font-size: var(--text-sm); color: var(--tx-faint); line-height: 1.75;
}
.footer-col a { display: block; transition: color var(--dur) var(--ease); }
.footer-col a:hover { color: var(--tx-muted); }
.footer-col .link-stack { display: flex; flex-direction: column; gap: var(--sp-3); }
.footer-trillium-link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--text-sm); font-weight: 700;
  color: var(--accent); margin-top: var(--sp-3);
  transition: color var(--dur) var(--ease);
}
.footer-trillium-link:hover { color: var(--accent-hover); }
.footer-trillium-link svg { width: .9rem; height: .9rem; }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--text-xs); color: var(--tx-faint);
  border-top: 1px solid var(--divider); padding-top: var(--sp-6);
  gap: var(--sp-4); flex-wrap: wrap;
}

/* ──────────────────────────────────────────────
   REVEAL ANIMATION
   ────────────────────────────────────────────── */
.reveal {
  opacity: 0; transform: translateY(24px) scale(.98);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }
/* stagger children within a revealed container */
.reveal-stagger > .reveal:nth-child(2) { transition-delay: .08s; }
.reveal-stagger > .reveal:nth-child(3) { transition-delay: .16s; }
.reveal-stagger > .reveal:nth-child(4) { transition-delay: .24s; }
.reveal-stagger > .reveal:nth-child(5) { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ──────────────────────────────────────────────
   RESPONSIVE
   ────────────────────────────────────────────── */

/* ≤ 1024px — tablet portrait */
@media (max-width: 1024px) {
  .hero-grid, .contact-shell { grid-template-columns: 1fr; }
  .process-grid, .stat-strip { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
  .footer-grid .footer-col:first-child { grid-column: 1 / -1; }
  .hero-h1 { font-size: clamp(2rem, 5vw, 2.8rem); }
}

/* ≤ 820px — tablet/large phone */
@media (max-width: 820px) {
  .nav-links { display: none; }
  .menu-btn { display: grid; }
  .icp-grid, .two-col, .info-pair,
  .support-pair, .service-grid { grid-template-columns: 1fr; }
  .metric-strip { grid-template-columns: 1fr 1fr; }
  .trillium-band { flex-direction: column; gap: var(--sp-5); }
  .audience-card.is-smb { order: -1; }
  .sec { padding-block: var(--sp-8); }
  .sec-tight { padding-block: var(--sp-6); }
}

/* ≤ 640px — mobile */
@media (max-width: 640px) {
  .wrap { width: calc(100% - var(--sp-6)); }
  .process-grid, .stat-strip { grid-template-columns: 1fr; }
  .signal-grid, .support-tiles { grid-template-columns: 1fr; }
  .metric-strip { grid-template-columns: 1fr; }
  .btn-row { flex-direction: column; }
  .a-btns { flex-direction: column; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid .footer-col:first-child { grid-column: unset; }
  .quote-band h2 { font-size: clamp(1.5rem, 6vw, 2.2rem); }
  .icp-intro { text-align: left; }
  .btn { min-height: 52px; }
  .c-form input,
  .c-form textarea,
  .c-form select { padding: var(--sp-4) var(--sp-4); font-size: 1rem; }
  p { max-width: 100%; }
  .hero-h1 { font-size: clamp(1.8rem, 8vw, 2.4rem); }
  .proof-bar { grid-template-columns: 1fr 1fr; }
}

/* ≤ 380px — small phones */
@media (max-width: 380px) {
  .hero-h1 { font-size: clamp(2.4rem, 10vw, 3.2rem); }
  .stat-card strong { font-size: 1.35rem; }
}

/* ────────────────────────────────────
   PROOF BAR
──────────────────────────────────── */
.proof-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-6);
  background: var(--surf);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-sm);
}
.proof-item {
  text-align: center;
  position: relative;
  padding: var(--sp-3) var(--sp-2);
}
.proof-item + .proof-item::before {
  content: '';
  position: absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 2.5rem;
  background: var(--divider);
}
.proof-item strong {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  display: block;
  line-height: 1.1;
}
.proof-item span {
  font-size: var(--text-xs);
  color: var(--tx-muted);
  display: block;
  margin-top: 2px;
}

@media (max-width: 768px) {
  .proof-bar { grid-template-columns: repeat(2, 1fr); }
  .proof-item:nth-child(3)::before { display: none; }
}
@media (max-width: 480px) {
  .proof-bar { grid-template-columns: 1fr; }
  .proof-item + .proof-item::before {
    left: 50%; top: 0; transform: translateX(-50%);
    width: 2.5rem; height: 1px;
  }
}

/* ────────────────────────────────────
   LINKED CARDS (audience + service)
──────────────────────────────────── */
.audience-card-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.audience-card-link:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-lg);
}
.audience-card-link:hover .a-tag-smb {
  background: var(--smb-mid);
}
.audience-card-link:hover .a-tag-startup {
  background: color-mix(in oklab, var(--startup) 18%, var(--surf));
}
.audience-card-link h3,
.audience-card-link p,
.audience-card-link li,
.audience-card-link span {
  color: inherit;
}
.audience-card-link .btn-smb,
.audience-card-link .btn-startup {
  color: #fff !important;
}

.service-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform .2s ease, box-shadow .2s ease;
}
.service-card-link:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-lg);
  border-color: color-mix(in oklab, var(--accent) 25%, var(--border));
}
.service-card-link h3,
.service-card-link p,
.service-card-link li {
  color: inherit;
}
.service-card-tagline {
  font-weight: 700;
  color: var(--accent) !important;
  margin-bottom: var(--sp-3);
}

/* ──────────────────────────────────────────────
   AEO LANDING PAGES
   ────────────────────────────────────────────── */
.aeo-hero { padding: var(--sp-20) 0 var(--sp-12); background: var(--surf); }
.aeo-hero-content { max-width: 760px; }
.aeo-hero-content h1 { font-size: var(--text-2xl); line-height: 1.15; margin: var(--sp-4) 0 var(--sp-6); }
.aeo-answer-block { font-size: var(--text-lg); line-height: 1.6; color: var(--tx-muted); padding: var(--sp-6); background: var(--surf2); border-left: 4px solid var(--accent); border-radius: var(--radius); margin-bottom: var(--sp-8); }
.aeo-cta-row { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.aeo-toc { padding: var(--sp-8) 0; background: var(--surf2); }
.toc-nav strong { display: block; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.06em; color: var(--tx-faint); margin-bottom: var(--sp-4); }
.toc-nav ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-2) var(--sp-6); }
.toc-nav a { color: var(--accent); text-decoration: none; font-weight: 500; font-size: var(--text-sm); }
.toc-nav a:hover { text-decoration: underline; }
.aeo-body { padding: var(--sp-12) 0; }
.aeo-body-content { max-width: 720px; }
.aeo-body-content h2 { font-size: var(--text-xl); margin-top: var(--sp-12); margin-bottom: var(--sp-4); padding-top: var(--sp-8); border-top: 1px solid var(--divider); }
.aeo-body-content h3 { font-size: var(--text-lg); margin-top: var(--sp-8); margin-bottom: var(--sp-3); }
.aeo-body-content p { font-size: var(--text-base); line-height: 1.7; color: var(--tx-muted); margin-bottom: var(--sp-4); }
.aeo-body-content ul { margin-bottom: var(--sp-6); }
.aeo-body-content li { font-size: var(--text-base); line-height: 1.7; color: var(--tx-muted); margin-bottom: var(--sp-2); }
.aeo-body-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.aeo-body-content a:hover { color: var(--tx); }
.aeo-faq { padding: var(--sp-12) 0; background: var(--surf); }
.aeo-faq .faq-item { margin-bottom: var(--sp-8); padding-bottom: var(--sp-8); border-bottom: 1px solid var(--divider); }
.aeo-faq .faq-item:last-child { border-bottom: none; }
.aeo-faq .faq-item h3 { font-size: var(--text-lg); margin-bottom: var(--sp-3); color: var(--tx); }
.aeo-faq .faq-item p { font-size: var(--text-base); line-height: 1.7; color: var(--tx-muted); }
.aeo-cta-band { padding: var(--sp-12) 0; background: var(--surf2); }
.aeo-related { padding: var(--sp-12) 0; background: var(--surf); }
.aeo-related h2 { font-size: var(--text-xl); margin-bottom: var(--sp-8); }
.aeo-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-4); }
.aeo-related-card { display: block; padding: var(--sp-6); background: var(--surf2); border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.aeo-related-card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: color-mix(in oklab, var(--accent) 20%, var(--border)); }
.aeo-related-card h3 { font-size: var(--text-base); color: var(--tx); margin-bottom: var(--sp-2); }
.aeo-related-card span { font-size: var(--text-sm); color: var(--accent); font-weight: 500; }
.aeo-hub .aeo-hero { background: var(--bg); }
.aeo-hub-grid-section { padding: var(--sp-12) 0; }
.aeo-hub-grid-section h2 { font-size: var(--text-xl); margin-bottom: var(--sp-8); }
.aeo-hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--sp-6); }
.aeo-hub-card { display: block; padding: var(--sp-8); background: var(--surf); border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.aeo-hub-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: color-mix(in oklab, var(--accent) 25%, var(--border)); }
.aeo-hub-card h3 { font-size: var(--text-lg); color: var(--tx); margin-bottom: var(--sp-3); }
.aeo-hub-card p { font-size: var(--text-sm); color: var(--tx-muted); line-height: 1.6; margin-bottom: var(--sp-4); }
.aeo-hub-card-link { font-size: var(--text-sm); color: var(--accent); font-weight: 600; }
.aeo-hub-empty { color: var(--tx-faint); font-style: italic; }
@media (max-width: 768px) {
  .aeo-hero { padding: var(--sp-12) 0 var(--sp-8); }
  .aeo-hero-content h1 { font-size: var(--text-xl); }
  .aeo-answer-block { font-size: var(--text-base); padding: var(--sp-4); }
  .aeo-cta-row { flex-direction: column; }
  .aeo-cta-row .btn { width: 100%; text-align: center; }
  .toc-nav ul { grid-template-columns: 1fr; }
  .aeo-related-grid { grid-template-columns: 1fr; }
  .aeo-hub-grid { grid-template-columns: 1fr; }
}

/* ── Breadcrumbs ── */
.aeo-breadcrumb {
  padding: var(--sp-4) 0;
  font-size: var(--text-sm);
  color: var(--tx-faint);
}
.aeo-breadcrumb a {
  color: var(--tx-faint);
  text-decoration: none;
}
.aeo-breadcrumb a:hover {
  color: var(--accent);
  text-decoration: underline;
}
.aeo-breadcrumb span[aria-current="page"] {
  color: var(--tx-muted);
  font-weight: 500;
}

/* ── Back to Resources ── */
.aeo-back-to-resources {
  padding: var(--sp-8) 0;
  border-top: 1px solid var(--divider);
  margin-top: var(--sp-8);
}
.aeo-back-to-resources a {
  font-size: var(--text-sm);
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.aeo-back-to-resources a:hover {
  text-decoration: underline;
}