/* ==========================================================================
   Velocity Rank AI — Shared Stylesheet
   Token architecture: primitives -> semantic tokens -> components.
   Components ONLY ever reference semantic tokens (--color-*, --chart-*),
   never primitives directly and never a theme name. That means a new theme
   is added by adding one more [data-theme="..."] block that redefines the
   semantic tokens — no component CSS ever needs to change.
   ========================================================================== */

/* ---- 1. Primitives (raw palette, theme-agnostic) ------------------------ */
:root {
  --p-blue-950: #050B18;
  --p-blue-900: #0A1B3D;
  --p-blue-800: #0E2C6E;
  --p-blue-700: #1450D6;
  --p-blue-600: #2563EB;
  --p-blue-500: #3B82F6;
  --p-blue-400: #5B9BFA;
  --p-blue-300: #8FBCFC;
  --p-blue-200: #BBD7FE;
  --p-blue-100: #E3EDFE;
  --p-blue-50:  #F2F7FF;

  --p-slate-950: #080C15;
  --p-slate-900: #111726;
  --p-slate-800: #1B2436;
  --p-slate-700: #333B4D;
  --p-slate-600: #4B5568;
  --p-slate-500: #6B7488;
  --p-slate-400: #8D98AC;
  --p-slate-300: #B9C4D6;
  --p-slate-200: #D7DEEA;
  --p-slate-100: #EAF0FA;
  --p-slate-50:  #F5F8FD;
  --p-white: #FFFFFF;

  --p-green-700: #157A3D;
  --p-green-500: #16A34A;
  --p-green-300: #4ADE80;
  --p-amber-500: #B7791E;
  --p-amber-300: #F5C453;

  --radius: 14px;
  --radius-sm: 8px;
  --max-width: 1180px;
  --transition-fast: .15s ease;
  --transition-med: .25s ease;
}

/* ---- 2. Semantic tokens — LIGHT (default) -------------------------------- */
:root,
:root[data-theme="light"] {
  --color-bg: var(--p-white);
  --color-bg-alt: var(--p-blue-50);
  --color-surface: var(--p-white);
  --color-surface-alt: var(--p-blue-100);
  --color-surface-sunken: var(--p-slate-50);

  --color-border: var(--p-slate-200);
  --color-border-strong: var(--p-slate-400);

  --color-text: var(--p-slate-900);
  --color-text-muted: var(--p-slate-600);
  --color-text-faint: #5C6579; /* darker than slate-500: ~5.8:1 on white, safe margin above the 4.5:1 floor */
  --color-text-inverse: var(--p-white);
  --color-text-on-primary: var(--p-white);

  --color-primary: var(--p-blue-700);
  --color-primary-hover: var(--p-blue-600);
  --color-primary-soft-bg: var(--p-blue-100);
  --color-primary-soft-text: var(--p-blue-700);
  --color-link: var(--p-blue-700);

  --color-accent-band-start: var(--p-slate-900);
  --color-accent-band-end: var(--p-blue-800);
  --color-accent-band-text: var(--p-white);
  --color-accent-band-text-muted: rgba(255,255,255,.72);

  --color-success-bg: #E9FBF0;
  --color-success-border: #9AE6B4;
  --color-success-text: var(--p-green-700);
  --color-star: #8A5A00; /* darker gold than p-amber-500: ~5.9:1 on white as text glyphs */

  --color-focus-ring: var(--p-blue-600);

  --shadow-sm: 0 2px 10px rgba(17, 23, 38, 0.06);
  --shadow-md: 0 12px 32px rgba(17, 23, 38, 0.10);
  --shadow-lg: 0 24px 60px rgba(10, 20, 45, 0.16);
  --header-blur-bg: rgba(255,255,255,.92);

  --chart-grid: #EEF2FB;
  --chart-text: var(--p-slate-600);
  --chart-line: var(--p-blue-700);
  --chart-line-fill-a: rgba(20,80,214,0.25);
  --chart-line-fill-b: rgba(20,80,214,0.02);
  --chart-line-alt: var(--p-slate-900);
  --chart-line-alt-fill-a: rgba(17,23,38,0.22);
  --chart-line-alt-fill-b: rgba(17,23,38,0.02);
  --chart-bar: var(--p-blue-600);
  --chart-bar-muted: var(--p-slate-300);
  --chart-d1: var(--p-blue-700);
  --chart-d2: var(--p-blue-600);
  --chart-d3: var(--p-blue-400);
  --chart-d4: #93C5FD;
  --chart-d5: var(--p-slate-300);
}

