/* ============================================================
   Act 2 AI Solutions - Light, modern, AI-forward
   Mockup-aligned front page with a clean cream/green palette,
   sharp typography, and no dark sections.
   ============================================================ */

/* ---------- Palette themes ---------- */
:root {
  /* Default: mockup-aligned green */
  --acc-bg: #f7fbf8;
  --acc-bg-soft: #eef7f3;
  --acc-bg-deep: #e2eee9;
  --acc-bg-tint: #f2f8f5;
  --acc-fg: #032f28;
  --acc-fg-muted: #385d57;
  --acc-fg-faint: #6f8a84;
  --acc-line: #d8e5df;
  --acc-line-strong: #b9cec6;
  --acc-line-soft: #e7f0ec;
  --acc-brand: #0d8f83;
  --acc-brand-hover: #086f65;
  --acc-brand-soft: #dcefea;
  --acc-brand-ink: #023b33;
  --acc-accent: #d49b0b;
  --acc-accent-2: #18a69f;

  /* Gradient orb colors */
  --orb-1: #93c5fd;            /* sky blue */
  --orb-2: #c4b5fd;            /* violet */
  --orb-3: #7dd3fc;            /* cyan */
  --orb-4: #a5b4fc;            /* indigo */

  /* Glass surfaces */
  --glass-bg: rgba(255,255,255,0.55);
  --glass-bg-strong: rgba(255,255,255,0.75);
  --glass-border: rgba(255,255,255,0.7);
  --glass-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 24px 60px -30px rgba(37,99,235,0.25);

  --hero-tint-a: #e0ecff;
  --hero-tint-b: #f5f8ff;
}

[data-palette="sky"] {} /* default */

[data-palette="aurora"] {
  --acc-bg: #f4f7ff;
  --acc-bg-soft: #ebf0ff;
  --acc-bg-deep: #ddE5ff;
  --acc-bg-tint: #eef3ff;
  --acc-fg: #1a1147;
  --acc-fg-muted: #5b5278;
  --acc-fg-faint: #9991b6;
  --acc-line: #dbdaf0;
  --acc-line-strong: #bbb6dc;
  --acc-line-soft: #e8e6f4;
  --acc-brand: #6d4aff;
  --acc-brand-hover: #5a36e8;
  --acc-brand-soft: #e9e3ff;
  --acc-brand-ink: #2d1e6e;
  --acc-accent: #ec4899;
  --acc-accent-2: #06b6d4;
  --orb-1: #c4b5fd;
  --orb-2: #f9a8d4;
  --orb-3: #a78bfa;
  --orb-4: #93c5fd;
  --hero-tint-a: #ece4ff;
  --hero-tint-b: #f4f7ff;
}

[data-palette="mint"] {
  --acc-bg: #f7fbf8;
  --acc-bg-soft: #eef7f3;
  --acc-bg-deep: #e2eee9;
  --acc-bg-tint: #f2f8f5;
  --acc-fg: #032f28;
  --acc-fg-muted: #385d57;
  --acc-fg-faint: #6f8a84;
  --acc-line: #d8e5df;
  --acc-line-strong: #b9cec6;
  --acc-line-soft: #e7f0ec;
  --acc-brand: #0d8f83;
  --acc-brand-hover: #086f65;
  --acc-brand-soft: #dcefea;
  --acc-brand-ink: #023b33;
  --acc-accent: #d49b0b;
  --acc-accent-2: #18a69f;
  --orb-1: #5eead4;
  --orb-2: #fcd34d;
  --orb-3: #7dd3fc;
  --orb-4: #6ee7b7;
  --hero-tint-a: #d8f1e9;
  --hero-tint-b: #f4fbf9;
}

/* ---------- Type pairings ---------- */
:root {
  --font-display: "Geist", ui-sans-serif, -apple-system, sans-serif;
  --font-body: "Geist", ui-sans-serif, -apple-system, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
  --display-tracking: 0;
  --display-weight: 500;
  --display-style: normal;
}
[data-font="editorial"] {
  --font-display: "Instrument Serif", "Times New Roman", serif;
  --font-body: "Geist", ui-sans-serif, -apple-system, sans-serif;
  --display-tracking: 0;
  --display-weight: 400;
}
[data-font="geometric"] {
  --font-display: "Sora", ui-sans-serif, sans-serif;
  --font-body: "Sora", ui-sans-serif, sans-serif;
  --display-tracking: 0;
  --display-weight: 500;
}

/* ---------- Density ---------- */
:root { --section-py: 140px; --container-px: 56px; }
[data-density="compact"] { --section-py: 96px; --container-px: 40px; }
[data-density="spacious"] { --section-py: 180px; --container-px: 72px; }

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: #f7fbf8;
}
body {
  margin: 0;
  font-family: var(--font-body);
  background: #f7fbf8;
  color: var(--acc-fg);
  font-size: 16px;
  line-height: 1.55;
  font-feature-settings: "ss01", "cv11";
  position: relative;
  overflow-x: hidden;
}

