/* =============================================================
   ЛАБОРАТОРИЯ ВАЙБ-КОДИНГА — Zerocoder
   Стилевая рамка: figma-style.md («Главная 2.0», фрейм 82:294).
   Правила: Onest + Manrope, палитра лаванда/голубой на белом,
   радиусы 15/10/39/100, НОЛЬ теней, иерархия только заливками.
   Брейкпоинты: 1199 / 959 / 639 / 374.
   ============================================================= */

:root{
  /* --- палитра --- */
  --white:#FFFFFF;
  --soft:#ECF1F9;
  --ink:#131313;
  --ink2:#121212;
  --lav:#9B9BE9;
  --blue:#97BAFE;
  --grad2:#C3DEFF;
  --grad3:#83AAF4;
  --green:#4CEF8A;
  --line:rgba(19,19,19,.10);
  --dim:rgba(19,19,19,.62);
  --on-dark:rgba(255,255,255,.72);

  /* --- радиусы --- */
  --r-panel:15px;
  --r-card:10px;
  --r-cta:39px;
  --r-pill:100px;
  --r-full:900px;

  /* --- ритм --- */
  --gap:10px;
  --pad-card:15px;
  --gap-m:20px;
  --gap-l:30px;
  --pad-sec:clamp(20px,2.6vw,48px);
  /* R4: ритм МЕЖДУ секциями — 100px на десктопе (≥1560), 75px на мобилке (≤639),
     между ними линейно. Внутренние паддинги секций (--pad-sec) не трогаем. */
  --sec-gap:clamp(75px,2.71vw + 57.7px,100px);

  /* --- каркас --- */
  /* П3.0: рельса убрана, каркас — как на vibe-market/agents-efir:
     контейнер 1560 + поля 20, секции во всю ширину контейнера.
     Резина работает до 1560, выше 1920 включается zoom (script.js #9). */
  --container:1560px;
  --edge:20px;
  /* vh/vw через токены: внутри zoom (>1920) браузер НЕ пересчитывает
     вьюпортные единицы — JS подменяет их px-эквивалентом. */
  --vh:1vh;
  --vw:1vw;

  --font:'Onest',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --font-brand:'Manrope',system-ui,Arial,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ============ база ============ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:20px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:var(--font);font-size:16px;line-height:1.5;font-weight:400;
  /* clip, а не hidden: hidden делает body скролл-контейнером —
     ломаются якоря и sticky-рельса (грабли с freelance-guarantee) */
  overflow-x:clip;
}
img{max-width:100%;display:block;border:0}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,figcaption{margin:0;padding:0}
ul,ol{list-style:none}
button{font:inherit;color:inherit}

/* ============ типографика ============ */
.h1{
  font-weight:600;font-size:clamp(32px,4.6vw,80px);line-height:.98;
  letter-spacing:-.04em;text-wrap:balance;
}
/* П3.1: заголовок hero в акцентной плашке. Плашка по контенту (max-content),
   а не во всю карточку — справа остаётся воздух под лабораторную графику. */
/* R8: две строки — две отдельные плашки, каждая по ширине своего текста,
   между ними узкий зазор. Кегль вернулся к общему .h1 (4.6vw / 80px). */
.h1--plate{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(3px,.3vw,6px);
  max-width:100%;color:var(--ink);
}
.h1--plate > span{
  display:block;width:max-content;max-width:100%;white-space:nowrap;
  padding:clamp(9px,1.05vw,16px) clamp(18px,2.2vw,34px);
  border-radius:var(--r-panel);
  background:linear-gradient(103deg,var(--lav) 0%,var(--blue) 58%,var(--grad2) 100%);
}
.h2{
  font-weight:600;font-size:clamp(26px,3vw,52px);line-height:1.04;
  letter-spacing:-.03em;text-wrap:balance;
}
.h2 em{font-style:normal;color:var(--lav)}
.h3{font-weight:600;font-size:clamp(17px,1.55vw,26px);line-height:1.22;letter-spacing:-.01em}
.lead{font-size:clamp(16px,1.3vw,22px);line-height:1.4;font-weight:700}
.body{font-size:clamp(16px,1.12vw,19px);line-height:1.55}
.micro{font-size:clamp(13px,.85vw,14px);line-height:1.4;letter-spacing:.01em;color:var(--dim)}
.dim{opacity:.7}

