/* ============================================================
   Aibot.pro — Liquid Glass redesign · Hero prototype
   Vibe: Ethereal Glass · Layout: Editorial Split
   Accent: electric indigo #5B6CFF
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Content container max-width — scales up on wide hi-DPI laptops so blocks
     don't sit in a narrow 1320px column with huge empty side gutters. */
  --content-max: 1320px;

  /* Palette */
  --bg: #08080c;
  --bg-soft: #0c0c14;
  --fg: #ecedf5;
  --fg-soft: rgba(236, 237, 245, 0.62);
  --fg-mute: rgba(236, 237, 245, 0.55);

  --ink-1: rgba(255, 255, 255, 0.04);
  --ink-2: rgba(255, 255, 255, 0.08);
  --ink-3: rgba(255, 255, 255, 0.12);
  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.14);

  --accent: #5b6cff;
  --accent-soft: #8c98ff;
  --accent-deep: #2a3aff;
  --accent-glow: rgba(91, 108, 255, 0.55);

  /* Motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* Type */
  --font-display: "Geist", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;

  /* Unified H2 scale — applied across all sections for consistency
     (added 2026-05-11 after seo-geo audit found 3 different clamp values). */
  --h2-size: clamp(2.25rem, 4vw, 3.5rem);
  --h2-line: 1.18;
  --h2-tracking: -0.02em;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  /* Kill the grey/blue box mobile browsers flash over any tappable element on
     touch — it reads as an accidental "selection" of the menu/button. Inherits
     to every descendant, so one declaration covers the whole site. */
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  /* Baseline root font-size. Bumped on wide / hi-DPI laptop screens below
     so that every rem-based clamp() scales up with viewport width.
     Targets Windows laptops with native resolutions like 2520×1680 etc
     where the browser sees a "desktop" viewport but the physical screen
     is small, leaving the content uncomfortably tiny. */
  font-size: 16px;
}
/* HiDPI laptop bump — detects laptops by OS scaling, not resolution:
   physical 13-16" panels almost always run FHD/2K/Retina with 125-200%
   OS scaling (devicePixelRatio >= 1.2), which lands the CSS viewport in
   881-1600 px. Bumps root font-size so every rem-based clamp() typography
   reads at a comfortable physical size. Desktop monitors run 100% (DPR=1)
   and don't match; 17" FHD laptops at 100-125% give CSS width > 1600 and
   correctly stay desktop. Mobile (<= 880) excluded so the sticky-stack
   and mobile header rules aren't disturbed. Tiers: narrower viewport ->
   bigger bump (19px @ <=1200, 18px @ <=1500, 17px @ <=1600). */
@media (min-resolution: 1.2dppx) and (min-width: 881px) and (max-width: 1600px) {
  html { font-size: 17px; }
}
@media (min-resolution: 1.2dppx) and (min-width: 881px) and (max-width: 1500px) {
  html { font-size: 18px; }
}
@media (min-resolution: 1.2dppx) and (min-width: 881px) and (max-width: 1200px) {
  html { font-size: 19px; }
}
body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-display);
  font-feature-settings: "ss01", "cv11";
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
img,
svg {
  display: block;
  max-width: 100%;
}

/* ============================================================
   Background — mesh orbs + grid + grain + vignette
   ============================================================ */
.bg-canvas {
  /* Lives inside .hero now — absolute fills the section box and
     scrolls with it. Hero z-index 1 (positioned), bg-canvas z-index 0
     stays under hero contents but above main's solid bg. Doesn't
     overlap the fixed footer because the canvas scrolls out with
     the hero before the user reaches the spacer/footer area. */
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.7;
  will-change: transform;
}
.orb--a {
  width: 56vmax;
  height: 56vmax;
  left: -18vmax;
  top: -22vmax;
  background: radial-gradient(circle, var(--accent) 0%, rgba(91, 108, 255, 0) 65%);
  animation: drift-a 22s var(--ease-in-out) infinite alternate;
}
.orb--b {
  width: 48vmax;
  height: 48vmax;
  right: -14vmax;
  top: 6vmax;
  background: radial-gradient(circle, #7a3be8 0%, rgba(122, 59, 232, 0) 65%);
  opacity: 0.45;
  animation: drift-b 26s var(--ease-in-out) infinite alternate;
}
.orb--c {
  width: 44vmax;
  height: 44vmax;
  left: 18vmax;
  bottom: -22vmax;
  background: radial-gradient(circle, #00d4ff 0%, rgba(0, 212, 255, 0) 65%);
  opacity: 0.22;
  animation: drift-c 30s var(--ease-in-out) infinite alternate;
}
@keyframes drift-a {
  to {
    transform: translate3d(8vmax, 6vmax, 0) scale(1.12);
  }
}
@keyframes drift-b {
  to {
    transform: translate3d(-6vmax, 8vmax, 0) scale(0.92);
  }
}
@keyframes drift-c {
  to {
    transform: translate3d(4vmax, -8vmax, 0) scale(1.08);
  }
}

.grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 80%);
}
.grain {
  position: absolute;
  inset: 0;
  opacity: 0.06;
  mix-blend-mode: overlay;
  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'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.85'/></svg>");
}
.vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 90% 70% at 50% 30%, transparent 50%, rgba(0, 0, 0, 0.55) 100%);
}

/* ============================================================
   Floating glass nav (port of site-header from production)
   ============================================================ */
.site-header { position: relative; z-index: 110; }
.nav-shell {
  position: fixed;
  top: 22px;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 110;
  width: min(92%, 1040px);
  transition: filter 400ms var(--ease-out);
}
.nav-pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 10px 22px 10px 116px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 1px 0 rgba(0, 0, 0, 0.4),
    0 24px 60px -24px rgba(0, 0, 0, 0.6);
  transition: border-color 600ms var(--ease-out), box-shadow 600ms var(--ease-out);
}
/* Glass lives on a pseudo, NOT on .nav-pill itself: an element with
   backdrop-filter becomes a "backdrop root" that isolates descendants, which
   killed the dropdown's own blur (it's nested inside the pill). With the blur
   on ::before, the pill is no longer a backdrop root, so .nav-mega can blur the
   page behind it. No isolation here (isolation also creates a backdrop root). */
.nav-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(20, 22, 40, 0.40), rgba(10, 12, 22, 0.30));
  backdrop-filter: blur(24px) saturate(180%) brightness(0.6);
  -webkit-backdrop-filter: blur(24px) saturate(180%) brightness(0.6);
  transition: background 600ms var(--ease-out);
}

/* ---- Light-theme variant ---- */
.nav-shell.is-light .nav-pill {
  border-color: rgba(20, 23, 43, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 1px 0 rgba(20, 23, 43, 0.04),
    0 24px 60px -28px rgba(20, 30, 80, 0.18);
}
.nav-shell.is-light .nav-pill::before {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.44));
  backdrop-filter: blur(24px) saturate(180%) brightness(1.18);
  -webkit-backdrop-filter: blur(24px) saturate(180%) brightness(1.18);
}

/* ---- Brand: absolute-left, overflows pill on the left ---- */
.nav-pill__brand {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  line-height: 0;
  z-index: 2;
  transition: opacity 600ms var(--ease-out);
}
.nav-pill__brand:hover { opacity: 0.9; }
.nav-pill__brand-logo {
  height: 28px;
  width: auto;
  display: block;
  max-width: 120px;
  object-fit: contain;
  filter: brightness(0) invert(1) drop-shadow(0 0 0 transparent);
  transition: filter 500ms var(--ease-out);
}
.nav-pill__brand:hover .nav-pill__brand-logo {
  filter: brightness(0) invert(1) drop-shadow(0 0 14px rgba(255, 255, 255, 0.4));
}
.nav-shell.is-light .nav-pill__brand-logo {
  filter: brightness(0);
}
.nav-shell.is-light .nav-pill__brand:hover .nav-pill__brand-logo {
  filter: brightness(0) drop-shadow(0 0 12px rgba(91, 108, 255, 0.35));
}

/* ---- Desktop nav ---- */
.nav-pill__desktop {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav-links {
  display: flex;
  gap: 6px;
}
.nav-links a {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 14px;
  color: rgba(236, 237, 245, 0.82);
  transition: color 400ms var(--ease-out), background 400ms var(--ease-out);
}
.nav-links a:hover { color: var(--fg); background: var(--ink-2); }
.nav-shell.is-light .nav-links a { color: rgba(20, 23, 43, 0.62); }
.nav-shell.is-light .nav-links a:hover { color: #14172b; background: rgba(20, 23, 43, 0.06); }

/* ---- Dropdown trigger (Решения) ---- */
.nav-links__item--has-menu { position: relative; }
.nav-links__trigger {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
}
.nav-links__chev {
  transition: transform 320ms var(--ease-out);
  opacity: 0.85;
}
.nav-links__item--has-menu:hover .nav-links__chev,
.nav-links__item--has-menu:focus-within .nav-links__chev {
  transform: rotate(180deg);
  opacity: 1;
}

/* ---- Mega-menu (4 cards 2x2) ---- */
.nav-mega {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -6px);
  margin-top: 14px;
  width: min(560px, 92vw);
  padding: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  border-radius: 22px;
  /* Real frosted glass, same recipe as the header pill (was 0.92/0.88 alpha —
     near-opaque, blur invisible; and it sat inside the pill's backdrop root so
     its own blur was dead — see .nav-pill::before). Translucent tint + a slightly
     larger blur radius so the page behind clearly frosts; brightness darkens the
     blurred backdrop so the light card text stays readable. */
  background: linear-gradient(135deg, rgba(20, 22, 40, 0.42), rgba(10, 12, 22, 0.32));
  backdrop-filter: blur(30px) saturate(180%) brightness(0.62);
  -webkit-backdrop-filter: blur(30px) saturate(180%) brightness(0.62);
  border: 1px solid var(--hairline);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 24px 60px -20px rgba(0, 0, 0, 0.7);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out),
    visibility 0s linear 280ms;
  z-index: 5;
}
/* hover-bridge: невидимая полоса между триггером и панелью */
.nav-mega::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -16px;
  height: 16px;
}
.nav-links__item--has-menu:hover .nav-mega,
.nav-links__item--has-menu:focus-within .nav-mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out),
    visibility 0s;
}
.nav-shell.is-light .nav-mega {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(244, 245, 248, 0.46));
  backdrop-filter: blur(30px) saturate(180%) brightness(1.16);
  -webkit-backdrop-filter: blur(30px) saturate(180%) brightness(1.16);
  border-color: rgba(20, 23, 43, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 24px 60px -20px rgba(20, 30, 80, 0.18);
}

/* Card */
.nav-mega__card {
  display: grid !important;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "num arrow"
    "title arrow"
    "desc desc";
  column-gap: 10px;
  row-gap: 4px;
  padding: 14px 14px 13px !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--hairline);
  color: var(--fg) !important;
  text-decoration: none;
  transition: background 260ms var(--ease-out), border-color 260ms var(--ease-out),
    transform 260ms var(--ease-out);
  position: relative;
  overflow: hidden;
}
.nav-mega__card:hover {
  background: rgba(91, 108, 255, 0.08) !important;
  border-color: rgba(91, 108, 255, 0.35);
  transform: translateY(-1px);
}
.nav-shell.is-light .nav-mega__card {
  background: rgba(20, 23, 43, 0.03);
  border-color: rgba(20, 23, 43, 0.08);
  color: #14172b !important;
}
.nav-shell.is-light .nav-mega__card:hover {
  background: rgba(91, 108, 255, 0.07) !important;
  border-color: rgba(91, 108, 255, 0.35);
}
.nav-mega__num {
  grid-area: num;
  font-family: var(--font-mono, "Geist Mono", ui-monospace, monospace);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-soft);
}
.nav-mega__title {
  grid-area: title;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.nav-mega__desc {
  grid-area: desc;
  font-size: 12px;
  line-height: 1.4;
  color: var(--fg-soft);
  margin-top: 2px;
}
.nav-shell.is-light .nav-mega__desc { color: rgba(20, 23, 43, 0.6); }
.nav-mega__arrow {
  grid-area: arrow;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(91, 108, 255, 0.14);
  color: var(--accent-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: start;
  transition: background 260ms var(--ease-out), transform 260ms var(--ease-out),
    color 260ms var(--ease-out);
}
.nav-mega__card:hover .nav-mega__arrow {
  background: var(--accent);
  color: #fff;
  transform: translate(2px, -2px);
}

/* Mobile: dropdown скрыт, кнопка ведёт на #solutions как обычная ссылка */
@media (max-width: 880px) {
  .nav-mega { display: none; }
  .nav-links__chev { display: none; }
}

/* ---- Language switcher ---- */
.lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hairline);
}
.lang-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  padding: 4px 9px;
  border-radius: 999px;
  font-family: var(--font-mono, "Geist Mono", ui-monospace, monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(236, 237, 245, 0.82);
  transition: color 300ms var(--ease-out), background 300ms var(--ease-out);
}
.lang-link:hover { color: var(--fg); background: rgba(255, 255, 255, 0.06); }
.lang-link.is-active {
  color: #fff;
  background: var(--accent);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset, 0 4px 14px -4px var(--accent-glow);
}
.nav-shell.is-light .lang-switcher {
  background: rgba(20, 23, 43, 0.04);
  border-color: rgba(20, 23, 43, 0.08);
}
.nav-shell.is-light .lang-link { color: rgba(20, 23, 43, 0.6); }
.nav-shell.is-light .lang-link:hover { color: #14172b; background: rgba(20, 23, 43, 0.06); }
.nav-shell.is-light .lang-link.is-active { color: #fff; background: var(--accent); }

.lang-switcher--mobile { display: none; }

/* ---- Hamburger (mobile only) ---- */
.nav-pill__burger {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--fg);
  align-items: center;
  justify-content: center;
  margin-left: auto;
  cursor: pointer;
  transition: background 300ms var(--ease-out);
}
.nav-pill__burger:hover { background: rgba(255, 255, 255, 0.06); }
.nav-pill__burger-bars {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 12px;
}
.nav-pill__burger-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 300ms var(--ease-out), opacity 200ms var(--ease-out), top 300ms var(--ease-out);
}
.nav-pill__burger-bars span:nth-child(1) { top: 0; }
.nav-pill__burger-bars span:nth-child(2) { top: 5px; }
.nav-pill__burger-bars span:nth-child(3) { top: 10px; }
.nav-pill__burger[aria-expanded="true"] .nav-pill__burger-bars span:nth-child(1) {
  top: 5px; transform: rotate(45deg);
}
.nav-pill__burger[aria-expanded="true"] .nav-pill__burger-bars span:nth-child(2) { opacity: 0; }
.nav-pill__burger[aria-expanded="true"] .nav-pill__burger-bars span:nth-child(3) {
  top: 5px; transform: rotate(-45deg);
}
.nav-shell.is-light .nav-pill__burger { color: #14172b; border-color: rgba(20, 23, 43, 0.12); }

/* ---- Mobile menu overlay ---- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 80px 24px;
  background: rgba(8, 8, 12, 0.94);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms var(--ease-out), visibility 0s linear 300ms;
}
.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 300ms var(--ease-out), visibility 0s;
}
.mobile-menu__link {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #fff;
  transition: color 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.mobile-menu__link:hover { color: var(--accent-soft); transform: translateY(-1px); }
/* "Решения" group — the four service pages, which previously had no entry in
   the mobile menu at all (they only lived in the desktop dropdown). A mono
   label heads a tighter cluster of 4 page links, set smaller than the main
   section links so the hierarchy reads at a glance. */
.mobile-menu__group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
}
.mobile-menu__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-soft);
}
.mobile-menu__sublink {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.82);
  transition: color 200ms var(--ease-out);
}
.mobile-menu__sublink:hover { color: var(--accent-soft); }
/* current service page in the group — "you are here", not tappable */
.mobile-menu__sublink.is-current { color: var(--accent); pointer-events: none; }
body.is-locked { overflow: hidden; }

/* ---- Responsive ---- */
@media (max-width: 880px) {
  .nav-shell { top: 14px; }
  /* Layout: [burger][logo] grouped at the left, langs flushed to the right */
  .nav-pill {
    padding: 6px 14px 6px 6px;
    gap: 8px;
    justify-content: flex-start;
  }
  .nav-pill__brand {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    order: 2;
  }
  .nav-pill__brand-logo { height: 24px; max-width: 88px; }
  .nav-pill__desktop { display: none; }
  .nav-pill__burger { display: inline-flex; order: 1; margin-left: 0; }
  .lang-switcher--mobile { display: inline-flex; order: 3; margin-left: auto; }
  .lang-switcher--mobile .lang-link { min-width: 26px; padding: 3px 7px; font-size: 10px; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  padding: 140px 32px 96px;
  display: flex;
  align-items: center;
}
.hero__inner {
  width: min(1280px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}

/* ---- Eyebrow ---- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 13px 7px 11px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--hairline);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-soft);
}
.eyebrow__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(91, 108, 255, 0.18), 0 0 12px var(--accent);
  animation: pulse 2.4s var(--ease-in-out) infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.18); opacity: 0.7; }
}

/* ---- Title ---- */
.hero__title {
  margin: 28px 0 0;
  font-size: clamp(2.75rem, 6.2vw, 5.25rem);
  line-height: 0.95;
  letter-spacing: -0.045em;
  font-weight: 600;
  color: var(--fg);
  max-width: 14ch;
}
.hero__line {
  display: block;
}
.hero__rotator {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  position: relative;
  /* 1.2em gives descenders (g, y, p, q, j, у) headroom — required for EN
     "agents" and ES "agentes" since both have a descender on `g`. RU words
     are unaffected (just a touch more vertical breathing room). */
  height: 1.2em;
  overflow: hidden;
  vertical-align: top;
  /* No text-clipped fill here on purpose: the words (.hero__word) carry their
     own indigo gradient. A white gradient on the container showed THROUGH each
     word as it faded out (opacity → 0 during the cycle), flashing the outgoing
     word white before it left. The container is now just the clipping window. */
}
.hero__rotator-track {
  display: flex;
  flex-direction: column;
}
.hero__word {
  display: block;
  height: 1.2em;
  line-height: 1;
  padding-bottom: 0.05em;
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--accent) 70%, var(--accent-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}

/* ---- Lede ---- */
.hero__lede {
  margin: 32px 0 0;
  max-width: 46ch;
  font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
  line-height: 1.55;
  color: var(--fg-soft);
  letter-spacing: -0.005em;
}
.hero__lede-mark {
  position: relative;
  color: var(--fg);
  white-space: nowrap;
  padding: 0 4px;
}
.hero__lede-mark::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(91, 108, 255, 0.18), rgba(91, 108, 255, 0.06));
  border: 1px solid rgba(91, 108, 255, 0.25);
  z-index: -1;
}

/* ---- CTA buttons (Double-bezel + button-in-button) ---- */
.hero__cta {
  margin-top: 40px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 22px;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background 320ms var(--ease-out),
    border-color 220ms var(--ease-out), box-shadow 320ms var(--ease-out);
  position: relative;
  isolation: isolate;
}
.btn:active {
  transform: scale(0.975);
}
.btn--primary {
  color: #fff;
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--accent) 50%, var(--accent-deep) 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2),
    0 16px 32px -10px var(--accent-glow),
    0 2px 6px rgba(0, 0, 0, 0.4);
}
.btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.35), transparent 60%);
  z-index: -1;
  pointer-events: none;
}
.btn--ghost {
  color: var(--fg);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--hairline-strong);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.36);
}
.btn__icon {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  transition: transform 240ms var(--ease-out), background 240ms var(--ease-out);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn--ghost .btn__icon--ghost {
  background: rgba(255, 255, 255, 0.1);
  color: var(--fg);
}
.btn:hover .btn__icon {
  transform: translate(2px, -1px) scale(1.06);
}
/* Unified blue-button look + graphite hover lives at the END of the file (must
   come after each button's own hover rule to win source order) — see the
   "Unified blue (primary) buttons" block there. */

/* ---- Meta strip ---- */
.hero__meta {
  margin-top: 56px;
  display: flex;
  gap: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
}
.hero__meta li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hero__meta-num {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.hero__meta-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--fg-mute);
}

/* ============================================================
   Showcase glass card (Double-bezel + spotlight + tilt)
   ============================================================ */
.showcase {
  position: relative;
  perspective: 1400px;
}
.showcase__shell {
  position: relative;
  padding: 8px;
  border-radius: 32px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.015));
  border: 1px solid var(--hairline);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 1px 0 rgba(0, 0, 0, 0.5),
    0 36px 90px -24px rgba(91, 108, 255, 0.35),
    0 60px 140px -40px rgba(0, 0, 0, 0.7);
  transform-style: preserve-3d;
  transition: transform 320ms var(--ease-out);
}
.showcase__core {
  position: relative;
  padding: 28px 28px 24px;
  border-radius: calc(32px - 8px);
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(91, 108, 255, 0.18), transparent 60%),
    linear-gradient(180deg, rgba(20, 22, 38, 0.85), rgba(10, 11, 22, 0.85));
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(91, 108, 255, 0.05);
  overflow: hidden;
}
.showcase__spotlight {
  position: absolute;
  inset: -1px;
  background: radial-gradient(
    280px 220px at var(--mx, 30%) var(--my, 20%),
    rgba(91, 108, 255, 0.2),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 320ms var(--ease-out);
  pointer-events: none;
}
.showcase__shell:hover .showcase__spotlight {
  opacity: 1;
}
.showcase__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.showcase__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 8px;
  border-radius: 999px;
  background: rgba(91, 108, 255, 0.1);
  border: 1px solid rgba(91, 108, 255, 0.25);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #c5cbff;
}
.showcase__chip-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(91, 108, 255, 0.25), 0 0 10px var(--accent);
  animation: pulse 1.8s var(--ease-in-out) infinite;
}
.showcase__head-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.showcase__metric-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 14px;
}
.showcase__metric-row:first-child {
  margin-top: 0;
}
.showcase__metric-label {
  font-size: 13px;
  color: var(--fg-soft);
}
.showcase__metric-value {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.showcase__metric-value--old {
  color: var(--fg-mute);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(236, 237, 245, 0.25);
}
.showcase__metric-value--new {
  color: var(--accent-soft);
}
.showcase__bar {
  height: 6px;
  margin-top: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
  position: relative;
}
.showcase__bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
}
.showcase__bar--old .showcase__bar-fill {
  width: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08));
  animation: bar-old 1.2s var(--ease-out) 0.6s both;
}
.showcase__bar--new .showcase__bar-fill {
  width: 0;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent), var(--accent-soft));
  box-shadow: 0 0 12px rgba(91, 108, 255, 0.6);
  animation: bar-new 1.4s var(--ease-out) 1s both;
}
@keyframes bar-old {
  from { width: 0; }
  to { width: 100%; }
}
@keyframes bar-new {
  from { width: 0; }
  to { width: 4%; }
}
.showcase__foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
}
.showcase__delta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.showcase__delta-num {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--fg);
  background: linear-gradient(180deg, #ffffff, var(--accent-soft));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.showcase__delta-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.showcase__sparkline {
  width: 130px;
  height: 36px;
  opacity: 0.9;
}
.showcase__sparkline path {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: spark-draw 1.6s var(--ease-out) 1.2s forwards;
}
@keyframes spark-draw {
  to { stroke-dashoffset: 0; }
}

/* ---- Floating badge sub-card ---- */
.badge-card {
  position: absolute;
  bottom: -24px;
  left: -28px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 12px 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--hairline-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 20px 40px -16px rgba(0, 0, 0, 0.7);
  transform-style: preserve-3d;
  transition: transform 320ms var(--ease-out);
}
.badge-card__dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #fff, #c5cbff, #5b6cff, #fff);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.4), 0 0 12px rgba(91, 108, 255, 0.5);
  animation: spin 6s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.badge-card__title {
  display: block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.badge-card__sub {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-top: 2px;
}

/* ---- Scroll cue ---- */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 36px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  opacity: 0;
  animation: scroll-in 800ms var(--ease-out) 1.6s forwards;
}
.hero__scroll-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.hero__scroll-line {
  width: 1px;
  height: 48px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1px;
  position: relative;
  overflow: hidden;
}
.hero__scroll-line-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, var(--accent-soft), transparent);
  animation: scroll-line 2.4s var(--ease-in-out) infinite;
}
@keyframes scroll-line {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}
@keyframes scroll-in {
  to { opacity: 1; }
}

/* ============================================================
   BLOCK 2 — Where money leaks · Light theme · Pin-scroll
   ============================================================ */
.loss {
  --bg-light: #f4f5f8;
  --bg-light-soft: #ffffff;
  --fg-light: #14172b;
  --fg-light-soft: rgba(20, 23, 43, 0.7);
  --fg-light-mute: rgba(20, 23, 43, 0.5);
  --hairline-light: rgba(20, 23, 43, 0.08);
  --hairline-light-strong: rgba(20, 23, 43, 0.14);

  position: relative;
  z-index: 2;
  height: 500vh;
}

.loss__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(ellipse 140% 80% at 50% 100%, rgba(91, 108, 255, 0.05), transparent 60%),
    var(--bg-light);
  color: var(--fg-light);
  display: flex;
  align-items: center;
}

/* Light orbs */
.loss__orbs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.loss__orb {
  position: absolute;
  border-radius: 50%;
  /* No blur() filter. A 120px blur on a 56vmax element spawns a huge,
     GPU-expensive composite layer; inside the transform-animated sticky
     pin two of them starved the compositor and made sibling card layers
     paint blank ("white square" bug). The radial gradients are self-soft. */
}
.loss__orb--a {
  width: 56vmax;
  height: 56vmax;
  left: -16vmax;
  top: -22vmax;
  background: radial-gradient(circle, rgba(91, 108, 255, 0.30) 0%, rgba(91, 108, 255, 0.12) 38%, transparent 72%);
  opacity: 0.65;
  animation: drift-a 30s var(--ease-in-out) infinite alternate;
}
.loss__orb--b {
  width: 44vmax;
  height: 44vmax;
  right: -10vmax;
  bottom: -16vmax;
  background: radial-gradient(circle, rgba(255, 156, 200, 0.24) 0%, rgba(255, 156, 200, 0.10) 38%, transparent 72%);
  opacity: 0.55;
  animation: drift-c 34s var(--ease-in-out) infinite alternate;
}
.loss__grain {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  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'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Track */
.loss__track {
  display: flex;
  /* center, NOT stretch: the intro panel is a tall flex sibling (~683px), so
     align-items:stretch would blow every card up to the intro's height (half
     empty). Cards keep their natural height here; equalizeLossCards() in
     script.js measures the tallest CARD and sets a shared min-height so the
     sub-cards are uniform = the tallest card (snug), independent of the intro. */
  align-items: center;
  gap: 32px;
  padding: 0 8vw;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

/* Intro panel */
.loss__intro {
  flex: 0 0 auto;
  width: clamp(420px, 50vw, 620px);
  padding-right: 4vw;
}
.eyebrow--light {
  background: rgba(91, 108, 255, 0.08);
  border-color: rgba(91, 108, 255, 0.18);
  color: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.eyebrow__dot--light {
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(91, 108, 255, 0.2), 0 0 12px var(--accent);
}
.loss__intro-tag {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 4px;
}
.loss__intro-num {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.9;
  background: linear-gradient(180deg, var(--accent-soft), var(--accent), var(--accent-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
  filter: drop-shadow(0 6px 18px rgba(91, 108, 255, 0.25));
}
.loss__title {
  margin: 22px 0 0;
  font-size: clamp(3rem, 7.4vw, 6rem);
  line-height: 0.96;
  letter-spacing: -0.05em;
  font-weight: 600;
  color: var(--fg-light);
}
.loss__title-mark {
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--accent) 50%, var(--accent-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 8px 24px rgba(91, 108, 255, 0.3));
  /* Loosen tracking on cyrillic "ги" pair — at semi-bold + -0.05em
     letter-spacing inherited from .loss__title, the right arm of "г"
     visually glues to the left stem of "и". Bumping to -0.02em gives
     the pair breathing room without breaking the tight display look. */
  letter-spacing: -0.02em;
}
.loss__capsule {
  margin: 28px 0 0;
  max-width: 44ch;
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.55;
  color: var(--fg-light-soft);
  letter-spacing: -0.005em;
}
.loss__hint {
  margin-top: 36px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 8px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid var(--hairline-light);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 12px 24px -10px rgba(20, 30, 80, 0.12);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-light-mute);
}
.loss__hint-arrow {
  display: inline-flex;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 4px 10px rgba(91, 108, 255, 0.4);
  animation: hint-bounce 1.6s var(--ease-in-out) infinite;
}
@keyframes hint-bounce {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(3px, 0); }
}

/* Card */
.loss-card {
  flex: 0 0 auto;
  width: clamp(360px, 30vw, 460px);
  min-height: 480px;
  display: flex;
  flex-direction: column;
  padding: 8px;
  border-radius: 32px;
  /* Solid off-white — no backdrop-filter (that was the main blur cause:
     a backdrop on a translated parent re-blurs every frame). */
  background: linear-gradient(135deg, #ffffff 0%, #f5f6fa 100%);
  border: 1px solid var(--hairline-light);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 1px 0 rgba(255, 255, 255, 0.5),
    0 30px 80px -24px rgba(20, 30, 80, 0.18),
    0 60px 140px -40px rgba(20, 30, 80, 0.1);
  /* Card lives on its own compositor layer (translateZ); parent's
     Math.round'ed integer translate doesn't re-rasterize this layer's
     content. translateY(-8px) lift on active state is integer, scale is
     subtle 1.015x — both safe for crisp text. */
  transform: translate3d(0, 0, 0);
  /* backface-visibility pins the card to a stable compositor texture.
     Without it, Chromium intermittently fails to rasterize the layer's
     content on fast scroll / first paint after refresh — the card flashes
     as a blank white panel. Canonical fix for composited-layer blanking. */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform 600ms var(--ease-out), box-shadow 600ms var(--ease-out);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.loss-card.is-active {
  /* Lift only — NO scale(). Scaling a text-bearing compositor layer forces
     a re-rasterization of the layer texture; during that re-raster the card
     can paint blank white for a frame or two (the "white square" bug).
     Integer translate keeps text crisp and the texture stable.
     (Aligns with CLAUDE.md rule #3: never scale() a text layer.) */
  transform: translate3d(0, -8px, 0);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 1px 0 rgba(255, 255, 255, 0.6),
    0 50px 120px -30px rgba(91, 108, 255, 0.35),
    0 80px 180px -40px rgba(20, 30, 80, 0.12);
}
.loss-card__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 28px 28px 14px;
}
.loss-card__num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--accent);
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(91, 108, 255, 0.08);
  border: 1px solid rgba(91, 108, 255, 0.15);
}
.loss-card__title {
  margin: 0;
  min-height: 2.2em;
  font-size: clamp(1.25rem, 1.8vw, 1.6875rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--fg-light);
  display: flex;
  align-items: flex-end;
}
.loss-card__body {
  padding: 4px 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 28px;
  flex: 1 1 auto;
}
.loss-card__problem {
  margin: 0;
  font-size: 0.90625rem;
  line-height: 1.55;
  color: var(--fg-light-soft);
  letter-spacing: -0.005em;
}
/* Solution flows straight after the problem — no boxed sub-panel. The word
   "Решение" is the divider: large caps in accent, then the solution text. */
.loss-card__solution {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  font-size: 0.90625rem;
  line-height: 1.55;
  color: var(--fg-light);
  letter-spacing: -0.005em;
}
.loss-card__solution-mark {
  display: block;
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: clamp(0.9375rem, 1.3vw, 1rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--accent);
}
.loss-card__foot {
  margin: 8px;
  padding: 22px 22px;
  border-radius: 22px;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(91, 108, 255, 0.35), transparent 60%),
    linear-gradient(160deg, #1a1d35 0%, #0e1023 100%);
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.loss-card__metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.loss-card__metric-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 2.2vw, 2.125rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, #ffffff 0%, #c5cbff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}

/* ============================================================
   Universal count-up reveal — soft blur+opacity fade-in.
   Counters start invisible+blurred; JS animateCounter() adds
   .is-counted, which transitions the value into focus over 900ms
   while the number ticks up. Removes the "hard pop" of values
   appearing as a final integer. Applies to all [data-count-to]
   site-wide (loss-cards, hero meta, KPI, etc).
   ============================================================ */
[data-count-to],
[data-count] {
  opacity: 0;
  filter: blur(10px);
  transition: opacity 900ms var(--ease-out), filter 900ms var(--ease-out);
  will-change: opacity, filter;
}
[data-count-to].is-counted,
[data-count].is-counted {
  opacity: 1;
  filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
  [data-count-to],
  [data-count] { opacity: 1; filter: none; transition: none; }
}
.loss-card__metric-num--text {
  background: linear-gradient(180deg, #ffffff, #8c98ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.loss-card__metric-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.loss-card__metric--small {
  text-align: right;
  flex: 0 0 auto;
}
.loss-card__metric--small .loss-card__metric-num {
  font-size: clamp(1rem, 1.3vw, 1.25rem);
}

/* Dots indicator */
.loss__dots {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}
.loss__dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(20, 23, 43, 0.18);
  cursor: pointer;
  transition: background 280ms var(--ease-out), transform 320ms var(--ease-out), width 320ms var(--ease-out);
}
.loss__dot:hover { background: rgba(20, 23, 43, 0.32); }
.loss__dot:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.loss__dot.is-active {
  background: var(--accent);
  width: 22px;
  border-radius: 999px;
  box-shadow: 0 0 0 3px rgba(91, 108, 255, 0.18), 0 0 12px var(--accent);
}

/* Mobile fallback */
@media (max-width: 900px) {
  .loss { height: auto; }
  .loss__pin {
    position: relative;
    height: auto;
    padding: 96px 20px 120px;
    align-items: stretch;
  }
  .loss__track {
    flex-direction: column;
    transform: none !important;
    padding: 0;
    gap: 20px;
  }
  .loss__intro {
    width: 100%;
    padding-right: 0;
  }
  .loss-card {
    width: 100%;
    transform: none !important;
  }
  .loss__progress, .loss__dots, .loss__hint { display: none; }
}

/* ============================================================
   BLOCK 3 — Solutions · Z-axis stack · Dark theme
   ============================================================ */
.solutions {
  position: relative;
  z-index: 2;
  /* 100vh pin + 250vh runway = 350vh. Original 500vh felt sluggish
     (~9 wheel ticks per card transition); shortened by 30% to ~62vh
     per transition (~5-6 ticks/card). */
  height: 350vh;
}
.solutions__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 50% at 80% 0%, rgba(91, 108, 255, 0.12), transparent 60%),
    radial-gradient(ellipse 100% 60% at 0% 100%, rgba(122, 59, 232, 0.08), transparent 65%),
    var(--bg);
  display: flex;
  flex-direction: column;
  padding: 96px 0 40px;
}
.solutions__orbs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.solutions__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);
  opacity: 0.4;
}
.solutions__orb--a {
  width: 50vmax; height: 50vmax;
  right: -14vmax; top: -18vmax;
  background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
  animation: drift-b 28s var(--ease-in-out) infinite alternate;
}
.solutions__orb--b {
  width: 44vmax; height: 44vmax;
  left: -10vmax; bottom: -16vmax;
  background: radial-gradient(circle, #7a3be8 0%, transparent 70%);
  opacity: 0.3;
  animation: drift-a 32s var(--ease-in-out) infinite alternate;
}

/* Header — full-width 2-column grid: [eyebrow + H2]  |  [counter + lede] */
.solutions__head {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
  gap: 48px;
  align-items: end;
  margin: 0 auto;
  width: 100%;
  max-width: var(--content-max);
  padding: 0 6vw;
  z-index: 5;
}
.solutions__head-main { min-width: 0; }
.solutions__title {
  margin: 18px 0 0;
  font-size: clamp(2.25rem, 4.6vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.045em;
  font-weight: 600;
  color: var(--fg);
  text-wrap: balance;
}
.solutions__title-mark {
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--accent) 50%, var(--accent-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 8px 24px rgba(91, 108, 255, 0.3));
}
/* Counter — slot-machine track, sits in header right column */
.solutions__counter {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  align-self: end;
  justify-self: end;
}
.solutions__counter-num {
  display: inline-block;
  height: 0.92em;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  vertical-align: top;
}
.solutions__counter-track {
  display: flex;
  flex-direction: column;
  transition: transform 600ms cubic-bezier(0.32, 0.72, 0, 1);
}
.solutions__counter-track > span {
  display: block;
  height: 0.92em;
  line-height: 0.92;
  background: linear-gradient(180deg, #ffffff 0%, var(--accent-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.solutions__counter-total {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--fg-mute);
  text-transform: uppercase;
  align-self: flex-end;
  padding-bottom: 0.5em;
}

/* Stack */
.solutions__stack {
  position: relative;
  flex: 1 1 auto;
  width: min(88vw, 1320px);
  /* extra top room for the deck-cascade — card[0] drifts up to -54px
     when fully receded; need >= 54 px clearance from .solutions__head
     plus visual breathing buffer */
  margin: 80px auto 0;
  perspective: 1800px;
  transform-style: preserve-3d;
}

/* Card — solid glass to keep text crisp during scale transforms.
   (backdrop-blur was removed: it computed-against-moving-background
   which manifested as text shimmer / soft edges during the cascade.) */
/* Card — fully opaque, no backdrop-filter:
   - Behind cards never bleed through, so blur is unnecessary
   - Removing backdrop-filter eliminates per-frame GPU recompute that was
     causing the soft / shimmery feel during scroll
   - __glass kept as a static tint layer (specular highlight + indigo wash) */
.solution-card {
  position: absolute;
  inset: 0;
  border-radius: 32px;
  background: linear-gradient(160deg, #14172b 0%, #090b18 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 1px 0 rgba(0, 0, 0, 0.5),
    0 60px 120px -30px rgba(91, 108, 255, 0.3),
    0 80px 200px -50px rgba(0, 0, 0, 0.7);
  will-change: transform, opacity;
  overflow: hidden;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.solution-card__glass {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(140% 100% at 0% 0%, rgba(91, 108, 255, 0.20), transparent 55%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
  pointer-events: none;
}
.solution-card__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 40px;
  height: 100%;
  padding: clamp(28px, 4vw, 56px);
  transform: translateZ(0);
  will-change: transform;
}
/* Short cascade WINDOWS (e.g. MacBook with the Dock visible: 956px screen
   loses ~190px to menu bar + tabs + Dock -> ~760px window). The pinned
   100vh stage keeps fixed 96/80/40px chrome, so the card would lose all
   of that shortfall and clip its content. Compress the stage chrome and
   card padding instead. Cascade-only (>=1025px) — deck sizes itself. */
@media (min-width: 1025px) and (max-height: 840px) {
  .solutions__pin { padding: 52px 0 20px; }
  /* card[0] drifts up to -54px when receding — keep clearance >= 54px */
  .solutions__stack { margin-top: 58px; }
  .solutions__title { font-size: clamp(1.9rem, 3.2vw, 2.6rem); margin-top: 10px; }
  .solutions__counter-num { font-size: clamp(1.9rem, 2.8vw, 2.5rem); }
  .solution-card__inner { padding: clamp(22px, 2.2vw, 34px) clamp(24px, 2.6vw, 40px); }
}
/* Extreme: 13" MacBook with a permanently visible Dock (~706px window). */
@media (min-width: 1025px) and (max-height: 720px) {
  .solutions__pin { padding: 40px 0 14px; }
}
.solution-card__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.solution-card__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-soft);
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(91, 108, 255, 0.08);
  border: 1px solid rgba(91, 108, 255, 0.2);
}
.solution-card__title {
  margin: 22px 0 0;
  font-size: clamp(1.75rem, 3.2vw, 2.625rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 600;
  color: var(--fg);
}
.solution-card__lede {
  margin: 22px 0 0;
  font-size: clamp(0.95rem, 1.1vw, 1.0625rem);
  line-height: 1.55;
  color: var(--fg-soft);
  max-width: 38ch;
  letter-spacing: -0.005em;
}
.solution-card__list {
  margin: 24px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.solution-card__list li {
  position: relative;
  display: block;
  padding-left: 18px;
  font-size: 0.875rem;
  color: var(--fg-soft);
  line-height: 1.5;
}
.solution-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(91, 108, 255, 0.6);
}
.solution-card__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--hairline-strong);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--fg);
  width: fit-content;
  transition: background 240ms var(--ease-out), transform 160ms var(--ease-out);
}
.solution-card__cta:hover {
  background: rgba(255, 255, 255, 0.12);
}
.solution-card__cta:active {
  transform: scale(0.975);
}
.solution-card__cta-icon {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 4px 14px rgba(91, 108, 255, 0.4);
  transition: transform 240ms var(--ease-out);
}
.solution-card__cta:hover .solution-card__cta-icon {
  transform: translate(2px, -1px) scale(1.06);
}

