/* ═══════════════════════════════════════════════════════════════
   Отклик 3 — лендинг · визуальный слой v3
   Подключается ПОВЕРХ style.css (шапка, кнопки, модалки, футер оттуда).
   Принципы те же, что в кабинете: графит + песочно-оранжевый, спокойные
   матовые поверхности, стекло — только для плавающих слоёв, движение
   короткое. Устройства (MacBook/iPhone) — чистый CSS, экраны — живая
   вёрстка интерфейса (не картинки): чётко на любом экране, анимируется.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --g-bg: #ECF1F4;
  --g-surface: #FFFFFF;
  --g-surface-2: #F6F9FB;
  --g-line: #D6E0E6;
  --g-ink: #25343F;
  --g-ink-2: #5A7282;
  --g-ink-3: #90A8B5;
  --g-ok: #3CB879;
  --g-warn: #F5A623;
  --g-bad: #E84040;
  --g-info: #4A9DDE;
  --g-violet: #9B8EC4;
  --rail: #1B2530;
  --r-sm: 12px; --r: 18px; --r-lg: 24px; --r-xl: 32px;
  --sh: 0 1px 2px rgb(37 52 63 / .05), 0 14px 36px -16px rgb(37 52 63 / .22);
  --sh-float: 0 2px 6px rgb(37 52 63 / .06), 0 24px 60px -20px rgb(37 52 63 / .35);
  --ease: cubic-bezier(.2, .8, .2, 1);
}

body.v3 { background: var(--g-bg); color: var(--g-ink); overflow-x: clip; }
body.v3 .section { padding: clamp(60px, 7vw, 96px) 0; }
body.v3 .section-head { margin-bottom: 44px; }
body.v3 .section.on-light { background: var(--g-bg); }
body.v3 .section.on-paper { background: var(--g-surface); }
body.v3 .section.on-dark { background: linear-gradient(170deg, #1B2530 0%, #1F2C38 55%, #25343F 100%); color: #fff; }
body.v3 .section-head { max-width: 760px; }
body.v3 .section-head p { color: var(--g-ink-2); }
body.v3 .on-dark .section-head p { color: rgba(255,255,255,.62); }
body.v3 .h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); letter-spacing: -.03em; line-height: 1.08; }
body.v3 .lead { color: var(--g-ink-2); }
body.v3 .on-dark .lead { color: rgba(255,255,255,.66); }
body.v3 .eyebrow { color: var(--g-ink-2); }
body.v3 .on-dark .eyebrow { color: rgba(255,255,255,.55); }
.hide-m { }
.lead-s, .br-m { display: none; }
body.v3 .btn-ghost { background: rgba(255,255,255,.7); border-color: var(--g-line); color: var(--g-ink); backdrop-filter: blur(10px); }
body.v3 .on-dark .btn-ghost, body.v3 .btn-ghost.on-dark { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: #fff; }
body.v3 .btn-ghost.on-dark:hover { border-color: rgba(240,162,98,.7); color: #fff; }
body.v3 .container { max-width: 1200px; }
.wide { max-width: 1360px; margin: 0 auto; padding: 0 24px; }
.accent { color: #F0A262; }
.muted { color: var(--g-ink-2); }

/* шапка на v3: светлое стекло поверх светлых секций, тёмное — поверх тёмных */
body.v3 .site-header { background: rgba(27, 37, 48, .72); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); border-bottom-color: rgba(255,255,255,.06); }
body.v3 .header-cta { display: flex; gap: 8px; align-items: center; }
body.v3 .header-cta .btn-primary { padding: 10px 18px; font-size: .87rem; border-radius: 11px; box-shadow: none; }
@media (max-width: 860px) {
  /* телефон: логотип · бургер; «Войти» и оранжевая кнопка — только в шторке и в теле страницы */
  body.v3 .header-cta { gap: 2px; }
  body.v3 .header-cta .btn-primary,
  body.v3 .site-header .header-cta .btn-ghost { display: none; }
  body.v3 .burger { margin-right: -10px; }
}

/* ── reveal при скролле (мягко, без скрытия контента без JS) ───── */
html.js .rv { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .7s var(--ease); }
html.js .rv.in { opacity: 1; transform: none; }
html.js .rv.d1 { transition-delay: .08s; } html.js .rv.d2 { transition-delay: .16s; } html.js .rv.d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { html.js .rv { opacity: 1; transform: none; transition: none; } }
@media (max-width: 760px) { html.js .rv { opacity: 1; transform: none; transition: none; } }