/* ============ кнопки ============ */
.cta{display:flex;flex-wrap:wrap;gap:var(--gap)}
/* R9: кнопки крупнее — выше сам блок и кегль подписи */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:58px;padding:17px 36px;border-radius:var(--r-cta);
  font-size:clamp(16px,1.15vw,19px);font-weight:600;letter-spacing:.01em;text-decoration:none;
  transition:transform .25s var(--ease),background-color .25s var(--ease);
  border:0;cursor:pointer;
}
.btn--dark{background:var(--ink2);color:#fff}
/* контраст: белый на #9B9BE9 = 2.54:1 (фейл AA). Тёмный на той же лаванде = 7.31:1 */
.btn--lav{background:var(--lav);color:var(--ink)}
.btn--blue{background:var(--blue);color:#fff}
/* вторичная CTA: на белой карточке hero тёмная+тёмная спорили бы за внимание */
.btn--soft{background:var(--soft);color:var(--ink)}
@media (hover:hover){
  .btn:hover{transform:translateY(-2px)}
  .btn--lav:hover{background:#8b8be2}
  .btn--dark:hover{background:#2a2a2a}
  .btn--soft:hover{background:#dde5f2}
}

/* ============ каркас страницы ============ */
.wrap{width:100%;max-width:var(--container);margin:0 auto;padding:var(--gap) var(--edge)}
.col{display:flex;flex-direction:column;gap:var(--sec-gap);min-width:0}
/* R9: hidden у секции должен побеждать display из .sec */
.col > [hidden]{display:none}
/* hero и рейтинги читаются одним первым экраном — между ними отступ меньше общего */
.col > #rating{margin-top:calc(clamp(6px, 0.7vw, 12px) - var(--sec-gap))}

/* ============ секции ============ */
.sec{border-radius:var(--r-panel);padding:var(--pad-sec);position:relative}
.sec--soft{background:var(--soft)}
.sec--lav{background:var(--lav)}
.sec--dark{background:var(--ink2);color:#fff}
/* секция без собственной поверхности — контент лежит прямо на странице */
.sec--bare{background:none;outline:0;padding:0}
.sec--grad{background:radial-gradient(113% 194% at 0% 100%,var(--lav) 0%,var(--grad2) 49%,var(--grad3) 100%)}
.sec--dark .body,.sec--dark .micro{color:var(--on-dark)}
.sec > .h2{margin-bottom:var(--gap-l)}

/* липкая колонка внутри блока */
.split{display:grid;gap:var(--gap-m);align-items:start}
/* align-self:stretch обязателен: без него колонка высотой в контент,
   и position:sticky внутри неё физически некуда ехать */
.split__side{min-width:0;display:flex;flex-direction:column;gap:var(--gap-m);align-self:stretch}
.stick{position:sticky;top:calc(var(--gap) + 10px);display:flex;flex-direction:column;gap:var(--gap-m)}
.stack{display:flex;flex-direction:column;gap:var(--gap);min-width:0}

.split--how{grid-template-columns:minmax(0,0.86fr) minmax(0,1.14fr)}
.split--faq{grid-template-columns:minmax(0,0.5fr) minmax(0,1.5fr)}

/* ============ 1. HERO ============ */
.sec--hero{
  padding:var(--gap);
  background:radial-gradient(1333px 1247px at 0% 100%,var(--lav) 0%,var(--grad2) 49%,var(--grad3) 100%);
  display:grid;grid-template-columns:minmax(0,1fr) clamp(280px,28%,470px);
  gap:var(--gap);align-items:stretch;
  /* R6: overflow снят — нижняя пробирка выходит за границу hero и ложится
     поверх плашек рейтинга. z-index поднимает всю hero-секцию над #rating. */
  overflow:visible;z-index:2;
}
/* отступы карточки по шкале макета 10/15/20/30/40 (П2.3):
   паддинг 20→40, вертикальный ритм 20→30, сетка плиток 10 */
.hero__card{
  position:relative;overflow:visible;
  background:var(--white);border-radius:var(--r-panel);
  padding:clamp(20px,2.6vw,40px);
  display:flex;flex-direction:column;gap:clamp(20px,2vw,30px);min-width:0;
}
/* текст всегда над лабораторной графикой */
.hero__card > *:not(.lab){position:relative;z-index:1}
.hero__bul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
/* П3.0: логотип Зерокодера переехал из рельсы в шапку hero-карточки */
.hero__logo{display:inline-flex;align-items:center;width:max-content;text-decoration:none}
.hero__logo img{display:block;height:clamp(24px,1.9vw,32px);width:auto}
/* R11: логотип + серая плашка анонса — своя колонка с плотным ритмом,
   чтобы плашка не отъезжала на общий gap hero-карточки (до 30px). */
.hero__top{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(10px,1vw,14px)}
/* R12: плашка стала заметной — тёмная пилюля с живой зелёной точкой.
   Не спорит по цвету с лавандовым H1 и читается как «эфир скоро». */
.hero__next{
  display:inline-flex;align-items:center;gap:10px;max-width:100%;
  background:var(--ink);border-radius:var(--r-pill);
  padding:9px 18px;
  font-size:clamp(13px,.98vw,16px);font-weight:500;line-height:1.3;color:#fff;
  white-space:nowrap;overflow:hidden;
}
.hero__next::before{
  content:"";flex:0 0 auto;width:8px;height:8px;border-radius:50%;
  background:var(--green);animation:nextPulse 2.2s ease-out infinite;
}
@keyframes nextPulse{
  0%{box-shadow:0 0 0 0 rgba(76,239,138,.55)}
  70%{box-shadow:0 0 0 7px rgba(76,239,138,0)}
  100%{box-shadow:0 0 0 0 rgba(76,239,138,0)}
}
@media (prefers-reduced-motion:reduce){
  .hero__next::before{animation:none}
}
.hero__next a{color:inherit;text-decoration:none;min-width:0;overflow:hidden;text-overflow:ellipsis}
.hero__next a:hover{text-decoration:underline;text-underline-offset:3px}
.hero__next .nb{white-space:nowrap}
/* R11: приписка справа от hero-кнопки */
.cta__note{
  align-self:center;
  font-size:clamp(15px,1.05vw,17px);line-height:1.3;color:var(--dim);
}
.cta__note b{color:var(--ink);font-weight:700}

/* П3.1 / R4: лабораторная графика — 3D-иконки Лиды (WebP на прозрачном фоне).
   Абсолют внутри карточки. R6: overflow у карточки снят, поэтому графику
   держим в пределах её ширины — иначе будет горизонтальный скролл. */
.lab{position:absolute;z-index:0;height:auto;pointer-events:none;user-select:none}
/* окно с графиком — крупный акцент в свободном верхнем правом углу карточки */
.lab--a{top:24px;right:2%;width:clamp(84px,10.4vw,168px);animation:labFloatA 7s ease-in-out infinite}
/* R6: бутылёк — рядом, со сдвигом влево-вниз, чтобы читалась связка, а не одиночка */
.lab--b{top:calc(5% + 34px);right:19%;width:clamp(60px,7vw,116px);animation:labFloatB 9s ease-in-out infinite}
/* R6: пробирка снизу — крупный акцент, свисает с карточки на плашки рейтинга */
.lab--c{
  bottom:clamp(-48px,-3vw,-24px);right:5%;width:clamp(92px,10.4vw,160px);
  z-index:3;animation:labFloatC 8s ease-in-out infinite;
}

/* лёгкое парение: разные амплитуды и фазы, чтобы не качались синхронно */
@keyframes labFloatA{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-10px) rotate(-2.5deg)}
}
@keyframes labFloatB{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-14px) rotate(3deg)}
}
@keyframes labFloatC{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-8px) rotate(2deg)}
}
@media (prefers-reduced-motion:reduce){
  .lab{animation:none !important}
}
.plate-acc{
  background:linear-gradient(103deg,var(--lav) 0%,var(--blue) 62%,var(--grad2) 100%);
  color:var(--ink);border-radius:var(--r-panel);
  padding:clamp(14px,1.5vw,20px) clamp(16px,1.7vw,24px);
}
.tile{
  background:var(--soft);border-radius:var(--r-card);
  padding:clamp(15px,1.3vw,20px);font-size:clamp(15px,1.05vw,17px);line-height:1.45;
}
.tile b{font-weight:700}
/* П3.2: отступ до кнопки — тот же ритм, что между H1 и лидом (gap карточки),
   без прижима кнопки к низу карточки. */

.slot__cap{
  position:relative;z-index:1;align-self:flex-start;
  background:var(--white);border-radius:var(--r-pill);
  padding:7px 14px;font-size:12.5px;font-weight:600;letter-spacing:.01em;color:var(--ink);
}

/* ---- галерея резидентов в hero (П2.3): стрелки 30×30 + точки, как в макете ---- */
.gal{
  position:relative;min-width:0;border-radius:var(--r-panel);overflow:hidden;
  min-height:clamp(260px,34vw,560px);
}
.gal__view{position:absolute;inset:0}
/* П3.6: мягкое листание — кросс-фейд + лёгкий подъём.
   visibility переключаем с задержкой, иначе уходящий кадр пропадал мгновенно. */
.gal__item{
  position:absolute;inset:0;border-radius:inherit;
  background:rgba(255,255,255,.32);padding:var(--pad-card);
  display:flex;flex-direction:column;justify-content:flex-end;
  opacity:0;visibility:hidden;transform:translate3d(0,12px,0);
  transition:opacity .45s var(--ease),transform .45s var(--ease),visibility 0s linear .45s;
}
.gal__item.is-on{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .45s var(--ease),transform .45s var(--ease),visibility 0s;
}
@media (prefers-reduced-motion:reduce){
  .gal__item,.gal__item.is-on{transition:none}
}
/* фото резидента заполняет кадр; --op-y задан инлайном на каждом фото,
   чтобы линия глаз стояла одинаково у всех пяти */
.gal__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% var(--op-y,20%);border-radius:inherit;
}
.gal__arw{
  position:absolute;top:50%;translate:0 -50%;z-index:2;
  width:30px;height:30px;border:0;border-radius:50%;padding:0;cursor:pointer;
  background:rgba(255,255,255,.55);color:var(--ink);
  display:grid;place-items:center;
  transition:background-color .25s var(--ease);
}
.gal__arw--prev{left:10px}
.gal__arw--next{right:10px}
@media (hover:hover){.gal__arw:hover{background:var(--white)}}
.gal__arw:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.gal__dots{
  position:absolute;right:15px;bottom:15px;z-index:2;
  display:flex;gap:4px;align-items:center;
}
.gal__dot{
  width:8px;height:8px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.45);
  transition:background-color .25s var(--ease);
}
.gal__dot.is-on{background:var(--white)}
.gal__dot:focus-visible{outline:2px solid var(--white);outline-offset:2px}
/* без JS показываем первый кадр и прячем управление */
html:not(.js) .gal__arw,html:not(.js) .gal__dots{display:none}

/* ============ 2. РЕЙТИНГИ ============ */
#rating .rates-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
#rating .rate-card{
  background:var(--soft);border-radius:var(--r-card);
  padding:var(--pad-card);display:grid;gap:5px;justify-items:start;align-content:start;
}
#rating .rate-card img{max-height:28px;width:auto;object-fit:contain}
#rating .rate-card b{font-size:19px;font-weight:600;letter-spacing:-.02em}
#rating .rate-card span{font-size:13px;color:var(--dim)}