/* Visual right column */
.solution-card__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vis {
  width: 100%;
  height: 100%;
  max-width: 360px;
  max-height: 360px;
}

/* Visual 1: RAG node graph */
.vis--rag .vis__node {
  fill: var(--accent);
  filter: drop-shadow(0 0 10px rgba(91, 108, 255, 0.7));
  transform-origin: center;
  transform-box: fill-box;
  animation: rag-pulse 2.4s var(--ease-in-out) infinite;
  animation-delay: var(--d, 0s);
}
.vis--rag .vis__node--center {
  fill: #fff;
  filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 28px rgba(91, 108, 255, 0.7));
}
@keyframes rag-pulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.45); opacity: 1; }
}

/* Visual 2: Workflow */
.vis--flow .vis__box {
  fill: rgba(255, 255, 255, 0.06);
  stroke: rgba(140, 152, 255, 0.45);
  stroke-width: 1;
  transform-origin: center;
  transform-box: fill-box;
  animation: flow-pulse 3s var(--ease-in-out) infinite;
  animation-delay: var(--d, 0s);
}
.vis--flow .vis__box--accent {
  fill: rgba(91, 108, 255, 0.25);
  stroke: rgba(140, 152, 255, 0.7);
}
@keyframes flow-pulse {
  0%, 70%, 100% { opacity: 0.4; }
  35% { opacity: 1; }
}

/* Visual 3: Wireframe sphere */
.vis--sphere {
  display: flex;
  align-items: center;
  justify-content: center;
}
.sphere {
  position: relative;
  width: clamp(220px, 22vw, 320px);
  aspect-ratio: 1;
  transform-style: preserve-3d;
  animation: sphere-rotate 20s linear infinite;
}
.sphere__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(140, 152, 255, 0.35);
  box-shadow: inset 0 0 40px rgba(91, 108, 255, 0.1);
}
.sphere__ring--1 { transform: rotateY(0deg); }
.sphere__ring--2 { transform: rotateY(36deg); }
.sphere__ring--3 { transform: rotateY(72deg); }
.sphere__ring--4 { transform: rotateY(108deg); }
.sphere__ring--5 { transform: rotateY(144deg); }
.sphere__core {
  position: absolute;
  inset: 35%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-soft), var(--accent) 50%, transparent 80%);
  filter: blur(8px);
}
@keyframes sphere-rotate {
  to { transform: rotateY(360deg); }
}

/* Visual 4: Orbits */
.vis--orbits {
  display: flex;
  align-items: center;
  justify-content: center;
}
.orbits {
  position: relative;
  width: clamp(260px, 26vw, 360px);
  aspect-ratio: 1;
}
.orbits__core {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--accent-soft), var(--accent), var(--accent-deep));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 0 30px rgba(91, 108, 255, 0.7);
}
.orbits__ring {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  border: 1px dashed rgba(140, 152, 255, 0.35);
  transform: translate(-50%, -50%);
  animation: orbits-spin 18s linear infinite;
}
.orbits__ring--1 { width: 60%;  height: 60%;  animation-duration: 12s; }
.orbits__ring--2 { width: 80%;  height: 80%;  animation-duration: 18s; animation-direction: reverse; }
.orbits__ring--3 { width: 100%; height: 100%; animation-duration: 26s; }
.orbits__chip {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(20, 23, 43, 0.9);
  border: 1px solid rgba(91, 108, 255, 0.4);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--accent-soft);
  white-space: nowrap;
  backdrop-filter: blur(8px);
}
@keyframes orbits-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
.orbits__ring .orbits__chip {
  animation: orbits-spin-counter 18s linear infinite;
}
.orbits__ring--1 .orbits__chip { animation-duration: 12s; }
.orbits__ring--2 .orbits__chip { animation-duration: 18s; animation-direction: reverse; }
.orbits__ring--3 .orbits__chip { animation-duration: 26s; }
@keyframes orbits-spin-counter {
  to { transform: translateX(-50%) rotate(-360deg); }
}

/* Small-viewport fallback (phones + small laptops).
   Small laptop = CSS width <= 1280, OR an OS-scaled (125%+) panel with
   CSS width up to 1600 — that covers every 13-14" FHD/2K laptop at any
   common scaling. Here the Z-pin pattern is disabled: header scrolls
   past normally, then each card pins individually via position:sticky.
   This way the card content occupies the full viewport height
   without sharing space with the header.
   KEEP THE MEDIA LIST IN SYNC with initSolutionsStack() in script.js. */
@media (max-width: 1024px), (min-device-aspect-ratio: 17/10) and (max-device-height: 950px), (max-device-height: 820px) {
  .solutions { height: auto; }
  .solutions__pin {
    position: relative;
    height: auto;
    padding: 80px 20px 96px;
    flex-direction: column;
    align-items: stretch;
    /* sticky requires NO overflow on the scroll-ancestor — leave overflow visible */
    overflow: visible;
  }
  .solutions__head {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0;
    margin: 0;
  }
  .solutions__counter { display: none; }
  /* Sticky stack: each card pins at the top and the next scrolls up over it. */
  .solutions__stack {
    width: 100%;
    margin: 24px 0 0;
    perspective: none;
    display: block;
  }
  .solution-card {
    position: sticky;
    top: 80px;
    inset: auto;
    transform: none !important;
    opacity: 1 !important;
    height: auto;
    /* Uniform min-height so every card pins to the same footprint —
       prevents the last (shortest) card leaving the previous one
       sticking out from below. Tuned to the tallest content in this
       block (~540px) with some breathing room. */
    min-height: clamp(520px, 60vh, 580px);
    margin-bottom: 20px;
  }
  /* Stagger top offset so previously-pinned cards peek out at the top
     (visual deck of cards growing upward, matching desktop pattern). */
  .solution-card:nth-of-type(1) { top: 80px; z-index: 1; }
  .solution-card:nth-of-type(2) { top: 92px; z-index: 2; }
  .solution-card:nth-of-type(3) { top: 104px; z-index: 3; }
  .solution-card:nth-of-type(4) { top: 116px; z-index: 4; }
  .solution-card:nth-of-type(5) { top: 128px; z-index: 5; }
  .solution-card:nth-of-type(6) { top: 140px; z-index: 6; }
  .solution-card__inner {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 32px 28px;
  }
  .solution-card__visual {
    aspect-ratio: 1;
    max-height: 280px;
  }
  /* margin-top: auto collapses to 0 here (content fills the deck card), leaving
     the CTA flush against the bullet list — give it a real gap on phones. */
  .solution-card__cta { margin-top: 32px; }
}

/* ============================================================
   BLOCK 4 — Cases · 3-up grid · Magnetic spotlight
   ============================================================ */
.cases {
  position: relative;
  z-index: 2;
  padding: 140px 6vw 120px;
  background: var(--bg);
  overflow: hidden;
}
.cases__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.cases__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);
  opacity: 0.32;
}
.cases__orb--a {
  width: 56vmax;
  height: 56vmax;
  left: -16vmax;
  top: -8vmax;
  background: radial-gradient(circle, var(--accent) 0%, transparent 65%);
}
.cases__orb--b {
  width: 50vmax;
  height: 50vmax;
  right: -14vmax;
  bottom: -14vmax;
  background: radial-gradient(circle, #7a3be8 0%, transparent 65%);
  opacity: 0.26;
}

/* Header */
.cases__head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
  gap: 48px;
  align-items: end;
  max-width: var(--content-max);
  margin: 0 auto 64px;
}
.cases__head-main { min-width: 0; }
.cases__title {
  margin: 18px 0 0;
  font-size: clamp(2.25rem, 4.6vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.045em;
  font-weight: 600;
  color: var(--fg);
  text-wrap: balance;
}
.cases__title-mark {
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--accent) 50%, var(--accent-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 8px 24px rgba(91, 108, 255, 0.3));
}
.cases__head-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  align-self: end;
  justify-self: end;
}
.cases__head-num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.04em;
  background: linear-gradient(180deg, #ffffff 0%, var(--accent-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cases__head-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

/* Grid */
.cases__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  max-width: var(--content-max);
  margin: 0 auto;
}

/* Case card */
.case-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 32px 28px;
  border-radius: 28px;
  background: linear-gradient(160deg, #14172b 0%, #090b18 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 30px 80px -28px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  transition: transform 480ms var(--ease-out), border-color 480ms var(--ease-out),
    box-shadow 480ms var(--ease-out);
}
.case-card:hover {
  transform: translateY(-8px);
  border-color: rgba(91, 108, 255, 0.25);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 50px 120px -30px rgba(91, 108, 255, 0.4),
    0 30px 80px -28px rgba(0, 0, 0, 0.6);
}
.case-card__spotlight {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    420px 320px at var(--mx, 50%) var(--my, 0%),
    rgba(91, 108, 255, 0.22),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 320ms var(--ease-out);
  pointer-events: none;
  border-radius: inherit;
}
.case-card:hover .case-card__spotlight { opacity: 1; }

/* Card head */
.case-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.case-card__num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--accent-soft);
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(91, 108, 255, 0.08);
  border: 1px solid rgba(91, 108, 255, 0.18);
}
.case-card__tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

/* Title + lede */
.case-card__title {
  margin: 4px 0 12px;
  font-size: clamp(1.375rem, 1.7vw, 1.625rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--fg);
}
.case-card__lede {
  margin: 0 0 24px;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--fg-soft);
  letter-spacing: -0.005em;
}

/* Metrics */
.case-card__metrics {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 14px;
  padding: 20px 18px;
  margin-bottom: 22px;
  border-radius: 18px;
  background:
    radial-gradient(140% 100% at 100% 0%, rgba(91, 108, 255, 0.16), transparent 60%),
    linear-gradient(180deg, rgba(91, 108, 255, 0.08), rgba(91, 108, 255, 0.02));
  border: 1px solid rgba(91, 108, 255, 0.16);
}
.case-card__metric {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.case-card__metric-num {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.9vw, 2rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  background: linear-gradient(180deg, #ffffff 0%, var(--accent-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.case-card__metric--big .case-card__metric-num {
  font-size: clamp(2rem, 2.5vw, 2.625rem);
}
.case-card__metric-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
  line-height: 1.3;
}

/* Bullet list */
.case-card__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 22px;
  flex: 1 1 auto;
}
.case-card__list li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-left: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-soft);
}
.case-card__list li::before {
  content: "";
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(91, 108, 255, 0.55);
}

/* Visual */
.case-card__visual {
  position: relative;
  min-height: 60px;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vis-flow, .vis-pulse-wrap {
  width: 100%;
  height: 80px;
}
.vis-bars {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.vis-bars__row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.vis-bars__label {
  flex: 0 0 auto;
  width: 56px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-align: right;
}
.vis-bars__label--old { color: rgba(236, 237, 245, 0.45); }
.vis-bars__label--new { color: var(--accent-soft); }
.vis-bars__track {
  flex: 1 1 auto;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
}
.vis-bars__bar {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
}
.case-card.is-revealed .vis-bars__bar--old {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08));
  animation: vis-bar-old 1.1s var(--ease-out) 0.2s forwards;
}
.case-card.is-revealed .vis-bars__bar--new {
  background: linear-gradient(90deg, var(--accent-deep), var(--accent) 50%, var(--accent-soft));
  box-shadow: 0 0 10px rgba(91, 108, 255, 0.55);
  animation: vis-bar-new 1.3s var(--ease-out) 0.5s forwards;
}
@keyframes vis-bar-old {
  to { width: 100%; }
}
@keyframes vis-bar-new {
  /* 14 sec / (22*60) sec ≈ 1.06%; bumped to 5% for visual minimum */
  to { width: 5%; }
}

/* Flow visual */
.vis-flow {
  width: 100%;
  height: 100%;
}
.vis-flow__path {
  stroke-dasharray: 280;
  stroke-dashoffset: 280;
}
.case-card.is-revealed .vis-flow__path {
  animation: flow-draw 1.6s var(--ease-out) 0.3s forwards;
}
@keyframes flow-draw {
  to { stroke-dashoffset: 0; }
}

/* Pulse visual */
.vis-pulse {
  position: relative;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vis-pulse__core {
  position: relative;
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--accent-soft), var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 0 24px rgba(91, 108, 255, 0.55);
}
.vis-pulse__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(91, 108, 255, 0.4);
  transform: translate(-50%, -50%);
  animation: pulse-ring 2.8s var(--ease-out) infinite;
}
.vis-pulse__ring--2 { animation-delay: 0.7s; }
.vis-pulse__ring--3 { animation-delay: 1.4s; }
@keyframes pulse-ring {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
  100% { transform: translate(-50%, -50%) scale(2.1); opacity: 0; }
}

/* CTA */
.case-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--hairline-strong);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--fg);
  width: fit-content;
  transition: background 240ms var(--ease-out), transform 160ms var(--ease-out);
}
.case-card__cta:hover {
  background: rgba(255, 255, 255, 0.1);
}
.case-card__cta:active {
  transform: scale(0.975);
}
.case-card__cta-icon {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 4px 12px rgba(91, 108, 255, 0.4);
  transition: transform 240ms var(--ease-out);
}
.case-card__cta:hover .case-card__cta-icon {
  transform: translate(2px, -1px) scale(1.06);
}

/* Footer CTA */
.cases__foot {
  margin-top: 56px;
  text-align: center;
}
.cases__foot-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 12px 24px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--hairline-strong);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--fg);
  transition: background 240ms var(--ease-out), transform 160ms var(--ease-out);
}
.cases__foot-cta:hover { background: rgba(255, 255, 255, 0.12); }
.cases__foot-cta:active { transform: scale(0.985); }
.cases__foot-cta-icon {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 6px 16px rgba(91, 108, 255, 0.4);
  transition: transform 240ms var(--ease-out);
}
.cases__foot-cta:hover .cases__foot-cta-icon {
  transform: translate(2px, -1px) scale(1.06);
}

/* Reveal */
.case-card[data-case] {
  opacity: 0;
  transform: translateY(40px);
  filter: blur(8px);
  transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out),
    filter 800ms var(--ease-out);
}
.case-card.is-revealed {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.case-card[data-case="0"].is-revealed { transition-delay: 0ms; }
.case-card[data-case="1"].is-revealed { transition-delay: 120ms; }
.case-card[data-case="2"].is-revealed { transition-delay: 240ms; }

/* Responsive */
@media (max-width: 1080px) {
  .cases__grid { grid-template-columns: 1fr; gap: 20px; }
  .cases__head { grid-template-columns: 1fr; gap: 24px; }
  .cases__head-meta { align-items: flex-start; justify-self: start; flex-direction: row; gap: 14px; align-items: baseline; }
}
@media (max-width: 720px) {
  .cases { padding: 96px 20px 96px; }
  .case-card { padding: 28px 24px; }
}

/* ============================================================
   BLOCK 5 — Process · sticky rail + scroll stages
   ============================================================ */
.process {
  position: relative;
  z-index: 2;
  padding: 140px 6vw 140px;
  background: var(--bg);
  /* No overflow:hidden here — it would break the sticky rail.
     Orbs are clipped by .process__bg's own overflow:hidden. */
}
.process__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.process__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);
  opacity: 0.3;
}
.process__orb--a {
  width: 50vmax;
  height: 50vmax;
  right: -14vmax;
  top: -10vmax;
  background: radial-gradient(circle, var(--accent) 0%, transparent 65%);
}
.process__orb--b {
  width: 44vmax;
  height: 44vmax;
  left: -10vmax;
  bottom: -16vmax;
  background: radial-gradient(circle, #7a3be8 0%, transparent 65%);
  opacity: 0.22;
}

/* Header */
.process__head {
  position: relative;
  max-width: var(--content-max);
  margin: 0 auto 80px;
}
.process__title {
  margin: 18px 0 0;
  font-size: clamp(2.25rem, 4.6vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.045em;
  font-weight: 600;
  color: var(--fg);
  text-wrap: balance;
}
.process__title-mark {
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--accent) 50%, var(--accent-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 8px 24px rgba(91, 108, 255, 0.3));
}
.process__lede {
  margin: 24px 0 0;
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  line-height: 1.55;
  color: var(--fg-soft);
  max-width: 56ch;
  letter-spacing: -0.005em;
}

/* Body — split layout */
.process__body {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 80px;
  max-width: var(--content-max);
  margin: 0 auto;
}

/* Left rail — sticky.
   height:100% guarantees the rail container stretches to the full
   height of the stages column, otherwise sticky has nothing to stick
   inside and detaches early. */
.process__rail {
  position: relative;
  height: 100%;
}
.process__rail-sticky {
  position: sticky;
  top: 132px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.process__step-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.process__step-num {
  display: inline-block;
  height: 0.92em;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: clamp(4rem, 7vw, 6.5rem);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  vertical-align: top;
}
.process__step-num-track {
  display: flex;
  flex-direction: column;
  transition: transform 600ms cubic-bezier(0.32, 0.72, 0, 1);
}
.process__step-num-track > span {
  display: block;
  height: 0.92em;
  line-height: 0.92;
  background: linear-gradient(180deg, #ffffff 0%, var(--accent-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 8px 24px rgba(91, 108, 255, 0.25));
}
.process__step-of {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--fg-mute);
  margin-top: -10px;
}

.process__progress {
  position: relative;
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 8px;
}
.process__progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent), var(--accent-soft));
  box-shadow: 0 0 8px rgba(91, 108, 255, 0.5);
  transition: width 540ms cubic-bezier(0.32, 0.72, 0, 1);
}

.process__dots {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.process__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  transition: width 320ms var(--ease-out), background 320ms var(--ease-out);
}
.process__dot.is-active {
  width: 28px;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(91, 108, 255, 0.18), 0 0 12px var(--accent);
}
.process__dot.is-passed {
  background: rgba(91, 108, 255, 0.55);
}

/* Right column — stages */
.process__stages {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

/* Stage card */
.stage {
  position: relative;
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 32px;
  padding: 32px 36px;
  border-radius: 26px;
  background: linear-gradient(160deg, #14172b 0%, #090b18 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 30px 80px -28px rgba(0, 0, 0, 0.7);
  opacity: 0;
  transform: translateY(40px);
  filter: blur(8px);
  transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out),
    filter 800ms var(--ease-out), border-color 480ms var(--ease-out),
    box-shadow 480ms var(--ease-out);
}
.stage.is-revealed {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.stage.is-active {
  border-color: rgba(91, 108, 255, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 40px 100px -28px rgba(91, 108, 255, 0.32),
    0 30px 80px -28px rgba(0, 0, 0, 0.6);
}
.stage[data-stage="0"].is-revealed { transition-delay: 0ms, 0ms, 0ms, 0ms, 0ms; }
.stage[data-stage="1"].is-revealed { transition-delay: 80ms, 80ms, 80ms, 0ms, 0ms; }
.stage[data-stage="2"].is-revealed { transition-delay: 160ms, 160ms, 160ms, 0ms, 0ms; }
.stage[data-stage="3"].is-revealed { transition-delay: 240ms, 240ms, 240ms, 0ms, 0ms; }

/* Stage icon (left within card) */
.stage__icon {
  width: 88px;
  height: 88px;
  border-radius: 18px;
  background:
    radial-gradient(140% 100% at 0% 0%, rgba(91, 108, 255, 0.18), transparent 60%),
    rgba(91, 108, 255, 0.05);
  border: 1px solid rgba(91, 108, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-soft);
  transition: color 320ms var(--ease-out), border-color 320ms var(--ease-out),
    background 320ms var(--ease-out);
}
.stage__icon svg { width: 44px; height: 44px; }
.stage.is-active .stage__icon {
  color: #fff;
  border-color: rgba(91, 108, 255, 0.4);
  background:
    radial-gradient(140% 100% at 0% 0%, rgba(91, 108, 255, 0.35), transparent 60%),
    rgba(91, 108, 255, 0.12);
  box-shadow: 0 0 24px rgba(91, 108, 255, 0.35);
}

/* Stage body */
.stage__body { min-width: 0; }
.stage__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 12px;
}
.stage__num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--accent-soft);
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(91, 108, 255, 0.08);
  border: 1px solid rgba(91, 108, 255, 0.18);
}
.stage__title {
  margin: 0;
  font-size: clamp(1.5rem, 1.9vw, 1.875rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--fg);
}
.stage__lede {
  margin: 0 0 18px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--fg-soft);
  max-width: 60ch;
  letter-spacing: -0.005em;
}
.stage__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 22px;
}
.stage__list li {
  position: relative;
  display: block;
  padding-left: 15px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--fg-soft);
}
.stage__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(91, 108, 255, 0.5);
}
.stage__list strong {
  color: var(--fg);
  font-weight: 500;
}

.stage__duration {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hairline-strong);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-soft);
}
.stage__duration-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

/* Responsive */
@media (max-width: 980px) {
  .process__body {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .process__rail-sticky {
    position: relative;
    top: auto;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
  }
  .process__step-num { font-size: clamp(2.5rem, 8vw, 4rem); }
  .process__step-of { margin-top: 0; }
  .process__progress { flex: 1 1 100%; }
  .process__dots { width: 100%; }
  .stage { padding: 24px 24px; gap: 20px; grid-template-columns: 64px 1fr; }
  .stage__icon { width: 64px; height: 64px; }
  .stage__icon svg { width: 32px; height: 32px; }
}
@media (max-width: 560px) {
  .process { padding: 96px 20px 96px; }
  .stage { grid-template-columns: 1fr; }
  .stage__icon { width: 56px; height: 56px; }
}

/* ============================================================
   BLOCK 6 — Why us · Bento (founders + differences + trust)
   ============================================================ */
/* "Team chapter" — full light theme.
   Mirrors the loss block's tokens so that, sequentially, the page reads
   dark → light (loss) → dark → dark → dark → LIGHT (why) → dark → ...
   Two separate light "islands" instead of one continuous dark canvas. */
.why {
  /* Local override of theme tokens for the whole section */
  --fg: #14172b;
  --fg-soft: rgba(20, 23, 43, 0.7);
  --fg-mute: rgba(20, 23, 43, 0.5);
  --hairline: rgba(20, 23, 43, 0.08);
  --hairline-strong: rgba(20, 23, 43, 0.14);

  position: relative;
  z-index: 2;
  padding: 140px 6vw 140px;
  background:
    radial-gradient(ellipse 140% 80% at 50% 0%, rgba(91, 108, 255, 0.08), transparent 60%),
    radial-gradient(ellipse 140% 80% at 50% 100%, rgba(122, 59, 232, 0.06), transparent 65%),
    var(--bg-light, #f4f5f8);
  color: var(--fg);
}
.why__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.why__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);
  opacity: 0.5;
}
.why__orb--a {
  width: 56vmax;
  height: 56vmax;
  left: -16vmax;
  top: -22vmax;
  background: radial-gradient(circle, rgba(91, 108, 255, 0.45) 0%, transparent 70%);
}
.why__orb--b {
  width: 44vmax;
  height: 44vmax;
  right: -10vmax;
  bottom: -16vmax;
  background: radial-gradient(circle, rgba(255, 156, 200, 0.32) 0%, transparent 70%);
  opacity: 0.45;
}

/* Header */
.why__head {
  position: relative;
  max-width: var(--content-max);
  margin: 0 auto 64px;
}
.why__title {
  margin: 18px 0 0;
  font-size: clamp(2.25rem, 4.6vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.045em;
  font-weight: 600;
  color: var(--fg);
  text-wrap: balance;
}
.why__title-mark {
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--accent) 50%, var(--accent-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 8px 24px rgba(91, 108, 255, 0.3));
}
.why__lede {
  margin: 24px 0 0;
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  line-height: 1.55;
  color: var(--fg-soft);
  max-width: 60ch;
  letter-spacing: -0.005em;
}

/* Bento grid — 12 columns */
.why__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 22px;
  max-width: var(--content-max);
  margin: 0 auto;
}

/* Generic card — light glass */
.why-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 32px 28px;
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.72));
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--hairline);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 1px 0 rgba(255, 255, 255, 0.5),
    0 30px 80px -24px rgba(20, 30, 80, 0.18),
    0 60px 140px -40px rgba(20, 30, 80, 0.1);
  overflow: hidden;
  opacity: 0;
  transform: translateY(40px);
  filter: blur(8px);
  transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out),
    filter 800ms var(--ease-out), border-color 480ms var(--ease-out),
    box-shadow 480ms var(--ease-out), translate 360ms var(--ease-out);
}
.why-card.is-revealed {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
/* 6 delay values to match the 6 transitioned props (opacity, transform, filter,
   border-color, box-shadow, translate). The 6th (translate) is ALWAYS 0 so the
   hover lift fires instantly — only the reveal props carry the per-card stagger.
   (With 5 values the list cycled and translate inherited the stagger delay.) */
.why-card[data-reveal-card="0"].is-revealed { transition-delay: 0ms, 0ms, 0ms, 0ms, 0ms, 0ms; }
.why-card[data-reveal-card="1"].is-revealed { transition-delay: 80ms, 80ms, 80ms, 0ms, 0ms, 0ms; }
.why-card[data-reveal-card="2"].is-revealed { transition-delay: 160ms, 160ms, 160ms, 0ms, 0ms, 0ms; }
.why-card[data-reveal-card="3"].is-revealed { transition-delay: 200ms, 200ms, 200ms, 0ms, 0ms, 0ms; }
.why-card[data-reveal-card="4"].is-revealed { transition-delay: 240ms, 240ms, 240ms, 0ms, 0ms, 0ms; }
.why-card[data-reveal-card="5"].is-revealed { transition-delay: 320ms, 320ms, 320ms, 0ms, 0ms, 0ms; }
.why-card[data-reveal-card="6"].is-revealed { transition-delay: 360ms, 360ms, 360ms, 0ms, 0ms, 0ms; }
.why-card[data-reveal-card="7"].is-revealed { transition-delay: 400ms, 400ms, 400ms, 0ms, 0ms, 0ms; }

/* Lift every card on hover (desktop). Uses the independent `translate` property
   so it never collides with the reveal `transform` or its per-card stagger delay. */
@media (hover: hover) {
  .why-card:hover { translate: 0 -8px; }
}

/* Founder card — col-span 6, portrait-split layout */
.why-founder {
  grid-column: span 6;
  padding: 0;
  min-height: 380px;
  display: grid;
  grid-template-columns: minmax(160px, 38%) 1fr;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(91, 108, 255, 0.08), transparent 55%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.75));
}
.why-founder:hover {
  border-color: rgba(91, 108, 255, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 50px 120px -28px rgba(91, 108, 255, 0.32),
    0 60px 140px -40px rgba(20, 30, 80, 0.15);
}
.why-founder__portrait {
  position: relative;
  min-height: 100%;
  background-color: #d0cfd6;
  background-image: var(--portrait-img),
    linear-gradient(180deg, #c9c8cf 0%, #d4d3da 100%);
  background-size: var(--portrait-size, cover), cover;
  background-position: var(--portrait-pos, center top), center;
  background-repeat: no-repeat, no-repeat;
}
.why-founder__portrait::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 60%, rgba(255, 255, 255, 0.55) 88%, rgba(255, 255, 255, 0.92) 100%),
    radial-gradient(80% 60% at 30% 30%, rgba(91, 108, 255, 0.10), transparent 70%);
  pointer-events: none;
}
.why-founder__body {
  padding: 36px 36px 32px;
  display: flex;
  flex-direction: column;
}
.why-founder__role {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.why-founder__role-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--accent);
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(91, 108, 255, 0.1);
  border: 1px solid rgba(91, 108, 255, 0.22);
}
.why-founder__role-years {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--fg-mute);
  text-transform: uppercase;
}
.why-founder__name {
  margin: 0 0 14px;
  font-size: clamp(1.5rem, 1.9vw, 1.875rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--fg);
}
.why-founder__bio {
  margin: 0 0 24px;
  font-size: 0.90625rem;
  line-height: 1.55;
  color: var(--fg-soft);
  letter-spacing: -0.005em;
  max-width: 42ch;
  flex: 1 1 auto;
}
.why-founder__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.why-founder__tags span {
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  background: rgba(20, 23, 43, 0.04);
  border: 1px solid var(--hairline-strong);
  color: var(--fg-soft);
}

/* Difference card — col-span 4 */
.why-diff {
  grid-column: span 4;
  min-height: 240px;
}
.why-diff:hover,
.why-trust:hover {
  border-color: rgba(91, 108, 255, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 40px 100px -30px rgba(91, 108, 255, 0.32),
    0 50px 120px -40px rgba(20, 30, 80, 0.14);
}
.why-diff__num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 3.6vw, 3.25rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--accent) 50%, var(--accent-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 16px rgba(91, 108, 255, 0.25));
  margin-bottom: 14px;
}
.why-diff__title {
  margin: 0 0 12px;
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--fg);
}
.why-diff__copy {
  margin: 0 0 18px;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--fg-soft);
  letter-spacing: -0.005em;
  flex: 1 1 auto;
}
.why-diff__chip {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(91, 108, 255, 0.08);
  border: 1px solid rgba(91, 108, 255, 0.25);
  color: var(--accent);
}

/* Trust signals row */
.why-trust { padding: 28px 32px; }
.why-trust--main {
  grid-column: span 6;
  flex-direction: row;
  align-items: center;
  gap: 28px;
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(91, 108, 255, 0.14), transparent 60%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.78));
}
.why-trust__main-emblem {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 24px rgba(91, 108, 255, 0.45));
}
.why-trust__main-emblem-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.why-trust__main-text { min-width: 0; }
.why-trust__main-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.why-trust__main-title {
  margin: 6px 0 8px;
  font-size: clamp(1.375rem, 1.7vw, 1.625rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--fg);
}
.why-trust__main-sub {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fg-soft);
  max-width: 48ch;
}

.why-trust--geo, .why-trust--langs {
  grid-column: span 3;
  text-align: left;
  justify-content: center;
}
.why-trust__num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4vw, 3.25rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--accent) 50%, var(--accent-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 16px rgba(91, 108, 255, 0.25));
}
.why-trust__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-top: 6px;
  margin-bottom: 18px;
}
.why-trust__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.why-trust__chips span {
  padding: 5px 11px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  background: rgba(91, 108, 255, 0.08);
  border: 1px solid rgba(91, 108, 255, 0.22);
  color: var(--accent);
}
.why-trust__chips--lang span {
  background: rgba(20, 23, 43, 0.04);
  border-color: var(--hairline-strong);
  color: var(--fg-soft);
}

/* Responsive — collapse bento */
@media (max-width: 1080px) {
  .why-founder { grid-column: span 12; grid-template-columns: minmax(200px, 34%) 1fr; }
  .why-diff { grid-column: span 12; min-height: 200px; }
  .why-trust--main { grid-column: span 12; }
  .why-trust--geo, .why-trust--langs { grid-column: span 6; }
}
@media (max-width: 720px) {
  .why { padding: 96px 20px; }
  .why-card { padding: 28px 24px; }
  .why-founder {
    padding: 0;
    grid-template-columns: 1fr;
    grid-template-rows: 280px 1fr;
    min-height: 0;
  }
  .why-founder__body { padding: 28px 24px 26px; }
  .why-founder__portrait::after {
    background:
      linear-gradient(180deg, transparent 55%, rgba(255, 255, 255, 0.55) 88%, rgba(255, 255, 255, 0.92) 100%),
      linear-gradient(180deg, rgba(91, 108, 255, 0.08) 0%, transparent 30%, rgba(20, 30, 80, 0.18) 100%);
  }
  /* Reset Marina's desktop-only auto-height sizing on narrow mobile widths.
     Inline `--portrait-size: auto 115%` makes the image too narrow to cover a
     full-width stacked portrait area, leaving grey strips on either side.
     Force cover here so the photo fills the container edge-to-edge.
     P_y=78% lifts her head to ~30 CSS px to match Evgeniy's mobile head-top
     (≈26.5 CSS px) within a couple of pixels. */
  .why-founder__portrait--alt {
    background-size: cover, cover;
    background-position: 50% 78%, center;
  }
  .why-trust--main { flex-direction: column; align-items: flex-start; gap: 18px; }
  .why-trust--geo, .why-trust--langs { grid-column: span 12; }
}

/* ============================================================
   BLOCK 7 — Geography map + Reviews carousel · Dark theme
   ============================================================ */
.geo {
  position: relative;
  z-index: 2;
  padding: 140px 6vw 140px;
  background: var(--bg);
}
.geo__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.geo__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);
  opacity: 0.32;
}
.geo__orb--a {
  width: 56vmax; height: 56vmax;
  left: -16vmax; top: -10vmax;
  background: radial-gradient(circle, var(--accent) 0%, transparent 65%);
}
.geo__orb--b {
  width: 44vmax; height: 44vmax;
  right: -12vmax; bottom: -16vmax;
  background: radial-gradient(circle, #7a3be8 0%, transparent 65%);
  opacity: 0.24;
}

/* Header */
.geo__head {
  position: relative;
  max-width: var(--content-max);
  margin: 0 auto 64px;
}
.geo__title {
  margin: 18px 0 0;
  font-size: clamp(2.25rem, 4.6vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.045em;
  font-weight: 600;
  color: var(--fg);
  text-wrap: balance;
}
.geo__title-mark {
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--accent) 50%, var(--accent-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 8px 24px rgba(91, 108, 255, 0.3));
}
.geo__lede {
  margin: 24px 0 0;
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  line-height: 1.55;
  color: var(--fg-soft);
  max-width: 60ch;
  letter-spacing: -0.005em;
}

/* Main: map left, stats right */
.geo__main {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 360px);
  gap: 32px;
  max-width: var(--content-max);
  margin: 0 auto 96px;
}

/* Map container — image-backed (Gemini-generated Europe map). The asset
   already contains: dark navy background, faint grid overlay, central
   purple radial glow, country outlines (UK/FR/NL/AT/PL/UA/ES highlighted),
   and dashed connector arcs from UA. Pulse pins are overlaid in HTML. */
.geo__map {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 28px;
  overflow: hidden;
  background:
    linear-gradient(160deg, rgba(20, 20, 50, 0.0), rgba(10, 11, 24, 0.0)),
    url("./assets/map-europe.webp") center/cover no-repeat,
    #06070f;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 30px 80px -28px rgba(0, 0, 0, 0.7);
}

/* Pin */
.geo-pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.geo-pin__core {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow:
    0 0 0 2px rgba(91, 108, 255, 0.25),
    0 0 12px var(--accent),
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.6);
  z-index: 2;
}
.geo-pin__pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  animation: geo-pin-pulse 2.8s var(--ease-out) infinite;
}
.geo-pin__pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--accent-soft);
  animation: geo-pin-pulse 2.8s var(--ease-out) 1.4s infinite;
}
@keyframes geo-pin-pulse {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(4); opacity: 0; }
}
.geo-pin__label {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(20, 23, 43, 0.95);
  border: 1px solid rgba(91, 108, 255, 0.3);
  backdrop-filter: blur(8px);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--accent-soft);
  white-space: nowrap;
  z-index: 3;
}
.geo-pin--hub .geo-pin__core {
  width: 14px;
  height: 14px;
  box-shadow:
    0 0 0 3px rgba(91, 108, 255, 0.3),
    0 0 18px var(--accent),
    inset 0 0 0 2px rgba(255, 255, 255, 0.7);
}

/* Inset cards (US, KZ) — image-backed.
   The map-insets.png file packs both country illustrations side-by-side
   in their own glass frames; we expose either the LEFT half (US) or the
   RIGHT half (KZ) by stretching the bg to 200% width and shifting
   background-position. Each inset is square so the half-image fits cleanly. */
.geo-inset {
  position: absolute;
  width: clamp(120px, 13vw, 168px);
  aspect-ratio: 1;
  border-radius: 16px;
  overflow: hidden;
  background-image: url("./assets/map-insets.webp");
  background-size: 200% 100%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.5));
}
.geo-inset--us {
  top: 18px;
  left: 18px;
  background-position: left center;
}
.geo-inset--kz {
  bottom: 18px;
  right: 18px;
  background-position: right center;
}
.geo-inset__name {
  position: absolute;
  left: 14px;
  bottom: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-soft);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}
