/* NutriDesk — продающий сайт. Порт прототипа design_handoff_nutridesk_landing.
   Брейкпоинты: < 1060 — меню в бургер; < 860 — «мобильная» раскладка (sticky CTA, карусель телефонов). */

:root {
  --bg: #F7F2EC;
  --text: #1D1B1A;
  --red: #E5384F;
  --red-hover: #DB314A;
  --red-dark: #C42A40;
  --green: #2F8A5F;
  --green-2: #1E9461;
  --dark: #1E1A19;
  --dark-2: #2A2422;
  --border: #EFE9E2;
  --control: #E4DED7;
  --divider: #F1EDE8;
  --muted: #6E6862;
  --muted-2: #8A837C;
  --lead: #5E5852;
  --ink-2: #4A4541;
  --photo: #F3EDE6;
  --gutter: clamp(16px, 4vw, 40px);
  --pf: 'Playfair Display', Georgia, serif;
  --shadow-card: 0 1px 2px rgba(29,27,26,.03), 0 12px 36px rgba(29,27,26,.05);
}

/* ---------- База ---------- */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.5 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
main { display: block; }
h1, h2, h3, p, figure { margin: 0; }
button { font-family: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
[hidden] { display: none !important; }

.i { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: middle;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.i-10{font-size:10px}.i-11{font-size:11px}.i-12{font-size:12px}.i-13{font-size:13px}.i-14{font-size:14px}
.i-15{font-size:15px}.i-16{font-size:16px}.i-17{font-size:17px}.i-18{font-size:18px}.i-19{font-size:19px}
.i-20{font-size:20px}.i-21{font-size:21px}.i-22{font-size:22px}.i-26{font-size:26px}.i-72{font-size:72px}
.c-red{color:var(--red)}.c-blue{color:#3B7BE8}.c-amber{color:#B98A1E}.c-flame{color:#E5492E}
.c-green{color:var(--green)}.c-rose{color:#D9566A}.c-ok{color:var(--green-2)}

/* Пастельные тона для иконок-плашек */
.t-green{--tb:#E8F4EC;--tc:#3A9467}.t-orange{--tb:#FDEEE6;--tc:#D9744A}.t-blue{--tb:#E6F0FF;--tc:#3B7BE8}
.t-rose{--tb:#FCEBEE;--tc:#D9566A}.t-violet{--tb:#F1EAFE;--tc:#7C4DE8}.t-amber{--tb:#FBF3DD;--tc:#B98A1E}
.t-sky{--tb:#E4F4FC;--tc:#229ED9}.t-teal{--tb:#E2F5F2;--tc:#1F8F80}

.wrap { box-sizing: content-box; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
.sec { padding-block: clamp(56px, 8vw, 104px); }
.sec--sm { padding-block: clamp(48px, 7vw, 96px); }
.anchor { scroll-margin-top: 72px; }
.panel { background: #fff; border-radius: clamp(28px, 4vw, 48px); margin: 0 clamp(8px, 1.5vw, 20px); }
.panel--dark { background: var(--dark); color: #fff; }

/* ---------- Типографика ---------- */
.acc, .pf { font-family: var(--pf); font-style: italic; font-weight: 500; }
.acc { color: var(--red); }
.acc--dark { color: var(--red-dark); }
.acc--light { color: #FF6B7F; }
.h1 { font-size: clamp(38px, 6vw, 72px); line-height: 1.02; font-weight: 600; letter-spacing: -0.035em; text-wrap: balance; }
.h2 { font-size: clamp(30px, 4.4vw, 52px); line-height: 1.08; font-weight: 600; letter-spacing: -0.03em; text-wrap: balance; }
.h2--crm { font-size: clamp(30px, 4vw, 48px); }
.h2--50 { font-size: clamp(30px, 4.2vw, 50px); }
.h2--mar { font-size: clamp(34px, 5.4vw, 66px); line-height: 1.04; letter-spacing: -0.035em; }
.h2--final { font-size: clamp(32px, 4.8vw, 58px); line-height: 1.06; }
.h3 { font-size: clamp(26px, 3vw, 36px); line-height: 1.12; font-weight: 600; letter-spacing: -0.02em; }
.lead { font-size: clamp(16px, 1.6vw, 19px); color: var(--lead); text-wrap: pretty; }
.lead--sm { font-size: clamp(16px, 1.5vw, 18px); }
.lead--640 { max-width: 640px; }
.lead b { color: var(--text); }

.eyebrow { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.eyebrow--red { color: var(--red); }
.eyebrow--green { color: var(--green); }
.eyebrow--rose { color: #D9566A; }
.eyebrow--blue { color: #3B7BE8; }
.eyebrow--amber { color: #B98A1E; }
.eyebrow--amber i { background: #FFC24B; }

.sec__head { display: flex; flex-direction: column; gap: 14px; max-width: 720px; }
.sec__head--780 { gap: 16px; max-width: 780px; }
.sec__head--760 { gap: 16px; max-width: 760px; }

/* ---------- Кнопки ---------- */
.circ { flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.btn {
  display: flex; align-items: center; gap: 14px; box-sizing: border-box; max-width: 100%;
  border-radius: 999px; font-weight: 600; white-space: normal; line-height: 1.2; text-align: left;
  transition: background-color .15s, border-color .15s, transform .15s, box-shadow .15s;
}
.btn:hover { transform: translateY(-1px); }
.btn--lg { min-height: 58px; padding: 6px 8px 6px clamp(18px, 5vw, 26px); font-size: clamp(15px, 4.2vw, 17px); }
.btn--lg .circ { width: 42px; height: 42px; }
.btn--md { min-height: 56px; padding: 6px 8px 6px clamp(18px, 5vw, 24px); font-size: clamp(15px, 4.2vw, 16px); }
.btn--md .circ { width: 40px; height: 40px; }
.btn--primary { background: var(--red); color: #fff; box-shadow: 0 12px 28px rgba(229,56,79,.32), inset 0 1px 0 rgba(255,255,255,.28); }
.btn--primary:hover { background: var(--red-hover); }
.btn--primary .circ { background: #fff; color: var(--red); }
.btn--glow { box-shadow: 0 12px 28px rgba(229,56,79,.4), inset 0 1px 0 rgba(255,255,255,.28); }
.btn--glow:hover { background: #F04A60; }
.btn--secondary { background: #fff; border: 1px solid var(--control); color: var(--text); }
.btn--secondary.btn--lg { padding-left: clamp(18px, 5vw, 24px); }
.btn--secondary:hover { border-color: #CFC6BC; }
.btn--secondary .circ { background: #E8F4EC; color: var(--green); }
.btn--onred {
  min-height: 60px; padding: 6px 8px 6px clamp(18px, 5vw, 28px); background: #fff; color: var(--red-dark);
  font-weight: 700; font-size: clamp(15px, 4.2vw, 17px); box-shadow: 0 14px 30px rgba(80,0,10,.25);
}
.btn--onred:hover { background: #FFF6F7; }
.btn--onred .circ { width: 44px; height: 44px; background: var(--red); color: #fff; }

/* «Нарисованные» кнопки внутри макетов */
.fake { height: 44px; display: flex; align-items: center; gap: 10px; border-radius: 22px; font-weight: 600; font-size: 14px; white-space: nowrap; }
.fake--red { padding: 0 5px 0 18px; background: var(--red); color: #fff; }
.fake--red .circ { width: 34px; height: 34px; background: #fff; color: var(--red); }
.fake--line { padding: 0 18px; border: 1px solid var(--control); }
.pill { height: 32px; padding: 0 12px; border-radius: 16px; font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 6px; flex: none; }
.pill--line { border: 1px solid var(--control); }
.pill--red { background: var(--red); color: #fff; }
.pill--30 { height: 30px; border-radius: 15px; }

.card { background: #fff; border: 1px solid var(--border); border-radius: 28px; box-shadow: var(--shadow-card); }
.card--hover { transition: transform .2s, box-shadow .2s; }
.card--hover:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(29,27,26,.1); }

.ava { border-radius: 50%; object-fit: cover; flex: none; background: var(--photo); }
.ava--30{width:30px;height:30px}.ava--36{width:36px;height:36px}.ava--38{width:38px;height:38px}.ava--40{width:40px;height:40px}
.brand-tile { flex: none; background: var(--green); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.brand-tile--20{width:20px;height:20px;border-radius:6px;font-size:10px}
.brand-tile--22{width:22px;height:22px;border-radius:7px;font-size:11px}
.brand-tile--26{width:26px;height:26px;border-radius:8px;font-size:12px}
.brand-tile--34{width:34px;height:34px;border-radius:10px;font-size:15px}
.brand-tile--42{width:42px;height:42px;border-radius:12px}
.grow { flex: 1; min-width: 0; }
.ok { color: var(--green-2); }
.warn { color: #B76E00; }

/* Б/Ж/У */
.bju { display: flex; font-weight: 600; }
.bju span { flex: 1; text-align: center; }
.bju .b { background: #FDEEE6; color: #C0582E; }
.bju .f { background: #FDF5DC; color: #A27A10; }
.bju .u { background: #E8F4EC; color: var(--green); }
.bju--xs { gap: 4px; font-size: 8px; }
.bju--xs span { padding: 4px 0; border-radius: 8px; }
.bju--sm { gap: 5px; margin-top: 4px; font-size: 10px; }
.bju--sm span { padding: 5px 0; border-radius: 9px; }

/* Робот */
.robo { flex: none; border-radius: 50%; overflow: hidden; background: var(--bg); }
.robo video, .robo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Никогда не показывать системную кнопку «Play» поверх робота (Safari/iOS) */
.robo video::-webkit-media-controls, .robo video::-webkit-media-controls-panel,
.robo video::-webkit-media-controls-start-playback-button,
.robo video::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; opacity: 0; }
.robo--56 { width: 56px; height: 56px; }
.robo--112 { width: 112px; height: 112px; box-shadow: 0 0 0 6px #fff, 0 14px 30px rgba(29,27,26,.12); }
.robo--final { position: relative; width: clamp(150px, 18vw, 210px); height: clamp(150px, 18vw, 210px);
  box-shadow: 0 0 0 8px rgba(255,255,255,.18), 0 18px 40px rgba(80,0,10,.3); }

/* ---------- 1. Шапка ---------- */
.hdr { position: sticky; top: 0; z-index: 30; background: rgba(247,242,236,.88);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(29,27,26,.06); }
.hdr__in { max-width: 1200px; margin: 0 auto; padding: 12px var(--gutter); display: flex; align-items: center; gap: 24px; }
.logo { display: flex; align-items: center; gap: 10px; flex: none; }
.logo__tile { width: 34px; height: 34px; border-radius: 11px; background: var(--red); color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 17px; box-shadow: 0 6px 16px rgba(229,56,79,.35); }
.logo__txt { font-weight: 700; font-size: 19px; letter-spacing: -0.01em; }
.logo--sm .logo__tile { width: 30px; height: 30px; border-radius: 9px; font-size: 15px; box-shadow: none; }
.logo--sm .logo__txt { font-size: 17px; letter-spacing: 0; }
.hdr__nav { display: flex; gap: 2px; margin: 0 auto; }
.hdr__nav a { padding: 8px 12px; border-radius: 18px; font-size: 15px; font-weight: 500; color: var(--ink-2); transition: background-color .15s, color .15s; }
.hdr__nav a:hover { background: #fff; color: var(--text); }
.hdr__act { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.hdr__login { height: 44px; box-sizing: border-box; display: flex; align-items: center; padding: 0 18px; border-radius: 22px; border: 1px solid var(--control);
  background: #fff; font-weight: 600; font-size: 15px; white-space: nowrap; transition: border-color .15s; }
.hdr__login:hover { border-color: #CFC6BC; }
.hdr__cta { height: 44px; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 0 5px 0 20px; border-radius: 22px; background: var(--red);
  color: #fff; font-weight: 600; font-size: 15px; white-space: nowrap; box-shadow: 0 8px 20px rgba(229,56,79,.3); transition: background-color .15s; }
.hdr__cta:hover { background: var(--red-hover); }
.hdr__cta .circ { width: 34px; height: 34px; background: #fff; color: var(--red); }
.hdr__burger { width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--dark); color: #fff; cursor: pointer;
  display: none; align-items: center; justify-content: center; padding: 0; }
.hdr__burger .ic-x { display: none; }
.hdr__burger[aria-expanded="true"] .ic-x { display: inline-block; }
.hdr__burger[aria-expanded="true"] .ic-menu { display: none; }
.mnav { padding: 8px 16px 18px; display: flex; flex-direction: column; gap: 4px; border-top: 1px solid rgba(29,27,26,.06); }
.mnav a { padding: 14px 8px; font-size: 17px; font-weight: 600; border-bottom: 1px solid var(--border); }
.mnav a:last-child { border-bottom: none; }

/* ---------- 2. Первый экран ---------- */
.hero { padding-top: clamp(40px, 7vw, 88px); padding-bottom: clamp(56px, 8vw, 96px); display: flex; flex-wrap: wrap; align-items: center; gap: clamp(40px, 5vw, 64px); }
.hero__txt { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.badge10 { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; height: 34px; box-sizing: border-box; padding: 0 14px 0 6px; border-radius: 17px;
  background: #fff; border: 1px solid var(--border); font-size: 14px; font-weight: 600; color: var(--green); }
.badge10 span { height: 24px; padding: 0 9px; border-radius: 12px; background: #E8F4EC; display: flex; align-items: center; font-size: 12px; }
.hero__lead { font-size: clamp(17px, 1.7vw, 20px); line-height: 1.5; color: var(--lead); max-width: 560px; text-wrap: pretty; }
.hero__lead em { font-style: normal; font-weight: 600; color: var(--text); }
.btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.ticks { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--muted); }
.ticks span { display: flex; align-items: center; gap: 6px; }
.ticks .i { color: var(--green); }

.hero__vis { flex: 1 1 480px; min-width: 0; position: relative; padding-bottom: 40px; }
.lap { background: var(--dark); border-radius: 22px 22px 0 0; padding: 10px 10px 0; box-shadow: 0 30px 70px rgba(29,27,26,.22); margin-right: clamp(40px, 10vw, 110px); }
.lap__scr { background: var(--bg); border-radius: 12px 12px 0 0; overflow: hidden; display: flex; height: clamp(280px, 32vw, 360px); }
.lap__side { width: 44px; flex: none; background: var(--dark-2); display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 14px; color: #8F857D; }
.lap__logo { width: 22px; height: 22px; border-radius: 7px; background: var(--red); }
.lap__on { width: 26px; height: 26px; border-radius: 8px; background: var(--red); color: #fff; display: flex; align-items: center; justify-content: center; }
.lap__main { flex: 1; min-width: 0; padding: 12px; display: flex; flex-direction: column; gap: 9px; }
.lap__hi { border-radius: 12px; background: #D12E45; color: #fff; padding: 12px 14px; position: relative; overflow: hidden; }
.lap__hi > div { position: relative; }
.lap__hi .lap__hi-c { position: absolute; right: -30px; top: -40px; width: 120px; height: 120px; border-radius: 50%; background: #E5455B; }
.lap__date { font-size: 9px; color: #FFE1E5; }
.lap__greet { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.lap__sub { font-size: 9px; color: #FFF0F2; margin-top: 2px; }
.lap__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.lap__stats > div { background: #fff; border-radius: 10px; padding: 8px; display: flex; align-items: center; gap: 7px; }
.lap__stats b { display: block; font-size: 13px; font-weight: 600; line-height: 1; }
.lap__stats small { display: block; font-size: 8px; color: var(--muted-2); }
.ic { width: 22px; height: 22px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.ic--green { background: #E8F4EC; color: #3A9467; }
.ic--orange { background: #FDEEE6; color: #D9744A; }
.ic--amber { background: #FBF3DD; color: #B98A1E; }
.lap__grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 7px; }
.lap__att, .lap__plate { background: #fff; border-radius: 10px; padding: 9px; display: flex; flex-direction: column; gap: 7px; overflow: hidden; }
.lap__plate { align-items: center; gap: 6px; }
.lap__t { font-size: 10px; font-weight: 600; align-self: flex-start; }
.lap__row { display: flex; align-items: center; gap: 6px; }
.lap__row .ava { width: 18px; height: 18px; }
.lap__row > div { flex: 1; min-width: 0; font-size: 8px; line-height: 1.3; }
.lap__row span { color: var(--muted-2); }
.lap__row span.warn { color: #B76E00; }
.lap__th { width: 20px; height: 20px; border-radius: 6px; object-fit: cover; flex: none; }
.ring { width: 62px; height: 62px; border-radius: 50%; background: conic-gradient(#7BC59A 0 88%, #EEF4EF 88% 100%); display: flex; align-items: center; justify-content: center; }
.ring > div { width: 48px; height: 48px; border-radius: 50%; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring b { font-size: 11px; font-weight: 700; }
.ring small { font-size: 7px; color: var(--muted-2); }
.bju3 { display: flex; gap: 4px; width: 100%; }
.bju3 span { flex: 1; height: 4px; border-radius: 2px; background: #F2885E; }
.bju3 span:nth-child(2) { background: #F5C451; }
.bju3 span:nth-child(3) { background: #7BC59A; }
.lap__base { height: 14px; background: var(--dark-2); border-radius: 0 0 18px 18px; box-shadow: 0 18px 30px rgba(29,27,26,.2);
  margin: 0 calc(clamp(40px, 10vw, 110px) - clamp(0px, 2vw, 24px)) 0 calc(-1 * clamp(0px, 2vw, 24px)); }

.hphone { position: absolute; right: 0; bottom: 0; width: clamp(170px, 19vw, 224px); aspect-ratio: 9 / 18.5; background: var(--dark); border-radius: 34px; padding: 7px;
  box-shadow: 0 30px 60px rgba(29,27,26,.3); }
.hphone__scr { width: 100%; height: 100%; border-radius: 28px; background: #fff; overflow: hidden; display: flex; flex-direction: column; }
.hphone__hd { display: flex; align-items: center; gap: 7px; padding: 12px 12px 8px; font-size: 10px; font-weight: 600; line-height: 1.2; }
.hphone__hd small { font-weight: 400; color: var(--muted-2); font-size: 8px; }
.hphone__photo { margin: 0 10px; flex: 1; min-height: 0; border-radius: 18px; background: var(--photo); position: relative; overflow: hidden; }
.hphone__photo img, .scan__photo img, .tile__vis--photo img, .lesson__vid img, .lib__img img, .rp img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.chip5 { position: absolute; left: 8px; top: 8px; height: 20px; padding: 0 8px; border-radius: 10px; background: rgba(255,255,255,.92);
  font-size: 8px; font-weight: 600; display: flex; align-items: center; gap: 4px; }
.chip5 .i { color: var(--green); }
.hphone__body { padding: 10px 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.hphone__dish { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.hphone__dish span { font-size: 11px; font-weight: 600; }
.hphone__dish b { font-size: 13px; font-weight: 700; }
.hphone__btn { height: 26px; border-radius: 13px; background: var(--red); color: #fff; font-size: 9px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
/* 12.10: круглая плашка «Посмотреть видео-обзор · 2 минуты» (вместо робота) */
.vbadge { position: absolute; left: clamp(-24px, -1.8vw, 0px); bottom: -16px; z-index: 2; width: 144px; height: 144px; padding: 0; border: none; border-radius: 50%;
  background: #fff; color: var(--dark); cursor: pointer; box-shadow: 0 16px 36px rgba(29,27,26,.18), 0 0 0 1px var(--border);
  display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; transition: transform .2s; }
.vbadge__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: vbadge-spin 22s linear infinite; }
.vbadge__ring text { font: 600 11px/1 'Onest', system-ui, sans-serif; text-transform: uppercase; letter-spacing: .06em; fill: var(--dark); }
.vbadge__core { position: relative; width: 80px; height: 80px; border-radius: 50%; overflow: hidden; background: var(--photo); box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--border); }
.vbadge__core img { width: 100%; height: 100%; object-fit: cover; }
.vbadge__play { position: absolute; left: 50%; top: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%; background: var(--red); color: #fff;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 18px rgba(229,56,79,.45); transition: transform .2s; }
.vbadge__play .i, .vid__play .i { fill: currentColor; stroke-width: 1.5; margin-left: 2px; }
.vbadge:hover .vbadge__play, .vbadge:focus-visible .vbadge__play { transform: scale(1.12); }
.vbadge:active { transform: scale(.97); }
.vbadge:focus-visible { outline-offset: 4px; }
@keyframes vbadge-spin { to { transform: rotate(360deg); } }

/* ---------- 3. Боли ---------- */
.pains { display: flex; flex-direction: column; gap: 36px; }
.pains__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 16px; }
.pain { padding: clamp(22px, 3vw, 30px); display: flex; flex-direction: column; gap: 18px; }
.pain__q { font-family: var(--pf); font-style: italic; font-weight: 500; font-size: clamp(20px, 2vw, 24px); line-height: 1.3; color: var(--ink-2); text-wrap: pretty; }
.pain__a { display: flex; gap: 12px; align-items: flex-start; padding-top: 16px; border-top: 1px dashed var(--control); margin-top: auto; font-weight: 500; }
.pain__a > span:last-child { text-wrap: pretty; }

/* 12.10: мини-сценки к «Четырём вещам» — о чём боль, видно сразу (в стиле плиток «Четыре в одном») */
.pain__top { display: flex; gap: 18px; align-items: flex-start; justify-content: space-between; }
.pain__top .pain__q { flex: 1 1 auto; min-width: 0; }
.pscene { position: relative; flex: none; width: 132px; height: 100px; box-sizing: border-box; border-radius: 20px; overflow: hidden; }
.pscene--shots { background: #FCEBEE; }
.pscene__shot { position: absolute; width: 60px; padding: 4px 4px 6px; box-sizing: border-box; background: #fff; border-radius: 10px;
  box-shadow: 0 6px 14px rgba(29,27,26,.10); display: flex; flex-direction: column; gap: 4px; }
.pscene__shot img { width: 100%; height: 38px; border-radius: 7px; object-fit: cover; background: var(--photo); }
.pscene__shot i { display: block; height: 4px; border-radius: 2px; background: #EEE8E1; }
.pscene__shot i + i { width: 60%; }
.pscene__shot--1 { left: 16px; top: 18px; transform: rotate(-8deg); }
.pscene__shot--2 { left: 52px; top: 26px; transform: rotate(6deg); }
.pscene__badge { position: absolute; right: 10px; top: 10px; min-width: 26px; height: 26px; padding: 0 7px; box-sizing: border-box; border-radius: 13px;
  background: var(--red); color: #fff; font: 700 13px/26px 'Onest', sans-serif; text-align: center; box-shadow: 0 4px 10px rgba(229,56,79,.35);
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.pscene--streak { background: #FBF3DD; padding: 14px; display: flex; flex-direction: column; justify-content: center; gap: 9px; }
.pscene__flame { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 14px; color: var(--text); }
.pscene__dots { display: flex; gap: 4px; }
.pscene__dots i { width: 11px; height: 11px; border-radius: 50%; background: #E5492E; }
.pscene__dots i.off { background: transparent; box-shadow: inset 0 0 0 1.5px #D9CFC4; }
.pscene__note { font-size: 12px; color: var(--muted-2); font-weight: 500; }
.pscene--chat { background: #F1EAFE; }
.pscene__msg { position: absolute; left: 14px; height: 18px; border-radius: 9px 9px 9px 3px; background: #fff; display: flex; align-items: center; padding: 0 8px;
  box-sizing: border-box; box-shadow: 0 3px 8px rgba(29,27,26,.06); }
.pscene__msg i { display: block; width: 100%; height: 4px; border-radius: 2px; background: #E6DEF7; }
.pscene__msg--1 { top: 18px; width: 64px; }
.pscene__msg--2 { top: 42px; width: 90px; left: 28px; border-radius: 9px 9px 3px 9px; background: #7C4DE8; }
.pscene__msg--2 i { background: rgba(255,255,255,.45); }
.pscene__msg--3 { top: 66px; width: 76px; }
.pscene__badge--wide { top: 8px; right: 8px; }
.pscene--renew { background: #E8F4EC; padding: 14px 12px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 8px; }
.pscene__res { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border-radius: 15px; background: #fff;
  font-weight: 700; font-size: 15px; color: var(--green-2); box-shadow: 0 3px 8px rgba(29,27,26,.06); }
.pscene__bill { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 14px; background: var(--red); color: #fff;
  font-weight: 600; font-size: 12px; white-space: nowrap; box-shadow: 0 4px 10px rgba(229,56,79,.3); }
@media (max-width: 520px) {
  .pain__top { flex-direction: column; gap: 14px; }
  .pain__top .pscene { order: -1; }
  .pscene { width: 104px; height: 84px; border-radius: 16px; transform-origin: top right; }
  .pscene--shots .pscene__shot { width: 50px; } .pscene__shot img { height: 30px; }
  .pscene__shot--1 { left: 8px; top: 16px; } .pscene__shot--2 { left: 42px; top: 22px; }
  .pscene--streak { padding: 10px; gap: 7px; } .pscene__dots { gap: 3px; } .pscene__dots i { width: 9px; height: 9px; }
  .pscene__msg--1 { width: 52px; left: 10px; top: 14px; } .pscene__msg--2 { width: 70px; left: 22px; top: 36px; } .pscene__msg--3 { width: 60px; left: 10px; top: 58px; }
  .pscene--renew { padding: 10px 8px; gap: 6px; } .pscene__res { font-size: 13px; height: 26px; padding: 0 8px; } .pscene__bill { font-size: 11px; padding: 0 7px; height: 24px; }
}
.okc { width: 32px; height: 32px; flex: none; border-radius: 50%; background: #E8F4EC; color: var(--green); display: flex; align-items: center; justify-content: center; }

/* ---------- 4. Четыре в одном ---------- */
.feat { display: flex; flex-direction: column; gap: 36px; }
.struck { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.struck s { height: 32px; padding: 0 14px; border-radius: 16px; background: #EEE8E1; color: var(--muted-2); font-size: 14px; display: flex; align-items: center; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 16px; }
.tile { padding: 10px 10px 20px; display: flex; flex-direction: column; gap: 16px; color: var(--text); }
.tile__vis { height: 170px; box-sizing: border-box; border-radius: 20px; overflow: hidden; }
.tile__vis--crm { background: #F3F9F5; padding: 16px; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.mini { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 12px; background: #fff; }
.mini__a { width: 24px; height: 24px; border-radius: 50%; background: #FCE3E6; flex: none; }
.mini:nth-child(2) .mini__a { background: #E6F0FF; }
.mini:nth-child(3) .mini__a { background: #FBF3DD; }
.mini__l { flex: 1; height: 6px; border-radius: 3px; background: #EEE8E1; }
.bars { display: flex; gap: 2px; }
.bars i { width: 5px; height: 12px; border-radius: 2px; background: var(--green-2); }
.bars i.off { background: #EEEAE5; }
.tile__vis--photo { position: relative; background: var(--photo); }
.tile__chip { position: absolute; left: 12px; bottom: 12px; height: 28px; padding: 0 12px; border-radius: 14px; background: rgba(255,255,255,.94);
  font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.tile__chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.tile__vis--kb { background: #FDF3F4; padding: 16px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.tile__vis--kb img { width: 30%; height: 120px; border-radius: 14px; object-fit: cover; background: var(--photo); }
.tile__vis--kb .kb1 { transform: rotate(-5deg); }
.tile__vis--kb .kb2 { height: 132px; box-shadow: 0 10px 20px rgba(29,27,26,.12); }
.kb3 { width: 30%; height: 120px; border-radius: 14px; background: #fff; transform: rotate(5deg); display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; color: #D9566A; font-size: 11px; font-weight: 600; }
.tile__vis--soc { background: #EEF3FB; padding: 16px; display: flex; align-items: center; justify-content: center; }
.post { width: 78%; background: #fff; border-radius: 16px; padding: 10px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 10px 20px rgba(29,27,26,.08); }
.post__hd { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; }
.post img { width: 100%; height: 62px; border-radius: 10px; object-fit: cover; }
.post__ft { display: flex; gap: 10px; font-size: 10px; color: var(--muted-2); }
.post__ft span, .feed__re span { display: flex; align-items: center; gap: 3px; }
.red { color: var(--red); }
.tile__ft { padding: 0 10px; flex: 1; display: flex; align-items: stretch; justify-content: space-between; gap: 10px; }
.tile__n { font-size: 13px; color: #A39C95; }
.tile__t { font-weight: 600; font-size: 19px; margin-top: 2px; }
.tile__d { font-size: 14px; color: var(--muted); margin-top: 4px; }
.tile__go { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--green-2); color: #fff; display: flex; align-items: center; justify-content: center; align-self: flex-end; }
.tile:nth-child(2) .tile__go { background: var(--red); }
.tile:nth-child(3) .tile__go { background: #D9566A; }
.tile:nth-child(4) .tile__go { background: #3B7BE8; }
.feat__note { display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 500; color: var(--ink-2); }
.feat__phone { width: 40px; height: 40px; flex: none; border-radius: 50%; background: #fff; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--red); }

/* ---------- 5. Ведение клиентов ---------- */
.crm { display: flex; flex-wrap: wrap; gap: clamp(36px, 5vw, 64px); align-items: flex-start; }
.crm__txt { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.pts { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.pts > div { display: flex; gap: 14px; align-items: flex-start; }
.pts > div > span:last-child { padding-top: 7px; text-wrap: pretty; }
.pt { width: 38px; height: 38px; flex: none; border-radius: 12px; background: var(--tb); color: var(--tc); display: flex; align-items: center; justify-content: center; }
.crm__try { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.crm__try .btn { align-self: flex-start; min-height: 54px; padding: 6px 7px 6px clamp(18px, 5vw, 22px); gap: 12px; box-shadow: 0 1px 2px rgba(29,27,26,.05); }
.crm__try > span { font-size: 14px; color: var(--muted-2); text-wrap: pretty; }
.crm__vis { flex: 1.15 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 96px; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.tabs button { height: 40px; padding: 0 16px; border-radius: 20px; border: 1px solid var(--control); background: #fff; color: var(--ink-2); font-weight: 600; font-size: 14px; cursor: pointer;
  transition: background-color .15s, color .15s; }
.tabs button:hover { border-color: #CFC6BC; }
.tabs button[aria-selected="true"] { background: var(--dark); border-color: var(--dark); color: #fff; }
.crm__stage { background: var(--bg); border-radius: 28px; padding: clamp(14px, 2vw, 22px); min-height: 420px; box-sizing: border-box; }
.pult, .diary, .res { background: #fff; border-radius: 20px; box-shadow: 0 10px 30px rgba(29,27,26,.06); }
.pult { overflow: hidden; }
.pult__hd { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; font-weight: 600; }
.pult__hd > span:first-child { display: flex; align-items: center; gap: 10px; }
.pult__ic { width: 30px; height: 30px; border-radius: 9px; background: #FFE9E4; color: #E5492E; display: flex; align-items: center; justify-content: center; }
.cnt { height: 22px; padding: 0 8px; border-radius: 11px; background: #FDEBED; color: #B8243A; font-size: 12px; font-weight: 600; display: flex; align-items: center; }
.pult__row { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--divider); }
.pult__row b, .diary__hd b, .crow__n b { display: block; font-weight: 600; font-size: 14px; }
.pult__row .grow span { display: block; font-size: 13px; color: var(--muted); }
.pult__row .grow span.warn { color: #B76E00; }
.pult__row .grow span.ok { color: var(--green-2); }
.pult__row > .i { color: var(--green-2); }
.th36 { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; flex: none; background: var(--photo); }
.clist { display: flex; flex-direction: column; gap: 10px; }
.crow { background: #fff; border-radius: 18px; padding: 14px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; box-shadow: 0 6px 18px rgba(29,27,26,.05); }
.crow__n { flex: 1 1 120px; }
.crow__n span { display: block; font-size: 12px; }
.days { display: flex; gap: 3px; }
.days i { width: 8px; height: 18px; border-radius: 3px; background: var(--green-2); }
.days i.off { background: #EEEAE5; }
.crow__w { font-size: 13px; }
.crow__k { width: 110px; font-size: 12px; color: var(--muted-2); }
.kbar { height: 6px; border-radius: 3px; background: #F3EFEA; margin-top: 4px; overflow: hidden; display: flex; gap: 2px; }
.kbar span:nth-child(1) { background: #F2885E; }
.kbar span:nth-child(2) { background: #F5C451; }
.kbar span:nth-child(3) { background: #7BC59A; }
.diary { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.diary__hd { display: flex; align-items: center; gap: 12px; }
.diary__hd b { font-size: 16px; }
.diary__hd .grow span { display: block; font-size: 13px; color: var(--muted-2); }
.streak { display: flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 14px; background: #FDF3E1; color: #B76E00; font-size: 12px; font-weight: 600; flex: none; }
.diary__meals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.diary__meals img { width: 100%; height: 96px; border-radius: 14px; object-fit: cover; background: var(--photo); }
.diary__meals b { display: block; font-size: 13px; font-weight: 600; margin-top: 6px; }
.diary__meals span { display: block; font-size: 12px; color: var(--muted-2); }
.diary__cm { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #F8F6F3; font-size: 13px; color: var(--ink-2); }
.rose { color: #D9566A; }
.res { padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.res__k { font-size: 13px; color: var(--muted-2); }
.res__t { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin-top: 2px; }
.mut { color: #A39C95; }
.res__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.res__grid > div { padding: 14px; border-radius: 16px; background: #E8F4EC; }
.res__grid b { display: block; font-size: 24px; font-weight: 700; color: #1B7A4E; line-height: 1.25; }
.res__grid > div:nth-child(2) { background: #FDEEE6; }
.res__grid > div:nth-child(2) b { color: #C0582E; }
.res__grid > div:nth-child(3) { background: #FBF3DD; }
.res__grid > div:nth-child(3) b { color: #A27A10; }
.res__grid span { display: block; font-size: 12px; color: var(--ink-2); }
.res__btns { display: flex; flex-wrap: wrap; gap: 8px; }

/* CTA-полоса */
.strip-sec { padding-block: clamp(40px, 6vw, 64px); }
.strip { border-radius: 28px; background: #FFF4D6; padding: clamp(22px, 3vw, 30px) clamp(22px, 3vw, 36px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.strip__t { font-size: clamp(19px, 2vw, 24px); font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }

/* ---------- 6. Приложение клиента ---------- */
.app { display: flex; flex-direction: column; gap: 40px; }
.app__head { display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: flex-end; justify-content: space-between; }
.app__h { flex: 1 1 520px; display: flex; flex-direction: column; gap: 16px; }
.app__quote { flex: 0 1 360px; padding: 20px 24px; border-radius: 24px; background: var(--dark); color: #fff; font-family: var(--pf); font-style: italic; font-weight: 500;
  font-size: clamp(19px, 1.8vw, 22px); line-height: 1.35; }
.phones { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(16px, 3vw, 32px); }
.phones::-webkit-scrollbar { display: none; }
.phones__it { flex: none; scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.phones__it figcaption { font-size: 14px; color: var(--muted); }
.phone250 { width: 250px; height: 520px; background: var(--dark); border-radius: 40px; padding: 8px; box-shadow: 0 26px 56px rgba(29,27,26,.22); }
.phone250__scr { width: 100%; height: 100%; border-radius: 33px; overflow: hidden; display: flex; flex-direction: column; box-sizing: border-box; }
.home { background: #D9CFC4; padding: 52px 18px 14px; }
.home__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 12px; }
.app-ic { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; --c: #C6BAAD; }
.app-ic::before { content: ""; width: 100%; aspect-ratio: 1; border-radius: 13px; background: var(--c); }
.app-ic::after { content: ""; width: 70%; height: 6px; border-radius: 3px; background: rgba(29,27,26,.12); }
.app-ic:nth-child(5n+2) { --c: #BFB2A4; } .app-ic:nth-child(5n+3) { --c: #C9BEB2; }
.app-ic:nth-child(5n+4) { --c: #BBAE9F; } .app-ic:nth-child(5n) { --c: #C3B7AA; }
.app-ic--me { font-size: 10px; font-weight: 600; line-height: 1; color: var(--text); }
.app-ic--me::before, .app-ic--me::after { display: none; }
.app-ic--me span { width: 100%; aspect-ratio: 1; border-radius: 13px; background: var(--green); color: #fff; font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 3px #fff, 0 8px 18px rgba(29,27,26,.3); }
.home__dock { margin-top: auto; padding: 10px; border-radius: 24px; background: rgba(255,255,255,.35); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.home__dock span { aspect-ratio: 1; border-radius: 13px; background: #BBAE9F; }
.home__dock span:nth-child(2) { background: #C6BAAD; } .home__dock span:nth-child(3) { background: #BFB2A4; } .home__dock span:nth-child(4) { background: #C3B7AA; }

.scan { background: #fff; }
.scan__hd { display: flex; align-items: center; gap: 8px; padding: 30px 16px 10px; font-size: 13px; font-weight: 600; }
.scan__photo { margin: 0 12px; height: 200px; flex: none; border-radius: 22px; background: var(--photo); position: relative; overflow: hidden; }
.scan__dim { position: absolute; inset: 0; background: rgba(30,26,25,.18); }
.scan__line { position: absolute; left: 8%; right: 8%; top: 10%; height: 2px; border-radius: 2px; background: #9BE3B8; box-shadow: 0 0 14px 3px rgba(123,197,154,.8);
  animation: ndScan 1.3s ease-in-out infinite alternate; }
@keyframes ndScan { from { top: 10%; } to { top: 88%; } }
.scan__chip { position: absolute; background: rgba(255,255,255,.95); font-size: 11px; font-weight: 600; display: flex; align-items: center; white-space: nowrap; }
.scan__chip--mid { left: 50%; bottom: 12px; transform: translateX(-50%); height: 28px; padding: 0 12px; border-radius: 14px; gap: 6px; }
.scan__chip--top { left: 10px; top: 10px; height: 26px; padding: 0 10px; border-radius: 13px; gap: 5px; }
.green { color: var(--green); }
.scan__body { padding: 12px 16px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.scan__list { display: flex; flex-direction: column; gap: 7px; }
.scan__list > div:not(.bju) { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.scan__skel { display: flex; flex-direction: column; gap: 7px; }
.scan__skel i { height: 10px; border-radius: 5px; background: #F3EFEA; width: 80%; }
.scan__skel i:nth-child(2) { width: 64%; }
.scan__skel i:nth-child(3) { width: 72%; }
.scan__btns { margin-top: auto; display: flex; gap: 6px; }
.scan__btns span { flex: 1; height: 36px; border-radius: 18px; background: #F6F4F1; font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 5px; }
.scan__btns span.r { background: var(--red); color: #fff; }
.scan[data-phase="0"] .ph1, .scan[data-phase="1"] .ph0 { display: none; }

.tg { background: #E7EEF4; }
.tg__hd { display: flex; align-items: center; gap: 8px; padding: 30px 14px 10px; background: #fff; font-size: 12px; font-weight: 600; line-height: 1.2; }
.tg__hd small { font-weight: 400; font-size: 10px; color: var(--muted-2); }
.tg__body { flex: 1; padding: 14px 10px; display: flex; flex-direction: column; gap: 8px; font-size: 11.5px; line-height: 1.4; }
.msg { align-self: flex-start; max-width: 86%; padding: 8px 11px; border-radius: 14px 14px 14px 4px; background: #fff; box-sizing: border-box; }
.msg:first-child { max-width: 82%; }
.msg--row { display: flex; align-items: center; gap: 6px; }
.msg--amber { background: #FFF4D6; color: var(--ink-2); }
.flame { color: #E5492E; }
.msg-photo { align-self: flex-end; width: 120px; height: 90px; border-radius: 14px 14px 4px 14px; object-fit: cover; background: var(--photo); }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 14px; }
/* 13.10: иконка-плитка + заголовок + текст — читается с одного взгляда */
.fact { display: flex; gap: 16px; align-items: flex-start; padding: 22px 22px 24px; border-radius: 24px; background: #fff;
  border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(29,27,26,.03), 0 8px 24px rgba(29,27,26,.04); }
.fact__ic { width: 48px; height: 48px; flex: none; border-radius: 15px; background: var(--tb); color: var(--tc);
  display: flex; align-items: center; justify-content: center; }
.fact__t { margin: 2px 0 6px; font-size: 18px; line-height: 1.25; font-weight: 650; letter-spacing: -.01em; color: var(--text); }
.fact__d { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
@media (max-width: 520px) { .fact { padding: 18px; gap: 14px; } .fact__ic { width: 44px; height: 44px; border-radius: 13px; } .fact__t { font-size: 17px; } }

/* ---------- 7. Марафоны ---------- */
.mar { overflow: hidden; position: relative; }
.mar__deco { position: absolute; right: -160px; top: -160px; width: 480px; height: 480px; border-radius: 50%; background: #2A2321; pointer-events: none; }
.mar__in { position: relative; padding-block: clamp(64px, 9vw, 120px); display: flex; flex-direction: column; gap: clamp(56px, 8vw, 96px); }
.mar__head { display: flex; flex-direction: column; gap: 18px; max-width: 860px; }
.mar__badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 17px; background: rgba(229,56,79,.16);
  color: #FF8A9A; font-size: 14px; font-weight: 600; }
.mar__lead { font-size: clamp(17px, 1.7vw, 20px); color: #CFC6BE; text-wrap: pretty; max-width: 700px; }
.mar__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.mar__chips a { height: 36px; box-sizing: border-box; padding: 0 14px; border-radius: 18px; border: 1px solid rgba(255,255,255,.16); font-size: 14px; font-weight: 500; color: #E9E2DB;
  display: flex; align-items: center; gap: 8px; transition: background-color .15s; }
.mar__chips a:hover { background: rgba(255,255,255,.08); color: #fff; }
.mar__chips b { color: #FF8A9A; }
.scr { scroll-margin-top: 90px; display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 56px); align-items: center; }
.scr--rev { flex-wrap: wrap-reverse; }
.scr__txt { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.scr__l { font-family: var(--pf); font-style: italic; font-weight: 500; font-size: 44px; line-height: 1; color: #FF6B7F; }
.steps { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.steps > div { display: flex; gap: 14px; }
.steps > div > span:first-child { width: 30px; height: 30px; flex: none; border-radius: 50%; background: rgba(255,255,255,.1); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.steps > div > span.on { background: var(--red); }
.steps > div > span:last-child { color: #E9E2DB; padding-top: 3px; text-wrap: pretty; }
.steps b { color: #fff; }
.wiz { flex: 1.2 1 440px; min-width: 0; background: #fff; color: var(--text); border-radius: 28px; padding: clamp(18px, 2.4vw, 26px); display: flex; flex-direction: column; gap: 18px;
  box-shadow: 0 30px 70px rgba(0,0,0,.35); }
.wiz__prog { display: flex; gap: 6px; }
.wiz__prog i { flex: 1; height: 5px; border-radius: 3px; background: #EEEAE5; }
.wiz__prog i.done { background: var(--green-2); }
.wiz__prog i.cur { background: var(--red); }
.wiz__k { font-size: 13px; color: var(--muted-2); }
.wiz__t { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.wiz__opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.opt { border-radius: 18px; padding: 6px 6px 12px; border: 1px solid var(--border); }
.opt--on { border: 2px solid var(--red); box-shadow: 0 0 0 4px #FDEBED; padding: 5px 5px 11px; }
.opt img { width: 100%; height: 96px; border-radius: 13px; object-fit: cover; background: var(--photo); }
.opt b { display: block; font-weight: 600; font-size: 14px; margin: 8px 6px 0; }
.opt span { display: block; font-size: 12px; color: var(--muted-2); margin: 0 6px; }
.wiz__ft { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.wiz__own { font-size: 13px; color: var(--muted-2); display: flex; align-items: center; gap: 6px; }
.scr__vis { flex: 1 1 360px; min-width: 0; display: flex; justify-content: center; }
.phone270 { position: relative; width: 270px; height: 540px; background: var(--dark); border-radius: 42px; padding: 8px; box-shadow: 0 30px 64px rgba(29,27,26,.22); }
.phone270--black { background: #0E0C0B; box-shadow: 0 30px 70px rgba(0,0,0,.45); }
.phone270__scr { width: 100%; height: 100%; border-radius: 35px; background: #fff; color: var(--text); overflow: hidden; display: flex; flex-direction: column; }
.lesson__hd { padding: 30px 16px 12px; }
.lesson__hd small { display: block; font-size: 11px; color: var(--muted-2); }
.lesson__hd > div { display: flex; justify-content: space-between; align-items: center; }
.lesson__hd > div > span:first-child { font-size: 18px; font-weight: 600; }
.lesson__prog { display: flex; gap: 3px; }
.lesson__prog i { width: 14px; height: 5px; border-radius: 3px; background: #EEEAE5; }
.lesson__prog i.d { background: var(--green-2); }
.lesson__prog i.c { background: var(--red); }
.lesson__vid { margin: 0 12px; height: 140px; flex: none; border-radius: 20px; background: var(--photo); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.play { position: relative; width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,.94); color: var(--red); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(0,0,0,.2); }
.lesson__body { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.lesson__body > b { font-weight: 600; font-size: 14px; }
.skel { display: block; height: 8px; border-radius: 4px; background: #F3EFEA; }
.skel + .skel { width: 84%; }
.lesson__pdf { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: #FDF3F4; font-size: 12px; }
.lesson__pdf .i { color: var(--red-dark); }
.lesson__task { margin-top: auto; padding: 12px; border-radius: 16px; background: #F8F6F3; display: flex; flex-direction: column; gap: 8px; }
.lesson__task small { font-size: 11px; font-weight: 600; color: var(--green); }
.lesson__task > span:not(.lesson__btn) { font-size: 13px; font-weight: 500; }
.lesson__btn { height: 36px; border-radius: 18px; background: var(--red); color: #fff; font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 6px; }
.bul { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; color: #E9E2DB; }
.bul > div { display: flex; gap: 12px; }
.bul .i { color: #FF8A9A; margin-top: 3px; }
.bul span { text-wrap: pretty; }
.scr__vis--c { flex: 1.3 1 460px; flex-wrap: wrap; gap: 12px; justify-content: flex-start; }
.reps { flex: 1.4 1 280px; min-width: 0; background: #fff; color: var(--text); border-radius: 26px; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.reps__hd { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.reps__hd b { font-weight: 600; }
.reps__hd span { font-size: 13px; color: var(--green-2); font-weight: 600; }
.reps__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.rp { aspect-ratio: 1; border-radius: 12px; background: var(--photo); position: relative; overflow: hidden; }
.rp > i { position: absolute; right: 4px; bottom: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--green-2); color: #fff; display: flex; align-items: center; justify-content: center; }
.rp--no { background: #F6F4F1; border: 1px dashed #DCD5CD; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 10px; color: var(--muted-2); box-sizing: border-box; }
.rp--no b { color: var(--ink-2); }
.mchat { flex: 1 1 200px; min-width: 0; background: var(--dark-2); border-radius: 26px; padding: 16px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.mchat > b { font-weight: 600; }
.mchat__pin { padding: 10px 12px; border-radius: 14px; background: rgba(255,194,75,.14); color: #FFD98A; display: flex; gap: 8px; }
.mchat__pin .i { margin-top: 2px; }
.mchat__m { padding: 9px 12px; border-radius: 14px 14px 14px 4px; background: rgba(255,255,255,.08); color: #E9E2DB; }
.mchat__m b { color: #fff; }
.mchat__me { align-self: flex-end; padding: 9px 12px; border-radius: 14px 14px 4px 14px; background: var(--red); }
.scr__vis--d { flex-wrap: wrap; align-items: center; gap: 20px; }
.signup { width: 250px; background: #fff; color: var(--text); border-radius: 30px; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.4); }
.signup > img { width: 100%; height: 170px; object-fit: cover; background: var(--photo); }
.signup__b { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; }
.signup__t { font-family: var(--pf); font-style: italic; font-weight: 500; font-size: 24px; line-height: 1.1; }
.signup__k { font-size: 13px; color: var(--muted); }
.signup__p { display: flex; justify-content: space-between; align-items: baseline; margin-top: 4px; }
.signup__p b { font-size: 22px; font-weight: 700; }
.signup__p span { font-size: 12px; color: #B76E00; font-weight: 600; }
.signup__btn { height: 44px; border-radius: 22px; background: var(--red); color: #fff; font-weight: 600; font-size: 14px; display: flex; align-items: center; justify-content: center; margin-top: 4px; }
.qr { width: 150px; padding: 16px; border-radius: 24px; background: #fff; color: var(--text); display: flex; flex-direction: column; align-items: center; gap: 10px; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.qr__box { width: 110px; height: 110px; border-radius: 14px; border: 1px dashed #CFC6BC; display: flex; align-items: center; justify-content: center; }
.qr__box .i { stroke-width: 1.6; }
.qr span { font-size: 12px; font-weight: 600; text-align: center; }
.mar__ft { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid rgba(255,255,255,.1); }
.mar__ft > span { font-size: 14px; color: #A89E95; max-width: 360px; text-wrap: pretty; }

/* ---------- 8. База знаний ---------- */
.kb { display: flex; flex-direction: column; gap: 36px; }
.lib { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px; }
.lib__c { background: #fff; border-radius: 24px; padding: 8px 8px 14px; border: 1px solid var(--border); }
.lib__img { height: 150px; border-radius: 18px; background: var(--photo); position: relative; overflow: hidden; }
.lib__img span { position: absolute; left: 8px; top: 8px; height: 22px; padding: 0 8px; border-radius: 7px; background: #fff; color: var(--red-dark); font-size: 11px; font-weight: 600; display: flex; align-items: center; }
.lib__c:nth-child(2) .lib__img span { color: #1B7A4E; }
.lib__c:nth-child(3) .lib__img span { color: #2B6CB8; }
.lib__c:nth-child(4) .lib__img span { color: #6B45C9; }
.lib__t { font-family: var(--pf); font-style: italic; font-weight: 500; font-size: 19px; margin: 10px 8px 0; }
.ai { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.ai__c { background: #fff; border: 1px solid var(--border); border-radius: 28px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.ai__ic { width: 46px; height: 46px; border-radius: 14px; background: var(--tb); color: var(--tc); display: flex; align-items: center; justify-content: center; }
.ai__t { font-weight: 600; font-size: 19px; }
.ai__d { color: var(--muted); text-wrap: pretty; }
.ai__box { margin-top: auto; border-radius: 16px; background: #F8F6F3; font-size: 13px; }
.ai__box--list { padding: 12px 14px; color: var(--ink-2); display: flex; flex-direction: column; gap: 6px; }
.ai__box--list span { display: flex; gap: 8px; }
.ai__box--list .i { color: #3B7BE8; margin-top: 2px; }
.ai__box--tbl { overflow: hidden; }
.ai__box--tbl > div { display: flex; justify-content: space-between; gap: 8px; padding: 9px 14px; }
.ai__box--tbl > div + div { border-top: 1px solid #EEE8E1; }
.ai__box--tbl b { font-weight: 600; }
.lo { color: var(--red-dark); }
.ai__box--rec { padding: 10px; display: flex; align-items: center; gap: 10px; line-height: 1.35; }
.ai__box--rec img { width: 52px; height: 52px; flex: none; border-radius: 12px; object-fit: cover; background: var(--photo); }
.ai__box--rec span { color: var(--muted-2); }
.kb__note { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted-2); }
.kb__note .i { color: var(--green); }

/* ---------- 9. Соцсеть ---------- */
.soc { display: flex; flex-wrap: wrap-reverse; gap: clamp(36px, 5vw, 72px); align-items: center; }
.soc__vis { flex: 1 1 340px; min-width: 0; display: flex; justify-content: center; position: relative; }
.soc__bg { position: absolute; width: 340px; height: 340px; max-width: 100%; aspect-ratio: 1; border-radius: 50%; background: #EEF3FB; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.feed { background: var(--bg); }
.feed__hd { display: flex; align-items: center; gap: 10px; padding: 30px 16px 12px; background: #fff; line-height: 1.25; }
.feed__hd b { display: block; font-size: 13px; font-weight: 600; }
.feed__hd small { display: block; font-size: 10px; color: var(--muted-2); }
.feed__body { padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.feed__pin { padding: 10px 12px; border-radius: 16px; background: #FFF4D6; font-size: 12px; display: flex; gap: 8px; }
.feed__pin .i { color: #B98A1E; }
.feed__post { background: #fff; border-radius: 18px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.feed__post img { width: 100%; height: 150px; border-radius: 13px; object-fit: cover; background: var(--photo); }
.feed__post > b { font-size: 13px; font-weight: 600; }
.feed__post > small { font-size: 11px; color: var(--muted); }
.feed__re { display: flex; gap: 14px; font-size: 12px; color: var(--muted); }
.feed__re span { gap: 4px; }
.feed__poll { background: #fff; border-radius: 18px; padding: 12px; font-size: 12px; display: flex; flex-direction: column; gap: 8px; }
.feed__poll span { height: 26px; border-radius: 13px; background: #E8F4EC; display: flex; align-items: center; padding: 0 10px; color: #1B7A4E; font-weight: 600; }
.soc__txt { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.soc__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.soc__chips span { display: flex; align-items: center; gap: 8px; min-height: 40px; box-sizing: border-box; padding: 8px 16px; border-radius: 20px; background: var(--bg); font-size: 14px; font-weight: 500; line-height: 1.3; }
.soc__brand { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 22px; background: var(--dark); color: #fff; margin-top: 6px; }
.soc__brand > span:last-child { text-wrap: pretty; }

/* ---------- 10. Оплаты ---------- */
.pay { display: flex; flex-wrap: wrap; gap: clamp(36px, 5vw, 64px); align-items: center; }
.pay__txt { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.pay__pts { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.pay__pts > div { display: flex; gap: 12px; align-items: center; }
.pay__pts > div > span { width: 34px; height: 34px; flex: none; border-radius: 50%; background: #FBF3DD; color: #B98A1E; display: flex; align-items: center; justify-content: center; }
.pay__vis { flex: 1 1 420px; min-width: 0; position: relative; display: flex; justify-content: center; padding: 10px 0 40px; }
.invchat { width: min(100%, 418px); box-sizing: border-box; background: #fff; border-radius: 28px; border: 1px solid var(--border); padding: 18px; display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 20px 50px rgba(29,27,26,.08); }
.invchat__hd { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--divider); }
.invchat__hd b { font-weight: 600; font-size: 14px; }
.invchat__msg { align-self: flex-start; max-width: 85%; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: #F6F4F1; font-size: 14px; box-sizing: border-box; }
.inv { align-self: flex-start; width: 85%; box-sizing: border-box; border-radius: 20px; border: 1px solid var(--border); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.inv__k { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted-2); }
.inv__k .i { color: #B98A1E; }
.inv > b { font-weight: 600; }
.inv__sum { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.inv__btn { height: 44px; border-radius: 22px; background: var(--red); color: #fff; font-weight: 600; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.pay__res { position: absolute; right: 0; bottom: 0; padding: 14px 18px; border-radius: 22px; background: var(--dark); color: #fff; box-shadow: 0 20px 40px rgba(29,27,26,.25);
  display: flex; flex-direction: column; gap: 4px; }
.pay__res span { font-size: 12px; color: #A89E95; }
.pay__res b { font-weight: 600; }

/* ---------- 11. Как начать ---------- */
.start { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(56px, 8vw, 104px); display: flex; flex-direction: column; gap: 32px; }
.start__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.start__head .h2 { max-width: 700px; }
.start__robot { display: flex; align-items: center; gap: 14px; }
.start__robot > span { font-size: 15px; color: var(--ink-2); max-width: 220px; text-wrap: pretty; }
.steps3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.steps3 > div { background: #fff; border: 1px solid var(--border); border-radius: 28px; padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.pfn { font-family: var(--pf); font-style: italic; font-weight: 500; font-size: 56px; line-height: 1; color: var(--red); }
.steps3 > div > span:last-child { font-size: 18px; font-weight: 500; text-wrap: pretty; }
.disc { border-radius: 28px; background: #FFF4D6; padding: 22px clamp(20px, 3vw, 32px); display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.disc__ic { width: 56px; height: 56px; flex: none; border-radius: 18px; background: #FFC24B; color: var(--dark); display: flex; align-items: center; justify-content: center; }
.disc__t { flex: 1 1 320px; min-width: 0; }
.disc__t b { display: block; font-size: clamp(20px, 2vw, 24px); font-weight: 600; letter-spacing: -0.01em; }
.disc__t span { display: block; color: var(--muted); text-wrap: pretty; }
.disc__n { font-family: var(--pf); font-style: italic; font-weight: 500; font-size: clamp(40px, 5vw, 56px); line-height: 1; color: var(--red-dark); }

/* ---------- 12. Тарифы ---------- */
.pricing { display: flex; flex-direction: column; gap: 32px; }
.pricing__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.pricing__h { display: flex; flex-direction: column; gap: 14px; }
.pricing__h .h2 { text-wrap: wrap; }
.bill { display: flex; gap: 2px; padding: 4px; background: var(--divider); border-radius: 24px; max-width: 100%; overflow-x: auto; box-sizing: border-box; }
.bill button { height: 40px; display: flex; align-items: center; gap: 6px; padding: 0 16px; border-radius: 20px; border: none; background: transparent; color: var(--muted);
  font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; transition: background-color .15s, color .15s; }
.bill button span { font-size: 12px; color: var(--green-2); }
.bill button[aria-checked="true"] { background: #fff; color: var(--text); box-shadow: 0 2px 6px rgba(29,27,26,.08); }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; align-items: stretch; }
.plan { --pm: var(--muted); position: relative; border-radius: 30px; padding: 28px; display: flex; flex-direction: column; gap: 20px; background: #fff; color: var(--text);
  border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(29,27,26,.03); }
.plan--hl { --pm: #B7ADA4; background: var(--dark); color: #fff; border-color: var(--dark); box-shadow: 0 24px 60px rgba(29,27,26,.25); }
.plan__tag { position: absolute; top: -14px; left: 28px; height: 28px; padding: 0 12px; border-radius: 14px; background: var(--red); color: #fff; font-size: 13px; font-weight: 600; display: flex; align-items: center; }
.plan__n { font-size: 22px; font-weight: 600; }
.plan__d { font-size: 14px; color: var(--pm); }
.plan__p { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.plan__price { font-size: 46px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.plan__m, .plan__old { font-size: 15px; color: var(--pm); }
.plan__note { font-size: 13px; color: var(--pm); margin-top: 6px; }
.plan__rows { display: flex; flex-direction: column; gap: 12px; padding-top: 18px; border-top: 1px solid var(--divider); }
.plan--hl .plan__rows { border-top-color: rgba(255,255,255,.12); }
.plan__rows > div { display: flex; gap: 12px; align-items: flex-start; }
.plan__rows .i { color: var(--green); margin-top: 2px; }
.plan--hl .plan__rows .i { color: #FF8A9A; }
.plan__rows b { font-weight: 700; }
.plan__rows b + span { color: var(--pm); }
.plan__btn { margin-top: auto; min-height: 54px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 7px 6px clamp(18px, 5vw, 22px);
  border-radius: 27px; background: var(--bg); color: var(--text); font-weight: 600; font-size: 15px; line-height: 1.2; max-width: 100%; transition: transform .15s, background-color .15s; }
.plan__btn:hover { transform: translateY(-1px); }
.plan__btn .circ { width: 40px; height: 40px; background: var(--red); color: #fff; }
.plan--hl .plan__btn { background: var(--red); color: #fff; }
.plan--hl .plan__btn:hover { background: var(--red-hover); }
.plan--hl .plan__btn .circ { background: #fff; color: var(--red); }
.addons { display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 14px; color: var(--muted); padding: 18px 22px; border-radius: 22px; background: var(--bg); }
.addons span { display: flex; align-items: center; gap: 8px; }
.addons__head { flex-basis: 100%; margin: 0 0 2px; color: var(--text, #1D1B1A); }

/* ---------- FAQ ---------- */
.faq { scroll-margin-top: 80px; display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 56px); align-items: flex-start; }
.faq__head { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 96px; }
.faq__head p { color: var(--muted); }
.faq__head a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.faq__head a:hover { color: var(--red-dark); }
.faq__list { flex: 2 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.qa { background: #fff; border: 1px solid var(--border); border-radius: 22px; overflow: hidden; }
.qa h3 { font: inherit; }
.qa button { width: 100%; display: flex; align-items: center; gap: 16px; padding: 20px 22px; border: none; background: transparent; text-align: left; cursor: pointer;
  color: var(--text); font-size: 17px; font-weight: 600; line-height: 1.4; }
.qa button > span:first-child { flex: 1; }
.qa__c { width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--bg); color: var(--text); display: flex; align-items: center; justify-content: center; transition: background-color .15s, color .15s; }
.qa__c .ic-minus { display: none; }
.qa button[aria-expanded="true"] .qa__c { background: var(--red); color: #fff; }
.qa button[aria-expanded="true"] .ic-plus { display: none; }
.qa button[aria-expanded="true"] .ic-minus { display: inline-block; }
.qa__a { padding: 0 22px 22px; color: var(--lead); text-wrap: pretty; max-width: 680px; }

/* ---------- Финальный призыв ---------- */
.final-sec { padding-bottom: clamp(48px, 7vw, 88px); }
.final { position: relative; overflow: hidden; border-radius: clamp(28px, 4vw, 44px); background: #D12E45; color: #fff; padding: clamp(36px, 6vw, 72px) clamp(24px, 5vw, 64px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 32px; }
.final__c1 { position: absolute; right: -90px; top: -120px; width: 420px; height: 420px; border-radius: 50%; background: #E5455B; pointer-events: none; }
.final__c2 { position: absolute; right: 220px; bottom: -180px; width: 300px; height: 300px; border-radius: 50%; background: #C02840; pointer-events: none; }
.final__txt { position: relative; flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.final__row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.final__row > span { font-size: 14px; color: #FFE1E5; }

/* ---------- Подвал ---------- */
.ftr { padding-bottom: 48px; }
.ftr__in { border-top: 1px solid var(--control); padding-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; }
.ftr__nav { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 14px; color: var(--muted); }
.ftr__legal { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 13px; color: var(--muted-2); }
.ftr a:hover, .ftr .logo:hover .logo__txt { color: var(--red); }

/* ---------- Sticky CTA (мобильный) ---------- */
.sticky-cta { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40; display: none;
  opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .2s, transform .2s, visibility 0s .2s; }
.sticky-cta__btn { height: 56px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; padding: 0 7px 0 22px; border-radius: 28px; background: var(--red); color: #fff;
  font-weight: 600; font-size: 16px; box-shadow: 0 14px 32px rgba(229,56,79,.4); }
.sticky-cta__btn .circ { width: 42px; height: 42px; background: #fff; color: var(--red); }

/* ---------- Адаптив ---------- */
@media (min-width: 1060px) {
  .mnav { display: none !important; }
}
@media (max-width: 1059.98px) {
  .hdr__nav { display: none; }
  .hdr__burger { display: flex; }
}
@media (max-width: 859.98px) {
  .hdr__cta { display: none; }
  /* на телефоне — у верхнего края картинки, чтобы плашка попадала в первый экран */
  .vbadge { width: 112px; height: 112px; left: -6px; top: -18px; bottom: auto; }
  .vbadge__ring text { font-size: 11.5px; }
  .vbadge__core { width: 60px; height: 60px; }
  .vbadge__play { width: 34px; height: 34px; margin: -17px 0 0 -17px; }
  .crm__vis, .faq__head { position: static; }
  /* Горизонтальная карусель; отступы сверху/снизу — чтобы тень телефонов не обрезалась краем прокрутки */
  .phones { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    margin: -32px calc(-1 * var(--gutter)) -60px; padding: 32px var(--gutter) 72px; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .ftr { padding-bottom: 104px; }
  .sticky-cta { display: block; }
  .show-sticky .sticky-cta { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  .scan__line { animation: none; display: none; }
  .vbadge__ring { animation: none; }
  .btn:hover, .card--hover:hover, .plan__btn:hover { transform: none; }
}

/* 09.10: длинный заголовок «…нутрициолога и консультанта по ЗОЖ» — чуть меньше, чтобы не было 5 строк */
.h1--long { font-size: clamp(30px, 4.2vw, 52px); line-height: 1.06; }

/* 12.10: новый знак NutriDesk (N с листиком) вместо плитки с буквой */
.logo__mark { width: 34px; height: 34px; border-radius: 11px; flex: none; display: block; box-shadow: 0 6px 16px rgba(229,56,79,.32); }
.logo--sm .logo__mark { width: 30px; height: 30px; border-radius: 9px; }

/* ---------- 12.10: Видео-обзор — блок на странице ---------- */
.vid { display: flex; flex-direction: column; gap: clamp(24px, 3.5vw, 36px); }
.vid__frame { padding: clamp(6px, 1vw, 12px); }
.vid__box { position: relative; border-radius: clamp(18px, 2.4vw, 20px); overflow: hidden; background: var(--bg); aspect-ratio: 16 / 9; }
.vid__player { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--dark); }
.vid__start { position: absolute; inset: 0; width: 100%; padding: 0; border: none; cursor: pointer; background: linear-gradient(180deg, rgba(30,26,25,0) 55%, rgba(30,26,25,.28) 100%);
  display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; }
.vid__start > span:first-child { transition: transform .2s; }
.vid__play { width: clamp(64px, 8vw, 88px); height: clamp(64px, 8vw, 88px); border-radius: 50%; background: var(--red); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 32px rgba(229,56,79,.42), 0 0 0 10px rgba(255,255,255,.55); }
.vid__len { position: absolute; left: 50%; bottom: clamp(12px, 3vw, 28px); transform: translateX(-50%); height: 36px; padding: 0 16px; border-radius: 18px; background: rgba(255,255,255,.94);
  color: var(--dark); font-size: 14px; font-weight: 600; display: flex; align-items: center; white-space: nowrap; box-shadow: 0 8px 20px rgba(29,27,26,.12); }
.vid__start:hover .vid__play, .vid__start:focus-visible .vid__play { transform: scale(1.06); }
.vid__start:focus-visible { outline-offset: -4px; }
.vid.is-started .vid__start { display: none; }

/* ---------- 12.10: Видео-обзор — окно с плеером ---------- */
.vmodal { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 24px; box-sizing: border-box; border: none;
  background: rgba(20,17,16,.86); color: #fff; display: none; align-items: center; justify-content: center; overflow: hidden; z-index: 100; }
.vmodal[open] { display: flex; }
.vmodal::backdrop { background: transparent; }
.vmodal__box { position: relative; width: min(1180px, 100%, (100vh - 120px) * 16 / 9); width: min(1180px, 100%, (100dvh - 120px) * 16 / 9); }
.vmodal__video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 20px; background: #000; }
.vmodal__x { position: absolute; right: 0; bottom: calc(100% + 12px); width: 44px; height: 44px; border-radius: 50%; border: none; background: #fff; color: var(--dark); cursor: pointer;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(0,0,0,.25); transition: background-color .15s, color .15s; }
.vmodal__x:hover { background: var(--red); color: #fff; }
html.vmodal-lock, html.vmodal-lock body { overflow: hidden; }
@media (max-width: 859.98px) {
  .vmodal { padding: 0; }
  .vmodal__box { width: 100%; }
  .vmodal__video { border-radius: 0; }
  .vmodal__x { right: 12px; }
}

/* ---------- 13. Отзывы (13.10) — слайдер ---------- */
.revs { display: flex; flex-direction: column; gap: 28px; }
.revs__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.revs__arrows { display: flex; gap: 10px; flex: none; }
.revs__btn { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--control); background: #fff; color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, opacity .15s; }
.revs__btn:hover:not(:disabled) { background: var(--text); color: #fff; }
.revs__btn:disabled { opacity: .35; cursor: default; }
.revs__track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain;
  scrollbar-width: none; padding: 4px 2px 10px; margin: -4px -2px -10px; align-items: stretch; }
.revs__track::-webkit-scrollbar { display: none; }
.revs__track .rev { flex: 0 0 calc((100% - 32px) / 3); scroll-snap-align: start; }
@media (max-width: 1060px) { .revs__track .rev { flex-basis: calc((100% - 16px) / 2); } }
@media (max-width: 700px) { .revs__track .rev { flex-basis: 86%; } .revs__arrows { display: none; } }
.revs__dots { display: flex; justify-content: center; gap: 8px; }
.revs__dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; background: var(--control); cursor: pointer; transition: width .2s, background .2s; }
.revs__dots button.is-on { width: 24px; background: var(--red); }
.rev { margin: 0; display: flex; flex-direction: column; gap: 18px; padding: 26px 26px 22px; border-radius: 26px; box-sizing: border-box;
  background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-card); }
.rev blockquote { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.rev__q { position: relative; padding-top: 34px; font-family: var(--pf); font-style: italic; font-weight: 500; font-size: clamp(21px, 2vw, 24px);
  line-height: 1.25; color: var(--text); text-wrap: pretty; }
.rev__q::before { content: '\201C'; position: absolute; left: -2px; top: -14px; font-size: 72px; line-height: 1; color: var(--red); font-style: normal; opacity: .9; }
.rev__q b { font-weight: 500; color: var(--red); }
.rev__t { display: flex; flex-direction: column; gap: 10px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); position: relative; }
.rev__t p { margin: 0; text-wrap: pretty; }
.rev__t.is-clamped { max-height: 13em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent); }
.rev__more { align-self: flex-start; margin-top: -6px; padding: 0; border: 0; background: none; color: var(--red); font: 600 14px/1.4 inherit; cursor: pointer; }
.rev__more:hover { text-decoration: underline; }
.rev__who { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px dashed var(--control); margin-top: auto; }
.rev__ava { width: 48px; height: 48px; flex: none; border-radius: 50%; overflow: hidden; background: var(--tb); color: var(--tc); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--border); }
.rev__ava picture, .rev__ava img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rev__who > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.rev__who b { font-size: 15px; color: var(--text); }
.rev__who small { font-size: 13px; line-height: 1.35; color: var(--muted-2); }
.rev__src { display: none; }
.rev__h { margin: 4px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--green); }
.rev__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rev__list li { display: flex; gap: 10px; align-items: flex-start; }
.rev__list .i { flex: none; margin-top: 4px; color: var(--green-2); }
@media (max-width: 520px) { .rev { padding: 22px 20px 18px; } }