/* ============================================================
   Сигдар - единый стиль (production)
   Фундамент (§2 токены, §3 типографика, единый фон) + секции под скоупом #id.
   ============================================================ */

/* ---------- §2. Единые токены (один :root на весь сайт) ---------- */
:root {
  --page:      #f4f4f2;  /* единый фон всей страницы (без зелёного оттенка) */
  --surface:   #ffffff;  /* карточки */
  --ink:       #0c0d0b;  /* основной текст / чёрный */
  --ink-soft:  #3a3c34;
  --muted:     #6c6e64;  /* вторичный текст */
  --subtle:    #9a9c92;  /* третичный / подписи */
  --line:      #e7e8e1;  /* границы */
  --acid:      #a3cc00;  /* акцент (лайм) - единый по сайту, включая точку логотипа */
  --acid-deep: #4f6500;  /* лайм для текста на светлом (контраст) */
  --acid-wash: #f1ffce;  /* фон лаймовых пилюль */
  --font: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace; /* product-UI mono (радар/дашборд) */
  --maxw: 1240px;        /* контентный контейнер */

  /* производные, нужны сигнал-рейке и скоупам */
  --line-soft: rgba(12, 13, 11, .07);
  --spine-x: clamp(24px, 4.6vw, 58px);      /* X-позиция сквозной сигнал-рейки */
  --content-pad-l: clamp(52px, 7vw, 108px); /* левый отступ контента под рейку */
  --mk: rgba(12,13,11,.13); --dot: rgba(163,204,0,.5); /* финальный лок-ап, режим Скан */
}

/* На мобиле сквозная рейка скрыта (<=760px) — убираем резерв под неё, делая левый отступ
   секций равным правому. Контент во всех секциях встаёт симметрично по центру.
   Десктопное значение --content-pad-l не трогаем. */
@media (max-width: 760px) {
  :root { --content-pad-l: clamp(16px, 4vw, 40px); }
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; }
html, body { overflow-x: clip; } /* guard от горизонтального скролла; clip не ломает sticky/position */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* §2. Единый фон страницы (наносим один раз на body) */
  background:
    linear-gradient(rgba(12, 13, 11, .022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(12, 13, 11, .022) 1px, transparent 1px),
    var(--page);
  background-size: 58px 58px, 58px 58px, auto;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }

/* ---------- §3. Контейнер и вертикальный ритм секций ---------- */
.container { max-width: var(--maxw); margin: 0 auto; padding-inline: clamp(20px, 4vw, 40px); }
.section { padding-block: clamp(72px, 10vw, 130px); position: relative; }

/* ---------- §3. Типографика (единая шкала) ---------- */
h1, h2, h3 { margin: 0; }
.h-hero    { font-size: clamp(46px, 7.4vw, 94px); font-weight: 800; letter-spacing: -.05em; line-height: .98; }
.h-section { font-size: clamp(30px, 4vw, 48px); font-weight: 800; letter-spacing: -.04em; line-height: 1.02; }
.h-cta     { font-size: clamp(34px, 5.5vw, 68px); font-weight: 800; letter-spacing: -.045em; line-height: 1.0; }
.h-card    { font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.sub  { font-size: clamp(15px, 1.4vw, 17px); color: var(--muted); line-height: 1.55; }
.lead { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: var(--muted); font-weight: 500; }
.nowrap { white-space: nowrap; }

/* ---------- §3. Эйброу-пилюля (единый компонент) ---------- */
.eyebrow {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 15px;
  border-radius: 999px; background: var(--surface); border: 1px solid var(--line);
  color: var(--ink); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 6px 18px -12px rgba(12,13,11,.3);
}
.eyebrow .d { width: 7px; height: 7px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 7px 1px rgba(163,204,0,.6); flex: none; }

/* угол для анимации контура */
@property --eb-a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

/* бегущая комета по контуру (только кольцо рамки через маску) */
.eyebrow::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--eb-a),
    transparent 0 64%, rgba(163,204,0,.35) 75%, #c4ef46 85%, var(--acid) 90%, transparent 98%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: eb-spin 4.5s linear infinite; pointer-events: none;
}
/* мягкое свечение, бежит вместе с кометой */
.eyebrow::after {
  content: ""; position: absolute; inset: -1px; z-index: -2; border-radius: inherit; padding: 3px;
  background: conic-gradient(from var(--eb-a), transparent 0 70%, rgba(163,204,0,.55) 86%, transparent 99%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  filter: blur(5px); opacity: .85;
  animation: eb-spin 4.5s linear infinite; pointer-events: none;
}
@keyframes eb-spin { to { --eb-a: 360deg; } }
@media (prefers-reduced-motion: reduce) { .eyebrow::before, .eyebrow::after { animation: none; } }

/* нумерованные лейблы-шаги (нейтральные, без зелёного) */
.kicker { display: block; font-family: "Manrope", var(--font); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--subtle); }
.kicker b { color: var(--ink); font-weight: 800; }

/* ---------- Кнопки (общий компонент) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px;
  padding: 11px 19px; border-radius: 11px; font-family: var(--font); font-size: 14.5px; font-weight: 600;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform .16s, box-shadow .22s, border-color .16s; white-space: nowrap;
}
.btn .ic { display: inline-flex; }
.btn .ic svg { width: 16px; height: 16px; }
.btn.primary { background: linear-gradient(180deg, #2a2c22, #0c0d0b); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 10px 24px -13px rgba(12, 13, 11, .6); }
.btn.primary:hover { transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 18px 34px -14px rgba(12, 13, 11, .72); }
.btn.secondary { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: 0 1px 2px rgba(12, 13, 11, .04); }
.btn.secondary:hover { transform: translateY(-1px); border-color: #cfd1c8; box-shadow: 0 10px 22px -14px rgba(12, 13, 11, .3); }

/* ===================== Единая сквозная сигнал-линия (§4) ===================== */
.flow { position: relative; }
.signal { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: min(100%, var(--maxw)); pointer-events: none; z-index: 0; }
.signal .rail { position: absolute; left: var(--spine-x); top: 0; bottom: 0; width: 2px; background: rgba(12,13,11,.08); }
.signal .pulse { position: absolute; left: var(--spine-x); top: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--acid);
  transform: translate(calc(-50% + 1px), -50%); box-shadow: 0 0 12px 3px rgba(163,204,0,.7), 0 0 0 4px rgba(163,204,0,.14);
  animation: signal-run 26s linear infinite; }
.signal .pulse::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; background: rgba(163,204,0,.4); animation: signal-dot 1.5s ease-in-out infinite; }
@keyframes signal-run { 0% { top: 0%; } 100% { top: 100%; } }
@keyframes signal-dot { 0%,100% { transform: scale(.7); opacity: .65; } 50% { transform: scale(1.9); opacity: 0; } }

/* узлы-квадраты только на стыках секций (верх каждой контент-секции), на той же X */
.flow > section { position: relative; }
.seam { position: absolute; left: var(--spine-x); top: 0; width: 9px; height: 9px; border: 1.5px solid rgba(120,160,0,.6); background: var(--acid); border-radius: 2px; transform: translate(calc(-50% + 1px), -50%); z-index: 2; }
.seam::after { content: ""; position: absolute; inset: -4px; border-radius: 4px; border: 1px solid rgba(163,204,0,.5); animation: seam-ripple 3.2s ease-out infinite; }
@keyframes seam-ripple { 0% { transform: scale(.55); opacity: .85; } 100% { transform: scale(2); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .signal .pulse, .signal .pulse::after, .seam::after { animation: none !important; }
}
@media (max-width: 760px) { .signal, .seam { display: none; } }

/* ===================== #segbelt (пояс сегментов, связка 01 -> 02) ===================== */
/* без своей рейки/импульса/узла и без горизонтальных границ; сквозная .signal идёт насквозь */
#segbelt { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; padding: 22px 0; }
#segbelt .marquee { position: relative; margin-left: calc(var(--spine-x) + 22px); overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 92px, #000 calc(100% - 80px), transparent 100%);
          mask: linear-gradient(90deg, transparent 0, #000 92px, #000 calc(100% - 80px), transparent 100%); }
#segbelt .track { display: flex; width: max-content; gap: 14px; will-change: transform; animation: seg-scroll 48s linear infinite; }
#segbelt .marquee:hover .track { animation-play-state: paused; }
@keyframes seg-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
#segbelt .chip { flex: none; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; color: var(--ink); font-size: 15px; font-weight: 600; letter-spacing: -.01em; opacity: .72; transition: opacity .18s, color .18s; }
#segbelt .chip svg { width: 16px; height: 16px; flex: none; color: var(--subtle); transition: color .18s; }
#segbelt .marquee:hover .chip:hover { opacity: 1; }
#segbelt .marquee:hover .chip:hover svg { color: var(--acid-deep); }
@media (prefers-reduced-motion: reduce) { #segbelt .track { animation: none; } }
@media (max-width: 760px) {
  #segbelt .marquee { margin-left: clamp(20px,4vw,40px);
    /* узкая зона затухания (24px), иначе на узком экране края выцветают почти на половину ленты */
    -webkit-mask: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
            mask: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); }
  /* на тач-экране нет :hover — делаем чипы и иконки сразу чёткими */
  #segbelt .chip { opacity: 1; }
  #segbelt .chip svg { color: var(--muted); }
}

/* ===================== Хедер (sticky, общий) ===================== */
.site-header {
  position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 16px clamp(20px, 4vw, 44px); background: rgba(251, 251, 250, .82); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: padding .25s ease, background .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.site-header.scrolled { padding-top: 9px; padding-bottom: 9px; background: rgba(251, 251, 250, .92); border-bottom-color: transparent;
  box-shadow: 0 1px 0 rgba(12, 13, 11, .06), 0 8px 24px -18px rgba(12, 13, 11, .5); }
.site-header .brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); font-weight: 700; letter-spacing: -.02em; font-size: 16px; }
.site-header .brand-mark { width: 30px; height: 30px; flex: none; transition: width .25s ease, height .25s ease; }
.site-header.scrolled .brand-mark { width: 27px; height: 27px; }
/* десктоп: хедер всегда в поджатом виде, высота/вид не прыгают при скролле (мобайл <=760px не трогаем) */
@media (min-width: 761px) {
  .site-header {
    padding-top: 9px; padding-bottom: 9px;
    background: rgba(251, 251, 250, .92);
    border-bottom-color: transparent;
    box-shadow: 0 1px 0 rgba(12,13,11,.06), 0 8px 24px -18px rgba(12,13,11,.5);
  }
  .site-header .brand-mark { width: 27px; height: 27px; }
}
.site-header .brand-name { font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.site-header .nav { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 14.5px; font-weight: 500; }
.site-header .nav a { color: inherit; text-decoration: none; padding: 8px 14px; border-radius: 9px; transition: background .16s, color .16s; }
.site-header .nav a:hover { background: rgba(12, 13, 11, .055); color: var(--ink); }
/* ---- Бургер + мобильная шторка: на десктопе скрыты, живут только в брейкпоинте <=760px ---- */
.site-header .nav-toggle { display: none; }
.site-header .mobile-nav { display: none; }

@media (max-width: 760px) {
  .site-header .nav { display: none; }
  /* раскладка: бренд слева, CTA + бургер прижаты вправо */
  .site-header { gap: 10px; padding-left: clamp(14px,3.5vw,44px); padding-right: clamp(14px,3.5vw,44px); }
  .site-header .btn.primary { margin-left: auto; padding: 9px 13px; font-size: 13px; min-height: 40px; }

  /* кнопка-бургер */
  .site-header .nav-toggle { display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 42px; height: 42px; padding: 0; border: 1px solid var(--line); border-radius: 10px;
    background: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .site-header .nav-toggle:hover { border-color: #cfd1c8; }
  .site-header .nav-toggle-bars, .site-header .nav-toggle-bars::before, .site-header .nav-toggle-bars::after {
    content: ""; display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease, background .2s ease; }
  .site-header .nav-toggle-bars { position: relative; }
  .site-header .nav-toggle-bars::before { position: absolute; left: 0; top: -6px; }
  .site-header .nav-toggle-bars::after  { position: absolute; left: 0; top: 6px; }
  /* открыто -> крестик */
  .site-header .nav-toggle.open .nav-toggle-bars { background: transparent; }
  .site-header .nav-toggle.open .nav-toggle-bars::before { top: 0; transform: rotate(45deg); }
  .site-header .nav-toggle.open .nav-toggle-bars::after  { top: 0; transform: rotate(-45deg); }

  /* выезжающая шторка под хедером, на всю ширину */
  .site-header .mobile-nav {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 49;
    display: flex; flex-direction: column; gap: 4px;
    padding: 8px clamp(14px,3.5vw,20px) 14px;
    background: var(--surface); border-bottom: 1px solid var(--line);
    box-shadow: 0 16px 30px -20px rgba(12,13,11,.45);
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity .22s ease, transform .26s cubic-bezier(.22,1,.36,1), visibility .22s; }
  .site-header.nav-open .mobile-nav { opacity: 1; visibility: visible; transform: none; }
  .site-header .mobile-nav a {
    display: flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: 10px;
    color: var(--ink); text-decoration: none; font-size: 16px; font-weight: 500;
    transition: background .16s, color .16s; }
  .site-header .mobile-nav a:hover, .site-header .mobile-nav a:active, .site-header .mobile-nav a:focus-visible {
    background: var(--acid-wash); color: var(--acid-deep); }
}

/* ===================== #hero (01 · исток сигнала, §4) ===================== */
#hero { position: relative; max-width: var(--maxw); margin: 0 auto; overflow: hidden;
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  padding: clamp(92px, 13vh, 132px) clamp(20px, 4vw, 44px) clamp(44px, 7vh, 84px); }
#hero .bp { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
#hero .bp .glow { position: absolute; left: 0; right: 0; top: 0; height: 240px; background: radial-gradient(720px 220px at 50% -40px, rgba(255,255,255,.7), transparent 70%); }
#hero .bp .edge { position: absolute; top: 0; bottom: 0; width: clamp(40px,8vw,120px); opacity: .7; background-image: radial-gradient(rgba(12,13,11,.10) 1px, transparent 1.5px); background-size: 15px 15px; }
#hero .bp .edge.l { left: 0; -webkit-mask: linear-gradient(90deg,#000,transparent); mask: linear-gradient(90deg,#000,transparent); }
#hero .bp .edge.r { right: 0; -webkit-mask: linear-gradient(270deg,#000,transparent); mask: linear-gradient(270deg,#000,transparent); }

#hero .sig-spine { position: absolute; left: var(--spine-x); top: 0; bottom: -2px; width: 2px; background: rgba(12,13,11,.08); z-index: 1; }
#hero .sig-spine .pulse, #hero .sig-spine .trail { position: absolute; left: 50%; transform: translateX(-50%); border-radius: 50%; }
#hero .sig-spine .pulse { width: 8px; height: 8px; background: var(--acid); box-shadow: 0 0 14px 3px rgba(163,204,0,.55); animation: hero-srun 7.5s cubic-bezier(.45,0,.55,1) infinite; }
#hero .sig-spine .trail { width: 16px; height: 120px; background: linear-gradient(rgba(163,204,0,.3), transparent); filter: blur(6px); animation: hero-srun 7.5s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes hero-srun { 0% { top: -4%; } 100% { top: 104%; } }
#hero .sig-node { position: absolute; left: var(--spine-x); top: clamp(34px,6vw,72px); width: 9px; height: 9px; border: 1.5px solid rgba(120,160,0,.6); background: var(--acid); border-radius: 2px; transform: translate(calc(-50% + 1px), -50%); z-index: 2; }
#hero .sig-node::after { content: ""; position: absolute; inset: -4px; border-radius: 4px; border: 1px solid rgba(163,204,0,.5); animation: hero-ripple 3.2s ease-out infinite; }
@keyframes hero-ripple { 0% { transform: scale(.55); opacity: .85; } 100% { transform: scale(2); opacity: 0; } }
#hero .sig-cont { position: absolute; left: clamp(34px,6vw,80px); bottom: clamp(16px,2.6vw,26px); z-index: 2; display: inline-flex; align-items: center; gap: 9px; color: var(--subtle); font-size: 13px; }
#hero .sig-cont .a { color: var(--acid-deep); font-weight: 700; }

#hero .circuit { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
#hero .circuit svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#hero .cf-base { fill: none; stroke: rgba(12,13,11,.13); stroke-width: 1; vector-effect: non-scaling-stroke; }
#hero .dotwrap { position: absolute; left: 5%; top: 8%; right: 5%; bottom: 10%; z-index: 2; pointer-events: none; }
#hero .dot { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: #a3cc00;
  offset-path: content-box; offset-anchor: center; offset-distance: 0%; offset-rotate: 0deg;
  box-shadow: 0 0 12px 3px rgba(163,204,0,.7), 0 0 0 4px rgba(163,204,0,.14); animation: hero-travel 11s linear infinite; }
#hero .dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; background: rgba(163,204,0,.4); animation: hero-dotpulse 1.5s ease-in-out infinite; }
@keyframes hero-travel { to { offset-distance: 100%; } }
@keyframes hero-dotpulse { 0%,100% { transform: scale(.7); opacity: .65; } 50% { transform: scale(1.9); opacity: 0; } }
@keyframes eyebrow-pulse { 0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(163,204,0,0); } 50% { transform: scale(1.28); box-shadow: 0 0 7px 1px rgba(163,204,0,.6); } }
#hero .drop { position: absolute; left: var(--spine-x); top: 90%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #a3cc00; box-shadow: 0 0 12px 3px rgba(163,204,0,.6); opacity: 0; animation: hero-drop 3s ease-in infinite; }
@keyframes hero-drop { 0% { top: 90%; opacity: 0; } 14% { opacity: 1; } 100% { top: 107%; opacity: 0; } }
#hero .cnode { position: absolute; width: 9px; height: 9px; border-radius: 2px; background: var(--acid); border: 1.5px solid rgba(120,160,0,.6); transform: translate(-50%,-50%); z-index: 2; animation: hero-nodepulse 3.6s ease-in-out infinite; }
#hero .cnode.tr { animation-delay: .9s; } #hero .cnode.br { animation-delay: 1.8s; }
@keyframes hero-nodepulse { 0%,100% { box-shadow: 0 0 0 0 rgba(163,204,0,0); } 50% { box-shadow: 0 0 10px 1px rgba(163,204,0,.55); } }
#hero .cnode.o::after, #hero .cnode.o::before { content: ""; position: absolute; inset: -5px; border-radius: 4px; border: 1px solid rgba(163,204,0,.55); animation: hero-ripple 3s ease-out infinite; }
#hero .cnode.o::before { animation-delay: 1.5s; }
#hero .cnode.o { left: 5%; top: 8%; animation: none; box-shadow: 0 0 16px 3px rgba(163,204,0,.55); }
#hero .cnode.tr { left: 95%; top: 8%; } #hero .cnode.br { left: 95%; top: 90%; }
#hero .orn { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
#hero .waves { position: absolute; inset: 0; background: repeating-radial-gradient(circle at 6% 10%, rgba(120,160,0,.08) 0 1.5px, transparent 1.5px 78px);
  -webkit-mask: radial-gradient(circle at 6% 10%, #000 0, rgba(0,0,0,.55) 42%, transparent 80%); mask: radial-gradient(circle at 6% 10%, #000 0, rgba(0,0,0,.55) 42%, transparent 80%); }
#hero .blip { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: rgba(12,13,11,.20); transform: translate(-50%,-50%); }
#hero .blip.lime { width: 7px; height: 7px; background: var(--acid); box-shadow: 0 0 9px 1px rgba(163,204,0,.55); }
#hero .blip.lime::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(163,204,0,.5); animation: hero-ripple 3.4s ease-out infinite; }
#hero .blip.lime.b::after { animation-delay: 1.7s; }

#hero .hero { position: relative; z-index: 2; text-align: center; }
#hero .eyebrow { margin-bottom: clamp(18px,2.6vw,26px); }
#hero .eyebrow .d { animation: eyebrow-pulse 2.8s ease-in-out infinite; }
#hero h1 { max-width: 15ch; margin: 0 auto; font-size: clamp(44px,6.6vw,84px); }
#hero .lead { max-width: 46ch; margin: clamp(18px,2.4vw,26px) auto 0; }
#hero .actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: clamp(24px,3vw,32px); }
#hero .actions .btn { min-height: 52px; padding: 15px 24px; font-size: 15.5px; }

@media (max-width: 860px) { #hero .blip { display: none; } #hero .waves { opacity: .55; } }
@media (max-width: 760px) {
  #hero .bp .edge { display: none; }
  #hero h1 { letter-spacing: -.04em; }

  /* (1) компактная плашка-эйброу: меньше шрифт/паддинги/скругление, центр при переносе */
  #hero .eyebrow { height: auto; max-width: 100%; gap: 7px; padding: 5px 12px; border-radius: 13px;
    font-size: 11px; letter-spacing: .05em; line-height: 1.3; text-align: center; }
  #hero .eyebrow .d { flex: none; }

  /* (2) приглушаем верхний угол: убираем бегущую точку, угловые ноды и каплю, чтобы не наезжали на текст; сетка/свечение остаются лёгкими */
  #hero .dot, #hero .drop, #hero .cnode { display: none; }
  #hero .waves { opacity: .4; }
  /* кривой контур и недавняя вертикальная линия на мобиле убираются полностью — чистый фон */
  #hero .circuit, #hero .sig-spine { display: none; }

  /* (5) центрируем по вертикали, но при нехватке высоты — прижим к верху + прокрутка, без обрезки эйброу под хедером */
  #hero { justify-content: flex-start; }
  #hero .hero { margin-block: auto; }
}

/* (4) на узких экранах кнопки действий — вертикальной стопкой во всю ширину */
@media (max-width: 620px) {
  #hero .actions { flex-direction: column; align-items: stretch; }
  #hero .actions .btn { width: 100%; }
}

/* (3) очень узкие экраны: уменьшаем h1, чтобы гарантированно влезал без горизонтального скролла (.nowrap на «B2B-клиентов» сохраняется) */
@media (max-width: 380px) {
  #hero h1 { font-size: clamp(34px, 9.5vw, 38px); }
}
@media (prefers-reduced-motion: reduce) {
  #hero .dot, #hero .dot::after, #hero .drop { animation: none; } #hero .drop { opacity: .55; }
  #hero .blip.lime::after, #hero .cnode.o::after, #hero .cnode.o::before { animation: none; }
  #hero .sig-spine .pulse, #hero .sig-spine .trail, #hero .sig-node::after { animation: none !important; }
  #hero .eyebrow .d { animation: none; transform: none; }
}

/* ===================== #radar (02 · WebGL-радар) ===================== */
#radar { position: relative; max-width: var(--maxw); margin: 0 auto;
  padding: clamp(48px,9vh,104px) clamp(16px,4vw,40px) clamp(28px,5vh,56px) var(--content-pad-l); }
