/* =========================================================
   ELEVATE — Shared Website Styles
   Dark-mode-first design system matching the product UI.
   Single source of truth for colors, type, spacing, components.
   ========================================================= */

/* Typography — distinctive pairing:
   IBM Plex Sans   → body (enterprise-machine neutrality, slightly mechanical)
   Instrument Serif → display italics only (literary flourish on em accents)
   IBM Plex Mono   → data/labels/code (matches Plex family) */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap');

/* ---- TOKENS ------------------------------------------------------------- */
:root {
  /* Brand — aligned to product UI screenshot */
  --dark:        #0A1628;  /* hero/canvas */
  --darker:      #050D1A;  /* even deeper for layering */
  --slate:       #101E38;  /* cards on dark */
  --slate-2:     #152744;  /* elevated cards */
  --zinc:        #243559;  /* borders on dark */
  --zinc-2:      #2D4070;  /* hover borders */
  --mist:        #8892A4;  /* muted text on dark */
  --ink:         #E6ECF5;  /* body text on dark */
  --white:       #FFFFFF;

  /* Accents — cyan family from product */
  --blue:        #29B6F6;  /* primary action cyan */
  --sky:         #7DD3FC;  /* highlight */
  --deep:        #0284C7;  /* deeper CTA */
  --aqua:        #22D3EE;

  /* Persona / workflow hues (match product) */
  --p-req:       #8B5CF6;  /* requisitions violet */
  --p-sub:       #06B6D4;  /* submissions cyan */
  --p-eng:       #10B981;  /* engagements teal */
  --p-tex:       #D946EF;  /* time & expense magenta */
  --p-act:       #F59E0B;  /* actions amber */

  /* Semantic */
  --success:     #22C55E;
  --warning:     #F5A623;
  --error:       #E55B4F;

  /* Gradients */
  --grad-hero:   radial-gradient(ellipse 80% 60% at 50% 0%, rgba(41,182,246,.20) 0%, transparent 60%),
                 linear-gradient(180deg, #050D1A 0%, #0A1628 50%, #101E38 100%);
  --grad-blue:   linear-gradient(135deg, #0A1628 0%, #29B6F6 60%, #7DD3FC 100%);
  --grad-card:   linear-gradient(180deg, rgba(41,182,246,.04), rgba(41,182,246,0));
  --grad-text:   linear-gradient(90deg, #29B6F6 0%, #7DD3FC 50%, #22D3EE 100%);
  --grad-agent:  linear-gradient(135deg, #0A1628 0%, #1C2B4A 40%, #29B6F6 100%);

  /* Typography — display uses IBM Plex Sans tight weight; italic switches to Instrument Serif */
  --font-d:      'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-b:      'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-m:      'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;
  --font-serif:  'Instrument Serif', Georgia, 'Times New Roman', serif;

  /* Radius / shadows */
  --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 20px; --r-3xl: 28px;
  --sh-card:    0 8px 24px rgba(0,0,0,.25), 0 0 0 1px rgba(41,182,246,.06);
  --sh-lift:    0 20px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(41,182,246,.12);
  --sh-glow:    0 0 40px rgba(41,182,246,.35);
}

/* ---- RESET -------------------------------------------------------------- */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-b);
  background: var(--dark);
  color: var(--ink);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--sky); text-decoration: none; transition: color .15s; }
a:hover { color: var(--white); }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

/* ---- TYPOGRAPHY --------------------------------------------------------- */
h1,h2,h3,h4,h5 { font-family: var(--font-d); color: var(--white); line-height: 1.15; font-weight: 800; }
p { color: rgba(230,236,245,.72); }
strong { color: var(--white); font-weight: 600; }
.mono { font-family: var(--font-m); }
.grad-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---- LAYOUT ------------------------------------------------------------- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.container-sm { max-width: 860px; margin: 0 auto; padding: 0 40px; }
.section { padding: 96px 0; position: relative; }
.section-lg { padding: 128px 0; }
.section-sm { padding: 64px 0; }
.section + .section { border-top: 1px solid rgba(41,182,246,.08); }

/* ---- NAV ---------------------------------------------------------------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(5,13,26,.88); backdrop-filter: blur(20px) saturate(1.2);
  border-bottom: 1px solid rgba(41,182,246,.08);
  padding: 0 32px; height: 72px;
  display: flex; align-items: center; gap: 36px; flex-wrap: nowrap;
}
.nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.nav-brand img { height: 26px; width: auto; display: block; }
.nav-brand:hover { opacity: .9; }
.nav-links {
  display: flex; align-items: center; gap: 28px;
  flex-wrap: nowrap; white-space: nowrap;
}
.nav-links a {
  font-size: 14px; font-weight: 500; color: var(--mist);
  text-decoration: none; position: relative; padding: 4px 0;
  transition: color .2s;
}
.nav-links a:hover, .nav-links a.active { color: var(--white); }
.nav-links a.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 2px; background: var(--blue); border-radius: 2px;
}
.nav-dropdown { position: relative; }
.nav-dropdown-menu {
  position: absolute; top: calc(100% + 18px); left: -16px;
  background: var(--slate); border: 1px solid var(--zinc);
  border-radius: var(--r-xl); padding: 10px; min-width: 300px;
  box-shadow: var(--sh-lift);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: all .2s ease;
}
.nav-dropdown:hover .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; border-radius: var(--r-md);
  text-decoration: none; transition: background .15s;
}
.nav-dropdown-item:hover { background: rgba(41,182,246,.08); }
.nav-dropdown-item .icon {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: var(--r-md); background: rgba(41,182,246,.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.nav-dropdown-item .title { font-size: 14px; font-weight: 600; color: var(--white); margin-bottom: 2px; }
.nav-dropdown-item .sub { font-size: 12px; color: var(--mist); line-height: 1.45; }

/* compact / simple dropdowns (Solutions, Company, Resources) — no icon, no sub */
.nav-dropdown-menu.compact { min-width: 220px; padding: 8px; }
.nav-dropdown-item.simple { padding: 8px 12px; }
.nav-dropdown-item.simple .title { font-size: 14px; font-weight: 500; margin-bottom: 0; }

.nav-right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.nav-ghost { color: var(--mist); font-size: 14px; font-weight: 500; padding: 8px 14px; text-decoration: none; }
.nav-ghost:hover { color: var(--white); }
.nav-cta {
  background: var(--blue); color: var(--dark);
  font-size: 14px; font-weight: 700; padding: 10px 22px;
  border-radius: var(--r-md); border: none;
  box-shadow: 0 0 24px rgba(41,182,246,.35);
  transition: all .2s; text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
.nav-cta:hover { box-shadow: 0 0 32px rgba(41,182,246,.6); transform: translateY(-1px); color: var(--dark); }

/* ---- PARTNER LOGO — image-ready slot ------------------------------------ */
/* Same shape/footprint as a 64px avatar, but rendered as a rounded rect tile.
   Contains a logo image (preferred) and a gradient monogram fallback inside
   .partner-mono. When the img has a real src, the monogram is hidden. */
.partner-slot { position: relative; width: 96px; height: 64px; margin: 0 auto 14px; }
.partner-mono {
  position: absolute; inset: 0; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--dark); font-family: var(--font-d); font-weight: 800; font-size: 18px;
}
.partner-logo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; padding: 8px;
  background: rgba(255,255,255,.92); border-radius: var(--r-md);
  display: none;
}
.partner-logo[src]:not([src=""]) { display: block; }
.partner-logo[src]:not([src=""]) ~ .partner-mono { display: none; }

