*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* ═══ Figma palette (design file) ═══ */
  --color-text: #fefefe;
  --color-primary: #9370db;
  --color-accent: #ffd803;
  --color-bg: #0d0d0d;
  --color-btn-txt: #1b1e2f;
  --color-bubles: #2c0052;
  --color-vector-lines: #ede5ff4d;
  --color-card-bg: #9370db80;
  --color-decorative: #2c0052;

  /* Component semantics (alias tokens — use in styles below) */
  --text: var(--color-text);
  --text-muted: rgba(254, 254, 254, 0.62);
  --bg: var(--color-bg);
  --yellow: var(--color-accent);
  --yellow-dark: #c9ae00;
  --purple-light: rgba(147, 112, 219, 0.34);
  --purple-mid: var(--color-primary);
  --card-border: rgba(147, 112, 219, 0.45);
  --btn-on-accent: var(--color-btn-txt);
  --surface-raised: rgba(27, 30, 47, 0.92);
  --border-subtle: rgba(254, 254, 254, 0.08);
  --radius: 24px;

  /* Typography (Figma) — families via style/fonts.css */
  --font-sans: "Noto Sans", system-ui, sans-serif;
  --font-accent: "Tektur", var(--font-sans);
  --fs-heading-desktop: 25px;
  --fs-heading-mobile: 20px;
  --fs-hero-title: 24px;
  --fs-heading: 24px;
  --fs-body: 18px;
  --fs-text: 18px;
  --fs-accent: 20px;
  --fs-nav: 16px;
  --fs-small: 14px;
  --fs-caption: 12px;

  /* Shared entrance motion (hero + `.scroll-reveal`) — DRY timing */
  --motion-enter-duration: 0.88s;
  --motion-enter-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Match `translate3d` Y in `@keyframes fadeInMoveUp` — change both if you tweak the lift */
  --motion-enter-y: 22px;

  /* Shared yellow-bordered glass (#hero `.hero-card` + `#consultations` `.consult-panel` + `#cases` `.cases-stat`) */
  --glass-framed-fill: rgba(75, 48, 120, 0.46);
  --glass-framed-blur: 5px;

  --color-mentor-purple: #8b66e5;
  /* Contacts (#contacts) body copy on purple rails */
  --color-contacts-text: #4a148c;
  --color-consult-card: #4b3078;
  /* Default gutters; `(300px <= width <= 499px)` tighter; `(500px <= width < 768px)` wider max; `768px <= width` in MEDIA */
  --page-shell-pad-x: clamp(22px, 6.4vw, 32px);
  /* Fallback until `syncAnchorScrollInsetFromHeader()` runs (`header.bottom + 20` in JS; keep parity-ish). */
  --anchor-scroll-offset: calc(104px + env(safe-area-inset-top, 0px));
}

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  scroll-padding-top: var(--anchor-scroll-offset);
  overflow-x: clip;
  max-width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.5;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: clip;
}

.page-shell {
  width: 100%;
  max-width: min(720px, 100%);
  margin-inline: auto;
  padding-inline: max(var(--page-shell-pad-x), env(safe-area-inset-left, 0px))
    max(var(--page-shell-pad-x), env(safe-area-inset-right, 0px));
  box-sizing: border-box;
}

/* ───────────────────────────────────────────────────────────────
 * LAYOUT (product)
 *
 * Sections stack vertically (#hero → #mentor → #consultations → #pair-promo → #cases → #contacts …). No diagonal
 * split or side-by-side hero/mentor until design signs off — same column idea as narrow
 * artboard, stretched on wide screens.
 *
 * Planned nav: `.nav-link` hrefs anchor to `#hero`, `#mentor`, `#consultations`, etc., with scroll-margin
 * for the sticky header (add per-section when wiring real links beyond hash #1…#n).
 *
 * `.page-shell` defaults to ~720px so content stays readable. Hero can widen alone on XL
 * viewports via `.hero > .page-shell` in the MEDIA appendix (mentor/other sections unchanged).
 *
 * Horizontal inset: `:root --page-shell-pad-x` is wider under 768px; from 768px+ see MEDIA —
 * narrower rail so spaced layouts (consultation cards grid) reclaim side margin visually.
 *
 * Mentor `#mentor`: BASE = tighter top padding + two-line `.mentor-name` (mobile mock). From
 * 600px+ see MEDIA — roomier padding + one-line `.mentor-name`. Headings/chips/bot use
 * `.scroll-reveal` + `initScrollReveal()` — same `fadeInMoveUp` + `--motion-enter-*` as hero.
 *
 * Breakpoints use MQ range syntax near the MEDIA appendix (`width < 768px`, `768px <= width`, …).
 * ─────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════
   BASE (narrow / mobile first — layout & hero column)
   ═══════════════════════════════════════════════════════════ */

/* ─── SITE HEADER & NAV ─── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: calc(10px + env(safe-area-inset-top, 0px))
    max(var(--page-shell-pad-x), env(safe-area-inset-right, 0px))
    10px max(var(--page-shell-pad-x), env(safe-area-inset-left, 0px));
  box-sizing: border-box;
  min-height: 52px;
  contain: layout;
  background: var(--surface-raised);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-subtle);
}

/* Typographic logo only — subtle, not “marketing hero” sizing */
.site-logotype {
  flex: 0 1 auto;
  width: max-content;
  max-width: min(100%, 16rem);
  min-width: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-accent);
  letter-spacing: -0.02em;
  text-transform: lowercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
  text-decoration: none;
}

.site-logotype:focus-visible {
  outline: 2px solid var(--purple-mid);
  outline-offset: 3px;
}