/* Global ambient gradient orbs - soft AI atmosphere */
body::before {
  content: none;
}
/* Fine noise texture overlay for AI/film feel */
body::after {
  content: none;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }

.container {
  max-width: 1448px;
  margin: 0 auto;
  padding: 0 60px;
  position: relative;
}

/* ============================================================
   Typography
   ============================================================ */
.eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--acc-brand);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.eyebrow .dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: currentColor; opacity: 0.45;
}

.h1, .h2, .h3 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  font-style: var(--display-style);
  line-height: 1.0;
  color: var(--acc-fg);
  text-wrap: balance;
  margin: 0;
}
.h1 { font-size: 86px; line-height: 1.01; }
.h2 { font-size: clamp(40px, 4.6vw, 72px); line-height: 1.0; }
.h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.15; letter-spacing: -0.02em; }

[data-font="editorial"] .h1 { line-height: 0.92; }
[data-font="editorial"] .h2 { line-height: 0.98; }

/* Gradient text for select hero words */
.gradtext {
  background: linear-gradient(108deg, #098f83 0%, #14a8a2 36%, #6fa66f 68%, #d49b0b 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

.lead {
  font-size: 17px;
  line-height: 1.55;
  color: var(--acc-fg-muted);
  text-wrap: pretty;
  margin: 0;
}

.section-kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 32px;
  color: var(--acc-fg-faint);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.section-kicker .num {
  font-family: var(--font-mono);
  font-feature-settings: "tnum";
  color: var(--acc-brand);
  font-size: 12px;
  letter-spacing: 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--acc-brand-soft);
  border: 1px solid color-mix(in srgb, var(--acc-brand) 18%, transparent);
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 46px;
  padding: 14px 23px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  border: 1px solid transparent;
  transition: background .2s, color .2s, border-color .2s, transform .15s, box-shadow .2s;
  white-space: nowrap;
}
.btn--primary {
  background: #033d34;
  color: #fff;
  border-color: #033d34;
  box-shadow: 0 12px 24px -16px rgba(3, 61, 52, 0.55);
}
.btn--primary:hover {
  background: #075247;
  border-color: #075247;
  box-shadow: 0 14px 28px -16px rgba(3, 61, 52, 0.65);
}
.btn--ghost {
  background: transparent;
  color: var(--acc-fg);
  border-color: #8ba39c;
}
.btn--ghost:hover { border-color: var(--acc-fg); background: #eef7f3; }

.btn .arr {
  display: inline-block;
  width: 16px; height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8h10M9 4l4 4-4 4' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8h10M9 4l4 4-4 4' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}
.btn:hover .arr { transform: translateX(2px); transition: transform .2s; }

/* ============================================================
   Header / nav
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 251, 248, 0.94);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
          backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid #d6e2dd;
}
.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 73px;
  gap: 24px;
}
.site-header .container {
  max-width: none;
  padding: 0 46px;
}
.brand {
  display: flex;
  align-items: center;
  color: var(--acc-brand);
}
.brand__logo {
  display: block;
  width: 286px;
  height: auto;
  flex: none;
}

/* Header CTA hides while the booking form is in view */
.site-header__cta {
  justify-self: end;
  min-width: 218px;
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.site-header__cta.is-hidden {
  opacity: 0;
  transform: translateY(-4px);
  visibility: hidden;
  pointer-events: none;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  color: var(--acc-fg);
  font-weight: 500;
  padding: 8px 0;
  border-radius: 0;
  transition: background .15s, color .15s;
}
.nav__link:hover { background: transparent; color: var(--acc-brand); }
.nav__chev {
  width: 10px; height: 10px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M2 4l3 3 3-3' stroke='black' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M2 4l3 3 3-3' stroke='black' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
  opacity: 0.55;
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  padding: 70px 0 0;
  overflow: hidden;
}
.hero__inner {
  display: grid;
  grid-template-columns: 550px minmax(0, 1fr);
  gap: 76px;
  align-items: start;
  padding-bottom: 18px;
  position: relative;
}
.hero__copy { padding-top: 27px; }
.hero__eyebrow { margin-bottom: 36px; }

/* Live badge - "AI-powered, currently helping X teams" type indicator */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 10px;
  border-radius: 999px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  font-size: 13px;
  color: var(--acc-fg);
  margin-bottom: 32px;
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  box-shadow: 0 6px 20px -8px rgba(37,99,235,0.18);
}
.hero__badge .pulse {
  width: 8px; height: 8px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(34,197,94,0.6);
  animation: pulse 2.2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); }
  70% { box-shadow: 0 0 0 10px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

.hero__title {
  margin-bottom: 17px;
  max-width: 560px;
  font-weight: 700;
  color: #033d34;
}
.hero__lead {
  max-width: 477px;
  margin-bottom: 14px;
  color: #3d615b;
}
.hero__cta { display: flex; gap: 24px; flex-wrap: wrap; }
.hero__cta .btn--primary { min-width: 215px; }
.hero__cta .btn--ghost { min-width: 179px; }

.hero__meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid #d3dfda;
}
.hero__meta-item {}
.hero__meta-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--acc-brand);
  letter-spacing: 0.04em;
  margin-bottom: 9px;
  display: block;
  font-weight: 700;
}
.hero__meta-text {
  font-size: 14px;
  line-height: 1.45;
  color: var(--acc-fg);
}

