/* Каркас страниц сайта Медиа Обс поверх компонентов дизайн-системы (mo-*) */
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); }
.page { font-family: var(--font-text); color: var(--ink); background: var(--paper); }
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 32px; box-sizing: border-box; }
.sticky { position: sticky; top: 0; z-index: 10; background: var(--paper); }
.sticky .mo-header { max-width: var(--container); margin: 0 auto; box-sizing: border-box; padding: 0 32px; border-bottom: 0; }
.sticky { border-bottom: 1px solid var(--line); }
.section { padding: var(--space-24) 0; }
.section--tight { padding: var(--space-16) 0; }
.section--sunken { background: var(--surface-sunken); }
.kicker { display: block; margin-bottom: var(--space-3); font: 500 12px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.h1 { margin: 0; font: 600 36px/42px var(--font-display); letter-spacing: -0.01em; }
.h-display { margin: 0; font: 700 52px/56px var(--font-display); letter-spacing: -0.02em; }
.lead { margin: var(--space-4) 0 0; font: 400 18px/28px var(--font-text); color: var(--ink-muted); max-width: var(--measure); }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-8); margin-bottom: var(--space-12); flex-wrap: wrap; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.hero-wrap { padding-top: var(--space-6); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8); }
.foot-note { margin-top: var(--space-6); font: 400 13px/18px var(--font-text); color: var(--ink-subtle); }
.step { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-4); border-top: 2px solid var(--ink); }
.step__n { font: 700 32px/36px var(--font-display); color: var(--rec); }
.step__t { margin: 0; font: 600 20px/28px var(--font-text); }
.step__d { margin: 0; color: var(--ink-muted); }
.money { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-8); align-items: center; margin-top: var(--space-12); padding: var(--space-8); border-radius: var(--radius-l); background: var(--surface); border: 1px solid var(--line); }
.money p { margin: 0; }
.photo { aspect-ratio: 4 / 5; border-radius: var(--radius-l); background: var(--surface); border: 1.5px dashed var(--line-strong); display: grid; place-items: center; text-align: center; padding: var(--space-6); font: 500 12px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-subtle); }
.contact { display: grid; grid-template-columns: 1fr 560px; gap: var(--space-12); align-items: start; }
.contact__list { list-style: none; margin: var(--space-8) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); font: 600 18px/26px var(--font-text); }
.contact__list a { color: var(--ink); text-decoration: none; }
.contact__list span { display: block; font: 400 14px/20px var(--font-text); color: var(--ink-subtle); }
.case-row { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--space-6); align-items: start; }
.mo-service .mo-formula { font-size: 13px; line-height: 18px; align-self: flex-start; }
.case-side { display: flex; flex-direction: column; gap: var(--space-6); }
.other { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-8); }
.other__label { font: 600 15px/20px var(--font-text); color: var(--ink-muted); }
.footer-wrap { padding: 0 32px var(--space-6); max-width: var(--container); margin: 0 auto; box-sizing: border-box; }

/* /max */
.path { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-8); border-radius: var(--radius-l); background: var(--surface); border: 1px solid var(--line); scroll-margin-top: 96px; }
.path--dark { background: var(--night); border-color: var(--night); color: var(--on-night); }
.path__title { margin: 0; font: 700 32px/38px var(--font-display); letter-spacing: -0.01em; }
.path__who { margin: 0; font: 400 17px/26px var(--font-text); color: var(--ink-muted); }
.path--dark .path__who { color: var(--on-night); opacity: .78; }
.path ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.path li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; }
.path li::before { content: ""; width: 8px; height: 8px; margin: 8px 0 0 4px; border-radius: 50%; background: var(--rec); }
.path__plan { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); border-radius: var(--radius-m); background: var(--surface-sunken); color: var(--ink); }
.path--dark .path__plan { background: rgba(247,245,242,.08); color: var(--on-night); }
.path__plan-row { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.path__plan-num { font: 700 40px/44px var(--font-display); letter-spacing: -0.02em; }
.path__plan-num--rec { color: var(--rec); }
.path__plan small { font: 400 14px/20px var(--font-text); opacity: .8; }
.law { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.law__item { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); border-radius: var(--radius-m); background: var(--surface); border: 1px solid var(--line); }
.law__item h3 { margin: 0; font: 600 18px/24px var(--font-text); }
.law__item p { margin: 0; color: var(--ink-muted); font-size: 15px; line-height: 22px; }
.choice { display: flex; flex-wrap: wrap; gap: var(--space-2); border: 0; padding: 0; margin: 0; }
.choice legend { padding: 0; margin-bottom: var(--space-2); font: 600 14px/20px var(--font-text); }
.choice label { position: relative; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--radius-pill); border: 1.5px solid var(--line-strong); font: 500 15px/20px var(--font-text); cursor: pointer; }
.choice input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.choice input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Нишевые страницы: этапы, медиаплан, калькулятор, вопросы */
.stages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); counter-reset: st; }
.stages--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stage { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-8); border-radius: var(--radius-l); background: var(--surface); border: 1px solid var(--line); }
.stage--dark { background: var(--night); border-color: var(--night); color: var(--on-night); }
.stage__when { font: 500 12px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--rec-text); }
.stage--dark .stage__when { color: var(--rec); }
.stage__title { margin: 0; font: 700 28px/34px var(--font-display); letter-spacing: -0.01em; }
.stage p { margin: 0; color: var(--ink-muted); }
.stage--dark p { color: var(--on-night); opacity: .78; }
.stage ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.stage li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; }
.stage li::before { content: ""; width: 8px; height: 8px; margin: 8px 0 0 4px; border-radius: 50%; background: var(--rec); }
.plan { display: grid; grid-template-columns: 1fr 380px; gap: var(--space-8); align-items: start; }
.plan__table { width: 100%; border-collapse: collapse; font: 400 16px/24px var(--font-text); background: var(--surface); border-radius: var(--radius-l); overflow: hidden; }
.plan__table th, .plan__table td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.plan__table th { font: 500 12px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); background: var(--surface-sunken); }
.plan__table tr:last-child td { border-bottom: 0; }
.plan__table td small { display: block; color: var(--ink-subtle); font-size: 13px; line-height: 18px; }
.plan__num { font: 600 20px/26px var(--font-display); white-space: nowrap; }
.plan__num--rec { color: var(--rec-text); }
.calc { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-8); border-radius: var(--radius-l); background: var(--night); color: var(--on-night); }
.calc__title { margin: 0; font: 600 20px/28px var(--font-text); }
.calc label { display: flex; flex-direction: column; gap: var(--space-2); font: 500 14px/20px var(--font-text); }
.calc input[type="range"] { width: 100%; accent-color: var(--rec); min-height: 44px; }
.calc__budget { font: 700 36px/40px var(--font-display); letter-spacing: -0.02em; }
.calc__out { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; }
.calc__out div { display: flex; justify-content: space-between; gap: var(--space-4); align-items: baseline; padding-top: var(--space-3); border-top: 1px solid rgba(247,245,242,.16); }
.calc__out dt { font: 400 15px/22px var(--font-text); opacity: .8; }
.calc__out dd { margin: 0; font: 600 20px/26px var(--font-display); color: var(--rec); text-align: right; white-space: nowrap; }
.calc small { font: 400 13px/18px var(--font-text); opacity: .7; }
.calc__note { margin: 0; font: 400 13px/18px var(--font-text); opacity: .8; }
.calc__note b { font-weight: 600; color: var(--on-night); white-space: nowrap; }
.faq { display: flex; flex-direction: column; max-width: 880px; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary { display: flex; justify-content: space-between; gap: var(--space-4); align-items: center; min-height: 44px; padding: var(--space-6) 0; font: 600 19px/26px var(--font-text); cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center; font: 500 20px/1 var(--font-text); color: var(--ink-muted); }
.faq__item[open] summary::after { content: "−"; background: var(--ink); border-color: var(--ink); color: var(--paper); }
.faq__a { padding: 0 0 var(--space-6); max-width: var(--measure); color: var(--ink-muted); }
.faq__a p { margin: 0; }

/* Вторая очередь: ссылка на аудит у формы, список проблем в примере аудита, форма в первом экране */
.contact__alt { margin: var(--space-6) 0 0; font: 400 15px/22px var(--font-text); color: var(--ink-muted); }
.audit-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; color: var(--ink-muted); }
.audit-list strong { color: var(--ink); }
.mo-hero .mo-form { color: var(--ink); scroll-margin-top: 96px; }
.mo-hero > * { min-width: 0; }

