/* ==== reset.css ==== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; overflow-x: clip; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; max-width: 100%; }
img, svg { display: block; max-width: 100%; }
input, textarea, button { font: inherit; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; }

@media print {
  .nav, .hero__glow, .marquee-wrap { display: none; }
  body { background: white; color: black; }
}

/* ==== variables.css ==== */
:root {
  /* Colors */
  --color-bg:             #0A0E1A;
  --color-surface:        #121826;
  --color-surface-2:      #161D2E;
  --color-border:         #1E2536;
  --color-border-hover:   #2A3448;
  --color-accent:         #CDFF4F;
  --color-accent-dim:     #9BC22F;
  --color-text-primary:   #FFFFFF;
  --color-text-secondary: #888888;
  --color-text-muted:     #949BA8;
  --color-success:        #22C55E;
  --color-white:          #FFFFFF;

  /* Typography — Geist (self-hosted, OFL) заменяет Inter в теле, Manrope убран (волна 3, аудит 30.07) */
  --font-body:    'Geist', sans-serif;
  --font-display: var(--font-body);
  --font-mono:    'JetBrains Mono', monospace;

  /* Layout */
  --max-width:             1200px;
  --section-padding:       120px 0;
  --section-padding-mobile: 64px 0;
  --gap-sm:  12px;
  --gap-md:  24px;
  --gap-lg:  48px;
  --gap-xl:  80px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 300ms cubic-bezier(0.25, 1, 0.5, 1);
}

/* ── Mobile foundation tokens (2026-07-16, редизайн мобилки) ────────────
   Единая шкала ритма/типографики, чтобы секции дышали одинаково.
   Брейкпоинты: sm=430 (телефон) · md=768 (мобилка) · lg=1024 (планшет). */
:root {
  --space-section-mobile: clamp(48px, 9vw, 72px);
  --space-block:   clamp(24px, 6vw, 40px);
  --measure:       62ch;   /* макс. ширина строки тела */
  --measure-lead:  46ch;   /* лид/подзаголовки уже */
  --font-size-base-mobile: 17px;
  --nav-h-mobile:  76px;
}

/* Redesign Deep Tech — перекраска лого-SVG без правки HTML (2026-07-10) */
.nav__logo-mark circle,.nav__logo-mark line,.footer__logo circle,.footer__logo line{stroke:var(--color-accent)!important}

/* ==== typography.css ==== */
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-primary);
  background: var(--color-bg);
}

p {
  text-wrap: pretty;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.hero__title {
  font-family: 'Unbounded', var(--font-display);
  font-size: clamp(32px, 4.8vw, 60px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.hero__title em {
  font-style: normal;
  color: var(--color-accent);
}

.section-title {
  font-family: 'Unbounded', var(--font-display);
  font-size: clamp(42px, 5.6vw, 78px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.035em;
  margin-bottom: 64px;
}
.section-title em {
  font-style: normal;
  color: var(--color-accent);
}

.section-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0.9;
}
.section-label::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
  vertical-align: middle;
  margin-top: -1px;
}

.hero__stat-num {
  font-family: var(--font-mono);
  font-size: 38px;
  font-weight: 500;
  color: var(--color-white);
  line-height: 1;
  letter-spacing: -0.02em;
}

/* ==== layout.css ==== */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 40px;
}

/* ── Scroll progress bar ── */
.progress-bar {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--color-accent), rgba(205, 255, 79,0.4));
  transform: scaleX(0);
  transform-origin: left center;
  z-index: 101;
  pointer-events: none;
}

section { padding: var(--section-padding); }

/* ── Mobile menu (hidden by default, shown via JS .open on mobile) ── */
.mobile-menu { display: none; }

/* ── Nav ── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 20px 0;
  transition: background var(--transition-base), backdrop-filter var(--transition-base);
}
.nav.scrolled {
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--color-border);
}
.nav__inner {
  display: flex;
  align-items: center;
  gap: 40px;
}
.nav__links {
  display: flex;
  gap: 32px;
  margin-left: auto;
}
.nav__links a {
  position: relative;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -6px;
  width: 100%;
  height: 1px;
  background: var(--color-accent);
  opacity: 0.85;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition-spring);
}
.nav__links a:hover { color: var(--color-text-primary); }
.nav__links a:hover::after,
.nav__links a.active::after { transform: scaleX(1); }
.nav__links a.active { color: var(--color-accent); }
.nav__cta { margin-left: 16px; text-transform: none; letter-spacing: 0.01em; }
.nav__burger { display: none; }

/* ── Hero background — премиум абстракт-видео (золотой поток) + крафтовая aurora ── */
/* Обёртка бесшовного цикла — базовая (приглушённая) непрозрачность на паре видео */
.hero__bgvideo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  overflow: hidden;
}
/* Два экземпляра видео внутри обёртки для бесшовной склейки */
.bgloop__el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateZ(0);
}
.bgloop__el[data-role="b"] { z-index: 0; }
.bgloop__el[data-role="a"] { z-index: 1; }
.hero__aurora {
  position: absolute;
  inset: -12% -6% 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(46% 52% at 82% 6%, rgba(205, 255, 79, 0.13), transparent 62%),
    radial-gradient(38% 44% at 4% 82%, rgba(205, 255, 79, 0.05), transparent 60%),
    radial-gradient(85% 75% at 55% 32%, rgba(10, 10, 12, 0.32), transparent 74%);
}
/* Читаемость текста слева + мягкий переход в следующую секцию снизу */
.hero__aurora::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10, 10, 10, 0.78) 0%, rgba(10, 10, 10, 0.34) 32%, rgba(10, 10, 10, 0) 58%),
    linear-gradient(0deg, #0a0a0a 0%, rgba(10, 10, 10, 0) 22%);
}

/* ── Hero particles canvas ── */
#hero-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

/* ── Hero ── */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 120px;
  overflow: hidden;
  position: relative;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 64px 64px;
  z-index: 0;
  pointer-events: none;
}
.hero__inner {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 80px);
  padding-bottom: 0;
}

/* ── Hero Split Layout ── */
.hero__split {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 80px;
  align-items: center;
  padding: 80px 0 56px;
  flex: 1;
}

.hero__left {
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.hero__left .hero__eyebrow { margin-bottom: 0; }
.hero__left .hero__actions { margin-bottom: 0; }

/* Right: video in premium frame */
.hero__right {
  position: relative;
  display: flex;
  flex-direction: column;
}
.hero__right::before {
  content: '';
  position: absolute;
  inset: -60px -60px -60px -40px;
  background: radial-gradient(ellipse at 50% 40%, rgba(205, 255, 79,0.08) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.hero__frame { position: relative; z-index: 1; }

.hero__frame {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  background: #080808;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.05),
    0 40px 100px rgba(0,0,0,0.75),
    0 0 160px rgba(205, 255, 79,0.14);
  transform: perspective(1100px) rotateX(4deg) rotateY(-10deg) translateZ(0px);
  will-change: transform;
  transform-style: preserve-3d;
}

.hero__frame-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: rgba(255,255,255,0.022);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}

.hero__frame-url {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(255,255,255,0.2);
  letter-spacing: 0.02em;
}

.hero__demo-video {
  width: 100%;
  display: block;
  max-height: 500px;
  object-fit: cover;
  object-position: center top;
}

.hero__frame-glow {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(transparent, rgba(8,8,8,0.85));
  pointer-events: none;
}

/* ── Metrics row ── */
.hero__metrics {
  display: flex;
  align-items: center;
  padding: 32px 0 40px;
  border-top: 1px solid rgba(255,255,255,0.07);
}

.hero__metric {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0 52px;
  flex: 1;
}
.hero__metric:first-child { padding-left: 0; }
.hero__metric:last-child  { padding-right: 0; }

.hero__metric-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 40px;
  color: var(--color-text-primary);
  line-height: 1;
  letter-spacing: -0.03em;
  transition: color var(--transition-base), text-shadow var(--transition-base);
  white-space: nowrap;
}
.hero__metric:hover .hero__metric-num {
  color: var(--color-accent);
  text-shadow: 0 0 28px rgba(205, 255, 79,0.35);
}

.hero__metric-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: rgba(255,255,255,0.38);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.5;
}

.hero__metric-sep {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.16), transparent);
  flex-shrink: 0;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  color: var(--color-text-secondary);
  margin-bottom: 48px;
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 9px 18px;
  border: 1px solid rgba(205, 255, 79, 0.22);
  background: rgba(205, 255, 79, 0.04);
  border-radius: 100px;
  width: fit-content;
  box-shadow: 0 0 24px rgba(205, 255, 79, 0.06), inset 0 0 24px rgba(205, 255, 79, 0.03);
}

.hero__subtitle {
  font-size: 18px;
  line-height: 1.65;
  color: rgba(255,255,255,0.62);
  max-width: 500px;
  margin: 0;
  letter-spacing: 0.01em;
}

.hero__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 0;
}

.hero__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  position: relative;
}
.hero__stats::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(205, 255, 79,0.4) 30%, rgba(205, 255, 79,0.4) 70%, transparent);
}
.hero__stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px 32px;
  background: rgba(10, 10, 10, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero__stat-label {
  font-size: 11px;
  color: var(--color-text-muted);
  line-height: 1.5;
  letter-spacing: 0.02em;
}

/* Glow effects */
.hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);
  pointer-events: none;
  z-index: 1;
}
.hero__glow--1 {
  width: 900px; height: 700px;
  background: radial-gradient(ellipse, rgba(205, 255, 79, 0.14) 0%, transparent 70%);
  top: -300px; right: -200px;
  animation: aurora-drift-1 14s ease-in-out infinite;
}
.hero__glow--2 {
  width: 600px; height: 500px;
  background: radial-gradient(ellipse, rgba(205, 255, 79, 0.07) 0%, transparent 70%);
  bottom: -100px; left: 100px;
  animation: aurora-drift-2 18s ease-in-out infinite;
}
.hero__glow--3 {
  width: 700px; height: 600px;
  background: radial-gradient(ellipse, rgba(205, 255, 79, 0.07) 0%, transparent 70%);
  top: -200px; left: -150px;
  animation: aurora-drift-1 20s ease-in-out infinite reverse;
}

/* Noise grain overlay */
.hero__noise {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* Dot */
.dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dot--green {
  background: var(--color-success);
  box-shadow: 0 0 8px var(--color-success);
  animation: pulse-green 2s infinite;
}
@keyframes pulse-green {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ── Marquee ── */
.marquee-wrap {
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  padding: 18px 0;
  background: var(--color-surface);
  position: relative;
}
.marquee-wrap::before,
.marquee-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.marquee-wrap::before {
  left: 0;
  background: linear-gradient(90deg, var(--color-surface), transparent);
}
.marquee-wrap::after {
  right: 0;
  background: linear-gradient(270deg, var(--color-surface), transparent);
}
.marquee {
  display: flex;
  gap: 40px;
  white-space: nowrap;
  animation: marquee 30s linear infinite;
  width: max-content;
}
.marquee span {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--color-text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.marquee .sep { color: var(--color-accent); opacity: 0.35; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Services grid ── */
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  background: transparent;
}
.service-card--wide { grid-column: span 2; }

/* ── Cases grid ── */
.cases__header { padding-bottom: 0; }

/* Vertical grid — intuitive (scroll down), no pinned horizontal scroll */
.cases__track {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 40px;
}
.cases__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.case-card {
  width: auto;
}
/* Odd 5th card becomes a full-width finale */
.case-card:last-child { grid-column: 1 / -1; }

/* ── Process ── */
.process__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  position: relative;
}
.process__steps::before {
  content: '';
  position: absolute;
  top: 26px; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(205, 255, 79,0.6) 0%,
    rgba(205, 255, 79,0.2) 40%,
    rgba(255,255,255,0.04) 100%
  );
}

/* ── Pricing layout ── */
.pricing__card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(205, 255, 79, 0.06);
  border: 1px solid rgba(205, 255, 79, 0.15);
  margin-bottom: 64px;
  box-shadow:
    0 0 80px rgba(205, 255, 79, 0.07),
    0 0 0 1px rgba(205, 255, 79, 0.05) inset;
  position: relative;
  overflow: hidden;
}
.pricing__card::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(205, 255, 79,0.7) 30%, rgba(205, 255, 79,0.7) 70%, transparent);
  z-index: 0;
}
.pricing__left, .pricing__right { position: relative; z-index: 1; }

/* ── Contact layout ── */
.contact__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

/* ── Footer layout ── */
.footer {
  border-top: 1px solid var(--color-border);
  padding: 48px 0 24px;
}
.footer__inner {
  display: flex;
  align-items: flex-start;
  gap: 48px;
  margin-bottom: 40px;
}
.footer__bottom {
  border-top: 1px solid var(--color-border);
  padding-top: 24px;
  font-size: 12px;
  color: rgba(255,255,255,0.6);
}

/* Telegram contact (added 2026-07-10) */
.nav__tg{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;color:#CDFF4F;border:1px solid rgba(205, 255, 79,.35);transition:background .2s,transform .2s;margin-right:2px;flex:0 0 auto}
.nav__tg:hover{background:rgba(205, 255, 79,.12);transform:translateY(-1px)}
@media(max-width:768px){.nav__tg{width:34px;height:34px;margin-right:8px}}
.form-tg-hint{display:block;margin-top:14px;color:#CDFF4F;text-decoration:underline;text-underline-offset:3px;font-size:15px}

/* ==== components.css ==== */
/* ── Niche switcher (hero mockup) ── */
.niche-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}
.niche-switch__hint {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-right: 2px;
}
.niche-chip {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 7px 15px;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.niche-chip:hover {
  color: var(--color-text-primary);
  border-color: var(--color-border-hover);
}
.niche-chip.is-active {
  color: #0A0A0A;
  background: var(--color-accent);
  border-color: var(--color-accent);
  font-weight: 600;
}

/* строка-результат под мокапом — конкретная выгода под нишу */
.niche-result {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 22px;
  transition: opacity 0.2s ease;
}
.niche-result__mark {
  color: var(--color-accent);
  font-weight: 700;
  font-size: 15px;
  align-self: center;
}
.niche-result__main {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(16px, 1.5vw, 20px);
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}
.niche-result__sub {
  font-size: 13px;
  color: var(--color-text-secondary);
}

/* ── «Зеркало бизнеса» — калькулятор потерь ── */
.mirror {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 480px;
}
.mirror__q {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-top: 4px;
}
.mirror__opts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mirror__opts button {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.mirror__opts button:hover {
  color: var(--color-text-primary);
  border-color: var(--color-border-hover);
}
.mirror__opts button.is-active {
  color: #0A0A0A;
  background: var(--color-accent);
  border-color: var(--color-accent);
  font-weight: 600;
}
.mirror__result {
  /* Свёрнут по умолчанию — плавно раскрывается, а не прыгает на 218px,
     когда в калькуляторе выбраны клиенты + чек. */
  max-height: 0;
  margin-top: 0;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  background: rgba(205, 255, 79, 0.04);
  opacity: 0;
  overflow: hidden;
  transition:
    max-height 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    padding 0.4s ease,
    margin-top 0.4s ease,
    opacity 0.4s ease,
    border-color 0.4s ease;
}
.mirror__result.is-open {
  max-height: 400px;
  margin-top: 8px;
  padding: 20px 22px;
  border-color: rgba(205, 255, 79, 0.22);
  opacity: 1;
}
@keyframes mirrorIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mirror__loss {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.15;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
}
.mirror__num {
  font-family: var(--font-mono);
  color: var(--color-accent);
}
.mirror__sub {
  margin-top: 8px;
  font-size: 14px;
  color: var(--color-text-secondary);
}
.mirror__cta {
  margin-top: 16px;
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-body);
  padding: 13px 26px;
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
  border: 1px solid transparent;
  letter-spacing: 0.01em;
  text-transform: none;
  border-radius: 14px;
}
.btn--lg   { padding: 16px 34px; font-size: 15px; }
.btn--full { width: 100%; }

.btn--accent {
  background: var(--color-accent);
  color: #000;
  border-color: var(--color-accent);
  font-weight: 600;
  box-shadow: 0 0 32px rgba(205, 255, 79, 0.22);
  position: relative;
  overflow: hidden;
}
.btn--accent::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent);
  transform: skewX(-20deg);
  transition: left 0.55s ease;
  pointer-events: none;
}
.btn--accent:hover {
  background: #DBFF6E;
  border-color: #DBFF6E;
  box-shadow: 0 0 52px rgba(205, 255, 79, 0.48), 0 4px 24px rgba(0,0,0,0.3);
  transform: translateY(-1px);
}
.btn--accent:hover::after { left: 140%; }
.btn--accent:active {
  transform: translateY(0);
  box-shadow: 0 0 20px rgba(205, 255, 79, 0.18);
}

.btn--ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: rgba(255,255,255,0.1);
}
.btn--ghost:hover {
  color: var(--color-text-primary);
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.04);
  transform: translateY(-1px);
}

.btn--success {
  background: var(--color-success) !important;
  border-color: var(--color-success) !important;
  color: #000 !important;
  box-shadow: 0 0 32px rgba(34, 197, 94, 0.25) !important;
}

.btn--error {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #fff !important;
  box-shadow: 0 0 32px rgba(239, 68, 68, 0.25) !important;
}

/* ── Form validation states ── */
.field--error input,
.field--error textarea,
input.field--error,
textarea.field--error {
  border-color: #ef4444 !important;
}
.field-error {
  display: block;
  font-size: 12px;
  color: #ef4444;
  margin-top: 4px;
}

/* ── Text selection — gold brand signal ── */
::selection      { background: rgba(205, 255, 79, 0.85); color: #000; text-shadow: none; }
::-moz-selection { background: rgba(205, 255, 79, 0.85); color: #000; text-shadow: none; }

/* ── Custom scrollbar — thin, dark, gold on hover ── */
@media (pointer: fine) {
  html { scrollbar-width: thin; scrollbar-color: #2a2a2a var(--color-bg); }
  ::-webkit-scrollbar { width: 11px; height: 11px; }
  ::-webkit-scrollbar-track { background: var(--color-bg); }
  ::-webkit-scrollbar-thumb {
    background: #2a2a2a;
    border-radius: 8px;
    border: 3px solid var(--color-bg);
    transition: background var(--transition-base);
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--color-accent-dim); }
}

/* ── Screen reader only ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* skip-to-content для клавиатуры (a11y) */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100000;background:var(--color-accent,#CDFF4F);color:#000;padding:10px 16px;border-radius:0 0 8px 0;font-weight:600;text-decoration:none}
.skip-link:focus{left:0}

/* hero risk-reversal под CTA — настоящая гарантия у точки решения */
.hero__assurance{display:flex;align-items:flex-start;gap:9px;margin-top:22px;max-width:470px;font-family:var(--font-body);font-size:13px;line-height:1.5;color:var(--color-text-secondary)}
.hero__assurance svg{color:var(--color-accent);flex-shrink:0;margin-top:1px}
.hero__assurance strong{color:var(--color-text-primary);font-weight:600}

/* ==== sections.css ==== */
/* ── Trust section ── */
.trust {
  padding: 64px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.trust__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  background: transparent;
}
.trust-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.008));
  padding: 30px 26px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 18px;
  transition: background var(--transition-base), border-color var(--transition-slow);
  position: relative;
}
.trust-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--color-accent), rgba(205, 255, 79,0.2) 60%, transparent);
  opacity: 0;
  transition: opacity var(--transition-slow);
}
.trust-card:hover { background: var(--color-surface); }
.trust-card:hover::after { opacity: 1; }
.trust-card__icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(205, 255, 79,0.2);
  background: rgba(205, 255, 79,0.04);
  color: var(--color-accent);
  flex-shrink: 0;
  margin-top: 2px;
}
.trust-card__title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: 5px;
  letter-spacing: -0.01em;
}
.trust-card__desc {
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.55;
  letter-spacing: 0.01em;
}

/* ── Nav CTA sentence case ── */
.nav__cta.btn { text-transform: none; letter-spacing: 0.01em; }

/* ── Logo (crisp vector wordmark) ── */
.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.nav__logo-mark {
  flex-shrink: 0;
  filter: drop-shadow(0 0 9px rgba(205, 255, 79,0.45));
  transition: transform 0.45s cubic-bezier(0.22,1,0.36,1);
}
.nav__logo:hover .nav__logo-mark {
  transform: rotate(-14deg) scale(1.06);
}
.nav__logo-text {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #fff;
}
.footer__logo { margin-bottom: 14px; }

/* ── Bento video cell ── */
.bento-cell--mockup {
  padding: 0 !important;
  position: relative;
}
.bento-cell--mockup::after { display: none !important; }

.bento-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  min-height: 300px;
}

.bento-video__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right,  rgba(10,10,10,0.35) 0%, transparent 30%),
    linear-gradient(to bottom, rgba(10,10,10,0.2)  0%, transparent 20%),
    linear-gradient(to top,    rgba(10,10,10,0.55) 0%, transparent 40%);
}

/* ── Hero title underline accent ── */
.hero__underline {
  position: relative;
  display: inline;
}
.hero__underline::after {
  content: '';
  position: absolute;
  bottom: -6px; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-accent), rgba(205, 255, 79,0.3) 80%, transparent);
  border-radius: 1px;
}

/* ── Scroll hint ── */
.scroll-hint {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 4;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.scroll-hint__text {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.18);
}
.scroll-hint__icon {
  color: rgba(255,255,255,0.22);
  animation: scroll-bounce 2.2s ease-in-out infinite;
  display: block;
}

/* ── Mockup live dot ── */
.mockup-live-dot {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--color-success);
  box-shadow: 0 0 5px var(--color-success);
  animation: pulse-green 1.5s ease-in-out infinite;
  margin-right: 4px;
  vertical-align: middle;
  position: relative;
  top: -0.5px;
  flex-shrink: 0;
}

/* ── Mockup stagger animation ── */
.mockup-window .mockup-titlebar,
.mockup-window .mockup-stats-row,
.mockup-window .mockup-table,
.mockup-window .mockup-chart {
  opacity: 0;
  transform: translateY(6px);
}
.mockup-window.live .mockup-titlebar { animation: mockup-item-in 0.45s cubic-bezier(0.22,1,0.36,1) 0.2s forwards; }
.mockup-window.live .mockup-stats-row { animation: mockup-item-in 0.45s cubic-bezier(0.22,1,0.36,1) 0.4s forwards; }
.mockup-window.live .mockup-table     { animation: mockup-item-in 0.45s cubic-bezier(0.22,1,0.36,1) 0.6s forwards; }
.mockup-window.live .mockup-chart     { animation: mockup-item-in 0.45s cubic-bezier(0.22,1,0.36,1) 0.8s forwards; }

/* ── Hero mockup window ── */
.mockup-window {
  width: 100%;
  max-width: 460px;
  background: rgba(14, 14, 14, 0.92);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  overflow: hidden;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04),
    0 40px 120px rgba(0,0,0,0.6),
    0 0 80px rgba(205, 255, 79,0.07);
  animation: mockup-float 7s ease-in-out infinite;
}
.mockup-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  background: rgba(255,255,255,0.025);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mockup-dots { display: flex; gap: 6px; }
.mockup-dots span {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
}
.mockup-dots span:first-child { background: #ff5f56; }
.mockup-dots span:nth-child(2) { background: #ffbd2e; }
.mockup-dots span:last-child { background: #27c93f; }
.mockup-url {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(255,255,255,0.22);
  letter-spacing: 0.02em;
}
.mockup-content {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mockup-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.mockup-mini-stat {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px;
  padding: 10px 11px;
}
.mockup-mini-stat-val {
  display: block;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  line-height: 1;
  margin-bottom: 4px;
}
.mockup-mini-stat-val--accent { color: var(--color-accent); }
.mockup-mini-stat-label {
  font-size: 9px;
  color: rgba(255,255,255,0.28);
  letter-spacing: 0.02em;
}
.mockup-table {
  background: rgba(255,255,255,0.015);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 6px;
  overflow: hidden;
}
.mockup-table-head {
  display: grid;
  grid-template-columns: 1fr 80px 68px;
  padding: 7px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.mockup-table-head span {
  font-size: 9px;
  color: rgba(255,255,255,0.2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--font-mono);
}
.mockup-row {
  display: grid;
  grid-template-columns: 1fr 80px 68px;
  align-items: center;
  padding: 7px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.mockup-row:last-child { border-bottom: none; }
.mockup-client { display: flex; align-items: center; gap: 7px; }
.mockup-avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(205, 255, 79,0.12);
  border: 1px solid rgba(205, 255, 79,0.2);
  color: var(--color-accent);
  font-size: 7px;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-mono);
}
.mockup-name {
  font-size: 11px;
  color: rgba(255,255,255,0.65);
}
.mockup-badge {
  display: inline-flex;
  padding: 2px 7px;
  border-radius: 100px;
  font-size: 8px;
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.03em;
}
.mockup-badge--green {
  background: rgba(34,197,94,0.1);
  color: #4ade80;
  border: 1px solid rgba(34,197,94,0.18);
}
.mockup-badge--yellow {
  background: rgba(205, 255, 79,0.1);
  color: var(--color-accent);
  border: 1px solid rgba(205, 255, 79,0.18);
}
.mockup-badge--blue {
  background: rgba(96,165,250,0.1);
  color: #93c5fd;
  border: 1px solid rgba(96,165,250,0.18);
}
.mockup-amount {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(255,255,255,0.45);
  text-align: right;
}
.mockup-chart {
  background: rgba(255,255,255,0.015);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 6px;
  padding: 10px 12px;
}
.mockup-chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 44px;
  margin-bottom: 6px;
}
.mockup-bar {
  flex: 1;
  background: rgba(255,255,255,0.07);
  border-radius: 2px 2px 0 0;
}
.mockup-bar--accent { background: rgba(205, 255, 79,0.55); }
.mockup-chart-label {
  font-size: 9px;
  color: rgba(255,255,255,0.18);
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ── Before / After section ── */
.before-after {
  position: relative;
  overflow: hidden;
}
.before-after::before {
  content: '';
  position: absolute;
  bottom: -60px; left: 50%;
  transform: translateX(-50%);
  width: 800px; height: 500px;
  background: radial-gradient(ellipse, rgba(205, 255, 79,0.045) 0%, transparent 65%);
  pointer-events: none;
}
.before-after .container { position: relative; z-index: 1; }
/* Премиум-сравнение вместо плоской таблицы: карточка с глубиной + золотая
   светящаяся «сторона Uniqore» (визуальная история «хаос → система»). */
.ba-table {
  position: relative;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.022), rgba(255,255,255,0.006));
  box-shadow: 0 44px 110px -50px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,255,255,0.05);
}
/* Золотая светящаяся панель под колонкой «С Uniqore» */
.ba-table::after {
  content: '';
  position: absolute; top: 0; bottom: 0; right: 0;
  left: calc(220px + (100% - 220px) / 2);
  background: linear-gradient(180deg, rgba(205, 255, 79,0.10), rgba(205, 255, 79,0.028));
  box-shadow: inset 0 0 90px rgba(205, 255, 79,0.06);
  border-left: 1px solid rgba(205, 255, 79,0.24);
  pointer-events: none; z-index: 0;
}
.ba-header, .ba-row { position: relative; z-index: 1; }
.ba-header {
  display: grid;
  grid-template-columns: 220px 1fr 1fr;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ba-header__empty { padding: 26px 34px; }
.ba-header__col {
  display: flex; align-items: center; gap: 10px;
  padding: 26px 34px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ba-header__col--before { color: rgba(255,255,255,0.32); }
.ba-header__col--after  { color: var(--color-accent); font-weight: 500; }
.ba-row {
  display: grid;
  grid-template-columns: 220px 1fr 1fr;
  border-bottom: 1px solid rgba(255,255,255,0.045);
  transition: background var(--transition-base);
}
.ba-row:last-child { border-bottom: none; }
.ba-row__label {
  padding: 30px 34px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-white);
  font-family: var(--font-display);
  display: flex; align-items: center;
}
.ba-row__before {
  padding: 30px 34px;
  font-size: 14.5px;
  color: rgba(255,255,255,0.35);
  line-height: 1.55;
  display: flex; align-items: center; gap: 13px;
}
.ba-row__before::before {
  content: '✕';
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255,90,90,0.1);
  color: rgba(255,125,125,0.75);
  font-size: 11px; flex-shrink: 0;
}
.ba-row__after {
  padding: 30px 34px;
  font-size: 14.5px;
  color: rgba(255,255,255,0.92);
  line-height: 1.55;
  font-weight: 500;
  display: flex; align-items: center; gap: 13px;
}
.ba-row__after::before {
  content: '✓';
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(205, 255, 79,0.16);
  color: var(--color-accent);
  font-size: 11px; flex-shrink: 0;
  box-shadow: 0 0 14px rgba(205, 255, 79,0.3);
}
.ba-row:hover { background: rgba(255,255,255,0.014); }

/* ── Section ambient glow treatments ── */
.services {
  position: relative;
  overflow: hidden;
}
.services::before {
  content: '';
  position: absolute;
  top: -160px; left: 50%;
  transform: translateX(-50%);
  width: 1000px; height: 700px;
  background: radial-gradient(ellipse, rgba(205, 255, 79,0.06) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.services .container { position: relative; z-index: 1; }

.cases {
  position: relative;
}
.cases::before {
  content: '';
  position: absolute;
  bottom: -80px; right: -120px;
  width: 700px; height: 600px;
  background: radial-gradient(ellipse, rgba(205, 255, 79,0.05) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.cases .container { position: relative; z-index: 1; }

.process {
  position: relative;
  overflow: hidden;
}
.process::before {
  content: '';
  position: absolute;
  top: 50%; left: -180px;
  transform: translateY(-50%);
  width: 700px; height: 600px;
  background: radial-gradient(ellipse, rgba(205, 255, 79,0.06) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.process .container { position: relative; z-index: 1; }

.testimonials {
  position: relative;
  overflow: hidden;
}
.testimonials::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent 5%, rgba(205, 255, 79,0.35) 35%, rgba(205, 255, 79,0.35) 65%, transparent 95%);
  pointer-events: none;
}
.testimonials::after {
  content: '';
  position: absolute;
  top: 20%; left: 50%;
  transform: translateX(-50%);
  width: 900px; height: 600px;
  background: radial-gradient(ellipse, rgba(205, 255, 79,0.04) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.guarantees {
  position: relative;
  overflow: hidden;
}
.guarantees::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent 5%, rgba(205, 255, 79,0.2) 35%, rgba(205, 255, 79,0.2) 65%, transparent 95%);
  pointer-events: none;
  z-index: 1;
}
.guarantees .container { position: relative; z-index: 1; }

.niches {
  position: relative;
}
.niches::after {
  content: '';
  position: absolute;
  top: 50%; right: 0;
  transform: translateY(-50%);
  width: 600px; height: 600px;
  background: radial-gradient(ellipse, rgba(205, 255, 79,0.055) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.niches .container { position: relative; z-index: 1; }

/* ── Niches particle canvas ── */
.niches__particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.55;
  pointer-events: none;
}

/* ── Niches new editorial layout ── */
.niches__inner {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 100px;
  align-items: start;
}
.niches__headline {
  position: relative;
  will-change: transform;
}
.niches__big-text {
  font-family: var(--font-display);
  font-size: clamp(44px, 5vw, 68px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.035em;
}
.niches__big-text em {
  font-style: italic;
  color: var(--color-accent);
  text-shadow: 0 0 60px rgba(205, 255, 79,0.45), 0 0 120px rgba(205, 255, 79,0.2);
}
.niches__list {
  display: flex;
  flex-direction: column;
}
.niche-row {
  display: flex;
  align-items: center;
  padding: 30px 0 30px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  gap: 28px;
  transition: padding-left 0.3s ease, border-color 0.3s ease;
  cursor: default;
  position: relative;
}
.niche-row:first-child { border-top: 1px solid rgba(255,255,255,0.05); }
.niche-row:hover {
  padding-left: 10px;
  border-bottom-color: rgba(205, 255, 79,0.25);
}
.niche-row:hover .niche-row__name { color: var(--color-text-primary); }
.niche-row:hover .niche-row__num { opacity: 1; }
.niche-row__num {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-accent);
  letter-spacing: 0.14em;
  min-width: 28px;
  flex-shrink: 0;
  opacity: 0.45;
  transition: opacity 0.25s ease;
}
.niche-row__name {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.8vw, 34px);
  color: rgba(255,255,255,0.66); /* было #888 — слишком призрачно; ярче, но всё ещё «оживает» до белого на hover */
  flex: 1;
  transition: color 0.25s ease;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.niche-row__tags {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(255,255,255,0.2);
  letter-spacing: 0.05em;
  text-align: right;
  flex-shrink: 0;
}

/* ── Service cards ── */
.service-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.008));
  padding: 44px 40px;
  position: relative;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 22px;
  transition: background var(--transition-base), box-shadow var(--transition-slow), border-color var(--transition-slow);
  overflow: hidden;
  cursor: default;
}
.service-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--color-accent) 0%, rgba(205, 255, 79,0.4) 40%, transparent 80%);
  opacity: 0;
  transition: opacity var(--transition-slow);
}
.service-card:hover {
  background: var(--color-surface-2);
  box-shadow:
    0 0 60px rgba(205, 255, 79, 0.05),
    inset 0 0 40px rgba(205, 255, 79, 0.02);
}
.service-card:hover::after { opacity: 1; }