/* ============ 3. КАК УСТРОЕНА ============ */
.card{
  background:var(--white);border-radius:var(--r-card);
  padding:clamp(16px,1.6vw,24px);display:flex;gap:var(--gap-m);align-items:flex-start;
}
.card > div{display:flex;flex-direction:column;gap:8px;min-width:0}
/* П3.2: номер шага — заливная плашка, одинаково у всех пяти карточек */
.card .n{
  flex:0 0 auto;display:grid;place-items:center;
  width:clamp(42px,3.4vw,56px);height:clamp(42px,3.4vw,56px);
  border-radius:var(--r-card);
  background:linear-gradient(140deg,var(--lav) 0%,var(--blue) 100%);
  color:var(--ink);font-family:var(--font-brand);
  font-size:clamp(15px,1.2vw,19px);font-weight:700;letter-spacing:.02em;
}
/* П3.4: шаг 05 — акцентная градиентная карточка вместо чёрной */
.card--accent{
  background:radial-gradient(126% 168% at 0% 100%,var(--lav) 0%,var(--grad2) 56%,var(--blue) 100%);
  color:var(--ink);
}
.card--accent .n{background:var(--white);color:var(--ink)}
.card--accent .body{color:var(--ink)}
/* П3.2: два типа эфиров — цветные плитки, а не серые */
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);margin-top:4px}
.two .tile:first-child{background:rgba(155,155,233,.28)}
.two .tile:last-child{background:rgba(151,186,254,.30)}
.card--accent .two .tile{background:rgba(255,255,255,.55)}
.card .micro{margin-top:4px}

/* ============ 4. БИБЛИОТЕКА ============ */
/* П3.6: лента переехала внутрь карточки шага 04 — тянется во всю её ширину */
.marq{
  overflow:hidden;border-radius:var(--r-card);min-width:0;width:100%;max-width:100%;margin-top:6px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
}
.marq:focus-visible{outline:2px solid var(--lav);outline-offset:2px}
.marq__track{display:flex;gap:var(--gap);width:max-content;will-change:transform}
.js .marq__track{animation:marq 60s linear infinite}
@keyframes marq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.marq:hover .marq__track,.marq:focus-within .marq__track{animation-play-state:paused}
.b-card{
  position:relative;
  flex:0 0 auto;width:clamp(168px,15vw,210px);min-height:142px;
  border-radius:var(--r-card);background:var(--soft);
  padding:15px;display:flex;align-items:flex-end;
  font-size:clamp(15px,1.05vw,17px);font-weight:600;line-height:1.15;letter-spacing:-.02em;
  /* место под иконку в правом верхнем углу одинаково у ВСЕХ карточек — ряд не «прыгает» */
  padding-top:calc(8px + var(--b-ic) + 10px);
  --b-ic:clamp(58px,5.2vw,78px);
}
.b-card__ic{
  position:absolute;top:8px;right:8px;
  width:var(--b-ic);height:var(--b-ic);object-fit:contain;display:block;
}
.b-card:nth-child(4n+2){background:radial-gradient(140% 140% at 0% 100%,var(--lav) 0%,var(--grad2) 70%,var(--grad3) 100%);color:var(--ink)}
/* П3.4: тёмных плашек на странице много — четвёртая карточка ленты цветная, не чёрная */
.b-card:nth-child(4n+4){background:var(--blue);color:var(--ink)}

/* ============ 4. ВЛИЯЕШЬ НА КОНТЕНТ — бенто (П3.7) ============
   Другой приём подачи, чем у соседнего блока «Как устроена»:
   шапка во всю ширину + плитки разной ширины, липкой колонки нет. */
.infl-head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:var(--gap-m) clamp(24px,4vw,72px);align-items:start;margin-bottom:var(--gap-l);
}
.infl-intro{display:flex;flex-direction:column;gap:var(--gap-m);min-width:0}
/* П3.8: плашка непрозрачная (читается), её текст стоит на той же левой вертикали,
   что и абзац выше — горизонтальный padding компенсирован отрицательным margin. */
.focus-plate{
  --fp-pad:clamp(16px,1.4vw,20px);
  background:var(--white);border-left:4px solid var(--lav);
  border-radius:var(--r-card);
  padding:var(--fp-pad);
  padding-left:calc(var(--fp-pad) - 4px);
  margin-inline:calc(-1 * var(--fp-pad));
  font-size:clamp(15px,1.05vw,18px);line-height:1.5;
}
.focus-plate b{font-weight:700}

.bento{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--gap);align-items:stretch;
}
.bt{
  background:var(--white);border-radius:var(--r-card);
  padding:clamp(18px,1.8vw,28px);
  display:flex;flex-direction:column;gap:10px;min-width:0;
}
.bt__n{
  font-family:var(--font-brand);font-weight:700;
  font-size:clamp(26px,2.6vw,44px);line-height:1;letter-spacing:-.03em;
  color:var(--lav);
}
.bt .h3{letter-spacing:-.02em}
.bt--lav{background:var(--lav);color:var(--ink)}
.bt--lav .bt__n{color:var(--white)}
.bt--wide{grid-column:span 2}
.bt--grad{
  background:radial-gradient(120% 200% at 0% 100%,var(--blue) 0%,var(--grad2) 60%,var(--lav) 100%);
  color:var(--ink);
}
.bt--grad .bt__n{color:var(--white)}

/* ============ 6. РЕЗИДЕНТЫ — раскладка варианта A (П2.5) ============ */
/* R8: регалии снова скрыты под «+». Закрытые карточки не равняем — иначе
   под подписью зияет пустота до слова «Регалии». Равную высоту включаем только
   в раскрытом состоянии (.is-open ставит JS, он же синхронно открывает все). */
.r-grid{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gap);
  align-items:stretch;
}
/* 1fr нужен только когда карточки идут в два ряда (3 колонки) — равняет ряды между собой */
.r-grid.is-open{grid-auto-rows:1fr}
.r-card{
  position:relative;
  background:rgba(255,255,255,.06);border-radius:var(--r-card);
  padding:var(--pad-card);display:flex;flex-direction:column;gap:var(--gap);min-width:0;
}
.r-photo{
  width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% var(--op-y,20%);
  border-radius:var(--r-card);display:block;background:rgba(255,255,255,.05);
}
.r-card figcaption{display:flex;flex-direction:column;gap:5px}
.r-card .h3{color:#fff}
.r-card .micro{color:rgba(255,255,255,.62);line-height:1.4}
/* П2.13: регалии — нативный <details>, работает без JS и с клавиатуры.
   R4: на широких ширинах открыт по умолчанию и идёт сразу за подписью
   (margin-top:auto убран — иначе список отрывался бы в низ карточки). */
.r-reg{
  border-top:1px solid rgba(255,255,255,.14);padding-top:2px;
}
.r-reg > summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;
  gap:10px;min-height:40px;padding:8px 0 4px;
  font-size:13px;font-weight:600;line-height:1.3;color:#fff;
}
.r-reg > summary::-webkit-details-marker{display:none}
.r-reg > summary::marker{content:""}
.r-reg > summary:focus-visible{outline:2px solid var(--lav);outline-offset:2px;border-radius:4px}
.r-reg > summary i{
  flex:0 0 auto;font-style:normal;font-size:18px;line-height:1;color:var(--lav);
  transition:rotate .3s var(--ease);
}
.r-reg[open] > summary i{rotate:45deg}
.r-reg__in{display:flex;flex-direction:column;gap:10px;padding-bottom:4px}
.r-role{font-size:13px;line-height:1.4;font-weight:700;color:#fff}
.r-reg__in ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.r-reg__in li{
  position:relative;padding-left:14px;
  font-size:13px;line-height:1.45;color:var(--on-dark);
}
.r-reg__in li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:5px;height:5px;border-radius:50%;background:var(--lav);
}
.r-reg__in strong{color:#fff;font-weight:600}
/* R8: кнопка «Регалии +» работает на всех ширинах — предыдущее правило,
   прятавшее summary на десктопе, снято. */
.r-strip{
  margin-top:var(--gap-m);background:rgba(255,255,255,.06);
  border-radius:var(--r-card);padding:clamp(16px,1.8vw,24px);
  display:flex;align-items:center;justify-content:space-between;gap:var(--gap-m);flex-wrap:wrap;
}
.r-strip .body{color:var(--on-dark);max-width:70ch}
.r-strip .body b{color:#fff}
/* П3.9: плашка «и другие!» относится к списку резидентов — стоит у заголовка */
.r-head{display:flex;align-items:center;gap:var(--gap-m);flex-wrap:wrap;margin-bottom:var(--gap-l)}
.badge{
  background:var(--lav);color:var(--ink);border-radius:var(--r-pill);
  padding:10px 20px;font-size:clamp(14px,1vw,16px);font-weight:600;white-space:nowrap;
}

/* ============ 6. ПОЧЕМУ ЛАБОРАТОРИЯ — карточки (R8) ============
   Было: строки во всю ширину — короткий текст растягивался на 1500px и мельчал.
   Стало: сетка белых карточек 3×2, номер сверху, текст в комфортной колонке. */
.why-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--gap-m) var(--gap-l);flex-wrap:wrap;margin-bottom:var(--gap-l);
}
/* R10: заголовок «Почему лаборатория, а не курс» держим в одну строку.
   Ниже 960px переносим как обычно — там строка физически не влезает. */