.hero__visual {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 710 / 720;
  background: var(--acc-bg-deep);
  box-shadow: none;
  width: calc(100% + 8px);
}
.hero__image {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
}
.hero__visual::after {
  content: none;
}

/* Floating glass card on hero visual */
.hero__card {
  position: absolute;
  background: rgba(255,255,255,0.85);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
          backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: 16px;
  padding: 18px 20px;
  color: var(--acc-fg);
  box-shadow: 0 20px 60px -20px rgba(11,30,80,0.3);
  z-index: 2;
}
.hero__card--metrics {
  bottom: 22px;
  left: 22px;
  right: 22px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.hero__card-head {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acc-fg-faint);
  margin-bottom: 14px;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero__card-head::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 10px #22c55e;
}
.hero__card-metric-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--acc-fg-muted);
  margin-bottom: 6px;
}
.hero__card-metric-val {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: var(--display-weight);
  letter-spacing: -0.03em;
  color: var(--acc-fg);
}
.hero__card-metric-val small {
  font-size: 13px;
  opacity: 0.6;
  font-weight: 400;
  margin-left: 2px;
}

/* Floating "AI thinking" prompt chip on hero */
.hero__chip {
  position: absolute;
  top: 28px; right: -16px;
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--acc-fg);
  box-shadow: 0 20px 50px -20px rgba(11,30,80,0.25);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  max-width: 280px;
  z-index: 2;
  animation: float 7s ease-in-out infinite;
}
.hero__chip strong { font-weight: 600; }
.hero__chip .icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--acc-brand), var(--acc-accent-2));
  display: grid; place-items: center;
  color: #fff; font-size: 13px; flex: none;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ============================================================
   Trust strip
   ============================================================ */
.trust {
  padding: 16px 0 31px;
  position: relative;
  border: 0;
  background: transparent;
}
.trust__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}
.trust__label {
  display: none;
}
.trust__chips {
  display: flex;
  justify-content: center;
  gap: 16px 14px;
  flex-wrap: wrap;
  width: 100%;
  flex: none;
}
.trust__chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 10px 21px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid #dbe8e3;
  font-size: 15px;
  color: var(--acc-fg);
  transition: transform .15s, box-shadow .15s;
}
.trust__chip:hover { transform: translateY(-1px); box-shadow: 0 8px 22px -14px rgba(3,61,52,0.25); }
.trust__chip svg { width: 16px; height: 16px; color: var(--acc-brand); }

/* ============================================================
   Section base
   ============================================================ */
section.page-section {
  padding: var(--section-py) 0;
  position: relative;
}
.page-section--soft { background: color-mix(in srgb, var(--acc-bg-soft) 60%, transparent); }
#about {
  background:
    radial-gradient(58% 92% at 4% 94%, rgba(88, 214, 202, 0.42) 0%, rgba(188, 238, 232, 0.25) 42%, transparent 74%),
    radial-gradient(46% 76% at 97% 4%, rgba(137, 224, 215, 0.34) 0%, rgba(222, 247, 244, 0.42) 52%, transparent 82%),
    radial-gradient(62% 80% at 48% 45%, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.88) 48%, transparent 78%),
    linear-gradient(112deg, #e8fbfb 0%, #fbfdfd 34%, #f8fcfb 58%, #dff7f2 100%);
}

.section-head {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 72px;
}
.section-head__title { max-width: 14ch; }
.section-head__lead { max-width: 56ch; }

/* ============================================================
   Problem
   ============================================================ */
