/* ============================================================
   RaptBot — Salesforce Advisory & Engineering
   Design system: light theme · navy ink + bolt amber + logo purple
   Space Grotesk (single font family across headings & body)
   ============================================================ */

:root {
  /* light surfaces — light-blue theme (Jul 2026).
     To revert to the previous near-white theme, restore:
     --bg:#FAFBFE; --bg-2:#F1F3FA; --paper:#F1F3FA; --paper-2:#E9ECF6;
     hero-bg top stop #FFFFFF; nav.scrolled / .mobile-menu rgba(250,251,254,…) */
  --bg: #D9E9FA;
  --bg-2: #C9E0F7;
  --surface: #FFFFFF;
  --line: rgba(18, 23, 63, 0.10);
  --line-strong: rgba(18, 23, 63, 0.20);

  /* ink (text on light) */
  --text: #12173F;
  --ink: #12173F;
  --muted: #4E5578;
  --ink-muted: #4E5578;
  --faint: #7A80A3;

  /* brand (from the logo) — harmonised with the Agentic Talks palette */
  --navy: #1B2A6B;        /* logo cloud fill / primary navy */
  --purple: #4B2C83;      /* logo outline */
  --bolt: #F5A623;        /* gold */
  --bolt-bright: #FFB944; /* gold — bright */
  --bolt-deep: #F7941D;   /* gold — deep (gradient end) */
  --gold: #F5A623;
  --gold-hi: #FFB944;
  --gold-ink: #A96D08;    /* gold dark enough for text on white */
  --accent-text: #A96D08;

  /* dark accent sections (hero, footer, CTA, highlight panels) */
  --deep: #0D1A45;
  --deeper: #091233;
  --dark-1: #0B1338;
  --dark-2: #16255E;
  --ice: #CADCFC;
  --mist: #F4F6FB;
  --line-d: rgba(202, 220, 252, 0.16);
  --on-dark: #EEF0FA;
  --on-dark-muted: #A9AFD1;
  --on-dark-faint: #8A90B8;

  /* kept for existing markup */
  --paper: #E4EFFB;
  --paper-2: #D5E6F8;

  /* type */
  --font-display: "Space Grotesk", "Segoe UI", sans-serif;
  --font-serif: "Space Grotesk", "Segoe UI", sans-serif;
  --font-body: "Space Grotesk", "Segoe UI", sans-serif;

  /* layout */
  --container: 1240px;
  --radius: 18px;
  --radius-sm: 12px;

  --shadow-card: 0 16px 44px -20px rgba(18, 23, 63, 0.28);
  --shadow-soft: 0 8px 28px -18px rgba(18, 23, 63, 0.22);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  font-size: 1.0625rem;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
::selection { background: var(--bolt); color: var(--navy); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.container { width: min(var(--container), 92vw); margin-inline: auto; }

/* ---------- utility ---------- */
.accent { color: var(--accent-text); }
.nowrap { white-space: nowrap; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.eyebrow::before {
  content: "";
  width: 26px; height: 2px;
  background: linear-gradient(90deg, var(--bolt-bright), var(--bolt-deep));
  border-radius: 2px;
}

.section { padding: clamp(4.5rem, 9vw, 7.5rem) 0; position: relative; }
.section-head { max-width: 780px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head h2 {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  margin: 1rem 0 1.1rem;
}
.section-head p { color: var(--muted); font-size: 1.1rem; max-width: 640px; }

/* tinted band (class kept from earlier markup) */
.band-light { background: var(--bg-2); }
.band-light .section-head p, .band-light p { color: var(--muted); }
.band-light .eyebrow { color: var(--accent-text); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  padding: 0.95rem 1.7rem;
  border-radius: 999px;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s, border-color 0.25s, color 0.25s;
  will-change: transform;
}
.btn svg { width: 17px; height: 17px; transition: transform 0.25s var(--ease); }
.btn:hover svg { transform: translateX(4px); }

.btn-primary {
  background: linear-gradient(135deg, var(--bolt-bright), var(--bolt-deep));
  color: var(--navy);
  box-shadow: 0 10px 26px -10px rgba(247, 148, 29, 0.55);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -10px rgba(247, 148, 29, 0.6); }

.btn-ghost {
  border: 1px solid var(--line-strong);
  color: var(--ink);
  background: var(--surface);
}
.btn-ghost:hover { transform: translateY(-2px); border-color: var(--bolt-deep); color: var(--accent-text); }

/* ghost button placed on dark panels (CTA box) */
.cta-box .btn-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--on-dark);
}
.cta-box .btn-ghost:hover { border-color: var(--bolt-bright); color: var(--bolt-bright); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-display); font-weight: 600; font-size: 0.95rem;
  color: var(--accent-text);
}
.link-arrow svg { width: 16px; height: 16px; transition: transform 0.25s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background 0.35s, border-color 0.35s, box-shadow 0.35s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(217, 233, 250, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
  box-shadow: 0 6px 24px -18px rgba(18, 23, 63, 0.25);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 82px;
}
.nav-logo { display: flex; align-items: center; }
.nav-logo img { height: 52px; width: auto; }

.nav-links { display: flex; align-items: center; gap: 2rem; }
.nav-links > li { position: relative; }
.nav-links > li > a {
  font-size: 0.95rem; font-weight: 500; color: var(--muted);
  padding: 0.5rem 0; display: inline-flex; align-items: center; gap: 0.35rem;
  transition: color 0.2s;
}
.nav-links > li > a:hover, .nav-links > li > a[aria-current="page"] { color: var(--ink); }

.drop-toggle {
  font-size: 0.95rem; font-weight: 500; color: var(--muted);
  padding: 0.5rem 0; display: inline-flex; align-items: center; gap: 0.35rem;
  transition: color 0.2s;
}
.drop-toggle:hover, .has-dropdown.open .drop-toggle { color: var(--ink); }
.nav-links .caret { width: 12px; height: 12px; opacity: 0.7; transition: transform 0.25s; }
.has-dropdown:hover .caret, .has-dropdown:focus-within .caret, .has-dropdown.open .caret { transform: rotate(180deg); }

.dropdown {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 380px;
  /* invisible bridge over the 10px gap so the pointer can travel from the
     toggle down onto the panel without the hover state dropping */
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.55rem;
  box-shadow: var(--shadow-card);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
}
.dropdown::before {
  content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px;
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown, .has-dropdown.open .dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.dd-item { display: flex; align-items: center; gap: 0.5rem; border-radius: 9px; }
.dd-item:hover { background: rgba(247, 148, 29, 0.09); }
.dd-main {
  flex: 1; display: block; padding: 0.65rem 0.9rem;
  font-size: 0.93rem; color: var(--muted); transition: color 0.2s;
}
.dd-main strong { display: block; color: var(--ink); font-weight: 600; font-family: var(--font-display); }
.dd-main span { font-size: 0.8rem; }
.dd-item:hover .dd-main strong { color: var(--accent-text); }
.dd-case {
  flex: none; margin-right: 0.65rem;
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.04em; white-space: nowrap;
  color: var(--accent-text);
  border: 1px solid rgba(247, 148, 29, 0.4);
  padding: 0.26rem 0.68rem; border-radius: 999px;
  transition: background 0.2s, border-color 0.2s;
}
.dd-case:hover { background: rgba(247, 148, 29, 0.14); border-color: var(--bolt-deep); }
.dd-all {
  display: block; text-align: center; margin-top: 0.35rem; padding: 0.65rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-display); font-size: 0.86rem; font-weight: 600;
  color: var(--accent-text); transition: color 0.2s;
}
.dd-all:hover { color: var(--bolt-deep); }

/* Compact the Case Studies dropdown to match the Practices card: single-line
   rows (title + metric pill), no wrapping sub-descriptions. Scoped via :has()
   to the rows that carry a metric pill, so no per-page markup changes. */
.dropdown:has(.dd-case) { min-width: 340px; }
.dd-item:has(.dd-case) .dd-main { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.dd-item:has(.dd-case) .dd-main strong { white-space: nowrap; }
.dd-item:has(.dd-case) .dd-main span { display: none; }

.nav-cta { display: flex; align-items: center; gap: 1rem; }
.nav-cta .btn { padding: 0.65rem 1.3rem; font-size: 0.9rem; white-space: nowrap; }
.nav-links > li > a, .nav-links .drop-toggle { white-space: nowrap; }
@media (max-width: 1400px) {
  .nav-links { gap: 1.1rem; }
  .nav-cta .btn { padding: 0.6rem 1.05rem; font-size: 0.85rem; }
}

/* ---------- dynamic nav (medium / "tablet" widths) ----------
   Full desktop nav has 8 top-level items + dropdowns + CTA, which is too
   dense once the viewport shrinks below ~1400px. In this middle range show
   the first 4 items (Practices, Case Studies, Blogs, Products) inline and
   move the remaining navigation into the More dropdown. On smaller mobile
   widths the existing burger menu takes over. */
@media (max-width: 1400px) {
  /* Keep the first four navigation items visible and move the rest into More
     at every non-desktop width, including phones and tablets. */
  .nav-links {
    display: flex;
    align-items: center;
    gap: clamp(0.55rem, 2vw, 1.7rem);
  }
  .nav-links > li:nth-child(n+5):not(.nav-more) { display: none; }
  .nav-links > li.nav-more { display: list-item; }
  .burger { display: none !important; }
  .nav-logo img { height: clamp(38px, 5vw, 48px); }
  .nav-links > li > a,
  .nav-links .drop-toggle {
    font-size: clamp(0.68rem, 1.45vw, 0.9rem);
  }
  .nav-links .caret {
    width: 9px;
    height: 9px;
  }
}

@media (min-width: 1401px) {
  .nav-more { display: none; }
}

/* On genuinely small screens, hand off to the burger + full-screen mobile
   menu instead of squeezing the compact nav — avoids overlap at narrow
   widths. Overrides the burger-off rule set above for max-width: 1400px. */
@media (max-width: 640px) {
  .nav-links { display: none !important; }
  .burger { display: flex !important; }
}

/* burger */
.burger { display: none; flex-direction: column; gap: 5px; padding: 8px; z-index: 110; }
.burger span { width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.3s var(--ease), opacity 0.3s; }
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 105;
  background: rgba(217, 233, 250, 0.98);
  backdrop-filter: blur(10px);
  display: flex; flex-direction: column; justify-content: center;
  padding: 5rem 8vw 3rem;
  opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s;
}
.mobile-menu.open { opacity: 1; visibility: visible; }
.mobile-menu a {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 600;
  padding: 0.7rem 0; color: var(--ink); border-bottom: 1px solid var(--line);
}
.mobile-menu a.sub { font-size: 1.05rem; color: var(--muted); padding-left: 1.2rem; font-weight: 500; }
.mobile-menu .btn { margin-top: 2rem; justify-content: center; border-bottom: 0; }

/* ---------- hero (home) ---------- */
.hero {
  position: relative;
  padding: clamp(9rem, 16vw, 12.5rem) 0 clamp(4rem, 8vw, 6.5rem);
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(900px 480px at 85% -10%, rgba(75, 44, 131, 0.10), transparent 60%),
    radial-gradient(760px 420px at 5% 5%, rgba(247, 148, 29, 0.10), transparent 55%),
    linear-gradient(180deg, #EFF6FD 0%, var(--bg) 70%);
}
.hero-grid-lines {
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(18, 23, 63, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 23, 63, 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, black 30%, transparent 75%);
}
.hero h1 {
  font-size: clamp(2.5rem, 6.2vw, 4.7rem);
  max-width: 17ch;
  margin: 1.3rem 0 1.5rem;
}
.hero h1 .underline {
  position: relative; white-space: nowrap;
}
.hero h1 .underline::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0.04em;
  height: 0.14em;
  background: linear-gradient(90deg, var(--bolt-bright), var(--bolt-deep));
  border-radius: 3px;
  opacity: 0.9;
}
.hero .lede { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--muted); max-width: 640px; margin-bottom: 2.4rem; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 3.2rem; }

.hero-badges { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.chip {
  font-family: var(--font-display); font-size: 0.82rem; font-weight: 600;
  padding: 0.45rem 0.95rem; border-radius: 999px;
  border: 1px solid var(--line-strong); color: var(--muted);
  background: var(--surface);
  transition: color .2s, border-color .2s, transform .25s var(--ease);
}
.chip:hover { color: var(--accent-text); border-color: var(--bolt-deep); transform: translateY(-2px); }

/* ---------- interior page hero ---------- */
.page-hero {
  position: relative;
  padding: clamp(8.5rem, 14vw, 11rem) 0 clamp(3.5rem, 6vw, 5rem);
  overflow: hidden;
}
.page-hero .hero-bg { z-index: -1; }
.page-hero h1 { font-size: clamp(2.2rem, 5vw, 3.7rem); max-width: 20ch; margin: 1.2rem 0 1.3rem; }
.page-hero .lede { font-size: 1.15rem; color: var(--muted); max-width: 660px; }
.breadcrumb { font-size: 0.85rem; color: var(--faint); margin-bottom: 0.4rem; }
.breadcrumb a:hover { color: var(--accent-text); }

/* ---------- stats ---------- */
.stats-bar {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.stat {
  padding: 2.2rem 1.5rem;
  text-align: center;
  border-left: 1px solid var(--line);
}
.stat:first-child { border-left: 0; }
.stat .num {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--bolt-deep), #D96A00);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat .label { font-size: 0.88rem; color: var(--muted); margin-top: 0.2rem; }

/* ---------- practice cards ---------- */
.card-grid { display: grid; gap: 1.3rem; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.practice-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem 1.8rem 1.8rem;
  display: flex; flex-direction: column; gap: 0.9rem;
  transition: transform 0.35s var(--ease), border-color 0.35s, box-shadow 0.35s;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.practice-card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--bolt-bright), var(--bolt-deep));
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.practice-card:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: var(--shadow-card); }
.practice-card:hover::before { transform: scaleX(1); }
.practice-card .icon {
  width: 48px; height: 48px; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(247, 148, 29, 0.10);
  border: 1px solid rgba(247, 148, 29, 0.30);
}
.practice-card .icon svg { width: 24px; height: 24px; stroke: var(--accent-text); }
.practice-card h3 { font-size: 1.28rem; }
.practice-card p { color: var(--muted); font-size: 0.97rem; flex: 1; }
.practice-card .link-arrow { margin-top: 0.4rem; }

/* ---------- split / positioning ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.split h2 { font-size: clamp(1.9rem, 3.8vw, 2.8rem); margin: 1rem 0 1.3rem; }
.split .big-quote {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight: 600; line-height: 1.4;
  color: var(--ink);
  border-left: 3px solid var(--bolt-deep);
  padding-left: 1.4rem;
  margin: 1.6rem 0;
}

.check-list { display: grid; gap: 0.95rem; margin-top: 1.6rem; }
.check-list li { display: flex; gap: 0.85rem; align-items: flex-start; color: var(--muted); }
.check-list .tick {
  flex: none; width: 22px; height: 22px; margin-top: 3px;
  border-radius: 7px;
  background: rgba(247, 148, 29, 0.12);
  border: 1px solid rgba(247, 148, 29, 0.40);
  display: grid; place-items: center;
}
.check-list .tick svg { width: 12px; height: 12px; stroke: var(--accent-text); stroke-width: 3; }
.check-list strong { color: var(--ink); font-weight: 600; }

/* contrast panel — dark navy accent card on the light page */
.contrast-panel {
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(600px 300px at 100% 0%, rgba(75, 44, 131, 0.35), transparent 60%),
    linear-gradient(180deg, var(--dark-2), var(--dark-1));
  padding: clamp(2rem, 4vw, 3.2rem);
  color: var(--on-dark);
  box-shadow: var(--shadow-card);
}
.contrast-panel h3 { color: #FFFFFF; }
.contrast-panel p { color: var(--on-dark-muted); }
/* :not(.btn) so buttons inside a contrast panel keep their normal btn-primary /
   btn-ghost colors instead of being forced white (was making CTA buttons like
   "Get notified" look inconsistent with every other button on the site) */
.contrast-panel a:not(.btn) { color: #FFFFFF; }
.contrast-panel a:not(.btn):hover { color: var(--bolt-bright); }
.contrast-panel .btn-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--on-dark);
}
.contrast-panel .btn-ghost:hover { border-color: var(--bolt-bright); color: var(--bolt-bright); }
.contrast-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; margin-top: 2rem; }
.contrast-col h4 {
  font-size: 0.85rem; letter-spacing: 0.18em; text-transform: uppercase;
  margin-bottom: 1.1rem; display: flex; align-items: center; gap: 0.5rem;
}
.contrast-col.no h4 { color: var(--on-dark-faint); }
.contrast-col.yes h4 { color: var(--bolt-bright); }
.contrast-col li {
  padding: 0.7rem 0; border-top: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 0.98rem;
}
.contrast-col.no li { text-decoration: line-through; text-decoration-color: rgba(169, 175, 209, .6); color: var(--on-dark-faint); }
.contrast-col.yes li { color: var(--on-dark); }