.geo-inset__count {
  position: absolute;
  top: 10px;
  right: 14px;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.6vw, 1.75rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(180deg, #ffffff 0%, var(--accent-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 12px rgba(91, 108, 255, 0.3);
}

/* Stats sidebar */
.geo__stats {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.geo-stat {
  padding: 24px 26px;
  border-radius: 22px;
  background: linear-gradient(160deg, #14172b 0%, #090b18 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 30px 80px -28px rgba(0, 0, 0, 0.7);
}
.geo-stat__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 2.6vw, 2.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(180deg, #ffffff 0%, var(--accent-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.geo-stat__label {
  display: block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.geo-stat--note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fg-soft);
  background: rgba(91, 108, 255, 0.04);
  border-color: rgba(91, 108, 255, 0.15);
}
.geo-stat__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  color: var(--accent-soft);
}

/* ===== Reviews carousel ===== */
.reviews {
  max-width: var(--content-max);
  margin: 0 auto;
  position: relative;
}
.reviews__head {
  margin-bottom: 36px;
}
.reviews__title {
  margin: 16px 0 0;
  font-size: clamp(1.875rem, 3.4vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: 600;
  color: var(--fg);
}
/* Marquee viewport — clips overflow, fades edges */
.reviews__marquee {
  position: relative;
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  overflow: hidden;
  padding: 8px 0 16px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
/* Track — twice the original cards, animated continuously */
.reviews__track {
  display: flex;
  gap: 22px;
  width: max-content;
  animation: reviews-marquee 60s linear infinite;
  will-change: transform;
}
.reviews__marquee:hover .reviews__track {
  animation-play-state: paused;
}
@keyframes reviews-marquee {
  from { transform: translate3d(0, 0, 0); }
  /* -50% = exactly the width of one original set,
     so the duplicate set lands where the original started → seamless */
  to   { transform: translate3d(-50%, 0, 0); }
}

.review {
  flex: 0 0 auto;
  width: clamp(300px, 32vw, 400px);
  display: flex;
  flex-direction: column;
  padding: 32px 32px 28px;
  border-radius: 24px;
  background: linear-gradient(160deg, #14172b 0%, #090b18 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 30px 80px -28px rgba(0, 0, 0, 0.7);
  position: relative;
  overflow: hidden;
}
.review__mark {
  font-family: Georgia, serif;
  font-size: 80px;
  line-height: 0.5;
  color: rgba(91, 108, 255, 0.3);
  font-weight: 700;
  margin-bottom: 12px;
  height: 32px;
  display: flex;
  align-items: center;
}
.review__quote {
  margin: 0 0 28px;
  font-size: clamp(0.9375rem, 1.05vw, 1rem);
  line-height: 1.55;
  color: var(--fg);
  letter-spacing: -0.005em;
  flex: 1 1 auto;
}
.review__author {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.review__avatar {
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: conic-gradient(from 220deg, var(--accent), var(--accent-soft), var(--accent-deep), var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.3), 0 0 14px rgba(91, 108, 255, 0.4);
}
/* Real client photo sits on top of the gradient+initials fallback; if the image
   404s, the monogram shows through. Clipped to the circle by the parent. */
.review__avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.review__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.review__name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--fg);
  letter-spacing: -0.005em;
}
.review__role {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--fg-mute);
}

/* Reduce-motion: pause the marquee for users who prefer no animation */
@media (prefers-reduced-motion: reduce) {
  .reviews__track {
    animation: none;
  }
}

/* Responsive */
@media (max-width: 980px) {
  .geo__main { grid-template-columns: 1fr; }
  .geo-inset { min-width: 100px; padding: 10px 12px; }
  .geo-inset__count { font-size: 18px; top: 10px; right: 12px; }
}
@media (max-width: 720px) {
  .geo { padding: 96px 20px; }
  .review { width: 84vw; }

  /* Shrink US / KZ inset cards so they don't swallow the European map */
  .geo-inset { width: 52px; border-radius: 9px; }
  .geo-inset--us { top: 6px; left: 6px; }
  .geo-inset--kz { bottom: 6px; right: 6px; }
  .geo-inset__name {
    font-size: 6.5px;
    letter-spacing: 0.06em;
    left: 5px;
    bottom: 3px;
  }

  /* Smaller country pins + labels so they stop overlapping */
  .geo-pin { width: 9px; height: 9px; }
  .geo-pin__core { width: 6px; height: 6px; }
  .geo-pin--hub .geo-pin__core { width: 9px; height: 9px; }
  .geo-pin__label {
    font-size: 8px;
    padding: 1px 5px;
    letter-spacing: 0.05em;
    top: calc(100% + 4px);
  }
  /* Zigzag labels for the cluster of close pins (UK / FR / NL / AT / PL) so
     they stop colliding. nth-child order on the map matches the HTML order:
     1=UA hub, 2=UK, 3=FR, 4=NL, 5=AT, 6=PL, 7=ES */
  .geo-pin:nth-child(2) .geo-pin__label,
  .geo-pin:nth-child(4) .geo-pin__label,
  .geo-pin:nth-child(6) .geo-pin__label {
    top: auto;
    bottom: calc(100% + 4px);
  }
  /* Tame the pulse halo radius so neighbouring pins don't smear into each other */
  .geo-pin__pulse { animation-name: geo-pin-pulse-sm; }
  .geo-pin__pulse::after { animation-name: geo-pin-pulse-sm; }
}
@keyframes geo-pin-pulse-sm {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* ============================================================
   BLOCK 8 — Pricing · 3 tiers + support + ROI CTA · Dark
   ============================================================ */
.pricing {
  position: relative;
  z-index: 2;
  padding: 140px 6vw 140px;
  background: var(--bg);
  overflow: hidden;
}
.pricing__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.pricing__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);
  opacity: 0.32;
}
.pricing__orb--a {
  width: 56vmax; height: 56vmax;
  left: -16vmax; top: -10vmax;
  background: radial-gradient(circle, var(--accent) 0%, transparent 65%);
}
.pricing__orb--b {
  width: 48vmax; height: 48vmax;
  right: -14vmax; bottom: -16vmax;
  background: radial-gradient(circle, #7a3be8 0%, transparent 65%);
  opacity: 0.24;
}

/* Header */
.pricing__head {
  position: relative;
  max-width: var(--content-max);
  margin: 0 auto 64px;
}
.pricing__title {
  margin: 18px 0 0;
  font-size: clamp(2.25rem, 4.6vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.045em;
  font-weight: 600;
  color: var(--fg);
  text-wrap: balance;
}
.pricing__title-mark {
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--accent) 50%, var(--accent-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 8px 24px rgba(91, 108, 255, 0.3));
}
.pricing__lede {
  margin: 24px 0 0;
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  line-height: 1.55;
  color: var(--fg-soft);
  max-width: 60ch;
  letter-spacing: -0.005em;
}

/* Tiers grid: side / featured / side, featured slightly wider */
.pricing__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 22px;
  max-width: var(--content-max);
  margin: 0 auto;
  align-items: stretch;
}

/* Tier card */
.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 32px 28px;
  border-radius: 26px;
  background: linear-gradient(160deg, #14172b 0%, #090b18 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 30px 80px -28px rgba(0, 0, 0, 0.7);
  transition: transform 480ms var(--ease-out), border-color 480ms var(--ease-out),
    box-shadow 480ms var(--ease-out);
  opacity: 0;
  transform: translateY(40px);
  filter: blur(8px);
}
.tier.is-revealed {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.tier:hover {
  transform: translateY(-6px);
  border-color: rgba(91, 108, 255, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 50px 120px -30px rgba(91, 108, 255, 0.32),
    0 30px 80px -28px rgba(0, 0, 0, 0.6);
}

/* Featured (centre) — visually elevated */
.tier--featured {
  padding: 40px 32px 36px;
  background:
    radial-gradient(140% 100% at 50% 0%, rgba(91, 108, 255, 0.22), transparent 55%),
    linear-gradient(160deg, #1a1d35 0%, #0a0c1a 100%);
  border-color: rgba(91, 108, 255, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 1px 0 rgba(91, 108, 255, 0.18),
    0 60px 140px -30px rgba(91, 108, 255, 0.42),
    0 30px 80px -28px rgba(0, 0, 0, 0.7);
}
.tier--featured:hover {
  transform: translateY(-10px);
}
.tier__ribbon {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-soft) 50%, var(--accent-deep) 100%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 22px -4px rgba(91, 108, 255, 0.55);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
}
.tier__ribbon-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px #fff;
  animation: pulse 2s var(--ease-in-out) infinite;
}

/* Tier head */
.tier__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 22px;
}
.tier__badge {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg);
}
.tier--featured .tier__badge {
  color: var(--accent-soft);
}
.tier__sub {
  font-size: 13px;
  color: var(--fg-mute);
  letter-spacing: -0.005em;
}

/* Price */
.tier__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.tier__price-from {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.tier__price-num {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 3.6vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.tier--featured .tier__price-num {
  background: linear-gradient(180deg, #ffffff 0%, var(--accent-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 16px rgba(91, 108, 255, 0.3));
}
.tier__price-period {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-left: 2px;
}

/* Duration */
.tier__duration {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hairline-strong);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-soft);
  margin-bottom: 22px;
}
.tier--featured .tier__duration {
  background: rgba(91, 108, 255, 0.08);
  border-color: rgba(91, 108, 255, 0.25);
  color: var(--accent-soft);
}
.tier__duration-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

/* Price note (web-dev: "от €X, точная сумма — сметой по скоупу") */
.tier__price-note {
  margin: -2px 0 16px;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--fg-mute);
  letter-spacing: -0.005em;
}

/* Retainer / optional add-ons strip under the tiers */
.pricing__addon {
  position: relative;
  max-width: var(--content-max);
  margin: 22px auto 0;
  padding: 28px 30px;
  border-radius: 24px;
  background: linear-gradient(160deg, rgba(26, 29, 53, 0.55) 0%, rgba(9, 11, 24, 0.55) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.pricing__addon-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
  margin-bottom: 20px;
}
.pricing__addon-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-soft);
  white-space: nowrap;
}
.pricing__addon-note {
  margin: 0;
  flex: 1 1 320px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--fg-soft);
}
.pricing__addon-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.pricing__addon-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pricing__addon-item {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 18px 20px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--hairline-strong);
  transition: transform 320ms var(--ease-out), border-color 320ms var(--ease-out),
    background 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
}
.pricing__addon-item:hover {
  transform: translateY(-4px);
  border-color: rgba(91, 108, 255, 0.4);
  background: rgba(91, 108, 255, 0.06);
  box-shadow: 0 24px 50px -28px rgba(91, 108, 255, 0.5);
}
.pricing__addon-name {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.pricing__addon-price {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.pricing__addon-desc {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--fg-soft);
}
@media (max-width: 880px) {
  .pricing__addon-grid,
  .pricing__addon-grid--2 {
    grid-template-columns: 1fr;
  }
}

/* Accent notice above the tiers (homepage): indicative prices → service pages.
   Attention via a soft breathing glow + a pulsing indicator dot. Reduced-motion safe. */
.pricing__notice {
  position: relative;
  max-width: var(--content-max);
  margin: 4px auto 44px;
  padding: 18px 26px;
  border-radius: 18px;
  background:
    radial-gradient(120% 180% at 0% 0%, rgba(91, 108, 255, 0.16), transparent 60%),
    linear-gradient(180deg, rgba(22, 25, 46, 0.55), rgba(10, 12, 26, 0.55));
  border: 1px solid rgba(91, 108, 255, 0.32);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 30px;
  animation: notice-breathe 3.6s var(--ease-in-out) infinite;
}
@keyframes notice-breathe {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(91, 108, 255, 0.12), 0 16px 44px -30px rgba(91, 108, 255, 0.5);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(140, 152, 255, 0.45), 0 22px 64px -22px rgba(91, 108, 255, 0.95);
  }
}
.pricing__notice-main {
  flex: 1 1 340px;
}
.pricing__notice-head {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 7px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-soft);
}
.pricing__notice-text {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--fg-soft);
}
.pricing__notice-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
  animation: pulse 2s var(--ease-in-out) infinite;
}
.pricing__notice-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 0 1 auto;
}
.pricing__notice-links a {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 999px;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--accent) 50%, var(--accent-deep) 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2),
    0 14px 28px -12px var(--accent-glow),
    0 2px 6px rgba(0, 0, 0, 0.35);
  transition: transform 160ms var(--ease-out), background 320ms var(--ease-out),
    border-color 220ms var(--ease-out), box-shadow 320ms var(--ease-out);
}
.pricing__notice-links a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.35), transparent 60%);
  pointer-events: none;
}
.pricing__notice-links a:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, #454b63 0%, #2b3046 50%, #181c2e 100%);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 16px 32px -12px rgba(0, 0, 0, 0.55),
    0 2px 6px rgba(0, 0, 0, 0.4);
}
.pricing__notice-links a:active { transform: scale(0.98); }
@media (max-width: 760px) {
  .pricing__notice { padding: 16px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .pricing__notice { animation: none; box-shadow: 0 0 0 1px rgba(91, 108, 255, 0.3); }
  .pricing__notice-dot { animation: none; }
}

/* Feature list */
.tier__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 28px;
  flex: 1 1 auto;
}
.tier__list li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--fg-soft);
}
.tier__list li::before {
  content: "";
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 3px;
  border-radius: 50%;
  background: rgba(91, 108, 255, 0.12);
  border: 1px solid rgba(91, 108, 255, 0.3);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'><path d='M3.5 7l2.5 2.5L10.5 4.5' stroke='%238c98ff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-size: 12px 12px;
  background-position: center;
  background-repeat: no-repeat;
}

/* Tier CTA */
.tier__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--hairline-strong);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--fg);
  align-self: stretch;
  justify-content: space-between;
  transition: background 240ms var(--ease-out), border-color 240ms var(--ease-out), transform 160ms var(--ease-out);
}
.tier__cta:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.36); }
.tier__cta:active { transform: scale(0.985); }
.tier__cta-icon {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(91, 108, 255, 0.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-soft);
  transition: transform 240ms var(--ease-out), background 240ms var(--ease-out);
}
.tier__cta:hover .tier__cta-icon {
  transform: translate(2px, -1px);
  background: rgba(91, 108, 255, 0.25);
}
.tier__cta--primary {
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--accent) 50%, var(--accent-deep) 100%);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 16px 32px -10px rgba(91, 108, 255, 0.55);
}
.tier__cta--primary:hover { filter: brightness(1.06); background: linear-gradient(180deg, var(--accent-soft) 0%, var(--accent) 50%, var(--accent-deep) 100%); }
.tier__cta--primary .tier__cta-icon {
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
}

/* ROI CTA — long horizontal call-out card */
.pricing__roi {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, auto);
  gap: 32px;
  align-items: center;
  max-width: var(--content-max);
  margin: 96px auto 0;
  padding: 40px 44px;
  border-radius: 28px;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(91, 108, 255, 0.22), transparent 55%),
    linear-gradient(160deg, #14172b 0%, #090b18 100%);
  border: 1px solid rgba(91, 108, 255, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 50px 120px -30px rgba(91, 108, 255, 0.35),
    0 30px 80px -28px rgba(0, 0, 0, 0.7);
  opacity: 0;
  transform: translateY(40px);
  filter: blur(8px);
  transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out),
    filter 800ms var(--ease-out);
}
.pricing__roi.is-revealed {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.pricing__roi-title {
  margin: 14px 0 12px;
  font-size: clamp(1.625rem, 2.6vw, 2.125rem);
  line-height: 1.1;
  letter-spacing: -0.035em;
  font-weight: 600;
  color: var(--fg);
}
.pricing__roi-copy {
  margin: 0;
  font-size: 0.90625rem;
  line-height: 1.55;
  color: var(--fg-soft);
  max-width: 56ch;
}
.pricing__roi-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 14px 26px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--accent) 50%, var(--accent-deep) 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2),
    0 16px 32px -10px rgba(91, 108, 255, 0.55);
  transition: filter 220ms var(--ease-out), transform 160ms var(--ease-out);
  white-space: nowrap;
}
.pricing__roi-cta:hover { filter: brightness(1.06); }
.pricing__roi-cta:active { transform: scale(0.98); }
.pricing__roi-cta-icon {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform 220ms var(--ease-out);
}
.pricing__roi-cta:hover .pricing__roi-cta-icon {
  transform: translate(2px, -1px) scale(1.06);
}

/* Reveal stagger */
.tier[data-reveal-card="0"].is-revealed { transition-delay: 0ms, 0ms, 0ms; }
.tier[data-reveal-card="1"].is-revealed { transition-delay: 80ms, 80ms, 80ms; }
.tier[data-reveal-card="2"].is-revealed { transition-delay: 160ms, 160ms, 160ms; }

/* Responsive */
@media (max-width: 980px) {
  .pricing__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .tier--featured { padding: 36px 28px 32px; }
  .pricing__roi {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 32px 28px;
  }
  .pricing__roi-cta { width: fit-content; }
}
@media (max-width: 720px) {
  .pricing { padding: 96px 20px; }
  .tier { padding: 28px 24px; }
}

/* ============================================================
   BLOCK 9 — FAQ · single-open accordion
   ============================================================ */
.faq {
  position: relative;
  z-index: 2;
  padding: 140px 6vw 140px;
  background: var(--bg);
}
.faq__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.faq__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);
  opacity: 0.28;
}
.faq__orb--a {
  width: 50vmax;
  height: 50vmax;
  right: -14vmax;
  top: -10vmax;
  background: radial-gradient(circle, var(--accent) 0%, transparent 65%);
}
.faq__orb--b {
  width: 44vmax;
  height: 44vmax;
  left: -12vmax;
  bottom: -16vmax;
  background: radial-gradient(circle, #7a3be8 0%, transparent 65%);
  opacity: 0.22;
}

/* Header */
.faq__head {
  position: relative;
  max-width: 1000px;
  margin: 0 auto 56px;
  text-align: center;
}
.faq__head .eyebrow { margin: 0 auto; }
.faq__title {
  margin: 22px 0 0;
  font-size: clamp(2.25rem, 4.6vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.045em;
  font-weight: 600;
  color: var(--fg);
  text-wrap: balance;
}
.faq__title-mark {
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--accent) 50%, var(--accent-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 8px 24px rgba(91, 108, 255, 0.3));
}
.faq__lede {
  margin: 24px auto 0;
  font-size: clamp(1rem, 1.15vw, 1.0625rem);
  line-height: 1.55;
  color: var(--fg-soft);
  max-width: 56ch;
  letter-spacing: -0.005em;
}

/* Accordion list */
.faq__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 920px;
  margin: 0 auto;
}

/* FAQ item — using <details> with grid-template-rows trick for smooth height */
.faq-item {
  position: relative;
  border-radius: 22px;
  background: linear-gradient(160deg, #14172b 0%, #090b18 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 30px 80px -28px rgba(0, 0, 0, 0.65);
  overflow: hidden;
  opacity: 0;
  transform: translateY(24px);
  filter: blur(6px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out),
    filter 700ms var(--ease-out), border-color 380ms var(--ease-out),
    box-shadow 380ms var(--ease-out);
}
.faq-item.is-revealed {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
/* FAQ reveal stagger is set per-batch in JS (initRevealCards) so it cascades
   for any number of questions, not just the first six. */

/* Open state */
.faq-item[open] {
  border-color: rgba(91, 108, 255, 0.32);
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(91, 108, 255, 0.16), transparent 55%),
    linear-gradient(160deg, #14172b 0%, #090b18 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 50px 120px -30px rgba(91, 108, 255, 0.32),
    0 30px 80px -28px rgba(0, 0, 0, 0.65);
}

/* Question row */
.faq-item__head {
  list-style: none;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 22px 26px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.faq-item__head::-webkit-details-marker { display: none; }
.faq-item__head::marker { display: none; content: ""; }

.faq-item__num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--accent-soft);
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(91, 108, 255, 0.08);
  border: 1px solid rgba(91, 108, 255, 0.18);
  transition: background 320ms var(--ease-out), border-color 320ms var(--ease-out);
}
.faq-item[open] .faq-item__num {
  background: rgba(91, 108, 255, 0.18);
  border-color: rgba(91, 108, 255, 0.4);
  color: #fff;
}

.faq-item__q {
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--fg);
}

.faq-item__icon {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--hairline-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-soft);
  transition: transform 360ms var(--ease-out), background 320ms var(--ease-out),
    border-color 320ms var(--ease-out), color 320ms var(--ease-out);
  flex-shrink: 0;
}
.faq-item[open] .faq-item__icon {
  transform: rotate(180deg);
  background: var(--accent);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 14px rgba(91, 108, 255, 0.45);
}

/* Body — smooth height via interpolate-size + grid-template-rows trick.
   Keeps animation native, no JS height measurement. */
.faq-item__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 360ms var(--ease-out);
}
.faq-item[open] .faq-item__body {
  grid-template-rows: 1fr;
}
.faq-item__body > * {
  overflow: hidden;
  min-height: 0;
}
.faq-item__body p {
  margin: 0;
  padding: 0 26px 24px;
  /* Indent answer to align under the question text (skip the 01/02 chip) */
  padding-left: calc(26px + 38px + 18px);
  font-size: 0.90625rem;
  line-height: 1.65;
  color: var(--fg-soft);
  letter-spacing: -0.005em;
  max-width: 70ch;
}

/* Footer CTA */
.faq__cta {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, auto);
  gap: 28px;
  align-items: center;
  max-width: 920px;
  margin: 56px auto 0;
  padding: 32px 36px;
  border-radius: 22px;
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(91, 108, 255, 0.18), transparent 55%),
    linear-gradient(160deg, #14172b 0%, #090b18 100%);
  border: 1px solid rgba(91, 108, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 30px 80px -28px rgba(91, 108, 255, 0.3);
  opacity: 0;
  transform: translateY(28px);
  filter: blur(6px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out),
    filter 700ms var(--ease-out);
}
.faq__cta.is-revealed {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.faq__cta-title {
  margin: 0 0 8px;
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--fg);
}
.faq__cta-copy {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--fg-soft);
  max-width: 56ch;
}
.faq__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 12px 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--accent) 50%, var(--accent-deep) 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 0.90625rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2),
    0 16px 32px -10px rgba(91, 108, 255, 0.55);
  transition: filter 220ms var(--ease-out), transform 160ms var(--ease-out);
}
.faq__cta-btn:hover { filter: brightness(1.06); }
.faq__cta-btn:active { transform: scale(0.98); }
.faq__cta-btn-icon {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform 220ms var(--ease-out);
}
.faq__cta-btn:hover .faq__cta-btn-icon {
  transform: translate(2px, -1px) scale(1.06);
}

/* Responsive */
@media (max-width: 720px) {
  .faq { padding: 96px 20px; }
  .faq-item__head { padding: 18px 20px; gap: 14px; }
  .faq-item__body p {
    padding: 0 20px 20px;
    padding-left: calc(20px + 30px + 14px);
  }
  .faq__cta {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 28px 24px;
  }
  .faq__cta-btn { width: fit-content; }
}

/* ============================================================
   BLOCK 10 — Final CTA + contact form · Dark immersive
   ============================================================ */
.contact {
  position: relative;
  z-index: 2;
  padding: 140px 6vw 80px;
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(91, 108, 255, 0.10), transparent 70%),
    var(--bg);
  overflow: hidden;
}
.contact__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.contact__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(150px);
}
.contact__orb--a {
  width: 60vmax;
  height: 60vmax;
  left: -16vmax;
  top: -16vmax;
  background: radial-gradient(circle, var(--accent) 0%, transparent 65%);
  opacity: 0.45;
}
.contact__orb--b {
  width: 50vmax;
  height: 50vmax;
  right: -12vmax;
  bottom: -10vmax;
  background: radial-gradient(circle, #7a3be8 0%, transparent 65%);
  opacity: 0.32;
}
.contact__noise {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  mix-blend-mode: overlay;
  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'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Header */
.contact__head {
  position: relative;
  max-width: 1080px;
  margin: 0 auto 64px;
  text-align: center;
}
.contact__head .eyebrow { margin: 0 auto; }
.contact__title {
  margin: 22px 0 0;
  font-size: clamp(2.5rem, 5.4vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.05em;
  font-weight: 600;
  color: var(--fg);
  text-wrap: balance;
}
.contact__title-mark {
  display: inline-block;
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--accent) 50%, var(--accent-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* line-height:1 (inherited) leaves the descender below the line box, so
     background-clip:text leaves the "g" tail unpainted (ES "Es gratis.", RU "р").
     Measured ~0.17em of overhang; pad the bottom so the paint box covers it. */
  padding-bottom: 0.24em;
  filter: drop-shadow(0 8px 24px rgba(91, 108, 255, 0.4));
}
.contact__lede {
  margin: 28px auto 0;
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.55;
  color: var(--fg-soft);
  max-width: 60ch;
  letter-spacing: -0.005em;
}

/* Two-column body */
.contact__body {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 32px;
  max-width: 1280px;
  margin: 0 auto;
  align-items: stretch;
}

/* ===== LEFT — Form ===== */
.cf {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 40px 44px 36px;
  border-radius: 32px;
  background: linear-gradient(160deg, rgba(20, 22, 40, 0.92) 0%, rgba(10, 11, 22, 0.96) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 1px 0 rgba(0, 0, 0, 0.5),
    0 60px 140px -30px rgba(91, 108, 255, 0.32),
    0 30px 80px -28px rgba(0, 0, 0, 0.7);
  opacity: 0;
  transform: translateY(40px);
  filter: blur(8px);
  transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out),
    filter 800ms var(--ease-out);
}
.cf.is-revealed {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.cf__row { display: flex; }

/* Floating-label field */
.cf-field {
  position: relative;
  display: block;
  width: 100%;
  cursor: text;
}
.cf-field input,
.cf-field select,
.cf-field textarea {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--fg);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 26px 18px 12px;
  letter-spacing: -0.005em;
  transition: border-color 240ms var(--ease-out), background 240ms var(--ease-out),
    box-shadow 240ms var(--ease-out);
  outline: none;
}
.cf-field textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.55;
}
.cf-field input:hover,
.cf-field select:hover,
.cf-field textarea:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
}
.cf-field input:focus,
.cf-field select:focus,
.cf-field textarea:focus {
  background: rgba(91, 108, 255, 0.06);
  border-color: rgba(91, 108, 255, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 4px rgba(91, 108, 255, 0.12);
}
.cf-field__label {
  position: absolute;
  left: 19px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  letter-spacing: -0.005em;
  color: var(--fg-mute);
  pointer-events: none;
  transition: transform 220ms var(--ease-out), color 220ms var(--ease-out),
    font-size 220ms var(--ease-out);
  background: transparent;
}
.cf-field input:focus + .cf-field__label,
.cf-field input:not(:placeholder-shown) + .cf-field__label,
.cf-field select:focus + .cf-field__label,
.cf-field select:valid + .cf-field__label {
  transform: translateY(-128%) scale(0.78);
  transform-origin: 0 50%;
  color: var(--accent-soft);
}

/* Custom select chevron */
.cf-field--select { position: relative; }
.cf-field--select select {
  padding-right: 44px;
  cursor: pointer;
}
.cf-field--select select option {
  background: #0e1024;
  color: var(--fg);
}
.cf-field__chevron {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--fg-mute);
  display: inline-flex;
  transition: transform 240ms var(--ease-out), color 240ms var(--ease-out);
}
.cf-field--select select:focus ~ .cf-field__chevron {
  color: var(--accent-soft);
  transform: translateY(-50%) rotate(180deg);
}

/* Liquid-glass dropdown panel (JS enhancement, initGlassSelect) — replaces the
   native option popup on fine-pointer devices. The native <select> stays the
   trigger + source of truth; touch keeps the native picker. */
.glass-select__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  border-radius: 16px;
  background: rgba(14, 16, 32, 0.86);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 24px 60px -20px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  opacity: 0;
  transform: translateY(-6px) scale(0.985);
  transform-origin: top center;
  pointer-events: none;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.glass-select__panel.is-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.glass-select__option {
  text-align: left;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--fg);
  background: transparent;
  border: 0;
  border-radius: 11px;
  padding: 11px 14px;
  cursor: pointer;
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out);
}
.glass-select__option:hover { background: rgba(91, 108, 255, 0.14); }
.glass-select__option[aria-selected="true"] {
  background: rgba(91, 108, 255, 0.20);
  color: #fff;
}

/* Submit + disclosure */
.cf__actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  margin-top: 6px;
}
.cf__submit {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 14px 26px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--accent) 50%, var(--accent-deep) 100%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2),
    0 22px 44px -12px rgba(91, 108, 255, 0.6);
  transition: filter 220ms var(--ease-out), transform 160ms var(--ease-out);
  cursor: pointer;
}
.cf__submit:hover { filter: brightness(1.08); }
.cf__submit:active { transform: scale(0.98); }
.cf__submit-icon {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform 220ms var(--ease-out);
}
.cf__submit:hover .cf__submit-icon { transform: translate(2px, -1px) scale(1.06); }

.cf__disclosure {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fg-mute);
}
.cf__policy-link {
  color: var(--accent-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(140, 152, 255, 0.5);
  transition: color 200ms var(--ease-out), text-decoration-color 200ms var(--ease-out);
}
.cf__policy-link:hover { color: #fff; text-decoration-color: var(--accent-soft); }

/* ============================================================
   Legal / long-form pages (privacy policy, terms) — dark, readable
   ============================================================ */
.page-legal { background: var(--bg); color: var(--fg); }
/* Legal pages reuse the standard site chrome (floating nav + footer) but
   NOT the homepage curtain-footer trick (fixed footer + .footer-spacer).
   Make the body a sticky-footer flex column so the footer always pins to
   the bottom of short pages, drop the footer out of fixed positioning,
   and hide the giant logo watermark + halo so they don't bleed through
   the article. */
.page-legal { display: flex; flex-direction: column; min-height: 100vh; }
.page-legal .legal { flex: 1 0 auto; }
.page-legal .footer { position: static; flex-shrink: 0; isolation: auto; }
.page-legal .footer__bg { display: none; }
.legal { width: 100%; max-width: 920px; margin: 0 auto; padding: 150px 24px 120px; }
.legal__eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-soft); margin: 0 0 16px; }
.legal h1 { font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.08; letter-spacing: -0.03em; margin: 0 0 14px; }
.legal__meta { color: var(--fg-mute); font-size: 14px; margin: 0 0 36px; }
.legal h2 { font-size: clamp(1.2rem, 2.2vw, 1.55rem); line-height: 1.2; letter-spacing: -0.02em; margin: 48px 0 14px; }
.legal p { color: var(--fg-soft); font-size: 16px; line-height: 1.72; margin: 0 0 14px; }
.legal ul { margin: 0 0 14px; padding-left: 20px; }
.legal li { color: var(--fg-soft); font-size: 16px; line-height: 1.66; margin: 0 0 9px; }
.legal a { color: var(--accent-soft); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(140, 152, 255, 0.5); }
.legal a:hover { color: #fff; }
.legal strong { color: var(--fg); font-weight: 600; }
.legal__table-wrap { overflow-x: auto; margin: 0 0 16px; }
.legal table { width: 100%; border-collapse: collapse; font-size: 15px; }
.legal th, .legal td { text-align: left; padding: 11px 14px; border: 1px solid var(--hairline); vertical-align: top; }
.legal th { color: var(--fg); font-weight: 600; background: rgba(255, 255, 255, 0.03); }
.legal td { color: var(--fg-soft); line-height: 1.55; }
@media (max-width: 640px) { .legal { padding: 120px 18px 80px; } }
.cf__disclosure-icon {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(91, 108, 255, 0.15);
  border: 1px solid rgba(91, 108, 255, 0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-soft);
  flex-shrink: 0;
}

/* ===== RIGHT — Side panel ===== */
.contact-side {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 36px 32px 32px;
  border-radius: 28px;
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(91, 108, 255, 0.18), transparent 55%),
    linear-gradient(160deg, rgba(20, 22, 40, 0.7) 0%, rgba(10, 11, 22, 0.85) 100%);
  border: 1px solid rgba(91, 108, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 30px 80px -28px rgba(91, 108, 255, 0.3);
  opacity: 0;
  transform: translateY(40px);
  filter: blur(8px);
  transition: opacity 800ms var(--ease-out) 80ms, transform 800ms var(--ease-out) 80ms,
    filter 800ms var(--ease-out) 80ms;
}
.contact-side.is-revealed {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.contact-side__title {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

/* Founder mini-card */
.cf-founder {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
}
.cf-founder + .cf-founder { border-top: 1px solid var(--hairline); }
.cf-founder__avatar {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: conic-gradient(from 220deg, var(--accent), var(--accent-soft), var(--accent-deep), var(--accent));
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.3),
    0 0 16px rgba(91, 108, 255, 0.5);
  flex-shrink: 0;
}
.cf-founder__avatar--alt {
  background: conic-gradient(from 60deg, #c5cbff, var(--accent-soft), var(--accent), #c5cbff);
}
.cf-founder__avatar-photo {
  position: absolute;
  inset: 2px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.cf-founder__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cf-founder__name { font-size: 0.875rem; font-weight: 500; color: var(--fg); letter-spacing: -0.005em; }
.cf-founder__role {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--fg-mute);
}

/* Channel rows (Telegram / WhatsApp / Email) */
.contact-side__channels {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cf-channel {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--hairline);
  text-decoration: none;
  color: inherit;
  transition: background 220ms var(--ease-out), border-color 220ms var(--ease-out),
    transform 160ms var(--ease-out);
}
.cf-channel:hover {
  background: rgba(91, 108, 255, 0.06);
  border-color: rgba(91, 108, 255, 0.25);
}
.cf-channel:active { transform: scale(0.99); }
.cf-channel__icon {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(91, 108, 255, 0.12);
  border: 1px solid rgba(91, 108, 255, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-soft);
  flex-shrink: 0;
}
.cf-channel__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cf-channel__name {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.cf-channel__handle {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--fg);
  letter-spacing: -0.005em;
}
.cf-channel__arrow {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-soft);
  transition: transform 240ms var(--ease-out), background 240ms var(--ease-out);
}
.cf-channel:hover .cf-channel__arrow {
  transform: translate(2px, -1px);
  background: var(--accent);
  color: #fff;
}

/* Promise card */
.contact-side__promise {
  margin-top: auto;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(91, 108, 255, 0.08);
  border: 1px solid rgba(91, 108, 255, 0.2);
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-soft);
}
.contact-side__promise strong {
  display: block;
  color: var(--fg);
  font-weight: 500;
  margin-bottom: 2px;
}
.contact-side__promise-icon {
  flex-shrink: 0;
  color: var(--accent-soft);
  margin-top: 1px;
}

/* Footer signature */
.contact__foot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  max-width: 1280px;
  margin: 80px auto 0;
  padding-top: 32px;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--fg-mute);
}
.contact__foot-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg);
  text-transform: none;
}
.contact__foot-logo {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: conic-gradient(from 220deg, var(--accent), var(--accent-soft), var(--accent-deep), var(--accent));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 0 14px rgba(91, 108, 255, 0.5);
  position: relative;
}
.contact__foot-logo::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 4px;
  background: var(--bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Responsive */
@media (max-width: 980px) {
  .contact__body { grid-template-columns: 1fr; gap: 22px; }
  .cf { padding: 32px 28px 28px; }
}
@media (max-width: 560px) {
  .contact { padding: 96px 20px 60px; }
  .cf { padding: 28px 22px 24px; }
  .contact-side { padding: 28px 22px; }
}

/* ============================================================
   Reveal animations (data-reveal)
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(8px);
  transition:
    opacity 800ms var(--ease-out),
    transform 800ms var(--ease-out),
    filter 800ms var(--ease-out);
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
/* Nav pill: backdrop-filter only blurs the page when NO ancestor has a filter/transform.
   The reveal leaves filter:blur(0) + transform on .nav-shell, which disables it — reset to none. */
.nav-shell.is-revealed { filter: none; transform: none; }
[data-reveal="0"].is-revealed { transition-delay: 0ms; }
[data-reveal="1"].is-revealed { transition-delay: 80ms; }
[data-reveal="2"].is-revealed { transition-delay: 180ms; }
[data-reveal="3"].is-revealed { transition-delay: 320ms; }
[data-reveal="4"].is-revealed { transition-delay: 440ms; }
[data-reveal="5"].is-revealed { transition-delay: 560ms; }
[data-reveal="6"].is-revealed { transition-delay: 240ms; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px) {
  .hero__inner {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .nav__links { display: none; }
}
@media (max-width: 720px) {
  .hero {
    padding: 120px 20px 80px;
  }
  .hero__title {
    font-size: clamp(2.5rem, 11vw, 4rem);
  }
  .hero__meta {
    gap: 24px;
    flex-wrap: wrap;
  }
  .badge-card {
    left: 0;
    bottom: -20px;
  }
  .nav-shell {
    top: 14px;
  }
  .nav {
    padding: 8px 8px 8px 16px;
  }
}

/* ============================================================
   Accessibility
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] {
    opacity: 1;
    transform: none;
    filter: none;
  }
}
@media (hover: none) {
  .showcase__shell:hover .showcase__spotlight {
    opacity: 0;
  }
}

/* ============================================================
   FOOTER — independent normal-flow block at the end of the page.
   ============================================================ */
/* Curtain-reveal pattern.
   - main has its own solid bg + z-index: 1 so it covers the fixed
     footer beneath while it occupies the viewport.
   - .footer-spacer is a transparent runway after main. As the user
     scrolls into it, main's bottom edge moves above the viewport and
     the previously-hidden footer is gradually uncovered.
   - footer is position: fixed; z-index: 0 — sits underneath main.

   Trade-off: main's solid background paints over the body-level
   .bg-canvas, so the indigo/purple/cyan orbs are not visible in the
   hero / dark sections under this pattern. The curtain reveal
   (Block 10 sliding off the footer) is the priority chosen here. */
main {
  position: relative;
  z-index: 1;
  background: var(--bg);
}
.footer-spacer {
  position: relative;
  height: 520px;
  pointer-events: none;
}
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
  background: #08080c;
  padding: 80px 32px 36px;
  overflow: hidden;
  border-top: 1px solid var(--hairline);
  isolation: isolate;
}

/* ---- Background layers ---- */
.footer__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
/* Indigo halo behind the giant logo — always rendered, no fade-in */
.footer__halo {
  position: absolute;
  left: 50%;
  bottom: -20%;
  width: 110%;
  aspect-ratio: 1.6 / 1;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 60% 70% at 50% 100%, rgba(91, 108, 255, 0.18) 0%, transparent 60%);
}

/* Giant logo — full silhouette visible horizontally, half-cropped by
   horizon at the footer's bottom edge (top half visible above, bottom
   half clipped). Always rendered at final state — no fade-in. */
.footer__logo-bg {
  position: absolute;
  left: 50%;
  top: 92%;
  width: clamp(640px, 95%, 1400px);
  max-width: none;
  height: auto;
  transform: translate(-50%, -50%);
  filter: brightness(0) invert(1);
  opacity: 0.22;
}

/* ---- Inner content ---- */
.footer__inner {
  position: relative;
  z-index: 2;
  width: min(1320px, 100%);
  margin: 0 auto;
}
.footer__columns {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  margin-bottom: 110px;
}
.footer__col {
  /* No reveal animation — footer is rendered fully on load */
}

.footer__lede {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--fg-soft);
  max-width: 360px;
}
.footer__heading {
  margin: 0 0 24px;
  font-family: var(--font-mono, "Geist Mono", ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}
.footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer__links a {
  display: inline-block;
  font-size: 0.9375rem;
  color: var(--fg-soft);
  transition: color 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.footer__links a:hover {
  color: var(--accent-soft);
  transform: translateX(2px);
}

/* ---- Socials ---- */
.footer__socials {
  display: grid;
  grid-template-columns: repeat(5, 44px);
  gap: 10px;
  margin-bottom: 32px;
}
.footer__social {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.02);
  transition:
    color 300ms cubic-bezier(0.23, 1, 0.32, 1),
    border-color 300ms cubic-bezier(0.23, 1, 0.32, 1),
    background 300ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.footer__social svg { width: 18px; height: 18px; fill: currentColor; display: block; }
.footer__social:hover {
  color: #fff;
  border-color: rgba(91, 108, 255, 0.55);
  background: rgba(91, 108, 255, 0.1);
  transform: translateY(-2px);
}

.footer__email {
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--fg);
  transition: color 300ms cubic-bezier(0.23, 1, 0.32, 1);
  display: inline-block;
}
.footer__email:hover { color: var(--accent-soft); }

/* ---- Responsive ---- */
@media (max-width: 880px) {
  .footer { padding: 64px 24px 28px; }
  .footer__columns {
    grid-template-columns: 1fr;
    gap: 36px;
    margin-bottom: 80px;
  }
  .footer__logo-bg { width: clamp(280px, 95%, 480px); top: 88%; }
}

/* ============================================================
   /seo-geo/ — SEO+GEO service subpage · added 2026-05-11
   Reuses tokens (--accent, --hairline, --ease-out, --ease-drawer)
   and base section classes from main page. Adds:
   - 3 new motion patterns (text-hl wipe, text-slide-up, term cards)
   - 5 new section types (terms, level, tools, timeline, metrics,
     mistakes) custom to this page
   ============================================================ */

/* ---------- Shared · text-highlight-wipe (Emil-tuned) ---------- */
.text-hl {
  position: relative;
  display: inline-block;
  isolation: isolate;
  padding: 0 0.08em;
  color: inherit;
  white-space: nowrap;
}
.text-hl::before {
  content: "";
  position: absolute;
  inset: 0.08em -0.04em 0.06em -0.04em;
  background: var(--accent);
  opacity: 0.92;
  z-index: -1;
  border-radius: 2px;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 700ms var(--ease-in-out);
  will-change: clip-path;
}
.text-hl.is-lit::before { clip-path: inset(0 0 0 0); }
.text-hl--inline { white-space: normal; }
@media (prefers-reduced-motion: reduce) {
  .text-hl::before { transition: none; clip-path: inset(0 0 0 0); }
}

/* ---------- Shared · text-slide-up (word-by-word) ---------- */
.slide-line {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  line-height: 1.18;
  padding: 0.08em 0;
}
.slide-word {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  transition: transform 480ms var(--ease-drawer),
              opacity 320ms var(--ease-out);
  will-change: transform, opacity;
}
[data-text-slide].is-revealed .slide-word {
  transform: translateY(0);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .slide-word { transform: none; opacity: 1; transition: opacity 300ms ease-out; }
}

/* ---------- Body class hook for page-wide tweaks ---------- */
.page-seo-geo .hero--sg .hero__title {
  line-height: 1.05; /* text-hl on hero has no underline (::before hidden), so
                        1.18 was needlessly airy — tighter reads better while
                        still clearing the gradient "g" descender in "Google". */
}

/* ---------- Generic title-mark utility (gradient accent on key word) ----
   Same gradient as .loss__title-mark, .process__title-mark, etc on main —
   centralized here so any H2 on seo-geo can pick it up. */
.title-mark {
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--accent) 50%, var(--accent-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 8px 24px rgba(91, 108, 255, 0.3));
  font-weight: 600;
}
/* Light island variant — gradient is too dark on cream bg; flip direction */
.sg-tools--light .title-mark {
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 70%, #1d2580 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 18px rgba(91, 108, 255, 0.22));
}