/* ---- 3. Semantic tokens — DARK -------------------------------------------
   Two selectors keep this correct in both directions:
   (a) system preference, when the visitor hasn't chosen explicitly
   (b) explicit [data-theme="dark"], which always wins (the toggle) ------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --color-bg: #0B1220;
    --color-bg-alt: #101A30;
    --color-surface: #121B2E;
    --color-surface-alt: #1B2740;
    --color-surface-sunken: #0E1526;

    --color-border: #2A3550;
    --color-border-strong: #4C5B80;

    --color-text: #F3F6FC;
    --color-text-muted: #A9B4CB;
    --color-text-faint: #8894AD;
    --color-text-inverse: #0B1220;
    --color-text-on-primary: #FFFFFF;

    --color-primary: var(--p-blue-600);
    --color-primary-hover: var(--p-blue-500);
    --color-primary-soft-bg: #16233F;
    --color-primary-soft-text: var(--p-blue-200);
    --color-link: var(--p-blue-300);

    --color-accent-band-start: #060B16;
    --color-accent-band-end: #0E2C6E;
    --color-accent-band-text: #FFFFFF;
    --color-accent-band-text-muted: rgba(255,255,255,.72);

    --color-success-bg: #0F2A1C;
    --color-success-border: #1F5C3B;
    --color-success-text: var(--p-green-300);
    --color-star: var(--p-amber-300);

    --color-focus-ring: var(--p-blue-300);

    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
    --header-blur-bg: rgba(11,18,32,.86);

    --chart-grid: #22304C;
    --chart-text: #A9B4CB;
    --chart-line: var(--p-blue-300);
    --chart-line-fill-a: rgba(143,188,252,0.22);
    --chart-line-fill-b: rgba(143,188,252,0.02);
    --chart-line-alt: #C7D0E2;
    --chart-line-alt-fill-a: rgba(199,208,226,0.18);
    --chart-line-alt-fill-b: rgba(199,208,226,0.02);
    --chart-bar: var(--p-blue-400);
    --chart-bar-muted: #3C4A6B;
    --chart-d1: var(--p-blue-300);
    --chart-d2: var(--p-blue-400);
    --chart-d3: var(--p-blue-500);
    --chart-d4: var(--p-blue-600);
    --chart-d5: #4C5B80;
  }
}
:root[data-theme="dark"] {
  --color-bg: #0B1220;
  --color-bg-alt: #101A30;
  --color-surface: #121B2E;
  --color-surface-alt: #1B2740;
  --color-surface-sunken: #0E1526;

  --color-border: #2A3550;
  --color-border-strong: #4C5B80;

  --color-text: #F3F6FC;
  --color-text-muted: #A9B4CB;
  --color-text-faint: #8894AD;
  --color-text-inverse: #0B1220;
  --color-text-on-primary: #FFFFFF;

  --color-primary: var(--p-blue-600);
  --color-primary-hover: var(--p-blue-500);
  --color-primary-soft-bg: #16233F;
  --color-primary-soft-text: var(--p-blue-200);
  --color-link: var(--p-blue-300);

  --color-accent-band-start: #060B16;
  --color-accent-band-end: #0E2C6E;
  --color-accent-band-text: #FFFFFF;
  --color-accent-band-text-muted: rgba(255,255,255,.72);

  --color-success-bg: #0F2A1C;
  --color-success-border: #1F5C3B;
  --color-success-text: var(--p-green-300);
  --color-star: var(--p-amber-300);

  --color-focus-ring: var(--p-blue-300);

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
  --header-blur-bg: rgba(11,18,32,.86);

  --chart-grid: #22304C;
  --chart-text: #A9B4CB;
  --chart-line: var(--p-blue-300);
  --chart-line-fill-a: rgba(143,188,252,0.22);
  --chart-line-fill-b: rgba(143,188,252,0.02);
  --chart-line-alt: #C7D0E2;
  --chart-line-alt-fill-a: rgba(199,208,226,0.18);
  --chart-line-alt-fill-b: rgba(199,208,226,0.02);
  --chart-bar: var(--p-blue-400);
  --chart-bar-muted: #3C4A6B;
  --chart-d1: var(--p-blue-300);
  --chart-d2: var(--p-blue-400);
  --chart-d3: var(--p-blue-500);
  --chart-d4: var(--p-blue-600);
  --chart-d5: #4C5B80;
}

/* Adding a future theme (e.g. [data-theme="midnight"] or a high-contrast
   variant) means pasting one more block like the two above with new values
   for the same token names. Nothing below this line ever needs to change. */

/* ---- 4. Base ------------------------------------------------------------ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; color-scheme: light dark; }
/* No 300ms double-tap-zoom wait on taps; pinch zoom is unaffected. */
a, button, summary, label, input, select, textarea { touch-action: manipulation; }
a, button { -webkit-tap-highlight-color: rgba(37, 99, 235, .15); }
body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background var(--transition-med), color var(--transition-med);
}
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.15; font-weight: 800; letter-spacing: -0.01em; color: var(--color-text); }
h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; color: var(--color-text-muted); }
a { color: var(--color-link); text-decoration: none; }
img, svg { max-width: 100%; display: block; }
ul { padding-left: 1.2em; }
:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; border-radius: 4px; }
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}
section { padding: 88px 0; }
.section-tight { padding: 56px 0; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-primary-soft-text);
  background: var(--color-primary-soft-bg);
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 18px;
}
.section-head { max-width: 700px; margin: 0 0 48px; }
.section-head.center { margin: 0 auto 56px; text-align: center; }
.section-head p { font-size: 1.08rem; }

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

/* ---- Buttons -------------------------------------------------------------*/
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 100px;
  font-weight: 700;
  font-size: .96rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--color-primary); color: var(--color-text-on-primary); box-shadow: 0 10px 24px rgba(20,80,214,.28); }
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-outline { background: transparent; border-color: var(--color-border-strong); color: var(--color-text); }
.btn-outline:hover { border-color: var(--color-primary); color: var(--color-link); }
.btn-white { background: var(--p-white); color: var(--p-blue-800); }
.btn-white:hover { background: var(--p-blue-50); }
.btn-ghost-light { background: transparent; border-color: rgba(255,255,255,.35); color: var(--p-white); }
.btn-ghost-light:hover { border-color: var(--p-white); background: rgba(255,255,255,.08); }
.btn-sm { padding: 9px 18px; font-size: .85rem; }
.btn-block { width: 100%; }