/* ---------- accelerators (bento) ---------- */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.3rem; }
.bento-card {
  position: relative;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 2.1rem 2rem;
  overflow: hidden;
  transition: transform 0.35s var(--ease), border-color 0.35s, box-shadow 0.35s;
  box-shadow: var(--shadow-soft);
}
.bento-card:hover { transform: translateY(-5px); border-color: rgba(247, 148, 29, 0.45); box-shadow: var(--shadow-card); }
.bento-card.span-7 { grid-column: span 7; }
.bento-card.span-5 { grid-column: span 5; }
.bento-card.span-4 { grid-column: span 4; }
.bento-card.span-12 { grid-column: span 12; }
.bento-card .tag {
  display: inline-block;
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-text);
  background: rgba(247, 148, 29, 0.10);
  border: 1px solid rgba(247, 148, 29, 0.35);
  padding: 0.3rem 0.75rem; border-radius: 999px;
  margin-bottom: 1.1rem;
}
.bento-card .tag.purple { color: var(--purple); background: rgba(75, 44, 131, 0.07); border-color: rgba(75, 44, 131, 0.30); }
.bento-card h3 { font-size: 1.45rem; margin-bottom: 0.75rem; }
.bento-card p { color: var(--muted); font-size: 0.99rem; }
.bento-card .glow {
  position: absolute; right: -80px; top: -80px; width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(247, 148, 29, 0.14), transparent 65%);
  pointer-events: none;
}
.bento-card .glow.purple { background: radial-gradient(circle, rgba(75, 44, 131, 0.12), transparent 65%); }

/* ---------- case study cards ---------- */
.cs-card {
  display: flex; flex-direction: column;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-soft);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.cs-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); }