.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.problem-card {
  padding: 36px 32px;
  border-radius: 20px;
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  position: relative;
  overflow: hidden;
  transition: transform .25s, box-shadow .25s;
}
.problem-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -30px rgba(37,99,235,0.3);
}
.problem-card::before {
  content: "";
  position: absolute;
  top: -50%; right: -30%;
  width: 200px; height: 200px;
  background: radial-gradient(circle, color-mix(in srgb, var(--acc-brand) 25%, transparent), transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}
.problem-card__stat {
  font-family: var(--font-display);
  font-size: 72px;
  line-height: 0.95;
  font-weight: var(--display-weight);
  letter-spacing: -0.045em;
  background: linear-gradient(135deg, var(--acc-brand) 0%, var(--acc-accent-2) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin-bottom: 20px;
  position: relative;
}
.problem-card__title {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
  position: relative;
}
.problem-card__body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--acc-fg-muted);
  position: relative;
}
.problem-card__cite {
  position: relative;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--acc-fg-faint);
}

/* ============================================================
   Services
   ============================================================ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto 1fr auto;
  gap: 16px;
}
.service {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  padding: 40px 36px;
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  gap: 0;
  position: relative;
  overflow: hidden;
  transition: transform .25s, box-shadow .25s;
}
.service:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -30px rgba(37,99,235,0.3);
}
.service::before {
  content: "";
  position: absolute;
  top: -40%; left: -20%;
  width: 240px; height: 240px;
  background: radial-gradient(circle, color-mix(in srgb, var(--orb-1) 50%, transparent), transparent 70%);
  filter: blur(30px);
  pointer-events: none;
  opacity: 0.7;
}
.service:nth-child(2)::before {
  background: radial-gradient(circle, color-mix(in srgb, var(--orb-2) 50%, transparent), transparent 70%);
}
.service:nth-child(3)::before {
  background: radial-gradient(circle, color-mix(in srgb, var(--orb-3) 50%, transparent), transparent 70%);
}
.service__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--acc-brand);
  margin-bottom: 32px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1;
}
.service__num::before {
  content: ""; width: 24px; height: 1px; background: currentColor;
}
.service__title {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: var(--display-weight);
  margin-bottom: 18px;
  max-width: 14ch;
  position: relative;
  z-index: 1;
}
.service__body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--acc-fg-muted);
  margin-bottom: 32px;
  max-width: 38ch;
  position: relative;
  z-index: 1;
}
.service__list {
  list-style: none;
  margin: 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--acc-line);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  z-index: 1;
  align-self: start;
}
.service__list li {
  font-size: 13.5px;
  color: var(--acc-fg);
  display: flex;
  gap: 10px;
  align-items: flex-start;
  line-height: 1.45;
}
.service__list li::before {
  content: "";
  width: 5px; height: 5px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--acc-brand);
  flex: none;
  box-shadow: 0 0 8px var(--acc-brand);
}

/* ============================================================
   Sprint - light version, no inverse
   ============================================================ */
.sprint {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 32px;
  position: relative;
}
/* Connecting line between sprint days */
.sprint::before {
  content: "";
  position: absolute;
  top: 78px;
  left: 5%;
  right: 5%;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--acc-brand) 50%, transparent) 20%,
    color-mix(in srgb, var(--acc-accent-2) 50%, transparent) 50%,
    color-mix(in srgb, var(--acc-accent) 50%, transparent) 80%,
    transparent 100%);
  z-index: 0;
}
.sprint-day {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  padding: 32px 30px 36px;
  position: relative;
  z-index: 1;
  transition: transform .25s, box-shadow .25s;
}
.sprint-day:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -30px rgba(37,99,235,0.3);
}
.sprint-day__pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--acc-fg-muted);
  margin-bottom: 28px;
}
.sprint-day__pill .step {
  font-family: var(--font-display);
  background: linear-gradient(135deg, var(--acc-brand), var(--acc-accent-2));
  color: #fff;
  border-radius: 999px;
  font-size: 10px;
  padding: 4px 10px;
  letter-spacing: 0;
  font-weight: 500;
}
.sprint-day__title {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: var(--display-weight);
  color: var(--acc-fg);
  margin-bottom: 14px;
  max-width: 16ch;
}
.sprint-day__lead {
  font-size: 14px;
  line-height: 1.55;
  color: var(--acc-fg-muted);
  margin-bottom: 28px;
}
.sprint-day__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.sprint-day__list li {
  display: flex;
  gap: 12px;
  font-size: 13px;
  color: var(--acc-fg);
  line-height: 1.45;
  padding: 12px 0;
  border-bottom: 1px solid var(--acc-line-soft);
}
.sprint-day__list li:last-child { border-bottom: 0; }
.sprint-day__list li svg { flex: none; margin-top: 2px; color: var(--acc-brand); }