/* Телефон: первый экран отвечает на запрос и показывает кнопку без прокрутки (02.10.2026) */
@media (max-width: 600px) {
  .mo-hero { padding: var(--space-8) 20px; gap: 0; }
  .mo-hero__art { display: none; }
  .mo-hero__kicker { margin-bottom: var(--space-4); }
  .mo-hero__title { font-size: 32px; line-height: 36px; overflow-wrap: break-word; hyphens: auto; }
  .mo-hero__lead { margin-top: var(--space-4); font-size: 16px; line-height: 24px; }
  .mo-hero__actions { margin-top: var(--space-6); }
  .mo-hero__actions .mo-btn { flex: 1 1 100%; justify-content: center; }
}

@media (max-width: 900px) {
  .wrap { padding: 0 16px; }
  .sticky .mo-header { padding: 0 16px; }
  .section { padding: var(--space-16) 0; }
  .h1 { font-size: 26px; line-height: 32px; }
  .h-display { font-size: 32px; line-height: 36px; }
  .grid-3, .grid-2, .grid-4, .law, .case-row, .contact, .money { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
  .stats .mo-metric__value { font-size: 36px; line-height: 40px; }
  .mo-hero__art { max-width: 180px; }
  .footer-wrap { padding: 0 16px var(--space-4); }
  .hero-wrap { padding-top: var(--space-4); }
  .mo-hero { border-radius: var(--radius-l); }
  .mo-case, .mo-service, .mo-form, .path, .money { padding: var(--space-6); }
  .mo-case__metrics { grid-template-columns: 1fr 1fr; }
  .stages, .stages--3, .plan { grid-template-columns: 1fr; }
  .stage, .calc { padding: var(--space-6); }
  .stage__title { font-size: 24px; line-height: 30px; }
  .plan__table, .plan__table tbody, .plan__table tr, .plan__table td { display: block; }
  .plan__table thead { display: none; }
  .plan__table tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 16px; border-bottom: 1px solid var(--line); }
  .plan__table tr:last-child { border-bottom: 0; }
  .plan__table td { padding: 0; border: 0; }
  .plan__table td:first-child { grid-column: 1 / -1; font-weight: 600; }
  .plan__table td:last-child { text-align: right; }
  .faq__item summary { font-size: 17px; line-height: 24px; padding: var(--space-4) 0; }
  .path__title { font-size: 26px; line-height: 32px; }
}

/* ---------- Динамика (02.10.2026): появление блоков, полосы план/факт, бегущая строка, наведение ---------- */
.js-reveal :is(.mo-case, .stage, .step, .law__item, .path, .plan, .faq, .mock) { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.js-reveal :is(.mo-case, .stage, .step, .law__item, .path, .plan, .faq, .mock).is-in { opacity: 1; transform: none; }
.js-reveal .grid-4 > .step:nth-child(2), .js-reveal :is(.grid-2, .stages) > :nth-child(2) { transition-delay: .08s; }
.js-reveal .grid-4 > .step:nth-child(3), .js-reveal .stages > :nth-child(3) { transition-delay: .16s; }
.js-reveal .grid-4 > .step:nth-child(4) { transition-delay: .24s; }
.mo-case, .stage, .path, .law__item { transition: transform .25s ease, box-shadow .25s ease, opacity .6s ease; }
@media (hover: hover) {
  .mo-case:hover, .stage:hover, .law__item:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgba(23,20,26,.35); }
}

.bars { display: flex; flex-direction: column; gap: 6px; margin-top: var(--space-3); }
.bars__row { display: grid; grid-template-columns: 74px 1fr auto; gap: 8px; align-items: center; font: 500 11px/14px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-subtle); }
.bars__row i { height: 8px; border-radius: 4px; background: var(--line-strong); transform-origin: left; transform: scaleX(0); transition: transform 1s cubic-bezier(.2,.7,.2,1) .15s; width: calc(var(--v) * 100%); }
.bars__row--fact i { background: var(--rec); transition-delay: .45s; }
.bars__row b { font: 600 12px/14px var(--font-text); color: var(--ink); text-transform: none; letter-spacing: 0; white-space: nowrap; }
.bars.is-in .bars__row i { transform: scaleX(1); }