/* ---- TEAM AVATAR — photo-ready slot ------------------------------------- */
/* The avatar block holds both a fallback monogram (gradient + initials) and an
   <img class="avatar-photo">. When the img has a real src, it shows and hides
   the monogram. Today: every img src is empty → gradient monograms render.
   Tomorrow: setting src="assets/team/rob.jpg" on one card swaps that one. */
.avatar-slot { position: relative; width: 64px; height: 64px; margin: 0 auto 14px; }
.avatar-mono {
  position: absolute; inset: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--dark); font-family: var(--font-d); font-weight: 800; font-size: 22px;
}
.avatar-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 50%; object-fit: cover;
  display: none; /* hidden by default */
}
.avatar-photo[src]:not([src=""]) { display: block; }
.avatar-photo[src]:not([src=""]) ~ .avatar-mono { display: none; }

/* ---- BUTTONS ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-b); font-size: 15px; font-weight: 600;
  padding: 13px 28px; border-radius: var(--r-md); border: none;
  cursor: pointer; transition: all .2s; text-decoration: none;
  white-space: nowrap;
}
.btn-primary {
  background: var(--blue); color: var(--dark);
  box-shadow: 0 0 24px rgba(41,182,246,.35);
}
.btn-primary:hover { box-shadow: 0 0 38px rgba(41,182,246,.55); transform: translateY(-2px); color: var(--dark); }
.btn-ghost {
  background: transparent; color: var(--white);
  border: 1px solid rgba(255,255,255,.22);
}
.btn-ghost:hover { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.04); color: var(--white); }
.btn-outline {
  background: transparent; color: var(--sky);
  border: 1px solid var(--blue);
}
.btn-outline:hover { background: rgba(41,182,246,.08); color: var(--white); }
.btn-lg { padding: 16px 34px; font-size: 16px; }

/* ---- BADGES / LABELS ---------------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-m); font-size: 12px; font-weight: 600;
  color: var(--sky); background: rgba(125,211,252,.08);
  padding: 5px 14px; border-radius: 99px;
  border: 1px solid rgba(125,211,252,.18);
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: 20px;
}
.eyebrow .dot { width: 6px; height: 6px; background: var(--blue); border-radius: 50%; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.chip {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 700;
  color: var(--sky); background: rgba(125,211,252,.1);
  padding: 3px 10px; border-radius: 99px;
  border: 1px solid rgba(125,211,252,.2);
  text-transform: uppercase; letter-spacing: .06em;
  font-family: var(--font-m);
}
.chip-new { color: #FFC86B; background: rgba(245,166,35,.1); border-color: rgba(245,166,35,.3); }

/* ---- HERO --------------------------------------------------------------- */
.hero {
  /* Atmospheric elevation: 3 cloud washes at different altitudes + 2 mountain
     ridgelines anchored at bottom, layered over the existing navy grad-hero.
     Brings back the legacy "elevation" brand equity at zero asset cost. */
  background-image:
    radial-gradient(ellipse 50% 20% at 75% 15%, rgba(125,211,252,.08) 0%, transparent 70%),
    radial-gradient(ellipse 60% 25% at 30% 55%, rgba(34,211,238,.07) 0%, transparent 65%),
    radial-gradient(ellipse 80% 20% at 50% 92%, rgba(125,211,252,.10) 0%, transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 280' preserveAspectRatio='none'><path d='M0 280 L0 200 L120 150 L260 190 L380 130 L520 170 L660 100 L800 160 L960 110 L1100 170 L1260 130 L1440 180 L1440 280 Z' fill='%23050D1A' fill-opacity='0.55'/><path d='M0 280 L0 230 L180 190 L340 220 L500 170 L680 210 L840 180 L1020 220 L1200 190 L1380 220 L1440 230 L1440 280 Z' fill='%23101E38' fill-opacity='0.9'/></svg>"),
    var(--grad-hero);
  background-size:    100% 100%, 100% 100%, 100% 100%, 100% 280px, 100% 100%;
  background-position: center,    center,    center,    bottom,    center;
  background-repeat:   no-repeat;
  padding: 160px 40px 96px;
  text-align: center; position: relative; overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 20% 30%, rgba(125,211,252,.08) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 80% 70%, rgba(41,182,246,.08) 0%, transparent 50%);
}
.hero::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(41,182,246,.4), transparent);
}

/* ---- HERO PHOTO SLOT (optional per page) -------------------------------- */
/* Drop <div class="hero-photo" style="background-image:url('assets/heroes/foo.jpg')"></div>
   as the first child of <section class="hero"> to override the atmospheric
   layer with a page-specific photo. A dark gradient overlay keeps text legible.
   The CSS class handles position/sizing; the URL goes inline on background-image. */
.hero .hero-photo {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.hero .hero-photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,22,40,.72) 0%, rgba(10,22,40,.55) 45%, rgba(10,22,40,.82) 100%);
}
/* Narrow screens stack the hero copy taller, pushing it into the brightest
   part of the image — deepen the scrim so the headline and sub keep contrast. */
@media (max-width: 768px) {
  .hero .hero-photo::after {
    background: linear-gradient(180deg, rgba(10,22,40,.84) 0%, rgba(10,22,40,.74) 45%, rgba(10,22,40,.9) 100%);
  }
}

/* ---- HERO VIDEO (optional, nests inside .hero-photo) -------------------- */
/* Put <video class="hero-video" autoplay muted loop playsinline> inside the
   .hero-photo div and set that div's background-image to the same poster
   still. The video covers the poster when it plays; if it fails, is blocked,
   or the visitor prefers reduced motion, the poster is already painted behind
   it. The ::after gradient is a pseudo-element, so it still paints on top. */
.hero .hero-photo > .hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  border: 0; display: block;
}
@media (prefers-reduced-motion: reduce) {
  .hero .hero-photo > .hero-video { display: none; }
}
.hero .eyebrow,
.hero h1,
.hero .hero-sub,
.hero .hero-ctas,
.hero .hero-stats { position: relative; z-index: 1; }
.hero h1 {
  font-size: clamp(40px, 6vw, 72px); font-weight: 800;
  line-height: 1.08; color: var(--white);
  margin-bottom: 22px; position: relative; max-width: 920px;
  margin-left: auto; margin-right: auto;
}
.hero h1 em { font-style: normal; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub {
  font-size: clamp(17px, 2vw, 20px);
  color: rgba(230,236,245,.65); max-width: 680px;
  margin: 0 auto 36px; line-height: 1.6;
  position: relative;
}
.hero-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; position: relative; }
.hero-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px;
  max-width: 860px; margin: 72px auto 0;
  padding-top: 40px; border-top: 1px solid rgba(41,182,246,.08);
  position: relative;
}
.hero-stat-num {
  font-family: var(--font-d); font-size: clamp(28px, 3vw, 40px);
  font-weight: 800; color: var(--sky); line-height: 1; margin-bottom: 6px;
}
.hero-stat-label { font-size: 13px; color: rgba(230,236,245,.5); }

