/* =============================================================
   Sensei AI Agent Landing — LIGHT theme
   Uses the design-system tokens; layers on landing-specific UI.
   Terminal, footer and CTA shell stay dark for contrast/drama.
   ============================================================= */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; max-width: 100%; overflow-x: clip; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  line-height: 1.4;
}
a { color: inherit; text-decoration: none; }
::selection { background: rgba(106, 53, 244, 0.18); color: var(--ink); }

.container {
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* ── Page chrome — light, with subtle purple aura ───────────── */

.page {
  position: relative;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 80% -10%, rgba(137, 69, 255, 0.10), transparent 38%),
    radial-gradient(ellipse at 0% 30%, rgba(47, 98, 240, 0.06), transparent 36%),
    radial-gradient(ellipse at 60% 60%, rgba(106, 53, 244, 0.05), transparent 40%),
    linear-gradient(180deg, #ffffff 0%, #f4f7fc 50%, #ffffff 100%);
}
.page::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(106, 53, 244, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(106, 53, 244, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none; z-index: 0;
}

/* ── Top nav (capsule) — light glass ────────────────────────── */

.nav {
  position: sticky; top: 14px; z-index: 80;
  margin: 14px auto 0;
  width: min(1280px, calc(100% - 28px));
  padding: 0 18px;
  height: 64px;
  display: flex; align-items: center; gap: 22px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(106, 53, 244, 0.12);
  box-shadow: 0 14px 34px rgba(106, 53, 244, 0.10);
}
.nav__brand {
  font-weight: 800; font-size: 1.45rem; letter-spacing: -0.03em;
  color: var(--ink);
  display: inline-flex; align-items: center;
}
.nav__brand span { color: var(--primary); }

/* Brand lockup — mark + wordmark, used in nav and footer */
.brand-lockup {
  display: inline-flex; align-items: center; gap: 8px;
  line-height: 1;
}
.brand-mark {
  flex-shrink: 0;
  filter: drop-shadow(0 4px 10px rgba(106, 53, 244, 0.25));
}
.brand-mark__sat {
  transform-origin: 16px 16px;
  animation: brandSpin 5.5s linear infinite;
}
@keyframes brandSpin { to { transform: rotate(360deg); } }
.brand-word {
  font-weight: 800;
  letter-spacing: -0.03em;
}
.brand-word__dot {
  color: var(--accent-blue);
  -webkit-text-fill-color: var(--accent-blue);
}
.nav__links { display: flex; gap: 22px; flex: 1; justify-content: center; }
.nav__links a {
  font-size: 13px; font-weight: 600; color: var(--muted);
  transition: color .2s;
}
.nav__links a:hover { color: var(--ink); }
.nav__links a.is-active {
  color: var(--primary);
}
.nav__pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(106,53,244,0.10); color: var(--primary-dark);
  border: 1px solid rgba(106,53,244,0.22);
  padding: 4px 10px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav__pill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--safe); box-shadow: 0 0 8px var(--safe);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.nav__cta {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(120deg, var(--primary), var(--primary-2));
  color: #fff; font-weight: 700; font-size: 13px;
  padding: 10px 18px; border-radius: 12px;
  box-shadow: 0 8px 22px rgba(106, 53, 244, 0.32);
  transition: transform .25s, box-shadow .25s;
}
.nav__cta:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(106, 53, 244, 0.45); }

/* ── Nav contact icons ──────────────────────────────────────────── */

.nav__contacts {
  display: flex; gap: 12px; align-items: center;
}
.nav__contact-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 8px;
  background: rgba(106, 53, 244, 0.08);
  color: var(--muted);
  transition: all .2s;
  text-decoration: none;
}
.nav__contact-icon:hover {
  background: rgba(106, 53, 244, 0.15);
  color: var(--primary);
}

/* ── Hero ──────────────────────────────────────────────────── */

.hero {
  padding: 80px 0 100px;
  position: relative;
  overflow: visible;
  isolation: isolate;
}
/* Vivid mesh-gradient backdrop — extends UP behind the nav so there's
   no white strip between the menu and the hero. */
.hero::before {
  content: '';
  position: absolute;
  top: -160px; left: 0; right: 0; bottom: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(137, 69, 255, 0.32), transparent 60%),
    radial-gradient(ellipse 50% 50% at 15% 30%, rgba(47, 98, 240, 0.22), transparent 60%),
    radial-gradient(ellipse 60% 60% at 50% 100%, rgba(183, 138, 255, 0.35), transparent 65%),
    radial-gradient(ellipse 40% 40% at 90% 80%, rgba(106, 53, 244, 0.28), transparent 60%),
    linear-gradient(160deg, #f1ebff 0%, #e6e1ff 40%, #eaf0ff 80%, #f4f7fc 100%);
}
/* Faint grid overlay on top of the mesh, fading at the edges */
.hero::after {
  content: '';
  position: absolute;
  top: -160px; left: 0; right: 0; bottom: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(106, 53, 244, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(106, 53, 244, 0.07) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 80%);
  pointer-events: none;
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 56px; align-items: center;
}
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--primary);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 22px;
}
.hero__eyebrow::before {
  content: ''; width: 28px; height: 2px;
  background: linear-gradient(120deg, var(--primary), var(--primary-2));
  border-radius: 2px;
}
.hero h1 {
  margin: 0 0 14px;
  font-size: clamp(2.5rem, 5.4vw, 4.6rem);
  font-weight: 800; line-height: 1.3;
  letter-spacing: -0.045em;
  color: var(--ink);
  text-wrap: balance;
}
.hero h1 .grad {
  display: block;
  background: linear-gradient(120deg, #6a35f4 0%, #8945ff 50%, #3158e9 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  padding: 0;
  width: 100%;
}
.hero__subline {
  margin: 0 0 22px;
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--muted);
}
.hero__lead {
  margin: 0 0 28px;
  max-width: 540px;
  font-size: 1.12rem; line-height: 1.65;
  color: var(--muted);
}
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; cursor: pointer; font: inherit; font-family: var(--font-sans);
  border-radius: 14px; padding: 14px 24px;
  font-weight: 700; font-size: 0.95rem;
  transition: all 0.3s ease;
}
.btn--primary {
  color: #fff;
  background: linear-gradient(120deg, var(--primary), var(--primary-2));
  box-shadow: 0 12px 22px rgba(106, 53, 244, 0.32);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(106, 53, 244, 0.45); }
.btn--ghost {
  border: 1px solid var(--border);
  color: var(--primary);
  background: transparent;
}
.btn--ghost:hover { background: rgba(106,53,244,0.04); border-color: var(--primary); }

.hero__metrics {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; margin-top: 36px;
}
.metric {
  border-radius: 14px; padding: 14px 14px 12px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 20px rgba(106, 53, 244, 0.12);
}
.metric__value {
  font-size: 18px; font-weight: 800;
  color: var(--ink); line-height: 1.1;
  letter-spacing: -0.01em;
}
.metric__value .accent { color: var(--primary); }
.metric__label {
  font-size: 11px; color: var(--faint);
  margin-top: 6px; line-height: 1.4;
}

/* ── Agent terminal — STAYS DARK (it's a code/console surface) ── */

.terminal {
  position: relative;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(20, 16, 70, 0.96), rgba(8, 7, 38, 0.98));
  border: 1px solid rgba(106, 53, 244, 0.28);
  box-shadow:
    0 30px 80px rgba(15, 20, 55, 0.32),
    0 0 0 1px rgba(106, 53, 244, 0.05);
  overflow: hidden;
}
.terminal__chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
}
.terminal__dots { display: flex; gap: 6px; }
.terminal__dots span {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,0.12);
}
.terminal__title {
  flex: 1;
  font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,0.55);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.terminal__pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700;
  color: #58e3a3;
  background: rgba(88, 227, 163, 0.12);
  border: 1px solid rgba(88, 227, 163, 0.28);
  padding: 4px 10px; border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.terminal__pill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #58e3a3;
  box-shadow: 0 0 8px #58e3a3;
  animation: pulse 1.8s ease-in-out infinite;
}
.terminal__body {
  padding: 22px 22px 24px;
  display: grid; gap: 14px;
  font-size: 13.5px;
  line-height: 1.55;
  /* Fixed height — keeps the window stable across scenarios and animations */
  height: 470px;
  overflow-y: auto;
  scroll-behavior: smooth;
  grid-auto-rows: min-content;
  align-content: start;
}
.terminal__body::-webkit-scrollbar { width: 4px; }
.terminal__body::-webkit-scrollbar-track { background: transparent; }
.terminal__body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }
.terminal__body::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.28); }