#radar .cont { position: relative; z-index: 1; margin-top: clamp(22px,3vh,34px); display: inline-flex; align-items: center; gap: 9px; color: var(--subtle); font-size: 13px; }
#radar .cont .a { color: var(--acid-deep); font-weight: 700; }

#radar .radar-row { position: relative; z-index: 1; max-width: 1180px; text-align: left; display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(28px,4vw,64px); align-items: center; }
#radar .radar-row .copy { min-width: 0; }
#radar .radar-row h2 { margin: 18px 0 0; max-width: 18ch; }
#radar .radar-row .sub { margin: 16px 0 0; max-width: 46ch; }
#radar .radar-row .stage { margin-top: 0; }
#radar .radar-row .device { max-width: none; }
@media (max-width: 900px) { #radar .radar-row { grid-template-columns: 1fr; text-align: center; } #radar .radar-row h2, #radar .radar-row .sub { margin-left: auto; margin-right: auto; } }

#radar .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1); }
#radar .reveal.in { opacity: 1; transform: none; }
#radar .r2 { transition-delay: .08s; } #radar .r3 { transition-delay: .16s; } #radar .r4 { transition-delay: .26s; }

#radar h2 { margin: 20px auto 0; max-width: 16ch; font-size: clamp(30px, 5vw, 52px); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; }
#radar .sub { margin: 16px auto 0; max-width: 52ch; font-size: clamp(15px,1.4vw,17px); color: var(--muted); line-height: 1.55; }

#radar .stage { position: relative; margin-top: clamp(34px, 6vh, 56px); perspective: 1600px; }
#radar .bloom { position: absolute; inset: -8% -4% -14%; z-index: 0; transition: transform .25s ease; background: radial-gradient(50% 50% at 50% 45%, rgba(163,204,0,.30), transparent 70%); filter: blur(34px); }
#radar .device { position: relative; z-index: 1; margin: 0 auto; width: 100%; max-width: 760px; aspect-ratio: 16/10; border-radius: 22px; overflow: hidden; border: 1px solid rgba(255,255,255,.06);
  background: radial-gradient(80% 70% at 38% 30%, #163029, #0c1413 80%);
  box-shadow: 0 60px 110px -40px rgba(6,16,11,.62), 0 0 70px -18px rgba(58,120,72,.20), 0 0 0 1px rgba(14,18,11,.05);
  transform-style: preserve-3d; transform: rotateX(4deg); transition: transform .25s ease; will-change: transform; }
#radar canvas, #radar .reticle { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#radar #sparks { z-index: 2; pointer-events: none; }
#radar .gloss { position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: 22px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.05), inset 0 -44px 60px -52px rgba(0,0,0,.7);
  background: linear-gradient(180deg, rgba(255,255,255,.075), transparent 14%), radial-gradient(130% 60% at 28% -12%, rgba(255,255,255,.06), transparent 52%); }
#radar .reticle { z-index: 3; pointer-events: none; }
#radar .blip-label { position: absolute; z-index: 4; font-family: var(--mono); font-size: 10.5px; color: #eaf6c0;
  background: rgba(18,21,12,.72); border: 1px solid rgba(163,204,0,.36); border-radius: 6px; padding: 2px 7px;
  white-space: nowrap; transform: translate(-50%, -50%); opacity: 0; transition: opacity .35s; pointer-events: none; backdrop-filter: blur(4px); }
#radar .blip-label.show { opacity: 1; }
#radar .blip-label { display: none; } /* фантомный дубль названия компании - скрыт (карточка уже называет компанию) */
#radar .ov { position: absolute; z-index: 5; }
#radar .live { top: 16px; left: 18px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.66); }
#radar .live .blink { width: 7px; height: 7px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 10px var(--acid); animation: radar-blink 1.4s infinite; }
@keyframes radar-blink { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
#radar .range { top: 16px; right: 18px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: rgba(255,255,255,.5); }
#radar .caption { left: 50%; bottom: 16px; transform: translateX(-50%); font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; color: rgba(255,255,255,.62); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
#radar .caption .c-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 8px var(--acid); }
#radar .card { position: absolute; z-index: 6; left: 18px; bottom: 52px; width: min(330px, 70%);
  background: rgba(247,250,239,.975); border: 1px solid rgba(246,251,234,.5); border-radius: 14px; padding: 13px 14px;
  box-shadow: 0 24px 50px -16px rgba(6,18,12,.55), 0 2px 6px rgba(6,18,12,.28), inset 0 1px 0 rgba(255,255,255,.65);
  opacity: 0; transform: translateY(10px) scale(.98); transition: opacity .45s, transform .45s cubic-bezier(.16,1,.3,1); }
#radar .card.show { opacity: 1; transform: none; }
#radar .card-top { display: flex; align-items: center; gap: 9px; }
#radar .ava { width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center; font-family: var(--mono); font-size: 11px; font-weight: 600; background: #f0f2ea; border: 1px solid var(--line); color: var(--ink); }
#radar .c-name { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
#radar .c-meta { font-family: var(--mono); font-size: 10px; color: var(--subtle); margin-top: 1px; }
#radar .c-score { margin-left: auto; text-align: right; }
#radar .c-score b { font-family: var(--mono); font-size: 17px; font-weight: 700; }
#radar .c-score span { display: block; font-family: var(--mono); font-size: 8px; letter-spacing: .12em; color: var(--subtle); text-transform: uppercase; }
#radar .offer { margin-top: 11px; font-size: 12px; line-height: 1.45; color: #2c2f27; min-height: 38px; overflow-wrap: anywhere; }
#radar .offer .cur { display: inline-block; width: 7px; background: var(--acid-deep); margin-left: 1px; animation: radar-cur .9s steps(1) infinite; vertical-align: -1px; }
#radar .offer .cur::after { content: "\00a0"; }
@keyframes radar-cur { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
#radar .ready { margin-top: 11px; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 7px; background: #ecf0e1; color: #7c8170; border: 1px solid rgba(40,52,28,.10); font-size: 11.5px; font-weight: 600; transition: .3s; }
#radar .ready.on { background: var(--acid); color: #1a2104; border-color: var(--acid); }
#radar .ready .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
#radar .device.fallback canvas { display: none; }
#radar .device.fallback::after { content: ""; position: absolute; inset: 0; background: conic-gradient(from 0deg, rgba(163,204,0,.35), transparent 30%); animation: radar-spin 4s linear infinite; }
@keyframes radar-spin { to { transform: rotate(360deg); } }
@media (max-width: 560px) {
  #radar .stage { perspective: none; } #radar .device { aspect-ratio: 4/5; transform: none !important; }
  #radar .card { left: 50%; right: auto; transform: translateX(-50%) translateY(10px); width: 84%; bottom: 56px; }
  #radar .card.show { transform: translateX(-50%); }
}

/* ===================== #dashboard (03 · готовый бриф, анимированный мокап) ===================== */
#dashboard {
  position: relative; max-width: var(--maxw); margin: 0 auto;
  padding: clamp(44px,8vh,100px) clamp(16px,4vw,40px) clamp(28px,5vh,56px) var(--content-pad-l);
  /* продуктовый UI мокапа - свой шрифт намеренно (§2) */
  --font: "Onest", ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
  --surface-2: #f7f8f3; --line-2: #eeeeea; --acid-glow: rgba(163,204,0,.45);
  --amber: #a9762f; --amber-wash: rgba(176,125,53,.14); --slate: #56748d; --slate-wash: rgba(86,116,141,.13);
  font-family: var(--font);
}
#dashboard .bhead { position: relative; z-index: 1; max-width: 760px; margin: 0 0 clamp(22px,3vw,34px); font-family: "Manrope", var(--font); }
#dashboard .bhead .bh-eyebrow { font-size: 12.5px; font-weight: 700; color: var(--acid-deep); letter-spacing: .1em; text-transform: uppercase; }
#dashboard .bhead h2 { margin: 10px 0 0; font-family: "Manrope", var(--font); font-size: clamp(26px,3.2vw,38px); font-weight: 800; letter-spacing: -.035em; line-height: 1.06; color: var(--ink); }
#dashboard .bhead p { margin: 10px 0 0; font-size: 15.5px; color: var(--muted); max-width: 48ch; line-height: 1.55; }
#dashboard .op { position: relative; z-index: 1; margin: 0 auto; width: 100%; max-width: 940px;
  border: 1px solid rgba(13,13,13,.07); border-radius: 18px; overflow: hidden; background: var(--surface);
  box-shadow: 0 0 0 1px rgba(255,255,255,.6), 0 2px 4px rgba(20,20,20,.04), 0 18px 40px -24px rgba(20,20,20,.3), 0 50px 90px -50px rgba(20,20,20,.45); }
#dashboard .cont { position: relative; z-index: 1; margin-top: clamp(22px,3vh,34px); display: inline-flex; align-items: center; gap: 9px; color: var(--subtle); font-size: 13px; }
#dashboard .cont .a { color: var(--acid-deep); font-weight: 700; }
#dashboard .lbl { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--subtle); }
#dashboard .tnum { font-variant-numeric: tabular-nums; }

/* chrome */
#dashboard .chrome { display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: #e9eae3; border-bottom: 1px solid var(--line); }
#dashboard .chrome .lights { display: flex; gap: 7px; flex: none; }
#dashboard .chrome .lights i { width: 11px; height: 11px; border-radius: 50%; }
#dashboard .chrome .lights i:nth-child(1) { background: #ff5f57; } #dashboard .chrome .lights i:nth-child(2) { background: #febc2e; } #dashboard .chrome .lights i:nth-child(3) { background: #28c840; }
#dashboard .chrome .tab { display: inline-flex; align-items: center; gap: 8px; flex: none; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; color: var(--ink); box-shadow: 0 1px 2px rgba(20,20,20,.04); }
#dashboard .chrome .tab .fav { width: 14px; height: 14px; border-radius: 4px; background: var(--acid); flex: none; }
#dashboard .chrome .addr { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 7px 13px; color: var(--subtle); }
#dashboard .chrome .addr .lock { width: 14px; height: 14px; flex: none; color: #57a85a; }
#dashboard .chrome .addr .url { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#dashboard .chrome .addr .url b { color: var(--ink-soft); font-weight: 500; }
#dashboard .chrome .addr .refresh { width: 15px; height: 15px; margin-left: auto; flex: none; color: var(--subtle); }

/* filters */
#dashboard .pill-ok { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 13px; border-radius: 999px; background: linear-gradient(180deg,#b4dd1f,#9bc400); color: #16200a; font-size: 12.5px; font-weight: 800; letter-spacing: -.005em; box-shadow: 0 8px 18px -8px rgba(120,160,0,.7), inset 0 1px 0 rgba(255,255,255,.45); }
#dashboard .pill-ok i { width: 7px; height: 7px; border-radius: 50%; background: #16200a; }

/* stepbar (верхний статус) */
#dashboard .stepbar { display: flex; align-items: center; gap: 14px; padding: 9px 16px; border-bottom: 1px solid var(--line); background: #f8f9f4; position: relative; overflow: hidden; }
#dashboard .stepbar::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: var(--prog, 16%); background: var(--acid); transition: width .6s cubic-bezier(.16,1,.3,1); }
#dashboard .step-no { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--ink); background: var(--surface); border: 1px solid var(--line); padding: 6px 10px; border-radius: 10px; white-space: nowrap; }
#dashboard .step-copy { min-width: 0; flex: 1; }
#dashboard .step-title { font-size: clamp(14px,1.5vw,16px); font-weight: 700; letter-spacing: -.01em; }
#dashboard .step-detail { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

/* grid: 3 колонки, натуральная высота */
#dashboard .grid { display: grid; grid-template-columns: 214px minmax(0,1fr) 286px; align-items: stretch; transition: opacity .35s ease; padding-bottom: 2px; }
#dashboard .grid.resetting { opacity: .5; }
#dashboard .col { padding: 13px; min-width: 0; }
#dashboard .col.mid { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
#dashboard .col > .lbl { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; }
#dashboard .col > .lbl svg { width: 13px; height: 13px; opacity: .55; flex: none; }