.ticker { overflow: hidden; border-block: 1px solid var(--line); background: var(--surface); }
.ticker__track { display: flex; width: max-content; gap: 40px; padding: 18px 0; animation: ticker 38s linear infinite; font: 600 18px/24px var(--font-display); letter-spacing: -0.01em; white-space: nowrap; }
.ticker__track span { display: inline-flex; align-items: center; gap: 40px; }
.ticker__track span::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--rec); }
@keyframes ticker { to { transform: translateX(-50%); } }

.mo-hero__art svg.is-live .mo-orbit:nth-of-type(2) { stroke-dasharray: 6 10; animation: orbit-dash 24s linear infinite; }
@keyframes orbit-dash { to { stroke-dashoffset: -320; } }

@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
  .js-reveal :is(.mo-case, .stage, .step, .law__item, .path, .plan, .faq, .mock) { opacity: 1; transform: none; }
}

/* ---------- «Как это выглядит»: макеты рекламы без чужих логотипов ---------- */
.mocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-8); align-items: end; }
.mock { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.mock figcaption { max-width: 300px; text-align: center; font: 400 14px/20px var(--font-text); color: var(--ink-muted); }
.mock figcaption b { display: block; margin-bottom: 2px; font: 600 15px/20px var(--font-text); color: var(--ink); }
.mock-ad { font: 500 10px/12px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; opacity: .7; }

.mock-phone { position: relative; width: 220px; aspect-ratio: 9 / 18.5; border-radius: 34px; padding: 10px; background: var(--night); box-shadow: 0 24px 48px -28px rgba(23,20,26,.6); }
.mock-phone__screen { position: relative; height: 100%; border-radius: 26px; overflow: hidden; background: radial-gradient(120% 70% at 30% 20%, #3a2f3c 0%, #17141a 60%); color: #f7f5f2; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px 14px; }
.mock-phone__screen::before { content: ""; position: absolute; inset: 22% -30% auto; height: 46%; border: 1.5px solid rgba(247,245,242,.25); border-radius: 50%; transform: rotate(-34deg); }
.mock-phone__screen::after { content: ""; position: absolute; top: 30%; right: 16%; width: 14px; height: 14px; border-radius: 50%; background: var(--rec); box-shadow: 0 0 0 6px rgba(226,54,44,.18); animation: rec-pulse 2s ease-in-out infinite; }
@keyframes rec-pulse { 50% { box-shadow: 0 0 0 12px rgba(226,54,44,0); } }
.mock-phone__top { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; justify-content: space-between; align-items: center; z-index: 1; }
.mock-age { display: inline-grid; place-items: center; min-width: 28px; height: 20px; padding: 0 6px; border-radius: 6px; border: 1px solid rgba(247,245,242,.6); font: 600 11px/1 var(--font-text); }
.mock-phone__side { position: absolute; right: 10px; bottom: 96px; display: flex; flex-direction: column; gap: 12px; align-items: center; z-index: 1; font: 600 10px/12px var(--font-text); }
.mock-phone__side i { display: block; width: 26px; height: 26px; border-radius: 50%; background: rgba(247,245,242,.16); }
.mock-phone__text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; padding-right: 36px; }
.mock-phone__text strong { font: 700 15px/18px var(--font-display); }
.mock-phone__text span { font: 400 12px/16px var(--font-text); opacity: .8; }
.mock-btn { display: inline-flex; justify-content: center; align-items: center; height: 34px; border-radius: 999px; background: var(--rec-fill); color: #fff; font: 600 12px/1 var(--font-text); margin-top: 6px; }
.mock-progress { height: 3px; border-radius: 2px; background: rgba(247,245,242,.2); overflow: hidden; margin-top: 10px; }
.mock-progress::after { content: ""; display: block; height: 100%; width: 40%; background: #f7f5f2; animation: progress 6s linear infinite; }
@keyframes progress { from { width: 0; } to { width: 100%; } }

.mock-post { width: 280px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); padding: 14px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 24px 48px -32px rgba(23,20,26,.45); }
.mock-post__head { display: flex; gap: 10px; align-items: center; font: 600 13px/16px var(--font-text); }
.mock-post__head small { display: block; font: 400 11px/14px var(--font-text); color: var(--ink-subtle); }
.mock-ava { width: 34px; height: 34px; border-radius: 50%; background: var(--night); position: relative; flex: none; }
.mock-ava::after { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: var(--rec); }
.mock-post__img { aspect-ratio: 16 / 10; border-radius: 14px; background: radial-gradient(110% 80% at 70% 30%, #3a2f3c, #17141a 65%); position: relative; overflow: hidden; }
.mock-post__img::before { content: ""; position: absolute; left: -10%; right: -10%; top: 30%; height: 50%; border: 1.5px solid rgba(247,245,242,.3); border-radius: 50%; transform: rotate(-34deg); }
.mock-post__img::after { content: ""; position: absolute; left: 28%; top: 44%; width: 12px; height: 12px; border-radius: 50%; background: var(--rec); }
.mock-post p { margin: 0; font: 400 13px/18px var(--font-text); color: var(--ink); }
.mock-post__foot { display: flex; justify-content: space-between; font: 400 11px/14px var(--font-text); color: var(--ink-subtle); }
.mock-post .mock-btn { margin: 0; }

.mock-feed { width: 300px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); padding: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; box-shadow: 0 24px 48px -32px rgba(23,20,26,.45); }
.mock-feed__item { display: flex; flex-direction: column; gap: 5px; }
.mock-feed__item i { aspect-ratio: 1; border-radius: 10px; background: var(--surface-sunken); }
.mock-feed__item b { height: 8px; width: 70%; border-radius: 4px; background: var(--line-strong); opacity: .5; }
.mock-feed__item em { height: 6px; width: 50%; border-radius: 3px; background: var(--line); }
.mock-feed__ad { grid-column: 1 / -1; display: grid; grid-template-columns: 96px 1fr; gap: 10px; align-items: center; padding: 10px; border-radius: 14px; background: var(--night); color: #f7f5f2; animation: ad-glow 3s ease-in-out infinite; }
.mock-feed__ad i { aspect-ratio: 1; border-radius: 10px; background: radial-gradient(100% 100% at 30% 30%, #e2362c 0 18%, transparent 19%), radial-gradient(120% 90% at 60% 40%, #3a2f3c, #17141a); }
.mock-feed__ad strong { display: block; font: 700 13px/16px var(--font-display); margin: 2px 0 4px; }
.mock-feed__ad span { font: 400 11px/14px var(--font-text); opacity: .8; }
@keyframes ad-glow { 50% { box-shadow: 0 0 0 4px rgba(226,54,44,.35); } }

.mock-tv { width: 340px; display: flex; flex-direction: column; align-items: center; }
.mock-tv__screen { width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; border: 8px solid var(--night); background: radial-gradient(120% 90% at 30% 30%, #3a2f3c, #17141a 65%); position: relative; overflow: hidden; color: #f7f5f2; box-shadow: 0 24px 48px -28px rgba(23,20,26,.6); }
.mock-tv__screen::before { content: ""; position: absolute; left: 10%; right: 10%; top: 18%; height: 64%; border: 1.5px solid rgba(247,245,242,.25); border-radius: 50%; transform: rotate(-34deg); }
.mock-tv__screen strong { position: absolute; left: 16px; bottom: 30px; font: 700 18px/22px var(--font-display); }
.mock-tv__badge { position: absolute; left: 12px; top: 10px; display: flex; gap: 6px; align-items: center; }
.mock-tv__timer { position: absolute; right: 12px; top: 10px; padding: 3px 8px; border-radius: 6px; background: rgba(23,20,26,.7); font: 500 11px/14px var(--font-mono); }
.mock-tv__screen .mock-progress { position: absolute; left: 16px; right: 16px; bottom: 14px; margin: 0; }
.mock-tv__stand { width: 34%; height: 10px; border-radius: 0 0 8px 8px; background: var(--night); }

.mock-banner { width: 320px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); padding: 12px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 24px 48px -32px rgba(23,20,26,.45); }
.mock-banner__search { height: 30px; border-radius: 10px; background: var(--surface-sunken); }
.mock-banner__slide { position: relative; border-radius: 16px; padding: 16px; min-height: 120px; background: radial-gradient(120% 120% at 85% 20%, #e2362c 0 10%, transparent 11%), linear-gradient(135deg, #2b232d, #17141a); color: #f7f5f2; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; overflow: hidden; }
.mock-banner__slide strong { font: 700 17px/20px var(--font-display); max-width: 70%; }
.mock-banner__slide .mock-btn { align-self: flex-start; padding: 0 14px; margin: 0; }
.mock-banner__dots { display: flex; gap: 6px; justify-content: center; }
.mock-banner__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.mock-banner__dots i:first-child { background: var(--ink); width: 18px; border-radius: 3px; }
.mock-banner__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mock-banner__row i { aspect-ratio: 3 / 4; border-radius: 10px; background: var(--surface-sunken); }

@media (prefers-reduced-motion: reduce) {
  .mock-phone__screen::after, .mock-progress::after, .mock-feed__ad { animation: none; }
}
.section--night { background: var(--night); color: var(--on-night); }
.section--night .kicker, .section--night .lead, .section--night .foot-note { color: var(--on-night); opacity: .72; }
.section--night .mock figcaption { color: rgba(247,245,242,.72); }
.section--night .mock figcaption b { color: var(--on-night); }
.section--night .mock-phone { box-shadow: 0 0 0 1px rgba(247,245,242,.12), 0 24px 48px -28px rgba(0,0,0,.8); }
.section--night .mock-tv__screen { border-color: #2b262e; }
.section--night .mock-tv__stand { background: #2b262e; }
.mock-post, .mock-feed, .mock-banner { color: var(--ink); }
.section--night .mock-phone { background: #2b262e; }
@media (min-width: 901px) { .mo-hero__title { font-size: clamp(38px, 3.9vw, 56px); line-height: 1.08; } }

/* ---------- Цифры не переносятся и не вылезают из колонки (правка 02.10.2026) ---------- */
.mo-metric { container-type: inline-size; }
.mo-metric__value { white-space: nowrap; font-size: min(64px, 19cqi); line-height: 1; }
.mo-metric--m .mo-metric__value { font-size: min(40px, 19cqi); line-height: 1.1; }
.stats .mo-metric__value { font-size: min(64px, 19cqi); }
@media (max-width: 900px) { .stats .mo-metric__value { font-size: min(40px, 19cqi); } }
.mo-metric .mo-metric__value--long { font-size: min(40px, 11cqi); }
.path__plan-num, .plan__num, .calc__out dd { white-space: nowrap; }
.path__plan-num { font-size: clamp(28px, 7vw, 40px); }

/* Макеты рекламы не шире своей колонки */
.mock { min-width: 0; }
.mock-post, .mock-feed, .mock-banner, .mock-tv { max-width: 100%; }
.mock-phone { max-width: 100%; }

/* Узкие планшеты: три карточки в ряд не помещают длинные заголовки */
@media (min-width: 901px) and (max-width: 1100px) {
  .stages--3, .law { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stage__title { font-size: 24px; line-height: 30px; }
}
.stage__title, .path__title, .h1, .h-display { overflow-wrap: break-word; hyphens: auto; }

/* Шапка и форма на узких экранах (правка 02.10.2026) */
@media (min-width: 901px) and (max-width: 1180px) { .mo-header__nav { gap: 14px; font-size: 14px; } }
@media (min-width: 901px) and (max-width: 1020px) { .mo-header__nav { display: none; } .mo-header .mo-btn { margin-left: auto; } }
@media (max-width: 400px) { .mo-header__logo { height: 24px; } .mo-header .mo-btn { padding-left: 14px; padding-right: 14px; font-size: 13px; } }
@media (max-width: 1100px) { .contact { grid-template-columns: 1fr; } }
.mo-tag { max-width: 100%; white-space: normal; height: auto; min-height: 26px; padding-top: 4px; padding-bottom: 4px; line-height: 1.25; }
.bars__row { grid-template-columns: 52px minmax(12px, 1fr) auto; font-size: 10px; }
.mock-feed__ad { grid-template-columns: 32% minmax(0, 1fr); }
.mock-feed__ad > div { min-width: 0; overflow-wrap: break-word; }
.contact > * { min-width: 0; }
.bars__row { grid-template-columns: 44px minmax(10px, 1fr) auto; gap: 6px; }
.bars__row b { font-size: 11px; }
.mo-form__title, .mo-case__title { overflow-wrap: break-word; hyphens: auto; }

/* Фото первого экрана нишевых страниц (генерация, лежат на нашем хостинге) */
.mo-hero__art--photo { aspect-ratio: 4 / 3; max-width: 540px; }
.mo-hero__art--photo img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 28px;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
  animation: hero-drift 18s ease-in-out infinite alternate; }
.hero-rec { position: absolute; top: 16%; left: 16%; display: inline-flex; align-items: center; gap: 6px;
  font: 600 12px/1 var(--font-body, sans-serif); letter-spacing: .12em; color: #fff; opacity: .85; }
.hero-rec::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rec); animation: rec-blink 1.6s steps(2, start) infinite; }
@keyframes hero-drift { from { transform: scale(1); } to { transform: scale(1.06) translate(-1%, -1%); } }
@keyframes rec-blink { to { visibility: hidden; } }
@media (max-width: 900px) { .mo-hero__art--photo { max-width: 340px; } }
@media (prefers-reduced-motion: reduce) { .mo-hero__art--photo img, .hero-rec::before { animation: none; } }

/* Блок «Команда» на главной (вместо блока об основателе, 02.10.2026) */
.team__wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-12); align-items: center; }
.team .h1 { color: var(--on-night); }
.team__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); margin: var(--space-12) 0 var(--space-6); }
.team .mo-metric__value:not(.mo-metric__value--accent), .team .mo-metric__label { color: var(--on-night); }
.team .mo-metric__note { color: rgba(247,245,242,.6); }
.team__orbit { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1; justify-self: center; }
.team__orbit svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.team__ring { fill: none; stroke: rgba(247,245,242,.22); stroke-width: 1.5; }
.team__ring--dash { stroke: var(--rec); stroke-opacity: .7; stroke-dasharray: 6 10; animation: orbit-dash 24s linear infinite; }
.team__mark { position: absolute; left: 50%; top: 50%; width: 40%; transform: translate(-50%, -50%); }
.orbit-chip { position: absolute; transform: translate(-50%, -50%); padding: 7px 14px; border-radius: 999px; white-space: nowrap;
  font: 600 13px/1 var(--font-text); color: var(--on-night); background: #241f27; border: 1px solid rgba(247,245,242,.16);
  box-shadow: 0 10px 24px -14px rgba(0,0,0,.9); animation: chip-float 6s ease-in-out infinite alternate; }
.orbit-chip:nth-of-type(3n+1) { border-color: rgba(226,54,44,.55); }
@keyframes chip-float { from { margin-top: -5px; } to { margin-top: 5px; } }
@media (max-width: 1100px) { .team__wrap { grid-template-columns: 1fr; } .team__orbit { max-width: 440px; } }
@media (max-width: 700px) { .team__stats { grid-template-columns: 1fr; gap: var(--space-6); } .orbit-chip { font-size: 11px; padding: 5px 10px; } .team__orbit { max-width: 330px; } }
@media (prefers-reduced-motion: reduce) { .orbit-chip, .team__ring--dash { animation: none; } }

/* ---------- Генератор медиаплана (/mediaplan) ---------- */
.mp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.mp__form { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-8); border-radius: var(--radius-l); background: var(--surface); border: 1px solid var(--line); }
.mp__step { display: flex; flex-direction: column; gap: var(--space-3); border: 0; padding: 0; margin: 0; min-width: 0; }
.mp__step > legend, .mp__label { padding: 0; margin-bottom: var(--space-2); font: 500 12px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.mp__select { width: 100%; max-width: 100%; box-sizing: border-box; min-height: 48px; padding: 0 16px; border-radius: var(--radius-m); border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink); font: 500 16px/22px var(--font-text); }
.mp__plats { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line); }
.mp__plat { display: grid; grid-template-columns: 22px minmax(0, 1fr) 84px; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.mp__plat input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 0; border-radius: var(--radius-s); border: 1.5px solid var(--line-strong); background: var(--surface); display: grid; place-content: center; cursor: pointer; }
.mp__plat input[type="checkbox"]::after { content: ""; width: 10px; height: 6px; border-left: 2.5px solid var(--on-rec); border-bottom: 2.5px solid var(--on-rec); transform: translateY(-1px) rotate(-45deg); opacity: 0; }
.mp__plat input[type="checkbox"]:checked { background: var(--rec-fill); border-color: var(--rec-fill); }
.mp__plat input[type="checkbox"]:checked::after { opacity: 1; }
.mp__plat-name { font: 500 15px/20px var(--font-text); }
.mp__plat-name small { display: block; font: 400 13px/18px var(--font-text); color: var(--ink-subtle); }
.mp__share { display: flex; align-items: center; gap: 4px; font: 500 14px/20px var(--font-mono); }
.mp__share input { width: 56px; min-height: 40px; padding: 0 8px; border-radius: var(--radius-s); border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink); font: inherit; text-align: right; }
.mp__plat--off .mp__plat-name, .mp__plat--off .mp__share { opacity: .45; }
.mp__sum { font: 400 13px/18px var(--font-text); color: var(--ink-muted); }
.mp__sum--bad { color: var(--rec-text); font-weight: 600; }
.mp__budget { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: var(--space-4); align-items: end; }
.mp__budget input[type="range"] { width: 100%; accent-color: var(--rec); min-height: 44px; }
.mp__num { min-height: 48px; padding: 0 14px; border-radius: var(--radius-m); border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink); font: 600 18px/24px var(--font-text); width: 100%; box-sizing: border-box; }
.mp__out { display: flex; flex-direction: column; gap: var(--space-6); position: sticky; top: calc(var(--header-height) + 16px); }
.mp__res { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-8); border-radius: var(--radius-l); background: var(--night); color: var(--on-night); }
.mp__res-head { display: flex; justify-content: space-between; gap: var(--space-4); align-items: baseline; flex-wrap: wrap; }
.mp__res-title { margin: 0; font: 600 20px/28px var(--font-text); }
.mp__total { font: 700 36px/40px var(--font-display); letter-spacing: -0.02em; }
.mp__total small { display: block; margin-top: 4px; font: 400 14px/20px var(--font-text); opacity: .75; letter-spacing: 0; }
.mp__kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0; }
.mp__kpis div { padding: 14px 16px; border-radius: var(--radius-m); background: rgba(247,245,242,.06); }
.mp__kpis dt { font: 400 13px/18px var(--font-text); opacity: .75; }
.mp__kpis dd { margin: 4px 0 0; font: 600 22px/28px var(--font-display); white-space: nowrap; }
.mp__kpis .mp__kpi--main { grid-column: 1 / -1; background: var(--rec-fill); }
.mp__kpis .mp__kpi--main dd { font-size: 30px; line-height: 36px; }
.mp__bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mp__bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; font: 400 14px/20px var(--font-text); }
.mp__bars b { font: 500 13px/20px var(--font-mono); white-space: nowrap; }
.mp__bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: rgba(247,245,242,.12); overflow: hidden; }
.mp__bar i { display: block; height: 100%; background: var(--rec); border-radius: 3px; }
.mp__note { margin: 0; font: 400 13px/18px var(--font-text); opacity: .75; }
.mp__step.choice { flex-direction: row; flex-wrap: wrap; gap: var(--space-2); }
.mp__step.choice > legend { width: 100%; }
.mp__hint { margin: 0; font: 400 13px/18px var(--font-text); color: var(--ink-subtle); }
.mp__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); margin-top: var(--space-2); }
.mp__mini { display: flex; flex-direction: column; gap: 6px; font: 500 14px/20px var(--font-text); }
.mp__done { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-8); border-radius: var(--radius-l); background: var(--rec-tint); border: 1.5px solid var(--rec-fill); }
.mp__done p { margin: 0; font: 400 16px/24px var(--font-text); }
@media (max-width: 600px) { .mp__done { padding: var(--space-5); } }
.mp__done[hidden], .mp__done [hidden], [data-mp-extra][hidden], [data-pay-done][hidden] { display: none; }
.pay-status { margin: 0; font: 500 14px/20px var(--font-text); color: var(--ink-muted); }
.pay-status--bad { color: var(--rec-text); }
.pay-status[hidden] { display: none; }
.pay-files { display: grid; gap: var(--space-2); }
.pay-files:empty { display: none; }
.mp__buy .mo-btn:disabled { opacity: .45; cursor: not-allowed; }
.mp__buy { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-8); border-radius: var(--radius-l); background: var(--surface); border: 1.5px solid var(--ink); }
.mp__buy-head { display: flex; justify-content: space-between; gap: var(--space-4); align-items: baseline; }
.mp__buy-title { margin: 0; font: 600 20px/28px var(--font-text); }
.mp__price { font: 700 30px/36px var(--font-display); white-space: nowrap; }
.mp__buy ul { margin: 0; padding-left: 20px; font: 400 15px/22px var(--font-text); color: var(--ink-muted); }
.mp__buy .mo-btn { width: 100%; justify-content: center; }
.mp__pay-note { margin: 0; font: 400 13px/18px var(--font-text); color: var(--ink-subtle); }
.mp__pay-note a { color: inherit; }
.sheet { overflow-x: auto; border-radius: var(--radius-m); border: 1px solid var(--line); background: var(--surface); }
.sheet table { border-collapse: collapse; min-width: 720px; width: 100%; font: 400 13px/18px var(--font-text); }
.sheet th, .sheet td { padding: 8px 10px; border: 1px solid var(--line); text-align: right; white-space: nowrap; }
.sheet th { background: var(--ink); color: var(--paper); font-weight: 600; text-align: center; }
.sheet td:first-child { text-align: left; }
.sheet .sheet__in { color: #1a4fd6; }
.sheet .sheet__tot td { font-weight: 700; background: var(--surface-sunken); }
.sheet__tabs { display: flex; gap: 2px; padding: 0 8px; background: var(--surface-sunken); font: 500 12px/28px var(--font-text); }
.sheet__tabs span { padding: 0 12px; color: var(--ink-muted); }
.sheet__tabs span:first-child { background: var(--surface); color: var(--ink); }
@media (max-width: 900px) {
  .mp { grid-template-columns: 1fr; }
  .mp__out { position: static; }
  .mp__form, .mp__res, .mp__buy { padding: var(--space-6); }
}
@media (max-width: 420px) {
  .mp__kpis { grid-template-columns: 1fr; }
  .mp__budget, .mp__pair { grid-template-columns: 1fr; }
  .mp__plat { grid-template-columns: 22px minmax(0, 1fr) 72px; }
}

/* ---------- Витрина /shop и страницы товаров ---------- */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-6); }
.shop-card { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-8); border-radius: var(--radius-l); background: var(--surface); border: 1px solid var(--line); }
.shop-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.shop-card__title { margin: 0; font: 600 22px/28px var(--font-text); }
.shop-card__text { margin: 0; flex: 1; font: 400 16px/24px var(--font-text); color: var(--ink-muted); }
.shop-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.shop-card__price { font: 700 26px/32px var(--font-display); white-space: nowrap; }
.audit-buy__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-2) var(--space-4); }
.audit-buy__head .mo-form__title { margin: 0; }
@media (max-width: 600px) { .audit-buy .mp__price { font-size: 24px; line-height: 30px; } }
.audit-buy .mo-btn { width: 100%; justify-content: center; }
@media (max-width: 420px) { .shop-grid { grid-template-columns: 1fr; } .shop-card { padding: var(--space-6); } }