/* ---- Theme toggle ---------------------------------------------------------*/
.theme-toggle {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 1.05rem; flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--transition-fast), transform .15s cubic-bezier(.34,1.56,.64,1);
}
.theme-toggle:hover { border-color: var(--color-primary); transform: translateY(-1px); }
.theme-toggle:active { transform: scale(.88); }
.theme-toggle .icon-dark { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-light { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .theme-toggle .icon-light { display: none; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .theme-toggle .icon-dark { display: block; }
}

/* ---- Header / nav ---------------------------------------------------------*/
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: var(--header-blur-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow var(--transition-med), background var(--transition-med), border-color var(--transition-med);
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  max-width: 1480px; /* wider than the page's --max-width (1180px) on purpose:
    the nav needs more horizontal room than a content column does, so it
    isn't artificially squeezed on wide screens — see the 1360px breakpoint
    below, which is sized so nav-links never has to wrap once shown. */
  margin: 0 auto;
  gap: 14px;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.2rem; color: var(--color-text); flex-shrink: 0; white-space: nowrap; }
.brand-mark {
  width: 38px; height: 38px; border-radius: 10px;
  background: linear-gradient(135deg, var(--p-blue-600), var(--p-blue-900));
  display: flex; align-items: center; justify-content: center;
  color: var(--p-white); font-weight: 800; font-size: 1rem;
  box-shadow: 0 6px 16px rgba(20,80,214,.35);
  flex-shrink: 0;
}
.brand span.accent { color: var(--color-link); }
.nav-links { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; flex-wrap: nowrap; flex-shrink: 0; }
.nav-links > li { position: relative; flex-shrink: 0; }
.nav-links > li > a, .nav-links > li > button.nav-toggle-btn {
  display: flex; align-items: center; gap: 4px;
  padding: 9px 9px; border-radius: 8px; font-weight: 600; font-size: .9rem;
  color: var(--color-text-muted); background: none; border: none; cursor: pointer; font-family: inherit;
  position: relative;
  white-space: nowrap;
}
.nav-links > li > a:hover, .nav-links > li > button.nav-toggle-btn:hover {
  color: var(--color-link); background: var(--color-bg-alt);
}
.nav-links > li > a.active { color: var(--color-link); }
.nav-links > li > a.active::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px;
  background: var(--color-primary); border-radius: 2px;
}
.nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.dropdown {
  position: absolute; top: 100%; left: 0; background: var(--color-surface);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 10px;
  min-width: 270px; max-height: min(70vh, 480px); overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: all var(--transition-fast);
  border: 1px solid var(--color-border);
}
.nav-links > li:hover .dropdown, .nav-links > li.open .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a { display: block; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--color-text-muted); font-weight: 600; font-size: .88rem; }
.dropdown a:hover { background: var(--color-bg-alt); color: var(--color-link); }

/* ---- Industries mega-menu (desktop) --------------------------------------
   Wide, columned, no internal scrollbar — replaces the old tall single-list
   dropdown so browsing 17 industries reads as a considered layout, not a
   scroll chore. */
.dropdown-mega {
  left: 50%;
  width: min(700px, 90vw);
  max-height: none;
  overflow: visible;
  padding: 26px 28px 18px;
  transform: translateX(-50%) translateY(6px);
}
.nav-links > li:hover .dropdown-mega,
.nav-links > li.open .dropdown-mega { transform: translateX(-50%) translateY(0); }
.mega-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 28px; }
.mega-col { display: flex; flex-direction: column; }
.mega-col-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--color-text-faint); font-weight: 800; padding: 2px 10px 10px; }
.mega-link { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--color-text-muted); font-weight: 600; font-size: .86rem; }
.mega-link:hover { background: var(--color-bg-alt); color: var(--color-link); }
.mega-cta { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; padding: 12px; border-radius: var(--radius-sm); background: var(--color-bg-alt); color: var(--color-link); font-weight: 800; font-size: .87rem; border-top: 1px solid var(--color-border); }
.mega-cta:hover { background: var(--color-primary-soft-bg); }

/* ---- Industries tile grid (mobile drawer) --------------------------------
   Two columns instead of one long list, so the drawer scrolls roughly half
   as far to reach Case Studies / Pricing / Contact at the bottom. */
.drawer-tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 6px; }
.drawer-tile { display: flex; align-items: center; gap: 8px; padding: 12px 10px; min-height: 44px; box-sizing: border-box; border-radius: var(--radius-sm); border: 1px solid var(--color-border); font-weight: 700; font-size: .8rem; color: var(--color-text); -webkit-tap-highlight-color: transparent; }
.drawer-tile:hover, .drawer-tile:focus-visible { border-color: var(--color-primary); }
.drawer-tile:active { background: var(--color-bg-alt); }

/* ---- Hero -----------------------------------------------------------------*/
.hero {
  position: relative;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(59,130,246,.15), transparent 60%),
    linear-gradient(180deg, var(--color-bg-alt), var(--color-bg));
  overflow: hidden;
  padding: 90px 0 60px;
}
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.hero h1 { margin-bottom: 20px; }
.hero .lead { font-size: 1.15rem; max-width: 540px; }
.hero-ctas { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.hero-trust { display: flex; gap: 26px; margin-top: 40px; flex-wrap: wrap; }
.hero-trust strong { display: block; font-size: 1.5rem; color: var(--color-primary-soft-text); font-weight: 800; }
.hero-trust span { font-size: .82rem; color: var(--color-text-faint); font-weight: 600; }

.hero-panel {
  background: var(--color-surface);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
  padding: 22px;
  position: relative;
}
.hero-panel .panel-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.panel-badge { position: absolute; background: var(--color-surface); border-radius: 12px; box-shadow: var(--shadow-md); padding: 12px 16px; font-size: .82rem; font-weight: 700; display: flex; align-items: center; gap: 10px; border: 1px solid var(--color-border); color: var(--color-text); }
.panel-badge .num { font-size: 1.1rem; color: var(--color-success-text); }
.panel-badge.badge-1 { top: -18px; right: -22px; }
.panel-badge.badge-2 { bottom: -18px; left: -26px; }
.mini-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.mini-stat { background: var(--color-bg-alt); border-radius: 10px; padding: 12px; text-align: center; }
.mini-stat strong { display: block; font-size: 1.1rem; color: var(--color-primary-soft-text); }
.mini-stat span { font-size: .72rem; color: var(--color-text-faint); font-weight: 600; }

/* ---- Trust strip -----------------------------------------------------------*/
.trust-strip { padding: 40px 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); background: var(--color-bg-alt); }
.trust-strip p.label { text-align: center; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--color-text-faint); margin-bottom: 22px; }
.logo-pill { font-weight: 800; color: var(--color-primary-soft-text); font-size: .95rem; padding: 8px 18px; border: 1.5px solid var(--color-border); border-radius: 100px; background: var(--color-surface); }