.service-card__icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(205, 255, 79, 0.2);
  background: rgba(205, 255, 79, 0.05);
  color: var(--color-accent);
  margin-bottom: 28px;
  transition: border-color var(--transition-base), background var(--transition-base);
}
.service-card:hover .service-card__icon {
  border-color: rgba(205, 255, 79, 0.4);
  background: rgba(205, 255, 79, 0.09);
}
.service-card[data-index]::before {
  content: attr(data-index);
  position: absolute;
  bottom: -16px; right: 12px;
  font-family: var(--font-mono);
  font-size: 100px;
  font-weight: 700;
  color: rgba(255,255,255,0.022);
  letter-spacing: -0.05em;
  line-height: 1;
  user-select: none;
  pointer-events: none;
}
.service-card h3 {
  font-size: 21px;
  font-family: var(--font-display);
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}
.service-card p {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.75;
  margin-bottom: 28px;
}
.service-card__features {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.service-card__features li {
  font-size: 12px;
  color: var(--color-text-secondary);
  padding-left: 16px;
  position: relative;
  letter-spacing: 0.01em;
}
.service-card__features li::before {
  content: '→';
  position: absolute; left: 0;
  color: var(--color-accent);
  font-size: 10px;
  opacity: 0.7;
}

/* ── Case cards ── */
.case-card {
  background: var(--color-surface);
  padding: 44px 40px;
  transition: background var(--transition-base), box-shadow var(--transition-spring);
  cursor: default;
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 12px;
}
.case-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 50%, transparent 100%);
  z-index: 2;
}
.case-card:hover {
  background: var(--color-surface-2);
  z-index: 3;
  box-shadow:
    0 22px 55px -18px rgba(0,0,0,0.7),
    0 0 0 1px rgba(205, 255, 79,0.16),
    0 0 44px rgba(205, 255, 79,0.07);
}
/* Screenshot zooms gently on hover */
.case-card__top--screen img {
  transition: transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
.case-card:hover .case-card__top--screen img { transform: scale(1.05); }

/* ── Case card: top visual block (screenshot or number) ── */
.case-card--has-top {
  padding: 0;
  display: flex;
  flex-direction: column;
}
.case-card__top {
  height: 200px;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: rgba(205, 255, 79, 0.015);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.case-card__num {
  font-family: var(--font-mono);
  font-size: 120px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.05em;
  color: rgba(205, 255, 79, 0.06);
  padding-right: 24px;
  user-select: none;
}
/* Screenshot top block */
.case-card__top--screen {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  background: #111;
  border-bottom-color: rgba(205, 255, 79,0.12);
}
.case-card__chrome {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  background: #1c1c1c;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.case-card__chrome span {
  width: 9px; height: 9px;
  border-radius: 50%;
}
.case-card__chrome span:nth-child(1) { background: #ff5f57; }
.case-card__chrome span:nth-child(2) { background: #ffbd2e; }
.case-card__chrome span:nth-child(3) { background: #28c840; }
.case-card__top--screen img {
  width: 100%;
  flex: 1;
  min-height: 0;
  object-fit: cover;
  object-position: top left;
  display: block;
}
/* Fade screenshot into card background */
.case-card__top--screen::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 56px;
  background: linear-gradient(to bottom, transparent, var(--color-surface));
  pointer-events: none;
  z-index: 1;
}
/* Body: content below the top block */
.case-card__body {
  padding: 24px 32px 32px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.case-card__body .case-card__result {
  margin-top: auto;
  padding-top: 20px;
}

.case-card__meta {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
}
.case-card__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  padding: 4px 10px;
  border: 1px solid rgba(205, 255, 79, 0.3);
}
.case-card__time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-muted);
}
.case-card__title {
  font-size: 22px;
  font-family: var(--font-display);
  line-height: 1.3;
  margin-bottom: 12px;
}
.case-card__desc {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: 28px;
}
.case-card__metrics {
  display: flex; gap: 32px;
}
.case-card__metric {
  display: flex; flex-direction: column; gap: 4px;
}
.case-card__metric-val {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 500;
  color: var(--color-accent);
  letter-spacing: -0.02em;
  line-height: 1;
}
.case-card__metric-label {
  font-size: 11px;
  color: var(--color-text-muted);
  letter-spacing: 0.01em;
  line-height: 1.4;
}

/* ── Case card story format ── */
.case-card__story {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
  padding: 16px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 6px;
}
.case-story__row {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: 13px;
  line-height: 1.55;
}
.case-story__label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  min-width: 52px;
  flex-shrink: 0;
  padding-top: 1px;
  opacity: 0.75;
}
.case-story__text {
  color: var(--color-text-secondary);
  flex: 1;
}
.case-card__result {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.case-card__result-val {
  font-family: var(--font-mono);
  font-size: 36px;
  font-weight: 500;
  color: var(--color-accent);
  letter-spacing: -0.03em;
  line-height: 1;
  text-shadow: 0 0 40px rgba(205, 255, 79,0.3);
}
.case-card__result-label {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.4;
  max-width: 260px;
}

/* ── Process steps ── */
.process__step { position: relative; }
.process__step-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--color-accent);
  background: var(--color-bg);
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(205, 255, 79, 0.35);
  margin-bottom: 28px;
  position: relative; z-index: 1;
  letter-spacing: 0.06em;
  box-shadow: 0 0 24px rgba(205, 255, 79, 0.1), inset 0 0 12px rgba(205, 255, 79, 0.04);
  transition: box-shadow var(--transition-slow), border-color var(--transition-slow);
}
.process__step:hover .process__step-num {
  border-color: rgba(205, 255, 79, 0.6);
  box-shadow: 0 0 40px rgba(205, 255, 79, 0.2), inset 0 0 20px rgba(205, 255, 79, 0.06);
}
.process__step h3 {
  font-size: 19px;
  font-family: 'Unbounded', var(--font-display);
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.process__step p {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.6;
  max-width: var(--measure);
}
.process__step-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
}
.process__step-time::before {
  content: '';
  width: 16px; height: 1px;
  background: var(--color-accent);
  opacity: 0.5;
}

/* ── Pricing ── */
.pricing__left,
.pricing__right {
  background: var(--color-surface);
  padding: 48px;
}
.pricing__left h3 {
  font-family: 'Unbounded', var(--font-display);
  font-size: 28px;
  margin-bottom: 12px;
}
.pricing__left p {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: 28px;
}
.pricing__includes {
  display: flex; flex-direction: column; gap: 10px;
}
.pricing__includes li {
  font-size: 14px;
  color: var(--color-text-secondary);
}
.pricing__price-block {
  display: flex; flex-direction: column; gap: 16px;
  margin-bottom: 32px;
}
.pricing__price {
  display: flex; align-items: baseline; gap: 12px;
}
.pricing__price-val {
  font-family: var(--font-mono);
  font-size: 52px;
  font-weight: 500;
  color: var(--color-accent);
  line-height: 1;
  letter-spacing: -0.03em;
  text-shadow: 0 0 60px rgba(205, 255, 79, 0.3);
}
.pricing__price-period {
  font-size: 13px;
  color: var(--color-text-secondary);
}
.pricing__note {
  margin-top: 16px;
  font-size: 12px;
  color: var(--color-text-muted);
  text-align: center;
  line-height: 1.6;
}

/* ── Pricing: что входит (раскрывающийся) ── */
.pricing__unpack { margin-bottom: 48px; }
.unpack__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 32px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.unpack__toggle:hover { border-color: var(--color-border-hover); background: var(--color-surface-2); }
.unpack__toggle-main { display: flex; flex-direction: column; gap: 5px; }
.unpack__toggle-label {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.unpack__toggle-sub { font-size: 13px; color: var(--color-text-secondary); }
.unpack__toggle-icon {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-accent);
  transition: transform 0.3s ease, border-color 0.25s ease;
}
.unpack__toggle:hover .unpack__toggle-icon { border-color: var(--color-accent); }
.unpack__toggle[aria-expanded="true"] .unpack__toggle-icon { transform: rotate(180deg); }

.unpack__panel {
  border: 1px solid var(--color-border);
  border-top: none;
  padding: 8px 32px 32px;
  background: var(--color-surface);
}
.unpack__panel[hidden] { display: none; }
.unpack__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
}
.unpack__cat {
  background: var(--color-surface);
  padding: 26px 24px;
}
.unpack__cat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}
.unpack__cat-n {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-accent);
  opacity: 0.7;
}
.unpack__cat ul { display: flex; flex-direction: column; gap: 9px; }
.unpack__cat li {
  position: relative;
  padding-left: 22px;
  font-size: 13.5px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.unpack__cat li::before {
  content: '';
  position: absolute;
  left: 0; top: 6px;
  width: 11px; height: 6px;
  border-left: 1.5px solid var(--color-accent);
  border-bottom: 1.5px solid var(--color-accent);
  transform: rotate(-45deg);
  opacity: 0.85;
}
/* Карточка новинки — uni-агент */
.unpack__cat--new {
  background: linear-gradient(180deg, rgba(205, 255, 79,0.06), rgba(205, 255, 79,0.015));
  box-shadow: inset 0 0 0 1px rgba(205, 255, 79,0.35);
}
.unpack__cat--new .unpack__cat-head { color: var(--color-accent); }
.unpack__cat--new li { color: var(--color-text-primary); }
.unpack__cat-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--color-bg);
  background: var(--color-accent);
  padding: 3px 7px;
  border-radius: var(--radius-sm);
}
.unpack__foot {
  margin-top: 24px;
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.6;
  max-width: 620px;
}

/* ── Pricing market compare ── */
.pricing__market { margin-bottom: 48px; }
.market-compare {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 32px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.market-compare__item {
  flex: 1;
  padding: 24px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.015);
  text-align: center;
}
.market-compare__item--dim { opacity: 0.55; }
.market-compare__item--highlight {
  border-color: rgba(205, 255, 79,0.35);
  background: rgba(205, 255, 79,0.04);
  opacity: 1;
  box-shadow: 0 0 60px rgba(205, 255, 79,0.08);
}
.market-compare__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 10px;
}
.market-compare__badge {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 10px;
}
.market-compare__price {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.market-compare__item--highlight .market-compare__price {
  color: var(--color-accent);
  text-shadow: 0 0 40px rgba(205, 255, 79,0.3);
}
.market-compare__note {
  font-size: 11px;
  color: var(--color-text-muted);
  line-height: 1.5;
}
.market-compare__item--highlight .market-compare__note { color: rgba(255,255,255,0.4); }
.market-compare__arrow {
  font-size: 20px;
  color: rgba(255,255,255,0.1);
  flex-shrink: 0;
}

/* ── Compare table ── */
.pricing__compare h3 {
  font-family: var(--font-display);
  font-size: 24px;
  margin-bottom: 24px;
  color: var(--color-text-secondary);
}
.compare-table {
  border: 1px solid var(--color-border);
  overflow: hidden;
}
.compare-table__header,
.compare-table__row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  border-bottom: 1px solid var(--color-border);
}
.compare-table__row:last-child { border-bottom: none; }
.compare-table__header > div,
.compare-table__row > div {
  padding: 16px 20px;
  font-size: 13px;
  border-right: 1px solid var(--color-border);
}
.compare-table__header > div:last-child,
.compare-table__row > div:last-child { border-right: none; }
.compare-table__header { background: var(--color-surface); }
.compare-table__header > div {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--color-text-secondary);
  text-transform: uppercase;
}
.compare-table__col--highlight {
  background: rgba(205, 255, 79, 0.05);
  color: var(--color-accent) !important;
  font-weight: 500;
}
.compare-table__row > div:first-child { color: var(--color-text-secondary); }
.compare-table__row > div:not(:first-child) {
  color: var(--color-text-muted);
  text-align: center;
}
.compare-table__col--highlight { text-align: center; }

/* ── Contact ── */
.contact {
  position: relative;
  overflow: hidden;
  background: linear-gradient(to bottom, var(--color-bg), var(--color-surface));
}
/* Кино-видео-фон под финальным CTA — разбивает плоский чёрный, не мешает форме */
.contact__bgvideo {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.3;
  overflow: hidden;
}
.contact::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(10,10,10,0.74), rgba(10,10,10,0.52) 42%, rgba(17,17,17,0.86)),
    radial-gradient(58% 50% at 82% 26%, rgba(205, 255, 79,0.06), transparent 60%);
}
.contact > .container { position: relative; z-index: 1; }
.contact__desc {
  font-size: 17px;
  color: var(--color-text-secondary);
  line-height: 1.8;
  margin-bottom: 44px;
}
.contact__facts { display: flex; flex-direction: column; gap: 18px; }
.contact__fact {
  display: flex; align-items: center; gap: 14px;
  font-size: 13px;
  color: var(--color-text-secondary);
  letter-spacing: 0.01em;
}
.contact__fact-icon {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(205, 255, 79, 0.15);
  background: rgba(205, 255, 79, 0.04);
  color: var(--color-accent);
  flex-shrink: 0;
}

.contact__tg-btn {
  margin-top: 28px;
  gap: 10px;
  padding: 14px 24px;
  font-size: 13px;
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--color-text-secondary);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: border-color var(--transition-base), color var(--transition-base);
}
.contact__tg-btn:hover {
  border-color: rgba(205, 255, 79,0.4);
  color: var(--color-accent);
}

/* ── Form ── */
.contact__form { display: flex; flex-direction: column; gap: 20px; }
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-group label {
  font-size: 10px;
  font-family: var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.form-group input,
.form-group textarea {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.07);
  padding: 14px 18px;
  font-size: 14px;
  font-family: var(--font-body);
  color: var(--color-text-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
  resize: none;
}
.form-group input:focus,
.form-group textarea:focus {
  border-color: rgba(205, 255, 79, 0.5);
  box-shadow: 0 0 24px rgba(205, 255, 79, 0.06), inset 0 0 16px rgba(205, 255, 79, 0.02);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: rgba(255,255,255,0.45); }
.form__privacy {
  font-size: 11px;
  color: var(--color-text-muted);
  text-align: center;
  opacity: 0.6;
}

/* CRM connected badge */
.form__crm-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 11.5px;
  color: rgba(255,255,255,0.38);
  margin-top: 10px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.01em;
}
.form__crm-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 8px var(--color-accent);
  animation: crmPulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes crmPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 8px var(--color-accent); }
  50%       { opacity: 0.5; box-shadow: 0 0 3px var(--color-accent); }
}

/* ── Niches ── */
.niches__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--color-border);
}
.niche-card {
  background: var(--color-surface);
  padding: 36px 32px;
  transition: background var(--transition-base), box-shadow var(--transition-slow);
  position: relative;
  overflow: hidden;
}
.niche-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, var(--color-accent) 0%, rgba(205, 255, 79,0.3) 50%, transparent 100%);
  opacity: 0;
  transition: opacity var(--transition-slow);
}
.niche-card:hover { background: var(--color-surface-2); }
.niche-card:hover::after { opacity: 1; }
.niche-card__num {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(255,255,255,0.1);
  letter-spacing: 0.12em;
  margin-bottom: 20px;
}
.niche-card h3 {
  font-size: 19px;
  font-family: var(--font-display);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.niche-card p {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.75;
  margin-bottom: 20px;
}
.niche-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.niche-card__tags span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--color-accent);
  border: 1px solid rgba(205, 255, 79,0.2);
  background: rgba(205, 255, 79,0.04);
  padding: 3px 9px;
}

/* ── Testimonials ── */
.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  background: transparent;
  position: relative;
  z-index: 1;
}
.testimonial-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.008));
  padding: 44px 40px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  overflow: hidden;
  transition: background var(--transition-base), border-color var(--transition-slow);
}
.testimonial-card:first-child {
  grid-row: span 1;
  border-right: none;
}
.testimonial-card:hover { background: var(--color-surface); }

.testimonial-card__quote {
  font-family: var(--font-display);
  font-size: 64px;
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.35;
  user-select: none;
  margin-bottom: -8px;
}
.testimonial-card__stars {
  display: none;
}
.testimonial-card__text {
  font-size: 15px;
  color: var(--color-text-secondary);
  line-height: 1.85;
  flex: 1;
  font-style: italic;
}
.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.testimonial-card__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(205, 255, 79,0.08);
  border: 1px solid rgba(205, 255, 79,0.18);
  color: var(--color-accent);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-mono);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.testimonial-card__name {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: 3px;
}
.testimonial-card__role {
  font-size: 11px;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

/* ── Guarantees ── */
.guarantees__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  background: transparent;
}
.guarantee-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.008));
  padding: 40px 32px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 20px;
  transition: background var(--transition-base), box-shadow var(--transition-slow), border-color var(--transition-slow);
  position: relative;
  overflow: hidden;
}
.guarantee-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--color-accent), rgba(205, 255, 79,0.2) 70%, transparent);
  opacity: 0;
  transition: opacity var(--transition-slow);
}
.guarantee-card:hover { background: var(--color-surface-2); }
.guarantee-card:hover::before { opacity: 1; }
.guarantee-card__icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(205, 255, 79,0.2);
  background: rgba(205, 255, 79,0.05);
  color: var(--color-accent);
  margin-bottom: 24px;
}
.guarantee-card h3 {
  font-size: 18px;
  font-family: var(--font-display);
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.guarantee-card p {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.75;
}

/* ── FAQ ── */
.faq__inner {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 80px;
  align-items: start;
}
/* Unbounded шире Manrope — в узкой 300px колонке заголовок FAQ надо уменьшить,
   иначе «вопросы» вылезает за край (аудит 20.07) */
.faq .section-title { font-size: clamp(34px, 4vw, 54px); }
.faq__sub {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-top: 16px;
}
.faq__list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-item:first-child { border-top: 1px solid var(--color-border); }
.faq-item__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  gap: 24px;
  transition: color var(--transition-fast);
  font-family: var(--font-body);
}
.faq-item__q:hover { color: var(--color-accent); }
.faq-item__q[aria-expanded="true"] { color: var(--color-accent); }
.faq-item__icon {
  font-size: 22px;
  font-weight: 300;
  color: var(--color-accent);
  flex-shrink: 0;
  transition: transform var(--transition-base);
  line-height: 1;
}
.faq-item__q[aria-expanded="true"] .faq-item__icon { transform: rotate(45deg); }
.faq-item__a { padding-bottom: 20px; }
.faq-item__a p {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.8;
}
.faq-item__a[hidden] { display: none; }

/* ── Tech Stack ── */
.stack__groups {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px 80px;
}
.stack-group__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 14px;
}
.stack-group__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.stack-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 9px 16px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.02em;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
  cursor: default;
}
.stack-group__tags { gap: 10px; }
.stack-tag:hover {
  border-color: rgba(205, 255, 79,0.35);
  color: var(--color-accent);
  background: rgba(205, 255, 79,0.06);
  transform: translateY(-2px);
}

/* ── Footer ── */
.footer__brand { flex: 1; }
.footer__brand img { margin-bottom: 12px; }
.footer__brand p {
  font-size: 13px;
  color: rgba(255,255,255,0.62);
  line-height: 1.6;
}
.footer__links { display: flex; flex-direction: column; gap: 10px; }
.footer__links a {
  position: relative;
  font-size: 13px;
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
}
.footer__links a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: var(--color-accent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .28s cubic-bezier(.22,1,.36,1);
}
.footer__links a:hover { color: var(--color-accent); }
.footer__links a:hover::after { transform: scaleX(1); }
.footer__contact a {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-accent);
}

/* ── Hero UI Mockup Dashboard — Bloomberg Terminal style (matches CRM v4) ── */
.ui-mockup {
  display: flex;
  flex-direction: column;
  min-height: 420px;
  font-family: var(--font-mono);
}

/* Horizontal command bar — replaces old sidebar */
.ui-mockup__cmdbar {
  height: 32px;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  flex-shrink: 0;
}
.ui-mockup__logo-mark {
  width: 18px; height: 18px;
  border-radius: 4px;
  background: rgba(205, 255, 79,0.15);
  border: 1px solid rgba(205, 255, 79,0.35);
  flex-shrink: 0;
}
.ui-mockup__nav {
  display: flex;
  gap: 5px;
  flex: 1;
}
.ui-mockup__nav-item {
  height: 10px;
  width: 36px;
  border-radius: 3px;
  background: rgba(255,255,255,0.05);
}
.ui-mockup__nav-item--active {
  background: rgba(205, 255, 79,0.2);
  border: 1px solid rgba(205, 255, 79,0.3);
  position: relative;
}
.ui-mockup__nav-item--active::after {
  content: '';
  position: absolute;
  bottom: -11px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 1.5px;
  background: rgba(205, 255, 79,0.7);
  border-radius: 1px;
}
.ui-mockup__cmdbar-cta {
  width: 44px; height: 14px;
  border-radius: 4px;
  background: rgba(205, 255, 79,0.3);
  border: 1px solid rgba(205, 255, 79,0.4);
  flex-shrink: 0;
}

.ui-mockup__body {
  flex: 1;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

/* Row priority bar */
.ui-mockup__row-priority {
  width: 3px; height: 100%;
  border-radius: 2px;
  background: rgba(205, 255, 79,0.4);
  align-self: stretch;
  margin: -7px 0;
}
.ui-mockup__row-priority--hot { background: rgba(255,76,76,0.6); }
.ui-mockup__row--won { background: rgba(34,197,94,0.04) !important; border-color: rgba(34,197,94,0.1) !important; }

/* Legacy classes kept for fallback */
.ui-mockup__btn-sm {
  font-size: 9px;
  padding: 4px 8px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.03);
}
.ui-mockup__btn-accent {
  border-color: rgba(205, 255, 79,0.3);
  color: rgba(205, 255, 79,0.8);
  background: rgba(205, 255, 79,0.06);
}

/* KPIs */
.ui-mockup__kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.ui-mockup__kpi {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 10px 12px;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-areas: "num delta" "label label";
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 0 4px;
}
.ui-mockup__kpi::before {
  content: '';
  position: absolute;
  top: 0; left: 20%; right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(205, 255, 79,0.4), transparent);
}
.ui-mockup__kpi-num {
  grid-area: num;
  font-size: 15px;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  line-height: 1.2;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.ui-mockup__kpi-label {
  grid-area: label;
  font-size: 9px;
  color: rgba(255,255,255,0.3);
  margin-top: 3px;
}
.ui-mockup__kpi-delta {
  grid-area: delta;
  align-self: center;
  font-size: 9px;
  color: #4ade80;
  background: rgba(74,222,128,0.08);
  padding: 2px 5px;
  border-radius: 100px;
  border: 1px solid rgba(74,222,128,0.15);
  white-space: nowrap;
}

/* Chart — explicit height so the bars' percentage heights resolve
   (a flex-derived height is "indefinite" and collapses % children to 0). */
.ui-mockup__chart {
  flex: 0 0 auto;
  height: 172px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 8px;
  padding: 12px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ui-mockup__chart-label {
  font-size: 9px;
  color: rgba(255,255,255,0.25);
  letter-spacing: 0.05em;
}
.ui-mockup__bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  flex: 1;
  padding-top: 4px;
}
.ui-mockup__bar {
  flex: 1;
  height: var(--h, 50%);
  background: linear-gradient(to top, rgba(205, 255, 79,0.04), rgba(205, 255, 79,0.24));
  border-radius: 3px 3px 0 0;
  border-top: 1.5px solid rgba(205, 255, 79,0.45);
  transition: height 1.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.ui-mockup__bar--hi {
  background: linear-gradient(to top, rgba(205, 255, 79,0.12), rgba(205, 255, 79,0.58));
  border-top-color: rgba(205, 255, 79,0.95);
  box-shadow: 0 0 14px rgba(205, 255, 79,0.3);
  animation: bar-glow 3s ease-in-out infinite;
}
@keyframes bar-glow {
  0%,100% { box-shadow: 0 0 10px rgba(205, 255, 79,0.22); }
  50%     { box-shadow: 0 0 20px rgba(205, 255, 79,0.42); }
}

/* Table */
.ui-mockup__table { display: flex; flex-direction: column; gap: 4px; }
.ui-mockup__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 6px;
  font-size: 10px;
}
.ui-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ui-dot--green  { background: #4ade80; box-shadow: 0 0 5px rgba(74,222,128,0.5); }
.ui-dot--yellow { background: rgba(205, 255, 79,0.8); box-shadow: 0 0 5px rgba(205, 255, 79,0.4); }
.ui-dot--dim    { background: rgba(255,255,255,0.2); }
.ui-mockup__row-name { flex: 1; color: rgba(255,255,255,0.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-mockup__row-val { color: rgba(255,255,255,0.35); flex-shrink: 0; }
.ui-badge {
  font-size: 8px;
  padding: 2px 7px;
  border-radius: 100px;
  flex-shrink: 0;
}
.ui-badge--done {
  background: rgba(74,222,128,0.1);
  border: 1px solid rgba(74,222,128,0.2);
  color: rgba(74,222,128,0.8);
}
.ui-badge--wip {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.3);
}

/* ── Mockups section ── */
.mockups {
  position: relative;
  overflow: hidden;
}
.mockups::before {
  content: '';
  position: absolute;
  top: -100px; left: 50%;
  transform: translateX(-50%);
  width: 900px; height: 600px;
  background: radial-gradient(ellipse, rgba(205, 255, 79,0.05) 0%, transparent 60%);
  pointer-events: none;
}
.mockups .container { position: relative; z-index: 1; }
.mockups__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.mockup-showcase {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mockup-showcase__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  opacity: 0.75;
}
.mockup-showcase__window {
  background: rgba(12,12,12,0.95);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 80px rgba(205, 255, 79,0.06);
  flex: 1;
}
.mockup-showcase__window--mobile {
  max-width: 240px;
  margin: 0 auto;
}
.mockup-showcase__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: rgba(255,255,255,0.022);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mockup-showcase__url {
  font-family: var(--font-mono);
  font-size: 9px;
  color: rgba(255,255,255,0.18);
}
.mockup-showcase__caption {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.5;
  text-align: center;
  letter-spacing: 0.01em;
}

/* CRM mockup styles */
.mockup-showcase__body {
  display: flex;
  height: 340px;
}
.ms-sidebar {
  width: 48px;
  background: rgba(255,255,255,0.018);
  border-right: 1px solid rgba(255,255,255,0.05);
  padding: 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex-shrink: 0;
}
.ms-sidebar__logo {
  width: 28px; height: 28px;
  border-radius: 7px;
  background: rgba(205, 255, 79,0.18);
  border: 1px solid rgba(205, 255, 79,0.3);
  margin: 0 auto 4px;
}
.ms-sidebar__nav { display: flex; flex-direction: column; gap: 4px; }
.ms-nav-item {
  display: flex; align-items: center; gap: 5px;
  font-size: 8px;
  font-family: var(--font-mono);
  color: rgba(255,255,255,0.22);
  padding: 5px 4px;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ms-nav-item--active {
  background: rgba(205, 255, 79,0.1);
  color: rgba(205, 255, 79,0.85);
  border: 1px solid rgba(205, 255, 79,0.2);
}
.ms-nav-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--color-accent); flex-shrink: 0; }
.ms-content { flex: 1; padding: 12px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.ms-header { display: flex; align-items: center; justify-content: space-between; }
.ms-title {
  font-size: 12px;
  font-family: var(--font-display);
  color: rgba(255,255,255,0.85);
  display: flex; align-items: center; gap: 8px;
}
.ms-count {
  font-family: var(--font-mono);
  font-size: 9px;
  background: rgba(205, 255, 79,0.1);
  border: 1px solid rgba(205, 255, 79,0.2);
  color: var(--color-accent);
  padding: 1px 6px;
  border-radius: 100px;
}
.ms-actions { display: flex; gap: 5px; }
.ms-btn {
  font-size: 8px;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.35);
  font-family: var(--font-mono);
}
.ms-btn--accent {
  border-color: rgba(205, 255, 79,0.3);
  color: rgba(205, 255, 79,0.8);
  background: rgba(205, 255, 79,0.06);
}
.ms-stats {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 6px;
}
.ms-stat {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 6px;
  padding: 7px 8px;
  display: grid;
  grid-template-areas: "val delta" "label label";
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 0 4px;
}
.ms-stat__val {
  grid-area: val;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.88);
  line-height: 1.2;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.ms-stat__label {
  grid-area: label;
  font-size: 8px;
  color: rgba(255,255,255,0.28);
  margin-top: 2px;
}
.ms-stat__delta {
  grid-area: delta;
  align-self: center;
  font-size: 8px; color: #4ade80;
  background: rgba(74,222,128,0.08);
  padding: 1px 4px; border-radius: 100px;
  border: 1px solid rgba(74,222,128,0.15);
  white-space: nowrap;
}
.ms-list { display: flex; flex-direction: column; gap: 4px; }
.ms-row {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.018);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 5px;
  font-size: 9px;
}
.ms-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.ms-dot--green { background: #4ade80; }
.ms-dot--yellow { background: rgba(205, 255, 79,0.9); }
.ms-dot--blue { background: #93c5fd; }
.ms-row__name { flex: 1; color: rgba(255,255,255,0.55); font-family: var(--font-mono); }
.ms-row__stage { color: rgba(255,255,255,0.25); font-family: var(--font-mono); font-size: 8px; }
.ms-badge {
  font-size: 7px; padding: 1px 6px; border-radius: 100px;
  font-family: var(--font-mono); flex-shrink: 0;
}
.ms-badge--done { background: rgba(74,222,128,0.08); border: 1px solid rgba(74,222,128,0.18); color: #4ade80; }
.ms-badge--wip  { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.28); }
.ms-badge--new  { background: rgba(96,165,250,0.08); border: 1px solid rgba(96,165,250,0.18); color: #93c5fd; }
.ms-badge--live { display: flex; align-items: center; gap: 5px; background: rgba(74,222,128,0.08); border: 1px solid rgba(74,222,128,0.18); color: #4ade80; font-size: 9px; padding: 2px 8px; border-radius: 100px; font-family: var(--font-mono); }
.ms-live-dot { width: 5px; height: 5px; border-radius: 50%; background: #4ade80; animation: pulse-green 1.5s infinite; }

/* Telegram chat styles */
.mockup-showcase__bar--mobile { padding: 10px 12px; }
.tg-header { display: flex; align-items: center; gap: 10px; }
.tg-avatar { width: 28px; height: 28px; border-radius: 50%; background: rgba(205, 255, 79,0.2); border: 1px solid rgba(205, 255, 79,0.35); flex-shrink: 0; }
.tg-name { font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.9); }
.tg-status { font-size: 9px; color: #4ade80; }
.tg-chat { padding: 12px; display: flex; flex-direction: column; gap: 10px; max-height: 340px; overflow: hidden; }
.tg-msg { display: flex; flex-direction: column; gap: 3px; }
.tg-msg--out { align-items: flex-end; }
.tg-bubble {
  max-width: 85%;
  padding: 8px 11px;
  border-radius: 12px;
  font-size: 11px;
  line-height: 1.5;
}
.tg-bubble--in { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.75); border-bottom-left-radius: 3px; }
.tg-bubble--out { background: rgba(205, 255, 79,0.15); border: 1px solid rgba(205, 255, 79,0.2); color: rgba(255,255,255,0.82); border-bottom-right-radius: 3px; }
.tg-time { font-size: 8px; color: rgba(255,255,255,0.2); font-family: var(--font-mono); }
.tg-time--out { text-align: right; }
.tg-btns { display: flex; gap: 6px; }
.tg-btn { flex: 1; text-align: center; padding: 6px 8px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); font-size: 10px; color: rgba(255,255,255,0.4); }
.tg-btn--yes { border-color: rgba(74,222,128,0.3); color: #4ade80; background: rgba(74,222,128,0.06); }

/* Analytics mockup styles */
.ms-analytics { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.ms-analytics__header { display: flex; align-items: center; justify-content: space-between; }
.ms-analytics__title { font-size: 12px; font-family: var(--font-display); color: rgba(255,255,255,0.8); }
.ms-kpis { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.ms-kpi {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 7px;
  padding: 10px 10px 8px;
  position: relative;
  overflow: hidden;
}
.ms-kpi--accent { border-color: rgba(205, 255, 79,0.2); background: rgba(205, 255, 79,0.04); }
.ms-kpi__val { font-family: var(--font-mono); font-size: 16px; font-weight: 500; color: rgba(255,255,255,0.88); letter-spacing: -0.02em; line-height: 1.2; }
.ms-kpi--accent .ms-kpi__val { color: var(--color-accent); }
.ms-kpi__label { font-size: 8px; color: rgba(255,255,255,0.28); margin-top: 2px; }
.ms-kpi__trend { font-size: 8px; color: #4ade80; margin-top: 3px; }
.ms-chart { background: rgba(255,255,255,0.015); border: 1px solid rgba(255,255,255,0.05); border-radius: 6px; padding: 10px 12px; }
.ms-chart__label { font-size: 8px; color: rgba(255,255,255,0.2); font-family: var(--font-mono); letter-spacing: 0.05em; margin-bottom: 8px; }
.ms-bars { display: flex; align-items: flex-end; gap: 6px; height: 60px; }
.ms-bar {
  flex: 1;
  background: rgba(205, 255, 79,0.1);
  border-radius: 3px 3px 0 0;
  border-top: 1px solid rgba(205, 255, 79,0.22);
  height: var(--bh, 50%);
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.ms-bar--hi { background: rgba(205, 255, 79,0.3); border-top-color: rgba(205, 255, 79,0.7); }
.ms-bar__val { font-size: 7px; color: rgba(255,255,255,0.2); font-family: var(--font-mono); margin-top: -14px; white-space: nowrap; }
.ms-top { display: flex; flex-direction: column; gap: 7px; }
.ms-top__label { font-size: 8px; color: rgba(255,255,255,0.2); font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 2px; }
.ms-top__row { display: flex; align-items: center; gap: 8px; }
.ms-top__rank { font-size: 8px; color: rgba(205, 255, 79,0.55); font-family: var(--font-mono); min-width: 10px; }
.ms-top__name { font-size: 9px; color: rgba(255,255,255,0.45); min-width: 68px; font-family: var(--font-mono); }
.ms-top__bar {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,0.05);
  border-radius: 2px;
  position: relative;
}
.ms-top__bar::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: var(--pw, 50%);
  background: rgba(205, 255, 79,0.45);
  border-radius: 2px;
}
.ms-top__num { font-size: 9px; color: rgba(205, 255, 79,0.65); font-family: var(--font-mono); }

/* ── Pricing & FAQ section visual accents ── */
.pricing {
  position: relative;
  overflow: hidden;
}
.pricing::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent 5%, rgba(205, 255, 79,0.25) 35%, rgba(205, 255, 79,0.25) 65%, transparent 95%);
  pointer-events: none;
}
.pricing::after {
  content: '';
  position: absolute;
  top: -100px; left: 50%;
  transform: translateX(-50%);
  width: 900px; height: 500px;
  background: radial-gradient(ellipse, rgba(205, 255, 79,0.045) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.pricing .container { position: relative; z-index: 1; }

.faq {
  position: relative;
  overflow: hidden;
}
.faq::before {
  content: '';
  position: absolute;
  bottom: 0; right: -100px;
  width: 600px; height: 500px;
  background: radial-gradient(ellipse, rgba(205, 255, 79,0.04) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.faq .container { position: relative; z-index: 1; }

.stack {
  position: relative;
  overflow: hidden;
}
.stack::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent 5%, rgba(255,255,255,0.06) 35%, rgba(255,255,255,0.06) 65%, transparent 95%);
  pointer-events: none;
}

/* ── Case card decorative number ── */
.case-card::before {
  content: attr(data-case-index);
  position: absolute;
  bottom: -10px; left: 16px;
  font-family: var(--font-mono);
  font-size: 80px;
  font-weight: 700;
  color: rgba(255,255,255,0.018);
  letter-spacing: -0.05em;
  line-height: 1;
  user-select: none;
  pointer-events: none;
}

/* ── Process step glow on active connector ── */
.process__steps::before {
  background: linear-gradient(90deg,
    var(--color-accent) 0%,
    rgba(205, 255, 79,0.35) 35%,
    rgba(255,255,255,0.04) 100%
  );
}

/* ── AI-generated atmosphere image break ── */
.atm-img {
  width: 100%;
  height: 420px;
  position: relative;
  overflow: hidden;
}
.atm-img__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  opacity: 0.62;
  transform: scale(1.1);
  display: block;
  filter: saturate(1.05) contrast(1.04);
}
/* Continuous cinematic Ken Burns — slow zoom + drift = alive, premium */
@media (prefers-reduced-motion: no-preference) {
  .atm-img__photo {
    animation: atm-kenburns 28s ease-in-out infinite alternate;
  }
}
@keyframes atm-kenburns {
  from { transform: scale(1.08) translate3d(0, 0, 0); }
  to   { transform: scale(1.18) translate3d(-2.5%, -2.2%, 0); }
}
.atm-img::before,
.atm-img::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 45%;
  z-index: 1;
  pointer-events: none;
}
.atm-img::before {
  top: 0;
  background: linear-gradient(to bottom, var(--color-bg), transparent);
}
.atm-img::after {
  bottom: 0;
  background: linear-gradient(to top, var(--color-bg), transparent);
}

/* ── Team section ── */
.team {
  position: relative;
  overflow: hidden;
}
.team::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent 5%, rgba(255,255,255,0.06) 35%, rgba(255,255,255,0.06) 65%, transparent 95%);
  pointer-events: none;
}
.team .container { position: relative; z-index: 1; }
.team__inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
  align-items: center;
}
.team__desc {
  font-size: 15px;
  color: var(--color-text-secondary);
  line-height: 1.8;
  margin-top: 20px;
}
.team__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  background: transparent;
}
.team-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.008));
  padding: 36px 28px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 20px;
  transition: background var(--transition-base), border-color var(--transition-slow);
  position: relative;
  overflow: hidden;
}
.team-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, var(--color-accent) 0%, rgba(205, 255, 79,0.2) 60%, transparent);
  opacity: 0;
  transition: opacity var(--transition-slow);
}
.team-card:hover { background: var(--color-surface-2); }
.team-card:hover::after { opacity: 1; }
.team-card__icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(205, 255, 79,0.2);
  background: rgba(205, 255, 79,0.04);
  color: var(--color-accent);
  margin-bottom: 20px;
}
.team-card h3 {
  font-size: 16px;
  font-family: var(--font-display);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.team-card p {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.75;
}

/* ── Pricing team note ── */
.pricing__team-note {
  margin-top: 28px;
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.75;
  padding: 16px 20px;
  border: 1px solid rgba(205, 255, 79,0.18);
  background: rgba(205, 255, 79,0.03);
}

/* ── Hero live toast notifications ── */
.hero__toasts {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 4px 0;
  /* nowrap: пилюли всегда в одну строку. При wrap длинное уведомление
     переносило вторую пилюлю вниз → высота hero скакала на 44px и вся
     страница сама «пускалась вниз» каждые ~4с. Одна строка = стабильно. */
  flex-wrap: nowrap;
  overflow: hidden;
  min-height: 48px;
}
.hero__mockup-toast { min-width: 0; }
.hero__mockup-toast .mockup-toast__text {
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero__mockup-toast {
  background: rgba(8,8,8,0.98);
  border: 1px solid rgba(205, 255, 79,0.25);
  border-radius: 8px;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.72);
  pointer-events: none;
  white-space: nowrap;
  animation:
    toast-slide-in 0.55s cubic-bezier(0.22,1,0.36,1) 1.5s both,
    toast-border-pulse 3.5s ease-in-out 2.2s infinite;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5), 0 0 20px rgba(205, 255, 79,0.06);
}
.hero__mockup-toast--2 {
  border-color: rgba(74,222,128,0.3);
  box-shadow: 0 4px 16px rgba(0,0,0,0.5), 0 0 16px rgba(74,222,128,0.05);
  animation:
    toast-slide-in 0.55s cubic-bezier(0.22,1,0.36,1) 3s both,
    toast-border-pulse2 4s ease-in-out 3.8s infinite;
}
.mockup-live-dot--green { background: #4ade80; box-shadow: 0 0 6px rgba(74,222,128,0.8); }
@keyframes toast-border-pulse2 {
  0%,100% { border-color: rgba(74,222,128,0.3); }
  50%      { border-color: rgba(74,222,128,0.12); }
}
@media (max-width: 1024px) {
  .hero__toasts { display: none; }
}

/* ── Niches AI background image ── */
.niches__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.1;
  z-index: 0;
  pointer-events: none;
  filter: saturate(0.6);
}