.cs-card .cs-top {
  padding: 1.6rem 1.7rem 1.4rem;
  display: flex; align-items: center; justify-content: flex-start; gap: 0.6rem;
  border-bottom: 1px solid var(--paper-2);
}
.cs-cloud {
  font-family: var(--font-display); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-text);
  background: rgba(247, 148, 29, 0.14);
  padding: 0.32rem 0.8rem; border-radius: 999px;
}
.cs-industry { font-size: 0.82rem; color: var(--muted); }
.cs-card .cs-body { padding: 1.5rem 1.7rem 1.7rem; display: flex; flex-direction: column; gap: 0.8rem; flex: 1; }
.cs-card h3 { font-size: 1.25rem; line-height: 1.25; }
.cs-card p { font-size: 0.95rem; color: var(--muted); flex: 1; }
.cs-card .link-arrow { color: var(--accent-text); }

/* ---------- case-study carousel (homepage proof) ---------- */
.cs-carousel { position: relative; }
.cs-carousel-viewport { overflow: hidden; }
.cs-carousel-track { display: flex; transition: transform 0.6s var(--ease); will-change: transform; }
.cs-slide { flex: 0 0 100%; min-width: 100%; padding: 0.4rem; }
.cs-carousel-controls {
  display: flex; align-items: center; justify-content: center; gap: 1.1rem;
  margin-top: 2rem;
}
.cs-dots { display: flex; align-items: center; gap: 0.5rem; }
.cs-dot {
  width: 9px; height: 9px; padding: 0; border: none; cursor: pointer;
  border-radius: 999px; background: var(--line-strong);
  transition: background 0.25s var(--ease), width 0.25s var(--ease);
}
.cs-dot:hover { background: var(--bolt-deep); }
.cs-dot.active { width: 28px; background: linear-gradient(90deg, var(--bolt-bright), var(--bolt-deep)); }
.cs-arrow {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  transition: color 0.2s, border-color 0.2s, transform 0.25s var(--ease);
}
.cs-arrow:hover { border-color: var(--bolt-deep); color: var(--accent-text); transform: translateY(-2px); }
.cs-arrow svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .cs-carousel-track { transition: none; } }

/* full case study block (case-studies page) */
.cs-detail {
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  scroll-margin-top: 110px;
}
.cs-detail + .cs-detail { margin-top: 2rem; }
.cs-detail .cs-meta { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.2rem; }
.cs-detail h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: 1rem; }
.cs-detail .cs-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 1.4rem; }
.cs-detail h4 {
  font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-text); margin-bottom: 0.6rem;
}
.cs-detail p, .cs-detail li { color: var(--muted); font-size: 0.98rem; }
.cs-detail ul { display: grid; gap: 0.45rem; }
.cs-detail ul li { padding-left: 1.1rem; position: relative; }
.cs-detail ul li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 6px; height: 6px; border-radius: 2px;
  background: linear-gradient(135deg, var(--bolt-bright), var(--bolt-deep));
}
.cs-outcomes {
  margin-top: 1.6rem; padding-top: 1.4rem;
  border-top: 1px solid var(--paper-2);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem;
}
.cs-outcomes .o .n { font-family: var(--font-display); font-weight: 700; font-size: 1.55rem; color: var(--accent-text); }
.cs-outcomes .o .l { display: block; font-size: 0.86rem; color: var(--muted); margin-top: 0.25rem; }

/* dark highlight variant (accelerator spotlight) */
.cs-detail.dark {
  background:
    radial-gradient(600px 300px at 100% 0%, rgba(75, 44, 131, 0.35), transparent 60%),
    linear-gradient(135deg, var(--dark-2), var(--dark-1));
  border-color: rgba(247, 148, 29, 0.35);
  color: var(--on-dark);
}
.cs-detail.dark h3 { color: #FFFFFF; }
.cs-detail.dark p { color: var(--on-dark-muted); }
.cs-detail.dark .link-arrow { color: var(--bolt-bright); }

/* ---------- engagement models ---------- */
.model-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.model-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.9rem 1.6rem;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  transition: border-color 0.3s, transform 0.35s var(--ease), box-shadow .35s var(--ease);
}
.model-card:hover { border-color: rgba(247, 148, 29, 0.5); transform: translateY(-5px); box-shadow: var(--shadow-card); }
.model-card .step {
  font-family: var(--font-display); font-weight: 700; font-size: 0.85rem;
  color: var(--accent-text); letter-spacing: 0.12em;
  margin-bottom: 0.9rem; display: block;
}
.model-card h3 { font-size: 1.3rem; margin-bottom: 0.6rem; }
.model-card p { color: var(--muted); font-size: 0.94rem; }

/* ---------- process timeline ---------- */
.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; counter-reset: step; }
.process-step {
  position: relative;
  padding: 1.7rem 1.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.process-step::before {
  counter-increment: step;
  content: "0" counter(step);
  font-family: var(--font-display); font-weight: 700; font-size: 2rem;
  background: linear-gradient(135deg, var(--bolt-deep), #D96A00);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  display: block; margin-bottom: 0.7rem;
}
.process-step h3 { font-size: 1.12rem; margin-bottom: 0.5rem; }
.process-step p { font-size: 0.92rem; color: var(--muted); }

/* ---------- testimonials ---------- */
.testimonial-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.testimonial {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  padding: 2.2rem 2.1rem;
  display: flex; flex-direction: column; gap: 1.3rem;
}
.testimonial .quote-mark {
  font-family: var(--font-display); font-size: 3.2rem; line-height: 0.6;
  color: var(--bolt-deep); opacity: 0.85;
}
.testimonial blockquote { color: var(--muted); font-size: 1.02rem; flex: 1; }
.testimonial .who { display: flex; align-items: center; gap: 0.9rem; }
.testimonial .avatar {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
  background: linear-gradient(135deg, rgba(247,148,29,.18), rgba(75,44,131,.15));
  border: 1px solid var(--line-strong);
  color: var(--ink);
}
.testimonial .who strong { display: block; font-family: var(--font-display); font-size: 0.98rem; color: var(--ink); }
.testimonial .who span { font-size: 0.83rem; color: var(--faint); }

.leader-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.leader-card {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  padding: 1.8rem 1.5rem;
  text-align: center;
  transition: transform 0.35s var(--ease), border-color 0.3s, box-shadow .35s var(--ease);
}
.leader-card:hover { transform: translateY(-5px); border-color: rgba(247, 148, 29, 0.5); box-shadow: var(--shadow-card); }
.leader-card .avatar {
  width: 96px; height: 96px; border-radius: 50%;
  margin: 0 auto 1.1rem;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.7rem;
  background: linear-gradient(135deg, rgba(247,148,29,.18), rgba(75,44,131,.15));
  border: 1px solid var(--line-strong);
  color: var(--ink);
  object-fit: cover;
}
.leader-card h3 { font-size: 1.08rem; }
.leader-card .role { font-size: 0.85rem; color: var(--muted); margin: 0.35rem 0 0.9rem; }
.leader-card .li-link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.83rem; font-weight: 600; color: var(--accent-text);
  line-height: 1;
}
.leader-card .li-link svg { width: 14px; height: 14px; flex: none; display: block; }

img.avatar { object-fit: cover; padding: 0; }

/* ---------- FAQ / accordion ---------- */
.accordion { display: grid; gap: 0.9rem; max-width: 860px; }
.acc-item {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.acc-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.2rem 1.4rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
  color: var(--ink);
}
.acc-item summary::-webkit-details-marker { display: none; }
.acc-item summary .plus { flex: none; width: 22px; height: 22px; position: relative; }
.acc-item summary .plus::before, .acc-item summary .plus::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  background: var(--bolt-deep); border-radius: 2px;
  transition: transform 0.3s var(--ease);
}
.acc-item summary .plus::before { width: 14px; height: 2px; }
.acc-item summary .plus::after { width: 2px; height: 14px; }
.acc-item[open] summary .plus::after { transform: rotate(90deg); }
.acc-item .acc-body { padding: 0 1.4rem 1.3rem; color: var(--muted); font-size: 0.97rem; }

/* ---------- CTA band ---------- */
.cta-band { padding: clamp(4.5rem, 9vw, 7rem) 0; }
.cta-box {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  padding: clamp(3rem, 6vw, 5rem) clamp(1.8rem, 5vw, 4.5rem);
  text-align: center;
  background:
    radial-gradient(700px 320px at 50% -20%, rgba(247, 148, 29, 0.22), transparent 60%),
    radial-gradient(600px 300px at 90% 110%, rgba(75, 44, 131, 0.45), transparent 60%),
    linear-gradient(180deg, var(--dark-2), var(--dark-1));
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--on-dark);
  box-shadow: var(--shadow-card);
}
.cta-box h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); max-width: 22ch; margin: 0 auto 1.1rem; color: #FFFFFF; }
.cta-box p { color: var(--on-dark-muted); max-width: 560px; margin: 0 auto 2.2rem; font-size: 1.08rem; }
.cta-box .hero-ctas { justify-content: center; margin-bottom: 0; }
.cta-box .bolt-decor {
  position: absolute; width: 120px; opacity: 0.14;
  pointer-events: none;
}
.cta-box .bolt-decor.left { left: 4%; bottom: -10px; transform: rotate(-12deg); }
.cta-box .bolt-decor.right { right: 4%; top: -14px; transform: rotate(14deg); }