.site-nav-desktop {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  flex: 1 1 auto;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.site-nav-desktop .nav-link {
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: var(--fs-nav);
  font-weight: 300;
  color: var(--text-muted);
  padding: 7px 16px;
  border-radius: 40px;
  transition:
    background 0.2s,
    color 0.2s;
}

.site-nav-desktop .nav-link.active {
  background: var(--yellow);
  color: var(--btn-on-accent);
}

.site-nav-desktop .nav-link:hover:not(.active) {
  background: var(--purple-light);
  color: var(--text);
}

/* Mobile menu control — same chroma + press affordance as `.btn.btn--accent` (smaller fixed hit target) */
.nav-toggle {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: var(--yellow);
  color: var(--btn-on-accent);
  cursor: pointer;
  box-shadow: 1px 2px 2.5px rgba(0, 0, 0, 0.25);
  transform-origin: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  backface-visibility: hidden;
  transform: translateZ(0);

  transition:
    transform 0.14s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.14s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.14s ease;
}

.nav-toggle:hover {
  transform: scale(1.01) translateZ(0);
  box-shadow: 2px 3px 4.5px rgba(0, 0, 0, 0.25);
}

.nav-toggle:active {
  transform: scale(0.99) translateZ(0);
  box-shadow: inset 1px 2px 2.5px rgba(0, 0, 0, 0.25);
}

html.mobile-nav-open .nav-toggle {
  background: var(--yellow);
  box-shadow: 2px 3px 4.5px rgba(0, 0, 0, 0.25);
}

html.mobile-nav-open .nav-toggle:hover {
  transform: scale(1.01) translateZ(0);
  box-shadow: 2px 3px 4.5px rgba(0, 0, 0, 0.25);
}

html.mobile-nav-open .nav-toggle:active {
  transform: scale(0.99) translateZ(0);
  box-shadow: inset 1px 2px 2.5px rgba(0, 0, 0, 0.25);
}

.nav-toggle:focus-visible {
  outline: 2px solid var(--card-border);
  outline-offset: 2px;
}

.nav-toggle-lines {
  position: relative;
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition:
    background 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-toggle-lines::before,
.nav-toggle-lines::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition:
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    top 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-toggle-lines::before {
  top: -7px;
  transform: none;
}

.nav-toggle-lines::after {
  top: 7px;
  transform: none;
}

html.mobile-nav-open .nav-toggle-lines {
  background: transparent;
}

html.mobile-nav-open .nav-toggle-lines::before {
  top: 0;
  transform: rotate(45deg);
}

html.mobile-nav-open .nav-toggle-lines::after {
  top: 0;
  transform: rotate(-45deg);
}

/* --- Mobile drawer + backdrop --- */
.mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 108;
  background: rgba(17, 17, 17, 0.4);
  backdrop-filter: blur(6px) saturate(0.92);
  -webkit-backdrop-filter: blur(6px) saturate(0.92);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.34s;
}

.mobile-nav-sheet {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(298px, 88vw);
  z-index: 111;
  max-height: 100vh;
  max-height: 100dvh;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  overflow-y: auto;
  background: var(--surface-raised);
  backdrop-filter: blur(16px) saturate(1.05);
  -webkit-backdrop-filter: blur(16px) saturate(1.05);
  border-right: 1px solid var(--card-border);
  box-shadow: 12px 0 48px rgba(44, 0, 82, 0.35);
  transform: translate3d(-100%, 0, 0);
  visibility: hidden;
  transition:
    transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.38s;
}

html.mobile-nav-open .mobile-nav-backdrop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

html.mobile-nav-open .mobile-nav-sheet {
  transform: translate3d(0, 0, 0);
  visibility: visible;
}

html.mobile-nav-open {
  overflow: hidden;
}

.mobile-nav-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 18px 10px;
  border-bottom: 1px solid var(--border-subtle);
}

.mobile-nav-sheet-title {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-nav);
  color: var(--text);
}

.nav-drawer-close {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 12px;
  background: var(--purple-light);
  color: var(--text);
  cursor: pointer;
  transition: background 0.2s;
}

.nav-drawer-close:hover {
  background: var(--purple-mid);
}

.nav-drawer-close:focus-visible {
  outline: 2px solid var(--card-border);
  outline-offset: 2px;
}

.nav-drawer-close-icon {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
}

.nav-drawer-close-icon::before,
.nav-drawer-close-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}

.nav-drawer-close-icon::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.nav-drawer-close-icon::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.mobile-nav-sheet-nav {
  display: flex;
  flex-direction: column;
  padding: 12px;
  gap: 4px;
}

.mobile-nav-sheet-link {
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-nav);
  color: var(--text-muted);
  padding: 14px 14px;
  border-radius: 14px;
  transition:
    background 0.18s,
    color 0.18s;
}

.mobile-nav-sheet-link:focus-visible {
  outline: 2px solid var(--card-border);
  outline-offset: 0;
}

.mobile-nav-sheet-link:hover:not(.active) {
  background: var(--purple-light);
  color: var(--text);
}

.mobile-nav-sheet-link.active {
  background: var(--yellow);
  color: var(--btn-on-accent);
}

/* ─── HERO (#hero, section 1) — single column; scales by max-width / type, not transform ─── */
.hero {
  padding: 44px 0 40px;
  width: 100%;
  min-width: 0;
  overflow-x: clip;
  background: var(--bg);
}

.hero-card-wrap {
  position: relative;
  isolation: isolate;
  padding-bottom: 52px;
}

/*
 * `.accent-stage` — relative “stage” for satellite elements (badges, floats) + inner framed
 * surface; reusable beyond the hero column.
 */
.accent-stage {
  position: relative;
  z-index: 1;
  isolation: isolate;
  width: 100%;
  min-width: 0;
  max-width: min(400px, 90vw);
  margin-inline: auto;
  transform-origin: 50% 60%;
  animation: fadeInMoveUp var(--motion-enter-duration) var(--motion-enter-ease)
    both;
}

/* Yellow frame — shared glass surface hero + consultations + cases stats */
.hero-card,
.consult-panel,
.cases-stat {
  border: 2px solid var(--yellow);
  border-radius: 24px;
  background: var(--glass-framed-fill);
  backdrop-filter: blur(var(--glass-framed-blur));
  -webkit-backdrop-filter: blur(var(--glass-framed-blur));
  /* Soft outer depth only — strong top inset reads as a “stripe” atop frosted backdrop */
  box-shadow: 0 8px 36px rgba(40, 0, 70, 0.35);
}

/* ─── GLASS CARD — hero layout chrome (fills match `.consult-panel`) ─── */
.hero-card {
  max-width: 100%;
  width: 100%;
  padding: 22px 22px 24px;
  position: relative;
  z-index: 4;
  pointer-events: none;
  overflow: visible;
}

/* Text + button stay interactive above the semi-transparent overlay */
.hero-card > * {
  pointer-events: auto;
}

@keyframes fadeInMoveUp {
  from {
    opacity: 0;
    transform: translate3d(0, var(--motion-enter-y), 0);
  }
  to {
    opacity: 1;
    /* `none` avoids a persistent compositing transform on ancestors — reduces Chromium
       backdrop-filter “gray flash” flicker during scroll vs `translate3d(0, 0, 0)`. */
    transform: none;
  }
}

/* Cases stat tiles — fixed-pixel lift (no vw-based vars in keyframes). Resizing the window
   recomputes viewport-relative custom props; restarting `fadeInMoveUp` otherwise jumps to
   opacity: 0 mid-frame while backdrop-filter composites, which reads as empty purple bands. */