/* spotlight */
#dashboard .op.spot [data-spot] { position: relative; transition: opacity .4s ease, filter .4s ease, box-shadow .45s ease, transform .5s cubic-bezier(.34,1.45,.5,1); }
#dashboard .op.spot [data-spot]:not(.active) { opacity: .42; filter: saturate(.55); }
#dashboard .op.spot [data-spot].active { opacity: 1; }
#dashboard .op.spot [data-spot].active.glow { z-index: 8; transform: translateY(-4px) scale(1.045); border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(120,160,0,.45), 0 26px 50px -18px rgba(20,20,20,.26), 0 0 56px -18px var(--acid-glow), inset 0 1px 0 rgba(255,255,255,.95); }
#dashboard .op.spot [data-spot].active.glow::before { content: ""; position: absolute; inset: 0; border-radius: 12px; pointer-events: none; z-index: 5;
  background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.6) 50%, transparent 68%); transform: translateX(-110%); animation: dash-shimmer 1.1s ease-out; }
#dashboard .op.spot button.handoff.active.glow { box-shadow: 0 0 0 1px rgba(120,160,0,.45), 0 26px 50px -18px rgba(20,20,20,.3), 0 0 56px -18px var(--acid-glow); }
#dashboard .op.spot button.handoff.active.glow::before { background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.18) 50%, transparent 65%); }
@keyframes dash-shimmer { to { transform: translateX(110%); } }

/* queue */
#dashboard .q-item { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
#dashboard .q-item + .q-item { margin-top: 6px; }
#dashboard .q-item.sel { background: var(--acid-wash); border-color: rgba(120,160,0,.45); }
#dashboard .q-main { min-width: 0; }
#dashboard .q-main b { display: block; font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
#dashboard .q-main small { font-size: 12px; color: var(--muted); }
#dashboard .q-score { margin-left: auto; text-align: right; }
#dashboard .q-score b { font-family: var(--mono); font-size: 14px; font-weight: 700; background: var(--ink); color: #fff; padding: 3px 8px; border-radius: 7px; }
#dashboard .q-item.sel .q-score b { background: var(--acid); color: #1c2400; }
#dashboard .q-score small { display: block; font-size: 10px; color: var(--subtle); margin-top: 4px; font-family: var(--mono); }
/* приоритет одной лайм-шкалой (как в мобильном дашборде): средний = приглушённый оливковый, низкий = серый. Без светофора. Токены --amber/--slate здесь не используем (они для риск/контекст в брифе). */
#dashboard .q-score.amber b { background: rgba(138,154,82,.18); color: #5f6e33; }
#dashboard .q-score.slate b { background: rgba(12,13,11,.06); color: var(--muted); }
#dashboard .q-score.amber small { color: #6c7a3a; } #dashboard .q-score.slate small { color: var(--subtle); }
#dashboard .mini-tag.amber { background: var(--amber-wash); color: var(--amber); border-color: rgba(176,125,53,.32); }
#dashboard .reason .r i.slate { background: var(--slate); } #dashboard .reason .r i.amber { background: var(--amber); }
#dashboard .q-count { margin: -4px 2px 9px; font-size: 11.5px; color: var(--subtle); }
#dashboard .q-count::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--acid); margin-right: 7px; vertical-align: middle; }
#dashboard .q-more { margin: 8px 2px 2px; font-size: 12px; color: var(--subtle); }

/* center */
#dashboard .c-head h2 { margin: 6px 0 0; font-family: var(--mono); font-size: clamp(21px,2.8vw,27px); font-weight: 700; letter-spacing: -.03em; color: var(--ink); }
#dashboard .trust-line { display: flex; align-items: center; gap: 7px; margin-top: 9px; font-size: 12px; color: var(--muted); }
#dashboard .trust-line svg { width: 14px; height: 14px; color: var(--acid-deep); flex: none; }
#dashboard .op.spot .q-item.sel.pulse { animation: dash-sigpulse 1.6s ease-out 2; }
@keyframes dash-sigpulse { 0% { box-shadow: 0 0 0 0 rgba(163,204,0,.5); } 70% { box-shadow: 0 0 0 8px rgba(163,204,0,0); } 100% { box-shadow: 0 0 0 0 rgba(163,204,0,0); } }
#dashboard .c-head .sub { font-size: 13.5px; color: var(--muted); margin-top: 6px; }
#dashboard .c-head .icp { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; height: 24px; padding: 0 11px; border-radius: 999px; background: var(--acid-wash); border: 1px solid rgba(120,160,0,.4); color: #3b5100; font-size: 12px; font-weight: 600; }
#dashboard .card { position: relative; overflow: hidden; border: 1px solid rgba(13,13,13,.08); border-radius: 12px; padding: 12px; background: linear-gradient(180deg, #ffffff, #fcfdfb); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(20,20,20,.03); }
#dashboard .card p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
#dashboard .why { margin-top: 12px; }
#dashboard .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
#dashboard .chip { font-size: 12px; padding: 5px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid rgba(13,13,13,.13); color: var(--ink); font-weight: 500; }
#dashboard .clbl { font-family: var(--font); font-size: 12.5px; font-weight: 700; letter-spacing: -.005em; text-transform: none; color: var(--ink); }
#dashboard .hl { background: rgba(163,204,0,.42); box-shadow: 0 0 0 2px rgba(163,204,0,.42); border-radius: 2px; color: var(--ink); font-weight: 600; }
#dashboard .reason .r b.t-sig { color: var(--acid-deep); } #dashboard .reason .r b.t-ctx { color: var(--slate); } #dashboard .reason .r b.t-risk { color: var(--amber); }
#dashboard .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
#dashboard .two .card p { font-size: 12.5px; }

/* AI brief */
#dashboard .brief .card { margin-bottom: 9px; }
#dashboard .score-card { display: grid; grid-template-columns: 1fr 56px; gap: 12px; align-items: center; position: relative; }
#dashboard .score-num { font-family: var(--mono); font-size: 30px; font-weight: 700; color: var(--acid-deep); letter-spacing: -.04em; line-height: 1; }
#dashboard .score-num span { font-size: 15px; color: var(--muted); }
#dashboard .score-tag { display: inline-flex; margin-top: 9px; height: 22px; align-items: center; padding: 0 9px; border-radius: 999px; background: rgba(163,204,0,.22); color: #3b5100; font-size: 11px; font-weight: 700; }
#dashboard .ring { width: 54px; height: 54px; transform: rotate(-90deg); }
#dashboard .ring .bg { fill: none; stroke: #e9eadf; stroke-width: 7; }
#dashboard .ring .fg { fill: none; stroke: var(--acid); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 176; stroke-dashoffset: 176; transition: stroke-dashoffset 1s cubic-bezier(.16,1,.3,1); filter: drop-shadow(0 0 5px rgba(163,204,0,.5)); }
#dashboard .score-card.filled .ring .fg { stroke-dashoffset: 14; }
#dashboard .card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
#dashboard .mini-tag { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--acid-wash); color: #3b5100; border: 1px solid rgba(120,160,0,.35); }
#dashboard .draft-text { height: 86px; min-height: 86px; max-height: 86px; overflow: hidden; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }
#dashboard .draft-text .cur { display: inline-block; width: 7px; background: var(--acid); margin-left: 1px; animation: dash-cur .9s steps(1) infinite; }
#dashboard .draft-text .cur::after { content: "\00a0"; }
@keyframes dash-cur { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
#dashboard .reason { display: grid; gap: 7px; }
#dashboard .reason .r { display: flex; gap: 9px; align-items: baseline; font-size: 12px; }
#dashboard .reason .r i { width: 8px; height: 8px; border-radius: 50%; background: var(--acid); flex: none; position: relative; top: 4px; }
#dashboard .reason .r b { font-weight: 700; }
#dashboard .reason .r span { color: var(--muted); }
#dashboard .handoff { position: relative; overflow: hidden; width: 100%; height: 42px; border: 0; border-radius: 11px; cursor: default; background: var(--ink); color: #fff; font-family: var(--font); font-size: 14px; font-weight: 700; margin-top: 2px; transition: transform .2s, box-shadow .3s; }
#dashboard .handoff.click { transform: scale(.98); box-shadow: 0 0 0 3px rgba(163,204,0,.35); }

/* toast */
#dashboard .toast { position: absolute; left: 50%; right: auto; bottom: 20px; z-index: 12; display: flex; align-items: center; gap: 10px; background: var(--ink); color: #fff; padding: 11px 15px; border-radius: 12px; box-shadow: 0 20px 50px -16px rgba(0,0,0,.5); opacity: 0; transform: translate(-50%, 8px); transition: .35s; max-width: 300px; }
#dashboard .toast.show { opacity: 1; transform: translate(-50%, 0); }
#dashboard .toast i { width: 8px; height: 8px; border-radius: 50%; background: var(--acid); flex: none; }
#dashboard .toast b { font-size: 12.5px; } #dashboard .toast small { display: block; color: #b9bcb0; font-size: 11.5px; margin-top: 2px; }

/* annotation + cursor */
#dashboard .connect { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 9; pointer-events: none; }
#dashboard .connect line { stroke: var(--acid-deep); stroke-width: 1.5; stroke-dasharray: 3 3; opacity: .55; transition: .4s; }
#dashboard .connect circle { fill: var(--acid); transition: .4s; }
#dashboard .callout { position: absolute; z-index: 10; display: inline-flex; align-items: center; gap: 8px; max-width: 210px; padding: 9px 12px; border-radius: 11px; background: var(--ink); color: #fff; pointer-events: none; box-shadow: 0 14px 34px -14px rgba(0,0,0,.55); opacity: 0; transform: translateY(4px); transition: opacity .35s, transform .35s, left .45s ease, top .45s ease; }
#dashboard .callout.show { opacity: 1; transform: none; }
#dashboard .callout .cdot { width: 8px; height: 8px; border-radius: 50%; background: var(--acid); flex: none; box-shadow: 0 0 8px var(--acid-glow); }
#dashboard .callout b { font-size: 12.5px; font-weight: 600; line-height: 1.25; }
#dashboard .cursor { position: absolute; z-index: 11; left: 0; top: 0; pointer-events: none; opacity: 0; transform: translate(-100px, -100px); transition: transform .7s cubic-bezier(.5,0,.2,1), opacity .3s; }
#dashboard .cursor.show { opacity: 1; }
#dashboard .cursor svg { display: block; filter: drop-shadow(0 3px 6px rgba(0,0,0,.35)); }
#dashboard .cursor.click svg { transform: scale(.84); transition: transform .15s; }
#dashboard .cursor::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--acid); opacity: 0; }
#dashboard .cursor.click::after { animation: dash-tap .45s ease-out; }
@keyframes dash-tap { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(2.4); } }

#dashboard .op::after { content: ""; position: absolute; inset: 0; z-index: 40; pointer-events: none; opacity: .03; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

@media (prefers-reduced-motion: reduce) { #dashboard * { transition: none !important; animation: none !important; } }
@media (max-width: 820px) {
  #dashboard .grid { grid-template-columns: 1fr; }
  #dashboard .col.mid { border-left: 0; border-right: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  #dashboard .toast, #dashboard .connect, #dashboard .callout, #dashboard .cursor { display: none; }
}

/* ============================================================
   Мобильный дашборд (#dashboard .md-root) — вживлённый компонент-окно.
   Все классы/id с префиксом md-, локальные --md-* токены. Виден только <=820px.
   Десктопный .op виден >820px. Контент не меняется. Шрифты/цвета — токены секции.
   ============================================================ */
/* переключение десктоп/мобайл по 820px (там десктоп и так начинал ломаться) */
#dashboard .md-root { display: none; }
@media (max-width: 820px) {
  #dashboard .op { display: none; }
  #dashboard .md-root { display: flex; }
  /* компактная шапка секции, чтобы заголовок + окно влезали на телефон с запасом (учитывая липкий хедер) */
  #dashboard { padding-top: clamp(20px,3.2vh,40px); padding-bottom: clamp(8px,1.6vh,24px); }
  #dashboard .bhead { margin-bottom: clamp(11px,2vw,17px); max-width: none; }
  #dashboard .bhead h2 { font-size: clamp(19px,4.4vw,25px); margin-top: 6px; line-height: 1.08; }
  #dashboard .bhead p { font-size: 12px; line-height: 1.4; max-width: 44ch; margin-top: 6px; }
}

#dashboard .md-root { --md-soft:#f6f7f3; --md-ok:#5a8a00; --md-e:cubic-bezier(.22,1,.36,1);
  position: relative; z-index: 1; justify-content: center; }
#dashboard .md-winwrap { position: relative; width: 100%; max-width: 420px; }
#dashboard .md-winwrap::before { content:""; position:absolute; inset:-40px -20px; z-index:0; background:radial-gradient(60% 50% at 50% 30%, rgba(163,204,0,.16), transparent 72%); filter:blur(10px); pointer-events:none; }
#dashboard .md-win { position:relative; z-index:1; width:100%; background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:0 50px 100px -45px rgba(12,13,11,.5), 0 4px 14px -6px rgba(12,13,11,.12); }

#dashboard .md-chrome { display:flex; align-items:center; gap:10px; padding:9px 13px; background:#e9eae3; border-bottom:1px solid var(--line); }
#dashboard .md-lights { display:flex; gap:6px; flex:none; }
#dashboard .md-lights i { width:11px; height:11px; border-radius:50%; }
#dashboard .md-lights i:nth-child(1){ background:#ff5f57; } #dashboard .md-lights i:nth-child(2){ background:#febc2e; } #dashboard .md-lights i:nth-child(3){ background:#28c840; }
#dashboard .md-addr { flex:1; min-width:0; display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:6px 11px; }
#dashboard .md-addr .md-lock { width:13px; height:13px; flex:none; color:#57a85a; }
#dashboard .md-addr .md-u { font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#dashboard .md-addr .md-u b { color:var(--ink); font-weight:600; } #dashboard .md-addr .md-u i { color:var(--muted); font-style:normal; }

#dashboard .md-appbody { display:flex; }
#dashboard .md-side { flex:none; width:46px; background:#f3f4ee; border-right:1px solid var(--line); display:flex; flex-direction:column; align-items:center; padding:10px 0; gap:4px; }
#dashboard .md-side .md-mk { width:26px; height:26px; margin-bottom:8px; }
#dashboard .md-side .md-ic { position:relative; width:34px; height:34px; border-radius:9px; display:grid; place-items:center; color:var(--subtle); }
#dashboard .md-side .md-ic svg { width:18px; height:18px; }
#dashboard .md-side .md-ic.md-on { background:var(--acid-wash); color:var(--acid-deep); }
#dashboard .md-side .md-ic.md-on::before { content:""; position:absolute; left:-10px; top:7px; bottom:7px; width:3px; border-radius:2px; background:var(--acid); }
#dashboard .md-side .md-ic .md-livedot { position:absolute; top:5px; right:5px; width:5px; height:5px; border-radius:50%; background:var(--acid); box-shadow:0 0 6px var(--acid); animation:md-lblink 1.6s ease-in-out infinite; }
@keyframes md-lblink { 0%,100%{ opacity:1; } 50%{ opacity:.3; } }

#dashboard .md-main { flex:1; min-width:0; }
#dashboard .md-step { display:flex; align-items:center; gap:10px; min-height:54px; padding:9px 13px; border-bottom:1px solid var(--line); background:#f8f9f4; position:relative; overflow:hidden; }
#dashboard .md-step::after { content:""; position:absolute; left:0; bottom:0; height:3px; width:var(--md-prog,33%); background:var(--acid); transition:width .6s var(--md-e); }
#dashboard .md-step .md-no { font:600 11.5px var(--mono); color:var(--ink); background:var(--surface); border:1px solid var(--line); padding:5px 8px; border-radius:8px; flex:none; }
#dashboard .md-step .md-ti { font-size:12.5px; font-weight:700; letter-spacing:-.01em; line-height:1.2; min-width:0; }
#dashboard .md-okpill { margin-left:auto; flex:none; display:inline-flex; align-items:center; gap:5px; height:25px; padding:0 11px 0 9px; border-radius:999px; background:linear-gradient(180deg,#b4dd1f,#9bc400); color:#16200a; font:700 11px var(--font); letter-spacing:.005em; box-shadow:0 4px 10px -4px rgba(120,160,0,.6), inset 0 1px 0 rgba(255,255,255,.45); transition:opacity .3s; }
#dashboard .md-okpill svg { width:13px; height:13px; }

#dashboard .md-stagewrap { position:relative; }
#dashboard .md-track { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
#dashboard .md-track::-webkit-scrollbar { display:none; }
#dashboard .md-col { flex:0 0 100%; scroll-snap-align:center; padding:13px; height:380px; overflow:hidden; }
#dashboard .md-lbl { display:flex; align-items:center; gap:7px; font:600 10px var(--mono); color:var(--subtle); text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px; }
#dashboard .md-lbl b { color:var(--acid-deep); font-weight:700; }
#dashboard .md-rv { opacity:0; transform:translateY(9px); }
#dashboard .md-rv.md-in { opacity:1; transform:none; transition:opacity .42s var(--md-e), transform .46s var(--md-e); }

#dashboard .md-q { display:flex; align-items:center; gap:10px; padding:9px 10px; border:1px solid var(--line); border-radius:10px; margin-bottom:7px; transition:box-shadow .2s, background .2s; }
#dashboard .md-q.md-act { border-color:rgba(163,204,0,.5); background:var(--acid-wash); }
#dashboard .md-q .md-qd { width:7px; height:7px; border-radius:50%; background:var(--acid); box-shadow:0 0 8px var(--acid); flex:none; animation:md-lblink 1.6s ease-in-out infinite; }
#dashboard .md-q .md-nm { font-weight:700; font-size:13px; } #dashboard .md-q .md-st { font:500 11px var(--font); color:var(--subtle); margin-top:2px; }
#dashboard .md-q .md-sc { margin-left:auto; font:700 16px var(--mono); }
#dashboard .md-q .md-sc.md-hi { color:var(--acid-deep); } #dashboard .md-q .md-sc.md-mid { color:#8a9a52; } #dashboard .md-q .md-sc.md-lo { color:var(--subtle); }
#dashboard .md-q-foot { font:500 11.5px var(--font); color:var(--subtle); margin-top:4px; }