/* ============================================================
   BLOCK 1 · Hero showcase channel bars (right glass card)
   ============================================================ */
.showcase--sg .showcase__head-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.sg-channels {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px 0 8px;
}
.sg-channel {
  display: grid;
  grid-template-columns: minmax(140px, 38%) 1fr 56px;
  align-items: center;
  gap: 18px;
  font-size: 0.92rem;
  /* Stagger entry: each row fades up with a small delay. Bar fills start
     widening shortly after the row appears (delay built into bar transition). */
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.showcase--sg.is-channels-revealed .sg-channel {
  opacity: 1;
  transform: translateY(0);
}
.showcase--sg.is-channels-revealed .sg-channel:nth-child(1) { transition-delay: 60ms; }
.showcase--sg.is-channels-revealed .sg-channel:nth-child(2) { transition-delay: 140ms; }
.showcase--sg.is-channels-revealed .sg-channel:nth-child(3) { transition-delay: 220ms; }
.showcase--sg.is-channels-revealed .sg-channel:nth-child(4) { transition-delay: 300ms; }
.showcase--sg.is-channels-revealed .sg-channel:nth-child(5) { transition-delay: 380ms; }

.sg-channel__name { color: var(--fg); font-weight: 500; }
.sg-channel__bar {
  position: relative;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.sg-channel__bar-fill {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent), var(--accent-soft));
  border-radius: 2px;
  transition: width 1100ms var(--ease-out);
}
/* Bars only fill once the showcase is revealed — gives the "line drawing
   from zero" effect. Each row's fill starts ~150ms after that row entrance. */
.showcase--sg.is-channels-revealed .sg-channel__bar-fill { width: var(--w); }
.showcase--sg.is-channels-revealed .sg-channel:nth-child(1) .sg-channel__bar-fill { transition-delay: 200ms; }
.showcase--sg.is-channels-revealed .sg-channel:nth-child(2) .sg-channel__bar-fill { transition-delay: 280ms; }
.showcase--sg.is-channels-revealed .sg-channel:nth-child(3) .sg-channel__bar-fill { transition-delay: 360ms; }
.showcase--sg.is-channels-revealed .sg-channel:nth-child(4) .sg-channel__bar-fill { transition-delay: 440ms; }
.showcase--sg.is-channels-revealed .sg-channel:nth-child(5) .sg-channel__bar-fill { transition-delay: 520ms; }
.sg-channel__val {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--fg-soft);
  text-align: right;
  letter-spacing: 0.04em;
}
.sg-channels__note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(91, 108, 255, 0.06);
  border: 1px solid rgba(91, 108, 255, 0.14);
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--fg-mute);
  letter-spacing: -0.005em;
}
.sg-channels__note-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(91, 108, 255, 0.18);
}
.showcase--sg .showcase__foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 22px;
  margin-top: 18px;
  border-top: 1px solid var(--hairline);
}
.showcase--sg .showcase__foot-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.showcase--sg .showcase__foot-val {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--accent-soft);
  font-weight: 500;
}

/* ============================================================
   BLOCK 1.5 · Curtain — theatrical dark reveal between Hero and B2
   ============================================================ */
.sg-curtain {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(80px, 12vw, 140px) 6vw;
  background: radial-gradient(ellipse 60% 80% at 50% 50%, #0d0d18 0%, #06060b 70%, #050509 100%);
  overflow: hidden;
  isolation: isolate;
}
.sg-curtain__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.sg-curtain__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
  pointer-events: none;
}
.sg-curtain__orb--a {
  width: 60vw;
  height: 60vw;
  background: radial-gradient(circle, var(--accent) 0%, transparent 60%);
  top: -20%;
  left: -10%;
  opacity: 0.18;
}
.sg-curtain__orb--b {
  width: 50vw;
  height: 50vw;
  background: radial-gradient(circle, var(--accent-deep) 0%, transparent 65%);
  bottom: -25%;
  right: -15%;
  opacity: 0.22;
}
.sg-curtain__grain {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 50% 50%, transparent 0%, rgba(0,0,0,0.4) 100%);
  pointer-events: none;
}
.sg-curtain__stage {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sg-curtain__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.5rem, 8vw, 8rem);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--fg);
  margin: 0;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .sg-curtain { padding: clamp(60px, 12vw, 100px) 4vw; }
  .sg-curtain__title {
    font-size: clamp(2rem, 11vw, 4rem);
    white-space: normal;
  }
}

/* ============================================================
   Rise-text utility — line-mask "rise from below" animation
   Used on display headlines that need a calm theatrical reveal.
   See script.js → initRiseText.
   ============================================================ */
.rise-text {
  /* container */
}
.rise-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
}
.rise-line-inner {
  display: block;
  transform: translateY(110%);
  will-change: transform;
}
.rise-text.is-revealed .rise-line-inner {
  transform: translateY(0);
  transition: transform 1100ms cubic-bezier(0.16, 1, 0.3, 1);
}
.rise-text.is-revealed .rise-line:nth-child(1) .rise-line-inner { transition-delay: 0ms; }
.rise-text.is-revealed .rise-line:nth-child(2) .rise-line-inner { transition-delay: 110ms; }
.rise-text.is-revealed .rise-line:nth-child(3) .rise-line-inner { transition-delay: 220ms; }
.rise-text.is-revealed .rise-line:nth-child(4) .rise-line-inner { transition-delay: 330ms; }

@media (prefers-reduced-motion: reduce) {
  .rise-line-inner { transform: none; }
}

/* ============================================================
   BLOCK 3 · Terminology — term-cards grid + metaphor
   ============================================================ */
.sg-terms {
  padding: clamp(96px, 12vw, 160px) 6vw;
  position: relative;
}
.sg-terms__inner { max-width: var(--content-max); margin: 0 auto; }
.sg-terms__head { max-width: 820px; margin-bottom: 64px; }
.sg-terms__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.25rem, 4.6vw, 3.75rem);
  letter-spacing: -0.045em;
  line-height: 1;
  margin: 18px 0 24px;
  color: var(--fg);
}
.sg-terms__capsule {
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.65;
  color: var(--fg-soft);
  max-width: 720px;
}
.sg-terms__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-bottom: 80px;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

/* New: display type list — huge background letters + asymmetric content */
.sg-terms__list {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 8vw, 96px);
  margin: 80px 0 120px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.sg-term {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  min-height: 280px;
  isolation: isolate;
  /* Hover scoping: the grid container itself stays non-interactive so
     hovering the empty space (and the backdrop display word) doesn't
     trigger card lift / glow. Only the content card opts back in. */
  pointer-events: none;
}
.sg-term__content { pointer-events: auto; }
.sg-term--right { grid-template-columns: 1fr 1.1fr; }
.sg-term--right .sg-term__content { order: -1; }
.sg-term--right .sg-term__display { text-align: right; }
.sg-term__display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(7rem, 16vw, 16rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  /* Filled indigo gradient — NO -webkit-text-stroke. At very large display
     sizes, text-stroke produces visible artifacts at inner corners (looks
     like diagonal cuts inside "L", "M", etc) because stroke + background-
     clip:text rasterize at slightly different paths. Solid filled glyphs
     with strong gradient + drop-shadow give a clean, smooth result. */
  background: linear-gradient(
    180deg,
    rgba(170, 182, 255, 0.78) 0%,
    rgba(130, 148, 255, 0.6) 35%,
    rgba(91, 108, 255, 0.38) 70%,
    rgba(60, 80, 200, 0.18) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 22px 56px rgba(91, 108, 255, 0.3));
  user-select: none;
  pointer-events: none;
  z-index: -1;
  transition: filter 600ms var(--ease-out);
}
/* Hover triggers only when pointer is on the card content (parent has
   pointer-events:none, only content accepts events). */
.sg-term:hover .sg-term__display {
  filter: drop-shadow(0 24px 60px rgba(91, 108, 255, 0.38));
}
/* GEO matches the others — uniform family. Differentiation lives only
   inside the card (the .title-mark wrap on the abbreviation). */
/* Legacy --accent modifier is no longer needed; .sg-term--hero handles it. */
.sg-term__display--accent { /* kept as no-op for HTML stability */ }

.sg-term__content {
  background: linear-gradient(
    180deg,
    rgba(91, 108, 255, 0.09) 0%,
    rgba(91, 108, 255, 0.02) 100%
  );
  border: 1px solid rgba(140, 152, 255, 0.18);
  border-radius: 20px;
  padding: 32px 32px 30px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 22px 50px -28px rgba(91, 108, 255, 0.22);
  transition: border-color 320ms var(--ease-out), transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
}
.sg-term:hover .sg-term__content {
  border-color: rgba(140, 152, 255, 0.36);
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 32px 72px -28px rgba(91, 108, 255, 0.38);
}
/* GEO card uses the same styling as other terms — no special glow. */
.sg-term__head { display: flex; flex-direction: column; gap: 4px; }
.sg-term__abbr {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1.625rem;
  letter-spacing: 0.02em;
  color: var(--fg);
  line-height: 1;
}
.sg-term__expansion {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.sg-term__lede {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--fg-soft);
}
.sg-term__role {
  padding: 14px 16px;
  border-radius: 12px;
  background: #14193a;
  border: 1px solid rgba(91, 108, 255, 0.18);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--fg-soft);
}
.sg-term__role--accent {
  background: #14193a;
  border-color: rgba(91, 108, 255, 0.18);
}
.sg-term__role-mark {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: 6px;
}

/* 3D Pyramid metaphor block */
.sg-pyramid-block {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
  padding: 56px clamp(24px, 4vw, 56px);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(91, 108, 255, 0.08), rgba(91, 108, 255, 0.02));
  border: 1px solid rgba(140, 152, 255, 0.2);
}
.sg-pyramid {
  position: relative;
  width: 100%;
  height: 280px;
  perspective: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  transform-style: preserve-3d;
}
.sg-pyramid__layer {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 18px 36px;
  border-radius: 12px;
  text-align: center;
  transform-style: preserve-3d;
  position: relative;
  transition: transform 480ms var(--ease-out), box-shadow 480ms var(--ease-out);
}
.sg-pyramid__layer span {
  position: relative;
  z-index: 1;
}
.sg-pyramid__layer::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  transform: translateZ(-12px) translateY(8px);
  filter: blur(8px);
  opacity: 0.5;
}
.sg-pyramid__layer--llmo {
  width: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--fg);
  border: 1px solid var(--hairline-strong);
  transform: rotateX(40deg) translateY(-12px);
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.6);
}
.sg-pyramid__layer--geo {
  width: 75%;
  background: linear-gradient(180deg, rgba(140, 152, 255, 0.32), rgba(91, 108, 255, 0.18));
  color: var(--fg);
  border: 1px solid rgba(140, 152, 255, 0.5);
  transform: rotateX(40deg) translateY(-6px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 24px 50px -20px rgba(91, 108, 255, 0.4);
}
.sg-pyramid__layer--seo {
  width: 100%;
  background: linear-gradient(180deg, var(--accent-soft), var(--accent), var(--accent-deep));
  color: white;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.18);
  transform: rotateX(40deg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 30px 70px -20px rgba(91, 108, 255, 0.55);
}
.sg-pyramid__base {
  position: absolute;
  bottom: -10px;
  left: 50%;
  width: 90%;
  height: 30px;
  background: radial-gradient(ellipse, rgba(91, 108, 255, 0.45), transparent 70%);
  filter: blur(20px);
  transform: translateX(-50%);
}
.sg-pyramid-block__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sg-pyramid-block__title {
  margin: 8px 0 4px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  letter-spacing: -0.02em;
  line-height: 1.22;
  color: var(--fg);
}
.sg-pyramid-block__text p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--fg-soft);
}
.sg-pyramid-block__source {
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  font-size: 0.92rem;
  color: var(--fg-soft);
}
.sg-pyramid-block__source strong { color: var(--accent-soft); font-weight: 500; }

@media (max-width: 880px) {
  .sg-term { grid-template-columns: 1fr; min-height: auto; }
  .sg-term--right .sg-term__content { order: 0; }
  .sg-term__display { font-size: clamp(5rem, 24vw, 9rem); text-align: center; opacity: 0.4; position: absolute; inset: -10% 0 auto 0; }
  .sg-term__content { position: relative; z-index: 1; }
  .sg-pyramid-block { grid-template-columns: 1fr; gap: 36px; }
  .sg-pyramid { height: 220px; }
}
.term-card {
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hairline);
  backdrop-filter: blur(24px) saturate(180%);
  border-radius: 18px;
  padding: 28px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: background 280ms var(--ease-out),
              border-color 280ms var(--ease-out),
              transform 280ms var(--ease-out);
}
.term-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--hairline-strong);
  transform: translateY(-4px);
}
.term-card--accent {
  background: linear-gradient(180deg, rgba(91, 108, 255, 0.14), rgba(91, 108, 255, 0.04));
  border-color: rgba(140, 152, 255, 0.32);
}
.term-card__head { display: flex; flex-direction: column; gap: 4px; }
.term-card__abbr {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  color: var(--fg);
}
.term-card--accent .term-card__abbr { color: var(--accent-soft); }
.term-card__expansion {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.term-card__lede {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--fg-soft);
  flex: 1;
}
.term-card__role {
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--fg-soft);
}
.term-card__role-mark {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: 6px;
}
.term-card--accent .term-card__role { background: rgba(91, 108, 255, 0.08); }

/* metaphor block */
.sg-terms__metaphor {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 60px;
  align-items: center;
  padding: 56px 6vw;
  background: linear-gradient(180deg, rgba(91, 108, 255, 0.08), rgba(91, 108, 255, 0.02));
  border: 1px solid rgba(140, 152, 255, 0.18);
  border-radius: 24px;
}
.sg-terms__metaphor-ill {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.metaphor-layer {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 16px 36px;
  border-radius: 12px;
  text-align: center;
}
.metaphor-layer--llmo {
  background: rgba(255, 255, 255, 0.06);
  color: var(--fg);
  border: 1px solid var(--hairline);
  width: 70%;
}
.metaphor-layer--geo {
  background: rgba(91, 108, 255, 0.18);
  color: var(--accent-soft);
  border: 1px solid rgba(140, 152, 255, 0.4);
  width: 90%;
}
.metaphor-layer--seo {
  background: var(--accent);
  color: white;
  width: 100%;
  font-weight: 500;
}
.sg-terms__metaphor-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.2vw, 1.875rem);
  margin: 0 0 16px;
  color: var(--fg);
}
.sg-terms__metaphor-text p {
  margin: 0 0 14px;
  color: var(--fg-soft);
  font-size: 1rem;
  line-height: 1.65;
}
.sg-terms__metaphor-source {
  font-size: 0.92rem;
  color: var(--fg-soft);
  border-top: 1px solid var(--hairline);
  padding-top: 16px;
}

/* ============================================================
   BLOCK 4 · Three levels — Z-axis stack (replaces sticky split rail)
   Reuses .solutions* mechanics from main page.
   ============================================================ */
.solutions--sg .solutions__title-mark,
.solutions--sg .title-mark {
  filter: drop-shadow(0 8px 24px rgba(91, 108, 255, 0.32));
}
.sg-level-card {
  /* Override solution-card cluttered visual with cleaner internal layout */
}
.sg-level-card .solution-card__inner {
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(32px, 4vw, 64px);
}
.sg-level-card__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin: 22px 0 4px;
  padding: 22px;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.025);
}
.sg-level-card__col { display: flex; flex-direction: column; gap: 10px; }
.sg-level-card__col-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-soft);
}
.sg-level-card__col .solution-card__list { padding-left: 0; }
.sg-level-card__col .solution-card__list li {
  font-size: 0.86rem;
  line-height: 1.5;
}
.sg-level-card__stat-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 22px 0 16px;
  padding: 18px 22px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(91, 108, 255, 0.12), rgba(91, 108, 255, 0.04));
  border: 1px solid rgba(140, 152, 255, 0.28);
}
.sg-level-card__stat-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, var(--accent-soft), var(--accent), var(--accent-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 18px rgba(91, 108, 255, 0.4));
  white-space: nowrap;
}
.sg-level-card__stat-body {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--fg-soft);
}
.sg-level-card__stat-src {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.sg-level-card__scenarios { margin-top: 12px; }
.sg-level-card__scenarios-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: 10px;
}
.sg-level-card__scenarios-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sg-level-card__scenario {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--fg-soft);
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}
.sg-level-card__scenario strong {
  display: inline-block;
  width: 18px;
  color: var(--accent-soft);
  font-weight: 600;
}
.sg-level-card__llmo li strong { color: var(--accent-soft); }

/* Card visuals — right column decoration per level */
.sg-level-card__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
}
.sg-level-card__visual {
  /* Clip the big-num so its drop-shadow halo doesn't bleed out of the card */
  overflow: hidden;
}
.sg-level-card__big-num {
  font-family: var(--font-display);
  /* Tighter clamp so two-digit numbers (01-03) never exceed the visual column.
     14vw at 1100-1300px viewport ≈ 154-180px, which fit comfortably. */
  font-size: clamp(7rem, 11vw, 13rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.85;
  background: linear-gradient(180deg, rgba(160, 172, 255, 0.6) 0%, rgba(91, 108, 255, 0.18) 70%, rgba(60, 80, 200, 0.04) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 24px 60px rgba(91, 108, 255, 0.28));
  user-select: none;
  /* Right-aligned with safe padding so glyphs hug the card edge but never clip */
  margin-left: auto;
  padding-right: 8px;
  white-space: nowrap;
}

/* Phone-only: hide the big-num visual entirely (mobile cards stack
   vertically and have no room for the giant 01/02/03 number).
   Laptops keep the big-num — the sticky-stack layout still has the
   visual column available beside the copy. */
@media (max-width: 900px) {
  .sg-level-card .solution-card__visual { display: none; }
  .sg-level-card .solution-card__inner { grid-template-columns: 1fr; }
}
/* Laptop (901-1280): the sticky-stack pattern applies aspect-ratio:1
   to .solution-card__visual via the mobile fallback. For level cards
   the visual is a text big-num, not an image, so we relax that. */
@media (max-width: 1024px) and (min-width: 901px), (min-width: 901px) and (min-device-aspect-ratio: 17/10) and (max-device-height: 950px), (min-width: 901px) and (max-device-height: 820px) {
  .sg-level-card .solution-card__visual { aspect-ratio: auto; max-height: none; }
}
/* Stat block (GEO card) — compact inline pill, source caption sits below */
.sg-level-card__stat {
  display: flex;
  gap: 22px;
  align-items: center;
  margin-top: 22px;
  padding: 18px 22px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(91, 108, 255, 0.16), rgba(91, 108, 255, 0.04));
  border: 1px solid rgba(140, 152, 255, 0.24);
}
.sg-level-card__stat-num {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2vw, 1.875rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, #ffffff, #c5cbff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  flex-shrink: 0;
  line-height: 1;
}
.sg-level-card__stat-vs {
  font-family: var(--font-mono);
  font-size: 0.7em;
  color: var(--fg-mute);
  font-weight: 400;
  -webkit-text-fill-color: var(--fg-mute);
}
.sg-level-card__stat-body {
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--fg-soft);
}
/* Source caption — now a standalone line under the stat pill,
   not wedged inside it. Cleaner block silhouette. */
.sg-level-card__stat-src {
  display: block;
  margin: 10px 0 0 22px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.sg-level-card__stack-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-content: center;
  max-width: 280px;
}
.sg-level-card__stack-tags span {
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-soft);
  letter-spacing: 0.04em;
  transition: background 200ms var(--ease-out), color 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.sg-level-card__stack-tags span:hover {
  background: rgba(91, 108, 255, 0.18);
  color: var(--fg);
  transform: translateY(-2px);
}

.sg-level-card__platforms {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 280px;
}
.sg-level-card__platforms-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: 6px;
}
.sg-level-card__platform {
  padding: 10px 16px;
  border-radius: 10px;
  background: rgba(91, 108, 255, 0.08);
  border: 1px solid rgba(140, 152, 255, 0.2);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--fg);
  transition: background 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.sg-level-card__platform:hover {
  background: rgba(91, 108, 255, 0.16);
  transform: translateX(4px);
}

.sg-level-card__code {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.65;
  padding: 24px 24px 22px;
  border-radius: 12px;
  background: rgba(8, 8, 12, 0.7);
  border: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  color: var(--fg-soft);
  max-width: 340px;
  width: 100%;
}
.sg-level-card__code-line { display: block; white-space: nowrap; }
.sg-level-card__code-comment { color: var(--fg-mute); }
.sg-level-card__code-line:nth-child(1),
.sg-level-card__code-line:nth-child(2) { color: var(--accent-soft); }
.sg-level-card__code-line:nth-child(5),
.sg-level-card__code-line:nth-child(6),
.sg-level-card__code-line:nth-child(7) { color: var(--fg); }

/* Featured GEO card (level 2) gets stronger treatment */
.sg-level-card--featured .solution-card__glass {
  background: linear-gradient(160deg, rgba(91, 108, 255, 0.12) 0%, rgba(91, 108, 255, 0.02) 100%);
}

@media (max-width: 880px) {
  .sg-level-card__split { grid-template-columns: 1fr; }
  .sg-level-card .solution-card__inner { grid-template-columns: 1fr; }
}

/* (Legacy classes kept for compatibility — used in older deprecated structure) */
.sg-level-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 24px 0 28px;
  padding: 24px;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
}
.sg-level-split__col { display: flex; flex-direction: column; gap: 12px; }
.sg-level-split__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-soft);
}
.sg-level-split__note {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(91, 108, 255, 0.1);
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--fg-soft);
}
.sg-level-stack {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 18px 0;
  border-top: 1px solid var(--hairline);
}
.sg-level-stack__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-right: 6px;
}
.sg-stack-chip {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--hairline);
  font-size: 0.78rem;
  color: var(--fg-soft);
  transition: background 200ms var(--ease-out), color 200ms var(--ease-out);
}
.sg-stack-chip:hover {
  background: rgba(91, 108, 255, 0.14);
  color: var(--fg);
}
.sg-level-stat {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 18px 0 24px;
  padding: 18px 22px;
  border-radius: 14px;
  background: rgba(91, 108, 255, 0.08);
  border: 1px solid rgba(140, 152, 255, 0.22);
}
.sg-level-stat__num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 3vw, 2.5rem);
  color: var(--accent-soft);
  letter-spacing: -0.02em;
  line-height: 1;
}
.sg-level-stat__body {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--fg-soft);
}
.sg-level-stat__body strong { color: var(--fg); font-weight: 500; }
.sg-level-stat__source {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.sg-level-h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.125rem, 1.4vw, 1.25rem);
  margin: 28px 0 16px;
  color: var(--fg);
}

/* scenarios A/B/C */
.sg-scenarios {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
.sg-scenario {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 20px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: background 240ms var(--ease-out), transform 240ms var(--ease-out);
}
.sg-scenario:hover {
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-3px);
}
.sg-scenario--accent {
  background: linear-gradient(180deg, rgba(91, 108, 255, 0.14), rgba(91, 108, 255, 0.04));
  border-color: rgba(140, 152, 255, 0.32);
}
.sg-scenario__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sg-scenario__tag {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--accent-soft);
  letter-spacing: 0.02em;
  line-height: 1;
}
.sg-scenario__discount {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.sg-scenario--accent .sg-scenario__discount { color: var(--accent-soft); }
.sg-scenario__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.075rem;
  color: var(--fg);
  letter-spacing: -0.01em;
}
.sg-scenario__body {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--fg-soft);
}

/* platforms logo strip */
.sg-platforms {
  padding: 22px 0 4px;
  border-top: 1px solid var(--hairline);
}
.sg-platforms__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
  display: block;
  margin-bottom: 14px;
}
.sg-platforms__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.sg-platform-chip {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hairline);
  min-width: 130px;
}
.sg-platform-chip__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--fg);
}
.sg-platform-chip__meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--fg-mute);
}

/* LLMO bullets */
.sg-llmo-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sg-llmo-list li {
  padding: 14px 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--hairline);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--fg-soft);
}
.sg-llmo-list strong { display: block; color: var(--fg); font-weight: 500; margin-bottom: 4px; }
.sg-llmo-list code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  padding: 1px 6px;
  background: rgba(91, 108, 255, 0.14);
  border-radius: 4px;
  color: var(--accent-soft);
}

/* ============================================================
   BLOCK 5 · Tool stack — bento + custom-tools featured
   ============================================================ */
.sg-tools {
  padding: clamp(96px, 12vw, 160px) 6vw;
}

/* Light island — Block 5 as rhythm-break in the dark stack.
   Local theme tokens override globals; toggles nav-shell colour via
   [data-nav-light] on the section element. */
.sg-tools--light {
  background:
    radial-gradient(80% 60% at 20% 10%, rgba(91, 108, 255, 0.06), transparent 60%),
    radial-gradient(70% 50% at 90% 80%, rgba(91, 108, 255, 0.05), transparent 60%),
    #f4f5f8;
  color: #14172b;
}
.sg-tools--light .sg-tools__title { color: #14172b; }
.sg-tools--light .sg-tools__lede { color: rgba(20, 23, 43, 0.62); }
.sg-tools--light .eyebrow {
  background: rgba(20, 23, 43, 0.06);
  color: rgba(20, 23, 43, 0.7);
  border-color: rgba(20, 23, 43, 0.08);
}
.sg-tools--light .eyebrow__dot { background: rgba(20, 23, 43, 0.5); }
.sg-tools--light .sg-tool-card {
  background: rgba(20, 23, 43, 0.04);
  border-color: rgba(20, 23, 43, 0.08);
}
.sg-tools--light .sg-tool-card:hover {
  background: rgba(20, 23, 43, 0.07);
  border-color: rgba(20, 23, 43, 0.14);
}
.sg-tools--light .sg-tool-card--accent {
  background: linear-gradient(180deg, rgba(91, 108, 255, 0.14), rgba(91, 108, 255, 0.04));
  border-color: rgba(91, 108, 255, 0.32);
}
.sg-tools--light .sg-tool-card__title { color: #14172b; }
.sg-tools--light .sg-tool-card__items { color: rgba(20, 23, 43, 0.66); }
.sg-tools--light .sg-tool-card__num { color: rgba(91, 108, 255, 0.85); }
.sg-tools--light .sg-tool-card__note { color: rgba(20, 23, 43, 0.45); }
.sg-tools--light .sg-tools-custom {
  background: linear-gradient(180deg, rgba(91, 108, 255, 0.1), rgba(91, 108, 255, 0.02)),
              rgba(255, 255, 255, 0.6);
  border-color: rgba(91, 108, 255, 0.22);
  backdrop-filter: blur(20px);
}
.sg-tools--light .sg-tools-custom__title { color: #14172b; }
.sg-tools--light .sg-tools-custom__lede { color: rgba(20, 23, 43, 0.66); }
.sg-tools--light .sg-tools-custom__list { color: rgba(20, 23, 43, 0.7); }
.sg-tools--light .sg-tools-custom__list strong { color: #14172b; }
.sg-tools--light .sg-tools-custom__list-num { color: rgba(91, 108, 255, 0.85); }
.sg-tools--light .sg-tools-custom__tag { color: rgba(91, 108, 255, 0.85); }
.sg-tools--light .sg-tools-custom__foot {
  color: rgba(20, 23, 43, 0.5);
  border-top-color: rgba(91, 108, 255, 0.18);
}
.sg-tools__head { max-width: 820px; margin: 0 auto 56px; text-align: center; }
.sg-tools__head .eyebrow { justify-content: center; }
.sg-tools__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.25rem, 4.6vw, 3.75rem);
  letter-spacing: -0.045em;
  line-height: 1;
  margin: 18px 0 20px;
  color: var(--fg);
}
.sg-tools__lede {
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.65;
  color: var(--fg-soft);
  max-width: 680px;
  margin: 0 auto;
}
.sg-tools__grid {
  max-width: var(--content-max);
  margin: 0 auto 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
/* AI Citation Tracking (3rd card with --accent) gets visual emphasis via
   accent bg already; 3-col layout gives each card breathable width. */
.sg-tool-card {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(160deg, rgba(91, 108, 255, 0.04), transparent 40%),
    rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition:
    background 320ms var(--ease-out),
    border-color 320ms var(--ease-out),
    box-shadow 320ms var(--ease-out),
    transform 320ms var(--ease-out);
}
.sg-tool-card[data-tnum]::before {
  content: attr(data-tnum);
  position: absolute;
  right: -18px;
  bottom: -42px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(8rem, 12vw, 12rem);
  line-height: 0.85;
  letter-spacing: -0.05em;
  background: linear-gradient(180deg, rgba(60, 80, 200, 0.22), rgba(91, 108, 255, 0.04));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 14px rgba(91, 108, 255, 0.16));
  z-index: 0;
  pointer-events: none;
  transition:
    opacity 400ms var(--ease-out),
    transform 600ms var(--ease-out),
    filter 400ms var(--ease-out);
  opacity: 0.85;
}
.sg-tool-card[data-tnum] > * { position: relative; z-index: 1; }
.sg-tool-card:hover {
  background:
    linear-gradient(160deg, rgba(91, 108, 255, 0.1), transparent 50%),
    rgba(255, 255, 255, 0.06);
  border-color: rgba(140, 152, 255, 0.28);
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 30px 70px -30px rgba(91, 108, 255, 0.32);
}
@media (hover: hover) {
  .sg-tool-card:hover[data-tnum]::before {
    opacity: 1;
    transform: translateY(-4px) scale(1.04);
    background: linear-gradient(180deg, rgba(60, 80, 200, 0.42), rgba(91, 108, 255, 0.1));
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 0 20px rgba(91, 108, 255, 0.28));
  }
}
.sg-tool-card__glyph,
.sg-phase__icon,
.sg-kpi__glyph {
  /* Common rules for PNG icons living inside these wrappers — fill the
     wrapper, preserve aspect ratio, no inner gradient bleed-through. */
}
.sg-tool-card__glyph > img,
.sg-phase__icon > img,
.sg-kpi__glyph > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.sg-tool-card__glyph {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(91, 108, 255, 0.16), rgba(91, 108, 255, 0.04));
  border: 1px solid rgba(140, 152, 255, 0.22);
  color: var(--accent-soft);
  margin-bottom: 4px;
  overflow: hidden;
}
.sg-tool-card__glyph > svg { width: 26px; height: 26px; flex: 0 0 26px; }
.sg-tool-card--accent .sg-tool-card__glyph {
  background: linear-gradient(160deg, rgba(140, 152, 255, 0.32), rgba(91, 108, 255, 0.1));
  border-color: rgba(140, 152, 255, 0.45);
}
.sg-tool-card--accent {
  background: linear-gradient(180deg, rgba(91, 108, 255, 0.12), rgba(91, 108, 255, 0.03));
  border-color: rgba(140, 152, 255, 0.28);
}
.sg-tool-card__head { display: flex; flex-direction: column; gap: 8px; }
.sg-tool-card__num { display: none; }
.sg-tool-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  color: var(--fg);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.sg-tool-card__items {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--fg-soft);
}
.sg-tool-card__note {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--fg-mute);
}

.sg-tools-custom {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 48px clamp(28px, 4vw, 56px);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(91, 108, 255, 0.1), rgba(91, 108, 255, 0.02));
  border: 1px solid rgba(140, 152, 255, 0.22);
  display: grid;
  grid-template-columns: 380px 1fr;
  grid-template-rows: auto 1fr auto;
  column-gap: clamp(40px, 5vw, 80px);
  row-gap: 24px;
  align-items: start;
}
.sg-tools-custom__head { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 18px; }
.sg-tools-custom__lede { grid-column: 1; grid-row: 2; align-self: start; }
.sg-tools-custom__list { grid-column: 2; grid-row: 1 / span 2; }
.sg-tools-custom__foot { grid-column: 1 / -1; grid-row: 3; }

/* v2 layout — text on left, mockup on right.
   !important on grid-template to defeat the older .sg-tools-custom rule
   above that defines a 3-row grid for the legacy structure. */
.sg-tools-custom--v2 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) !important;
  grid-template-rows: auto !important;
  column-gap: clamp(40px, 5vw, 72px);
  row-gap: 32px;
  align-items: center;
  padding: 52px clamp(28px, 4vw, 56px);
}
.sg-tools-custom--v2 .sg-tools-custom__text { display: flex; flex-direction: column; gap: 16px; }
.sg-tools-custom--v2 .sg-tools-custom__title { margin: 4px 0 4px; }
.sg-tools-custom--v2 .sg-tools-custom__lede { margin: 0; }
.sg-tools-custom--v2 .sg-tools-custom__list { margin: 0; padding: 0; }
.sg-tools-custom--v2 .sg-tools-custom__foot { margin-top: 8px; padding-top: 12px; border-top: 1px solid rgba(140, 152, 255, 0.18); }

/* Override conflicting grid placement from older rules above */
.sg-tools-custom--v2 .sg-tools-custom__text,
.sg-tools-custom--v2 .sg-tools-custom__mockup {
  grid-column: unset;
  grid-row: unset;
}
.sg-tools-custom--v2 .sg-tools-custom__mockup {
  position: relative;
}

/* ============================================================
   Handoff block — "Что остаётся у клиента после проекта"
   Plain text on left, dashboard image on right. No card chrome —
   intentional break from the rest of the page which is all blocked.
   ============================================================ */
.sg-handoff {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 56px clamp(0px, 2vw, 24px) 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  column-gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.sg-handoff__text { display: flex; flex-direction: column; gap: 18px; }
.sg-handoff__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(91, 108, 255, 0.85);
}
.sg-handoff__title {
  margin: 4px 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.875rem, 3.2vw, 2.625rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: #14172b;
}
.sg-handoff__lede {
  margin: 0;
  font-size: clamp(1rem, 1.15vw, 1.0625rem);
  line-height: 1.6;
  color: rgba(20, 23, 43, 0.7);
  max-width: 46ch;
}
.sg-handoff__list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.sg-handoff__list li {
  display: grid;
  grid-template-columns: clamp(64px, 6vw, 84px) 1fr;
  gap: 14px;
  align-items: start;
  color: rgba(20, 23, 43, 0.72);
  font-size: 0.95rem;
  line-height: 1.55;
}
/* === Level-card animations (shared by web-development & seo-geo) === */
/* Match main page .vis sizing/centering: full flex centering, max 360x360 */
.page-web-development .sg-level-card__visual,
.page-seo-geo .sg-level-card__visual {
  overflow: visible;  /* allow particle glow / drop-shadows to bleed */
  min-height: 320px;
}
.page-web-development .sg-level-card__visual .vis,
.page-seo-geo .sg-level-card__visual .vis {
  width: 100%;
  height: 100%;
  max-width: 360px;
  max-height: 360px;
  aspect-ratio: 1 / 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-web-development .sg-level-card__visual .vis svg,
.page-seo-geo .sg-level-card__visual .vis svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* --- 01: Marketing WebGL — slowly rotating wireframe cube + particles + halo --- */
.vis--mkt3d .mkt3d-stage {
  perspective: 900px;
  width: 100%;
  height: 100%;
  position: relative;
}
.vis--mkt3d .mkt3d-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70%;
  height: 70%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91,108,255,0.42) 0%, rgba(91,108,255,0.12) 45%, transparent 70%);
  filter: blur(8px);
  animation: mkt3dPulse 4.5s ease-in-out infinite;
}
@keyframes mkt3dPulse {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.9); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.12); }
}
.vis--mkt3d .mkt3d-cube {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 140px;
  height: 140px;
  margin: -70px 0 0 -70px;
  transform-style: preserve-3d;
  animation: mkt3dRotate 18s linear infinite;
}
.vis--mkt3d .mkt3d-face {
  position: absolute;
  width: 140px;
  height: 140px;
  border: 1px solid rgba(140, 152, 255, 0.7);
  background: linear-gradient(135deg, rgba(91, 108, 255, 0.06), rgba(91, 108, 255, 0.22));
  box-shadow: 0 0 36px rgba(91, 108, 255, 0.15) inset;
}
.vis--mkt3d .mkt3d-face--front  { transform: translateZ(70px); }
.vis--mkt3d .mkt3d-face--back   { transform: rotateY(180deg) translateZ(70px); }
.vis--mkt3d .mkt3d-face--right  { transform: rotateY(90deg)  translateZ(70px); }
.vis--mkt3d .mkt3d-face--left   { transform: rotateY(-90deg) translateZ(70px); }
.vis--mkt3d .mkt3d-face--top    { transform: rotateX(90deg)  translateZ(70px); }
.vis--mkt3d .mkt3d-face--bottom { transform: rotateX(-90deg) translateZ(70px); }
@keyframes mkt3dRotate {
  0%   { transform: rotateX(-18deg) rotateY(0deg); }
  100% { transform: rotateX(-18deg) rotateY(360deg); }
}
.vis--mkt3d .mkt3d-particle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: #8c98ff;
  filter: drop-shadow(0 0 8px #5b6cff);
  transform: translate(var(--x, 0), var(--y, 0));
  animation: mkt3dParticle 5s var(--d, 0s) ease-in-out infinite;
}
@keyframes mkt3dParticle {
  0%, 100% { transform: translate(var(--x), var(--y)) scale(1); opacity: 0.35; }
  50%      { transform: translate(calc(var(--x) * 0.35), calc(var(--y) * 0.35)) scale(1.5); opacity: 1; }
}

