/* ============================================================
   RaptBot — Salesforce Advisory & Engineering
   Design system: light theme · navy ink + bolt amber + logo purple
   Space Grotesk / Inter
   ============================================================ */

: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: "Lora", Georgia, "Times New Roman", serif;
  --font-body: "Inter", "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; }

/* 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); }
.contrast-panel a { color: #FFFFFF; }
.contrast-panel a:hover { 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: space-between; gap: 1rem;
  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 { font-size: 0.86rem; color: var(--muted); }

/* 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); }

/* ---------- leaders ---------- */
.leader-grid { display: grid; grid-template-columns: repeat(4, 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; }
}

/* ---------- dreamforce ribbon ---------- */
.ribbon {
  background: linear-gradient(90deg, rgba(247,148,29,.10), rgba(75,44,131,.08));
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 1rem 0;
}
.ribbon-inner {
  display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap;
  font-family: var(--font-display); font-weight: 600; font-size: 0.98rem;
  text-align: center; color: var(--ink);
}
.ribbon .dot { color: var(--bolt-deep); }
.ribbon a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 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 var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.data-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; min-width: 640px; }
.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: rgba(247, 148, 29, 0.06);
}
.data-table td {
  padding: 0.9rem 1.2rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted); vertical-align: top;
}
.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; }

/* ---------- 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) {
  .nav-links, .nav-cta .btn-ghost { display: none; }
  .burger { display: flex; }
  .testimonial-grid, .grid-2 { grid-template-columns: 1fr; }
  .nav-logo img { height: 44px; }
}

@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; } }

/* ============================================================
   AGENTIC-INSPIRED LAYER  (Jul 2026)
   Deep-navy cinematic hero · gold serif emphasis · circle/ring
   motif · ecosystem orbit. Home-scoped so interior pages are
   untouched. Serif accent = Lora.
   ============================================================ */

/* ---- 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; }

.home .nav.scrolled {
  background: rgba(13, 26, 69, 0.9);
  -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(13, 26, 69, 0.82);
  -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; }

/* data pulses travelling the lines (hidden if offset-path unsupported) */
.av-pulse {
  position: absolute; width: 8px; height: 8px; border-radius: 50%; display: none; z-index: 1;
  background: var(--gold-hi); box-shadow: 0 0 12px 2px rgba(245, 166, 35, 0.65);
}
.av-pulse.ice { background: var(--ice); box-shadow: 0 0 10px 2px rgba(202, 220, 252, 0.55); }
@supports (offset-path: path("M0 0 L10 10")) {
  .av-pulse { display: block; }
}
@media (prefers-reduced-motion: reduce) { .av-pulse { display: none; } }
.pu1 { offset-path: path("M290,285 L290,80");  animation: av-travel 3.2s ease-in-out 2s infinite; }
.pu2 { offset-path: path("M290,285 L495,285"); animation: av-travel 3.8s ease-in-out 2.4s infinite; }
.pu3 { offset-path: path("M290,285 L435,430"); animation: av-travel 3.5s ease-in-out 2.2s infinite reverse; }
.pu4 { offset-path: path("M290,285 L85,285");  animation: av-travel 4.1s ease-in-out 2.7s infinite reverse; }
@keyframes av-travel { from { offset-distance: 0%; } to { offset-distance: 100%; } }

/* 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;
}
@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.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); }