#dashboard .md-co .md-nm { font-weight:800; font-size:20px; letter-spacing:-.025em; }
#dashboard .md-co .md-meta { font:500 12px var(--font); color:var(--muted); margin-top:3px; }
#dashboard .md-fit { display:inline-flex; align-items:center; gap:6px; margin-top:9px; font:600 11px var(--font); color:var(--acid-deep); background:var(--acid-wash); border:1px solid rgba(163,204,0,.3); border-radius:999px; padding:4px 10px; transition:box-shadow .2s; }
#dashboard .md-sub-block { margin-top:11px; } #dashboard .md-sub-block .md-k { font:600 10px var(--mono); color:var(--subtle); text-transform:uppercase; letter-spacing:.07em; }
#dashboard .md-sub-block p { margin:5px 0 0; font-size:12.5px; line-height:1.5; } #dashboard .md-hl { background:rgba(163,204,0,.22); border-radius:3px; padding:0 2px; }
#dashboard .md-tags { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; } #dashboard .md-tag { font-size:10.5px; color:var(--muted); background:var(--md-soft); border:1px solid var(--line); border-radius:999px; padding:4px 8px; }

#dashboard .md-scwrap { display:flex; align-items:center; gap:11px; margin-bottom:2px; }
#dashboard .md-ring { position:relative; width:46px; height:46px; flex:none; }
#dashboard .md-ring svg { transform:rotate(-90deg); width:46px; height:46px; }
#dashboard .md-ring .md-rt { fill:none; stroke:var(--line); stroke-width:4; }
#dashboard .md-ring .md-rv2 { fill:none; stroke:var(--acid); stroke-width:4; stroke-linecap:round; stroke-dasharray:0 100; transition:stroke-dasharray 1.2s var(--md-e); }
#dashboard .md-ring.md-fill .md-rv2 { stroke-dasharray:92 100; }
#dashboard .md-ring .md-rn { position:absolute; inset:0; display:grid; place-items:center; font:800 15px var(--font); color:var(--acid-deep); }
#dashboard .md-scmeta b { display:block; font:700 12.5px var(--font); color:var(--ink); } #dashboard .md-scmeta span { font:500 11px var(--font); color:var(--subtle); }
#dashboard .md-b { background:var(--md-soft); border:1px solid var(--line); border-radius:10px; padding:9px 10px; margin-top:7px; }
#dashboard .md-b.md-draft { border-color:rgba(163,204,0,.4); }
#dashboard .md-b .md-hr { display:flex; align-items:center; justify-content:space-between; }
#dashboard .md-b .md-k { font:600 10px var(--mono); color:var(--subtle); text-transform:uppercase; letter-spacing:.07em; }
#dashboard .md-chip-ok { font:600 9px var(--mono); color:var(--acid-deep); background:var(--acid-wash); border-radius:6px; padding:2px 6px; text-transform:uppercase; }
#dashboard .md-chip-dr { font:600 9px var(--mono); color:#9a6a2a; background:rgba(200,140,50,.13); border-radius:6px; padding:2px 6px; text-transform:uppercase; }
#dashboard .md-b p { margin:5px 0 0; font-size:12.5px; line-height:1.5; }
#dashboard .md-b .md-msg { min-height:42px; } #dashboard .md-b .md-cur2 { display:inline-block; width:2px; height:12px; background:var(--acid); vertical-align:-2px; margin-left:1px; animation:md-cur .8s step-end infinite; }
@keyframes md-cur { 50%{ opacity:0; } }
#dashboard .md-go { position:relative; overflow:hidden; width:100%; height:46px; margin-top:9px; border:0; border-radius:12px; background:linear-gradient(180deg,#b4dd1f,#9bc400); color:#16200a; font:700 14px var(--font); display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; transition:transform .14s, box-shadow .2s; box-shadow:0 12px 24px -12px rgba(120,160,0,.85), inset 0 1px 0 rgba(255,255,255,.35); }
#dashboard .md-go.md-press { transform:scale(.96); }
#dashboard .md-go .md-rip { position:absolute; left:50%; top:50%; width:12px; height:12px; border-radius:50%; background:rgba(12,13,11,.25); transform:translate(-50%,-50%) scale(0); opacity:0; }
#dashboard .md-go .md-rip.md-go2 { animation:md-rip-kf .55s ease-out; } @keyframes md-rip-kf { 0%{ transform:translate(-50%,-50%) scale(0); opacity:.5;} 100%{ transform:translate(-50%,-50%) scale(11); opacity:0; } }
#dashboard .md-safe { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:6px; color:var(--subtle); font-size:11px; text-align:center; } #dashboard .md-safe svg { width:11px; height:11px; color:var(--md-ok); flex:none; }

#dashboard .md-cur-hl { box-shadow:0 0 0 2px rgba(163,204,0,.45)!important; }

#dashboard .md-statusbar { display:flex; align-items:center; gap:8px; padding:6px 13px; border-top:1px solid var(--line); background:#fbfbf9; font:500 10.5px var(--mono); color:var(--subtle); }
#dashboard .md-statusbar .md-dot { width:6px; height:6px; border-radius:50%; background:var(--acid); flex:none; }
#dashboard .md-statusbar .md-sp { margin-left:auto; }

#dashboard .md-swipehint { display:flex; flex-direction:column; align-items:center; gap:8px; padding:8px 0 12px; }
#dashboard .md-swipe-fig { position:relative; width:66px; height:18px; opacity:.95; transition:opacity .35s; }
#dashboard .md-swipe-fig .md-swipe-track { position:absolute; left:6px; right:6px; top:50%; height:2px; transform:translateY(-50%); border-radius:2px; background:linear-gradient(90deg, transparent, var(--line) 28%, var(--line) 72%, transparent); }
#dashboard .md-swipe-fig .md-swipe-tip { position:absolute; top:50%; left:50%; width:13px; height:13px; margin:-6.5px 0 0 -6.5px; border-radius:50%; background:var(--acid-deep); animation:md-swipefinger 1.8s cubic-bezier(.22,1,.36,1) infinite; }
@keyframes md-swipefinger {
  0%,100% { transform:translateX(-19px) scale(1); box-shadow:0 0 0 5px rgba(163,204,0,.16); }
  10% { transform:translateX(-19px) scale(.78); box-shadow:0 0 0 9px rgba(163,204,0,.30); }
  50% { transform:translateX(19px) scale(1); box-shadow:0 0 0 5px rgba(163,204,0,.16); }
  60% { transform:translateX(19px) scale(.78); box-shadow:0 0 0 9px rgba(163,204,0,.30); }
}
#dashboard .md-swipehint.md-used .md-swipe-fig { opacity:0; }
#dashboard .md-dots { display:flex; align-items:center; justify-content:center; gap:7px; }
#dashboard .md-dots .md-dt { width:7px; height:7px; border-radius:50%; background:var(--line); transition:.25s; cursor:pointer; } #dashboard .md-dots .md-dt.md-on { background:var(--acid); width:18px; border-radius:4px; }

#dashboard .md-cursor { position:absolute; left:78%; top:86%; z-index:30; pointer-events:none; opacity:0; transition:left .9s var(--md-e), top .9s var(--md-e), opacity .3s; filter:drop-shadow(0 4px 6px rgba(12,13,11,.45)); }
#dashboard .md-cursor svg { display:block; width:23px; height:23px; }
#dashboard .md-cursor .md-cring { position:absolute; left:2px; top:2px; width:8px; height:8px; border-radius:50%; border:2px solid var(--acid); opacity:0; }
#dashboard .md-cursor.md-click .md-cring { animation:md-cclk .5s ease-out; } @keyframes md-cclk { 0%{ transform:scale(.5); opacity:.85;} 100%{ transform:scale(3.4); opacity:0; } }

/* Компактизация окна на мобиле (после базовых правил, чтобы перебить их по каскаду).
   Цель: ниже высота окна -> вся секция влезает на телефон с запасом, без клиппинга контента. */
@media (max-width: 820px) {
  #dashboard .md-chrome { padding: 7px 12px; }
  #dashboard .md-step { min-height: 48px; }
  #dashboard .md-statusbar { padding: 4px 13px; }
  #dashboard .md-col { height: 360px; padding: 12px; }
  #dashboard .md-lbl { margin-bottom: 7px; }
  #dashboard .md-q { padding: 7px 10px; margin-bottom: 5px; }
  #dashboard .md-sub-block { margin-top: 8px; }
  #dashboard .md-sub-block p { margin-top: 4px; }
  #dashboard .md-tags { margin-top: 6px; }
  #dashboard .md-b { padding: 8px 10px; margin-top: 5px; }
  #dashboard .md-b .md-msg { min-height: 30px; }
  #dashboard .md-go { margin-top: 6px; }
  #dashboard .md-safe { margin-top: 4px; }
  #dashboard .md-scwrap { margin-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #dashboard .md-rv { opacity:1; transform:none; }
  #dashboard .md-b .md-cur2 { display:none; }
  #dashboard .md-cursor { display:none; }
  #dashboard .md-swipe-fig .md-swipe-tip { animation:none; }
}

/* ===================== #problem (04 · проблема + сравнение) ===================== */
#problem { position: relative; max-width: var(--maxw); margin: 0 auto;
  padding: clamp(48px,9vh,104px) clamp(16px,4vw,40px) clamp(28px,5vh,56px) var(--content-pad-l); }
#problem .side { position: relative; z-index: 1; }
#problem .copy { min-width: 0; }
#problem h2 { margin: 18px 0 0; max-width: 16ch; font-size: clamp(30px,4vw,48px); font-weight: 800; letter-spacing: -.04em; line-height: 1.02; }
#problem .sub { margin: 16px 0 0; max-width: 44ch; font-size: clamp(15px,1.4vw,17px); color: var(--muted); line-height: 1.55; }
/* ===== Блок «до → после» (pb-): десктоп-дорожки + мобильная морфинг-карточка ===== */
/* иконки (общие для дорожек и карточки) */
#problem .pb-icn { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; }
#problem .pb-icn svg { width: 13px; height: 13px; }
#problem .pb-icn.bad { background: #e7e8e1; color: var(--subtle); }
#problem .pb-icn.good { background: var(--acid); color: #1c2400; }