@keyframes fadeInMoveUpCasesStat {
  from {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Badge intro: opacity only so :hover / :active can own transform (no animation fill conflict) */
@keyframes badgeFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.hero-card-wrap .bubble {
  z-index: 0;
}

.accent-stage .social-badge {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bubles);
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

/* All below .hero-card (z-index 4); order fixes overlap hit-testing IG > FB > Meta */
.accent-stage .social-badge.badge-meta {
  z-index: 1;
  animation-delay: 0.16s;
}

.accent-stage .social-badge.badge-fb {
  z-index: 2;
  animation-delay: 0.36s;
}

.accent-stage .social-badge.badge-ig {
  z-index: 3;
  animation-delay: 0.26s;
}

.social-badge:focus-visible {
  outline: 2px solid var(--card-border);
  outline-offset: 3px;
}

.social-badge:focus:not(:focus-visible) {
  outline: none;
}

/* Social badge sizes/offsets: MEDIA appendix */

.accent-stage .social-badge.badge-meta,
.accent-stage .social-badge.badge-ig,
.accent-stage .social-badge.badge-fb {
  opacity: 0;
  animation: badgeFadeIn 0.52s var(--motion-enter-ease) forwards;
}

.accent-stage .social-badge:hover:not(:active) {
  transform: translateY(-3px) scale(1.03);
}

.accent-stage .social-badge:active {
  transform: translateY(1px) scale(0.96);
}

.social-badge-icon {
  display: block;
  width: auto;
  height: auto;
  max-height: 55%;
  max-width: 70%;
  object-fit: contain;
}

.social-badge-icon--meta {
  max-height: 58%;
  max-width: 62%;
}

.social-badge-icon--ig {
  max-height: 46%;
  max-width: 60%;
}

.social-badge-icon--fb {
  max-height: 62%;
  max-width: 50%;
}

/* decoration bubbles */
.bubble {
  position: absolute;
  border-radius: 50%;
  background: var(--color-bubles);
  pointer-events: none;
}
.bubble-2 {
  width: 44px;
  height: 44px;
  bottom: 80px;
  left: -22px;
  opacity: 0.35;
}

.hero-card h1 {
  overflow-wrap: break-word;
  font-family: var(--font-sans);
  font-size: var(--fs-hero-title);
  font-weight: 400;
  line-height: 1.2;
  color: var(--text);
  margin: 0 0 14px;
}

.hero-card p {
  font-size: var(--fs-small);
  font-weight: 300;
  line-height: 1.65;
  color: var(--text-muted);
  margin-bottom: 22px;
  max-width: 340px;
}

/* ─── MENTOR (section 2) ───
   Narrow viewports: tighter section top padding (~−30% vs tablet+). From 600px+ see MEDIA. */
.mentor {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  overflow-y: clip;
  padding-top: clamp(28px, 7vw, 40px);
  padding-bottom: 36px;
  margin: 0;
  background: var(--color-mentor-purple);
  color: var(--color-btn-txt);
}

/* Full-bleed wireframe/line art under section content — reuse on any `position: relative` block */
.bg-deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.3;
  overflow: hidden;
}

.bg-deco img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.mentor-inner {
  position: relative;
  z-index: 1;
  padding-bottom: clamp(172px, 46vw, 264px);
}

.section-header {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-heading);
  line-height: 1.18;
  color: var(--yellow);
  margin: 0 0 8px;
}

.mentor-heading-line {
  display: block;
  width: min(296px, 96%);
  height: auto;
  margin: 0 0 clamp(22px, 6vw, 32px);
}

.mentor-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 3.5vw, 16px);
  box-sizing: border-box;
  /* Stair step grows with viewport; proportional on ~360–600px phones */
  --mentor-stair: clamp(24px, 9vw, 68px);
}

/*
 * Staircase: shared right edge inside `.mentor-facts` (after band inset); each step indents left.
 */
.mentor-chip {
  position: relative;
  --chip-r: 16px;
  box-sizing: border-box;
  border-radius: var(--chip-r);
  padding: 15px 16px;
  background: transparent;
}

.mentor-chip--s0 {
  margin-left: 0;
  width: 100%;
}

.mentor-chip--s1 {
  margin-left: var(--mentor-stair);
  width: calc(100% - var(--mentor-stair));
}

.mentor-chip--s2 {
  margin-left: calc(2 * var(--mentor-stair));
  width: calc(100% - 2 * var(--mentor-stair));
}

.mentor-chip-text {
  font-family: var(--font-sans);
  font-size: var(--fs-text);
  font-weight: 500;
  line-height: 1.45;
  color: var(--color-btn-txt);
  display: block;
  text-align: left;
}

/* Corner brackets: TL + BR L-shape; TR and BL stay open — strokes sit closer to corners */
.mentor-chip-br {
  position: absolute;
  pointer-events: none;
  border-style: solid;
  border-width: 0;
  border-color: rgba(255, 254, 255, 0.58);
}

.mentor-chip-br--tl {
  top: 0;
  left: 0;
  width: calc(99% - 5px);
  height: calc(99% - 10px);
  border-top-width: 1.5px;
  border-left-width: 1.5px;
  border-top-left-radius: calc(var(--chip-r) - 3px);
}

.mentor-chip-br--br {
  right: 0;
  bottom: 0;
  width: calc(99% - 5px);
  height: calc(99% - 10px);
  border-right-width: 1.5px;
  border-bottom-width: 1.5px;
  border-bottom-right-radius: calc(var(--chip-r) - 3px);
}

.mentor-bot {
  position: absolute;
  z-index: 2;
  left: 0;
  right: auto;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: clamp(12px, 4vw, 22px);
  pointer-events: none;
}

/*
 * Mentor name: mobile-first = stacked two lines (artboard); ≥600px → one line row (MEDIA).
 */
.mentor-name {
  pointer-events: auto;
  margin: 0 0 clamp(48px, 67px, 84px);
  max-width: 12em;
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.12;
  color: #291c44;
  font-size: clamp(21px, 5.2vw, 24px);
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  white-space: normal;
}

.mentor-name-line {
  display: block;
}

/*
 * Scroll-triggered entrance — `fadeInMoveUp` + `:root` motion tokens (any `.scroll-reveal`).
 * Mentor photo row: HTML preload + shared `decode()` started on DOMContentLoaded (`main.js`) so
 * on tall screens the row doesn’t lag behind heading/chips waiting for the bitmap.
 */
.scroll-reveal.scroll-reveal--pending {
  opacity: 0;
  transform: translate3d(0, var(--motion-enter-y), 0);
}

.scroll-reveal.scroll-reveal--animate-in {
  animation: fadeInMoveUp var(--motion-enter-duration) var(--motion-enter-ease)
    both;
}

/* Case stat tiles: same scroll-reveal flow as siblings; dedicated IO uses looser viewport.
   Fixed keyframes avoid resize restarts blowing opacity to 0 with backdrop-filter layers. */
.cases-stat.scroll-reveal.scroll-reveal--pending {
  transform: translate3d(0, 26px, 0);
}

.cases-stat.scroll-reveal.scroll-reveal--animate-in {
  animation: fadeInMoveUpCasesStat var(--motion-enter-duration)
    var(--motion-enter-ease) both;
}

.mentor-photo-wrap {
  flex-shrink: 0;
  pointer-events: auto;
  width: clamp(128px, 53vw, 300px);
  height: clamp(210px, 56vw, 330px);
  overflow: hidden;
}

.mentor-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
}

/* ─── PAIR PROMO (#pair-promo): two mentor-style purple panes; `.bg-deco` placement modifiers + 2×2 tiles ─── */
.pair-promo {
  margin: 0;
  padding: 0;
}

