/* Saver — лендинг tg-saver.com. Стиль: гибрид bold minimalism + flat и bold-sticky.
   База минималистичная (воздух, крупная жирная типографика, плоские цветные плоскости), а
   «липкий» характер — дозированно: тонкие тёмные обводки, небольшие жёсткие тени, пара
   стикеров и лента-скотч. Палитра снята с аватарки бота (утёнок в новогодней шапке). */

:root {
  --bg: #FFFFFF;
  --surface: #F3F4F7;
  --surface-2: #E9ECF2;
  --ink: #0B1220;
  --muted: #5E6778;
  --line: #E3E6EC;

  --duck: #FFCF00;
  --duck-soft: #FFF3B8;
  --sky: #2B8CF0;
  --sky-deep: #1860D6;
  --sky-soft: #E6F1FE;
  --teal: #5BCCC0;
  --teal-soft: #E3F6F3;
  --teal-deep: #17998B;
  --hat: #E8261C;
  --beak: #FB6A1C;

  --bw: 2px;
  --sh-sm: 3px 3px 0 var(--ink);
  --sh: 5px 5px 0 var(--ink);
  --sh-lg: 8px 8px 0 var(--ink);

  --r: 28px;
  --r-md: 20px;
  --r-sm: 14px;

  --f: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --gutter: clamp(20px, 5vw, 64px);
  --max: 1180px;
  --nav-h: 68px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 400 17px/1.6 var(--f);
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
b, strong { font-weight: 600; }
em { font-style: normal; }
code { font: 500 .88em var(--mono); padding: .15em .45em; background: var(--surface); border-radius: 7px; white-space: nowrap; }
::selection { background: var(--duck); color: var(--ink); }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 8px; }

.skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--ink); color: #fff; border-radius: 10px; }
.skip:focus { top: 12px; }

.wrap { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }
section { padding-block: clamp(80px, 11vw, 160px); }
main { position: relative; }

/* Иконки: плоские, в цвет текста */
.ic, .card__icon svg, .tile__icon svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ic { width: 1.1em; height: 1.1em; flex: none; }

.c-hat { color: var(--hat); }
.c-sky { color: var(--sky); }
.mark { position: relative; z-index: 0; display: inline-block; padding: 0 .16em; color: #fff; }
.mark::before { content: ""; position: absolute; inset: .1em 0 .02em; z-index: -1; border-radius: .16em; transform: rotate(-1.5deg); transform-origin: 0 50%; animation: markIn .7s var(--ease) backwards; animation-delay: var(--md, .6s); }
.mark--hat::before { background: var(--hat); }
.mark--sky::before { background: var(--sky); }
@keyframes markIn { from { transform: rotate(-1.5deg) scaleX(0); } }
.c-muted { color: var(--muted); }

/* ── Прогресс чтения ── */
.progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; }
.progress span { display: block; height: 100%; background: var(--duck); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

/* ── Кнопки (плоские) ── */
.btn {
  --btn-bg: var(--surface); --btn-fg: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .9em 1.4em;
  font: 600 16px/1 var(--f);
  color: var(--btn-fg); background: var(--btn-bg);
  border: var(--bw) solid var(--ink); border-radius: 999px;
  box-shadow: var(--sh-sm);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background .2s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease);
}
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
.btn--duck { --btn-bg: var(--duck); }
.btn--duck:hover { --btn-bg: #FFD83A; }
.btn--ink { --btn-bg: var(--ink); --btn-fg: #fff; box-shadow: 3px 3px 0 var(--duck); }
.btn--ink:hover { --btn-bg: #1C2638; }
.btn--plain { --btn-bg: #fff; }
.btn--plain:hover { --btn-bg: var(--surface); }
.btn--lg { font-size: 17px; padding: 1.05em 1.65em; }
.btn--sm { font-size: 14px; padding: .75em 1.15em; }
.btn .ic { transition: transform .25s var(--ease); }
.btn--sm { box-shadow: 2px 2px 0 var(--duck); }

/* ── Навигация ── */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .86); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); transition: box-shadow .25s, transform .35s var(--ease); }
.nav.is-scrolled { box-shadow: 0 1px 0 var(--line); }
.nav.is-hidden { transform: translateY(-100%); }
.nav__inner { display: flex; align-items: center; gap: 24px; width: min(var(--max), 100% - 2 * var(--gutter)); height: var(--nav-h); margin-inline: auto; }
.nav__brand { display: flex; align-items: center; gap: 10px; font: 800 20px var(--f); letter-spacing: -.02em; text-decoration: none; }
.nav__brand img { border-radius: 9px; }
.nav__links { display: flex; gap: 2px; margin-left: auto; }
.nav__links a { padding: 8px 14px; border-radius: 999px; font-weight: 500; font-size: 15px; color: var(--muted); text-decoration: none; transition: color .2s, background .2s; }
.nav__links a:hover { color: var(--ink); }
.nav__links a.is-active { color: var(--ink); background: var(--surface); }

/* ── Типографика секций ── */
.label { margin: 0 0 20px; font: 600 14px/1 var(--f); letter-spacing: .02em; color: var(--muted); display: flex; align-items: center; gap: 10px; }
.label::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: var(--duck); }
.section-head { max-width: 820px; margin-bottom: clamp(40px, 5.5vw, 72px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .label { justify-content: center; }
.h2 { margin: 0; font: 800 clamp(34px, 5vw, 64px)/1.04 var(--f); letter-spacing: -.035em; text-wrap: balance; }
.lead { margin: 20px 0 0; font-size: 19px; color: var(--muted); max-width: 56ch; }
.center { text-align: center; margin-inline: auto; }

/* ── Появление ── */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0s); }
.reveal.is-in { opacity: 1; transform: none; }