/* переключение по ширине: дорожки >640px, карточка <=640px */
#problem .pb-d { display: block; } #problem .pb-m { display: none; }
@media (max-width: 640px) { #problem .pb-d { display: none; } #problem .pb-m { display: block; } }

/* десктоп: дорожки */
#problem .pb-d { margin-top: 28px; max-width: 780px; }
#problem .pb-heads { display: grid; grid-template-columns: 1fr 40px 1fr; align-items: end; margin-bottom: 14px; }
#problem .pb-hold { font: 600 12.5px var(--font); color: var(--subtle); text-transform: uppercase; letter-spacing: .08em; align-self: center; }
#problem .pb-hnew { justify-self: start; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; background: linear-gradient(180deg,#b4dd1f,#9bc400); color: #16200a; font: 700 12px var(--font); text-transform: uppercase; letter-spacing: .05em; box-shadow: 0 8px 16px -7px rgba(120,160,0,.7), inset 0 1px 0 rgba(255,255,255,.4); }
#problem .pb-hnew .d { width: 7px; height: 7px; border-radius: 50%; background: #1c2400; }
#problem .pb-bars { display: flex; flex-direction: column; gap: 10px; }
#problem .pb-bar { display: grid; grid-template-columns: 1fr 40px 1fr; align-items: stretch; position: relative; opacity: 0; transform: translateY(10px); }
#problem .pb-bar.in { opacity: 1; transform: none; transition: opacity .5s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1); }
#problem .pb-z { display: flex; align-items: center; gap: 11px; padding: 14px 16px; }
#problem .pb-z.old { background: #eff0ea; border-radius: 13px 0 0 13px; } #problem .pb-z.old .pb-tx { color: var(--subtle); font-size: 15px; }
#problem .pb-z.new { background: var(--surface); border: 1px solid var(--line); border-radius: 0 13px 13px 0; box-shadow: 0 16px 34px -22px rgba(12,13,11,.3); }
#problem .pb-z.new .pb-icn { box-shadow: 0 4px 9px -4px rgba(120,160,0,.7); }
#problem .pb-z.new .pb-tx { color: var(--ink); font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
#problem .pb-mid { position: relative; display: grid; place-items: center; }
#problem .pb-chip { position: relative; z-index: 2; width: 30px; height: 30px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; color: var(--acid-deep); box-shadow: 0 4px 10px -4px rgba(12,13,11,.25); }
#problem .pb-chip svg { width: 15px; height: 15px; }

/* телефон: морфинг-карточка */
#problem .pb-m { margin-top: 24px; max-width: 430px; }
#problem .pb-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 6px 18px 14px; box-shadow: 0 30px 70px -50px rgba(12,13,11,.5); overflow: hidden; }
#problem .pb-card::before { content: ""; position: absolute; left: 0; top: 66px; bottom: 16px; width: 3px; border-radius: 3px; background: var(--line); transition: background .5s cubic-bezier(.22,1,.36,1); }
#problem .pb-card.good::before { background: var(--acid); }
#problem .pb-seg { display: flex; gap: 4px; margin: 14px 0 8px; padding: 4px; background: #f6f7f3; border: 1px solid var(--line); border-radius: 11px; }
#problem .pb-seg button { flex: 1; border: 0; background: transparent; cursor: pointer; font: 600 13px var(--font); color: var(--muted); padding: 9px 10px; border-radius: 8px; transition: .2s; }
#problem .pb-seg button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(12,13,11,.08); }
#problem .pb-seg button.on.g { background: var(--ink); color: #fff; }
#problem .pb-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); }
#problem .pb-row:first-of-type { border-top: 0; }
#problem .pb-dim { flex: none; width: 92px; font: 600 10.5px var(--mono); color: var(--subtle); text-transform: uppercase; letter-spacing: .05em; }
#problem .pb-tic { position: relative; flex: none; width: 24px; height: 24px; }
#problem .pb-tic .pb-icn { position: absolute; inset: 0; transition: opacity .4s cubic-bezier(.22,1,.36,1), transform .4s cubic-bezier(.22,1,.36,1); }
#problem .pb-tic .pb-icn.good { opacity: 0; transform: scale(.5); }
#problem .pb-val { position: relative; flex: 1; min-height: 22px; display: flex; align-items: center; font-size: 15px; }
#problem .pb-val .v { transition: opacity .45s cubic-bezier(.22,1,.36,1), transform .45s cubic-bezier(.22,1,.36,1); }
#problem .pb-val .v-bad { color: var(--subtle); } #problem .pb-val .v-good { position: absolute; left: 0; color: var(--ink); font-weight: 700; opacity: 0; transform: translateY(8px); }
#problem .pb-card.good .pb-tic .pb-icn.bad { opacity: 0; transform: scale(.5); } #problem .pb-card.good .pb-tic .pb-icn.good { opacity: 1; transform: none; }
#problem .pb-card.good .pb-val .v-bad { opacity: 0; transform: translateY(-8px); } #problem .pb-card.good .pb-val .v-good { opacity: 1; transform: none; }
#problem .pb-row:nth-child(2) .v, #problem .pb-row:nth-child(2) .pb-icn { transition-delay: .05s; }
#problem .pb-row:nth-child(3) .v, #problem .pb-row:nth-child(3) .pb-icn { transition-delay: .1s; }
#problem .pb-row:nth-child(4) .v, #problem .pb-row:nth-child(4) .pb-icn { transition-delay: .15s; }
#problem .pb-row:nth-child(5) .v, #problem .pb-row:nth-child(5) .pb-icn { transition-delay: .2s; }
#problem .pb-row:nth-child(6) .v, #problem .pb-row:nth-child(6) .pb-icn { transition-delay: .25s; }
@media (prefers-reduced-motion: reduce) { #problem .pb-bar { opacity: 1; transform: none; } }
#problem .cont { position: relative; z-index: 1; margin-top: clamp(22px,3vh,34px); display: inline-flex; align-items: center; gap: 9px; color: var(--subtle); font-size: 13px; }
#problem .cont .a { color: var(--acid-deep); font-weight: 700; }
@media (max-width: 900px) { #problem h2, #problem .sub { max-width: none; } }

/* ===================== #how (05 · как работает, sticky scroll-pinned) ===================== */
/* full-bleed композиция: секция = scroll-трек 320vh, .pin залипает (нативный sticky, без scroll-jacking) */
/* секция в общий ряд: контейнер max-width + те же поля, что у соседей; высокий трек для листания */
#how { position: relative; max-width: var(--maxw); margin: 0 auto; height: 320vh;
  padding: clamp(48px,9vh,104px) clamp(16px,4vw,40px) clamp(28px,5vh,56px) var(--content-pad-l); }
/* сквозная сигнал-рейка в левом жёлобе на той же X, что и у соседних секций */
/* залипает компактная карточка, отцентрованная по вьюпорту (не весь экран) */
#how .pin { position: sticky; top: calc((100vh - clamp(420px, 64vh, 560px)) / 2); height: clamp(420px, 64vh, 560px); }
#how .how-card { height: 100%; display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 30px 60px -40px rgba(12,13,11,.34); }
#how .title { flex: none; text-align: left; padding: clamp(16px,2.4vh,26px) clamp(20px,3vw,34px) 0; }
#how .title .kicker { margin-bottom: 8px; }
#how .title h2 { margin: 0; max-width: 24ch; font-size: clamp(22px,2.6vw,34px); font-weight: 800; letter-spacing: -.035em; line-height: 1.06; }
#how .band { position: relative; flex: 1; min-height: 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; }
#how .half { position: relative; overflow: hidden; }
#how .left { background-color: var(--surface);
  background-image: linear-gradient(rgba(12,13,11,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(12,13,11,.022) 1px, transparent 1px);
  background-size: 58px 58px; background-position: center; }
#how .right { background: var(--surface); }
#how .band::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--line); transform: translateX(-.5px); z-index: 2; }
#how .marker { position: absolute; left: 50%; transform: translateX(-1.5px); width: 3px; border-radius: 3px; background: var(--acid); box-shadow: 0 0 10px rgba(163,204,0,.6); z-index: 3; top: 0; height: 25%; transition: top .45s cubic-bezier(.5,0,.3,1); }
#how .scene { position: absolute; inset: 0; display: grid; place-items: center; padding: clamp(20px,3.5vw,48px); opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease; }
#how .scene.on { opacity: 1; transform: none; }
/* единый центрированный бокс под диаграмму: все 4 svg вписываются (preserveAspectRatio meet), не «скачут» */
#how .diagram { width: min(88%, 360px); height: clamp(190px, 34vh, 280px); }
#how .diagram svg { width: 100%; height: 100%; display: block; }
#how .dpulse { transform-box: fill-box; transform-origin: center; animation: how-dpulse 2.6s ease-out infinite; }
@keyframes how-dpulse { 0% { r: 8; opacity: .5; } 70% { r: 30; opacity: 0; } 100% { opacity: 0; } }
#how .nsvg .nbox { fill: var(--surface); stroke: var(--line); stroke-width: 1.25; }
#how .nsvg .nacc { fill: var(--acid-wash); stroke: var(--acid); stroke-width: 1.5; }
#how .nsvg .nline { fill: none; stroke: rgba(12,13,11,.14); stroke-width: 1.4; }
#how .nsvg text { font-family: "Manrope", sans-serif; fill: #2e3027; font-weight: 600; }
#how .nsvg .tacc { fill: #3b5100; font-weight: 800; }
#how .nsvg .flow { fill: var(--acid); }
#how .txt { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 clamp(20px,3vw,48px); opacity: 0; transform: translateY(10px); transition: opacity .4s ease, transform .4s ease; pointer-events: none; }
#how .txt.on { opacity: 1; transform: none; pointer-events: auto; }
#how .txt .lbl { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: var(--muted); }
#how .txt .lbl .ic { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: var(--acid-wash); color: var(--acid-deep); }
#how .txt .lbl .ic svg { width: 13px; height: 13px; }
#how .txt h3 { margin: 14px 0 0; font-size: clamp(20px,2.2vw,30px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
#how .txt p { margin: 12px 0 0; max-width: 40ch; font-size: 15px; color: var(--muted); line-height: 1.55; }

/* мобильная стопка карточек — на десктопе скрыта, видна <=820px (стили внутри медиазапроса) */
#how .how-mstack { display: none; }

/* неподвижные якоря привязки для десктопа (в точках смены сцен); snap не на липкой .pin */
#how .how-snap { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; }
@media (min-width: 821px) {
  html { scroll-snap-type: y proximity; }
  #how .how-snap { scroll-snap-align: start; scroll-margin-top: calc((100vh - clamp(420px, 64vh, 560px)) / 2); }
}

@media (prefers-reduced-motion: reduce) { #how .nsvg animateMotion { display: none; } #how .scene, #how .txt, #how .marker { transition: none; }
  #how .how-mstack .hm-card { position: relative; top: auto; } #how .how-mstack .dpulse { animation: none; }
  #how .dpulse { animation: none; } }
@media (max-width: 820px) {
  #how { height: auto; }
  /* десктопный scroll-pinned механизм на мобиле выключаем целиком, показываем стопку */
  #how .pin { display: none; }
  #how .how-mstack { display: block; padding-bottom: 30px; }

  /* лёгкое сопротивление при свайпе (деликатный proximity, только мобайл) */
  html { scroll-snap-type: y proximity; }

  #how .hm-head { padding: 2px 0 4px; }
  #how .hm-head h2 { margin: 10px 0 0; max-width: 22ch; font-size: clamp(22px,5.6vw,30px); font-weight: 800; letter-spacing: -.035em; line-height: 1.06; }

  /* карточки-стопка: каждая прилипает сверху, следующая наезжает */
  #how .hm-card { position: sticky; top: calc(64px + var(--i) * 14px); z-index: calc(var(--i) + 1);
    background: var(--surface); border: 1px solid var(--line); border-radius: 18px; margin-top: 16px;
    box-shadow: 0 30px 56px -28px rgba(12,13,11,.5); overflow: hidden; }
  /* точки привязки — на неподвижных якорях в потоке (не на липких карточках), чтобы не было самопрокрутки */
  #how .hm-snap { display: block; height: 0; margin: 0; scroll-snap-align: start; scroll-margin-top: 64px; }
  #how .hm-pad { padding: 20px clamp(16px,5vw,28px); }
  #how .hm-row { display: flex; flex-direction: column; gap: 14px; }
  #how .hm-lab { display: inline-flex; align-items: center; gap: 9px; font: 600 11px var(--mono); color: var(--acid-deep); text-transform: uppercase; letter-spacing: .07em; }
  #how .hm-lab .hm-ic { flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--acid-wash); border: 1px solid rgba(163,204,0,.4); color: var(--acid-deep); display: grid; place-items: center; }
  #how .hm-lab .hm-ic svg { width: 17px; height: 17px; }
  #how .hm-lab .hm-num { margin-left: auto; font: 700 13px var(--mono); color: var(--subtle); }
  #how .hm-card h3 { margin: 12px 0 0; font-size: clamp(20px,5.4vw,24px); font-weight: 800; letter-spacing: -.025em; line-height: 1.1; }
  #how .hm-card p { margin: 10px 0 0; font-size: 15px; color: var(--muted); line-height: 1.55; max-width: 42ch; }
  #how .hm-dia { order: 2; background: #f6f7f3; border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: grid; place-items: center; }
  #how .hm-dia svg { width: 100%; max-width: 300px; height: auto; }
}

/* ===================== #trust (06 · безопасно для репутации) ===================== */
#trust { position: relative; max-width: var(--maxw); margin: 0 auto;
  padding: clamp(48px,9vh,104px) clamp(16px,4vw,40px) clamp(28px,5vh,56px) var(--content-pad-l); }
#trust .head { position: relative; z-index: 1; }
#trust h2 { margin: 18px 0 0; max-width: 20ch; font-size: clamp(28px,3.6vw,44px); font-weight: 800; letter-spacing: -.04em; line-height: 1.03; }
#trust .sub { margin: 14px 0 0; max-width: 52ch; font-size: clamp(15px,1.4vw,17px); color: var(--muted); line-height: 1.55; }
/* ===== Доверие: чип-иконка (общая), карточки, тёмные офферы ===== */
#trust .ic { flex: none; display: grid; place-items: center; color: var(--acid-deep); background: linear-gradient(180deg,rgba(163,204,0,.26),rgba(163,204,0,.06)); border: 1px solid rgba(83,104,0,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 8px 16px -9px rgba(120,160,0,.55); }
#trust .ic svg { width: 22px; height: 22px; }

/* десктоп: 4 карточки в ряд */
#trust .tcards { position: relative; z-index: 1; margin-top: clamp(28px,3.6vw,42px); display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
#trust .tcard { position: relative; overflow: hidden; padding: 20px; border-radius: 16px; border: 1px solid rgba(12,13,11,.07); background: linear-gradient(180deg,#fff,#fafbf5); box-shadow: 0 1px 2px rgba(12,13,11,.04), 0 22px 42px -30px rgba(12,13,11,.32); transition: transform .24s cubic-bezier(.22,1,.36,1), box-shadow .24s cubic-bezier(.22,1,.36,1), border-color .24s; }
#trust .tcard:hover { transform: translateY(-5px); border-color: rgba(163,204,0,.5); box-shadow: 0 1px 2px rgba(12,13,11,.04), 0 30px 54px -28px rgba(120,160,0,.34); }
#trust .tcard .ic { width: 44px; height: 44px; border-radius: 13px; }
#trust .tcard .ghost { position: absolute; right: -18px; bottom: -22px; width: 112px; height: 112px; color: rgba(12,13,11,.04); pointer-events: none; } #trust .tcard .ghost svg { width: 100%; height: 100%; }
#trust .tcard h4 { position: relative; margin: 14px 0 0; font-size: 16.5px; font-weight: 800; letter-spacing: -.02em; }
#trust .tcard p { position: relative; margin: 8px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.55; }

/* десктоп: тёмная полоса оффера */
#trust .toffer-bar { position: relative; overflow: hidden; z-index: 1; margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; padding: 18px 24px; border: 1px solid #2c331f; border-radius: 18px; color: #fff; background: linear-gradient(160deg,#171e11,#0b0f0a 72%); box-shadow: 0 34px 70px -42px rgba(0,0,0,.6); }
#trust .toffer-bar::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 120% at 92% -20%, rgba(163,204,0,.26), transparent 60%); pointer-events: none; }
#trust .toffer-bar::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.2px); background-size: 17px 17px; opacity: .4; pointer-events: none; }
#trust .toffer-bar > * { position: relative; z-index: 1; }
#trust .toffer-bar .ok { flex: none; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(180deg,#b4dd1f,#9bc400); color: #16200a; box-shadow: 0 0 24px -4px rgba(163,204,0,.8), inset 0 1px 0 rgba(255,255,255,.4); } #trust .toffer-bar .ok svg { width: 24px; height: 24px; }
#trust .toffer-bar .ot { flex: 1; min-width: 230px; } #trust .toffer-bar .ot b { font-size: 18px; font-weight: 800; letter-spacing: -.02em; } #trust .toffer-bar .ot span { display: block; margin-top: 4px; font-size: 13.5px; color: #bcc0b3; line-height: 1.5; }
#trust .toffer-bar .cta { margin-left: auto; display: inline-flex; align-items: center; gap: 9px; height: 50px; padding: 0 22px; border-radius: 13px; background: linear-gradient(180deg,#b4dd1f,#9bc400); color: #16200a; font-weight: 800; font-size: 15px; text-decoration: none; box-shadow: 0 16px 30px -12px rgba(120,160,0,.9), inset 0 1px 0 rgba(255,255,255,.45); transition: transform .15s; } #trust .toffer-bar .cta:hover { transform: translateY(-2px); } #trust .toffer-bar .cta svg { width: 17px; height: 17px; }

/* телефон: сетка 2×2 + тёмная карточка оффера */
#trust .tmgrid, #trust .toffer-m { display: none; }
@media (max-width: 820px) {
  #trust .tcards, #trust .toffer-bar { display: none; }
  #trust .tmgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 22px; position: relative; z-index: 1; }
  #trust .tmcard { position: relative; overflow: hidden; padding: 16px 15px; border-radius: 15px; border: 1px solid rgba(12,13,11,.07); background: linear-gradient(180deg,#fff,#fafbf5); box-shadow: 0 1px 2px rgba(12,13,11,.04), 0 18px 36px -30px rgba(12,13,11,.3); }
  #trust .tmcard .ic { width: 38px; height: 38px; border-radius: 11px; } #trust .tmcard .ic svg { width: 19px; height: 19px; }
  #trust .tmcard h4 { margin: 12px 0 0; font-size: 14.5px; font-weight: 800; letter-spacing: -.015em; line-height: 1.2; }
  #trust .tmcard p { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
  #trust .tmcard .ghost { position: absolute; right: -14px; bottom: -16px; width: 78px; height: 78px; color: rgba(12,13,11,.04); pointer-events: none; } #trust .tmcard .ghost svg { width: 100%; height: 100%; }
  #trust .toffer-m { display: block; position: relative; overflow: hidden; z-index: 1; margin-top: 13px; border: 1px solid #2c331f; border-radius: 18px; padding: 19px; color: #fff; background: linear-gradient(160deg,#171e11,#0b0f0a 72%); box-shadow: 0 30px 60px -36px rgba(0,0,0,.55); }
  #trust .toffer-m::before { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 50% at 90% -8%, rgba(163,204,0,.26), transparent 62%); pointer-events: none; }
  #trust .toffer-m > * { position: relative; z-index: 1; }
  #trust .toffer-m .badge { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: rgba(163,204,0,.16); border: 1px solid rgba(163,204,0,.42); color: var(--acid); font: 700 10px var(--mono); text-transform: uppercase; letter-spacing: .06em; }
  #trust .toffer-m b { display: block; margin-top: 12px; font-size: 17.5px; font-weight: 800; letter-spacing: -.02em; line-height: 1.18; }
  #trust .toffer-m .od { margin-top: 7px; font-size: 13px; color: #bcc0b3; line-height: 1.5; }
  #trust .toffer-m .cta { margin-top: 15px; display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border-radius: 13px; background: linear-gradient(180deg,#b4dd1f,#9bc400); color: #16200a; font-weight: 800; font-size: 15px; text-decoration: none; box-shadow: 0 14px 26px -12px rgba(120,160,0,.85), inset 0 1px 0 rgba(255,255,255,.4); } #trust .toffer-m .cta svg { width: 16px; height: 16px; }
}

/* ===================== #audience (07 · для кого, интерактивные сегменты) ===================== */
#audience { position: relative; max-width: var(--maxw); margin: 0 auto;
  padding: clamp(48px,9vh,104px) clamp(16px,4vw,40px) clamp(28px,5vh,56px) var(--content-pad-l); }
#audience .head { position: relative; z-index: 1; }
#audience h2 { margin: 18px 0 0; max-width: 16ch; font-size: clamp(28px,3.6vw,46px); font-weight: 800; letter-spacing: -.04em; line-height: 1.02; }
#audience .sub { margin: 14px 0 0; max-width: 52ch; font-size: clamp(15px,1.4vw,17px); color: var(--muted); line-height: 1.55; }
/* ===== Сигнальная линия «Для кого» (десктоп горизонталь + телефон вертикаль) ===== */
@keyframes aud-flow{ 0%{ left:5%; opacity:0;} 12%{opacity:1;} 90%{opacity:1;} 100%{ left:96.5%; opacity:0;} }
@keyframes aud-flare{ 0%,6%{ opacity:0;} 9%{ opacity:.95;} 16%{ opacity:0;} 56%{ opacity:0;} 59%{ opacity:.95;} 66%{ opacity:0;} 100%{ opacity:0;} }
@keyframes aud-spin{ to{ transform:translate(-50%,-50%) rotate(360deg);} }
@keyframes aud-emit{ 0%{ transform:translate(-50%,-50%) scale(.18); opacity:.5;} 80%{ opacity:0;} 100%{ transform:translate(-50%,-50%) scale(1); opacity:0;} }
@keyframes aud-srcpulse{ 0%{ box-shadow:0 0 0 0 rgba(163,204,0,.5);} 70%{ box-shadow:0 0 0 10px rgba(163,204,0,0);} 100%{ box-shadow:0 0 0 0 rgba(163,204,0,0);} }
@keyframes aud-nodeIn{ from{ opacity:0; transform:translate(-50%,-50%) rotate(45deg) scale(0);} to{ opacity:1; transform:translate(-50%,-50%) rotate(45deg) scale(1);} }
@keyframes aud-lblIn{ from{ opacity:0; transform:translateX(-50%) translateY(9px);} to{ opacity:1; transform:translateX(-50%) translateY(0);} }
@keyframes aud-rowIn{ from{ opacity:0; transform:translateY(9px);} to{ opacity:1; transform:none;} }
@keyframes aud-vflow{ 0%{ top:8px; opacity:0;} 8%{ opacity:1;} 82%{ opacity:1;} 100%{ top:calc(100% - 120px); opacity:0;} }
@keyframes aud-vflare{ 0%,7%{ box-shadow:inset 0 1px 0 rgba(255,255,255,.5);} 11%{ box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 0 13px 3px rgba(163,204,0,.9);} 22%{ box-shadow:inset 0 1px 0 rgba(255,255,255,.5);} 100%{ box-shadow:inset 0 1px 0 rgba(255,255,255,.5);} }