.why-head .h2{max-width:none}
@media (min-width:960px){.why-head .h2{white-space:nowrap}}
.why-rows{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--gap-m);align-items:stretch;
}
.why-rows li{
  display:flex;flex-direction:column;gap:12px;min-width:0;
  background:var(--white);border-radius:var(--r-card);
  padding:clamp(20px,1.8vw,32px);
}
.why-rows i{
  font-style:normal;font-family:var(--font-brand);font-weight:700;
  font-size:clamp(28px,2.4vw,44px);line-height:.9;letter-spacing:-.04em;
  color:var(--lav);
}
.why-rows p{font-size:clamp(16px,1.15vw,20px);line-height:1.45}
.why-rows b{font-weight:700;display:block;margin-bottom:4px}

/* ============ 7. ПЕРВЫЙ ЭФИР — R8: светлый и компактный ============
   Было: тёмная секция во весь экран, мелкий текст на чёрном, много воздуха.
   Стало: светлый фон секции, две колонки (программа + «а ещё»),
   кегль поднят, вертикальные отступы срезаны примерно вдвое. */
#efir .h2 em{color:var(--lav);font-style:normal}
#efir{padding-block:clamp(24px,2.6vw,44px)}

/* R4: слева подзаголовок + описание, справа карточка резидента — в одну линию
   по верху (align-items:start), а не отдельной строкой под текстом. */
.ef-lead{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);
  gap:var(--gap-m) clamp(24px,3.6vw,64px);align-items:start;
  margin-top:clamp(6px,.8vw,12px);margin-bottom:clamp(20px,2vw,30px);
}
/* R23: ограничение ширины снято с колонки и перенесено на абзацы (.ef-intro,
   .ef-lead .body). Раньше 70ch не мешали: заголовок эфира шёл в nowrap и просто
   выходил за эту рамку. Без nowrap колонка начала ломать название на две строки
   там, где до правого края секции ещё половина экрана. */
.ef-lead__txt{
  display:flex;flex-direction:column;gap:clamp(10px,1vw,14px);
  min-width:0;
}
/* R11: название эфира держим одной строкой на всех экранах — кегль привязан к vw,
   поэтому на узких он сжимается, а не переносится.
   R23: nowrap снят. Названия теперь подставляет скрипт автосмены, и длину заранее
   никто не контролирует: капсовый заголовок вроде «А ЧТО БУДЕТ С ПРИБЫЛЬЮ...»
   при nowrap вылезал бы за контейнер и давал горизонтальный скролл. Короткие
   названия и без nowrap остаются в одну строку, balance делит длинные ровно. */
.ef-title{
  font-size:min(clamp(20px,2.15vw,34px),4.2vw);line-height:1.1;letter-spacing:-.03em;color:var(--ink);
  text-wrap:balance;
}
/* R23: строка-подводка под названием эфира. */
.ef-intro{
  margin-top:clamp(10px,1vw,14px);max-width:64ch;
  font-size:clamp(16px,1.1vw,19px);line-height:1.45;color:var(--dim);font-style:italic;
}
.ef-lead .body{color:var(--dim);max-width:64ch;font-size:clamp(18px,1.3vw,22px)}
/* П2.15: подпись справа от фото. П3.11: аватар мелкий.
   R4: колонка справа, ширина ограничена — иначе съедает место у описания. */
.ef-who{
  display:flex;align-items:center;gap:14px;margin-top:0;
  width:max-content;max-width:min(100%,340px);justify-self:end;
}
/* R4: «Резидент» возвращён — мелкая подпись роли над именем */
.ef-who__rl{
  font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:#6b6bd4;
}
.ef-who__img{
  flex:0 0 auto;width:clamp(56px,4.4vw,72px);height:clamp(56px,4.4vw,72px);
  border-radius:50%;object-fit:cover;object-position:50% var(--op-y,20%);display:block;
}
.ef-who__txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.ef-who__nm{font-size:clamp(16px,1.15vw,19px);font-weight:600;color:var(--ink);letter-spacing:-.01em}
.ef-who .micro{color:var(--dim);max-width:44ch}

/* R8: программа и «а ещё» — белые карточки вместо линий на чёрном */
.ef-prog,.ef-plus{
  display:flex;flex-direction:column;gap:6px;
  background:var(--white);border-radius:var(--r-card);
  padding:clamp(20px,2vw,32px);margin-bottom:var(--gap-m);
}
.ef-prog .lead,.ef-plus .lead{color:var(--ink);font-size:clamp(18px,1.45vw,24px)}
.ef-prog .body.dim{color:var(--dim);opacity:1;font-size:clamp(17px,1.2vw,20px)}
/* шкала программы: точки на общей линии, без выдуманных таймингов */
/* R23: число колонок вынесено в переменную — скрипт автосмены ставит --st-cols,
   если у эфира не четыре пункта. Медиазапросы ниже переопределяют всё свойство
   целиком, поэтому на планшете и мобилке колонки остаются своими. */
.ef-steps{display:grid;grid-template-columns:repeat(var(--st-cols,4),minmax(0,1fr));gap:var(--gap-m);margin-top:clamp(16px,1.6vw,24px);position:relative}
.ef-steps::before{content:"";position:absolute;left:0;right:0;top:7px;height:2px;background:var(--line)}
.st{position:relative;padding-top:28px;padding-right:var(--gap-m)}
.st::before{
  content:"";position:absolute;left:0;top:0;width:16px;height:16px;border-radius:50%;
  background:var(--lav);outline:4px solid var(--white);
}
.st__n{
  display:block;margin-bottom:6px;
  font-family:var(--font-brand);font-weight:700;font-size:13px;
  letter-spacing:.12em;color:#6b6bd4;
}
/* R12: у шагов программы появился заголовок — текст ниже уходит во второй уровень */
.st__t{display:block;margin-bottom:6px;font-size:clamp(18px,1.2vw,21px);line-height:1.25;font-weight:700;color:var(--ink)}
.st p{font-size:clamp(15px,1.02vw,17px);line-height:1.45;color:var(--dim)}
/* R23: у части эфиров пункты программы — одна строка без заголовка. Тогда текст
   пункта и есть заголовок: кегль крупнее, цвет основной, иначе шаг читается
   заметно слабее номера над ним. */