/* ---------- footer ---------- */
.footer {
  background: var(--dark-1);
  color: var(--on-dark);
  padding: 4.5rem 0 2rem;
  font-size: 0.94rem;
}
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1.3fr; gap: 2.6rem;
  padding-bottom: 3rem;
}
.footer-brand img { height: 72px; margin-bottom: 1.2rem; }
.footer-brand p { color: var(--on-dark-faint); max-width: 300px; font-size: 0.92rem; }
.footer h4 { font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-dark-muted); margin-bottom: 1.1rem; }
.footer li { margin-bottom: 0.65rem; }
.footer a { color: var(--on-dark-faint); transition: color 0.2s; }
.footer a:hover { color: var(--bolt-bright); }
.footer .contact-line { display: flex; gap: 0.6rem; align-items: flex-start; color: var(--on-dark-faint); margin-bottom: 0.8rem; }
.footer .contact-line svg { width: 17px; height: 17px; stroke: var(--bolt); flex: none; margin-top: 4px; }
.footer-social { display: flex; gap: 0.7rem; margin-top: 1.3rem; }
.footer-social a {
  width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14); display: grid; place-items: center;
  transition: border-color 0.2s, transform 0.25s var(--ease);
}
.footer-social a:hover { border-color: var(--bolt); transform: translateY(-3px); }
.footer-social svg { width: 17px; height: 17px; fill: var(--on-dark-muted); }
.footer-social a:hover svg { fill: var(--bolt-bright); }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  padding-top: 1.6rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  color: var(--on-dark-faint); font-size: 0.85rem;
}
.footer-bottom .legal { display: flex; gap: 1.4rem; }

/* ---------- forms ---------- */
.form-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: clamp(1.8rem, 4vw, 2.6rem);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 1.1rem; }
.field label { font-family: var(--font-display); font-size: 0.88rem; font-weight: 600; color: var(--ink); }
.field input, .field select, .field textarea {
  font: inherit; color: var(--ink);
  background: #FBFCFE;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 0.8rem 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
}
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field select option { background: #FFFFFF; color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--bolt-deep);
  box-shadow: 0 0 0 3px rgba(247, 148, 29, 0.18);
}
.field textarea { min-height: 130px; resize: vertical; }

/* ---------- reveal animations ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }
.reveal-stagger > * { opacity: 0; transform: translateY(26px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal-stagger.visible > * { opacity: 1; transform: none; }
.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0.02s; }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.1s; }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.18s; }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.26s; }
.reveal-stagger.visible > *:nth-child(5) { transition-delay: 0.34s; }
.reveal-stagger.visible > *:nth-child(6) { transition-delay: 0.42s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; }
}

/* ---------- service page components ---------- */
.pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.pain-card {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 1.7rem 1.6rem;
  box-shadow: var(--shadow-soft);
}
.pain-card .q {
  font-family: var(--font-display); font-weight: 600; font-size: 1.06rem;
  color: var(--ink); margin-bottom: 0.55rem; line-height: 1.35;
}
.pain-card p { font-size: 0.92rem; color: var(--muted); }

.offer-list { display: grid; gap: 1rem; }
.offer-item {
  display: grid; grid-template-columns: 52px 1fr; gap: 1.3rem;
  padding: 1.6rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  transition: border-color 0.3s, box-shadow .3s;
}
.offer-item:hover { border-color: rgba(247, 148, 29, 0.5); box-shadow: var(--shadow-card); }
.offer-item .icon {
  width: 52px; height: 52px; border-radius: 13px;
  display: grid; place-items: center;
  background: rgba(247, 148, 29, 0.10); border: 1px solid rgba(247, 148, 29, 0.30);
}
.offer-item .icon svg { width: 25px; height: 25px; stroke: var(--accent-text); }
.offer-item h3 { font-size: 1.18rem; margin-bottom: 0.4rem; }
.offer-item p { color: var(--muted); font-size: 0.96rem; }

/* ---------- data tables (managed services, AI offering matrix) ---------- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid #E7E2D8;
  border-radius: 12px;
  background: #FCFAF6;
  box-shadow: var(--shadow-soft);
  margin: 2rem 0 3rem;
}
.data-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; min-width: 640px; background: #ffffff; }
.data-table th {
  font-family: var(--font-display); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-text); text-align: left;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--line-strong);
  background: #EEF4FF;
}
.data-table td {
  padding: 1.2rem 1.2rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted); vertical-align: middle;
  background: #ffffff;
  line-height: 1.8;
}
.data-table tbody tr:nth-child(even) td { background: #ffffff; }
.data-table tbody tr:hover td { background: #F5F9FF; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table td:first-child { color: var(--ink); font-weight: 600; font-family: var(--font-display); font-size: 0.92rem; }
.data-table td:last-child { white-space: nowrap; }

/* ---------- service tiers ---------- */
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; align-items: stretch; }
.tier-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem 1.8rem;
  box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column; gap: 0.9rem;
  transition: transform 0.35s var(--ease), border-color 0.35s, box-shadow 0.35s;
}
.tier-card:hover { transform: translateY(-5px); border-color: rgba(247, 148, 29, 0.5); box-shadow: var(--shadow-card); }
.tier-card.featured { border-color: rgba(247, 148, 29, 0.55); }
.tier-card .tier-name {
  font-family: var(--font-display); font-weight: 700; font-size: 0.8rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-text);
}
.tier-card .tier-hours { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; color: var(--ink); line-height: 1.2; }
.tier-card .tier-hours span { font-size: 0.9rem; font-weight: 500; color: var(--muted); }
.tier-card > p { color: var(--muted); font-size: 0.95rem; }
.tier-card ul { display: grid; gap: 0.5rem; }
.tier-card ul li { position: relative; padding-left: 1.1rem; font-size: 0.94rem; color: var(--muted); }
.tier-card ul li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 6px; height: 6px; border-radius: 2px;
  background: linear-gradient(135deg, var(--bolt-bright), var(--bolt-deep));
}

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .tier-grid { grid-template-columns: 1fr; }
  .grid-3, .pain-grid { grid-template-columns: repeat(2, 1fr); }
  .model-grid, .leader-grid, .process { grid-template-columns: repeat(2, 1fr); }
  .bento-card.span-7, .bento-card.span-5, .bento-card.span-4 { grid-column: span 12; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; }
  .cs-detail .cs-cols { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat { border-left: 0; border-top: 1px solid var(--line); }
  .stat:nth-child(-n+2) { border-top: 0; }
  .stat:nth-child(even) { border-left: 1px solid var(--line); }
}

@media (max-width: 860px) {
  /* The compact header continues to use the first four items + More. */
  .nav-cta .btn-ghost { display: none; }
  .testimonial-grid, .grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  body { font-size: 1rem; }
  .grid-3, .pain-grid, .model-grid, .leader-grid, .process { grid-template-columns: 1fr; }
  .contrast-cols { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .cs-outcomes { grid-template-columns: 1fr; gap: 0.9rem; }
  .nav-cta .btn { display: none; }
  .offer-item { grid-template-columns: 1fr; }
  .hero-ctas .btn { width: 100%; justify-content: center; }
}

/* large screens — grow the container so content fills the viewport instead of
   stranding wide margins of empty space either side */
@media (min-width: 1500px) { :root { --container: 1360px; } }
@media (min-width: 1750px) { :root { --container: 1520px; } }
@media (min-width: 2100px) { :root { --container: 1680px; } }

/* ============================================================
   long-form blog additions (multi-way comparison posts)
   Additive only: new class names, plus the heading levels and
   list type the .blog-article scope did not previously cover.
   ============================================================ */
.blog-article h3 { font-size: 1.14rem; line-height: 1.32; margin: 1.7rem 0 0.6rem; color: var(--ink); }
.blog-article h4 { font-size: 1rem; line-height: 1.35; margin: 1.4rem 0 0.5rem; color: var(--ink); }
.blog-article ol { list-style: decimal; margin: 0 0 1.2rem 1.45rem; padding: 0; }
.blog-article ol li { margin-bottom: 0.5rem; line-height: 1.6; padding-left: 0.2rem; }
.blog-article ol li::marker { color: var(--accent-text); font-weight: 700; }

/* --- prose comparison table -------------------------------------------------
   .data-table pins its last column to `white-space: nowrap`, which is right
   for short metric columns but forces a runaway scroll once every column
   carries a sentence. .cmp-wrap keeps .table-wrap's chrome (so tables in one
   article look identical) and lets every column wrap. */
.cmp-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #E7E2D8;
  border-radius: 12px;
  background: #FCFAF6;
  box-shadow: var(--shadow-soft);
  margin: 2rem 0 3rem;
}
.cmp-wrap .data-table { font-size: 0.92rem; }
.cmp-wrap .data-table th {
  padding: 0.9rem 1rem;
  white-space: normal;
  vertical-align: bottom;
  line-height: 1.35;
}
.cmp-wrap .data-table td,
.cmp-wrap .data-table td:last-child {
  padding: 0.95rem 1rem;
  white-space: normal;
  vertical-align: top;
  line-height: 1.65;
}

/* three-way variant: narrower type, fixed columns, and a tinted final column
   so the eye can track one approach down a long table */