#audience .sl{ position:relative; margin-top:42px; height:262px; }
#audience .sl::before{ content:""; position:absolute; left:-2%; right:-2%; top:50%; height:200px; transform:translateY(-50%); background:radial-gradient(55% 70% at 50% 50%, rgba(163,204,0,.07), transparent 72%); z-index:0; pointer-events:none; }
#audience .sl-line{ position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); height:2px; z-index:2; transform-origin:left center; background:linear-gradient(90deg, transparent, rgba(83,104,0,.28) 6%, var(--acid) 46%, rgba(83,104,0,.2) 88%, transparent); }
#audience .sl-line::before{ content:""; position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); height:12px; background:linear-gradient(90deg, transparent, rgba(163,204,0,.2) 44%, rgba(163,204,0,.12) 70%, transparent 90%); filter:blur(7px); }
#audience .sl-flow{ position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); height:2px; z-index:3; }
#audience .sl-flow .flow{ position:absolute; top:50%; width:8px; height:8px; border-radius:50%; background:#dcf27a; transform:translate(-50%,-50%); box-shadow:0 0 13px 3px rgba(163,204,0,.9); animation:aud-flow 6s linear infinite; }
#audience .sl-flow .flow::before{ content:""; position:absolute; right:4px; top:50%; transform:translateY(-50%); width:46px; height:3px; border-radius:3px; background:linear-gradient(90deg, transparent, rgba(163,204,0,.65)); }
#audience .sl-flow .flow.f2{ animation-delay:3s; }
#audience .sl-radar{ position:absolute; left:0; top:50%; z-index:1; }
#audience .sl-radar .ring{ position:absolute; left:0; top:0; border-radius:50%; border:1px solid rgba(83,104,0,.14); transform:translate(-50%,-50%); }
#audience .sl-radar .r1{ width:48px; height:48px; } #audience .sl-radar .r2{ width:92px; height:92px; }
#audience .sl-radar .sweep{ position:absolute; left:0; top:0; width:92px; height:92px; border-radius:50%; transform:translate(-50%,-50%); background:conic-gradient(from 0deg, rgba(163,204,0,.28), rgba(163,204,0,.04) 32%, transparent 48%); -webkit-mask:radial-gradient(circle, #000 99%, transparent 100%); mask:radial-gradient(circle, #000 99%, transparent 100%); animation:aud-spin 5s linear infinite; }
#audience .sl-radar .emit{ position:absolute; left:0; top:0; width:108px; height:108px; border-radius:50%; border:1.5px solid var(--acid); transform:translate(-50%,-50%) scale(.18); opacity:0; animation:aud-emit 4.4s ease-out infinite; }
#audience .sl-src{ position:absolute; top:50%; left:0; transform:translateY(-50%); z-index:4; }
#audience .sl-src .dot{ width:14px; height:14px; border-radius:50%; background:var(--acid); border:2px solid var(--page); box-shadow:0 0 0 0 rgba(163,204,0,.5); animation:aud-srcpulse 2.8s ease-out infinite; }
#audience .sl-src .lab{ position:absolute; bottom:23px; left:-2px; font:600 10px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--subtle); white-space:nowrap; }
#audience .sl-end{ position:absolute; top:50%; right:0; transform:translateY(-50%); z-index:4; display:flex; align-items:center; gap:9px; }
#audience .sl-end .t{ border-radius:50%; background:var(--acid-deep); }
#audience .sl-end .t1{ width:8px; height:8px; opacity:.85; } #audience .sl-end .t2{ width:6px; height:6px; opacity:.5; } #audience .sl-end .t3{ width:4px; height:4px; opacity:.3; }
#audience .sl-end .lab{ position:absolute; bottom:23px; right:0; font:600 10px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--subtle); white-space:nowrap; }
#audience .sl-stop{ position:absolute; top:0; bottom:0; width:0; z-index:5; }
#audience .sl-node{ position:absolute; top:50%; left:0; width:14px; height:14px; transform:translate(-50%,-50%) rotate(45deg); border-radius:4px; background:linear-gradient(135deg,#bce63f,#8cb900 70%); border:2px solid var(--page); box-shadow:0 2px 6px rgba(83,104,0,.4), inset 0 1px 0 rgba(255,255,255,.55); transition:transform .2s var(--e), box-shadow .2s; }
#audience .sl-node::before{ content:""; position:absolute; top:2px; left:2px; width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.7); filter:blur(.4px); z-index:1; }
#audience .sl-node::after{ content:""; position:absolute; top:50%; left:50%; width:30px; height:30px; border-radius:50%; transform:translate(-50%,-50%) rotate(-45deg); background:radial-gradient(circle, transparent 32%, rgba(163,204,0,.8) 46%, transparent 72%); filter:blur(1px); opacity:0; animation:aud-flare 6s linear infinite; animation-delay:calc(.05s + var(--i) * .985s); }
#audience .sl-stop::before{ content:""; position:absolute; left:0; width:1px; transition:background .2s, width .2s; transform:translateX(-50%); }
#audience .sl-stop.up::before{ top:calc(50% - 50px); height:38px; background:linear-gradient(to top, rgba(163,204,0,.55), rgba(83,104,0,.08)); }
#audience .sl-stop.down::before{ top:calc(50% + 12px); height:38px; background:linear-gradient(to bottom, rgba(163,204,0,.55), rgba(83,104,0,.08)); }
#audience .sl-lbl{ position:absolute; left:0; transform:translateX(-50%); width:158px; text-align:center; transition:transform .22s var(--e); }
#audience .sl-stop.up .sl-lbl{ bottom:calc(50% + 52px); }
#audience .sl-stop.down .sl-lbl{ top:calc(50% + 52px); }
#audience .sl-lbl .ic{ width:40px; height:40px; margin:0 auto; border-radius:12px; display:grid; place-items:center; color:var(--acid-deep); background:linear-gradient(180deg,#fff,#f5f6f0); border:1px solid rgba(12,13,11,.08); box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 10px 18px -11px rgba(12,13,11,.4); transition:transform .22s var(--e), box-shadow .22s, border-color .22s; }
#audience .sl-lbl .ic svg{ width:19px; height:19px; }
#audience .sl-lbl b{ display:block; margin-top:9px; font-size:15px; font-weight:800; letter-spacing:-.025em; }
#audience .sl-lbl span{ display:block; margin-top:3px; font-size:12.5px; color:var(--acid-deep); font-weight:600; line-height:1.35; }
#audience .sl-stop:hover .sl-node{ transform:translate(-50%,-50%) rotate(45deg) scale(1.32); box-shadow:0 2px 8px rgba(83,104,0,.5), 0 0 18px 5px rgba(163,204,0,.7), 0 0 0 5px rgba(163,204,0,.18), inset 0 1px 0 rgba(255,255,255,.6); }
#audience .sl-stop:hover .sl-node::after{ animation:none; opacity:.55; }
#audience .sl-stop:hover::before{ background:var(--acid); width:2px; }
#audience .sl-stop.up:hover .sl-lbl{ transform:translateX(-50%) translateY(-3px); }
#audience .sl-stop.down:hover .sl-lbl{ transform:translateX(-50%) translateY(3px); }
#audience .sl-stop:hover .sl-lbl .ic{ transform:scale(1.06); border-color:rgba(163,204,0,.55); box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 16px 24px -12px rgba(120,160,0,.55); }
#audience .sl.ready .sl-line{ transform:translateY(-50%) scaleX(0); transition:transform 1s var(--e); }
#audience .sl.ready.in .sl-line{ transform:translateY(-50%) scaleX(1); }
#audience .sl.ready .sl-flow{ opacity:0; transition:opacity .5s 1s; } #audience .sl.ready.in .sl-flow{ opacity:1; }
#audience .sl.ready .sl-radar{ opacity:0; transition:opacity .6s; } #audience .sl.ready.in .sl-radar{ opacity:1; }
#audience .sl.ready .sl-src{ opacity:0; transform:translateY(-50%) scale(.5); transition:opacity .45s, transform .45s var(--e); } #audience .sl.ready.in .sl-src{ opacity:1; transform:translateY(-50%) scale(1); }
#audience .sl.ready .sl-end{ opacity:0; transition:opacity .5s 1.05s; } #audience .sl.ready.in .sl-end{ opacity:1; }
#audience .sl.ready .sl-stop .sl-node{ opacity:0; }
#audience .sl.ready.in .sl-stop .sl-node{ opacity:1; animation:aud-nodeIn .55s var(--e) backwards; animation-delay:calc(.3s + var(--i)*.13s); }
#audience .sl.ready .sl-stop .sl-lbl{ opacity:0; }
#audience .sl.ready.in .sl-stop .sl-lbl{ opacity:1; animation:aud-lblIn .5s var(--e) backwards; animation-delay:calc(.45s + var(--i)*.13s); }
#audience .sl.ready .sl-stop::before{ opacity:0; }
#audience .sl.ready.in .sl-stop::before{ opacity:1; transition:opacity .35s; transition-delay:calc(.4s + var(--i)*.13s); }
#audience .sl-vert{ display:none; }

@media (max-width:720px){
  #audience .sl{ display:none; }
  #audience .sl-vert{ display:block; position:relative; margin-top:30px; }
  #audience .sl-vert .vflow{ position:absolute; left:18px; top:8px; width:7px; height:7px; border-radius:50%; background:#dcf27a; box-shadow:0 0 8px 2px rgba(163,204,0,.8); transform:translateX(-50%); z-index:2; animation:aud-vflow 5s linear infinite; animation-delay:1s; }
  #audience .sl-vert .vflow::before{ content:""; position:absolute; bottom:4px; left:50%; transform:translateX(-50%); width:3px; height:34px; border-radius:3px; background:linear-gradient(180deg, transparent, rgba(163,204,0,.6)); }
  #audience .vsrc{ position:relative; padding:0 0 6px 46px; }
  #audience .vsrc::before{ content:""; position:absolute; left:11px; top:2px; width:14px; height:14px; border-radius:50%; background:var(--acid); border:2px solid var(--page); box-shadow:0 0 0 0 rgba(163,204,0,.5); animation:aud-srcpulse 2.8s ease-out infinite; z-index:1; }
  #audience .vsrc::after{ content:""; position:absolute; left:17px; top:16px; bottom:0; width:2px; background:rgba(163,204,0,.7); z-index:0; }
  #audience .vsrc span{ font:600 10px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--subtle); }
  #audience .vrow{ position:relative; display:flex; align-items:center; gap:13px; padding:13px 0 13px 46px; transition:background .15s; border-radius:10px; }
  #audience .vrow::after{ content:""; position:absolute; left:17px; top:0; bottom:0; width:2px; background:rgba(163,204,0,.7); z-index:0; }
  #audience .vrow::before{ content:""; position:absolute; left:12px; top:50%; width:12px; height:12px; border-radius:3px; background:linear-gradient(135deg,#bce63f,#8cb900 70%); border:2px solid var(--page); box-shadow:inset 0 1px 0 rgba(255,255,255,.5); transform:translateY(-50%); z-index:1; }
  #audience .vrow:not(.more)::before{ animation:aud-vflare 5s linear infinite; animation-delay:calc(1.05s + var(--i) * .62s); }
  #audience .vrow:active{ background:rgba(163,204,0,.06); }
  #audience .vline{ position:absolute; left:46px; right:0; top:0; height:1px; background:var(--line); }
  #audience .vrow .ic{ flex:none; width:40px; height:40px; border-radius:12px; display:grid; place-items:center; color:var(--acid-deep); background:linear-gradient(180deg,#fff,#f5f6f0); border:1px solid rgba(12,13,11,.08); box-shadow:0 1px 0 rgba(255,255,255,.8) inset; z-index:1; }
  #audience .vrow .ic svg{ width:20px; height:20px; }
  #audience .vrow .vt{ z-index:1; }
  #audience .vrow .vt b{ font-size:16px; font-weight:800; letter-spacing:-.02em; }
  #audience .vrow .vt span{ display:block; margin-top:2px; font-size:13.5px; color:var(--muted); }
  #audience .vrow .vt span i{ font-style:normal; color:var(--acid-deep); font-weight:600; }
  #audience .vrow.last::after{ top:0; bottom:auto; height:50%; }
  #audience .vrow.more{ margin-top:10px; }
  #audience .vrow.more::after{ content:none; }
  #audience .vrow.more::before{ content:none; }
  #audience .vrow.more .ic{ background:#f1f2ec; border:1px dashed rgba(83,104,0,.4); color:var(--subtle); box-shadow:none; }
  #audience .vrow.more .vt b{ color:var(--muted); }
  #audience .sl-vert.ready .vsrc, #audience .sl-vert.ready .vrow{ opacity:0; }
  #audience .sl-vert.ready.in .vsrc{ opacity:1; animation:aud-rowIn .5s var(--e) backwards; }
  #audience .sl-vert.ready.in .vrow{ opacity:1; animation:aud-rowIn .5s var(--e) backwards; animation-delay:calc(.1s + var(--i)*.09s); }
}

@media (prefers-reduced-motion: reduce){
  #audience .sl-flow .flow{ animation:none; opacity:0; } #audience .sl-node::after{ animation:none; opacity:0; } #audience .sl-src .dot, #audience .vsrc::before{ animation:none; } #audience .sl-radar .emit, #audience .sl-radar .sweep{ animation:none; } #audience .sl-radar .sweep{ opacity:0; } #audience .sl-vert .vflow{ animation:none; opacity:0; } #audience .vrow::before{ animation:none; }
}

/* ===================== #pricing (08 · форматы, 3 тарифа) ===================== */
#pricing { position: relative; max-width: var(--maxw); margin: 0 auto;
  padding: clamp(48px,9vh,104px) clamp(16px,4vw,40px) clamp(28px,5vh,56px) var(--content-pad-l); }
#pricing .head { position: relative; z-index: 1; }
#pricing h2 { margin: 18px 0 0; max-width: 18ch; font-size: clamp(28px,3.6vw,46px); font-weight: 800; letter-spacing: -.04em; line-height: 1.02; }
#pricing .sub { margin: 14px 0 0; max-width: 52ch; font-size: clamp(15px,1.4vw,17px); color: var(--muted); line-height: 1.55; }
#pricing .tiers { position: relative; z-index: 1; margin-top: clamp(34px,4.5vw,54px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
#pricing .tier { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: clamp(22px,2.2vw,28px); box-shadow: 0 18px 40px -30px rgba(12,13,11,.3); }
#pricing .tier.hot { background: radial-gradient(120% 90% at 80% 0%, #1c2412, #0c0d0b 75%); border-color: #2a3119; color: #fff; box-shadow: 0 40px 80px -36px rgba(12,16,5,.6); }
#pricing .tier.hot .num, #pricing .tier.hot .for { color: #aeb3a2; }
#pricing .badge { position: absolute; top: 18px; right: 18px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #1c2400; background: var(--acid); padding: 5px 11px; border-radius: 999px; }
#pricing .num { font-size: 12.5px; font-weight: 700; color: var(--subtle); letter-spacing: .04em; }
#pricing .tier h3 { margin: 14px 0 0; font-size: clamp(21px,2.1vw,25px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
#pricing .price { margin: 16px 0 0; display: flex; align-items: baseline; gap: 8px; }
#pricing .price b { font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
#pricing .price span { font-size: 13px; color: var(--subtle); }
#pricing .tier.hot .price span { color: #9aa08c; }
#pricing .for { margin: 14px 0 0; font-size: 14px; color: var(--muted); line-height: 1.5; min-height: 42px; }
#pricing .feat { list-style: none; margin: 18px 0 0; padding: 16px 0 0; display: grid; gap: 11px; border-top: 1px solid var(--line); }
#pricing .tier.hot .feat { border-color: rgba(255,255,255,.12); }
#pricing .feat li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.4; }
#pricing .feat .ck { width: 18px; height: 18px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--acid-wash); color: var(--acid-deep); margin-top: 1px; }
#pricing .tier.hot .feat .ck { background: rgba(163,204,0,.18); color: var(--acid); }
#pricing .feat .ck svg { width: 11px; height: 11px; }
#pricing .cta { margin-top: auto; height: 50px; border-radius: 13px; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 15px; cursor: pointer; transition: .18s; text-decoration: none; }
#pricing .feat + .cta { margin-top: clamp(20px,2.4vw,28px); }
#pricing .cta.dark { background: var(--ink); color: #fff; } #pricing .cta.dark:hover { transform: translateY(-1px); }
#pricing .cta.lime { background: var(--acid); color: #1c2400; box-shadow: 0 14px 30px -14px rgba(163,204,0,.7); } #pricing .cta.lime:hover { transform: translateY(-1px); }
#pricing .cta.ghost { background: transparent; border: 1px solid var(--line); color: var(--ink); } #pricing .cta.ghost:hover { border-color: #cfd2c6; }
#pricing .tier.hot .cta.ghost { border-color: rgba(255,255,255,.2); color: #fff; }
@media (min-width: 901px) { #pricing .tier.hot { transform: translateY(-12px); } }

/* ===== МОБАЙЛ: стопка карточек с наездом (без snap, свайп свободный) ===== */
@media (max-width: 900px) {
  #pricing .tiers { display: block; margin-top: clamp(24px,5vw,32px); padding-bottom: 40px; }
  #pricing .for { min-height: 0; }
  #pricing .tier { position: sticky; top: calc(70px + var(--i,0) * 14px); z-index: calc(var(--i,0) + 1); margin-top: 16px; }
  #pricing .tier:first-child { margin-top: 0; }
  #pricing .feat + .cta { margin-top: 20px; }
}

/* ===================== #faq (09 · вопросы + форма заявки) ===================== */
#faq { position: relative; max-width: var(--maxw); margin: 0 auto;
  padding: clamp(48px,9vh,104px) clamp(16px,4vw,40px) clamp(28px,5vh,56px) var(--content-pad-l); }