.ef-steps--plain .st p{font-size:clamp(16px,1.15vw,19px);line-height:1.4;color:var(--ink)}
.ef-n{counter-reset:efn;display:flex;flex-direction:column;gap:12px;margin-top:12px}
.ef-n li{
  counter-increment:efn;position:relative;padding-left:44px;
  font-size:clamp(18px,1.3vw,22px);line-height:1.45;color:var(--ink);
}
.ef-n li::before{
  content:counter(efn);position:absolute;left:0;top:-1px;
  width:30px;height:30px;border-radius:50%;background:var(--lav);
  display:grid;place-items:center;font-size:14px;font-weight:700;color:var(--ink);
}
.ef-plus{display:flex}
/* R11: артефакт эфира — смысловой пик блока, светлая плашка внутри белой карточки */
.ef-art{
  margin-top:clamp(12px,1.2vw,18px);
  background:var(--soft);border-radius:var(--r-card);
  padding:clamp(16px,1.6vw,24px);
  font-size:clamp(18px,1.3vw,22px);line-height:1.4;color:var(--ink);font-weight:600;
}
.ef-local{margin-top:clamp(10px,1vw,14px);font-size:clamp(16px,1.1vw,18px);color:var(--dim);opacity:1}
.ef-who-for{margin-top:clamp(12px,1.2vw,16px);font-size:clamp(16px,1.1vw,18px);font-style:italic}
.ef-foot{display:flex;justify-content:flex-start}

/* ============ 9. ТАРИФЫ — R8: две равные карточки 50/50 ============
   Сетка 1fr/1fr, внутри карточки колонка: шапка → список → цена → CTA.
   Список тянется (flex:1), поэтому цена и кнопка стоят на одной линии
   в обеих карточках при разной длине списков. Теней нет — только заливки. */
.pv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-m);align-items:stretch}
.pv-box{
  border-radius:var(--r-panel);
  padding:clamp(24px,3.4vw,48px);
  display:flex;flex-direction:column;gap:var(--gap-l);
}
.pv-box--main{background:var(--ink2);color:#fff}
.pv-box--try{background:var(--white);color:var(--ink)}
.pv-info{display:flex;flex-direction:column;gap:12px}
.pv-info .h3{max-width:20ch;font-size:clamp(18px,2vw,28px);line-height:1.15}
.pv-box--main .pv-info .h3{color:#fff}
/* список состава тарифа */
.pv-list{display:flex;flex-direction:column;gap:12px;flex:1 1 auto}
.pv-list li{
  position:relative;padding-left:28px;
  font-size:clamp(14px,1.05vw,17px);line-height:1.4;
}
.pv-list li::before{
  content:"";position:absolute;left:0;top:.5em;
  width:14px;height:2px;border-radius:2px;background:var(--lav);
}
.pv-box--main .pv-list li{color:var(--on-dark)}
/* в «Попробовать» пунктов мало — список не тянем, иначе дыра посреди карточки */
.pv-box--try .pv-list{flex:0 0 auto}
.pv-box--try .pv-list li{color:var(--dim)}
.pv-box--try .pv-list li::before{background:var(--ink)}
.pv-price{display:flex;flex-direction:column;align-items:flex-start;gap:12px;text-align:left;margin-top:auto}
.pv-box > .btn{align-self:start}
.pv-lb{
  font-family:var(--font-brand);font-weight:700;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55);
}
.pv-box--try .pv-lb{color:var(--dim)}
.pv-old{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.pv-old s{
  font-weight:400;font-size:clamp(13px,1.4vw,18px);line-height:1.2;
  color:rgba(255,255,255,.52);text-decoration-thickness:1px;
}
.pv-now{
  font-weight:600;line-height:.9;letter-spacing:-.045em;color:#fff;
  white-space:nowrap;font-size:clamp(34px,4.4vw,64px);
}
.pv-box--try .pv-now{color:var(--ink)}
.pv-now i{font-style:normal;font-size:.4em;letter-spacing:-.02em;font-weight:500;opacity:.62}
/* «/один эфир» длиннее «/мес» — на узких карточках уводим на свою строку */
.pv-box--try .pv-now i{font-size:.3em;white-space:nowrap}
.pv-stk{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--lav);color:var(--ink);border-radius:var(--r-pill);
  font-family:var(--font-brand);font-weight:700;letter-spacing:.06em;
  font-size:13px;line-height:1;padding:9px 14px;min-height:32px;
  white-space:nowrap;
}
.pv-cta{min-height:58px;padding-left:32px;padding-right:32px}

/* R14: скользящий дедлайн акции — наклейка с датой и отсчёт в одну строку */
.pv-dl{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pv-timer{
  font-family:var(--font-brand);font-weight:700;font-size:clamp(13px,1vw,15px);
  letter-spacing:.04em;line-height:1;color:rgba(255,255,255,.72);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.pv-box--try .pv-timer{color:var(--dim)}


/* ============ 10. ДЛЯ КОГО ============ */
/* R11: заголовок и плашка выровнены по верху. Отрицательный margin у плашки
   гасит её верхний паддинг — по одной линии встают сами тексты, а не коробки. */
.aud-head{
  display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;
  column-gap:var(--gap-l);
  /* row-gap компенсирует отрицательный margin плашки: когда она переносится
     под заголовок, между ними остаётся обычные 30px */
  row-gap:calc(var(--gap-l) + clamp(14px,1.4vw,20px));
  margin-bottom:var(--gap-l);
}
.aud-fin{
  max-width:52ch;font-size:clamp(15px,1.1vw,19px);line-height:1.45;font-weight:600;
  background:linear-gradient(103deg,var(--lav) 0%,var(--blue) 100%);color:var(--ink);
  border-radius:var(--r-panel);padding:clamp(14px,1.4vw,20px) clamp(16px,1.6vw,24px);
  margin-top:calc(clamp(14px,1.4vw,20px) * -1);
}
/* R10: колонки тянутся по высоте — CTA ложится в правый нижний угол секции */
.aud-split{display:grid;grid-template-columns:minmax(0,0.78fr) minmax(0,1.22fr);gap:var(--gap-m);align-items:stretch}
.aud-list{display:flex;flex-direction:column;gap:4px}
.aud-list button{
  /* R11: точка держится первой строки — у двухстрочных пунктов она стояла
     по центру кнопки, вместо того чтобы стоять рядом с первым словом */
  display:flex;align-items:flex-start;gap:9px;min-height:44px;
  padding:10px 14px;border-radius:var(--r-pill);background:transparent;border:0;
  text-align:left;font-size:clamp(15px,1.05vw,17px);font-weight:500;line-height:1.3;cursor:pointer;
  transition:background-color .25s var(--ease);
}
.aud-list button b{
  content:"";width:6px;height:6px;border-radius:50%;flex:0 0 auto;
  /* центр точки совпадает с центром первой строки: (line-height - размер) / 2 */
  margin-top:calc((1.3em - 6px) / 2);
  background:rgba(19,19,19,.22);transition:background-color .25s var(--ease),transform .25s var(--ease);
}
@media (hover:hover){.aud-list button:hover{background:rgba(255,255,255,.6)}}
.aud-list button.is-on{background:var(--white);font-weight:600}
.aud-list button.is-on b{background:var(--lav);transform:scale(1.3)}
.aud-panes{display:flex;flex-direction:column;gap:var(--gap-m);min-width:0}
.aud-pane{
  background:var(--white);border-radius:var(--r-card);
  padding:clamp(18px,2vw,28px);display:flex;flex-direction:column;gap:12px;
}
.js .aud-pane{display:none}
.js .aud-pane.is-on{display:flex}
/* CTA прижата к низу правой колонки и выровнена по правому краю */
.aud-panes > .cta{margin-top:auto;justify-content:flex-end}

/* ============ 12. КОНСУЛЬТАЦИЯ ============ */
.consult{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--gap-l);flex-wrap:wrap;
}
.consult > div:first-child{display:flex;flex-direction:column;gap:12px;max-width:64ch}
.sec--lav .h2,.sec--lav .lead{color:var(--ink)}

/* ============ 13. FAQ ============ */
.q-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);align-items:start}
.acc{display:flex;flex-direction:column;gap:var(--gap)}
.acc details{background:rgba(255,255,255,.06);border-radius:var(--r-card);overflow:hidden}
.acc summary{
  cursor:pointer;list-style:none;display:flex;align-items:flex-start;gap:12px;
  padding:18px 20px;min-height:44px;
  font-size:clamp(16px,1.1vw,18px);font-weight:600;line-height:1.35;color:#fff;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary::marker{content:""}
.acc summary:focus-visible{outline:2px solid var(--lav);outline-offset:-2px}
.q-num{flex:0 0 auto;font-size:13px;font-weight:600;color:var(--lav);letter-spacing:.06em;padding-top:3px}
.q-t{flex:1 1 auto;min-width:0}
.acc summary i{
  flex:0 0 auto;font-style:normal;font-size:20px;line-height:1;color:var(--lav);
  transition:rotate .3s var(--ease);
}
.acc details[open] summary i{rotate:45deg}
.acc .in{padding:0 18px 18px 48px}
.acc .in p{font-size:clamp(15px,1.05vw,17px);line-height:1.55;color:var(--on-dark)}

/* =============================================================
   СТАНДАРТНЫЙ БЛОК «О НАС» — пакет zerocoder-about,
   перекрашен под ленд: плоские белые карточки, ноль теней,
   радиусы 15/10, шрифт Onest, палитра макета. Структура 1:1.
   ============================================================= */
#about{
  --zc-ink:var(--ink);
  --zc-ink-soft:var(--dim);
  font-family:var(--font);color:var(--ink);
  background:var(--soft);border-radius:var(--r-panel);
  padding:var(--pad-sec) 0;
}
#about *,#about *::before,#about *::after{box-sizing:border-box}
#about h2,#about h3,#about h4,#about p,#about ul,#about b{margin:0;padding:0}
#about img{max-width:100%;display:block;border:0}
#about mark{background:var(--lav);color:var(--ink);border-radius:4px;padding:0 3px}
#about .container{width:100%;max-width:100%;margin:0 auto;padding:0 var(--pad-sec)}