.pair-promo-grid {
  display: flex;
  flex-direction: column;
}

.pair-pane {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  background: var(--color-mentor-purple);
  margin: 0;
  padding: clamp(28px, 7vw, 44px) 0 34px;
}

.pair-pane__inner {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  max-width: min(560px, 100%);
  margin-inline: auto;
  padding-inline: max(var(--page-shell-pad-x), env(safe-area-inset-left, 0px))
    max(var(--page-shell-pad-x), env(safe-area-inset-right, 0px));
}

.bg-deco--show-tr img {
  transform: scale(1.8) rotate(245deg);
  transform-origin: 37% 54%;
  object-fit: contain;
}

.bg-deco--show-bl img {
  transform: scale(1.8) rotate(240deg);
  transform-origin: 68% 56%;
  object-fit: contain;
}

/* `WireframeR1.svg`: bias toward center-right ellipse (contacts section) */
.bg-deco--wire-r1 img {
  object-fit: contain;
  object-position: 58% 50%;
  transform: scale(2.05);
  transform-origin: 52% 48%;
}


.pair-pane__lede {
  font-family: var(--font-sans);
  font-size: var(--fs-text);
  font-weight: 500;
  line-height: 1.45;
  color: #291c44;
  margin: 0 0 clamp(18px, 5vw, 26px);
  max-width: 38em;
}

.pair-pane__ribbon {
  font-family: var(--font-sans);
  font-size: var(--fs-text);
  font-weight: 400;
  line-height: 1.35;
  color: #291c44;
  margin: 0 0 clamp(10px, 2.8vw, 14px);
}

.pair-tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(15px, 5.5vw, 30px);
}

/*
 * Chips reuse `.mentor-chip` brackets; staircase modifiers unused.
 * `aspect-ratio: 1 / 1` keeps tiles visually square-ish (column width sets the box height).
 */
.mentor-chip--tile {
  width: 100%;
  align-self: stretch;
  aspect-ratio: 1 / 1;
  min-height: 0;
}

.pair-tile__body {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 2vw, 10px);
  min-width: 0;
  min-height: 0;
  flex: 1;
}

.pair-tile__title {
  font-family: var(--font-sans);
  font-size: var(--fs-text);
  font-weight: 400;
  line-height: 1.35;
  color: var(--color-btn-txt);
  margin: 0;
}

.pair-tile__desc {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 400;
  line-height: 1.45;
  color: var(--color-btn-txt);
  margin: 0;
}

.pair-tile__list {
  margin: 0;
  padding: 0 0 0 1.05em;
  list-style: disc outside;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 400;
  line-height: 1.42;
  color: var(--color-btn-txt);
}

.pair-pane__cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(22px, 6vw, 32px);
}

/* ─── CONTACTS (#contacts): single pane; reused tokens + `.pair-pane__inner` geometry ─── */
.contacts {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  margin: 0;
  padding: clamp(28px, 7vw, 44px) 0 40px;
  /* Same purple as `#pair-promo` / `.pair-pane` so no visible seam vs boost/ads strip */
  background: var(--color-mentor-purple);
}

.contacts__inner {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  max-width: min(560px, 100%);
  margin-inline: auto;
  padding-inline: max(var(--page-shell-pad-x), env(safe-area-inset-left, 0px))
    max(var(--page-shell-pad-x), env(safe-area-inset-right, 0px));
}

.contacts__channels {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(12px, 3vw, 16px);
  margin-bottom: clamp(28px, 8vw, 44px);
  max-width: 26rem;
}

.contacts__row.contacts__link {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(10px, 2.8vw, 14px);
  font-family: var(--font-sans);
  font-size: var(--fs-text);
  font-weight: 400;
  line-height: 1.35;
  color: var(--color-contacts-text);
  text-decoration: none;
  transition:
    opacity 0.15s ease,
    color 0.15s ease;
}

.contacts__row.contacts__link:hover {
  opacity: 0.9;
}

.contacts__row.contacts__link:hover .contacts__text {
  text-decoration: underline;
}

.contacts__row.contacts__link:focus-visible {
  outline: 2px solid rgba(254, 254, 254, 0.85);
  outline-offset: 3px;
  border-radius: 4px;
}

.contacts__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
}

.contacts__icon img {
  display: block;
  width: 26px;
  height: auto;
  max-height: 26px;
}

.contacts__icon--phone {
  color: var(--color-contacts-text);
}

.contacts__icon--phone svg {
  display: block;
}

.contacts__text {
  flex: 1;
  min-width: 0;
}

.contacts__legal {
  font-family: var(--font-sans);
  font-size: var(--fs-text);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-contacts-text);
  text-align: center;
  max-width: 28rem;
  display: flex;
  flex-direction: column;
}

.contacts__legal p {
  margin: 0;
}

.contacts__legal p + p {
  margin-top: 6px;
}

/* ─── CASES (#cases) — mosaic story grid + 2+1 stat tiles (same tokens as consultations) ─── */
.cases {
  margin: 0;
  padding: clamp(36px, 9vw, 52px) 0 40px;
  background: var(--bg);
  color: var(--text);
  overflow-x: clip;
}

.cases__inner {
  box-sizing: border-box;
  max-width: min(720px, 100%);
  margin-inline: auto;
  padding-inline: max(var(--page-shell-pad-x), env(safe-area-inset-left, 0px))
    max(var(--page-shell-pad-x), env(safe-area-inset-right, 0px));
}

.cases__intro {
  margin: 0 0 clamp(18px, 4.5vw, 26px);
}

.cases__intro p {
  font-family: var(--font-sans);
  font-size: var(--fs-text);
  font-weight: 400;
  line-height: 1.55;
  color: var(--text);
  margin: 0;
}

.cases__intro p + p {
  margin-top: clamp(8px, 2vw, 12px);
}

/* Cases mosaic: midpoint of left screenshot aligns with midpoint of gutter between two right screenshots (shared column height + symmetric flex rails). */
.cases__mosaic {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  column-gap: clamp(14px, 4vw, 24px);
  margin-bottom: clamp(32px, 8vw, 48px);
}

