/* Аудитор Рынка — design system */
:root {
  --bg: #ffffff;
  --bg-soft: #f6f6f4;
  --bg-muted: #ecece8;
  --ink: #111113;
  --ink-2: #1d1d1f;
  --ink-3: #3a3a3d;
  --ink-4: #6b6b70;
  --ink-5: #a8a8ad;
  --rule: #e6e6e2;
  --rule-2: #d6d6d0;
  --accent: oklch(0.38 0.12 250);       /* deep ink-blue */
  --accent-2: oklch(0.48 0.12 250);
  --gold: oklch(0.72 0.09 85);          /* muted gold */
  --gold-soft: oklch(0.86 0.05 85);
  --serif: "Fraunces", "Times New Roman", serif; /* used sparingly for big numerals */
  --display: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink-2); }
body {
  font-family: var(--body);
  font-feature-settings: "ss01","ss02","cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.01em;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

.display { font-family: var(--display); font-weight: 600; letter-spacing: -0.035em; }
.mono { font-family: var(--mono); font-feature-settings: "zero","ss01"; }
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* Page shell — snap scroll */
.page {
  height: 100vh;
  height: 100dvh;
  overflow-y: scroll;
  /* Desktop: mandatory TikTok-style — каждая секция фиксированной высоты
     100dvh, мягкое прилипание не подходит, нужна решительная защёлка.
     Mobile (где секции выше viewport'а) — переключается на proximity
     внутри @media-блока, чтобы внутри длинного блока скролл был свободным. */
  scroll-snap-type: y mandatory;
  scroll-behavior: auto;
  scrollbar-width: none;
  scroll-padding-top: 0;
}
.page::-webkit-scrollbar { display: none; }
.screen {
  height: 100vh;
  height: 100dvh;
  width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative;
  overflow: hidden;
}

/* Top nav */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  mix-blend-mode: difference;
  pointer-events: none;
}
.nav > * { pointer-events: auto; color: #fff; }
.nav-brand {
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-brand .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #fff;
}
.nav-links {
  display: flex; gap: 22px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.nav-links a { opacity: 0.7; transition: opacity .2s; }
.nav-links a:hover, .nav-links a.active { opacity: 1; }

/* Page progress rail — right side */
.rail {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}
.rail .tick {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--ink-5);
  cursor: pointer;
  transition: color .2s;
}
.rail .tick .bar {
  width: 18px; height: 1px; background: var(--ink-5);
  transition: all .3s;
}
.rail .tick.active { color: var(--ink-2); }
.rail .tick.active .bar { width: 36px; background: var(--ink-2); }
.rail .tick .label { opacity: 0; transition: opacity .2s; }
.rail .tick.active .label { opacity: 1; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid var(--ink-2);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: all .25s cubic-bezier(.2,.7,.2,1);
}
.btn.primary { background: var(--ink-2); color: #fff; }
.btn.ghost { border-color: var(--rule-2); color: var(--ink-3); }
@media (hover: hover) {
  .btn:hover { transform: scale(1.02); background: var(--ink-2); color: #fff; }
  .btn.primary:hover { background: var(--ink); }
  .btn.ghost:hover { border-color: var(--ink-2); color: var(--ink-2); background: transparent; transform: scale(1.02); }
}
.btn.sm { padding: 10px 16px; font-size: 10px; letter-spacing: 0.2em; }

/* Large segment cards */
.segment-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  width: 100%;
  max-width: 1180px;
}
.segment {
  position: relative;
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 20px 20px 18px;
  background: #fff;
  cursor: pointer;
  transition: all .3s cubic-bezier(.2,.7,.2,1);
  text-align: left;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
@media (hover: hover) {
  .segment:hover {
    transform: translateY(-4px);
    border-color: var(--ink-2);
    box-shadow: 0 30px 60px -30px rgba(0,0,0,0.15);
  }
  .segment:hover .seg-arrow {
    background: var(--ink-2);
    color: #fff;
    border-color: var(--ink-2);
    transform: translate(3px, -3px) rotate(-45deg);
  }
}
.segment .seg-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--ink-4);
}
.segment .seg-title {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.04em;
  margin-top: 6px;
  color: var(--ink);
}
.segment .seg-sub {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-4);
  margin-top: 6px;
  max-width: 32ch;
}
.segment .seg-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.segment .seg-arrow {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--rule);
  display: grid; place-items: center;
  transition: all .25s;
}
.segment .seg-arrow svg { transition: transform .25s; }