#about .gl{
  background:var(--white);border:0;border-radius:var(--r-panel);
  box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
}
#about .gl::after{content:none}

#about h2{
  font-size:clamp(23px,2.6vw,36px);line-height:1.05;letter-spacing:-.03em;font-weight:600;
  /* П2.8: ширина подобрана так, чтобы заголовок вставал в две строки */
  max-width:34ch;margin-bottom:var(--gap-l);text-wrap:balance;
}
#about .plate{
  display:inline-block;padding:0 12px 3px;margin:0 2px;border-radius:var(--r-card);
  background:var(--lav);color:var(--ink);box-shadow:none;animation:none;transform:none;
}
#about .about-sub{
  font-size:clamp(19px,2vw,28px);line-height:1.1;font-weight:600;letter-spacing:-.03em;
  margin:clamp(32px,4vw,56px) 0 var(--gap-m);
}
#about .about-bento{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
#about .about-bento--2{margin-top:var(--gap)}
#about .ab-card{padding:var(--gap-m)}
#about .ab-card h3,#about .research h3,#about .gov-card h3{
  font-size:clamp(16px,1.5vw,21px);font-weight:600;line-height:1.25;letter-spacing:-.02em;margin-bottom:12px;
}
#about .ab-card img{border-radius:var(--r-card)}
#about .about-stack{display:flex;flex-direction:column;gap:var(--gap)}
#about .stat-card{padding:var(--gap-m);flex:1;display:flex;align-items:center;gap:var(--gap-m)}
#about .stat-card__img{
  flex:0 0 auto;width:clamp(64px,5.5vw,88px);aspect-ratio:1;border-radius:var(--r-card);
  background:var(--soft);border:0;padding:6px;
}
#about .stat-card__img img{width:100%;height:100%;object-fit:contain;border-radius:inherit}
#about .stat-card h4{font-size:16px;font-weight:600;line-height:1.4}
#about .logo-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)}
/* П2.9: логотипам вузов — обводка */
#about .logo-tiles .tile{aspect-ratio:255/193;outline:1px solid var(--line);outline-offset:-1px}
#about .tile{
  background:var(--soft);border-radius:var(--r-card);overflow:hidden;padding:0;
  display:flex;align-items:center;justify-content:center;border:0;font-size:inherit;
}
#about .tile img{width:100%;height:100%;object-fit:cover}
#about .sk-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px}
#about .sk-head img{height:40px;width:auto}
#about .sk-docs{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
#about .sk-docs img{width:100%;border-radius:var(--r-card);cursor:zoom-in}
#about .research{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:var(--gap-m);padding:var(--gap-m);align-items:start}
#about .research img{border-radius:var(--r-card);width:100%;aspect-ratio:4/3;object-fit:cover}
#about .research h3{color:var(--ink)}
#about .research p{font-size:14.5px;line-height:1.6;color:var(--dim)}
#about .biz-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:var(--gap)}
#about .biz-grid .tile{height:76px}
#about .gov-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:stretch}
#about .gov-left{display:flex;flex-direction:column;gap:var(--gap)}
#about .gov-card{padding:var(--gap-m);flex:1}
#about .gov-card p{font-size:15px;line-height:1.55;color:var(--dim);margin-bottom:10px}
#about .gov-card ul{padding-left:18px;font-size:14.5px;line-height:1.6;color:var(--dim);list-style:disc}
#about .gov-card .cols{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--gap-m)}
#about .carousel{position:relative;border-radius:var(--r-panel);overflow:hidden;min-height:300px;padding:0}
#about .carousel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s}
#about .carousel img.on{opacity:1}
#about .car-btn{
  position:absolute;bottom:14px;width:44px;height:44px;border-radius:50%;border:0;
  background:rgba(19,19,19,.72);color:#fff;font-size:17px;cursor:pointer;z-index:2;
  font-family:inherit;padding:0;
}
#about .car-btn.prev{right:66px}
#about .car-btn.next{right:14px}
/* 6 логотипов: 6 / 3 / 2 в ряд — ряды всегда полные */
#about .pub-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--gap)}
#about .pub-grid .tile{
  height:auto;min-height:78px;padding:14px 16px;
  background:var(--white);border-radius:var(--r-panel);
  outline:1px solid var(--line);outline-offset:-1px;
  transition:transform .25s var(--ease),outline-color .25s var(--ease);
}
/* логотип занимает почти всю плитку, но вписывается целиком:
   contain по обеим осям выравнивает разные пропорции без растяжки */
#about .pub-grid .tile img{
  width:100%;height:auto;max-height:50px;
  object-fit:contain;padding:0;margin:0 auto;
}
@media (hover:hover){
  #about .pub-grid .tile:hover{transform:translateY(-2px);outline-color:var(--lav)}
}
#about .awards-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);margin-bottom:var(--gap)}
#about .awards-grid img{
  width:100%;aspect-ratio:275/150;object-fit:cover;border-radius:var(--r-card);
  background:var(--white);border:0;
}
#about .rates-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
#about .rate-card{padding:var(--pad-card);display:grid;gap:5px;justify-items:start;background:var(--white);border-radius:var(--r-card)}
#about .rate-card img{max-height:28px;width:auto;object-fit:contain}
#about .rate-card b{font-size:19px;font-weight:600;letter-spacing:-.02em}
#about .rate-card span{font-size:13px;color:var(--dim)}
#about .lightbox{
  position:fixed;inset:0;z-index:1300;background:rgba(4,8,16,.8);
  display:none;align-items:center;justify-content:center;padding:30px;cursor:zoom-out;
}
#about .lightbox.on{display:flex}
#about .lightbox img{max-height:calc(var(--vh) * 92);max-width:calc(var(--vw) * 92);border-radius:var(--r-card)}

/* =============================================================
   СТАНДАРТНЫЙ БЛОК «ГЛОССАРИЙ» — пакет zerocoder-glossary.
   Структура 1:1, меняются только токены и раскладка списка
   (шире и компактнее — решение Лиды §14).
   ============================================================= */