.cmp-wrap.is-3way .data-table { min-width: 760px; font-size: 0.89rem; table-layout: fixed; }
.cmp-wrap.is-3way .data-table td:first-child,
.cmp-wrap.is-3way .data-table th:first-child { width: 18%; }
.cmp-wrap.is-3way .data-table th:last-child { background: #FDF3E2; color: var(--accent-text); }
.cmp-wrap.is-3way .data-table td:last-child { background: #FFFCF6; }
.cmp-wrap.is-3way .data-table tbody tr:hover td:last-child { background: #FDF3E2; }

/* pin the dimension column so the row label stays readable while the reader
   scrolls across the approaches. box-shadow rather than border-right: with
   border-collapse the border would not travel with the sticky cell. */
.cmp-wrap.is-3way .data-table th:first-child,
.cmp-wrap.is-3way .data-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  box-shadow: 1px 0 0 var(--line);
}

/* four columns in an 820px prose column is tight — on wide screens let the
   centrepiece table breathe past the reading measure. The 820px container sits
   inside one capped at 92vw, so there is room for this either side. */
@media (min-width: 1120px) {
  .cmp-wrap.is-3way:not(.is-matrix) { margin-left: -90px; margin-right: -90px; }
  .cmp-wrap.is-3way:not(.is-matrix) + .table-note { margin-left: -90px; margin-right: -90px; }
}

/* --- capability matrix: a statement per row, a mark per approach -----------
   Narrower than the prose variant because the cells hold marks, not sentences,
   so it fits a phone without the reader chasing it sideways. */
.cmp-wrap.is-matrix .data-table { min-width: 448px; }
.cmp-wrap.is-matrix .data-table th:first-child,
.cmp-wrap.is-matrix .data-table td:first-child { width: 46%; }
.cmp-wrap.is-matrix .data-table th:not(:first-child),
.cmp-wrap.is-matrix .data-table td:not(:first-child) {
  text-align: center;
  vertical-align: middle;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}
.cmp-wrap.is-matrix .data-table td:first-child { line-height: 1.45; }

/* marks. Circular badges rather than bare glyphs: they hold a consistent
   optical weight down the column so the pattern is readable at a glance.
   Absent is neutral grey, never red — a missing capability here is a design
   choice, not a defect, and red would editorialise. */
.mk {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  font-size: 0.92rem; font-weight: 700; line-height: 1;
}
.mk-yes  { background: rgba(31, 122, 64, 0.13); color: #1B6B38; }
.mk-no   { background: rgba(18, 23, 63, 0.07); color: var(--faint); }
.mk-part { background: rgba(245, 166, 35, 0.22); color: var(--gold-ink); }
/* "left to another layer": an open ring, not a cross — the capability sits
   somewhere else in the stack by design, so the mark states scope, not absence */
.mk-na   { background: rgba(18, 23, 63, 0.05); color: var(--faint); }

/* grouping rows break a long matrix into scannable bands */
.cmp-wrap.is-matrix .data-table tr.mk-group td {
  position: static; width: auto; box-shadow: none;
  background: #EEF4FF;
  font-family: var(--font-display);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-text);
  padding: 0.7rem 1rem;
  text-align: left;
}

/* --- collapsible bands ------------------------------------------------------
   Each band sits in its own <tbody> and its group row doubles as the toggle,
   so a reader can fold the matrix down to the bands they care about. The
   button carries the padding the cell gives up, keeping the hit area full-row. */
.cmp-wrap.is-matrix .data-table tr.mk-group td { padding: 0; }
.mk-band-toggle {
  display: flex; align-items: center; gap: 0.55rem;
  width: 100%; padding: 0.7rem 1rem;
  background: none; border: 0; cursor: pointer;
  font: inherit; color: inherit;
  letter-spacing: inherit; text-transform: inherit; text-align: left;
}
.mk-band-toggle:hover { background: #E3EDFF; }
.mk-band-toggle:focus-visible { outline: 2px solid var(--accent-text); outline-offset: -3px; }
.mk-band-toggle .mk-chev {
  width: 13px; height: 13px; flex: none;
  transition: transform 0.18s ease;
}
.mk-band-toggle[aria-expanded="false"] .mk-chev { transform: rotate(-90deg); }
.mk-band-toggle .mk-count {
  margin-left: auto;
  font-weight: 400; letter-spacing: 0.04em; text-transform: none;
  color: var(--faint);
}
.data-table tr[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .mk-band-toggle .mk-chev { transition: none; }
}

/* legend, whether it sits above the matrix or inside the caption below it */
.mk-legend {
  display: flex; flex-wrap: wrap; gap: 0.55rem 1.4rem;
  margin: 1.6rem 0 0.2rem;
  font-size: 0.86rem; color: var(--muted);
}
.mk-legend span { display: inline-flex; align-items: center; gap: 0.45rem; }
.mk-legend .mk { width: 22px; height: 22px; font-size: 0.8rem; }
/* the legend introduces the table, so close the gap the wrapper would open */
.mk-legend + .cmp-wrap { margin-top: 0.75rem; }

/* marks carry a visible glyph plus this text for screen readers */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (max-width: 480px) {
  .cmp-wrap.is-matrix .data-table { font-size: 0.82rem; }
  .cmp-wrap.is-matrix .data-table th:not(:first-child),
  .cmp-wrap.is-matrix .data-table td:not(:first-child) { padding-left: 0.25rem; padding-right: 0.25rem; }
  .mk { width: 22px; height: 22px; font-size: 0.8rem; }
}

/* keep the capability label readable during the small sideways scroll the
   matrix still needs on the narrowest phones */
.cmp-wrap.is-matrix .data-table th:first-child,
.cmp-wrap.is-matrix .data-table td:first-child {
  position: sticky; left: 0; z-index: 1;
  background: #ffffff;
  box-shadow: 1px 0 0 var(--line);
}
.cmp-wrap.is-matrix .data-table th:first-child { background: #EEF4FF; }

/* caption that belongs to the table directly above it */
.table-note { font-size: 0.85rem; color: var(--faint); line-height: 1.5; }
.cmp-wrap + .table-note,
.table-wrap + .table-note { margin: -2.1rem 0 2.6rem; }

/* --- inline code ----------------------------------------------------------- */
.blog-article code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  padding: 0.12em 0.36em;
  border-radius: 5px;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink);
}

/* --- two-column layer diagram (intelligence layer vs + business logic) ----- */
.layer-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
  margin: 1.8rem 0 1rem;
}
.layer-card {
  display: flex; flex-direction: column; gap: 0.55rem;
  padding: 1.3rem 1.35rem 1.45rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.layer-card.is-custom { border-color: rgba(245, 166, 35, 0.55); }
.blog-article .layer-card h3 {
  margin: 0;
  font-size: 1.05rem;
}
.blog-article .layer-card .layer-sub {
  margin: 0 0 0.35rem;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.5;
}
.layer-stack { display: grid; gap: 0.4rem; }
.layer-row {
  padding: 0.6rem 0.8rem;
  border-radius: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
}
.layer-row span { display: block; font-weight: 400; font-size: 0.79rem; color: var(--muted); margin-top: 0.15rem; }
.layer-row.is-reason { background: rgba(75, 44, 131, 0.09); border-color: rgba(75, 44, 131, 0.26); }
.layer-row.is-logic { background: rgba(245, 166, 35, 0.16); border-color: rgba(245, 166, 35, 0.45); }
.layer-row.is-platform { background: rgba(27, 42, 107, 0.09); border-color: rgba(27, 42, 107, 0.26); }
.layer-row.is-gap {
  background: transparent;
  border: 1.4px dashed var(--line-strong);
  color: var(--faint);
  font-weight: 400;
  font-style: italic;
}

/* --- FAQ block ------------------------------------------------------------- */
.faq-list { display: grid; gap: 0.7rem; margin: 1.6rem 0 2rem; }
.faq-item {
  padding: 1.05rem 1.2rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.blog-article .faq-item h3 { margin: 0 0 0.35rem; font-size: 1rem; }
.blog-article .faq-item p { margin: 0; font-size: 0.94rem; color: var(--muted); }

@media (max-width: 720px) {
  .layer-cols { grid-template-columns: 1fr; }
  .cmp-wrap .data-table { font-size: 0.87rem; }
  .cmp-wrap.is-3way .data-table { font-size: 0.85rem; }
  .cmp-wrap .data-table td, .cmp-wrap .data-table td:last-child { padding: 0.8rem; }
  .cmp-wrap .data-table th { padding: 0.8rem; }
  .cmp-wrap + .table-note, .table-wrap + .table-note { margin: -2.4rem 0 2.6rem; }
}

/* ============================================================
   AGENTIC-INSPIRED LAYER  (Jul 2026)
   Deep-navy cinematic hero · gold italic emphasis · circle/ring
   motif · ecosystem orbit. Home-scoped so interior pages are
   untouched. Emphasis uses the same Space Grotesk family, italic.
   ============================================================ */

/* ---- shared motion ---- */
@keyframes rb-spin { to { transform: rotate(360deg); } }
@keyframes rb-drift { from { transform: translate(0,0) scale(1); } to { transform: translate(34px,-26px) scale(1.07); } }
@keyframes rb-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes rb-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
@keyframes rb-tw { 0%,100% { opacity: .2; } 50% { opacity: 1; } }
@keyframes rb-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(245,166,35,.5); } 55% { box-shadow: 0 0 0 8px rgba(245,166,35,0); } }
@keyframes rb-hubglow { 0%,100% { box-shadow: 0 0 26px rgba(245,166,35,.16); } 50% { box-shadow: 0 0 60px rgba(245,166,35,.4); } }

/* italic gold serif — the "look & feel" signature */
.serif-em { font-family: var(--font-serif); font-style: italic; font-weight: 600; color: var(--gold); letter-spacing: -0.01em; }

/* ---- ambient circle motif (decorative, behind content) ---- */
.orb { position: absolute; border-radius: 50%; filter: blur(78px); pointer-events: none; }
.rings-svg { position: absolute; pointer-events: none; }
.bub {
  position: absolute; border-radius: 50%;
  border: 1.5px solid rgba(202, 220, 252, 0.28);
  animation: rb-bob 10s ease-in-out infinite;
  pointer-events: none;
}
.tw { animation: rb-tw 5s ease-in-out infinite; }
.tw.d2 { animation-delay: 2.4s; }

/* ============ NAV over the dark home hero ============ */
.lg-light { display: none; }
.home .lg-ink { display: none; }
.home .lg-light { display: block; }

.home .nav-links > li > a,
.home .drop-toggle { color: var(--ice); }
.home .nav-links > li > a:hover,
.home .drop-toggle:hover,
.home .has-dropdown.open .drop-toggle,
.home .nav-links > li > a[aria-current="page"] { color: #fff; }
.home .burger span { background: #fff; }

/* dark from the first frame */
.home .nav {
  background: rgba(13, 26, 69, 0.92);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-d);
  transition: background 0.35s, border-color 0.35s, box-shadow 0.35s;
}
.home .nav.scrolled {
  background: rgba(13, 26, 69, 0.92);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom-color: var(--line-d);
  box-shadow: 0 8px 30px -18px rgba(9, 18, 51, 0.7);
}
.home .mobile-menu {
  background: rgba(9, 18, 51, 0.98);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.home .mobile-menu a { color: #fff; border-bottom-color: var(--line-d); }
.home .mobile-menu a.sub { color: var(--on-dark-muted); }

/* ============ NAV — dark & unified across all interior pages ============ */
body:not(.home) .nav {
  background: rgba(9, 18, 51, 0.94);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-d);
}
body:not(.home) .nav.scrolled {
  background: rgba(9, 18, 51, 0.94);
  box-shadow: 0 8px 30px -18px rgba(9, 18, 51, 0.7);
}
body:not(.home) .nav-links > li > a,
body:not(.home) .drop-toggle { color: var(--ice); }
body:not(.home) .nav-links > li > a:hover,
body:not(.home) .drop-toggle:hover,
body:not(.home) .has-dropdown.open .drop-toggle,
body:not(.home) .nav-links > li > a[aria-current="page"] { color: #fff; }
body:not(.home) .burger span { background: #fff; }
body:not(.home) .mobile-menu {
  background: rgba(9, 18, 51, 0.98);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
body:not(.home) .mobile-menu a { color: #fff; border-bottom-color: var(--line-d); }
body:not(.home) .mobile-menu a.sub { color: var(--on-dark-muted); }

/* ============ HERO — dark, cinematic ============ */
.home .hero {
  background:
    radial-gradient(760px 460px at 82% -8%, rgba(245, 166, 35, 0.12), transparent 60%),
    radial-gradient(680px 420px at 4% 8%, rgba(202, 220, 252, 0.10), transparent 58%),
    linear-gradient(172deg, var(--deep) 0%, #14245c 54%, var(--deep) 100%);
  color: var(--on-dark-muted);
  padding: clamp(9.5rem, 16vw, 13rem) 0 clamp(4.5rem, 8vw, 7rem);
}
.home .hero-aura { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.home .hero .orb-gold { width: 520px; height: 520px; top: -170px; right: -150px; background: rgba(245, 166, 35, 0.14); animation: rb-drift 20s ease-in-out infinite alternate; }
.home .hero .orb-ice  { width: 460px; height: 460px; bottom: -190px; left: -160px; background: rgba(202, 220, 252, 0.10); animation: rb-drift 27s ease-in-out infinite alternate-reverse; }
.home .hero .rings-svg { top: -110px; right: -70px; width: 560px; opacity: .9; animation: rb-spin 110s linear infinite; }
.home .hero .bub.b1 { width: 22px; height: 22px; top: 24%; left: 10%; animation-delay: -2s; }
.home .hero .bub.b2 { width: 12px; height: 12px; top: 66%; left: 6%; border: none; background: rgba(245, 166, 35, 0.35); animation-delay: -5s; }
.home .hero .bub.b3 { width: 16px; height: 16px; top: 18%; left: 44%; animation-delay: -8s; }
.home .hero .bub.b4 { width: 9px; height: 9px; bottom: 20%; right: 12%; border: none; background: rgba(202, 220, 252, 0.4); animation-delay: -3.5s; }

.home .hero-inner { position: relative; z-index: 2; }

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-display); font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold);
  border: 1px solid rgba(245, 166, 35, 0.4);
  padding: 0.5rem 1rem; border-radius: 999px;
  animation: rb-rise 0.7s 0.05s var(--ease) both;
}
.hero-eyebrow .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: rb-pulse 2.2s infinite; }

.home .hero h1 {
  color: #fff;
  font-size: clamp(2rem, 6.4vw, 4.9rem);
  max-width: 18ch; margin: 1.4rem 0 1.4rem;
}
/* word-by-word headline entrance */
.home .hero h1 .hw {
  display: inline-block;
  animation: rb-word 0.75s var(--ease) both;
  animation-delay: calc(0.16s + var(--i) * 0.07s);
}
@keyframes rb-word { from { opacity: 0; transform: translateY(0.6em); filter: blur(6px); } }
.hw-u { position: relative; }
.hw-u::after {
  content: ""; position: absolute; left: 1%; right: 3%; bottom: -0.06em; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, rgba(202, 220, 252, 0), #EAF1FF 30%, var(--ice));
  transform-origin: left;
  animation: rb-uline 0.6s 1.05s var(--ease) both;
}
@keyframes rb-uline { from { transform: scaleX(0); } }

.home .hero .lede { color: #C2CBE8; max-width: 600px; animation: rb-rise 0.85s 0.55s var(--ease) both; }
.home .hero .hero-ctas { animation: rb-rise 0.85s 0.72s var(--ease) both; }
.home .hero .hero-trust { animation: rb-rise 0.85s 0.86s var(--ease) both; }
.home .hero .hero-badges { animation: rb-rise 0.85s 0.98s var(--ease) both; }

.home .hero .btn-ghost {
  background: transparent; border-color: rgba(202, 220, 252, 0.34); color: #fff;
}
.home .hero .btn-ghost:hover { border-color: var(--gold); color: var(--gold-hi); background: transparent; }

.hero-trust {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.55rem 0.85rem;
  margin: -1.4rem 0 2rem;
  font-family: var(--font-display); font-size: 0.86rem; font-weight: 500; color: var(--ice);
}
.hero-trust .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); opacity: .85; }
.hero-trust svg { width: 16px; height: 16px; stroke: var(--gold); flex: none; }

.home .hero .chip {
  background: rgba(202, 220, 252, 0.07);
  border-color: var(--line-d); color: var(--ice);
}
.home .hero .chip:hover { color: var(--deep); background: var(--gold); border-color: var(--gold); transform: translateY(-2px); }

/* ============ ARCHITECTURE CANVAS (desktop only) ============
   The system draws itself: connection lines sketch in, nodes pop
   onto the RaptBot core, data pulses travel the lines, and real
   outcome chips float in. */
.archviz { display: none; --eco-scale: 1; }
@media (min-width: 1200px) {
  .archviz {
    display: block; position: absolute; z-index: 1; pointer-events: none;
    top: 50%; right: 24px; width: 560px; height: 560px; margin-top: -280px;
    transform: scale(var(--eco-scale)); transform-origin: right center;
  }
  .home .hero .rings-svg { display: none; }
  .home .hero-inner { max-width: 1180px; }
  .home .hero-inner > * { max-width: 600px; }
}

/* big screens — stop over-centering the hero: let the copy use the full
   container (kills the wide left gap), pull the diagram in to the container's
   right edge, and scale it up so it fills the space instead of hugging the edge */
@media (min-width: 1500px) {
  .home .hero-inner { max-width: var(--container); }
  .home .hero-inner > * { max-width: 660px; }
  .archviz { right: calc((100vw - var(--container)) / 2); --eco-scale: 1.1; }
}
@media (min-width: 1750px) {
  .home .hero-inner > * { max-width: 700px; }
  .archviz { --eco-scale: 1.18; }
}
@media (min-width: 2100px) {
  .archviz { --eco-scale: 1.26; }
}

/* connection lines — draw in from the core (kept behind the nodes) */
.av-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.av-lines path {
  stroke: rgba(202, 220, 252, 0.30); stroke-width: 1.5; fill: none; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 0;
  animation: av-draw 1s var(--ease) both;
}
.av-lines .gold { stroke: rgba(245, 166, 35, 0.55); }
.av-lines .p1 { animation-delay: 0.55s; }
.av-lines .p2 { animation-delay: 0.7s; }
.av-lines .p3 { animation-delay: 0.85s; }
.av-lines .p4 { animation-delay: 1s; }
.av-lines .p5 { animation-delay: 1.15s; }
.av-lines .p6 { animation-delay: 1.3s; }
.av-lines .p7 { animation-delay: 1.45s; }
.av-lines .p8 { animation-delay: 1.6s; }
@keyframes av-draw { from { stroke-dashoffset: 1; } }

/* dashed rings behind the core */
.av-ring { position: absolute; border-radius: 50%; z-index: 1; }
.av-ring.ra { width: 212px; height: 212px; left: 184px; top: 179px; border: 1.5px dashed rgba(245, 166, 35, 0.30); animation: rb-spin 46s linear infinite; }
.av-ring.rb { width: 272px; height: 272px; left: 154px; top: 149px; border: 1px dashed rgba(202, 220, 252, 0.16); animation: rb-spin 74s linear infinite reverse; }

/* handoff dot — carries the highlight across the core to the opposite node,
   alternating gold and white (driven by main.js) */
.av-handoff {
  position: absolute; left: 0; top: 0; width: 10px; height: 10px; border-radius: 50%; z-index: 1;
  background: var(--gold-hi); box-shadow: 0 0 14px 3px rgba(245, 166, 35, 0.75);
  opacity: 0; transition: opacity 0.2s;
}
.av-handoff.ice { background: var(--ice); box-shadow: 0 0 14px 3px rgba(202, 220, 252, 0.7); }
.av-handoff.on { opacity: 1; }
.av-lines path { transition: stroke 0.5s; }
.av-lines .ice { stroke: rgba(202, 220, 252, 0.75); }

/* nodes — always layered above the lines */
.av-node {
  position: absolute; transform: translate(-50%, -50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  width: 92px; padding: 13px 6px 11px;
  border-radius: 16px;
  background: var(--deep);
  border: 1.5px solid rgba(202, 220, 252, 0.30);
  box-shadow: 0 12px 30px -12px rgba(9, 18, 51, 0.9);
  animation: av-in 0.55s var(--ease) both;
  transition: border-color 0.5s, box-shadow 0.5s;
}
.av-node > span { transition: color 0.5s; }
@keyframes av-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.av-node svg { width: 22px; height: 22px; stroke: var(--gold); fill: none; }
.av-node > span { font: 600 8.5px/1.2 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ice); text-align: center; }
.av-node.live { border-color: var(--gold); box-shadow: 0 0 0 5px rgba(245, 166, 35, 0.12), 0 0 26px rgba(245, 166, 35, 0.42); }
.av-node.live > span { color: #fff; }
.av-node.live.ice { border-color: var(--ice); box-shadow: 0 0 0 5px rgba(202, 220, 252, 0.12), 0 0 26px rgba(202, 220, 252, 0.42); }

.av-node.center {
  width: 154px; height: 154px; padding: 0; gap: 7px; z-index: 3;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 34%, rgba(245, 166, 35, 0.16), rgba(245, 166, 35, 0) 62%), var(--deep);
  border-color: rgba(245, 166, 35, 0.4);
  animation: av-in 0.6s 0.3s var(--ease) both, rb-hubglow 4.5s 1.2s ease-in-out infinite;
}
.av-node.center .av-bolt { width: 38px; height: 38px; }
.av-node.center .av-bolt svg { width: 100%; height: 100%; stroke: none; }
.av-node.center b { font: 700 12.5px/1 var(--font-display); letter-spacing: 0.12em; color: #fff; }
.av-node.center .cl { font: 600 7.5px/1 var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }

.av-node.center { left: 290px; top: 285px; }
/* eight nodes evenly spaced (45° apart) on a 205px orbit around the core */
.av-node.n1 { left: 290px; top: 80px;  animation-delay: 1.3s; }  /* Agentforce — top */
.av-node.n2 { left: 435px; top: 140px; animation-delay: 1.45s; } /* Data Cloud — upper-right */
.av-node.n3 { left: 495px; top: 285px; animation-delay: 1.6s; }  /* AWS Cloud — right */
.av-node.n4 { left: 435px; top: 430px; animation-delay: 1.75s; } /* Sales Cloud — lower-right */
.av-node.n5 { left: 145px; top: 430px; animation-delay: 1.9s; }  /* Service Cloud — lower-left */
.av-node.n6 { left: 85px;  top: 285px; animation-delay: 2.05s; } /* ITSM — left */
.av-node.n7 { left: 145px; top: 140px; animation-delay: 2.2s; }  /* Commerce — upper-left */
.av-node.n8 { left: 290px; top: 490px; animation-delay: 2.35s; } /* Revenue Cloud — bottom */

/* ============ ambient polish on the dark CTA band ============ */
.cta-box { position: relative; isolation: isolate; }
.cta-box .cta-aura { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; }
.cta-box .cta-aura .orb { width: 360px; height: 360px; }
.cta-box .cta-aura .orb-a { top: -150px; left: -110px; background: rgba(245, 166, 35, 0.12); animation: rb-drift 22s ease-in-out infinite alternate; }
.cta-box .cta-aura .orb-b { bottom: -170px; right: -120px; background: rgba(75, 44, 131, 0.28); animation: rb-drift 28s ease-in-out infinite alternate-reverse; }

/* gentle pointer-parallax hook (JS sets --px/--py; falls back to 0) */
.home .hero-aura, .archviz { will-change: transform; }

@media (max-width: 1199px) {
  .home .hero-inner { max-width: 720px; }
}
@media (max-width: 640px) {
  .home .hero .orb-gold { width: 340px; height: 340px; top: -120px; right: -120px; }
  .home .hero .orb-ice { width: 300px; height: 300px; }
  .hero-trust { margin-top: -0.8rem; }
}

/* ============================================================
   MICRO-INTERACTIONS LAYER  (Jul 2026)
   Ecosystem marquee · cursor-spotlight cards · stats underline
   sweep · eyebrow line draw · icon hover. Light, CSS-driven,
   reduced-motion safe.
   ============================================================ */

/* ---- ecosystem marquee (kinetic ribbon under the hero) ---- */
.tech-marquee {
  background: var(--deeper);
  border-block: 1px solid var(--line-d);
  padding: 1.05rem 0;
  overflow: hidden;
}
.tm-track { display: flex; width: max-content; animation: rb-marquee 36s linear infinite; will-change: transform; }
.tech-marquee:hover .tm-track { animation-play-state: paused; }
.tm-set { display: flex; align-items: center; gap: 2.6rem; padding-right: 2.6rem; }
.tm-item {
  font: 600 0.8rem/1 var(--font-display);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ice); opacity: 0.85; white-space: nowrap;
}
.tm-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); flex: none; opacity: 0.9; }
@keyframes rb-marquee { to { transform: translateX(-50%); } }

/* ---- cursor spotlight on cards (JS feeds --mx / --my) ---- */
.cs-card, .model-card { position: relative; }
.practice-card::after, .bento-card::after, .cs-card::after, .model-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity 0.4s var(--ease);
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(245, 166, 35, 0.13), transparent 70%);
}
.practice-card:hover::after, .bento-card:hover::after, .cs-card:hover::after, .model-card:hover::after { opacity: 1; }