/* ── HERO ── */
.hero {
  display: grid; grid-template-columns: 1.25fr .75fr; align-items: center; gap: clamp(32px, 6vw, 96px);
  width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto;
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
  padding-block: clamp(40px, 6vw, 80px) clamp(64px, 8vw, 110px);
}
.hero__title { margin: 0 0 28px; font: 800 clamp(46px, 7.2vw, 104px)/.98 var(--f); letter-spacing: -.05em; }
.hero__title .line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.hero__title .line > span { display: inline-block; animation: rise 1s var(--ease) backwards; }
.hero__title .line:nth-child(2) > span { animation-delay: .1s; }
.hero__title .line:nth-child(3) > span { animation-delay: .2s; }
@keyframes rise { from { transform: translateY(105%); } }
.hero__lead { margin: 0 0 36px; max-width: 40ch; font-size: clamp(18px, 1.5vw, 20px); color: var(--muted); }
.hero__lead b { color: var(--ink); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; }
.hero__ticks { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 0; padding: 0; list-style: none; font-size: 15px; font-weight: 500; color: var(--muted); }
.hero__ticks li { display: flex; align-items: center; gap: 8px; }
.hero__ticks li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }

.hero__art { position: relative; justify-self: center; width: min(100%, 420px); aspect-ratio: 1; cursor: pointer; }
.shape { position: absolute; border-radius: 50%; }
.shape--sun { inset: 4%; background: var(--duck); }
.shape--sky { width: 30%; aspect-ratio: 1; left: -6%; bottom: 2%; background: var(--sky); }
.shape--teal { width: 16%; aspect-ratio: 1; right: -2%; top: 4%; background: var(--teal); }
.logo-card {
  position: absolute; inset: 20%; overflow: hidden;
  border: 3px solid var(--ink); border-radius: 24%;
  box-shadow: var(--sh-lg);
  background: var(--sky);
  transform: rotate(-3deg);
  animation: pop .9s var(--ease) .15s backwards;
}
/* Lottie-логотип: чёткий постер виден сразу (и если скрипт/анимация не загрузились), поверх —
   векторная анимация; когда она готова, постер плавно уходит. */