#glossary{padding:0}
#glossary .container{width:100%;max-width:100%;margin:0;padding:0}
.acc--glossary{
  --gl-card:var(--soft);
  --gl-border:0;
  --gl-blur:none;
  --gl-shadow:none;
  --gl-radius:var(--r-panel);
  --gl-line:var(--line);
  --gl-text:var(--ink);
  --gl-term:var(--ink);
  --gl-def:var(--dim);
  --gl-plus:var(--lav);
  --gl-font:var(--font);
  --gl-font-term:var(--font);
  --gl-ease:var(--ease);

  border-radius:var(--gl-radius);overflow:hidden;
  background:var(--gl-card);border:var(--gl-border);box-shadow:var(--gl-shadow);
  backdrop-filter:var(--gl-blur);-webkit-backdrop-filter:var(--gl-blur);
  font-family:var(--gl-font);
}
.acc--glossary summary{
  cursor:pointer;list-style:none;
  padding:var(--gap-m) var(--pad-sec);min-height:44px;
  font-size:clamp(18px,1.7vw,24px);font-weight:600;letter-spacing:-.03em;
  color:var(--gl-text);position:relative;
}
.acc--glossary summary::-webkit-details-marker{display:none}
.acc--glossary summary::marker{content:""}
.acc--glossary summary:focus-visible{outline:2px solid var(--gl-plus);outline-offset:-2px}
.acc--glossary summary::after{
  content:'+';position:absolute;right:var(--pad-sec);top:50%;translate:0 -50%;
  font-family:var(--gl-font);font-size:26px;line-height:1;color:var(--gl-plus);
  transition:rotate .3s var(--gl-ease);
}
.acc--glossary[open] summary::after{rotate:45deg}
/* П2.10: тоньше по высоте — 4 колонки, сжатый ритм строк */
.glossary__terms{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0 var(--gap-m);padding:0 var(--pad-sec) var(--gap-m);margin:0;
}
.glossary__term{padding:10px 0;border-top:1px solid var(--gl-line)}
.glossary__term dt{font-family:var(--gl-font);font-weight:600;font-size:16px;color:var(--gl-term);margin-bottom:2px;letter-spacing:-.01em}
.glossary__term dd{font-size:14.5px;line-height:1.5;color:var(--gl-def);margin:0}

/* =============================================================
   СТАНДАРТНЫЙ ПОДВАЛ — пакет zerocoder-footer,
   перекрашен под ленд (тёмный #121212, акцент лавандовый).
   ============================================================= */
.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;
  --zc-accent:var(--lav);--zc-easing:var(--ease);
  background:var(--ink2);color:rgba(255,255,255,.7);
  padding:var(--zc-space-9) 0 var(--zc-space-6);
  font-size:15px;font-family:var(--font);
  margin-top:var(--gap);
}
.footer__container{
  max-width:var(--container);margin:0 auto;
  /* поля = поля .wrap + внутренний паддинг секции → колонки подвала
     стоят на той же вертикали, что контент секций выше */
  padding:0 calc(var(--edge) + var(--pad-sec));
}
.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,.08);
}
.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,.05);border-radius:var(--r-card);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,.45);margin:0 0 var(--zc-space-4);font-weight:500}
.footer__col ul{list-style:none;padding:0;margin:0;display:grid;gap:var(--zc-space-3)}
.footer__col a{color:#fff;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:22px;font-weight:600;color:#fff;
  letter-spacing:-.02em;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)}
.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)}
.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__legal{display:flex;gap:var(--zc-space-7);flex-wrap:wrap}

/* =============================================================
   REVEAL по скроллу (только при .js)
   ============================================================= */
.js .rv{opacity:0;transform:translateY(16px)}
.js .rv.is-in{
  opacity:1;transform:none;
  transition:opacity .6s var(--ease) var(--rvd,0s),transform .6s var(--ease) var(--rvd,0s);
}
.js .rv.is-now{opacity:1;transform:none;transition:none}

/* =============================================================
   АДАПТИВ
   ============================================================= */