/* --- 02: Premium Product UI — mini dashboard, animated counter/spark/progress --- */
.vis--pui .pui-counter {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  filter: drop-shadow(0 4px 14px rgba(91,108,255,0.45));
  animation: puiCounterPulse 3.6s ease-in-out infinite;
  transform-origin: 50px 78px;
  transform-box: fill-box;
}
@keyframes puiCounterPulse {
  0%, 100% { opacity: 0.92; }
  50%      { opacity: 1; }
}
.vis--pui .pui-spark {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  filter: drop-shadow(0 0 4px rgba(91,108,255,0.55));
  animation: puiSparkDraw 4.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.vis--pui .pui-spark-dot {
  opacity: 0;
  filter: drop-shadow(0 0 6px #5b6cff);
  animation: puiSparkDot 4.5s ease-in-out infinite;
}
@keyframes puiSparkDraw {
  0%        { stroke-dashoffset: 220; }
  40%, 70%  { stroke-dashoffset: 0; }
  95%, 100% { stroke-dashoffset: 220; }
}
@keyframes puiSparkDot {
  0%, 38%   { opacity: 0; }
  46%, 70%  { opacity: 1; }
  90%, 100% { opacity: 0; }
}
.vis--pui .pui-prog {
  transform-origin: left;
  transform-box: fill-box;
  animation: puiProgFill 4.5s cubic-bezier(0.32, 0.72, 0, 1) infinite;
}
@keyframes puiProgFill {
  0%        { transform: scaleX(0); }
  45%, 75%  { transform: scaleX(0.96); }
  95%, 100% { transform: scaleX(0); }
}

/* --- 03: AI Funnel — chat bubbles flow into CRM card filling with data --- */
.vis--funnel .funnel-chat {
  transform-box: fill-box;
}
.vis--funnel .funnel-chat--user {
  animation: funnelChatUser 6.5s ease-out infinite;
  transform-origin: 72px 32px;
}
@keyframes funnelChatUser {
  0%, 4%   { opacity: 0; transform: translateX(-14px); }
  10%, 100% { opacity: 1; transform: translateX(0); }
}
.vis--funnel .funnel-chat--ai {
  animation: funnelChatAI 6.5s ease-out infinite;
  transform-origin: 128px 70px;
}
@keyframes funnelChatAI {
  0%, 18%  { opacity: 0; transform: translateX(14px); }
  24%, 100% { opacity: 1; transform: translateX(0); }
}
.vis--funnel .funnel-arrow {
  animation: funnelArrow 6.5s ease-in-out infinite;
}
@keyframes funnelArrow {
  0%, 38%  { opacity: 0; }
  45%, 100% { opacity: 1; }
}
.vis--funnel .funnel-crm {
  transform-box: fill-box;
  transform-origin: 100px 159px;
  animation: funnelCrm 6.5s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes funnelCrm {
  0%, 50%  { opacity: 0; transform: translateY(10px) scale(0.95); }
  60%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}
.vis--funnel .funnel-crm-line {
  transform-origin: left;
  transform-box: fill-box;
  animation: funnelCrmLine 6.5s ease-out infinite;
}
.vis--funnel .funnel-crm-line:nth-of-type(2) { animation-delay: 0.15s; }
.vis--funnel .funnel-crm-line:nth-of-type(3) { animation-delay: 0.30s; }
.vis--funnel .funnel-crm-line:nth-of-type(4) { animation-delay: 0.45s; }
@keyframes funnelCrmLine {
  0%, 62%   { transform: scaleX(0); }
  72%, 100% { transform: scaleX(1); }
}
.vis--funnel .funnel-crm-tag {
  opacity: 0;
  animation: funnelCrmTag 6.5s ease-out infinite;
}
@keyframes funnelCrmTag {
  0%, 82%   { opacity: 0; }
  90%, 100% { opacity: 1; }
}

/* === Seo-geo "Три уровня работы" — SEO / GEO / LLMO animations === */

/* --- L01: Classical SEO — SERP results page with #1 rank badge --- */
.vis--serp .serp-query {
  animation: serpType 6s ease-in-out infinite;
}
@keyframes serpType {
  0%        { width: 0; }
  18%, 50%  { width: 100px; }
  60%, 100% { width: 100px; opacity: 0.55; }
}
.vis--serp .serp-result {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: left center;
  animation: serpResult 6s ease-out infinite;
}
.vis--serp .serp-result--1 { animation-delay: 0.6s; }
.vis--serp .serp-result--2 { animation-delay: 0.9s; }
.vis--serp .serp-result--3 { animation-delay: 1.2s; }
.vis--serp .serp-result--4 { animation-delay: 1.5s; }
@keyframes serpResult {
  0%, 8%     { opacity: 0; transform: translateY(6px); }
  16%, 100%  { opacity: 1; transform: translateY(0); }
}
.vis--serp .serp-badge {
  transform-box: fill-box;
  transform-origin: 172px 57px;
  animation: serpBadge 6s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(91,108,255,0.6));
}
@keyframes serpBadge {
  0%, 26%    { transform: scale(0); opacity: 0; }
  32%        { transform: scale(1.3); opacity: 1; }
  40%, 100%  { transform: scale(1); opacity: 1; }
}
.vis--serp .serp-schema {
  opacity: 0;
  animation: serpSchema 6s ease-out infinite;
}
@keyframes serpSchema {
  0%, 70%    { opacity: 0; transform: translateY(4px); }
  80%, 100%  { opacity: 1; transform: translateY(0); }
}

/* --- L02: GEO — answer capsule extraction to AI Answer pill --- */
.vis--geox .geox-capsule {
  transform-box: fill-box;
  transform-origin: center;
  animation: geoxCapsule 6.5s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(91,108,255,0.35));
}
@keyframes geoxCapsule {
  0%, 18%    { opacity: 0.7; transform: scale(1); }
  35%        { opacity: 1;   transform: scale(1.04); }
  55%, 100%  { opacity: 1;   transform: scale(1); }
}
.vis--geox .geox-scan {
  opacity: 0;
  animation: geoxScan 6.5s ease-in-out infinite;
}
@keyframes geoxScan {
  0%        { opacity: 0; transform: translateY(-92px); }
  6%        { opacity: 0.8; }
  35%       { opacity: 0.9; transform: translateY(0); }
  45%       { opacity: 0;   transform: translateY(4px); }
  100%      { opacity: 0; }
}
.vis--geox .geox-line {
  stroke-dasharray: 70;
  stroke-dashoffset: 70;
  animation: geoxLine 6.5s ease-out infinite;
}
@keyframes geoxLine {
  0%, 38%    { stroke-dashoffset: 70; }
  55%, 100%  { stroke-dashoffset: 0; }
}
.vis--geox .geox-citation {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: geoxCitation 6.5s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes geoxCitation {
  0%, 48%    { opacity: 0; transform: translateY(8px) scale(0.92); }
  60%, 100%  { opacity: 1; transform: translateY(0) scale(1); }
}
.vis--geox .geox-source {
  opacity: 0;
  animation: geoxSource 6.5s ease-out infinite;
}
@keyframes geoxSource {
  0%, 80%   { opacity: 0; }
  90%, 100% { opacity: 1; }
}

/* --- L03: LLMO — JSON-LD code typing + crawler bots + IndexNow → Bing --- */
.vis--llmo .llmo-line {
  opacity: 0;
  animation: llmoLine 6s var(--d, 0s) ease-out infinite;
}
@keyframes llmoLine {
  0%, 10%   { opacity: 0; transform: translateX(-4px); }
  18%, 100% { opacity: 1; transform: translateX(0); }
}
.vis--llmo .llmo-bot {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: llmoBot 6s var(--d, 0s) cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes llmoBot {
  0%, 16%   { opacity: 0; transform: translateY(6px) scale(0.92); }
  28%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}
.vis--llmo .llmo-status {
  transform-box: fill-box;
  transform-origin: center;
  animation: llmoStatus 1.8s ease-in-out infinite;
}
@keyframes llmoStatus {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.4); }
}
.vis--llmo .llmo-index {
  opacity: 0;
  animation: llmoIndex 6s ease-out infinite;
}
@keyframes llmoIndex {
  0%, 60%   { opacity: 0; transform: translateY(4px); }
  72%, 100% { opacity: 1; transform: translateY(0); }
}

/* Reduced motion: freeze each animation at a calm in-frame state */
@media (prefers-reduced-motion: reduce) {
  .vis--mkt3d *,
  .vis--pui *,
  .vis--funnel *,
  .vis--serp *,
  .vis--geox *,
  .vis--llmo * { animation: none !important; }
  .vis--mkt3d .mkt3d-cube { transform: rotateX(-18deg) rotateY(35deg); }
  .vis--pui .pui-spark    { stroke-dashoffset: 0; }
  .vis--pui .pui-spark-dot { opacity: 1; }
  .vis--pui .pui-prog     { transform: scaleX(0.96); }
  .vis--funnel .funnel-chat--user,
  .vis--funnel .funnel-chat--ai,
  .vis--funnel .funnel-crm,
  .vis--funnel .funnel-crm-tag { opacity: 1; transform: none; }
  .vis--serp .serp-query  { width: 100px; }
  .vis--serp .serp-result,
  .vis--serp .serp-schema { opacity: 1; transform: none; }
  .vis--serp .serp-badge  { transform: scale(1); opacity: 1; }
  .vis--geox .geox-capsule,
  .vis--geox .geox-citation,
  .vis--geox .geox-source { opacity: 1; transform: none; }
  .vis--geox .geox-line   { stroke-dashoffset: 0; }
  .vis--llmo .llmo-line,
  .vis--llmo .llmo-bot,
  .vis--llmo .llmo-index  { opacity: 1; transform: none; }
}
.sg-handoff__list strong {
  display: block;
  color: #14172b;
  font-weight: 600;
  margin-bottom: 4px;
}
.sg-handoff__list-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.75rem, 4.2vw, 3.75rem);
  letter-spacing: -0.045em;
  line-height: 0.78;
  margin-top: 0.1em;
  background: linear-gradient(180deg, rgba(140, 152, 255, 0.95) 0%, rgba(91, 108, 255, 1) 55%, rgba(42, 58, 255, 0.85) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 18px rgba(91, 108, 255, 0.22));
}
.sg-handoff__foot {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(91, 108, 255, 0.18);
  font-size: 0.9rem;
  color: rgba(20, 23, 43, 0.55);
  max-width: 50ch;
}
.sg-handoff__visual {
  position: relative;
  width: 100%;
}
.sg-handoff__visual img {
  display: block;
  width: 112%;
  max-width: none;
  margin-left: -6%;
  height: auto;
}
@media (max-width: 960px) {
  .sg-handoff {
    grid-template-columns: 1fr;
    row-gap: 32px;
    padding: 40px 0 16px;
  }
  .sg-handoff__visual { order: -1; }
  .sg-handoff__visual img {
    width: 100%;
    margin-left: 0;
  }
}

/* ============================================================
   Custom dashboard mockup (CSS-only) — Block 5 hero visual
   Swap with <img src="../assets/dashboard-mockup.png"> when ready.
   ============================================================ */
.sg-mockup {
  position: relative;
  border-radius: 16px;
  background:
    linear-gradient(160deg, rgba(91, 108, 255, 0.1), rgba(91, 108, 255, 0.02)),
    #0a0a14;
  border: 1px solid rgba(140, 152, 255, 0.28);
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 50px 100px -30px rgba(91, 108, 255, 0.4),
    0 30px 60px -28px rgba(0, 0, 0, 0.7);
  transform-style: preserve-3d;
}
.sg-mockup__bar { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(140, 152, 255, 0.15); }
.sg-mockup__bar-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(140, 152, 255, 0.3);
}
.sg-mockup__bar-dot:nth-child(2) { background: rgba(91, 108, 255, 0.5); }
.sg-mockup__bar-dot:nth-child(3) { background: rgba(91, 108, 255, 0.85); }
.sg-mockup__bar-title {
  margin-left: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.55);
}
.sg-mockup__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 10px;
}
.sg-mockup__panel {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(140, 152, 255, 0.14);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 90px;
}
.sg-mockup__panel--queen {
  grid-column: span 1;
  grid-row: span 2;
  background:
    linear-gradient(160deg, rgba(91, 108, 255, 0.2), rgba(91, 108, 255, 0.05)),
    rgba(255, 255, 255, 0.03);
  border-color: rgba(140, 152, 255, 0.34);
  justify-content: flex-start;
}
.sg-mockup__panel--wide { grid-column: span 2; }
.sg-mockup__panel-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.sg-mockup__panel-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, #c6cdff 0%, var(--accent-soft) 60%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}
.sg-mockup__panel-sub {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--accent-soft);
  letter-spacing: 0.06em;
}
.sg-mockup__spark { width: 100%; height: 36px; margin-top: auto; }
.sg-mockup__bars { display: flex; align-items: flex-end; gap: 4px; height: 36px; margin-top: 4px; }
.sg-mockup__bars span {
  flex: 1;
  height: var(--h);
  background: linear-gradient(180deg, var(--accent-soft), var(--accent));
  border-radius: 2px;
  opacity: 0.8;
}
.sg-mockup__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: rgba(255, 255, 255, 0.7);
}
.sg-mockup__list li { display: flex; justify-content: space-between; }
.sg-mockup__list li span:last-child { color: var(--accent-soft); }
.sg-mockup__tracker {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: rgba(255, 255, 255, 0.6);
}
.sg-mockup__tracker li { display: flex; justify-content: space-between; padding: 3px 6px; background: rgba(255,255,255,0.03); border-radius: 4px; }
.sg-mockup__pos { color: var(--accent-soft); font-weight: 500; }
.sg-mockup__strip {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid rgba(140, 152, 255, 0.12);
}
.sg-mockup__chip {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(91, 108, 255, 0.14);
  border: 1px solid rgba(140, 152, 255, 0.2);
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--accent-soft);
  letter-spacing: 0.04em;
}

/* Light theme overrides for mockup since Block 5 is light island */
.sg-tools--light .sg-mockup {
  background:
    linear-gradient(160deg, rgba(91, 108, 255, 0.16), rgba(91, 108, 255, 0.04)),
    #161825;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 50px 100px -30px rgba(91, 108, 255, 0.4),
    0 30px 60px -28px rgba(20, 23, 43, 0.4);
}

@media (max-width: 1100px) {
  .sg-tools-custom--v2 { grid-template-columns: 1fr; }
  .sg-mockup__grid { grid-template-columns: 1fr 1fr; }
  .sg-mockup__panel--wide { grid-column: span 2; }
}
.sg-tools-custom__tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-soft);
}
.sg-tools-custom__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  letter-spacing: -0.02em;
  line-height: 1.22;
  margin: 0;
  color: var(--fg);
}
.sg-tools-custom__lede {
  margin: 0 0 28px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--fg-soft);
}
.sg-tools-custom__list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sg-tools-custom__list li {
  display: flex;
  gap: 14px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--fg-soft);
}
.sg-tools-custom__list strong { color: var(--fg); font-weight: 500; }
.sg-tools-custom__list-num {
  flex: 0 0 32px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--accent-soft);
  padding-top: 4px;
}
.sg-tools-custom__foot {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid rgba(140, 152, 255, 0.18);
  font-size: 0.86rem;
  color: var(--fg-mute);
  font-style: italic;
}

/* ============================================================
   BLOCK 6 · Timeline — vertical phases (distinct from sticky rail)
   ============================================================ */
/* ============================================================
   BLOCK 6 · Process — flat row reveal pattern (replaces Z-stack)
   Idle: 3 rows of fixed height showing only num + short display word.
   Hover: row expands (grid-template-rows auto 0fr → auto 1fr),
   revealing body text + phase icon backdrop. Adapted from
   findrealestate.com services pattern.
   ============================================================ */
.sg-process {
  padding: clamp(96px, 12vw, 160px) 0;
  position: relative;
}
.sg-process__head {
  max-width: var(--content-max);
  margin: 0 auto clamp(64px, 8vw, 96px);
  padding: 0 clamp(20px, 4vw, 56px);
}
.sg-process__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.25rem, 4.6vw, 3.75rem);
  letter-spacing: -0.045em;
  line-height: 1;
  margin: 18px 0 20px;
  color: var(--fg);
}
.sg-process__lede {
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.65;
  color: var(--fg-soft);
  max-width: 600px;
}
.sg-process__rows {
  width: 100%;
  border-top: 1px solid var(--hairline);
}

.sg-phase-row {
  position: relative;
  display: grid;
  grid-template-rows: auto 0fr;
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
  isolation: isolate;
  transition: grid-template-rows 600ms var(--ease-out);
  cursor: pointer;
  outline: none;
}
/* Full-bleed backdrop image — fades in on hover, dark overlay for text legibility */
.sg-phase-row::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(8, 8, 12, 0.82) 0%, rgba(8, 8, 12, 0.55) 50%, rgba(8, 8, 12, 0.5) 100%),
    var(--phase-bg, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms var(--ease-out);
  z-index: -1;
}
.sg-phase-row[data-idx="0"] { --phase-bg: url("seo-geo/assets/phase-foundation-bg.webp"); }
.sg-phase-row[data-idx="1"] { --phase-bg: url("seo-geo/assets/phase-content-bg.webp"); }
.sg-phase-row[data-idx="2"] { --phase-bg: url("seo-geo/assets/phase-handoff-bg.webp"); }

.sg-phase-row:hover,
.sg-phase-row:focus-visible,
.sg-phase-row:focus-within,
.sg-phase-row.is-open {
  grid-template-rows: auto 1fr;
}
.sg-phase-row:hover::before,
.sg-phase-row:focus-visible::before,
.sg-phase-row:focus-within::before,
.sg-phase-row.is-open::before {
  opacity: 1;
}

.sg-phase-row__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(36px, 5vw, 56px) clamp(28px, 5vw, 96px);
  min-height: clamp(160px, 18vw, 220px);
}
.sg-phase-row__num {
  position: absolute;
  left: clamp(28px, 5vw, 96px);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-mute);
  white-space: nowrap;
  transition: color 320ms var(--ease-out);
}
.sg-phase-row:hover .sg-phase-row__num,
.sg-phase-row:focus-visible .sg-phase-row__num,
.sg-phase-row:focus-within .sg-phase-row__num,
.sg-phase-row.is-open .sg-phase-row__num {
  color: var(--accent-soft);
}
.sg-phase-row__display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(3rem, 7vw, 6.5rem);
  letter-spacing: -0.045em;
  line-height: 0.95;
  /* line-height < 1 leaves descenders (g, p, …) below the line box. When the
     open phase uses background-clip:text the part of the glyph below the box gets
     no gradient and turns transparent ("g" looks cut). Pad the bottom so the
     background-paint box covers the descenders. Measured: at lh 0.95 the "g" ink
     sits ~0.195em below the line box, so 0.18em still clipped ~1.4px of the tail
     ("entrega"/"diagnóstico"). 0.24em covers it with margin across locales. */
  padding-bottom: 0.24em;
  color: var(--fg);
  text-align: center;
  transition: color 320ms var(--ease-out);
}
.sg-phase-row:hover .sg-phase-row__display,
.sg-phase-row:focus-visible .sg-phase-row__display,
.sg-phase-row:focus-within .sg-phase-row__display,
.sg-phase-row.is-open .sg-phase-row__display {
  background: linear-gradient(180deg,
    rgba(170, 182, 255, 0.95) 0%,
    rgba(130, 148, 255, 0.85) 50%,
    rgba(91, 108, 255, 0.7) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sg-phase-row__panel {
  overflow: hidden;
  min-height: 0;
}
.sg-phase-row__panel-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 120px);
  padding: 0 clamp(28px, 5vw, 96px) clamp(48px, 6vw, 80px);
  align-items: start;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 400ms 80ms var(--ease-out),
              transform 500ms 80ms var(--ease-out);
}
.sg-phase-row:hover .sg-phase-row__panel-inner,
.sg-phase-row:focus-visible .sg-phase-row__panel-inner,
.sg-phase-row.is-open .sg-phase-row__panel-inner {
  opacity: 1;
  transform: translateY(0);
}
.sg-phase-row__body {
  margin: 0;
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  line-height: 1.6;
  color: rgba(236, 237, 245, 0.88);
  max-width: 60ch;
}
.sg-phase-row__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sg-phase-row__list li {
  position: relative;
  padding-left: 22px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(236, 237, 245, 0.78);
}
.sg-phase-row__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 14px rgba(91, 108, 255, 0.6);
}

@media (max-width: 900px) {
  .sg-phase-row__head {
    gap: 16px;
    padding: 28px 20px;
    min-height: 120px;
  }
  .sg-phase-row__display { font-size: clamp(2.25rem, 9vw, 3.25rem); }
  .sg-phase-row__panel-inner {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 0 20px 32px;
  }
  /* Phones have no hover and a row collapsed to a single word reads as broken,
     so open every phase row by default (same state as :hover / .is-open). */
  .sg-phase-row { grid-template-rows: auto 1fr; }
  .sg-phase-row::before { opacity: 1; }
  .sg-phase-row__num { color: var(--accent-soft); }
  .sg-phase-row__display {
    background: linear-gradient(180deg,
      rgba(170, 182, 255, 0.95) 0%,
      rgba(130, 148, 255, 0.85) 50%,
      rgba(91, 108, 255, 0.7) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .sg-phase-row__panel-inner { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .sg-phase-row,
  .sg-phase-row::before,
  .sg-phase-row__panel-inner,
  .sg-phase-row__display,
  .sg-phase-row__num { transition: none; }
}

.sg-timeline {
  padding: clamp(96px, 12vw, 160px) 6vw;
  position: relative;
}
.sg-timeline__head { max-width: 820px; margin: 0 auto 64px; }
.sg-timeline__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--h2-size);
  letter-spacing: var(--h2-tracking);
  line-height: var(--h2-line);
  margin: 18px 0 20px;
  color: var(--fg);
}
.sg-timeline__lede {
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.65;
  color: var(--fg-soft);
}
.sg-timeline__lede strong { color: var(--accent-soft); font-weight: 500; }
.sg-timeline__phases {
  list-style: none;
  margin: 0 0 56px;
  padding: 0;
  max-width: 1080px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
.sg-timeline__phases::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 20px;
  bottom: 20px;
  width: 2px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent) 35%, rgba(91, 108, 255, 0.18) 75%, transparent);
  opacity: 0.55;
}
.sg-phase {
  position: relative;
  padding-left: 76px;
}
.sg-phase__marker {
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(91, 108, 255, 0.22), rgba(91, 108, 255, 0.06));
  border: 1px solid rgba(140, 152, 255, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 4px rgba(8, 8, 12, 1); /* mask line behind marker */
}
.sg-phase__marker-num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  color: var(--accent-soft);
  letter-spacing: 0.02em;
}
.sg-phase__marker-pulse {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(140, 152, 255, 0.4);
  opacity: 0;
  transform: scale(0.92);
  pointer-events: none;
}
/* One-shot pulse triggered when phase card enters viewport via .is-revealed.
   Emil rule: no infinite decorative motion on read-heavy page. */
.sg-phase.is-revealed .sg-phase__marker-pulse {
  animation: sg-phase-pulse 1.4s var(--ease-out) forwards;
}
@keyframes sg-phase-pulse {
  0% { transform: scale(0.92); opacity: 0.75; }
  100% { transform: scale(1.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sg-phase.is-revealed .sg-phase__marker-pulse { animation: none; }
}
.sg-phase__card {
  background:
    linear-gradient(160deg, rgba(91, 108, 255, 0.05), transparent 50%),
    rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  padding: 30px 32px 28px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 20px 50px -30px rgba(0, 0, 0, 0.5);
  transition: background 320ms var(--ease-out), border-color 320ms var(--ease-out), transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
}
.sg-phase__card:hover {
  background:
    linear-gradient(160deg, rgba(91, 108, 255, 0.1), transparent 55%),
    rgba(255, 255, 255, 0.06);
  border-color: rgba(140, 152, 255, 0.28);
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 30px 70px -30px rgba(91, 108, 255, 0.32);
}
.sg-phase__card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.sg-phase__meta { display: flex; flex-direction: column; gap: 4px; }
.sg-phase__icon {
  flex: 0 0 auto;
  width: 84px;
  height: 84px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(91, 108, 255, 0.16), rgba(91, 108, 255, 0.04));
  border: 1px solid rgba(140, 152, 255, 0.25);
  color: var(--accent-soft);
  overflow: hidden;
}
.sg-phase__icon > svg { width: 28px; height: 28px; flex: 0 0 28px; }
.sg-phase__when {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-soft);
}
.sg-phase__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  letter-spacing: -0.01em;
  color: var(--fg);
}
.sg-phase__lede {
  margin: 0 0 14px;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--fg-soft);
}
.sg-phase__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--fg-soft);
}
.sg-phase__list li {
  position: relative;
  padding-left: 18px;
}
.sg-phase__list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent-soft);
}

.sg-timeline__handoff {
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px clamp(28px, 4vw, 48px);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(91, 108, 255, 0.08), rgba(91, 108, 255, 0.02));
  border: 1px solid rgba(140, 152, 255, 0.22);
}
.sg-timeline__handoff-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.sg-timeline__handoff-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-soft);
}
.sg-timeline__handoff-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  margin: 0;
  color: var(--fg);
  letter-spacing: -0.01em;
}
.sg-timeline__handoff-list {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sg-timeline__handoff-list li {
  display: flex;
  gap: 14px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--fg-soft);
}
.sg-timeline__handoff-num {
  color: var(--accent-soft);
  font-weight: 500;
  flex: 0 0 14px;
}
.sg-timeline__handoff-diff {
  margin: 0;
  padding: 18px 20px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--fg-soft);
}
.sg-timeline__handoff-diff strong { color: var(--fg); font-weight: 500; }

/* ============================================================
   BLOCK 7 · Metrics KPI
   ============================================================ */
.sg-metrics {
  padding: clamp(96px, 12vw, 160px) 6vw;
}
/* Editorial split header — H2 + lede side-by-side */
.sg-metrics__head {
  max-width: var(--content-max);
  margin: 0 auto 56px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: end;
}
.sg-metrics__head-left { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.sg-metrics__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--h2-size);
  letter-spacing: var(--h2-tracking);
  line-height: var(--h2-line);
  margin: 0;
  color: var(--fg);
}
.sg-metrics__lede {
  margin: 0 0 6px;
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.65;
  color: var(--fg-soft);
}
.sg-metrics__subtitle {
  max-width: var(--content-max);
  margin: 0 auto 28px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
  color: var(--fg-mute);
}
/* Vertical 3-act stack: KING / TRIO / BOTTOM */
.sg-metrics__grid {
  max-width: var(--content-max);
  margin: 0 auto 96px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Shared KPI base */
.sg-kpi {
  position: relative;
  background:
    linear-gradient(160deg, rgba(91, 108, 255, 0.04), transparent 45%),
    rgba(255, 255, 255, 0.035);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  padding: 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition:
    background 320ms var(--ease-out),
    border-color 320ms var(--ease-out),
    box-shadow 320ms var(--ease-out),
    transform 320ms var(--ease-out);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.sg-kpi:hover {
  background:
    linear-gradient(160deg, rgba(91, 108, 255, 0.1), transparent 50%),
    rgba(255, 255, 255, 0.06);
  border-color: rgba(140, 152, 255, 0.28);
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 24px 60px -28px rgba(91, 108, 255, 0.32);
}
.sg-kpi__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
/* Watermark gradient nums — visual unity with Tools / Handoff / Deliverables */
.sg-kpi__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.875rem, 2.4vw, 2.5rem);
  letter-spacing: -0.04em;
  line-height: 0.78;
  background: linear-gradient(180deg, rgba(140, 152, 255, 0.95) 0%, rgba(91, 108, 255, 1) 55%, rgba(42, 58, 255, 0.85) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 18px rgba(91, 108, 255, 0.22));
}
.sg-kpi__tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-soft);
  align-self: center;
  padding: 4px 9px;
  border: 1px solid rgba(140, 152, 255, 0.32);
  border-radius: 999px;
  background: rgba(91, 108, 255, 0.08);
}
.sg-kpi__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--fg);
  letter-spacing: -0.01em;
}
.sg-kpi__body {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--fg-soft);
}
.sg-kpi__body a { color: var(--accent-soft); border-bottom: 1px dashed rgba(140, 152, 255, 0.4); }

/* === ACT 1 · KING (full-width 2-col internal) === */
.sg-kpi--king {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
  padding: clamp(36px, 4vw, 56px) clamp(36px, 4vw, 56px);
  border-radius: 24px;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(91, 108, 255, 0.18), transparent 55%),
    linear-gradient(160deg, #16182c 0%, #0a0c1a 100%);
  border-color: rgba(91, 108, 255, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 0 0 1px rgba(140, 152, 255, 0.05),
    0 40px 100px -36px rgba(91, 108, 255, 0.34),
    0 24px 60px -28px rgba(0, 0, 0, 0.55);
}
.sg-kpi--king .sg-kpi__copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.sg-kpi--king .sg-kpi__name {
  font-size: clamp(1.625rem, 2.4vw, 2rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.sg-kpi--king .sg-kpi__body {
  font-size: clamp(0.95rem, 1.05vw, 1rem);
  line-height: 1.65;
  color: rgba(244, 245, 248, 0.78);
  max-width: 52ch;
}
.sg-kpi__bullets {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sg-kpi__bullets li {
  position: relative;
  padding-left: 18px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(244, 245, 248, 0.72);
}
.sg-kpi__bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 10px;
  height: 1px;
  background: var(--accent-soft);
  opacity: 0.7;
}

/* Donut viz */
.sg-kpi__viz--donut {
  position: relative;
  width: min(100%, 360px);
  margin-left: auto;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
}
.kpi-donut {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.kpi-donut__track {
  fill: none;
  stroke: rgba(140, 152, 255, 0.14);
  stroke-width: 14;
}
.kpi-donut__fill {
  fill: none;
  stroke-width: 14;
  stroke-linecap: round;
  /* circle r=86, circumference ≈ 540.35; show ~42% */
  stroke-dasharray: 227 540;
  filter: drop-shadow(0 0 20px rgba(91, 108, 255, 0.45));
  transition: stroke-dasharray 1200ms var(--ease-out);
}
.kpi-donut__ticks line {
  stroke: rgba(140, 152, 255, 0.35);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.kpi-donut__caption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  pointer-events: none;
}
.kpi-donut__caption-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-soft);
  padding: 4px 10px;
  border: 1px solid rgba(140, 152, 255, 0.32);
  border-radius: 999px;
  background: rgba(91, 108, 255, 0.1);
}
.kpi-donut__caption-label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(0.85rem, 1vw, 0.95rem);
  line-height: 1.3;
  color: rgba(244, 245, 248, 0.86);
  text-align: center;
}
.kpi-donut__caption-pct {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.5rem, 4.2vw, 3.5rem);
  letter-spacing: -0.04em;
  line-height: 0.95;
  background: linear-gradient(180deg, rgba(170, 182, 255, 1) 0%, rgba(91, 108, 255, 1) 60%, rgba(42, 58, 255, 0.9) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 8px 22px rgba(91, 108, 255, 0.42));
}
.kpi-donut__platforms {
  position: absolute;
  bottom: -8px;
  right: -12px;
  margin: 0;
  padding: 12px 14px;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  background: linear-gradient(180deg, rgba(20, 23, 43, 0.85), rgba(20, 23, 43, 0.65));
  border: 1px solid rgba(140, 152, 255, 0.28);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.kpi-donut__platforms li {
  display: contents;
}
.kpi-donut__platforms span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--fg-mute);
}
.kpi-donut__platforms b {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--accent-soft);
  font-feature-settings: "tnum";
  text-align: right;
}
.kpi-donut__caption-sign {
  font-size: 0.7em;
  margin-right: 0.05em;
  -webkit-text-fill-color: inherit;
}

/* --- Web-dev-2 device-bars (matches the 5 device tiers) --- */
.sg-kpi__viz--devices .kpi-devices {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  align-items: end;
  height: 100px;
}
.sg-kpi__viz--devices .kpi-devices li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  justify-content: end;
  height: 100%;
}
.sg-kpi__viz--devices .kpi-devices b {
  display: block;
  width: 100%;
  max-width: 26px;
  height: var(--h, 50%);
  background: linear-gradient(180deg, rgba(140, 152, 255, 1) 0%, rgba(91, 108, 255, 0.85) 60%, rgba(91, 108, 255, 0.3) 100%);
  border-radius: 4px 4px 2px 2px;
  box-shadow: 0 0 12px rgba(91, 108, 255, 0.35);
  transform-origin: bottom;
  transform: scaleY(0);
  transition: transform 800ms cubic-bezier(0.23, 1, 0.32, 1);
}
.sg-kpi--support.is-revealed .kpi-devices b { transform: scaleY(1); }
.sg-kpi--support.is-revealed .kpi-devices li:nth-child(1) b { transition-delay: 80ms; }
.sg-kpi--support.is-revealed .kpi-devices li:nth-child(2) b { transition-delay: 160ms; }
.sg-kpi--support.is-revealed .kpi-devices li:nth-child(3) b { transition-delay: 240ms; }
.sg-kpi--support.is-revealed .kpi-devices li:nth-child(4) b { transition-delay: 320ms; }
.sg-kpi--support.is-revealed .kpi-devices li:nth-child(5) b { transition-delay: 400ms; }
.sg-kpi__viz--devices .kpi-devices span {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-mute);
  text-align: center;
  line-height: 1.2;
}

/* --- Web-dev-2 Card 04: SSR comparison sub-bars --- */
.kpi-bar-compare {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}
.kpi-bar-compare__row {
  display: grid;
  grid-template-columns: minmax(0, 100px) 1fr 36px;
  align-items: center;
  gap: 10px;
}
.kpi-bar-compare__name {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-soft);
}
.kpi-bar-compare__track {
  height: 8px;
  border-radius: 999px;
  background: rgba(140, 152, 255, 0.1);
  border: 1px solid rgba(140, 152, 255, 0.16);
  overflow: hidden;
}
.kpi-bar-compare__fill {
  display: block;
  width: 0;
  height: 100%;
  background: rgba(140, 152, 255, 0.45);
  border-radius: 999px;
  transition: width 1200ms cubic-bezier(0.23, 1, 0.32, 1) 300ms;
}
.kpi-bar-compare__fill--hot {
  background: linear-gradient(90deg, rgba(140, 152, 255, 0.65), var(--accent) 60%, rgba(42, 58, 255, 0.95));
  box-shadow: 0 0 12px rgba(91, 108, 255, 0.4);
}
.sg-kpi--support.is-revealed .kpi-bar-compare__fill { width: var(--w, 0); }
.kpi-bar-compare__val {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--accent-soft);
  text-align: right;
  font-feature-settings: "tnum";
}

/* --- Web-dev-2 Card 05: AI bots chip grid --- */
.kpi-bots-grid {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 12px;
}
.kpi-bots-grid li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(91, 108, 255, 0.08);
  border: 1px solid rgba(140, 152, 255, 0.28);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--fg-soft);
}
.kpi-bots-grid__check {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(91, 108, 255, 0.18), 0 0 10px rgba(91, 108, 255, 0.5);
}
.kpi-bots-grid__check svg {
  width: 8px;
  height: 8px;
  display: block;
}
@media (max-width: 720px) {
  .kpi-bots-grid { grid-template-columns: repeat(2, 1fr); }
}

/* === ACT 2 · TRIO (3-col supporting) === */
.sg-kpi-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
/* Web-dev-2 has only 2 support cards (we dropped the perf-budgets card) —
   give them more room and split 50/50 so each card breathes wider. */
.page-web-development .sg-kpi-trio {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2vw, 28px);
}
.page-web-development .sg-kpi--support {
  padding: clamp(28px, 2.5vw, 36px);
}
.page-web-development .sg-kpi--support .sg-kpi__name {
  font-size: clamp(1.2rem, 1.5vw, 1.4rem);
}
@media (max-width: 720px) {
  .page-web-development .sg-kpi-trio {
    grid-template-columns: 1fr;
  }
}
.sg-kpi--support {
  gap: 16px;
}
.sg-kpi--support .sg-kpi__head { margin-bottom: 0; }
.sg-kpi--support .sg-kpi__name {
  font-size: 1.125rem;
  margin-top: -2px;
}

/* Bar chart (Citation Frequency) */
.sg-kpi__viz--bars { margin-top: 6px; }
.kpi-bars {
  width: 100%;
  height: 80px;
  display: block;
}
.kpi-bars__group rect {
  fill: url(#bar-grad);
}
.kpi-bars__stat {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}
.kpi-bars__delta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.4rem, 2vw, 1.7rem);
  letter-spacing: -0.02em;
}
.kpi-bars__delta span {
  background: linear-gradient(180deg, rgba(170, 182, 255, 1) 0%, rgba(91, 108, 255, 1) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 14px rgba(91, 108, 255, 0.4));
  font-feature-settings: "tnum";
}
.kpi-bars__delta svg {
  color: var(--accent-soft);
  filter: drop-shadow(0 0 6px rgba(91, 108, 255, 0.5));
}
.kpi-bars__delta-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.kpi-bars__trend {
  opacity: 0;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  filter: drop-shadow(0 0 4px rgba(140, 152, 255, 0.5));
  transition: opacity 400ms ease-out 600ms, stroke-dashoffset 1400ms cubic-bezier(0.23, 1, 0.32, 1) 700ms;
}
.sg-kpi--support.is-revealed .kpi-bars__trend {
  opacity: 1;
  stroke-dashoffset: 0;
}
.sg-kpi__viz-axis {
  display: block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

/* Traffic-light dots (Context Accuracy) */
.kpi-dots {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
}
.kpi-dots__row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.kpi-dots__mark {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  flex: 0 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.kpi-dots__mark svg {
  width: 10px;
  height: 10px;
  display: block;
}
.kpi-dots__row--ok .kpi-dots__mark {
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(91, 108, 255, 0.18), 0 0 12px rgba(91, 108, 255, 0.55);
}
.kpi-dots__row--warn .kpi-dots__mark {
  background: rgba(140, 152, 255, 0.18);
  border: 1px solid var(--accent-soft);
}
.kpi-dots__row--miss .kpi-dots__mark {
  background: transparent;
  border: 1px dashed rgba(140, 152, 255, 0.45);
}
.kpi-dots__score {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}
.kpi-dots__score-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.1vw, 1.85rem);
  letter-spacing: -0.025em;
  font-feature-settings: "tnum";
}
.kpi-dots__score-num b {
  font-weight: inherit;
  background: linear-gradient(180deg, rgba(170, 182, 255, 1) 0%, rgba(91, 108, 255, 1) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 14px rgba(91, 108, 255, 0.4));
}
.kpi-dots__score-total {
  font-size: 0.6em;
  color: rgba(140, 152, 255, 0.55);
}
.kpi-dots__score-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.kpi-dots__name {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--fg-soft);
}
.kpi-dots__row--miss .kpi-dots__name { color: var(--fg-mute); }

/* Progress bar (Prompt Coverage) */
.sg-kpi__viz--bar { margin-top: 6px; }
.kpi-bar__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.kpi-bar__pct {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.1vw, 1.85rem);
  letter-spacing: -0.025em;
  background: linear-gradient(180deg, rgba(170, 182, 255, 1) 0%, rgba(91, 108, 255, 1) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 14px rgba(91, 108, 255, 0.4));
  font-feature-settings: "tnum";
}
.kpi-bar__frac {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.kpi-bar__frac b {
  font-weight: 600;
  color: var(--accent-soft);
  font-feature-settings: "tnum";
}
.kpi-bar {
  height: 12px;
  border-radius: 999px;
  background: rgba(140, 152, 255, 0.1);
  border: 1px solid rgba(140, 152, 255, 0.18);
  overflow: visible;
  position: relative;
}
.kpi-bar__fill {
  width: var(--fill, 50%);
  height: 100%;
  background: linear-gradient(90deg, rgba(140, 152, 255, 0.6), var(--accent) 60%, rgba(42, 58, 255, 0.95));
  border-radius: 999px;
  box-shadow: 0 0 18px rgba(91, 108, 255, 0.4);
  transition: width 1200ms var(--ease-out);
}
.kpi-bar__tick {
  position: absolute;
  top: -6px;
  bottom: -6px;
  width: 2px;
  background: rgba(140, 152, 255, 0.55);
  border-radius: 1px;
  pointer-events: none;
}
.kpi-bar__tick::after {
  content: "";
  position: absolute;
  top: -3px;
  left: -2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-soft);
  box-shadow: 0 0 8px rgba(91, 108, 255, 0.6);
}
.kpi-bar__axis {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--fg-mute);
}
.kpi-bar__target {
  padding: 2px 8px;
  border: 1px solid rgba(140, 152, 255, 0.32);
  border-radius: 999px;
  color: var(--accent-soft);
  background: rgba(91, 108, 255, 0.08);
}

