/* ══════════════════════════════════════════════════════════════════
   ПЛАНЕР ОГЭ · СТИЛИ
   Порядок: переменные → база → шапка → кнопки → секции → адаптив
   ══════════════════════════════════════════════════════════════════ */

/* ─── 1. ПАЛИТРА ───────────────────────────────────────────────────
   Собрана под девятиклассника, а не под его родителя.
   Ориентиры — Duolingo, Quizlet, Skysmart: насыщенный цвет вместо
   офисного серого, кислотный акцент, тёплая бумага вместо белого.

   Названия переменных остались прежними, поэтому вся остальная
   таблица стилей подхватила новые цвета без единой правки.          */
:root{
  /* ═════════════════════════════════════════════════════════════
     ПАЛИТРА САЙТА · шесть цветов
     ─────────────────────────────────────────────────────────────
     Основа задана заказчиком. У каждого цвета три версии:
       ·  чистый      — заливки, плашки, крупные пятна
       · -d тёмный    — текст и ссылки, доведён до контраста 4.5
       · -l светлый   — подложки под текст

     Тёмные оттенки не выдуманы: каждый затемнялся по светлоте,
     пока не прошёл норму читаемости на бумажном фоне. Жёлтый и
     песочный на белом не читаются вообще, поэтому текст на них
     ставится только чернильный.
     ═════════════════════════════════════════════════════════════ */
  --sunny:#FFDB3F;   --sunny-d:#8B7100;   --sunny-l:#FFF6D6;
  --grape:#8D5EBA;   --grape-d:#6B3F97;   --grape-l:#F0EAF8;
  --rose:#DA6889;    --rose-d:#CD3460;    --rose-l:#FBEAEF;
  --ocean:#337AA5;   --ocean-d:#25607F;   --ocean-l:#E6F1F7;
  --sand:#D4AA82;    --sand-d:#986534;    --sand-l:#F8F0E7;
  --stone:#E3DEDB;   --stone-d:#827065;   --stone-l:#F4F1EF;

  /* ─── Базовые ───────────────────────────────────────────────── */
  --ink:#221D1B;        /* текст: тёплый графит из семейства серого */
  --ink-2:#4E443F;
  --muted:#6E625A;      /* подписи: контраст 5.6 на бумаге */
  --paper:#FBFAF9;
  --card:#FFFFFF;
  --line:#E3DEDB;       /* серый из палитры и есть цвет линий */

  /* ─── Восемь цветов дня ИЗ ПЛАНЕРА ──────────────────────────────
     Не трогаются: раздел «11 схем» обязан показывать настоящие
     цвета таблицы, иначе снимки будут врать покупателю.        */
  --pink-1:#F4A9C4;  --pink-2:#FCE3EC;  --pink-d:#D4739A;
  --peach-1:#F9C79B; --peach-2:#FDEBDC; --peach-d:#DE9A56;
  --sun-1:#FDDD96;   --sun-2:#FEF3D6;   --sun-d:#D9AE3B;
  --grass-1:#C9E29B; --grass-2:#EDF5DE; --grass-d:#8FB255;
  --mint-1:#A9DDDF;  --mint-2:#E0F3F4;  --mint-d:#5FA9AC;
  --sky-1:#B1CFFD;   --sky-2:#E4EEFE;   --sky-d:#6E97E0;
  --lav-1:#C9BEEC;   --lav-2:#EDE8F9;   --lav-d:#9585CE;
  --coral-1:#F2B8B5; --coral-2:#FBE6E5; --coral-d:#D98682;

  /* ─── Старые имена → новые цвета ────────────────────────────────
     Оставлены, чтобы не переписывать тысячу правил ниже.       */
  --blue:#337AA5;   --blue-d:#25607F;   --blue-l:#E6F1F7;
  --pink:#DA6889;   --pink-l:#FBEAEF;
  --denim:#337AA5;  --denim-d:#25607F;  --denim-l:#E6F1F7;
  --berry:#DA6889;  --berry-d:#CD3460;  --berry-l:#FBEAEF;
  --lime:#FFDB3F;
  --sky:#337AA5;
  --mint:#F0EAF8; --sun:#FFF6D6; --blush:#FBEAEF; --lav:#F0EAF8;

  --r-l:28px; --r-m:20px; --r-s:14px;
  --sh-1:0 2px 8px rgba(34,29,27,.05);
  --sh-2:0 10px 30px rgba(34,29,27,.09);
  --sh-3:0 24px 60px rgba(34,29,27,.14);
  --wrap:1180px;
  --safe-b:0px;  --safe-t:0px;
}
/* Safe area работает только там, где есть env(). Старые браузеры
   просто оставят нули и ничего не сломается.                         */
@supports (padding:max(0px)){
  :root{
    --safe-b:env(safe-area-inset-bottom);
    --safe-t:env(safe-area-inset-top);
  }
}

/* ─── 2. БАЗА ─────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html{
  scroll-behavior:smooth;
  scroll-padding-top:92px;
  -webkit-text-size-adjust:100%;   /* iOS не растягивает шрифт в альбомной */
}
body{
  font-family:Manrope,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;  /* без синей вспышки на тапе */
  /* Обязательно: без этого абсолютный слой нити (.thread) отсчитывает
     высоту от ОКНА, а не от страницы, и обрывается на первом экране. */
  position:relative;
}
/* ─── ФОН · mesh-градиент с зерном ─────────────────────────────────
   Главный приём вёрстки 2026 года: не картинка и не плоская заливка,
   а несколько цветовых пятен, растекающихся друг в друга. Сверху —
   плёночное зерно, чтобы цвет не выглядел «пластиковым».

   Взяты те же восемь цветов планера, но в полную силу: подросток
   должен увидеть цвет сразу, а не «приятный светлый фон». Читаемость
   держит третий слой — вуаль цвета бумаги.

   Всё нарисовано кодом: картинка-подложка больше не грузится,
   минус мегабайт на первой загрузке.                                */