.cases__mosaic-left {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.cases__mosaic-cell--lead1 {
  flex: 1 0 auto;
  align-content: flex-end;
  margin-bottom: clamp(10px, 2.8vw, 18px);
}

/* Grows between lead paragraphs; centers the mid screenshot for pairing with the right rail gutter. */
.cases__mosaic-left-mid {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.cases__mosaic-cell--lead2 {
  flex: 1 0 auto;
  margin-top: clamp(10px, 2.8vw, 18px);
}

.cases__mosaic-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  min-height: 0;
}

/* Flex band between the two right screenshots; expands with column height so its midpoint tracks the left mid screenshot. */
.cases__mosaic-rail-gutter {
  flex: 1 1 auto;
  min-height: clamp(28px, 26vw, 120px);
  width: 0;
}

.cases__mosaic-cell--img-top,
.cases__mosaic-cell--img-bottom {
  flex-shrink: 0;
}

.cases__lead {
  font-family: var(--font-sans);
  font-size: var(--fs-text);
  font-weight: 300;
  line-height: 1.55;
  color: var(--text);
  margin: 0;
  padding-left: 13%;
}

.cases__figure {
  margin: 0;
}

.cases__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 25px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.cases__mosaic .cases__img {
  display: block;
  width: 100%;
  max-width: clamp(17vw, 220px, 46vw);
  height: auto;
  margin-inline: 0;
}

.cases__results-title {
  font-family: var(--font-sans);
  font-size: var(--fs-text);
  font-weight: 400;
  line-height: 1.45;
  color: var(--text);
  margin: 0 0 clamp(16px, 4vw, 22px);
}

.cases__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 25px;
  margin-bottom: clamp(32px, 8vw, 48px);
}

.cases-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: clamp(122px, 34vw, 172px);
  padding: clamp(24px, 6.5vw, 38px) clamp(14px, 3.5vw, 24px);
  box-sizing: border-box;
  text-align: center;
}

.cases__stats .cases-stat:nth-child(3) {
  grid-column: 1 / -1;
  padding-top: clamp(24px, 7vw, 45px);
  padding-bottom: clamp(24px, 8vw, 50px);
}

.cases-stat__value {
  font-family: var(--font-accent);
  font-weight: 400;
  font-size: clamp(26px, 7vw, 40px);
  line-height: 1.15;
  color: var(--yellow);
  margin: 0 auto clamp(8px, 2vw, 12px);
}

.cases-stat__label {
  font-family: var(--font-sans);
  font-size: var(--fs-text);
  font-weight: 100;
  line-height: 1.45;
  color: var(--text);
  margin: 0;
}

.cases__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 4vw, 22px);
  text-align: center;
}

.cases__cta-lead {
  font-family: var(--font-accent);
  font-size: var(--fs-heading);
  line-height: 1.35;
  color: var(--text);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* .cases__cta-btn {
  width: min(100%, 520px);
} */

/* ─── CONSULTATIONS (#consultations) — dark canvas, purple “bubble” wash, framed cards ─── */
.consult {
  position: relative;
  /* Don’t clip — absolutely positioned blobs sit past edges; html/body `overflow-x: clip` reins in scrollbars */
  overflow-x: visible;
  padding: clamp(36px, 9vw, 52px) 0 40px;
  margin: 0;
  background: var(--bg);
  color: var(--text);
}

.consult-inner {
  position: relative;
  z-index: 1;
}

/* Full-bleed layer within `#consultations` (wider than `.page-shell` column) */
.consult-bubbles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/*
 * Glassy violet orbs — sizes from ~44px “badge-like” dots up to ~118px; scattered across full section width.
 * Consult cards use a lighter glass fill so orbs read clearly through the panel stack.
 */
.bg-bubble {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  background: linear-gradient(
    160deg,
    rgba(168, 132, 226, 0.45) 0%,
    rgba(90, 52, 156, 0.32) 55%,
    rgba(44, 0, 82, 0.22) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 6px 26px rgba(80, 36, 140, 0.28);
}

.bg-bubble--1 {
  width: 46px;
  height: 46px;
  top: 5%;
  left: 2%;
}

.bg-bubble--2 {
  width: 72px;
  height: 72px;
  top: 10%;
  left: 38%;
}

.bg-bubble--3 {
  width: 44px;
  height: 44px;
  top: 8%;
  right: 6%;
}

.bg-bubble--4 {
  width: 110px;
  height: 110px;
  top: 28%;
  right: -2%;
}

.bg-bubble--5 {
  width: 58px;
  height: 58px;
  top: 36%;
  left: 8%;
}

.bg-bubble--6 {
  width: 96px;
  height: 96px;
  top: 44%;
  left: 52%;
}

.bg-bubble--7 {
  width: 48px;
  height: 48px;
  top: 52%;
  right: 18%;
}

.bg-bubble--8 {
  width: 118px;
  height: 118px;
  bottom: 28%;
  left: -3%;
}

.bg-bubble--9 {
  width: 64px;
  height: 64px;
  bottom: 22%;
  left: 22%;
}

.bg-bubble--10 {
  width: 52px;
  height: 52px;
  bottom: 18%;
  right: 10%;
}

.bg-bubble--11 {
  width: 100px;
  height: 100px;
  bottom: 8%;
  left: 42%;
}

.bg-bubble--12 {
  width: 46px;
  height: 46px;
  bottom: 5%;
  right: 3%;
}

.consult-heading {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-heading);
  line-height: 1.18;
  color: var(--yellow);
  margin: 0 0 8px;
  position: relative;
  z-index: 1;
}

.consult-heading-line {
  display: block;
  width: min(296px, 96%);
  height: auto;
  margin: 0 0 clamp(22px, 6vw, 32px);
  position: relative;
  z-index: 1;
}

.consult-grid {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 5.5vw, 28px);
  position: relative;
  z-index: 1;
}

.consult-panel {
  max-width: 100%;
  width: 100%;
  padding: clamp(20px, 5vw, 26px);
  position: relative;
  z-index: 1;
  isolation: isolate;
  transform: translateZ(0);
}

.consult-panel__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(17px, 4.5vw, 19px);
  line-height: 1.35;
  color: var(--text);
  margin: 0;
}

.consult-panel__media {
  margin: 14px 0 14px;
  display: flex;
  align-items: center;
  width: 100%;
}

.consult-panel__media--stats {
  justify-content: flex-start;
}

.consult-panel__media--ads {
  justify-content: center;
}

/*
 * UI screenshots — square corners; scoped under `.consult-panel`.
 * Instagram bar: full rail on narrow phones; capped + centered on “large mobile / small tablet”
 * so the white strip does not span the full ~700px card width.
 * Ads thumb: compact asset — slightly larger in that band so it does not feel “lost” vs the top card.
 */
.consult-panel .consult-panel__img {
  display: block;
  height: auto;
  border-radius: 0;
}

.consult-panel__img--stats {
  width: 100%;
  max-width: 100%;
  max-height: clamp(72px, 20vw, 100px);
  object-fit: contain;
  object-position: left center;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.26);
}

.consult-panel__img--ads {
  width: auto;
  max-width: min(190px, 80%);
  max-height: clamp(44px, 12vw, 64px);
  object-fit: contain;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.24);
}

.consult-panel__body {
  font-size: var(--fs-small);
  font-weight: 300;
  line-height: 1.42;
  color: var(--text-muted);
  margin: 0 0 18px;
}

.consult-panel__cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
}

.consult-panel__price {
  font-family: var(--font-accent);
  font-weight: 400;
  font-size: clamp(20px, 5vw, 24px);
  line-height: 1.15;
  color: var(--text);
}