/* ---- practice icon micro-motion ---- */
.practice-card .icon, .offer-item .icon { transition: transform 0.35s var(--ease), background 0.35s; }
.practice-card:hover .icon { transform: rotate(-8deg) scale(1.07); background: rgba(245, 166, 35, 0.16); }

/* ---- stats: gold underline sweeps in as the numbers count ---- */
.stat::after {
  content: ""; display: block;
  width: 42px; height: 3px; margin: 0.85rem auto 0; border-radius: 3px;
  background: linear-gradient(90deg, var(--bolt-bright), var(--bolt-deep));
  transform: scaleX(0);
  transition: transform 0.8s var(--ease);
}
.stats-bar.lit .stat::after { transform: scaleX(1); }
.stats-bar.lit .stat:nth-child(2)::after { transition-delay: 0.15s; }
.stats-bar.lit .stat:nth-child(3)::after { transition-delay: 0.3s; }
.stats-bar.lit .stat:nth-child(4)::after { transition-delay: 0.45s; }

/* ---- eyebrow line draws in when a section reveals ---- */
.section-head.reveal .eyebrow::before { transform: scaleX(0); transform-origin: left; transition: transform 0.7s var(--ease) 0.15s; }
.section-head.reveal.visible .eyebrow::before { transform: scaleX(1); }