/* /ii-sistema: анкета, ступени, цена в первом экране (06.10.2026) */
.ii-price { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-8); border-radius: var(--radius-l); border: 1.5px solid rgba(255,255,255,.18); color: var(--on-night, #fff); max-width: 340px; margin-left: auto; }
.ii-price__label { font: 500 12px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.ii-price__value { font: 700 48px/52px var(--font-display); }
.ii-price__note { font: 400 15px/22px var(--font-text); opacity: .76; }
.ii-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ii-tiers__main { border-color: var(--rec-fill); box-shadow: 0 0 0 1.5px var(--rec-fill) inset; }
.ii-soon { font: 500 14px/20px var(--font-text); color: var(--ink-subtle); }
.ii-list { margin: 0; padding-left: 20px; display: grid; gap: var(--space-3); font: 400 16px/24px var(--font-text); color: var(--ink-muted); }
.ank { display: grid; gap: var(--space-8); }
.ank__list { margin: 0; padding: 0; list-style: none; counter-reset: ank; display: grid; gap: var(--space-6); }
.ank__item { counter-increment: ank; display: grid; grid-template-columns: 40px 1fr; gap: var(--space-3); }
.ank__item::before { content: counter(ank, decimal-leading-zero); font: 700 18px/24px var(--font-display); color: var(--rec); padding-top: 2px; }
.ank__q { border: 0; padding: 0; margin: 0; min-width: 0; }
.ank__q legend { padding: 0; margin-bottom: 6px; }
.ank__opt { font-weight: 400; color: var(--ink-subtle); }
.ank__opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px var(--space-4); margin: 4px 0 6px; }
.ank__opts .mo-check { color: var(--ink); font-size: 15px; }
.ank__opts .mo-check input[type="radio"] { border-radius: 50%; }
.ank__other { margin-top: 6px; }
.ank__group { display: grid; gap: var(--space-4); }
.ank__sub .mo-field__label { font-weight: 500; color: var(--ink-muted); }
.ank__q--error textarea, .ank__q--error .ank__opts { outline: 2px solid var(--rec-text); outline-offset: 4px; border-radius: var(--radius-m); }
.ank__pay { display: grid; gap: var(--space-4); max-width: 560px; padding-top: var(--space-6); border-top: 1px solid var(--line); }
.next-step { display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); padding: var(--space-8); border-radius: var(--radius-l); background: var(--night); color: #fff; }
.next-step h2 { margin: 0 0 var(--space-2); color: #fff; }
.next-step p { margin: 0; opacity: .8; max-width: 620px; font: 400 16px/24px var(--font-text); }
@media (max-width: 900px) { .ii-tiers { grid-template-columns: 1fr; } .ii-price { margin: 0; } .next-step { flex-direction: column; align-items: flex-start; } }
@media (max-width: 600px) { .next-step .mo-btn { white-space: normal; text-align: center; width: 100%; justify-content: center; } .ank__item { grid-template-columns: 1fr; gap: 4px; } .ii-price { padding: var(--space-5); } .ii-price__value { font-size: 36px; line-height: 40px; } .next-step { padding: var(--space-6); } }

/* «Читайте в блоге» на страницах услуг (06.10.2026) */
.read-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.read-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); border-radius: var(--radius-l); background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: border-color .16s ease-out; }
.read-card:hover { border-color: var(--ink); color: var(--ink); }
.read-card__k { font: 500 12px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-subtle); }
.read-card__t { font: 600 18px/24px var(--font-text); flex: 1; }
.read-card__more { font: 500 14px/20px var(--font-text); color: var(--rec-text); }
@media (max-width: 900px) { .read-grid { grid-template-columns: 1fr; } }
.direkt-buy { align-items: start; }
@media (max-width: 600px) { .direkt-buy .mo-hero__title { font-size: 30px !important; line-height: 36px !important; } }