/* Placeholder imagery: subtle striped SVG */
.placeholder {
  position: relative;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(0,0,0,0.035) 0 1px,
      transparent 1px 14px
    ),
    var(--bg-soft);
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-4);
}
.placeholder .ph-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 5px 10px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 3px;
}

/* Utility */
.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
  width: 100%;
  height: 100%;
}
.center-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}
.screen-index {
  position: absolute;
  left: 28px;
  bottom: 22px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--ink-4);
}
.screen-tag {
  position: absolute;
  right: 28px;
  bottom: 22px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--ink-4);
}

/* Hairline rules */
.hr { height: 1px; background: var(--rule); width: 100%; }
.vr { width: 1px; background: var(--rule); height: 100%; }

/* Pulsing arrow */
@keyframes pulse-down {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50% { transform: translateY(8px); opacity: 1; }
}
.pulse-arrow {
  position: absolute;
  bottom: 38px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  gap: 10px;
  color: var(--ink-4);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
}
.pulse-arrow .arrow { animation: pulse-down 1.8s ease-in-out infinite; }

/* Numerals */
.numeral {
  font-family: var(--display);
  font-weight: 500;
  font-size: 88px;
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--ink);
}
.numeral.gold { color: var(--gold); }
.numeral.blue { color: var(--accent); }

/* Italic accent — Fraunces visually loses x-height vs Manrope at same px,
   so a span at the same nominal font-size reads smaller. Compensate so the
   accent reads slightly fuller than the surrounding word, never smaller. */
.accent-italic {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.18em;
  letter-spacing: -0.025em;
}
.accent-italic.accent-blue { color: var(--accent); }
.accent-italic.accent-gold { color: var(--gold); }

/* Fade-up on reveal */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.16s; }
.reveal.d3 { transition-delay: 0.24s; }
.reveal.d4 { transition-delay: 0.32s; }
.reveal.d5 { transition-delay: 0.40s; }
.reveal.d6 { transition-delay: 0.48s; }

/* Page transition curtain */
.curtain {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--ink);
  transform: translateY(100%);
  pointer-events: none;
}
.curtain.in { animation: curtain-in .65s cubic-bezier(.76,0,.24,1) forwards; }
.curtain.out { animation: curtain-out .65s cubic-bezier(.76,0,.24,1) forwards; }
@keyframes curtain-in {
  0% { transform: translateY(100%); }
  100% { transform: translateY(0); }
}
@keyframes curtain-out {
  0% { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}

/* Boot curtain — sits in HTML before React mounts so the new page's first
   paint is the same ink panel that just arrived from the old page (no white
   flash). Lifted via inline script after window 'load'. */
#boot-curtain {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--ink);
  transform: translateY(0);
  pointer-events: none;
}
#boot-curtain.lift { animation: curtain-out .65s cubic-bezier(.76,0,.24,1) forwards; }

/* Visual press-down feedback (covers iOS where Web Vibration is unsupported) */
.btn:active,
.segment:active,
.nav-overlay-links a:active,
.nav-burger:active,
.nav-overlay-head .close:active,
.lots-grid > *:active {
  transform: scale(0.97) !important;
  transition: transform .12s cubic-bezier(.2,.7,.2,1) !important;
}