.consult-panel__buy.btn.btn--accent {
  flex-shrink: 0;
  min-width: unset;
  padding: 10px;
}

.consult-panel__note {
  font-size: var(--fs-caption);
  font-weight: 400;
  line-height: 1.45;
  color: rgba(183, 165, 232, 0.82);
  margin: 14px 0 0;
}

/* Tablet band before desktop nav — wider shell rails + consult preview scale (`768px <= width`). */
@media (500px <= width < 768px) {
  :root {
    --page-shell-pad-x: clamp(22px, 6.4vw, 40px);
  }

  .consult-panel__media--stats {
    justify-content: center;
  }

  .consult-panel__img--stats {
    width: auto;
    max-width: min(404px, 94%);
    max-height: clamp(76px, 11vw, 102px);
    object-position: center;
  }

  .consult-panel__img--ads {
    max-width: min(220px, 90%);
    max-height: clamp(50px, 9vw, 72px);
  }
}

/* ─── Scroll-to-top FAB — hidden near top of page; icon ~2× larger in button ─── */
.scroll-top-fab {
  position: fixed;
  z-index: 105;
  /* Inset from viewport edge, not `--page-shell-pad-x`, so the FAB stays put when gutters change */
  right: max(12px, env(safe-area-inset-right, 0px));
  bottom: max(18px, env(safe-area-inset-bottom, 18px));
  width: 52px;
  height: 52px;
  padding: 0;
  border: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--yellow);
  cursor: pointer;
  box-shadow: 2px 3px 4.5px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.22s ease,
    visibility 0.22s ease,
    transform 0.16s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.16s ease;
}

.scroll-top-fab.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.scroll-top-fab:hover {
  transform: translateY(-3px);
  box-shadow: 2px 5px 8px rgba(0, 0, 0, 0.22);
}

.scroll-top-fab:active {
  transform: translateY(1px);
  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);
}

.scroll-top-fab:focus-visible {
  outline: 2px solid var(--purple-mid);
  outline-offset: 3px;
}

.scroll-top-fab img {
  display: block;
  width: min(40px, 88%);
  height: auto;
}

/* ─── Component: accent CTA (Figma — normal / hover / pressed)
   Usage: class="btn btn--accent" on <a> or <button> (recommended)
   Alias: .btn-primary without .btn (same look; handy for anchors) */
.btn,
.btn-primary {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  text-align: center;
}

.btn.btn--accent,
.btn-primary {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 10px;
  border-radius: 6px;
  background: var(--yellow);
  color: var(--btn-on-accent);
  box-shadow: 1px 2px 2.5px rgba(0, 0, 0, 0.25);

  font-family: var(--font-accent);
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
  transform-origin: center;
  /* Stable text raster while scaling — fewer subpixel “swim” / refit artifacts */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  backface-visibility: hidden;
  transform: translateZ(0);

  transition:
    transform 0.14s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.14s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn.btn--accent:hover,
.btn-primary:hover {
  transform: scale(1.01) translateZ(0);
  box-shadow: 2px 3px 4.5px rgba(0, 0, 0, 0.25);
}

.btn.btn--accent:active,
.btn-primary:active {
  transform: scale(0.99) translateZ(0);
  box-shadow: inset 1px 2px 2.5px rgba(0, 0, 0, 0.25);
}

.btn.btn--accent:focus-visible,
.btn-primary:focus-visible {
  outline: 2px solid var(--purple-mid);
  outline-offset: 3px;
}

/* Purple CTA — payment modal step 2 (Figma `#9370db`) */
.btn.btn--purple {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 8px;
  background: var(--purple-mid);
  color: var(--text);
  box-shadow: 1px 2px 2.5px rgba(0, 0, 0, 0.25);
  font-family: var(--font-accent);
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
  cursor: pointer;
  transition:
    transform 0.14s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.14s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.14s ease;
}

.btn.btn--purple:hover:not(:disabled) {
  transform: scale(1.01) translateZ(0);
  box-shadow: 2px 3px 4.5px rgba(0, 0, 0, 0.25);
}

.btn.btn--purple:active:not(:disabled) {
  transform: scale(0.99) translateZ(0);
  box-shadow: inset 1px 2px 2.5px rgba(0, 0, 0, 0.25);
}

.btn.btn--purple:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn.btn--purple:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
}

/* ─── Payment modal (consultations) ───
 *
 * Two-step flow in one dialog: (1) UA phone + pay URL, (2) verify phone → PDF.
 * Step visibility toggled via [data-pay-step] + JS; shared close control in panel.
 *
 * Error highlights: phone uses border on the input; receipt uses border on
 * .pay-modal__receipt-wrap (№ prefix + input) so the whole white block rings red.
 * Avoid inset box-shadow on split composite fields — it only covers the input half.
 */
.pay-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(13, 13, 13, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.28s;
}

.pay-modal {
  position: fixed;
  inset: 0;
  z-index: 121;
  display: grid;
  place-items: center;
  padding: max(12px, env(safe-area-inset-top, 0px))
    max(12px, env(safe-area-inset-right, 0px))
    max(12px, env(safe-area-inset-bottom, 0px))
    max(12px, env(safe-area-inset-left, 0px));
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.28s;
}

.pay-modal__panel {
  position: relative;
  box-sizing: border-box;
  width: min(359px, 100%);
  overflow: hidden;
  padding: 72px clamp(16px, 4.5vw, 24px) clamp(28px, 6vw, 36px);
  border: 2px solid var(--yellow);
  border-radius: 20px;
  background: var(--bg);
  box-shadow: 0 24px 64px rgba(44, 0, 82, 0.45);
  pointer-events: auto;
}

.pay-modal__close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--yellow);
  cursor: pointer;
}

.pay-modal__close:focus-visible {
  outline: 2px solid var(--purple-mid);
  outline-offset: 2px;
}

.pay-modal__close-icon {
  position: relative;
  display: block;
  width: 28px;
  height: 28px;
}

.pay-modal__close-icon::before,
.pay-modal__close-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 36px;
  height: 4px;
  background: currentColor;
  border-radius: 3px;
}

.pay-modal__close-icon::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.pay-modal__close-icon::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.pay-modal__stack {
  display: flex;
  flex-direction: column;
  gap: 44px
}

.pay-modal__group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 30px;
}

.pay-modal__title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-heading-desktop);
  line-height: 1.25;
  text-align: center;
  color: var(--text);
}

.pay-modal__field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.pay-modal__receipt-wrap {
  display: flex;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
  border: 2px solid transparent;
  border-radius: 15px;
  background: #fdfdfd;
  transition: border-color 0.15s ease;
}

/* Full-block invalid state (№ + input). Class set in JS; :has() is a fallback. */
.pay-modal__receipt-wrap.is-invalid,
.pay-modal__receipt-wrap:has(.pay-modal__input[aria-invalid="true"]) {
  border-color: #e57373;
}

.pay-modal__receipt-wrap:focus-within:not(.is-invalid) {
  border-color: var(--purple-mid);
}