/* ═══ HERO ═══════════════════════════════════════════════════════ */
.hero3 {
  position: relative; overflow: hidden; color: #fff;
  padding: 108px 0 0;
  background:
    radial-gradient(900px 520px at 78% -10%, rgba(240,162,98,.22), transparent 60%),
    radial-gradient(700px 480px at 10% 20%, rgba(74,157,222,.14), transparent 60%),
    linear-gradient(170deg, #141C25 0%, #1B2530 50%, #25343F 100%);
}
.hero3::after { /* мягкий переход в светлую часть */
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 160px;
  background: linear-gradient(180deg, transparent, var(--g-bg)); pointer-events: none;
}
.hero3-top { text-align: center; max-width: 900px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 2; }
body.v3 .hero3 .eyebrow { display: inline-flex; align-items: center; color: rgba(255,255,255,.55); margin-bottom: 10px; }
.hero3 h1 { font-size: clamp(2.5rem, 5.4vw, 4.4rem); line-height: 1.02; letter-spacing: -.035em; margin: 10px 0 18px; }
.hero3 h1 .accent { background: linear-gradient(90deg, #F0A262, #F7C08A); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.v3 .hero3 .lead { max-width: 800px; margin: 0 auto 26px; color: rgba(255,255,255,.78); font-size: clamp(1.02rem, 1.4vw, 1.22rem); line-height: 1.5; }
.hero3-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero3-note { margin-top: 14px; font-size: .86rem; color: rgba(255,255,255,.62); }
.hero3-note b { color: #fff; font-weight: 600; }

/* сцена с устройствами */
.stage3 { position: relative; z-index: 1; max-width: 1240px; margin: 26px auto 0; padding: 0 24px 56px; }
.stage3-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 36px; align-items: end; }
.stage3 .mac { width: 100%; }
.stage3 .iphone { margin-bottom: 24px; justify-self: center; }
.stage3-link { /* световая нить между телефоном и маком */
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; overflow: visible;
}
.stage3-link path { fill: none; stroke: url(#linkGrad); stroke-width: 2; stroke-dasharray: 6 10; opacity: .5; }
.fly { position: absolute; z-index: 6; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 999px; background: #F0A262; box-shadow: 0 0 0 6px rgba(240,162,98,.25), 0 0 24px 6px rgba(240,162,98,.55); pointer-events: none; }
.fly.back { background: #3CB879; box-shadow: 0 0 0 6px rgba(60,184,121,.25), 0 0 24px 6px rgba(60,184,121,.55); }

.stage3-caption { position: relative; z-index: 7; margin: 0 auto 18px; width: fit-content; max-width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; background: rgba(27,37,48,.72); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); font-size: .86rem; color: rgba(255,255,255,.82); white-space: nowrap; transition: opacity .3s; }
.stage3-caption .step { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 999px; background: #F0A262; color: #1B2530; font-weight: 800; font-size: .74rem; }

@media (max-width: 1024px) {
  .stage3-grid { grid-template-columns: minmax(0, 1fr) 220px; gap: 20px; }
  .stage3 .iphone { margin-bottom: 12px; }
}
@media (max-width: 760px) {
  /* на телефоне сцена вертикальная: телефон (чат дома) сверху, мак снизу, подпись шага под ним */
  .hero3 { padding-top: 92px; }
  body.v3 .hero3 .eyebrow { display: none; }
  .br-m { display: inline; }
  .hero3 h1 { font-size: clamp(2.3rem, 10.5vw, 3rem); margin: 0 0 14px; }
  body.v3 .hero3 .lead { font-size: 1.02rem; margin-bottom: 18px; }
  .lead-l { display: none; } .lead-s { display: inline; }
  .hero3-actions { flex-direction: column; align-items: stretch; }
  .hero3-actions .btn { width: 100%; justify-content: center; }
  .hide-m { display: none !important; }
  .hero3-note { font-size: .8rem; line-height: 1.5; margin-top: 12px; }
  .stage3 { margin-top: 18px; padding: 0 12px 40px; }
  .stage3-grid { grid-template-columns: 1fr; gap: 22px; }
  .stage3 .iphone { display: block; order: -1; width: min(240px, 64vw); margin: 0 auto; justify-self: center; }
  .stage3-link { display: none; }
  .stage3-caption { margin: 0 auto 14px; white-space: normal; font-size: .8rem; line-height: 1.35; min-height: 58px; box-sizing: border-box; }
  .stage3-caption .step { flex-shrink: 0; }
  .stage3 .mac { display: none; }
  .stage3 .m-cab { display: block; }
}
/* «кабинет» на телефоне: карточка обращения в натуральную величину вместо нечитаемого мака */
.m-cab { display: none; position: relative; width: 100%; border-radius: 20px; padding: 12px 12px 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.m-cab-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 2px 10px; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: rgba(255,255,255,.6); }
.m-cab-head .pill { font-size: 10.5px; letter-spacing: 0; text-transform: none; }
.m-cab .tcards { display: block; height: 330px; overflow: hidden; } /* фиксированная высота: смена карточки не двигает страницу */
@media (max-width: 400px) { .m-cab .tcards { height: 380px; } }
.m-cab .tcard { color: var(--g-ink); }
.m-cab .tcard.new { border-color: rgba(240,162,98,.8); }
.m-cab .acts { flex-wrap: wrap; }
.m-cab .abtn { padding: 10px 14px; font-size: 13px; }
.m-cab .abtn:not(.primary) { display: none; } /* на телефоне только главное действие */
.m-cab .abtn.primary { flex: 1 1 auto; text-align: center; }

/* ═══ УСТРОЙСТВА ═══════════════════════════════════════════════ */
/* MacBook: крышка (экран с рамкой и камерой) + основание с выемкой */
.mac { position: relative; }
.mac-lid {
  position: relative; border-radius: 22px 22px 10px 10px;
  background: linear-gradient(180deg, #2A3038, #171B21);
  padding: 14px 14px 18px; box-shadow: 0 40px 90px -30px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,255,255,.08);
}
.mac-lid::before { /* камера */
  content: ''; position: absolute; top: 5px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 999px;
  background: #0b0d10; box-shadow: inset 0 0 0 1.5px #2b3139, 0 0 0 1px rgba(255,255,255,.04);
}
.mac-screen { position: relative; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: var(--g-bg); }
.mac-base {
  position: relative; height: 16px; margin: 0 -3% 0; border-radius: 0 0 18px 18px;
  background: linear-gradient(180deg, #D7DCE2 0%, #AEB5BE 60%, #80878F 100%);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.5);
}
.mac-base::before { /* выемка */
  content: ''; position: absolute; top: 0; left: 50%; width: 16%; height: 5px; margin-left: -8%; border-radius: 0 0 8px 8px; background: linear-gradient(180deg, #8f969e, #c9ced4);
}
.mac.dark .mac-screen { background: #1B2530; }

/* частично видимый мак у края (обзор модулей) */
.mac-bleed { position: relative; overflow: hidden; }
.mac-bleed .mac { width: 114%; max-width: none; }
.mac-bleed.right .mac { margin-left: 0; }
.mac-bleed.left .mac { margin-left: -14%; }
@media (max-width: 900px) { .mac-bleed .mac { width: 100%; } .mac-bleed.left .mac { margin-left: 0; } }

/* iPhone */
.iphone { position: relative; width: 300px; max-width: 100%; aspect-ratio: 300 / 612; }
.iphone-frame {
  position: absolute; inset: 0; border-radius: 48px;
  background: linear-gradient(180deg, #2B3139, #14181D);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.7), inset 0 0 0 1.5px rgba(255,255,255,.1), inset 0 0 0 6px #0c0f12;
}
.iphone-frame::before { /* кнопки слева */
  content: ''; position: absolute; left: -3px; top: 110px; width: 3px; height: 32px; background: #30363d; border-radius: 2px 0 0 2px; box-shadow: 0 54px 0 #30363d, 0 100px 0 #30363d;
}
.iphone-frame::after { /* кнопка справа */
  content: ''; position: absolute; right: -3px; top: 150px; width: 3px; height: 60px; background: #30363d; border-radius: 0 2px 2px 0;
}
.iphone-screen { position: absolute; inset: 9px; border-radius: 40px; overflow: hidden; background: #F2F2F7; }
.iphone-island { position: absolute; top: 12px; left: 50%; width: 92px; height: 28px; margin-left: -46px; border-radius: 999px; background: #0b0d10; z-index: 5; }
.iphone-island::after { content: ''; position: absolute; right: 12px; top: 9px; width: 10px; height: 10px; border-radius: 999px; background: #1c2128; box-shadow: inset 0 0 0 2px #0b0d10, inset 0 0 2px 1px #2e3a46; }
.iphone-home { position: absolute; bottom: 7px; left: 50%; width: 108px; height: 4px; margin-left: -54px; border-radius: 4px; background: rgba(0,0,0,.35); z-index: 5; }

/* fit: контент экрана свёрстан в фиксированных px и масштабируется под рамку */
.fit { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.fit[data-fit="1200"] { width: 1200px; height: 750px; }
.fit[data-fit="390"] { width: 390px; height: 821px; }

/* ═══ Экран кабинета (v3-репликa) ══════════════════════════════ */
.app { display: flex; width: 100%; height: 100%; background: var(--g-bg); color: var(--g-ink); font-size: 14px; font-family: var(--font); }
.app-rail { width: 76px; flex-shrink: 0; background: linear-gradient(180deg, #1F2B37, #18222C); border-right: 1px solid rgba(255,255,255,.07); display: flex; flex-direction: column; align-items: center; padding: 18px 0; gap: 10px; }
.app-rail .ri { width: 46px; height: 46px; border-radius: 15px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.72); }
.app-rail .ri svg { width: 22px; height: 22px; }
.app-rail .ri.on { background: var(--tint, #F0A262); color: #fff; box-shadow: 0 10px 24px -10px var(--tint, #F0A262); }
.app-rail .brand { margin-bottom: 8px; }
.app-rail .ava { margin-top: auto; width: 36px; height: 36px; border-radius: 12px; background: #F0A262; color: #fff; font-weight: 800; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.app-main { flex: 1; min-width: 0; position: relative; overflow: hidden;
  background:
    radial-gradient(600px 300px at 90% 0%, rgba(240,162,98,.18), transparent 60%),
    radial-gradient(500px 300px at 0% 100%, rgba(74,157,222,.10), transparent 60%),
    var(--g-bg);
  padding: 22px 28px; }
.glassbar { display: flex; align-items: center; gap: 14px; padding: 8px 10px 8px 16px; border-radius: 999px; background: rgba(255,255,255,.66); border: 1px solid rgba(255,255,255,.6); box-shadow: 0 2px 6px rgb(37 52 63 / .06), 0 20px 50px -24px rgb(37 52 63 / .35); backdrop-filter: blur(16px); margin-bottom: 20px; }
.glassbar .ey { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: var(--g-ink-2); }
.glassbar .ey i { width: 8px; height: 8px; border-radius: 999px; background: var(--tint, #F0A262); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tint, #F0A262) 25%, transparent); }
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(37,52,63,.06); }
.seg span { padding: 7px 14px; border-radius: 999px; font-weight: 700; font-size: 13px; color: var(--g-ink-2); }
.seg span.on { background: #fff; color: var(--g-ink); box-shadow: 0 1px 2px rgb(37 52 63 / .1); }
.app h2.t { font-size: 24px; font-weight: 800; letter-spacing: -.03em; margin: 0 0 4px; }
.app .sub { color: var(--g-ink-2); font-size: 13px; margin-bottom: 18px; }
.widgets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.widget { position: relative; padding: 16px 18px; border-radius: 22px; background: rgba(255,255,255,.78); border: 1px solid rgba(255,255,255,.7); box-shadow: var(--sh); min-height: 108px; }
.widget.dark { background: linear-gradient(160deg, #25343F, #1B2530); color: #fff; border-color: transparent; }
.widget.accent { background: linear-gradient(160deg, #F0A262, #E8923F); color: #fff; border-color: transparent; }
.widget .ey { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; opacity: .7; }
.widget .v { font-size: 30px; font-weight: 800; letter-spacing: -.03em; margin-top: 8px; font-variant-numeric: tabular-nums; }
.widget .c { font-size: 12px; opacity: .7; margin-top: 2px; }
.widget .ic { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 10px; background: rgba(37,52,63,.06); display: flex; align-items: center; justify-content: center; }
.widget.dark .ic, .widget.accent .ic { background: rgba(255,255,255,.14); }
.panel { background: #fff; border-radius: 18px; box-shadow: var(--sh); padding: 16px 18px; }
.panel .ph { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.panel .ph b { font-size: 15px; letter-spacing: -.01em; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: rgba(37,52,63,.07); color: var(--g-ink-2); white-space: nowrap; }
.pill i { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.pill.ok { background: rgba(60,184,121,.14); color: #208C58; }
.pill.warn { background: rgba(245,166,35,.16); color: #B0700A; }
.pill.bad { background: rgba(232,64,64,.12); color: #C63030; }
.pill.info { background: rgba(74,157,222,.14); color: #2A6FB0; }
.pill.acc { background: rgba(240,162,98,.18); color: #B86A24; }
.pill.vio { background: rgba(155,142,196,.18); color: #6A5AA8; }

/* карточки обращений на экране диспетчерской */
.tcards { display: grid; gap: 10px; }
.tcard { position: relative; border-radius: 16px; background: #fff; box-shadow: var(--sh); padding: 14px 16px; border: 1px solid transparent; transition: transform .35s var(--ease), opacity .35s var(--ease), border-color .3s; }
.tcard.new { animation: cardIn .6s var(--ease) both; border-color: rgba(240,162,98,.6); box-shadow: 0 0 0 4px rgba(240,162,98,.14), var(--sh); }
.tcard.done { border-color: rgba(60,184,121,.5); }
.tcard.out { opacity: 0; transform: translateY(10px) scale(.98); }
@keyframes cardIn { from { opacity: 0; transform: translateY(-14px) scale(.98); } to { opacity: 1; transform: none; } }
.tcard .row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.tcard .addr { font-size: 11.5px; color: var(--g-ink-3); margin-left: auto; white-space: nowrap; }
.tcard .txt { font-size: 14px; font-weight: 600; line-height: 1.35; }
.tcard .who { font-size: 12px; color: var(--g-ink-2); margin-top: 2px; }
.draft { margin-top: 10px; display: flex; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--g-surface-2); border: 1px dashed rgba(240,162,98,.6); font-size: 12.5px; line-height: 1.4; }
.draft .ai { flex-shrink: 0; width: 22px; height: 22px; border-radius: 8px; background: linear-gradient(135deg,#F0A262,#E8923F); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 11px; }
.draft .lbl { display: block; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #B86A24; font-weight: 800; margin-bottom: 2px; }
.draft .typed::after { content: '▍'; color: #F0A262; animation: blink 1s steps(2) infinite; }
.draft.done .typed::after { content: ''; }
@keyframes blink { 50% { opacity: 0; } }
.acts { display: flex; gap: 8px; margin-top: 10px; }
.abtn { padding: 8px 12px; border-radius: 10px; font-size: 12.5px; font-weight: 700; background: rgba(37,52,63,.06); color: var(--g-ink); transition: background .2s, transform .2s; }
.abtn.primary { background: linear-gradient(135deg,#F0A262,#E8923F); color: #fff; }
.abtn.pressed { transform: scale(.96); filter: brightness(.95); }
.sent { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: #208C58; margin-top: 10px; }

/* курсор-указатель для сценария */
.cursor { position: absolute; z-index: 9; width: 22px; height: 22px; pointer-events: none; opacity: 0; transition: opacity .25s; filter: drop-shadow(0 4px 8px rgba(0,0,0,.35)); }
.cursor.show { opacity: 1; }
.cursor svg { width: 100%; height: 100%; }

/* ═══ Экран телефона: чат MAX ══════════════════════════════════ */
.chat { display: flex; flex-direction: column; width: 100%; height: 100%; background: #F2F2F7; color: #111; font-family: var(--font); }
.chat-head { padding: 54px 16px 12px; background: rgba(255,255,255,.85); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(0,0,0,.06); display: flex; align-items: center; gap: 12px; }
.chat-head .av { width: 40px; height: 40px; border-radius: 999px; background: linear-gradient(135deg,#F0A262,#E8923F); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; }
.chat-head b { display: block; font-size: 15px; letter-spacing: -.01em; }
.chat-head span { font-size: 12px; color: #6b7280; }
.chat-body { flex: 1; padding: 14px 12px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; justify-content: flex-end; }
.bub { max-width: 84%; padding: 9px 12px 8px; border-radius: 18px 18px 18px 6px; background: #fff; box-shadow: 0 1px 1px rgba(0,0,0,.05); font-size: 14px; line-height: 1.35; animation: bubIn .45s var(--ease) both; }
.bub .n { display: block; font-size: 12px; font-weight: 700; color: #C97A33; margin-bottom: 2px; }
.bub .t { display: block; font-size: 10.5px; color: #9ca3af; text-align: right; margin-top: 3px; }
.bub.uk { align-self: flex-end; border-radius: 18px 18px 6px 18px; background: #FDEBDC; }
.bub.uk .n { color: #B86A24; }
.bub.hot { box-shadow: 0 0 0 2px rgba(240,162,98,.65), 0 1px 1px rgba(0,0,0,.05); }
.bub .q { display: block; border-left: 3px solid #F0A262; padding: 2px 8px; margin-bottom: 6px; font-size: 12px; color: #6b7280; background: rgba(240,162,98,.08); border-radius: 4px; }
.bub .tag { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: rgba(240,162,98,.16); color: #B86A24; }
.bub .tag.noise { background: rgba(0,0,0,.05); color: #6b7280; }
.bub.out { opacity: 0; transform: translateY(-6px); transition: .35s; }
@keyframes bubIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.chat-foot { padding: 10px 12px 28px; background: rgba(255,255,255,.9); border-top: 1px solid rgba(0,0,0,.06); display: flex; align-items: center; gap: 10px; }
.chat-foot .inp { flex: 1; height: 36px; border-radius: 18px; background: #F2F2F7; border: 1px solid rgba(0,0,0,.06); font-size: 13px; color: #9ca3af; display: flex; align-items: center; padding: 0 14px; }
.chat-foot .inp.typing { color: #111; }
.chat-foot .sendb { width: 34px; height: 34px; border-radius: 999px; background: #F0A262; display: flex; align-items: center; justify-content: center; color: #fff; }

/* ═══ Цифры доверия ═══════════════════════════════════════════ */
.proof { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.proof div { padding: 22px 22px 20px; border-radius: var(--r-lg); background: var(--g-surface); box-shadow: var(--sh); }
.proof b { display: block; font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -.03em; color: var(--g-ink); line-height: 1; }
.proof b small { font-size: .5em; font-weight: 700; color: var(--g-ink-2); margin-left: 2px; }
@media (max-width: 600px) { .proof b small { display: block; margin: 4px 0 0; font-size: .45em; } }
.proof span { display: block; margin-top: 8px; font-size: .88rem; color: var(--g-ink-2); line-height: 1.4; }
@media (max-width: 900px) { .proof { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .proof { grid-template-columns: 1fr 1fr; gap: 10px; } .proof div { padding: 16px 14px 14px; } .proof b { font-size: 1.7rem; } .proof span { font-size: .8rem; margin-top: 6px; } }

/* ═══ Audentes ════════════════════════════════════════════════ */
.aud { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(36px, 6vw, 80px); align-items: center; }
.aud-badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); font-weight: 700; font-size: .88rem; color: #fff; margin-bottom: 18px; }
.aud-badge .m { width: 30px; height: 30px; border-radius: 10px; background: linear-gradient(135deg,#F0A262,#E8923F); display: flex; align-items: center; justify-content: center; font-weight: 800; color: #1B2530; font-size: 13px; }
.aud h2 { font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -.035em; line-height: 1.04; margin-bottom: 18px; }
.aud .lead { margin-bottom: 26px; }
.aud-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; }
.aud-facts li { list-style: none; display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; color: rgba(255,255,255,.82); line-height: 1.45; }
.aud-facts li .ck { flex-shrink: 0; width: 22px; height: 22px; border-radius: 7px; background: rgba(240,162,98,.18); color: #F0A262; display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 800; margin-top: 1px; }
.aud-stats { display: flex; gap: 28px; margin-top: 30px; flex-wrap: wrap; }
.aud-stats div b { display: block; font-size: 2rem; font-weight: 800; letter-spacing: -.03em; color: #fff; line-height: 1; }
.aud-stats div span { display: block; margin-top: 6px; font-size: .84rem; color: rgba(255,255,255,.5); max-width: 160px; line-height: 1.35; }

/* «разбор сообщения» — живая карточка */
.brain { position: relative; border-radius: var(--r-xl); padding: 26px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 40px 90px -40px rgba(0,0,0,.6); }
.brain::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(240,162,98,.5), transparent 40%, transparent 60%, rgba(74,157,222,.4)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.brain .in { padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.08); font-size: 1rem; line-height: 1.45; min-height: 74px; }
.brain .in .n { display: block; font-size: .78rem; color: #F0A262; font-weight: 700; margin-bottom: 4px; }
.brain .in .typed::after { content: '▍'; color: #F0A262; animation: blink 1s steps(2) infinite; }
.brain .arrow { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: rgba(255,255,255,.45); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; }
.brain .arrow i { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(240,162,98,.6), transparent); }
.brain .arrow .m { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg,#F0A262,#E8923F); color: #1B2530; display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 800; }
.brain .arrow .m.think { animation: spinGlow 1.2s ease-in-out infinite; }
@keyframes spinGlow { 0%,100% { box-shadow: 0 0 0 0 rgba(240,162,98,.5); } 50% { box-shadow: 0 0 0 8px rgba(240,162,98,0); } }
.brain .outg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.brain .o { padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.06); font-size: .84rem; min-height: 54px; }
.brain .o .v { display: block; opacity: 0; transform: translateY(6px); transition: .4s var(--ease); }
.brain .o.in-view .v { opacity: 1; transform: none; }
.brain .o:not(.in-view)::after { content: ''; display: block; height: 10px; width: 46%; margin-top: -14px; border-radius: 6px; background: rgba(255,255,255,.08); }
.brain .o.wide:not(.in-view)::after { width: 80%; }
.brain .o .k { display: block; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.4); font-weight: 800; margin-bottom: 3px; }
.brain .o .v { font-weight: 700; color: #fff; }
.brain .o.wide { grid-column: 1 / -1; }
.brain .o .v.rep { font-weight: 500; color: rgba(255,255,255,.85); line-height: 1.4; }
.brain .o .v.bad { color: #FF9B9B; } .brain .o .v.ok { color: #6FD3A0; } .brain .o .v.warn { color: #FFD37E; }

/* ═══ Обзор модулей ═══════════════════════════════════════════ */
.modgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.modcard { position: relative; display: block; padding: 22px 22px 20px; border-radius: var(--r-lg); background: var(--g-surface); box-shadow: var(--sh); border: 1px solid transparent; transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; color: var(--g-ink); }
.modcard:hover { transform: translateY(-4px); box-shadow: var(--sh-float); border-color: color-mix(in srgb, var(--tint, #F0A262) 45%, transparent); }
.modcard .ic { width: 44px; height: 44px; border-radius: 14px; background: color-mix(in srgb, var(--tint, #F0A262) 16%, #fff); color: var(--tint, #F0A262); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.modcard h3 { font-size: 1.15rem; margin-bottom: 6px; letter-spacing: -.02em; }
.modcard p { font-size: .92rem; color: var(--g-ink-2); line-height: 1.5; }
.modcard .go { position: absolute; top: 20px; right: 20px; color: var(--g-ink-3); transition: transform .3s var(--ease), color .3s; }
.modcard:hover .go { transform: translate(3px, -3px); color: var(--tint, #F0A262); }
@media (max-width: 900px) { .modgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .modgrid { grid-template-columns: 1fr; } }

/* модуль крупным планом: текст + мак у края */
.feat { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.feat.rev > .feat-text { order: 2; }
.feat .eyebrow { display: inline-flex; align-items: center; gap: 8px; }
.feat .eyebrow i { width: 8px; height: 8px; border-radius: 999px; background: var(--tint, #F0A262); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tint, #F0A262) 22%, transparent); }
.feat h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); letter-spacing: -.03em; line-height: 1.06; margin: 12px 0 14px; }
.feat .lead { margin-bottom: 22px; font-size: 1.08rem; }
.feat ul { list-style: none; display: grid; gap: 10px; margin-bottom: 24px; }
.feat li { display: flex; gap: 10px; align-items: flex-start; font-size: .97rem; line-height: 1.45; color: var(--g-ink); }
.feat li .ck { flex-shrink: 0; width: 22px; height: 22px; border-radius: 7px; background: color-mix(in srgb, var(--tint, #F0A262) 18%, #fff); color: var(--tint, #F0A262); display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 800; margin-top: 1px; }
.on-dark .feat li { color: rgba(255,255,255,.85); }
.feat .more { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--g-ink); }
.feat .more .arr { color: var(--tint, #F0A262); }
.on-dark .feat .more { color: #fff; }
.feat .more .arr { transition: transform .25s var(--ease); }
.feat .more:hover .arr { transform: translateX(4px); }
@media (max-width: 900px) { .feat { grid-template-columns: minmax(0, 1fr); } .feat > * { min-width: 0; } .feat.rev > .feat-text { order: 0; } }
.iphone { min-width: 0; } /* iPhone 300px внутри flex/grid не должен распирать колонку (люфт 7px на 320px) */

/* ═══ Для кого ════════════════════════════════════════════════ */
.who { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.who div { padding: 26px 24px; border-radius: var(--r-lg); background: var(--g-surface); box-shadow: var(--sh); }
.who h3 { font-size: 1.15rem; margin-bottom: 8px; letter-spacing: -.02em; }
.who p { color: var(--g-ink-2); font-size: .94rem; line-height: 1.5; }
.who .k { display: inline-flex; padding: 4px 10px; border-radius: 999px; background: rgba(240,162,98,.16); color: #B86A24; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; }
@media (max-width: 900px) { .who { grid-template-columns: 1fr; } }

/* ═══ Шаги ════════════════════════════════════════════════════ */
.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; counter-reset: s; }
.steps3 div { position: relative; padding: 26px 24px 24px; border-radius: var(--r-lg); background: var(--g-surface); box-shadow: var(--sh); }
.steps3 div::before { counter-increment: s; content: counter(s); display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 12px; background: linear-gradient(135deg,#F0A262,#E8923F); color: #fff; font-weight: 800; margin-bottom: 16px; }
.steps3 h3 { font-size: 1.1rem; margin-bottom: 6px; }
.steps3 p { color: var(--g-ink-2); font-size: .94rem; line-height: 1.5; }
@media (max-width: 900px) { .steps3 { grid-template-columns: 1fr; } }

/* ═══ Закон (компактная лента) ════════════════════════════════ */
.law3 { display: grid; grid-template-columns: 1.2fr 1fr; gap: 36px; align-items: center; padding: 30px 34px; margin-top: 14px; border-radius: var(--r-lg); background: var(--g-surface); box-shadow: var(--sh); }
.law3 .eyebrow { margin-bottom: 4px; }
.law3 h3 { font-size: 1.5rem; letter-spacing: -.03em; margin: 8px 0 10px; }
.law3 p { color: var(--g-ink-2); }
.law3 ul { list-style: none; display: grid; gap: 10px; }
.law3 li { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; }
.law3 li .ck { flex-shrink: 0; width: 22px; height: 22px; border-radius: 7px; background: rgba(60,184,121,.16); color: #208C58; display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 800; }
@media (max-width: 900px) { .law3 { grid-template-columns: 1fr; padding: 26px; } }

/* ═══ Статьи, FAQ на v3 ═══════════════════════════════════════ */
body.v3 .article-card { background: var(--g-surface); border-color: transparent; box-shadow: var(--sh); border-radius: var(--r-lg); }
body.v3 .faq-item { background: var(--g-surface); border-color: transparent; box-shadow: var(--sh); border-radius: var(--r); }
body.v3 .cta-band { border-radius: var(--r-xl); background: linear-gradient(170deg, #1B2530 0%, #25343F 100%); color: #fff; }
body.v3 .cta-band .lead { color: rgba(255,255,255,.66); }
body.v3 .site-footer { background: #141C25; }

/* ═══ Страница модуля ═════════════════════════════════════════ */
.mhero { position: relative; overflow: hidden; color: #fff; padding: 136px 0 0;
  background: radial-gradient(900px 520px at 80% -10%, color-mix(in srgb, var(--tint, #F0A262) 28%, transparent), transparent 60%), linear-gradient(170deg, #141C25 0%, #1B2530 50%, #25343F 100%); }
.mhero::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 140px; background: linear-gradient(180deg, transparent, var(--g-bg)); pointer-events: none; }
.mhero-in { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 5vw, 64px); align-items: center; padding-bottom: 72px; }
.mhero h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); letter-spacing: -.035em; line-height: 1.04; margin: 14px 0 18px; }
.mhero .lead { color: rgba(255,255,255,.7); margin-bottom: 28px; }
.mhero .crumbs { font-size: .82rem; color: rgba(255,255,255,.45); display: flex; gap: 8px; align-items: center; }
.mhero .crumbs a { color: rgba(255,255,255,.65); }
.mhero .crumbs a:hover { color: #fff; }
.mhero .mac { width: 112%; max-width: none; }
@media (max-width: 900px) { .mhero-in { grid-template-columns: 1fr; } .mhero .mac { width: 100%; } }

.fgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.fcard { padding: 24px 22px; border-radius: var(--r-lg); background: var(--g-surface); box-shadow: var(--sh); }
.fcard .ic { width: 42px; height: 42px; border-radius: 13px; background: color-mix(in srgb, var(--tint, #F0A262) 16%, #fff); color: var(--tint, #F0A262); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.fcard h3 { font-size: 1.08rem; margin-bottom: 6px; letter-spacing: -.02em; }
.fcard p { font-size: .92rem; color: var(--g-ink-2); line-height: 1.5; }
@media (max-width: 900px) { .fgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .fgrid { grid-template-columns: 1fr; } }

.story { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.story::before { content: ''; position: absolute; left: 6%; right: 6%; top: 22px; height: 2px; background: linear-gradient(90deg, rgba(240,162,98,.2), rgba(240,162,98,.8), rgba(60,184,121,.8)); }
.story div { position: relative; padding: 0 18px; }
.story .dot { width: 46px; height: 46px; border-radius: 999px; background: #1F2C38; border: 2px solid rgba(240,162,98,.6); display: flex; align-items: center; justify-content: center; font-weight: 800; color: #F0A262; margin-bottom: 18px; position: relative; z-index: 1; }
.story h3 { font-size: 1.02rem; margin-bottom: 6px; color: #fff; }
.story p { font-size: .9rem; color: rgba(255,255,255,.62); line-height: 1.5; }
.story .t { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #F0A262; font-weight: 800; margin-bottom: 6px; }
@media (max-width: 900px) { .story { grid-template-columns: 1fr 1fr; gap: 28px; } .story::before { display: none; } }
@media (max-width: 520px) { .story { grid-template-columns: 1fr; } }

.mquote { padding: 30px 34px; border-radius: var(--r-xl); background: var(--g-surface); box-shadow: var(--sh); display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; }
.mquote .q { font-size: 3rem; line-height: 1; color: #F0A262; font-weight: 800; }
.mquote p { font-size: 1.12rem; line-height: 1.55; }
.mquote small { display: block; margin-top: 10px; color: var(--g-ink-2); }

/* маленькие экраны-иллюстрации внутри fcard/feat (без устройства) */
.mini { border-radius: 16px; background: var(--g-surface); box-shadow: var(--sh); padding: 14px; font-size: 13px; }

/* хаб модулей: крупные карточки с мини-экраном */
.hubgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hubcard { display: grid; grid-template-rows: auto 1fr; border-radius: var(--r-xl); background: var(--g-surface); box-shadow: var(--sh); overflow: hidden; color: var(--g-ink); transition: transform .3s var(--ease), box-shadow .3s; }
.hubcard:hover { transform: translateY(-4px); box-shadow: var(--sh-float); }
.hubcard .shot { position: relative; height: 230px; background: linear-gradient(170deg, color-mix(in srgb, var(--tint, #F0A262) 18%, #fff), var(--g-bg)); overflow: hidden; }
.hubcard .shot .mac { position: absolute; left: 10%; right: -14%; top: 26px; }
.hubcard .body { padding: 22px 24px 24px; }
.hubcard h3 { font-size: 1.3rem; letter-spacing: -.02em; margin-bottom: 6px; display: flex; align-items: center; gap: 10px; }
.hubcard h3 .ic { width: 34px; height: 34px; border-radius: 11px; background: color-mix(in srgb, var(--tint, #F0A262) 16%, #fff); color: var(--tint, #F0A262); display: inline-flex; align-items: center; justify-content: center; }
.hubcard p { color: var(--g-ink-2); font-size: .95rem; line-height: 1.5; }
.hubcard .more { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-weight: 700; color: #C97A33; }
@media (max-width: 800px) { .hubgrid { grid-template-columns: 1fr; } .hubcard .shot { height: 200px; } .hubcard .shot .mac { left: 6%; right: 6%; top: 22px; } }

/* иконки модулей в выпадающем меню — цвет модуля */
.nav-drop-menu .mi { background: color-mix(in srgb, currentColor 14%, #fff); }
@media (max-width: 900px) { .aud { grid-template-columns: 1fr; } .aud-facts { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .brain .o { min-height: 46px; padding: 8px 10px; font-size: .8rem; } .brain .o:not(.in-view)::after { height: 8px; margin-top: -10px; } .brain .in { min-height: 60px; font-size: .95rem; } .brain .arrow { margin: 10px 0; } }
@media (max-width: 400px) { .brain .outg { grid-template-columns: 1fr; } }

/* ═══ Правки 20.10 (вечер) ═══════════════════════════════════════ */
/* шапка: кнопки без стекла и сдвигов (Safari дёргал ghost-кнопку при скролле) */
body.v3 .site-header .btn-ghost { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.v3 .site-header .btn:hover { transform: none; }
body.v3 .site-header .btn-ghost:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); }
.nav-drop-inner-sm { min-width: 240px; }
.nav-drop-inner-sm a { padding: 9px 12px; }
.nav-drop-inner-sm b { font-weight: 600; }

/* мак у края: режем только границей экрана, не контейнером */
.feat-sec { overflow: hidden; }
.mac-bleed { overflow: visible; }
.mac-bleed.right .mac { width: 128%; max-width: none; }
.mac-bleed.left .mac { width: 128%; max-width: none; margin-left: -28%; }
@media (max-width: 900px) { .mac-bleed.right .mac, .mac-bleed.left .mac { width: 100%; margin-left: 0; } }
@media (max-width: 600px) { .mac-bleed.right .mac, .mac-bleed.left .mac { width: 100%; margin-left: 0; } }

/* герой модуля: контент над градиентом, кнопки не перекрываются */
.mhero-in { position: relative; z-index: 2; padding-bottom: 96px; }
.mhero .wide > .rv, .mhero .container > .rv { position: relative; z-index: 2; }

/* для кого — две карточки */
.who.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) { .who.two { grid-template-columns: 1fr; } }

/* путь к запуску — 4 шага */
.path { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; position: relative; counter-reset: p; }
.path > div { position: relative; padding: 26px 24px 24px; border-radius: var(--r-lg); background: var(--g-surface); box-shadow: var(--sh); }
.path > div::before { counter-increment: p; content: counter(p); display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 12px; background: linear-gradient(135deg,#F0A262,#E8923F); color: #fff; font-weight: 800; margin-bottom: 16px; }
.path > div.free::after { content: 'бесплатно'; position: absolute; top: 22px; right: 22px; padding: 4px 10px; border-radius: 999px; background: rgba(60,184,121,.16); color: #208C58; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.path h3 { font-size: 1.08rem; margin-bottom: 6px; letter-spacing: -.02em; }
.path p { color: var(--g-ink-2); font-size: .93rem; line-height: 1.5; }
.path .t { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #C97A33; font-weight: 800; margin-bottom: 6px; }
@media (max-width: 1000px) { .path { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .path { grid-template-columns: 1fr; } }

/* Audentes: страница */
.aud-hero { position: relative; overflow: hidden; color: #fff; padding: 136px 0 0;
  background: radial-gradient(900px 520px at 70% -10%, rgba(240,162,98,.26), transparent 60%), radial-gradient(700px 480px at 10% 30%, rgba(74,157,222,.14), transparent 60%), linear-gradient(170deg, #141C25 0%, #1B2530 50%, #25343F 100%); }
.aud-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 140px; background: linear-gradient(180deg, transparent, var(--g-bg)); pointer-events: none; }
.aud-hero .aud-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; padding-bottom: 96px; position: relative; z-index: 2; }
.aud-hero h1 { font-size: clamp(2.4rem, 5.4vw, 4.2rem); letter-spacing: -.035em; line-height: 1.02; margin: 14px 0 18px; }
.aud-hero h1 .accent { background: linear-gradient(90deg, #F0A262, #F7C08A); -webkit-background-clip: text; background-clip: text; color: transparent; }
.aud-hero .lead { color: rgba(255,255,255,.7); margin-bottom: 26px; }
@media (max-width: 900px) { .aud-hero .aud-grid { grid-template-columns: 1fr; } }
.defn { padding: 30px 34px; border-radius: var(--r-xl); background: var(--g-surface); box-shadow: var(--sh); font-size: 1.15rem; line-height: 1.6; }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pillars div { padding: 26px 24px; border-radius: var(--r-lg); background: var(--g-surface); box-shadow: var(--sh); }
.pillars .n { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 12px; background: rgba(240,162,98,.16); color: #B86A24; font-weight: 800; margin-bottom: 14px; }
.pillars h3 { font-size: 1.1rem; margin-bottom: 6px; letter-spacing: -.02em; }
.pillars p { color: var(--g-ink-2); font-size: .94rem; line-height: 1.5; }
@media (max-width: 900px) { .pillars { grid-template-columns: 1fr; } }
.principle { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.principle div { padding: 26px 24px; border-radius: var(--r-lg); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.principle h3 { font-size: 1.1rem; margin-bottom: 8px; color: #fff; }
.principle p { color: rgba(255,255,255,.66); font-size: .95rem; line-height: 1.5; }
@media (max-width: 760px) { .principle { grid-template-columns: 1fr; } }

/* статьи и юрстраницы на v3 */
body.v3 .legal-hero { background: radial-gradient(900px 520px at 80% -10%, rgba(240,162,98,.2), transparent 60%), linear-gradient(170deg, #141C25 0%, #1B2530 50%, #25343F 100%); padding: 136px 0 56px; }
body.v3 .legal-hero h1 { letter-spacing: -.03em; }
body.v3 .article-body, body.v3 .legal-body { background: var(--g-bg); padding: 40px 0 64px; }
body.v3 .article-body .article-content, body.v3 .legal-content { background: var(--g-surface); border-radius: var(--r-xl); box-shadow: var(--sh); padding: clamp(24px, 4vw, 48px); }
body.v3 .article-related { background: var(--g-bg); }
body.v3 .article-cta { border-radius: var(--r-xl); }
body.v3 .legal-toc { background: var(--g-surface); border-radius: var(--r-lg); box-shadow: var(--sh); border: 0; }

/* ═══ Мобильное меню (шторка на весь экран, поверх шапки) ═════ */
body.v3 .mobile-nav { top: 0; bottom: 0; z-index: 120; max-height: none; padding: 0; gap: 0; border: 0; overflow: hidden;
  background: linear-gradient(180deg, #141C25 0%, #1B2530 100%); }
body.nav-open { overflow: hidden; }
.mn-head { display: flex; align-items: center; justify-content: space-between; height: 68px; padding: 0 12px 0 24px; border-bottom: 1px solid rgba(255,255,255,.07); flex-shrink: 0; }
.mn-close { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(255,255,255,.06); }
.mn-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 20px calc(20px + env(safe-area-inset-bottom)); }
.mn-h { margin: 10px 0 6px 2px; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: rgba(255,255,255,.42); }
.mn-list { display: flex; flex-direction: column; }
body.v3 .mobile-nav .mn-mod { display: flex; align-items: center; gap: 12px; padding: 9px 2px; border-radius: 0; border-bottom: 1px solid rgba(255,255,255,.07); color: #fff; font-size: .98rem; font-weight: 600; }
.mn-mod .mi { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: color-mix(in srgb, var(--tint, #F0A262) 22%, transparent); color: var(--tint, #F0A262); }
.mn-mod b { flex: 1; font-weight: 600; }
.mn-mod svg:last-child, .mn-links a svg { color: rgba(255,255,255,.35); flex-shrink: 0; }
.mn-links { display: flex; flex-direction: column; }
body.v3 .mobile-nav .mn-links a { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 12px 2px; border-radius: 0;
  border-bottom: 1px solid rgba(255,255,255,.07); color: rgba(255,255,255,.9); font-size: .98rem; font-weight: 600; }
.mn-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 4px 0 10px; }
body.v3 .mobile-nav .mn-cta .btn { width: 100%; justify-content: center; padding: 13px 10px; border-radius: 12px; font-size: .92rem; white-space: nowrap; }
body.v3 .mobile-nav .mn-cta .btn-ghost { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: #fff; }
/* cookie-бар под шторкой и модалками, при открытом меню/форме скрыт */
body.v3 .cookie-bar { z-index: 95; }
body.nav-open .cookie-bar, body.lead-open .cookie-bar { display: none; }

/* ═══ Телефон: плотнее секции, кнопки во всю ширину ═══════════ */
@media (max-width: 760px) {
  body.v3 .section { padding: 56px 0; }
  body.v3 .h2 { font-size: clamp(1.7rem, 7.6vw, 2.2rem); }
  body.v3 .section-head { margin-bottom: 22px; }
  .aud h2 { font-size: clamp(1.8rem, 8vw, 2.4rem); }
  .brain { padding: 18px; border-radius: var(--r-lg); }
  .aud-hero { padding-top: 100px; }
  .aud-hero .aud-grid { padding-bottom: 40px; gap: 26px; }
  .aud-hero h1 { font-size: clamp(2.1rem, 9.6vw, 2.8rem); }
  .defn { padding: 22px 20px; font-size: 1.02rem; border-radius: var(--r-lg); }
  .mhero-in { padding-bottom: 48px; }
  .mhero h1 { font-size: clamp(1.9rem, 8.6vw, 2.6rem); }
  .feat h2 { font-size: clamp(1.6rem, 7.4vw, 2.1rem); }
  .feat .lead { font-size: 1rem; }
  .cta-box, .cta3 { padding: 36px 20px; }
  body.v3 .cookie-bar { left: 10px; right: 10px; bottom: 10px; padding: 12px 14px; font-size: .78rem; border-radius: 16px; }
  body.v3 .cookie-bar button { padding: 10px 16px; }
  body.v3 .legal-hero { padding: 100px 0 36px; }
  body.v3 .article-body, body.v3 .legal-body { padding: 24px 0 48px; }
  /* формы: 16px, иначе iOS Safari зумит страницу при фокусе; заголовок модалки не под крестиком */
  .lead-field input, .lead-field textarea { font-size: 16px; }
  .lead-modal { padding: 12px; }
  .lead-modal-box { padding: 26px 20px 22px; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
  .lead-modal-box h3 { padding-right: 40px; font-size: 1.25rem; }
  /* герой модуля и Audentes: одна кнопка, вторая дублирует скролл */
  .mhero .hero3-actions .btn-ghost, .aud-hero .hero3-actions .btn-ghost { display: none; }
  .mhero .hero3-actions, .aud-hero .hero3-actions { flex-direction: column; }
  .mhero .hero3-actions .btn, .aud-hero .hero3-actions .btn { width: 100%; justify-content: center; }
  /* кнопки не шире экрана (nowrap-кнопка в CTA статей расширяла viewport на 1px → люфт) */
  .btn { white-space: normal; max-width: 100%; text-align: center; padding-left: 22px; padding-right: 22px; }
  /* ссылки «Подробнее» — зона касания */
  .feat .more, .hubcard .more { min-height: 44px; padding: 8px 0; }
  /* подвал: ссылки в две колонки, реквизиты мельче */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 26px 20px; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .footer-col h4 { margin-bottom: 10px; }
  .footer-col a { padding: 5px 0; font-size: .86rem; }
  .footer-req { font-size: .78rem; }
  .site-footer .footer-grid { margin-bottom: 32px; }
}
/* крупные касания: минимум 44px у кликабельных элементов меню и FAQ */
@media (pointer: coarse) {
  .faq-item button, .faq-q { min-height: 44px; }
  .btn { min-height: 44px; }
}

/* ═══ Экран мака на телефоне: читаемый макет 520×325 ═════════════ */
/* Экраны свёрстаны в px под 1200; на телефоне они масштабируются в 0,3 и текст 4px.
   На ≤760 макет переверстан под 520px (масштаб ≈0,7): без рейла, KPI 2×2, панели в колонку. */
@media (max-width: 760px) {
  .mac-screen .fit[data-fit="1200"] { width: 520px; height: 325px; }
  .mac-screen .app-rail { display: none; }
  .mac-screen .app-main { padding: 14px 16px; }
  .mac-screen .glassbar { gap: 8px; padding: 5px 6px 5px 12px; margin-bottom: 12px; }
  .mac-screen .glassbar .ey { display: none; }
  .mac-screen .seg { flex: 1; min-width: 0; overflow: hidden; }
  .mac-screen .seg span { padding: 6px 10px; font-size: 12px; white-space: nowrap; }
  .mac-screen .app h2.t { font-size: 20px; }
  .mac-screen .app .sub { font-size: 12px; margin-bottom: 10px; }
  .mac-screen .widgets { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
  .mac-screen .widget { min-height: 76px; padding: 10px 12px; border-radius: 16px; }
  .mac-screen .widget .v { font-size: 24px; margin-top: 4px; }
  .mac-screen .widget .c { font-size: 11px; }
  .mac-screen .widget .ic { width: 24px; height: 24px; top: 10px; right: 10px; border-radius: 8px; }
  .mac-screen .widget .ic svg { width: 12px; height: 12px; }
  .mac-screen .app-main > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .mac-screen .panel { padding: 12px 14px; }
  .mac-screen .site-nav { display: none !important; }
  .mac-screen .tcard .addr { display: none; }
}