/* Role strip — shows which Sensei agent is active + progress dots */
.terminal__role {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(106, 53, 244, 0.06);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.85);
}
.terminal__role svg { flex: 0 0 auto; }
.terminal__role > span:nth-child(2) { flex: 1; }
.terminal__progress {
  display: inline-flex; gap: 5px; align-items: center;
}
.tp__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.18);
  transition: background 0.4s ease, width 0.4s ease;
}
.tp__dot--on {
  background: linear-gradient(120deg, #8945ff, #3158e9);
  width: 18px; border-radius: 4px;
}

.msg { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; }
.msg__avatar {
  width: 32px; height: 32px; border-radius: 10px;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 800;
  color: #fff;
}
.msg__avatar--user {
  background: linear-gradient(140deg, #3b4a8e, #1d2554);
  color: #c4cfff;
}
.msg__avatar--sensei {
  background: linear-gradient(140deg, var(--primary), var(--primary-2));
  box-shadow: 0 6px 16px rgba(106, 53, 244, 0.5);
}
.msg__avatar--system {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.5);
}
.msg__body { color: rgba(232,232,255,0.9); }
.msg__who {
  font-size: 11px; font-weight: 700;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.04em; text-transform: uppercase;
  margin-bottom: 4px;
}
.msg__body code, .terminal code, .pcode {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
  font-size: 0.92em;
  background: rgba(106, 53, 244, 0.18);
  border: 1px solid rgba(106, 53, 244, 0.32);
  color: #d2bcff;
  padding: 1px 6px; border-radius: 4px;
}
.pcode--typing {
  background: rgba(106, 53, 244, 0.10);
  border-color: rgba(106, 53, 244, 0.22);
}
.pcode--done {
  animation: codeFrame 0.6s var(--ease-out-expo);
}
@keyframes codeFrame {
  0%   { background: rgba(106, 53, 244, 0.10); border-color: rgba(106, 53, 244, 0.22); }
  40%  { background: rgba(183, 138, 255, 0.32); border-color: rgba(183, 138, 255, 0.7); transform: translateY(-1px); }
  100% { background: rgba(106, 53, 244, 0.18); border-color: rgba(106, 53, 244, 0.32); transform: translateY(0); }
}

/* Blinking caret while the engineer is typing */
.msg__text--typing::after {
  content: '';
  display: inline-block;
  width: 7px; height: 1.05em;
  background: var(--primary-light);
  vertical-align: -2px;
  margin-left: 2px;
  animation: caret 1s steps(2) infinite;
  border-radius: 1px;
}
@keyframes caret { 50% { opacity: 0; } }

/* Each new message slides in from below */
.msg--enter { animation: msgIn 0.45s var(--ease-out-expo); }
@keyframes msgIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.task-card {
  margin-top: 6px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: grid; gap: 8px;
}
.task-card--in { animation: cardIn 0.55s var(--ease-out-expo); }
@keyframes cardIn {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.task-card__row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px;
}
.task-card__row span:first-child { color: rgba(255,255,255,0.5); }
.task-card__row span:last-child { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.task-card__row .ok { color: #58e3a3; }
.task-card__row .bad { color: #ff7a7a; }
.task-card__row .accent-v { color: #b78aff; }

/* Bullet-list variant of the result card */
.task-card__bullets {
  display: grid; gap: 7px;
  margin-top: 2px;
}
.task-card__bullet {
  display: grid; grid-template-columns: 14px 1fr; gap: 8px;
  align-items: start;
  font-size: 12.5px;
  color: rgba(255,255,255,0.82);
  line-height: 1.5;
}
.task-card__dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: linear-gradient(120deg, #8945ff, #3158e9);
  margin-top: 7px;
}
.task-card__note {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px dashed rgba(255,255,255,0.10);
  font-size: 12px;
  color: rgba(255,255,255,0.62);
  font-style: italic;
  line-height: 1.5;
}

.thinking {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: rgba(255,255,255,0.5);
  font-style: italic;
}
.thinking .dots { display: inline-flex; gap: 3px; }
.thinking .dots span {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--primary-light);
  animation: bounce 1.2s ease-in-out infinite;
}
.thinking .dots span:nth-child(2) { animation-delay: 0.2s; }
.thinking .dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.checks { display: grid; gap: 6px; margin-top: 6px; }
.check {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: rgba(255,255,255,0.75);
}
.check b { color: #fff; font-weight: 600; }
.check--in {
  opacity: 0; transform: translateX(-6px);
  animation: checkIn 0.4s var(--ease-out-expo) forwards;
}
@keyframes checkIn {
  to { opacity: 1; transform: translateX(0); }
}
.check__mark {
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(88, 227, 163, 0.18);
  color: #58e3a3;
  display: grid; place-items: center;
  font-size: 10px; flex-shrink: 0;
}

/* ── Logos marquee — light strip, seamless infinite scroll ───── */

.stats {
  position: relative; z-index: 1;
  padding: 36px 0 32px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: #fff;
}
.stats__caption {
  text-align: center;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 22px;
}
/* Static viewport — owns the mask + overflow so the fade stays put */
.stats__viewport {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
/* The track holds N identical sets side by side, and is the only element
   that translates. translate3d hardware-accelerates the loop. */
.stats__track {
  display: flex;
  width: max-content;
  animation: marquee 28s linear infinite;
  will-change: transform;
}
/* Each set: gap=56px between items AND padding-right=56px so the trailing
   space at the seam matches the internal spacing — invisible wrap. */
.stats__set {
  display: flex;
  gap: 56px;
  padding-right: 56px;
  flex-shrink: 0;
  align-items: center;
}
.logo {
  flex-shrink: 0;
  width: 160px; height: 56px;
  display: grid; place-items: center;
  opacity: 0.75;
  transition: opacity 0.25s ease;
}
.logo:hover { opacity: 1; }
.logo img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  display: block;
}
.logo--fallback {
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-transform: uppercase;
}
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-25%, 0, 0); }
}

/* ── Section frame ──────────────────────────────────────────── */

/* Compensate for sticky nav (top:14px + height:64px → bottom at 78px)
   when jumping to anchor links. 90px = nav bottom + 12px breathing. */
#xforms, #what-is, #tracks, #how-it-works,
#case-studies, #team, #testimonials, #form {
  scroll-margin-top: 90px;
}
/* #faq is a plain div (no section padding-top), so needs extra offset
   to match the visual heading distance of adjacent .section blocks. */
#faq {
  scroll-margin-top: 130px;
}

.section {
  position: relative; z-index: 1;
  padding: 72px 0 0;
}
.section--alt { background: var(--bg); }

.section__head { text-align: center; max-width: 960px; margin: 0 auto 56px; }
.section__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--primary);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 18px;
}
.section__eyebrow::before {
  content: ''; width: 24px; height: 2px;
  background: linear-gradient(120deg, var(--primary), var(--primary-2));
  border-radius: 2px;
}
.section h2 {
  margin: 0 0 16px;
  font-size: clamp(2rem, 4.2vw, 3.6rem);
  font-weight: 800; line-height: 1.04;
  letter-spacing: -0.04em;
  color: var(--ink);
  text-wrap: balance;
}
.section h2 em {
  font-style: normal;
  background: linear-gradient(120deg, #6a35f4 0%, #8945ff 50%, #3158e9 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.section__sub {
  margin: 0;
  font-size: 1.08rem;
  color: var(--muted);
  line-height: 1.7;
}

/* Anatomy diagram: heading flows directly on the page — no backdrop. */
#anatomy { padding-top: 48px; }
#anatomy .section__head {
  position: relative;
  isolation: isolate;
}

/* ── Perimeter anatomy ──────────────────────────────────────── */

.anatomy {
  position: relative;
  height: 540px;
  max-width: 920px; margin: 0 auto;
}
/* Fixed 720×720 coordinate space — scaled as a unit on mobile so
   rings and orbit node positions always stay in sync. */
.anatomy__diagram {
  position: absolute;
  width: 720px; height: 720px;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
.anatomy__rings {
  position: absolute; inset: 0;
  display: grid; place-items: center;
}
.anatomy__ring {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(106, 53, 244, 0.22);
  animation: spin 60s linear infinite;
  /* Fade each ring's outline at the top and bottom so the orbits melt
     into the section instead of dropping in with hard ends. */
  mask-image: linear-gradient(to bottom,
                              transparent 0%,
                              #000 28%,
                              #000 72%,
                              transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom,
                                      transparent 0%,
                                      #000 28%,
                                      #000 72%,
                                      transparent 100%);
}
.anatomy__ring--inner   { width: 280px; height: 280px; border-color: rgba(106, 53, 244, 0.35); }
.anatomy__ring--mid     { width: 440px; height: 440px; animation-duration: 90s; animation-direction: reverse; }
.anatomy__ring--outer   { width: 600px; height: 600px; animation-duration: 140s; }
.anatomy__ring--perimeter {
  width: 720px; height: 720px;
  border: 1px solid rgba(106, 53, 244, 0.32);
  background:
    radial-gradient(circle at center, rgba(106, 53, 244, 0.05), transparent 70%);
  animation: none;
}
@keyframes spin { to { transform: rotate(360deg); } }

.anatomy__core {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 200px; height: 200px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,0.85), transparent 24%),
    radial-gradient(circle at 70% 75%, rgba(206, 159, 255, 0.95), transparent 38%),
    radial-gradient(circle at 78% 22%, rgba(183, 138, 255, 0.95), transparent 50%),
    linear-gradient(135deg, #2a0e7d 0%, #6a35f4 50%, #b78aff 100%);
  box-shadow:
    0 0 80px rgba(106, 53, 244, 0.4),
    0 0 160px rgba(137, 69, 255, 0.25),
    inset -20px -30px 60px rgba(0,0,0,0.35),
    inset 25px 30px 50px rgba(255,255,255,0.18);
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 30px;
  letter-spacing: -0.03em;
}
.anatomy__core span { text-shadow: 0 2px 8px rgba(0,0,0,0.3); }