/* Sprint price card */
.sprint-cta {
  border-radius: 22px;
  padding: 36px 40px;
  display: grid;
  grid-template-columns: 1.6fr auto auto;
  align-items: center;
  gap: 40px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--acc-brand) 95%, transparent) 0%,
    color-mix(in srgb, var(--acc-accent-2) 90%, transparent) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 70px -30px rgba(37,99,235,0.5);
}
.sprint-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(400px 300px at 0% 0%, rgba(255,255,255,0.25), transparent 60%),
    radial-gradient(500px 400px at 100% 100%, rgba(255,255,255,0.15), transparent 60%);
  pointer-events: none;
}
.sprint-cta > * { position: relative; }
.sprint-cta__price {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: var(--display-weight);
  letter-spacing: -0.04em;
  color: #fff;
  line-height: 1;
}
.sprint-cta__price small {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  color: rgba(255,255,255,0.7);
  margin-left: 8px;
}
.sprint-cta__terms {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  margin-top: 8px;
}
.sprint-cta .btn--on-light {
  background: #fff;
  color: var(--acc-fg);
  border-color: #fff;
}
.sprint-cta .btn--on-light:hover {
  background: var(--acc-bg);
}

/* ============================================================
   Roadmap
   ============================================================ */
.roadmap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  position: relative;
}
.roadmap::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 36px;
  height: 2px;
  background: linear-gradient(90deg,
    var(--acc-brand) 0%,
    var(--acc-brand) 50%,
    color-mix(in srgb, var(--acc-line-strong) 100%, transparent) 50%,
    var(--acc-line-strong) 100%);
}
.stage {
  padding: 0 4px;
  position: relative;
}
.stage__dot {
  position: relative;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--acc-brand);
  margin: 30px 0 28px;
  z-index: 1;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--acc-brand) 18%, transparent);
}
.stage--future .stage__dot {
  background: var(--acc-bg);
  border: 2px solid var(--acc-line-strong);
  box-shadow: 0 0 0 4px var(--acc-bg);
}
.stage__phase {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--acc-fg-faint);
  margin-bottom: 6px;
}
.stage__time {
  font-size: 13px;
  color: var(--acc-brand);
  font-weight: 500;
  margin-bottom: 14px;
}
.stage--future .stage__time { color: var(--acc-fg-faint); }
.stage__signal {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--acc-brand);
  margin-bottom: 14px;
  max-width: 22ch;
  min-height: calc(2 * 1.35em); /* reserve 2 lines so titles align across columns */
}
.stage--future .stage__signal { color: var(--acc-fg-faint); }

/* ============================================================
   Journey strip (sprint → plan → partner)
   ============================================================ */
.journey {
  margin-top: 80px;
  padding: 48px 44px;
  border-radius: 22px;
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  position: relative;
  overflow: hidden;
}
.journey::before {
  content: "";
  position: absolute;
  inset: -1px;
  background:
    radial-gradient(60% 80% at 0% 0%,
      color-mix(in srgb, var(--acc-brand) 14%, transparent) 0%,
      transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.journey__head {
  position: relative;
  z-index: 1;
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 60ch;
}
.journey__title {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: var(--display-weight);
}
.journey__steps {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.journey__step {
  padding: 24px 22px;
  border-radius: 16px;
  background: var(--acc-bg);
  border: 1px solid var(--acc-line);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.journey__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--acc-brand);
  font-weight: 500;
}
.journey__step-title {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: var(--display-weight);
}
.journey__step-body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--acc-fg-muted);
}
@media (max-width: 960px) {
  .journey { padding: 36px 28px; }
  .journey__steps { grid-template-columns: 1fr; gap: 16px; }
}
.stage__title {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: var(--display-weight);
  margin-bottom: 12px;
  min-height: calc(2 * 1.1em); /* reserve 2 lines so body copy aligns across columns */
}
.stage__body {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--acc-fg-muted);
}

/* ============================================================
   Tooling
   ============================================================ */
.tooling {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 56px;
  align-items: start;
}
.tooling__principle {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  padding: 44px 40px;
  position: relative;
  overflow: hidden;
}
.tooling__principle::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: linear-gradient(135deg, var(--acc-brand), var(--acc-accent-2), var(--acc-accent));
  opacity: 0.08;
  pointer-events: none;
}
.tooling__principle-text {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: var(--display-weight);
  position: relative;
}
.tooling__principle-text .gradtext { display: inline; }
.tooling__principle-by {
  margin-top: 28px;
  font-size: 12px;
  color: var(--acc-fg-faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  position: relative;
}

.tool-card {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 22px 26px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: start;
  transition: transform .2s, box-shadow .2s;
}
.tool-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -20px rgba(37,99,235,0.25);
}
.tool-card + .tool-card { margin-top: 12px; }
.tool-card__logo {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  color: #fff;
  box-shadow: 0 8px 20px -8px rgba(0,0,0,0.3);
}
.tool-card__name {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.tool-card__name small {
  font-size: 12px;
  color: var(--acc-fg-faint);
  font-weight: 400;
  margin-left: 8px;
}
.tool-card__body {
  font-size: 14px;
  line-height: 1.5;
  color: var(--acc-fg-muted);
}

/* ============================================================
   Deliverables
   ============================================================ */
.deliverables {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.deliverable {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 24px 22px;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  transition: transform .2s, box-shadow .2s;
}
.deliverable:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -16px rgba(37,99,235,0.25);
  border-color: color-mix(in srgb, var(--acc-brand) 30%, transparent);
}
.deliverable__name {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--acc-fg);
}
.deliverable__kind {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--acc-brand);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.deliverable__kind::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor;
}