/* ---- SECTION HEADERS ---------------------------------------------------- */
.section-header { margin-bottom: 64px; }
.section-header.center { text-align: center; }
.section-title {
  font-size: clamp(32px, 4vw, 52px); font-weight: 800;
  line-height: 1.12; margin-bottom: 18px; color: var(--white);
}
.section-title em { font-style: normal; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.section-sub { font-size: 18px; line-height: 1.65; color: rgba(230,236,245,.62); max-width: 680px; }
.section-header.center .section-sub { margin-left: auto; margin-right: auto; }

/* ---- CARDS -------------------------------------------------------------- */
.card {
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  border: 1px solid rgba(41,182,246,.1);
  border-radius: var(--r-2xl);
  padding: 32px; position: relative;
  transition: all .25s;
}
.card:hover { border-color: rgba(41,182,246,.3); transform: translateY(-3px); box-shadow: var(--sh-lift); }
.card-tag {
  display: inline-flex; font-family: var(--font-m); font-size: 11px; font-weight: 600;
  color: var(--sky); background: rgba(125,211,252,.08);
  padding: 3px 10px; border-radius: 99px;
  border: 1px solid rgba(125,211,252,.18);
  margin-bottom: 16px; text-transform: uppercase; letter-spacing: .08em;
}
.card-icon {
  width: 48px; height: 48px; border-radius: var(--r-lg);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; margin-bottom: 18px;
  background: rgba(41,182,246,.12); color: var(--sky);
}
.card h3 { font-size: 20px; margin-bottom: 10px; color: var(--white); }
.card p { font-size: 14px; line-height: 1.65; color: rgba(230,236,245,.62); }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .hero-stats { grid-template-columns: repeat(2,1fr); gap: 24px; }
}

/* ---- FEATURE ROW (icon + copy alternating) ------------------------------ */
.feature-row {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 72px;
  align-items: center; padding: 56px 0;
}
.feature-row.reverse > :first-child { order: 2; }
.feature-row h2 { font-size: 36px; margin-bottom: 18px; }
.feature-row h2 em { font-style: normal; color: var(--sky); }
.feature-row p { font-size: 17px; line-height: 1.7; margin-bottom: 16px; }
.feature-list { display: grid; gap: 14px; margin-top: 22px; }
.feature-list-item { display: flex; gap: 12px; align-items: flex-start; }
.feature-list-item .check {
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(34,197,94,.15); color: var(--success);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; flex-shrink: 0; margin-top: 2px;
}
.feature-list-item span { color: rgba(230,236,245,.8); font-size: 15px; }
@media (max-width: 900px) {
  .feature-row { grid-template-columns: minmax(0,1fr); gap: 36px; padding: 32px 0; }
  .feature-row.reverse > :first-child { order: 0; }
}

/* ---- VISUAL PANELS ------------------------------------------------------ */
.visual-panel {
  background: linear-gradient(180deg, rgba(41,182,246,.06), rgba(41,182,246,.01));
  border: 1px solid rgba(41,182,246,.15);
  border-radius: var(--r-3xl); padding: 36px;
  position: relative; overflow: hidden;
}
.visual-panel::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 40% at 30% 0%, rgba(125,211,252,.15), transparent 60%);
  pointer-events: none;
}

/* ---- PRICING ------------------------------------------------------------ */
.pricing-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
@media (max-width: 1000px) { .pricing-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px)  { .pricing-grid { grid-template-columns: 1fr; } }
.price-card {
  background: var(--slate);
  border: 1px solid rgba(41,182,246,.12);
  border-radius: var(--r-2xl); padding: 32px 28px;
  display: flex; flex-direction: column; gap: 16px;
  position: relative; transition: all .25s;
}
.price-card:hover { border-color: rgba(41,182,246,.3); transform: translateY(-4px); box-shadow: var(--sh-lift); }
.price-card.featured {
  background: linear-gradient(180deg, rgba(41,182,246,.1), rgba(41,182,246,.02)), var(--slate);
  border-color: var(--blue);
  box-shadow: 0 0 40px rgba(41,182,246,.2);
}
.price-card .tier { font-family: var(--font-m); font-size: 11px; font-weight: 600; color: var(--sky); text-transform: uppercase; letter-spacing: .1em; }
.price-card h3 { font-size: 22px; margin: 0; }
.price-card .price { display: flex; align-items: baseline; gap: 4px; }
.price-card .price .num { font-family: var(--font-d); font-size: 44px; font-weight: 800; color: var(--white); line-height: 1; }
.price-card .price .per { color: var(--mist); font-size: 14px; }
.price-card .desc { color: rgba(230,236,245,.6); font-size: 14px; line-height: 1.6; }
.price-card ul { display: grid; gap: 10px; margin-top: 6px; }
.price-card li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: rgba(230,236,245,.78); }
.price-card li::before { content: '✓'; color: var(--blue); font-weight: 800; flex-shrink: 0; }
.price-card .btn { margin-top: auto; width: 100%; justify-content: center; }
.price-card .featured-badge {
  position: absolute; top: -12px; right: 20px;
  font-size: 11px; font-weight: 700; color: var(--dark);
  background: var(--blue); padding: 4px 12px; border-radius: 99px;
  text-transform: uppercase; letter-spacing: .08em;
}

/* ---- TABLE -------------------------------------------------------------- */
.compare-table {
  width: 100%; border-collapse: collapse;
  background: var(--slate); border-radius: var(--r-xl); overflow: hidden;
  border: 1px solid var(--zinc);
}
.compare-table th, .compare-table td { padding: 14px 18px; text-align: left; font-size: 14px; border-bottom: 1px solid var(--zinc); }
.compare-table th { background: var(--slate-2); color: var(--white); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.compare-table td { color: rgba(230,236,245,.75); }
.compare-table tr:last-child td { border-bottom: none; }
.compare-table .yes { color: var(--success); font-weight: 700; }
.compare-table .no { color: var(--mist); opacity: .6; }

/* ---- CTA STRIP ---------------------------------------------------------- */
.cta-strip {
  background: var(--grad-agent); text-align: center;
  padding: 96px 40px; position: relative; overflow: hidden;
}
.cta-strip::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(125,211,252,.15), transparent 60%);
}
.cta-strip h2 { font-size: clamp(32px, 4vw, 48px); margin-bottom: 16px; position: relative; }
.cta-strip h2 em { font-style: normal; color: var(--sky); }
.cta-strip p { font-size: 18px; color: rgba(230,236,245,.7); max-width: 560px; margin: 0 auto 32px; position: relative; }
.cta-strip .hero-ctas { position: relative; }