.anatomy__node {
  position: absolute;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 12px; font-weight: 700;
  color: var(--ink);
  display: flex; align-items: center; gap: 8px;
  box-shadow: 0 8px 24px rgba(106, 53, 244, 0.12);
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
.anatomy__node::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--safe); box-shadow: 0 0 6px var(--safe);
}
/* Brand variant — replaces the status dot with a coloured icon tile */
.anatomy__node--brand::before { display: none; }
.anatomy__node-icon {
  width: 22px; height: 22px;
  border-radius: 6px;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 800;
  letter-spacing: -0.02em;
  font-family: var(--font-sans);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.4) inset,
    0 4px 10px rgba(15, 20, 55, 0.18);
  flex-shrink: 0;
}
.anatomy__node-icon svg { display: block; }
.anatomy__perimeter-label {
  position: absolute;
  /* Desktop: right edge of the 720×720 wrapper, vertically centred */
  top: 50%; right: -6px;
  transform: translateY(-50%);
  background: #fff;
  border: 1px solid rgba(106, 53, 244, 0.25);
  padding: 6px 12px; border-radius: 999px;
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--primary);
  z-index: 10;
  white-space: nowrap;
}

/* Orbiting node groups — each orbit rotates as a unit and the nodes inside
   counter-rotate so labels stay upright. */
.anatomy__orbit {
  position: absolute; inset: 0;
  pointer-events: none;
  transform-origin: center;
  will-change: transform;
}
.anatomy__orbit .anatomy__node { pointer-events: auto; }
.anatomy__orbit--inner { animation: anatomy-orbit-cw  180s linear infinite; }
.anatomy__orbit--outer { animation: anatomy-orbit-ccw 260s linear infinite; }
.anatomy__orbit--inner .anatomy__node { animation: anatomy-node-ccw 180s linear infinite; }
.anatomy__orbit--outer .anatomy__node { animation: anatomy-node-cw  260s linear infinite; }

@keyframes anatomy-orbit-cw  { to { transform: rotate(360deg);  } }
@keyframes anatomy-orbit-ccw { to { transform: rotate(-360deg); } }
@keyframes anatomy-node-cw   {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes anatomy-node-ccw  {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(-360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .anatomy__orbit, .anatomy__orbit .anatomy__node { animation: none; }
}

/* ── Transformations grid ──────────────────────────────────── */

/* ── Transformations: 24px-gap column that collapses into a peek-stack.
   Every card is sticky at the SAME `top` (110px), so when they all hit
   their sticky position they end up at one place. `transform: translateY`
   gives each a visual peek of 32px below the previous. DOM order matters:
   later cards render on top by default, which is what we want — every
   earlier card peeks ABOVE the next one's top edge.

   Because all cards share the same sticky top, they ALL detach at the
   exact same scroll position (when section bottom rises past 110 + cardH).
   Stack leaves as a single block — no "leaping" out of sequence. */

.xforms-section {
  position: relative;
  z-index: 1;
  padding: 100px 0 48px;
}

#xforms .section__head {
  position: sticky;
  top: 110px;
  z-index: 5;
  background: transparent;
  margin-bottom: 32px;
  /* No transform override here — JS applies translateY when the stack
     collapses so the heading un-sticks together with the cards. */
}
#xforms .section__head {
  max-width: 1040px;
}
#xforms .section__head h2 {
  text-wrap: pretty;
}
/* Wrapper around heading + stack so the heading un-sticks at the same
   point as the cards (its containing block ends with the stack). */
.xforms-wrap {
  display: block;
}

.xforms-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;                       /* normal column rhythm before collapse */
  width: min(700px, 100%);
  margin: 0 auto;
}

.xform {
  position: sticky;
  /* Each card sticks at its own offset below the sticky section heading.
     --xforms-stack-top is set by JS based on the heading's measured height
     (falls back to a reasonable default for SSR/initial paint). */
  top: calc(var(--xforms-stack-top, 360px) + var(--i, 0) * 32px);
  border-radius: 22px;
  padding: 32px 32px 28px;
  background:
    radial-gradient(circle at 100% 0%, rgba(106, 53, 244, 0.08), transparent 55%),
    linear-gradient(160deg, #ffffff 0%, #fbfaff 100%);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.4s var(--ease-out-expo);
}
.xform:hover {
  box-shadow: 0 24px 56px rgba(106, 53, 244, 0.18);
}
.xform__head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.xform__num {
  flex-shrink: 0; width: 38px; height: 38px;
  border-radius: 11px;
  background: linear-gradient(140deg, var(--primary), var(--primary-2));
  display: grid; place-items: center;
  font-size: 14px; font-weight: 800; color: #fff;
}
.xform__title {
  margin: 0; font-size: 1.32rem; line-height: 1.2;
  letter-spacing: -0.02em; color: var(--ink); font-weight: 700;
}
.xform__desc {
  margin: 0 0 22px;
  font-size: 0.95rem; line-height: 1.6;
  color: var(--muted);
}
.kpi {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 16px;
  padding: 16px 18px; border-radius: 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.kpi__part { display: grid; gap: 4px; }
.kpi__part.right { justify-items: end; text-align: right; }
.kpi__label {
  font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--faint);
}
.kpi__before {
  font-size: clamp(1.4rem, 2.6vw, 2.1rem); font-weight: 800;
  color: var(--faint);
  text-decoration: line-through;
  text-decoration-color: rgba(106, 53, 244, 0.5);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.kpi__after {
  font-size: clamp(1.6rem, 3vw, 2.6rem); font-weight: 800;
  line-height: 1; letter-spacing: -0.02em;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.kpi__arrow {
  color: var(--primary); font-size: 36px; font-weight: 800;
  line-height: 1;
}

/* ── Custom task card — 5th card for user input ─── */

.xform--custom {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.xform__textarea {
  flex: 1;
  min-height: 100px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  resize: vertical;
  transition: border-color .2s var(--ease-out-expo);
}
.xform__textarea:focus {
  outline: none;
  border-color: rgba(106, 53, 244, 0.5);
  box-shadow: 0 0 0 3px rgba(106, 53, 244, 0.08);
}
.xform__submit {
  align-self: flex-start;
  padding: 12px 24px;
  border-radius: 10px;
  background: linear-gradient(120deg, var(--primary), var(--primary-2));
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  border: none;
  cursor: pointer;
  transition: all .3s var(--ease-out-expo);
}
.xform__submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(106, 53, 244, 0.3);
}
.xform__submit:active {
  transform: translateY(0);
}

/* ── Transformations section CTA ──────────────────────────────── */

.xforms-cta {
  margin-top: 32px;
  text-align: center;
}
.xforms-cta__btn {
  display: inline-flex;
  align-items: center;
  padding: 14px 36px;
  border-radius: 12px;
  background: linear-gradient(120deg, var(--primary), var(--primary-2));
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: all .3s var(--ease-out-expo);
}
.xforms-cta__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(106, 53, 244, 0.28);
}
.xforms-cta__btn:active {
  transform: translateY(0);
}

/* ── Tracks section CTA ──────────────────────────────────────── */

.tracks-cta {
  margin-top: 40px;
  text-align: center;
}
.tracks-cta__btn {
  display: inline-flex;
  align-items: center;
  padding: 14px 36px;
  border-radius: 12px;
  background: linear-gradient(120deg, var(--primary), var(--primary-2));
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: all .3s var(--ease-out-expo);
}
.tracks-cta__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(106, 53, 244, 0.28);
}
.tracks-cta__btn:active {
  transform: translateY(0);
}

/* ── Tracks — clean list of automation areas ───────────────── */

.track-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 960px;
  background: #fff;
  border-radius: 20px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.track-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 220px) minmax(0, 1fr);
  align-items: baseline;
  gap: 16px;
  padding: 24px 28px;
  border-bottom: 1px solid var(--border);
  transition: background .25s ease;
}
.track-row::before { display: none; }
.track-row:hover { background: rgba(106, 53, 244, 0.03); }
.track-row__num {
  font-size: 13px;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.track-row__title {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.2;
}
.track-row__desc {
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--muted);
}

@media (max-width: 760px) {
  .track-row {
    grid-template-columns: 36px 1fr;
    gap: 8px 10px;
    padding: 20px 16px 20px 20px;
    transition: background .3s ease;
  }
  .track-row__num { grid-row: 1 / span 2; align-self: start; }
  .track-row__title { grid-column: 2; }
  .track-row__desc { grid-column: 2; }
  .track-row.is-active { background: rgba(106, 53, 244, 0.05); }
}

/* ── How it works — sticky scroll section ───────────────────── */

/* Outer section: padding-bottom set via JS to create scroll budget */
.flow-outer-section {
  padding: 0;
}

/* Sticky frame: becomes fixed while user scrolls through the budget */
.flow-sticky-frame {
  background: transparent;
  padding: 80px 0 72px;
}
.flow-sticky-frame.is-stuck {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  box-shadow: 0 2px 24px rgba(106, 53, 244, 0.06);
}

/* Security blocks that sit below the flow frame */
.flow-security {
  background: transparent;
  padding: 0;
  z-index: 49; /* just below the flow frame (z-index 50) */
}

/* Smooth lighting transition on cards */
.flow__step .flow__body,
.flow__step .flow__dot {
  transition: opacity 0.4s ease, box-shadow 0.4s ease,
              background 0.4s ease, border-color 0.4s ease,
              transform 0.3s ease;
}

.flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
/* Static rail behind everything — pale lilac */
.flow::before {
  content: '';
  position: absolute;
  top: 30px; left: 5%; right: 5%;
  height: 2px;
  background: rgba(106, 53, 244, 0.16);
  z-index: 0;
  border-radius: 2px;
}
/* Bright fill that grows as steps light up on scroll */
.flow__progress {
  position: absolute;
  top: 30px; left: 5%;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--accent-blue), var(--primary-2));
  z-index: 0;
  border-radius: 2px;
  width: 0%;
  max-width: 90%; /* the rail itself is left:5% right:5% = 90% wide */
  transition: width 0.6s var(--ease-out-expo);
  box-shadow: 0 0 12px rgba(106, 53, 244, 0.4);
}
.flow__step {
  position: relative; z-index: 1;
  cursor: default;
}
.flow__dot {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(106, 53, 244, 0.22);
  display: grid; place-items: center;
  margin: 0 auto 18px;
  font-size: 16px; font-weight: 800; color: var(--faint);
  font-variant-numeric: tabular-nums;
  transition: all 0.45s var(--ease-out-expo);
  box-shadow: 0 4px 12px rgba(106, 53, 244, 0.06);
}
.flow__step.lit .flow__dot {
  background: linear-gradient(140deg, var(--primary), var(--primary-2));
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 8px 22px rgba(106, 53, 244, 0.34);
}
.flow__step.active .flow__dot {
  transform: scale(1.08);
  box-shadow: 0 0 0 6px rgba(106, 53, 244, 0.12),
              0 0 28px rgba(106, 53, 244, 0.42); /* glow, no downward offset */
}
.flow__body {
  position: relative;
  z-index: 1; /* always above the dot's box-shadow */
  padding: 20px 18px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  min-height: 220px;
  transition: all 0.45s var(--ease-out-expo);
  opacity: 0.55;
}
.flow__step.lit .flow__body {
  opacity: 1;
}
.flow__step.active .flow__body {
  border-color: rgba(106, 53, 244, 0.32);
  box-shadow: 0 18px 42px rgba(106, 53, 244, 0.16);
}
.flow__title {
  margin: 0 0 8px;
  font-size: 1.02rem; font-weight: 700;
  color: var(--ink); line-height: 1.3;
}
.flow__desc {
  margin: 0 0 12px;
  font-size: 0.86rem; line-height: 1.55;
  color: var(--muted);
}
.flow__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.flow__chip {
  display: inline-flex;
  font-size: 10px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(106, 53, 244, 0.08);
  color: var(--primary);
}
.flow__panel {
  margin-top: 12px;
  padding: 12px 14px; border-radius: 10px;
  background: rgba(15, 118, 110, 0.06);
  border: 1px solid rgba(15, 118, 110, 0.22);
  font-size: 11.5px; line-height: 1.5;
  color: var(--safe);
}

/* ── Cases — grid of 5 case summary cards + modal ──────────── */

.case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.case-card {
  /* Reset default <button> chrome — these are big card buttons */
  all: unset;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px 28px 26px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0%, rgba(106, 53, 244, 0.10), transparent 55%),
    linear-gradient(160deg, #ffffff 0%, #fbfaff 100%);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  text-align: left;
  transition: transform 0.32s var(--ease-out-expo),
              box-shadow 0.32s var(--ease-out-expo),
              border-color 0.32s var(--ease-out-expo);
  isolation: isolate;
}
.case-card:hover,
.case-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(106, 53, 244, 0.32);
  box-shadow: 0 22px 52px rgba(106, 53, 244, 0.16);
  outline: none;
}
.case-card:active {
  transform: scale(0.974);
  border-color: rgba(106, 53, 244, 0.45);
  box-shadow: 0 6px 20px rgba(106, 53, 244, 0.18);
  transition: transform 0.08s ease, border-color 0.08s ease, box-shadow 0.08s ease;
}
.case-card:hover .case-card__bignum,
.case-card:focus-visible .case-card__bignum {
  transform: translate(8%, -6%) scale(1.04);
  opacity: 0.18;
}
.case-card:hover .case-card__more svg,
.case-card:focus-visible .case-card__more svg {
  transform: translateX(3px);
}

.case-card__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  position: relative; z-index: 2;
}
.case-card__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--primary);
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.14em;
}
.case-card__eyebrow::before {
  content: ''; width: 22px; height: 2px;
  background: linear-gradient(120deg, var(--primary), var(--primary-2));
  border-radius: 2px;
}
.case-card__role {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0;
  text-align: right;
  max-width: 50%;
  line-height: 1.3;
}
.case-card__title {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--ink);
  position: relative; z-index: 2;
  text-wrap: balance;
}
.case-card__short {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--muted);
  position: relative; z-index: 2;
  text-wrap: pretty;
}
.case-card__more {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700;
  color: var(--primary);
  letter-spacing: -0.005em;
  position: relative; z-index: 2;
}
.case-card__more svg { transition: transform 0.25s var(--ease-out-expo); }
/* Big translucent watermark numeral */
.case-card__bignum {
  position: absolute;
  right: -20px; bottom: -56px;
  font-family: var(--font-sans);
  font-size: 220px;
  font-weight: 900;
  line-height: 1;
  color: var(--primary);
  opacity: 0.08;
  z-index: 1;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.06em;
  transition: transform 0.4s var(--ease-out-expo), opacity 0.4s ease;
}

/* ── Case modal overlay ────────────────────────────────────── */

body.modal-open {
  /* scroll locked via JS; backdrop-filter on .case-modal blurs the page */
}