/* ============================================================
   About
   ============================================================ */
.about {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 72px;
  align-items: start;
}
.about__visual {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  padding: 38px;
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.98) 0 38%, rgba(255,255,255,0.72) 62%, transparent 84%),
    linear-gradient(145deg, rgba(255,255,255,0.92), rgba(246,251,250,0.88)),
    #f6fbfa;
  border: 1px solid rgba(13, 83, 79, 0.12);
  box-shadow:
    0 34px 82px -56px rgba(13, 143, 131, 0.45),
    inset 0 1px 0 rgba(255,255,255,0.92);
}
.about__visual::before {
  content: "";
  position: absolute;
  width: 64%;
  aspect-ratio: 1;
  border-radius: 999px;
  background: rgba(71, 199, 188, 0.12);
  filter: blur(58px);
  opacity: 0.86;
  pointer-events: none;
}
.about__logo {
  position: relative;
  z-index: 1;
  display: block;
  width: min(100%, 650px);
  height: auto;
}
.about__quote {
  font-family: var(--font-display);
  font-size: clamp(30px, 2.6vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: var(--display-weight);
  text-wrap: balance;
  margin: 0 0 36px;
}
.about__body {
  font-size: 16px;
  line-height: 1.65;
  color: var(--acc-fg-muted);
  max-width: 56ch;
  margin: 0 0 28px;
}
.about__signoff {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 24px;
  border-top: 1px solid var(--acc-line);
}
.about__name { font-size: 15px; font-weight: 600; }
.about__role { font-size: 13px; color: var(--acc-fg-muted); }

/* ============================================================
   FAQ
   ============================================================ */
.faq {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.faq__item {
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border-radius: 16px;
  padding: 28px 32px;
  transition: background .2s, border-color .2s;
}
.faq__item:hover {
  background: var(--glass-bg-strong);
  border-color: color-mix(in srgb, var(--acc-brand) 25%, transparent);
}
.faq__q {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.2;
  font-weight: var(--display-weight);
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.faq__a {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--acc-fg-muted);
  margin: 0;
}

/* ============================================================
   Final CTA
   ============================================================ */
.cta-final {
  border-radius: 28px;
  padding: 72px 72px;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 64px;
  align-items: start;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--acc-brand) 92%, transparent) 0%,
      color-mix(in srgb, var(--acc-accent-2) 80%, transparent) 70%,
      color-mix(in srgb, var(--acc-accent) 70%, transparent) 100%);
  color: #fff;
  box-shadow: 0 40px 100px -40px rgba(37,99,235,0.6);
}
.cta-final__copy {
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-self: stretch;
}
.cta-final::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(500px 400px at 10% 10%, rgba(255,255,255,0.25), transparent 60%),
    radial-gradient(600px 500px at 90% 110%, rgba(255,255,255,0.18), transparent 60%);
  pointer-events: none;
}
.cta-final::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.18;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.cta-final > * { position: relative; }
.cta-final__title {
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(38px, 3.4vw, 56px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  font-weight: var(--display-weight);
  margin: 0;
  text-wrap: balance;
}
.cta-final__side {
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: flex-start;
}
.cta-final__lead {
  color: rgba(255,255,255,0.88);
  font-size: 16px;
  line-height: 1.6;
  max-width: 44ch;
  margin: 0;
}
.cta-final__signals {
  list-style: none;
  margin: 8px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid rgba(255,255,255,0.22);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cta-final__signals li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: rgba(255,255,255,0.92);
  line-height: 1.4;
}
.cta-final__signals svg {
  width: 16px; height: 16px;
  flex: none;
  padding: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  color: #fff;
  box-sizing: content-box;
}
.cta-final__buttons { display: flex; gap: 12px; flex-wrap: wrap; }

/* ============================================================
   CTA form
   ============================================================ */
.cta-form {
  position: relative;
  z-index: 1;
  background: rgba(255,255,255,0.97);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
          backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: 22px;
  padding: 32px 32px 28px;
  color: var(--acc-fg);
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.8) inset,
    0 30px 80px -30px rgba(11,30,80,0.45);
}
.cta-form__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 4px;
}
.cta-form__kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acc-brand);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.cta-form__kicker::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
}
.cta-form__time {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--acc-fg-faint);
}