#faq .grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px,4vw,56px); align-items: start; }
#faq h2 { margin: 18px 0 0; max-width: 14ch; font-size: clamp(28px,3.6vw,46px); font-weight: 800; letter-spacing: -.04em; line-height: 1.02; }
#faq .faq { margin-top: clamp(26px,3vw,38px); display: grid; gap: 10px; }
#faq .qa { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
#faq .qa.open { border-color: #d4d7cb; box-shadow: 0 16px 34px -28px rgba(12,13,11,.3); }
#faq .q { width: 100%; display: flex; align-items: center; gap: 14px; text-align: left; background: none; border: 0; cursor: pointer; font-family: inherit; padding: 18px 20px; font-size: 16px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
#faq .q .pl { margin-left: auto; position: relative; width: 18px; height: 18px; flex: none; }
#faq .q .pl::before, #faq .q .pl::after { content: ""; position: absolute; background: var(--acid-deep); border-radius: 2px; transition: transform .25s ease, opacity .2s; }
#faq .q .pl::before { left: 0; top: 8px; width: 18px; height: 2px; } #faq .q .pl::after { left: 8px; top: 0; width: 2px; height: 18px; }
#faq .qa.open .q .pl::after { transform: scaleY(0); opacity: 0; }
#faq .a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
#faq .qa.open .a { grid-template-rows: 1fr; }
#faq .a > div { overflow: hidden; }
#faq .a p { margin: 0; padding: 0 20px 19px; font-size: 14.5px; color: var(--muted); line-height: 1.6; max-width: 52ch; }
#faq .form { background: linear-gradient(180deg, #f7faea, #fff 42%); border: 1px solid var(--line); border-radius: 22px; padding: clamp(24px,2.6vw,34px); box-shadow: 0 30px 60px -36px rgba(12,13,11,.34); }
#faq .form .fe { font-size: 11.5px; font-weight: 700; color: var(--acid-deep); letter-spacing: .1em; text-transform: uppercase; }
#faq .form h3 { margin: 12px 0 0; font-size: clamp(23px,2.7vw,34px); font-weight: 800; letter-spacing: -.035em; line-height: 1.08; }
#faq .form .fs { margin: 13px 0 0; font-size: 15px; color: var(--muted); line-height: 1.55; }
#faq .fields { margin-top: 22px; display: grid; gap: 11px; }
#faq .fld { width: 100%; height: 50px; border: 1px solid var(--line); border-radius: 12px; padding: 0 15px; font-family: inherit; font-size: 15px; color: var(--ink); background: var(--surface); outline: none; transition: border-color .15s, box-shadow .15s; }
#faq .fld:focus { border-color: var(--acid); box-shadow: 0 0 0 3px rgba(163,204,0,.16); }
#faq .fld::placeholder { color: var(--subtle); }
#faq .ch-lbl { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
#faq .channels { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
#faq .chp { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; transition: .15s; font-family: inherit; }
#faq .chp:hover { border-color: #cfd2c6; }
#faq .chp.on { background: var(--ink); border-color: var(--ink); color: #fff; }
#faq .chp .cd { width: 7px; height: 7px; border-radius: 50%; background: var(--acid); }
#faq .submit { margin-top: 6px; height: 54px; border: 0; border-radius: 13px; background: var(--ink); color: #fff; font-family: inherit; font-weight: 700; font-size: 15.5px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 9px; transition: transform .15s, opacity .15s; }
#faq .submit:hover { transform: translateY(-1px); }
#faq .submit:disabled { opacity: .42; cursor: not-allowed; transform: none; }
#faq .submit svg { width: 16px; height: 16px; }
#faq .consent { display: flex; align-items: flex-start; gap: 9px; margin-top: 2px; font-size: 12.5px; color: var(--muted); line-height: 1.45; cursor: pointer; }
#faq .consent input { margin: 1px 0 0; width: 16px; height: 16px; accent-color: var(--acid); flex: none; cursor: pointer; }
#faq .consent a { color: var(--acid-deep); font-weight: 700; text-decoration: none; }
#faq .consent a:hover { text-decoration: underline; }
#faq .fnote { margin-top: 14px; font-size: 12.5px; color: var(--subtle); line-height: 1.5; }
#faq .done { display: none; margin-top: 22px; padding: 18px; border-radius: 14px; background: var(--acid-wash); border: 1px solid rgba(83,104,0,.25); color: var(--acid-deep); font-weight: 700; font-size: 14.5px; }
#faq .done.show { display: block; }
@media (max-width: 920px) {
  #faq { padding-left: clamp(16px,4vw,40px); padding-right: clamp(16px,4vw,40px);
         padding-top: clamp(34px,7vh,56px); padding-bottom: clamp(28px,5vh,44px); }
  #faq .grid { grid-template-columns: 1fr; gap: 30px; }
  #faq h2 { max-width: none; font-size: clamp(26px,6.4vw,34px); }
  #faq .faq { margin-top: 20px; gap: 8px; }
  #faq .q { padding: 14px 16px; font-size: 15px; gap: 12px; }
  #faq .q .pl { width: 16px; height: 16px; }
  #faq .q .pl::before { top: 7px; width: 16px; }
  #faq .q .pl::after { left: 7px; height: 16px; }
  #faq .a p { padding: 0 16px 15px; font-size: 14px; }
  #faq .form { padding: clamp(20px,5vw,26px); border-radius: 18px; box-shadow: 0 20px 44px -34px rgba(12,13,11,.32); }
  #faq .form h3 { font-size: clamp(22px,6vw,27px); }
  #faq .form .fs { font-size: 14.5px; }
  #faq .fields { margin-top: 18px; gap: 10px; }
  #faq .fld { height: 48px; }
  #faq .channels { gap: 6px; }
  #faq .chp { padding: 7px 12px; font-size: 12.5px; }
  #faq .submit { height: 50px; }
}

/* ===================== #cta (10 · финальный CTA) ===================== */
#cta { position: relative; min-height: 88vh; display: grid; place-items: center; max-width: var(--maxw); margin: 0 auto;
  padding: clamp(60px,12vh,150px) clamp(20px,4vw,40px) clamp(60px,12vh,150px) var(--content-pad-l); }
#cta .wrap { position: relative; z-index: 1; text-align: center; max-width: 880px; }
#cta h2 { margin: 22px 0 0; font-size: clamp(36px,6.4vw,76px); font-weight: 800; letter-spacing: -.045em; line-height: .98; }
#cta h2 .sep { color: var(--acid); margin: 0 .12em; }
#cta .sub { margin: 18px auto 0; max-width: 40ch; font-size: clamp(15px,1.5vw,18px); color: var(--muted); line-height: 1.5; }
#cta .core { position: relative; margin-top: clamp(38px,6vh,60px); display: inline-grid; place-items: center; }
#cta .core .rings { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
#cta .core .rings i { position: absolute; width: 100%; height: 100%; border-radius: 999px; border: 1.5px solid rgba(163,204,0,.45); animation: cta-bloom 3.6s ease-out infinite; }
#cta .core .rings i:nth-child(2) { animation-delay: 1.2s; } #cta .core .rings i:nth-child(3) { animation-delay: 2.4s; }
@keyframes cta-bloom { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(6.5); opacity: 0; } }
#cta .core .halo { position: absolute; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(closest-side, rgba(163,204,0,.22), transparent 72%); filter: blur(6px); animation: cta-breathe 3.6s ease-in-out infinite; }
@keyframes cta-breathe { 50% { transform: scale(1.18); } }
#cta .btn-cta { position: relative; overflow: hidden; z-index: 2; display: inline-flex; align-items: center; gap: 11px; height: 62px; padding: 0 32px; border-radius: 16px; background: linear-gradient(180deg,#b4dd1f,#9bc400); color: #16200a; font-size: 17.5px; font-weight: 800; letter-spacing: -.01em; text-decoration: none; cursor: pointer; box-shadow: 0 20px 46px -16px rgba(120,160,0,.9), inset 0 1px 0 rgba(255,255,255,.5); transition: transform .18s, box-shadow .3s; }
#cta .btn-cta:hover { transform: translateY(-2px); box-shadow: 0 0 0 8px rgba(163,204,0,.14), 0 26px 56px -16px rgba(120,160,0,1), inset 0 1px 0 rgba(255,255,255,.5); }
#cta .btn-cta .glint { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 38%, rgba(255,255,255,.6) 50%, transparent 62%); transform: translateX(-130%); pointer-events: none; }
#cta .btn-cta:hover .glint { transition: transform .9s ease; transform: translateX(130%); }
#cta .btn-cta svg { width: 18px; height: 18px; position: relative; }
@media (max-width: 720px) {
  #cta { min-height: auto; padding-top: clamp(52px,11vh,96px); padding-bottom: clamp(52px,11vh,96px); padding-left: clamp(20px,4vw,40px); padding-right: clamp(20px,4vw,40px); }
  #cta .core { margin-top: clamp(30px,5vh,44px); }
  #cta .btn-cta { height: 56px; padding: 0 24px; font-size: 16px; gap: 9px; }
  #cta .core .halo { width: 200px; height: 200px; }
}
@media (max-width: 600px) { #cta .core .rings i { animation-name: cta-bloomS; } @keyframes cta-bloomS { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(4.5); opacity: 0; } } }
@media (prefers-reduced-motion: reduce) { #cta .core .rings i, #cta .core .halo { animation: none; } }

/* ===================== #footer (11 · футер) ===================== */
#footer { position: relative; border-top: 1px solid var(--line);
  background: linear-gradient(rgba(12,13,11,.015) 1px, transparent 1px), linear-gradient(90deg, rgba(12,13,11,.015) 1px, transparent 1px), var(--page);
  background-size: 58px 58px, 58px 58px, auto; }
#footer .term { position: absolute; left: var(--spine-x); top: -1px; width: 9px; height: 9px; border-radius: 2px; background: var(--acid); border: 1.5px solid rgba(120,160,0,.6); transform: translate(calc(-50% + 1px), -50%); }
#footer .term::after { content: ""; position: absolute; inset: -4px; border-radius: 4px; border: 1px solid rgba(163,204,0,.5); animation: foot-ripple 3.2s ease-out infinite; }
@keyframes foot-ripple { 0% { transform: scale(.55); opacity: .85; } 100% { transform: scale(2); opacity: 0; } }
#footer .wrap { max-width: var(--maxw); margin: 0 auto; padding: clamp(44px,6vw,72px) clamp(20px,4vw,40px) 0 var(--content-pad-l); }
#footer .top { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: clamp(28px,4vw,56px); }
#footer .brand .mark { display: inline-flex; align-items: center; gap: 11px; }
#footer .brand .mark svg { width: 32px; height: 32px; color: var(--ink); }
#footer .brand .mark b { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
#footer .brand p { margin: 16px 0 0; max-width: 34ch; font-size: 14.5px; color: var(--muted); line-height: 1.55; }
#footer .brand .by { margin: 16px 0 0; font-size: 12.5px; color: var(--subtle); }
#footer .brand .by a { color: var(--acid-deep); font-weight: 700; text-decoration: none; }
#footer .col h4 { margin: 0 0 14px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--subtle); }
#footer .col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
#footer .col a { font-size: 14.5px; color: var(--ink); text-decoration: none; transition: color .15s; }
#footer .col a:hover { color: var(--acid-deep); }
#footer .contacts .ch { display: grid; gap: 10px; }
#footer .contacts .ch a { display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--ink); text-decoration: none; }
#footer .contacts .ic { width: 32px; height: 32px; border-radius: 9px; flex: none; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); color: var(--ink); transition: .15s; }
#footer .contacts .ch a:hover .ic { border-color: var(--acid); color: var(--acid-deep); }
#footer .contacts .ic svg { width: 16px; height: 16px; }
#footer .contacts .hint { margin-top: 14px; font-size: 12.5px; color: var(--subtle); line-height: 1.5; }
#footer .bottom { margin-top: clamp(38px,5vw,60px); border-top: 1px solid var(--line); padding: 20px 0 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
#footer .bottom .cp { font-size: 12.5px; color: var(--subtle); }
#footer .bottom .legal { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px 18px; }
#footer .bottom .legal a { font-size: 12.5px; color: var(--muted); text-decoration: none; }
#footer .bottom .legal a:hover { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { #footer .term::after { animation: none; } }
@media (max-width: 860px) { #footer .top { grid-template-columns: 1fr 1fr; } #footer .brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { #footer .top { grid-template-columns: 1fr; } #footer .bottom .legal { margin-left: 0; } }

/* ===== Финальный лок-ап бренда (режим Скан), Arcade-style: обрезка низа за краем страницы ===== */
#footer .finale { position: relative; z-index: 1; overflow: hidden; max-width: var(--maxw);
  margin: clamp(-30px,-2.6vw,-18px) auto 0;            /* подтянуть вплотную под копирайт */
  padding: clamp(8px,1.4vw,16px) clamp(20px,4vw,44px) 0; /* маленький верхний зазор, низ 0 */
  --lh: clamp(72px, 15.5vw, 270px);                    /* натуральная высота лок-апа */
  height: calc(clamp(8px,1.4vw,16px) + var(--lh) * 0.6); /* контейнер ниже натурального -> низ букв за краем */ }
#footer .finale .lockup { display: flex; justify-content: center; align-items: center; gap: clamp(16px,2vw,40px); }
#footer .finale .mark { flex: none; width: var(--lh); height: auto; }
#footer .finale .mark path { fill: var(--mk); }
#footer .finale .mark .dot { fill: var(--dot); }
#footer .finale .word { font-weight: 800; letter-spacing: -.05em; line-height: 1; white-space: nowrap; font-size: var(--lh); user-select: none;
  color: transparent; background: linear-gradient(100deg, var(--mk) 40%, rgba(163,204,0,.5) 50%, var(--mk) 60%);
  background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; animation: footer-scan 7s linear infinite; }
@keyframes footer-scan { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { #footer .finale .word { animation: none; background-position: 50% 0; } }
@media (max-width: 480px) { #footer .finale { --lh: clamp(54px, 15vw, 80px); } }

/* ===================== #cookie (баннер согласия) ===================== */
#cookie { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); width: min(960px, calc(100% - 32px)); z-index: 60;
  display: none; align-items: center; gap: 18px; padding: 16px 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 30px 60px -24px rgba(12,13,11,.4); }
#cookie.show { display: flex; animation: ck-rise .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes ck-rise { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
#cookie .ck-ic { width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center; background: var(--acid-wash); color: var(--acid-deep); border: 1px solid rgba(83,104,0,.18); }
#cookie .ck-ic svg { width: 22px; height: 22px; }
#cookie .ck-txt { font-size: 13.5px; color: var(--muted); line-height: 1.5; flex: 1; min-width: 0; }
#cookie .ck-txt a { color: var(--acid-deep); font-weight: 700; text-decoration: none; }
#cookie .ck-txt a:hover { text-decoration: underline; }
#cookie .ck-btns { display: flex; gap: 9px; flex: none; }
#cookie .ck-b { height: 42px; padding: 0 18px; border-radius: 11px; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; border: 1px solid var(--line); background: var(--surface); color: var(--ink); transition: .15s; white-space: nowrap; }
#cookie .ck-b:hover { border-color: #cfd2c6; }
#cookie .ck-b.primary { background: var(--acid); border-color: var(--acid); color: #16200a; box-shadow: 0 12px 26px -14px rgba(163,204,0,.7); }
#cookie .ck-b.primary:hover { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { #cookie.show { animation: none; } }
@media (max-width: 680px) {
  #cookie { flex-direction: column; align-items: stretch; gap: 14px; bottom: 12px; }
  #cookie .ck-top { display: flex; gap: 14px; align-items: center; }
  #cookie .ck-btns { width: 100%; } #cookie .ck-b { flex: 1; }
}

/* ===================== Юридические страницы (privacy / offer) ===================== */
.legal-doc { max-width: 820px; margin: 0 auto; padding: clamp(40px,7vw,90px) clamp(20px,4vw,40px) clamp(60px,9vw,120px); }
.legal-doc .back { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; margin-bottom: 28px; }
.legal-doc .back:hover { color: var(--ink); }
.legal-doc h1 { font-size: clamp(28px,4vw,42px); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; margin: 0 0 8px; }
.legal-doc .draft { display: inline-block; margin: 6px 0 26px; padding: 8px 13px; border-radius: 10px; background: var(--acid-wash); border: 1px solid rgba(83,104,0,.22); color: var(--acid-deep); font-size: 12.5px; font-weight: 600; }
.legal-doc h2 { font-size: clamp(18px,2.2vw,23px); font-weight: 800; letter-spacing: -.02em; margin: 34px 0 10px; }
.legal-doc p, .legal-doc li { font-size: 15px; color: var(--ink-soft); line-height: 1.65; }
.legal-doc ul { padding-left: 20px; margin: 8px 0; }
.legal-doc li { margin: 4px 0; }

/* ---------- Доступность: глобальное глушение анимаций ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* ============================================================
   § 07 · На ходу — мобильная версия продукта (#mobile)
   Изолированная секция: всё под скоупом #mobile, классы/id/keyframes
   с префиксом mb-. Переиспользуем глобальные .seam .kicker .sub.
   Сквозную линию даёт глобальный .signal. Локальные --mb-* токены ниже.
   ============================================================ */
#mobile { --mb-screen:#fff; --mb-soft:#f6f7f3; --mb-ok:#5a8a00; --mb-e:cubic-bezier(.22,1,.36,1); --mb-k:.83;
  position: relative; max-width: var(--maxw); margin: 0 auto;
  padding: clamp(48px,9vh,104px) clamp(16px,4vw,40px) clamp(28px,5vh,56px) var(--content-pad-l); }

#mobile .mb-sect { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 388px; gap: clamp(30px,5vw,80px); align-items: center; }
#mobile .mb-copy { min-width: 0; }
#mobile h2 { margin: 14px 0 0; max-width: 15ch; font-size: clamp(30px,4vw,48px); font-weight: 800; letter-spacing: -.035em; line-height: 1.04; }
#mobile .mb-copy .sub { margin-top: 16px; max-width: 42ch; }
#mobile .mb-bul { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 15px; }
#mobile .mb-bul li { display: flex; align-items: flex-start; gap: 12px; font-size: 15.5px; line-height: 1.4; }
#mobile .mb-i { width: 26px; height: 26px; border-radius: 8px; background: rgba(163,204,0,.13); border: 1px solid rgba(163,204,0,.28); display: grid; place-items: center; flex: none; color: var(--acid-deep); margin-top: 1px; }
#mobile .mb-i svg { width: 15px; height: 15px; }

#mobile .mb-stage { position: relative; display: flex; justify-content: center; }
#mobile .mb-halo { position: absolute; width: 120%; height: 74%; top: 13%; left: -10%; background: radial-gradient(circle at 60% 50%, rgba(163,204,0,.13), transparent 70%); z-index: 0; animation: mb-halo 5s ease-in-out infinite; }
@keyframes mb-halo { 0%,100% { opacity: .7; } 50% { opacity: 1; } }

#mobile .mb-phone { position: relative; width: 344px; height: 716px; border-radius: 54px; flex: none; z-index: 1; background: linear-gradient(150deg,#2c2e2a,#0c0e0a 55%); padding: 10px; box-shadow: 0 60px 120px -50px rgba(12,13,11,.7), inset 0 0 0 2px rgba(255,255,255,.05);
  /* пропорциональное уменьшение макета (корпус, скругления, островок, шрифты — всё через единый масштаб); margin компенсирует освобождённую высоту, чтобы секция стала ниже и телефон влезал целиком */
  transform: scale(var(--mb-k)); transform-origin: top center; margin-bottom: calc(716px * (var(--mb-k) - 1)); }
