/* ============================================================
   ЖИВОЙ ИИ-АУДИТ РАБОЧИХ ЗАДАЧ — практикум 20.08.2026
   Визуальный язык: настоящая бумага. Папка, скрепки, зажим, скотч и
   наклейка-огонь — фотографии (assets/paper/*.webp), а не рисунки.
   В файле лежит предмет с альфой, обрезанный по своим границам, — поэтому
   его можно класть куда угодно, в том числе внутрь повёрнутых карточек.
   Формат именно webp: палитровый PNG рвал мягкие полупрозрачные края
   в ступеньки (см. README).
   Брейкпоинты: база >=1180, <=1179, <=899, <=639.
   ============================================================ */

/* ---------- токены ---------- */
:root{
  /* Палитра «красный + ледяной голубой» (практикум, 27.09.2026).
     Красный — проблема, рутина, потеря времени, важные акценты и CTA.
     Голубой — решение, результат, ИИ, ускорение.
     Старые имена --terra/--hot/--ochre оставлены алиасами: на них завязана
     половина файла, а смысл у них тот же — акцент, кнопка, второй акцент. */
  --sand:#F6F6F3;       /* основной фон */
  --sand-2:#EDEDEA;     /* фон тонированных секций — тот же нейтральный, на ступень темнее */
  --paper:#FFFFFF;      /* листы и карточки */
  --paper-2:#FAFAF8;
  --ink:#181818;        /* основной текст */
  --ink-2:#3A3A38;
  --ink-3:#6B6B67;      /* подписи: #B8B8B4 для текста слишком светлый */
  --grey:#B8B8B4;       /* серые элементы, «было» */
  --grey-soft:#EDEDEA;  /* заливка блоков «было» */
  --red:#F0442F;
  --ice:#BFE4FF;        /* светло-голубой */
  --ice-soft:#EAF5FF;   /* заливка блоков «стало» — --ice, разбавленный белым */
  --blue:#55AFFF;       /* насыщенный голубой */
  --terra:var(--red);   /* основной акцент */
  --hot:var(--red);     /* кнопки */
  --ochre:var(--blue);  /* второй акцент */
  --line:rgba(24,24,24,.12);
  --ease:cubic-bezier(.22,1,.36,1);
  /* Ширина страницы задаётся тремя величинами и одинакова во всех секциях:
     --edge   — поле папки первого экрана от края окна,
     --gutter — внутреннее поле папки,
     --page   — ширина самого контента на широких экранах.
     .wrap повторяет эту сумму, поэтому текст любой секции стоит ровно
     по краям листов первого экрана. Меняешь одно — проверь оба места. */
  --edge:clamp(8px,1.6vw,30px);
  --gutter:clamp(14px,1.8vw,34px);
  --page:1560px;
  /* Один вертикальный отступ на все секции — и на обычные (.wrap), и на экраны
     с папкой (.hero-sec). Раньше папка считала свои поля отдельно, поэтому
     промежутки между блоками гуляли.
     ВАЖНО: это поле ОДНОЙ секции, а промежуток между соседними блоками — два
     таких поля. Отсюда числа: 45px даёт 90px на десктопе, 30px — 60px
     на телефоне. Прежние 104px складывались в 208px, и страница пустовала. */
  --sec-pad:clamp(30px,3.6vw,45px);
    /* бумажное волокно снято: листы чистые, без фактуры */
  --fiber:none;
  /* тень настоящего листа: контактная + мягкая + дальняя */
  --sh-paper:0 1px 1px rgba(24,24,24,.11), 0 3px 5px rgba(24,24,24,.08),
             0 12px 24px rgba(24,24,24,.12), 0 28px 56px rgba(24,24,24,.10);
  --sh-card:0 1px 1px rgba(24,24,24,.09), 0 6px 14px rgba(24,24,24,.09),
            0 18px 38px rgba(24,24,24,.09);
}

/* ---------- база ---------- */
*{ box-sizing:border-box; margin:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  background:var(--sand); color:var(--ink);
  font-family:'Manrope',Arial,sans-serif; -webkit-font-smoothing:antialiased;
  padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right);
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
ul, ol{ list-style:none; padding:0; margin:0; }
/* Одно слово на последней строке — брак вёрстки. balance выравнивает длину
   строк в заголовках, pretty не даёт абзацу закончиться коротким висяком.
   Правило общее на всю страницу, чтобы про него не забывали в новых блоках. */
h1, h2, h3, .h2, .gifts2-t, .about-lead-label, .about-card-label,
.tar-name, .sp-name, .who h3, .pain-q, .research-content h3, .gov-card h3{ text-wrap:balance; }
p, li, dd, figcaption{ text-wrap:pretty; }

/* секция: нейтральный фон + тонкая сетка. Зерно выключено — страница должна
   читаться чистой и технологичной, а не бумажной */
.sec{ position:relative; background:var(--sand); }
.sec::after{ display:none; content:""; position:absolute; inset:0; pointer-events:none; z-index:9;
  mix-blend-mode:multiply; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.sec > *{ position:relative; z-index:1; }
.sec.paper::before{ content:""; position:absolute; inset:0; z-index:0;
  background:
    repeating-linear-gradient(to bottom, transparent 0 39px, rgba(24,24,24,.045) 39px 40px),
    repeating-linear-gradient(to right, transparent 0 39px, rgba(24,24,24,.045) 39px 40px); }
.sec.tint{ background:var(--sand-2); }

.wrap{ max-width:calc(var(--page) + 2 * (var(--edge) + var(--gutter))); margin-inline:auto;
  padding:var(--sec-pad) calc(var(--edge) + var(--gutter)); }
.nw{ white-space:nowrap; }

/* ---------- типографика ---------- */
.h2{ font-weight:800; text-transform:uppercase; letter-spacing:-.02em; line-height:1.0;
  font-size:clamp(26px,3.6vw,54px); color:var(--ink); text-wrap:balance; }
.h2-row{ display:flex; align-items:flex-end; gap:clamp(14px,2vw,28px); flex-wrap:wrap;
  margin-bottom:clamp(26px,3.4vw,50px); }

/* Шрифт на странице ровно один — Manrope. Роль «технической» подписи играют
   не гарнитура, а размер, вес и разрядка (см. .eyebrow, .date, .pg-lead). */

/* маркер: косая плашка из трёх фонов — переносится по строкам */
.mk{ display:inline; color:var(--ink); padding-inline:.19em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  background:
    linear-gradient(to bottom left, var(--ice) 50%, transparent 50%) left center / .17em .98em no-repeat,
    linear-gradient(to bottom left, transparent 50%, var(--ice) 50%) right center / .17em .98em no-repeat,
    linear-gradient(var(--ice), var(--ice)) center / calc(100% - .34em) .98em no-repeat; }
.hl{ display:inline; font-weight:700; color:var(--ink); padding-inline:.14em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  background:
    linear-gradient(to bottom left, var(--ice) 50%, transparent 50%) left center / .13em 1.1em no-repeat,
    linear-gradient(to bottom left, transparent 50%, var(--ice) 50%) right center / .13em 1.1em no-repeat,
    linear-gradient(var(--ice), var(--ice)) center / calc(100% - .26em) 1.1em no-repeat; }

/* ============================================================
   ФОТОПРЕДМЕТЫ (assets/paper/*.webp)
   Фон у снимков вырезан, предметы лежат в webp с альфой и обрезаны
   по своим границам — поэтому позиционируются без поправок на
   пустые поля кадра: translateY(-50%) кладёт ровно половину
   предмета за край листа. Тень рисуем drop-shadow: в кадре она
   была слишком светлой и ушла вместе с фоном.
   ============================================================ */
/* зажимы и скрепки были латунными — обесцвечены в сталь под холодную палитру */
.ph{ position:absolute; z-index:6; pointer-events:none;
  filter:grayscale(1) contrast(1.05) drop-shadow(0 3px 5px rgba(24,24,24,.3)); }
/* оранжевые наклейки (огонь, вопрос, подарок, шапка, портфель) сдвинуты
   по тону к красному акценту, чтобы не спорили с ним */
.fire-ico, .pain-sticker, .gifts2-sticker, .about-stat-ico img{ --sticker-tone:hue-rotate(-16deg) saturate(1.2); }
.ph--clips{ width:clamp(40px,4.2vw,62px); }    /* связка скрепок */
.ph--bull{ width:clamp(62px,6.6vw,96px); }     /* зажим-бульдог */
/* обёртка для предмета, который лежит поверх повёрнутой карточки
   и не должен крутиться вместе с ней */
.pinned{ position:relative; }

/* Картонной подложки под тарифом «БИЗНЕС» больше нет: с тех пор как карточка
   стала тёмной, бежевый картон под ней читался лишним слоем. Стили папки
   удалены вместе с ней — на странице она была в единственном месте. */

/* ---------- бумажные объекты ---------- */
.sheet{ position:relative; border-radius:3px; box-shadow:var(--sh-paper);
  background-color:var(--paper); background-image:var(--fiber); background-blend-mode:multiply; }

/* ---------- врезка ----------
   Одна плашка на все светлые врезки страницы: тёплая заливка акцентом и
   оранжевая отбивка слева. Раньше их было две — на первом экране золотистая
   и без скруглений, в программе розоватая и со скруглениями. Приём один и
   тот же, а выглядел по-разному, и это читалось как случайность.
   Тёмный собрат этой врезки — вывод в блоке вопросов и плашка подарков:
   там фон тёмный, но отбивка слева та же. */
/* Палитра практикума: врезка по умолчанию — «стало» (решение, результат):
   светлый лёд и голубая отбивка. Вопросы-боли перекрашены в серый ниже. */
.note{ border-radius:clamp(3px,.4vw,6px);
  background:var(--ice-soft); border-left:4px solid var(--blue);
  padding:clamp(16px,1.9vw,26px) clamp(18px,2.2vw,30px); }

/* ---------- кнопка ---------- */
.cta{ display:inline-block; text-align:center; background:var(--hot); color:#fff; text-decoration:none;
  font-weight:800; text-transform:uppercase; letter-spacing:.03em;
  font-size:clamp(14px,1.5vw,18px); padding:1.25em 2.9em; min-height:60px; cursor:pointer; border:0; border-radius:4px;
  font-family:'Manrope',Arial,sans-serif; display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 1px 2px rgba(150,30,15,.24), 0 10px 22px rgba(240,68,47,.22), 0 20px 40px rgba(240,68,47,.14);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease); }