/* Tweaks panel */
.tweaks {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 200;
  width: 280px;
  background: #fff;
  border: 1px solid var(--rule-2);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.18);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
}
.tweaks h4 {
  margin: 0 0 12px;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.tweaks label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--rule);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink-3);
}
.tweaks .opts { display: flex; gap: 6px; }
.tweaks .opts button {
  padding: 4px 10px;
  border: 1px solid var(--rule-2);
  background: #fff;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--ink-3);
}
.tweaks .opts button.active {
  background: var(--ink-2); color: #fff; border-color: var(--ink-2);
}

/* Avatar tile with soft gradient */
.avatar-tile {
  width: min(520px, 90%);
  aspect-ratio: 4/5;
  border-radius: 24px;
  background:
    radial-gradient(120% 100% at 50% 0%, #fff 0%, #ececea 70%, #dedede 100%);
  border: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.avatar-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, rgba(0,0,0,0.03) 0 1px, transparent 1px 16px);
  pointer-events: none;
}
.avatar-badge {
  position: absolute;
  bottom: 18px; left: 18px;
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(10px);
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.avatar-badge .pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34,197,94,0.5);
  animation: dot-pulse 1.6s infinite;
}
@keyframes dot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); }
  100% { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
}

/* Fine hairline corner marks */
.corner {
  position: absolute;
  width: 14px; height: 14px;
}
.corner::before, .corner::after {
  content: "";
  position: absolute;
  background: var(--ink-2);
}
.corner::before { width: 14px; height: 1px; top: 0; left: 0; }
.corner::after { width: 1px; height: 14px; top: 0; left: 0; }
.corner.tr { right: 0; transform: scaleX(-1); }
.corner.bl { bottom: 0; left: 0; transform: scaleY(-1); }
.corner.br { right: 0; bottom: 0; transform: scale(-1,-1); }
.corner.tl { top: 0; left: 0; }

/* Burger button (visible only on mobile) */
.nav-burger {
  display: none;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  position: relative;
  align-items: center;
  justify-content: center;
}
.nav-burger .bar-line {
  position: absolute;
  left: 12px;
  width: 20px;
  height: 1.5px;
  background: var(--ink-2);
  border-radius: 1px;
  transition: transform .32s cubic-bezier(.5,1.5,.5,1), opacity .32s cubic-bezier(.5,1.5,.5,1), top .32s cubic-bezier(.5,1.5,.5,1);
}
.nav-burger .bar-line.b1 { top: 16px; }
.nav-burger .bar-line.b2 { top: 21px; }
.nav-burger .bar-line.b3 { top: 26px; }
.nav-burger.open .bar-line.b1 { top: 21px; transform: rotate(45deg); }
.nav-burger.open .bar-line.b2 { opacity: 0; transform: scaleX(0.4); }
.nav-burger.open .bar-line.b3 { top: 21px; transform: rotate(-45deg); }

/* Fullscreen nav overlay */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(17, 17, 19, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: calc(20px + env(safe-area-inset-top)) 28px calc(28px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
  visibility: hidden;
}
.nav-overlay.open {
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
}
.nav-overlay-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.nav-overlay-head .close {
  width: 44px; height: 44px;
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: grid; place-items: center;
}
.nav-overlay-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 56px;
  flex: 1;
}
.nav-overlay-links a {
  font-family: var(--display);
  font-weight: 600;
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: #fff;
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .45s cubic-bezier(.2,.7,.2,1), transform .45s cubic-bezier(.2,.7,.2,1);
}
.nav-overlay-links a:last-child { border-bottom: 1px solid rgba(255,255,255,0.12); }
.nav-overlay.open .nav-overlay-links a { opacity: 1; transform: translateY(0); }
.nav-overlay.open .nav-overlay-links a:nth-child(1) { transition-delay: 0.10s; }
.nav-overlay.open .nav-overlay-links a:nth-child(2) { transition-delay: 0.16s; }
.nav-overlay.open .nav-overlay-links a:nth-child(3) { transition-delay: 0.22s; }
.nav-overlay.open .nav-overlay-links a:nth-child(4) { transition-delay: 0.28s; }
.nav-overlay-links a .num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.4);
  font-weight: 500;
}
.nav-overlay-links a.active { color: var(--gold-soft); }
.nav-overlay-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.nav-overlay-foot a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 999px;
  color: #fff;
  font-size: 10px;
}