.case-modal {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(15, 20, 55, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: grid; place-items: start center;
  padding: 28px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: case-modal-fade 0.25s ease;
}
@keyframes case-modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.case-modal__sheet {
  width: min(1280px, calc(100% - 40px));
  background: linear-gradient(160deg, #ffffff 0%, #fbfaff 100%);
  border: 1px solid var(--border);
  border-radius: 26px;
  box-shadow:
    0 40px 100px rgba(15, 20, 55, 0.34),
    0 0 0 1px rgba(106, 53, 244, 0.06);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 80px);
  animation: case-modal-pop 0.36s var(--ease-out-expo);
  overflow: hidden;
}

/* Sticky header bar — title + close button */
.case-modal__header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 24px 22px 44px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: linear-gradient(180deg, #ffffff 0%, #f9f8ff 100%);
  position: sticky; top: 0; z-index: 2;
}
.case-modal__header-meta {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.case-modal__header .case-detail__title {
  font-size: clamp(1.3rem, 2vw, 1.85rem);
  margin: 0;
}
.case-modal__header .case-detail__eyebrow { margin: 0; }

/* Body: left sidebar + right scrollable */
.case-modal__body {
  flex: 1;
  display: grid;
  grid-template-columns: 380px 1fr;
  overflow: hidden;
  min-height: 0;
}

/* Left sidebar: role + short + insight + context */
.case-modal__left {
  padding: 28px 24px 28px 44px;
  display: flex; flex-direction: column; gap: 16px;
  border-right: 1px solid var(--border);
  background: linear-gradient(170deg, #ffffff 0%, #f9f8ff 100%);
  overflow-y: auto;
  scrollbar-width: none;
}
.case-modal__left::-webkit-scrollbar { display: none; }

/* Right panel: clips content, positions custom scrollbar */
.case-modal__right {
  position: relative;
  overflow: hidden;
}

/* Scrollable inner container — native scrollbar hidden */
.case-modal__right-scroll {
  overflow-y: auto;
  height: 100%;
  padding: 40px 52px 40px 36px; /* extra right padding for scrollbar */
  display: flex; flex-direction: column; gap: 14px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.case-modal__right-scroll::-webkit-scrollbar { display: none; }

/* Custom scrollbar track */
.case-modal__scroll-track {
  position: absolute;
  right: 8px;
  top: 16px;
  bottom: 16px;
  width: 4px;
  background: rgba(106, 53, 244, 0.08);
  border-radius: 2px;
  opacity: 0;
  transition: opacity .2s;
}
.case-modal__right:hover .case-modal__scroll-track { opacity: 1; }

/* Custom scrollbar thumb */
.case-modal__scroll-thumb {
  position: absolute;
  left: 0; right: 0;
  background: rgba(106, 53, 244, 0.35);
  border-radius: 2px;
  cursor: pointer;
  transition: background .2s;
}
.case-modal__scroll-thumb:hover { background: rgba(106, 53, 244, 0.6); }
@keyframes case-modal-pop {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.case-modal__close {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink);
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.case-modal__close:hover {
  transform: rotate(90deg);
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* ── Case detail layout ────────────────────────────────────── */

.case-detail__head { display: flex; flex-direction: column; gap: 10px; }
.case-detail__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--primary);
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.14em;
  width: max-content;
}
.case-detail__eyebrow::before {
  content: ''; width: 24px; height: 2px;
  background: linear-gradient(120deg, var(--primary), var(--primary-2));
  border-radius: 2px;
}
.case-detail__title {
  margin: 0;
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
}
.case-detail__role {
  margin: 0;
  font-size: 0.95rem; color: var(--muted);
}
.case-detail__role b {
  color: var(--accent-blue, var(--primary));
  font-weight: 700;
}
.case-detail__short {
  margin: 4px 0 0;
  font-size: 1.02rem; line-height: 1.55;
  color: var(--ink);
  max-width: 60ch;
  text-wrap: pretty;
}

/* Mini flow: Source → Equipment → AI → Engineer */
.case-flow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 22px 24px;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, var(--surface-2, #f3f4ff) 100%);
  border: 1px solid var(--border);
  flex-wrap: wrap;
}
.case-flow__node {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center;
  flex: 1 1 auto;
  min-width: 96px;
}
.case-flow__dot {
  width: 52px; height: 52px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--border);
  display: grid; place-items: center;
  box-shadow: var(--shadow-card);
  color: var(--primary);
}
.case-flow__inner {
  width: 12px; height: 12px;
  border-radius: 4px;
  background: linear-gradient(140deg, var(--primary), var(--primary-2));
}
.case-flow__node--active .case-flow__dot {
  background: linear-gradient(140deg, var(--primary), var(--primary-2));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(106, 53, 244, 0.32);
  width: 62px; height: 62px;
  border-radius: 19px;
}
.case-flow__label {
  margin: 6px 0 0;
  font-size: 13px; font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.case-flow__sub {
  margin: 0;
  font-size: 11px;
  color: var(--muted);
}
.case-flow__arrow {
  color: var(--faint, #a8afca);
  font-size: 22px; font-weight: 800;
  flex: 0 0 auto;
}
.case-flow__arrow--sm { font-size: 18px; color: var(--primary); opacity: 0.6; }

.case-detail__insight {
  padding: 14px 18px;
  border-radius: 14px;
  background:
    linear-gradient(110deg, rgba(106, 53, 244, 0.10), rgba(49, 88, 233, 0.08));
  border: 1px solid rgba(106, 53, 244, 0.18);
  color: var(--ink);
  font-weight: 600; font-size: 0.98rem;
  display: flex; align-items: center; gap: 12px;
}
.case-detail__spark {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 7px;
  background: linear-gradient(140deg, var(--primary), var(--primary-2));
  position: relative;
  box-shadow: 0 6px 14px rgba(106, 53, 244, 0.28);
}
.case-detail__spark::before,
.case-detail__spark::after {
  content: ''; position: absolute;
  background: #fff;
  border-radius: 1px;
}
.case-detail__spark::before {
  width: 2px; height: 10px; left: 10px; top: 6px;
}
.case-detail__spark::after {
  width: 10px; height: 2px; left: 6px; top: 10px;
}

/* Context panel */
.case-detail__context {
  border-radius: 16px;
  border: 1px solid var(--border);
  background: #fff;
  padding: 18px 22px;
  display: flex; flex-direction: column; gap: 8px;
}
.case-detail__context-label {
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--primary);
}
.case-detail__context p {
  margin: 0;
  font-size: 0.98rem; line-height: 1.55;
  color: var(--ink);
}

/* Two-column problem / AI grid */
.case-detail__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.case-block {
  border-radius: 18px;
  padding: 22px 22px 20px;
  border: 1px solid var(--border);
  background: #fff;
  display: flex; flex-direction: column; gap: 14px;
}
.case-block--problem {
  background: linear-gradient(155deg, #fff7f8 0%, #fff 60%);
  border-color: rgba(235, 61, 73, 0.22);
}
.case-block--ai {
  background: linear-gradient(155deg, #f4f6ff 0%, #fff 60%);
  border-color: rgba(106, 53, 244, 0.24);
}
.case-block__title {
  margin: 0;
  display: flex; align-items: center; gap: 12px;
  font-size: 1.1rem; font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.case-block--problem .case-block__title { color: #c0273a; }
.case-block--ai      .case-block__title { color: var(--primary); }
.case-block__num {
  flex-shrink: 0;
  display: inline-grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 9px;
  font-size: 13px; font-weight: 800;
  color: #fff;
}
.case-block--problem .case-block__num {
  background: linear-gradient(140deg, #ef5063, #c0273a);
}
.case-block--ai .case-block__num {
  background: linear-gradient(140deg, var(--primary), var(--primary-2));
}
.case-block ul {
  margin: 0; padding: 0 0 0 22px;
  display: flex; flex-direction: column; gap: 8px;
}
.case-block li {
  font-size: 0.95rem; line-height: 1.5;
  color: var(--ink);
}
/* Checklist variant — green ticks instead of bullets */
.case-block__check {
  list-style: none;
  padding: 0 !important;
}
.case-block__check li {
  position: relative;
  padding-left: 30px;
}
.case-block__check li::before {
  content: '';
  position: absolute;
  left: 0; top: 4px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--safe, #11a271);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}
.case-block__check li::after {
  content: '';
  position: absolute;
  left: 5px; top: 8px;
  width: 8px; height: 4px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

/* Generic numbered section in modal */
.case-section {
  display: flex; flex-direction: column; gap: 14px;
  padding: 22px 24px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: #fff;
}
.case-section__title {
  margin: 0;
  display: flex; align-items: center; gap: 12px;
  font-size: 1.1rem; font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--primary);
}
.case-section__num {
  flex-shrink: 0;
  display: inline-grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 9px;
  background: linear-gradient(140deg, var(--primary), var(--primary-2));
  color: #fff;
  font-size: 13px; font-weight: 800;
}

/* Integrations chain — small chips with arrows between */
.case-chain {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px;
}
.case-chain__node {
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  font-size: 13.5px; font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  box-shadow: var(--shadow-card);
}

/* Results — 3 metric cards */
.case-results {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.case-metric {
  padding: 18px 18px 16px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0%, rgba(106, 53, 244, 0.10), transparent 60%),
    linear-gradient(160deg, #ffffff 0%, #fbfaff 100%);
  border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 4px;
  transition: transform 0.25s var(--ease-out-expo), box-shadow 0.25s var(--ease-out-expo);
}
.case-metric:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(106, 53, 244, 0.14);
}
.case-metric__value {
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--primary);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.case-metric__label {
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--muted);
}

/* Monetary savings block */
.case-saving {
  padding: 20px 24px;
  border-radius: 18px;
  border: 1px solid rgba(17, 162, 113, 0.30);
  background:
    radial-gradient(circle at 100% 0%, rgba(17, 162, 113, 0.10), transparent 55%),
    linear-gradient(155deg, #f0fdf8 0%, #ffffff 65%);
  display: flex; flex-direction: column; gap: 10px;
}
.case-saving__head {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: #0d9060;
}
.case-saving__formula {
  margin: 0;
  font-size: 0.9rem; line-height: 1.5;
  color: var(--muted);
}
.case-saving__bottom {
  display: flex; align-items: baseline; gap: 14px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.case-saving__label {
  font-size: 0.82rem; font-weight: 600;
  color: #0d9060;
  white-space: nowrap;
}
.case-saving__result {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #0d9060;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Left sidebar CTA */
.case-cta {
  margin-top: auto;
  padding-top: 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.case-cta__label {
  margin: 0;
  font-size: 0.82rem; line-height: 1.45;
  color: var(--muted);
}
.case-cta__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 20px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  font-size: 0.95rem; font-weight: 700;
  letter-spacing: -0.01em;
  border: none; cursor: pointer;
  box-shadow: 0 8px 22px rgba(106, 53, 244, 0.32);
  transition: transform 0.2s var(--ease-out-expo), box-shadow 0.2s ease, opacity 0.2s;
  width: 100%;
}
.case-cta__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(106, 53, 244, 0.42);
}
.case-cta__btn:active { transform: translateY(0); opacity: 0.9; }

/* Closing quote */
.case-section--quote {
  background:
    radial-gradient(circle at 100% 0%, rgba(106, 53, 244, 0.08), transparent 55%),
    linear-gradient(155deg, #ffffff 0%, #fbfaff 100%);
}
.case-quote {
  margin: 0;
  position: relative;
  padding-left: 36px;
  font-size: 1.08rem; line-height: 1.5;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  text-wrap: pretty;
}
.case-quote__mark {
  position: absolute;
  left: 0; top: -10px;
  font-family: serif;
  font-size: 56px;
  line-height: 1;
  color: var(--primary);
  opacity: 0.55;
}

/* ── Security cards — embossed light ───────────────────────── */

.sec-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.sec-card {
  position: relative;
  padding: 32px 28px 28px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 92% 10%, rgba(169, 133, 255, 0.20), transparent 40%),
    radial-gradient(circle at 8% 100%, rgba(49, 88, 233, 0.10), transparent 40%),
    linear-gradient(158deg, #ffffff 0%, #f3f6ff 100%);
  border: 1px solid rgba(106, 53, 244, 0.2);
  box-shadow: 0 16px 44px rgba(25, 34, 75, 0.10),
              inset 0 1px 0 rgba(255, 255, 255, 0.8);
  overflow: hidden;
  transition: all 0.4s var(--ease-out-expo);
}
.sec-card:hover {
  transform: translateY(-6px);
  border-color: rgba(106, 53, 244, 0.34);
}
.sec-card__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 24px;
}
.sec-card__icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: linear-gradient(140deg, rgba(106, 53, 244, 0.18), rgba(47, 98, 240, 0.10));
  border: 1px solid rgba(106, 53, 244, 0.24);
  display: grid; place-items: center;
  color: var(--primary);
  box-shadow: 0 8px 20px rgba(106, 53, 244, 0.14),
              inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.sec-card__num {
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.1em;
  color: rgba(106, 53, 244, 0.4);
}
.sec-card h3 {
  margin: 0 0 12px;
  font-size: 1.18rem; font-weight: 700;
  color: var(--ink); letter-spacing: -0.01em;
}
.sec-card p {
  margin: 0;
  font-size: 0.92rem; line-height: 1.65;
  color: var(--muted);
}

#tracks .section__head { max-width: none; }
#tracks .section__head h2 {
  /* Keep the question on one line — even on narrower viewports it
     scales down rather than wrapping. */
  white-space: nowrap;
  text-wrap: nowrap;
  font-size: clamp(1.6rem, 3.4vw, 2.8rem);
}

/* ── Closed-perimeter guarantees — three pillars under the flow ─── */

.perimeter {
  margin-top: 0;
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  gap: 48px;
  align-items: start;
}
.perimeter__head { display: grid; gap: 14px; }
.perimeter__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--primary);
}
.perimeter__eyebrow::before {
  content: ''; width: 24px; height: 2px;
  background: linear-gradient(120deg, var(--primary), var(--primary-2));
  border-radius: 2px;
}
.perimeter__title {
  margin: 0;
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  font-weight: 700; line-height: 1.18; letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
.perimeter__title em {
  font-style: normal;
  background: linear-gradient(120deg, var(--primary), var(--primary-2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.perimeter__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.perimeter__card {
  display: grid; gap: 8px;
  padding: 22px 22px 24px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  transition: all .3s var(--ease-out-expo);
}
.perimeter__card:hover {
  border-color: rgba(106, 53, 244, 0.26);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
.perimeter__label {
  font-size: 14px; font-weight: 800;
  color: var(--primary); letter-spacing: -0.01em;
}
.perimeter__desc {
  margin: 0;
  font-size: 13px; line-height: 1.5;
  color: var(--muted);
}

@media (max-width: 900px) {
  .perimeter { grid-template-columns: 1fr; gap: 28px; }
  .perimeter__grid { grid-template-columns: 1fr; }
}

/* ── Compliance / standards strip ──────────────────────────── */

.sec-standards {
  margin-top: 72px;
  padding: 36px 40px;
  border-radius: 24px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: grid;
  grid-template-columns: minmax(0, 320px) 1fr;
  gap: 36px;
  align-items: center;
}
.sec-standards__head { display: grid; gap: 8px; }
.sec-standards__label {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--primary);
}
.sec-standards__label::before {
  content: ''; width: 24px; height: 2px;
  background: linear-gradient(120deg, var(--primary), var(--primary-2));
  border-radius: 2px;
}
.sec-standards__sub {
  margin: 0;
  font-size: 0.92rem; line-height: 1.55;
  color: var(--muted);
}
.sec-standards__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.std {
  display: grid; gap: 4px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: all .3s var(--ease-out-expo);
}
.std:hover {
  border-color: rgba(106, 53, 244, 0.26);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
.std__code {
  font-weight: 800; font-size: 14px;
  color: var(--ink); letter-spacing: -0.01em;
}
.std__desc {
  font-size: 11px; color: var(--muted);
}

/* FAQ is the last block in #flow — tighten the trailing gap so it
   doesn't feel like dead space before the next section. */
#flow { padding-bottom: 40px; }

/* ── FAQ — CISO objections ─────────────────────────────────── */

.sec-faq { margin-top: 72px; }
.sec-faq__head { text-align: center; max-width: 720px; margin: 0 auto 36px; }
.sec-faq__head h3 {
  margin: 14px 0 12px;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800; line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.sec-faq__head h3 em {
  font-style: normal;
  background: linear-gradient(120deg, #6a35f4 0%, #8945ff 50%, #3158e9 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.sec-faq__grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(700px, 100%);
  margin: 0 auto;
}
.faq {
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
  position: relative;
  overflow: hidden;
}
.faq[open] {
  border-color: rgba(106, 53, 244, 0.32);
  box-shadow: 0 14px 36px rgba(106, 53, 244, 0.14);
}
.faq__q {
  margin: 0;
  padding: 18px 22px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
  letter-spacing: -0.01em;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq:hover .faq__q { background: rgba(106, 53, 244, 0.025); }
.faq__q:active     { background: rgba(106, 53, 244, 0.07); transition: background 0.08s ease; }
.faq__chev {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(106, 53, 244, 0.10);
  position: relative;
  transition: transform .3s var(--ease-out-expo), background .25s ease;
}
.faq__chev::before,
.faq__chev::after {
  content: '';
  position: absolute;
  inset: 50% 25%;
  height: 2px;
  background: var(--primary);
  border-radius: 1px;
  transform: translateY(-50%);
}
.faq__chev::after {
  transform: translateY(-50%) rotate(90deg);
  transition: transform .3s var(--ease-out-expo), opacity .25s ease;
}
.faq[open] .faq__chev { background: rgba(106, 53, 244, 0.18); }
.faq[open] .faq__chev::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }
.faq__a {
  margin: 0;
  padding: 0 22px 20px;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--muted);
}

/* ── FAQ CTA ────────────────────────────────────────────────── */
.faq-cta {
  width: min(700px, 100%);
  margin: 32px auto 0;
  padding: 36px 40px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(106,53,244,0.06) 0%, rgba(106,53,244,0.02) 100%);
  border: 1px solid rgba(106,53,244,0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.faq-cta__label {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.faq-cta__sub {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 480px;
}
.faq-cta__btn {
  margin-top: 8px;
  padding: 14px 32px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%);
  color: #fff;
  box-shadow: 0 4px 20px rgba(106,53,244,0.30);
  transition: transform .2s var(--ease-out-expo), box-shadow .2s ease, opacity .2s ease;
}
.faq-cta__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(106,53,244,0.40);
}
.faq-cta__btn:active { transform: translateY(0); opacity: .88; }

/* ── Team grid ─────────────────────────────────────────────── */

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.team-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: grid;
  grid-template-rows: auto 1fr;
  transition: all .35s var(--ease-out-expo);
}
.team-card:hover {
  transform: translateY(-4px);
  border-color: rgba(106, 53, 244, 0.26);
  box-shadow: 0 22px 52px rgba(106, 53, 244, 0.16);
}
.team-card__photo {
  position: relative;
  aspect-ratio: 1 / 1;
  background:
    radial-gradient(circle at 30% 20%, rgba(106, 53, 244, 0.18), transparent 60%),
    linear-gradient(160deg, rgba(106, 53, 244, 0.10), rgba(47, 98, 240, 0.04));
  clip-path: inset(0); /* clip without overflow:hidden compositing artifacts */
  display: grid; place-items: center;
}
.team-card__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.01);
  transition: transform .5s var(--ease-out-expo);
}
.team-card:hover .team-card__photo img { transform: scale(1.05); }
.team-card__photo--fallback {
  font-size: 56px;
  font-weight: 900;
  letter-spacing: -0.04em;
  background: linear-gradient(120deg, var(--primary), var(--primary-2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.team-card__body {
  padding: 20px 22px 24px;
  display: grid; gap: 12px;
  align-content: start;
}
.team-card__name {
  margin: 0;
  font-size: 1.04rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.2;
}
.team-card__role {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.team-card__bio {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--muted);
}
.team-card__meta {
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.team-card__size {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 11px; font-weight: 700;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.team-card__size b {
  color: var(--ink);
  font-size: 15px;
  letter-spacing: -0.01em;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}
.team-card__tags {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 3px;
}
.team-card__tag {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
  padding: 0;
}
.team-card__tag::before { display: none; }

/* ── Testimonials ──────────────────────────────────────────── */

.quotes {
  display: flex;
  flex-wrap: nowrap;
  gap: 18px;
  overflow-x: scroll;           /* 'auto' + touch-action:pan-y breaks scrollLeft on iOS Safari */
  overflow-y: clip;             /* unlike hidden, allows overflow-clip-margin */
  overflow-clip-margin: 64px;   /* lets hover shadows breathe beyond the padding edge */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* Bleed past the container so cards can scroll edge-to-edge with a soft fade */
  margin-inline: calc(var(--container-pad, 24px) * -1);
  /* Generous vertical padding so card shadows aren't clipped top/bottom */
  padding: 28px var(--container-pad, 24px) 36px;
  mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}
.quotes--dragging { cursor: grabbing; }
.quotes--dragging .quote { transition: none; }
.quotes--dragging .quote:hover {
  transform: none;
  border-color: var(--border);
  box-shadow: var(--shadow-card);
}
.quotes::-webkit-scrollbar { display: none; }
.quote {
  position: relative;
  padding: 36px 32px 28px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0%, rgba(106, 53, 244, 0.08), transparent 50%),
    linear-gradient(160deg, #ffffff 0%, #fbfaff 100%);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  transition: all .35s var(--ease-out-expo);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 22px;
  flex: 0 0 auto;
  width: clamp(280px, 38vw, 460px);
}
.quote:hover {
  transform: translateY(-4px);
  border-color: rgba(106, 53, 244, 0.26);
  box-shadow: 0 22px 52px rgba(106, 53, 244, 0.18);
}
.quote__mark {
  color: var(--primary);
  opacity: 0.35;
  width: 36px; height: 28px;
}
.quote__text {
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.55;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}
.quote__author {
  display: flex; align-items: center; gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.quote__avatar {
  flex-shrink: 0;
  width: 52px; height: 52px;
  border-radius: 14px;
  overflow: hidden;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--primary), var(--primary-2));
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  box-shadow: 0 6px 14px rgba(106, 53, 244, 0.28);
}
.quote__avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.quote__avatar--fallback img { display: none; }
.quote__person { display: grid; gap: 2px; }
.quote__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.quote__role {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}
.quote__role b {
  color: var(--ink);
  font-weight: 700;
}

/* ── CTA / form — keeps the dramatic purple shell ──────────── */

.cta {
  position: relative;
  padding: 80px 0 120px;
}
.cta__shell {
  position: relative;
  border-radius: 36px;
  padding: 60px;
  background:
    radial-gradient(circle at 20% 100%, rgba(170, 72, 255, 0.35), transparent 45%),
    radial-gradient(circle at 80% 0%, rgba(78, 103, 255, 0.25), transparent 40%),
    linear-gradient(160deg, #100739 0%, #2f0d89 50%, #6a35f4 100%);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 30px 80px rgba(106, 53, 244, 0.3);
  overflow: hidden;
  color: #fff;
}
.cta__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 56px; position: relative; z-index: 2;
}
.cta h2 { margin: 0 0 18px; font-size: clamp(2rem, 3.6vw, 2.8rem); color: #fff; }
.cta h2 em {
  font-style: normal; color: var(--primary-light);
  -webkit-text-fill-color: var(--primary-light);
}
.cta__lead {
  font-size: 1.05rem; color: rgba(233, 236, 255, 0.85); line-height: 1.7;
  max-width: 460px; margin: 0 0 28px;
}
.cta__benefits { display: grid; gap: 14px; margin-top: 28px; }
.cta__benefit {
  display: flex; align-items: center; gap: 14px;
  padding: 12px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255,255,255,0.08);
}
.cta__benefit-icon {
  width: 40px; height: 40px;
  border-radius: 10px; flex-shrink: 0;
  background: rgba(255, 255, 255, 0.95);
  color: var(--accent-blue);
  display: grid; place-items: center;
}
.cta__benefit p { margin: 0; color: #fff; font-weight: 700; font-size: 14px; }
.cta__benefit small {
  display: block; margin-top: 2px;
  color: rgba(219, 227, 255, 0.78);
  font-size: 11px;
}

.form-panel {
  background: #fff;
  border-radius: 26px;
  padding: 32px;
  box-shadow: 0 20px 56px rgba(12, 7, 50, 0.45);
  color: var(--ink);
}
.form-panel form { display: grid; gap: 14px; }
.form-panel label {
  display: grid; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--muted);
}
.form-panel input,
.form-panel textarea {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg); color: var(--ink);
  padding: 12px 14px;
  font-family: var(--font-sans); font-size: 16px;
  outline: none; transition: all .25s;
}
.form-panel input:focus,
.form-panel textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(106, 53, 244, 0.12);
}
.form-panel textarea { resize: none; min-height: 80px; }
.form-panel__submit:disabled { opacity: 0.65; cursor: not-allowed; transform: none; box-shadow: none; }
.form-panel__submit {
  width: 100%; margin-top: 6px;
  padding: 14px; border: 0;
  font-family: var(--font-sans); font-weight: 700; font-size: 0.95rem;
  color: #fff;
  background: linear-gradient(120deg, var(--primary), var(--primary-2));
  border-radius: 14px;
  box-shadow: 0 12px 22px rgba(106, 53, 244, 0.32);
  cursor: pointer;
  transition: transform .25s, box-shadow .25s;
}
.form-panel__submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(106, 53, 244, 0.45);
}
.form-panel__fineprint {
  margin: 0; font-size: 11px; color: var(--faint); text-align: center;
}
.form-panel__fineprint a { color: var(--primary); text-decoration: underline; }
.form-panel__promise {
  margin: 6px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(106, 53, 244, 0.06);
  border: 1px solid rgba(106, 53, 244, 0.18);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
  font-weight: 500;
}
.form-panel__success {
  display: none; padding: 12px 16px;
  border-radius: 12px;
  background: rgba(15, 118, 110, 0.08);
  border: 1px solid var(--safe);
  color: var(--safe); font-size: 13px;
}
.form-panel__success.show { display: block; }

/* ── Success modal ────────────────────────────────────────── */
.success-modal {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(10, 8, 40, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: smFadeIn .22s ease both;
}
@keyframes smFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.success-modal__card {
  background: #fff;
  border-radius: 28px;
  padding: 48px 40px 40px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow: 0 40px 100px rgba(10, 8, 40, 0.55);
  animation: smCardIn .32s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes smCardIn {
  from { opacity: 0; transform: scale(0.86) translateY(24px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    }
}
.success-modal__icon {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(106,53,244,0.1), rgba(49,88,233,0.1));
  border: 2px solid rgba(106,53,244,0.22);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 26px;
  color: var(--primary);
}
.success-modal__title {
  margin: 0 0 12px;
  font-size: 1.65rem; font-weight: 800;
  letter-spacing: -0.025em; line-height: 1.15;
  color: var(--ink);
}
.success-modal__sub {
  margin: 0 0 32px;
  font-size: 0.97rem; line-height: 1.65;
  color: var(--muted);
}
.success-modal__btn {
  width: 100%; padding: 15px 24px; border: none;
  background: linear-gradient(120deg, var(--primary), var(--primary-2));
  color: #fff; font-family: var(--font-sans); font-weight: 700; font-size: 1rem;
  border-radius: 14px; cursor: pointer;
  box-shadow: 0 10px 26px rgba(106,53,244,0.34);
  transition: transform .2s, box-shadow .2s;
  -webkit-tap-highlight-color: transparent;
}
.success-modal__btn:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(106,53,244,0.44); }
.success-modal__btn:active { transform: scale(0.97); transition-duration: .08s; }
@media (max-width: 480px) {
  .success-modal__card { padding: 36px 24px 28px; border-radius: 22px; }
  .success-modal__title { font-size: 1.4rem; }
}

/* ── Footer — stays dark for grounding ─────────────────────── */

.footer {
  position: relative; z-index: 1;
  padding: 56px 0 36px;
  background: var(--surface-dark);
  color: #d8ddef;
}
.footer__grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px; margin-bottom: 36px;
}
.footer__brand {
  font-size: 1.35rem; font-weight: 800; letter-spacing: -0.03em;
  color: #fff;
  display: inline-flex;
}
.footer__brand .brand-word { color: #fff; }
.footer__brand .brand-word__dot {
  color: var(--accent-light);
  -webkit-text-fill-color: var(--accent-light);
}
.footer__about {
  margin: 12px 0 0;
  font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.7;
  max-width: 320px;
}
.footer__title {
  font-size: 11px; font-weight: 800; color: #fff;
  text-transform: uppercase; letter-spacing: 0.08em;
  margin: 0 0 16px;
}
.footer__col a {
  display: block; font-size: 13px; padding: 4px 0;
  color: rgba(255,255,255,0.55); transition: color .2s;
}
.footer__col a:hover { color: #fff; }

/* ── Footer contacts — special styling ──────────────────────────── */

.footer__contact-group {
  margin-top: 0;
  padding: 4px 0;
}
.footer__contact-group--inline {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.footer__phones {
  display: flex;
  flex-direction: column;
}

.footer__contact-label {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  padding: 0;
  margin: 0;
  white-space: nowrap;
  transition: color .2s;
}

/* Higher specificity than .footer__col a to override padding: 4px 0 */
.footer__col .footer__contact-link {
  padding: 0;
}

.footer__contact-link {
  display: block;
  font-size: 13px;
  padding: 0;
  color: var(--primary);
  font-weight: 500;
  text-decoration: none;
  transition: color .2s;
}

.footer__contact-link:hover {
  color: var(--primary-2);
}

.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 20px;
  display: flex; justify-content: space-between;
  font-size: 12px; color: rgba(255,255,255,0.4);
}

/* ── Hamburger / mobile nav drawer ──────────────────────────── */

.nav__burger {
  display: none;
  flex-shrink: 0;
  margin-left: auto;
  width: 38px; height: 38px;
  align-items: center; justify-content: center;
  background: rgba(106, 53, 244, 0.07);
  border: none; cursor: pointer;
  color: var(--ink);
  border-radius: 10px;
  transition: background .2s;
}
.nav__burger:hover { background: rgba(106, 53, 244, 0.14); }
.nav__burger svg { pointer-events: none; }

/* Drawer — absolute child of sticky .nav */
.nav__drawer {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(106, 53, 244, 0.13);
  box-shadow: 0 16px 44px rgba(106, 53, 244, 0.14);
  padding: 8px 8px 12px;
  display: flex; flex-direction: column; gap: 2px;
  transform-origin: top center;
  transform: scaleY(0.88) translateY(-10px);
  opacity: 0;
  pointer-events: none;
  transition:
    transform .2s cubic-bezier(0.32, 0, 0.67, 0),
    opacity   .18s ease;
}
.nav__drawer--open {
  transform: scaleY(1) translateY(0);
  opacity: 1;
  pointer-events: auto;
  transition:
    transform .26s cubic-bezier(0.33, 1, 0.68, 1),
    opacity   .20s ease;
}

.nav__drawer-link {
  display: block;
  font-size: 15px; font-weight: 600;
  color: var(--ink);
  padding: 11px 14px;
  border-radius: 10px;
  letter-spacing: -0.01em;
  transition: background .15s, color .15s;
}
.nav__drawer-link:hover   { background: rgba(106, 53, 244, 0.06); color: var(--primary); }
.nav__drawer-link.is-active { background: rgba(106, 53, 244, 0.07); color: var(--primary); }

.nav__drawer-bottom {
  margin-top: 6px;
  padding: 12px 6px 0;
  border-top: 1px solid rgba(106, 53, 244, 0.10);
  display: flex; align-items: center; gap: 10px;
}
.nav__drawer-contacts {
  display: flex; gap: 8px;
}
.nav__drawer-cta {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: linear-gradient(120deg, var(--primary), var(--primary-2));
  color: #fff; font-weight: 700; font-size: 14px;
  padding: 12px 18px; border-radius: 12px;
  box-shadow: 0 6px 18px rgba(106, 53, 244, 0.30);
  transition: transform .2s, box-shadow .2s;
  white-space: nowrap;
}
.nav__drawer-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(106, 53, 244, 0.42);
}
.nav__drawer-privacy {
  display: block;
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  padding: 10px 6px 4px;
  opacity: 0.7;
  transition: opacity .2s;
}
.nav__drawer-privacy:hover { opacity: 1; color: var(--primary); }

/* ── Responsive ─────────────────────────────────────────────── */

@media (max-width: 1080px) {
  /* Nav: hide desktop elements, show burger */
  .nav__links    { display: none; }
  .nav__contacts { display: none; }
  .nav__cta      { display: none; }
  .nav__burger   { display: inline-flex; }

  /* Hero: tighter padding in single-column layout */
  .hero { padding-top: 24px; padding-bottom: 48px; }
  .hero__metrics { grid-template-columns: 1fr; }

  /* Stats / logo strip: compact on mobile */
  .stats { padding: 20px 0 16px; }
  .logo  { width: 88px; height: 30px; }
  .stats__set { gap: 28px; padding-right: 28px; }

  .hero__grid { grid-template-columns: 1fr; gap: 36px; }
  .terminal__body { height: 420px; overflow-y: auto; scroll-behavior: smooth; }
  .xforms { grid-template-columns: 1fr; }
  /* Flow: vertical stacked blocks on tablet + mobile */
  #tracks .section__head { margin-bottom: 20px; }
  #how-it-works .section__head { margin-bottom: 20px; }
  #case-studies .section__head { margin-bottom: 20px; }
  #team .section__head { margin-bottom: 20px; }
  .sec-standards { margin-top: 36px; }
  #how-it-works { padding-top: 40px; padding-bottom: 0; }
  #case-studies { padding-bottom: 0; }
  #team { padding-top: 40px; }
  /* Halve spacing before and after the testimonials slider */
  #testimonials .section__head { margin-bottom: 28px; }
  .cta { padding-top: 40px; }
  /* Scroll-based active highlight for case cards and team cards */
  .case-card { transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
  .case-card.is-active {
    transform: translateY(-4px);
    border-color: rgba(106, 53, 244, 0.32);
    box-shadow: 0 22px 52px rgba(106, 53, 244, 0.16);
  }
  .case-card.is-active .case-card__bignum {
    transform: translate(8%, -6%) scale(1.04);
    opacity: 0.18;
  }
  .case-card.is-active .case-card__more svg { transform: translateX(3px); }
  .team-card { transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
  .team-card.is-active {
    transform: translateY(-4px);
    border-color: rgba(106, 53, 244, 0.26);
    box-shadow: 0 22px 52px rgba(106, 53, 244, 0.16);
  }
  .team-card.is-active .team-card__photo img { transform: scale(1.05); }
  #how-it-works .flow-sticky-frame { padding: 0 0 20px; }
  .flow-security { padding-top: 48px; }
  .flow { display: flex; flex-direction: column; gap: 0; }
  .flow::before { display: none; }
  .flow__progress { display: none; }
  .flow__step {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 0 14px;
    align-items: start;
    padding-bottom: 32px;
    position: relative;
  }
  .flow__step:last-child { padding-bottom: 0; }
  /* Vertical connector line between steps */
  .flow__step::after {
    content: '';
    position: absolute;
    left: 26px;
    top: 56px;
    bottom: 0;
    width: 2px;
    background: rgba(106, 53, 244, 0.15);
    z-index: 0;
  }
  .flow__step:last-child::after { display: none; }
  .flow__step.lit::after {
    background: linear-gradient(to bottom, var(--primary) 50%, rgba(106,53,244,0.15) 100%);
  }
  .flow__dot { width: 54px; height: 54px; margin: 0; }
  .flow__body { min-height: auto; transform: translateX(10px); }
  .flow__step.lit .flow__body { transform: translateX(0); }
  .sec-row { grid-template-columns: 1fr; }
  .sec-standards { grid-template-columns: 1fr; gap: 22px; padding: 28px 24px; }
  .sec-standards__grid { grid-template-columns: 1fr 1fr; }
  .sec-faq__grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr 1fr; }
  /* 1. Gap after team, before testimonials */
  #team { padding-bottom: 0; }
  #testimonials { padding-top: 40px; padding-bottom: 0; }
  /* 2+3. Smaller font + tighter inner padding in quote cards */
  .quotes { margin-inline: -14px; padding-inline: 14px; padding-top: 16px; padding-bottom: 20px; }
  .quote { width: min(82vw, 360px); padding: 20px 18px 16px; gap: 12px; }
  .quote__text { font-size: 0.88rem; line-height: 1.5; }
  .quote__author { padding-top: 10px; gap: 10px; }
  .quote__avatar { width: 42px; height: 42px; border-radius: 10px; }
  .cta__grid { grid-template-columns: 1fr; gap: 32px; }
  .case-grid { grid-template-columns: 1fr 1fr; }
  .case-modal__header { padding: 18px 20px 18px 28px; }
  .case-modal__body { grid-template-columns: 1fr; }
  .case-modal__left { border-right: none; border-bottom: 1px solid var(--border); padding: 20px 28px; }
  .case-modal__right { max-height: 60vh; }
  .case-modal__right-scroll { padding: 20px 40px 24px 28px; }
  .case-detail__grid { grid-template-columns: 1fr; }
  .case-results { grid-template-columns: 1fr 1fr; gap: 10px; }
  .case-flow__node { min-width: 80px; }
  .anatomy { height: 480px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  .container { width: calc(100% - 28px); }
  .section { padding: 64px 0; }

  /* Tighter bottom padding after the xforms stack */
  .xforms-section { padding: 56px 0 28px; }
  /* On mobile: heading scrolls away, only cards stick */
  #xforms .section__head { position: static; }
  #xforms .section__head h2 span { white-space: normal !important; }
  .tracks { grid-template-columns: 1fr; }
  .case-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .cta__shell { padding: 32px 22px; border-radius: 24px; }
  /* Anatomy: scale the whole 720×720 diagram as a unit so rings and
     orbit node positions always stay in sync (0.583 ≈ 420/720).
     Nodes counter-scale by 1/0.583 ≈ 1.716 to stay readable. */
  #what-is { padding: 40px 0; }
  #what-is .section__head { margin-bottom: 24px; }
  .anatomy { height: 454px; }
  #tracks { padding-top: 28px; padding-bottom: 20px; }
  #tracks .tracks-cta { margin-top: 20px; }
  .section h2 { font-size: 1.75rem; }
  #tracks .section__head h2 { white-space: normal; }
  /* Move label to bottom centre of the 720×720 wrapper and counter-scale
     so it renders at normal size despite the 0.583 parent scale */
  .anatomy__perimeter-label {
    top: auto; right: auto;
    bottom: -16px; left: 50%;
    transform-origin: center bottom;
    transform: translateX(-50%) scale(1.716);
    font-size: 13px;
    padding: 8px 18px;
  }
  .anatomy__diagram { transform: translate(-50%, -50%) scale(0.583); }
  .anatomy__orbit--inner .anatomy__node { animation-name: anatomy-node-ccw-sm; }
  .anatomy__orbit--outer .anatomy__node { animation-name: anatomy-node-cw-sm; }
  .footer__grid { grid-template-columns: 1fr; }

  /* ── Case modal: full-screen, one unified scroll ── */
  .case-modal { padding: 0; display: block; }
  .case-modal__sheet {
    width: 100%; height: 100vh;
    max-height: 100vh;
    border-radius: 0; border: none; box-shadow: none;
  }
  /* Body becomes the single scroll container */
  .case-modal__body {
    display: flex; flex-direction: column;
    overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  /* Left sidebar: no own scroll, no border */
  .case-modal__left {
    overflow-y: visible;
    flex-shrink: 0;
    padding: 20px 20px 24px;
    border-bottom: 1px solid var(--border);
  }
  /* Right panel: no own scroll, no max-height cap */
  .case-modal__right {
    max-height: none;
    overflow: visible;
    flex-shrink: 0;
  }
  .case-modal__right-scroll {
    overflow-y: visible;
    height: auto;
    padding: 20px 20px 48px;
  }
  /* Custom scrollbar not needed on touch */
  .case-modal__scroll-track { display: none; }

  /* Metrics: vertical list rows instead of grid cards */
  .case-results { grid-template-columns: 1fr; gap: 8px; }
  .case-metric {
    flex-direction: row; align-items: center;
    gap: 14px; padding: 14px 16px;
  }
  .case-metric__value { font-size: 1.25rem; min-width: 96px; flex-shrink: 0; }
  .case-metric__label { font-size: 0.88rem; }
}

@keyframes anatomy-node-cw-sm {
  from { transform: translate(-50%, -50%) scale(1.716) rotate(0deg); }
  to   { transform: translate(-50%, -50%) scale(1.716) rotate(360deg); }
}
@keyframes anatomy-node-ccw-sm {
  from { transform: translate(-50%, -50%) scale(1.716) rotate(0deg); }
  to   { transform: translate(-50%, -50%) scale(1.716) rotate(-360deg); }
}