/* === ACT 3 · BOTTOM LINE === */
.sg-kpi--bottom {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding: clamp(32px, 3.5vw, 44px) clamp(36px, 4vw, 52px);
  border-radius: 24px;
  background:
    radial-gradient(120% 80% at 0% 50%, rgba(91, 108, 255, 0.18), transparent 55%),
    linear-gradient(120deg, rgba(91, 108, 255, 0.1), rgba(91, 108, 255, 0.02));
  border-color: rgba(140, 152, 255, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 24px 60px -30px rgba(91, 108, 255, 0.3);
}
.sg-kpi__bignum {
  display: grid;
  grid-template-areas:
    "num   tag"
    "hero  hero"
    "label label";
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px 14px;
  padding-right: clamp(16px, 2vw, 28px);
  border-right: 1px solid rgba(140, 152, 255, 0.18);
}
.sg-kpi__bignum .sg-kpi__num { grid-area: num; }
.sg-kpi__bignum .sg-kpi__tag { grid-area: tag; justify-self: start; }
.sg-kpi__hero-num {
  grid-area: hero;
  margin-top: 6px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(3.5rem, 7vw, 5.5rem);
  letter-spacing: -0.035em;
  line-height: 0.9;
  background: linear-gradient(180deg, rgba(170, 182, 255, 1) 0%, rgba(91, 108, 255, 1) 60%, rgba(42, 58, 255, 0.9) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 12px 32px rgba(91, 108, 255, 0.4));
}
.sg-kpi__hero-label {
  grid-area: label;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--fg-mute);
  text-transform: uppercase;
}
.sg-kpi--bottom .sg-kpi__copy {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sg-kpi--bottom .sg-kpi__name {
  font-size: clamp(1.375rem, 1.8vw, 1.625rem);
}

/* Comparison bars (AI vs Organic) inside Card 05 */
.sg-kpi__compare {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(91, 108, 255, 0.06);
  border: 1px solid rgba(140, 152, 255, 0.22);
}
.sg-kpi__compare-row {
  display: grid;
  grid-template-columns: minmax(0, 110px) 1fr 48px;
  align-items: center;
  gap: 12px;
}
.sg-kpi__compare-name {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-soft);
}
.sg-kpi__compare-track {
  height: 10px;
  border-radius: 999px;
  background: rgba(140, 152, 255, 0.1);
  border: 1px solid rgba(140, 152, 255, 0.16);
  overflow: hidden;
  position: relative;
}
.sg-kpi__compare-fill {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, rgba(140, 152, 255, 0.55), rgba(140, 152, 255, 0.85));
  border-radius: 999px;
  transition: width 1400ms cubic-bezier(0.23, 1, 0.32, 1) 300ms;
}
.sg-kpi__compare-fill--hot {
  background: linear-gradient(90deg, rgba(140, 152, 255, 0.7), var(--accent) 60%, rgba(42, 58, 255, 0.95));
  box-shadow: 0 0 16px rgba(91, 108, 255, 0.4);
}
.sg-kpi--bottom.is-revealed .sg-kpi__compare-fill {
  width: var(--w, 0);
}
.sg-kpi__compare-val {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  color: var(--accent-soft);
  text-align: right;
  font-feature-settings: "tnum";
}

/* === Legacy spec strip — 5-col stripped editorial cells === */
/* Classical "legacy / what stays" spec strip — DEFAULT 5-col grid layout.
   Used as-is on web-dev + seo-geo across es/uk/en (old markup .legacy-cell).
   The editorial redesign lives under the --split modifier below. */
.sg-metrics__legacy {
  max-width: var(--content-max);
  margin: 0 auto;
  padding-top: clamp(56px, 6vw, 80px);
  border-top: 1px solid var(--hairline);
}
.sg-metrics__legacy-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: clamp(28px, 3vw, 40px);
  max-width: 720px;
}
.sg-metrics__legacy-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.625rem, 2.4vw, 2.25rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--fg);
}
.sg-metrics__legacy-lede {
  margin: 0;
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.6;
  color: var(--fg-soft);
  max-width: 56ch;
}
.sg-metrics__legacy-list {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.legacy-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px clamp(16px, 1.6vw, 24px);
  border-right: 1px solid var(--hairline);
  transition: background 320ms var(--ease-out);
}
.legacy-cell:last-child { border-right: none; }
.legacy-cell::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 24px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), rgba(91, 108, 255, 0));
}
.legacy-cell:hover {
  background: rgba(91, 108, 255, 0.04);
}
.legacy-cell__index {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.625rem;
  letter-spacing: -0.04em;
  line-height: 0.85;
  background: linear-gradient(180deg, rgba(140, 152, 255, 0.95) 0%, rgba(91, 108, 255, 1) 55%, rgba(42, 58, 255, 0.85) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 12px rgba(91, 108, 255, 0.22));
}
.legacy-cell__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.3;
  color: var(--fg);
  letter-spacing: -0.005em;
}
.legacy-cell__tool {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-mute);
  line-height: 1.45;
}

/* ---- --split: editorial asymmetric redesign (RU seo-geo + RU web-dev) ----
   Aside (title + lede + strata diagram) | divide-y row list. New markup uses
   .sg-metrics__legacy-aside / .legacy-row / .strata-layer (no .legacy-cell). */
.sg-metrics__legacy--split {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(36px, 5vw, 80px);
  align-items: start;
}
.sg-metrics__legacy--split .sg-metrics__legacy-title {
  font-size: var(--h2-size);
  letter-spacing: var(--h2-tracking);
  line-height: var(--h2-line);
}
.sg-metrics__legacy--split .sg-metrics__legacy-lede { max-width: 40ch; }
.sg-metrics__legacy--split .sg-metrics__legacy-list {
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  border-top: 1px solid var(--hairline);
  border-bottom: none;
}
.sg-metrics__legacy-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
/* "Foundation" strata: solid layers + a dashed layer being added on top. */
.sg-metrics__legacy-strata {
  width: min(100%, 260px);
  height: auto;
  margin-top: clamp(8px, 1.4vw, 18px);
}
.sg-metrics__legacy-strata .strata-layer {
  fill: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transform-box: fill-box;
  transition: transform 720ms var(--ease-out);
}
.sg-metrics__legacy-strata rect:nth-child(2) { fill-opacity: 0.3; }
.sg-metrics__legacy-strata rect:nth-child(3) { fill-opacity: 0.55; }
.sg-metrics__legacy-strata rect:nth-child(4) { fill-opacity: 0.85; }
.sg-metrics__legacy-strata .strata-layer--ghost {
  fill: none;
  stroke: var(--accent-soft);
  stroke-width: 1.5;
  stroke-dasharray: 5 6;
  opacity: 0.65;
}
/* Metric list — divide-y editorial rows, no boxes (taste anti-card rule). */
.legacy-row {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(18px, 2.4vw, 34px);
  padding: clamp(18px, 2vw, 26px) 6px clamp(18px, 2vw, 26px) 20px;
  border-bottom: 1px solid var(--hairline);
  transition: background 300ms var(--ease-out);
}
.legacy-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: 0;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent-soft), var(--accent));
  transform: translateY(-50%);
  transition: height 340ms var(--ease-out);
}
.legacy-row__index {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--fg-mute);
  transition: color 300ms var(--ease-out);
}
.legacy-row__main {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.legacy-row__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.legacy-row__tool {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-mute);
  line-height: 1.45;
}
@media (hover: hover) and (pointer: fine) {
  .legacy-row:hover { background: rgba(91, 108, 255, 0.05); }
  .legacy-row:hover::before { height: calc(100% - 16px); }
  .legacy-row:hover .legacy-row__index { color: var(--accent-soft); }
}

/* ============================================================
   Reveal animations — fires when [data-reveal-card] gets .is-revealed
   ============================================================ */

/* --- DONUT: stroke fills from 0 to 42% --- */
.sg-kpi--king .kpi-donut__fill {
  stroke-dasharray: 0 540;
  transition: stroke-dasharray 1400ms cubic-bezier(0.23, 1, 0.32, 1) 200ms;
}
.sg-kpi--king.is-revealed .kpi-donut__fill {
  stroke-dasharray: 227 540;
}
.sg-kpi--king .kpi-donut__ticks line {
  opacity: 0;
  transition: opacity 600ms ease-out 1200ms;
}
.sg-kpi--king.is-revealed .kpi-donut__ticks line { opacity: 1; }
.sg-kpi--king .kpi-donut__caption {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 500ms ease-out 900ms, transform 500ms cubic-bezier(0.23, 1, 0.32, 1) 900ms;
}
.sg-kpi--king.is-revealed .kpi-donut__caption {
  opacity: 1;
  transform: scale(1);
}

/* --- BARS: each rect scales up from bottom, staggered --- */
.kpi-bars__group rect {
  transform: scaleY(0);
  transform-origin: center bottom;
  transform-box: fill-box;
  transition: transform 700ms cubic-bezier(0.23, 1, 0.32, 1);
}
.sg-kpi--support.is-revealed .kpi-bars__group rect { transform: scaleY(1); }
.sg-kpi--support.is-revealed .kpi-bars__group rect:nth-child(1)  { transition-delay: 80ms; }
.sg-kpi--support.is-revealed .kpi-bars__group rect:nth-child(2)  { transition-delay: 120ms; }
.sg-kpi--support.is-revealed .kpi-bars__group rect:nth-child(3)  { transition-delay: 160ms; }
.sg-kpi--support.is-revealed .kpi-bars__group rect:nth-child(4)  { transition-delay: 200ms; }
.sg-kpi--support.is-revealed .kpi-bars__group rect:nth-child(5)  { transition-delay: 240ms; }
.sg-kpi--support.is-revealed .kpi-bars__group rect:nth-child(6)  { transition-delay: 280ms; }
.sg-kpi--support.is-revealed .kpi-bars__group rect:nth-child(7)  { transition-delay: 320ms; }
.sg-kpi--support.is-revealed .kpi-bars__group rect:nth-child(8)  { transition-delay: 360ms; }
.sg-kpi--support.is-revealed .kpi-bars__group rect:nth-child(9)  { transition-delay: 400ms; }
.sg-kpi--support.is-revealed .kpi-bars__group rect:nth-child(10) { transition-delay: 440ms; }
.sg-kpi--support.is-revealed .kpi-bars__group rect:nth-child(11) { transition-delay: 480ms; }
.sg-kpi--support.is-revealed .kpi-bars__group rect:nth-child(12) { transition-delay: 520ms; }

/* --- DOTS: fade + slide-in, staggered --- */
.kpi-dots__row {
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 500ms ease-out, transform 500ms cubic-bezier(0.23, 1, 0.32, 1);
}
.sg-kpi--support.is-revealed .kpi-dots__row {
  opacity: 1;
  transform: translateX(0);
}
.sg-kpi--support.is-revealed .kpi-dots__row:nth-child(1) { transition-delay: 100ms; }
.sg-kpi--support.is-revealed .kpi-dots__row:nth-child(2) { transition-delay: 180ms; }
.sg-kpi--support.is-revealed .kpi-dots__row:nth-child(3) { transition-delay: 260ms; }
.sg-kpi--support.is-revealed .kpi-dots__row:nth-child(4) { transition-delay: 340ms; }

/* --- PROGRESS BAR: width fills from 0 to --fill --- */
.kpi-bar__fill {
  width: 0;
  transition: width 1400ms cubic-bezier(0.23, 1, 0.32, 1) 200ms;
}
.sg-kpi--support.is-revealed .kpi-bar__fill { width: var(--fill, 50%); }

/* --- BIG NUM card: subtle scale-in glow --- */
.sg-kpi--bottom .sg-kpi__hero-num {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 700ms ease-out 200ms, transform 700ms cubic-bezier(0.23, 1, 0.32, 1) 200ms;
}
.sg-kpi--bottom.is-revealed .sg-kpi__hero-num {
  opacity: 1;
  transform: translateY(0);
}

/* --- LEGACY default cells: cascading slide-up (old 5-col markup) --- */
.legacy-cell {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms ease-out, transform 600ms cubic-bezier(0.23, 1, 0.32, 1), background 320ms var(--ease-out);
}
.sg-metrics__legacy.is-revealed .legacy-cell { opacity: 1; transform: translateY(0); }
.sg-metrics__legacy.is-revealed .legacy-cell:nth-child(1) { transition-delay: 100ms, 100ms, 0ms; }
.sg-metrics__legacy.is-revealed .legacy-cell:nth-child(2) { transition-delay: 180ms, 180ms, 0ms; }
.sg-metrics__legacy.is-revealed .legacy-cell:nth-child(3) { transition-delay: 260ms, 260ms, 0ms; }
.sg-metrics__legacy.is-revealed .legacy-cell:nth-child(4) { transition-delay: 340ms, 340ms, 0ms; }
.sg-metrics__legacy.is-revealed .legacy-cell:nth-child(5) { transition-delay: 420ms, 420ms, 0ms; }

/* --- LEGACY --split foundation: rows cascade up + strata layers grow --- */
.legacy-row {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms ease-out, transform 600ms cubic-bezier(0.23, 1, 0.32, 1), background 300ms var(--ease-out);
}
.sg-metrics__legacy.is-revealed .legacy-row { opacity: 1; transform: translateY(0); }
.sg-metrics__legacy.is-revealed .legacy-row:nth-child(1) { transition-delay: 120ms, 120ms, 0ms; }
.sg-metrics__legacy.is-revealed .legacy-row:nth-child(2) { transition-delay: 190ms, 190ms, 0ms; }
.sg-metrics__legacy.is-revealed .legacy-row:nth-child(3) { transition-delay: 260ms, 260ms, 0ms; }
.sg-metrics__legacy.is-revealed .legacy-row:nth-child(4) { transition-delay: 330ms, 330ms, 0ms; }
.sg-metrics__legacy.is-revealed .legacy-row:nth-child(5) { transition-delay: 400ms, 400ms, 0ms; }
/* foundation grows bottom-up first, the dashed AI layer settles in last */
.sg-metrics__legacy.is-revealed .strata-layer { transform: scaleX(1); }
.sg-metrics__legacy.is-revealed .sg-metrics__legacy-strata rect:nth-child(4) { transition-delay: 200ms; }
.sg-metrics__legacy.is-revealed .sg-metrics__legacy-strata rect:nth-child(3) { transition-delay: 320ms; }
.sg-metrics__legacy.is-revealed .sg-metrics__legacy-strata rect:nth-child(2) { transition-delay: 440ms; }
.sg-metrics__legacy.is-revealed .sg-metrics__legacy-strata rect:nth-child(1) { transition-delay: 560ms; }

/* --- Reduced motion: kill stagger transforms, keep opacity only --- */
@media (prefers-reduced-motion: reduce) {
  .sg-kpi--king .kpi-donut__fill { stroke-dasharray: 227 540; transition: none; }
  .kpi-bars__group rect,
  .kpi-dots__row,
  .kpi-bar__fill,
  .sg-kpi--bottom .sg-kpi__hero-num,
  .legacy-cell,
  .legacy-row { transform: none; transition-duration: 200ms; }
  .strata-layer { transform: scaleX(1); transition: none; }
}

/* ============================================================
   BLOCK 8 · Pricing — extras (ROI banner, support cards)
   ============================================================ */
/* Featured tier physically lifted by default — Emil rule: featured should
   read as featured at rest, not only on hover. */
.pricing--sg .tier--featured {
  transform: translateY(-14px);
  transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
}
.pricing--sg .tier--featured:hover { transform: translateY(-20px); }
@media (max-width: 1100px) {
  .pricing--sg .tier--featured { transform: none; }
  .pricing--sg .tier--featured:hover { transform: translateY(-6px); }
}
.pricing__roi {
  max-width: var(--content-max);
  margin: 56px auto 0;
  padding: 36px clamp(28px, 4vw, 48px);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(91, 108, 255, 0.12), rgba(91, 108, 255, 0.02));
  border: 1px solid rgba(140, 152, 255, 0.28);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
}
.pricing__roi-text { max-width: 540px; }
.pricing__roi-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  color: var(--fg);
}
.pricing__roi-text p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--fg-soft);
}
/* ============================================================
   BLOCK 9 · Typical mistakes — 3x2 spotlight cards
   ============================================================ */
.sg-mistakes {
  padding: clamp(96px, 12vw, 160px) 6vw;
}
.sg-mistakes__head { max-width: 820px; margin: 0 auto 56px; }
.sg-mistakes__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--h2-size);
  letter-spacing: var(--h2-tracking);
  line-height: var(--h2-line);
  margin: 18px 0 20px;
  color: var(--fg);
}
.sg-mistakes__lede {
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.65;
  color: var(--fg-soft);
}
.sg-mistakes__grid {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
/* Web-dev-2 has 5 cards (we dropped card 01) — switch to flex so the
   incomplete last row centers instead of leaving a gap on the right. */
.page-web-development .sg-mistakes__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.page-web-development .sg-mistakes__grid > .sg-mistake {
  flex: 0 1 calc((100% - 36px) / 3);
  min-width: 0;
}
@media (max-width: 880px) {
  .page-web-development .sg-mistakes__grid > .sg-mistake {
    flex: 0 1 calc((100% - 18px) / 2);
  }
}
@media (max-width: 600px) {
  .page-web-development .sg-mistakes__grid > .sg-mistake {
    flex: 0 1 100%;
  }
}
.sg-mistake {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(160deg, rgba(91, 108, 255, 0.04), transparent 50%),
    rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  padding: 30px 28px;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition:
    background 320ms var(--ease-out),
    border-color 320ms var(--ease-out),
    box-shadow 320ms var(--ease-out),
    transform 320ms var(--ease-out);
  transform-style: preserve-3d;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  /* Watermark big number (uses data-mnum from HTML) */
}
.sg-mistake::before {
  content: attr(data-mnum);
  position: absolute;
  right: -18px;
  bottom: -42px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(8rem, 12vw, 12rem);
  line-height: 0.85;
  letter-spacing: -0.05em;
  background: linear-gradient(180deg, rgba(170, 182, 255, 0.32), rgba(60, 80, 200, 0.08));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 16px rgba(91, 108, 255, 0.18));
  z-index: 0;
  pointer-events: none;
  transition: opacity 400ms var(--ease-out), transform 600ms var(--ease-out),
              filter 400ms var(--ease-out);
  opacity: 0.85;
}
.sg-mistake > * { position: relative; z-index: 1; }
.sg-mistake:hover {
  background:
    linear-gradient(160deg, rgba(91, 108, 255, 0.12), transparent 55%),
    rgba(255, 255, 255, 0.06);
  border-color: rgba(140, 152, 255, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 30px 80px -30px rgba(91, 108, 255, 0.42),
    0 0 60px -10px rgba(91, 108, 255, 0.2);
}
/* Watermark number brightens on hover — gate to real pointers so a phone tap
   leaves the number untouched (no interaction on touch). */
@media (hover: hover) {
  .sg-mistake:hover::before {
    opacity: 1;
    transform: translateY(-4px) scale(1.04);
    background: linear-gradient(180deg, rgba(190, 200, 255, 0.55), rgba(80, 100, 220, 0.16));
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 0 22px rgba(91, 108, 255, 0.32));
  }
}
.sg-mistake__spotlight {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    400px circle at var(--mx, 50%) var(--my, 30%),
    rgba(91, 108, 255, 0.22) 0%,
    rgba(91, 108, 255, 0) 60%
  );
  opacity: 0;
  transition: opacity 320ms var(--ease-out);
  pointer-events: none;
  z-index: 0;
}
.sg-mistake:hover .sg-mistake__spotlight { opacity: 1; }
/* Touch/mobile devices have no hover — show spotlight at half intensity
   always so the visual signal isn't lost on half the audience. */
@media (hover: none), (max-width: 720px) {
  .sg-mistake__spotlight {
    opacity: 0.45;
    inset: -40% -20% auto auto;
    width: 220px;
    height: 220px;
  }
}
.sg-mistake__head { display: flex; align-items: baseline; gap: 14px; }
.sg-mistake__num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--accent-soft);
  letter-spacing: 0.02em;
  line-height: 1;
  flex: 0 0 auto;
}
.sg-mistake__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.075rem;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--fg);
}
.sg-mistake__body {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--fg-soft);
}
.sg-mistake__stat {
  margin: 8px 0 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(91, 108, 255, 0.1);
  border: 1px solid rgba(140, 152, 255, 0.18);
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--fg-soft);
}
.sg-mistake__stat strong { display: block; color: var(--fg); font-weight: 500; margin-bottom: 4px; }
.sg-mistake__stat span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.sg-mistake code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  padding: 1px 6px;
  background: rgba(91, 108, 255, 0.14);
  border-radius: 4px;
  color: var(--accent-soft);
}

/* "Чего избегаем" as a LIGHT island (only on /automation/ via the
   sg-mistakes--light modifier) — mirrors the sg-tools--light treatment so
   it breaks up the long dark run at the bottom of the page. */
.sg-mistakes--light {
  background:
    radial-gradient(80% 60% at 18% 8%, rgba(91, 108, 255, 0.06), transparent 60%),
    radial-gradient(70% 50% at 92% 85%, rgba(91, 108, 255, 0.05), transparent 60%),
    #f4f5f8;
  color: #14172b;
}
.sg-mistakes--light .sg-mistakes__title { color: #14172b; font-weight: 600; }
.sg-mistakes--light .sg-mistakes__lede { color: rgba(20, 23, 43, 0.62); }
.sg-mistakes--light .title-mark {
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 70%, #1d2580 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 18px rgba(91, 108, 255, 0.22));
}
.sg-mistakes--light .eyebrow {
  background: rgba(20, 23, 43, 0.06);
  color: rgba(20, 23, 43, 0.7);
  border-color: rgba(20, 23, 43, 0.08);
}
.sg-mistakes--light .eyebrow__dot { background: rgba(20, 23, 43, 0.5); }
.sg-mistakes--light .sg-mistake {
  background:
    linear-gradient(160deg, rgba(91, 108, 255, 0.05), transparent 50%),
    rgba(20, 23, 43, 0.04);
  border-color: rgba(20, 23, 43, 0.08);
  box-shadow: 0 1px 2px rgba(20, 30, 80, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.sg-mistakes--light .sg-mistake:hover {
  background:
    linear-gradient(160deg, rgba(91, 108, 255, 0.1), transparent 55%),
    #ffffff;
  border-color: rgba(91, 108, 255, 0.32);
  box-shadow:
    0 30px 70px -34px rgba(91, 108, 255, 0.4),
    0 0 0 1px rgba(91, 108, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.sg-mistakes--light .sg-mistake::before {
  background: linear-gradient(180deg, rgba(91, 108, 255, 0.16), rgba(91, 108, 255, 0.02));
  -webkit-background-clip: text; background-clip: text;
  filter: none; opacity: 0.9;
}
@media (hover: hover) {
  .sg-mistakes--light .sg-mistake:hover::before {
    background: linear-gradient(180deg, rgba(91, 108, 255, 0.28), rgba(91, 108, 255, 0.05));
    -webkit-background-clip: text; background-clip: text; filter: none;
  }
}
.sg-mistakes--light .sg-mistake__spotlight {
  background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 30%), rgba(91, 108, 255, 0.14) 0%, rgba(91, 108, 255, 0) 60%);
}
.sg-mistakes--light .sg-mistake__num { color: #5b6cff; }
.sg-mistakes--light .sg-mistake__title { color: #14172b; }
.sg-mistakes--light .sg-mistake__body { color: rgba(20, 23, 43, 0.62); }
/* /seo-geo/ mistakes block also has a stat plate + inline <code> (absent on
   /automation/). Re-tint them for the light island so they stay legible. */
.sg-mistakes--light .sg-mistake__stat {
  background: rgba(91, 108, 255, 0.08);
  border-color: rgba(91, 108, 255, 0.2);
  color: rgba(20, 23, 43, 0.62);
}
.sg-mistakes--light .sg-mistake__stat strong { color: #14172b; }
.sg-mistakes--light .sg-mistake__stat span { color: rgba(20, 23, 43, 0.5); }
.sg-mistakes--light .sg-mistake code {
  background: rgba(91, 108, 255, 0.12);
  color: var(--accent-deep);
}

/* ============================================================
   /seo-geo/ Responsive overrides
   ============================================================ */
@media (max-width: 1100px) {
  .sg-terms__grid { grid-template-columns: repeat(2, 1fr); }
  .sg-tools__grid { grid-template-columns: repeat(3, 1fr); }
  .sg-scenarios { grid-template-columns: 1fr; }
  .sg-metrics__head { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .sg-kpi--king { grid-template-columns: 1fr; }
  .sg-kpi__viz--donut { margin: 0 auto; max-width: 320px; }
  .sg-kpi-trio { grid-template-columns: 1fr; }
  .sg-kpi--bottom { grid-template-columns: 1fr; }
  .sg-kpi__bignum { border-right: none; border-bottom: 1px solid rgba(140, 152, 255, 0.18); padding-right: 0; padding-bottom: 20px; }
  .sg-metrics__legacy-list { grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: none; }
  .legacy-cell { border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
  .legacy-cell:nth-child(2n) { border-right: none; }
  .legacy-cell:nth-last-child(-n+2) { border-bottom: none; }
  .sg-metrics__legacy--split { grid-template-columns: 1fr; gap: clamp(28px, 4vw, 40px); }
  .sg-metrics__legacy--split .sg-metrics__legacy-strata { width: min(100%, 320px); }
  .sg-mistakes__grid { grid-template-columns: repeat(2, 1fr); }
  .sg-tools-custom { grid-template-columns: 1fr; gap: 28px; }
  .sg-terms__metaphor { grid-template-columns: 1fr; gap: 32px; }
  .pricing__roi { flex-direction: column; align-items: flex-start; gap: 20px; }
}
@media (max-width: 720px) {
  .sg-terms { padding: 80px 20px; }
  .sg-terms__grid { grid-template-columns: 1fr; }
  .sg-level-split { grid-template-columns: 1fr; }
  .sg-tools { padding: 80px 20px; }
  .sg-tools__grid { grid-template-columns: 1fr; }
  .sg-timeline { padding: 80px 20px; }
  .sg-phase { padding-left: 60px; }
  .sg-phase__marker { width: 40px; height: 40px; }
  .sg-phase__marker-num { font-size: 11px; }
  .sg-timeline__phases::before { left: 20px; }
  .sg-metrics { padding: 80px 20px; }
  .kpi-dots { grid-template-columns: 1fr; }
  .sg-metrics__legacy-list { grid-template-columns: 1fr; }
  .legacy-cell { border-right: none; border-bottom: 1px solid var(--hairline); }
  .legacy-cell:last-child { border-bottom: none; }
  .sg-mistakes { padding: 80px 20px; }
  .sg-mistakes__grid { grid-template-columns: 1fr; }
  .sg-channel { grid-template-columns: minmax(100px, 40%) 1fr 50px; gap: 12px; font-size: 0.84rem; }
}

/* ============================================================
   Desktop-only cascade pacing on /seo-geo/ Z-stacks (Block 4 + Block 6).
   320vh = 100vh pin + 220vh runway = ~110vh per transition (3 cards).
   ~20% shorter than previous 400vh setting — desktop scroll sensitivity
   feels normal instead of "too easy".
   Scoped to min-width:1281px so it doesn't conflict with the
   ≤1280px sticky-stack fallback (which uses height:auto). Otherwise
   the section keeps the desktop height on laptops and leaves a huge
   empty area below the cards.
   ============================================================ */
/* Cascade = wide window (>=1025) AND not a 16:9-laptop SCREEN. device-* features
   read the physical screen (in CSS px), so browser tabs / taskbar / Dock eating
   window height can't flip the mode. MacBooks are 16:10-ish (ratio ~1.54-1.6,
   screen height 900+) -> first clause; desktops have screen height 951+ -> second. */
@media (min-width: 1025px) and (max-device-aspect-ratio: 1699/1000) and (min-device-height: 821px), (min-width: 1025px) and (min-device-height: 951px) {
  .solutions--levels,
  .solutions--phases { height: 320vh; }
}

/* ============================================================
   BLOCK 6 · Process phases — reuses .solutions Z-axis stack
   pattern with phase-specific visual (PNG icon instead of orbits).
   ============================================================ */
.solutions--phases .sg-phase-card__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}
.solutions--phases .sg-phase-card__visual img {
  width: clamp(140px, 18vw, 240px);
  height: clamp(140px, 18vw, 240px);
  object-fit: contain;
  filter: drop-shadow(0 24px 60px rgba(91, 108, 255, 0.28));
}
.sg-timeline--handoff-only {
  padding: 0 clamp(20px, 5vw, 80px) clamp(60px, 8vw, 100px);
  max-width: 1100px;
  margin: 0 auto;
}
.sg-timeline__lede--centered {
  text-align: center;
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.6;
  color: var(--fg-soft);
  margin: 0 auto;
  max-width: 720px;
}
.sg-timeline__lede--centered strong { color: var(--accent-soft); font-weight: 500; }

/* ============================================================
   BLOCK 6.5 · Cycle hero + deliverables + pull-quote (editorial)
   Three visual moments separated by macro-whitespace. Distinct
   pattern from blocked layouts elsewhere on the page.
   ============================================================ */
.sg-cycle {
  padding: clamp(100px, 12vw, 160px) clamp(20px, 5vw, 80px) clamp(80px, 10vw, 140px);
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(80px, 10vw, 140px);
}
/* Generated flowing-lines backdrop (Nano Banana, shared with /automation/
   cases) — OPT-IN via the --bg modifier (RU seo-geo only). Full-bleed band
   that separates the section from the dark sections around it. Heavier overlay
   than au-cases since the list sits directly on the backdrop with no card. */
.sg-cycle--bg {
  position: relative;
  isolation: isolate;
}
.sg-cycle--bg::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw;
  transform: translateX(-50%); z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8, 8, 12, 0.72), rgba(8, 8, 12, 0.72)),
    url("seo-geo/assets/cases-bg.webp") center / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

/* ---- Hero: 3-6 месяцев with timeline track ---- */
.sg-cycle__head {
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 4vw, 56px);
  align-items: stretch;
}
.sg-cycle__head .eyebrow { align-self: flex-start; }
.sg-cycle__hero {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: end;
}
.sg-cycle__display {
  margin: 0;
  display: flex;
  align-items: flex-end;
  gap: clamp(16px, 1.6vw, 24px);
  line-height: 0.85;
  font-family: var(--font-display);
  letter-spacing: -0.05em;
}
.sg-cycle__num {
  font-weight: 600;
  font-size: clamp(6rem, 14vw, 13rem);
  background: linear-gradient(180deg,
    rgba(170, 182, 255, 1) 0%,
    rgba(130, 148, 255, 0.95) 40%,
    rgba(91, 108, 255, 0.85) 75%,
    rgba(60, 80, 200, 0.55) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 28px 64px rgba(91, 108, 255, 0.35));
  display: inline-flex;
  align-items: baseline;
}
.sg-cycle__unit {
  font-weight: 500;
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  color: var(--fg-soft);
  letter-spacing: -0.02em;
  padding-bottom: clamp(16px, 2.4vw, 32px);
}
.sg-cycle__lede {
  margin: 0;
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.65;
  color: var(--fg-soft);
  max-width: 38ch;
  padding-bottom: clamp(20px, 2.4vw, 36px);
}

/* Timeline track M1..M6 */
.sg-cycle__track {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 8px;
  margin-top: clamp(8px, 1.5vw, 20px);
}
.sg-cycle__track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, rgba(140, 152, 255, 0.5) 0%, rgba(140, 152, 255, 0.12) 100%);
}
.sg-cycle__track-fill {
  position: absolute;
  left: 0;
  width: 100%;
  top: 50%;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(170, 182, 255, 0.95) 0%,
    rgba(91, 108, 255, 0.75) 50%,
    rgba(60, 80, 200, 0.35) 100%);
  filter: blur(0.4px);
  transform-origin: left;
}
.sg-cycle__tick {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.sg-cycle__tick::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid rgba(140, 152, 255, 0.7);
  box-shadow: 0 0 12px rgba(91, 108, 255, 0.4);
}
.sg-cycle__tick:nth-child(1)::before,
.sg-cycle__tick:nth-child(2)::before,
.sg-cycle__tick:nth-child(3)::before {
  background: rgba(91, 108, 255, 1);
  border-color: rgba(170, 182, 255, 0.95);
  box-shadow: 0 0 18px rgba(91, 108, 255, 0.6);
}
.sg-cycle__tick b {
  position: absolute;
  top: 30px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--fg-mute);
  font-weight: 400;
}

/* ---- Deliverables: editorial list w/ hairlines ---- */
.sg-deliverables {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3vw, 40px);
}
.sg-deliverables__head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 720px;
  align-items: flex-start;
}
.sg-deliverables__head .eyebrow { align-self: flex-start; }
.sg-deliverables__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.875rem, 3.2vw, 2.875rem);
  letter-spacing: -0.035em;
  line-height: 1.08;
  color: var(--fg);
}
.sg-deliverables__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--hairline);
}
.sg-deliverable {
  display: grid;
  grid-template-columns: clamp(64px, 6vw, 84px) minmax(0, 1fr);
  gap: 6px;
  align-items: start;
  padding: clamp(28px, 3vw, 36px) 0;
  border-bottom: 1px solid var(--hairline);
}
.sg-deliverable--wide {
  /* Single-column layout — modifier is a no-op now */
}
.sg-deliverable__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.75rem, 4.2vw, 3.75rem);
  letter-spacing: -0.045em;
  line-height: 0.78;
  margin-top: 0.1em;
  background: linear-gradient(180deg, rgba(140, 152, 255, 0.95) 0%, rgba(91, 108, 255, 1) 55%, rgba(42, 58, 255, 0.85) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 18px rgba(91, 108, 255, 0.22));
}
.sg-deliverable__name {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  letter-spacing: -0.018em;
  line-height: 1.25;
  color: var(--fg);
}
.sg-deliverable__body {
  margin: 0;
  max-width: 75ch;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--fg-soft);
}

/* ---- Pull-quote ---- */
.sg-pullquote {
  position: relative;
  padding: clamp(48px, 6vw, 72px) clamp(40px, 5vw, 72px);
  border-radius: 24px;
  background:
    linear-gradient(160deg, rgba(91, 108, 255, 0.1) 0%, rgba(91, 108, 255, 0.02) 60%),
    rgba(20, 25, 58, 0.4);
  border: 1px solid rgba(140, 152, 255, 0.22);
  overflow: hidden;
  isolation: isolate;
}
.sg-pullquote::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto auto;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(91, 108, 255, 0.18) 0%, transparent 60%);
  z-index: -1;
  pointer-events: none;
}
.sg-pullquote__mark {
  position: absolute;
  top: clamp(-8px, 1vw, 8px);
  left: clamp(20px, 3vw, 48px);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(7rem, 12vw, 11rem);
  line-height: 0.8;
  background: linear-gradient(180deg,
    rgba(140, 152, 255, 0.6) 0%,
    rgba(91, 108, 255, 0.2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.sg-pullquote__text {
  position: relative;
  z-index: 1;
  margin: clamp(40px, 5vw, 60px) 0 clamp(28px, 3vw, 40px) clamp(56px, 6vw, 96px);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.375rem, 2.2vw, 1.875rem);
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--fg);
  max-width: 60ch;
}
.sg-pullquote__text em {
  font-style: normal;
  background: linear-gradient(180deg,
    rgba(170, 182, 255, 0.95) 0%,
    rgba(91, 108, 255, 0.85) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sg-pullquote__footer {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 0 clamp(56px, 6vw, 96px);
  padding-top: 20px;
  border-top: 1px solid rgba(140, 152, 255, 0.22);
  max-width: 60ch;
}
.sg-pullquote__footer-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-soft);
}
.sg-pullquote__footer p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--fg-soft);
}

@media (max-width: 900px) {
  .sg-cycle__hero {
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
  }
  .sg-cycle__display { line-height: 0.9; }
  .sg-cycle__lede { padding-bottom: 0; }
  .sg-deliverables__list { grid-template-columns: 1fr; }
  .sg-deliverable,
  .sg-deliverable--wide { grid-column: auto; }
  .sg-pullquote__text,
  .sg-pullquote__footer { margin-left: 0; }
}

/* ============================================================
   BLOCK 4 · Three levels of work — horizontal expanding accordion.
   Applies Ethereal Glass vibe + Double-Bezel architecture +
   custom cubic-bezier drawer motion (emil + soft-skill).
   ============================================================ */
:root { --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); }
.sg-levels {
  position: relative;
  padding: clamp(120px, 12vw, 200px) clamp(20px, 5vw, 80px);
  background:
    radial-gradient(ellipse 90% 55% at 50% 18%, rgba(91, 108, 255, 0.08), transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(60, 80, 200, 0.06), transparent 70%),
    #06060b;
  isolation: isolate;
  overflow: hidden;
}
.sg-levels__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.sg-levels__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
}
.sg-levels__orb--a {
  width: 40vw;
  height: 40vw;
  background: radial-gradient(circle, var(--accent) 0%, transparent 60%);
  top: -15%;
  left: -10%;
  opacity: 0.14;
}
.sg-levels__orb--b {
  width: 35vw;
  height: 35vw;
  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 65%);
  bottom: -20%;
  right: -10%;
  opacity: 0.12;
}
.sg-levels__head {
  max-width: 920px;
  margin: 0 auto 80px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.sg-levels__title {
  margin: 0;
  font-size: var(--h2-size, clamp(2.25rem, 4vw, 3.5rem));
  letter-spacing: -0.04em;
  font-weight: 500;
  line-height: 1.06;
  color: var(--fg);
}

/* ---- Double-Bezel: outer shell wraps the inner accordion core ---- */
.sg-levels__accordion {
  position: relative;
  display: flex;
  gap: 0;
  /* Outer shell — subtle backdrop, hairline ring, generous radius */
  padding: 8px;
  border-radius: 32px;
  background: linear-gradient(180deg, rgba(91, 108, 255, 0.06), rgba(91, 108, 255, 0.01));
  border: 1px solid rgba(140, 152, 255, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 60px 160px -60px rgba(91, 108, 255, 0.3),
    0 20px 60px -30px rgba(0, 0, 0, 0.4);
  height: clamp(580px, 66vh, 700px);
  max-width: var(--content-max);
  margin: 0 auto;
}
.sg-levels__accordion::before {
  /* Inner glow halo behind the expanded panel — radial accent */
  content: "";
  position: absolute;
  inset: 12% auto auto 0;
  width: 50%;
  height: 60%;
  background: radial-gradient(ellipse 60% 50% at 35% 50%, rgba(91, 108, 255, 0.18), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
  transition: inset 900ms var(--ease-drawer);
}
/* When level 2 is expanded, slide the halo to center; level 3 to right */
.sg-levels__accordion:has(.sg-level[data-level="1"][aria-expanded="true"])::before { inset: 12% auto auto 25%; }
.sg-levels__accordion:has(.sg-level[data-level="2"][aria-expanded="true"])::before { inset: 12% auto auto 50%; }

.sg-level {
  position: relative;
  flex: 0 0 104px;
  min-width: 0;
  display: flex;
  /* Inner core of Double-Bezel: each section is its own glass panel */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.008));
  border: 1px solid rgba(140, 152, 255, 0.08);
  border-radius: 24px;
  overflow: hidden;
  z-index: 1;
  transition:
    flex-grow 900ms var(--ease-drawer),
    flex-basis 900ms var(--ease-drawer),
    background 900ms var(--ease-drawer),
    border-color 900ms var(--ease-drawer),
    box-shadow 900ms var(--ease-drawer);
}
.sg-level + .sg-level { margin-left: 8px; }
.sg-level[aria-expanded="true"] {
  flex: 1 1 auto;
  background:
    linear-gradient(180deg, rgba(91, 108, 255, 0.14), rgba(91, 108, 255, 0.02) 70%);
  border-color: rgba(140, 152, 255, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 0 1px rgba(140, 152, 255, 0.08),
    0 32px 80px -32px rgba(91, 108, 255, 0.4);
}

/* ---- Collapsed rail: vertical glass tab with magnetic hover ---- */
.sg-level__rail {
  position: relative;
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 32px 0;
  color: var(--fg-soft);
  transition:
    background 500ms var(--ease-out),
    color 500ms var(--ease-out),
    transform 600ms cubic-bezier(0.23, 1, 0.32, 1);
  z-index: 2;
}
.sg-level__rail::before {
  /* Inner highlight (Double-Bezel inset) */
  content: "";
  position: absolute;
  inset: 12px 8px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 50%);
  opacity: 0;
  transition: opacity 500ms var(--ease-out);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .sg-level:not([aria-expanded="true"]) .sg-level__rail:hover {
    color: var(--fg);
    transform: scale(1.02);
  }
  .sg-level:not([aria-expanded="true"]) .sg-level__rail:hover::before { opacity: 1; }
}
.sg-level__rail:active { transform: scale(0.985); }
.sg-level__rail:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.sg-level[aria-expanded="true"] .sg-level__rail {
  flex: 0 0 88px;
  position: absolute;
  inset: 0 auto 0 0;
  width: 88px;
  background: linear-gradient(90deg, rgba(91, 108, 255, 0.18), rgba(91, 108, 255, 0.02) 80%, transparent);
  color: var(--fg);
  pointer-events: none;
  padding: 32px 0;
  cursor: default;
}
.sg-level[aria-expanded="true"] .sg-level__rail::after {
  content: "";
  position: absolute;
  right: 0;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(140, 152, 255, 0.4) 30%, rgba(140, 152, 255, 0.4) 70%, transparent);
}
.sg-level__rail-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.sg-level__rail-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--accent-soft);
  writing-mode: horizontal-tb;
  transform: rotate(180deg);
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(91, 108, 255, 0.08);
  border: 1px solid rgba(140, 152, 255, 0.18);
}
.sg-level__rail-meta {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--fg);
  line-height: 1;
}
.sg-level__rail-name {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-mute);
  max-height: 20em;
  overflow: hidden;
}
.sg-level[aria-expanded="true"] .sg-level__rail-name { display: none; }
.sg-level[aria-expanded="true"] .sg-level__rail-inner { gap: 18px; }