#mobile .mb-pwr { position: absolute; right: -2px; top: 150px; width: 3px; height: 64px; border-radius: 2px; background: #23241f; }
#mobile .mb-vol { position: absolute; left: -2px; top: 128px; width: 3px; height: 38px; border-radius: 2px; background: #23241f; box-shadow: 0 56px 0 #23241f, 0 104px 0 #23241f; }
#mobile .mb-screen { position: relative; width: 100%; height: 100%; border-radius: 45px; overflow: hidden; background: var(--mb-screen); display: flex; flex-direction: column; }
#mobile .mb-island { position: absolute; top: 13px; left: 50%; transform: translateX(-50%); width: 108px; height: 30px; background: #000; border-radius: 16px; z-index: 30; }
#mobile .mb-status { height: 46px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px 0 26px; font-size: 13.5px; font-weight: 600; flex: none; }
#mobile .mb-status .mb-r { display: flex; align-items: center; gap: 6px; }
#mobile .mb-status .mb-5g { font: 800 11.5px var(--font); letter-spacing: .01em; color: #0c0d0b; }
#mobile .mb-sbar { display: flex; align-items: center; gap: 9px; padding: 2px 13px 9px; flex: none; }
#mobile .mb-sbar .mb-mn, #mobile .mb-sbar .mb-re { color: var(--muted); flex: none; }
#mobile .mb-sbar .mb-url { flex: 1; height: 36px; background: var(--mb-soft); border-radius: 11px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13.5px; }
#mobile .mb-sbar .mb-url .mb-lock { width: 11px; height: 11px; color: var(--subtle); }
#mobile .mb-sbar .mb-url .mb-a { color: var(--ink); font-weight: 600; }
#mobile .mb-sbar .mb-url .mb-a i { color: var(--muted); font-style: normal; }
/* статус-бар и адресная строка над оверлеем «Отправлено» (z-index:28), но под островком (z-index:30) */
#mobile .mb-status,
#mobile .mb-sbar { position: relative; z-index: 29; }

#mobile .mb-scr { position: relative; flex: 1; overflow: hidden; padding: 0 13px; }

#mobile .mb-scan { position: absolute; inset: 0 13px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; z-index: 15; opacity: 0; transition: opacity .5s; background: var(--mb-screen); }
#mobile .mb-scan.on { opacity: 1; }
#mobile .mb-radar { position: relative; width: 150px; height: 150px; border-radius: 50%; border: 1px solid rgba(12,13,11,.08); }
#mobile .mb-radar::before, #mobile .mb-radar::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(12,13,11,.07); }
#mobile .mb-radar::before { inset: 24px; }
#mobile .mb-radar::after { inset: 50px; }
#mobile .mb-sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(163,204,0,.35), transparent 28%); animation: mb-spin 1.6s linear infinite; }
#mobile .mb-core { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--acid); transform: translate(-50%,-50%); box-shadow: 0 0 12px 3px rgba(163,204,0,.7); }
#mobile .mb-blip { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: rgba(12,13,11,.3); }
#mobile .mb-b1 { left: 32%; top: 30%; }
#mobile .mb-b2 { left: 70%; top: 60%; }
#mobile .mb-b3 { left: 60%; top: 24%; }
#mobile .mb-lbl { font: 600 12.5px var(--mono); color: var(--muted); display: flex; align-items: center; gap: 8px; }
#mobile .mb-lbl .mb-d { width: 7px; height: 7px; border-radius: 50%; background: var(--acid); animation: mb-blink 1s ease-in-out infinite; }
@keyframes mb-spin { to { transform: rotate(360deg); } }
@keyframes mb-blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

#mobile .mb-push { background: #0c0e0a; color: #fff; border-radius: 16px; padding: 12px 14px; display: flex; align-items: flex-start; gap: 11px; opacity: 0; transform: translateY(-20px) scale(.96); transition: opacity .45s var(--mb-e), transform .55s var(--mb-e); box-shadow: 0 16px 30px -18px rgba(12,13,11,.8); }
#mobile .mb-push.in { opacity: 1; transform: none; }
#mobile .mb-push .mb-ic { width: 28px; height: 28px; border-radius: 8px; background: rgba(163,204,0,.16); display: grid; place-items: center; flex: none; }
#mobile .mb-push .mb-ic .mb-d { width: 8px; height: 8px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 8px var(--acid); }
#mobile .mb-push.in .mb-ic .mb-d { animation: mb-ping 1.2s ease-out 2; }
@keyframes mb-ping { 0% { box-shadow: 0 0 0 0 rgba(163,204,0,.6); } 100% { box-shadow: 0 0 0 9px rgba(163,204,0,0); } }
#mobile .mb-push .mb-t b { font-weight: 700; font-size: 13.5px; }
#mobile .mb-push .mb-t div { color: rgba(255,255,255,.62); font-size: 12.5px; margin-top: 2px; }
#mobile .mb-push .mb-now { margin-left: auto; font: 500 11px var(--mono); color: rgba(255,255,255,.5); }

#mobile .mb-card { margin-top: 12px; opacity: 1; transform: none; transition: opacity .6s var(--mb-e), filter .6s var(--mb-e); }
#mobile .mb-co { display: flex; align-items: flex-start; gap: 12px; }
#mobile .mb-co .mb-logo { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg,#e3ead0,#c2d897); display: grid; place-items: center; color: var(--acid-deep); font-weight: 800; font-size: 17px; flex: none; }
#mobile .mb-co .mb-nm { font-weight: 800; font-size: 18px; letter-spacing: -.025em; }
#mobile .mb-co .mb-seg { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
#mobile .mb-co .mb-src { font: 500 10px var(--mono); color: var(--subtle); margin-top: 3px; }
#mobile .mb-ring { margin-left: auto; position: relative; width: 54px; height: 54px; flex: none; }
#mobile .mb-ring svg { transform: rotate(-90deg); }
#mobile .mb-ring .mb-track { stroke: var(--line); }
#mobile .mb-ring .mb-val { stroke: var(--acid); stroke-linecap: round; stroke-dasharray: 0 100; transition: stroke-dasharray 1.2s var(--mb-e); }
#mobile .mb-ring .mb-val.fill { stroke-dasharray: 92 100; }
#mobile .mb-ring .mb-num { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; font-size: 16px; color: var(--acid-deep); }

#mobile .mb-hr { height: 1px; background: var(--line); margin: 13px 0; }
#mobile .mb-seg-anim { opacity: 1; transform: none; }
#mobile .mb-s .mb-h { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13.5px; }
#mobile .mb-s .mb-h svg { width: 16px; height: 16px; color: var(--subtle); }
#mobile .mb-s p { margin: 7px 0 0; font-size: 12.5px; line-height: 1.5; }
#mobile .mb-s p b { color: var(--acid-deep); }
#mobile .mb-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 10px; }
#mobile .mb-tag { font-size: 11px; color: var(--muted); background: var(--mb-soft); border: 1px solid var(--line); border-radius: 999px; padding: 4px 9px; }
#mobile .mb-tag.on { color: var(--acid-deep); background: rgba(163,204,0,.1); border-color: rgba(163,204,0,.3); }
#mobile .mb-draft .mb-dtop { display: flex; align-items: center; justify-content: space-between; }
#mobile .mb-draft .mb-badge { font: 600 9.5px var(--mono); color: var(--acid-deep); background: rgba(163,204,0,.13); border-radius: 6px; padding: 3px 7px; text-transform: uppercase; letter-spacing: .05em; }
#mobile .mb-draft .mb-msg { font-size: 12.5px; line-height: 1.5; margin-top: 7px; min-height: 54px; }
#mobile .mb-draft .mb-msg .mb-cur { display: none; width: 1.5px; height: 13px; background: var(--acid); vertical-align: -2px; margin-left: 1px; animation: mb-caret .8s step-end infinite; }
@keyframes mb-caret { 50% { opacity: 0; } }

#mobile .mb-action { position: relative; flex: none; padding: 9px 13px; transition: opacity .6s var(--mb-e), filter .6s var(--mb-e); }
#mobile .mb-action .mb-primary { position: relative; overflow: hidden; width: 100%; height: 46px; border: 0; border-radius: 13px; background: var(--acid); color: #0c0e0a; font: 700 14px var(--font); display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform .14s; }
#mobile .mb-action .mb-primary.press { transform: scale(.96); }
#mobile .mb-action .mb-primary .mb-glint { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 38%, rgba(255,255,255,.6) 50%, transparent 62%); transform: translateX(-130%); }
#mobile .mb-action .mb-primary .mb-glint.go { transition: transform .9s ease; transform: translateX(130%); }
#mobile .mb-action .mb-ripple { position: absolute; left: 50%; top: 32px; width: 10px; height: 10px; border-radius: 50%; background: rgba(12,13,11,.25); transform: translate(-50%,-50%) scale(0); opacity: 0; }
#mobile .mb-action .mb-ripple.go { animation: mb-rip .6s ease-out; }
@keyframes mb-rip { 0% { transform: translate(-50%,-50%) scale(0); opacity: .5; } 100% { transform: translate(-50%,-50%) scale(9); opacity: 0; } }
#mobile .mb-action .mb-safe { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; color: var(--subtle); font-size: 11px; text-align: center; }
#mobile .mb-action .mb-safe svg { width: 12px; height: 12px; color: var(--mb-ok); flex: none; }

#mobile .mb-tbar { flex: none; height: 46px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; color: #9a9c94; transition: opacity .6s var(--mb-e), filter .6s var(--mb-e); }
#mobile .mb-tbar svg { width: 21px; height: 21px; }
/* приглушение интерфейса (карточка + кнопка + таб-бар); уведомление НЕ глушим */
#mobile .mb-screen.mb-dim .mb-card,
#mobile .mb-screen.mb-dim .mb-action,
#mobile .mb-screen.mb-dim .mb-tbar { opacity: .32; filter: saturate(.5); }
/* во время сканирования снизу пусто (правило ПОСЛЕ приглушения, чтобы выигрывало) */
#mobile .mb-screen.mb-scanning .mb-action,
#mobile .mb-screen.mb-scanning .mb-tbar { opacity: 0 !important; pointer-events: none; }
#mobile .mb-tbar .mb-dis { opacity: .4; }
#mobile .mb-tbar .mb-tabs { width: 19px; height: 19px; border: 2px solid currentColor; border-radius: 5px; display: grid; place-items: center; font: 700 9px var(--font); }
#mobile .mb-home { height: 22px; display: flex; align-items: center; justify-content: center; flex: none; }
#mobile .mb-home::after { content: ""; width: 124px; height: 5px; border-radius: 3px; background: rgba(12,13,11,.22); }

#mobile .mb-sent { position: absolute; inset: 0; background: rgba(255,255,255,.9); backdrop-filter: blur(3px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; z-index: 28; opacity: 0; pointer-events: none; transition: opacity .4s; }
#mobile .mb-sent.show { opacity: 1; }
#mobile .mb-sent .mb-ok { width: 66px; height: 66px; }
#mobile .mb-sent .mb-ok circle { fill: none; stroke: var(--acid); stroke-width: 3; stroke-dasharray: 201; stroke-dashoffset: 201; }
#mobile .mb-sent .mb-ok path { fill: none; stroke: var(--acid); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; }
#mobile .mb-sent.show .mb-ok circle { animation: mb-draw .5s var(--mb-e) forwards; }
#mobile .mb-sent.show .mb-ok path { animation: mb-draw .4s var(--mb-e) .35s forwards; }
@keyframes mb-draw { to { stroke-dashoffset: 0; } }
#mobile .mb-sent .mb-tt { font-weight: 800; font-size: 17px; opacity: 0; transform: translateY(6px); }
#mobile .mb-sent.show .mb-tt { animation: mb-up .4s var(--mb-e) .5s forwards; }
#mobile .mb-sent .mb-ss { font-size: 12px; color: var(--muted); margin-top: -8px; opacity: 0; }
#mobile .mb-sent.show .mb-ss { animation: mb-up .4s var(--mb-e) .65s forwards; }
@keyframes mb-up { to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  #mobile .mb-sect { grid-template-columns: 1fr; gap: 36px; }
  #mobile .mb-copy { padding-left: 0; }
}
/* <760px рейка/узел скрыты глобально — убираем резерв под рейку, центрируем телефон */
@media (max-width: 760px) {
  #mobile { padding-left: clamp(16px,4vw,40px); }
  #mobile .mb-phone { max-width: 100%; }
}
@media (max-width: 560px) {
  #mobile { --mb-k: .9; }  /* телефон чуть крупнее на узких экранах */
}
@media (prefers-reduced-motion: reduce) {
  #mobile .mb-scan { display: none; }
  #mobile .mb-screen.mb-dim .mb-card, #mobile .mb-screen.mb-dim .mb-action, #mobile .mb-screen.mb-dim .mb-tbar { opacity: 1; filter: none; }
  #mobile .mb-push { opacity: 1; transform: none; }
  #mobile .mb-ring .mb-val { stroke-dasharray: 92 100 !important; }
  #mobile .mb-sent, #mobile .mb-action .mb-primary .mb-glint, #mobile .mb-draft .mb-msg .mb-cur { display: none; }
  #mobile .mb-halo { animation: none; }
}

/* Перф: непрерывные декоративные анимации ставятся на паузу, когда секция вне экрана.
   В зоне видимости визуал идентичен (класс снимается до появления). */
.anim-off, .anim-off *, .anim-off *::before, .anim-off *::after { animation-play-state: paused !important; }

/* ===== Стартовое интро (радар) ===== */
.intro{ position:fixed; inset:0; z-index:9999; display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(120% 100% at 50% 42%, #1a2113, #0b0e08 72%); color:#fff;
  animation:introOut .6s cubic-bezier(.22,1,.36,1) 2.15s forwards; }
@keyframes introOut{ to{ opacity:0; visibility:hidden; pointer-events:none; } }
.intro .radar{ position:relative; width:clamp(140px,42vw,168px); aspect-ratio:1; display:grid; place-items:center; }
.intro .ring{ position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.12); opacity:0; animation:introFade .3s cubic-bezier(.22,1,.36,1) forwards; }
.intro .ring.a{ inset:0; } .intro .ring.b{ inset:18%; animation-delay:.06s; } .intro .ring.c{ inset:37%; animation-delay:.12s; }
.intro .cross{ position:absolute; inset:0; opacity:0; animation:introFade .3s cubic-bezier(.22,1,.36,1) .1s forwards; }
.intro .cross::before,.intro .cross::after{ content:""; position:absolute; background:rgba(255,255,255,.1); }
.intro .cross::before{ left:50%; top:0; bottom:0; width:1px; } .intro .cross::after{ top:50%; left:0; right:0; height:1px; }
.intro .sweep{ position:absolute; inset:0; border-radius:50%; opacity:0;
  background:conic-gradient(from 0deg, rgba(163,204,0,.5), rgba(163,204,0,.05) 24%, transparent 42%);
  -webkit-mask:radial-gradient(circle,#000 99%,transparent 100%); mask:radial-gradient(circle,#000 99%,transparent 100%);
  animation:introSweep 1.05s linear .15s 1 forwards; }
.intro .core{ position:absolute; width:9px; height:9px; border-radius:50%; background:var(--acid); box-shadow:0 0 12px 3px rgba(163,204,0,.7); opacity:0; animation:introFade .3s ease .2s forwards; }
.intro .blip{ position:absolute; width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.35); opacity:0; animation:introFade .3s ease .5s forwards; }
.intro .blip.b1{ left:34%; top:32%; } .intro .blip.b2{ left:66%; top:62%; }
.intro .blip.hit{ background:var(--acid); box-shadow:0 0 12px 2px rgba(163,204,0,.9); left:62%; top:36%; animation:introHit .5s cubic-bezier(.22,1,.36,1) .68s forwards; }
.intro .lbl{ position:absolute; bottom:18%; font:600 12px var(--mono); color:rgba(255,255,255,.55); letter-spacing:.05em; opacity:0; animation:introLbl 1.35s cubic-bezier(.22,1,.36,1) .2s forwards; }
.intro .radar{ animation:introRadarOut .5s cubic-bezier(.22,1,.36,1) 1.3s forwards; }
.intro .reveal{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:14px; opacity:0; animation:introRevealIn .55s cubic-bezier(.22,1,.36,1) 1.4s forwards; }
.intro .reveal .logo svg{ display:block; color:#fff; width:clamp(40px,9vw,52px); height:auto; }
.intro .reveal .word{ font:800 clamp(28px,7vw,38px) var(--font); letter-spacing:-.03em; color:#fff; }
@keyframes introFade{ to{ opacity:1; } }
@keyframes introSweep{ 0%{ opacity:1; transform:rotate(0);} 90%{ opacity:1;} 100%{ opacity:0; transform:rotate(740deg);} }
@keyframes introHit{ 0%{ opacity:0; transform:scale(.4);} 40%{ opacity:1; transform:scale(1.5);} 100%{ opacity:1; transform:scale(1);} }
@keyframes introLbl{ 0%{opacity:0} 18%{opacity:1} 82%{opacity:1} 100%{opacity:0} }
@keyframes introRadarOut{ to{ opacity:0; transform:scale(.86);} }
@keyframes introRevealIn{ from{ opacity:0; transform:translateY(8px) scale(.96);} to{ opacity:1; transform:none;} }
body.intro-seen .intro{ display:none; }
@media (prefers-reduced-motion: reduce){ .intro{ display:none; } }