/* ---- FOOTER ------------------------------------------------------------- */
.footer {
  background: var(--darker); color: rgba(230,236,245,.6);
  padding: 72px 40px 32px;
  border-top: 1px solid rgba(41,182,246,.1);
}
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 48px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-brand img { height: 22px; margin-bottom: 16px; }
.footer-desc { font-size: 14px; line-height: 1.7; max-width: 320px; margin-bottom: 20px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 34px; height: 34px; border-radius: 8px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  color: var(--mist); transition: all .2s; text-decoration: none; font-size: 14px;
}
.footer-social a:hover { background: rgba(41,182,246,.12); color: var(--sky); border-color: rgba(41,182,246,.3); }
.footer-col-title {
  font-family: var(--font-d); font-size: 13px; font-weight: 700;
  color: var(--white); text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: 16px;
}
.footer-links { display: grid; gap: 10px; }
.footer-links a {
  color: rgba(230,236,245,.55); font-size: 14px;
  text-decoration: none; transition: color .15s;
}
.footer-links a:hover { color: var(--sky); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  margin-top: 56px; padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.06);
  font-size: 13px; color: rgba(230,236,245,.4);
  flex-wrap: wrap;
}
.footer-bottom a { color: rgba(230,236,245,.55); text-decoration: none; margin: 0 10px; }
.footer-bottom a:hover { color: var(--sky); }

/* ---- FORMS -------------------------------------------------------------- */
.form-grid { display: grid; gap: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.form-field label {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--white); margin-bottom: 6px;
}
.form-field input, .form-field select, .form-field textarea {
  width: 100%; padding: 12px 14px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(41,182,246,.15);
  border-radius: var(--r-md);
  color: var(--white); font-family: inherit; font-size: 14px;
  transition: all .15s;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-color: var(--blue); background: rgba(41,182,246,.06);
}
.form-field textarea { resize: vertical; min-height: 120px; }

/* Native <option> popups inherit the select's white text but render on the OS's
   light menu background, so options were invisible until hovered. Pin the popup
   to a light background with dark text. */
.form-field select option,
.form-field select optgroup {
  color: #0A1628;
  background-color: #FFFFFF;
}

/* ---- UTILS -------------------------------------------------------------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mt-4 { margin-top: 32px; } .mt-6 { margin-top: 48px; }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 16px; } .mb-4 { margin-bottom: 32px; }
.flex { display: flex; } .flex-center { display: flex; align-items: center; justify-content: center; }
.gap-2 { gap: 12px; } .gap-4 { gap: 20px; }
/* .hidden-sm: only hides at <900px. Do NOT set a default display here —
   doing so would override display:flex / display:grid on parents like
   .nav-links, causing gap spacing to collapse. */
@media (max-width: 900px) { .hidden-sm { display: none !important; } }

/* ---- MOBILE NAV (hamburger + drawer, built by assets/nav.js) ------------ */
/* Below 900px .hidden-sm removes the whole desktop link row, so the drawer is
   the only navigation that exists at phone width. */
.nav-toggle { display: none; }
.nav-drawer, .nav-scrim { display: none; }

@media (max-width: 900px) {
  .nav { padding: 0 16px; gap: 12px; }
  .nav-brand { margin-right: auto; }
  .nav-right { display: flex; align-items: center; gap: 10px; }
  .nav-cta { padding: 9px 14px; font-size: 13px; white-space: nowrap; }

  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 11px; flex-shrink: 0;
    background: rgba(255,255,255,.05); border: 1px solid rgba(41,182,246,.25);
    border-radius: 10px; cursor: pointer;
  }
  .nav-toggle span {
    display: block; height: 2px; width: 100%; border-radius: 2px;
    background: var(--white); transition: transform .2s ease, opacity .15s ease;
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav-scrim {
    display: block; position: fixed; inset: 0; z-index: 1150;
    background: rgba(3,8,17,.65); opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
  }
  .nav-scrim[data-open="true"] { opacity: 1; pointer-events: auto; }

  .nav-drawer {
    display: block; position: fixed; top: 0; right: 0; bottom: 0; z-index: 1200;
    width: min(86vw, 340px);
    background: #081426; border-left: 1px solid rgba(41,182,246,.15);
    padding: 88px 20px 40px; overflow-y: auto; -webkit-overflow-scrolling: touch;
    transform: translateX(100%); transition: transform .25s ease;
  }
  .nav-drawer[data-open="true"] { transform: none; }

  .nav-drawer-group { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid rgba(41,182,246,.12); }
  .nav-drawer-group:last-child { border-bottom: 0; margin-bottom: 0; }
  .nav-drawer-heading {
    margin: 0 0 8px; font-family: var(--font-m, inherit); font-size: 11px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: var(--sky);
  }
  .nav-drawer-link {
    display: block; padding: 11px 8px; margin: 0 -8px; border-radius: 8px;
    color: var(--mist); text-decoration: none; font-size: 15px; line-height: 1.3;
  }
  .nav-drawer-link:hover, .nav-drawer-link:focus-visible {
    color: var(--white); background: rgba(41,182,246,.1);
  }
  .nav-drawer-foot .nav-drawer-link { color: var(--white); font-weight: 600; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-drawer, .nav-scrim, .nav-toggle span { transition: none; }
}

/* ---- FADE-UP ANIMATION -------------------------------------------------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: fadeUp .7s ease both; }
.delay-1 { animation-delay: .08s; } .delay-2 { animation-delay: .16s; }
.delay-3 { animation-delay: .24s; } .delay-4 { animation-delay: .32s; }

/* =========================================================================
   POLISH LAYER — post-critique additions
   Applied after the `frontend-design → design-critique → ux-copy → a11y-review`
   pipeline. These are additive rules; earlier declarations above remain.
   ========================================================================= */

/* ---- TYPOGRAPHY BI-REGISTER: serif italic on em accents ----------------- */
/* Anywhere <em> appears inside hero/section titles, swap to Instrument Serif
   italic for a literary flourish. Works on both the .hero h1 and .section-title
   level. Keeps the surrounding sans-serif untouched. */
.hero h1 em,
.section-title em,
.cta-strip h2 em,
.feature-row h2 em,
h1 em, h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;              /* serifs look bulky at 800 weight */
  letter-spacing: -0.01em;       /* Instrument Serif is slightly airy */
}
/* Keep the gradient fill working on em when it was applied */
.grad-text em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }

/* ---- GRAIN / NOISE OVERLAY --------------------------------------------- */
/* Subtle grain over the body — breaks the flat-color feel. Uses an inline SVG
   turbulence filter as a base64 noise texture. Opacity is intentionally low. */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}
