/* ============================================================
   roi.css — styles for the shared case-pages ROI modal (roi.js).
   Copied from style.css: design tokens (scoped to .roi-modal so the
   imported page layout is untouched) + the .roi-* block + the global
   .btn/.eyebrow/.title-mark rules the modal/funnel use. Generated by
   c:/tmp/assemble-roi.mjs — do not hand-edit.
   ============================================================ */

/* design tokens, scoped so they don't leak onto the imported page */
.roi-modal {
  /* 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;
}

/* global components used inside the modal/funnel */
/* ---- 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;
}
.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);
}
@media (hover:hover){.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);
}
@media (hover:hover){.btn:hover .btn__icon {
  transform: translate(2px, -1px) scale(1.06);
}}
.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);
}
.faq__head .eyebrow { margin: 0 auto; }
.contact__head .eyebrow { margin: 0 auto; }
/* ---------- 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));
}
/* 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 */ }
/* ============================================================
   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-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__head .eyebrow { justify-content: center; }
.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-cycle__head .eyebrow { align-self: flex-start; }
.sg-deliverables__head .eyebrow { align-self: flex-start; }
.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); }
/* ============================================================
   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; }
@media (hover:hover){.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);
}}
/* 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;
}
.roi-step__nav .btn { flex: 1 1 auto; justify-content: center; }

/* the ROI modal + funnel + retention */
.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;
}
@media (hover:hover){.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); }
@media (hover:hover){.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;
}
@media (hover:hover){.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. */
  @media (hover:hover){.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. */
  @media (hover:hover){.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);
  }}
  @media (hover:hover){.term-card:hover { background: rgba(255, 255, 255, 0.04); border-color: var(--hairline); }}
  @media (hover:hover){.sg-scenario:hover { background: rgba(255, 255, 255, 0.04); }}
  @media (hover:hover){.sg-stack-chip:hover { background: rgba(255, 255, 255, 0.05); }}
  @media (hover:hover){.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);
  }}
  @media (hover:hover){.sg-tools--light .sg-tool-card:hover {
    background: rgba(20, 23, 43, 0.04);
    border-color: rgba(20, 23, 43, 0.08);
  }}
  @media (hover:hover){.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);
  }}
  @media (hover:hover){.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);
  }}
  @media (hover:hover){.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);
  }}
  @media (hover:hover){.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);
  }}
  @media (hover:hover){.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);
  }}
  @media (hover:hover){.au-case:hover { border-color: var(--hairline); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }}
  @media (hover:hover){.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. */
  @media (hover:hover){.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);
}
@media (hover:hover){.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; }