[data-lottie] { isolation: isolate; }
.lottie-poster, .lottie-box { position: absolute; inset: 0; width: 100%; height: 100%; }
.lottie-poster { object-fit: cover; transition: opacity .35s var(--ease); }
.lottie-box { opacity: 0; transition: opacity .35s var(--ease); }
.lottie-box svg { display: block; width: 100% !important; height: 100% !important; }
[data-lottie].is-live .lottie-box { opacity: 1; }
[data-lottie].is-live .lottie-poster { opacity: 0; }
/* Появление без scale: Safari растрирует слой в начальном масштабе и растягивает его — на телефонах
   получалось «мыло». Только прозрачность, сдвиг и поворот. */
@keyframes pop { from { opacity: 0; transform: rotate(-9deg) translateY(14px); } }
/* Стикер: внешний .sticker только позиционирует и покачивается (translate, без поворота); поворот,
   фон и обводка — на внутреннем .sticker__in. Если поворот и бесконечная анимация на одном
   элементе, видеокарта поворачивает уже готовую картинку без сглаживания — края в лесенку. */
.sticker { position: absolute; z-index: 2; animation: stickIn .6s var(--ease) backwards, bob 6s ease-in-out infinite; }
.sticker__in {
  display: block; padding: 8px 14px;
  font: 700 clamp(13px, 1.1vw, 15px)/1.1 var(--f); white-space: nowrap;
  background: #fff; border: var(--bw) solid var(--ink); border-radius: 12px; box-shadow: var(--sh-sm);
  transform: rotate(var(--r, 0deg));
}
.sticker--a { top: 10%; left: -8%; --r: -6deg; animation-delay: .8s, 0s; }
.sticker--b { bottom: 14%; right: -8%; --r: 5deg; animation-delay: .95s, -3s; }
.sticker--b .sticker__in { background: var(--duck); }
@keyframes stickIn { from { opacity: 0; } }
@keyframes bob { 50% { translate: 0 -8px; } }