/* Ensure content sits above the grain layer */
body > * { position: relative; z-index: 1; }

/* ---- SKIP LINK (WCAG 2.4.1) -------------------------------------------- */
.skip-link {
  position: absolute;
  left: 16px; top: -48px;      /* hidden off-screen by default */
  background: var(--blue); color: var(--dark);
  padding: 10px 18px; border-radius: var(--r-md);
  font-weight: 700; font-size: 14px;
  text-decoration: none;
  z-index: 10000;
  transition: top .15s;
}
.skip-link:focus { top: 16px; outline: 2px solid var(--white); outline-offset: 2px; color: var(--dark); }

/* ---- MAIN LANDMARK ----------------------------------------------------- */
/* <main id="main"> doesn't need visual styling — just a target for the skip link
   and a semantic landmark for screen readers. Nothing further required. */

/* ---- DROPDOWN ACCESSIBILITY -------------------------------------------- */
/* The dropdown previously opened on :hover only — keyboard users were locked out.
   :focus-within makes it open when ANY descendant is focused. Combined with
   aria-expanded from the HTML, screen readers announce the state. */
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}

/* ---- FOCUS INDICATORS (WCAG 2.4.7) ------------------------------------ */
/* Custom focus styling — visible cyan ring with offset, rounded corners.
   Applies only to :focus-visible (keyboard focus), never to mouse clicks. */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
.card:focus-visible, .job-card:focus-visible, .post-card:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ---- FOOTER LINK TOUCH TARGETS (WCAG 2.5.5) ---------------------------- */
.footer-links a {
  display: inline-block;
  padding: 6px 0;       /* 14px font + 12px padding = 26px tap — still below 44px
                           but 30% better. Full fix would balloon footer height. */
}

/* ---- LUCIDE-STYLE ICONS ------------------------------------------------ */
/* All `<svg class="icon">` inherit color from parent (currentColor) so the
   icon takes on whatever tint the card-icon wrapper defines. Consistent
   2px stroke, rounded joins — the Lucide aesthetic. */
svg.icon {
  width: 1em; height: 1em;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: middle;
  flex-shrink: 0;
}
/* Card icon containers size the SVG explicitly so it fills the tinted box */
.card-icon svg.icon,
.nav-dropdown-item .icon svg.icon,
.mockup-sidebar .si svg.icon { width: 22px; height: 22px; }

/* ---- REDUCED MOTION (WCAG 2.3.3) --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* =========================================================================
   VIBRANCY LAYER  ·  2026-08-16  ·  _vibrant-draft
   Goal: kill the three "machine-made" fingerprints —
     (1) single-hue monotony  (2) metronomic rhythm  (3) decorative-only motion
   Everything below is ADDITIVE. Nothing in the 646 lines above was modified.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1 · PER-SECTION ACCENT SYSTEM
   ---------------------------------------------------------------------------
   The old site rendered every <em>, every eyebrow and every card icon in the
   same cyan. Five persona hues sat defined in :root and never used.

   Fix: put data-accent="violet" (etc.) on any <section>. Because custom
   properties INHERIT, redefining --grad-text / --accent on the section
   silently re-tints every descendant that already referenced those tokens.
   Zero new selectors on the children.
   ------------------------------------------------------------------------- */
[data-accent] { --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent); }