.cta:hover{ transform:translateY(-2px); box-shadow:0 1px 2px rgba(150,30,15,.26), 0 14px 28px rgba(240,68,47,.28), 0 26px 48px rgba(240,68,47,.16); }
.cta:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }
.cta--ghost{ background:transparent; color:var(--ink); border:2px solid var(--ink); box-shadow:none; }
.cta--ghost:hover{ background:var(--ink); color:var(--paper); box-shadow:none; }

/* ---------- дата ---------- */
.date{ display:inline-flex; align-items:center; gap:.55em;
  font-weight:700; font-size:clamp(12px,1.15vw,14.5px); letter-spacing:.06em; color:var(--ink);
  border:1.5px solid var(--grey); background:var(--paper); border-radius:999px; padding:.5em 1em; }
.date .dot{ width:.55em; height:.55em; border-radius:50%; background:var(--hot); box-shadow:0 0 0 0 rgba(240,68,47,.55);
  animation:pulse 2.4s infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 .7em rgba(240,68,47,0); } 100%{ box-shadow:0 0 0 0 rgba(240,68,47,0); } }
@media (prefers-reduced-motion:reduce){ .date .dot{ animation:none; } }

.eyebrow{ font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  font-size:clamp(11px,1.05vw,13px); color:var(--ink-3); }

/* ---------- появление при скролле ---------- */
.js .rv{ opacity:0; transform:translateY(24px); transition:opacity .6s var(--ease), transform .6s var(--ease); transition-delay:var(--rvd,0s); }
.js .rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .js .rv{ opacity:1 !important; transform:none !important; transition:none !important; } }

/* ============================================================
   ПЕРВЫЙ ЭКРАН
   Папка нарисована стилями, а не картинкой: снимок не тянулся
   на широкие экраны. Форма — прямоугольник с язычком слева
   сверху, фактура крафта — тот же --fiber плюс мягкий градиент,
   тень многослойная. Внутри лежат два листа: слева оффер
   с кнопкой, справа — что человек получит.
   ============================================================ */
/* Язычок папки торчит выше её края, поэтому верхнее поле — отступ секции плюс
   высота язычка: тогда до соседнего блока остаётся ровно --sec-pad, как везде. */
.hero-sec{ --tab:clamp(20px,2.3vw,38px); --kraft:#DEDEDA;
  padding:calc(var(--tab) + var(--sec-pad)) 0 var(--sec-pad); }
/* первому экрану столько воздуха сверху не нужно — над ним край страницы */
#hero{ padding-top:calc(var(--tab) + clamp(18px,2.2vw,36px)); }