/* ── Card elevation — hairline-grid cards pop forward on hover ──
   No translate (would break the seamless 1px-gap grid). Instead the
   hovered card raises its z-index and lights up with a soft shadow +
   faint gold ring, bleeding over neighbours = premium "comes forward". */
.trust-card,
.service-card,
.guarantee-card,
.team-card,
.testimonial-card {
  position: relative;
  z-index: 1;
  transition:
    background var(--transition-base),
    box-shadow var(--transition-spring),
    border-color var(--transition-base);
}
.trust-card:hover,
.service-card:hover,
.guarantee-card:hover,
.team-card:hover,
.testimonial-card:hover {
  z-index: 2;
  box-shadow:
    0 18px 44px -14px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(205, 255, 79, 0.14),
    0 0 36px rgba(205, 255, 79, 0.06);
}

/* ==== animations.css ==== */
/* ── Page load fade-in ── */
body {
  opacity: 1;
}

/* ── Hero first-screen entrance — staggered rise on load ──
   Pure CSS (plays immediately, no JS/scroll wait → LCP-safe).
   fill-mode 'both' shows the from-state during the delay = no flicker. */
@media (prefers-reduced-motion: no-preference) {
  .hero__left .hero__eyebrow { animation: hero-rise 0.7s cubic-bezier(0.22,1,0.36,1) 0.10s both; }
  .hero__title               { animation: hero-rise 0.75s cubic-bezier(0.22,1,0.36,1) 0.20s both; }
  .hero__subtitle            { animation: hero-rise 0.7s cubic-bezier(0.22,1,0.36,1) 0.40s both; }
  .hero__left .hero__actions { animation: hero-rise 0.7s cubic-bezier(0.22,1,0.36,1) 0.54s both; }
  .hero__metrics             { animation: hero-rise 0.8s cubic-bezier(0.22,1,0.36,1) 0.68s both; }
}
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(20px); }
}

/* ── Scroll reveal ── */
[data-reveal] {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(12px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), filter 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-reveal].revealed {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}
[data-reveal-delay="1"] { transition-delay: 0.08s; }
[data-reveal-delay="2"] { transition-delay: 0.16s; }
[data-reveal-delay="3"] { transition-delay: 0.24s; }
[data-reveal-delay="4"] { transition-delay: 0.32s; }

/* ── Cases: premium 3D rise-in (GPU transform only, no JS, no cache cost) ── */
@media (prefers-reduced-motion: no-preference) {
  .case-card[data-reveal] {
    opacity: 0;
    transform: perspective(1300px) rotateX(9deg) translateY(46px) scale(0.965);
    transform-origin: 50% 100%;
    transition:
      opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
  }
  .case-card[data-reveal].revealed {
    opacity: 1;
    transform: perspective(1300px) rotateX(0) translateY(0) scale(1);
  }
  /* Row stagger — right card follows the left one */
  .case-card:nth-child(even) { transition-delay: 0.09s; }
}

/* ── Aurora glow animation ── */
@keyframes aurora-drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(-60px, 50px) scale(1.1); }
  66%  { transform: translate(-20px, -40px) scale(0.92); }
}
@keyframes aurora-drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-30px, -70px) scale(1.18); }
}

/* ── Pricing border spin ── */
@keyframes pricing-spin {
  to { transform: rotate(360deg); }
}

/* ── Mockup float ── */
@keyframes mockup-float {
  0%, 100% { transform: translateY(0px) rotate(-1deg); }
  50%       { transform: translateY(-14px) rotate(0.5deg); }
}

/* ── Mockup element entrance ── */
@keyframes mockup-item-in {
  to { opacity: 1; transform: translateY(0); }
}

/* ── Scroll hint bounce ── */
@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0);   opacity: 0.4; }
  50%       { transform: translateY(7px); opacity: 0.9; }
}

/* ── Gold text shimmer ── */
@keyframes text-shimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* ── Hero CTA pulse glow ── */
@keyframes hero-cta-pulse {
  0%, 100% { box-shadow: 0 0 24px rgba(205, 255, 79,0.2), 0 4px 20px rgba(0,0,0,0.2); }
  50%       { box-shadow: 0 0 52px rgba(205, 255, 79,0.5), 0 4px 24px rgba(0,0,0,0.28); }
}
.hero .btn--accent {
  animation: hero-cta-pulse 2.4s cubic-bezier(.22,1,.36,1) .9s 1 both;
}
.hero .btn--accent:hover {
  animation: none;
  transform: translateY(-2px);
  box-shadow: 0 0 64px rgba(205, 255, 79,0.55), 0 6px 28px rgba(0,0,0,0.32);
}

/* ── Nav link underline slide-in ── */
.nav__links a {
  position: relative;
}
.nav__links a::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0; right: 0;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav__links a:hover::after,
.nav__links a.active::after { transform: scaleX(1); }

/* ── Pricing price-val glow ── */
.pricing__price-val {
  text-shadow: 0 0 60px rgba(205, 255, 79,0.4), 0 0 24px rgba(205, 255, 79,0.25);
}

/* ── Card hover lift (only on cards without overflow:hidden stacking issues) ── */
.trust-card,
.team-card {
  transition: background var(--transition-base), box-shadow var(--transition-slow), transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.trust-card:hover,
.team-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
}

/* ── Focus visible (keyboard navigation) ── */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

/* ── Hero toast slide-in ── */
@keyframes toast-slide-in {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes toast-border-pulse {
  0%, 100% { border-color: rgba(74,222,128,0.28); box-shadow: 0 8px 28px rgba(0,0,0,0.55), 0 0 16px rgba(74,222,128,0.08); }
  50%       { border-color: rgba(74,222,128,0.5);  box-shadow: 0 8px 28px rgba(0,0,0,0.55), 0 0 24px rgba(74,222,128,0.18); }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  [data-reveal]         { opacity: 1; transform: none; transition: none; }
  .marquee              { animation: none; }
  body                  { opacity: 1; transition: none; }
  .word-reveal          { opacity: 1 !important; transform: none !important; transition: none !important; }
  .process__steps::before { transform: none !important; transition: none !important; }
  .card-spotlight       { display: none; }
  .hero__mockup-toast   { animation: none; opacity: 1; }
  .hero__title em       { animation: none; }
  .hero .btn--accent    { animation: none; }
  .hero__glow--1, .hero__glow--2, .hero__glow--3 { animation: none; }
  .dot--green           { animation: none; box-shadow: none; }
  .niche-row            { opacity: 1; transform: none; transition: none; }
  .scroll-hint__icon    { animation: none; }
  .mockup-window        { animation: none; }
  .mockup-live-dot      { animation: none; }
}

/* ── Word reveal ── */
.word-reveal {
  display: inline-block;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.word-reveal--in {
  opacity: 1;
  transform: translateY(0);
}

/* Hero h1 — clip-path rise (transition must be on base, not --in) */
.hero__title .word-reveal {
  opacity: 1;
  transform: none;
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
  transition: clip-path 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero__title .word-reveal--in {
  clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0 100%);
}

/* ── Process connector line draw ── */
.process__steps::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
}
.process__steps.line-animate::before {
  transform: scaleX(1);
}

/* ── CRM bar animation (smooth, premium breathing) ── */
.ui-mockup__bar {
  transition: height 1.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Trust cards stagger entrance ── */
.trust-card {
  transition: background var(--transition-base), opacity 0.55s cubic-bezier(0.22,1,0.36,1), transform 0.55s cubic-bezier(0.22,1,0.36,1);
}

/* ── Section enter transitions ── */
.service-card, .case-card, .guarantee-card, .testimonial-card, .trust-card, .team-card {
  transition-property: background, box-shadow, opacity, transform;
}

/* ── Mockup showcase hover lift ── */
.mockup-showcase__window {
  transition: box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.22,1,0.36,1);
}
.mockup-showcase:hover .mockup-showcase__window {
  transform: translateY(-4px);
  box-shadow: 0 32px 80px rgba(0,0,0,0.6), 0 0 100px rgba(205, 255, 79,0.1);
}

/* ── Before/After row highlight ── */
.ba-row {
  transition: background var(--transition-base);
}

/* ── Cursor glow on dark sections ── */
.services, .cases, .niches, .testimonials,
.guarantees, .process, .faq, .stack, .pricing,
.trust, .before-after, .mockups, .team {
  background-image: radial-gradient(
    550px circle at var(--glow-x, -200%) var(--glow-y, -200%),
    rgba(205, 255, 79, 0.028) 0%,
    transparent 65%
  );
}

/* ── Card spotlight (antimetal) ── */
.card-spotlight {
  position: absolute;
  left: 0; top: 0;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(205, 255, 79, 0.09) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.25s ease;
  will-change: transform, opacity;
}

/* ── Niche row entrance ── */
.niche-row {
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.niche-row--in {
  opacity: 1;
  transform: translateX(0);
}

/* ── Hero frame light reflection (JS-driven --light-x/y) ── */
.hero__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--light-x, 50%) var(--light-y, 35%),
    rgba(255, 255, 255, 0.07) 0%,
    transparent 58%
  );
  transition: background 0.1s ease;
}

/* ── Section depth separators ── */
section + section {
  position: relative;
}

/* ── Reduced motion — disable clip-path reveal ── */
@media (prefers-reduced-motion: reduce) {
  .hero__title .word-reveal {
    clip-path: none !important;
    opacity: 1 !important;
  }
}

/* ==== mobile.css ==== */
/* ── Tablet: 768px – 1024px ── */
@media (max-width: 1024px) {
  .container { padding: 0 24px; }

  /* Trust */
  .trust__grid { grid-template-columns: repeat(3, 1fr); }

  /* Before/After */
  .ba-header,
  .ba-row { grid-template-columns: 160px 1fr 1fr; }

  /* Mockups */
  .mockups__grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .mockup-showcase:last-child { grid-column: span 2; }
  .mockup-showcase__window--mobile { max-width: 280px; }

  /* Market compare */
  .market-compare { flex-direction: column; }
  .market-compare__arrow { transform: rotate(90deg); }
  .market-compare__item { width: 100%; }

  /* Split hero: stack vertically on tablet */
  .hero__split { grid-template-columns: 1fr; gap: 48px; padding: 60px 0 40px; }
  .hero__right { max-width: 560px; }
  .hero__metrics { gap: 0; padding: 24px 0 32px; }
  .hero__metric { padding: 0 28px; }
  .hero__metric-num { font-size: 32px; }
  .hero__title { font-size: clamp(44px, 7vw, 80px); }

  .hero__stats { grid-template-columns: repeat(2, 1fr); }
  .services__grid { grid-template-columns: repeat(2, 1fr); }
  .service-card--wide { grid-column: span 2; }
  .cases__track { padding: 0 24px; }
  .cases__grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .niches__inner { grid-template-columns: 1fr; gap: 40px; }
  .niches__headline { position: static; }
  /* Team */
  .team__inner { grid-template-columns: 1fr; gap: 48px; }
  .testimonials__grid { grid-template-columns: 1fr; gap: 16px; }
  .testimonial-card:first-child { grid-row: span 1; border-right: none; border-bottom: 2px solid rgba(255,255,255,0.05); }
  .guarantees__grid { grid-template-columns: repeat(2, 1fr); }
  .faq__inner { grid-template-columns: 1fr; gap: 32px; }
  .stack__groups { grid-template-columns: 1fr; gap: 32px; }
  .process__steps { grid-template-columns: repeat(2, 1fr); }
  .process__steps::before { display: none; }
  .pricing__card { grid-template-columns: 1fr; }
  .contact__inner { grid-template-columns: 1fr; gap: 48px; }
  .compare-table__header,
  .compare-table__row { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
}

/* ── Mobile: up to 768px ── */
@media (max-width: 768px) {
  section { padding: 72px 0; }
  .container { padding: 0 20px; }

  /* Trust */
  .trust__grid { grid-template-columns: 1fr; }
  .trust { padding: 40px 0; }

  /* Before/After */
  .ba-table { overflow-x: auto; }
  .ba-header,
  .ba-row { grid-template-columns: 120px 1fr 1fr; min-width: 560px; }
  .ba-header__empty, .ba-row__label { padding: 14px 16px; }
  .ba-header__col, .ba-row__before, .ba-row__after { padding: 14px 16px; font-size: 12px; }
  /* золотая ::after-панель позиционируется от 220px — на мобилке съезжает; прячем,
     а «сторону Uniqore» подсвечиваем фоном самих ячеек */
  .ba-table::after { display: none; }
  .ba-row__after { background: rgba(205, 255, 79,0.06); }
  .ba-row__before::before, .ba-row__after::before { width: 20px; height: 20px; }
  .contact__bgvideo { display: none; } /* на мобилке видео-фон не грузим */

  /* Mockups */
  .mockups__grid { grid-template-columns: 1fr; gap: 32px; }
  .mockups__grid > *, .mockup-showcase { min-width: 0; max-width: 100%; }
  .mockup-showcase__window--mobile { max-width: 100%; }
  .mockup-showcase__window { width: 100%; max-width: 100%; max-height: 320px; overflow: hidden; }
  .mockup-showcase:last-child { display: none; }

  /* Market compare */
  .market-compare { flex-direction: column; gap: 12px; padding: 20px; }
  .market-compare__arrow { transform: rotate(90deg); font-size: 14px; }

  /* Typography mobile */
  .hero__title { font-size: clamp(24px, 7.6vw, 48px); letter-spacing: -0.03em; line-height: 1.04; }
  .hero__title em { font-size: inherit; }
  /* длинное слово не должно раздувать грид-колонку и клипать подзаголовок */
  .hero__split > * { min-width: 0; }
  .section-title { font-size: clamp(36px, 9.5vw, 56px); margin-bottom: 40px; }

  /* Nav */
  .nav__links { display: none; }
  .nav__cta   { display: none; }
  .nav__burger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-left: auto;
    padding: 4px;
  }
  .nav__burger span {
    display: block;
    width: 22px; height: 2px;
    background: var(--color-text-primary);
    transition: all var(--transition-base);
    transform-origin: center;
  }
  .nav__burger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
  .nav__burger.open span:nth-child(2) { transform: rotate(-45deg) translate(5px, -5px); }

  /* Mobile menu */
  .mobile-menu {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--color-bg);
    z-index: 99;
    padding: 100px 40px 40px;
    flex-direction: column;
  }
  .mobile-menu.open { display: flex; }
  .mobile-menu ul { display: flex; flex-direction: column; gap: 24px; }
  .mobile-menu a {
    font-size: 28px;
    font-family: var(--font-display);
    color: var(--color-text-primary);
  }
  .mobile-menu .btn {
    margin-top: 24px;
    font-size: 16px;
  }

  /* Hero */
  .hero { padding-top: 80px; min-height: auto; align-items: flex-start; }
  .hero__bgvideo { display: none; } /* на мобилке видео не грузим (3МБ + автоплей) — фон держат aurora/сетка */
  .hero__inner { min-height: auto; justify-content: flex-start; }
  .hero__split { grid-template-columns: 1fr; gap: 32px; padding: 44px 0 32px; flex: none; }
  .hero__right { display: none; }
  .hero__metrics {
    flex-wrap: wrap;
    gap: 0;
    padding: 24px 0 32px;
  }
  .hero__metric {
    flex: 0 0 50%;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }
  .hero__metric:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.05); padding-right: 20px; }
  .hero__metric:nth-child(even) { padding-left: 20px; }
  .hero__metric:nth-last-child(-n+2):not(.hero__metric-sep) { border-bottom: none; }
  .hero__metric-sep { display: none; }
  .hero__metric-num { font-size: 28px; }
  .hero__left { gap: 20px; }
  .hero__actions { flex-direction: column; gap: 10px; }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .hero__subtitle { font-size: 15px; line-height: 1.6; }

  /* Cards */
  .services__grid { grid-template-columns: 1fr; }
  .service-card--wide { grid-column: span 1; }
  .service-card { padding: 28px 24px; }
  .cases__grid { grid-template-columns: 1fr; gap: 16px; }
  .niches__inner { grid-template-columns: 1fr; gap: 32px; }
  /* Team mobile */
  .team__inner { grid-template-columns: 1fr; gap: 32px; }
  .team__cards { grid-template-columns: 1fr; }
  .team-card { padding: 28px 24px; }
  .niche-row__tags { display: none; }
  .niche-row__name { font-size: 22px; }
  .testimonials__grid { grid-template-columns: 1fr; gap: 16px; }
  .guarantees__grid { grid-template-columns: 1fr; }
  .guarantee-card { padding: 28px 24px; }
  .faq__inner { grid-template-columns: 1fr; gap: 24px; }
  .stack__groups { grid-template-columns: 1fr; gap: 24px; }
  .case-card    { padding: 28px 24px; }
  .case-card--has-top { padding: 0; }
  .case-card__top { height: 160px; }
  .case-card__num { font-size: 80px; padding-right: 16px; }
  .case-card__body { padding: 20px 24px 28px; }
  .case-card__metrics { flex-wrap: wrap; gap: 16px; }

  /* Process */
  .process__steps { grid-template-columns: 1fr; gap: 32px; }

  /* Pricing */
  .pricing__left,
  .pricing__right  { padding: 32px 24px; }
  .pricing__price-val { font-size: 36px; }
  .unpack__toggle  { padding: 20px; gap: 14px; }
  .unpack__toggle-label { font-size: 17px; }
  .unpack__toggle-sub { font-size: 12px; }
  .unpack__panel   { padding: 8px 16px 24px; }
  .unpack__grid    { grid-template-columns: 1fr; }
  .compare-table   { overflow-x: auto; }
  .compare-table__header,
  .compare-table__row { min-width: 500px; }

  /* Contact */
  .contact__inner { grid-template-columns: 1fr; gap: 40px; }

  /* Footer */
  .footer__inner { flex-direction: column; gap: 32px; }
}

/* ── Small mobile: up to 480px ── */
@media (max-width: 480px) {
  .hero__stats { grid-template-columns: 1fr 1fr; }
  .hero__stat-num { font-size: 22px; }
}

/* ==== nav-pages.css ==== */
/* nav-pages.css — многостраничное меню: дропдаун «Решения», активный пункт,
   мобильные метки разделов. Подключается на всех страницах. */

.nav__links .is-current { color: var(--color-text-primary); }

.nav__item--drop { position: relative; }
.nav__drop-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 500;
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
}
.nav__drop-toggle:hover,
.nav__item--drop:hover .nav__drop-toggle,
.nav__item--drop.is-open .nav__drop-toggle { color: var(--color-text-primary); }
.nav__drop-toggle svg { opacity: 0.6; transition: transform var(--transition-fast); }
.nav__item--drop:hover .nav__drop-toggle svg,
.nav__item--drop.is-open .nav__drop-toggle svg { transform: rotate(180deg); }

.nav__dropdown {
  position: absolute; top: calc(100% + 16px); left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 320px; padding: 10px;
  background: rgba(14, 14, 14, 0.94);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 18px;
  box-shadow: 0 30px 70px -22px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  display: grid; gap: 2px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .26s cubic-bezier(.22, 1, .36, 1), transform .26s cubic-bezier(.22, 1, .36, 1), visibility .26s;
  z-index: 200;
}
/* невидимый мост, чтобы курсор не терял дропдаун в зазоре между кнопкой и панелью */
.nav__item--drop::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 18px; }
.nav__item--drop:hover .nav__dropdown,
.nav__item--drop.is-open .nav__dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav__dropdown a {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px; border-radius: 12px;
  transition: background var(--transition-fast);
}
.nav__dropdown a::after { display: none !important; } /* убрать подчёркивание от .nav__links a */
.nav__dropdown a:hover { background: rgba(205, 255, 79, 0.08); }
.nav__dd-name { font-size: 14px; font-weight: 500; color: var(--color-text-primary); }
.nav__dd-desc { font-size: 12px; color: var(--color-text-muted); font-family: var(--font-mono); letter-spacing: .01em; }

/* Метка раздела в мобильном меню */
.mobile-menu__label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-text-muted); padding: 8px 0 2px; opacity: .8; list-style: none;
}

@media (max-width: 1024px) {
  .nav__dropdown { display: none; } /* на мобилке — плоский список в mobile-menu */
}

/* ==== enhance.css ==== */
/* ==========================================================================
   enhance.css — deepened page sections (reviews / team / included)
   + premium effects (cursor spotlight, hover glow, scroll parallax)
   Loaded AFTER the base cascade. Dark + gold, on-brand.
   ========================================================================== */

/* ── Shared section header helpers ─────────────────────────────────────── */
.section-title--tight { margin-bottom: 20px; }
.section-lead {
  max-width: 640px;
  margin: 0 0 56px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--color-text-secondary);
}

/* ── Reviews (keysy) ───────────────────────────────────────────────────── */
.reviews { padding: clamp(80px, 10vw, 140px) 0; position: relative; }

/* ── Team (o-nas) ──────────────────────────────────────────────────────── */
.team { padding: clamp(80px, 10vw, 140px) 0; position: relative; }
.team__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.team-member {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.008));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 22px;
  padding: 32px 28px 34px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: background var(--transition-base), border-color var(--transition-slow), transform var(--transition-base), box-shadow var(--transition-base);
}
.team-member > * { position: relative; z-index: 1; }
.team-member__avatar {
  width: 74px; height: 74px;
  border-radius: 20px;
  display: grid; place-items: center;
  margin-bottom: 22px;
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-accent);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(205, 255, 79,0.22);
}
.team-member__avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.team-member__avatar--1 { background: radial-gradient(130% 130% at 25% 20%, rgba(205, 255, 79,0.20), rgba(205, 255, 79,0.02)); }
.team-member__avatar--2 { background: radial-gradient(130% 130% at 78% 22%, rgba(205, 255, 79,0.16), rgba(205, 255, 79,0.02)); }
.team-member__avatar--3 { background: radial-gradient(130% 130% at 28% 82%, rgba(205, 255, 79,0.18), rgba(205, 255, 79,0.02)); }
.team-member__avatar--4 { background: radial-gradient(130% 130% at 74% 78%, rgba(205, 255, 79,0.15), rgba(205, 255, 79,0.02)); }
.team-member__name {
  font-size: 19px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--color-text-primary); margin-bottom: 6px;
}
.team-member__role {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--color-accent); opacity: 0.9; margin-bottom: 16px;
}
.team-member__focus { font-size: 14px; line-height: 1.7; color: var(--color-text-secondary); }

/* ── Included / "что входит" (tseny) ───────────────────────────────────── */
.included { padding: clamp(80px, 10vw, 140px) 0; position: relative; }
.included__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.include-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.008));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 22px;
  padding: 30px 28px 32px;
  display: flex;
  flex-direction: column;
  transition: background var(--transition-base), border-color var(--transition-slow), transform var(--transition-base), box-shadow var(--transition-base);
}
.include-card > * { position: relative; z-index: 1; }
.include-card__head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.include-card__icon {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center;
  color: var(--color-accent);
  background: rgba(205, 255, 79,0.08);
  border: 1px solid rgba(205, 255, 79,0.18);
}
.include-card__head h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--color-text-primary); }
.include-card__list { list-style: none; display: flex; flex-direction: column; gap: 13px; margin: 0; padding: 0; }
.include-card__list li {
  position: relative; padding-left: 26px;
  font-size: 14px; line-height: 1.5; color: var(--color-text-secondary);
}
.include-card__list li::before {
  content: '✓';
  position: absolute; left: 0; top: -1px;
  color: var(--color-accent); font-weight: 700; font-size: 14px;
}

/* ── Cursor spotlight (pseudo-free cards only) ─────────────────────────── */
.testimonial-card, .team-member, .include-card { position: relative; }
.testimonial-card > * { position: relative; z-index: 1; }
.testimonial-card::after,
.team-member::after,
.include-card::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(205, 255, 79,0.10), transparent 46%);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.testimonial-card:hover::after,
.team-member:hover::after,
.include-card:hover::after { opacity: 1; }

/* lift + glow on the new cards */
.testimonial-card:hover,
.team-member:hover,
.include-card:hover {
  border-color: rgba(205, 255, 79,0.20);
  transform: translateY(-4px);
  box-shadow: 0 24px 70px -30px rgba(205, 255, 79,0.22);
}

/* ── Broad hover glow (additive box-shadow, no pseudo conflict) ────────── */
.case-card, .service-card, .guarantee-card, .feature-card, .pricing__card {
  transition: box-shadow 0.45s ease, border-color 0.45s ease;
}
.case-card:hover,
.service-card:hover,
.guarantee-card:hover,
.feature-card:hover,
.pricing__card:hover {
  box-shadow: 0 26px 74px -30px rgba(205, 255, 79,0.20);
}

/* ── Scroll parallax base ──────────────────────────────────────────────── */
.feature__visual { will-change: transform; }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .team__grid, .included__grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .team__grid, .included__grid, .testimonials__grid { grid-template-columns: 1fr; }
  .section-lead { font-size: 16px; margin-bottom: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .feature__visual { will-change: auto; transform: none !important; }
  .testimonial-card:hover, .team-member:hover, .include-card:hover { transform: none; }
}

/* ── Niche page-hero background media (photo + subtle Kling loop) ───────── */
.page-hero--media { position: relative; overflow: hidden; }
.page-hero--media .page-hero__media { position: absolute; inset: 0; z-index: 0; }
.page-hero--media .page-hero__media-el { width: 100%; height: 100%; object-fit: cover; opacity: 0.78; filter: saturate(1.1) contrast(1.05); }
.page-hero--media .page-hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(10,10,10,0.25) 0%, rgba(10,10,10,0.72) 68%, #0A0A0A 100%);
}
.page-hero--media .container { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) {
  .page-hero--media .page-hero__media-el { display: none; }
}

/* ── Process section background media (light photo → graded dark to fit theme) ─ */
.process--media { position: relative; }
.process--media .process__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: 24px; }
.process--media .process__media-el { width: 100%; height: 100%; object-fit: cover; opacity: 0.6; filter: brightness(0.38) saturate(0.9) contrast(1.1); }
.process--media .process__scrim {
  position: absolute; inset: 0; z-index: 1; border-radius: 24px;
  background: linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.82) 55%, rgba(10,10,10,0.94) 100%);
}
.process--media .container { position: relative; z-index: 2; }
.process--media .process__steps { padding: 48px 0 24px; }
@media (prefers-reduced-motion: reduce) {
  .process--media .process__media-el { display: none; }
}
@media (max-width: 768px) {
  .process--media .process__media, .process--media .process__scrim { border-radius: 0; }
}

/* ==== redesign.css ==== */
/* ============================================================
   UNIQORE REDESIGN — Deep Tech (направление Б, одобрено 2026-07-10)
   Слой ПОВЕРХ существующей структуры. Ничего не ломает — только
   переопределяет визуал. Палитра уже в variables.css.
   ============================================================ */

/* — убираем старый декор hero (видео/aurora/частицы = перфоманс + не Б) — */
.hero__bgvideo,
.hero__aurora,
#hero-particles,
.contact__bgvideo { display: none !important; }

/* — фон hero: Deep Tech сетка + glow вместо видео — */
.hero { position: relative; background: var(--color-bg); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 78% 62% at 28% 42%, #000 18%, transparent 74%);
          mask-image: radial-gradient(ellipse 78% 62% at 28% 42%, #000 18%, transparent 74%);
  opacity: .55;
}
.hero::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 680px; height: 680px; right: -160px; top: 4%;
  background: radial-gradient(circle, rgba(205,255,79,.30), transparent 62%);
  filter: blur(46px); opacity: .5;
}
.hero__inner { position: relative; z-index: 2; }

/* — типографика hero под Б: крупнее, Unbounded, лайм-акцент — */
.hero__title {
  font-family: 'Unbounded', var(--font-display), sans-serif;
  font-weight: 800;
  font-size: clamp(40px, 4.7vw, 68px);
  line-height: 1.04; letter-spacing: -.035em;
}
.hero__title em { color: var(--color-accent); font-style: normal; }
.hero__eyebrow {
  border: 1px solid var(--color-border-hover);
  background: rgba(255,255,255,.02);
  border-radius: 100px; padding: 7px 15px;
}
.hero__subtitle { color: var(--color-text-secondary); max-width: 34ch; }