/* ---------- blog cards & article ---------- */
.blog-card { padding: 0; }
.blog-thumb { width: 100%; aspect-ratio: 16/9; overflow: hidden; background: var(--paper-2); }
.blog-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s var(--ease); }
.cs-card.blog-card:hover .blog-thumb img { transform: scale(1.05); }
.blog-article h2 { font-size: 1.4rem; margin: 2rem 0 0.9rem; font-family: var(--font-display); color: var(--ink); }
.blog-article p { margin-bottom: 1rem; line-height: 1.7; color: var(--ink); font-size: 1rem; }
.blog-article ul { list-style: disc; margin: 0 0 1.2rem 1.3rem; padding: 0; }
.blog-article li { margin-bottom: 0.5rem; line-height: 1.6; padding-left: 0.2rem; }
.blog-article li::marker { color: var(--accent-text); }
.blog-article img.inline-figure { width: 100%; max-width: 640px; display: block; margin: 1.8rem auto; }
.blog-article a {
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.blog-article a:hover {
  text-decoration-thickness: 2px;
}
.blog-article a {
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.blog-article a:hover {
  text-decoration-thickness: 2px;
}

/* ============================================================
   PRODUCTS  (Aug 2026)
   Listing cards reuse .cs-card / .blog-card wholesale. Everything
   below is the genuinely new surface: the gated hero video, the
   spec strip, the results metrics and the lead-capture modal.
   ============================================================ */

/* ---------- listing cards ---------- */
/* product covers are dark artwork — swap the light thumb backdrop */
.product-card .blog-thumb { background: var(--dark-1); }
.product-card h3 { font-size: 1.32rem; }

/* ---------- gated hero video ---------- */
.product-video-section { padding: clamp(2.5rem, 5vw, 3.6rem) 0 clamp(1rem, 2vw, 1.6rem); }
.product-video { max-width: 980px; margin-inline: auto; }

.pv-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--dark-1);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}
.pv-poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease), filter 0.4s var(--ease);
}
.product-video:not(.is-playing) .pv-frame::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(9, 18, 51, 0.28) 0%, rgba(9, 18, 51, 0.62) 100%);
  transition: opacity 0.4s var(--ease);
}

.pv-play {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.1rem; padding: 1.5rem;
  text-align: center; cursor: pointer;
  color: #fff;
}
.pv-play[hidden] { display: none; }
.pv-play-ring {
  width: 84px; height: 84px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--bolt-bright), var(--bolt-deep));
  color: var(--navy);
  box-shadow: 0 18px 40px -14px rgba(247, 148, 29, 0.7), 0 0 0 0 rgba(245, 166, 35, 0.45);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.pv-play-ring svg { width: 34px; height: 34px; margin-left: 3px; }