/* Chart frame: horizontal scroll wrapper for wide SVGs on mobile */
.chart-frame {
  position: relative;
}

/* ============================================================
   MOBILE: ≤ 768px — kept at end for highest specificity
   ============================================================ */
@media (max-width: 768px) {
  body { letter-spacing: -0.005em; }

  /* On mobile sections grow past viewport height — proximity is critical.
     With `mandatory` here, scrolling 100-200px inside a long section
     yanks back to its top. Proximity lets the user freely read inside,
     and only snaps when they get close to the next section's edge. */
  .page { scroll-snap-type: y proximity; }
  .screen {
    height: auto !important;
    min-height: 100dvh;
    scroll-snap-stop: normal;
    overflow: visible;
  }

  .container {
    padding-left: 22px !important;
    padding-right: 22px !important;
    height: auto !important;
  }

  /* NAV — drop blend mode, give it a real surface */
  .nav {
    padding: 14px 18px !important;
    padding-top: calc(14px + env(safe-area-inset-top)) !important;
    mix-blend-mode: normal;
    background: rgba(255,255,255,0.78);
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    border-bottom: 1px solid var(--rule);
  }
  .nav > * { color: var(--ink-2); }
  .nav-brand .dot { background: var(--ink-2); }
  .nav-links { display: none !important; }
  .nav-burger { display: inline-flex; }

  /* Hide rail/tweaks/pulse — not enough room */
  .rail { display: none !important; }
  .tweaks {
    width: calc(100vw - 24px);
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
  }
  .pulse-arrow { display: none !important; }

  /* Generic: any inline 2-col grid → 1-col when tagged */
  .split-2col {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    align-items: stretch !important;
    padding-top: 92px !important;
    padding-bottom: 64px !important;
  }
  .split-reverse > *:first-child { order: 2; }
  .split-reverse > *:last-child  { order: 1; }

  /* Hub hero special: headline → avatar → body */
  .hero-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    gap: 22px !important;
    padding-top: 92px !important;
    padding-bottom: 56px !important;
  }
  .hero-grid .hero-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    grid-template: none !important;
  }
  /* Wrapper "vanishes" on mobile so headline/body slot directly into the
     flex column alongside the avatar — order then arranges them. */
  .hero-grid .hero-text-stack {
    display: contents !important;
  }
  .hero-grid .hero-headline { order: 1; }
  .hero-grid .hero-avatar   { order: 2; min-height: 42vh; height: 42vh; max-height: 52vh; width: 100%; }
  .hero-grid .hero-body     { order: 3; }
  .hero-grid .hero-avatar > div { max-width: none !important; max-height: none !important; width: 100% !important; height: 100% !important; aspect-ratio: auto !important; }

  /* Metric strip — 2×2 instead of 1×4 */
  .metric-strip {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px 18px !important;
  }

  /* Facts grid (Hub · Screen 2) — stack 1-col, swap left-border for top-border */
  .facts-grid {
    grid-template-columns: 1fr !important;
    margin-top: 28px !important;
  }
  .facts-grid > * {
    border-left: none !important;
    border-top: 1px solid var(--rule-2);
    padding: 22px 4px !important;
  }
  .facts-grid > *:first-child { border-top: none; }

  /* Segment cards */
  .segment-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .segment { min-height: 0; padding: 18px 18px 16px; }
  .segment .seg-title { font-size: 26px; }

  /* Filters grid (Капитал · Screen 2) */
  .filters-grid {
    grid-template-columns: 1fr !important;
    margin-top: 32px !important;
  }
  .filters-grid > * {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.14) !important;
    padding: 26px 4px !important;
  }
  .filters-grid > *:last-child { border-bottom: none !important; }

  /* Transparency grid (Хаб · 01.5) */
  .transparency-grid {
    grid-template-columns: 1fr !important;
    margin-top: 28px !important;
  }
  .transparency-grid > * {
    border-right: none !important;
    border-bottom: 1px solid var(--rule-2) !important;
    padding: 26px 18px !important;
  }
  .transparency-grid > *:last-child { border-bottom: none !important; }

  /* Process grid (Хаб · 02.5) — 5 col → 1 col */
  .process-grid {
    grid-template-columns: 1fr !important;
    margin-top: 28px !important;
  }
  .process-grid > * {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.14) !important;
    padding: 26px 4px !important;
    min-height: 0 !important;
  }
  .process-grid > *:last-child { border-bottom: none !important; }

  /* Stars grid (Резиденция · Screen 1) */
  .stars-grid {
    grid-template-columns: 1fr !important;
  }
  .stars-grid > * {
    border-right: none !important;
    border-bottom: 1px solid var(--rule) !important;
    padding: 22px 20px !important;
  }
  .stars-grid > *:last-child { border-bottom: none !important; }

  /* Lots grid (Резиденция · Screen 2) */
  .lots-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-top: 32px !important;
  }
  .lots-grid > * { min-height: 0 !important; }

  /* CTA row → stack, full-width */
  .cta-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .cta-row .btn { width: 100%; padding: 16px 22px; justify-content: center; }

  /* Chart frame: horizontal scroll for wide SVGs */
  .chart-frame {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding: 18px !important;
    scroll-padding-left: 20px;
  }
  .chart-frame > svg {
    min-width: 560px;
    width: 560px;
    display: block;
  }
  .chart-frame.blueprint > svg {
    min-width: 720px;
    width: 720px;
  }
  .chart-frame::after {
    content: attr(data-hint);
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #fff;
    background: var(--ink-2);
    padding: 9px 16px;
    border-radius: 999px;
    box-shadow: 0 12px 28px -8px rgba(0,0,0,0.45);
    pointer-events: none;
    white-space: nowrap;
    z-index: 5;
    animation:
      chart-hint-bob 1.6s cubic-bezier(.4,0,.4,1) infinite,
      chart-hint-fade 8s linear forwards;
  }
  .chart-frame.touched::after { opacity: 0 !important; transition: opacity .25s; animation: none !important; }
  @keyframes chart-hint-bob {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(-4px); }
  }
  @keyframes chart-hint-fade {
    0%, 90% { opacity: 1; }
    100%    { opacity: 0; }
  }

  /* Typography on mobile — bigger & punchier than original clamp lower bound */
  .display, h1.display, h2.display, h3.display {
    font-size: clamp(32px, 8vw, 42px) !important;
    line-height: 1.02 !important;
  }
  .numeral { font-size: 44px; }

  /* Screen meta — respect safe-area */
  .screen-index, .screen-tag {
    bottom: calc(14px + env(safe-area-inset-bottom));
    font-size: 9.5px;
  }
  .screen-index { left: 22px; }
  .screen-tag   { right: 22px; }

  /* Tap-friendly buttons */
  .btn {
    padding: 14px 22px;
    min-height: 44px;
  }
  .btn.sm {
    padding: 12px 18px;
    min-height: 40px;
  }

  /* Avatar tile mobile sizing */
  .avatar-tile { width: 100%; }
}