/* ── Бегущая строка ── */
/* Обёртка обрезает наклонённую ленту по краям — иначе на iOS появлялся бы горизонтальный скролл. */
.ticker-wrap { position: relative; z-index: 3; overflow: hidden; padding: 16px 0; }
.ticker { overflow: hidden; padding: 16px 0; background: var(--duck); color: var(--ink); border-block: var(--bw) solid var(--ink); }
.ticker__track { display: flex; width: max-content; gap: 40px; animation: marquee var(--dur, 60s) linear infinite; }
.ticker__track span { display: inline-flex; align-items: center; gap: 40px; font: 700 18px var(--mono); white-space: nowrap; }
.ticker__track span::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ── Демо-чат ── */
.demo { background: var(--sky-soft); }
.demo__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 440px)); justify-content: center; gap: clamp(20px, 3vw, 32px); }
.phone { display: flex; flex-direction: column; height: 460px; background: #fff; border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--sh-lg); overflow: hidden; }
.demo__grid .phone:first-child { rotate: -1deg; }
.demo__grid .phone--bot { rotate: 1deg; }
.phone__bar { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: var(--bw) solid var(--ink); }
.phone__bar b { display: block; font-weight: 600; font-size: 16px; line-height: 1.2; }
.phone__bar small { color: var(--muted); font-size: 13px; }
.avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-weight: 800; color: #fff; overflow: hidden; }
.avatar--teal { background: var(--teal); }
.avatar--img img { width: 100%; height: 100%; object-fit: cover; }
.phone__chat { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 18px; overflow: hidden; background: var(--surface); }
.phone--bot .phone__chat { background: #FFFBEA; }

.msg { position: relative; max-width: 80%; padding: 10px 14px 18px; background: #fff; border-radius: 18px 18px 18px 6px; font-size: 15px; line-height: 1.4; animation: msgIn .45s var(--ease) backwards; transform-origin: 0 100%; }
.msg--me { align-self: flex-end; background: var(--duck); border-radius: 18px 18px 6px 18px; transform-origin: 100% 100%; }
.msg time { position: absolute; right: 10px; bottom: 3px; font-size: 11px; color: var(--muted); }
.msg .edited { margin-left: 6px; font-size: 11px; color: var(--muted); }
.msg.is-deleting { animation: msgOut .55s var(--ease) forwards; }
.msg.is-editing { animation: flash .6s ease; }
@keyframes msgIn { from { opacity: 0; transform: translateY(10px); } }
@keyframes msgOut { 35% { background: #FDE3E1; } to { opacity: 0; transform: scale(.85); height: 0; padding-block: 0; margin-block: -4px; } }
@keyframes flash { 40% { background: var(--sky-soft); } }

.note { padding: 12px 14px; background: #fff; border-radius: 16px; font-size: 14.5px; line-height: 1.45; animation: msgIn .45s var(--ease) backwards; }
.note__head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-weight: 600; font-size: 13.5px; }
.note__head .tag { padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #fff; }
.note--del .tag { background: var(--hat); }
.note--edit .tag { background: var(--sky); }
.note blockquote { margin: 6px 0 0; padding: 6px 10px; border-left: 3px solid var(--duck); background: var(--surface); border-radius: 0 10px 10px 0; }
.note s { color: var(--muted); }
.typing { display: inline-flex; gap: 4px; align-self: flex-start; padding: 12px 14px; background: #fff; border-radius: 16px; animation: msgIn .3s var(--ease) backwards; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: blink 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 50% { opacity: .25; } }

/* ── Как работает: липкая стопка ── */
.how { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px, 6vw, 96px); }
.how__side { position: sticky; top: calc(var(--nav-h) + 56px); align-self: start; }
.stack { display: grid; gap: 24px; }
.card {
  position: sticky; top: calc(var(--nav-h) + 40px + var(--i) * 18px);
  min-height: 320px; padding: clamp(28px, 3.4vw, 44px);
  border: var(--bw) solid var(--ink); border-radius: var(--r);
  box-shadow: var(--sh-lg);
  transform-origin: 50% 0; transform: scale(var(--s, 1));
}
.card h3 { margin: 26px 0 12px; font: 800 clamp(26px, 2.8vw, 36px)/1.08 var(--f); letter-spacing: -.03em; }
.card p { margin: 0; font-size: 18px; max-width: 44ch; opacity: .88; }
.card__num { position: absolute; top: 30px; right: 34px; font: 800 20px var(--f); opacity: .55; }
.card__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.card__icon svg { width: 26px; height: 26px; }
.card--hat { background: var(--hat); color: #fff; }
.card--sky { background: var(--sky); color: #fff; }
.card--duck { background: var(--duck); }
.card--duck .card__icon { background: rgba(11, 18, 32, .08); }
.card--ink { background: var(--ink); color: #fff; box-shadow: 8px 8px 0 var(--duck); }
.card--ink code, .card--hat code, .card--sky code { background: rgba(255, 255, 255, .16); color: inherit; }

/* ── Цифры ── */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding-block: clamp(40px, 6vw, 80px); border-block: 1px solid var(--line); }
.stat b { display: block; font: 800 clamp(48px, 6.4vw, 88px)/1 var(--f); letter-spacing: -.05em; }
.stat:nth-child(1) b { color: var(--sky); }
.stat:nth-child(2) b { color: var(--hat); }
.stat:nth-child(4) b { color: var(--teal-deep); }
.stat span { display: block; margin-top: 10px; color: var(--muted); font-weight: 500; }

/* ── Команды ── */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.tabs button { padding: 10px 18px; font: 600 15px/1 var(--f); color: var(--muted); background: var(--surface); border: 0; border-radius: 999px; cursor: pointer; transition: background .2s, color .2s; }
.tabs button:hover { color: var(--ink); background: var(--surface-2); }
.tabs button[aria-selected="true"] { color: #fff; background: var(--ink); }

.cmd-layout { display: grid; grid-template-columns: 1fr 380px; gap: 32px; align-items: start; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 14px;
  font: 500 15px/1 var(--mono); color: var(--ink);
  background: var(--surface); border: 0; border-radius: 12px; cursor: pointer;
  transition: background .2s, color .2s, transform .2s var(--ease);
  animation: chipIn .35s var(--ease) backwards; animation-delay: calc(var(--k, 0) * 12ms);
}
.chip[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: 3px 3px 0 var(--duck); }
.chip .dot-p { width: 7px; height: 7px; border-radius: 50%; background: var(--duck); }
.chip small { padding: 3px 6px; font: 700 10px/1 var(--f); border-radius: 6px; background: var(--sky); color: #fff; }
@keyframes chipIn { from { opacity: 0; transform: translateY(6px); } }

.cmd-detail { position: sticky; top: calc(var(--nav-h) + 32px); min-height: 280px; padding: 30px; background: var(--duck-soft); border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--sh-lg); }
.cmd-detail__inner { animation: msgIn .35s var(--ease) backwards; }
.cmd-detail__tag { display: inline-block; padding: 5px 11px; font-size: 13px; font-weight: 600; background: #fff; border-radius: 999px; }
.cmd-detail h3 { margin: 16px 0 12px; font: 800 30px/1.05 var(--f); letter-spacing: -.03em; }
.cmd-detail p { margin: 0 0 16px; }
.cmd-detail .usage { display: block; margin: 0 0 16px; padding: 12px 14px; white-space: pre-wrap; word-break: break-word; font-size: 14px; color: #fff; background: var(--ink); border-radius: 12px; }
.cmd-detail .aliases { display: flex; flex-wrap: wrap; gap: 6px; }
.cmd-detail .aliases code { background: #fff; }

/* ── Возможности ── */
.features { background: var(--surface); }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tile { padding: 32px; background: #fff; border: var(--bw) solid var(--ink); border-radius: var(--r); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.tile--wide { grid-column: span 2; }
.tile--full { grid-column: 1 / -1; }
.tile h3 { margin: 22px 0 8px; font: 800 clamp(22px, 2vw, 28px)/1.12 var(--f); letter-spacing: -.03em; }
.tile p { margin: 0; color: var(--muted); }
.tile__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--sky); color: #fff; }
.tile__icon svg { width: 24px; height: 24px; }
.tile__icon--duck { background: var(--duck); color: var(--ink); }
.tile__icon--ink { background: var(--ink); }
.tile__icon--teal { background: var(--teal); }
.tile__icon--hat { background: var(--hat); }
.tile--sky { background: var(--sky); color: #fff; }
.tile--sky p { color: rgba(255, 255, 255, .86); }
.tile--sky .tile__icon { background: rgba(255, 255, 255, .2); }
.tile--sky code { background: rgba(255, 255, 255, .18); color: #fff; }
.tile--duck { background: var(--duck); }
.tile--duck p { color: rgba(11, 18, 32, .72); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.pills span { padding: 7px 13px; font-size: 14px; font-weight: 600; background: rgba(255, 255, 255, .18); border-radius: 999px; }

/* ── Подключение ── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; }
.step { padding: 32px; background: #fff; border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--sh); }
.step__n { display: block; font: 800 clamp(56px, 6vw, 80px)/1 var(--f); letter-spacing: -.05em; color: var(--sky); }
.step:nth-child(2) .step__n { color: var(--teal-deep); }
.step:nth-child(3) .step__n { color: var(--hat); }
.step h3 { margin: 20px 0 6px; font: 800 22px/1.2 var(--f); letter-spacing: -.02em; }
.step p { margin: 0; color: var(--muted); }
.copy { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 10px 14px; font: 600 14px var(--mono); color: var(--ink); background: var(--duck); border: var(--bw) solid var(--ink); border-radius: 12px; box-shadow: var(--sh-sm); cursor: pointer; transition: transform .15s, box-shadow .15s; }
.copy:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }

/* ── Цена ── */
.pricing { background: var(--surface); }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 440px)); justify-content: center; gap: 20px; margin-bottom: 36px; }
.plan { display: flex; flex-direction: column; padding: 36px; background: #fff; border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--sh-lg); }
.plan h3 { margin: 0; font: 800 24px var(--f); letter-spacing: -.02em; }
.plan__price { margin: 12px 0 26px; color: var(--muted); font-weight: 500; }
.plan__price b { font: 800 64px/1 var(--f); letter-spacing: -.05em; color: var(--ink); }
.plan ul { flex: 1; display: grid; gap: 12px; margin: 0 0 32px; padding: 0; list-style: none; }
.plan li { display: flex; gap: 12px; }
.plan li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 3px; border-radius: 50%; background: var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.plan__price .star { display: inline-block; width: 28px; height: 28px; vertical-align: -5px; }
.plan--hot { background: var(--ink); color: #fff; box-shadow: 8px 8px 0 var(--duck); rotate: .8deg; }
.plan--hot .plan__price { color: rgba(255, 255, 255, .7); }
.plan--hot .plan__price b { color: #fff; }
.plan--hot li::before { background-color: var(--duck); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1220' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.plan__badge { align-self: flex-start; margin-bottom: 18px; padding: 6px 12px; font-size: 13px; font-weight: 700; color: #fff; background: var(--hat); border-radius: 10px; rotate: -2deg; }

/* ── FAQ ── */
.faq__list { max-width: 860px; border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); }
summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0; font: 600 clamp(18px, 1.7vw, 21px)/1.35 var(--f); letter-spacing: -.01em; cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary .ic { width: 22px; height: 22px; padding: 4px; box-sizing: content-box; border-radius: 50%; background: var(--surface); transition: transform .3s var(--ease), background .2s, color .2s; }
details[open] summary .ic { transform: rotate(45deg); background: var(--ink); color: #fff; }
details p { margin: -8px 0 26px; max-width: 68ch; color: var(--muted); }
details a { color: var(--sky-deep); font-weight: 600; }

/* ── Финальный CTA ── */
.final { padding-top: 0; }
.final__card { position: relative; overflow: hidden; padding: clamp(48px, 8vw, 110px) clamp(28px, 6vw, 88px); background: var(--duck); border: var(--bw) solid var(--ink); border-radius: calc(var(--r) + 8px); box-shadow: 10px 10px 0 var(--ink); }
.final__card h2 { position: relative; z-index: 1; max-width: 13ch; margin: 0 0 36px; font: 800 clamp(38px, 6vw, 80px)/1 var(--f); letter-spacing: -.05em; }
.final__card .btn { position: relative; z-index: 1; }
.final__duck { position: absolute; right: clamp(-40px, -2vw, -10px); bottom: clamp(-40px, -2vw, -10px); width: clamp(160px, 26vw, 340px); aspect-ratio: 1; overflow: hidden; background: var(--sky); border: 3px solid var(--ink); border-radius: 24%; transform: rotate(-8deg); }

/* ── Футер ── */
.footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding-block: 48px 56px; }
.footer__brand { display: flex; align-items: center; gap: 10px; font-size: 18px; }
.footer__brand b { font-weight: 800; }
.footer__brand img { border-radius: 9px; }
.footer__links { display: flex; flex-wrap: wrap; gap: 0 24px; }
.footer__links a { display: inline-block; padding: 10px 0; color: var(--muted); text-decoration: none; font-weight: 500; font-size: 15px; }
.footer__links a:hover { color: var(--ink); }
.footer__copy { flex-basis: 100%; margin: 8px 0 0; font-size: 14px; color: var(--muted); }

/* ── Тост ── */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 80; padding: 12px 20px; font-weight: 600; color: #fff; background: var(--ink); border-radius: 999px; transform: translate(-50%, calc(100% + 40px)); visibility: hidden; transition: transform .35s var(--ease), visibility 0s linear .35s; }
.toast.is-on { transform: translate(-50%, 0); visibility: visible; transition: transform .35s var(--ease), visibility 0s; }

/* ── Эффекты наведения — только там, где есть настоящий курсор: на тач-экранах «подъём»
      после тапа залипал бы. Нажатие (:active) работает везде. ── */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translate(-2px, -2px); box-shadow: var(--sh); }
  .btn--ink:hover { box-shadow: 5px 5px 0 var(--duck); }
  .btn:hover .ic { transform: translateX(3px); }
  .btn--sm:hover { box-shadow: 3px 3px 0 var(--duck); }
  .ticker:hover .ticker__track { animation-play-state: paused; }
  .chip:hover { background: var(--surface-2); transform: translateY(-1px); }
  .tile:hover { transform: translate(-3px, -3px); box-shadow: var(--sh-lg); }
  .copy:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
  .btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
  .copy:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
}

/* ── Адаптив ── */
@media (max-width: 1024px) {
  .cmd-layout { grid-template-columns: minmax(0, 1fr); }
  /* Узкий экран: горизонтальная лента команд в 3 ряда, описание — сразу под ней. */
  .chips { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 10px; }
  .chips::-webkit-scrollbar, .tabs::-webkit-scrollbar { display: none; }
  .chip-row { display: flex; gap: 8px; width: max-content; }
  .chip { flex: none; white-space: nowrap; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px; }
  .tabs button { flex: none; }
  .cmd-detail { position: relative; top: 0; min-height: 0; }
  .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .sticker { animation: stickIn .6s var(--ease) backwards; }
  :root { --nav-h: 60px; }
  .nav__links { display: none; }
  .nav .btn { margin-left: auto; }
  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: 24px; }
  .hero__art { width: min(52%, 270px); order: -1; justify-self: start; }
  .how { grid-template-columns: 1fr; }
  .how__side { position: relative; top: 0; }
  .stats { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .demo__grid { grid-template-columns: minmax(0, 480px); }
  .phone { height: 400px; }
  .steps { grid-template-columns: 1fr; }
  .plans { grid-template-columns: minmax(0, 480px); }
}
@media (max-width: 720px) {
  .grid { grid-template-columns: 1fr; }
  .tile--wide, .tile--full { grid-column: auto; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .hero__title { font-size: 13vw; }
  .hero__cta .btn { width: 100%; }
  .card { min-height: 290px; }
  .card p { font-size: 16px; }
  .tile, .step, .plan { padding: 26px; }
  .final__duck { width: 130px; right: -18px; bottom: -18px; }
  .final__card h2 { max-width: 9ch; }
  .sticker__in { padding: 5px 9px; font-size: 12px; border-radius: 9px; box-shadow: 2px 2px 0 var(--ink); }
  .sticker--a { top: -2%; left: 30%; }
  .sticker--b { bottom: 0; right: -18%; }
  .phone { rotate: 0deg !important; }
}

/* Невысокие телефоны (iPhone SE и т.п.): компактный hero, чтобы главная кнопка была в первом экране. */
@media (max-width: 600px) and (max-height: 760px) {
  .hero { padding-top: 12px; padding-bottom: 56px; }
  .hero__art { width: min(38%, 170px); }
  .hero .label { margin-bottom: 12px; }
  .hero__title { font-size: 11.5vw; margin-bottom: 16px; }
  .hero__lead { font-size: 16px; margin-bottom: 22px; }
  .sticker--a { top: -12%; left: 48%; }
  .sticker--b { display: none; }   /* маленький логотип — второй стикер закрывал бы мордочку */
}
@media (max-width: 600px) and (max-height: 620px) {
  .hero__art { width: min(30%, 120px); }
  .hero__lead { font-size: 15px; }
  .sticker { display: none; }
}
@media (max-width: 360px) {
  .btn--lg { padding-inline: 1.15em; font-size: 16px; }
}
@media (max-height: 640px) {
  .card, .how__side, .cmd-detail { position: relative; top: auto; }
  .hero { min-height: 0; }
}

/* ── Меньше движения ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .hero__title .line > span { transform: none; }
  .card { --s: 1 !important; }
}