.pay-modal__receipt-prefix {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 8px 0 11px 14px;
  font-family: var(--font-sans);
  font-size:  var(--fs-accent);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--color-bg);
  user-select: none;
}

.pay-modal__input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  border: 2px solid transparent;
  border-radius: 15px;
  background: #fdfdfd;
  color: var(--color-bubles);
  font-family: var(--font-sans);
  font-size: clamp(16px, 4.5vw, var(--fs-body));
  line-height: 1.35;
  text-align: left;
  letter-spacing: 0.02em;
  transition: border-color 0.15s ease;
}

.pay-modal__input--receipt {
  flex: 1;
  min-width: 0;
  padding: 9px 14px 9px 6px;
  border: none;
  border-radius: 0 13px 13px 0;
  color: var(--color-bg);
  background: transparent;
}

.pay-modal__input::placeholder {
  color: rgba(43, 0, 82, 0.45);
}

.pay-modal__input:focus-visible {
  outline: none;
  border-color: var(--purple-mid);
}

.pay-modal__input--receipt:focus-visible {
  outline: none;
  border-color: transparent;
}

/* Phone step only — receipt errors highlight the outer wrap instead */
.pay-modal__input:not(.pay-modal__input--receipt)[aria-invalid="true"] {
  border-color: #e57373;
}

.pay-modal__input--receipt[aria-invalid="true"] {
  border-color: transparent;
}

.pay-modal__error {
  margin: 0;
  font-size: var(--fs-caption);
  line-height: 1.35;
  text-align: center;
  color: #ff8a80;
}

.pay-modal__action.btn--accent {
  align-self: center;
  width: auto;
  min-width: unset;
  padding: 10px clamp(24px, 10vw, 44px);
}

.pay-modal__action.is-loading {
  pointer-events: none;
  opacity: 0.92;
}

.pay-modal__action.is-loading .pay-modal__btn-label {
  display: none;
}

.pay-modal__action.is-loading .pay-modal__btn-loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.pay-modal__btn-loading[hidden] {
  display: none;
}

.pay-modal__spinner {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0, 0, 0, 0.15);
  border-top-color: rgba(0, 0, 0, 0.55);
  border-radius: 50%;
  animation: pay-modal-spin 0.85s linear infinite;
}

@keyframes pay-modal-spin {
  to {
    transform: rotate(360deg);
  }
}

.pay-modal__materials.is-ready {
  box-shadow: 0 0 0 2px rgba(192, 132, 252, 0.35);
}

.pay-modal__hints {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  max-width: 284px;
  margin-inline: auto;
  padding-bottom: 25px;
  text-align: center;
}

.pay-modal__hint {
  margin: 0;
  font-size: var(--fs-caption);
  font-weight: 400;
  line-height: 1.45;
  color: rgba(254, 254, 254, 0.72);
}

.pay-modal__hint--muted {
  color: rgba(254, 254, 254, 0.52);
}

html.pay-modal-open .pay-modal-backdrop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

html.pay-modal-open .pay-modal {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

html.pay-modal-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .pay-modal-backdrop,
  .pay-modal {
    transition: none;
  }

  .pay-modal__spinner {
    animation: none;
    border-top-color: rgba(255, 255, 255, 0.22);
  }
}

/* @media (max-width: 359px) {
  [data-pay-step="phone"] .pay-modal__title {
    white-space: normal;
    font-size: var(--fs-heading-mobile);
  }
} */

/* ─── Site footer — dark strip, stacked nav + split row + centered credit ─── */
.site-footer {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  padding: clamp(32px, 8vw, 48px) 0
    calc(clamp(28px, 6vw, 40px) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border-subtle);
}

.site-footer__inner {
  box-sizing: border-box;
  max-width: min(720px, 100%);
  margin-inline: auto;
  padding-inline: max(var(--page-shell-pad-x), env(safe-area-inset-left, 0px))
    max(var(--page-shell-pad-x), env(safe-area-inset-right, 0px));
}

.site-footer__nav {
  margin-bottom: clamp(28px, 7vw, 40px);
}

.site-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(10px, 2.8vw, 14px);
}

.site-footer__link {
  font-size: var(--fs-nav);
  font-weight: 400;
  line-height: 1.35;
  color: var(--text);
  text-decoration: none;
  transition:
    color 0.15s ease,
    opacity 0.15s ease;
}

.site-footer__link:hover {
  opacity: 0.82;
}

.site-footer__link:focus-visible {
  outline: 2px solid var(--purple-mid);
  outline-offset: 3px;
  border-radius: 2px;
}

.site-footer__link--muted {
  color: rgba(254, 254, 254, 0.75);
}

.site-footer__split-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 24px;
  width: 100%;
  padding-top: 2px;
  box-sizing: border-box;
}

.site-footer__credit {
  margin: 0;
  text-align: center;
  font-size: var(--fs-small);
  font-weight: 300;
  line-height: 1.45;
  color: var(--text-muted);
}

 /* ═══════════════════════════════════════════════════════════════════
 * MEDIA — progressive enhancement (mobile-first)
 *
 * BREAKPOINT MAP (width in CSS pixels, viewport logic only):
 * ────────────────────────────────────────────────────────────────────
 *  (max-width: 767px)     Phones / skinny windows — scrollbar-gutter tweak.
 *  (300px–499px)          Narrow phones — tighter `.accent-stage` max-width.
 *   500px+                Comfortable phones / small tablets — wider `.accent-stage`,
 *                          taller social badges, hero-card-wrap spacing.
 *   600px+                Mentor: roomier `padding-top`; `.mentor-name` single-line (desktop).
 *   720px+                Large tablets — hero card padding, badge size/orbit bump.
 *   768px+                Desktop nav, drawer off, consultations grid + pair-promo columns;
 *                          one `@media` layer (rail gutters via `--layout-rail-inline`).
 *  1200px+               Wide desktops — hero-only wider `.page-shell`, larger hero
 *                          card/type/badges (fills lateral negative space vs ~900px mock).
 *
 * Inside this appendix: put non-media defaults that later min-width layers override first
 * (e.g. default social-badge geometry before 500px+ rules).
 *
 * Interaction: prefers-reduced-motion — last — removes motion on nav drawer, FAB, CTAs,
 * hero entrance & badge fades + `.scroll-reveal` (see `fadeInMoveUp` + `--motion-enter-*`).
 * ═══════════════════════════════════════════════════════════════════
 */

@media (width < 768px) {
  html {
    scrollbar-gutter: auto;
  }
}

/* Badge defaults (<500px canvas); overrides in wider ranges below */
.accent-stage .badge-meta {
  width: 56px;
  height: 56px;
  top: -14px;
  left: -8px;
}

.accent-stage .badge-ig {
  width: 72px;
  height: 72px;
  top: -10px;
  right: -16px;
}

.accent-stage .badge-fb {
  width: 60px;
  height: 60px;
  bottom: -28px;
  left: calc(50% - 30px);
  right: auto;
}