/* — правая колонка: 3D-глубина мокапа (perspective + плавающий tilt) — */
.hero__right { perspective: 1600px; perspective-origin: 60% 40%; }
.hero__frame {
  transform: rotateY(-9deg) rotateX(5deg);
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.85),
              0 0 0 1px var(--color-border);
  animation: uq-float 7s ease-in-out infinite;
}
.hero__right:hover .hero__frame { transform: rotateY(-4deg) rotateX(3deg) translateY(-4px); }
@keyframes uq-float {
  0%,100% { transform: rotateY(-9deg) rotateX(5deg) translateY(0); }
  50%     { transform: rotateY(-9deg) rotateX(5deg) translateY(-12px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__frame { animation: none; }
}

/* floating-карточки hero.
   Мокап (.hero__frame) живёт в 3D-сцене (perspective:1600px у .hero__right) и постоянно
   качается rotateY/rotateX. Карточки ставим В ТУ ЖЕ сцену: лёгкий rotateY + вынос вперёд
   по Z. Мокап качается, карточки стоят → честный параллакс глубины без единой JS-анимации.
   Плоские фронтальные карточки поверх наклонённого мокапа читались как наклейки.
   Позиции: держим на ВНЕШНЕМ поле слева, заходя лишь краем на сайдбар. Раньше лежали
   поверх живых данных (заголовок «Дашборд», легенда «Источники заявок») и резали текст. */
.hero__fcard{
  position:absolute;z-index:3;
  display:flex;align-items:center;gap:11px;
  padding:12px 15px;
  border-radius:16px;
  background:linear-gradient(158deg,rgba(24,30,43,.94),rgba(13,17,26,.88));
  backdrop-filter:blur(18px) saturate(1.25);-webkit-backdrop-filter:blur(18px) saturate(1.25);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 26px 60px -26px rgba(0,0,0,.92),0 6px 18px -10px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.07);
  pointer-events:none;
  transform-style:preserve-3d;
  animation:uq-fcin .62s cubic-bezier(.2,.8,.2,1) both;
}
/* тонкая лаймовая грань слева вместо жирной рамки */
.hero__fcard::before{content:'';position:absolute;left:0;top:14px;bottom:14px;width:2px;border-radius:2px;background:linear-gradient(180deg,transparent,rgba(205,255,79,.75),transparent)}
.hero__fcard div{display:flex;flex-direction:column;font-size:13px;font-weight:700;color:#fff;line-height:1.25;white-space:nowrap;font-family:var(--font-body);letter-spacing:-.01em}
.hero__fcard small{font-size:11px;font-weight:500;color:rgba(255,255,255,.52);margin-top:2px}
.hero__fcard-ic{flex:0 0 32px;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(205,255,79,.24),rgba(205,255,79,.05));box-shadow:0 0 0 1px rgba(205,255,79,.2),0 8px 18px -10px rgba(205,255,79,.55);color:var(--color-accent,#CDFF4F)}
.hero__fcard-ic svg{width:16px;height:16px}
/* --a нависает над верхним краем мокапа (там шапка окна, данных нет) */
.hero__fcard--a{top:-1%;left:-12%;animation-delay:.45s}
/* --b ушла с легенды «Источники заявок» на внешнее поле слева */
.hero__fcard--b{top:45%;left:-20%;animation-delay:.65s}
.hero__fcard--c{bottom:7%;left:-4%;animation-delay:.85s}
@keyframes uq-fcin{
  from{opacity:0;transform:rotateY(-5deg) translateZ(60px) translateY(16px) scale(.96)}
  to{opacity:1;transform:rotateY(-5deg) translateZ(60px) translateY(0) scale(1)}
}
@media(prefers-reduced-motion:reduce){.hero__fcard{animation:none;opacity:1;transform:rotateY(-5deg) translateZ(60px)}}
@media(max-width:1180px){.hero__fcard--b{left:-14%}}
@media(max-width:960px){.hero__fcard{display:none}}

/* — кнопка-акцент под Б: лайм, тёмный текст, магнит-ховер — */
.btn--accent {
  background: var(--color-accent); color: #0A0E1A;
  border: none; font-weight: 600;
  transition: transform .15s ease, box-shadow .25s ease;
}
.btn--accent:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -10px rgba(205,255,79,.4);
}
.btn--ghost { border: 1px solid var(--color-border-hover); color: var(--color-text-primary); }
.btn--ghost:hover { background: rgba(255,255,255,.04); border-color: var(--color-text-muted); }

/* — метрики hero: акцент лайм на числах — */
.hero__metric-num em, .hero__metric-num { letter-spacing: -.02em; }

/* — секции ниже: мягкий тёмно-синий сёрфейс вместо чистого чёрного — */
body, .section, .niches, .cases, .process, .pricing, .faq { background: var(--color-bg); }

/* — мобилка: убрать float-тилт (на тач не нужен, экономит краску) — */
@media (max-width: 900px) {
  .hero__frame { transform: none; animation: none; }
  .hero__right { perspective: none; }
  .hero::after { right: -40%; opacity: .32; }
}

/* — мобилка: заголовок мельче + защита от горизонтального overflow — */
@media (max-width: 640px) {
  html, body { overflow-x: hidden; }
  .hero__title { font-size: clamp(30px, 8.4vw, 40px); word-break: normal; }
  .hero__inner, .hero__split, .hero__left, .hero__right { min-width: 0; max-width: 100%; }
  .hero__frame { max-width: 100%; }
  .hero::after { width: 320px; height: 320px; }
}

/* — перебить mobile.css .hero__title (clamp 44px распирал 390px) — */
@media (max-width: 768px) {
  .hero .hero__title { font-size: clamp(28px, 7.4vw, 42px) !important; line-height: 1.05 !important; }
}
@media (max-width: 420px) {
  .hero .hero__title { font-size: clamp(26px, 7.2vw, 34px) !important; }
}

/* — жёсткая гарантия: заголовок влезает в 390px, длинное слово переносится — */
@media (max-width: 640px) {
  .hero .hero__title { font-size: 27px !important; line-height: 1.1 !important; overflow-wrap: anywhere; }
  .hero__inner, .container { padding-left: 20px !important; padding-right: 20px !important; }
}

/* — мобилка: кнопки на всю ширину, гарантия переносится — */
@media (max-width: 640px) {
  .hero__actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .hero__assurance { flex-wrap: wrap; }
  .hero__assurance span { flex: 1 1 auto; min-width: 0; }
}

/* — ГЛОБАЛЬНЫЙ anti-overflow на мобилке: всё в hero сжимается под экран — */
@media (max-width: 640px) {
  .hero__right, .hero__frame, .ui-mockup, .mirror, .niche-switch,
  .niche-result, .hero__toasts { max-width: 100% !important; width: 100% !important; box-sizing: border-box; }
  .hero__frame { overflow: hidden; }
  .ui-mockup__kpi-num { font-size: clamp(14px, 4.4vw, 20px) !important; }
  .niche-switch { flex-wrap: wrap; }
  .hero__metrics { flex-wrap: wrap; gap: 20px 12px; }
}

/* — устранение overflow: старые glow-блобы (у Б свой ::after) + клип marquee — */
.hero__glow, .hero__glow--1, .hero__glow--2 { display: none !important; }
.hero { overflow-x: clip; }
section, .section, .niches, [class*="marquee"] { overflow-x: clip; }
.marquee, .niches__marquee { max-width: 100vw; }
/* — добить фантомный горизонт. overflow: glow-псевдоэлементы .cases::before / .faq::before
   (bleed вправо, right:-120px) + aurora подстраниц. Эти блоки НЕ <section> → клипаем явно. — */
.cases, .faq, .page-hero { overflow-x: clip; }

/* ============================================================
   САМОДОСТАТОЧНАЯ ПАЛИТРА Б (защита от перезаписи variables.css
   параллельной сессией). redesign.css подключён последним →
   эти :root переменные и переопределения выигрывают. 2026-07-10
   ============================================================ */
:root {
  --color-bg:             #0A0E1A !important;
  --color-surface:        #121826 !important;
  --color-surface-2:      #161D2E !important;
  --color-border:         #1E2536 !important;
  --color-border-hover:   #2A3448 !important;
  --color-accent:         #CDFF4F !important;
  --color-accent-dim:     #9BC22F !important;
}
/* захардкоженное золото (rgba 245,197,24) в мокапе/демо → лайм */
.mockup-bar--accent, .ui-mockup__bar--hi, .ms-bar--hi { background: rgba(205,255,79,0.55) !important; }
.ui-mockup__bar { background: linear-gradient(to top, rgba(205,255,79,0.12), rgba(205,255,79,0.58)) !important; }
.ui-dot--yellow, .ms-dot--yellow { background: rgba(205,255,79,0.85) !important; box-shadow: 0 0 6px rgba(205,255,79,0.5) !important; }
.ui-mockup__kpi-delta, .ms-kpi__delta, .ms-top__rank, .ms-top__num { color: #CDFF4F !important; }
.ms-kpi--accent { border-color: rgba(205,255,79,0.25) !important; background: rgba(205,255,79,0.05) !important; }
.tg-avatar { background: rgba(205,255,79,0.2) !important; border-color: rgba(205,255,79,0.4) !important; }
.tg-bubble--out { background: rgba(205,255,79,0.15) !important; border-color: rgba(205,255,79,0.3) !important; }

/* — последние золотые точки: лого-SVG (инлайн stroke), TG-иконка, мокап-CTA — */
.nav__logo-mark circle, .nav__logo-mark line,
.footer__logo circle, .footer__logo line { stroke: #CDFF4F !important; }
.nav__tg { color: #CDFF4F !important; }
.ui-mockup__cmdbar-cta, .ui-mockup__nav-item--active,
.ui-mockup__logo-mark { background: #CDFF4F !important; }
.btn--accent, .mirror__cta { background: #CDFF4F !important; color: #0A0E1A !important; }

/* — Higgsfield Deep Tech фон для секции контакта (атмосфера, форма читаема) — */
.contact { position: relative; isolation: isolate; overflow: hidden; }
/* живая сеть-констелляция вместо статичного (съезжавшего) фото */
.contact__net { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; display: block; pointer-events: none; }
.contact::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(120% 90% at 50% -10%, rgba(205,255,79,.06), transparent 55%);
}
.contact::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,14,26,.55), rgba(10,14,26,.86));
}

/* — секция «Зеркало бизнеса» (сигнатура №2, вынесена из hero) — */
.mirror-section { padding: 110px 0; background: linear-gradient(180deg, #0A0E1A, #0D1322 55%, #0A0E1A); position: relative; overflow: hidden; }
.mirror-section::before { content:""; position:absolute; width:520px; height:520px; left:-160px; top:-80px;
  background: radial-gradient(circle, rgba(205,255,79,.14), transparent 60%); filter: blur(30px); pointer-events:none; }
.mirror-section .section-title { margin-bottom: 12px; }
.mirror-section__sub { color: var(--color-text-secondary); margin-bottom: 36px; max-width: 44ch; }
.mirror-section .mirror { max-width: 720px; }

/* — сноска вместо Bitrix-таблицы (ТЗ шаг 2) — */
.pricing__bitrix-note { color: var(--color-text-muted); font-size: 14.5px; max-width: 62ch; margin: 26px auto 0; text-align: center; line-height: 1.6; }

/* — CLS-фикс: резерв высоты заголовка hero, чтобы догрузка Unbounded не двигала макет — */
.hero__title { min-height: 3.35em; }
@media (max-width: 640px) { .hero .hero__title { min-height: 3.5em; } }

/* ─────────────────────────────────────────────────────────────
   TRUST → асимметричный bento (было repeat(5,1fr) под 5 карточек,
   осталось 3 → 2 пустые колонки на десктопе. Теперь: 1 крупная
   featured слева на всю высоту + 2 мелких справа стопкой).
   ───────────────────────────────────────────────────────────── */
.trust__grid {
  grid-template-columns: 1.15fr 0.85fr !important;
  grid-auto-rows: 1fr;
  gap: 16px !important;
}
.trust-card--feature {
  grid-row: 1 / span 2;
  flex-direction: column !important;
  gap: 20px !important;
  padding: 34px 32px !important;
  background: linear-gradient(158deg, rgba(205,255,79,0.08), rgba(255,255,255,0.012) 55%) !important;
  border-color: rgba(205,255,79,0.16) !important;
}
.trust-card--feature::after { opacity: 1 !important; } /* лайм-акцент сверху всегда */
.trust-card--feature .trust-card__icon { width: 44px; height: 44px; }
.trust-card--feature .trust-card__title { font-size: 20px; }
.trust-card--feature .trust-card__desc { max-width: 34ch; }
.trust-card__stack {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 8px;
}
.trust-card__stack span {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--color-text-secondary);
  background: rgba(205,255,79,0.06);
  border: 1px solid rgba(205,255,79,0.18);
  border-radius: 999px;
  padding: 5px 13px;
}
@media (max-width: 720px) {
  .trust__grid { grid-template-columns: 1fr !important; grid-auto-rows: auto; }
  .trust-card--feature { grid-row: auto; }
  .trust-card__stack { padding-top: 4px; }
}

/* ── Signature-момент: сцена с перспективой для сборки мокапов по скроллу ── */
.mockups__grid { perspective: 1400px; perspective-origin: 50% 40%; }
.mockup-showcase { will-change: transform, opacity; transform-style: preserve-3d; }

/* ── Кейс-финал (стоматология, 5-я карта на всю ширину) — 2 колонки:
      скрин слева, история справа по центру. Раньше узкий контент растягивался
      в горизонт → вертикальная «чёрная пустота» снизу. ── */
@media (min-width: 981px) {
  .cases__grid .case-card--has-top:last-child {
    display: grid;
    grid-template-columns: 1.2fr 0.85fr;
    align-items: stretch;
  }
  .cases__grid .case-card--has-top:last-child .case-card__top { height: auto; min-height: 300px; }
  .cases__grid .case-card--has-top:last-child .case-card__body { justify-content: center; padding: 40px 44px; }
}

/* ── Подложка niches: приглушить «точки-мусор» до атмосферы, не шум ── */
.niches__particles { opacity: 0.2 !important; }

/* ── Единый визуальный язык: фото-hero подстраниц сводим к дарк-тех главной.
      Было: тёплое фото (saturate 1.1) + чисто-чёрный скрим #0A0A0A — выбивалось
      из холодного #0A0E1A+лайм. Стало: холодный navy-скрим + приглушение тепла
      + лаймовый ambient-glow как в hero главной. ── */
.page-hero--media .page-hero__media-el {
  filter: saturate(0.82) contrast(1.05) brightness(0.9) hue-rotate(-8deg) !important;
}
.page-hero--media .page-hero__scrim {
  background:
    linear-gradient(180deg, rgba(10,14,26,0.34) 0%, rgba(10,14,26,0.78) 64%, #0A0E1A 100%),
    linear-gradient(118deg, rgba(18,28,56,0.5), rgba(10,14,26,0.08) 55%),
    radial-gradient(120% 78% at 80% 10%, rgba(205,255,79,0.10), transparent 52%) !important;
}

/* ═══════════ ПОЛИРОВКА по вердикту панели критиков (8→9) ═══════════ */

/* [1] Стат-бар под hero (сигнал 3/4 критиков): курсив Unbounded давал
   псевдо-serif, выбивался из дисплейной типографики. Прямой + tabular-nums
   (цифры не «пляшут» при count-up). */
.hero__metric-num {
  font-style: normal !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

/* [3] Ниши — читаться как кликабельная воронка, а не plain-list:
   лайм-индикатор слева выезжает + название сдвигается на hover. */
.niche-row { position: relative; }
.niche-row::before {
  content: ""; position: absolute; left: -2px; top: 22%; bottom: 22%;
  width: 2px; background: var(--color-accent);
  transform: scaleY(0); transform-origin: center;
  transition: transform 0.28s cubic-bezier(0.22,1,0.36,1);
}
.niche-row:hover::before, .niche-row:focus-visible::before { transform: scaleY(1); }
.niche-row .niche-row__name { transition: color 0.25s ease, transform 0.25s cubic-bezier(0.22,1,0.36,1); }
.niche-row:hover .niche-row__name { transform: translateX(8px); }

/* [6] Единые focus-visible кольца (a11y + премиум-ощущение) — лайм на всех
   интерактивных: nav, кнопки, чипы, инпуты, FAQ, ссылки-ниши. */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible,
.niche-chip:focus-visible, .niche-row:focus-visible, summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* [4/7] Зона мокапов «Это ваша система» — убрать низкоэнергетичную тёмную
   растяжку и дать панелям грань/глубину (вместо «плавают в чёрном»). */
.atm-img { height: 300px !important; }               /* было 420 — меньше пустоты */
.mockups { padding-top: 90px !important; padding-bottom: 94px !important; }
.mockups__grid { gap: 28px !important; }
.mockup-showcase__label {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--color-accent);
}
.mockup-showcase__window {
  border-color: rgba(255,255,255,0.13) !important;
  box-shadow: 0 26px 64px rgba(0,0,0,0.5), 0 0 100px rgba(205,255,79,0.11),
              inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
.mockup-showcase__caption { color: var(--color-text-secondary); }

/* [6] Hover-лифт карточек кейсов — живой отклик уровня Linear (у кейсов нет
   GSAP-трансформа, конфликта нет). Единый easing-токен. */
.case-card { transition: background var(--transition-base),
  box-shadow var(--transition-spring),
  transform 0.32s cubic-bezier(0.22,1,0.36,1) !important; }
.case-card:hover { transform: translateY(-6px); }

/* [5] Подстраницы ещё ближе к синтетике главной: тонкий signature dot-grid
   поверх фото-hero (как сетка в hero главной), гаснет книзу. */
.page-hero--media { position: relative; }
.page-hero--media::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: radial-gradient(rgba(205,255,79,0.055) 1px, transparent 1.4px);
  background-size: 32px 32px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.55), transparent 68%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.55), transparent 68%);
}

/* ═══════════ ДОЖИМ 8.5 → 9 (остаток вердикта панели) ═══════════ */

/* [клиппинг] Флагманский CRM-мокап: сайдбар 48px обрезал лейблы
   «Клиенты/Сделки/Задачи/Аналитика» до «Кли/Сдел/…». Расширить чтобы читались. */
.mockup-showcase .ms-sidebar { width: 96px !important; padding: 14px 10px !important; }
.mockup-showcase .ms-nav-item { white-space: nowrap; }

/* [1] Число потерь — крупнейший якорь секции «Сколько вы теряете» (сильнейший сигнал). */
.mirror__loss { font-size: clamp(30px, 4.2vw, 46px) !important; line-height: 1.1 !important; }
.mirror-section .section-title { margin-bottom: 14px; }

/* [3] Мотион-когезия: единый hover-лифт на карточках шагов процесса (как у кейсов). */
.process__step {
  transition: transform 0.32s cubic-bezier(0.22,1,0.36,1);
}
.process__step:hover { transform: translateY(-5px); }

/* [ритм] Ужать тёмную пустоту над секцией потерь. */
.mirror-section { padding-top: 84px !important; }
/* мобилка: mirror выбивался из ритма (84/110 vs 64 у других) — выравниваем */
@media(max-width:640px){.mirror-section{padding:52px 0 !important}}

/* ── Финальные нит-фиксы до чистой 9 ── */
/* Число потерь — ровные плотные группы. Было моно (font-mono) → узкий пробел
   занимал полную ячейку и «135 000» разъезжалось; переводим на пропорциональный
   дисплей-шрифт, группы стоят плотно как «38 400» в мокапе. */
.mirror__num { font-family: var(--font-body) !important; }
.mirror__num, .mirror__loss { font-variant-numeric: tabular-nums; }
/* Контраст-safety второй строки заголовков-акцентов (была «на грани» на тёмном). */
.mockups .section-title em, .mirror-section .section-title em { opacity: 1; }
/* Уплотнить почти-чёрный низ: мягкий каденс-акцент на стыке FAQ→контакт. */
.faq { padding-bottom: 72px; }

/* ═══════════ MOTION-когезия (дожим 9.3 → ~9.5) ═══════════ */
/* Единый вход стат-бара hero: вся строка поднимается как один блок (панель:
   «hero анимировался в одной точке и застывал ниже»). CSS-анимация гарантированно
   завершается видимой — без ghost-риска, в отличие от observer-reveal. */
@keyframes uqRowIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero__metrics { animation: uqRowIn 0.7s cubic-bezier(0.22,1,0.36,1) 0.35s both; }

/* Живой отклик до самого низа: элементы «Что входит» в прайсе + строки FAQ. */
.pricing__includes li { transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), color 0.25s ease; }
.pricing__includes li:hover { transform: translateX(6px); color: var(--color-text-primary); }
.faq-item__q { transition: color 0.2s ease, padding-left 0.25s cubic-bezier(0.22,1,0.36,1); }
.faq-item__q:hover { padding-left: 6px; }

@media (prefers-reduced-motion: reduce) {
  .hero__metrics { animation: none; }
  .pricing__includes li:hover, .faq-item__q:hover { transform: none; padding-left: 0; }
}

/* ═══════════ СИГНАТУРА «Хаос → Система» (morph3d) ═══════════ */
.morph-stage { height: 260vh; position: relative; background: transparent; overflow: visible; }
.morph-pin { height: 100vh; overflow: hidden; position: relative; display: flex; align-items: flex-start; justify-content: center; }
#morph-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; z-index: 0; opacity: 0; pointer-events: none; transition: opacity .18s linear; }
.morph-poster { position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  background: radial-gradient(120% 80% at 50% 40%, rgba(205,255,79,.06), transparent 60%), #0A0E1A; }
.morph-poster svg { width: min(72vw, 720px); }
.morph-cap { position: fixed; top: 12vh; left: 0; right: 0; z-index: 3; text-align: center; margin: 0; pointer-events: none; opacity: 0; transition: opacity .25s ease; }
.morph-cap__k { font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; color: var(--color-text-muted); text-transform: uppercase; }
.morph-cap b { display: block; font-family: var(--font-display); font-size: clamp(30px, 4.4vw, 56px); font-weight: 800; letter-spacing: -.02em; margin-top: 6px; color: var(--color-text-primary); }
.morph-cap b em { color: var(--color-accent); font-style: normal; }
.morph-cap small { display: block; margin-top: 8px; color: var(--color-text-secondary); font-size: 14px; font-family: var(--font-body); }
/* мобилка / постер-режим: секция короткая, без пина; content-visibility —
   не участвует в layout/paint, пока юзер не доскроллил */
@media (max-width: 899px) {
  .morph-stage { height: auto; padding: 72px 0; content-visibility: auto; contain-intrinsic-size: auto 560px; }
  .morph-pin { height: auto; min-height: 420px; flex-direction: column; align-items: center; gap: 20px; }
  #morph-canvas { display: none; }
  .morph-poster { display: flex; position: relative; inset: auto; min-height: 260px; width: 100%; }
  .morph-cap { margin-top: 0; order: -1; }
}
@media (prefers-reduced-motion: reduce) {
  .morph-stage { height: auto; padding: 72px 0; }
  .morph-pin { height: auto; min-height: 420px; }
  #morph-canvas { display: none; }
  .morph-poster { display: flex; position: relative; inset: auto; min-height: 260px; }
}

/* ═══════════ УСЛУГИ — три двери (v3) ═══════════ */
.services3 { padding: 100px 0 96px; position: relative; }
.services3__head { text-align: center; max-width: 760px; margin: 0 auto 46px; }
.services3__head .section-title { margin-top: 10px; }
.services3__sub { color: var(--color-text-secondary); margin-top: 14px; font-size: 16px; line-height: 1.55; }
.services3__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.svc-card { display: flex; flex-direction: column; gap: 15px; padding: 32px; border-radius: 20px;
  background: linear-gradient(162deg, rgba(255,255,255,.035), rgba(255,255,255,.006) 60%);
  border: 1px solid rgba(255,255,255,.07); text-decoration: none; color: var(--color-text-primary);
  transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .3s ease, background .3s ease; position: relative; }
.svc-card:hover { transform: translateY(-6px); border-color: rgba(205,255,79,.3); background: var(--color-surface); }
.svc-card__top { display: flex; align-items: center; justify-content: space-between; }
.svc-card__icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 13px; color: var(--color-accent); background: rgba(205,255,79,.06); border: 1px solid rgba(205,255,79,.18); }
.svc-card__price { font-family: var(--font-mono); font-size: 15px; color: var(--color-accent); font-weight: 600; }
.svc-card__title { font-family: var(--font-display); font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.svc-card__desc { color: var(--color-text-secondary); font-size: 15px; line-height: 1.5; margin: 0; }
.svc-card__list { list-style: none; padding: 0; margin: 2px 0 0; display: flex; flex-direction: column; gap: 8px; }
.svc-card__list li { position: relative; padding-left: 22px; color: var(--color-text-secondary); font-size: 14px; }
.svc-card__list li::before { content: '✓'; position: absolute; left: 0; color: var(--color-accent); font-weight: 700; }
.svc-card__cta { margin-top: auto; padding-top: 12px; color: var(--color-accent); font-weight: 600; font-size: 15px; }
/* флагман */
.svc-card--flagship { grid-column: 1 / -1; padding: 0; overflow: hidden;
  border-color: rgba(205,255,79,.22); background: linear-gradient(118deg, rgba(205,255,79,.08), rgba(255,255,255,.01) 55%); }
.svc-card--flagship:hover { transform: translateY(-4px); }
.svc-card__badge { position: absolute; top: 18px; right: 22px; z-index: 2; font-family: var(--font-mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: #0A0E1A; background: var(--color-accent); padding: 5px 13px; border-radius: 999px; }
.svc-card__flag-body { display: grid; grid-template-columns: 1.12fr .88fr; }
.svc-card__flag-left { padding: 38px 38px 34px; display: flex; flex-direction: column; gap: 14px; }
.svc-card__price--flag { font-size: 20px; }
.svc-card__price--flag span { color: var(--color-text-muted); font-size: 13px; font-weight: 400; }
.svc-card__flag-modules { display: flex; flex-wrap: wrap; align-content: center; gap: 10px; padding: 38px; border-left: 1px solid rgba(205,255,79,.14); }
.svc-card__flag-modules span { font-family: var(--font-mono); font-size: 13px; color: var(--color-text-secondary); background: rgba(205,255,79,.06); border: 1px solid rgba(205,255,79,.18); border-radius: 999px; padding: 8px 15px; }
@media (max-width: 760px) {
  .services3 { padding: 68px 0; }
  .services3__grid { grid-template-columns: 1fr; }
  .svc-card__flag-body { grid-template-columns: 1fr; }
  .svc-card__flag-modules { border-left: none; border-top: 1px solid rgba(205,255,79,.14); padding: 22px 32px 30px; }
  .svc-card__flag-left { padding: 30px 32px 26px; }
}

/* — фон секции «Ваша ниша» — убрать дешёвую фото-текстуру (ai-dashboard.jpg),
     чистый дарк-тех градиент + лёгкий лайм-glow — */
.niches__bg-img { display: none !important; }
.niches { background:
  radial-gradient(ellipse 70% 60% at 72% 38%, rgba(205,255,79,.06), transparent 58%),
  linear-gradient(180deg, #0A0E1A, #0D1322 52%, #0A0E1A) !important; }

/* ── Мобильные фиксы v3 ── */
@media (max-width: 760px) {
  /* флагман: бейдж не налезает на цену — в поток сверху */
  .svc-card__badge { position: static; display: inline-block; margin: 22px 0 -4px 24px; }
  .svc-card__flag-left { padding-top: 20px; }
}
@media (max-width: 640px) {
  /* калькулятор: длинный CTA переносится, не обрезается */
  .mirror__cta { white-space: normal !important; height: auto !important; min-height: 0 !important;
    line-height: 1.35 !important; padding: 14px 18px !important; font-size: 14px !important; }
}

/* ═══════════ ЖИВЫЕ ДЕМО (замена фейк-кейсов) ═══════════ */
.demo-sub { color: var(--color-text-secondary); max-width: 60ch; margin: 14px auto 0; text-align: center; font-size: 16px; line-height: 1.55; }
.demo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.demo-card { display: flex; flex-direction: column; gap: 13px; padding: 26px; border-radius: 18px;
  background: linear-gradient(162deg, rgba(255,255,255,.035), rgba(255,255,255,.006) 60%);
  border: 1px solid rgba(255,255,255,.07); text-decoration: none; color: var(--color-text-primary);
  transition: transform .32s cubic-bezier(.22,1,.36,1), border-color .3s ease, background .3s ease; }
.demo-card:hover { transform: translateY(-6px); border-color: rgba(205,255,79,.3); background: var(--color-surface); }
.demo-card__top { display: flex; align-items: center; justify-content: space-between; }
.demo-card__tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-secondary); }
.demo-card__live { font-family: var(--font-mono); font-size: 11px; color: var(--color-accent); letter-spacing: .04em; }
.demo-card__title { font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.demo-card__pp { display: flex; flex-direction: column; gap: 9px; }
.demo-card__pp p { margin: 0; color: var(--color-text-secondary); font-size: 13.5px; line-height: 1.5; }
.demo-card__lbl { display: inline-block; font-family: var(--font-mono); font-size: 9px; letter-spacing: .07em; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; margin-right: 7px; vertical-align: 1px; }
.demo-card__lbl--was { color: var(--color-text-muted); background: rgba(255,255,255,.05); }
.demo-card__lbl--did { color: #0A0E1A; background: var(--color-accent); font-weight: 600; }
.demo-card__cta { margin-top: auto; padding-top: 8px; color: var(--color-accent); font-weight: 600; font-size: 15px; }
@media (max-width: 980px) { .demo-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .demo-grid { grid-template-columns: 1fr; } }

/* — блок «проблема» на страницах услуг: крупнее, живее — */
.problem-block h2 { color: var(--color-text-primary); }
.problem-lead { font-size: clamp(18px, 2.1vw, 22px) !important; line-height: 1.55 !important; color: var(--color-text-secondary) !important; max-width: 68ch; }
.problem-lead::first-line { color: var(--color-text-primary); }

/* — тизер цен на главной (вместо большой CRM-прайс-карты) — */
.price-teaser { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 42px 0 22px; align-items: stretch; }
.price-teaser__card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 30px 26px; border-radius: 18px;
  background: linear-gradient(162deg, rgba(255,255,255,.035), rgba(255,255,255,.006) 60%); border: 1px solid rgba(255,255,255,.07);
  text-decoration: none; color: var(--color-text-primary); transition: transform .3s cubic-bezier(.22,1,.36,1), border-color .3s, background .3s; }
.price-teaser__card:hover { transform: translateY(-6px); border-color: rgba(205,255,79,.3); background: var(--color-surface); }
.price-teaser__card--flag { border-color: rgba(205,255,79,.25); background: linear-gradient(150deg, rgba(205,255,79,.08), rgba(255,255,255,.01) 60%); }
.price-teaser__badge { position: absolute; top: -10px; left: 26px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #0A0E1A; background: var(--color-accent); padding: 4px 11px; border-radius: 999px; }
.price-teaser__name { font-size: 15px; color: var(--color-text-secondary); }
.price-teaser__val { font-family: var(--font-display); font-size: 34px; font-weight: 800; letter-spacing: -.02em; color: var(--color-text-primary); }
.price-teaser__val small { font-size: 14px; font-weight: 400; color: var(--color-text-muted); }
.price-teaser__go { margin-top: auto; padding-top: 10px; color: var(--color-accent); font-weight: 600; font-size: 15px; }
.price-teaser__note { text-align: center; color: var(--color-text-muted); font-size: 14px; max-width: 60ch; margin: 0 auto; }
@media (max-width: 820px) { .price-teaser { grid-template-columns: 1fr; } }

/* ── Крафт-полировка «дизайнер, не ИИ» (аудит 20.07): движение с доводкой ── */
/* Каскад демо-грида вместо всплытия одним блоком (сервис-карточки выше уже стаггерятся) */
.demo-grid .demo-card:nth-child(2){ transition-delay:.06s }
.demo-grid .demo-card:nth-child(3){ transition-delay:.12s }
.demo-grid .demo-card:nth-child(4){ transition-delay:.18s }
.demo-grid .demo-card:nth-child(5){ transition-delay:.24s }
.demo-grid .demo-card:nth-child(6){ transition-delay:.30s }
.demo-grid .demo-card:hover{ transition-delay:0s }

/* Система ховера: внутренности карточки отвечают на лифт, а не только рамка */
.svc-card__icon{ transition:border-color .3s ease, background .3s ease, transform .35s cubic-bezier(.22,1,.36,1); }
.svc-card:hover .svc-card__icon{
  border-color:rgba(205,255,79,.45);
  background:rgba(205,255,79,.12);
  transform:translateY(-2px) scale(1.06);
}
.svc-card__cta, .demo-card__cta{ display:inline-block; transition:transform .28s cubic-bezier(.22,1,.36,1), color .2s ease; }
.svc-card:hover .svc-card__cta,
.demo-card:hover .demo-card__cta{ transform:translateX(5px); color:#DBFF6E; }
@media(prefers-reduced-motion:reduce){
  .svc-card:hover .svc-card__icon,
  .svc-card:hover .svc-card__cta,
  .demo-card:hover .demo-card__cta{ transform:none; }
}

/* Типографика: ослабить трекинг мелких заголовков (были почти как 60px hero), чистый рэг */
.svc-card__title, .demo-card__title{ letter-spacing:-.01em; text-wrap:balance; }

/* ── Единый голос дисплей-шрифта: Unbounded ниже hero (был только в hero, ── */
/* остальное падало на generic Manrope — главная причина «сделано ИИ», аудит 20.07) */
.svc-card__title,
.demo-card__title,
.price-teaser__val,
.pkg__title { font-family: 'Unbounded', var(--font-display); }

/* ==== hero-premium.css ==== */
/* hero-premium.css — high-end полировка hero (Linear/Stripe/Apple уровень).
   Загружается ПОСЛЕДНИМ → переопределяет базовые стили. Не меняет структуру/цвета/концепцию.
   Только глубина, свет, стекло, объём, микро-движение. Один акцент — лайм #CDFF4F. */

/* ── глубина фона: несколько мягких световых слоёв + OLED-виньетка ── */
.hero{position:relative;isolation:isolate}
.hero::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 50% at 82% 26%, rgba(205,255,79,.10), transparent 60%),
    radial-gradient(45% 40% at 12% 8%, rgba(205,255,79,.05), transparent 60%),
    radial-gradient(120% 120% at 50% 120%, rgba(0,0,0,.5), transparent 55%);
  mix-blend-mode:screen;opacity:.9;
}
.hero__inner{position:relative;z-index:2}

/* ── типографика: тоньше кернинг, чище иерархия ── */
.hero__title{letter-spacing:-.03em;line-height:1.02}
.hero__subtitle{letter-spacing:-.01em;color:#a6b0c0;max-width:34ch}
.hero__eyebrow{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(205,255,79,.18);background:rgba(205,255,79,.04)}

/* ── кнопки уровня Linear ── */
.hero__actions .btn{transition:transform .22s cubic-bezier(.2,1,.3,1),box-shadow .3s ease,background .2s ease,border-color .2s ease}
.hero__actions .btn--accent{box-shadow:0 8px 30px -8px rgba(205,255,79,.5),0 1px 0 rgba(255,255,255,.25) inset}
.hero__actions .btn--accent:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 18px 50px -10px rgba(205,255,79,.65),0 1px 0 rgba(255,255,255,.35) inset}
.hero__actions .btn--ghost:hover{transform:translateY(-2px);border-color:rgba(205,255,79,.5);box-shadow:0 0 30px -6px rgba(205,255,79,.25)}

/* ── соц-доказательство (300+ команд / 4.9) ── */
.hero__proof{display:flex;align-items:center;gap:26px;margin-top:30px;flex-wrap:wrap}
.hero__proof-group{display:flex;align-items:center;gap:13px}
.hero__proof-avatars{display:flex}
.hero__proof-av{width:42px;height:42px;border-radius:50%;border:2px solid #0c1220;margin-left:-12px;
  background-size:cover;background-position:center;box-shadow:0 4px 12px rgba(0,0,0,.4);position:relative}
.hero__proof-av:first-child{margin-left:0}
.hero__proof-av--1{background:linear-gradient(135deg,#4a5b74,#212b3d)}
.hero__proof-av--2{background:linear-gradient(135deg,#5a6a54,#2b3626)}
.hero__proof-av--3{background:linear-gradient(135deg,#6a5a6a,#332633)}
.hero__proof-av svg{position:absolute;inset:0;margin:auto;width:22px;height:22px;color:rgba(255,255,255,.55)}
.hero__proof-t{font-size:15px;font-weight:700;color:#fff;line-height:1.25}
.hero__proof-t small{display:block;font-size:12.5px;font-weight:500;color:#8792a3;margin-top:2px}
.hero__proof-stars{display:flex;gap:2px;margin-bottom:3px}
.hero__proof-stars svg{width:15px;height:15px;color:#CDFF4F}
@media(max-width:560px){.hero__proof{gap:18px}}

/* ── премиум-фрейм дашборда: стекло + слоистая тень + свечение + лёгкий float ── */
.hero__right{position:relative;perspective:1600px}
.hero__frame{
  position:relative;z-index:2;transform-style:preserve-3d;
  transform:rotateY(-5deg) rotateX(3deg) translateZ(0);
  border:1px solid rgba(255,255,255,.09);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(20,27,42,.78),rgba(10,14,26,.9));
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:
    0 2px 6px rgba(0,0,0,.4),
    0 20px 50px -18px rgba(0,0,0,.75),
    0 50px 120px -40px rgba(0,0,0,.85),
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 1px 0 rgba(255,255,255,.09) inset;
  animation:heroFloat 9s ease-in-out infinite;
  will-change:transform;
}
@keyframes heroFloat{0%,100%{transform:rotateY(-5deg) rotateX(3deg) translateY(0)}50%{transform:rotateY(-4deg) rotateX(2.4deg) translateY(-9px)}}
@media(prefers-reduced-motion:reduce){.hero__frame{animation:none}}
/* свечение-блум за фреймом */
.hero__right::before{
  content:'';position:absolute;z-index:1;top:8%;right:-6%;width:78%;height:82%;
  background:radial-gradient(closest-side, rgba(205,255,79,.28), rgba(205,255,79,.06) 55%, transparent 75%);
  filter:blur(46px);pointer-events:none;
}
/* мягкое отражение под фреймом */
.hero__right::after{
  content:'';position:absolute;z-index:0;left:6%;right:6%;bottom:-24px;height:70px;
  background:radial-gradient(60% 100% at 50% 0%, rgba(0,0,0,.6), transparent 70%);
  filter:blur(10px);pointer-events:none;
}
@media(max-width:900px){
  .hero__frame{transform:none;animation:none}
  .hero__right::before{filter:blur(38px);opacity:.8}
}

/* верхняя панель фрейма — благороднее */
.hero__frame-bar{border-bottom:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.015)}
.hero__frame-url{letter-spacing:.02em;color:#7f8ba0}

/* ── дашборд-мокап: чище стекло, живые числа, hover ── */
.ui-mockup{background:transparent}
.ui-mockup__kpi{
  border:1px solid rgba(255,255,255,.06);border-radius:13px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008));
  transition:transform .25s cubic-bezier(.2,1,.3,1),border-color .25s,box-shadow .25s;
}
.ui-mockup__kpi:hover{transform:translateY(-3px);border-color:rgba(205,255,79,.28);box-shadow:0 12px 30px -14px rgba(0,0,0,.7)}
.ui-mockup__kpi-num{font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.ui-mockup__kpi-delta{color:#CDFF4F;background:rgba(205,255,79,.1);border-radius:20px;padding:2px 7px;font-size:10px;font-weight:700}

.ui-mockup__chart{border:1px solid rgba(255,255,255,.05);border-radius:13px;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent);overflow:hidden;position:relative}
.ui-mockup__chart::after{content:'';position:absolute;inset:0;background:radial-gradient(70% 100% at 80% 0%, rgba(205,255,79,.06), transparent 60%);pointer-events:none}
.ui-mockup__bar i,.ui-mockup__bar{transition:height .8s cubic-bezier(.2,1,.3,1)}
.ui-mockup__bar--hi{filter:drop-shadow(0 0 10px rgba(205,255,79,.5))}

.ui-mockup__row{border-radius:11px;transition:background .2s ease,transform .2s ease}
.ui-mockup__row:hover{background:rgba(205,255,79,.05);transform:translateX(2px)}
.ui-badge--done{color:#CDFF4F;border-color:rgba(205,255,79,.4)}

/* ── AI-панель в мокапе (премиум-акцент, как в референсе) ── */
.ui-mockup__ai{display:flex;gap:11px;align-items:flex-start;margin-top:12px;padding:12px 13px;
  border:1px solid rgba(205,255,79,.18);border-radius:13px;
  background:linear-gradient(180deg,rgba(205,255,79,.06),rgba(205,255,79,.01));position:relative;overflow:hidden}
.ui-mockup__ai::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(#CDFF4F,rgba(205,255,79,.2))}
.ui-mockup__ai-ic{width:26px;height:26px;border-radius:8px;flex-shrink:0;display:grid;place-items:center;
  background:rgba(205,255,79,.12);border:1px solid rgba(205,255,79,.3);color:#CDFF4F}
.ui-mockup__ai-ic svg{width:15px;height:15px}
.ui-mockup__ai-b{min-width:0}
.ui-mockup__ai-t{font-size:11px;font-family:var(--font-mono,monospace);text-transform:uppercase;letter-spacing:.06em;color:#9db06a}
.ui-mockup__ai-x{font-size:12.5px;color:#d6dce6;line-height:1.45;margin-top:3px}

/* ── метрики под hero: чуть воздуха, tabular ── */
.hero__metric-num{font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* ── FAQ: плавный аккордеон (JS вешает .faq-a / .is-open) ── */
.faq-a{overflow:hidden;max-height:0;opacity:0;transition:max-height .42s cubic-bezier(.4,0,.2,1),opacity .32s ease}
.faq-a.is-open{opacity:1}
.faq-item__icon{transition:transform .32s cubic-bezier(.2,1,.3,1);display:inline-block}
.faq-item__q[aria-expanded="true"] .faq-item__icon{transform:rotate(45deg)}

/* ==== dash.css ==== */
/* dash.css — богатый премиум-дашборд в hero (уровень референса).
   Живёт внутри .hero__frame (перспектива/стекло/блум — из hero-premium.css). */
.dash{--l:#CDFF4F;--pos:#31e0b0;color:#e9f0fb;font-family:var(--font-body,Inter,sans-serif)}
.dash__body{display:grid;grid-template-columns:46px 1fr;min-height:0}

/* rail */
.dash__rail{border-right:1px solid rgba(255,255,255,.06);padding:14px 0;display:flex;flex-direction:column;align-items:center;gap:5px;background:rgba(255,255,255,.015)}
.dash__rail-logo{width:22px;height:22px;border-radius:7px;background:linear-gradient(135deg,var(--l),var(--pos));box-shadow:0 0 16px rgba(205,255,79,.5);margin-bottom:10px}
.dash__rail-i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#5f6b80;transition:.2s}
.dash__rail-i svg{width:16px;height:16px}
.dash__rail-i.is-on{color:#0a0e17;background:var(--l);box-shadow:0 4px 14px rgba(205,255,79,.35)}

/* main */
.dash__main{padding:15px 16px 16px;display:flex;flex-direction:column;gap:11px;min-width:0}
.dash__head{display:flex;align-items:center;gap:10px}
.dash__title{font-size:15px;font-weight:700;letter-spacing:-.01em}
.dash__sub{font-family:var(--font-mono,monospace);font-size:10.5px;color:#6b7893;margin-top:2px}
.dash__period{margin-left:auto;font-family:var(--font-mono,monospace);font-size:10.5px;color:#9aa6bd;border:1px solid rgba(255,255,255,.09);border-radius:8px;padding:5px 9px;display:flex;gap:6px;align-items:center}
.dash__period svg{width:10px;height:10px}

/* KPI row */
.dash__kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.dash__kpi{border:1px solid rgba(255,255,255,.06);border-radius:11px;padding:10px 11px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.006));position:relative;overflow:hidden}
.dash__kpi::after{content:'';position:absolute;right:-16px;top:-16px;width:52px;height:52px;border-radius:50%;background:radial-gradient(circle,rgba(205,255,79,.09),transparent 70%)}
.dash__kpi-l{font-family:var(--font-mono,monospace);font-size:8.5px;text-transform:uppercase;letter-spacing:.05em;color:#6b7893;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash__kpi-n{font-size:18px;font-weight:800;letter-spacing:-.02em;margin-top:5px;font-variant-numeric:tabular-nums}
.dash__kpi-d{font-size:10px;font-weight:700;color:var(--pos);margin-top:3px;display:inline-flex;align-items:center;gap:3px}

/* row2: chart + donut */
.dash__row2{display:grid;grid-template-columns:1.55fr 1fr;gap:9px}
.dash__card{border:1px solid rgba(255,255,255,.06);border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.004));padding:12px 13px}
.dash__card-h{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.dash__card-t{font-size:11.5px;font-weight:600;color:#cdd6e6}
.dash__card-badge{margin-left:auto;font-family:var(--font-mono,monospace);font-size:9px;color:#6b7893}

/* area chart */
.dash__chart-wrap{position:relative;height:96px}
.dash__chart-wrap svg{width:100%;height:100%;display:block;overflow:visible}
.dash__chart-line{fill:none;stroke:var(--l);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:600;stroke-dashoffset:600;filter:drop-shadow(0 0 6px rgba(205,255,79,.5))}
.dash.in .dash__chart-line{animation:dashDraw 1.6s cubic-bezier(.4,0,.2,1) .3s forwards}
@keyframes dashDraw{to{stroke-dashoffset:0}}
.dash__chart-area{fill:url(#dashFill);opacity:0;transition:opacity .6s ease 1.1s}
.dash.in .dash__chart-area{opacity:1}
.dash__chart-dot{fill:#fff;stroke:var(--l);stroke-width:2;opacity:0}
.dash.in .dash__chart-dot{animation:dotIn .4s ease 1.7s forwards}
@keyframes dotIn{to{opacity:1}}
.dash__chart-x{display:flex;justify-content:space-between;margin-top:6px;font-family:var(--font-mono,monospace);font-size:8px;color:#5b6880}

/* donut */
.dash__donut{display:flex;align-items:center;gap:12px}
.dash__donut svg{width:74px;height:74px;flex-shrink:0;transform:rotate(-90deg)}
.dash__donut circle{fill:none;stroke-width:9;stroke-linecap:round;stroke-dasharray:0 999;transition:stroke-dasharray 1.1s cubic-bezier(.3,1,.4,1) .5s}
.dash__legend{display:flex;flex-direction:column;gap:6px;min-width:0}
.dash__legend-i{display:flex;align-items:center;gap:7px;font-size:10.5px;color:#aeb8c9;white-space:nowrap}
.dash__legend-i b{margin-left:auto;color:#e9f0fb;font-variant-numeric:tabular-nums;font-size:10.5px}
.dash__legend-dot{width:7px;height:7px;border-radius:2px;flex-shrink:0}

/* deals table */
.dash__deals{padding-bottom:8px}
.dash__deal{display:flex;align-items:center;gap:9px;padding:8px 4px;border-radius:9px;transition:background .18s}
.dash__deal:hover{background:rgba(205,255,79,.05)}
.dash__deal+.dash__deal{border-top:1px solid rgba(255,255,255,.04)}
.dash__deal-ic{width:24px;height:24px;border-radius:7px;flex-shrink:0;display:grid;place-items:center;font-size:11px;background:rgba(205,255,79,.1);color:var(--l);border:1px solid rgba(205,255,79,.2)}
.dash__deal-n{font-size:11.5px;font-weight:600;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.dash__deal-src{font-family:var(--font-mono,monospace);font-size:9.5px;color:#6b7893;width:56px;flex-shrink:0}
.dash__deal-v{font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;width:64px;text-align:right;flex-shrink:0}
.dash__deal-st{font-family:var(--font-mono,monospace);font-size:8.5px;text-transform:uppercase;letter-spacing:.03em;padding:3px 7px;border-radius:20px;border:1px solid currentColor;width:62px;text-align:center;flex-shrink:0}
.dash__deal-st--on{color:var(--pos)}.dash__deal-st--wait{color:#ffb020}

/* AI panel */
.dash__ai{display:flex;gap:10px;align-items:flex-start;padding:11px 12px;border:1px solid rgba(205,255,79,.2);border-radius:12px;
  background:linear-gradient(180deg,rgba(205,255,79,.07),rgba(205,255,79,.01));position:relative;overflow:hidden}
.dash__ai::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(var(--l),rgba(205,255,79,.2))}
.dash__ai-ic{width:24px;height:24px;border-radius:7px;flex-shrink:0;display:grid;place-items:center;background:rgba(205,255,79,.13);border:1px solid rgba(205,255,79,.3);color:var(--l)}
.dash__ai-ic svg{width:14px;height:14px}
.dash__ai-t{font-family:var(--font-mono,monospace);font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:#9db06a}
.dash__ai-x{font-size:11.5px;color:#d6dce6;line-height:1.45;margin-top:2px}

/* показываем дашборд и на мобиле (в оригинале был скрыт) — он адаптивен */
@media(max-width:900px){
  .hero__split .hero__right{display:block !important;margin-top:34px}
  .dash__row2{grid-template-columns:1fr}
  .dash__donut{justify-content:flex-start}
  .dash__deal-src{display:none}
}
@media(max-width:520px){
  .dash__body{grid-template-columns:1fr}
  .dash__rail{display:none}
  .dash__kpis{grid-template-columns:1fr 1fr}
}

/* ==== mobile-refactor.css (override, последним) ==== */
/* ═══════════════════════════════════════════════════════════════════════
   mobile-refactor.css — единый мобильный слой (2026-07-16).
   Подключается ПОСЛЕДНИМ на всех страницах → выигрывает каскадом, а не !important.
   Все правила строго внутри @media ≤768/≤430 — десктоп не трогаем.
   Токены ритма/меры — в variables.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────
   1. КРИТ: заскоупить правило скрытия мокапа (было глобальным → прятало
      все 4 продуктовых скриншота на /vozmozhnosti/). Действует на любом экране. */
.mockup-showcase:last-child { display: revert; }
@media (max-width: 768px) {
  .mockups__grid .mockup-showcase:last-child { display: none; }
}

@media (max-width: 768px) {

  /* ───────────────────────────────────────────────────────────────────
     2. НАВИГАЦИЯ: непрозрачный фон, чтобы контент не просвечивал под шапкой
        при скролле (баг на блоге/статьях). */
  .nav {
    background: rgba(10, 14, 26, 0.86);
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  /* ───────────────────────────────────────────────────────────────────
     3. МОБИЛЬНОЕ МЕНЮ — трёхзонный оверлей: шапка (nav сверху), скроллимая
        середина, закреплённый CTA-футер. Чинит критбаг «доскролл невозможен».
        Структуру аккордеона/футера достраивает nav-dropdown.js. */
  .mobile-menu {
    padding: 0;
    display: none;
    flex-direction: column;
    background: var(--color-bg);
    overscroll-behavior: contain;
  }
  .mobile-menu.open { display: flex; }

  /* скроллимая середина */
  .mobile-menu > ul {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: calc(var(--nav-h-mobile) + 14px) 22px 20px;
    gap: 2px;
  }
  .mobile-menu li { list-style: none; }
  /* верхний уровень — спокойный кегль, крупная тап-цель через паддинг */
  .mobile-menu a:not(.btn) {
    display: block;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 19px;
    line-height: 1.2;
    color: var(--color-text-primary);
    padding: 13px 0;
    letter-spacing: -0.01em;
  }
  .mobile-menu a:not(.btn):active { color: var(--color-accent); }

  /* аккордеон «Решения» (кнопка строится из .mobile-menu__label в JS) */
  .mm-acc-toggle {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: pointer;
    padding: 13px 0;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 19px;
    color: var(--color-text-primary);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    margin: 6px 0;
  }
  .mm-acc-toggle::after {
    content: "";
    width: 9px; height: 9px;
    border-right: 2px solid var(--color-accent);
    border-bottom: 2px solid var(--color-accent);
    transform: rotate(45deg);
    transition: transform var(--transition-base);
    margin-right: 4px;
  }
  .mm-acc-toggle[aria-expanded="true"]::after { transform: rotate(-135deg); }
  .mm-acc-panel {
    overflow: hidden;
    max-height: 0;
    transition: max-height var(--transition-slow);
  }
  .mm-acc-panel.open { max-height: 720px; }
  /* ниши внутри аккордеона — компактнее, приглушённее, 2 в ряд */
  .mm-acc-panel ul,
  .mm-acc-panel { padding: 0; }
  .mm-acc-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
    padding: 6px 0 10px;
  }
  .mm-acc-list a {
    font-size: 14.5px !important;
    font-weight: 500 !important;
    color: var(--color-text-secondary) !important;
    padding: 9px 0 !important;
  }
  .mm-acc-list a:active { color: var(--color-accent) !important; }

  /* Telegram-строка компактнее (длинная, ломалась в 2 строки) */
  .mobile-menu a[href*="t.me"] {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--color-text-secondary) !important;
  }

  /* закреплённый CTA-футер (кнопку переносит JS в .mobile-menu__cta) */
  .mobile-menu__cta {
    flex: 0 0 auto;
    padding: 14px 22px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--color-bg);
  }
  .mobile-menu__cta .btn {
    width: 100%;
    justify-content: center;
    font-size: 16px;
  }

  /* бургер поверх меню, крестик белый */
  .nav__burger { z-index: 101; }

  /* ───────────────────────────────────────────────────────────────────
     4. HERO-МЕТРИКИ — честная сетка 2×2 без «висячих» разделителей и пустоты.
        Покрывает и главную (.hero__metrics) и внутренние (.ph-metrics). */
  .hero__metrics,
  .ph-metrics {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    padding: 20px 0 8px !important;
    background: rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    overflow: hidden;
  }
  .hero__metric,
  .ph-metric {
    flex: none !important;
    padding: 16px 18px !important;
    margin: 0 !important;
    border: none !important;
    background: var(--color-bg);
  }
  .hero__metric-sep,
  .ph-metric-sep { display: none !important; }
  .hero__metric-num,
  .ph-metric-num { font-size: 26px !important; }
  .hero__metric-num em,
  .ph-metric-num em { font-style: normal; }

  /* ───────────────────────────────────────────────────────────────────
     5. ТЕЛО/ТИПОГРАФИКА — контраст выше, ширина строки ограничена.
        (Матвей: «тяжело читать» — серый текст на тёмном утомляет.) */
  .hero__subtitle,
  .page-hero p,
  .section-sub,
  .prose p,
  .article p,
  .article li {
    color: #B9C0CC;
  }
  .prose p, .article p,
  .section-sub, .hero__subtitle {
    max-width: var(--measure);
  }
  .section-title, .page-hero h1 { max-width: 18ch; }

  /* ───────────────────────────────────────────────────────────────────
     6. ЦЕНА — не переносить символ валюты на отдельную строку. */
  .pkg__price,
  .pricing__price { flex-wrap: nowrap; }
  .pkg__price-val,
  .pricing__price-val {
    font-size: clamp(28px, 8vw, 38px) !important;
    white-space: nowrap;
    line-height: 1.05;
  }
  @media (max-width: 380px) {
    .pkg__price-val, .pricing__price-val { font-size: 26px !important; }
  }

  /* ───────────────────────────────────────────────────────────────────
     7. РИТМ СЕКЦИЙ — единое «дыхание», чтобы подача не читалась стеной.
        Не режем контент, а выравниваем вертикальные отступы. */
  section { padding: var(--space-section-mobile) 0; }
  .section-title.words-wrapped { margin-bottom: var(--space-block); }
}

/* ─────────────────────────────────────────────────────────────────────
   8. КРИТ: morph-секция «Хаос→Система» — показать подпись на мобилке.
      На ≤899px JS-анимация не запускает fixed-подпись → она невидима. */
@media (max-width: 899px) {
  .morph-cap {
    position: static !important;
    opacity: 1 !important;
    transform: none !important;
    order: -1;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   9. PER-TEMPLATE — правки конкретных шаблонов (CSS применяется ко всем
      экземплярам: 16 ниш / 26 статей сразу, без правки их HTML). */
@media (max-width: 768px) {

  /* ── БЛОГ-СТАТЬЯ (×26): ритм чтения — ядро жалобы «тяжело изучать» ── */
  .breadcrumb { padding-top: 84px !important; }
  .article-body > p:first-of-type {           /* лид-абзац */
    font-size: 18.5px; line-height: 1.6; color: #C9CFDA;
  }
  .article-body p, .article-body li { font-size: 17px; color: #B9C0CC; max-width: var(--measure); }
  .article-body h2 {
    font-size: clamp(21px, 5.6vw, 27px); line-height: 1.2;
    margin-top: 1.7em; letter-spacing: -0.01em;
  }
  .article-body h2 + p { margin-top: .6em; }
  .article-cta { padding: 26px 18px; }
  .article-cta .btn, .article-cta a.btn {
    width: 100%; justify-content: center; white-space: normal;
  }

  /* ── БЛОГ-ЛЕНТА: карточки компактнее и читаемее ── */
  .blog-card { padding: 22px 20px; }
  .blog-card__title { font-size: 19px; line-height: 1.25; }
  .blog-card__desc { color: #ADB4C0; }

  /* ── НИШИ (×16): hero-видео off (перф, постер остаётся), H2 clamp ── */
  .page-hero--media .page-hero__media-el { display: none !important; }
  .work h2, .work__body h2, .whatin h2, .works h2 {
    font-size: clamp(22px, 6vw, 30px); line-height: 1.15;
  }

  /* ── SISTEMA: пояснения под ценами читаемее ── */
  .market-compare__note { font-size: 13px !important; line-height: 1.5; }

  /* ── O-NAS / общие FAQ: крупнее вопрос/ответ, крупнее тап ── */
  .faq-item__q { font-size: 16.5px; line-height: 1.35; }
  .faq-item__a { font-size: 15px; line-height: 1.7; }

  /* ── KEYSY: proof-strip 2×2 без «висячих» бордеров + демо-CTA видим ── */
  .proof-strip { display: grid !important; grid-template-columns: 1fr 1fr; gap: 1px; }
  .proof-strip__item { border: none !important; }
  /* мобилка = тач: призыв «Открыть демо» не должен зависеть от hover */
  .demo-card__open { opacity: 1 !important; transform: none !important; }

  /* ── SAYTY: выпрямить 3D-наклон браузера (дешевит на мобилке) ── */
  .sy-browser { transform: none !important; }

  /* ── универсально: инпуты 16px — iOS Safari не зумит при фокусе ──
     !important обязателен: боевые формы задают 14–15px с большей специфичностью
     (sections.css / sayty.css), из-за чего iPhone зумил вьюпорт на фокусе. */
  input, textarea, select,
  .form-group input, .contact input, .quiz input, #business, #contact-input,
  .sy-form input { font-size: 16px !important; }

  /* ── тап-таргеты ≥44px: футер-ссылки, ниши в аккордеоне, бургер ── */
  .footer a, .site-footer a, .footer__col a, .footer-nav a { padding: 7px 0; display: inline-block; }
  .mm-acc-list a { min-height: 44px; display: flex; align-items: center; }
  #burger, .burger { padding: 10px; margin: -10px; }
}

/* ── морф-секция «Хаос→Система» на мобилке: постер крупнее + дыхание подписи ── */
@media (max-width: 768px) {
  .morph-poster svg { width: min(88vw, 380px); }
  .morph-pin { gap: 26px; padding: 0 20px; }
  .morph-cap { margin-bottom: 2px; }
  .morph-cap small { display: block; max-width: 32ch; margin-left: auto; margin-right: auto; }
}

/* ── тач-устройства: демо-CTA «Открыть демо» всегда видим (не по hover) ── */
@media (hover: none) {
  .demo-card__open { opacity: 1 !important; }
}

/* ── Плавающая кнопка-заявка на мобиле: постоянный CTA (раньше его не было) ── */
#uq-float-cta { display: none; }
@media (max-width: 768px) {
  #uq-float-cta {
    display: inline-flex; align-items: center; gap: 8px;
    position: fixed; right: 14px; bottom: 14px; z-index: 900;
    padding: 12px 18px; border-radius: 999px;
    background: var(--color-accent, #CDFF4F); color: #0A0E1A;
    font: 600 15px/1 var(--font-display, system-ui), sans-serif;
    text-decoration: none; box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.05);
    -webkit-tap-highlight-color: transparent;
  }
  #uq-float-cta svg { width: 18px; height: 18px; }
  #uq-float-cta:active { transform: scale(.96); }
}


/* Телефон в шапке — живой канал связи (анти-скам) + работает цель call */
.nav__tel{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--color-text-primary,#E7EAF0);text-decoration:none;white-space:nowrap;transition:color .2s}
.nav__tel svg{opacity:.7;flex:0 0 auto}
.nav__tel:hover{color:var(--color-accent,#CDFF4F)}
.nav__tel:hover svg{opacity:1}
@media(max-width:1200px){.nav__tel{display:none}}
/* Телефон занял место в шапке — на средних десктопах ужимаем разрядку, иначе «О нас» переносится и CTA обрезается */
@media(min-width:1201px) and (max-width:1520px){.nav__inner{gap:26px}.nav__links{gap:24px}}

/* ==== wave2.css (волна 2 аудита, последним) ==== */
/* Волна 2 аудита 30.07.2026 — первый экран и порядок блоков.
   Файл идёт в bundle.css последним (после mobile-refactor.css). */

/* ── HERO главной: цена, ассуранс и мобильный визуал-доказательство ── */
.hero__left { gap: 24px; }

.hero__pricebar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hero__price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--color-accent);
  white-space: nowrap;
  text-shadow: 0 0 34px rgba(205, 255, 79, .26);
}
.hero__price-note { font-size: 13px; line-height: 1.42; color: var(--color-text-secondary); max-width: 32ch; }
.hero__assurance--lead { margin-top: 0; font-size: 13.5px; }

/* Реальный скриншот живой CRM вместо нарисованного дашборда.
   dash.css возвращал мокап на мобилку (@media 900px, display:block !important) —
   он занимал 919px и показывал выдуманные цифры. Меняем на скриншот живого демо. */
.hero__proofshot { display: none; }
@media (max-width: 960px) {
  .hero__split .hero__right { display: none !important; }
  .hero__proofshot {
    display: block; position: relative; margin-top: 2px;
    border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px; overflow: hidden;
    background: #0d121c; text-decoration: none;
    box-shadow: 0 26px 54px -26px rgba(0, 0, 0, .85), 0 0 0 1px rgba(205, 255, 79, .06);
  }
  .hero__proofshot img { width: 100%; height: auto; display: block; }
  .hero__proofshot-cap {
    display: block; padding: 11px 14px; font-size: 12.5px; line-height: 1.45;
    color: var(--color-text-secondary); border-top: 1px solid rgba(255, 255, 255, .08);
  }
  .hero__proofshot-cap b { color: #fff; font-weight: 700; }
}

/* ── Демо-карточки: скриншот вместо голого текста ── */
.demo-card__shot {
  margin: -26px -26px 3px; background: #0d121c; overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.demo-card__shot img {
  width: 100%; height: auto; display: block;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.demo-card:hover .demo-card__shot img { transform: scale(1.035); }
@media (prefers-reduced-motion: reduce) {
  .demo-card__shot img { transition: none; }
  .demo-card:hover .demo-card__shot img { transform: none; }
}

/* ============================================================
   ВОЛНА 5-6 (аудит 30.07) — резка длины + плотность на мобилке.
   Дописано в хвост bundle.css (как wave2). Правишь → бампни ?v=.
   Страница была 18.35 экрана @390 — цель ≤10. Контент НЕ режем,
   ужимаем воздух и раскладку демо (все 6 демо на месте).
   ============================================================ */

/* Нота под услугами (растворённая trust-карточка «не платите за юзера») */
.services3__foot {
  margin: 26px auto 0; max-width: 62ch; text-align: center;
  font-size: 13.5px; line-height: 1.5; color: var(--color-text-secondary);
}
.services3__foot span[data-usd] { color: var(--color-text-primary); font-weight: 600; }

@media (max-width: 640px) {
  /* Вертикальный ритм секций плотнее (было 72px → воздуха слишком много) */
  section:not(.hero) { padding: 46px 0; }
  .section-title { margin-bottom: 10px; }

  /* Демо: 2 колонки + скриншот как доказательство, без вербозного Было/Стало.
     Все 6 демо остаются, просто плотнее. Текст Было/Стало виден на десктопе. */
  .demo-grid { grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 24px; }
  .demo-card { padding: 11px; gap: 7px; border-radius: 14px; }
  .demo-card__shot { margin: -11px -11px 2px; }
  .demo-card__pp { display: none; }
  .demo-card__title { font-size: 14.5px; line-height: 1.2; }
  .demo-card__top { font-size: 10.5px; }
  .demo-card__cta { font-size: 12.5px; }
  .demo-sub { font-size: 13.5px; }

  /* Границы (входит/не входит) — плотнее списки */
  .inout__grid { gap: 14px; }
  .inout__list li { margin-bottom: 8px; }
  .inout__head { margin-bottom: 16px; }

  /* Услуги — плотнее карточки, decorative-чипы модулей прячем (aria-hidden) */
  .services3__grid { gap: 12px; }
  .svc-card { padding: 18px; }
  .svc-card__list { margin-top: 10px; }
  .svc-card__list li { margin-bottom: 5px; }
  .services3__head { margin-bottom: 18px; }
  .svc-card__flag-modules { display: none; }

  /* Процесс — плотнее шаги */
  .process__steps { gap: 12px; }
  .process__step { padding: 14px 0; }

  /* FAQ — плотнее вопросы */
  .faq-item__q { padding-top: 15px; padding-bottom: 15px; }
  .faq__header { margin-bottom: 14px; }

  /* Калькулятор потерь — плотнее */
  .mirror__opts { gap: 8px; }
  .mirror-section__sub { margin-bottom: 14px; }

  /* Юрблок (wave4) — плотнее внутренние отступы */
  .legalx__head { margin-bottom: 16px; }

  /* Hero: метрики ближе к контенту */
  .hero__metrics { margin-top: 18px; }
}

/* ═══════════ UNIQORE · RETICLE на главной (портирован с /sayty/ — единый почерк) ═══════════
   Мотив «визир лупы»: перекрестие в eyebrow + мятные скобки-визир на акцентном слове +
   авто-фокус скобки на карточках. Узнаваемость через ГЕОМЕТРИЮ наводки, не цвет.
   Правила дописаны в хвост → перекрывают базовые .section-label::before / .section-title em. */
/* SIGN 1 · перекрестие-ретикул вместо чёрточки в eyebrow */
.section-label::before{
  width:11px;height:11px;border-radius:50%;margin-top:0;opacity:1;
  border:1px solid color-mix(in srgb, var(--color-accent) 50%, transparent);
  background:
    linear-gradient(var(--color-accent),var(--color-accent)) center/1.4px 6px no-repeat,
    linear-gradient(var(--color-accent),var(--color-accent)) center/6px 1.4px no-repeat;
}
/* SIGN 2 · визир-скобки (мята #31e0b0) на акцентном слове .section-title em */
.section-title em{position:relative;white-space:nowrap;padding:0 .22em}
.section-title em::before,.section-title em::after{content:"";position:absolute;width:.32em;height:.32em;border:2px solid #31e0b0;opacity:0;pointer-events:none;animation:uqReticleIn .6s cubic-bezier(.2,1,.3,1) .5s forwards}
.section-title em::before{top:-.12em;left:-.05em;border-right:0;border-bottom:0}
.section-title em::after{bottom:-.12em;right:-.05em;border-left:0;border-top:0}
@keyframes uqReticleIn{from{opacity:0}to{opacity:.9}}
/* SIGN 3 · авто-фокус скобки на карточках при наведении (только hover-устройства) */
@media(hover:hover){
  .svc-card,.demo-card{position:relative}
  .svc-card::after,.demo-card::after{content:"";position:absolute;inset:12px;z-index:3;pointer-events:none;opacity:0;transform:scale(.97);transition:opacity .3s ease,transform .35s cubic-bezier(.2,1,.3,1);background:
    linear-gradient(var(--color-accent),var(--color-accent)) left top/14px 1.5px no-repeat,
    linear-gradient(var(--color-accent),var(--color-accent)) left top/1.5px 14px no-repeat,
    linear-gradient(var(--color-accent),var(--color-accent)) right bottom/14px 1.5px no-repeat,
    linear-gradient(var(--color-accent),var(--color-accent)) right bottom/1.5px 14px no-repeat}
  .svc-card:hover::after,.demo-card:hover::after{opacity:.5;transform:scale(1)}
}
@media(prefers-reduced-motion:reduce){.section-title em::before,.section-title em::after{animation:none;opacity:.9}}

/* ── Волна 5-6 · мобильные фиксы (фаза 4 QA @390) ── */
@media (max-width: 640px){
  /* nav: убрать backdrop-filter на мобилке (правило + перф-джанк при скролле);
     фон был rgba(10,10,10,.85) — поднимаем до почти непрозрачного, читаемость держим */
  .nav.scrolled{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; background:rgba(10,10,10,.94) !important; }
  /* CRM-точка в форме не мигает на мобилке (правило «ноль бесконечных анимаций» + AI-tell «мигающий status-dot») */
  .form__crm-dot{ animation:none !important; opacity:1; }
  /* акцент-слово заголовка может переноситься — RETICLE nowrap заставлял «можно открыть» выезжать за 390px */
  .section-title em{ white-space:normal; }
}

/* ==== ПОЗИЦИОНИРОВАНИЕ ГЛАВНОЙ — новый H1 + ритм первого экрана (31.07, решение Матвея) ==== */
/* 2.4 Цены услуг — основной шрифт (Geist), а не JetBrains Mono: моно читается как код и удешевляет.
       Моно остаётся на технических лейблах/чипах/подписях. */
.svc-card__price { font-family: var(--font-body); letter-spacing: -0.01em; }

@media (max-width: 640px) {
  /* 2.1 Одна выключка — левая. Заголовок #uslugi и переключатель валют были центрированы,
         а контент под ними — слева; глаз перестраивался на каждом блоке. */
  .services3__head { text-align: left; }

  /* 2.2 Секционные заголовки — меньше кегль, влезают в 2 строки
         (было ~37px и до 5 строк у «весь цифровой отдел»). */
  .section-title { font-size: clamp(24px, 6.6vw, 30px); margin-bottom: 26px; }

  /* 2.3 Ритм первого экрана: сгруппировать воздух. Было — равномерный gap 20px между всеми
         элементами. Стало — внутри группы плотно, между группами воздух. */
  .hero__left { gap: 0; }
  .hero__left > .hero__title { margin: 0 0 10px; }         /* H1 + подзаголовок — плотно */
  .hero__left > .hero__subtitle { margin: 0 0 22px; }      /* → воздух между группами */
  .hero__left > .hero__pricebar { margin: 0 0 9px; }       /* цена + ассуранс — плотной парой */
  .hero__left > .hero__assurance { margin: 0 0 20px; }     /* → воздух перед кнопками */
  .hero__left > .hero__actions { margin: 0 0 24px; }
  .hero__left > .hero__proofshot { margin: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   ПРИЁМКА 31.07 — фиксы по итогам независимого аудита
   ═══════════════════════════════════════════════════════════════════ */

/* Итог по срокам под блоком «От запроса до работающей системы» */
.process__total {
  max-width: 62ch;
  margin: 34px auto 0;
  padding: 18px 22px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  background: rgba(255,255,255,.02);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  text-align: center;
}
.process__total b { color: var(--color-text-primary); font-weight: 600; }

@media (max-width: 768px) {
  /* Заголовок и подзаголовок одной выключки — было: h2 слева, текст по центру */
  .demo-sub { text-align: left; margin-left: 0; margin-right: 0; }

  /* FAQ выбивался из ритма: 34px против 25.7px у остальных секций */
  .faq .section-title { font-size: clamp(24px, 6.6vw, 30px); }

  /* Иконка щита уезжала на свою строку, отрывая её от текста */
  .hero__assurance { flex-wrap: nowrap; }

  .process__total { margin-top: 26px; padding: 16px 18px; font-size: 13.5px; text-align: left; }
}

/* Демо в одну колонку: на 390px карточка была 170px, скриншот 168×105 —
   интерфейс на превью не читался, а это главное доказательство страницы */
@media (max-width: 560px) {
  .demo-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* ══════════════════════════════════════════════════════════════════
   Правки 04.08 (главная): типографика, карточки демо, визир-скобки, FAQ
   ══════════════════════════════════════════════════════════════════ */

/* 1 · Заголовки были крупнее необходимого — сбавляем примерно на пятую часть */
.section-title { font-size: clamp(36px, 4.5vw, 62px); margin-bottom: 52px; }
.hero__title   { font-size: clamp(40px, 5.9vw, 66px); }
.faq .section-title { font-size: clamp(30px, 3.3vw, 44px); }
@media (max-width: 640px) {
  .section-title { font-size: clamp(30px, 8vw, 44px); margin-bottom: 32px; }
}

/* 2 · Оживляем текст БЕЗ background-clip:text. Градиент по буквам давал
   двоение заголовков: animations.js разбивает их на слова-слои, и обрезанный
   по буквам фон родителя ложился поверх собственного текста слоёв. Вместо
   градиента — мягкий небелый тон и акцент лаймом (он и так есть). */
.section-title, .hero__title {
  background: none; -webkit-text-fill-color: currentColor; color: #eef2f8;
}
.section-title .word-reveal, .hero__title .word-reveal {
  background: none; -webkit-text-fill-color: currentColor; color: inherit;
}
.section-sub, .faq__sub, .section-lead {
  color: #a8b4c6; line-height: 1.62; letter-spacing: .003em;
}

/* 3 · Карточки «Шесть систем» — короче: плотнее отступы и описание
   в две строки, чтобы высоты сравнялись и ряд читался одним взглядом */
.demo-card { padding: 20px; gap: 10px; }
.demo-card__title { font-size: 20px; }
.demo-card__pp { gap: 6px; }
.demo-card__pp p {
  font-size: 13px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.demo-card__cta { padding-top: 4px; font-size: 14px; }
@media (max-width: 640px) { .demo-card { padding: 16px; } }

/* 4 · Визир-скобки: были заданы от строчного бокса (line-height 1.04),
   поэтому висели заметно выше капители и ниже базовой линии — «мимо» слова.
   Сажаем em на собственный inline-block с плотной строкой: теперь границы
   бокса совпадают с глифами, и скобки обнимают слово, а не воздух. */
/* em остаётся ОБЫЧНЫМ inline: display:inline-block с укороченной строкой
   раздувал строчный бокс, и на 768px строки заголовка наезжали друг на
   друга на 16–21px. Плотный бокс был нужен, пока скобки считались в em от
   его границ; теперь их позиции берёт brackets.js по чернилам слова —
   геометрия бокса больше не важна. */
.section-title em, .hero__title em {
  display: inline; line-height: inherit; padding: 0 .14em;
}
.section-title em::before, .section-title em::after,
.hero__title em::before,   .hero__title em::after {
  width: .3em; height: .3em; border-width: .045em;
}
/* Замер на живой странице (Unbounded 700, 62px): чернила глифов начинаются
   на .41em ниже верха строчного бокса, а хвост «р» уходит на .15em НИЖЕ него.
   Поэтому скобки по краям бокса и висели в воздухе. Сажаем их по чернилам
   с одинаковым зазором .06em сверху и снизу — значения в em, так что
   попадание сохраняется на любом кегле и на мобильных размерах. */
/* Точные позиции считает js/brackets.js по фактическим чернилам слова:
   у «без вас» нет заглавных и хвостов, у «можно открыть» есть descender —
   одни и те же em-значения давали разброс до 20px. Значения ниже остаются
   запасными на случай, если скрипт не отработал. */
.section-title em::before, .hero__title em::before { top: var(--brk-top, .35em);       left: -.06em; }
.section-title em::after,  .hero__title em::after  { bottom: var(--brk-bottom, -.21em); right: -.06em; }

/* 5 · FAQ: заголовок едет вместе со списком и стоит по центру экрана.
   Только там, где колонки две — в одну колонку липкость мешает. */
@media (min-width: 981px) {
  .faq__inner { align-items: start; }
  .faq__header {
    position: sticky; top: 50vh; transform: translateY(-50%);
    align-self: start; will-change: transform;
  }
  .faq__header .section-title { margin-bottom: 22px; }
}

/* Липкий заголовок FAQ не работал: у секции стоял overflow:hidden (он нужен,
   чтобы декоративное пятно .faq::before не вылезало за правый край), а любой
   overflow кроме visible делает предка скролл-контейнером и убивает sticky.
   overflow-x:clip обрезает так же, но контейнер прокрутки не создаёт. */
.faq { overflow: visible; overflow-x: clip; }
@supports not (overflow: clip) {
  .faq { overflow: hidden; }            /* старые браузеры: вёрстка целая, липкости нет */
  .faq__header { position: static; transform: none; }
}

/* overflow-x:hidden на body (reset + мобильный медиазапрос) делает сам body
   контейнером прокрутки — из-за этого position:sticky не работает нигде на
   странице. overflow-x:clip защищает от горизонтального разъезда так же, но
   контейнер прокрутки не создаёт. */
html, body { overflow-x: clip; }
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}

/* ═══ Разбор аудита 05.08 ═══
/* 2) Hero: clamp(40px,5.9vw,66px) упирался в потолок только с 1404px, а на
      1120–1400px давал +10…+25% к прежнему размеру — вместо «чуть меньше»
      заголовок вырос. Ставим планку ниже прежней на всём диапазоне. */
.hero__title { font-size: clamp(40px, 4.2vw, 60px); background-size: 100% 2.2em; background-repeat: no-repeat; }

/* 3) Мобильные размеры: мой прежний блок перебивал выверенные значения и
      увеличивал заголовки на 21% (секции) и 16.6% (FAQ). Возвращаем. */
@media (max-width: 640px) {
  .section-title { font-size: clamp(24px, 6.6vw, 30px); margin-bottom: 26px; }
  .faq .section-title { font-size: clamp(24px, 6.6vw, 30px); }
}

/* 4) Карточки демо: padding уменьшили до 20px, а вылет скриншота остался
      рассчитан на 26px — картинка вылезала на 6px за карточку и срезала
      скругление. На мобилке при padding 16 наоборот утопала на 5px. */
.demo-card__shot { margin: -20px -20px 3px; }
@media (max-width: 640px) { .demo-card__shot { margin: -16px -16px 2px; } }

/* 5) Скобки: запасные значения (на случай, если brackets.js не отработал)
      резали буквы — .35em входит в глиф «б» на четверть кегля. Сажаем по
      реальным метрикам Unbounded 700: ymax «б» .800, ymin «р» −.165.
      Толщина фиксированная: .045em давала 1.4px на мобильных заголовках. */
.section-title em::before, .hero__title em::before { top: var(--brk-top, .045em); }
.section-title em::after,  .hero__title em::after  { bottom: var(--brk-bottom, -.09em); }
.section-title em::before, .section-title em::after,
.hero__title em::before,   .hero__title em::after { border-width: 2px; }
/* боковой зазор был .26em против .07em сверху — рамка выходила приплюснутой */
.section-title em, .hero__title em { padding: 0 .14em; }
.section-title em::before, .hero__title em::before { left: -.03em; }
.section-title em::after,  .hero__title em::after  { right: -.03em; }

/* 6) FAQ: sticky включался с 981px, а две колонки появляются только с 1025px —
      в полосе 981–1024 заголовок ехал вверх на половину своей высоты без
      всякой липкости. И transform смещал его даже когда он не прилип:
      сверху накрывал первый вопрос, снизу оставлял дыру. Смещение убрано
      в top, transform снят вместе с лишним композиторским слоем. */
@media (min-width: 981px) and (max-width: 1024px) {
  .faq__header { position: static; transform: none; }
}
@media (min-width: 1025px) {
  .faq__header { position: sticky; top: clamp(96px, calc(50vh - 79px), 40vh); transform: none; will-change: auto; }
}

/* Фото офиса в карточке «Наш офис» — адрес без снимка читался как текст ради
   текста. Кадр во всю ширину карточки сверху, как у карточек работ. */
.legalx__card--photo { padding-top: 0; overflow: hidden; }
.legalx__shot {
  display: block; width: calc(100% + 2px); margin: -1px -1px 18px;
  aspect-ratio: 16 / 10; object-fit: cover; object-position: center 30%;
  border-radius: 18px 18px 0 0;
  filter: saturate(.92) contrast(1.02);
}
@media (max-width: 640px) { .legalx__shot { margin-bottom: 14px; aspect-ratio: 16 / 9; } }

/* Плавающие карточки hero висят на отрицательных отступах (left:-12% и -20%)
   относительно мокапа. На широком мониторе они красиво заходят на текстовую
   колонку, но при ширине окна около 1000px уходили за левый край экрана на
   50–61px. Прижимаем внутрь на узких десктопах — на больших всё как было. */
@media (min-width: 961px) and (max-width: 1200px) {
  .hero__fcard--a { left: -2% !important; }
  .hero__fcard--b { left: -4% !important; }
  .hero__fcard--c { left: 2% !important; }
}

/* ==== hero-deck.css ==== */
/* Первый экран с каруселью продуктов. Перенесён с /chernovik/hero3/.
   Что изменено при переносе:
   · снят глобальный сброс * — на главной он снёс бы отступы всей
     страницы; вместо него box-sizing только внутри секции;
   · сняты правила body и a по той же причине;
   · :root → .uqhero: тринадцать переменных не должны расползаться
     по документу (в bundle.css своих имён с ними не пересекается —
     проверено, ноль совпадений);
   · .team → .set__team: в bundle.css есть голый .team для секции
     «команда», он ломал бы список получателей в настройках CRM.
   Остальные 203 класса hero3 в bundle.css отсутствуют — проверено
   пересечением множеств, совпадений ноль. */
.uqhero *,.uqhero *::before,.uqhero *::after{box-sizing:border-box;margin:0;padding:0}
:where(.uqhero) a{color:inherit;text-decoration:none}
/* :where, а не .uqhero a — иначе (0,1,1) перебивает .uqhero-btn--main (0,1,0),
   и главная кнопка получает светлый #E7EAF0 на лайме вместо тёмного текста.
   :where даёт нулевой вес, правило ведёт себя ровно как голое a{} в черновике. */
/* Изоляция от бандла. Сброс через `.uqhero *` имеет специфичность (0,1,0) и
   проигрывает `section:not(.hero){padding:46px 0}` из мобильной части — (0,1,1).
   Разделы мокапа, боксы и колонки доски — это <section>, и они получали по
   46px сверху и снизу: у панели CRM «Настройки» последнее правило уезжало на
   30,8px за низ окна. Ставим равную специфичность и берём порядком: этот блок
   в бандле последний. */
.uqhero section{padding:0;margin:0}

/* ═══════════════════════════════════════════════════════════════════════
   Черновик 2. Собран не «как мне кажется красиво», а по замерам эталонов.

   Что показала разведка Linear / Attio / Vercel / Framer / Clay / Stripe:
   · наклон интерфейса — 0 из 8 сайтов. Все показывают UI фронтально;
   · шрифт ВНУТРИ мокапа 10–14px, не крупнее. Крупный кегль = сразу фейк;
   · тень — стек 4–5 слоёв по 2.5–6%, цвет сине-серый, а не чёрный;
   · граница — хайрлайн 1px белым на 6–10%, не серая рамка;
   · зерно обязательным слоем: тайл 96px, overlay, 5%;
   · амплитуда движения 4–20px, длительности 0.16–0.4s;
   · H1 54–88px, вес 500–600, трекинг −0.02…−0.04em, line-height 1.0;
   · мокап обрезан сгибом — треть уходит вниз.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   Черновик 2. Собран не «как мне кажется красиво», а по замерам эталонов.

   Что показала разведка Linear / Attio / Vercel / Framer / Clay / Stripe:
   · наклон интерфейса — 0 из 8 сайтов. Все показывают UI фронтально;
   · шрифт ВНУТРИ мокапа 10–14px, не крупнее. Крупный кегль = сразу фейк;
   · тень — стек 4–5 слоёв по 2.5–6%, цвет сине-серый, а не чёрный;
   · граница — хайрлайн 1px белым на 6–10%, не серая рамка;
   · зерно обязательным слоем: тайл 96px, overlay, 5%;
   · амплитуда движения 4–20px, длительности 0.16–0.4s;
   · H1 54–88px, вес 500–600, трекинг −0.02…−0.04em, line-height 1.0;
   · мокап обрезан сгибом — треть уходит вниз.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   Черновик 2. Собран не «как мне кажется красиво», а по замерам эталонов.

   Что показала разведка Linear / Attio / Vercel / Framer / Clay / Stripe:
   · наклон интерфейса — 0 из 8 сайтов. Все показывают UI фронтально;
   · шрифт ВНУТРИ мокапа 10–14px, не крупнее. Крупный кегль = сразу фейк;
   · тень — стек 4–5 слоёв по 2.5–6%, цвет сине-серый, а не чёрный;
   · граница — хайрлайн 1px белым на 6–10%, не серая рамка;
   · зерно обязательным слоем: тайл 96px, overlay, 5%;
   · амплитуда движения 4–20px, длительности 0.16–0.4s;
   · H1 54–88px, вес 500–600, трекинг −0.02…−0.04em, line-height 1.0;
   · мокап обрезан сгибом — треть уходит вниз.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   Черновик 2. Собран не «как мне кажется красиво», а по замерам эталонов.

   Что показала разведка Linear / Attio / Vercel / Framer / Clay / Stripe:
   · наклон интерфейса — 0 из 8 сайтов. Все показывают UI фронтально;
   · шрифт ВНУТРИ мокапа 10–14px, не крупнее. Крупный кегль = сразу фейк;
   · тень — стек 4–5 слоёв по 2.5–6%, цвет сине-серый, а не чёрный;
   · граница — хайрлайн 1px белым на 6–10%, не серая рамка;
   · зерно обязательным слоем: тайл 96px, overlay, 5%;
   · амплитуда движения 4–20px, длительности 0.16–0.4s;
   · H1 54–88px, вес 500–600, трекинг −0.02…−0.04em, line-height 1.0;
   · мокап обрезан сгибом — треть уходит вниз.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   Черновик 2. Собран не «как мне кажется красиво», а по замерам эталонов.

   Что показала разведка Linear / Attio / Vercel / Framer / Clay / Stripe:
   · наклон интерфейса — 0 из 8 сайтов. Все показывают UI фронтально;
   · шрифт ВНУТРИ мокапа 10–14px, не крупнее. Крупный кегль = сразу фейк;
   · тень — стек 4–5 слоёв по 2.5–6%, цвет сине-серый, а не чёрный;
   · граница — хайрлайн 1px белым на 6–10%, не серая рамка;
   · зерно обязательным слоем: тайл 96px, overlay, 5%;
   · амплитуда движения 4–20px, длительности 0.16–0.4s;
   · H1 54–88px, вес 500–600, трекинг −0.02…−0.04em, line-height 1.0;
   · мокап обрезан сгибом — треть уходит вниз.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   Черновик 2. Собран не «как мне кажется красиво», а по замерам эталонов.

   Что показала разведка Linear / Attio / Vercel / Framer / Clay / Stripe:
   · наклон интерфейса — 0 из 8 сайтов. Все показывают UI фронтально;
   · шрифт ВНУТРИ мокапа 10–14px, не крупнее. Крупный кегль = сразу фейк;
   · тень — стек 4–5 слоёв по 2.5–6%, цвет сине-серый, а не чёрный;
   · граница — хайрлайн 1px белым на 6–10%, не серая рамка;
   · зерно обязательным слоем: тайл 96px, overlay, 5%;
   · амплитуда движения 4–20px, длительности 0.16–0.4s;
   · H1 54–88px, вес 500–600, трекинг −0.02…−0.04em, line-height 1.0;
   · мокап обрезан сгибом — треть уходит вниз.
   ═══════════════════════════════════════════════════════════════════════ */

.uqhero{
  /* Палитра Uniqore, не чёрный Linear: тёмно-синий Deep Tech + лайм + мята.
     Синева в фоне важна — на чистом чёрном лайм выглядит кислотно, а на
     #0A0E1A он садится в тон и читается как акцент системы. */
  --bg:#0A0E1A;
  --surface:#121826;
  --surface-2:#0E1422;
  --border:#1E2536;
  --ink:#E7EAF0;
  --dim:#949BA8;
  /* #808c9f, не #7a8699: на чипе (белый 5% поверх поверхности) старый цвет
     давал 4,42:1 при норме AA 4,5. Новый — 4,79 на чипе и 5,4 на панели */
  --dim2:#808c9f;
  --lime:#CDFF4F;
  --lime-dim:#9BC22F;
  --mint:#31e0b0;
  --hair:rgba(255,255,255,.07);
  --font:'Geist',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  font-family:var(--font);
  font-size:16px;
  line-height:normal;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

/* ₽ отсутствует во ВСЕХ наших шрифтах — проверено fontTools по шести woff2.
   Символ всегда рисуется системным фолбэком, и без подгонки он садится ниже
   строки: при кегле 18 высота чернил ₽ = 12.4 против 13.1 у цифры. 1.055em
   выравнивает верх по цифрам, отбивка .2em — типографская, вместо пробела
   (обычный пробел в Geist шире и рвал строку «187 000 ₽» при переносе). */
.rub{
  /* display:inline обязателен: в файле есть жадные селекторы вида
     `.ai__b span{display:block}`, и они превращали каждый знак в блок —
     строка «11 600 ₽ против 9 800 ₽ за заявку» разваливалась на пять */
  display:inline;
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  font-size:1.055em;font-weight:inherit;letter-spacing:0;
  margin-left:.2em;white-space:nowrap;
}

.lab-note b{color:var(--lime)}

/* min-height двумя строками: Safari до 15.4 не знает svh и пропустит
   вторую — останется рабочая vh. Обратный порядок сломал бы новые. */
.uqhero{position:relative;overflow:hidden;padding:104px 0 40px;min-height:100vh;min-height:100svh;display:flex;align-items:center}

/* Две колонки: слева обещание, справа продукт. Правая колонка сознательно
   шире экрана — мокап уходит за край, как за сгиб у Linear, только по
   горизонтали: «продукта больше, чем поместилось в кадр». */
.grid{
  position:relative;z-index:3;width:100%;
  display:grid;grid-template-columns:minmax(340px,400px) minmax(0,1fr);
  /* minmax(0,1fr) обязателен: иначе grid расширяет вторую колонку под
     фиксированные 900px окна и ужимает текст, а окно перестаёт уходить
     за край экрана — весь смысл приёма пропадает. */
  align-items:center;gap:36px;
  max-width:1560px;margin:0 auto;
  /* база 1380, а не 1240: на 1440 это даёт по 30px с каждой стороны, и
     освободившиеся 140px уходят окну — иначе оно сжимается до 730 и
     содержимое внутри начинает переноситься */
  padding:0 max(20px,calc((min(100vw,1560px) - 1380px)/2));
}
.wrap{position:relative;z-index:3;text-align:left;padding-bottom:24px}

/* Фон: у Linear это radial + linear в два стопа, без «трёх пятен по вкусу» */
.uqhero__bg{
  position:absolute;inset:0;z-index:0;
  background:
    /* лаймовое свечение за окном — источник света сцены, но приглушённый:
       у эталонов подсветка едва заметна, вся работа на самом продукте */
    radial-gradient(46% 52% at 74% 34%, rgba(205,255,79,.09), transparent 68%),
    radial-gradient(38% 44% at 88% 62%, rgba(49,224,176,.065), transparent 70%),
    radial-gradient(52% 58% at 50% 100%, rgba(10,14,26,0) 0%, rgba(10,14,26,.6) 100%),
    linear-gradient(180deg, #0A0E1A 6%, #101728 100%);
}
/* Зерно: тайл 96px, отрисованный в 48 (2× плотность), overlay 5% — как у Framer */
.uqhero__grain{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  mix-blend-mode:overlay;opacity:.05;
  background-repeat:repeat;background-size:48px 48px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.pill{
  display:inline-block;margin-bottom:24px;
  font-size:13px;line-height:18px;color:var(--dim);
  border:1px solid rgba(205,255,79,.18);border-radius:13px;padding:5px 13px;
  background:rgba(205,255,79,.03);
}

/* H1: 64px / вес 600 / трекинг −0.022em / line-height 1.0 — медиана эталонов */
.h1{
  /* 54 на 1440: на 58 строка «работает без вас» не влезала в колонку и
     «вас» повисало четвёртой строкой. Ниже 52 заголовок проигрывает окну
     960×620 по весу и читается как подпись к картинке */
  font-size:clamp(38px,3.25vw,46px);line-height:1.04;font-weight:600;letter-spacing:-.028em;
  color:var(--ink);margin:0 0 22px;
}
/* Ступени кегля были 54 / 15,5 / 14 / 12,5 / 12,5 — четыре почти слитых
   уровня, глаз не читает их как иерархию, и провал после заголовка в 3,5
   раза. Стало 54 / 18 / 14,5 / 13 / 11: лид отделён, шаг ~1,25. У эталонов
   лид при H1 54–64 идёт 18–21px. */
.sub{font-size:18px;line-height:27px;font-weight:400;color:var(--dim);max-width:42ch;margin:0 0 30px}

.cta{display:flex;gap:10px;justify-content:flex-start;margin-bottom:24px;flex-wrap:wrap}
.uqhero-btn{
  display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 20px;
  border-radius:10px;font-size:14.5px;font-weight:500;
  transition:background-color .16s cubic-bezier(.25,.46,.45,.94),border-color .16s,color .16s;
}
/* теней у кнопок нет ни у Clay, ни у Framer, ни у Stripe */
.uqhero-btn--main{background:var(--lime);color:#0A1005}
.uqhero-btn--main:hover{background:#d9ff74}
.uqhero-btn--ghost{border:1px solid var(--hair);color:var(--ink)}
.uqhero-btn--ghost:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}

.marks{list-style:none;display:flex;flex-direction:column;gap:10px}
/* мелкий Geist читается плотно — на 13px и ниже нужен положительный трекинг */
.marks li{display:flex;align-items:center;gap:9px;font-size:13px;letter-spacing:.005em;color:var(--dim)}
.marks svg{width:15px;height:15px;color:var(--mint);flex:none}

/* Доказательство под обещанием: не «300+ клиентов», а имена систем, которые
   можно проверить. Логотипов у нас нет — значит текстом, как логополоса. */
.proof{margin-top:28px;padding-top:20px;border-top:1px solid var(--border)}
.proof__t{
  display:block;font:400 10px/1 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim2);margin-bottom:11px;
}
.proof__l{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:9px 18px}
.proof__l li{display:flex;flex-direction:column;gap:2px;line-height:1.25}
.proof__l b{font-size:13px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.proof__l i{font-style:normal;font-size:11px;letter-spacing:.005em;color:var(--dim2)}


/* ══ Карусель продуктов ════════════════════════════════════════════════
   Три дашборда в ряд: активный по центру и в фокусе, соседние выглядывают
   краями. Край соседа — не декор, а сообщение «здесь есть ещё»: без него
   человек не догадается, что можно листать, и увидит один продукт из трёх.
   Ширина подглядывания 34px — меньше читается как случайная полоска,
   больше начинает спорить с активной панелью за внимание. */
.deck{
  position:relative;width:100%;overflow:hidden;padding:26px 0 46px;
  /* Гасим соседа к кромке. Растушёвка ровно на ширину подглядывания:
     активная панель стоит на --peek от края и остаётся нетронутой, а
     обрезанный край соседа перестаёт читаться как баг вёрстки. */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--peek),#000 calc(100% - var(--peek)),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 var(--peek),#000 calc(100% - var(--peek)),transparent 100%);
  /* Панель заведомо уже деки: разница уходит на «подглядывание» соседей.
     По 38px с каждой стороны — этого хватает, чтобы прочитать «там ещё
     дашборды», и мало, чтобы сосед начал спорить с активной панелью. */
  /* Видимая часть соседа = peek − gap. При peek 26 и зазоре 22 оставалось
     четыре пикселя — соседа не было видно вовсе. Считаем от обратного:
     хотим показать 28px соседа, значит peek = 28 + gap. */
  --gap:14px;
  --peek:42px;
  --pw:calc(100% - var(--peek) * 2);
}
.deck__rail{
  display:flex;align-items:stretch;gap:var(--gap);
  /* именно translate, а не transform: на transform у этого контейнера
     вычисленное значение оставалось единичной матрицей — проверено
     замером, сдвиг просто не применялся. Отдельное свойство работает
     и заодно не конфликтует с трансформациями потомков. */
  transition:translate .62s cubic-bezier(.32,.72,.28,1);
  will-change:translate;
}
.deck__p{
  position:relative;flex:0 0 auto;width:var(--pw);
  transition:opacity .5s ease,filter .5s ease;
  /* Без scale: уменьшение сжимало соседа к его собственному центру и
     отодвигало край от кромки деки — подглядывание падало с 28px до 9.
     Глубину дают прозрачность и обесцвечивание, этого достаточно. */
  opacity:.3;filter:saturate(.5) brightness(.8);
}
.deck__p.is-on{opacity:1;filter:none}
/* соседние панели не перехватывают курсор — иначе пауза автопоказа
   срабатывает от края, которого человек даже не заметил */
.deck__p:not(.is-on){pointer-events:none}

.deck__tag{
  position:absolute;top:-26px;left:2px;
  font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim2);transition:color .4s ease;
}
.deck__p.is-on .deck__tag{color:var(--lime)}

/* Стрелки: круг со стеклом, не «шеврон на пустом месте». Держатся у краёв
   активной панели, а не у краёв экрана — иначе теряются на широком мониторе. */
.deck__arw{
  position:absolute;top:calc(50% - 10px);z-index:6;
  width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.1);
  background:rgba(16,22,38,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  color:var(--ink);display:grid;place-items:center;cursor:pointer;
  box-shadow:0 4px 14px rgba(6,9,18,.4), inset 0 1px 0 rgba(255,255,255,.07);
  transition:background-color .18s,border-color .18s,transform .18s cubic-bezier(.22,.61,.36,1);
}
.deck__arw svg{width:20px;height:20px}
.deck__arw:hover{background:rgba(24,32,52,.9);border-color:rgba(205,255,79,.34);transform:scale(1.07)}
.deck__arw:active{transform:scale(.96)}
/* стрелки прижаты к краям самой панели, а не экрана */
/* стрелки стоят НАД краем соседней панели — оттуда они и «вытягивают» её */
.deck__arw--prev{left:-2px}
.deck__arw--next{right:-2px}

/* Точки-подписи вместо безымянных кружков: человек сразу видит, что там
   не «слайд 2», а конкретная услуга */
.deck__dots{
  position:absolute;left:0;right:0;bottom:6px;z-index:6;
  display:flex;justify-content:center;gap:8px;
}
.deck__dot{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font-size:11.5px;color:var(--dim2);background:none;border:0;
  padding:6px 12px;border-radius:999px;transition:color .2s,background-color .2s;
}
.deck__dot i{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.55;transition:opacity .2s,transform .2s}
.deck__dot:hover{color:#c3cad4;background:rgba(255,255,255,.04)}
.deck__dot.is-on{color:var(--ink);background:rgba(255,255,255,.06)}
.deck__dot.is-on i{background:var(--lime);opacity:1;transform:scale(1.25)}

/* Окно внутри панели больше не тянется резиной — ширину задаёт карусель */
.deck__p .app{width:100%}

/* ── Мокап ────────────────────────────────────────────────────────────
   Фиксированная ширина, как у Linear (--width:1320px): интерфейс не
   тянется под экран, он показан в своём масштабе и обрезается сгибом. */
/* Окно помещается в кадр целиком. Раньше оно намеренно уходило за правый
   край — приём «продукта больше, чем поместилось». На практике это читалось
   не как продолжение, а как обрезанный, испорченный кадр: срезанные колонки
   таблицы и обрубленный KPI. Теперь ширина резиновая с потолком 960. */
.shell{position:relative;z-index:2;width:100%;margin:0;padding:0}
.app{
  /* 960×620 — это 1.55, пропорция реального ноутбучного экрана. Высота не
     «на глаз»: ряду нужно 433px, чтобы правая колонка (источники + требует
     внимания) уместилась целиком; 433 + 86 KPI + 63 шапка + 34 планка = 616.
     Плюс 4px запаса. Больше нельзя — на экране 800px по высоте окно вместе
     с отступами героя (144px) перестанет помещаться. */
  position:relative;
  display:flex;flex-direction:column;height:620px;overflow:hidden;
  border-radius:12px;
  /* isolation обязателен для WebKit: без своего стекового контекста
     скруглённые углы не обрезают потомков с transform, и содержимое
     вылезает за рамку окна в момент смены раздела */
  isolation:isolate;
  background:var(--surface-2);
  /* хайрлайн + стек теней: радиусы удваиваются, непрозрачность 2.5–6%,
     цвет сине-серый #0b0d18, как у Attio — не чёрный */
  /* Глубина набирается тремя слоями, а не одной тенью:
     1) хайрлайн-кант сверху светлее, снизу темнее — так ведёт себя реальная
        кромка стекла под верхним светом;
     2) стек падающих теней с удвоением радиуса;
     3) внутренний блик по верхней грани (::before ниже).
     Источник света — то же лаймовое свечение фона, поэтому кант отдаёт
     в тёплый, а не в нейтрально-белый. */
  box-shadow:
    inset 0 1px 0 rgba(233,255,180,.09),
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.075),
    0 1px 2px rgba(11,13,24,.3),
    0 3px 6px rgba(11,13,24,.34),
    0 8px 16px rgba(11,13,24,.38),
    0 18px 34px rgba(11,13,24,.44),
    0 36px 68px rgba(11,13,24,.5),
    0 64px 120px rgba(6,8,16,.55);
}


/* Блик по верхней грани окна: узкая полоса света, стекающая от угла.
   Не «глянец на всю панель» — только 90px сверху, иначе читается дёшево. */
.app::before{
  content:'';position:absolute;inset:0 0 auto;height:90px;pointer-events:none;z-index:4;
  background:linear-gradient(168deg,
    rgba(233,255,180,.055) 0%,
    rgba(233,255,180,.018) 34%,
    transparent 72%);
}
/* Мягкая опора под окном — рассеянный контакт с «поверхностью», без него
   окно висит в пустоте. Отдельным слоем, чтобы не мешать теням выше. */
.shell::after{
  content:'';position:absolute;left:6%;right:6%;bottom:-26px;height:56px;z-index:-1;
  background:radial-gradient(50% 100% at 50% 0%, rgba(6,9,18,.55), transparent 72%);
  filter:blur(14px);pointer-events:none;
}
/* Свет от окна ложится на фон вокруг — это связывает мокап со сценой */
.shell::before{
  content:'';position:absolute;inset:-14% -10%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(42% 46% at 32% 22%, rgba(205,255,79,.05), transparent 70%),
    radial-gradient(46% 50% at 78% 74%, rgba(49,224,176,.038), transparent 72%);
}

/* Панель сайдбара чуть отступает от корпуса — грань между слоями видна */
.side{box-shadow:inset -1px 0 0 rgba(0,0,0,.25), inset 1px 0 0 rgba(255,255,255,.02)}
/* Планка окна как отдельная поверхность над содержимым */
.chrome{box-shadow:0 1px 0 rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.045)}
/* Карточки и блоки — тончайший внутренний кант, читается как стекло */
.kcard,.ai li,.tsk__i,.set__rule{box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.kpi{box-shadow:inset 0 1px 0 rgba(255,255,255,.022)}

/* Планка окна: тонкая, 34px. У Framer рамка тоже почти не заметна —
   1px hairline и radius 18px, вся работа на содержимом, а не на «шапке». */
.chrome{
  display:flex;align-items:center;gap:12px;height:34px;flex:none;
  padding:0 12px;background:#0B111D;border-bottom:1px solid rgba(255,255,255,.06);
}
.chrome__dots{display:flex;gap:6px}
.chrome__dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.14)}
.chrome__url{
  flex:1;max-width:280px;margin:0 auto;text-align:center;
  /* системный моноширинный, а не JetBrains: ради одной строки адреса
     тянулся файл латиницы на 30,6 КБ. В имитации адресной строки браузера
     системный шрифт к тому же выглядит достовернее */
  font:400 10.5px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#767f8e;
  background:rgba(255,255,255,.04);border-radius:6px;padding:5px 10px;
}
.chrome__side{display:flex;gap:6px}
.chrome__side i{width:11px;height:2px;border-radius:2px;background:rgba(255,255,255,.14)}
.app__body{display:flex;flex:1;min-height:0}

/* ── Сайдбар ── */
.side{width:172px;flex:none;border-right:1px solid var(--border);display:flex;flex-direction:column;background:#0B111D}
.side__top{display:flex;align-items:center;gap:9px;padding:14px 14px 12px}
.side__logo{width:20px;height:20px;border-radius:6px;background:linear-gradient(140deg,var(--lime),var(--mint));flex:none}
.side__name{font-size:13px;font-weight:600;letter-spacing:-.01em}
.side__nav{display:flex;flex-direction:column;gap:1px;padding:4px 8px}
.side__i{
  -webkit-appearance:none;appearance:none;background:none;border:0;font:inherit;text-align:left;width:100%;
  display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:6px;
  font-size:12px;color:#9099a6;transition:background-color .16s,color .16s;
}
.side__i svg{width:14px;height:14px;flex:none;opacity:.85}
.side__i b{margin-left:auto;font-size:11px;font-weight:500;color:#767f8e}
.side__i b.is-hot{color:var(--lime)}
.side__i.is-on{background:rgba(255,255,255,.06);color:var(--ink)}
/* состояние «курсор навёлся, сейчас кликнет» — держится 300мс перед сменой */
.side__i.is-pre{background:rgba(255,255,255,.035);color:#c3cad4}
.side__i:hover{background:rgba(255,255,255,.045);color:#c3cad4}
.side__foot{margin-top:auto;display:flex;align-items:center;gap:9px;padding:12px 14px;border-top:1px solid rgba(255,255,255,.05)}
.side__me{display:flex;flex-direction:column;line-height:1.25}
.side__me b{font-size:12px;font-weight:500}
.side__me i{font-size:10.5px;color:var(--dim2);font-style:normal}

/* ── Основная область ── */
.main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--surface-2)}

/* Три раздела продукта в одном окне. Статичный скриншот показывает одну
   страницу — а покупают систему целиком; поэтому разделы переключаются
   сами, как будто в системе кто-то работает. Кроссфейд 0.26s + 6px —
   ровно столько, сколько занимает смена таба у Linear. */
.views{position:relative;flex:1;min-height:0}
/* Уходящий и приходящий разведены по времени: простой кроссфейд показывал
   оба экрана поверх друг друга 0.26s, и это читалось как каша, а не как
   смена раздела. Старый гаснет за 0.13s, новый стартует на 0.1s позже —
   перекрытие 0.03s, глазом не ловится. */
.view{
  position:absolute;inset:0;display:flex;flex-direction:column;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(6px);
  transition:opacity .13s ease,visibility 0s .13s,transform 0s .13s;
}
.view.is-on{
  opacity:1;visibility:visible;pointer-events:auto;transform:none;
  transition:opacity .24s cubic-bezier(.25,.46,.45,.94) .1s,
             transform .3s cubic-bezier(.25,.46,.45,.94) .1s,
             visibility 0s;
}

.top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.05);flex:none}
.top__t{font-size:14px;font-weight:600;letter-spacing:-.01em}
.top__b{display:block;margin-top:2px;font-size:11px;color:var(--dim2)}
.top__r{display:flex;align-items:center;gap:8px}
.seg{display:flex;border:1px solid var(--hair);border-radius:7px;overflow:hidden}
.seg i{font-style:normal;font-size:11px;padding:5px 10px;color:#8a93a1}
.seg i.is-on{background:rgba(255,255,255,.07);color:var(--ink)}
.btn-s{font-size:11px;padding:6px 11px;border:1px solid var(--hair);border-radius:7px;color:#9099a6}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border-bottom:1px solid var(--border);flex:none}
.kpi{background:var(--surface-2);padding:12px 14px 11px;position:relative;overflow:hidden}
.kpi__l{display:block;font-size:11px;color:var(--dim2);margin-bottom:6px}
/* inline-block, чтобы подсветка обновления обнимала само число, а не
   растягивалась полосой на всю карточку; отрицательный отступ держит
   число на прежнем месте */
.kpi__v{display:inline-block;padding:1px 5px;margin:0 -5px;font-size:18px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
/* правый отступ под спарклайн — но не больше, чем нужно: на 72px подпись
   переносилась на вторую строку, полоса KPI вырастала с 86 до 114px и
   выдавливала последнюю строку таблицы за низ окна */
.kpi__d{display:block;margin-top:4px;font-size:11px;padding-right:50px}
.kpi__d.is-up{color:var(--mint)}
.kpi__d.is-down{color:#f0796b}
.spark{position:absolute;right:11px;bottom:10px;width:44px;height:18px;color:rgba(205,255,79,.5)}
.kpi:nth-child(4) .spark{color:rgba(240,121,107,.45)}   /* средний чек падает */

/* Колонки поменяны местами: окно уходит за правый край экрана, и раньше
   под обрез попадали «Источники заявок» и «Требует внимания» — заголовки
   рубились на полуслове («2 заявки без ответстве…»), блок читался как
   сломанный. Таблица теряет от обреза только правые колонки, а это для
   таблицы естественно: у неё продолжение вправо и так подразумевается. */
.row{display:grid;grid-template-columns:1.12fr 1.5fr;gap:1px;background:var(--border);flex:1;min-height:0;overflow:hidden}
.col{order:-1}
/* grid-элементы по умолчанию min-height:auto и растягивают ряд под свой
   контент — без этого правая колонка вылезала на 104px за низ окна */
.row > *{min-height:0}
/* без overflow строка таблицы, которая не влезла, режется пополам на границе
   окна и читается как баг вёрстки, а не как «данных больше» */
.box{background:var(--surface-2);padding:12px 14px;min-width:0;overflow:hidden}
/* подпись идёт сразу за заголовком, а не прижата к правому краю: у узких
   блоков правый край срезан кромкой экрана и подпись пропадала целиком */
.box__h{display:flex;align-items:baseline;justify-content:flex-start;gap:9px;margin-bottom:9px}
.box--table .box__h{justify-content:space-between}
.box__t{font-size:12px;font-weight:600;display:flex;align-items:center;gap:7px}
.box__m{font-size:11px;color:var(--dim2)}
.col{
  display:grid;grid-template-rows:auto minmax(0,1fr);gap:1px;
  background:var(--border);min-width:0;
}
/* каждый блок обрезает своё содержимое сам, иначе нижний наезжает на верхний */
.col > .box{overflow:hidden}

/* Колонок ровно столько, сколько влезает в бокс на данной ширине. Раньше
   таблица просила 512px при доступных 421 и молча срезалась по правому
   краю — у всех десяти строк, на всех раскладках включая 1440.
   Порядок отказа: «Обновлено» (дублирует шапку) → «Ответственный»
   (дублирует аватар) → «Источник». */

/* таблица — главный носитель «плотности»: 12px, шесть строк, шесть колонок */
.tbl{width:100%;border-collapse:collapse;font-size:12px}
.tbl th{
  text-align:left;font-weight:400;font-size:10.5px;color:var(--dim2);
  padding:0 7px 7px 0;border-bottom:1px solid rgba(255,255,255,.05);white-space:nowrap;
}
.tbl td{padding:7px 7px 7px 0;border-bottom:1px solid rgba(255,255,255,.035);white-space:nowrap}
.tbl tbody tr:last-child td{border-bottom:0}
/* Правый отступ последней колонки — мёртвый: у бокса есть свой padding.
   Из-за него таблица просила на 7px больше, чем бокс отдавал, и «Сумма»
   подбривалась по кромке окна: +1,9px на 1440 и +5,3px на 1600. */
.tbl th:nth-child(4),.tbl td:nth-child(4){padding-right:0}
.tbl td:first-child{display:flex;align-items:center;gap:7px;font-weight:500}
.tbl .num{font-variant-numeric:tabular-nums}
.tbl .dim{color:var(--dim2);font-size:11px}
.tbl tr.is-warn td{background:rgba(240,121,107,.05)}
/* «Кто» — только аватар. При окне 908 таблице достаётся 396px, а пяти
   колонкам нужно 437: колонка ответственного уходит совсем, аватар и так
   дублируется на канбане */
.tbl th:nth-child(5),.tbl td:nth-child(5){display:none}
.tbl .who{width:26px}
.tbl .who .ava--s{margin-right:0}

.ava{width:19px;height:19px;border-radius:5px;flex:none;display:grid;place-items:center;font-size:10px;font-weight:600;color:#0b1018;background:linear-gradient(140deg,var(--lime),var(--mint))}
.ava--s{width:17px;height:17px;border-radius:50%;font-size:9px;background:linear-gradient(140deg,#5b9dff,#31e0b0);display:inline-grid;vertical-align:-4px;margin-right:5px}
.ava--u{background:linear-gradient(140deg,#8b7bff,#5b9dff);border-radius:50%}

.st{display:inline-block;font-size:10.5px;padding:2px 7px;border-radius:5px;white-space:nowrap}
.st--go{color:var(--mint);background:rgba(49,224,176,.1)}
.st--wait{color:#f0b46b;background:rgba(240,180,107,.1)}
.st--new{color:var(--lime);background:rgba(205,255,79,.12)}



/* Источники: не список процентов, а полосы с абсолютными числами и
   динамикой. У эталонов такие панели несут 3–4 показателя в строке —
   именно плотность отличает рабочую панель от плашки «для красоты». */
.src{list-style:none;display:flex;flex-direction:column;gap:7px}
.src li{display:flex;align-items:center;gap:7px;font-size:11.5px;line-height:1}
.src li i{width:6px;height:6px;border-radius:2px;background:var(--c);flex:none}
.src__n{width:88px;flex:none;color:#c3cad4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.src__bar{flex:1;height:4px;border-radius:3px;background:rgba(255,255,255,.05);overflow:hidden;min-width:24px}
.src__bar b{display:block;height:100%;width:var(--w);border-radius:3px;background:var(--c);opacity:.75}
.src__v{width:22px;text-align:right;font-variant-numeric:tabular-nums;font-weight:500;flex:none}
.src li em{width:26px;text-align:right;font-style:normal;font-size:10px;font-variant-numeric:tabular-nums;flex:none}
.src li em.is-up{color:var(--mint)}
.src li em.is-down{color:#f0796b}
.src__foot{
  display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:9px;
  border-top:1px solid rgba(255,255,255,.05);font-size:11px;color:var(--dim2);
}
.src__foot b{color:var(--ink);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.src__foot em{font-style:normal;font-size:10px}
.src__foot em.is-down{color:var(--mint)}   /* дешевле — это хорошо */

/* Требует внимания: иконка + два уровня текста + действие. Без действия
   блок читается как статичный текст, а не как рабочее место. */
.dotmini{width:6px;height:6px;border-radius:50%;background:var(--lime);flex:none}
.ai{list-style:none;display:flex;flex-direction:column;gap:6px}
.ai li{
  display:flex;align-items:flex-start;gap:8px;padding:8px 9px;border-radius:7px;
  background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.045);
  transition:background-color .16s cubic-bezier(.25,.46,.45,.94);
}
.ai li:hover{background:rgba(255,255,255,.05)}
.ai--hot{border-color:rgba(240,121,107,.22);background:rgba(240,121,107,.05)}
.ai__ic{width:15px;height:15px;flex:none;color:var(--dim2);margin-top:1px}
.ai--hot .ai__ic{color:#f0796b}
.ai__ic svg{width:15px;height:15px}
.ai__b{flex:1;min-width:0}
.ai__b > b{display:block;font-size:11.5px;font-weight:500;line-height:1.3;margin-bottom:2px}
.ai__b > span{display:block;font-size:10.5px;color:var(--dim2);line-height:1.35}
.ai__go{
  flex:none;font-size:9.5px;color:#9099a6;border:1px solid rgba(255,255,255,.08);
  border-radius:5px;padding:3px 5px;margin-top:1px;white-space:nowrap;
}

/* ══ Раздел «Сделки»: канбан ═══════════════════════════════════════════
   Контраст с таблицей дашборда — главный смысл переключения. Если второй
   экран похож на первый, переключение выглядит подделкой. */
.kan{
  flex:1;min-height:0;display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--border);
}
.kcol{background:var(--surface-2);padding:11px 10px;display:flex;flex-direction:column;gap:7px;min-width:0;overflow:hidden}
.kcol__h{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:500;color:#c3cad4;white-space:nowrap;min-width:0}
.kcol__h b{font-size:10px;font-weight:600;color:var(--dim2);background:rgba(255,255,255,.06);border-radius:4px;padding:1px 5px}
.kcol__h em{margin-left:auto;font-style:normal;font-size:10px;color:var(--dim2);font-variant-numeric:tabular-nums}
.kdot{width:6px;height:6px;border-radius:2px;background:var(--c);flex:none}

.kcard{
  display:flex;flex-direction:column;gap:6px;padding:9px 9px 8px;border-radius:7px;
  background:rgba(255,255,255,.028);border:1px solid rgba(255,255,255,.05);
  transition:background-color .16s cubic-bezier(.25,.46,.45,.94);
}
.kcard:hover{background:rgba(255,255,255,.055)}
.kcard__t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11.5px;font-weight:500;line-height:1.25;letter-spacing:-.01em}
/* сумма не рвётся никогда: при узких колонках «250 000 ₽» ломалось надвое.
   Если пара не влезает, на вторую строку уходит чип источника целиком */
.kcard__m{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;min-width:0}
.kcard__m b{white-space:nowrap;font-size:12px;font-weight:600;letter-spacing:-.015em;font-variant-numeric:tabular-nums}
.kcard__m i{
  font-style:normal;font-size:9.5px;padding:1.5px 5px;border-radius:4px;white-space:nowrap;
  color:var(--dim2);background:rgba(255,255,255,.05);
}
/* цвета каналов те же, что в «Источниках заявок» и «Окупаемости»:
   Instagram лайм, Telegram мята, Сайт синий, Директ серый. Раньше на доске
   Telegram был синим, а Сайт мятным — один продукт с двумя легендами */
.kcard__m i.ig{color:#CDFF4F;background:rgba(205,255,79,.1)}
.kcard__m i.tg{color:#31e0b0;background:rgba(49,224,176,.1)}
.kcard__m i.st2{color:#5b9dff;background:rgba(91,157,255,.1)}
.kcard__m i.ad{color:#9aa4b2;background:rgba(135,146,163,.12)}
.kcard__f{display:flex;align-items:center;gap:5px}
.kcard__d{font-size:10px;color:var(--dim2);margin-left:auto}
.kcard__d--warn{color:#f0b46b}
.kcard__d--ok{color:var(--mint)}
.kcard--warn{border-color:rgba(240,180,107,.24);background:rgba(240,180,107,.05)}
.kcard--done{opacity:.72}
.kcard--ghost{
  align-items:center;justify-content:center;padding:7px;border-style:dashed;
  border-color:rgba(255,255,255,.07);background:none;
}
.kcard__more{font-size:10.5px;color:var(--dim2)}

/* ══ Раздел «Аналитика» ════════════════════════════════════════════════ */
.an{flex:1;min-height:0;display:grid;grid-template-columns:1.45fr 1fr;gap:1px;background:var(--border)}
.an__chart{background:var(--surface-2);padding:12px 14px 10px;display:flex;flex-direction:column;min-width:0}
.an__legend{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--dim2)}
.an__legend i{width:9px;height:2px;border-radius:2px;background:var(--lime);flex:none}
.an__legend i.pl{background:none;border-top:2px dashed var(--dim2);height:0;margin-left:6px}
.an__legend i.bq{width:7px;height:7px;border-radius:2px;background:rgba(91,157,255,.5);margin-left:6px}
.an__now{display:flex;align-items:baseline;gap:8px;margin:2px 0 8px}
.an__now b{font-size:21px;font-weight:600;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.an__now em{font-style:normal;font-size:11px;color:var(--mint)}
.an__now > span:last-child{font-size:10.5px;color:var(--dim2);margin-left:auto}
.an__plot{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;padding-left:44px}
.an__canvas{position:relative;flex:1;min-height:0}
/* подписи шкалы — HTML, а не текст в SVG: viewBox растягивается
   preserveAspectRatio="none" и раздавил бы буквы по горизонтали */
.an__y{list-style:none;position:absolute;left:-44px;top:0;bottom:0;width:40px;margin:0}
.an__y li{position:absolute;right:0;font-size:9.5px;color:var(--dim2);font-variant-numeric:tabular-nums;transform:translateY(-50%)}
.an__y li:nth-child(1){top:21.1%}
.an__y li:nth-child(2){top:44.8%}
.an__y li:nth-child(3){top:68.6%}
.an__y li:nth-child(4){top:92.3%}
.achart{position:absolute;inset:0;width:100%;height:100%;display:block}
.achart__g line{stroke:rgba(255,255,255,.05);stroke-width:1}
/* точка последнего значения — HTML, чтобы остаться круглой: 530/560 по X,
   26.2/134 по Y — те же координаты, что у конца линии в SVG */
.an__dot{
  position:absolute;left:93.75%;top:23.4%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;
  border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px rgba(205,255,79,.16);
}
/* столбцы тоже вынесены из SVG: rx там растягивался вместе с системой
   координат и скругление получалось разным по осям */
/* восемь равных колонок — та же сетка, что у точек линии (x=(i+0.5)/8×560)
   и у подписей оси. При space-between центры разъезжались до 8px, потому
   что столбцы 26px, а подписи «н1» — 14px */
.an__bars{flex:none;height:90px;display:grid;grid-template-columns:repeat(8,1fr);align-items:end;justify-items:center;padding-top:4px}
.an__bars span{width:26px;justify-self:center;height:var(--h);border-radius:2px;background:rgba(91,157,255,.28)}
.an__bars span.is-now{background:rgba(91,157,255,.5)}
/* подпись «заявки, шт» убрана: она стояла абсолютом и легла поверх первого
   столбца. Синий квадрат в легенде объясняет столбцы без неё */
.achart__line{fill:none;stroke:var(--lime);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.achart__plan{fill:none;stroke:rgba(255,255,255,.2);stroke-width:1.4;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
/* тот же padding-left, что у .an__plot: иначе подписи разъезжаются
   со своими столбцами на 5,5px */
.an__x{display:grid;grid-template-columns:repeat(8,1fr);text-align:center;font-size:9.5px;color:var(--dim2);padding:5px 0 0 44px}

.an__side{display:grid;grid-template-rows:auto minmax(0,1fr);gap:1px;background:var(--border);min-width:0}
.an__side > .box{overflow:hidden}

.fun{list-style:none;display:flex;flex-direction:column;gap:5px}
.fun li{position:relative;display:flex;align-items:center;gap:7px;font-size:11px;line-height:1;padding:5px 6px;border-radius:4px}
.fun li::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:var(--w);border-radius:4px;
  background:linear-gradient(90deg,rgba(205,255,79,.22),rgba(205,255,79,.06));
}
.fun li.is-ok::before{background:linear-gradient(90deg,rgba(49,224,176,.26),rgba(49,224,176,.07))}
.fun li > *{position:relative}
.fun__n{width:96px;flex:none;color:#c3cad4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fun li b{width:26px;text-align:right;font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums;flex:none}
.fun li em{width:36px;text-align:right;font-style:normal;font-size:10px;color:var(--dim2);font-variant-numeric:tabular-nums;flex:none}

.romi{list-style:none;display:flex;flex-direction:column;gap:8px}
.romi li{display:flex;align-items:center;gap:7px;font-size:11px;line-height:1;color:#c3cad4}
.romi li i{width:6px;height:6px;border-radius:2px;background:var(--c);flex:none}
/* название фиксированной ширины, а не flex:1 — иначе оно растягивалось и
   выталкивало числа за обрезанный край окна */
.romi li > span:first-of-type{width:88px;flex:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.romi__c{width:58px;flex:none;font-size:10.5px;color:var(--dim2);font-variant-numeric:tabular-nums;text-align:right}
.romi li b{width:34px;text-align:right;font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums;flex:none}
.romi li b.is-up{color:var(--mint)}
.romi li b.is-down{color:#f0b46b}



/* Списки в разделах «Сайт» и «Реклама» несут другие подписи, чем источники
   заявок: имена форм длиннее, а значения — суммы в тысячах, а не штуки */

/* ══ Раздел «Клиенты» ══════════════════════════════════════════════════
   Сетка карточек, а не таблица: третий подряд табличный экран читался бы
   как один и тот же раздел. */
.cli{
  flex:1;min-height:0;display:grid;grid-template-columns:repeat(4,1fr);
  grid-auto-rows:1fr;gap:1px;background:var(--border);
}
.cli__c{
  background:var(--surface-2);padding:13px 13px 12px;display:flex;flex-direction:column;gap:3px;
  min-width:0;transition:background-color .16s cubic-bezier(.25,.46,.45,.94);
}
.cli__c:hover{background:#121a2b}
.cli__c--cold{opacity:.62}
.cli__c .ava{margin-bottom:4px}
.cli__n{font-size:11.5px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cli__s{font-size:10px;color:var(--dim2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cli__c b{font-size:12.5px;font-weight:600;letter-spacing:-.015em;font-variant-numeric:tabular-nums;margin-top:auto;white-space:nowrap}
.cli__d{font-size:9.5px;color:var(--dim2)}
.cli__d--warn{color:#f0b46b}
.cli__f{
  flex:none;display:flex;align-items:center;gap:10px;padding:9px 14px;
  border-top:1px solid var(--border);font-size:10.5px;color:var(--dim2);
}
.cli__f em{font-style:normal;margin-left:auto}


/* Счётчики карточек берут текст из data-атрибута под текущую раскладку:
   на узких экранах часть клиентов скрыта, и подпись «Показаны 16 из 268»
   была бы прямым враньём — видно 12, 9 или 6. */
.cnt::before{content:attr(data-l)}

/* ══ Раздел «Задачи» ═══════════════════════════════════════════════════ */
.tsk{flex:1;min-height:0;padding:10px 14px 0;overflow:hidden}
.tsk__g{display:flex;align-items:center;gap:7px;margin:9px 0 6px}
.tsk__g:first-child{margin-top:0}
.tsk__gt{font:400 9.5px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--dim2)}
.tsk__gt--hot{color:#f0796b}
.tsk__g b{font-size:9.5px;font-weight:500;color:var(--dim2);background:rgba(255,255,255,.06);border-radius:4px;padding:1px 5px}
.tsk__i{
  display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:7px;margin-bottom:4px;
  background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.045);
  transition:background-color .16s cubic-bezier(.25,.46,.45,.94);
}
.tsk__i:hover{background:rgba(255,255,255,.05)}
.tsk__i--hot{border-color:rgba(240,121,107,.22);background:rgba(240,121,107,.05)}
.tsk__box{
  width:13px;height:13px;flex:none;border-radius:4px;
  border:1.4px solid rgba(255,255,255,.22);
}
.tsk__i--hot .tsk__box{border-color:rgba(240,121,107,.5)}
.tsk__b{flex:1;min-width:0}
.tsk__b > b{display:block;font-size:11.5px;font-weight:500;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tsk__b > span{display:block;font-size:10.5px;color:var(--dim2);line-height:1.35;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tsk__m{display:flex;align-items:center;gap:6px;flex:none}
.tsk__d{font-style:normal;font-size:10px;color:var(--dim2);white-space:nowrap}
.tsk__d--warn{color:#f0796b}


.set__h2{margin-top:14px}
.set__team{list-style:none;display:flex;flex-direction:column;gap:7px}
.set__team li{display:flex;align-items:center;gap:8px;font-size:11.5px;line-height:1}
.set__team__n{font-weight:500;color:#c3cad4}
.set__team__r{font-size:10.5px;color:var(--dim2)}

/* закрытые задачи приглушены и зачёркнуты: они показывают, что система
   не только копит дела, но и закрывает их. Строка компактнее открытой —
   описание не нужно, дело уже сделано */
.tsk__i--done{opacity:.5;background:none;border-color:rgba(255,255,255,.035);padding:4px 8px;margin-bottom:2px}
.tsk__i--done .tsk__b > span{display:none}
.tsk__g--done{margin-top:6px}
.tsk__i--done .tsk__b b{text-decoration:line-through;text-decoration-thickness:1px}
.tsk__box--on{background:rgba(49,224,176,.22);border-color:rgba(49,224,176,.5);position:relative}
.tsk__box--on::after{
  content:'';position:absolute;left:3px;top:4px;width:5px;height:2.5px;
  border-left:1.6px solid var(--mint);border-bottom:1.6px solid var(--mint);
  transform:rotate(-45deg);
}

/* ══ Раздел «Настройки» ════════════════════════════════════════════════ */
.set{flex:1;min-height:0;display:grid;grid-template-columns:168px minmax(0,1fr);gap:1px;background:var(--border)}
.set__nav{background:var(--surface-2);padding:10px 8px;display:flex;flex-direction:column;gap:1px}
.set__n{
  font-size:11.5px;color:#9099a6;padding:7px 9px;border-radius:6px;
  transition:background-color .16s,color .16s;
}
.set__n:hover{background:rgba(255,255,255,.04);color:#c3cad4}
.set__n.is-on{background:rgba(255,255,255,.06);color:var(--ink)}
.set__body{background:var(--surface-2);padding:12px 14px;min-width:0;overflow:hidden}

.intg{list-style:none;display:flex;flex-direction:column;gap:6px}
.intg li{display:flex;align-items:center;gap:8px;font-size:11.5px;line-height:1}
.intg li i{width:6px;height:6px;border-radius:2px;background:var(--c);flex:none}
.intg__n{width:112px;flex:none;color:#c3cad4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.intg__v{font-size:10.5px;color:var(--dim2);font-variant-numeric:tabular-nums;white-space:nowrap}
.intg--off .intg__n{color:var(--dim2)}
/* переключатель: 26×14 — минимальный размер, при котором он читается
   как переключатель, а не как полоска. Стоит сразу за названием, а не
   прижат вправо: правый край окна срезан кромкой экрана, и там его
   попросту не было видно — как раньше не было видно чисел в источниках */
.sw{
  width:26px;height:14px;flex:none;border-radius:8px;position:relative;
  background:rgba(255,255,255,.09);transition:background-color .16s;
}
.sw::after{
  content:'';position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;
  background:#8b96a6;transition:transform .16s cubic-bezier(.25,.46,.45,.94),background-color .16s;
}
.sw.is-on{background:rgba(205,255,79,.28)}
.sw.is-on::after{transform:translateX(12px);background:var(--lime)}

.set__rule{
  display:flex;align-items:center;gap:9px;margin-top:12px;padding:9px 10px;border-radius:7px;
  background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.045);
}
.set__ri{width:15px;height:15px;flex:none;color:var(--mint)}
.set__ri svg{width:15px;height:15px}
.set__rb{flex:none;max-width:230px;min-width:0}
.set__rb b{display:block;font-size:11.5px;font-weight:500;line-height:1.3}
.set__rb > span{display:block;font-size:10.5px;color:var(--dim2);margin-top:1px}


/* ══ Оркестровка появления ═════════════════════════════════════════════
   Правило из скилла анти-AI-slop дословно: «одна хорошо срежиссированная
   загрузка со ступенчатыми появлениями сильнее россыпи микро-эффектов».
   Поэтому здесь ОДНА партитура, а не набор случайных твинов:

     0.22s  корпус окна
     0.42s  сайдбар и шапка раздела
     0.50s  KPI — по одной карточке через 60мс
     0.74s  ряды таблицы — по строке через 34мс
     0.62s  полосы источников и воронки растут от нуля
     0.55s  линия графика прочерчивается

   Ничего не мигает и не пружинит — в чёрном списке скилла и то, и другое.
   Всё держится на opacity и transform, ни один слой не дёргает раскладку. */

/* После первой загрузки партитура играет с начала, без стартовой паузы:
   при переключении раздела ждать секунду недопустимо. Один сдвиг --uqt
   двигает всю оркестровку целиком, не трогая порядок и интервалы. */
.app.is-live{--uqt:-.42s}

@keyframes uqRise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes uqGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes uqDraw{to{stroke-dashoffset:0}}

.app .side,
.app .top{animation:uqRise .5s cubic-bezier(.22,.61,.36,1) calc(var(--uqt, 0s) + .42s) backwards}

.view.is-on .kpi{animation:uqRise .46s cubic-bezier(.22,.61,.36,1) backwards}
.view.is-on .kpi:nth-child(1){animation-delay:calc(var(--uqt, 0s) + .50s)}
.view.is-on .kpi:nth-child(2){animation-delay:calc(var(--uqt, 0s) + .56s)}
.view.is-on .kpi:nth-child(3){animation-delay:calc(var(--uqt, 0s) + .62s)}
.view.is-on .kpi:nth-child(4){animation-delay:calc(var(--uqt, 0s) + .68s)}

/* строки таблицы въезжают лесенкой — это и есть «система загружает данные» */
.view.is-on .tbl tbody tr{animation:uqRise .4s cubic-bezier(.22,.61,.36,1) backwards}
.view.is-on .tbl tbody tr:nth-child(1){animation-delay:calc(var(--uqt, 0s) + .74s)}
.view.is-on .tbl tbody tr:nth-child(2){animation-delay:calc(var(--uqt, 0s) + .774s)}
.view.is-on .tbl tbody tr:nth-child(3){animation-delay:calc(var(--uqt, 0s) + .808s)}
.view.is-on .tbl tbody tr:nth-child(4){animation-delay:calc(var(--uqt, 0s) + .842s)}
.view.is-on .tbl tbody tr:nth-child(5){animation-delay:calc(var(--uqt, 0s) + .876s)}
.view.is-on .tbl tbody tr:nth-child(6){animation-delay:calc(var(--uqt, 0s) + .91s)}
.view.is-on .tbl tbody tr:nth-child(7){animation-delay:calc(var(--uqt, 0s) + .944s)}
.view.is-on .tbl tbody tr:nth-child(8){animation-delay:calc(var(--uqt, 0s) + .978s)}
.view.is-on .tbl tbody tr:nth-child(9){animation-delay:calc(var(--uqt, 0s) + 1.012s)}
.view.is-on .tbl tbody tr:nth-child(10){animation-delay:calc(var(--uqt, 0s) + 1.046s)}

/* полосы растут от левого края: transform-origin обязателен, иначе они
   раздуваются из центра и читаются как «дышащий» декор */
.view.is-on .src__bar b,
.view.is-on .fun li::before{transform-origin:left center;animation:uqGrow .62s cubic-bezier(.22,.61,.36,1) calc(var(--uqt, 0s) + .62s) backwards}
.view.is-on .src li:nth-child(2) .src__bar b{animation-delay:calc(var(--uqt, 0s) + .68s)}
.view.is-on .src li:nth-child(3) .src__bar b{animation-delay:calc(var(--uqt, 0s) + .74s)}
.view.is-on .src li:nth-child(4) .src__bar b{animation-delay:calc(var(--uqt, 0s) + .80s)}
.view.is-on .fun li:nth-child(2)::before{animation-delay:calc(var(--uqt, 0s) + .68s)}
.view.is-on .fun li:nth-child(3)::before{animation-delay:calc(var(--uqt, 0s) + .74s)}
.view.is-on .fun li:nth-child(4)::before{animation-delay:calc(var(--uqt, 0s) + .80s)}

/* столбцы графика поднимаются снизу — как реальная отрисовка гистограммы */
.view.is-on .an__bars span{transform-origin:bottom center;animation:uqGrow .5s cubic-bezier(.22,.61,.36,1) backwards;animation-name:uqGrowY}
@keyframes uqGrowY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.view.is-on .an__bars span:nth-child(1){animation-delay:calc(var(--uqt, 0s) + .55s)}
.view.is-on .an__bars span:nth-child(2){animation-delay:calc(var(--uqt, 0s) + .59s)}
.view.is-on .an__bars span:nth-child(3){animation-delay:calc(var(--uqt, 0s) + .63s)}
.view.is-on .an__bars span:nth-child(4){animation-delay:calc(var(--uqt, 0s) + .67s)}
.view.is-on .an__bars span:nth-child(5){animation-delay:calc(var(--uqt, 0s) + .71s)}
.view.is-on .an__bars span:nth-child(6){animation-delay:calc(var(--uqt, 0s) + .75s)}
.view.is-on .an__bars span:nth-child(7){animation-delay:calc(var(--uqt, 0s) + .79s)}
.view.is-on .an__bars span:nth-child(8){animation-delay:calc(var(--uqt, 0s) + .83s)}

/* линия выручки прочерчивается слева направо; 1400 — с запасом длина пути */
.view.is-on .achart__line{stroke-dasharray:1400;stroke-dashoffset:1400;animation:uqDraw 1.05s cubic-bezier(.33,.9,.5,1) calc(var(--uqt, 0s) + .55s) forwards}
.view.is-on .achart__area{animation:uqFade .7s ease-out calc(var(--uqt, 0s) + .95s) backwards}
.view.is-on .an__dot{animation:uqFade .35s ease-out calc(var(--uqt, 0s) + 1.45s) backwards}
@keyframes uqFade{from{opacity:0}to{opacity:1}}

/* карточки доски и клиентов — общая лесенка по 40мс */
.view.is-on .kcard,
.view.is-on .cli__c,
.view.is-on .tsk__i{animation:uqRise .42s cubic-bezier(.22,.61,.36,1) backwards}
.view.is-on .kcol:nth-child(1) .kcard{animation-delay:calc(var(--uqt, 0s) + .50s)}
.view.is-on .kcol:nth-child(2) .kcard{animation-delay:calc(var(--uqt, 0s) + .56s)}
.view.is-on .kcol:nth-child(3) .kcard{animation-delay:calc(var(--uqt, 0s) + .62s)}
.view.is-on .kcol:nth-child(4) .kcard{animation-delay:calc(var(--uqt, 0s) + .68s)}
.view.is-on .cli__c:nth-child(-n+4){animation-delay:calc(var(--uqt, 0s) + .50s)}
.view.is-on .cli__c:nth-child(n+5):nth-child(-n+8){animation-delay:calc(var(--uqt, 0s) + .57s)}
.view.is-on .cli__c:nth-child(n+9):nth-child(-n+12){animation-delay:calc(var(--uqt, 0s) + .64s)}
.view.is-on .cli__c:nth-child(n+13){animation-delay:calc(var(--uqt, 0s) + .71s)}
.view.is-on .tsk__i:nth-child(-n+4){animation-delay:calc(var(--uqt, 0s) + .52s)}
.view.is-on .tsk__i:nth-child(n+5){animation-delay:calc(var(--uqt, 0s) + .60s)}

/* ── Вход: 4px и 0.4s, как внутри мокапа Linear ── */
.pill,.h1,.sub,.cta,.marks,.proof{animation:in .45s cubic-bezier(.25,.46,.45,.94) backwards}
.h1{animation-delay:calc(var(--uqt, 0s) + .05s)}.sub{animation-delay:calc(var(--uqt, 0s) + .1s)}.cta{animation-delay:calc(var(--uqt, 0s) + .15s)}
.marks{animation-delay:calc(var(--uqt, 0s) + .2s)}.proof{animation-delay:calc(var(--uqt, 0s) + .25s)}
/* окно приезжает отдельно: чуть дальше и дольше остальных — это главный
   объект кадра, на 4px за 0.4s его появление просто не читалось */
.app{animation:inApp .58s cubic-bezier(.22,.61,.36,1) .22s backwards}
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes inApp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Значение, которое поменялось, коротко подсвечивается — так делают рабочие
   панели, и это единственный способ заметить обновление, не глядя в упор */
.kpi__v.is-fresh{animation:fresh .9s ease-out}
@keyframes fresh{
  0%{background:rgba(205,255,79,.16);box-shadow:0 0 0 4px rgba(205,255,79,.16)}
  100%{background:transparent;box-shadow:0 0 0 4px rgba(205,255,79,0)}
}
.kpi__v{border-radius:5px}

@media (min-width:1180.02px) and (max-width:1500px){
  /* 440, а не 500: заголовок на кегле 50 просит 421px под «Система, которая»,
     и всё, что сверх этого, лучше отдать окну */
  .grid{grid-template-columns:minmax(320px,400px) minmax(0,1fr);gap:30px}
  }
/* 1001–1240 — самая тесная десктопная полоса: две колонки ещё стоят рядом,
   но окно шириной 960 показывалось лишь на 51%. Ужимаем текстовую колонку и
   само окно, чтобы продукта было видно больше двух третей. */
@media (min-width:1180.02px) and (max-width:1400px){
  .grid{grid-template-columns:minmax(300px,390px) minmax(0,1fr);gap:32px}
  .h1{font-size:clamp(38px,4.2vw,46px)}
  /* колонка тут всего 390px: лид на 18px разъезжался на лишнюю строку и
     текстовый блок становился выше окна — композиция перевешивала влево */
  .sub{font-size:16.5px;line-height:25px}
  .side{width:190px}
  /* box--table тут всего 338px: убираем «Ответственный» и «Источник» */
  .tbl th:nth-child(5),.tbl td:nth-child(5){display:none}
  .tbl th:nth-child(3),.tbl td:nth-child(3){display:none}
  .tbl{font-size:11px}
  /* «Счёт выставлен» занимал 106px из 337 — короткая форма из data-s даёт 45 */
  .st{font-size:0;padding:2px 6px}
  .st::before{content:attr(data-s);font-size:10px}
  .kcol__h em{display:none}
  /* три колонки вместо четырёх: карточка клиента при 4 колонках сжималась
     до 130px и имена уходили в многоточие */
  .cli{grid-template-columns:repeat(3,1fr)}
  .cli__c:nth-child(n+13){display:none}
  .cnt::before{content:attr(data-m)}
  .set{grid-template-columns:140px minmax(0,1fr)}
  /* Колонка доски во всей этой полосе 108–152px, а заголовку карточки нужно
     до 111 даже на кегле 11: на 1181 обрезаны были все 18 из 18, на 1331 —
     два. Уходит четвёртая колонка «Оплачено»: у неё свой скоуп (оплаты
     недели), а «18 в работе · 2,80 млн» в шапке — это первые три (6+7+5).
     Так же поступает планшетная раскладка. Колонка вырастает до 147. */
  .kcard__t{font-size:11px;letter-spacing:-.012em}
  [data-panel="crm"] .kan{grid-template-columns:repeat(3,1fr)}
  [data-panel="crm"] .kcol:last-child{display:none}
  /* кнопки действий съедали 50px ширины, заголовки переносились на вторую
     строку и блок вылезал на 27px за низ окна */
  .ai__go{display:none}
  /* карточка KPI тут 152px: за вычетом отступов под спарклайн подписи
     оставалось 66px при нужных 92 — «+16,5% за неделю» ломалось надвое
     и полоса KPI вырастала с 86 до 100px */
  .spark{display:none}
  .kpi__d{padding-right:0}
  /* правой колонке достаётся 216px, а строке «Стоимость заявки · 6 440 ₽ ·
     −450 ₽ к прошлой» нужно 244 — дельта уходит, цена остаётся */
  .src__foot em{display:none}
}

/* ── Тесная полоса CRM-панели: 1181–1330 ──────────────────────────────
   Тот же случай, что у рекламы (блок «Самая тесная полоса» ниже), но у CRM
   он длиннее: реклама выправляется к 1261, а канбан отпускает последнюю
   карточку только на 1333. Замер по всем шести разделам панели: на 1181
   вылетало 44 элемента (дашборд — 45px вниз и 36,8 вправо), на 1280 —
   ещё 8 (доска, 24,3 вниз), на 1325 — один (4,8 вниз).
   Порядок отказа тот же: сначала уходит воздух, потом дубли, данные — нет. */
@media (min-width:1180.02px) and (max-width:1330px){
  /* Доска: колонке 520,5px, а шапке с пятью карточками нужно 565 на 1181
     и 525 на 1325. Карточки не выбрасываем — счётчик в шапке колонки
     («7», «5») сразу выдал бы недостачу, а «+ ещё 2» на карточке-призраке
     считает остаток от него же. Ужимаем воздух: 6px на карточку и 2px на
     зазор дают 45px на колонку — ровно недостачу на 1181. */
  [data-panel="crm"] .kcol{gap:5px;padding:9px}
  [data-panel="crm"] .kcard{padding:6px 8px 5px;gap:4px}
  /* Аналитика: при 1.45fr/1fr правой колонке достаётся 181px, а строке
     «Яндекс Директ · 418 000 ₽ · ×8,7» нужно 207 — множитель окупаемости,
     ради которого на блок и смотрят, уезжал за кромку. Колонки
     уравниваются: график здесь тянется по площади, ему хватает и 288. */
  [data-panel="crm"] .an{grid-template-columns:1fr 1fr}
  /* столбец заявок в 26px не влезал в ячейку 22,9 и наезжал на соседний */
  [data-panel="crm"] .an__bars span{width:18px}
  /* Плата за равные колонки — графику остаётся 231px, и в одну строку с
     легендой заголовок не встаёт: «Выручка по неделям» ломался на три
     («Выручка / по / неделям»). Легенда переносится под него целиком. */
  [data-panel="crm"] .an__chart .box__h{flex-wrap:wrap;gap:2px 9px}
  /* «2 952 000 ₽ · +16,4% · текущая неделя» просит 245px при 203 — главное
     число схлопывалось надвое. Период уходит: последний столбец «н8» на
     оси и «8 недель» в подзаголовке говорят то же самое. */
  [data-panel="crm"] .an__now > span:last-child{display:none}
  /* Строке окупаемости нужно 207px при 194 на 1181 — множитель, ради
     которого на блок и смотрят, срезался краем блока. Ширины подрезаны по
     замеру текста, не на глаз: «Яндекс Директ» занимает 79,9px из 88
     отведённых, «794 000 ₽» — 49,7 из 58. Итог 191, многоточий нет. */
  [data-panel="crm"] .romi li > span:first-of-type{width:80px}
  [data-panel="crm"] .romi__c{width:50px}
}
/* Нижняя половина полосы, 1181–1284: окно 635–738px. Здесь дашборду не
   хватает уже не воздуха, а места под данные. */
@media (min-width:1180.02px) and (max-width:1284px){
  /* «+6 за неделю» просит 96px при 76 доступных и переносился на вторую
     строку — полоса KPI росла с 86 до 100 и выдавливала ряд под собой.
     Период и так назван переключателем «Неделя» в шапке раздела. */
  [data-panel="crm"] .kpi__d i{display:none}
  /* Таблица: трём оставшимся колонкам нужно 277px при 226. Уходит аватар
     из «Клиента» — колонка «Кто» с теми же аватарами в этой полосе уже
     скрыта, так что это дубль; боковой отступ ячеек с 7 до 4; кегль до
     10,5 — как в таблице рекламной панели. Итог 235 при 226: девять
     пикселей забирает внутренний отступ блока, за окно ничего не выходит. */
  [data-panel="crm"] .tbl{font-size:10.5px}
  [data-panel="crm"] .tbl td:first-child .ava{display:none}
  [data-panel="crm"] .tbl td,
  [data-panel="crm"] .tbl th{padding-right:4px}
  /* Источники: строке нужно 194px при 162 — полоса упиралась в свой
     min-width:24px и вылезала за блок. Уходит она: долю канала видно
     числами 22/15/10/6, а цена заявки стоит в подвале блока. */
  [data-panel="crm"] .src__bar{display:none}
  /* «Требует внимания»: трём пунктам нужно 251px при 194. Уходят подписи,
     заголовки остаются — каждая подпись дублирует данные этой же панели:
     очередь 12 и 34 минуты стоит на карточках доски, счёт «Пульса» на
     212 000 — строкой таблицы, перерасход Директа — в «Окупаемости
     каналов». Счётчик «3» в шапке остаётся честным. */
  [data-panel="crm"] .ai li{padding:6px 9px}
  [data-panel="crm"] .ai__b > span{display:none}
}
/* Полоса 1401–1440: тесные правила уже отключились, а окно ещё узкое — 847
   против 866 на 1440. Замер на 1401: таблица вылетает на 5,8px вправо, блок
   «Требует внимания» — на 3,6 вниз. Порядок отказа тот же, что полосой ниже:
   сначала «Источник» (он продублирован блоком слева), потом кнопки действий. */
@media (min-width:1400.02px) and (max-width:1439.98px){
  .tbl th:nth-child(3),.tbl td:nth-child(3){display:none}
  .ai__go{display:none}
}
@media (max-width:1180.01px){
  /* колонки складываются: сначала обещание, под ним продукт */
  .grid{grid-template-columns:1fr;gap:44px;padding:0 24px;max-width:900px}
  .shell{width:100%}
  .app{height:486px}
  .side{width:180px}
  .row{grid-template-columns:1fr}
  .col{display:none}
  /* строк ровно столько, сколько влезает целиком: полстроки на срезе
     читается как баг, а не как «данных больше» */
  .tbl tbody tr:nth-child(n+7){display:none}
  /* Вылет у таблицы был не вбок, а ВНИЗ: по ширине она укладывалась в 428
     из 428, а шесть строк по 34,5px не помещались в ряд на 1,5px. Снимаем
     по пикселю с вертикальных отступов ячейки — строка 32,5, шесть строк
     экономят 12px. Резать шестую строку не нужно. */
  .tbl td{padding-top:6px;padding-bottom:6px}
  .tbl th:nth-child(5),.tbl td:nth-child(5){display:none}
  .tbl th:nth-child(3),.tbl td:nth-child(3){display:none}
  /* карточка KPI сужается до 135px, и подпись с отступом под спарклайн
     переносилась на вторую строку — полоса KPI росла и давила таблицу */
  .spark{display:none}
  .kpi__d{padding-right:0}
  .kan{grid-template-columns:repeat(3,1fr)}
  .kcol:last-child{display:none}
  /* колонке тут 151px: «0,80 млн» в шапке вылетала на 28,4px вправо —
     сумма уходит, счётчик этапа остаётся; заголовок карточки просил 116
     при доступных 111 и обрезался многоточием */
  .kcol__h em{display:none}
  .kcard__t{font-size:11px;letter-spacing:-.014em}
  /* окно во всю ширину экрана, но само уже: карточек в ряд — три, а
     навигация настроек уходит, оставляя содержимое */
  .cli{grid-template-columns:repeat(3,1fr)}
  .cli__c:nth-child(n+10){display:none}
  .cnt::before{content:attr(data-s)}
  .set{grid-template-columns:1fr}
  .set__nav{display:none}
  /* окно тут 486px, доступно 389. Прячем справочные блоки — закрытые
     задачи и получателей уведомлений: они не несут счётчиков, поэтому
     их отсутствие ничего не искажает. Открытые задачи остаются все семь */
  .tsk__g--done,
  .tsk__g--done ~ .tsk__i{display:none}
  .set__team,
  .set__h2 ~ .set__h2{display:none}
  .set__h2 .box__m{display:none}
  .tsk{padding:8px 12px 0}
  .tsk__i{padding:5px 8px;margin-bottom:3px}
  .tsk__g{margin:6px 0 4px}
  .tsk__b b{font-size:11px}
  .tsk__b > span{font-size:10px}
  /* окно тут 486px → колонке достаётся 389, это ровно четыре карточки */
  .kcol > :nth-child(n+5){display:none}   /* четвёртая карточка вылезала на 18px за низ */
  .an{grid-template-columns:1fr}
  .an__side{display:none}
}
@media (max-width:720px){
  .uqhero{padding:84px 0 0;display:block}
  .grid{padding:0 16px}
  /* На телефоне мокап начинался на 709px, а реальный сгиб Safari ~659 —
     продукта на первом экране не было видно вообще. display:contents
     распускает .wrap, и блок «системы работают у клиентов» уезжает ПОД
     окно: мокап поднимается на 180px и выглядывает из-за сгиба. */
  .grid{display:flex;flex-direction:column;gap:0}
  .wrap{display:contents}
  .pill{order:1}
  .h1{order:2}
  .sub{order:3}
  .cta{order:4}
  .deck{order:5;padding:22px 0 40px}
  /* подглядывание уменьшено: на 358px ширины по 42px с каждой стороны
     съедали четверть панели, окно становилось нечитаемым */
  .deck{--peek:15px;--gap:10px}
  /* стрелки мельче и не наезжают на панель — основной жест здесь свайп */
  .deck__arw{width:34px;height:34px}
  .deck__arw svg{width:16px;height:16px}
  .deck__arw--prev{left:-4px}
  .deck__arw--next{right:-4px}
  .deck__tag{top:-20px;font-size:10px}
  .deck__dot{font-size:11px;padding:5px 10px}
  .marks{order:6;margin-top:30px}
  /* лид на телефоне подрос с 15 до 16px и утянул мокап на 41px вниз —
     возвращаем запас отступами, чтобы окно осталось над сгибом Safari */
  /* Продукт должен появляться раньше сгиба, а не после всего текста.
     Гарантии («не приняли этап…») уезжают ПОД окно вместе с клиентами:
     сначала обещание и кнопка, сразу за ними — сам продукт. */
  .pill{margin-bottom:16px;font-size:12px;padding:4px 11px}
  .proof{order:7;margin-top:24px}
  .h1{font-size:33px;letter-spacing:-.8px;margin-bottom:16px}
  .sub{font-size:15.5px;line-height:23.5px;margin-bottom:22px}
  .cta{flex-direction:column;gap:9px;margin-bottom:0}
  .uqhero-btn{width:100%}
  .shell{padding:0 16px}
  .app{height:472px;border-radius:10px}
  .side{display:none}
  /* четыре KPI в два ряда съедали 173px из 396 — почти половину окна.
     Оставляем два: деньги и заявки, остальное несёт таблица */
  .kpis{grid-template-columns:repeat(2,1fr)}
  .kpi:nth-child(n+3){display:none}
  .spark{display:none}
  .kpi__d{padding-right:0}
  .tbl tbody tr:nth-child(n+6){display:none}

  /* на телефоне видны только две колонки доски — третья читается как обрез,
     а не как «не поместилось»: у карточек всё равно нет места на детали */
  .kan{grid-template-columns:repeat(2,1fr)}
  .kcol:nth-child(3){display:none}
  .cli{grid-template-columns:repeat(2,1fr)}
  .cli__c:nth-child(n+7){display:none}
  .cnt::before{content:attr(data-xs)}
  .cli__f em{display:none}
  .cli__c{padding:9px 10px;gap:2px}
  .cli__n{font-size:11px}
  .cli__c b{font-size:12px}
  /* Показываем две первые группы целиком — «Просрочено» (1) и «Сегодня» (2).
     Резать группу пополам нельзя: счётчик рядом с заголовком сразу выдал бы
     несоответствие. Названия переносятся, а не обрезаются: места хватает. */
  .tsk{padding:8px 12px 0}
  .tsk__i{padding:7px 8px}
  /* Три правила автоматизации по 49,4px + отступы просили 365 при доступных
     359 — блок вылезал на 5,8px. Снимаем по 4px с карточки и по 3 с отступа:
     ни одно правило не выбрасываем, на первое ссылаются алерт и задачи. */
  .set__rule{padding:7px 10px;margin-top:9px}
  .tsk__g:nth-of-type(3),
  .tsk__g:nth-of-type(3) ~ .tsk__i{display:none}
  .tsk__b b{white-space:normal}
  .tsk__b > span{white-space:normal}
  .tsk__m .ava--s{display:none}
  .intg__n{width:auto;flex:1}
  .intg__v{display:none}
  /* колонки на телефоне ещё уже, чем на узком десктопе — тот же приём,
     плюс 2px с боков карточки: названию не хватало ровно трёх */
  .kcard__t{font-size:11px;letter-spacing:-.012em}
  .kcard{padding:9px 7px 8px}
  .kcol{padding:11px 8px}
  /* в 333px высоты влезает ровно три карточки (36 + 85×N); четвёртая
     вылезала на 154px и обрезалась по низу окна */
  .kcol > :nth-child(n+5){display:none}
  .kcol__h em{display:none}
  .top__r .seg{display:none}
}
/* На 360–400px три оставшиеся колонки давали 328px при доступных 296 —
   «Сумма» срезалась на 46px без многоточия, у КАЖДОЙ строки. Ужимаем кегль
   и чипы этапа: 10.5px внутри мокапа эталоны допускают (их диапазон 10–14). */
@media (max-width:400px){
  .tbl{font-size:10.5px}
  .tbl th{font-size:9.5px}
  .tbl td{padding:6px 6px 6px 0}
  .tbl .dim{font-size:10px}
  .ava{width:17px;height:17px;font-size:9px}
  .tbl td:first-child{gap:6px}
  /* этап показывается короткой формой из data-s: «Счёт выставлен» занимал
     92px из 268 доступных, «Счёт» — 34px. Без этого не помещалась «Сумма» */
  .st{font-size:0;padding:2px 5px}
  .st::before{content:attr(data-s);font-size:9.5px}
}
@media (prefers-reduced-motion:reduce){
  .pill,.h1,.sub,.cta,.marks,.proof,.app,.kpi__v{animation:none}
  /* переходы разделов, строк и карточек тоже должны замереть */
  .view,.tbl tbody tr,.kcard,.ai li,.side__i,.uqhero-btn,
  .cli__c,.tsk__i,.set__n,.sw,.sw::after{transition-duration:.01ms!important}
  /* вся оркестровка появления тоже замирает */
  .app .side,.app .top,.view.is-on .kpi,.view.is-on .tbl tbody tr,
  .view.is-on .src__bar b,.view.is-on .fun li::before,.view.is-on .an__bars span,
  .view.is-on .achart__line,.view.is-on .achart__area,.view.is-on .an__dot,
  .view.is-on .kcard,.view.is-on .cli__c,.view.is-on .tsk__i,
  .kpi__v.is-fresh{animation:none!important}
  .view.is-on .achart__line{stroke-dashoffset:0!important}
}

/* подсветка строки под курсором — 0.16s, как все состояния у Linear */
.tbl tbody tr{transition:background-color .16s cubic-bezier(.25,.46,.45,.94)}
.tbl tbody tr.is-hover td{background:rgba(255,255,255,.035)}
.tbl tbody tr.is-warn.is-hover td{background:rgba(240,121,107,.08)}

/* ═══════════════════════════════════════════════════════════════════════
   Панель «Сайт под ключ» — в окне живой демо-сайт, а не отчёт по трафику.

   Приём перенесён с /sayty/, где он утверждён: браузерное окно, внутри
   сайт, поверх — стеклянные бейджи. Здесь без наклона: панели карусели
   едут вбок, и поворот дрался бы со сдвигом ленты.

   Сайдбара у этой панели нет — у сайта не бывает админского меню. Это же
   и разводит две панели визуально: слева сайт, справа система, и они
   больше не выглядят близнецами.

   Ниши переключаются сами (кофейня → автосервис → магазин), вместе с
   адресом в планке. Кегль заголовка здесь 34px — правило «10–14px внутри
   мокапа» про интерфейс приложения, а это отрисованный сайт, у него своя
   типографика, иначе он не похож на сайт.
   ═══════════════════════════════════════════════════════════════════════ */

/* .app__body НЕ переводим в block: у .main высота берётся от флекса, и в
   блочном режиме .views{flex:1} схлопывался в ноль — окно оставалось пустым.
   Сайдбара просто нет, .main и так занимает всю ширину. */

.lm{
  position:relative;flex:1;min-height:0;display:flex;flex-direction:column;
  background:#0B111D;overflow:hidden;
}
/* Свет за содержимым: два пятна в цвете ниши. Пятна, а не свечение по всей
   панели — сплошной глоу в чёрном списке анти-слопа. */
.lm__aurora{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(58% 44% at 76% 6%, color-mix(in srgb, var(--ac) 26%, transparent), transparent 68%),
    radial-gradient(46% 40% at 12% 92%, color-mix(in srgb, var(--ac) 12%, transparent), transparent 70%),
    linear-gradient(155deg, rgba(255,255,255,.035), transparent 42%);
}
/* Тот же тайл зерна, что у сцены героя: 96px, overlay, 5% */
.lm__grain{
  position:absolute;inset:0;pointer-events:none;z-index:4;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.lm > *:not(.lm__aurora):not(.lm__grain):not(.lm__cur){position:relative;z-index:2}

/* ── Шапка сайта ── */
.lm__nav{display:flex;align-items:center;gap:18px;padding:12px 26px;border-bottom:1px solid rgba(255,255,255,.07);flex:none}
.lm__logo{display:flex;align-items:center;gap:10px;font:800 15px/1 'Unbounded',var(--font);letter-spacing:-.02em;white-space:nowrap}
.lm__logo i{
  width:26px;height:26px;border-radius:8px;flex:none;display:grid;place-items:center;
  font:800 12px/1 'Unbounded',var(--font);font-style:normal;
  color:var(--ac-ink);background:var(--ac);box-shadow:0 0 16px -3px color-mix(in srgb, var(--ac) 60%, transparent);
}
.lm__links{display:flex;gap:20px;margin-left:auto;font-size:13px;color:#8e99ad;white-space:nowrap}
.lm__cta{
  flex:none;font-size:13px;font-weight:600;padding:9px 18px;border-radius:999px;white-space:nowrap;
  color:var(--ac-ink);background:var(--ac);box-shadow:0 8px 22px -8px color-mix(in srgb, var(--ac) 75%, transparent);
}

/* ── Первый экран сайта ── */
.lm__hero{flex:1;min-height:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:0;padding:0 26px}
.lm__hero > *{flex:none}
.lm__chip{
  font:600 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ac);border:1px solid color-mix(in srgb, var(--ac) 34%, transparent);
  background:color-mix(in srgb, var(--ac) 12%, transparent);
  padding:6px 13px;border-radius:999px;margin-bottom:14px;
}
.lm__t{
  font:800 36px/1.04 'Unbounded',var(--font);letter-spacing:-.036em;color:#fff;
  margin-bottom:14px;
}
.lm__t em{font-style:normal;color:var(--ac)}
.lm__lead{font-size:14.5px;line-height:1.5;color:#9aa5b8;max-width:50%;margin-bottom:18px}
.lm__btns{display:flex;align-items:center;gap:18px}
.lm__b1{
  font-size:14px;font-weight:600;padding:13px 26px;border-radius:999px;white-space:nowrap;
  color:var(--ac-ink);background:var(--ac);box-shadow:0 10px 28px -10px color-mix(in srgb, var(--ac) 80%, transparent);
}
.lm__b2{font-size:14px;font-weight:600;color:#dfe4ec;border-bottom:1px solid rgba(255,255,255,.28);padding-bottom:3px;white-space:nowrap}

/* Заголовок секции: без него пауза перед ценами читалась как пустота.
   С ним она читается как граница двух секций живого сайта. */
.lm__sec{display:flex;align-items:baseline;gap:12px;padding:0 26px 9px;flex:none}
.lm__sec b{font:800 15px/1 'Unbounded',var(--font);letter-spacing:-.02em}
.lm__sec i{margin-left:auto;font-style:normal;font-size:11.5px;color:#8e99ad;white-space:nowrap}

/* ── Карточки товара ── */
.lm__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 26px 12px;flex:none}
/* Карточка вертикальная, с плашкой вместо фото: три горизонтальные полоски
   с ценой занимали 59px, и в окне 620 оставалось 150px пустоты. Настоящее
   меню выглядит так — картинка, название, состав, цена. */
.lm__card{
  display:flex;flex-direction:column;padding:9px 10px 10px;border-radius:14px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);min-width:0;
}
.lm__card--ac{background:color-mix(in srgb, var(--ac) 11%, rgba(255,255,255,.02));border-color:color-mix(in srgb, var(--ac) 26%, transparent)}
.lm__ph{
  height:40px;border-radius:9px;margin-bottom:9px;flex:none;
  background:
    radial-gradient(70% 120% at 24% 8%, color-mix(in srgb, var(--ac) 34%, transparent), transparent 62%),
    linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.015));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.lm__card b{font-size:13.5px;font-weight:600;letter-spacing:-.012em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lm__card u{font-size:10.5px;color:#7f8b9f;text-decoration:none;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lm__card i{margin-top:7px;font-style:normal;font-size:13px;font-weight:600;color:#c3cad4;white-space:nowrap;font-variant-numeric:tabular-nums}
.lm__card--ac i{color:var(--ac)}

/* Подвал: настоящая страница им заканчивается */
.lm__foot{
  display:flex;align-items:center;gap:10px;flex:none;
  padding:9px 26px;border-top:1px solid rgba(255,255,255,.06);
  font-size:10.5px;color:#7f8b9f;
}
.lm__foot span:last-child{margin-left:auto}

/* ── Полоса доверия ── */
.lm__strip{
  display:flex;align-items:center;gap:12px;margin:0 26px 10px;padding:11px 15px;border-radius:12px;flex:none;
  background:color-mix(in srgb, var(--ac) 9%, rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.06);
}
.lm__strip b{font:800 15px/1 'Unbounded',var(--font);color:var(--ac);white-space:nowrap}
.lm__strip span{font-size:11.5px;color:#98a3b6}

/* Курсор ходит по сайту и нажимает — тот же приём, что на /sayty/.
   Это не «пульсация»: одно осмысленное движение с паузами, а не мигание. */
.lm__cur{position:absolute;z-index:5;width:19px;height:19px;pointer-events:none;
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.55));
  animation:lmCur 13s cubic-bezier(.5,0,.2,1) infinite}
@keyframes lmCur{
  0%,6%    {left:36%;top:74%;scale:1}
  18%,26%  {left:calc(100% - 96px);top:26px;scale:1}
  28%      {left:calc(100% - 96px);top:26px;scale:.82}
  30%,46%  {left:calc(100% - 96px);top:26px;scale:1}
  58%,66%  {left:23%;top:calc(100% - 168px);scale:1}
  68%      {left:23%;top:calc(100% - 168px);scale:.82}
  70%,88%  {left:23%;top:calc(100% - 168px);scale:1}
  100%     {left:36%;top:74%;scale:1}
}

/* ── Стеклянные бейджи поверх окна ── */
.fcard{
  position:absolute;z-index:6;display:flex;align-items:center;gap:9px;
  padding:9px 13px;border-radius:13px;pointer-events:none;
  background:rgba(14,20,34,.78);border:1px solid rgba(255,255,255,.11);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 12px 30px -10px rgba(6,9,18,.7), inset 0 1px 0 rgba(255,255,255,.06);
  font-size:12px;font-weight:600;letter-spacing:-.01em;
}
.fcard__ic{
  width:26px;height:26px;border-radius:8px;flex:none;display:grid;place-items:center;
  color:var(--lime);background:linear-gradient(135deg,rgba(205,255,79,.22),rgba(205,255,79,.05));
  border:1px solid rgba(205,255,79,.36);box-shadow:0 0 14px -5px rgba(205,255,79,.55);
}
.fcard__ic svg{width:14px;height:14px}
.fcard__b{display:flex;flex-direction:column;line-height:1.25}
.fcard__b i{font-style:normal;font-size:10px;font-weight:500;color:var(--dim2);margin-top:1px}
.fcard--a{top:120px;right:20px}
.fcard--b{top:186px;right:20px}

/* Три одинаковых плашки читаются как шаблон — это прямой пункт из
   анти-слоп-чек-листа. Разводим их светом: у каждой свой угол падения и
   своя сила подсветки, как у трёх разных снимков товара. */
.lm__card:nth-child(2) .lm__ph{
  background:
    radial-gradient(64% 110% at 78% 14%, color-mix(in srgb, var(--ac) 20%, transparent), transparent 60%),
    linear-gradient(115deg, rgba(255,255,255,.055), rgba(255,255,255,.012));
}
.lm__card:nth-child(3) .lm__ph{
  background:
    radial-gradient(80% 130% at 46% 96%, color-mix(in srgb, var(--ac) 24%, transparent), transparent 64%),
    linear-gradient(175deg, rgba(255,255,255,.06), rgba(255,255,255,.014));
}

/* ── Оркестровка: сайт собирается сверху вниз, как настоящая загрузка ── */
.view.is-on .lm__nav,
.view.is-on .lm__chip,
.view.is-on .lm__t,
.view.is-on .lm__lead,
.view.is-on .lm__btns,
.view.is-on .lm__sec,
.view.is-on .lm__card,
.view.is-on .lm__strip{animation:uqRise .5s cubic-bezier(.22,.61,.36,1) backwards}
.view.is-on .lm__nav  {animation-delay:calc(var(--uqt, 0s) + .42s)}
.view.is-on .lm__chip {animation-delay:calc(var(--uqt, 0s) + .50s)}
.view.is-on .lm__t    {animation-delay:calc(var(--uqt, 0s) + .56s)}
.view.is-on .lm__lead {animation-delay:calc(var(--uqt, 0s) + .62s)}
.view.is-on .lm__btns {animation-delay:calc(var(--uqt, 0s) + .68s)}
.view.is-on .lm__sec  {animation-delay:calc(var(--uqt, 0s) + .72s)}
.view.is-on .lm__card:nth-child(1){animation-delay:calc(var(--uqt, 0s) + .74s)}
.view.is-on .lm__card:nth-child(2){animation-delay:calc(var(--uqt, 0s) + .79s)}
.view.is-on .lm__card:nth-child(3){animation-delay:calc(var(--uqt, 0s) + .84s)}
.view.is-on .lm__strip{animation-delay:calc(var(--uqt, 0s) + .90s)}
.view.is-on .lm__foot{animation:uqRise .5s cubic-bezier(.22,.61,.36,1) calc(var(--uqt, 0s) + .95s) backwards}
.app--site .fcard{animation:uqRise .5s cubic-bezier(.22,.61,.36,1) backwards}
.app--site .fcard--a{animation-delay:calc(var(--uqt, 0s) + .96s)}
.app--site .fcard--b{animation-delay:calc(var(--uqt, 0s) + 1.02s)}

/* ── Раскладки ────────────────────────────────────────────────────────
   Окно 620 → 486 → 472. Ужимается типографика сайта, а не выбрасываются
   блоки: сайт без цен и без полосы доверия перестаёт быть сайтом. */
@media (min-width:1180.02px) and (max-width:1400px){
  .lm__lead{font-size:14px;max-width:58%}
  .lm__nav,.lm__hero{padding-left:22px;padding-right:22px}
  .lm__sec{padding:0 22px 9px}
  .lm__cards{padding:0 22px 12px}
  .lm__t{font-size:34px}
  .lm__strip{margin:0 22px 14px}
  .lm__ph{height:46px}
  .lm__foot{padding:10px 22px}
  .fcard--a{top:108px;right:16px}
  .fcard--b{top:170px;right:16px}
}
@media (max-width:1180.01px){
  .lm__t{font-size:24px;margin-bottom:12px}
  /* 66% давали лиду кофейни три строки — первый экран переполнялся на 5px.
     На 76% он ложится в две, а строка всё ещё не тянется на всю ширину. */
  .lm__lead{font-size:12.5px;max-width:76%;margin-bottom:12px}
  .lm__chip{margin-bottom:10px}
  .lm__nav{padding:12px 20px}
  .lm__hero{padding:0 20px}
  .lm__sec{padding:0 20px 8px}
  .lm__sec b{font-size:13.5px}
  .lm__cards{padding:0 20px 11px;gap:8px}
  .lm__card{padding:9px 9px 10px}
  .lm__ph{height:42px;margin-bottom:8px}
  /* Окно тут 486, содержимому остаётся 452, а просит 481: первый экран сайта
     переполнял свой блок на 29px и чип наезжал на меню — вылета за окно при
     этом не было, .lm__hero центрируется и лезет в обе стороны. Подвал уходит
     так же, как на телефоне: он несёт меньше всех, а отдаёт 40px. */
  .lm__foot{display:none}
  .lm__strip{margin:0 20px 12px;padding:11px 13px}
  .fcard--a{top:96px;right:14px}
  .fcard--b{top:154px;right:14px}
  .lm__cur{display:none}   /* курсор на планшете читается как мусор: мыши нет */
}
@media (max-width:720px){
  /* Окно 328×472, на содержимое остаётся 438. Замер показал 465 — чип
     наезжал на меню на 13px, а заголовок секции на кнопки на 12: .lm__hero
     центрируется и при переполнении лезет в обе стороны, поэтому вылета за
     окно не было и проверка его не видела. Срезаем 60px по мелочи. */
  .lm__strip span i{display:none}   /* хвост полосы уводил её в две строки: 49px вместо 34 */
  .lm__nav{padding:9px 16px}
  .lm__lead{margin-bottom:12px}
  .lm__chip{margin-bottom:9px}
  .lm__sec{padding-bottom:6px}
  .lm__card{padding:7px 12px}
  /* Подвал уходит целиком: он несёт меньше всех («© 2026 · сделано в
     Uniqore»), а освобождает 42px — ровно столько не хватало, чтобы чип
     перестал наезжать на меню, а заголовок секции на кнопки. Десять
     микроподрезок дали бы тот же итог и рассыпали бы ритм. */
  .lm__foot{display:none}
  /* Стрелки на телефоне лежали на содержимом окна (15px внахлёст с каждой
     стороны, ровно по строке «Хиты сезона»). Основной жест здесь свайп,
     а что панелей две — говорят точки под окном. */
  .deck__arw{display:none}
  /* Ссылки шапки уходят — на телефоне у сайта гамбургер,
     а не три пункта в строку; карточки встают в столбик. */
  .lm__links{display:none}
  .lm__logo{font-size:14px}
  .lm__cta{font-size:11.5px;padding:7px 13px}
  .lm__nav{padding:11px 16px;gap:10px}
  .lm__hero{padding:0 16px}
  .lm__t{font-size:23px;margin-bottom:11px}
  .lm__lead{font-size:12px;max-width:100%;margin-bottom:15px}
  .lm__chip{font-size:9.5px;padding:5px 10px;margin-bottom:11px}
  .lm__btns{gap:13px}
  .lm__b1{font-size:12.5px;padding:10px 18px}
  .lm__b2{font-size:12.5px}
  .lm__sec{padding:0 16px 7px}
  .lm__sec b{font-size:12.5px}
  .lm__sec i{font-size:10.5px}
  .lm__cards{grid-template-columns:1fr;gap:5px;padding:0 16px 9px}
  .lm__card{flex-direction:row;align-items:baseline;padding:9px 12px}
  .lm__card b{font-size:12px}
  .lm__ph,.lm__card u{display:none}
  .lm__card i{margin:0 0 0 auto;font-size:12px}
  .lm__foot{padding:9px 16px;font-size:10px}
  .lm__strip{margin:0 16px 10px;padding:10px 12px;gap:9px}
  .lm__strip span{font-size:10.5px}
  /* Бейджи на телефоне уходят совсем: в окне 328px любая их позиция
     накрывает заголовок сайта (замер: 26×43px на автосервисе). Срок
     «4–6 дней» и так стоит в лиде над мокапом. */
  .fcard{display:none}
}
@media (max-width:400px){
  .lm__t{font-size:21px}
}
@media (prefers-reduced-motion:reduce){
  .lm__cur{animation:none}
  .view.is-on .lm__nav,.view.is-on .lm__chip,.view.is-on .lm__t,
  .view.is-on .lm__lead,.view.is-on .lm__btns,.view.is-on .lm__card,
  .view.is-on .lm__strip,.view.is-on .lm__sec,.view.is-on .lm__foot,.app--site .fcard{animation:none!important}
}