/* ---- Stat band -------------------------------------------------------------*/
.stat-band { background: linear-gradient(120deg, var(--color-accent-band-start), var(--color-accent-band-end)); color: var(--color-accent-band-text); }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; text-align: center; }
.stat-grid strong { display: block; font-size: clamp(2rem, 3vw, 2.6rem); font-weight: 800; color: var(--color-accent-band-text); }
.stat-grid span { color: var(--color-accent-band-text-muted); font-size: .9rem; font-weight: 600; }

/* ---- Cards / grids ---------------------------------------------------------*/
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }

.feature-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-med), transform var(--transition-med), background var(--transition-med), border-color var(--transition-med);
}
.feature-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.feature-icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--color-primary-soft-bg); color: var(--color-primary-soft-text);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px; font-size: 1.3rem;
}
.feature-card a.link { font-weight: 700; font-size: .88rem; display: inline-flex; align-items: center; gap: 6px; }
.feature-card.featured { border-color: var(--color-primary); background: linear-gradient(160deg, var(--color-surface), var(--color-bg-alt)); }
.badge-new { display: inline-block; background: var(--color-primary); color: var(--color-text-on-primary); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 3px 9px; border-radius: 100px; margin-left: 8px; vertical-align: middle; }

.capability-card { background: var(--color-bg-alt); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--color-border); }
.capability-card .chart-wrap { background: var(--color-surface); margin: 18px; border-radius: var(--radius-sm); padding: 16px; box-shadow: var(--shadow-sm); }
.capability-card .body { padding: 0 24px 28px; }

/* ---- Process ---------------------------------------------------------------*/
.process-list { display: grid; gap: 20px; margin-top: 10px; }
.process-step { display: grid; grid-template-columns: 64px 1fr; gap: 20px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-sm); }
.process-num { width: 56px; height: 56px; border-radius: 50%; background: var(--color-primary); color: var(--color-text-on-primary); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.2rem; }

/* ---- Testimonials ------------------------------------------------------------*/
.testimonial-card { background: var(--color-surface); border-radius: var(--radius); border: 1px solid var(--color-border); padding: 28px; box-shadow: var(--shadow-sm); }
.testimonial-stars { color: var(--color-star); letter-spacing: 2px; margin-bottom: 12px; }
.testimonial-person { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.avatar-placeholder { width: 44px; height: 44px; border-radius: 50%; background: var(--color-primary-soft-bg); color: var(--color-primary-soft-text); display: flex; align-items: center; justify-content: center; font-weight: 800; }
.testimonial-person strong { display: block; font-size: .92rem; color: var(--color-text); }
.testimonial-person span { font-size: .8rem; color: var(--color-text-faint); }

/* ---- FAQ ----------------------------------------------------------------------*/
.faq-item { border-bottom: 1px solid var(--color-border); padding: 6px 0; }
.faq-q { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; text-align: left; background: none; border: none; padding: 20px 4px; font-weight: 700; font-size: 1.02rem; cursor: pointer; color: var(--color-text); font-family: inherit; }
.faq-q .icon { font-size: 1.3rem; color: var(--color-link); transition: transform var(--transition-med); flex-shrink: 0; }
.faq-item.open .faq-q .icon { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height var(--transition-med); }
.faq-a p { padding: 0 4px 18px; }

/* ---- Why choose ----------------------------------------------------------------*/
.value-card { text-align: center; padding: 10px; }
.value-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--color-primary-soft-bg); color: var(--color-primary-soft-text); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; font-size: 1.6rem; }

/* ---- CTA band -------------------------------------------------------------------*/
.cta-band { background: linear-gradient(120deg, var(--p-blue-800), var(--p-blue-600)); color: var(--p-white); border-radius: 24px; padding: 64px; text-align: center; margin: 0 24px; }
.cta-band h2 { color: var(--p-white); }
.cta-band p { color: rgba(255,255,255,.85); max-width: 620px; margin: 0 auto 28px; }
.cta-band .hero-ctas { justify-content: center; }
.cta-wrap { max-width: var(--max-width); margin: 0 auto; }

/* ---- Footer -----------------------------------------------------------------------*/
.site-footer { background: var(--color-accent-band-start); color: rgba(255,255,255,.7); padding-top: 70px; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 50px; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer-brand .brand { color: var(--p-white); }
.footer-top h4 { color: var(--p-white); font-size: .95rem; margin-bottom: 18px; }
.footer-top ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-top a { color: rgba(255,255,255,.68); font-size: .92rem; }
.footer-top a:hover { color: var(--p-white); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding: 26px 0; font-size: .82rem; flex-wrap: wrap; gap: 12px; }
.social-row { display: flex; gap: 10px; }
.social-row a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; color: var(--p-white); font-size: .85rem; }
.social-row a:hover { background: var(--p-blue-600); }
.badge-row { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.badge-pill { font-size: .76rem; border: 1px solid rgba(255,255,255,.22); border-radius: 100px; padding: 6px 12px; color: rgba(255,255,255,.75); }

/* ---- Page header (sub pages) ---------------------------------------------------------*/
.page-header { background: linear-gradient(120deg, var(--color-accent-band-start), var(--color-accent-band-end)); color: var(--p-white); padding: 70px 0 60px; text-align: center; }
.page-header .eyebrow { background: rgba(255,255,255,.14); color: var(--p-white); }
.page-header h1 { color: var(--p-white); margin-bottom: 12px; }
.page-header p { color: rgba(255,255,255,.78); max-width: 640px; margin: 0 auto; }
.page-header .icon-badge { width: 64px; height: 64px; border-radius: 16px; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; margin: 0 auto 20px; }
.breadcrumb { font-size: .82rem; color: rgba(255,255,255,.6); margin-bottom: 18px; }
.breadcrumb a { color: rgba(255,255,255,.85); }

/* ---- Case studies --------------------------------------------------------------------*/
.filter-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 44px; }
.filter-btn { border: 1.5px solid var(--color-border-strong); background: var(--color-surface); padding: 9px 18px; border-radius: 100px; font-weight: 700; font-size: .84rem; cursor: pointer; color: var(--color-text-muted); font-family: inherit; transition: all var(--transition-fast); }
.filter-btn.active, .filter-btn:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-on-primary); }
.case-card { border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); background: var(--color-surface); transition: transform var(--transition-med), box-shadow var(--transition-med); }
.case-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.case-card-head { padding: 22px 22px 0; }
.case-tag { display: inline-block; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--color-primary-soft-text); background: var(--color-primary-soft-bg); padding: 4px 10px; border-radius: 6px; margin-bottom: 12px; }
.case-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; padding: 16px 22px; }
.case-metric { text-align: center; background: var(--color-bg-alt); border-radius: 8px; padding: 10px 4px; }
.case-metric strong { display: block; font-size: 1.1rem; color: var(--color-primary-soft-text); }
.case-metric span { font-size: .68rem; color: var(--color-text-faint); font-weight: 600; }
.case-chart { padding: 4px 22px 6px; height: 140px; }
.case-card-body { padding: 4px 22px 24px; }
.case-card-body p { font-size: .92rem; margin-bottom: 12px; }