/* ============================================================
   DESKTOP fits — секции должны помещаться в 100dvh, иначе
   контент наезжает на сегмент-карточки/pulse-arrow/ScreenMeta
   и mandatory-snap не имеет смысла. Тонкая подгонка размеров
   и отступов; ничего не убираем и не добавляем визуально.
   ============================================================ */
@media (min-width: 769px) {
  /* HubScreen1 (Подход) — text-stack + аватар + 3 карточки */
  .screen[data-screen-label*="Подход"] .container.hero-grid {
    padding-top: 60px !important;
    padding-bottom: 44px !important;
    gap: 16px !important;
  }
  .screen[data-screen-label*="Подход"] .hero-headline h1 {
    font-size: clamp(34px, 4.4vw, 60px) !important;
    line-height: 0.96 !important;
  }
  .screen[data-screen-label*="Подход"] .hero-body p {
    font-size: 14.5px !important;
    margin-top: 14px !important;
  }
  .screen[data-screen-label*="Подход"] .hero-body .cta-row {
    margin-top: 16px !important;
  }
  .screen[data-screen-label*="Подход"] .hero-body .metric-strip {
    margin-top: 18px !important;
    padding-top: 8px !important;
  }
  .screen[data-screen-label*="Подход"] .hero-body .metric-strip > div .display {
    font-size: 20px !important;
  }
  .screen[data-screen-label*="Подход"] .segment-row .segment {
    min-height: 130px;
    padding: 16px 18px 14px;
  }
  .screen[data-screen-label*="Подход"] .segment-row .segment .seg-title {
    font-size: 24px;
  }
  .screen[data-screen-label*="Подход"] .segment-row .segment .seg-sub {
    font-size: 12.5px;
  }

  /* HubScreen2 (Роль) — H1 в меньше строк, чтобы метрики не съезжали */
  .screen[data-screen-label*="Роль"] > .container {
    padding-top: 70px !important;
    padding-bottom: 56px !important;
    gap: 40px !important;
  }
  .screen[data-screen-label*="Роль"] h2.display {
    font-size: clamp(28px, 3.4vw, 46px) !important;
    line-height: 1.06 !important;
    max-width: 32ch !important;
  }
  .screen[data-screen-label*="Роль"] .reveal.d2 {
    font-size: 14px !important;
    margin-top: 16px !important;
  }
  .screen[data-screen-label*="Роль"] .facts-grid {
    margin-top: 24px !important;
  }
  .screen[data-screen-label*="Роль"] .facts-grid > div {
    padding: 18px 16px !important;
  }
  .screen[data-screen-label*="Роль"] .facts-grid > div .display {
    font-size: 30px !important;
  }
  .screen[data-screen-label*="Роль"] .cta-row {
    margin-top: 18px !important;
  }

  /* HubScreen1_5 (Прозрачность) — 3 карточки */
  .screen[data-screen-label*="Прозрачность"] > .container {
    padding-top: 80px !important;
    padding-bottom: 56px !important;
  }
  .screen[data-screen-label*="Прозрачность"] .transparency-grid > div {
    padding: 24px 22px !important;
  }

  /* HubScreen2_5 (Процесс) — 5 шагов */
  .screen[data-screen-label*="Процесс"] > .container {
    padding-top: 80px !important;
    padding-bottom: 56px !important;
  }
  .screen[data-screen-label*="Процесс"] .process-grid > div {
    padding: 22px 16px !important;
    min-height: 220px !important;
  }
  .screen[data-screen-label*="Процесс"] .process-grid > div h3 {
    font-size: 20px !important;
  }
  .screen[data-screen-label*="Процесс"] .process-grid > div p {
    font-size: 13px !important;
  }

  /* BazScreen1 (Техаудит) — H1 уже, чтобы 5 layer-pills + paragraph
     умещались, и pulse-arrow не наезжал на «Фундамент · Гидро» */
  .screen[data-screen-label*="Техаудит"] > .container {
    padding-top: 72px !important;
    padding-bottom: 60px !important;
  }
  .screen[data-screen-label*="Техаудит"] h2.display {
    font-size: clamp(30px, 3.8vw, 54px) !important;
    line-height: 1.02 !important;
  }
  .screen[data-screen-label*="Техаудит"] .reveal.d2 {
    font-size: 14px !important;
    margin-top: 16px !important;
  }
  .screen[data-screen-label*="Техаудит"] .reveal.d3 {
    margin-top: 22px !important;
    gap: 8px !important;
  }
  .screen[data-screen-label*="Техаудит"] .reveal.d3 button {
    padding: 9px 12px !important;
    font-size: 10.5px !important;
  }

  /* BazScreen2 (Периметр) — h1 fits */
  .screen[data-screen-label*="Периметр"] > .container {
    padding-top: 72px !important;
    padding-bottom: 60px !important;
  }
  .screen[data-screen-label*="Периметр"] h2.display {
    font-size: clamp(30px, 3.8vw, 54px) !important;
    line-height: 1.04 !important;
  }
  .screen[data-screen-label*="Периметр"] .reveal.d2 {
    font-size: 14px !important;
    margin-top: 16px !important;
  }

  /* RezScreen1 (Управление) — H1 + 4-card stars-grid + pulse-arrow */
  .screen[data-screen-label*="Управление"] > .container {
    padding-top: 72px !important;
    padding-bottom: 60px !important;
  }
  .screen[data-screen-label*="Управление"] h2.display {
    font-size: clamp(30px, 3.8vw, 54px) !important;
    line-height: 1.02 !important;
  }
  .screen[data-screen-label*="Управление"] .reveal.d2 {
    font-size: 14px !important;
    margin-top: 16px !important;
  }
  .screen[data-screen-label*="Управление"] .stars-grid {
    margin-top: 22px !important;
  }
  .screen[data-screen-label*="Управление"] .stars-grid > div {
    padding: 18px 18px !important;
  }
  .screen[data-screen-label*="Управление"] .stars-grid > div .display {
    font-size: 16px !important;
  }
  .screen[data-screen-label*="Управление"] .stars-grid > div > div:last-child {
    font-size: 12.5px !important;
  }

  /* RezScreen2 (Трофеи) — лоты-карточки */
  .screen[data-screen-label*="Трофеи"] > .container {
    padding-top: 80px !important;
    padding-bottom: 60px !important;
  }
  .screen[data-screen-label*="Трофеи"] .lots-grid {
    margin-top: 36px !important;
  }
  .screen[data-screen-label*="Трофеи"] .lots-grid > * {
    min-height: 280px !important;
    padding: 18px !important;
  }
  .screen[data-screen-label*="Трофеи"] .cta-row {
    margin-top: 28px !important;
  }

  /* KapScreen2 (Фильтр) — fits */
  .screen[data-screen-label*="Фильтр"] > .container {
    padding-top: 80px !important;
    padding-bottom: 60px !important;
  }
  .screen[data-screen-label*="Фильтр"] .filters-grid {
    margin-top: 32px !important;
  }
  .screen[data-screen-label*="Фильтр"] .filters-grid > div {
    padding: 24px 22px !important;
  }
  .screen[data-screen-label*="Фильтр"] .cta-row {
    margin-top: 24px !important;
  }

  /* Pulse-arrow — slightly higher and smaller, чтобы не пересекался
     с сегмент-карточками или контентом, тянущимся вниз */
  .pulse-arrow {
    bottom: 24px !important;
    font-size: 9.5px !important;
  }
}