@media (300px <= width <= 499px) {
  :root {
    --page-shell-pad-x: clamp(15px, 1vw, 32px);
  }

  .hero {
    padding: 44px 0 30px;
  }

  .accent-stage {
    max-width: min(380px, 86vw);
  }

  .accent-stage .badge-fb {
    width: 55px;
    height: 55px;
    bottom: -44px;
    left: 50vw;
  }

  .accent-stage .badge-ig {
    width: 55px;
    height: 55px;
    right: -37px;
    top: -4px;
  }

  .accent-stage .badge-meta {
    width: 53px;
    height: 53px;
    top: -27px;
    left: -25px;
  }

  .section-header,
  .mentor-name {
    font-size: var(--fs-text);
  }

  .mentor-chip-text {
    font-size: var(--fs-small);
  }

  .pair-tile__title,
  .pair-tile__desc,
  .pair-tile__list {
    font-size: var(--fs-small);
  }

  .pair-pane__ribbon {
    font-size: var(--fs-small);
  }
}

@media (500px <= width) {
  .accent-stage {
    max-width: min(480px, calc(100% - 24px));
  }

  .hero-card-wrap {
    padding-bottom: 44px;
  }

  .accent-stage .badge-meta {
    width: 62px;
    height: 62px;
    top: -22px;
    left: -40px;
  }

  .accent-stage .badge-ig {
    width: 70px;
    height: 70px;
    right: -56px;
    top: -4px;
  }

  .accent-stage .badge-fb {
    width: 68px;
    height: 68px;
    bottom: -62px;
    left: calc(50% + 50px);
  }
}

@media (600px <= width) {
  .accent-stage .badge-meta {
    width: 70px;
    height: 70px;
    top: -32px;
    left: -43px;
  }

  .accent-stage .badge-ig {
    width: 82px;
    height: 82px;
    right: -63px;
    top: -4px;
  }

  /* .accent-stage .badge-fb {
    width: 68px;
    height: 68px;
    bottom: -62px;
    left: calc(50% + 50px);
  }  */

  .mentor {
    padding-top: clamp(40px, 10vw, 56px);
  }

  .mentor-name {
    margin-bottom: 80px;
    max-width: min(100%, 16em);
    font-size: clamp(19px, 4.8vw, 22px);
    line-height: 1.2;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: flex-end;
    gap: 0.35em;
    white-space: nowrap;
  }

  .mentor-name-line {
    display: inline;
  }
}

@media (720px <= width) {
  .hero-card {
    padding: 32px 30px;
  }

  .accent-stage .badge-meta {
    width: 72px;
    height: 72px;
    top: -36px;
  }

  .accent-stage .badge-ig {
    width: 96px;
    height: 96px;
    right: -72px;
    top: -12px;
  }

  .accent-stage .badge-fb {
    width: 74px;
    height: 74px;
    left: calc(50% + 44px);
  }
}

@media (768px <= width) {
  :root {
    --page-shell-pad-x: clamp(14px, 3vw, 20px);
    /* Narrower side rails vs mobile shell (`pair-pane` / cases / contacts at ≥768px) */
    --layout-rail-inline: clamp(14px, 2.4vw, 22px);
  }

  .site-logotype {
    flex: 0 0 auto;
  }

  .site-nav-desktop {
    display: flex;
  }

  .nav-toggle {
    display: none;
  }

  .mobile-nav-backdrop,
  .mobile-nav-sheet {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  html.mobile-nav-open {
    overflow: unset;
  }

  .section-header {
    font-size: var(--fs-heading-desktop);
  }

  .mentor-chip-text {
    font-size: var(--fs-accent);
  }

  .mentor-name {
    font-size: 25px;
  }

  .pair-promo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    min-height: 0;
  }

  .pair-pane__inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    max-width: min(560px, 94%);
    margin-inline: auto;
  }

  .pair-pane__cta {
    margin-top: auto;
    padding-top: clamp(20px, 4vw, 30px);
  }

  .pair-tile__title {
    font-size: var(--fs-accent);
  }

  .contacts__inner {
    max-width: min(560px, 94%);
  }

  .cases__inner {
    max-width: min(720px, 94%);
  }

  .pair-pane__inner,
  .contacts__inner,
  .cases__inner {
    padding-inline: max(var(--layout-rail-inline), env(safe-area-inset-left, 0px))
      max(var(--layout-rail-inline), env(safe-area-inset-right, 0px));
  }

  .consult-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(18px, 3vw, 26px);
    align-items: stretch;
  }

  .consult-panel {
    display: flex;
    flex-direction: column;
    min-height: 100%;
  }

  .consult-panel__body {
    flex-grow: 1;
  }

  .page-shell {
    padding-inline: max(0px, env(safe-area-inset-left, 0px)) max(0px, env(safe-area-inset-right, 0px));
  }
}

@media (1200px <= width) {
  .hero > .page-shell {
    max-width: min(820px, 100%);
  }

  .hero {
    padding: 56px 0 58px;
  }

  .accent-stage {
    max-width: min(560px, calc(100% - 32px));
  }

  .hero-card-wrap {
    padding-bottom: 56px;
  }

  .hero-card,
  .consult-panel,
  .cases-stat {
    border-radius: 28px;
  }

  .hero-card {
    padding: 36px 36px 38px;
  }

  .hero-card h1 {
    font-size: clamp(27px, 2.2vw, 32px);
    line-height: 1.17;
    margin-bottom: 16px;
  }

  .hero-card p {
    font-size: 15px;
    max-width: 420px;
    margin-bottom: 24px;
  }

  .accent-stage .badge-meta {
    width: 80px;
    height: 80px;
    top: -42px;
    left: -50px;
  }

  .accent-stage .badge-ig {
    width: 102px;
    height: 102px;
    top: -14px;
    right: -77px;
  }

  .accent-stage .badge-fb {
    width: 80px;
    height: 80px;
    left: calc(50% + 46px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-toggle-lines,
  .nav-toggle-lines::before,
  .nav-toggle-lines::after,
  .mobile-nav-backdrop,
  .mobile-nav-sheet {
    transition: none !important;
  }

  .mobile-nav-backdrop,
  .mobile-nav-sheet {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .btn.btn--accent,
  .btn-primary {
    transition: none;
  }

  .nav-toggle {
    transition: none !important;
  }

  .nav-toggle:hover,
  .nav-toggle:active,
  html.mobile-nav-open .nav-toggle:hover,
  html.mobile-nav-open .nav-toggle:active {
    transform: none !important;
  }

  .hero-card,
  .consult-panel,
  .cases-stat {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--color-consult-card);
  }

  .scroll-top-fab {
    transition: none;
  }

  html {
    scroll-behavior: auto;
  }

  .accent-stage {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .accent-stage .social-badge {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .scroll-reveal.scroll-reveal--pending,
  .scroll-reveal.scroll-reveal--animate-in {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}