/* ---- About page -------------------------------------------------------------------------*/
.team-card { text-align: center; }
.team-photo { width: 100%; aspect-ratio: 1; border-radius: var(--radius); background: var(--color-primary-soft-bg); display: flex; align-items: center; justify-content: center; color: var(--color-primary-soft-text); font-weight: 800; font-size: 2rem; margin-bottom: 16px; }
.timeline { display: grid; gap: 26px; }
.timeline-item { display: grid; grid-template-columns: 90px 1fr; gap: 20px; }
.timeline-year { font-weight: 800; color: var(--color-link); }

/* ---- Industries -----------------------------------------------------------------------*/
.industry-hub-card { display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 26px; background: var(--color-surface); box-shadow: var(--shadow-sm); transition: transform var(--transition-med), box-shadow var(--transition-med); height: 100%; }
.industry-hub-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.industry-hub-card .stat-line { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--color-border); font-size: .82rem; color: var(--color-text-faint); font-weight: 600; }
.industry-hub-card .stat-line strong { color: var(--color-success-text); }
.industry-group-label { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-faint); margin: 48px 0 20px; }
.industry-group-label:first-child { margin-top: 0; }

/* ---- Contact --------------------------------------------------------------------------*/
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; }
.form-field { margin-bottom: 18px; }
.form-field label { display: block; font-weight: 700; font-size: .85rem; margin-bottom: 6px; color: var(--color-text); }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; padding: 12px 14px; border-radius: var(--radius-sm); border: 1.5px solid var(--color-border-strong);
  font-family: inherit; font-size: .95rem; background: var(--color-surface); color: var(--color-text);
}
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--color-text-faint); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft-bg); }
.contact-info-card { background: var(--color-bg-alt); border-radius: var(--radius); padding: 30px; }
.contact-info-row { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 22px; }
.contact-info-row .feature-icon { margin-bottom: 0; flex-shrink: 0; }
.contact-info-row p { color: var(--color-text); }
.form-note { font-size: .82rem; color: var(--color-text-faint); margin-top: 10px; }
.form-success { display: none; background: var(--color-success-bg); border: 1px solid var(--color-success-border); color: var(--color-success-text); padding: 14px 16px; border-radius: var(--radius-sm); font-weight: 600; font-size: .9rem; margin-top: 14px; }