/* =====================================================================
   LUX POLISH v1 — слой утончения поверх базовой системы.
   Только cascade-overrides: цвета/шрифты/сетка не меняются, добавляется
   тактильность (hover/press/focus), глубина теней и дисциплина движения.
===================================================================== */

/* Выделение текста — фирменное: чернила + золото. Деталь, которую
   замечают только внимательные — на них и рассчитано. */
::selection { background: var(--ink); color: var(--gold-soft); }

/* Видимый focus-ring для клавиатурной навигации. Доступность читается
   как аккуратность — у люкс-сервиса ничего не «теряется» при Tab. */
:focus-visible {
  outline: 1.5px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.btn:focus-visible, .segment:focus-visible { outline-offset: 4px; }

/* Кнопки: вместо простого scale — спокойный подъём с мягкой тенью.
   Возврат медленнее входа — жест «отпускания» дороже. */
.btn { transition: all .42s cubic-bezier(.22,.8,.22,1); will-change: transform; }
@media (hover: hover) {
  .btn:hover {
    transform: translateY(-2px) scale(1.015);
    box-shadow: 0 14px 34px -14px rgba(17,17,19,0.45);
  }
  .btn.ghost:hover {
    transform: translateY(-2px) scale(1.015);
    box-shadow: 0 10px 26px -16px rgba(17,17,19,0.35);
  }
}
.btn:active { transform: translateY(0) scale(0.985); transition-duration: .12s; }

/* Сегмент-карточки: тень глубже и мягче, золотая нить по верхней кромке
   проявляется на hover — намёк на отбор, не баннерная подсветка. */
.segment::before {
  content: '';
  position: absolute; top: 0; left: 18px; right: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0;
  transition: opacity .45s ease;
}
@media (hover: hover) {
  .segment:hover {
    transform: translateY(-5px);
    border-color: var(--ink-2);
    box-shadow: 0 42px 80px -38px rgba(17,17,19,0.28);
  }
  .segment:hover::before { opacity: 0.8; }
}

/* Карточки-фреймы (график, чертёж): лёгкий подъём при наведении. */
@media (hover: hover) {
  .chart-frame { transition: box-shadow .5s ease, transform .5s cubic-bezier(.22,.8,.22,1); }
  .chart-frame:hover {
    transform: translateY(-3px);
    box-shadow: 0 36px 80px -42px rgba(17,17,19,0.3);
  }
}

/* Reveal: opacity + transform только. Без filter:blur — это GPU-shader,
   который тормозит на интегрированной графике 2018-2020 Mac/Intel. */

/* Прогресс-рейл: активная метка получает золотую точку отсчёта. */
.rail .tick.active .bar { background: var(--gold); }

/* Ссылки навигации: подчёркивание выезжает из центра. */
.nav-links a { position: relative; padding-bottom: 3px; }
.nav-links a::after {
  content: '';
  position: absolute; left: 50%; right: 50%; bottom: 0;
  height: 1px; background: currentColor;
  transition: left .3s cubic-bezier(.2,.7,.2,1), right .3s cubic-bezier(.2,.7,.2,1);
}
.nav-links a:hover::after, .nav-links a.active::after { left: 0; right: 0; }

/* Сдержанность движения по запросу системы. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { transform: none; opacity: 1; }
}

/* Boot-занавес лендинга: фирменное открытие — монограмма «АР» и подпись
   проявляются на чернильной панели, пока грузится страница. Реализовано
   псевдоэлементами на ПУСТОМ #boot-curtain — HTML всех четырёх страниц
   не тронут. Скоуп :empty критичен: PWA импортирует этот CSS, но там
   boot-curtain уже содержит свой HTML — псевдоэлементы не должны дублировать. */
#boot-curtain:empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
#boot-curtain:empty::before {
  content: 'АР';
  font-family: var(--display);
  font-weight: 600;
  font-size: 54px;
  letter-spacing: -0.04em;
  color: #fff;
  animation: boot-mark-rise .9s cubic-bezier(.2,.7,.2,1) both;
}
#boot-curtain:empty::after {
  content: 'АУДИТОР РЫНКА · ПХУКЕТ';
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  animation: boot-sub-track 1.1s .15s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes boot-mark-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes boot-sub-track {
  from { opacity: 0; letter-spacing: 0.1em; }
  to   { opacity: 1; letter-spacing: 0.32em; }
}