.cta-form__row {
  display: grid;
  gap: 14px;
}
.cta-form__row--2 { grid-template-columns: 1fr 1fr; }

.cta-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.cta-field--group {
  border: 0;
  margin: 0;
  padding: 0;
}
.cta-field__label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--acc-fg);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cta-field__label small {
  font-weight: 400;
  font-size: 11px;
  color: var(--acc-fg-faint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.cta-field__input {
  font: inherit;
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--acc-line);
  background: var(--acc-bg);
  color: var(--acc-fg);
  font-size: 14.5px;
  line-height: 1.4;
  transition: border-color .15s, box-shadow .15s, background .15s;
  -webkit-appearance: none;
          appearance: none;
}
.cta-field__input::placeholder { color: var(--acc-fg-faint); }
.cta-field__input:hover { border-color: var(--acc-line-strong); }
.cta-field__input:focus {
  outline: none;
  border-color: var(--acc-brand);
  background: #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc-brand) 18%, transparent);
}
.cta-field__input--area {
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
}
.cta-field__input.is-invalid,
.cta-field__input.is-invalid:focus {
  border-color: #ef4444;
  box-shadow: 0 0 0 4px rgba(239,68,68,0.18);
}

/* Select */
.cta-select { position: relative; }
.cta-select select { padding-right: 36px; }
.cta-select__chev {
  position: absolute;
  right: 14px; top: 50%;
  width: 10px; height: 10px;
  transform: translateY(-50%);
  background: var(--acc-fg-muted);
  pointer-events: none;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M2 4l3 3 3-3' stroke='black' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M2 4l3 3 3-3' stroke='black' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}

/* Stage radio cards */
.cta-stage-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}
.cta-stage-grid.is-invalid-group {
  outline: 1px solid #ef4444;
  outline-offset: 6px;
  border-radius: 14px;
}
.cta-stage {
  position: relative;
  display: block;
  cursor: pointer;
}
.cta-stage input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.cta-stage__inner {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--acc-line);
  background: var(--acc-bg);
  transition: border-color .15s, background .15s, box-shadow .15s;
  height: 100%;
}
.cta-stage:hover .cta-stage__inner {
  border-color: var(--acc-line-strong);
  background: #fff;
}
.cta-stage input:focus-visible + .cta-stage__inner {
  outline: none;
  border-color: var(--acc-brand);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc-brand) 18%, transparent);
}
.cta-stage input:checked + .cta-stage__inner {
  border-color: var(--acc-brand);
  background: var(--acc-brand-soft);
  box-shadow: 0 0 0 1px var(--acc-brand) inset;
}
.cta-stage__num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--acc-brand);
}
.cta-stage__title {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--acc-fg);
}
.cta-stage__body {
  font-size: 12px;
  line-height: 1.4;
  color: var(--acc-fg-muted);
}

.cta-form__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.cta-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 26px;
  border-radius: 12px;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1;
  color: #fff;
  background: var(--acc-fg);
  border: 1px solid var(--acc-fg);
  cursor: pointer;
  box-shadow: 0 10px 28px -12px color-mix(in srgb, var(--acc-fg) 70%, transparent);
  transition: background .2s, border-color .2s, box-shadow .2s, transform .15s;
}
.cta-form__submit:hover {
  background: var(--acc-brand);
  border-color: var(--acc-brand);
  box-shadow: 0 14px 34px -10px color-mix(in srgb, var(--acc-brand) 60%, transparent);
}
.cta-form__submit:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--acc-brand) 25%, transparent),
    0 10px 24px -10px color-mix(in srgb, var(--acc-fg) 70%, transparent);
}
.cta-form__submit:disabled,
.cta-form__submit[disabled] {
  cursor: not-allowed;
  background: var(--acc-line);
  border-color: var(--acc-line);
  color: var(--acc-fg-faint);
  box-shadow: none;
  transform: none;
  filter: none;
}
.cta-form__submit:disabled:hover,
.cta-form__submit[disabled]:hover {
  background: var(--acc-line);
  border-color: var(--acc-line);
  box-shadow: none;
}
.cta-form__submit:disabled .arr,
.cta-form__submit[disabled] .arr { background: var(--acc-fg-faint); }
.cta-form__submit .arr { background: #fff; }
.cta-form__submit:hover .arr { transform: translateX(2px); transition: transform .2s; }
.cta-form__submit.is-submitting {
  cursor: wait;
  opacity: .72;
}
.cta-form__fine {
  font-size: 12px;
  color: var(--acc-fg-faint);
  max-width: 22ch;
  line-height: 1.4;
  text-align: right;
}
.cta-form__error {
  margin: -4px 0 0;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, #b42318 30%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, #b42318 8%, #fff);
  color: #7a271a;
  font-size: 13px;
  line-height: 1.45;
}
.cta-form__error a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Success state */
.cta-form__success {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 8px 4px 0;
}
.cta-form__success-mark {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--acc-brand) 14%, transparent);
  color: var(--acc-brand);
  display: grid;
  place-items: center;
}
.cta-form__success-mark svg { width: 28px; height: 28px; }
.cta-form__success-title {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: -0.02em;
  font-weight: var(--display-weight);
  margin: 0;
}
.cta-form__success-body {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--acc-fg-muted);
  margin: 0;
}
.cta-form__success-body a { color: var(--acc-brand); text-decoration: underline; text-underline-offset: 3px; }