/* ---- Pricing --------------------------------------------------------------------------*/
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.pricing-card { border: 1.5px solid var(--color-border); border-radius: var(--radius); padding: 32px; background: var(--color-surface); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.pricing-card.featured { border-color: var(--color-primary); box-shadow: var(--shadow-md); position: relative; transform: translateY(-6px); }
.pricing-badge { position: absolute; top: -14px; right: 24px; background: var(--color-primary); color: var(--color-text-on-primary); font-size: .72rem; font-weight: 800; padding: 5px 14px; border-radius: 100px; }
.price-num { font-size: 2.4rem; font-weight: 800; color: var(--color-primary-soft-text); margin: 12px 0 4px; }
.price-num span { font-size: 1rem; color: var(--color-text-faint); font-weight: 600; }
.pricing-card ul { list-style: none; padding: 0; margin: 20px 0 26px; display: grid; gap: 12px; }
.pricing-card ul li { font-size: .9rem; padding-left: 26px; position: relative; color: var(--color-text-muted); }
.pricing-card ul li::before { content: "✓"; position: absolute; left: 0; color: var(--color-success-text); font-weight: 800; }

/* ---- App showcase page ------------------------------------------------------------------*/
.app-showcase-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: center; }
.phone-shell {
  width: min(300px, 100%); margin: 0 auto; border-radius: 42px; padding: 14px;
  background: linear-gradient(160deg, #1B2436, #0B1220);
  box-shadow: var(--shadow-lg);
  position: relative;
  box-sizing: border-box;
}
.phone-shell::before {
  content: ""; position: absolute; top: 26px; left: 50%; transform: translateX(-50%);
  width: 90px; height: 18px; background: #0B1220; border-radius: 12px; z-index: 3;
}
.phone-screen {
  background: var(--color-bg); border-radius: 30px; overflow: hidden; position: relative;
  height: 600px; display: flex; flex-direction: column; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.app-topbar { background: var(--color-primary); color: #fff; padding: 42px 20px 16px; }
.app-topbar .app-title { font-weight: 800; font-size: 1.05rem; }
.app-topbar .app-sub { font-size: .78rem; opacity: .85; margin-top: 2px; }
.app-body { flex: 1; overflow-y: auto; padding: 18px; background: var(--color-bg); }
.app-screen { display: none; animation: appFadeIn .35s ease; }
.app-screen.active { display: block; }
@keyframes appFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.app-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; padding: 14px; margin-bottom: 12px; box-shadow: var(--shadow-sm); }
.app-service-btn { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; cursor: pointer; font-family: inherit; color: var(--color-text); font-weight: 700; font-size: .88rem; transition: border-color var(--transition-fast); }
.app-service-btn:hover, .app-service-btn.selected { border-color: var(--color-primary); background: var(--color-primary-soft-bg); }
.app-service-btn .emoji { font-size: 1.3rem; }
.app-calendar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.app-day { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; padding: 10px 4px; text-align: center; cursor: pointer; font-size: .78rem; font-weight: 700; color: var(--color-text); }
.app-day.selected { background: var(--color-primary); color: var(--color-text-on-primary); border-color: var(--color-primary); }
.app-day span { display: block; font-size: .65rem; font-weight: 600; color: var(--color-text-faint); margin-bottom: 2px; }
.app-day.selected span { color: rgba(255,255,255,.75); }
.app-slot { display: inline-block; padding: 8px 12px; border-radius: 100px; border: 1px solid var(--color-border); font-size: .78rem; font-weight: 700; margin: 0 6px 8px 0; cursor: pointer; color: var(--color-text); }
.app-slot.selected { background: var(--color-primary); color: var(--color-text-on-primary); border-color: var(--color-primary); }
.tech-profile { display: flex; gap: 12px; align-items: center; }
.tech-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--color-primary-soft-bg); color: var(--color-primary-soft-text); display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; }
.app-map-placeholder { height: 120px; border-radius: 12px; background:
    linear-gradient(135deg, var(--color-surface-alt) 25%, transparent 25%) -10px 0/20px 20px,
    linear-gradient(135deg, var(--color-surface-alt) 25%, transparent 25%) -10px -10px/20px 20px,
    linear-gradient(45deg, var(--color-surface-alt) 25%, var(--color-bg-alt) 25%) 0 0/20px 20px;
  position: relative; margin-bottom: 12px; border: 1px solid var(--color-border);
}
.app-map-placeholder .pin { position: absolute; top: 50%; left: 62%; width: 14px; height: 14px; background: var(--color-primary); border-radius: 50% 50% 50% 0; transform: translate(-50%,-100%) rotate(-45deg); box-shadow: 0 0 0 4px rgba(20,80,214,.2); }
.app-status-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--color-success-bg); color: var(--color-success-text); border: 1px solid var(--color-success-border); font-size: .74rem; font-weight: 800; padding: 5px 12px; border-radius: 100px; }
.app-tabbar { display: flex; border-top: 1px solid var(--color-border); background: var(--color-surface); }
.app-tab { flex: 1; text-align: center; padding: 12px 4px 16px; font-size: .68rem; font-weight: 700; color: var(--color-text-faint); background: none; border: none; cursor: pointer; font-family: inherit; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.app-tab .tab-emoji { font-size: 1.15rem; }
.app-tab.active { color: var(--color-link); }
.confirm-check { width: 60px; height: 60px; border-radius: 50%; background: var(--color-success-bg); color: var(--color-success-text); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; margin: 20px auto 14px; }

.app-feature-list { display: grid; gap: 18px; margin-top: 24px; }
.app-feature-row { display: flex; gap: 16px; align-items: flex-start; }
.app-feature-row .feature-icon { margin-bottom: 0; }
.tech-stack-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.tech-pill { font-size: .78rem; font-weight: 700; background: var(--color-bg-alt); color: var(--color-primary-soft-text); padding: 7px 14px; border-radius: 100px; border: 1px solid var(--color-border); }

/* ---- Animated gradient text (hero accent word) -------------------------------------------*/
.text-gradient {
  background: linear-gradient(90deg, var(--p-blue-600), var(--p-blue-400) 45%, var(--p-blue-600));
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: gradientShift 6s ease-in-out infinite;
}
@keyframes gradientShift { 0%, 100% { background-position: 0% center; } 50% { background-position: 100% center; } }

/* ---- Logo / trust marquee -----------------------------------------------------------------
   Infinite auto-scroll strip. The track's content is duplicated once in the
   HTML so translateX(-50%) loops seamlessly; pauses on hover so it doesn't
   fight anyone trying to read a specific logo, and freezes automatically
   under prefers-reduced-motion (global rule elsewhere in this file). */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 16px; width: max-content; animation: marqueeScroll 32s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- Animated count-up numbers ------------------------------------------------------------
   Applied via [data-count-to] + js/main.js; the static text in the HTML is
   the no-JS fallback, so nothing breaks if JS fails to load. */
[data-count-to] { font-variant-numeric: tabular-nums; }

/* ---- AI Assistant widget (AEO page) --------------------------------------------------------
   A self-playing mock chat demonstrating an AI assistant citing a client
   business in its answer. Plays once on scroll-into-view via IntersectionObserver in main.js. */
.ai-widget { max-width: 420px; margin: 0 auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 20px; box-shadow: var(--shadow-lg); overflow: hidden; }
.ai-widget-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--color-border); background: var(--color-bg-alt); }
.ai-widget-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-success-text); box-shadow: 0 0 0 3px var(--color-success-bg); flex-shrink: 0; }
.ai-widget-head strong { font-size: .88rem; flex: 1; }
.ai-widget-replay { margin-left: auto; background: none; border: 1px solid var(--color-border); border-radius: 100px; padding: 5px 12px; font-size: .74rem; font-weight: 700; color: var(--color-text-muted); cursor: pointer; font-family: inherit; transition: border-color .15s ease; -webkit-tap-highlight-color: transparent; }
.ai-widget-replay:hover { border-color: var(--color-primary); color: var(--color-link); }
.ai-widget-body { height: 360px; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px; display: flex; flex-direction: column; gap: 12px; scroll-behavior: smooth; }
.ai-msg { display: flex; gap: 8px; align-items: flex-end; max-width: 88%; opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; }
.ai-msg.is-visible { opacity: 1; transform: translateY(0); }
.ai-msg-user { flex-direction: row-reverse; margin-left: auto; }
.ai-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: .64rem; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ai-bubble { padding: 10px 14px; border-radius: 16px; font-size: .85rem; line-height: 1.5; }
.ai-msg-user .ai-bubble { background: var(--color-primary); color: #fff; border-bottom-right-radius: 4px; }
.ai-msg-bot .ai-bubble { background: var(--color-bg-alt); color: var(--color-text); border-bottom-left-radius: 4px; }
.ai-typing-bubble { display: flex; gap: 4px; padding: 14px; }
.ai-typing-bubble span { width: 6px; height: 6px; border-radius: 50%; background: var(--color-text-faint); animation: aiTypingBounce 1.2s ease-in-out infinite; }
.ai-typing-bubble span:nth-child(2) { animation-delay: .15s; }
.ai-typing-bubble span:nth-child(3) { animation-delay: .3s; }
@keyframes aiTypingBounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }
.ai-card { background: var(--color-surface); border: 1.5px solid var(--color-primary); border-radius: 14px; padding: 12px 14px; font-size: .85rem; box-shadow: var(--shadow-sm); }
.ai-card-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 800; }
.ai-card-rating { color: var(--color-star); font-size: .8rem; }
.ai-card-sub { color: var(--color-text-faint); font-size: .76rem; margin-top: 4px; }
.ai-card-phone { display: block; margin-top: 10px; text-align: center; font-weight: 800; background: var(--color-primary-soft-bg); color: var(--color-primary-soft-text); border-radius: 100px; padding: 9px; font-size: .84rem; }
.ai-widget-inputbar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--color-border); color: var(--color-text-faint); font-size: .82rem; flex-shrink: 0; }
.ai-widget-inputbar .ai-send { margin-left: auto; color: var(--color-primary); font-weight: 800; }