/* ---- Panel (collapsed: hidden; expanded: visible content) ---- */
.sg-level__panel {
  flex: 1 1 auto;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 500ms var(--ease-out) 0ms, visibility 0ms 800ms;
}
.sg-level[aria-expanded="true"] .sg-level__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 500ms var(--ease-out) 280ms, visibility 0ms 0ms;
}
.sg-level__panel-inner {
  position: relative;
  padding: 56px 56px 56px 136px;
  /* 136 left padding clears the absolute-positioned rail (88px) + breathing room */
  display: flex;
  flex-direction: column;
  gap: 32px;
  height: 100%;
  overflow-y: auto;
  /* Custom thin scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(140, 152, 255, 0.3) transparent;
}
.sg-level__panel-inner::before {
  /* Gigantic backdrop number — editorial accent */
  content: attr(data-num);
  position: absolute;
  top: 32px;
  right: 48px;
  font-family: var(--font-display);
  font-size: clamp(7rem, 11vw, 12rem);
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 0.85;
  background: linear-gradient(180deg, rgba(140, 152, 255, 0.18) 0%, rgba(91, 108, 255, 0.04) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  pointer-events: none;
  z-index: 0;
  filter: drop-shadow(0 12px 32px rgba(91, 108, 255, 0.16));
}
.sg-level__panel-inner::-webkit-scrollbar { width: 6px; }
.sg-level__panel-inner::-webkit-scrollbar-track { background: transparent; }
.sg-level__panel-inner::-webkit-scrollbar-thumb {
  background: rgba(140, 152, 255, 0.25);
  border-radius: 3px;
}
.sg-level__panel-inner::-webkit-scrollbar-thumb:hover { background: rgba(140, 152, 255, 0.5); }
.sg-level__panel-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  z-index: 1;
  max-width: 70%;
}
.sg-level__panel-num {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(91, 108, 255, 0.1);
  border: 1px solid rgba(140, 152, 255, 0.22);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-soft);
  width: max-content;
}
.sg-level__panel-num::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}
.sg-level__panel-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.4vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--fg);
}
.sg-level__panel-lede {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--fg-soft);
  max-width: 64ch;
}

.sg-level__panel-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  position: relative;
  z-index: 1;
}
.sg-level__stat,
.sg-level__scenarios,
.sg-level__list--llmo,
.sg-level__tags,
.sg-level__code { position: relative; z-index: 1; }
.sg-level__col { display: flex; flex-direction: column; gap: 12px; }
.sg-level__col-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-soft);
}
.sg-level__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sg-level__list li {
  position: relative;
  padding-left: 18px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--fg-soft);
}
.sg-level__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(91, 108, 255, 0.16);
}
.sg-level__list--llmo li { padding-left: 22px; font-size: 0.93rem; line-height: 1.6; }
.sg-level__list--llmo li strong {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--accent-soft);
  letter-spacing: 0.01em;
}

/* GEO stat-row */
.sg-level__stat {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 22px 24px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(91, 108, 255, 0.16), rgba(91, 108, 255, 0.04));
  border: 1px solid rgba(140, 152, 255, 0.24);
}
.sg-level__stat-num {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 2.4vw, 2.125rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, #ffffff, #c5cbff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  flex-shrink: 0;
  line-height: 1.05;
}
.sg-level__stat-vs {
  font-family: var(--font-mono);
  font-size: 0.8em;
  color: var(--fg-mute);
  font-weight: 400;
  -webkit-text-fill-color: var(--fg-mute);
}
.sg-level__stat-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--fg-soft);
}
.sg-level__stat-src {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

/* GEO scenarios */
.sg-level__scenarios { display: flex; flex-direction: column; gap: 12px; }
.sg-level__scenarios-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-soft);
}
.sg-level__scenarios-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.sg-level__scenario {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(91, 108, 255, 0.06);
  border: 1px solid rgba(140, 152, 255, 0.16);
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--fg-soft);
}
.sg-level__scenario strong {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
}

/* Tags */
.sg-level__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
}
.sg-level__tags-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin-right: 4px;
}
.sg-level__tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(140, 152, 255, 0.14);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--fg-soft);
}

/* LLMO code preview */
.sg-level__code {
  padding: 22px 24px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(8, 8, 12, 0.78), rgba(8, 8, 12, 0.55));
  border: 1px solid rgba(140, 152, 255, 0.22);
  font-family: var(--font-mono);
  font-size: 0.86rem;
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  color: var(--fg);
}
.sg-level__code-line { display: block; }
.sg-level__code-comment { color: var(--fg-mute); }

/* Stagger inner-content reveal so children "land" after the panel opens. */
.sg-level[aria-expanded="true"] .sg-level__panel-head,
.sg-level[aria-expanded="true"] .sg-level__panel-body,
.sg-level[aria-expanded="true"] .sg-level__stat,
.sg-level[aria-expanded="true"] .sg-level__scenarios,
.sg-level[aria-expanded="true"] .sg-level__list--llmo,
.sg-level[aria-expanded="true"] .sg-level__tags,
.sg-level[aria-expanded="true"] .sg-level__code {
  animation: sg-level-pop 700ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.sg-level[aria-expanded="true"] .sg-level__panel-head { animation-delay: 380ms; }
.sg-level[aria-expanded="true"] .sg-level__panel-body { animation-delay: 460ms; }
.sg-level[aria-expanded="true"] .sg-level__stat { animation-delay: 460ms; }
.sg-level[aria-expanded="true"] .sg-level__scenarios { animation-delay: 540ms; }
.sg-level[aria-expanded="true"] .sg-level__list--llmo { animation-delay: 460ms; }
.sg-level[aria-expanded="true"] .sg-level__tags { animation-delay: 620ms; }
.sg-level[aria-expanded="true"] .sg-level__code { animation-delay: 540ms; }

@keyframes sg-level-pop {
  from { opacity: 0; transform: translateY(24px); filter: blur(8px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.sg-level[aria-expanded="true"] .sg-level__panel-inner::before {
  /* Backdrop "01"/"02"/"03" gigantic fades in last as accent */
  animation: sg-level-num-pop 1100ms cubic-bezier(0.16, 1, 0.3, 1) 320ms backwards;
}
@keyframes sg-level-num-pop {
  from { opacity: 0; transform: translateX(40px) scale(0.94); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* ---- Mobile fallback: vertical accordion ---- */
@media (max-width: 900px) {
  .sg-levels { padding: 80px 16px; }
  .sg-levels__accordion {
    flex-direction: column;
    height: auto;
    min-height: auto;
  }
  .sg-level {
    flex: 0 0 auto;
    flex-direction: column;
    width: 100%;
    transition: max-height 700ms cubic-bezier(0.32, 0.72, 0, 1),
                background 700ms cubic-bezier(0.32, 0.72, 0, 1);
    max-height: 88px;
    overflow: hidden;
  }
  .sg-level + .sg-level {
    border-left: 0;
    border-top: 1px solid rgba(140, 152, 255, 0.14);
  }
  .sg-level[aria-expanded="true"] { max-height: 2400px; }
  .sg-level__rail {
    flex: 0 0 88px;
    width: 100%;
    height: 88px;
    pointer-events: auto;
    background: transparent !important;
    position: relative !important;
    inset: auto !important;
  }
  .sg-level[aria-expanded="true"] .sg-level__rail::after { display: none; }
  .sg-level__rail-inner {
    writing-mode: horizontal-tb;
    transform: none;
    flex-direction: row;
    gap: 14px;
    width: 100%;
    padding: 0 24px;
  }
  .sg-level__rail-num,
  .sg-level__rail-meta { writing-mode: horizontal-tb; transform: none; }
  .sg-level__rail-name {
    margin-left: auto;
    max-height: none;
    text-align: right;
  }
  .sg-level[aria-expanded="true"] .sg-level__rail-name { display: inline-block; opacity: 0.5; }
  .sg-level__panel-inner {
    padding: 8px 24px 40px;
    gap: 22px;
    height: auto;
    overflow: visible;
  }
  .sg-level__panel-body { grid-template-columns: 1fr; }
  .sg-level__scenarios-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   LEGACY /web-development/ v1 — styles for the deleted first
   version of the page (.wd-stack-card / .wd-perfseo /
   .wd-mistakes blocks). The current /web-development/ page
   reuses the seo-geo (.sg-*) infrastructure instead. These
   rules are kept temporarily in case any block needs to be
   resurrected; safe to remove once no .wd-* class is used.
   ============================================================ */

/* ---- Block 4 · Stack bento (inside .why--wd, light theme) ---- */
.wd-stack__grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 22px;
}
.wd-stack-card {
  grid-column: span 4;
  padding: 28px 28px 24px;
  min-height: 200px;
  gap: 12px;
}
.wd-stack-card--big { grid-column: span 6; min-height: 240px; }
.wd-stack-card:nth-of-type(6).wd-stack-card--big { grid-column: span 12; min-height: 200px; }
.wd-stack-card__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(20, 23, 43, 0.42);
  font-weight: 500;
}
.wd-stack-card__title {
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #14172b;
  margin: 0;
  line-height: 1.2;
}
.wd-stack-card__copy {
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(20, 23, 43, 0.72);
  margin: 0;
}
.wd-stack-card__copy strong {
  font-weight: 600;
  color: #14172b;
}
.wd-stack-card__list {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wd-stack-card__list li {
  font-size: 0.93rem;
  line-height: 1.5;
  color: rgba(20, 23, 43, 0.72);
  padding-left: 18px;
  position: relative;
}
.wd-stack-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.7;
}
.wd-stack-card__list strong { color: #14172b; font-weight: 600; }
.wd-stack-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
}
.wd-stack-card__tags span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(91, 108, 255, 0.08);
  color: var(--accent-deep);
  border: 1px solid rgba(91, 108, 255, 0.18);
}
@media (max-width: 980px) {
  .wd-stack-card,
  .wd-stack-card--big,
  .wd-stack-card:nth-of-type(6).wd-stack-card--big { grid-column: span 12; min-height: auto; }
}

/* ============================================================
   Block 5 · Performance + SEO — two-column dark glass
   ============================================================ */
.wd-perfseo {
  position: relative;
  padding: clamp(80px, 10vw, 140px) 24px;
  overflow: hidden;
}
.wd-perfseo__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.wd-perfseo__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.5;
}
.wd-perfseo__orb--a {
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(91, 108, 255, 0.4), transparent 70%);
  top: -120px;
  left: -120px;
}
.wd-perfseo__orb--b {
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(140, 152, 255, 0.28), transparent 70%);
  bottom: -200px;
  right: -160px;
}
.wd-perfseo__head {
  position: relative;
  max-width: 820px;
  margin: 0 auto 56px;
  text-align: center;
}
.wd-perfseo__title {
  font-size: var(--h2-size);
  font-weight: 600;
  letter-spacing: var(--h2-tracking);
  line-height: var(--h2-line);
  color: var(--fg);
  margin: 16px 0 18px;
}
.wd-perfseo__capsule {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--fg-soft);
  margin: 0 auto;
  max-width: 720px;
}
.wd-perfseo__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: var(--content-max);
  margin: 0 auto;
}
.wd-perfseo-col {
  position: relative;
  padding: 36px 32px;
  border-radius: 26px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018));
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--hairline);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 30px 80px -32px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(40px);
  filter: blur(8px);
  transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out),
    filter 800ms var(--ease-out), border-color 480ms var(--ease-out);
}
.wd-perfseo-col.is-revealed { opacity: 1; transform: translateY(0); filter: blur(0); }
.wd-perfseo-col[data-reveal-card="1"].is-revealed { transition-delay: 120ms, 120ms, 120ms, 0ms; }
.wd-perfseo-col:hover { border-color: rgba(91, 108, 255, 0.32); }
.wd-perfseo-col__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hairline);
}
.wd-perfseo-col__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-soft);
  font-weight: 500;
}
.wd-perfseo-col__title {
  font-size: clamp(1.35rem, 2vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 0;
  line-height: 1.2;
}
.wd-perfseo-col__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.wd-perfseo-col__list li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 22px;
  position: relative;
}
.wd-perfseo-col__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 16px rgba(91, 108, 255, 0.7);
}
.wd-perfseo-col__item-title {
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--fg);
  letter-spacing: -0.005em;
}
.wd-perfseo-col__item-copy {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--fg-soft);
}
.wd-perfseo-col__item-copy strong {
  color: var(--fg);
  font-weight: 600;
}
@media (max-width: 980px) {
  .wd-perfseo__grid { grid-template-columns: 1fr; gap: 20px; }
  .wd-perfseo-col { padding: 28px 22px; }
}

/* ============================================================
   Block 9 · Типичные ошибки — 3x2 grid of dark glass cards
   ============================================================ */