.pv-play:hover .pv-play-ring,
.pv-play:focus-visible .pv-play-ring { transform: scale(1.08); box-shadow: 0 22px 50px -14px rgba(247, 148, 29, 0.8), 0 0 0 12px rgba(245, 166, 35, 0.16); }
.product-video:not(.is-playing) .pv-frame:hover .pv-poster { transform: scale(1.03); }
.pv-play-text strong {
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  letter-spacing: -0.01em;
}
.pv-play-text span { display: block; font-size: 0.92rem; color: var(--ice); margin-top: 0.3rem; }
.pv-play:focus-visible { outline: 2px solid var(--bolt-bright); outline-offset: -6px; }

.pv-media { position: absolute; inset: 0; z-index: 3; }
.pv-media[hidden] { display: none; }
.pv-media > iframe, .pv-media > video { width: 100%; height: 100%; border: 0; display: block; background: #000; }

.pv-media.pv-pending {
  display: grid; place-items: center;
  padding: clamp(1.5rem, 4vw, 3rem);
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(247, 148, 29, 0.16), transparent 65%),
    linear-gradient(180deg, var(--dark-2), var(--dark-1));
}
.pv-pending-inner { max-width: 460px; text-align: center; }
.pv-pending-icon {
  display: grid; place-items: center;
  width: 52px; height: 52px; margin: 0 auto 1.1rem;
  border-radius: 14px;
  background: rgba(247, 148, 29, 0.14);
  border: 1px solid rgba(247, 148, 29, 0.4);
  color: var(--bolt-bright);
}
.pv-pending-icon svg { width: 26px; height: 26px; }
.pv-pending-inner h3 { color: #fff; font-size: 1.2rem; margin-bottom: 0.6rem; }
.pv-pending-inner p { color: var(--on-dark-muted); font-size: 0.96rem; }

.pv-note {
  margin-top: 1rem; text-align: center;
  font-size: 0.9rem; color: var(--faint);
}

/* ---------- product spec strip ---------- */
.product-facts {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.pf-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.pf {
  padding: 1.5rem 1.4rem;
  border-left: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 0.25rem;
}
.pf:first-child { border-left: 0; }
.pf-l {
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-text);
}
.pf-v { font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; color: var(--ink); }

/* ---------- results metrics ---------- */
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
.metric-card {
  position: relative; overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.9rem 1.7rem;
  box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column; gap: 0.45rem;
  transition: transform 0.35s var(--ease), border-color 0.35s, box-shadow 0.35s;
}
.metric-card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--bolt-bright), var(--bolt-deep));
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.metric-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity 0.4s var(--ease);
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(245, 166, 35, 0.13), transparent 70%);
}
.metric-card:hover { transform: translateY(-6px); border-color: rgba(247, 148, 29, 0.45); box-shadow: var(--shadow-card); }
.metric-card:hover::before { transform: scaleX(1); }
.metric-card:hover::after { opacity: 1; }
.metric-bolt {
  width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; margin-bottom: 0.3rem;
  background: rgba(247, 148, 29, 0.10);
  border: 1px solid rgba(247, 148, 29, 0.30);
  color: var(--accent-text);
}
.metric-bolt svg { width: 17px; height: 17px; fill: currentColor; stroke: none; }
.metric-n {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.7rem, 3vw, 2.25rem); line-height: 1.1;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--bolt-deep), #D96A00);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.metric-l { font-size: 0.95rem; color: var(--muted); }

/* ---------- lead-capture modal ---------- */
body.rb-modal-open { overflow: hidden; }

.rb-modal {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  animation: rb-modal-in 0.3s var(--ease) both;
}
.rb-modal[hidden] { display: none; }
@keyframes rb-modal-in { from { opacity: 0; } }

.rb-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(9, 18, 51, 0.62);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  cursor: pointer;
}
.rb-modal-panel {
  position: relative;
  width: min(640px, 100%);
  max-height: min(88vh, 900px);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 40px 90px -30px rgba(9, 18, 51, 0.6);
  animation: rb-panel-in 0.38s var(--ease) both;
}
@keyframes rb-panel-in { from { opacity: 0; transform: translateY(22px) scale(0.98); } }

/* scrolling lives on an inner wrapper, not the panel itself, so the
   panel's border-radius always clips cleanly — a native scrollbar sitting
   directly on the panel used to square off the top-right corner */
.rb-modal-scroll {
  max-height: min(88vh, 900px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: clamp(1.6rem, 4vw, 2.4rem);
  scrollbar-width: thin;
  scrollbar-color: rgba(18, 23, 63, 0.25) transparent;
}
.rb-modal-scroll::-webkit-scrollbar { width: 6px; }
.rb-modal-scroll::-webkit-scrollbar-track { background: transparent; }
.rb-modal-scroll::-webkit-scrollbar-thumb { background: rgba(18, 23, 63, 0.22); border-radius: 999px; }
.rb-modal-scroll::-webkit-scrollbar-thumb:hover { background: rgba(18, 23, 63, 0.38); }

.rb-modal-close {
  position: absolute; top: 0.9rem; right: 0.9rem; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--muted);
  transition: color 0.2s, border-color 0.2s, transform 0.25s var(--ease);
}
.rb-modal-close:hover { color: var(--accent-text); border-color: var(--bolt-deep); transform: rotate(90deg); }
.rb-modal-close svg { width: 16px; height: 16px; }

.rb-modal-head { margin-bottom: 1.6rem; padding-right: 2.6rem; }
.rb-modal-head h2 { font-size: clamp(1.4rem, 3vw, 1.85rem); margin: 0.9rem 0 0.7rem; }
.rb-modal-head p { color: var(--muted); font-size: 0.97rem; }

/* the cloned contact form sits flush inside the panel — drop its own frame */
.rb-modal-body .form-card {
  border: 0; box-shadow: none; padding: 0; border-radius: 0; background: transparent;
}
.rb-modal-loading { color: var(--faint); font-size: 0.95rem; }

/* hidden Web-to-Lead POST target — keeps the visitor on the page */
.rb-w2l-sink {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; border: 0; overflow: hidden;
}

/* ---------- products responsive ---------- */
@media (max-width: 1020px) {
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .pf-grid { grid-template-columns: repeat(2, 1fr); }
  .pf { border-left: 0; border-top: 1px solid var(--line); }
  .pf:nth-child(-n+2) { border-top: 0; }
  .pf:nth-child(even) { border-left: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .metric-grid { grid-template-columns: 1fr; }
  .pf-grid { grid-template-columns: 1fr; }
  .pf { border-left: 0; border-top: 1px solid var(--line); }
  .pf:first-child { border-top: 0; }
  .pv-play-ring { width: 64px; height: 64px; }
  .pv-play-ring svg { width: 26px; height: 26px; }
  .rb-modal-panel { border-radius: 18px; }
}

/* ============================================================
   BLOG — in-article edition picker  (Aug 2026)
   Two product cards inside a blog article, each linking to its
   own product page. Used first on blog/accessops-user-lifecycle
   (AccessOps vs AccessOps MVP). Selectors are scoped under
   .blog-article where they need to beat the article link and
   list defaults.
   ============================================================ */
.edition-picker {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
  margin: 1.9rem 0 1.3rem;
}

.blog-article a.edition-card {
  color: var(--ink);
  text-decoration: none;
}
.edition-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
/* accent rule sits between the artwork and the copy: the covers are dark navy,
   so a strip at the card's top edge would disappear into the image */
.ed-body::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
}
.is-full .ed-body::before { background: linear-gradient(90deg, var(--navy), var(--purple)); }
.is-mvp .ed-body::before { background: linear-gradient(90deg, var(--bolt-bright), var(--bolt-deep)); }
.edition-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card);
  border-color: var(--line-strong);
}
.edition-card:focus-visible {
  outline: 2px solid var(--bolt);
  outline-offset: 3px;
}

.ed-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--dark-1);
}
.ed-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s var(--ease);
}
.edition-card:hover .ed-thumb img { transform: scale(1.05); }

.ed-body {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.35rem 1.4rem 1.45rem;
}
.ed-badge {
  align-self: flex-start;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.28rem 0.62rem;
  border-radius: 999px;
}
.is-full .ed-badge { background: rgba(27, 42, 107, 0.10); color: var(--navy); }
.is-mvp .ed-badge { background: rgba(245, 166, 35, 0.20); color: var(--accent-text); }

.blog-article .edition-card h3 {
  font-size: 1.2rem;
  margin: 0;
  color: var(--ink);
}
.blog-article .ed-tag {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--muted);
}

.blog-article .ed-list {
  flex: 1;
  list-style: none;
  display: grid;
  align-content: start;
  gap: 0.45rem;
  margin: 0.15rem 0 0;
  padding: 0;
}
.blog-article .ed-list li {
  position: relative;
  margin: 0;
  padding-left: 1.4rem;
  font-size: 0.89rem;
  line-height: 1.5;
  color: var(--ink);
}
.blog-article .ed-list li::before {
  content: "";
  position: absolute;
  left: 2px; top: 0.36em;
  width: 9px; height: 5px;
  border-left: 2px solid var(--accent-text);
  border-bottom: 2px solid var(--accent-text);
  transform: rotate(-45deg);
}
.blog-article .is-full .ed-list li::before { border-color: var(--navy); }

.ed-cta { margin-top: 0.35rem; }
.edition-card:hover .ed-cta svg { transform: translateX(4px); }

.blog-article .edition-note {
  margin: 0 0 1rem;
  padding: 0.95rem 1.15rem;
  border-left: 3px solid var(--bolt);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--muted);
}

.edition-picker.is-single {
  grid-template-columns: minmax(0, 460px);
  justify-content: center;
}

@media (max-width: 720px) {
  .edition-picker { grid-template-columns: 1fr; gap: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .edition-card, .ed-thumb img, .ed-cta svg { transition: none; }
  .edition-card:hover { transform: none; }
  .edition-card:hover .ed-thumb img { transform: none; }
}