/* ---- Retail page -----------------------------------------------------------------------*/
.problem-list { list-style: none; margin: 22px 0 28px; padding: 0; display: grid; gap: 14px; }
.problem-list li { position: relative; padding-left: 26px; font-size: .96rem; color: var(--color-text-muted); }
.problem-list li::before { content: "\2022"; position: absolute; left: 6px; top: -1px; font-weight: 800; color: var(--color-primary); }
.problem-list strong { color: var(--color-text); }
.search-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.search-list li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-bg-alt); color: var(--color-text); font-size: .95rem; overflow-wrap: anywhere; }
.search-list li span { flex: none; }
.shop-tags { list-style: none; margin: 0 auto; padding: 0; max-width: 880px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.shop-tags li { padding: 9px 16px; border: 1px solid var(--color-border); border-radius: 100px; background: var(--color-surface); color: var(--color-text-muted); font-size: .92rem; font-weight: 600; }
.shop-tags li.is-lead { border-color: var(--color-primary); color: var(--color-text); }

/* Case study cards (services only) */
.case-loc { font-size: .82rem; color: var(--color-text-faint); }
.case-services { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.case-services li { font-size: .72rem; font-weight: 700; color: var(--color-text-muted); background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: 999px; padding: 4px 10px; }
.case-card-body { padding-top: 12px; }

/* Caption under example charts */
.chart-caption { font-size: .72rem; color: var(--color-text-faint); font-style: italic; margin: 6px 0 0; text-align: right; }

.capability-card .chart-caption { margin: -10px 20px 12px; }

/* Contact form error */
.form-error { display: none; background: var(--color-bg-alt); border: 1px solid var(--color-border); color: var(--color-text); padding: 14px 16px; border-radius: var(--radius-sm); font-size: .9rem; margin-top: 14px; }
.form-error a { font-weight: 700; }

/* ---- Utilities -------------------------------------------------------------------------*/
.bg-tint { background: var(--color-bg-alt); }
.pill-note { font-size: .78rem; color: var(--color-text-faint); text-align: center; margin-top: 10px; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--color-primary); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0; z-index: 1000; font-weight: 700; }
.skip-link:focus { left: 0; }

/* ---- Responsive ------------------------------------------------------------------------*/
@media (max-width: 1080px) {
  .app-showcase-grid { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  .hero-grid, .contact-grid { grid-template-columns: 1fr; }
  .grid-5, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 26px; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-card.featured { transform: none; }
}
@media (max-width: 760px) {
  section { padding: 60px 0; }
  .grid-5, .grid-4, .grid-3, .grid-2, .case-metrics { grid-template-columns: 1fr; }
  .cta-band { padding: 40px 24px; margin: 0 12px; }
  .process-step { grid-template-columns: 48px 1fr; }
  .footer-top { grid-template-columns: 1fr; }
}

/* ---- Off-canvas nav drawer (all screen sizes at/under the breakpoint) ----
   Structure is head (sticky) / nav (the only scrolling region) / actions
   (sticky) — so the close button and Get Started/Login buttons are ALWAYS
   reachable no matter how far you scroll through the industries list.
   That's the fix for "no part of the menu should be cut off."
   The backdrop + drawer live OUTSIDE .site-header in the markup: the
   header's backdrop-filter makes it the containing block for any
   position:fixed descendant, which shrank the backdrop to the header's
   height and turned the parked drawer into ~330px of sideways scroll.
   The breakpoint rules that show .menu-toggle are further down — they must
   stay after these base rules or the base `display: none` wins. */
.menu-toggle { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0; background: none; border: none; cursor: pointer; flex-shrink: 0; border-radius: 8px; transition: transform .15s cubic-bezier(.34,1.56,.64,1); -webkit-tap-highlight-color: transparent; }
.menu-toggle:active { transform: scale(.88); }
.menu-toggle span { display: block; width: 22px; height: 2px; background: var(--color-text); margin: 0; border-radius: 2px; transition: transform .25s cubic-bezier(.34,1.56,.64,1), opacity .2s ease; }
body.nav-open .menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .menu-toggle span:nth-child(2) { opacity: 0; transform: scaleX(0); }
body.nav-open .menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-drawer-backdrop {
  position: fixed; inset: 0; background: rgba(6,11,22,.55);
  opacity: 0; visibility: hidden; transition: opacity var(--transition-med);
  z-index: 590;
  -webkit-tap-highlight-color: transparent;
}
body.nav-open .nav-drawer-backdrop { opacity: 1; visibility: visible; }

.nav-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  height: 100vh; height: 100dvh;
  width: min(88vw, 380px);
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  z-index: 600;
  transform: translateX(100%);
  /* visibility (delayed until the slide-out ends) keeps the closed drawer
     out of the tab order and accessibility tree even where `inert` is
     unsupported. */
  visibility: hidden;
  transition: transform .28s cubic-bezier(.16,1,.3,1), visibility 0s linear .28s;
  display: flex; flex-direction: column;
  overflow: hidden;
  overscroll-behavior: contain;
  padding-top: env(safe-area-inset-top, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
body.nav-open .nav-drawer { transform: translateX(0); visibility: visible; transition: transform .28s cubic-bezier(.16,1,.3,1), visibility 0s; }
body.nav-open { overflow: hidden; }

.nav-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-shrink: 0; padding: 18px 20px 14px; border-bottom: 1px solid var(--color-border); }
.nav-drawer-close { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font-size: 1.15rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: border-color .15s ease, transform .15s cubic-bezier(.34,1.56,.64,1); -webkit-tap-highlight-color: transparent; }
.nav-drawer-close:hover { border-color: var(--color-primary); }
.nav-drawer-close:active { transform: scale(.88); }

.nav-drawer nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 6px 20px;
}
.nav-drawer ul { list-style: none; margin: 0; padding: 0; }
.nav-drawer li a { display: block; padding: 14px 4px; font-weight: 700; font-size: .93rem; color: var(--color-text); border-bottom: 1px solid var(--color-border); min-height: 48px; box-sizing: border-box; display: flex; align-items: center; }
.nav-drawer .drawer-group-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-faint); font-weight: 800; padding: 18px 4px 6px; }
.nav-drawer .drawer-group-label:first-child { padding-top: 10px; }