[data-accent="cyan"]    { --accent: #29B6F6; --accent-2: #7DD3FC;
  --grad-text: linear-gradient(92deg, #29B6F6 0%, #7DD3FC 55%, #22D3EE 100%); }
[data-accent="violet"]  { --accent: #8B5CF6; --accent-2: #C4B5FD;
  --grad-text: linear-gradient(92deg, #7C3AED 0%, #A78BFA 55%, #E9D5FF 100%); }
[data-accent="emerald"] { --accent: #10B981; --accent-2: #6EE7B7;
  --grad-text: linear-gradient(92deg, #059669 0%, #34D399 55%, #A7F3D0 100%); }
[data-accent="amber"]   { --accent: #F59E0B; --accent-2: #FCD34D;
  --grad-text: linear-gradient(92deg, #D97706 0%, #FBBF24 55%, #FDE68A 100%); }
[data-accent="magenta"] { --accent: #D946EF; --accent-2: #F0ABFC;
  --grad-text: linear-gradient(92deg, #C026D3 0%, #E879F9 55%, #FAE8FF 100%); }
[data-accent="rose"]    { --accent: #F43F5E; --accent-2: #FDA4AF;
  --grad-text: linear-gradient(92deg, #E11D48 0%, #FB7185 55%, #FECDD3 100%); }

/* Re-point the fixed cyan literals at the inherited accent, but ONLY inside a
   [data-accent] scope — so every page that doesn't opt in stays untouched. */
[data-accent] .eyebrow {
  color: var(--accent-2);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border-color: color-mix(in srgb, var(--accent) 24%, transparent);
}
[data-accent] .eyebrow .dot { background: var(--accent); }
[data-accent] .card-tag {
  color: var(--accent-2);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
}
[data-accent] .card-icon { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-2); }
[data-accent] .card:hover { border-color: color-mix(in srgb, var(--accent) 38%, transparent); }
[data-accent] .hero-stat-num { color: var(--accent-2); }

/* -------------------------------------------------------------------------
   2 · HAND-DRAWN MARKS
   ---------------------------------------------------------------------------
   Perfect 1px rules read as machine-drawn. These SVG paths are deliberately
   wobbly — the strokes don't close cleanly and the baseline drifts a few px.
   ------------------------------------------------------------------------- */

/* Irregular underline that sits under a word. <span class="scribble">word</span> */
.scribble { position: relative; display: inline-block; white-space: nowrap; }
.scribble::after {
  content: ''; position: absolute;
  left: -2%; right: -3%; bottom: -.28em; height: .38em;
  background: no-repeat center/100% 100%
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 22' preserveAspectRatio='none'><path d='M4 15c38-7 74-9 116-6 33 2 59 6 92 3 26-2 47-6 84-11' fill='none' stroke='%2329B6F6' stroke-width='5' stroke-linecap='round' opacity='.85'/><path d='M12 20c44-5 88-6 130-3 40 3 78 2 148-4' fill='none' stroke='%2329B6F6' stroke-width='2.5' stroke-linecap='round' opacity='.4'/></svg>");
  pointer-events: none;
}
[data-accent="violet"]  .scribble::after { filter: hue-rotate(72deg) saturate(1.25); }
[data-accent="emerald"] .scribble::after { filter: hue-rotate(-58deg) saturate(1.3); }
[data-accent="amber"]   .scribble::after { filter: hue-rotate(-152deg) saturate(1.6); }
[data-accent="magenta"] .scribble::after { filter: hue-rotate(108deg) saturate(1.2); }

/* Hand-drawn horizontal rule — replaces the ruler-straight .section border */
.rule-hand {
  height: 14px; border: 0; margin: 0;
  background: no-repeat center/100% 100%
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 14' preserveAspectRatio='none'><path d='M2 8c150-4 300 2 450-1 180-3 320 4 470 1 90-2 180-3 276-5' fill='none' stroke='%2329B6F6' stroke-width='1.6' stroke-linecap='round' opacity='.28'/></svg>");
}

/* Kill the metronomic divider — the site had a border-top on EVERY .section */
.section.no-rule + .section, .section + .section.no-rule { border-top: 0; }

/* -------------------------------------------------------------------------
   3 · RHYTHM VARIANCE
   ---------------------------------------------------------------------------
   Every section was padding:96px 0 with a centered header. Real editorial
   pages breathe irregularly. These let you vary the cadence per section.
   ------------------------------------------------------------------------- */
.section-tight  { padding-top: 56px;  padding-bottom: 56px; }
.section-airy   { padding-top: 168px; padding-bottom: 168px; }
.section-tophea { padding-top: 140px; padding-bottom: 72px; }   /* top-heavy */
.section-btmhea { padding-top: 64px;  padding-bottom: 152px; }  /* bottom-heavy */

/* Asymmetric split — 60/40 with the right column dropped out of alignment.
   Deliberately NOT 50/50; symmetric splits are the strongest layout tell. */
.split-offset {
  display: grid; grid-template-columns: minmax(0,1.32fr) minmax(0,0.88fr);
  gap: 72px; align-items: start;
}
.split-offset > :nth-child(2) { margin-top: 68px; }
/* .flip alternates the layout: the visual panel moves to the NARROW left
   column and the copy keeps the WIDE right column. The order: swap is what
   makes this work — changing only the column widths would squeeze the primary
   copy into 0.88fr while a sparse stat panel took 1.32fr. DOM order stays
   copy-first, which is the meaningful reading order for screen readers. */
.split-offset.flip { grid-template-columns: minmax(0,0.88fr) minmax(0,1.32fr); }
.split-offset.flip > :nth-child(1) { order: 2; margin-top: 0; }
.split-offset.flip > :nth-child(2) { order: 1; margin-top: 68px; }
@media (max-width: 900px) {
  .split-offset, .split-offset.flip { grid-template-columns: minmax(0,1fr); gap: 40px; }
  .split-offset > *, .split-offset.flip > * { margin-top: 0 !important; order: 0 !important; }
}

/* ---- VIDEO PLAYER (a watch-this clip, not a background loop) ------------- */
/* Distinct from .hero-video: this one has audio and controls, so it must never
   autoplay. aspect-ratio + max-width keeps it from overflowing its grid track. */
.video-frame {
  position: relative; width: 100%; max-width: 980px; margin: 0 auto;
  aspect-ratio: 16 / 9; border-radius: var(--r-xl); overflow: hidden;
  border: 1px solid rgba(41,182,246,.2);
  background: #050D1A; box-shadow: 0 24px 60px rgba(3,8,17,.5);
}
.video-frame video { width: 100%; height: 100%; display: block; object-fit: cover; background: #050D1A; }

/* ---- SPEC LIST (integrations · "stack at a glance") ---------------------- */
/* Label/value rows. The flex children need min-width:0 and wrap — without them
   the long values set a big min-content width, which propagates up through the
   grid column and pushes the whole page into horizontal scroll on a phone. */
.spec-list { list-style: none; padding: 0; margin: 0; font-size: 14px; line-height: 1.5; }
.spec-list li {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 11px 0; border-bottom: 1px solid rgba(41,182,246,.12);
}
.spec-list li:last-child { border-bottom: 0; }
.spec-list .k { color: var(--mist); min-width: 0; }
.spec-list .v { color: var(--white); text-align: right; min-width: 0; }
@media (max-width: 640px) {
  .spec-list li { flex-direction: column; gap: 2px; }
  .spec-list .v { text-align: left; }
}

/* Left-aligned section header — breaks the endless centering */
.section-header.lead { text-align: left; max-width: 760px; margin-bottom: 52px; }
.section-header.lead .section-sub { margin-left: 0; }

/* Full-bleed escape hatch for a container-bound child */
.bleed { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

/* Ragged card grid — cards 2 and 5 sit lower, like a hand-placed layout */
.grid-ragged > :nth-child(2)  { transform: translateY(26px); }
.grid-ragged > :nth-child(5)  { transform: translateY(26px); }
@media (max-width: 900px) { .grid-ragged > * { transform: none !important; } }

/* Micro-rotation. Barely perceptible individually; collectively it reads
   "assembled by a person" instead of "emitted by a loop". */
.tilt-a { transform: rotate(-0.45deg); }
.tilt-b { transform: rotate( 0.55deg); }
.tilt-a:hover, .tilt-b:hover { transform: rotate(0deg) translateY(-4px); }

/* -------------------------------------------------------------------------
   4 · ALIVE MOTION
   ---------------------------------------------------------------------------
   The old .fade-up fired on page load via animation-delay — everything below
   the fold had already finished animating before you scrolled to it.
   .reveal waits for IntersectionObserver instead.

   NO-JS SAFETY: opacity:0 only applies under html.js, which is set by an
   inline script in <head>. If JS is off or fails, content renders normally.
   ------------------------------------------------------------------------- */
.js .reveal {
  opacity: 0;
  transform: translateY(26px) scale(.985);
  transition: opacity .72s cubic-bezier(.22,.61,.36,1),
              transform .72s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.js .reveal.in { opacity: 1; transform: none; }

/* Directional variants — uniform up-fades everywhere is itself a tell */
.js .reveal-l { transform: translateX(-34px); }
.js .reveal-r { transform: translateX( 34px); }
.js .reveal-scale { transform: scale(.94); }

/* Stagger via inline --i on the child */
.js .reveal { transition-delay: calc(var(--i, 0) * 85ms); }

/* Cursor-reactive hero wash. --mx/--my default to a sane static position so
   the hero looks correct before JS runs and on touch devices. */
.hero { --mx: 50%; --my: 18%; }
.hero .cursor-wash {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(
    620px circle at var(--mx) var(--my),
    rgba(125,211,252,.13) 0%,
    rgba(41,182,246,.06) 38%,
    transparent 68%);
  transition: background .18s ease-out;
}

/* Slow ambient drift on the hero glow — 24s, imperceptible per-frame */
@keyframes drift {
  0%,100% { transform: translate3d(0,0,0)   scale(1);    }
  33%     { transform: translate3d(2.5%,-1.5%,0) scale(1.05); }
  66%     { transform: translate3d(-2%,1.8%,0)   scale(.97);  }
}
.hero::before { animation: drift 24s ease-in-out infinite; }

/* Counter — tabular figures stop the width jittering while counting */
.hero-stat-num, .counter { font-variant-numeric: tabular-nums; }

/* Sheen sweep on the primary button.
   NOTE: deliberately NO `overflow:hidden` here. .btn-primary declares its own
   outward glow (box-shadow: 0 0 24px, line ~213) and overflow:hidden clips an
   element's own box-shadow — it would erase the glow sitewide. Instead the
   sheen slides via background-position, staying inside the pseudo-element box. */
.btn-primary { position: relative; }
.btn-primary::after {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.34) 50%, transparent 62%);
  background-size: 280% 100%;
  background-position: 165% 0;
  transition: background-position .62s cubic-bezier(.22,.61,.36,1);
}
.btn-primary:hover::after { background-position: -65% 0; }

/* -------------------------------------------------------------------------
   5 · HUMAN COMPONENTS
   ---------------------------------------------------------------------------
   Extends the existing .avatar-slot monogram pattern (styles.css ~line 189).
   Same contract: empty <img src=""> → gradient monogram renders.
   Drop a real path into src and the photo takes over. No JS, no rebuild.
   ------------------------------------------------------------------------- */

/* Overlapping face row — "these are real people" at a glance */
.face-strip { display: flex; align-items: center; }
.face-strip .avatar-slot {
  width: 46px; height: 46px; margin: 0 0 0 -13px;
  border-radius: 50%; box-shadow: 0 0 0 3px var(--dark);
  transition: transform .22s, box-shadow .22s;
}
.face-strip .avatar-slot:first-child { margin-left: 0; }
.face-strip .avatar-slot:hover { transform: translateY(-5px) scale(1.09); z-index: 2; box-shadow: 0 0 0 3px var(--accent, var(--blue)); }
.face-strip .avatar-mono { font-size: 15px; }
.face-strip-note { margin-left: 16px; font-size: 14px; color: rgba(230,236,245,.6); }

/* Testimonial with a face and a name attached to it */
.quote-human {
  display: grid; grid-template-columns: auto 1fr; gap: 22px;
  align-items: start;
  background: linear-gradient(158deg, rgba(255,255,255,.035), rgba(255,255,255,.006));
  border: 1px solid rgba(41,182,246,.12);
  border-left: 3px solid var(--accent, var(--blue));
  border-radius: var(--r-xl);
  padding: 30px 32px;
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.quote-human:hover { transform: translateY(-3px); box-shadow: var(--sh-lift); }
.quote-human .avatar-slot { width: 56px; height: 56px; margin: 0; }
.quote-human blockquote {
  font-size: 17px; line-height: 1.62; color: rgba(230,236,245,.9);
  font-family: var(--font-b); margin-bottom: 16px;
}
.quote-human blockquote::before { content: '\201C'; color: var(--accent, var(--blue)); font-family: var(--font-serif); font-size: 30px; line-height: 0; vertical-align: -8px; margin-right: 3px; }
.quote-human .who   { font-weight: 700; color: var(--white); font-size: 14.5px; }
.quote-human .role  { font-size: 13px; color: rgba(230,236,245,.55); font-family: var(--font-m); }

/* Byline — attaches a human to a claim (used under section headers) */
.byline { display: flex; align-items: center; gap: 11px; margin-top: 20px; }
.byline .avatar-slot { width: 34px; height: 34px; margin: 0; }
.byline .avatar-mono { font-size: 13px; }
.byline span { font-size: 13.5px; color: rgba(230,236,245,.62); }
.byline strong { color: var(--white); font-weight: 600; }

/* Handwritten-feel aside — a margin note, like someone annotated the page */
.margin-note {
  font-family: var(--font-serif); font-style: italic;
  font-size: 17px; line-height: 1.5;
  color: rgba(230,236,245,.52);
  border-left: 2px solid color-mix(in srgb, var(--accent, #29B6F6) 40%, transparent);
  padding-left: 18px; margin: 26px 0;
  max-width: 46ch;
}

/* -------------------------------------------------------------------------
   6 · REDUCED MOTION — re-asserted AFTER the rules above
   The existing @media block at line ~640 comes earlier in the cascade, so
   these additions need their own guard.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero::before { animation: none !important; }
  .hero .cursor-wash { transition: none !important; }
  .grid-ragged > *, .tilt-a, .tilt-b { transform: none !important; }
  .btn-primary::after { display: none; }
}


/* =========================================================================
   7 · GENERATED IMAGERY  (Higgsfield · recraft_v4_1 · 2026-08-16)
   -------------------------------------------------------------------------
   ####  SINGLE SWAP POINT  ###############################################
   Every generated image is referenced ONCE, here. They currently point at
   Higgsfield's CDN so the page renders immediately. To self-host before
   shipping: download the 11 files, drop them in assets/gen + assets/team,
   and replace the URLs below with the commented local paths. Nothing else
   in the stylesheet or the HTML needs to change.
   (Three persona portraits are <img src> in index.html, not CSS — their
   local paths are noted in a comment beside each one.)
   ######################################################################## */
:root {
  --img-tex-cyan:    url("https://d8j0ntlcm91z4.cloudfront.net/user_3HmsQVSkgaXMwKjrbIP6GoNYHvE/hf_20260816_201509_014e3055-cc8e-4a22-88af-4e6ba753dce7.png");  /* assets/gen/tex-cyan.png    */
  --img-tex-violet:  url("https://d8j0ntlcm91z4.cloudfront.net/user_3HmsQVSkgaXMwKjrbIP6GoNYHvE/hf_20260816_201509_dd978d47-b998-492f-a688-f977971197f4.png");  /* assets/gen/tex-violet.png  */
  --img-tex-emerald: url("https://d8j0ntlcm91z4.cloudfront.net/user_3HmsQVSkgaXMwKjrbIP6GoNYHvE/hf_20260816_201509_cdc911b9-a938-4070-b5a6-34c5ffd4445c.png");  /* assets/gen/tex-emerald.png */
  --img-tex-amber:   url("https://d8j0ntlcm91z4.cloudfront.net/user_3HmsQVSkgaXMwKjrbIP6GoNYHvE/hf_20260816_201509_3eb42402-185b-4295-8787-11361d536ee0.png");  /* assets/gen/tex-amber.png   */
  --img-tex-magenta: url("https://d8j0ntlcm91z4.cloudfront.net/user_3HmsQVSkgaXMwKjrbIP6GoNYHvE/hf_20260816_201509_f64efc0f-8ff6-4648-9114-854035bbb8c5.png");  /* assets/gen/tex-magenta.png */
  --img-workflow:    url("https://d8j0ntlcm91z4.cloudfront.net/user_3HmsQVSkgaXMwKjrbIP6GoNYHvE/hf_20260816_201510_e6358612-4992-4df3-8f36-4bdef370295c.png");  /* assets/gen/workflow.png    */
  --img-cadence:     url("https://d8j0ntlcm91z4.cloudfront.net/user_3HmsQVSkgaXMwKjrbIP6GoNYHvE/hf_20260816_202736_42376d7a-1276-44a0-82ca-58e7583d5757.png");  /* assets/gen/cadence.png     */
  --img-core:        url("https://d8j0ntlcm91z4.cloudfront.net/user_3HmsQVSkgaXMwKjrbIP6GoNYHvE/hf_20260816_201509_2f485ef6-391f-440a-9bc9-d730587d914f.png");  /* assets/gen/core-motif.png  */
}

/* Bind each accent to its matching texture. A section only renders one if it
   also carries .tex — so adding data-accent alone stays free. */
[data-accent="cyan"]    { --tex: var(--img-tex-cyan);    }
[data-accent="violet"]  { --tex: var(--img-tex-violet);  }
[data-accent="emerald"] { --tex: var(--img-tex-emerald); }
[data-accent="amber"]   { --tex: var(--img-tex-amber);   }
[data-accent="magenta"] { --tex: var(--img-tex-magenta); }

/* Texture layer. Sits ABOVE the section's own background colour and BELOW its
   content: `isolation:isolate` opens a stacking context, then the z-index:-1
   pseudo-element paints between the element background and the children.
   The mask feathers all four edges so the art never shows a hard seam. */
.section.tex { position: relative; isolation: isolate; }
.section.tex::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background-image: var(--tex, none);
  background-size: cover; background-position: center;
  opacity: .42; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
}
/* Signature-graphic sections carry the art louder */
.section.tex.tex-strong::before { opacity: .62; }

/* LEGIBILITY SCRIM.
   The mask leaves the texture fully opaque from 20%-80% of section height —
   exactly the band where headings and body copy sit. Generated art has
   unpredictable local luminance, so without this the 12.5px captions in the
   Workflow strip (which sit inside cards whose own background is only ~2%
   white) could drop under WCAG AA.
   ::after shares z-index:-1 with ::before but paints later, so it lands
   between the art and the content — a true scrim, not just a dimmer. */
.section.tex::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(5,13,26,.58) 0%, rgba(5,13,26,.34) 42%,
    rgba(5,13,26,.40) 68%, rgba(5,13,26,.62) 100%);
}
.section.tex.tex-strong::after {
  background: linear-gradient(180deg,
    rgba(5,13,26,.50) 0%, rgba(5,13,26,.30) 45%,
    rgba(5,13,26,.38) 70%, rgba(5,13,26,.58) 100%);
}

/* Reduce texture weight on small screens — cover-scaled 16:9 art crops hard
   on tall narrow viewports and starts competing with the copy. */
@media (max-width: 700px) {
  .section.tex::before { opacity: .22; }
  .section.tex.tex-strong::before { opacity: .38; }
}

/* Illustrated persona portraits: soften the square PNG into the card. */
.card .avatar-slot .avatar-photo { object-position: center 18%; }
.card .avatar-slot::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, #29B6F6) 45%, transparent);
  pointer-events: none;
}

/* --- Leadership LinkedIn links --- */
.li-link{
  display:inline-flex;align-items:center;gap:6px;margin-top:10px;
  font-size:12px;font-weight:600;letter-spacing:.02em;
  color:var(--mist);text-decoration:none;
  padding:5px 10px;border:1px solid rgba(255,255,255,.14);border-radius:999px;
  transition:color .15s ease,border-color .15s ease,background-color .15s ease;
}
.li-link svg{flex:0 0 auto}
.li-link:hover,.li-link:focus-visible{
  color:#fff;border-color:rgba(56,189,248,.55);background:rgba(56,189,248,.10);
}

/* ============================================================
   RESPONSIVE SAFETY NET
   Grid/flex children default to min-width:auto, which floors a
   track at its min-content width and pushes the page sideways.
   These rules let tracks and items actually shrink.
   ============================================================ */
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0,1fr); }
}

.grid-2 > *, .grid-3 > *, .grid-4 > *,
.card > *, .feature-list, .feature-list-item, .feature-list-item > *,
.fdr-benefit > *, .stage, .stage > *, .rgrid > * { min-width: 0; }

.card, .feature-list-item, .stage { overflow-wrap: break-word; }

/* Inline multi-column grids stack on small screens. The column count
   is set inline, so overriding it needs the same specificity weight. */
@media (max-width: 860px) {
  .rgrid { grid-template-columns: minmax(0,1fr) !important; }
}

/* Buttons never exceed their container (long mailto labels, etc.) */
.btn { max-width: 100%; }
@media (max-width: 600px) {
  .btn { overflow-wrap: anywhere; text-align: center; }
  .btn-lg { padding: 14px 20px; font-size: 15px; }
}

/* Button/pill rows wrap instead of running off a phone screen. */
@media (max-width: 760px) {
  .flex { flex-wrap: wrap; }
}
.split-offset > *, .feature-row > * { min-width: 0; }

/* ---- CONFIG SHOT (product screenshots with a graceful empty state) --------
   Same trick as the leadership avatars: the <img> sits on top of a labeled
   placeholder. With no src (or a broken one) the img is hidden by the
   :not([src]) / error rule and the placeholder shows through — so the page
   never renders a broken-image icon and never shifts when a real screenshot
   is dropped in. To add one, just set src on the img. */
.shot {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--zinc); background: var(--slate);
  aspect-ratio: 16 / 10;
}
.shot img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center; display: block; z-index: 1;
}
.shot img:not([src]), .shot img[src=""] { display: none; }
.shot-empty {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; text-align: center;
  padding: 20px; background:
    repeating-linear-gradient(45deg, rgba(41,182,246,.035) 0 10px, transparent 10px 20px),
    var(--slate);
}
.shot-empty .shot-label {
  font-family: var(--font-m); font-size: 12px; font-weight: 600;
  color: rgba(230,236,245,.72); letter-spacing: .02em;
}
.shot-empty .shot-hint { font-size: 11px; color: rgba(230,236,245,.38); font-family: var(--font-m); }
.shot-caption { margin-top: 10px; font-size: 13px; color: var(--mist); line-height: 1.5; }

/* ---- PHASE RAIL (implementation timeline) -------------------------------- */
.phase { position: relative; padding: 0 0 26px 30px; border-left: 2px solid rgba(41,182,246,.25); }
.phase:last-child { border-left-color: transparent; padding-bottom: 0; }
.phase::before {
  content: ''; position: absolute; left: -8px; top: 3px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--blue); box-shadow: 0 0 16px rgba(41,182,246,.55);
}
.phase .phase-k { font-family: var(--font-m); font-size: 11px; color: var(--sky); letter-spacing: .08em; text-transform: uppercase; }
.phase h4 { font-size: 17px; color: var(--white); margin: 4px 0 6px; }
.phase p { font-size: 14px; color: rgba(230,236,245,.62); margin: 0; line-height: 1.6; }

/* Ghost buttons sitting on a hero photo need their own ground — a 0.22-alpha
   white border and white text vanish against a light patch of photograph.
   Only heroes are affected; ghost buttons on solid sections are unchanged. */
.hero .btn-ghost {
  background: rgba(4, 12, 24, .58);
  border-color: rgba(255, 255, 255, .42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero .btn-ghost:hover, .hero .btn-ghost:focus-visible {
  background: rgba(4, 12, 24, .78);
  border-color: rgba(255, 255, 255, .7);
}