.hero-folder{ position:relative; margin-inline:var(--edge);
  border-radius:clamp(10px,1.1vw,16px);
  padding:clamp(20px,2.4vw,42px) var(--gutter) clamp(30px,3.4vw,58px);
  background-color:var(--kraft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(24,24,24,.1),
             0 2px 4px rgba(24,24,24,.06), 0 18px 34px rgba(24,24,24,.08),
             0 40px 70px rgba(24,24,24,.06); }
/* язычок папки: перекрывает верхний край на 16px, поэтому шва не видно */
.hero-folder-tab{ position:absolute; z-index:0; top:calc(-1 * var(--tab));
  left:clamp(16px,3vw,72px); width:clamp(130px,19vw,300px); height:calc(var(--tab) + 16px);
  border-radius:clamp(8px,.9vw,13px) clamp(8px,.9vw,13px) 0 0;
  background-color:var(--kraft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 -4px 12px rgba(24,24,24,.06); }
.hero-inner{ position:relative; z-index:1; max-width:var(--page); margin-inline:auto; }

/* два листа в папке: колонки почти равные, зазор маленький */
.hero-grid{ display:grid; grid-template-columns:minmax(0,68fr) minmax(0,32fr);
  gap:clamp(12px,1.4vw,26px); align-items:stretch; }
.hero-col{ display:flex; }

.hero-sheet{ position:relative; z-index:1; flex:1; display:flex; flex-direction:column;
  border-radius:clamp(4px,.5vw,7px); box-shadow:var(--sh-paper);
  background-color:var(--paper); background-image:var(--fiber); background-blend-mode:multiply;
  padding:clamp(26px,3.2vw,54px) clamp(22px,3vw,52px) clamp(28px,3.4vw,54px); }

.hero-head{ display:flex; align-items:center; gap:clamp(10px,1.4vw,18px); flex-wrap:wrap; }
/* Строки заголовка разбиты вручную (.ln), поэтому text-wrap:balance ему не
   положен — он мешает браузеру держать заданную разбивку. Кегль подобран так,
   чтобы самая длинная строка укладывалась в лист: 12.9em при ширине колонки
   0.68 листа. Больше — начнёт переноситься. */
.h1{ margin-top:clamp(16px,1.9vw,30px); font-weight:800; text-transform:uppercase;
  font-size:clamp(28px,4.35vw,70px); letter-spacing:-.026em; line-height:.96; color:var(--ink); }
.h1 .ln{ display:block; }
.h1 .accent{ color:var(--terra); }
/* подчёркивание маркером под словом ЖИВОЙ */
.uline{ position:relative; display:inline-block; }
.uline::after{ content:""; position:absolute; left:-.04em; right:-.04em; bottom:-.06em; height:.19em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M2 9 C40 3 70 12 104 6 C138 1 170 10 198 5' fill='none' stroke='%2355AFFF' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat; }

/* строка «присылайте задачу» */
/* заливку, отбивку и поля даёт общий класс .note */
.fire{ display:grid; grid-template-columns:auto 1fr; gap:clamp(14px,1.6vw,22px); align-items:center;
  margin-top:clamp(20px,2.4vw,36px); }
.fire-ico{ width:clamp(34px,3.6vw,48px); height:auto; flex:0 0 auto; margin-top:-.1em;
  filter:var(--sticker-tone) drop-shadow(0 3px 5px rgba(24,24,24,.18)); }
.fire p{ font-size:clamp(14px,1.25vw,17px); line-height:1.55; font-weight:600; color:var(--ink); }

/* кнопка прижата к низу листа — встаёт на одну линию с низом правого листа */
.hero-cta{ display:flex; align-items:center; gap:clamp(14px,2vw,28px); flex-wrap:wrap;
  margin-top:auto; padding-top:clamp(22px,2.8vw,40px); }

/* ---------- практикум: новые элементы первого экрана ---------- */
/* вторая строка заголовка на две буквы длиннее прежней — кегль чуть меньше */
.h1--where{ font-size:clamp(26px,3.95vw,64px); }

/* стикер-дедлайн: наклеен на правый верхний угол листа, сверху полоска скотча */
.deadline{ position:absolute; z-index:3; top:clamp(6px,.8vw,14px); right:clamp(18px,2.4vw,44px);
  width:clamp(220px,17vw,292px); transform:rotate(3deg);
  background:var(--hot); color:#fff; border-radius:3px;
  padding:clamp(14px,1.3vw,20px) clamp(16px,1.5vw,22px);
  font-size:clamp(13px,1vw,15px); line-height:1.4; font-weight:600; text-wrap:pretty;
  box-shadow:0 1px 2px rgba(150,30,15,.28), 0 8px 18px rgba(240,68,47,.2), 0 18px 34px rgba(240,68,47,.12); }
.deadline b{ display:block; margin-bottom:.35em; font-weight:800; text-transform:uppercase;
  font-size:1.2em; line-height:1.12; letter-spacing:-.005em; }
.deadline::before{ content:""; position:absolute; top:-9px; left:50%; width:74px; height:20px;
  margin-left:-37px; transform:rotate(-5deg);
  background:rgba(255,255,255,.78); box-shadow:0 1px 2px rgba(24,24,24,.14); }

/* три пункта под врезкой */
.hero-points{ display:grid; gap:clamp(10px,1vw,14px); margin-top:clamp(18px,2vw,28px); }
.hero-points li{ position:relative; padding-left:clamp(26px,2.2vw,32px);
  font-size:clamp(14px,1.2vw,16.5px); line-height:1.5; font-weight:600; color:var(--ink-2); text-wrap:pretty; }
.hero-points li::before{ content:""; position:absolute; left:0; top:.2em; width:1.1em; height:1.1em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3.5 10.5l4 4 9-9.5' fill='none' stroke='%2355AFFF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
/* «2 часа → 15 минут» — акцентом и крупнее, на контрасте: потерянное
   время красным, результат — на голубой плашке */
.big-num{ font-weight:800; font-size:1.3em; line-height:1; white-space:nowrap; }
.big-num--was{ color:var(--red); }
.big-num--now{ color:var(--ink); background:var(--ice); border-radius:4px; padding:.04em .26em;
  box-shadow:inset 0 -2px 0 var(--blue); }

/* подпись под кнопкой */
.cta-stack{ display:inline-flex; flex-direction:column; align-items:center; gap:.7em; }
/* экран «Подарки»: строка снятия страха над кнопкой */
.cta-row--calm{ flex-direction:column; align-items:center; gap:clamp(16px,1.8vw,24px); }
.calm{ max-width:40em; text-align:center; text-wrap:balance;
  font-size:clamp(15px,1.3vw,18px); line-height:1.5; font-weight:600; color:var(--ink-2); }

/* ---------- глоссарий: раскрывающийся лист ---------- */
.gl{ border-radius:3px; box-shadow:var(--sh-card); overflow:hidden;
  background-color:var(--paper); background-image:var(--fiber); background-blend-mode:multiply;
  border-top:5px solid var(--blue); }
.gl summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:clamp(14px,1.4vw,24px);
  padding:clamp(20px,2.2vw,34px) clamp(20px,2.6vw,40px); transition:background .2s var(--ease); }
.gl summary::-webkit-details-marker{ display:none; }
.gl summary:hover{ background:var(--ice-soft); }
.gl summary .h2{ font-size:clamp(20px,2.2vw,32px); }
.gl .sign{ margin-left:auto; flex:0 0 auto; width:clamp(36px,3vw,46px); height:clamp(36px,3vw,46px); border-radius:50%;
  border:1.5px solid var(--grey); color:var(--ink);
  display:flex; align-items:center; justify-content:center; transition:transform .3s var(--ease), background .2s var(--ease); }
.gl .sign svg{ width:42%; height:42%; }
.gl[open] .sign{ transform:rotate(180deg); background:var(--ice); border-color:var(--blue); }
.gl-body{ padding:0 clamp(20px,2.6vw,40px) clamp(14px,1.8vw,26px); }
.gl[open] .gl-body{ animation:unfold .45s var(--ease); }
@keyframes unfold{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }
.term{ display:grid; grid-template-columns:minmax(0,.28fr) minmax(0,1fr); gap:clamp(12px,1.4vw,28px);
  align-items:baseline; padding:clamp(14px,1.4vw,22px) 0; border-top:1px solid var(--line); }
.term b{ font-size:clamp(16px,1.4vw,20px); font-weight:800; letter-spacing:-.01em; color:var(--ink); }
.term p{ font-size:clamp(14px,1.2vw,16.5px); line-height:1.5; font-weight:500; color:var(--ink-2); text-wrap:pretty; }
@media (max-width:639px){ .term{ grid-template-columns:1fr; gap:4px; } }

.cta-sub{ font-size:clamp(12px,1vw,13.5px); font-weight:600; color:var(--ink-3); letter-spacing:.02em; }

/* ============================================================
   ПЕРВЫЙ ЭКРАН, СПРАВА — «БЫЛО / СТАЛО С ИИ»
   Две самостоятельные карточки-интерфейса, без зажима и «листа на
   планшете». «Было» — серое окно ручной работы: вкладки, этапы,
   источники, красные полосы потраченного времени. «Стало» — белое
   окно ИИ-инструмента: промпт, отметки этапов, превью результата.
   Подписи внутри — только слова из ТЗ; остальное иконки и скелетоны.
   ============================================================ */
.cmp{ position:relative; z-index:2; flex-direction:column; --r-card:16px; --r-ui:12px; }
.cmp-card{ position:relative; border-radius:var(--r-card);
  padding:clamp(12px,1.1vw,16px); }
.cmp-was{ background:var(--grey-soft); border:1px solid rgba(24,24,24,.07);
  box-shadow:0 1px 2px rgba(24,24,24,.05), 0 8px 20px rgba(24,24,24,.05); }
.cmp-now{ flex:1; display:flex; flex-direction:column;
  background:var(--paper); border:1px solid var(--ice);
  box-shadow:0 1px 2px rgba(24,24,24,.05), 0 12px 28px rgba(85,175,255,.18), 0 30px 60px rgba(85,175,255,.12); }

.cmp-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.cmp-tag{ display:inline-flex; align-items:center; gap:.45em;
  font-weight:800; text-transform:uppercase; letter-spacing:.14em;
  font-size:clamp(10.5px,.9vw,12.5px); color:var(--ink-3);
  background:rgba(255,255,255,.6); border:1px solid rgba(24,24,24,.1); border-radius:999px; padding:.5em .95em; }
.cmp-tag--now{ color:var(--ink); background:var(--ice-soft); border-color:var(--ice); }
.cmp-tag-spark{ display:grid; color:var(--blue); }
.cmp-tag-spark svg{ width:1.2em; height:1.2em; }
.cmp-time{ display:inline-flex; align-items:center; gap:.28em; white-space:nowrap;
  font-weight:800; letter-spacing:-.03em; line-height:1; font-size:clamp(20px,1.9vw,28px); }
.cmp-time svg{ width:.82em; height:.82em; }
.cmp-time--was{ color:var(--red); }
.cmp-time--now{ color:var(--ink); background:var(--ice); border-radius:8px; padding:.12em .32em;
  box-shadow:inset 0 -3px 0 var(--blue); font-size:clamp(24px,2.3vw,34px); }

/* общее окно интерфейса */
.ui{ margin-top:clamp(8px,.8vw,12px); border-radius:var(--r-ui); }
.ui-label{ display:block; font-weight:800; text-transform:uppercase; letter-spacing:.14em;
  font-size:10px; color:var(--ink-3); }
.sk{ display:block; width:var(--w,100%); height:6px; border-radius:3px; background:rgba(24,24,24,.1); }
.sk--ink{ height:8px; background:rgba(24,24,24,.22); }

/* ---------- «было»: окно ручной работы ---------- */
.ui--was{ background:#F8F8F6; border:1px solid rgba(24,24,24,.08); overflow:hidden; }
.ui-tabs{ display:flex; gap:4px; padding:6px 8px 0; background:#E4E4E0;
  border-bottom:1px solid rgba(24,24,24,.08); }
.ui-tab{ display:grid; place-items:center; width:30px; height:24px; border-radius:6px 6px 0 0; color:#8E8E8A; }
.ui-tab svg{ width:13px; height:13px; }
.ui-tab.is-on{ background:#F8F8F6; color:var(--ink-2); box-shadow:0 -1px 0 rgba(24,24,24,.06); }
.ui-body{ padding:10px 12px 12px; }
.ui-title{ display:flex; align-items:center; gap:8px; padding-bottom:9px;
  border-bottom:1px solid rgba(24,24,24,.08); }
.ui-title b{ font-size:clamp(12.5px,1vw,14px); font-weight:800; color:var(--ink-2); letter-spacing:-.005em; }
.ui-ico{ display:grid; place-items:center; width:24px; height:24px; border-radius:7px;
  background:var(--paper); color:#8E8E8A; box-shadow:0 0 0 1px rgba(24,24,24,.08); }
.ui-ico svg{ width:14px; height:14px; }
.ui-more{ margin-left:auto; display:grid; color:#A5A5A1; }
.ui-more svg{ width:16px; height:16px; }

.was-steps{ position:relative; display:grid; gap:5px; margin-top:8px; }
/* пунктир, связывающий этапы: ручная цепочка шагов */
.was-steps::before{ content:""; position:absolute; left:6px; top:12px; bottom:12px; border-left:1.5px dashed var(--grey); }
.was-steps li{ position:relative; display:grid; grid-template-columns:14px minmax(0,1fr) 64px;
  align-items:center; column-gap:10px; padding:3px 10px 3px 0; }
.was-dot{ position:relative; z-index:1; width:13px; height:13px; border-radius:50%;
  background:#F8F8F6; border:2px solid #9E9E9A; }
.was-dot.is-wait{ border-style:dashed; border-color:var(--grey); }
.was-main{ display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0;
  padding:6px 8px; border-radius:8px; background:var(--paper); box-shadow:0 0 0 1px rgba(24,24,24,.06); }
.was-main b{ font-size:clamp(11.5px,.9vw,13px); font-weight:700; color:var(--ink-2); white-space:nowrap; }
.was-src{ display:flex; gap:3px; }
.was-src i{ display:grid; place-items:center; width:20px; height:20px; border-radius:5px;
  background:var(--grey-soft); color:#8E8E8A; }
.was-src svg{ width:12px; height:12px; }
/* сколько времени съел этап: красная полоса в сером треке */
.was-bar{ height:6px; border-radius:3px; background:rgba(24,24,24,.08); position:relative; overflow:hidden; }
.was-bar::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:var(--p); border-radius:3px;
  background:rgba(240,68,47,.55); }

/* переход «было → стало»: голубая кнопка-стрелка на стыке карточек */
.cmp-arrow{ position:relative; z-index:2; align-self:center; display:grid; place-items:center;
  width:clamp(36px,2.9vw,44px); height:clamp(36px,2.9vw,44px); margin:-9px 0; border-radius:50%;
  background:var(--blue); color:#fff; box-shadow:0 0 0 5px var(--kraft), 0 8px 18px rgba(85,175,255,.4); }
.cmp-arrow svg{ width:50%; height:50%; }

/* ---------- «стало»: окно ИИ-инструмента ---------- */
.ui--now{ flex:1; display:flex; flex-direction:column; gap:8px; }
.ui--now > .ui-label{ margin-bottom:-4px; }
.ai-prompt{ display:flex; align-items:center; gap:9px; padding:7px 7px 7px 11px;
  border-radius:999px; background:var(--paper); border:1.5px solid var(--blue);
  box-shadow:0 0 0 4px rgba(85,175,255,.14); }
.ai-prompt-ico{ display:grid; color:var(--blue); }
.ai-prompt-ico svg{ width:16px; height:16px; }
.ai-prompt-txt{ flex:1; min-width:0; display:flex; align-items:center;
  font-size:clamp(12.5px,1vw,14px); font-weight:600; color:var(--ink); white-space:nowrap; }
.ai-caret{ width:1.5px; height:1.05em; margin-left:2px; background:var(--blue); animation:caret 1.1s steps(1) infinite; }
@keyframes caret{ 50%{ opacity:0; } }
@media (prefers-reduced-motion:reduce){ .ai-caret{ animation:none; } }
.ai-send{ display:grid; place-items:center; width:28px; height:28px; border-radius:50%;
  background:var(--blue); color:#fff; flex:0 0 auto; }
.ai-send svg{ width:15px; height:15px; }

.ai-steps{ display:flex; flex-wrap:wrap; gap:6px; }
.ai-chip{ display:inline-flex; align-items:center; gap:5px; padding:4px 9px 4px 4px; border-radius:999px;
  background:var(--ice-soft); border:1px solid var(--ice);
  font-size:clamp(11px,.85vw,12.5px); font-weight:700; color:var(--ink); white-space:nowrap; }
.ai-chip i{ display:grid; place-items:center; width:17px; height:17px; border-radius:50%;
  background:var(--blue); color:#fff; }
.ai-chip svg{ width:11px; height:11px; }

.ai-result{ flex:1; display:flex; flex-direction:column; gap:8px; padding:10px 11px 11px;
  border-radius:var(--r-ui); background:var(--ice-soft); border:1px solid var(--ice); }
.ai-result-head{ display:flex; align-items:center; justify-content:space-between; }
.ai-ready{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px 3px 4px; border-radius:999px;
  background:var(--blue); color:#fff; font-size:11.5px; font-weight:800; }
.ai-ready i{ display:grid; place-items:center; width:16px; height:16px; border-radius:50%; background:#fff; color:var(--blue); }
.ai-ready svg{ width:11px; height:11px; }
.ai-doc{ flex:1; display:flex; gap:10px; padding:10px; border-radius:9px; background:var(--paper);
  box-shadow:0 1px 2px rgba(24,24,24,.05), 0 4px 12px rgba(85,175,255,.12); }
.ai-doc-ico{ display:grid; place-items:center; width:30px; height:30px; border-radius:8px;
  background:var(--ice); color:var(--blue); }
.ai-doc-ico svg{ width:17px; height:17px; }
.ai-doc-main{ flex:1; display:flex; flex-direction:column; justify-content:center; gap:7px; min-width:0; }
.ai-chart{ display:flex; align-items:flex-end; gap:5px; height:clamp(30px,2.5vw,38px);
  padding-bottom:2px; border-bottom:1px solid rgba(24,24,24,.1); }
.ai-chart span{ flex:1; height:var(--h); border-radius:3px 3px 1px 1px; background:var(--ice); }
.ai-chart span:last-child{ background:var(--blue); }
/* на узком десктопе левый лист ниже — поджимаем окна, чтобы правая колонка
   не растягивала его (иначе над кнопкой оффера появляется пустота) */
@media (min-width:1180px) and (max-width:1379px){
  .ui-body{ padding:8px 10px 10px; }
  .ui-title{ padding-bottom:7px; }
  .was-steps li{ padding:1px 10px 1px 0; }
  .ai-chart{ height:24px; }
  .ai-doc{ padding:8px; }
  .ai-result{ gap:6px; padding:8px 10px 9px; }
}

/* подарки под первым экраном — та же плашка .gifts2, что после блока ЦА;
   внутри папки отступ сверху меньше, как зазор между листами */
.gifts2--hero{ margin-top:clamp(12px,1.4vw,26px); }

/* ============================================================
   БОЛЬ — «у меня эти проблемы → вот что я получу».
   Всё живёт на одном белом листе: сверху два вопроса на светлых
   плашках, под ними тёмная строка ответа с оранжевой отбивкой.
   Фон секции остаётся бумажным с линовкой — смены тона нет.
   ============================================================ */
.pain{ position:relative; border-radius:clamp(4px,.5vw,8px); box-shadow:var(--sh-paper);
  background-color:var(--paper); background-image:var(--fiber); background-blend-mode:multiply;
  padding:clamp(24px,2.8vw,44px); }
/* наклейка-вопрос присела на верхний правый угол листа */
.pain-sticker{ position:absolute; z-index:3; top:0; right:clamp(18px,3vw,58px);
  width:clamp(52px,5.4vw,86px); height:auto; transform:translateY(-46%) rotate(9deg);
  filter:var(--sticker-tone) drop-shadow(0 4px 7px rgba(24,24,24,.22)); }

.pain-qs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,1.6vw,26px); }
/* Вопросы лежат в той же врезке, что и остальные акценты страницы (.note):
   отдельной бежевой плашки больше нигде нет, и она читалась как чужая.
   Номер набран мелко и разрядкой: раньше в блоке всё было крупным, и было
   непонятно, что здесь главное. */
/* вопросы — «было»: серая приглушённая плашка, серая отбивка, красный номер */
.pain-q{ font-size:clamp(17px,1.72vw,25px); font-weight:700; line-height:1.26;
  letter-spacing:-.018em; color:var(--ink-2); }
.pain-q.note{ background:var(--grey-soft); border-left-color:var(--grey); }
.pain-n{ display:block; font-weight:800; text-transform:uppercase; letter-spacing:.2em;
  font-size:clamp(11px,1.05vw,13px); color:var(--terra); margin-bottom:.9em; }

/* ответ: тёмная строка на том же листе, оранжевая отбивка — единственный акцент */
.pain-answer{ margin-top:clamp(14px,1.6vw,26px); border-radius:clamp(3px,.4vw,6px); overflow:hidden;
  background:var(--ink); border-left:4px solid var(--blue); }
.pain-answer p{ padding:clamp(18px,2.1vw,30px) clamp(20px,2.4vw,36px);
  max-width:88ch; color:#F6F6F3;
  font-size:clamp(14.5px,1.28vw,18px); line-height:1.5; font-weight:600; }
.pain-answer .hl{ background:none; padding:0; color:var(--ice); font-weight:800; }

/* ============================================================
   ЧТО БУДЕТ В ЭФИРЕ — один лист вместо россыпи кусков.
   Прежняя раскладка (лид, «3» и список 01–06 порознь на голой
   бумаге) читалась как три чужих блока и растягивала секцию почти
   на два экрана. Теперь всё лежит на одном листе, а список идёт
   в две колонки — высота падает вдвое, а горизонтальные линейки
   и вертикальная отбивка посередине держат его как таблицу
   в печатной программе.
   ============================================================ */
.prog{ position:relative; border-radius:clamp(4px,.5vw,8px); box-shadow:var(--sh-paper);
  background-color:var(--paper); background-image:var(--fiber); background-blend-mode:multiply;
  padding:clamp(24px,3vw,52px); }
/* лист держит одна скрепка справа. Зажим-бульдог слева убран: два разных
   предмета на одном крае спорили друг с другом, да и зажим уже занят
   на первом экране и в финальном блоке. */
.prog-clips{ top:0; right:clamp(20px,4vw,74px); transform:translateY(-44%) rotate(13deg); }

/* Линии под лидом здесь нет намеренно: колонки и так разделены воздухом,
   а линия просто ради линии ничего не разграничивала. */
.prog-top{ display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(24px,3.4vw,60px); align-items:stretch;
  padding-bottom:clamp(26px,3vw,46px); }
/* лид занимает свою колонку целиком — ограничение по ширине оставляло
   его тонкой лентой рядом с пустотой */
.prog-lede{ font-size:clamp(18px,1.8vw,27px); line-height:1.38; font-weight:600;
  letter-spacing:-.014em; color:var(--ink); }

/* главный акцент секции. Крупная цифра сама по себе не читалась как часть
   фразы, поэтому теперь укрупнены первые два слова самого предложения —
   текст ТЗ при этом не тронут, «Три» осталось словом, а не цифрой. */
/* заливку, отбивку и поля даёт общий класс .note */
.prog-three{ display:flex; align-items:center; }
.prog-three p{ font-size:clamp(14px,1.2vw,17px); line-height:1.55; color:var(--ink-2);
  font-weight:500; }
.prog-three-lead{ display:block; font-size:clamp(28px,3.1vw,46px); font-weight:800;
  color:var(--terra); letter-spacing:-.03em; line-height:1; margin-bottom:.32em; }

/* «А ещё вы увидите:» — не заголовок, а мелкая надпись над списком */
.pg-lead{ margin:clamp(24px,2.8vw,44px) 0 clamp(2px,.6vw,10px);
  font-weight:700; text-transform:uppercase;
  letter-spacing:.2em; font-size:clamp(11px,1.05vw,13px); color:var(--ink-3); }

/* две колонки, заполняются сверху вниз: 01–03 слева, 04–06 справа.
   Горизонтальных зазоров между колонками нет намеренно — тогда линейки
   строк идут через весь лист, не разрываясь в жёлобе, и таблица держится. */
.pg-list{ position:relative; list-style:none;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(3,auto); grid-auto-flow:column; }
.pg-list::before{ content:""; position:absolute; left:50%; top:0; bottom:0; width:1px;
  background:rgba(24,24,24,.13); }
/* по базовой линии крупная цифра нависала над текстом — выравниваем по верху
   прописных: сетка по верху, цифре добавлена полуапрош её кегля */
.pg{ display:grid; grid-template-columns:auto minmax(0,1fr); align-items:start;
  column-gap:clamp(12px,1.4vw,22px);
  padding:clamp(16px,1.9vw,26px) clamp(16px,2.2vw,38px);
  border-top:1px solid rgba(24,24,24,.13); }
.pg:nth-child(-n+3){ padding-left:0; }   /* левая колонка прижата к краю листа */
.pg:nth-child(n+4){ padding-right:0; }   /* правая — к другому краю */
.pg:nth-child(3), .pg:nth-child(6){ border-bottom:1px solid rgba(24,24,24,.13); }
.pg-n{ font-weight:800; font-size:clamp(22px,2.1vw,32px); line-height:1; margin-top:.14em; color:var(--blue);
  letter-spacing:-.05em; font-variant-numeric:tabular-nums;
  transition:color .25s var(--ease); }
.pg:hover .pg-n{ color:var(--hot); }
.pg-txt{ font-size:clamp(14px,1.15vw,17px); line-height:1.5; font-weight:600; color:var(--ink); }
/* ключевая часть пункта набрана жирным — по ней список читается по диагонали */
.pg-txt b{ font-weight:800; }

.cta-row{ display:flex; justify-content:center; margin-top:clamp(28px,3.6vw,54px); }
.cta-row--prog{ margin-top:clamp(28px,3.4vw,52px); }

/* ============================================================
   СПИКЕР
   ============================================================ */
/* колонка с фото узкая: при 0.72fr полароид выходил заметно выше блока
   регалий, а текст рядом сжимался в две тесные колонки */
.sp-grid{ display:grid; grid-template-columns:minmax(0,.52fr) minmax(0,1.48fr);
  gap:clamp(22px,3.2vw,54px); align-items:start; }
.polaroid{ position:relative; max-width:340px; transform:rotate(-1.4deg); border-radius:2px; box-shadow:var(--sh-paper);
  background-color:var(--paper); background-image:var(--fiber); background-blend-mode:multiply;
  padding:clamp(12px,1.3vw,18px) clamp(12px,1.3vw,18px) clamp(46px,4.4vw,66px); }
/* height:auto обязателен: иначе атрибут height="1080" из разметки
   остаётся презентационной подсказкой и тянет фото по вертикали */
.polaroid img{ width:100%; height:auto; }
.sp-clip{ top:0; right:9%; transform:translateY(-50%) rotate(12deg); }
.polaroid figcaption{ position:absolute; left:0; right:0; bottom:clamp(14px,1.6vw,22px); text-align:center;
  font-weight:700; color:var(--terra); font-size:clamp(13px,1.2vw,16px); line-height:1;
  text-transform:uppercase; letter-spacing:.18em; }
.sp-name{ font-weight:800; text-transform:uppercase; letter-spacing:-.015em; line-height:1;
  font-size:clamp(24px,3vw,44px); margin-bottom:clamp(16px,2vw,26px); }
.sp-list{ column-count:2; column-gap:clamp(20px,2.6vw,42px); }
.sp-list li{ break-inside:avoid; position:relative; padding:0 0 .95em 1.5em;
  font-size:clamp(13.5px,1.15vw,15.5px); line-height:1.5; color:var(--ink-2); font-weight:500; }
.sp-list li::before{ content:""; position:absolute; left:0; top:.5em; width:.5em; height:.6em;
  background:var(--blue); clip-path:polygon(0 0,100% 50%,0 100%); }
.sp-list b{ color:var(--ink); font-weight:700; }

/* ============================================================
   КОМУ БЫТЬ — чистые карточки, вся фактура в бумаге
   ============================================================ */
/* Карточек пять, а колонок три — нижний ряд из двух оставлял справа дыру
   в треть ширины. Поэтому сетка считается в шести долях: верхние три
   карточки берут по две, нижние две — по три, и ряд заполняется целиком. */
.who-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(14px,1.8vw,24px); }
.who{ grid-column:span 2; }
/* практикум: карточек стало шесть — два ровных ряда по три */
/* Портрет слева от текста, а не над ним: тексты тут короткие, и в столбик
   карточка выходила вдвое выше нужного — правая половина пустовала. */
/* Колонка под портрет — фиксированной ширины, той же, что у самого портрета.
   С `auto` ширина зависела бы от того, загрузилась картинка или нет, и
   карточки в ряду разъезжались бы по вертикали в момент загрузки. */
.who{ position:relative; border-radius:2px; box-shadow:var(--sh-card);
  display:grid; grid-template-columns:clamp(78px,7.6vw,124px) minmax(0,1fr);
  align-items:center; column-gap:clamp(14px,1.7vw,26px);
  background-color:var(--paper); background-image:var(--fiber); background-blend-mode:multiply;
  padding:clamp(20px,2.2vw,30px) clamp(20px,2.4vw,32px); border-top:5px solid var(--terra); }
.who:nth-child(2n){ border-top-color:var(--ochre); }
.who h3{ font-size:clamp(15px,1.4vw,19px); font-weight:800; line-height:1.25; letter-spacing:-.01em; margin-bottom:.5em; }
.who h3:last-child{ margin-bottom:0; }
.who p{ font-size:clamp(13.5px,1.15vw,15.5px); line-height:1.55; color:var(--ink-2); font-weight:500; }
/* Белая рамка и волосяной контур отделяют бежевый фон снимка от бежевой
   бумаги карточки — без них портрет расплывается в подложке. */
.who-face{ display:block; width:100%; height:auto; aspect-ratio:1;
  object-fit:cover; border-radius:50%;
  border:3px solid var(--paper);
  box-shadow:0 0 0 1px rgba(24,24,24,.16), 0 6px 14px rgba(24,24,24,.18); }

/* ============================================================
   ПОДАРКИ — повтор
   ============================================================ */
/* Блок живёт внутри секции ЦА, а не отдельным экраном: это продолжение того же
   обращения к читателю. Поэтому отделяет его воздух, а не смена фона секции.
   А чтобы он не потерялся среди пяти белых карточек, плашка тёмная — тот же
   приём, что у строки-вывода в блоке с вопросами: белые листы вокруг, одна
   тёмная полоса с оранжевой отбивкой слева. Фактуру бумаги здесь не мешаем:
   на тёмном multiply даёт грязь, вместо неё мягкая подсветка сверху. */
.gifts2{ margin-top:clamp(30px,3.8vw,60px);
  position:relative; display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,3vw,50px); align-items:center;
  border-radius:3px; box-shadow:var(--sh-card);
  background-color:var(--ink);
  border-left:4px solid var(--blue); color:#fff;
  padding:clamp(28px,3.4vw,54px) clamp(24px,3vw,54px); }
/* наклейка-подарок сбоку от блока: наполовину заходит за правый край листа */
.gifts2-sticker{ position:absolute; z-index:3; top:clamp(-26px,-2vw,-14px); right:0;
  width:clamp(64px,7vw,108px); height:auto;
  transform:translateX(46%) rotate(9deg);
  filter:var(--sticker-tone) drop-shadow(0 5px 9px rgba(24,24,24,.22)); }
/* Нужны ровно три строки. 16ch давали четыре, 22ch — две, 19ch попадают
   в три. Мерка капризная: ch считается по ширине цифры, а строка набрана
   прописными, они шире, и знаков влезает меньше, чем кажется по числу. */
.gifts2-t{ font-weight:800; text-transform:uppercase; font-size:clamp(17px,2vw,30px); line-height:1.15;
  letter-spacing:-.015em; max-width:19ch; }
.gifts2-list li{ position:relative; padding:.85em 0 .85em 2.1em; font-size:clamp(14px,1.3vw,17.5px);
  line-height:1.5; font-weight:600; border-bottom:1px dashed rgba(255,255,255,.2); }
.gifts2-list li:last-child{ border-bottom:0; }
/* галочка голубая: это результат, и на почти чёрном голубой читается чисто */
.gifts2-list li::before{ content:""; position:absolute; left:0; top:.95em; width:1.35em; height:1.15em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 40'%3E%3Cpath d='M6 22 L18 33 C24 20 32 10 40 5' fill='none' stroke='%2355AFFF' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }

/* ============================================================
   ТАРИФЫ — «БИЗНЕС» лежит в настоящей папке
   ============================================================ */
.tar-grid{ display:grid; grid-template-columns:1fr 1.08fr; gap:clamp(26px,3.4vw,52px); align-items:stretch; }
.tar-wrap{ position:relative; display:flex; }
.tar{ position:relative; z-index:1; flex:1; display:flex; flex-direction:column; border-radius:2px;
  box-shadow:var(--sh-card); background-color:var(--paper); background-image:var(--fiber); background-blend-mode:multiply;
  padding:clamp(28px,3.2vw,48px) clamp(24px,3vw,44px) clamp(30px,3.4vw,48px); }
/* «БИЗНЕС» — единственный платный тариф, и он тёмный: на странице тёмный тон
   используется редко (вывод в блоке вопросов, плашка подарков), поэтому здесь
   он работает как знак «вот главное». Фактуру бумаги на тёмном не мешаем —
   multiply там даёт грязь, вместо неё мягкая подсветка сверху. */
.tar--pro{ background-color:var(--ink); background-blend-mode:normal;
  background-image:none; color:#fff; }
.tar--pro .tar-incl, .tar--pro .tar-plus{ color:rgba(255,255,255,.6); }
.tar--pro .tar-list li{ border-bottom-color:rgba(255,255,255,.2); }
/* на тёмном — светлый лёд */
.tar--pro .tar-list li::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 40'%3E%3Cpath d='M6 22 L18 33 C24 20 32 10 40 5' fill='none' stroke='%2355AFFF' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.tar-name{ font-weight:800; text-transform:uppercase; letter-spacing:.02em; font-size:clamp(20px,2.4vw,34px);
  line-height:1; color:var(--ink); }
.tar--pro .tar-name{ color:var(--ice); }
.tar-incl{ margin-top:clamp(14px,1.8vw,22px); font-weight:600;
  font-size:clamp(13px,1.15vw,15px); color:var(--ink-3); line-height:1.5; }
/* «+» набран как строка над ним — это часть той же подписи, а не акцент */
.tar-plus{ font-weight:600; font-size:clamp(13px,1.15vw,15px); color:var(--ink-3);
  line-height:1.5; margin-top:.55em; }
.tar-list{ margin-top:clamp(14px,1.8vw,22px); flex:1; }
.tar-list li{ position:relative; padding:.75em 0 .75em 1.9em; font-size:clamp(13.5px,1.22vw,16.5px);
  line-height:1.5; font-weight:600; border-bottom:1px dashed rgba(24,24,24,.15); }
.tar-list li::before{ content:""; position:absolute; left:0; top:.85em; width:1.2em; height:1em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 40'%3E%3Cpath d='M6 22 L18 33 C24 20 32 10 40 5' fill='none' stroke='%2355AFFF' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.tar .cta{ margin-top:clamp(20px,2.4vw,32px); width:100%; }

/* ============================================================
   КТО МЫ (переносной блок, перекрашен под бумагу)
   ============================================================ */
/* надзаголовок «КТО МЫ?» снят по просьбе заказчика — секция начинается сразу
   с заголовка. Правило .kicker удалено вместе с ним, чтобы не копить мёртвый CSS. */
/* заголовки блока «Кто мы» не тянем во всю ширину: длинный заголовок
   оставлял на второй строке одно слово. Ширина в ch + балансировка строк */
.about h2{ font-weight:800; text-transform:uppercase; letter-spacing:-.018em; line-height:1.05;
  font-size:clamp(22px,2.9vw,42px); max-width:44ch; text-wrap:balance; }
.about-h2-spaced{ margin-top:clamp(40px,5vw,80px); margin-bottom:clamp(20px,2.4vw,34px); }
.about-top{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(16px,2vw,28px); margin-top:clamp(22px,2.8vw,40px); }
.about-lead, .about-stat, .about-card, .research-card, .gov-card{
  border-radius:2px; box-shadow:var(--sh-card);
  background-color:var(--paper); background-image:var(--fiber); background-blend-mode:multiply; }
/* Плашки логотипов — чистый белый и без бумажной фактуры: почти все логотипы
   лежат на белом фоне, и на кремовой плашке вокруг них проступал прямоугольник.
   Пропорции фиксированы, логотип вписывается целиком (object-fit:contain). */
.client-card, .media-card, .about-logo{ background:#fff; border:1px solid var(--line);
  border-radius:2px; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.client-card img, .media-card img, .about-logo img{
  max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.about-lead{ padding:clamp(22px,2.6vw,40px); display:flex; flex-direction:column; gap:clamp(14px,1.6vw,24px); }
/* Размеры выровнены по эталонной ручной вёрстке этого блока: заголовки внутри
   карточек крупнее, у цифр крупная наклейка и текст в полтора раза больше —
   иначе карточки статистики читались как подписи под пустотой. */
.about-lead-label, .about-card-label{ font-weight:800; font-size:clamp(16px,1.65vw,24px);
  line-height:1.25; letter-spacing:-.012em; }
/* у скриншота Smart Ranking светлый фон, и на кремовой карточке его границы
   пропадали — обводим тонкой линией и подкладываем белое */
.about-lead-media img{ width:100%; background:#fff; border:1px solid var(--line);
  border-radius:2px; }
.about-stats{ display:grid; gap:clamp(16px,2vw,28px); }
.about-stat{ display:flex; align-items:center; gap:clamp(16px,2.2vw,32px); padding:clamp(22px,2.6vw,40px); }
/* наклейки-стикеры вместо прежних 3D-иконок: та же оранжевая гамма,
   что у огонька, вопроса и подарка */
.about-stat-ico{ flex:0 0 auto; width:clamp(64px,6.6vw,104px); }
.about-stat-ico img{ width:100%; height:auto;
  filter:var(--sticker-tone) drop-shadow(0 4px 7px rgba(24,24,24,.2)); }
.about-stat p{ font-size:clamp(17px,1.7vw,26px); line-height:1.3; font-weight:600;
  letter-spacing:-.012em; text-wrap:balance; }
.about-stat b{ font-weight:800; color:var(--terra); }
/* обе карточки одной высоты: то, что внутри, растягивается вместе с ними,
   поэтому пустого низа, из-за которого раньше ставили align-items:start,
   не появляется */
.about-bottom{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2vw,28px);
  margin-top:clamp(16px,2vw,28px); align-items:stretch; }
.about-card{ display:flex; flex-direction:column; padding:clamp(22px,2.6vw,40px); }
.about-card-label{ margin-bottom:1em; display:block; }
/* вузы в две колонки, как на chto-proishodit-s-ii: в один ряд плашки выходили
   низкими, и карточка рядом с лицензиями растягивалась пустотой */
.about-logos{ display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:1fr;
  gap:clamp(10px,1.2vw,16px); flex:1; }
.about-logo{ min-height:clamp(110px,11vw,170px); padding:clamp(12px,1.6vw,22px); }
.about-row{ display:flex; align-items:center; justify-content:space-between;
  gap:clamp(14px,2vw,28px); margin-bottom:1em; }
/* лого Сколково крупнее: в прежние 3rem оно терялось рядом с заголовком */
.sk-logo{ height:clamp(3.4rem,4.4vw,5rem); width:auto; flex-shrink:0; border-radius:.6rem; }
.about-lic{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(10px,1.2vw,16px); flex:1; }
.about-lic img{ width:100%; height:100%; object-fit:contain; background:#fff;
  border:1px solid var(--line); border-radius:2px; }

.research-card{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(16px,2vw,32px); padding:clamp(18px,2.2vw,32px); }
.research-photo img{ width:100%; height:100%; object-fit:cover; }
.research-content h3{ font-size:clamp(16px,1.6vw,23px); font-weight:800; line-height:1.25; margin-bottom:.7em; }
.research-content p{ font-size:clamp(13px,1.12vw,15px); line-height:1.6; color:var(--ink-2); }
.clients-grid{ display:grid; grid-template-columns:repeat(8,1fr); gap:clamp(8px,1vw,14px); }
.client-card{ aspect-ratio:3/2; padding:clamp(8px,1vw,14px); }
.gov-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(16px,2vw,28px); align-items:stretch; }
.gov-left{ display:grid; gap:clamp(16px,2vw,28px); }
.gov-card{ padding:clamp(18px,2.2vw,32px); position:relative; }
.gov-icon{ width:2em; height:2em; border-radius:50%; display:grid; place-items:center; background:var(--terra);
  color:#fff; font-weight:800; margin-bottom:.7em; }
.gov-card h3{ font-size:clamp(15px,1.45vw,20px); font-weight:800; line-height:1.3; margin-bottom:.7em; }
.gov-desc{ font-size:clamp(13px,1.12vw,15px); line-height:1.6; color:var(--ink-2); }
.gov-regions{ margin-top:1em; display:grid; gap:.4em; font-size:clamp(13px,1.12vw,15px); color:var(--ink-2); }
.gov-regions li::before{ content:"— "; color:var(--blue); }
.gov-regions-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.5em 1.2em; font-size:clamp(12.5px,1.08vw,14.5px); color:var(--ink-2); }
/* слайдер занимает всю высоту колонки, кадры кадрируются по месту */
.gov-photo{ display:flex; }
.corp-slider{ position:relative; flex:1; overflow:hidden; border-radius:2px;
  box-shadow:var(--sh-card); min-height:clamp(280px,26vw,420px); }
.corp-slide{ display:none; height:100%; }
.corp-slide.active{ display:block; }
.corp-slide img{ width:100%; height:100%; object-fit:cover; }
.corp-btn{ position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%; border:0;
  background:rgba(255,255,255,.9); color:var(--ink); font-size:18px; cursor:pointer; display:grid; place-items:center; }
.corp-prev{ left:10px; } .corp-next{ right:10px; }
.corp-dots{ position:absolute; left:0; right:0; bottom:10px; display:flex; justify-content:center; gap:7px; }
.corp-dot{ width:8px; height:8px; border-radius:50%; border:0; background:rgba(255,255,255,.55); cursor:pointer; padding:0; }
.corp-dot.active{ background:var(--hot); }
.media-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(10px,1.2vw,18px); }
.media-card{ aspect-ratio:3/2; padding:clamp(10px,1.2vw,16px); }
.zoomable{ cursor:zoom-in; }

/* лайтбокс */
.lb{ position:fixed; inset:0; background:rgba(18,18,18,.86); display:none; place-items:center; z-index:100; padding:24px; }
.lb.on{ display:grid; }
.lb img{ max-width:min(94vw,1100px); max-height:90vh; width:auto; }

/* ============================================================
   ФИНАЛ — та же раскладка, что у первого экрана: оффер, «Было /
   Стало с ИИ», подарки. Текста в листе меньше, чем наверху, поэтому
   содержимое встаёт по центру высоты, а не растягивается к кнопке.
   ============================================================ */
/* поля листа одинаковые со всех сторон, высота — по содержимому */
.hero-sheet--final{ --pad:clamp(22px,3vw,52px); padding:var(--pad); }
.hero-sheet--final .hero-cta{ margin-top:0; padding-top:clamp(22px,2.6vw,38px); }
/* справа — облегчённые карточки, чтобы колонка не была выше листа:
   без вкладок и заголовка задачи в «было», без подписи промпта
   и превью отчёта в «стало» — остаются этапы, запрос, отметки и «Готово» */
.cmp--compact .ui-tabs, .cmp--compact .ui-title,
.cmp--compact .ui--now > .ui-label, .cmp--compact .ai-doc-side,
.cmp--compact .ai-doc-main > .sk:not(.sk--ink){ display:none; }
.cmp--compact .ui-body{ padding:8px 10px; }
.cmp--compact .was-steps{ margin-top:0; }
/* превью отчёта остаётся, но тонкое — заголовок и график;
   результат забирает оставшуюся высоту карточки */
.cmp--compact .ai-result{ gap:6px; padding:8px 10px 10px; }
.cmp--compact .ai-doc{ padding:8px 10px; }
.cmp--compact .ai-chart{ flex:1; min-height:22px; height:auto; }
.cmp--compact .ui--now{ gap:6px; }
@media (min-width:1180px) and (max-width:1419px){
  /* на узком десктопе от превью остаётся только график — он добирает высоту */
  .cmp--compact .ai-doc{ padding:6px 8px; }
  .cmp--compact .ai-doc-main > .sk--ink{ display:none; }
  .cmp--compact .ai-chart{ min-height:12px; }
}

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width:1179px){
  /* планшет и уже: листы в одну колонку, папка держит форму и тянется */
  .hero-grid{ grid-template-columns:1fr; gap:clamp(16px,2.4vw,28px); }
  .hero-cta{ margin-top:clamp(22px,2.8vw,40px); padding-top:0; }
  /* стикер уходит в поток под строку с датой */
  .deadline{ position:relative; top:auto; right:auto; width:auto; max-width:420px;
    margin-top:clamp(20px,2.6vw,30px); transform:rotate(-1.2deg); }
  .prog-top{ grid-template-columns:1fr; gap:clamp(20px,3vw,36px); }
  /* на двух колонках доли шестёрки не нужны, но пятая карточка остаётся
     одна в ряду — растягиваем её, чтобы не висела половинкой */
  .who-grid{ grid-template-columns:repeat(2,1fr); }
  .who, .who:nth-child(n+4){ grid-column:auto; }

  .sp-grid{ grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr); }
}
@media (max-width:899px){
  /* на телефонах и узких планшетах все кнопки во всю ширину */
  .cta{ width:100%; padding-inline:1.2em; }
  .hero-cta, .cta-row, .cta-row--prog{ display:block; }
  .cta-stack{ display:flex; }
  /* на узком экране таблица распадается в один столбец: жёлоб не нужен,
     пункты прижимаются к обоим краям листа, нижняя линейка — только у последнего */
  .pg-list{ grid-template-columns:1fr; grid-template-rows:auto; grid-auto-flow:row; }
  .pg-list::before{ display:none; }
  .pg:nth-child(-n+3), .pg:nth-child(n+4){ padding-inline:0; }
  .pg:nth-child(3){ border-bottom:0; }
  .tar-grid{ grid-template-columns:1fr; }
  .sp-grid{ grid-template-columns:1fr; }
  .sp-list{ column-count:1; }
  .polaroid{ max-width:360px; }
  .about-top, .about-bottom, .research-card, .gov-grid{ grid-template-columns:1fr; }
  .media-grid{ grid-template-columns:repeat(3,1fr); }
  .clients-grid{ grid-template-columns:repeat(4,1fr); }
  .gifts2{ grid-template-columns:1fr; }
  .pain-qs{ grid-template-columns:1fr; }
}
@media (max-width:639px){
  .who-grid{ grid-template-columns:1fr; }
  .clients-grid{ grid-template-columns:repeat(2,1fr); }
  .media-grid{ grid-template-columns:repeat(2,1fr); }
  .gov-regions-grid{ grid-template-columns:1fr; }
  .polaroid{ transform:none; }
  /* На телефоне вертикальный снимок 2:3 занимал почти весь экран. Режем его
     снизу до 8:7 — примерно 58% высоты кадра. Резать ниже нельзя: на 65%
     начинаются скрещённые руки, и линия реза проходила бы по предплечьям.
     object-position сверху, чтобы отрезался низ, а не голова. */
  .polaroid img{ aspect-ratio:8/7; object-fit:cover; object-position:50% 0; }
  :root{ --edge:0px; }
  .hero-folder{ border-radius:0; }
  .hero-folder-tab{ left:14px; width:clamp(110px,34vw,180px); }
  .pg{ column-gap:clamp(12px,3.4vw,18px); }
  .pg-n{ font-size:clamp(20px,5.4vw,26px); }
  .prog-three-lead{ font-size:clamp(26px,7.4vw,34px); }
}

/* ============================================================
   ZEROCODER FOOTER — переиспользуемый подвал
   ============================================================ */
.footer {
  --zc-space-3: 12px; --zc-space-4: 16px; --zc-space-5: 24px; --zc-space-6: 32px;
  --zc-space-7: 48px; --zc-space-8: 64px; --zc-space-9: 96px;
  /* Подвал переносной, но синий #1a2438 и лаймовый ховер выпадали из тёплой
     палитры лендинга. Здесь берём тот же тёмный тон, что у строки-ответа
     в блоке «боль» (--ink), и оранжевый акцент страницы. */
  --zc-accent: var(--blue);
  --zc-easing: cubic-bezier(0.22, 1, 0.36, 1);
  background: var(--ink); color: rgba(255,255,255,.72);
  padding: var(--zc-space-9) 0 var(--zc-space-6);
  font-size: 15px; font-family: 'Manrope', Arial, sans-serif;
}
.footer__container { max-width: calc(var(--page) + 2 * (var(--edge) + var(--gutter)));
  margin: 0 auto; padding: 0 calc(var(--edge) + var(--gutter)); }
.footer__top { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: var(--zc-space-8);
  padding-bottom: var(--zc-space-7); border-bottom: 1px solid rgba(255,255,255,.1); }
.footer__brand { display: flex; flex-direction: column; gap: var(--zc-space-5); }
.footer__logo { display: inline-flex; align-items: center; text-decoration: none; }
.footer__logo-img { display: block; height: 36px; width: auto; max-width: 220px; }
.footer__address { display: block; font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.55); }
.footer__badges { display: inline-flex; align-items: center; gap: 12px; padding: 10px 14px;
  background: rgba(255,255,255,.06); border-radius: 14px; width: fit-content; }
.footer__badge-img { display: block; height: 44px; width: auto; }
.footer__badge-img--rk { height: 48px; }
.footer__badge-img--sk { height: 36px; }
.footer__col { font-size: 15px; }
.footer__col h4 { font-size: 13px; color: rgba(255,255,255,.48); margin: 0 0 var(--zc-space-4);
  font-weight: 500; letter-spacing: 0; text-transform: none; }
.footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--zc-space-3); }
.footer__col a { color: #FFFFFF; text-decoration: none; transition: color .2s var(--zc-easing); }
.footer__col a:hover { color: var(--zc-accent); }
.footer__col--contacts { display: flex; flex-direction: column; gap: var(--zc-space-5); }
.footer__contact-block h4 { margin-bottom: 4px; }
.footer__contact-value { display: inline-block; font-size: 24px; font-weight: 700; color: #FFFFFF;
  letter-spacing: -.01em; text-decoration: none; transition: color .2s; }
.footer__contact-value:hover { color: var(--zc-accent); }
.footer__socials { display: flex; gap: 12px; margin-top: 6px; }
.footer__social { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  transition: transform .2s var(--zc-easing), box-shadow .2s; }
.footer__social--tg { background: #2aabee; }
.footer__social--wa { background: #25d366; }
.footer__social--yt { background: #ff0000; }
.footer__social--max { overflow: hidden; }
.footer__social-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.footer__social:hover { transform: translateY(-2px) scale(1.06); box-shadow: 0 8px 20px -6px rgba(0,0,0,.5); }
.footer__social svg { width: 22px; height: 22px; }
.footer__bottom { padding-top: var(--zc-space-6); display: flex; justify-content: space-between;
  gap: var(--zc-space-5); flex-wrap: wrap; font-size: 13px; color: rgba(255,255,255,.45); }
.footer__copy { letter-spacing: .01em; }
.footer__legal { display: flex; gap: var(--zc-space-7); flex-wrap: wrap; }
@media (max-width: 959px) { .footer__top { grid-template-columns: 1fr 1fr; gap: var(--zc-space-6); } }
@media (max-width: 639px) { .footer__top { grid-template-columns: 1fr; } }

/* ============================================================
   ОКНО С ФОРМОЙ РЕГИСТРАЦИИ
   Виджет GetCourse — это не кнопка, а форма с полями, поэтому в карточку
   тарифа она не влезает: кнопка открывает её в окне.
   Скрипт виджета выставляет высоту своему РОДИТЕЛЮ, поэтому у него должен
   быть отдельный пустой контейнер (.wmodal-body) — иначе он растянет по
   высоте всё, во что его положили.
   ============================================================ */
.wmodal{ position:fixed; inset:0; z-index:120; display:grid; place-items:center;
  padding:clamp(12px,3vw,32px); }
.wmodal[hidden]{ display:none; }
.wmodal-back{ position:absolute; inset:0; background:rgba(18,18,18,.72); }
.wmodal-win{ position:relative; width:min(540px,100%); max-height:92vh; overflow:auto;
  border-radius:clamp(6px,.8vw,12px); box-shadow:var(--sh-paper);
  background-color:var(--paper); background-image:var(--fiber); background-blend-mode:multiply;
  padding:clamp(16px,2vw,26px); }
.wmodal-x{ position:absolute; top:6px; right:10px; z-index:2; border:0; background:none;
  font-size:32px; line-height:1; color:var(--ink-3); cursor:pointer; padding:6px 10px;
  font-family:'Manrope',Arial,sans-serif; }
.wmodal-x:hover{ color:var(--terra); }
/* iframe виджета сам сообщает свою высоту скрипту, ширину задаём мы */
.wmodal-body{ min-height:120px; }
.wmodal-body iframe{ width:100%; border:0; display:block; }

/* Кнопки тарифов — <button>, а не <a>. Собственную рамку браузера гасим
   через appearance, а НЕ через `button.cta{ border:0 }`: такое правило
   специфичнее, чем `.cta--ghost`, и стирает у призрачной кнопки её рамку —
   единственное, чем она видна в спокойном состоянии. */
button.cta{ -webkit-appearance:none; appearance:none; }