.nav-drawer-actions { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; padding: 14px 20px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--color-border); background: var(--color-surface); }
.nav-drawer-theme-row { display: flex; justify-content: center; padding-bottom: 4px; }
.nav-drawer .theme-toggle { width: 44px; height: 44px; }

/* Staggered entrance for the drawer's contents — the "cool effect" on open.
   Each direct child of the scrollable nav fades/slides in with a slight
   delay cascade, finishing within 300ms. Disabled automatically under prefers-reduced-motion via
   the global rule further up this file. */
.nav-drawer nav > * { opacity: 0; }
body.nav-open .nav-drawer nav > * { animation: drawerItemIn .18s cubic-bezier(.16,1,.3,1) forwards; }
.nav-drawer nav > *:nth-child(1) { animation-delay: .02s; }
.nav-drawer nav > *:nth-child(2) { animation-delay: .03s; }
.nav-drawer nav > *:nth-child(3) { animation-delay: .04s; }
.nav-drawer nav > *:nth-child(4) { animation-delay: .05s; }
.nav-drawer nav > *:nth-child(5) { animation-delay: .06s; }
.nav-drawer nav > *:nth-child(6) { animation-delay: .07s; }
.nav-drawer nav > *:nth-child(7) { animation-delay: .08s; }
.nav-drawer nav > *:nth-child(8) { animation-delay: .09s; }
.nav-drawer nav > *:nth-child(9) { animation-delay: .10s; }
.nav-drawer nav > *:nth-child(n+10) { animation-delay: .11s; }
@keyframes drawerItemIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }

/* ---- Nav breakpoint --------------------------------------------------------
   Switches to the hamburger + sidebar drawer well before the horizontal nav
   (7 links + 2 dropdowns + theme toggle + 2 buttons) would ever get cramped
   or wrap to a second line. 1360px is deliberately generous — it's the point
   below which brand + 7 links + theme toggle + 2 buttons can no longer all
   fit on one row, not just a generic tablet cutoff. Below it: hamburger.
   js/main.js builds its matchMedia query from --nav-breakpoint, so change
   the value here AND in the two @media rules below together (custom
   properties can't be used inside a media query itself).
   Kept at the end of the file on purpose: it must come after the base
   .menu-toggle rule, which would otherwise override it. */
:root { --nav-breakpoint: 1360px; }
@media (max-width: 1360px) {
  .nav-links { display: none; }
  .nav-actions > .theme-toggle,
  .nav-actions > .btn-outline,
  .nav-actions > .btn-primary { display: none; }
  .menu-toggle { display: flex; }
  /* Until main.js has wired the drawer up, reserve the button's space but
     don't show a control that can't do anything yet. If the script never
     loads, the footer links remain the way to navigate. */
  html:not(.nav-ready) .menu-toggle { visibility: hidden; }
  /* Same-page anchors land below the sticky header, not under it. */
  [id] { scroll-margin-top: 84px; }
  /* Long CTA labels ("Get Your Free General Contractor Ranking Audit") were
     wider than a phone with nowrap, and since grid items won't shrink below
     their content, they dragged the whole column off-screen. Buttons that fit
     still render on one line; only ones that can't fit now wrap. */
  .btn { white-space: normal; max-width: 100%; text-align: center; }
  .nav-drawer-head .brand { min-height: 44px; }
  /* With enlarged text, a nowrap/non-shrinking brand pushed the hamburger
     off the right edge. It still fits on one line at normal text sizes. */
  .nav .brand { flex-shrink: 1; min-width: 0; white-space: normal; flex-wrap: wrap; row-gap: 0; }
  /* The row is space-between, so this gap is only a minimum; 8px keeps the
     brand on one line beside the 44px toggle at 320px. */
  .nav { gap: 8px; }
}
@media not all and (max-width: 1360px) {
  .nav-drawer, .nav-drawer-backdrop { display: none; }
}
/* Grid/flex children default to min-width:auto, so a Chart.js canvas (sized
   from its first layout) or an unbreakable email address set a floor on the
   column's width and pushed it past the screen edge (enlarged text does the
   same to the stat, timeline, contact and footer rows). Scoped to where the
   grids collapse so multi-column tablet/desktop layouts are untouched. */
@media (max-width: 980px) {
  [class*="grid"] > *,
  .mini-stat-row > *, .process-step > *, .timeline-item > *,
  .contact-info-row > *, .footer-bottom > * { min-width: 0; }
  body { overflow-wrap: break-word; }
}