body::before{
  content:'';position:fixed;inset:-10%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(42% 46% at 12%  8%,  #DA6889 0%, transparent 62%),
    radial-gradient(38% 42% at 88% 12%,  #8D5EBA 0%, transparent 60%),
    radial-gradient(46% 40% at 78% 52%,  #337AA5 0%, transparent 62%),
    radial-gradient(40% 44% at  8% 58%,  #FFDB3F 0%, transparent 60%),
    radial-gradient(44% 38% at 50% 96%,  #D4AA82 0%, transparent 62%),
    radial-gradient(34% 34% at 34% 34%,  #FFDB3F 0%, transparent 58%),
    radial-gradient(30% 30% at 66% 78%,  #8D5EBA 0%, transparent 58%),
    var(--paper);
  /* Медленное дыхание пятен. Не отвлекает, но страница «живая» */
  animation:meshDrift 26s ease-in-out infinite alternate;
}
@keyframes meshDrift{
  from{transform:scale(1)      translate3d(0,0,0)}
  to  {transform:scale(1.08) translate3d(-2%,-1.5%,0)}
}

/* Зерно + вуаль. Зерно — SVG-шум прямо в CSS, отдельный файл не нужен.
   Вуаль цвета бумаги гасит цвет ровно настолько, чтобы текст читался. */
body::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E"),
    rgba(251,250,249,.76);
  mix-blend-mode:normal;
}

/* Кому мешает движение — фон просто стоит на месте */
@media(prefers-reduced-motion:reduce){
  body::before{animation:none}
}
h1,h2,h3{font-family:Unbounded,Manrope,sans-serif;letter-spacing:-.02em;line-height:1.15}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block;height:auto}
button{font-family:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}

/* Появление блоков при прокрутке. Если JS не сработал — класс no-js
   на <html> покажет всё сразу, ничего не пропадёт.                   */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}

/* ─── 3. ШАПКА ────────────────────────────────────────────────────── */
header{
  position:fixed;top:0;left:0;right:0;z-index:80;
  padding:calc(16px + var(--safe-t)) 0 16px;
  transition:padding .28s ease,background .28s ease;
}
header.small{
  padding:calc(8px + var(--safe-t)) 0 8px;
  background:rgba(251,250,248,.95);
  box-shadow:0 1px 0 var(--line);
}
/* Размытие — только там, где браузер его умеет. Иначе просто плотный фон. */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  header.small{
    background:rgba(251,250,248,.82);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  }
}
.nav{display:flex;align-items:center}
.logo{display:flex;align-items:center;flex-shrink:0}
.logo-mark{display:flex;margin-right:11px;flex-shrink:0}
.logo-mark svg{width:38px;height:38px;border-radius:12px;box-shadow:var(--sh-2)}
.logo-txt{font-size:15px;font-weight:500;color:var(--muted);line-height:1.15;
  letter-spacing:-.01em;white-space:nowrap}
.logo-txt b{display:block;font-weight:800;font-size:16px;color:var(--ink)}
.menu{
  display:flex;margin-left:auto;background:rgba(255,255,255,.7);
  border:1px solid var(--line);border-radius:999px;padding:5px
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .menu{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
}
.menu a{
  padding:9px 15px;border-radius:999px;font-size:14px;font-weight:600;
  color:var(--ink-2);transition:.2s;white-space:nowrap
}
.menu a.on{background:var(--ink);color:#fff}
.head-cta{
  padding:12px 22px;border-radius:999px;background:var(--ink);color:#fff;
  font-weight:700;font-size:14px;flex-shrink:0;margin-left:14px;
  transition:.2s;box-shadow:var(--sh-1)
}
.burger{
  display:none;margin-left:auto;width:46px;height:46px;border-radius:13px;
  border:1px solid var(--line);background:#fff;cursor:pointer;font-size:19px
}

/* ─── 4. КНОПКИ ───────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:15px 30px;border-radius:999px;
  font-weight:700;font-size:15px;cursor:pointer;border:none;transition:.22s;
  font-family:inherit;text-align:center
}
.btn-1{background:var(--ink);color:#fff;box-shadow:var(--sh-2)}
.btn-2{background:#fff;color:var(--ink);border:1.5px solid var(--line);box-shadow:var(--sh-1)}
.btn-3{background:linear-gradient(135deg,var(--rose-d),var(--rose));color:#fff;
  box-shadow:0 10px 26px rgba(205,52,96,.28)}

/* Эффекты наведения — только для мыши. На тачскрине они «залипают». */
@media (hover:hover) and (pointer:fine){
  .menu a:hover{background:var(--blue-l);color:var(--ink)}
  .head-cta:hover,.btn-1:hover,.btn-3:hover{transform:translateY(-3px)}
  .head-cta:hover{box-shadow:var(--sh-2)}
  .btn-1:hover{box-shadow:var(--sh-3)}
  .btn-2:hover{border-color:var(--blue);transform:translateY(-2px)}
  .btn-3:hover{box-shadow:0 16px 36px rgba(212,115,154,.40)}
  .mcard:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:var(--stone)}
  .slide:hover{box-shadow:var(--sh-3)}
  .shot:hover{border-color:var(--blue);transform:translateY(-4px);box-shadow:var(--sh-2)}
  .c-btn:hover:not(:disabled){background:var(--ink);color:#fff;border-color:var(--ink)}
  .link-row:hover{background:rgba(255,255,255,.15);transform:translateX(5px)}
  .foot a:hover{color:var(--ink)}
}
/* Отклик на нажатие — работает и на телефоне */
.btn:active{transform:scale(.97)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}


/* ══════════════════════════════════════════════════════════════════
   КОТЫ · базовые правила
   ══════════════════════════════════════════════════════════════════
   Эти правила случайно уехали вместе с блоком стилей подарка, когда
   тот удалялся. Без них фотография переставала быть круглой
   (пропадал border-radius), а полоса котов теряла flex и вставала
   столбиком. Возвращены и увеличены: кружки были 82 px, стали 130 —
   на глаз это те самые «плюс полтора сантиметра».
   ══════════════════════════════════════════════════════════════════ */
.cat{
  width:100%;height:100%;display:block;border-radius:50%;
  object-fit:cover;object-position:center
}

.cat-strip{
  display:flex;justify-content:center;align-items:center;flex-wrap:wrap;
  padding:34px 24px;margin:0 auto;max-width:var(--wrap)
}
.cat-strip span{
  width:130px;height:130px;border-radius:50%;overflow:hidden;margin:11px;
  border:3.5px solid var(--ink);box-shadow:5px 5px 0 var(--ink);
  transition:transform .35s cubic-bezier(.2,.7,.3,1);flex-shrink:0;
  background:var(--card)
}
.cat-strip span:nth-child(odd){transform:rotate(-5deg)}
.cat-strip span:nth-child(even){transform:rotate(5deg)}
@media (hover:hover) and (pointer:fine){
  .cat-strip span:hover{transform:rotate(0) scale(1.1) translateY(-6px);z-index:2}
}

/* Аватарка в отзыве — тоже круг, тоже перестала им быть */
.rev-ava{overflow:hidden}
.rev-ava .cat{border-radius:50%}

/* ─── 5. ОБЩЕЕ ДЛЯ СЕКЦИЙ ─────────────────────────────────────────── */
section{padding:88px 0;position:relative}
.tag{
  display:inline-flex;align-items:center;padding:7px 15px;border-radius:999px;
  background:#fff;border:1px solid var(--line);font-size:12.5px;font-weight:700;
  color:var(--ink-2);box-shadow:var(--sh-1);margin-bottom:18px
}
/* Крупная типографика — главный приём: заголовок должен бить сразу */
.h2{font-size:clamp(28px,4.4vw,48px);font-weight:700;margin-bottom:14px;letter-spacing:-.03em}
.lead{font-size:clamp(15px,1.6vw,17px);color:var(--ink-2);max-width:640px}
/* Секции с декоративными стикерами */
.has-stick{position:relative}
.has-stick .sticker{z-index:4}

/* ─── 6. ГЕРОЙ ────────────────────────────────────────────────────── */
.hero{padding:150px 0 70px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.hero h1{font-size:clamp(33px,6vw,68px);font-weight:700;margin-bottom:20px;letter-spacing:-.035em}
.hero h1 mark{background:linear-gradient(180deg,transparent 56%,var(--sunny) 56%);
  color:inherit;padding:0 6px;border-radius:4px}
.hero p.lead{margin-bottom:28px}
.hero-btns{display:flex;flex-wrap:wrap;margin:0 -6px 30px}
.hero-btns>*{margin:0 6px 12px}
.trust{display:flex;flex-wrap:wrap;font-size:13px;color:var(--muted);font-weight:600;margin:0 -13px}
.trust>div{margin:0 13px 10px}
.trust b{display:block;font-size:22px;color:var(--ink);font-family:Unbounded,sans-serif}

/* Счётчик дней до экзамена */
.countdown{
  background:var(--ink);color:#fff;border-radius:var(--r-m);padding:20px 24px;
  display:flex;align-items:center;flex-wrap:wrap;margin-bottom:26px;box-shadow:var(--sh-2)
}
.cd-num{font-family:Unbounded,sans-serif;font-size:40px;font-weight:700;line-height:1}
.cd-lbl{font-size:13px;opacity:.72;font-weight:600}
.cd-right{flex:1;min-width:150px;margin-left:20px}
.cd-bar{height:7px;border-radius:99px;background:rgba(255,255,255,.16);overflow:hidden;margin-top:8px}
.cd-bar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--pink),var(--sun));width:0;transition:width 1.2s ease}

/* Коллаж из карточек планера — плотной группой, веером */
/* ─── ПОРТРЕТ В ПЕРВОМ ЭКРАНЕ ─────────────────────────────────────
   Раньше здесь был коллаж из трёх карточек. Живой человек в шапке
   продаёт лучше выдуманных табличек, поэтому карточки убраны,
   а их стили удалены, чтобы не копился мёртвый код.            */
.hero-art{position:relative;min-height:430px;display:flex;
  align-items:flex-end;justify-content:center}

/* Цветное пятно за спиной — тот же приём, что у фона страницы.
   Оно и отделяет фигуру от узора, и держит её в палитре планера. */
.hero-photo{position:relative;z-index:1;display:flex;justify-content:flex-end;
  width:100%;padding-left:8%}
.hero-photo::before{
  content:'';position:absolute;z-index:-1;
  left:50%;bottom:-6%;transform:translateX(-50%);
  width:104%;height:92%;border-radius:52% 48% 46% 54% / 58% 54% 46% 42%;
  background:
    radial-gradient(62% 62% at 32% 28%, var(--ocean-l) 0%, transparent 72%),
    radial-gradient(58% 58% at 72% 68%, var(--rose-l) 0%, transparent 72%),
    var(--sunny-l);
  filter:blur(2px)
}
.hero-photo img{
  width:100%;max-width:430px;height:auto;display:block;
  /* Низ растворяем — фигура «стоит» на странице, а не обрезана линейкой */
  -webkit-mask-image:linear-gradient(180deg,#000 86%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 86%,transparent 100%);
  filter:drop-shadow(0 18px 34px rgba(35,32,29,.16))
}

/* Подписи вокруг портрета */
.hero-note{
  position:absolute;z-index:2;
  background:var(--card);border:2px solid var(--ink);
  border-radius:var(--r-s);padding:9px 14px;
  font-size:12px;font-weight:700;color:var(--ink-2);line-height:1.25;
  box-shadow:4px 4px 0 var(--ink);white-space:nowrap
}
.hero-note b{display:block;font-family:Unbounded,sans-serif;
  font-size:19px;font-weight:700;color:var(--ink);letter-spacing:-.02em}
/* Все три ушли влево и вниз: справа вверху поднята рука
   со скрещёнными пальцами — там ничего ставить нельзя. */
.hero-note.n1{top:14%;left:-8%;transform:rotate(-6deg)}
.hero-note.n2{top:47%;left:-12%;transform:rotate(4deg)}
.hero-note.n3{bottom:14%;left:-4%;transform:rotate(-3deg)}

/* Стикеры-накладки. Внутри может быть эмодзи или <img> */
.sticker{
  position:absolute;width:108px;height:108px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:40px;
  background:#fff;border:4px solid var(--ink);box-shadow:6px 6px 0 var(--ink);
  z-index:6;overflow:hidden;user-select:none
}
.sticker img{width:100%;height:100%;object-fit:cover}
.s-a{top:-30px;right:12%;transform:rotate(-12deg)}
.s-b{top:150px;left:-42px;transform:rotate(9deg)}
.s-c{bottom:-14px;right:2%;transform:rotate(-7deg)}
.pill{padding:2px 8px;border-radius:99px;font-size:9.5px;font-weight:800;display:inline-block}

/* ─── 6б. БЕГУЩАЯ СТРОКА ──────────────────────────────────────────── */
/* Приём из подростковых лендингов: разделяет экраны и задаёт темп */
.ticker{
  overflow:hidden;background:var(--ink);color:#fff;padding:15px 0;
  transform:rotate(-1.1deg);margin:10px -30px 0;position:relative;z-index:2
}
.ticker-row{display:flex;white-space:nowrap;will-change:transform;
  animation:tickerMove 34s linear infinite}
.ticker-row span{font-size:15px;font-weight:700;padding:0 18px;flex-shrink:0}
.ticker-row span:nth-child(even){opacity:.4}
@keyframes tickerMove{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (hover:hover){.ticker:hover .ticker-row{animation-play-state:paused}}

/* ─── 7. КАРУСЕЛЬ ЛИСТОВ ──────────────────────────────────────────── */
.carousel-head{display:flex;align-items:flex-end;justify-content:space-between;
  flex-wrap:wrap;margin-bottom:26px}
.c-nav{display:flex;margin-left:auto}
.c-btn{
  width:48px;height:48px;border-radius:50%;border:1.5px solid var(--line);
  background:#fff;cursor:pointer;font-size:17px;color:var(--ink);
  transition:.2s;box-shadow:var(--sh-1);margin-left:9px
}
.c-btn:disabled{opacity:.32;cursor:default}
.track{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;   /* инерция на старых iOS */
  padding:6px 4px 22px;margin:0 -4px;
  scrollbar-width:none;-ms-overflow-style:none;
  position:relative;                  /* точка отсчёта для слайдов */
  overscroll-behavior-x:contain       /* свайп по карусели не листает страницу */
}
.track::-webkit-scrollbar{display:none}
.slide{
  flex:0 0 min(760px,88%);
  scroll-snap-align:center;
  scroll-snap-stop:always;            /* резкий свайп не перепрыгивает слайд */
  background:var(--card);
  border-radius:var(--r-l);border:1px solid var(--line);box-shadow:var(--sh-2);
  overflow:hidden;transition:box-shadow .3s;margin-right:22px
}
.slide:last-child{margin-right:0}
.slide-top{padding:16px 22px;display:flex;align-items:center;border-bottom:1px solid var(--line)}
.dots-mac{display:flex;margin-right:11px}
.dots-mac i{width:9px;height:9px;border-radius:50%;background:var(--line);margin-right:5px}
.slide-name{font-weight:800;font-size:13.5px}
.slide-tab{margin-left:auto;font-size:11px;font-weight:700;padding:4px 11px;
  border-radius:99px;background:var(--blue-l);color:var(--blue-d)}
.slide-body{padding:20px 22px 24px;background:linear-gradient(180deg,#fff,var(--paper));
  overflow-x:auto;-webkit-overflow-scrolling:touch}
.slide-cap{padding:0 22px 22px;font-size:13.5px;color:var(--ink-2)}
.slide-cap b{color:var(--ink)}
.dots{display:flex;justify-content:center;margin-top:8px}
/* Точка маленькая, а область нажатия большая — за счёт padding */
.dot{
  width:9px;height:9px;border-radius:99px;background:var(--line);border:none;
  cursor:pointer;transition:.25s;padding:10px;background-clip:content-box;
  box-sizing:content-box
}
.dot.on{width:30px;background:var(--ink);background-clip:content-box}

/* Мини-таблица планера внутри слайда */
.tbl{width:100%;border-collapse:collapse;font-size:11.5px;min-width:440px}
.tbl th{background:var(--blue-l);font-weight:800;font-size:10px;padding:8px 9px;
  text-align:left;color:var(--ink);white-space:nowrap}
.tbl td{padding:7px 9px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl tr:last-child td{border-bottom:0}
.tbl .c{text-align:center}
.band{background:var(--blue);color:#fff;font-weight:800;font-size:11px;
  padding:8px 12px;border-radius:9px;margin-bottom:11px;display:flex;align-items:center}
.band small{margin-left:auto;font-weight:600;opacity:.8;font-size:10px}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(126px,1fr));
  grid-gap:9px;gap:9px;margin-bottom:13px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.kpi s{display:block;font-size:9.5px;color:var(--muted);font-weight:700;
  text-decoration:none;margin-bottom:3px}
.kpi b{font-size:17px;font-family:Unbounded,sans-serif;color:var(--blue-d)}
.bars{display:flex;align-items:flex-end;height:66px;padding:0 2px}
.bars i{flex:1;border-radius:5px 5px 0 0;background:linear-gradient(180deg,var(--blue),var(--stone-d));
  min-height:8px;margin-right:6px}
.bars i:last-child{margin-right:0}

/* ─── 8. СЕТКА ВОЗМОЖНОСТЕЙ ───────────────────────────────────────── */
.masonry{columns:3;column-gap:20px}
.mcard{
  break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  margin-bottom:20px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-m);padding:24px;box-shadow:var(--sh-1);transition:.28s
}
.mcard .ic{width:44px;height:44px;border-radius:13px;display:flex;
  align-items:center;justify-content:center;font-size:20px;margin-bottom:13px}
.mcard h3{font-size:16.5px;margin-bottom:8px;font-family:Manrope;font-weight:800;letter-spacing:0}
.mcard p{font-size:13.5px;color:var(--ink-2)}
.mcard.wide{background:linear-gradient(145deg,var(--ink),var(--ink-2));color:#fff;border:0}
.mcard.wide p{color:rgba(255,255,255,.78)}
.mcard.wide .ic{background:rgba(255,255,255,.13)}

/* ─── 9. БЕЗ ПЛАНЕРА / С ПЛАНЕРОМ ─────────────────────────────────── */
.vs{display:grid;grid-template-columns:1fr 1fr;grid-gap:20px;gap:20px}
.vs-col{border-radius:var(--r-l);padding:30px;border:1px solid var(--line)}
.vs-a{background:#fff}
.vs-b{background:linear-gradient(150deg,var(--ink),#3A322E);color:#fff;border:0;box-shadow:var(--sh-3)}
.vs-col h3{font-size:19px;margin-bottom:18px;font-family:Manrope;font-weight:800;letter-spacing:0}
.vs-col li{list-style:none;display:flex;padding:11px 0;font-size:14px;
  border-bottom:1px dashed rgba(132,148,162,.25)}
.vs-col li:last-child{border:0}
.vs-b li{border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.9)}
.vs-col li i{font-style:normal;flex-shrink:0;margin-right:11px}

/* ─── 10. КОМУ ПОДОЙДЁТ ───────────────────────────────────────────── */
.fit{display:grid;grid-template-columns:1fr 1fr;grid-gap:20px;gap:20px}
.fit-col{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);
  padding:30px;box-shadow:var(--sh-1)}
.fit-col h3{font-size:18px;margin-bottom:16px;font-family:Manrope;font-weight:800;
  letter-spacing:0;display:flex;align-items:center}
.fit-col h3 span{margin-right:9px}
.fit-col li{list-style:none;padding:10px 0 10px 27px;position:relative;
  font-size:14px;color:var(--ink-2)}
.fit-col li::before{position:absolute;left:0;top:10px;font-weight:800}
.fit-yes li::before{content:'✓';color:var(--ocean-d)}
.fit-no li::before{content:'—';color:var(--muted)}

/* ─── 11. ГАЛЕРЕЯ СКРИНШОТОВ ──────────────────────────────────────── */
.shots{columns:3;column-gap:18px}
.shot{
  break-inside:avoid;-webkit-column-break-inside:avoid;
  margin-bottom:18px;border-radius:var(--r-m);overflow:hidden;
  border:1px dashed var(--stone);background:#fff;position:relative;transition:.28s
}
/* Пропорция 16:10 через padding — работает даже там, где нет aspect-ratio */
/* Раньше здесь была диагональная штриховка — на телефоне она читалась
   как «вёрстка поехала». Теперь спокойная подложка с мягким свечением. */
.shot .ph{
  position:relative;padding-top:62.5%;
  background:
    radial-gradient(120% 90% at 50% 0%, #FFFFFF 0%, transparent 70%),
    linear-gradient(160deg, var(--blue-l) 0%, var(--stone-l) 55%, var(--pink-l) 100%)
}
.shot .ph span{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:22px;text-align:center;
  font-size:12px;color:var(--muted);font-weight:700;line-height:1.5
}
.shot .ph em{font-size:26px;margin-bottom:8px;font-style:normal}
.shot figcaption{padding:12px 16px;font-size:12.5px;font-weight:700;border-top:1px solid var(--line)}

/* ─── 13. FAQ ─────────────────────────────────────────────────────── */
.faq{max-width:820px;margin:0 auto}
.q{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);
  margin-bottom:12px;overflow:hidden;transition:.25s}
.q.open{box-shadow:var(--sh-2);border-color:var(--stone)}
.q button{
  width:100%;text-align:left;padding:20px 24px;background:none;border:none;
  font-size:15.5px;font-weight:700;color:var(--ink);cursor:pointer;
  display:flex;align-items:center;min-height:56px
}
.q button .plus{margin-left:auto;font-size:21px;color:var(--blue-d);
  transition:transform .3s;flex-shrink:0;line-height:1;padding-left:14px}
.q.open .plus{transform:rotate(45deg)}
.q .a{max-height:0;overflow:hidden;transition:max-height .34s ease}
.q .a p{padding:0 24px 22px;font-size:14px;color:var(--ink-2)}

/* ─── 14. КОНТАКТЫ ────────────────────────────────────────────────── */
.contact{
  position:relative;z-index:1;
  background:linear-gradient(150deg,var(--ink),#3A322E);border-radius:var(--r-l);
  padding:clamp(26px,5vw,56px);color:#fff;box-shadow:var(--sh-3);
  display:grid;grid-template-columns:1fr 1fr;grid-gap:44px;gap:44px;align-items:center
}
.contact h2{font-size:clamp(23px,3.4vw,34px);margin-bottom:14px}
.contact p{color:rgba(255,255,255,.76);font-size:15px;margin-bottom:24px}
.links{display:flex;flex-direction:column}
.link-row{
  display:flex;align-items:center;padding:15px 18px;border-radius:var(--r-s);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  transition:.22s;margin-bottom:11px;min-height:56px
}
.link-row em{font-style:normal;font-size:19px;margin-right:13px}
.link-row s{text-decoration:none;font-size:11.5px;opacity:.62;display:block}
.link-row b{font-size:14px}
.form{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r-m);padding:26px}
.form label{display:block;font-size:12.5px;font-weight:700;margin-bottom:6px;opacity:.82}
/* 16px обязательны: при меньшем размере iOS зумит страницу на фокусе */
.form input,.form textarea,.form select{
  width:100%;padding:14px 15px;border-radius:var(--r-s);
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.1);
  color:#fff;font-family:inherit;font-size:16px;margin-bottom:14px;
  transition:.2s;-webkit-appearance:none;appearance:none
}
.form input::placeholder,.form textarea::placeholder{color:rgba(255,255,255,.42)}
.form input:focus,.form textarea:focus,.form select:focus{
  outline:none;border-color:var(--pink);background:rgba(255,255,255,.16)}
.form select{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23fff' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center
}
.form select option{color:var(--ink)}
.form textarea{resize:vertical;min-height:82px}
.form .btn{width:100%}
.form-note{font-size:11.5px;opacity:.6;margin-top:12px;text-align:center}

/* ─── 15. ПОДВАЛ ──────────────────────────────────────────────────── */
footer{padding:46px 0 calc(46px + var(--safe-b));border-top:1px solid var(--line);margin-top:60px}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.foot-links{display:flex;flex-wrap:wrap;margin:0 -10px}
.foot-links a{margin:0 10px}

/* ─── 16. СЛУЖЕБНОЕ ───────────────────────────────────────────────── */
/* Всплывающее сообщение вместо alert */
.toast{
  position:fixed;left:50%;bottom:calc(30px + var(--safe-b));
  transform:translate(-50%,180%);
  background:var(--ink);color:#fff;padding:15px 26px;border-radius:999px;
  font-size:14px;font-weight:600;box-shadow:var(--sh-3);z-index:200;
  transition:transform .4s cubic-bezier(.2,.8,.3,1);
  max-width:calc(100vw - 32px);text-align:center
}
.toast.show{transform:translate(-50%,0)}

/* Липкая полоса с ценой — только на телефоне */
.sticky-buy{
  position:fixed;left:12px;right:12px;bottom:calc(12px + var(--safe-b));
  z-index:70;display:none;background:var(--ink);color:#fff;
  border-radius:999px;padding:10px 12px 10px 20px;align-items:center;
  box-shadow:var(--sh-3)
}
.sticky-buy b{font-size:16px}
.sticky-buy small{font-size:12px;opacity:.7;margin-left:8px}
.sticky-buy .btn{padding:11px 22px;font-size:14px;margin-left:auto;min-height:44px}

/* ─── 17. АДАПТИВ ─────────────────────────────────────────────────── */
@media(max-width:1020px){
  .masonry,.shots{columns:2}
  .hero-grid{grid-template-columns:1fr;gap:38px;grid-gap:38px}
  .hero-art{min-height:0;max-width:460px;margin:0 auto}
  .contact{grid-template-columns:1fr;gap:30px;grid-gap:30px}
}
@media(max-width:760px){
  html{scroll-padding-top:78px}
  section{padding:58px 0}
  .hero{padding:112px 0 42px}
  .menu{display:none}
  .burger{display:block}
  .menu.open{
    display:flex;position:absolute;top:calc(66px + var(--safe-t));left:24px;right:24px;
    flex-direction:column;background:#fff;border-radius:var(--r-m);
    padding:10px;box-shadow:var(--sh-3)
  }
  .menu.open a{padding:14px 16px;min-height:48px;display:flex;align-items:center}
  .head-cta{display:none}
  .masonry,.shots{columns:1}
  .vs,.fit{grid-template-columns:1fr}
  .slide{flex-basis:92%;margin-right:16px}
  .sticky-buy{display:flex}
  footer{margin-bottom:76px}
  .hero-art{min-height:0}
  .carousel-head{align-items:flex-start}
  .c-nav{margin-top:16px}
  .countdown{padding:18px 20px}
  .cd-num{font-size:34px}
  .cd-right{margin-left:0;margin-top:14px;min-width:100%}
  .vs-col,.fit-col{padding:24px 20px}
  .form{padding:20px}
}
@media(max-width:400px){
  .hero-art{min-height:0}
  .trust b{font-size:19px}
  .price{font-size:31px}
  .q button{padding:17px 18px;font-size:14.5px}
  .q .a p{padding:0 18px 18px}
}

/* ─── 18. ДЕМО · «потрогать вживую» ───────────────────────────────── */
.demo{
  background:linear-gradient(150deg,var(--ink),var(--ink-2));border-radius:var(--r-l);
  padding:clamp(28px,4.5vw,52px);color:#fff;box-shadow:var(--sh-3);
  display:grid;grid-template-columns:1fr .9fr;grid-gap:40px;gap:40px;align-items:center
}
.demo h2{font-size:clamp(23px,3.4vw,34px);margin-bottom:14px}
.demo p{color:rgba(255,255,255,.78);font-size:15px;margin-bottom:22px}
.demo-list{margin-bottom:26px}
.demo-list li{list-style:none;display:flex;padding:7px 0;font-size:14px;color:rgba(255,255,255,.88)}
.demo-list li i{font-style:normal;margin-right:10px;flex-shrink:0}
/* Рамка «браузера» вокруг превью */
.frame{background:#fff;border-radius:var(--r-m);overflow:hidden;box-shadow:var(--sh-3)}
.frame-top{padding:11px 14px;display:flex;align-items:center;background:var(--stone-l);
  border-bottom:1px solid var(--line)}
.frame-top .dots-mac i{background:var(--stone)}
.frame-url{margin-left:10px;flex:1;background:#fff;border-radius:99px;padding:4px 12px;
  font-size:10.5px;color:var(--muted);border:1px solid var(--line);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frame-body{padding:16px}

/* ─── 19. ОТЗЫВЫ ──────────────────────────────────────────────────── */
.reviews{columns:3;column-gap:20px}
.rev{
  break-inside:avoid;-webkit-column-break-inside:avoid;margin-bottom:20px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);
  padding:24px;box-shadow:var(--sh-1);transition:.28s
}
.rev-top{display:flex;align-items:center;margin-bottom:14px}
.rev-ava{
  width:44px;height:44px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-weight:800;font-size:16px;margin-right:12px;flex-shrink:0
}
.rev-who b{display:block;font-size:14px}
.rev-who s{text-decoration:none;font-size:12px;color:var(--muted)}
.rev-stars{margin-left:auto;font-size:12px;letter-spacing:1px}
.rev p{font-size:14px;color:var(--ink-2)}
.rev-note{
  border-style:dashed;
  background:linear-gradient(165deg,#FFFFFF 0%,var(--paper) 60%,var(--blue-l) 100%)
}

/* ─── 22. СТИКЕРЫ В СЕКЦИЯХ ───────────────────────────────────────── */
/* Плавают у краёв, не мешают тексту. На узких экранах прячутся. */
.s-how  {top:18px;  right:10px;  transform:rotate(10deg)}
/* Кот на жёлтом фоне — справа, как просили.
   У второго стикера (кот с языком) теперь свой класс s-pal,
   иначе оба уезжали бы в одну сторону. */
.s-vs   {top:12px;  right:4px;   transform:rotate(11deg)}
.s-pal  {top:12px;  left:4px;    transform:rotate(-11deg)}
.s-quiz {top:30px;  right:30px;  transform:rotate(8deg)}
.s-price{top:8px;   left:10px;   transform:rotate(-9deg)}
.s-gift {top:34px;  right:22px;  transform:rotate(12deg)}

/* Жёсткая тень вместо мягкой — приём необрутализма.
   Применяем точечно: главная кнопка и выделенный тариф. */
.btn-1{box-shadow:5px 5px 0 rgba(35,32,29,.22)}

/* Кислотный акцент точечно: подчёркивание в заголовке, бегущая строка */
.hero h1 mark{background:linear-gradient(180deg,transparent 56%,var(--lime) 56%)}
.ticker{background:var(--blue)}
.ticker-row span:nth-child(4n+1){color:var(--lime)}
.tag{border-width:1.5px}
.trust b{color:var(--blue-d)}

@media (hover:hover) and (pointer:fine){
  .rev:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
  .btn-1:hover{box-shadow:7px 9px 0 rgba(34,48,60,.22)}
  .sticker{transition:transform .35s cubic-bezier(.2,.7,.3,1)}
  .has-stick:hover .sticker{transform:rotate(0deg) scale(1.08)}
}
@media(max-width:900px){
  .s-how,.s-vs,.s-pal,.s-price{display:none}
  .ticker{margin-left:-20px;margin-right:-20px}
  .ticker-row span{font-size:13.5px;padding:0 13px}
}
@media(max-width:760px){
  .cat-strip{padding:26px 12px}
  .cat-strip span{width:96px;height:96px;margin:8px;border-width:3px;box-shadow:4px 4px 0 var(--ink)}
  .sticker{width:78px;height:78px;font-size:30px;border-width:3px;box-shadow:4px 4px 0 var(--ink)}
  .s-a{top:-18px;right:8%}
  .s-b{top:136px;left:-26px}
  .s-c{bottom:-8px;right:1%}
  .logo-txt{font-size:13px}
  .logo-txt b{font-size:14px}
  .logo-mark svg{width:34px;height:34px}
}
@media(max-width:1020px){
  .reviews{columns:2}
  .demo{grid-template-columns:1fr;gap:28px;grid-gap:28px}
}
@media(max-width:760px){
  .reviews{columns:1}
}

/* Уважаем системную настройку «меньше движения» */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}

/* ═══ ФОНОВЫЕ ПАТТЕРНЫ · академический и котики ═══════════════ */
.section-pattern{
  background: linear-gradient(rgba(255,252,245,0.93), rgba(255,252,245,0.93)),
              url('background_pattern_academic.png') repeat;
  background-size: 200px;
}
.section-cats{
  background: linear-gradient(rgba(255,252,245,0.90), rgba(255,252,245,0.90)),
              url('background_pattern_cats.png') repeat;
  background-size: 180px;
}
/* Футер с едва заметными котиками */
footer{
  background: linear-gradient(rgba(255,252,245,0.94), rgba(255,252,245,0.94)),
              url('background_pattern_cats.png') repeat;
  background-size: 160px;
  position: relative;
}


/* ══════════════════════════════════════════════════════════════════
   23. МОБИЛЬНАЯ ВЕРСИЯ · собрана отдельно, а не «ужата» из десктопа
   ══════════════════════════════════════════════════════════════════
   Идёт последней, поэтому перекрывает всё выше. Правки палитры нет —
   меняются только размеры, отступы и то, что на телефоне мешает.
   ══════════════════════════════════════════════════════════════════ */
@media(max-width:760px){

  /* ── 23.1 РИТМ И ПОЛЯ ─────────────────────────────────────────── */
  /* Единый шаг: 18px по краям, 52px между секциями. */
  .wrap{padding:0 18px}
  section{padding:52px 0}
  .h2{font-size:clamp(25px,7vw,32px);letter-spacing:-.035em;line-height:1.18}
  .lead{font-size:15px;line-height:1.55}
  .tag{margin-bottom:14px;font-size:12px;padding:6px 13px}

  /* Мягче тени: на маленьком экране крупные тени выглядят грязью */
  .mcard,.rev,.fit-col,.vs-a,.slide,.offer{box-shadow:0 4px 16px rgba(35,32,29,.07)}

  /* ── 23.2 ГЕРОЙ ───────────────────────────────────────────────── */
  /* Коллаж из карточек убран: на 360px он превращался в кашу
     из наложенных друг на друга блоков и съезжающих стикеров. */
  /* Портрет на телефоне остаётся: он и есть главная картинка экрана.
     Прячем только подписи — на 360 px им негде встать. */
  .hero-art{display:flex;margin-top:26px}
  .hero-note{display:none}
  .hero-photo img{max-width:300px}
  .hero{padding:104px 0 34px}
  .hero h1{font-size:clamp(32px,9vw,44px);line-height:1.1;margin-bottom:14px}
  .hero p.lead{margin-bottom:22px}
  .hero-btns{margin:0 0 24px;display:block}
  .hero-btns>*{margin:0 0 10px;width:100%}        /* кнопки во всю ширину */
  .countdown{padding:18px;border-radius:var(--r-m);margin-bottom:22px}
  .cd-num{font-size:38px}
  .cd-right{margin:14px 0 0;min-width:100%}

  /* Цифры доверия — сеткой 2×2, а не рваной строкой */
  .trust{display:grid;grid-template-columns:1fr 1fr;grid-gap:12px;gap:12px;margin:0}
  .trust>div{margin:0;background:#fff;border:1px solid var(--line);
    border-radius:var(--r-s);padding:12px 14px;font-size:12px}
  .trust b{font-size:22px;margin-bottom:2px}

  /* ── 23.3 БЕГУЩАЯ СТРОКА ──────────────────────────────────────── */
  .ticker{margin:4px -14px 0;padding:12px 0;transform:rotate(-1.4deg)}
  .ticker-row span{font-size:13px;padding:0 12px}

  /* ── 23.4 КАРУСЕЛЬ ────────────────────────────────────────────── */
  .carousel-head{display:block}
  .c-nav{margin:18px 0 0;justify-content:flex-start}
  .c-btn{width:52px;height:52px;margin:0 10px 0 0}
  .track{padding:6px 0 18px;margin:0}
  .slide{flex-basis:90%;margin-right:14px;border-radius:var(--r-m)}
  .slide-top{padding:13px 16px}
  .slide-name{font-size:13px}
  .slide-tab{font-size:10px;padding:3px 9px}
  .slide-body{padding:16px 14px 18px;overflow-x:visible}
  .slide-cap{padding:0 16px 18px;font-size:13px}

  /* Таблицы целиком влезают в слайд: без горизонтальной прокрутки,
     мелким шрифтом и без второстепенных колонок (см. 23.5) */
  .tbl{min-width:0;font-size:11px;table-layout:fixed}
  .tbl th,.tbl td{padding:7px 5px;white-space:normal;word-break:break-word}
  .tbl th{font-size:9.5px;line-height:1.25}
  .band{font-size:10px;padding:7px 10px}
  .band small{display:none}                        /* пояснение не влезает */
  .kpi-grid{grid-template-columns:1fr 1fr;grid-gap:8px;gap:8px}
  .kpi{padding:9px 11px}
  .kpi b{font-size:16px}
  .bars{height:54px}

  /* ── 23.5 ЧТО ПРЯЧЕМ В ТАБЛИЦАХ ───────────────────────────────── */
  /* Оставляем только те колонки, ради которых слайд и показывают. */
  .t-exams  th:nth-child(2), .t-exams  td:nth-child(2),
  .t-exams  th:nth-child(4), .t-exams  td:nth-child(4),
  .t-exams  th:nth-child(5), .t-exams  td:nth-child(5),
  .t-topics th:nth-child(4), .t-topics td:nth-child(4),
  .t-tutors th:nth-child(3), .t-tutors td:nth-child(3),
  .t-errors th:nth-child(3), .t-errors td:nth-child(3),
  .t-errors th:nth-child(4), .t-errors td:nth-child(4),
  .t-mode   th:nth-child(5), .t-mode   td:nth-child(5){display:none}
  .pill{font-size:9px;padding:2px 6px}

  /* ── 23.6 КАРТОЧКИ И СПИСКИ ───────────────────────────────────── */
  .masonry,.shots,.reviews{columns:1}
  .mcard{padding:20px 18px;margin-bottom:14px;border-radius:var(--r-m)}
  .mcard .ic{width:40px;height:40px;font-size:18px;margin-bottom:11px}
  .mcard h3{font-size:16px}
  .mcard p{font-size:13.5px}

  .vs,.fit{grid-template-columns:1fr;gap:14px;grid-gap:14px}
  .vs-col,.fit-col{padding:22px 18px;border-radius:var(--r-m)}
  .vs-col h3,.fit-col h3{font-size:17px;margin-bottom:12px}
  .vs-col li,.fit-col li{font-size:13.5px;padding:9px 0}
  .fit-col li{padding-left:24px}

  /* ── 23.7 ГАЛЕРЕЯ ─────────────────────────────────────────────── */
  .shot{margin-bottom:14px;border-radius:var(--r-m)}
  .shot .ph{padding-top:56%}
  .shot .ph em{font-size:30px}
  .shot figcaption{padding:11px 14px;font-size:12px}

  /* ── 23.8 ТАРИФЫ ──────────────────────────────────────────────── */
  .price{font-size:34px}

  /* ── 23.9 КВИЗ ────────────────────────────────────────────────── */

  /* ── 23.10 FAQ ────────────────────────────────────────────────── */
  .q{border-radius:var(--r-m);margin-bottom:10px}
  .q button{padding:17px 18px;font-size:14.5px}
  .q .a p{padding:0 18px 18px;font-size:13.5px}

  /* ── 23.11 ПОДАРОК И КОНТАКТЫ ─────────────────────────────────── */
  .demo,.contact{border-radius:var(--r-l);padding:26px 20px}
  .demo h2,.contact h2{font-size:24px;line-height:1.2}
  .demo p,.contact p{font-size:14.5px}
  .demo .btn{width:100%}
  .form{padding:20px 18px;border-radius:var(--r-m)}
  .link-row{padding:13px 15px}

  /* ── 23.12 КОТЫ ───────────────────────────────────────────────── */
  /* Стикеры-накладки на телефоне скрыты: они привязаны к коллажу,
     которого больше нет. Полоса котов остаётся — она сама переносится. */
  .sticker{display:none}
  .cat-strip{padding:22px 10px}
  .cat-strip span{width:88px;height:88px;margin:7px;
    border-width:3px;box-shadow:4px 4px 0 var(--ink)}

  /* ── 23.13 ШАПКА И ЛИПКАЯ ПОЛОСА ──────────────────────────────── */
  .logo-mark svg{width:34px;height:34px}
  .logo-txt{font-size:12.5px}
  .logo-txt b{font-size:14px}
  .burger{width:44px;height:44px}
  .menu.open{left:18px;right:18px}
  .sticky-buy{left:10px;right:10px;padding:9px 10px 9px 18px}
  .sticky-buy b{font-size:17px}
  .sticky-buy small{font-size:11px}
  footer{margin-bottom:80px;padding-top:34px}
  .foot{display:block;text-align:center}
  .foot-links{justify-content:center;margin-top:12px}
}

/* Совсем узкие экраны — iPhone SE и подобные */
@media(max-width:380px){
  .wrap{padding:0 14px}
  .hero h1{font-size:29px}
  .trust{grid-template-columns:1fr}
  .slide{flex-basis:93%}
  .tbl{font-size:10.5px}
  .cd-num{font-size:34px}
  .price{font-size:30px}
  .cat-strip span{width:74px;height:74px;margin:6px}
}

/* ══════════════════════════════════════════════════════════════════
   24. СНИМКИ ЛИСТОВ · карусель и галерея
   ══════════════════════════════════════════════════════════════════
   Раньше экраны рисовались кодом. Теперь это настоящие снимки из
   таблицы, поэтому нужны только рамка, пропорции и поведение.
   ══════════════════════════════════════════════════════════════════ */

/* ─── 24.1 СНИМОК ВНУТРИ СЛАЙДА ───────────────────────────────────── */
/* Лист широкий (≈1470 px), в слайд он влезает целиком по ширине.
   Высоту не фиксируем: у «Архива» пропорции другие, чем у остальных. */
.slide-shot{
  background:var(--paper);
  border-bottom:1px solid var(--line);
  overflow:hidden
}
.slide-shot img{
  width:100%;height:auto;display:block;
  /* показываем верх листа — там заголовок и главные цифры */
  object-fit:cover;object-position:top center;
  max-height:340px
}

/* ─── 24.2 ГАЛЕРЕЯ ────────────────────────────────────────────────── */
.shot{overflow:hidden}
.shot a{display:block;position:relative;background:var(--paper);cursor:zoom-in}
.shot img{width:100%;height:auto;display:block}
/* Значок «открыть в полный размер» — только там, где есть мышь */
.shot a::after{
  content:'⤢';
  position:absolute;top:10px;right:10px;
  width:30px;height:30px;border-radius:9px;
  background:rgba(35,32,29,.62);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;opacity:0;transition:.2s
}
@media (hover:hover) and (pointer:fine){
  .shot a:hover::after{opacity:1}
}
.shot figcaption{
  padding:12px 16px;font-size:12.5px;font-weight:700;
  border-top:1px solid var(--line);background:var(--card)
}

/* ─── 24.3 НА ТЕЛЕФОНЕ ────────────────────────────────────────────── */
@media(max-width:760px){
  /* Лист шириной в полтора метра на экране 360 px — это нечитаемо.
     Показываем левый верхний угол крупнее, а целиком — по нажатию. */
  .slide-shot img{max-height:200px;object-position:top left}
  .shot img{max-height:230px;object-fit:cover;object-position:top left}
  .shot a::after{opacity:1;font-size:12px;width:26px;height:26px}
  .shot figcaption{padding:11px 14px;font-size:12px}
}

/* ══════════════════════════════════════════════════════════════════
   25. ПАЛИТРЫ · переключатель цветовых схем
   ══════════════════════════════════════════════════════════════════
   Кружки в кнопках — не выдумка дизайнера: это настоящие цвета дней
   недели, снятые пипеткой со скриншотов планера. Поэтому кнопка
   честно показывает, что получишь, ещё до нажатия.
   ══════════════════════════════════════════════════════════════════ */
.pal{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-l);padding:24px;box-shadow:var(--sh-1)
}

/* ─── 25.1 РЯД КНОПОК ─────────────────────────────────────────────── */
.pal-list{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  gap:10px;grid-gap:10px;margin-bottom:20px
}
.pal-btn{
  display:flex;flex-direction:column;align-items:center;
  padding:12px 10px;border-radius:var(--r-s);cursor:pointer;
  border:2px solid var(--line);background:var(--paper);
  transition:.22s;min-height:64px;
  -webkit-tap-highlight-color:transparent
}
.pal-btn.on{border-color:var(--ink);background:var(--card);box-shadow:3px 3px 0 var(--ink)}
.pal-dots{display:flex;margin-bottom:7px}
.pal-dots i{
  width:13px;height:13px;border-radius:50%;
  margin-right:-4px;border:1.5px solid var(--card)
}
.pal-dots i:last-child{margin-right:0}
.pal-name{font-size:12.5px;font-weight:800;color:var(--ink);letter-spacing:-.01em}

/* ─── 25.2 СНИМОК ВЫБРАННОЙ СХЕМЫ ─────────────────────────────────── */
.pal-view{
  border:1px solid var(--line);border-radius:var(--r-m);
  overflow:hidden;background:var(--paper)
}
.pal-shot{margin:0}
.pal-shot[hidden]{display:none}
.pal-shot img{width:100%;height:auto;display:block}
.pal-shot figcaption{
  padding:11px 16px;font-size:12.5px;font-weight:700;color:var(--ink-2);
  border-top:1px solid var(--line);background:var(--card)
}
/* Плавная подмена картинки, чтобы не мигало */
.pal-shot{animation:palIn .32s ease}
@keyframes palIn{from{opacity:0}to{opacity:1}}

.pal-note{font-size:12.5px;color:var(--muted);margin-top:14px;text-align:center}

/* ─── 25.3 ЧЕТЫРЕ ЦИФРЫ ───────────────────────────────────────────── */
.pal-facts{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:14px;grid-gap:14px;margin-top:20px
}
.pal-facts>div{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-m);padding:18px 16px;text-align:center
}
.pal-facts b{
  display:block;font-family:Unbounded,sans-serif;font-size:30px;
  font-weight:700;color:var(--ink);line-height:1.05;margin-bottom:5px
}
.pal-facts span{font-size:12.5px;color:var(--muted);font-weight:600;line-height:1.35}

@media (hover:hover) and (pointer:fine){
  .pal-btn:hover{border-color:var(--blue);transform:translateY(-2px)}
  .pal-btn.on:hover{transform:translateY(-2px)}
}
.pal-btn:active{transform:scale(.97)}
.pal-btn:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

/* ─── 25.4 НА ТЕЛЕФОНЕ ────────────────────────────────────────────── */
@media(max-width:760px){
  .pal{padding:16px 14px;border-radius:var(--r-m)}
  .pal-list{grid-template-columns:repeat(3,1fr);gap:8px;grid-gap:8px}
  .pal-btn{padding:10px 6px;min-height:58px}
  .pal-dots i{width:10px;height:10px;margin-right:-3px}
  .pal-name{font-size:11px}
  /* Образец влезает целиком: он нарисован под ширину блока,
     обрезать больше нечего */
  .pal-shot img{max-height:none}
  .pal-facts{grid-template-columns:1fr 1fr;gap:10px;grid-gap:10px}
  .pal-facts>div{padding:14px 12px}
  .pal-facts b{font-size:25px}
  .pal-facts span{font-size:11.5px}
}
@media(max-width:380px){
  .pal-list{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){
  .pal-shot{animation:none}
}

/* ══════════════════════════════════════════════════════════════════
   26. ОКНО ПРОСМОТРА ЛИСТА
   ══════════════════════════════════════════════════════════════════
   Лист планера широкий, на телефоне его не разглядеть в ленте.
   Раньше клик открывал картинку в новой вкладке — человек уходил
   с сайта и часто не возвращался. Теперь снимок открывается
   поверх страницы, и её можно листать стрелками.
   ══════════════════════════════════════════════════════════════════ */
.lb{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  padding:calc(20px + var(--safe-t)) 20px calc(20px + var(--safe-b));
  background:rgba(35,32,29,.82);
  animation:lbIn .22s ease
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .lb{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
}
.lb[hidden]{display:none}
@keyframes lbIn{from{opacity:0}to{opacity:1}}

.lb-box{
  margin:0;max-width:1200px;width:100%;max-height:100%;
  display:flex;flex-direction:column;
  background:var(--card);border-radius:var(--r-m);overflow:hidden;
  box-shadow:0 30px 80px rgba(35,32,29,.45)
}
/* Лист шире экрана — даём прокрутить его пальцем вбок */
.lb-scroll{
  overflow:auto;-webkit-overflow-scrolling:touch;
  background:var(--paper);flex:1;min-height:0
}
.lb-scroll img{display:block;max-width:none;width:auto;height:auto;margin:0 auto}
.lb-box figcaption{
  padding:13px 18px;font-size:13px;font-weight:700;color:var(--ink);
  border-top:1px solid var(--line);flex-shrink:0
}

/* Кнопки */
.lb-x,.lb-arw{
  position:absolute;z-index:2;cursor:pointer;
  border:none;border-radius:50%;
  background:var(--card);color:var(--ink);
  box-shadow:0 6px 20px rgba(35,32,29,.3);
  display:flex;align-items:center;justify-content:center;
  transition:.2s;font-family:inherit
}
.lb-x{
  top:calc(14px + var(--safe-t));right:14px;
  width:46px;height:46px;font-size:17px;font-weight:700
}
.lb-arw{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:21px}
.lb-prev{left:14px}
.lb-next{right:14px}
.lb-arw:disabled{opacity:.35;cursor:default}
@media (hover:hover) and (pointer:fine){
  .lb-x:hover,.lb-arw:not(:disabled):hover{background:var(--ink);color:#fff}
}
.lb-x:active,.lb-arw:active{transform:scale(.94)}
.lb-arw:active{transform:translateY(-50%) scale(.94)}
.lb-x:focus-visible,.lb-arw:focus-visible{outline:3px solid var(--sunny);outline-offset:3px}

/* Пока окно открыто, страница под ним не прокручивается */
body.lb-open{overflow:hidden}

@media(max-width:760px){
  .lb{padding:calc(12px + var(--safe-t)) 10px calc(12px + var(--safe-b))}
  .lb-box{border-radius:var(--r-s)}
  .lb-x{width:42px;height:42px;top:calc(8px + var(--safe-t));right:8px}
  /* Стрелки уводим вниз: по краям экрана они попадают под большой палец
     ровно там, где человек пытается прокрутить лист вбок */
  .lb-arw{top:auto;bottom:calc(14px + var(--safe-b));transform:none;width:46px;height:46px}
  .lb-arw:active{transform:scale(.94)}
  .lb-prev{left:12px} .lb-next{right:12px}
  .lb-box figcaption{padding:11px 14px;font-size:12px;padding-right:112px}
}
@media(prefers-reduced-motion:reduce){ .lb{animation:none} }

/* Ссылка-обёртка вокруг снимка. Курсор-лупа подсказывает, что откроется
   окно, а не новая вкладка. Отдельно нужна и в карусели: там снимок
   раньше был просто картинкой без клика. */
.zoom{display:block;position:relative;cursor:zoom-in}
.zoom:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.slide-shot .zoom::after{
  content:'⤢';
  position:absolute;top:10px;right:10px;
  width:30px;height:30px;border-radius:9px;
  background:rgba(35,32,29,.62);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;opacity:0;transition:.2s
}
@media (hover:hover) and (pointer:fine){
  .slide-shot .zoom:hover::after{opacity:1}
}
@media(max-width:760px){
  .slide-shot .zoom::after{opacity:1;font-size:12px;width:26px;height:26px}
}

/* ─── НАДЗАГОЛОВОК ГЕРОЯ ──────────────────────────────────────────
   Первое, что видит человек: что здесь вообще продают. Раньше эту
   работу делала одна плашка «Google Таблицы», и по ней нельзя было
   понять, для какого экзамена планер.                             */
.over{
  font-family:Unbounded,Manrope,sans-serif;
  font-size:clamp(15px,2.1vw,19px);font-weight:600;
  letter-spacing:.02em;color:var(--ink-2);
  margin-bottom:14px;line-height:1.3
}
.over b{
  font-weight:700;color:var(--ink);
  background:linear-gradient(180deg,transparent 62%,var(--sunny) 62%);
  padding:0 3px;border-radius:3px
}
@media(max-width:760px){
  .over{font-size:15px;margin-bottom:10px}
}

/* ══════════════════════════════════════════════════════════════════
   27. ЯРКАЯ КАРТИНКА В ГЕРОЕ · включается классом на <body>
   ══════════════════════════════════════════════════════════════════
   Чтобы попробовать: <body class="bold-hero">. Убрать класс —
   вернётся обычный mesh-фон, ничего больше править не надо.

   Картинка стоит ТОЛЬКО в первом экране и только под контентом:
   на всю страницу такой рисунок кладут разве что в портфолио —
   на нём не читаются ни таблицы, ни отзывы.

   Три слоя поверх: затемнение снизу, вуаль бумаги и зерно. Без них
   контраст текста падает ниже нормы и заголовок теряется в узорах.
   ══════════════════════════════════════════════════════════════════ */
.bold-hero .hero{position:relative;isolation:isolate}
.bold-hero .hero::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  /* Узор из канцелярии — bg/pattern-study.svg, плитка 640×640.
     Стоит только здесь, в первом экране: дальше по странице
     остаётся обычный фон из цветных пятен.

     Плитка уменьшена с 340 до 260 px и приглушена. Крупный
     контурный рисунок за текстом спорит с ним: чёрные обводки
     предметов по толщине близки к буквам, и глаз не понимает,
     что читать. Мелкий и бледный узор становится текстурой —
     его видно, но он уходит на задний план.                     */
  background:url('bg/pattern-study.svg') center top / 260px 260px repeat;
  opacity:.42;
  -webkit-mask-image:linear-gradient(180deg,#000 50%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 50%,transparent 100%);
}
/* Вуаль плотнее прежней: под самим заголовком узор почти белый,
   к низу первого экрана постепенно проявляется. */
.bold-hero .hero::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(251,250,248,.82) 0%,
      rgba(251,250,248,.66) 45%,
      rgba(251,250,248,.86) 82%,
      var(--paper) 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 50%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 50%,transparent 100%);
}

/* Заголовок и подзаголовок поверх узора: тонкое свечение цвета
   бумаги отделяет буквы от рисунка, не создавая видимой плашки. */
.bold-hero .hero h1,
.bold-hero .hero .over,
.bold-hero .hero p.lead{
  text-shadow:0 1px 10px rgba(251,250,248,.95), 0 0 24px rgba(251,250,248,.75)
}

@media(max-width:760px){
  /* На телефоне плитка ещё мельче и бледнее: экран узкий,
     текста на нём больше, а места под фон меньше */
  .bold-hero .hero::before{background-size:170px 170px;opacity:.34}
}

/* ─── ССЫЛКА «К СОДЕРЖИМОМУ» ──────────────────────────────────────
   Обязательный элемент доступности: человек на клавиатуре не должен
   проходить всё меню на каждой странице. Спрятана за краем экрана
   и выезжает, только когда на неё встал фокус.                    */
.skip{
  position:fixed;left:12px;top:-100px;z-index:300;
  padding:13px 22px;border-radius:0 0 var(--r-s) var(--r-s);
  background:var(--ink);color:#fff;font-weight:700;font-size:14px;
  transition:top .2s
}
.skip:focus{top:0;outline:3px solid var(--sunny);outline-offset:2px}

/* ─── ПОЛОСА ПРОЧТЕНИЯ ────────────────────────────────────────────
   Тонкая линия под шапкой: сколько страницы позади. На длинном
   лендинге снимает вопрос «сколько ещё листать».                  */
.progress{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:90;
  pointer-events:none;background:transparent
}
.progress i{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--pink-1),var(--peach-1),var(--sun-1),
                                    var(--grass-1),var(--mint-1),var(--lav-1));
  transition:width .1s linear
}
@media(prefers-reduced-motion:reduce){ .progress i{transition:none} }

/* Цифры, которые досчитываются при появлении, не должны прыгать
   по ширине во время счёта — иначе соседние блоки дёргаются. */
.trust b[data-count],.pal-facts b[data-count]{
  font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum' 1
}

/* ─── СОГЛАСИЕ НА ОБРАБОТКУ ДАННЫХ ────────────────────────────────
   По 152-ФЗ форма, которая собирает имя и контакт, должна получать
   согласие. Галочка стоит заранее — это допустимо для сайта, где
   отправка формы и есть выражение воли, а текст рядом виден сразу. */
.agree{
  display:flex;align-items:flex-start;
  font-size:12.5px;line-height:1.5;color:var(--muted);
  margin:4px 0 16px;cursor:pointer
}
.agree input{
  width:18px;height:18px;margin:1px 10px 0 0;flex-shrink:0;
  accent-color:var(--blue-d);cursor:pointer
}
.agree a{color:var(--ink-2);text-decoration:underline}
.agree input:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
@media (hover:hover) and (pointer:fine){
  .agree a:hover{color:var(--ink)}
}

/* ══════════════════════════════════════════════════════════════════
   28. БЛОК ОПЛАТЫ · один продукт, одна кнопка
   ══════════════════════════════════════════════════════════════════
   Раньше здесь стояли три тарифа. Выбор из трёх заставляет думать,
   а думать перед оплатой — значит уйти «посоветоваться» и не
   вернуться. Теперь одно предложение: слева что внутри, справа
   цена и кнопка. Решение сводится к «да» или «нет».
   ══════════════════════════════════════════════════════════════════ */
.offer{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.15fr .85fr;
  background:var(--card);border:2px solid var(--ink);
  border-radius:var(--r-l);overflow:hidden;
  box-shadow:10px 10px 0 var(--ink)
}

/* ─── 28.1 ЛЕВАЯ ПОЛОВИНА ─────────────────────────────────────────── */
.offer-left{padding:38px 36px}
.offer-tag{
  display:inline-flex;align-items:center;padding:7px 15px;border-radius:999px;
  background:var(--sunny-l);border:1.5px solid var(--sunny);
  font-size:12.5px;font-weight:800;color:var(--ink);margin-bottom:16px
}
.offer-h{
  font-family:Unbounded,Manrope,sans-serif;
  font-size:clamp(26px,3.4vw,38px);font-weight:700;
  letter-spacing:-.035em;line-height:1.14;margin-bottom:12px
}
.offer-sub{color:var(--ink-2);font-size:15px;margin-bottom:22px;line-height:1.55}
.offer-list{list-style:none}
.offer-list li{
  display:flex;align-items:flex-start;
  font-size:14.5px;color:var(--ink-2);padding:9px 0;
  border-bottom:1px dashed var(--line);line-height:1.5
}
.offer-list li:last-child{border-bottom:none}
.offer-list i{
  font-style:normal;font-weight:800;color:var(--grass-d);
  margin-right:11px;flex-shrink:0
}
.offer-list b{color:var(--ink);font-weight:800}

/* ─── 28.2 ПРАВАЯ ПОЛОВИНА ────────────────────────────────────────── */
.offer-right{
  padding:38px 32px;display:flex;flex-direction:column;
  background:linear-gradient(165deg,var(--grape-l),var(--rose-l) 55%,var(--sunny-l));
  border-left:2px dashed var(--line);position:relative
}
.offer-badge{
  align-self:flex-start;background:var(--sunny);color:var(--ink);
  font-size:11.5px;font-weight:800;padding:7px 14px;border-radius:999px;
  margin-bottom:18px;line-height:1.3
}
.offer-price{display:flex;align-items:baseline;margin-bottom:4px}
.offer-sum{
  font-family:Unbounded,sans-serif;font-size:clamp(42px,5.5vw,60px);
  font-weight:700;line-height:1;letter-spacing:-.04em
}
.offer-price s{
  font-size:17px;color:var(--muted);margin-left:12px;font-weight:600
}
.offer-note{font-size:13px;color:var(--ink-2);font-weight:600;margin-bottom:22px}
.offer-btn{width:100%;min-height:58px;font-size:17px;margin-bottom:20px}

.offer-trust{list-style:none;margin-bottom:16px}
.offer-trust li{
  font-size:13px;color:var(--ink-2);font-weight:600;
  padding:6px 0;line-height:1.4
}
.offer-small{font-size:12px;color:var(--muted);line-height:1.5;margin-top:auto}
.offer-after{margin-top:22px;font-size:14px;color:var(--ink-2)}
.offer-after a{color:var(--blue-d);text-decoration:underline;font-weight:700}

@media (hover:hover) and (pointer:fine){
  .offer-btn:hover{transform:translateY(-3px)}
}

/* ─── 28.3 НА ТЕЛЕФОНЕ ────────────────────────────────────────────── */
@media(max-width:860px){
  /* Цена уезжает наверх: на телефоне человек должен увидеть её сразу,
     а не после семи пунктов списка. */
  .offer{grid-template-columns:1fr;box-shadow:6px 6px 0 var(--ink)}
  .offer-right{order:-1;border-left:none;border-bottom:2px dashed var(--line)}
}
@media(max-width:760px){
  .offer{border-radius:var(--r-m)}
  .offer-left{padding:24px 20px}
  .offer-right{padding:24px 20px}
  .offer-h{font-size:26px}
  .offer-sub{font-size:14px;margin-bottom:18px}
  .offer-list li{font-size:13.5px;padding:8px 0}
  .offer-sum{font-size:46px}
  .offer-btn{min-height:54px;font-size:16px}
  .offer-after{font-size:13px}
}

/* Один тариф на странице оплаты — не сетка из трёх, а одна карточка */
/* Один тариф на странице оплаты. Ширину не ограничиваем: карточка
   должна встать вровень с формой контактов и блоком оплаты ниже —
   узкая плашка посреди страницы выглядела недоделанной. */
.chk-one{grid-template-columns:1fr;max-width:none;margin:0}

/* ══════════════════════════════════════════════════════════════════
   30. НИТЬ · путь через этапы страницы
   ══════════════════════════════════════════════════════════════════
   Пунктирная линия петляет от шапки до подвала и связывает блоки
   в один маршрут. Точки на ней читаются как остановки.

   СЛОИ. Нить лежит НАД фоном страницы, но ПОД содержимым:
   z-index 0 против z-index 1 у шапки, главной части и подвала.
   Поэтому она видна в промежутках между блоками и ныряет под
   карточки — получается глубина, а не наклейка поверх макета.

   ВЫСОТА. top:0 + bottom:0 при position:relative у body: слой
   тянется на всю высоту документа. Раньше стояло height:100%,
   и без позиционированного body оно означало высоту ОКНА —
   нить обрывалась на первом экране.
   ══════════════════════════════════════════════════════════════════ */
.thread{
  position:absolute;top:0;left:0;right:0;bottom:0;
  z-index:0;
  pointer-events:none;overflow:hidden
}
.thread svg{
  position:absolute;top:0;bottom:0;
  left:50%;transform:translateX(-50%);
  width:min(1240px,94vw);height:100%
}
.thread path{stroke:var(--grape);opacity:.55}

/* Точки-остановки. Лежат отдельными элементами, а не внутри SVG:
   растянутый на всю страницу SVG превратил бы круги в овалы. */
.thread-dots{position:absolute;inset:0;
  left:50%;transform:translateX(-50%);width:min(1240px,94vw)}
.thread-dots i{
  position:absolute;width:13px;height:13px;border-radius:50%;
  margin:-6px 0 0 -6px;
  background:var(--sunny);border:2.5px solid var(--grape);
  opacity:.75
}

/* Содержимое — над нитью */
header{position:relative;z-index:80}
main{position:relative;z-index:1}
footer{position:relative;z-index:1}
.ticker,.cat-strip{position:relative;z-index:1}
.sticky-buy{z-index:70}
.lb{z-index:200}
.toast{z-index:210}

@media(max-width:760px){
  .thread svg,.thread-dots{width:96vw}
  .thread path{opacity:.4}
  .thread-dots i{width:10px;height:10px;margin:-5px 0 0 -5px;border-width:2px}
}

/* ══════════════════════════════════════════════════════════════════
   31. ДЕВУШКА У БЛОКА ОПЛАТЫ
   ══════════════════════════════════════════════════════════════════
   Она стоит слева и указывает пальцем вправо — прямо на цену.
   Жест работает как стрелка: взгляд идёт по руке и упирается
   в кнопку. Поэтому фигура прижата к низу и слегка заходит
   за край блока — так указание читается, а не висит в воздухе.
   ══════════════════════════════════════════════════════════════════ */
/* Фигура вынута из потока: пока она была обычным соседом в flex,
   она занимала место и сдвигала блок с ценой из центра экрана.
   Теперь блок стоит ровно посередине, а девушка висит слева от него. */
/* Фигура прижата к краю ОКНА, а не к краю блока: даём обёртке
   вылезти за пределы .wrap отрицательными полями, а внутренний
   блок держим на прежней ширине. Так девушка стоит у самого борта
   сайта, а цена по-прежнему ровно по центру экрана. */
.offer-wrap{position:relative;padding-bottom:0}

.offer-girl{
  position:absolute;
  /* Указательный палец находится на САМОМ правом краю файла
     (проверено по картинке: силуэт доходит до 100 % ширины).
     Поэтому привязываемся не к борту окна, а к левому краю блока:
     правый край фигуры заходит на блок ровно на 34 px — это его
     рамка плюс внутренний отступ. Палец касается карточки и явно
     на неё показывает, но на текст не наезжает.                */
  right:calc(100% - 34px);
  bottom:0;
  /* Ширина считается от свободного поля слева от блока:
     (окно − 1180) ÷ 2 плюс заход на карточку. Так фигура всегда
     помещается в это поле и не срезается краем окна пополам.
     На широком мониторе упирается в 400 px — размер как в шапке. */
  width:clamp(160px, calc((100vw - 1180px) / 2 + 34px), 400px);
  /* Над блоком: иначе палец прячется за карточкой и жест
     перестаёт читаться. Тёмной полосы здесь не будет —
     сплошная тень блока смещена вправо и вниз, а не влево. */
  z-index:2;
  pointer-events:none
}
.offer-girl img{
  width:100%;height:auto;display:block;
  /* Фотография обрезана по пояс — без растворения низ выглядел бы
     срезанным по линейке. Затухание длинное и в три ступени:
     короткое и резкое как раз и читалось бы как полоска. */
  -webkit-mask-image:linear-gradient(180deg,
      #000 55%, rgba(0,0,0,.75) 74%, rgba(0,0,0,.32) 89%, transparent 100%);
          mask-image:linear-gradient(180deg,
      #000 55%, rgba(0,0,0,.75) 74%, rgba(0,0,0,.32) 89%, transparent 100%)
}

/* ─── УЗКИЕ ЭКРАНЫ ────────────────────────────────────────────────── */
@media(max-width:1400px){
  /* Ниже 1400 свободного поля почти не остаётся: от фигуры была бы
     видна одна рука, и это читалось бы как обрезанная картинка.
     Убираем — жест всё равно перестаёт быть понятным. */
  .offer-girl{display:none}
}
@media(max-width:860px){
  /* Здесь блок оплаты уже в одну колонку: девушка сбоку не помещается */
  .offer-wrap{display:block}
  .offer-girl{display:none}
}

/* ══════════════════════════════════════════════════════════════════
   32. ДЕВУШКА У БЛОКА КОНТАКТОВ
   ══════════════════════════════════════════════════════════════════
   Стоит справа от тёмного блока «Остались вопросы?». На снимке она
   смотрит вверх-влево — то есть в сторону вопроса, а не от него.
   Взгляд модели работает как указатель: читатель непроизвольно
   переводит глаза туда же, куда смотрит человек на фотографии.
   ══════════════════════════════════════════════════════════════════ */
/* Та же история, что с блоком оплаты: фигура вынута из потока,
   иначе она съедала место и уводила тёмный блок из центра экрана. */
.contact-wrap{position:relative;padding-bottom:0}

.contact-girl{
  position:absolute;
  right:calc(50% - 50vw + 8px);      /* от правого борта окна */
  bottom:0;
  width:clamp(240px, 24vw, 400px);
  z-index:0;                          /* под блоком, см. выше */
  pointer-events:none
}
.contact-girl img{
  width:100%;height:auto;display:block;
  /* Фотография обрезана по пояс — без растворения низ выглядел бы
     срезанным по линейке. Затухание длинное и в три ступени:
     короткое и резкое как раз и читалось бы как полоска. */
  -webkit-mask-image:linear-gradient(180deg,
      #000 55%, rgba(0,0,0,.75) 74%, rgba(0,0,0,.32) 89%, transparent 100%);
          mask-image:linear-gradient(180deg,
      #000 55%, rgba(0,0,0,.75) 74%, rgba(0,0,0,.32) 89%, transparent 100%)
}

@media(max-width:1240px){
  .contact-girl{width:220px}
}
@media(max-width:900px){
  /* Здесь блок контактов складывается в одну колонку —
     фигуре сбоку места уже нет */
  .contact-wrap{display:block;padding-bottom:0}
  .contact-girl{display:none}
}

/* ─── ДЕКОР · цифры и знаки по фону ───────────────────────────────
   Лежит внутри .thread, значит наследует его слой (z-index 0)
   и pointer-events:none. Символы прижаты к краям страницы:
   середина занята текстом, и лезть туда декору незачем.       */
.thread-marks{
  position:absolute;inset:0;
  font-family:Unbounded,Manrope,sans-serif;font-weight:700;
  user-select:none
}
.thread-marks b{
  position:absolute;display:block;line-height:1;
  opacity:.30;white-space:nowrap
}
.thread-marks .c1{color:var(--sunny)}
.thread-marks .c2{color:var(--grape)}
.thread-marks .c3{color:var(--rose)}
.thread-marks .c4{color:var(--ocean)}
.thread-marks .c5{color:var(--sand)}
.thread-marks .c6{color:var(--stone-d);opacity:.22}

@media(max-width:760px){
  /* На телефоне символы мельче и бледнее: экран узкий,
     и крупный декор по краям налезал бы на текст */
  .thread-marks b{opacity:.20;font-size:.85em !important}
}
@media(prefers-reduced-motion:reduce){
  .thread-marks{opacity:.7}
}

/* ══════════════════════════════════════════════════════════════════
   33. МОБИЛЬНАЯ ВЕРСИЯ · итоговая доводка
   ══════════════════════════════════════════════════════════════════
   Идёт последней и перекрывает всё выше. Здесь собрано только то,
   что ломалось на узком экране после последних правок: новые
   фигуры девушек, декор из символов, нить и стикеры-коты.

   Анимации не отключаются: появление блоков, счётчики цифр,
   бегущая строка, карусель и переключатель палитр работают
   на телефоне так же, как на компьютере. Гасится только движение,
   если человек попросил этого в настройках системы.
   ══════════════════════════════════════════════════════════════════ */
@media(max-width:900px){
  /* ── 33.1 НИЧЕГО НЕ ВЫЕЗЖАЕТ ЗА КРАЙ ────────────────────────── */
  /* Страховка от горизонтальной прокрутки: её вызывает любой
     элемент с отрицательным полем или шириной больше 100 %. */
  html,body{max-width:100%;overflow-x:hidden}

  /* Фигуры девушек у цены и связи на телефоне не показываем:
     блоки там в одну колонку, и фигура сбоку съедала бы экран */
  .offer-girl,.contact-girl{display:none}
  .offer-wrap,.contact-wrap{padding-bottom:0}

  /* Коллаж-стикеры по краям секций убраны — они рассчитаны
     на широкий экран и налезали на заголовки */
  .s-how,.s-vs,.s-pal,.s-price{display:none}
}

@media(max-width:760px){
  /* ── 33.2 ДЕКОР И НИТЬ ──────────────────────────────────────── */
  /* Символы уводим к самым краям: на 360 px середина занята
     текстом целиком, и декор в ней читался бы как опечатки */
  .thread-marks b{opacity:.16}
  .thread svg,.thread-dots,.thread-marks{width:100vw;left:50%;transform:translateX(-50%)}
  .thread-dots i{opacity:.6}

  /* ── 33.3 ФИГУРА В ШАПКЕ ────────────────────────────────────── */
  .hero-art{display:flex;margin-top:20px;min-height:0}
  .hero-photo{padding-left:0;justify-content:center}
  .hero-photo img{max-width:min(300px,78vw)}
  .hero-note{display:none}

  /* ── 33.4 ЗАПАС ПОД ЛИПКОЙ КНОПКОЙ ──────────────────────────── */
  /* Внизу висит панель «Забрать» — подвалу нужен отступ,
     иначе последняя строка уезжает под неё */
  footer{margin-bottom:88px}
}

@media(max-width:420px){
  /* ── 33.5 САМЫЕ УЗКИЕ ЭКРАНЫ ────────────────────────────────── */
  .thread-marks b{opacity:.12}
  .hero-photo img{max-width:min(260px,80vw)}
  /* Полосу котов на 360 px делаем в два ряда по три */
  .cat-strip span{width:64px;height:64px;margin:5px}
}