/* ============================================================
   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;
  background: linear-gradient(180deg, #ffffff 0%, #c4c8e6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.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;
  filter: drop-shadow(0 8px 24px rgba(91, 108, 255, 0.35));
}
.hero__rotator-cursor {
  position: absolute;
  right: -10px;
  top: 8%;
  bottom: 12%;
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
  animation: blink 1.05s steps(1) infinite;
}
@keyframes blink {
  50% { opacity: 0; }
}

/* ---- 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;
  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: space-between;
  gap: 16px;
  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;
}
.loss-card__solution {
  margin: 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(91, 108, 255, 0.08), rgba(91, 108, 255, 0.03));
  border: 1px solid rgba(91, 108, 255, 0.16);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--fg-light);
  position: relative;
}
.loss-card__solution-mark {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  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);
  transition: background 280ms var(--ease-out), transform 320ms var(--ease-out), width 320ms var(--ease-out);
}
.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;
  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);
}
.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;
  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;
  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); }
/* On HiDPI laptops the root-font bump (17-19px) inflates the rem cap again,
   so the intro panel (still 620px) overflows by up to 44px. Apply an even
   tighter cap across the whole laptop range (matches the deck media list). */
@media (min-resolution: 1.2dppx) and (min-width: 881px) and (max-width: 1600px) {
  .page-web-development .loss__title { font-size: clamp(2.6rem, 6vw, 5rem); }
}

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