/* ---------- ≤1199: рельса → горизонтальная лента ---------- */
@media (max-width:1199px){
  .split--how,.split--faq{grid-template-columns:minmax(0,1fr)}
  .stick{position:static}
  .infl-head{grid-template-columns:minmax(0,1fr)}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bt--wide{grid-column:span 2}
  .sec--hero{grid-template-columns:minmax(0,1fr)}
  /* галерея перестаёт быть широкой полосой: портрет в широком кадре
     срезался бы по глаза — держим карточку вертикальной и по центру */
  .gal{
    min-height:0;height:clamp(300px,40vw,400px);
    width:min(100%,clamp(240px,30vw,300px));margin-inline:auto;
  }
  .r-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ef-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ef-steps::before{display:none}
  .aud-split{grid-template-columns:minmax(0,1fr)}
  .aud-list{flex-direction:row;flex-wrap:wrap}
  .aud-list button{background:var(--white)}
  #about .biz-grid{grid-template-columns:repeat(4,1fr)}
  #about .pub-grid{grid-template-columns:repeat(3,1fr)}
  .glossary__terms{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__top{gap:var(--zc-space-6)}
}

/* ---------- ≤959: вертикальный планшет ---------- */
@media (max-width:959px){
  /* R4: hero-карточка тут уже во всю ширину — места хватает на все три иконки,
     но масштаб мельче: vw считается от полной ширины окна, а не от колонки */
  .lab--a{width:clamp(72px,10vw,104px);top:18px;right:3%}
  .lab--b{width:clamp(50px,6.6vw,74px);top:calc(9% + 26px);right:15%}
  .lab--c{width:clamp(86px,10vw,132px);bottom:clamp(-38px,-2.6vw,-18px);right:3%}
  #rating .rates-grid{grid-template-columns:repeat(2,1fr)}
  .q-cols{grid-template-columns:minmax(0,1fr)}
  .two{grid-template-columns:minmax(0,1fr)}
  /* R8: карточки «почему» — две в ряд на планшете */
  .why-rows{grid-template-columns:repeat(2,minmax(0,1fr))}
  .why-rows li{gap:8px}
  .why-rows i{font-size:clamp(24px,4.4vw,34px)}
  /* R4: карточка резидента уходит под описание — рядом ей уже тесно */
  .ef-lead{grid-template-columns:minmax(0,1fr)}
  .ef-who{justify-self:start}
  /* R8: два тарифа рядом жмутся уже с планшета — уводим в стопку */
  .pv-grid{grid-template-columns:minmax(0,1fr)}
  .pv-box{gap:var(--gap-m)}
  .pv-list{flex:0 0 auto}
  .pv-box > .btn{align-self:stretch;width:100%}
  #about .about-bento,#about .about-bento--2,#about .gov-grid{grid-template-columns:minmax(0,1fr)}
  #about .research{grid-template-columns:minmax(0,1fr)}
  #about .pub-grid{grid-template-columns:repeat(3,1fr)}
  #about .rates-grid{grid-template-columns:repeat(2,1fr)}
  #about .carousel{min-height:240px}
  .footer__top{grid-template-columns:1fr 1fr}
}

/* ---------- ≤639: мобилка ---------- */
@media (max-width:639px){
  /* карточка узкая: плашка заголовка почти во всю ширину, поэтому бутылёк
     уходит в самый угол над ней — иначе заголовок его перекрывает.
     Пробирка тут не помещается, окно с графиком садится в низ карточки. */
  .lab--a{top:6px;right:8px;width:clamp(38px,11vw,52px)}
  .lab--b{display:none}
  /* низ карточки занят кнопками во всю ширину — окно с графиком уходит наверх,
     в пару к бутыльку (bottom:auto обязателен, иначе останется правило ≤959) */
  .lab--c{top:12px;bottom:auto;right:60px;width:clamp(32px,9vw,42px)}
  .hero__bul{grid-template-columns:minmax(0,1fr)}
  /* R11: одной строкой плашка анонса тут уже не живёт — разрешаем перенос,
     иначе ellipsis съест название эфира */
  /* align-self:stretch обязателен: inline-flex внутри колонки не сжимается
     до ширины карточки из-за nowrap-спана и вылезает за её правый край */
  .hero__next{
    align-self:stretch;align-items:flex-start;white-space:normal;overflow:visible;
    border-radius:var(--r-card);padding:8px 14px;
    /* R12: название эфира стало длиннее — переносим его и возвращаем читаемый кегль */
    font-size:clamp(12px,3.2vw,14px);line-height:1.35;
  }
  .hero__next .nb{white-space:normal}
  .hero__next::before{margin-top:5px}
  .hero__next a{overflow:visible;text-overflow:clip}
  /* R11: кнопка на мобилке во всю ширину — приписка встаёт под неё слева */
  .cta__note{align-self:flex-start}
  .ef-steps{grid-template-columns:minmax(0,1fr)}
  /* R12: длинное название эфира одной строкой на мобилке нечитаемо — переносим */
  .ef-title{white-space:normal;font-size:clamp(20px,5.4vw,26px);line-height:1.15}
  /* R8: карточки «почему» на мобилке — в колонку */
  .why-rows{grid-template-columns:minmax(0,1fr)}
  /* П2.13: на мобилке карточка резидента ложится горизонтально —
     фото слева, подпись справа, регалии раскрываются на всю ширину карточки.
     В две колонки список регалий вставал в 2–3 слова на строку. */
  /* R4: одна колонка + закрытые регалии — равнять высоты нечему, ряды по контенту */
  .r-grid{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;align-items:start}
  .r-card{
    display:grid;grid-template-columns:clamp(100px,22vw,150px) minmax(0,1fr);
    column-gap:var(--gap-m);row-gap:var(--gap);align-items:start;
  }
  /* на мобилке слот квадратный — карточка не растёт вхолостую под портрет 4:5 */
  .r-card > .r-photo{grid-column:1;grid-row:1;aspect-ratio:1}
  .r-card > figcaption{grid-column:2;grid-row:1;align-self:center}
  .r-card > .r-reg{grid-column:1 / -1;grid-row:2;padding-top:0}
  /* align-items:stretch обязателен: при flex-start колонка не сжимает ленту
     до ширины карточки и даёт горизонтальный overflow */
  .card{flex-direction:column;gap:12px;align-items:stretch}
  .bento{grid-template-columns:minmax(0,1fr)}
  .bt--wide{grid-column:span 1}
  .ef-who{align-items:flex-start;max-width:100%}
  /* R9: кнопки крупные — на узком экране режем боковые поля,
     иначе «ПОПРОБОВАТЬ БЕСПЛАТНО» ломается на две строки */
  .btn{width:100%;padding-left:18px;padding-right:18px;font-size:16px}
  .cta{width:100%}
  .consult{align-items:flex-start}
  .aud-head{align-items:flex-start}
  .gal{height:clamp(280px,78vw,330px);width:min(100%,clamp(210px,58vw,250px))}
  .b-card{width:clamp(160px,58vw,200px);min-height:150px}
  #about .biz-grid{grid-template-columns:repeat(2,1fr)}
  #about .pub-grid{grid-template-columns:repeat(2,1fr)}
  #about .sk-head{flex-direction:column}
  #about .gov-card .cols{grid-template-columns:minmax(0,1fr)}
  .glossary__terms{grid-template-columns:minmax(0,1fr)}
  .acc .in{padding:0 16px 16px 16px}
  .footer__top{grid-template-columns:minmax(0,1fr)}
  .footer{padding-top:var(--zc-space-7)}
  .pv-now{font-size:clamp(38px,13vw,56px)}
}

/* ---------- ≤374: узкие телефоны ---------- */
@media (max-width:374px){
  .tile{font-size:14px}
}

/* ---------- reduce motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .js .rv{opacity:1;transform:none}
  .js .marq__track{animation:none}
  .marq{overflow-x:auto;scroll-snap-type:x proximity}
  .b-card{scroll-snap-align:start}
  #about .carousel img{transition:none}
}

/* =============================================================
   МОДАЛКА С GC-ВИДЖЕТОМ ОПЛАТЫ
   Прячем visibility/opacity, а НЕ display:none — иначе виджет
   грузится с нулевой шириной и форма схлопывается.
   ============================================================= */
.gcm{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  padding:var(--gap);
  opacity:0;visibility:hidden;
  transition:opacity .3s var(--ease),visibility 0s linear .3s;
}
.gcm.is-open{opacity:1;visibility:visible;transition:opacity .3s var(--ease),visibility 0s}
.gcm__back{position:absolute;inset:0;background:rgba(19,19,19,.55)}
.gcm__win{
  position:relative;z-index:1;
  width:min(560px,100%);max-height:calc(var(--vh) * 100 - var(--gap) * 4);
  overflow:auto;-webkit-overflow-scrolling:touch;
  background:var(--white);border-radius:var(--r-panel);
  padding:clamp(20px,2.4vw,32px);
}
.gcm__x{
  position:absolute;top:10px;right:10px;z-index:2;
  width:36px;height:36px;padding:0;border:0;border-radius:50%;
  background:var(--soft);color:var(--ink);
  font-family:inherit;font-size:22px;line-height:1;cursor:pointer;
}
@media (hover:hover){.gcm__x:hover{background:#dde5f2}}
.gcm__x:focus-visible{outline:2px solid var(--lav);outline-offset:2px}
.gcm__body{min-height:120px;min-width:0}
.gcm__body img{max-width:100%;height:auto}
/* R8: две панели виджетов — неактивную не display:none (GC меряет нулевую ширину),
   а уводим из потока position:absolute с нулевой видимостью */
.gcm__pane{min-width:0}
.gcm__pane:not(.is-on){position:absolute;left:-9999px;top:0;width:min(560px,90vw);opacity:0;pointer-events:none}
/* лок скролла: скролл-контейнер страницы — html, не body */
html.gcm-lock{overflow:hidden}

/* ============ R13: EXIT-INTENT ПОПАП ============
   Отдельный лок (.exi-lock) от gcm-lock: попапы могут пересекаться —
   при клике по CTA этот закрывается, а GC-модалка в тот же тик открывается,
   и общий класс снялся бы уже после её открытия, разлочив скролл. */
.exi{
  position:fixed;inset:0;z-index:110;
  display:flex;align-items:center;justify-content:center;
  padding:var(--gap);
  opacity:0;visibility:hidden;
  transition:opacity .28s var(--ease),visibility 0s linear .28s;
}
.exi.is-open{opacity:1;visibility:visible;transition:opacity .28s var(--ease),visibility 0s}
.exi__back{position:absolute;inset:0;background:rgba(19,19,19,.55)}
.exi__win{
  position:relative;z-index:1;
  width:min(520px,100%);max-height:calc(var(--vh) * 100 - var(--gap) * 4);overflow:auto;
  background:var(--white);border-radius:var(--r-panel);
  padding:clamp(28px,3vw,44px);
  text-align:left;
  transform:translateY(14px) scale(.985);
  transition:transform .32s var(--ease);
}
.exi.is-open .exi__win{transform:none}
.exi__x{
  position:absolute;top:10px;right:10px;z-index:2;
  width:36px;height:36px;padding:0;border:0;border-radius:50%;
  background:var(--soft);color:var(--ink);
  font-family:inherit;font-size:22px;line-height:1;cursor:pointer;
}
@media (hover:hover){.exi__x:hover{background:#dde5f2}}
.exi__x:focus-visible{outline:2px solid var(--lav);outline-offset:2px}
.exi__kicker{
  display:inline-block;margin-bottom:14px;padding:6px 14px;border-radius:var(--r-pill);
  background:var(--lav);color:var(--ink);
  font-family:var(--font-brand);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.exi__t{
  font-size:clamp(28px,3vw,40px);line-height:1.05;letter-spacing:-.03em;color:var(--ink);
}
.exi__lead{
  margin-top:12px;font-size:clamp(17px,1.3vw,21px);line-height:1.4;color:var(--dim);
}
.exi__lead b{color:var(--ink);font-weight:700}
.exi__lead s{color:rgba(19,19,19,.45);text-decoration-thickness:1px}
.exi__cta{margin-top:clamp(20px,2vw,28px);width:100%}
html.exi-lock{overflow:hidden}
@media (prefers-reduced-motion:reduce){
  .exi,.exi.is-open,.exi__win,.exi.is-open .exi__win{transition:none}
}
@media (prefers-reduced-motion:reduce){
  .gcm,.gcm.is-open{transition:none}
}