/* Подвал: четыре колонки (бренд, направления, продукты, контакты) — 06.10.2026 */
.mo-footer { grid-template-columns: 1.3fr 1fr 1fr 0.9fr; }
@media (max-width: 1100px) { .mo-footer { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .mo-footer { grid-template-columns: 1fr; } }
.read-card__d { font: 400 14px/20px var(--font-text); color: var(--ink-muted); }

/* ---------- Шапка: «Услуги» и «Инструменты» с выпадающими списками (07.10.2026) ---------- */
.nav2 { align-items: center; }
.nav2__item { position: relative; }
.nav2__btn { display: inline-flex; align-items: center; gap: 4px; padding: 8px 0; border: 0; background: none; color: var(--ink); font: inherit; cursor: pointer; }
.nav2__btn svg, .mburger svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform .15s; }
.nav2__btn:hover, .nav2__item.is-open .nav2__btn { color: var(--rec-text); }
.nav2__item.is-open .nav2__btn svg { transform: rotate(180deg); }
.nav2__dd { position: absolute; top: calc(100% + 10px); left: -16px; z-index: 30; display: none; background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-pop); white-space: normal; }
.nav2__item.is-open .nav2__dd { display: grid; }
@media (hover: hover) { .nav2__item:hover .nav2__dd, .nav2__item:focus-within .nav2__dd { display: grid; } .nav2__item:hover .nav2__btn { color: var(--rec-text); } }
.nav2__dd::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
/* мостик под кнопкой: у списка «Инструменты» overflow:hidden срезает ::before, курсор проваливался в щель (07.10.2026) */
@media (hover: hover) { .nav2__item::after { content: ""; position: absolute; left: -16px; right: -16px; top: 100%; height: 14px; display: none; } .nav2__item:hover::after { display: block; } }
.nav2__dd--svc { width: 480px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px; padding: 14px; }
.nav2__dd--svc a { padding: 9px 12px; border-radius: 10px; text-decoration: none; color: var(--ink); font: 500 15px/20px var(--font-text); }
.nav2__dd--svc a:hover { background: var(--surface-sunken); color: var(--ink); }
.nav2__dd--tools { width: 720px; grid-template-columns: minmax(0, 1fr) 230px; overflow: hidden; }
.dd__main { display: grid; gap: 2px; padding: 14px; }
.dd__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding: 10px 12px; border-radius: 12px; text-decoration: none; }
.dd__item:hover { background: var(--surface-sunken); }
.dd__t { font: 600 15px/20px var(--font-text); color: var(--ink); }
.dd__d { grid-column: 1; font: 400 13px/18px var(--font-text); color: var(--ink-muted); }
.dd__p { grid-row: 1 / 3; grid-column: 2; align-self: center; padding: 4px 10px; border-radius: 999px; background: #e3f1e9; color: var(--positive); font: 500 12px/16px var(--font-mono); white-space: nowrap; }
.dd__p--paid { background: var(--surface-sunken); color: var(--ink); }
.dd__side { display: flex; flex-direction: column; gap: 10px; padding: 22px; background: var(--night); color: var(--on-night); }
.dd__h { margin: 0; font: 600 16px/22px var(--font-display); }
.dd__s { margin: 0; font: 400 13px/19px var(--font-text); opacity: .75; }
.dd__links { display: grid; gap: 8px; margin-top: auto; }
.dd__links a { color: var(--on-night); font: 500 14px/20px var(--font-text); text-decoration: none; }
.dd__links a:hover { color: var(--on-night); text-decoration: underline; }
@media (min-width: 1021px) and (max-width: 1180px) { .nav2__dd--tools { left: -160px; } }

/* Меню на телефоне и узком экране */
.mburger { display: none; width: 44px; height: 44px; flex: none; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); align-items: center; justify-content: center; cursor: pointer; }
.mburger svg { width: 18px; height: 18px; }
@media (max-width: 1020px) { .mburger { display: inline-flex; } .mo-header .mo-btn { margin-left: auto; } }
.mmenu { position: fixed; left: 0; right: 0; top: 60px; bottom: 0; z-index: 40; overflow-y: auto; background: var(--paper); border-top: 1px solid var(--line); }
@media (min-width: 901px) { .mmenu { top: 72px; } }
.mmenu[hidden] { display: none; }
.mmenu__body { display: flex; flex-direction: column; gap: 20px; max-width: 560px; margin: 0 auto; padding: 20px 16px 32px; }
.mm__h { margin: 0 0 6px; font: 500 12px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-subtle); }
.mm__list { display: grid; }
.mm__a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 4px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font: 600 17px/22px var(--font-text); }
.mm__p { padding: 3px 8px; border-radius: 999px; background: #e3f1e9; color: var(--positive); font: 500 11px/16px var(--font-mono); white-space: nowrap; }
.mm__p--paid { background: var(--surface-sunken); color: var(--ink); }
.mm__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mm__chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font: 500 14px/20px var(--font-text); }
.mm__cta { display: flex; align-items: center; justify-content: center; min-height: 52px; border-radius: 999px; background: var(--rec-fill); color: #fff; text-decoration: none; font: 600 16px/20px var(--font-text); }
.mm__cta:hover { background: var(--rec-fill-hover); color: #fff; }
.mm__contacts { margin: 0; font: 400 14px/20px var(--font-text); color: var(--ink-muted); }
html.mm-open { overflow: hidden; }

/* Блок «Попробуйте сами» */
.tools-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tool-card { display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; transition: border-color .15s, transform .15s; }
.tool-card:hover { border-color: var(--ink); transform: translateY(-2px); }
.tool-card__k { font: 500 12px/16px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--positive); }
.tool-card__t { font: 600 19px/24px var(--font-display); color: var(--ink); }
.tool-card__d { font: 400 14px/20px var(--font-text); color: var(--ink-muted); }
.tool-card__more { margin-top: auto; font: 600 14px/20px var(--font-text); color: var(--rec-text); }
@media (max-width: 1100px) { .tools-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tools-strip { grid-template-columns: 1fr; } }

/* /sites: окно браузера в первом экране */
.smock { width: 100%; max-width: 440px; justify-self: center; background: #fff; color: var(--ink); border-radius: 16px; box-shadow: 0 30px 60px rgba(0,0,0,.35); overflow: hidden; font: 400 13px/18px var(--font-text); }
.smock__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #ece8e3; }
.smock__dot { width: 9px; height: 9px; border-radius: 50%; background: #cfc8c1; }
.smock__url { margin-left: 10px; flex: 1; background: #fff; border-radius: 6px; padding: 3px 10px; font: 500 11px/16px var(--font-mono); color: var(--ink-muted); }
.smock__body { display: grid; gap: 10px; padding: 16px; }
.smock__hero { display: grid; gap: 8px; padding: 16px; border-radius: 10px; background: var(--ink); color: #fff; }
.smock__line { height: 9px; border-radius: 5px; background: currentColor; opacity: .85; }
.smock__line--s { width: 55%; opacity: .45; }
.smock__btn { justify-self: start; padding: 6px 12px; border-radius: 999px; background: var(--rec); color: #fff; font-weight: 600; font-size: 12px; }
.smock__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.smock__card { height: 46px; border-radius: 8px; background: #f2eee9; }
.smock__form { display: grid; gap: 6px; padding: 12px; border: 1px solid #e4ded8; border-radius: 10px; }
.smock__input { height: 22px; border-radius: 6px; background: #f2eee9; }
.smock__check { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #4a444f; }
.smock__check i { width: 12px; height: 12px; border: 1.5px solid #8a838f; border-radius: 3px; }
.smock__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.smock__chip { padding: 3px 9px; border-radius: 999px; background: #e8f4ec; color: #1f6b3c; font: 500 11px/16px var(--font-mono); }
.price-note { margin: var(--space-4) 0 0; color: var(--ink-muted); }
@media (max-width: 900px) { .smock { max-width: 360px; } }
@media (max-width: 420px) { .mo-header > .mo-btn { display: none; } .mburger { margin-left: auto; } }

/* Файлы после оплаты: карточка на файл (07.10.2026) */
.pay-file { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s; }
.pay-file:hover { border-color: var(--ink); transform: translateY(-1px); color: var(--ink); }
.pay-file__ext { flex: none; display: grid; place-items: center; width: 44px; height: 52px; border-radius: 8px; background: var(--rec-fill); color: #fff; font: 600 11px/1 var(--font-mono); letter-spacing: .04em; }
.pay-file__ext--xlsx { background: var(--positive); }
.pay-file__ext--zip, .pay-file__ext--docx { background: var(--ink); }
.pay-file__text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pay-file__title { font: 600 16px/21px var(--font-text); overflow-wrap: anywhere; }
.pay-file__meta { font: 400 13px/18px var(--font-text); color: var(--ink-subtle); }
.pay-file__go { flex: none; padding: 8px 14px; border-radius: 999px; background: var(--rec-fill); color: #fff; font: 600 14px/1 var(--font-text); }
@media (max-width: 420px) { .pay-file__go { display: none; } }

/* /video/: пример ролика */
.vprimer { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.vprimer figure { margin: 0; }
.vprimer video, .vprimer img { display: block; width: 100%; height: auto; border-radius: 14px; background: #f6ede3; }
.vprimer figcaption { margin-top: 10px; font-size: 14px; color: var(--ink-muted); }
@media (max-width: 760px) { .vprimer { grid-template-columns: 1fr; } .vprimer__video { max-width: 300px; } .vprimer__board { overflow-x: auto; } .vprimer__board img { width: 760px; max-width: none; } }