/* When success is shown, hide form internals */
.cta-form.is-sent > :not(.cta-form__success) { display: none; }
.cta-form.is-sent .cta-form__success { display: flex; }
.btn--on-image {
  background: #fff;
  color: var(--acc-fg);
  border-color: #fff;
}
.btn--on-image:hover { background: var(--acc-bg); transform: translateY(-1px); }
.btn--on-image-ghost {
  background: rgba(255,255,255,0.1);
  color: #fff;
  border-color: rgba(255,255,255,0.4);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.btn--on-image-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.2); }

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  padding: 64px 0 32px;
  font-size: 14px;
  border-top: 1px solid color-mix(in srgb, var(--acc-line) 60%, transparent);
}
.site-footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid color-mix(in srgb, var(--acc-line) 60%, transparent);
}
.site-footer__brand .lead {
  font-size: 14px;
  margin-top: 16px;
  max-width: 32ch;
}
.site-footer__entity {
  margin: 20px 0 0;
  max-width: 34ch;
  color: var(--acc-fg-muted);
  font-size: 12.5px;
  line-height: 1.5;
}
.site-footer__col h4 {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--acc-fg-faint);
  margin: 0 0 18px;
  font-weight: 500;
}
.site-footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.site-footer__col a { color: var(--acc-fg); }
.site-footer__col a:hover { color: var(--acc-brand); }
.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  font-size: 12px;
  color: var(--acc-fg-faint);
}
.site-footer__bottom a {
  color: inherit;
  text-decoration: none;
}
.site-footer__bottom a:hover { color: var(--acc-brand); }
.site-footer__legal-links {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Image slot styling */
image-slot { --slot-bg: var(--acc-bg-deep); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1100px) {
  .container { padding: 0 32px; }
  .h1 { font-size: 68px; }
  .hero { padding-top: 44px; }
  .hero__inner { grid-template-columns: 1fr; gap: 42px; }
  .hero__copy { padding-top: 0; }
  .hero__visual { aspect-ratio: 16/10; }
  .hero__chip { display: none; }
  .section-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 48px; }
  .problem-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  .sprint { grid-template-columns: 1fr; }
  .sprint::before { display: none; }
  .sprint-cta { grid-template-columns: 1fr; gap: 24px; }
  .roadmap { grid-template-columns: 1fr 1fr; }
  .roadmap::before { display: none; }
  .tooling { grid-template-columns: 1fr; }
  .deliverables { grid-template-columns: 1fr 1fr; }
  .about { grid-template-columns: 1fr; gap: 48px; }
  .faq { grid-template-columns: 1fr; }
  .cta-final { grid-template-columns: 1fr; padding: 56px 36px; gap: 40px; }
  .cta-form { padding: 28px 24px 24px; }
  .cta-form__row--2 { grid-template-columns: 1fr; }
  .cta-stage-grid { grid-template-columns: 1fr; }
  .cta-form__foot { flex-direction: column; align-items: stretch; }
  .cta-form__fine { text-align: left; max-width: none; }
  .cta-form__submit { justify-content: center; }
  .site-footer__top { grid-template-columns: 1fr 1fr; }
  .site-footer__bottom { align-items: flex-start; flex-direction: column; gap: 12px; }
  .site-footer__legal-links { justify-content: flex-start; }
  .nav { display: none; }
}
@media (max-width: 640px) {
  :root { --section-py: 80px; --container-px: 24px; }
  .container { padding: 0 22px; }
  .h1 { font-size: 48px; }
  .roadmap { grid-template-columns: 1fr; }
  .deliverables { grid-template-columns: 1fr; }
  .site-footer__top { grid-template-columns: 1fr; }
  .site-header__inner { display: flex; height: 64px; }
  .brand__logo { width: 226px; }
  .site-header__cta { display: none; }
  .hero__meta { grid-template-columns: 1fr; gap: 16px; }
  .hero__cta { gap: 12px; }
  .hero__cta .btn { width: 100%; }
  .hero__card--metrics { grid-template-columns: 1fr 1fr; }
}