.wd-mistakes {
  position: relative;
  padding: clamp(80px, 10vw, 140px) 24px;
  overflow: hidden;
}
.wd-mistakes__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.wd-mistakes__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);
  opacity: 0.4;
}
.wd-mistakes__orb--a {
  width: 540px;
  height: 540px;
  background: radial-gradient(circle, rgba(91, 108, 255, 0.45), transparent 70%);
  top: -180px;
  right: -120px;
}
.wd-mistakes__orb--b {
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(140, 152, 255, 0.3), transparent 70%);
  bottom: -160px;
  left: -140px;
}
.wd-mistakes__head {
  position: relative;
  max-width: 760px;
  margin: 0 auto 56px;
  text-align: center;
}
.wd-mistakes__title {
  font-size: var(--h2-size);
  font-weight: 600;
  letter-spacing: var(--h2-tracking);
  line-height: var(--h2-line);
  color: var(--fg);
  margin: 16px 0 18px;
}
.wd-mistakes__lede {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--fg-soft);
  margin: 0;
}
.wd-mistakes__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  max-width: var(--content-max);
  margin: 0 auto;
}
.wd-mistake {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px 28px 28px;
  border-radius: 24px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018));
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--hairline);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 24px 60px -28px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translateY(40px);
  filter: blur(8px);
  transition: opacity 800ms var(--ease-out), transform 480ms var(--ease-out),
    filter 800ms var(--ease-out), border-color 480ms var(--ease-out);
  overflow: hidden;
}
.wd-mistake.is-revealed { opacity: 1; transform: translateY(0); filter: blur(0); }
.wd-mistake[data-reveal-card="1"].is-revealed { transition-delay: 80ms, 80ms, 80ms, 0ms; }
.wd-mistake[data-reveal-card="2"].is-revealed { transition-delay: 160ms, 160ms, 160ms, 0ms; }
.wd-mistake[data-reveal-card="3"].is-revealed { transition-delay: 240ms, 240ms, 240ms, 0ms; }
.wd-mistake[data-reveal-card="4"].is-revealed { transition-delay: 320ms, 320ms, 320ms, 0ms; }
.wd-mistake[data-reveal-card="5"].is-revealed { transition-delay: 400ms, 400ms, 400ms, 0ms; }
.wd-mistake:hover {
  border-color: rgba(91, 108, 255, 0.32);
  transform: translateY(-3px);
}
.wd-mistake__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-soft);
  font-weight: 500;
}
.wd-mistake__title {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 0;
  line-height: 1.25;
}
.wd-mistake__copy {
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--fg-soft);
  margin: 0;
}
.wd-mistake__fix {
  margin-top: auto;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(91, 108, 255, 0.08);
  border: 1px solid rgba(91, 108, 255, 0.18);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--fg-soft);
}
.wd-mistake__fix-mark {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-soft);
  font-weight: 500;
  margin-right: 8px;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(91, 108, 255, 0.14);
}
@media (max-width: 980px) {
  .wd-mistakes__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .wd-mistakes__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   /web-development/ (v2) — page-specific tweaks
   ============================================================ */
/* Fix descender clipping on words like "Запуск" (cyrillic "у").
   Base seo-geo line-height: 0.95 is too tight for descenders +
   .sg-phase-row overflow: hidden combo. Slightly looser + small
   bottom padding keeps "у" / "р" / "д" tails fully visible. */
.page-web-development .sg-phase-row__display {
  line-height: 1.05;
  padding-bottom: 0.05em;
}

/* Restore floating glow/shadow on the dashboard mockup. rembg cleanly
   cut at the device outer edge, removing the soft halo + drop shadow
   that gave it physical presence. Two layered drop-shadows reproduce
   that: outer indigo glow + tighter dark shadow underneath. Values
   tuned to match the .sg-mockup box-shadow elsewhere in the codebase
   (which is the original visual treatment for this kind of card). */
.page-web-development .sg-handoff__visual img {
  filter:
    drop-shadow(0 50px 80px rgba(91, 108, 255, 0.45))
    drop-shadow(0 25px 40px rgba(20, 23, 43, 0.55));
}

/* ============================================================
   /automation/ — page-specific components
   ============================================================ */

/* Hero meta — text variant (e.g. "Self-hosted") */
.hero__meta-num--text { font-size: clamp(1.05rem, 2vw, 1.45rem); }

/* Hero H1 here is the flagman phrase "Автоматизация бизнес-процессов с ИИ" —
   longer than other pages' titles. The shared .hero__title max-width:14ch
   was narrower than the 16-char word "бизнес-процессов", forcing a 4th line
   (it broke at the hyphen). Widen the wrap box + a small size nudge so it
   renders as a clean 3-line title like the rest of the site. */
.page-automation .hero__title,
.page-ai-agents .hero__title {
  font-size: clamp(2.4rem, 5.2vw, 4.5rem);
  max-width: 20ch;
}
/* Hero highlight: colored indigo-gradient text (same gradient as .hero__word
   on the homepage) instead of the filled "marker" box. text-hl is used ONLY
   in hero titles across the service pages — accent the key words by color. */
.hero__title .text-hl {
  /* inline (not the base inline-block): hero highlights carry no ::before
     wipe, and inline-block created a line-break opportunity that let
     trailing punctuation ("LLMs".) wrap onto its own line. */
  display: inline;
  padding: 0 0 0.2em;
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--accent) 70%, var(--accent-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__title .text-hl::before { display: none; }

/* Hero showcase — before/after rows */
.au-ba { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 15px; }
.au-ba__row { display: flex; flex-direction: column; gap: 6px; }
.au-ba__task { font-size: 0.82rem; color: rgba(255, 255, 255, 0.6); letter-spacing: 0.01em; }
.au-ba__bar { display: flex; align-items: baseline; gap: 10px; }
.au-ba__before {
  font-family: "Geist Mono", monospace; font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.48);
  text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, 0.32);
}
.au-ba__arrow { color: #8c98ff; font-size: 0.95rem; }
.au-ba__after {
  font-family: "Geist Mono", monospace; font-weight: 600;
  font-size: 1.1rem; color: #aab3ff;
}

/* loss-card metric unit (small suffix inside big number) */
.loss-card__metric-unit { font-size: 0.5em; font-weight: 500; opacity: 0.85; }

/* Direction perelink note */
.sg-level-card__note { margin-top: 16px; font-size: 0.82rem; line-height: 1.55; color: rgba(255, 255, 255, 0.55); }
.sg-level-card__note a { color: #8c98ff; text-decoration: none; border-bottom: 1px solid rgba(140, 152, 255, 0.4); }
.sg-level-card__note a:hover { color: #aab3ff; }

/* n8n GEO capsule (inside light island) */
.au-capsule {
  max-width: var(--content-max);
  margin: 24px auto 0; padding: clamp(20px, 3vw, 32px);
  border-radius: 18px;
  background: rgba(91, 108, 255, 0.06);
  border: 1px solid rgba(91, 108, 255, 0.18);
}
.au-capsule__tag {
  display: inline-block; font-family: "Geist Mono", monospace;
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: #5b6cff; margin-bottom: 10px;
}
.au-capsule__text { margin: 0; font-size: 0.98rem; line-height: 1.7; color: rgba(20, 23, 43, 0.78); }

/* Architecture diagram (replaces dashboard image in handoff visual) */
.au-arch-diagram { width: 100%; max-width: 340px; margin: 0 auto; }
.au-arch-diagram svg { width: 100%; height: auto; display: block; }

/* Stack detail — vectors + chips (inside light island) */
.au-stack-detail {
  max-width: var(--content-max);
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: clamp(28px, 4vw, 56px); row-gap: 14px; margin: 36px auto 0;
  align-items: stretch;
}
.au-vectors__intro { grid-column: 1 / -1; }
.au-stack-detail__col { display: flex; flex-direction: column; }
/* right column: push the last chip group to the bottom so its lower edge
   aligns with the (taller) vector-stores column */
.au-stack-detail__col:last-child .au-igroup:last-child { margin-top: auto; }
.au-stack-detail__title {
  display: flex; align-items: center; gap: 9px; margin: 0 0 16px;
  font-family: "Geist Mono", monospace; font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: #5b6cff;
}
.au-stack-detail__title::before {
  content: ""; width: 7px; height: 7px; border-radius: 2px;
  background: #5b6cff; box-shadow: 0 0 0 3px rgba(91, 108, 255, 0.15);
}
.au-vectors__intro { margin: 0 0 18px; max-width: 70ch; font-size: 0.9rem; line-height: 1.6; color: rgba(20, 23, 43, 0.6); }

/* vector stores — elevated cards with accent edge (2x2 grid) */
.au-vstore { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.au-vstore__item {
  position: relative; padding: 14px 16px 14px 20px; border-radius: 14px;
  background: #ffffff; border: 1px solid rgba(20, 23, 43, 0.08);
  box-shadow: 0 1px 2px rgba(20, 30, 80, 0.04);
  transition: transform 220ms var(--ease-out), border-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.au-vstore__item::before {
  content: ""; position: absolute; left: 8px; top: 14px; bottom: 14px; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, #8c98ff, #5b6cff); opacity: 0.55;
  transition: opacity 220ms var(--ease-out);
}
.au-vstore__name { display: block; font-weight: 600; font-size: 0.98rem; color: rgba(20, 23, 43, 0.92); margin-bottom: 3px; }
.au-vstore__when { display: block; font-size: 0.84rem; line-height: 1.45; color: rgba(20, 23, 43, 0.55); }

/* integration chip groups */
.au-igroup + .au-igroup { margin-top: 22px; }
.au-igroup__label {
  display: block; margin-bottom: 11px;
  font-family: "Geist Mono", monospace; font-size: 0.66rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: rgba(20, 23, 43, 0.45);
}
.au-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.au-chips li {
  font-size: 0.84rem; padding: 7px 14px; border-radius: 999px;
  background: #ffffff; border: 1px solid rgba(20, 23, 43, 0.1); color: rgba(20, 23, 43, 0.82);
  box-shadow: 0 1px 2px rgba(20, 30, 80, 0.04);
  transition: transform 200ms var(--ease-out), border-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.au-chips .au-chip--featured {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 600;
  color: #2a3aff; border-color: rgba(91, 108, 255, 0.45);
  background: linear-gradient(180deg, rgba(91, 108, 255, 0.14), rgba(91, 108, 255, 0.07));
}
.au-chips .au-chip--featured::before { content: "\2605"; font-size: 0.72em; color: #5b6cff; }
@media (hover: hover) and (pointer: fine) {
  .au-vstore__item:hover { transform: translateX(4px); border-color: rgba(91, 108, 255, 0.4); box-shadow: 0 14px 30px -18px rgba(91, 108, 255, 0.5); }
  .au-vstore__item:hover::before { opacity: 1; }
  .au-chips li:hover { transform: translateY(-2px); border-color: rgba(91, 108, 255, 0.45); color: #2a3aff; }
}
@media (prefers-reduced-motion: reduce) {
  .au-vstore__item:hover, .au-chips li:hover { transform: none; }
}

/* Block 5 — Security · asymmetric defense-in-depth (taste: anti-card-overuse
   via divide-y, asymmetric layout, liquid-glass inner borders; emil: custom
   ease-out, hover lift, stagger reveal, reduced-motion, no neon outer glow) */
.au-security { max-width: 1240px; margin: 0 auto; padding: clamp(80px, 12vh, 140px) clamp(20px, 5vw, 64px); }
.au-security__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}
.au-security__feature { position: sticky; top: clamp(96px, 14vh, 140px); }
.au-security__title { font-size: clamp(2rem, 3.3vw, 3rem); line-height: 1.08; margin: 16px 0 18px; font-weight: 600; }
.au-security__lede { font-size: 0.98rem; line-height: 1.7; color: rgba(255, 255, 255, 0.6); margin: 0; max-width: 46ch; }

/* Layered shield visual (self-soft radial backdrop, no blur filter) */
.au-security__shield { position: relative; width: min(252px, 78%); aspect-ratio: 1; margin-top: clamp(30px, 4vw, 48px); }
.au-security__shield::before {
  content: ""; position: absolute; inset: -6%;
  background: radial-gradient(circle at 50% 46%, rgba(91, 108, 255, 0.22) 0%, rgba(91, 108, 255, 0.07) 38%, transparent 68%);
}
.au-security__shield svg { position: relative; width: 100%; height: 100%; display: block; overflow: visible; }
.au-shield-ring { transform-origin: 100px 100px; animation: au-shield-pulse 4.6s var(--ease-in-out) infinite; }
@keyframes au-shield-pulse {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.045); }
}

/* Defense-in-depth layers — divided rows, elevation on hover (not boxed) */
.au-security__layers { list-style: none; margin: 0; padding: 0; }
.au-layer {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: 52px 1fr; gap: 20px; align-items: start;
  padding: clamp(22px, 2.4vw, 30px) clamp(14px, 1.5vw, 22px);
  transition: transform 240ms var(--ease-out);
}
.au-layer + .au-layer::before {
  content: ""; position: absolute; top: 0; left: clamp(14px, 1.5vw, 22px); right: clamp(14px, 1.5vw, 22px);
  height: 1px; background: var(--hairline);
}
.au-layer::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 18px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(91, 108, 255, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 22px 48px -26px rgba(91, 108, 255, 0.45);
  opacity: 0; transition: opacity 240ms var(--ease-out);
}
.au-layer__icon {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(91, 108, 255, 0.16), rgba(91, 108, 255, 0.05));
  border: 1px solid rgba(91, 108, 255, 0.26); color: #aab3ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: color 240ms var(--ease-out), border-color 240ms var(--ease-out);
}
.au-layer__icon svg { width: 24px; height: 24px; }
.au-layer__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 9px; }
.au-layer__tag { font-family: "Geist Mono", monospace; font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: #5b6cff; }
.au-layer__title { font-size: 1.12rem; font-weight: 600; margin: 0; color: #fff; }
.au-layer__body { margin: 0; font-size: 0.92rem; line-height: 1.62; color: rgba(255, 255, 255, 0.58); max-width: 58ch; }
@media (hover: hover) and (pointer: fine) {
  .au-layer:hover { transform: translateX(5px); }
  .au-layer:hover::after { opacity: 1; }
  .au-layer:hover .au-layer__icon { color: #fff; border-color: rgba(91, 108, 255, 0.5); }
}
@media (prefers-reduced-motion: reduce) {
  .au-shield-ring { animation: none; }
  .au-layer:hover { transform: none; }
}
@media (max-width: 980px) {
  .au-security__inner { grid-template-columns: 1fr; gap: clamp(32px, 6vw, 48px); }
  .au-security__feature { position: static; }
  .au-security__shield { margin: 6px auto 0; }
}
@media (max-width: 560px) {
  .au-layer { grid-template-columns: 44px 1fr; gap: 14px; }
  .au-layer__icon { width: 44px; height: 44px; }
  .au-layer__icon svg { width: 21px; height: 21px; }
}

/* Block 6 — Cases carousel (dark) */
.au-cases { position: relative; isolation: isolate; max-width: 1280px; margin: 0 auto; padding: clamp(80px, 12vh, 140px) clamp(20px, 5vw, 64px); }
/* Generated flowing-lines backdrop (Nano Banana) — full-block zone that
   separates Cases from the neighbouring dark sections. Dark overlay keeps
   the cards readable; masked top/bottom so the band blends into the page. */
.au-cases::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw;
  transform: translateX(-50%); z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8, 8, 12, 0.58), rgba(8, 8, 12, 0.58)),
    url("ru/automation/assets/cases-bg.webp") center / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.au-cases__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: clamp(28px, 4vw, 44px); }
.au-cases__head-main { max-width: 640px; }
.au-cases__title { font-size: clamp(2.25rem, 4.6vw, 3.75rem); line-height: 1.06; margin: 14px 0 16px; font-weight: 600; }
.au-cases__lede { font-size: 1rem; line-height: 1.7; color: rgba(255, 255, 255, 0.62); margin: 0; }
.au-cases__nav { display: flex; gap: 10px; flex-shrink: 0; }
.au-cases__arrow {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--hairline);
  color: #fff; cursor: pointer;
  transition: background 240ms var(--ease-out), border-color 240ms var(--ease-out), opacity 240ms;
}
.au-cases__arrow:hover { background: rgba(91, 108, 255, 0.2); border-color: rgba(91, 108, 255, 0.45); }
.au-cases__arrow.is-disabled { opacity: 0.3; pointer-events: none; }
.au-cases__viewport {
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  /* overflow-x:auto forces overflow-y to clip; pad vertically (with margin
     compensation) so the card hover glow isn't cut off by a hard edge. */
  margin: -22px -8px -54px; padding: 22px 8px 64px;
}
.au-cases__viewport::-webkit-scrollbar { display: none; }
.au-cases__track { display: flex; gap: 20px; }
.au-case {
  position: relative; isolation: isolate;
  scroll-snap-align: start; flex: 0 0 calc((100% - 40px) / 3); min-width: 0;
  display: flex; flex-direction: column;
  padding: clamp(24px, 2.4vw, 32px); border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--hairline);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 260ms var(--ease-out), border-color 260ms var(--ease-out), box-shadow 260ms var(--ease-out);
}
/* pointer-tracked spotlight — above bg, below content */
.au-case::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 0; pointer-events: none;
  background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 0%), rgba(91, 108, 255, 0.18), transparent 60%);
  opacity: 0; transition: opacity 260ms var(--ease-out);
}
.au-case > * { position: relative; z-index: 1; }
.au-case__tag {
  align-self: flex-start;
  font-family: "Geist Mono", monospace; font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: #8c98ff; padding: 5px 11px; border-radius: 999px;
  background: rgba(91, 108, 255, 0.1); border: 1px solid rgba(91, 108, 255, 0.2);
}
.au-case__metric { margin: 20px 0 16px; }
.au-case__metric-num {
  display: block; font-size: clamp(2.3rem, 3vw, 3rem); font-weight: 700; line-height: 1; letter-spacing: -0.03em;
  background: linear-gradient(180deg, #ffffff 10%, #8c98ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.au-case__metric-label { display: block; margin-top: 9px; font-size: 0.82rem; line-height: 1.4; color: rgba(255, 255, 255, 0.55); }
.au-case__title { font-size: 1.18rem; margin: 0 0 10px; font-weight: 600; color: #fff; }
.au-case__body { font-size: 0.9rem; line-height: 1.6; color: rgba(255, 255, 255, 0.56); margin: 0 0 20px; flex: 1; }
.au-case__body strong { color: #fff; font-weight: 600; }
.au-case__link { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; color: #8c98ff; text-decoration: none; font-weight: 500; }
.au-case__link svg { transition: transform 200ms var(--ease-out); }
.au-case__link:hover { color: #aab3ff; }
@media (hover: hover) and (pointer: fine) {
  .au-case:hover { transform: translateY(-6px); border-color: rgba(91, 108, 255, 0.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 30px 60px -30px rgba(91, 108, 255, 0.5); }
  .au-case:hover::after { opacity: 1; }
  .au-case:hover .au-case__link svg { transform: translate(2px, -2px); }
}
@media (prefers-reduced-motion: reduce) {
  .au-case:hover { transform: none; }
}
.au-cases__foot { display: flex; justify-content: space-between; align-items: center; margin-top: clamp(24px, 3vw, 36px); }
.au-cases__dots { display: flex; gap: 8px; }
.au-cases__dot { width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0; background: rgba(255, 255, 255, 0.2); cursor: pointer; transition: background 240ms, width 240ms; }
.au-cases__dot.is-active { width: 24px; border-radius: 4px; background: #5b6cff; }
.au-cases__all { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 18px 28px; border-radius: 999px; border: 1px solid var(--hairline-strong); font-size: 0.875rem; color: #fff; text-decoration: none; font-weight: 500; }

@media (max-width: 1024px) {
  .au-cases__head { flex-direction: column; align-items: flex-start; }
  .au-case { flex: 0 0 calc((100% - 20px) / 2); }
  .au-stack-detail { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .au-case { flex: 0 0 86%; }
}
@media (max-width: 480px) {
  .au-vstore { grid-template-columns: 1fr; }
}

/* ============================================================
   /ai-agents/ — page-specific patterns
   ============================================================ */

/* Hero: H1 is split into three short lines ("ИИ-агенты" / "и чат-боты" /
   "под ключ"), so it uses the shared big service-page clamp (no override) —
   each line is short enough not to overflow the split-hero column. */

/* Block 2 — scenarios moved to horizontal pin-scroll (loss): 6 cards need a
   longer pin than the 4-card default (500vh) for comfortable pacing */
.page-ai-agents .loss { height: 700vh; }
/* …but the 700vh runway only exists to drive the desktop horizontal scroll.
   On phones the loss falls back to a vertical stack (JS pin off <=900px), so
   the runway becomes ~2400px of empty space before the next section. The base
   mobile reset (.loss{height:auto}) can't reach this page-scoped rule, so
   restate it with matching specificity. */
@media (max-width: 900px) {
  .page-ai-agents .loss { height: auto; }
}

/* Block 2 — scenarios (loss) title: the shared loss__title clamp(…, 6rem) broke
   the old long heading into ~5 one-word lines. Now the heading is short
   ("Где ИИ-агент даёт ROI?"), so keep it large but a touch under the default. */
.page-ai-agents .loss__title { font-size: clamp(2.8rem, 6vw, 5rem); }

/* Block 3 — Definition reuses the deck-of-cards stack (.solutions--levels) with
   NO head capsule, so the pinned cards fill almost the whole screen. Title is
   smaller than the shared one so it sits on a single line on desktop. */
.page-ai-agents .solutions__title { font-size: clamp(1.7rem, 2.5vw, 3.2rem); text-wrap: normal; }

/* Block 4 — architecture grid: 4 layer cards */
.sg-tools__grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .sg-tools__grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .sg-tools__grid--4 { grid-template-columns: 1fr; } }

/* Block 5 — compliance row (dark, below the 4 security layers) */
.au-compliance {
  margin: clamp(40px, 6vw, 64px) 0 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
}
.au-compliance__item {
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--hairline);
  border-radius: 18px; padding: 24px 22px;
  transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1),
    border-color 0.45s ease, background 0.45s ease, box-shadow 0.45s ease;
}
.au-compliance__item:hover {
  transform: translateY(-4px);
  border-color: rgba(91, 108, 255, 0.42);
  background: rgba(91, 108, 255, 0.06);
  box-shadow: 0 18px 40px -20px rgba(91, 108, 255, 0.5);
}
.au-compliance__item:hover .au-compliance__name::before {
  box-shadow: 0 0 0 5px rgba(91, 108, 255, 0.22);
}
.au-compliance__name {
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
  color: var(--fg); margin: 0 0 10px; display: flex; align-items: center; gap: 9px;
}
.au-compliance__name::before {
  content: ""; width: 7px; height: 7px; border-radius: 2px;
  background: #5b6cff; box-shadow: 0 0 0 3px rgba(91, 108, 255, 0.15);
  transition: box-shadow 0.45s ease;
}
.au-compliance__body { font-size: 0.9rem; line-height: 1.6; color: var(--fg-soft); margin: 0; }
@media (max-width: 860px) { .au-compliance { grid-template-columns: 1fr; } }

/* Block 3 — Definition deck: card infographic animations (so they're alive like
   the visuals on the other service pages). CSS keyframes on classed SVG nodes,
   so reduced-motion can switch them off while the diagrams stay visible. */
/* 01 Чат-бот — scripted "if-then" flow cascades root → branches → leaves */
.page-ai-agents .adv-tree__node {
  transform-box: fill-box; transform-origin: center;
  animation: advTreePulse 2.7s ease-in-out infinite; animation-delay: var(--d, 0s);
}
@keyframes advTreePulse { 0%, 72%, 100% { opacity: 0.4; } 32% { opacity: 1; } }
/* 02 ИИ-ассистент — answer bubble breathes, typing dots bounce in sequence */
.page-ai-agents .adv-chat__bubble { animation: advChatBubble 3.2s ease-in-out infinite; }
@keyframes advChatBubble { 0%, 100% { opacity: 0.72; } 50% { opacity: 1; } }
.page-ai-agents .adv-chat__dot {
  transform-box: fill-box; transform-origin: center;
  animation: advChatDot 1.1s ease-in-out infinite; animation-delay: var(--d, 0s);
}
@keyframes advChatDot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.55; } 30% { transform: translateY(-5px); opacity: 1; } }
/* 03 ИИ-агент — data flows out of the core along the links, nodes light up, core breathes */
.page-ai-agents .adv-net__links { animation: advNetFlow 0.9s linear infinite; }
@keyframes advNetFlow { to { stroke-dashoffset: -14; } }
.page-ai-agents .adv-net__core {
  transform-box: fill-box; transform-origin: center;
  animation: advNetCore 2.6s ease-in-out infinite;
}
@keyframes advNetCore { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.page-ai-agents .adv-net__node { animation: advNetNode 2.4s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes advNetNode { 0%, 70%, 100% { opacity: 0.45; } 35% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .page-ai-agents .adv-tree__node,
  .page-ai-agents .adv-chat__bubble,
  .page-ai-agents .adv-chat__dot,
  .page-ai-agents .adv-net__links,
  .page-ai-agents .adv-net__core,
  .page-ai-agents .adv-net__node { animation: none; }
}

/* ============================================================
   /automation/ — «Результаты в цифрах» — metrics bento (light island)
   Real case numbers · radial gauge + comparison bars + stat strip.
   Asymmetric bento (taste variance 8) · transform/opacity motion (emil).
   ============================================================ */
.au-metrics {
  position: relative;
  padding: clamp(96px, 12vw, 160px) clamp(20px, 6vw, 80px);
  background:
    radial-gradient(70% 60% at 12% 0%, rgba(91, 108, 255, 0.07), transparent 55%),
    radial-gradient(60% 55% at 95% 100%, rgba(91, 108, 255, 0.05), transparent 55%),
    #f4f5f8;
  color: #14172b;
}
.au-metrics__head {
  max-width: var(--content-max); margin: 0 auto clamp(40px, 5vw, 64px);
  display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(20px, 4vw, 56px); align-items: end;
}
.au-metrics__head .eyebrow {
  background: rgba(20, 23, 43, 0.06); color: rgba(20, 23, 43, 0.7); border-color: rgba(20, 23, 43, 0.08);
}
.au-metrics__head .eyebrow__dot { background: rgba(20, 23, 43, 0.5); }
.au-metrics__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.25rem, 4.6vw, 3.75rem); letter-spacing: -0.045em; line-height: 1;
  margin: 16px 0 0; color: #14172b;
}
.au-metrics__lede {
  font-size: clamp(0.95rem, 1.1vw, 1.0625rem); line-height: 1.6; color: rgba(20, 23, 43, 0.6);
  margin: 0; padding-bottom: 6px;
}
@media (max-width: 860px) { .au-metrics__head { grid-template-columns: 1fr; gap: 14px; align-items: start; } }

.au-metrics__bento {
  max-width: var(--content-max); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  grid-template-areas: "gauge bars" "gauge strip"; gap: 20px;
}
@media (max-width: 860px) {
  .au-metrics__bento { grid-template-columns: 1fr; grid-template-areas: "gauge" "bars" "strip"; }
}

.am-tile {
  background: #ffffff; border: 1px solid rgba(20, 23, 43, 0.07); border-radius: 28px;
  box-shadow: 0 20px 40px -24px rgba(20, 30, 80, 0.18);
}
.am-tile--gauge {
  grid-area: gauge; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(20px, 3vw, 34px); padding: clamp(28px, 3vw, 44px);
}
.am-tile--bars { grid-area: bars; padding: clamp(26px, 3vw, 40px); }
.am-tile--strip {
  grid-area: strip; padding: clamp(20px, 2.4vw, 30px) clamp(20px, 3vw, 40px);
  display: grid;
  /* Content-independent tracks (minmax floor 0, not min-content) so the row does
     not reflow while the counters run; 4th track reserves room for "10 000+". */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.35fr);
}
@media (max-width: 620px) { .am-tile--strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.am-gauge { position: relative; width: clamp(190px, 20vw, 230px); aspect-ratio: 1; }
/* overflow visible so the fill's drop-shadow glow fades smoothly past the
   svg box instead of being clipped into a faint square seam at its edge. */
.am-gauge__svg { width: 100%; height: 100%; overflow: visible; }
.am-gauge__ring {
  fill: none; stroke: rgba(91, 108, 255, 0.18); stroke-width: 1; stroke-dasharray: 2 8;
  transform-origin: center; animation: am-ring-spin 70s linear infinite;
}
@keyframes am-ring-spin { to { transform: rotate(360deg); } }
.am-gauge__track { fill: none; stroke: rgba(20, 23, 43, 0.07); stroke-width: 16; }
.am-gauge__fill {
  fill: none; stroke-width: 16; stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: center; stroke-dasharray: 0 578;
  filter: drop-shadow(0 4px 14px rgba(91, 108, 255, 0.28));
  transition: stroke-dasharray 1500ms var(--ease-out) 250ms;
}
.am-tile--gauge.is-revealed .am-gauge__fill { stroke-dasharray: 405 578; }
.am-gauge__cap {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: 6px;
}
.am-gauge__pct {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(2.6rem, 4.2vw, 3.4rem);
  letter-spacing: -0.04em; line-height: 1; color: #14172b;
}
.am-gauge__label { font-size: 0.82rem; line-height: 1.35; color: rgba(20, 23, 43, 0.58); }
.am-gauge__subs { display: flex; gap: clamp(20px, 3vw, 40px); }
.am-substat { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.am-substat__num { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; color: var(--accent-deep, #2a3aff); }
.am-substat__label {
  font-family: var(--font-mono, "Geist Mono", monospace); font-size: 0.62rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: rgba(20, 23, 43, 0.5);
}

.am-tile__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.am-tile__tag {
  font-family: var(--font-mono, "Geist Mono", monospace); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-deep, #2a3aff);
}
.am-tile__hint { font-size: 0.78rem; color: rgba(20, 23, 43, 0.45); }
.am-cmp { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.am-cmp__row {
  display: grid; grid-template-columns: 1fr; gap: 8px;
  opacity: 0; transform: translateY(10px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
  transition-delay: calc(var(--i) * 90ms);
}
.am-tile--bars.is-revealed .am-cmp__row { opacity: 1; transform: none; }
.am-cmp__task { font-size: 0.9rem; color: rgba(20, 23, 43, 0.7); }
.am-cmp__bar { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; }
.am-cmp__track { position: relative; height: 9px; border-radius: 5px; background: rgba(20, 23, 43, 0.06); overflow: hidden; }
.am-cmp__track i {
  position: absolute; inset: 0 auto 0 0; width: var(--w, 100%); border-radius: 5px;
  transform: scaleX(0); transform-origin: left;
  transition: transform 900ms var(--ease-out); transition-delay: calc(var(--i) * 90ms + 140ms);
}
.am-tile--bars.is-revealed .am-cmp__track i { transform: scaleX(1); }
.am-cmp__bar--was .am-cmp__track i { background: rgba(20, 23, 43, 0.22); }
.am-cmp__bar--now .am-cmp__track i { background: linear-gradient(90deg, var(--accent-soft), var(--accent), var(--accent-deep, #2a3aff)); }
.am-cmp__bar b { font-family: var(--font-mono, "Geist Mono", monospace); font-size: 0.8rem; min-width: 5ch; text-align: right; }
.am-cmp__bar--was b { color: rgba(20, 23, 43, 0.42); }
.am-cmp__bar--now b { color: var(--accent-deep, #2a3aff); font-weight: 600; }

.am-stat {
  display: flex; flex-direction: column; gap: 9px; padding: 6px clamp(14px, 2vw, 28px);
  border-left: 1px solid rgba(20, 23, 43, 0.08);
  opacity: 0; transform: translateY(8px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
  transition-delay: calc(var(--i) * 80ms);
}
.am-stat:first-child { border-left: none; padding-left: 0; }
.am-tile--strip.is-revealed .am-stat { opacity: 1; transform: none; }
.am-stat__num {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.9rem, 3vw, 2.5rem);
  letter-spacing: -0.03em; line-height: 1; color: #14172b; white-space: nowrap;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.am-stat__line { display: block; height: 2px; border-radius: 2px; background: rgba(20, 23, 43, 0.08); overflow: hidden; }
.am-stat__line i {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--accent-soft), var(--accent-deep, #2a3aff));
  transform: scaleX(0); transform-origin: left;
  transition: transform 800ms var(--ease-out); transition-delay: calc(var(--i) * 80ms + 220ms);
}
.am-tile--strip.is-revealed .am-stat__line i { transform: scaleX(1); }
.am-stat__label { font-size: 0.8rem; line-height: 1.4; color: rgba(20, 23, 43, 0.58); }
@media (max-width: 620px) {
  .am-stat { border-left: none; border-top: 1px solid rgba(20, 23, 43, 0.08); padding: 16px clamp(14px, 2vw, 20px); }
  .am-stat:first-child, .am-stat:nth-child(2) { border-top: none; }
  .am-stat:nth-child(odd) { padding-left: 0; }
}

.au-metrics__note {
  max-width: var(--content-max); margin: clamp(24px, 3vw, 36px) auto 0;
  font-size: 0.8rem; color: rgba(20, 23, 43, 0.5); display: flex; align-items: center; gap: 8px;
}
.au-metrics__note-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }

@media (prefers-reduced-motion: reduce) {
  .am-gauge__ring { animation: none; }
  .am-gauge__fill { stroke-dasharray: 405 578; transition: none; }
  .am-cmp__row, .am-stat { opacity: 1; transform: none; transition: none; }
  .am-cmp__track i, .am-stat__line i { transform: scaleX(1); transition: none; }
}

/* ============================================================
   /ai-agents/ — «Что приносят ИИ-агенты» — animated infographic
   board. Three real charts: donut share (Support), cost-depletion
   + speed (HR), conversion lift + RAG accuracy (Sales). Transparent
   section flows between the dark Cases/Process blocks; charts reveal
   via .is-revealed, numbers via the shared count-up.
   ============================================================ */
.ai-metrics {
  position: relative;
  padding: clamp(96px, 12vw, 160px) clamp(20px, 6vw, 80px);
  background: transparent;
  color: #f4f5f8;
}
.ai-metrics__head { max-width: var(--content-max); margin: 0 auto clamp(40px, 5vw, 64px); }
.ai-metrics__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.25rem, 4.6vw, 3.75rem); letter-spacing: -0.045em; line-height: 1.04;
  margin: 16px 0 0; color: #fff; max-width: 18ch;
}
.ai-metrics__lede {
  margin: 16px 0 0; font-size: clamp(0.95rem, 1.1vw, 1.0625rem); line-height: 1.6;
  color: rgba(255, 255, 255, 0.6); max-width: 54ch;
}

.aig {
  max-width: var(--content-max); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch;
}
@media (max-width: 980px) { .aig { grid-template-columns: 1fr; max-width: 560px; } }

/* Shared glass tile */
.aig-tile {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 20px;
  padding: clamp(24px, 2.4vw, 34px);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(91, 108, 255, 0.12), transparent 52%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018));
  border: 1px solid var(--hairline); border-radius: 26px;
  backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow:
    0 30px 60px -34px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 0 70px -28px rgba(91, 108, 255, 0.4);
  opacity: 0; transform: translateY(28px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out),
              box-shadow 400ms var(--ease-out), border-color 400ms var(--ease-out);
}
.aig-tile.is-revealed { opacity: 1; transform: none; }
.aig-tile:hover {
  border-color: rgba(91, 108, 255, 0.34);
  box-shadow:
    0 38px 72px -34px rgba(0, 0, 0, 0.78),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 90px -22px rgba(91, 108, 255, 0.6);
}
.aig-tile__top { display: flex; flex-direction: column; gap: 5px; }
.aig-tile__agent {
  font-family: var(--font-mono, "Geist Mono", monospace); font-size: 0.72rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: #8c98ff;
}
.aig-tile__topic { font-size: clamp(1.05rem, 1.4vw, 1.3rem); font-weight: 500; color: #fff; letter-spacing: -0.01em; }
.aig-tile__foot { margin: auto 0 0; font-size: 0.78rem; line-height: 1.5; color: rgba(255, 255, 255, 0.5); padding-top: 4px; }

/* Tile A — donut share */
.aig-donut { position: relative; width: min(220px, 66%); aspect-ratio: 1; margin: 4px auto; }
/* HiDPI laptops bump the root font, so "закрывает ИИ сам" grows and crowds /
   spills out of the 220px donut hole. Grow the donut there (desktop DPR=1 is
   fine and stays 220px). */
@media (min-resolution: 1.2dppx) and (min-width: 881px) and (max-width: 1600px) {
  .aig-donut { width: min(272px, 84%); }
  /* seo-geo Block 2 headline: the root-font bump inflates the shared 6rem cap
     to 102-108px on small laptops (MacBook Air 1470 = root 18px → 108px), so
     the longest line ("на 5 каналов" / "на 5 каналів" / "en 5 canales") spills
     past the intro panel. Cap in PX — px doesn't scale with the root bump — so
     this display headline stays within the panel on every locale. */
  .page-seo-geo .loss__title { font-size: clamp(3rem, 7.4vw, 90px); }
}
.aig-donut svg { width: 100%; height: 100%; display: block; }
.aig-donut__bg { fill: none; stroke: rgba(255, 255, 255, 0.07); stroke-width: 20; }
.aig-donut__seg { fill: none; stroke-width: 20; }
.aig-donut__seg--ai {
  stroke-dasharray: 352 503; stroke-dashoffset: 352;
  filter: drop-shadow(0 4px 14px rgba(91, 108, 255, 0.3));
  transition: stroke-dashoffset 1200ms var(--ease-out) 250ms;
}
.aig-tile--donut.is-revealed .aig-donut__seg--ai { stroke-dashoffset: 0; }
.aig-donut__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.aig-donut__num {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(2.4rem, 4vw, 3.1rem);
  letter-spacing: -0.04em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums;
}
.aig-donut__sub { font-size: 0.78rem; color: rgba(255, 255, 255, 0.55); }
.aig-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.aig-legend li { display: flex; align-items: center; gap: 9px; font-size: 0.86rem; color: rgba(255, 255, 255, 0.72); }
.aig-legend__dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.aig-legend__dot--ai { background: linear-gradient(135deg, var(--accent-soft), var(--accent-deep, #2a3aff)); }
.aig-legend__dot--human { background: rgba(255, 255, 255, 0.2); }

/* Tile B — cost depletion + speed */
.aig-cost__read { display: flex; flex-direction: column; gap: 4px; }
.aig-cost__big {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(3rem, 5vw, 4rem);
  letter-spacing: -0.04em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums;
}
.aig-cost__cap { font-size: 0.92rem; color: rgba(255, 255, 255, 0.6); }
.aig-cost__bar { position: relative; height: 14px; border-radius: 8px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.aig-cost__fill {
  position: absolute; inset: 0 auto 0 0; width: 16%; min-width: 26px; border-radius: 8px;
  background: linear-gradient(90deg, var(--accent-soft), var(--accent-deep, #2a3aff));
  transform: scaleX(0); transform-origin: left; transition: transform 1100ms var(--ease-out) 350ms;
}
.aig-tile--cost.is-revealed .aig-cost__fill { transform: scaleX(1); }
.aig-cost__scale { display: flex; justify-content: space-between; font-size: 0.74rem; color: rgba(255, 255, 255, 0.45); margin-top: -10px; }
.aig-chips { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; }
.aig-chip {
  flex: 1; display: flex; flex-direction: column; gap: 2px;
  padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--hairline);
}
.aig-chip__num {
  font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; letter-spacing: -0.02em; color: #fff;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Only the direct-child label span is small; the counter span inside
   .aig-chip__num must stay big (the "14"). */
.aig-chip > span { font-size: 0.74rem; color: rgba(255, 255, 255, 0.55); }
/* Unit ("сек"/"sec"/"s") small, sits next to the big counted number. */
.aig-chip__unit { font-size: 0.72rem; font-weight: 600; letter-spacing: 0; color: rgba(255, 255, 255, 0.6); }

/* Tile C — conversion lift + RAG accuracy */
.aig-lift { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); }
.aig-lift__chart { display: flex; align-items: flex-end; gap: 14px; height: 116px; flex: none; }
.aig-lift__col { display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.aig-lift__bar { display: block; width: 42px; border-radius: 8px 8px 0 0; transform: scaleY(0); transform-origin: bottom; }
.aig-lift__col--before .aig-lift__bar { height: 70%; background: rgba(255, 255, 255, 0.14); transition: transform 900ms var(--ease-out) 350ms; }
.aig-lift__col--after .aig-lift__bar {
  height: 90%; background: linear-gradient(180deg, var(--accent-soft), var(--accent-deep, #2a3aff));
  box-shadow: 0 10px 24px -10px rgba(91, 108, 255, 0.5); transition: transform 900ms var(--ease-out) 560ms;
}
.aig-tile--lift.is-revealed .aig-lift__bar { transform: scaleY(1); }
.aig-lift__col em { font-style: normal; font-size: 0.72rem; color: rgba(255, 255, 255, 0.5); }
.aig-lift__read { display: flex; flex-direction: column; gap: 4px; }
.aig-lift__big {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(2.6rem, 4.4vw, 3.6rem);
  letter-spacing: -0.04em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums;
}
.aig-lift__cap { font-size: 0.92rem; color: rgba(255, 255, 255, 0.6); }
.aig-acc { display: flex; flex-direction: column; gap: 9px; }
.aig-acc__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 0.84rem; color: rgba(255, 255, 255, 0.6); }
.aig-acc__head b { font-family: var(--font-display); font-size: 1.05rem; color: #fff; font-variant-numeric: tabular-nums; }
.aig-acc__track { display: block; height: 8px; border-radius: 5px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.aig-acc__track i {
  display: block; height: 100%; width: 99%; border-radius: 5px;
  background: linear-gradient(90deg, var(--accent-soft), var(--accent-deep, #2a3aff));
  transform: scaleX(0); transform-origin: left; transition: transform 1100ms var(--ease-out) 650ms;
}
.aig-tile--lift.is-revealed .aig-acc__track i { transform: scaleX(1); }

.ai-metrics__foot {
  max-width: var(--content-max); margin: clamp(24px, 3vw, 36px) auto 0;
  font-size: 0.8rem; color: rgba(255, 255, 255, 0.5); display: flex; align-items: center; gap: 8px;
}
.ai-metrics__foot-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }

@media (prefers-reduced-motion: reduce) {
  .aig-tile { opacity: 1; transform: none; transition: none; }
  .aig-donut__seg--ai { stroke-dashoffset: 0; transition: none; }
  .aig-cost__fill, .aig-lift__bar, .aig-acc__track i { transform: none; transition: none; }
}



/* ============================================================
   ROI calculator modal — shared shell, per-niche inputs
   ============================================================ */
.roi-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(5, 6, 12, 0.62);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 360ms var(--ease-out), visibility 360ms var(--ease-out);
}
.roi-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.roi-modal__panel {
  position: relative; width: min(720px, 100%); max-height: 90vh; overflow-y: auto;
  background: linear-gradient(160deg, #14172b 0%, #0a0b16 100%);
  border: 1px solid rgba(140, 152, 255, 0.18); border-radius: 24px;
  padding: clamp(24px, 4vw, 40px);
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateY(24px) scale(0.97);
  transition: transform 420ms var(--ease-out);
}
.roi-modal.is-open .roi-modal__panel { transform: none; }
.roi-modal__close {
  position: absolute; top: 16px; right: 16px; width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.04); color: var(--fg-soft); cursor: pointer;
  transition: color 300ms var(--ease-out), background 300ms var(--ease-out), border-color 300ms;
}
.roi-modal__close:hover { color: var(--fg); background: rgba(255, 255, 255, 0.08); border-color: rgba(140, 152, 255, 0.4); }
.roi-modal__head { margin-bottom: 24px; }
.roi-modal__title { margin: 12px 0 8px; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.05; letter-spacing: -0.03em; font-weight: 600; color: var(--fg); }
.roi-modal__lede { margin: 0; font-size: 0.95rem; line-height: 1.5; color: var(--fg-soft); }
.roi-modal__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.roi-modal__inputs { display: flex; flex-direction: column; gap: 22px; }
.roi-field { display: flex; flex-direction: column; gap: 10px; }
.roi-field__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.roi-field__label { font-size: 0.9rem; color: var(--fg-soft); }
.roi-field__val { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 600; color: var(--accent-soft); }
.roi-range { -webkit-appearance: none; appearance: none; width: 100%; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); outline: none; cursor: pointer; }
.roi-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); border: 3px solid #0a0b16; box-shadow: 0 0 0 1px var(--accent), 0 4px 12px -2px var(--accent-glow); cursor: pointer; transition: transform 160ms var(--ease-out); }
.roi-range::-webkit-slider-thumb:hover { transform: scale(1.12); }
.roi-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); border: 3px solid #0a0b16; box-shadow: 0 0 0 1px var(--accent); cursor: pointer; }
.roi-modal__results { display: flex; flex-direction: column; gap: 12px; }
.roi-result { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--hairline); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.roi-result--hero { background: linear-gradient(135deg, rgba(91, 108, 255, 0.18), rgba(91, 108, 255, 0.05)); border-color: rgba(140, 152, 255, 0.4); padding: 20px 22px; }
.roi-result__num { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--fg); line-height: 1; }
.roi-result--hero .roi-result__num { font-size: 2.1rem; color: #fff; }
.roi-result__label { font-size: 0.8rem; color: var(--fg-soft); line-height: 1.3; }
.roi-results__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.roi-modal__cta { width: 100%; justify-content: center; margin-top: 4px; }
.roi-modal__note { margin: 2px 0 0; font-size: 0.72rem; line-height: 1.4; color: rgba(236, 237, 245, 0.4); }
@media (max-width: 680px) {
  .roi-modal { padding: 14px; }
  .roi-modal__grid { grid-template-columns: 1fr; gap: 22px; }
}

/* ============================================================
   Small laptops (881–1280) — deck cards pin nearly full-screen.
   The block head scrolls away (same as phones), but unlike phones
   this width fits the desktop-style two-column card layout, so the
   content never outgrows the pinned card. Every card pins to the
   same near-viewport footprint just below the floating nav.
   Phones (<=880) keep the single-column deck. The 2-column full-screen deck
   applies in three cases: genuinely narrow viewports (901-1024), OR 16:9-laptop
   SCREENS (device-aspect-ratio >= 17/10 AND device-height <= 950 — e.g. a 13-15"
   FHD laptop at any scaling: 1280x720 / 1536x864 / 1366x768), OR very short
   screens (device-height <= 820 — e.g. 16:10 laptops at 1280x800). device-*
   features read the SCREEN, not the window, so browser chrome can't flip the
   mode. MacBooks (ratio 1.54-1.6, screen height 900-1117) never match any
   clause and keep the desktop Z-cascade.
   ============================================================ */
@media (min-width: 901px) and (max-width: 1024px), (min-width: 901px) and (min-device-aspect-ratio: 17/10) and (max-device-height: 950px), (min-width: 901px) and (max-device-height: 820px) {
  .solution-card {
    min-height: calc(100vh - 140px);
  }
  .solution-card:nth-of-type(1) { top: 88px; }
  .solution-card:nth-of-type(2) { top: 96px; }
  .solution-card:nth-of-type(3) { top: 104px; }
  .solution-card:nth-of-type(4) { top: 112px; }
  .solution-card:nth-of-type(5) { top: 120px; }
  .solution-card:nth-of-type(6) { top: 128px; }
  .solution-card__inner {
    grid-template-columns: 1.05fr 1fr;
    gap: 36px;
    padding: 36px 40px;
  }
  .solution-card__visual {
    aspect-ratio: 1;
    max-height: min(52vh, 380px);
  }
  /* Keep the tallest card inside the pin: tighter title, wider lede
     (38ch base wraps into 5-6 lines at the HiDPI font), compact split,
     wider copy column so the split's sub-lists stop over-wrapping. */
  .solution-card__title { font-size: clamp(1.5rem, 2.4vw, 1.75rem); }
  .solution-card__lede { max-width: 54ch; }
  .sg-level-card .solution-card__inner { grid-template-columns: 1.6fr 1fr; }
  .sg-level-card__split { gap: 16px; margin: 18px 0 0; padding: 18px 20px; }
  .sg-level-card__col .solution-card__list li { line-height: 1.45; }
}

/* Web-dev loss title ("Интерактив — инструмент, не украшение") is the longest
   loss heading on the site. The shared .loss__title cap (6rem) makes its
   widest line spill out of the fixed-width intro panel, sliding under the
   adjacent pin-scroll card. Trim the cap so the longest line always fits the
   intro across RU/ES/UK — at every width, including the small +5px desktop
   spill. */
.page-web-development .loss__title {
  font-size: clamp(2.75rem, 7vw, 5.5rem);
  /* Safety net: the title sits in a fixed-width intro panel, and its longest word
     ("interactividad" in ES, "інтерактивність" in UK) can spill under the adjacent
     pin-scroll card when the panel content box is narrow (ultra-wide screens shrink
     it via 4vw padding) or when stale/HiDPI CSS renders the title larger than the
     cap. overflow-wrap:anywhere + lang-aware hyphens:auto make the word wrap instead
     of spilling — at EVERY width/DPR/locale, without changing the font size on any
     screen (when it fits, nothing wraps). */
  overflow-wrap: anywhere;
  hyphens: auto;
  -webkit-hyphens: auto;
}
/* On HiDPI laptops the root-font bump (17-19px) inflates the rem cap (5rem →
   90-95px) at ~1450-1500px, so "interactividad" spills past the 620px intro
   panel under the adjacent pin-scroll card. Pin the cap to a fixed 80px (= 5rem
   at the un-bumped 16px root, which already fit) so the bump can't inflate it.
   Narrower laptops keep 6vw; desktop (DPR 1) keeps the base cap — untouched. */
@media (min-resolution: 1.2dppx) and (min-width: 881px) and (max-width: 1600px) {
  .page-web-development .loss__title { font-size: clamp(2.6rem, 6vw, 80px); }
}

/* ============================================================
   No CTA arrows — every button/CTA used to carry a trailing →/↗ icon
   (an AI-design tell). Hide them site-wide and rebalance the buttons into
   clean symmetric text pills: the icon pill used to set the button height
   and a tight right padding, so we restore symmetric padding (right = left)
   and add vertical padding to keep the original height. Kept: the FAQ
   accordion chevron, process checkmarks, channel logos, the privacy lock,
   and the "swipe sideways" scroll hint — those aren't decorative CTA arrows.
   ============================================================ */
.btn__icon,
.tier__cta-icon,
.solution-card__cta-icon,
.case-card__cta-icon,
.cases__foot-cta-icon,
.pricing__roi-cta-icon,
.nav-mega__arrow,
.cf__submit-icon,
.cf-channel__arrow,
.faq__cta-btn-icon,
.au-case__link > svg,
.au-cases__all > svg { display: none; }

.btn { padding: 14px 26px; justify-content: center; }
.tier__cta { padding: 14px 22px; justify-content: center; }
.solution-card__cta { padding: 13px 22px; justify-content: center; }
.case-card__cta { padding: 12px 22px; justify-content: center; }
.cases__foot-cta { padding: 18px 28px; justify-content: center; }
.pricing__roi-cta { padding: 21px 28px; justify-content: center; }
.cf__submit { padding: 14px 26px; justify-content: center; }
.faq__cta-btn { padding: 12px 22px; justify-content: center; }

/* ── Unified blue (primary) buttons ──────────────────────────────────────
   Every blue 3D button on the site shares ONE look: a glossy top sheen + bevel
   and the bold indigo -> dark-graphite hover. Covers the hero/CTA primary, the
   contact-form submit, the ROI calculator CTA, the FAQ CTA and the featured
   tier CTA. Placed at the very end so it wins source order over each button's
   own filter:brightness / blue-gradient hover defined earlier. */
.cf__submit,
.pricing__roi-cta,
.faq__cta-btn,
.tier__cta--primary,
.solution-card__cta,
.cases__foot-cta,
.au-cases__all {
  position: relative;
  isolation: isolate;
  transition: transform 160ms var(--ease-out), background 320ms var(--ease-out),
    border-color 220ms var(--ease-out), box-shadow 320ms var(--ease-out);
}
/* The "Что мы внедряем" deck CTAs and the "Все кейсы" buttons (homepage
   .cases__foot-cta and the service-page .au-cases__all) start out grey —
   promote them to the same blue 3D button as the rest. */
.solution-card__cta,
.cases__foot-cta,
.au-cases__all {
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--accent) 50%, var(--accent-deep) 100%);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2),
    0 16px 32px -10px rgba(91, 108, 255, 0.55);
}
.cf__submit::before,
.pricing__roi-cta::before,
.faq__cta-btn::before,
.tier__cta--primary::before,
.solution-card__cta::before,
.cases__foot-cta::before,
.au-cases__all::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.35), transparent 60%);
  pointer-events: none;
}
.btn--primary:hover,
.cf__submit:hover,
.pricing__roi-cta:hover,
.faq__cta-btn:hover,
.tier__cta--primary:hover,
.solution-card__cta:hover,
.cases__foot-cta:hover,
.au-cases__all:hover {
  filter: none;
  background: linear-gradient(180deg, #454b63 0%, #2b3046 50%, #181c2e 100%);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 16px 32px -12px rgba(0, 0, 0, 0.55),
    0 2px 6px rgba(0, 0, 0, 0.4);
}

/* ============================================================
   MOBILE / TOUCH — kill card hover effects
   On a touch screen :hover fires on tap and STICKS until you tap
   elsewhere, so every card lift / glow that's meant for a mouse turns
   into a distracting, stuck state on a phone. The transform lifts also
   force layer compositing — wasted GPU on a device we want to keep fast.
   (hover: none) targets devices with no hovering pointer = phones/tablets;
   desktop mice keep everything. The JS pointer effects (tilt, magnetic
   spotlight) already bail out on (hover: none) — this is the CSS half.
   Appended last so it wins source-order over each card's own :hover.
   ============================================================ */
@media (hover: none) {
  /* No lift on any card. */
  .case-card:hover, .tier:hover, .tier--featured:hover, .pricing--sg .tier--featured:hover,
  .term-card:hover, .sg-scenario:hover, .sg-tool-card:hover, .sg-phase__card:hover,
  .sg-kpi:hover, .au-case:hover, .pricing__addon-item:hover { transform: none; }

  /* Restore each card's resting border / shadow / background so a tap produces
     no visible change at all. Values mirror the base rules above. */
  .case-card:hover, .tier:hover, .tier--featured:hover, .pricing--sg .tier--featured:hover {
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 30px 80px -28px rgba(0, 0, 0, 0.7);
  }
  .term-card:hover { background: rgba(255, 255, 255, 0.04); border-color: var(--hairline); }
  .sg-scenario:hover { background: rgba(255, 255, 255, 0.04); }
  .sg-stack-chip:hover { background: rgba(255, 255, 255, 0.05); }
  .sg-tool-card:hover {
    background: linear-gradient(160deg, rgba(91, 108, 255, 0.04), transparent 40%), rgba(255, 255, 255, 0.04);
    border-color: var(--hairline);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
  .sg-tools--light .sg-tool-card:hover {
    background: rgba(20, 23, 43, 0.04);
    border-color: rgba(20, 23, 43, 0.08);
  }
  .sg-phase__card:hover {
    background: linear-gradient(160deg, rgba(91, 108, 255, 0.05), transparent 50%), rgba(255, 255, 255, 0.04);
    border-color: var(--hairline);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 20px 50px -30px rgba(0, 0, 0, 0.5);
  }
  .sg-kpi:hover {
    background: linear-gradient(160deg, rgba(91, 108, 255, 0.04), transparent 45%), rgba(255, 255, 255, 0.035);
    border-color: var(--hairline);
  }
  .sg-mistake:hover {
    background: linear-gradient(160deg, rgba(91, 108, 255, 0.04), transparent 50%), rgba(255, 255, 255, 0.04);
    border-color: var(--hairline);
  }
  .sg-mistakes--light .sg-mistake:hover {
    background: linear-gradient(160deg, rgba(91, 108, 255, 0.05), transparent 50%), rgba(20, 23, 43, 0.04);
    border-color: rgba(20, 23, 43, 0.08);
    box-shadow: 0 1px 2px rgba(20, 30, 80, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  }
  .aig-tile:hover {
    border-color: var(--hairline);
    box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 0 70px -28px rgba(91, 108, 255, 0.4);
  }
  .au-case:hover { border-color: var(--hairline); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
  .why-founder:hover, .why-diff:hover, .why-trust:hover { border-color: transparent; box-shadow: none; }

  /* Pointer-tracked glows that would otherwise freeze at the tap point.
     NOTE: the ::before of .sg-mistake / .sg-tool-card is the big watermark
     NUMBER (content: attr(data-mnum/data-tnum)) — NOT a glint. It must stay
     visible on a phone, so it is handled by gating its hover effect in
     @media (hover: hover) instead of being hidden here. */
  .case-card:hover .case-card__spotlight,
  .sg-mistake:hover .sg-mistake__spotlight,
  .au-case:hover::after { opacity: 0; }
}

/* Interactive chrome should never get text-selected (the "selection box" the
   user sees flash on a tap). Content text stays selectable. */
button, .btn, [role="button"], summary,
.nav-pill__burger, .nav-pill__brand, .nav-links__trigger, .nav-mega__card,
.mobile-menu__link, .mobile-menu__sublink, .mobile-menu__label,
.lang-link, .lang-switch a {
  -webkit-user-select: none;
  user-select: none;
}

/* ===== Compact ROI calculator — integrated into the pricing block =====
   Replaces the bulky standalone .roi-teaser section. Lives inside .pricing,
   right after the tiers; keeps the live slider + gradient number but in a
   short two-column strip aligned to the pricing grid width. JS (initRoiTeaser)
   binds by data-* attributes, so the layout change needs no script changes. */
.pricing__roi {
  position: relative;
  z-index: 2;
  max-width: var(--content-max);
  margin: clamp(1.75rem, 3.2vw, 2.75rem) auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.9fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: stretch;
  padding: clamp(1.4rem, 2.4vw, 2rem) clamp(1.5rem, 3vw, 2.25rem);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
}
.pricing__roi-input { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.pricing__roi-input .roi-field { display: block; }
.pricing__roi-assume { font-size: 0.78rem; line-height: 1.5; color: var(--fg-soft); opacity: 0.7; margin: 0.7rem 0 0; }
.pricing__roi-output {
  display: flex; flex-direction: column; justify-content: center; gap: 0.9rem;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  padding-left: clamp(1.5rem, 3vw, 2.5rem);
}
.pricing__roi-result { display: flex; flex-direction: column; gap: 0.15rem; }
.pricing__roi-num {
  font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 800; line-height: 1; white-space: nowrap;
  background: linear-gradient(180deg, #fff, var(--accent-soft));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.pricing__roi-unit { font-size: 0.85rem; color: var(--fg-soft); }
.pricing__roi-cta { width: 100%; justify-content: center; }
@media (max-width: 860px) {
  .pricing__roi { grid-template-columns: 1fr; gap: 1.25rem; padding: 1.4rem 1.4rem; }
  .pricing__roi-output {
    border-left: 0; padding-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 1.25rem;
    text-align: center;
  }
  .pricing__roi-result { align-items: center; }
}

/* ===== ROI tariff chips (ТЗ 3.1) ===== */
.roi-tariff { margin-top: 1.25rem; }
.roi-tariff__label { display: block; font-size: 0.9rem; color: var(--fg-soft); margin-bottom: 0.5rem; }
.roi-tariff__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.roi-chip {
  flex: 1 1 auto; min-width: 0; cursor: pointer; white-space: nowrap;
  padding: 8px 12px; border-radius: 999px; font-size: 0.85rem; font-weight: 600;
  background: rgba(255, 255, 255, 0.04); color: var(--fg-soft);
  border: 1px solid rgba(255, 255, 255, 0.12); transition: background 160ms var(--ease-out), border-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.roi-chip:hover { border-color: var(--accent-soft); color: #fff; }
.roi-chip.is-active { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 4px 12px -2px var(--accent-glow); }

/* ===== ROI funnel steps (ТЗ 3.2-3.4) ===== */
.roi-progress { display: flex; gap: 8px; justify-content: center; margin: 0 0 1.25rem; }
.roi-progress__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); transition: background 200ms var(--ease-out); }
.roi-progress__dot.is-active { background: var(--accent); }
.roi-summary { font-size: 0.9rem; color: var(--accent-soft); font-weight: 600; margin: 0 0 1rem; }
.roi-step__title { font-size: clamp(1.25rem, 2.5vw, 1.6rem); font-weight: 800; margin: 0 0 0.5rem; color: #fff; }
.roi-step__sub { font-size: 0.9rem; color: var(--fg-soft); margin: 0 0 1.25rem; line-height: 1.55; }
.roi-step__micro { font-size: 0.8rem; color: var(--fg-soft); opacity: 0.7; margin: 0.6rem 0 0; text-align: center; }
.roi-step__fallback { font-size: 0.85rem; color: var(--fg-soft); margin: 1rem 0 0.6rem; text-align: center; }
.roi-q { margin-bottom: 1.1rem; }
.roi-q__label { font-size: 0.85rem; color: var(--fg-soft); margin: 0 0 0.5rem; }
.roi-q__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.roi-q__field { display: block; margin-top: 1rem; }
.roi-q__field span { display: block; font-size: 0.85rem; color: var(--fg-soft); margin-bottom: 0.4rem; }
.roi-q__hint { font-size: 0.82rem; color: #ff9b9b; margin: 0.75rem 0 0; }
.roi-input { width: 100%; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); color: #fff; font-size: 0.95rem; font-family: inherit; }
.roi-input::placeholder { color: rgba(255, 255, 255, 0.4); }
.roi-input:focus { outline: none; border-color: var(--accent); }
.roi-form { display: flex; flex-direction: column; gap: 12px; }
.roi-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.roi-error { font-size: 0.82rem; color: #ff9b9b; margin: 0; }
.roi-step__nav { display: flex; gap: 10px; margin-top: 1.25rem; }
.roi-step__nav .btn { flex: 1 1 auto; justify-content: center; }
.roi-next { display: flex; flex-direction: column; gap: 10px; margin: 1.25rem 0; }
.roi-next__btn { justify-content: center; }
.roi-next__email { font-size: 0.82rem; color: var(--fg-soft); text-align: center; margin: 0.25rem 0 0; }
.roi-next__close { width: 100%; justify-content: center; }

/* ===== Шаг-мессенджер после формы #contact (ТЗ 4.2) ===== */
.cf-next { display: flex; flex-direction: column; }
.cf-next__title { font-size: clamp(1.2rem, 2.4vw, 1.6rem); font-weight: 700; color: #fff; margin: 0 0 0.25rem; line-height: 1.25; }
.cf-next__fallback { font-size: 0.85rem; color: var(--fg-soft); margin: 0.5rem 0 0; line-height: 1.5; }

/* ===== ROI retention layer (ТЗ 3.5) ===== */
.roi-ret-card { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(140, 152, 255, 0.18); border-radius: 16px; padding: 1.25rem; margin: 1rem 0 1.25rem; }
.roi-ret-card__title { font-weight: 700; color: #fff; margin: 0 0 0.75rem; }
.roi-ret-card__kpis { display: flex; gap: 1.5rem; margin-bottom: 0.75rem; }
.roi-ret-kpi { display: flex; flex-direction: column; }
.roi-ret-kpi__v { font-size: 1.5rem; font-weight: 800; color: var(--accent-soft); line-height: 1.1; }
.roi-ret-kpi__l { font-size: 0.78rem; color: var(--fg-soft); }
.roi-ret-card__line { font-size: 0.9rem; color: var(--fg-soft); margin: 0; line-height: 1.5; }
.roi-ret__back { width: 100%; justify-content: center; }
.roi-ret__full { display: block; text-align: center; font-size: 0.85rem; color: var(--accent-soft); margin: 0.85rem 0; text-decoration: underline; text-underline-offset: 2px; }
.roi-ret__close { width: 100%; justify-content: center; }

/* ===== No-JS / failed-JS fallback =====
   Reveal-анимированные элементы спрятаны (opacity:0) и показываются, когда JS
   добавляет класс .js на <html> (в consent.js, синхронно в <head>, до отрисовки).
   Если JS не выполнился (часть краулеров, reader-mode, сбой загрузки) — показываем
   контент, чтобы страница и SEO не были пустыми. JS-посетителей НЕ затрагивает:
   эти правила матчат только html:not(.js). */
html:not(.js) [data-reveal],
html:not(.js) [data-reveal-card],
html:not(.js) .case-card,
html:not(.js) .stage,
html:not(.js) .why-card,
html:not(.js) .tier,
html:not(.js) .faq-item,
html:not(.js) .cf,
html:not(.js) .contact-side,
html:not(.js) .sg-phase-row,
html:not(.js) .sg-kpi,
html:not(.js) .am-tile,
html:not(.js) .aig-tile,
html:not(.js) .wd-perfseo-col,
html:not(.js) .wd-mistake {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
}