/* ==========================================================================
   offline-test.css — лендинг «Пробное офлайн-тестирование NIS».
   Клон онлайн-лендинга (Tremor), перекрашенный в коричневую (cognac) палитру.
   Отличия: hero на градиенте (без фото), секция расписания, памятка
   «что взять с собой», модальное окно регистрации (вкладки Вход/Регистрация).
   Дополняет styles.css (.btn, .header, .container, .modal).
   ========================================================================== */

/* ---------- КОРИЧНЕВАЯ ПАЛИТРА: переопределяем бренд-токены styles.css ----------
   Всё, что в дизайн-системе завязано на var(--green/--dark), автоматически
   становится коричневым. Хардкод-зелёные rgba() в этом файле уже заменены. */
.oft{
  --green:      #81C440;   /* NIS зелёный — акцент/действия (кнопки, бейджи, галочки) */
  --green-dark: #6BA834;   /* тёмно-зелёный — текст/hover */
  --dark:       #33241A;   /* эспрессо (коричневый) — тёмные секции, hero */
  --dark-2:     #45311F;   /* эспрессо-2 */
  --brown-soft: #F6F0E8;   /* тёплая коричневая подложка */
  --brown-line: #EADFD2;   /* тёплая коричневая граница */
}

@property --v{syntax:'<number>';initial-value:0;inherits:true}

.ot{background:var(--bg);color:var(--content-emph);overflow-x:hidden}
/* плавный скролл по якорям навигации + отступ, чтобы секция вставала аккуратно
   под липкой шапкой (высота .header__inner = 78px + небольшой зазор) */
html{scroll-behavior:smooth}
.ot-block,.ot-hero{scroll-margin-top:94px}

/* ---------- Кнопки: крупный размер ---------- */
.btn--lg{padding:14px 26px;font-size:var(--text-title);border-radius:12px}
/* hero-кнопка "Как это работает" должна оставаться видимой (в styles.css .btn--ghost скрыт <=1280) */
.ot-hero__cta .btn--ghost{display:inline-flex}

/* Навигационные пункты без перехода: только hover-подсветка, без скролла */
.nav a.nav__static{cursor:pointer}

/* ---------- Mega-menu: кликабельные item'ы ---------- */
.nav-mega__item{transition:background .15s ease;border-radius:var(--r-md);padding:4px;margin:-4px}
.nav-mega__item:hover{background:var(--bg)}
.nav-mega__item:hover .nav-mega__text strong{color:var(--green-dark)}
.nav-mega__panel--narrow{width:380px}
.nav-mega__grid--one{grid-template-columns:1fr}

/* Выравниваем панель по краю триггера, а не по центру — иначе широкая
   панель у крайних пунктов вылезает за край экрана и обрезает иконки. */
.ot .nav-mega__panel{left:0;transform:translateX(0) translateY(8px)}
.ot .nav-mega:hover .nav-mega__panel{transform:translateX(0) translateY(0)}
.ot .nav-mega__arrow{left:34px;transform:rotate(45deg)}
/* узкие панели (правее в навигации) прижимаем к правому краю триггера */
.ot .nav-mega__panel--narrow{left:auto;right:0}
.ot .nav-mega__panel--narrow .nav-mega__arrow{left:auto;right:34px}
/* ...а панели в левой половине шапки — к левому краю (иначе широкая панель
   у второго-третьего пункта уезжает под логотип и за край экрана) */
.ot .nav-mega--left .nav-mega__panel--narrow{left:0;right:auto}
.ot .nav-mega--left .nav-mega__panel--narrow .nav-mega__arrow{left:34px;right:auto}
/* пункты меню — ссылки, а не текст */
.ot a.nav-mega__item{cursor:pointer}
/* активный раздел в шапке (страница внутри выпадающего меню) */
.nav-mega__trigger.is-current{color:var(--green)}

/* ==========================================================================
   TREMOR-КОМПОНЕНТЫ
   ========================================================================== */

/* Карточка */
.tr-card{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 12px 32px -16px rgba(16,24,40,.10);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}

/* Бейдж-чип */
.tr-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--text-label);font-weight:var(--w-semibold);letter-spacing:.06em;
  text-transform:uppercase;color:var(--green-dark);
  background:rgba(129,196,64,.12);border:1px solid rgba(129,196,64,.22);
  border-radius:999px;padding:6px 13px;line-height:1;
}
.tr-badge--lg{font-size:var(--text-sm);letter-spacing:.02em;text-transform:none;padding:8px 15px}
.tr-badge--soft{background:#F3F4F6;border-color:var(--line);color:var(--content)}
.tr-badge--onDark{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.28);color:#fff}

/* Дельта-метка */
.tr-delta{
  display:inline-flex;align-items:center;gap:4px;
  font-size:var(--text-label);font-weight:var(--w-semibold);
  border-radius:999px;padding:4px 10px;line-height:1;white-space:nowrap;
}
.tr-delta--up{background:rgba(129,196,64,.14);color:var(--green-dark)}
.tr-delta--soft{background:#F3F4F6;color:var(--content)}

/* Иконка в плашке */
.tr-ico{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:14px;
  background:var(--green);color:#fff;
  box-shadow:0 6px 16px -6px rgba(107,168,52,.7);
}
.tr-ico svg{width:24px;height:24px}
.tr-ico--soft{background:rgba(129,196,64,.12);color:var(--green-dark);box-shadow:none}

/* Узор: точечная сетка */
.tr-dotgrid{
  background-image:radial-gradient(circle,rgba(51,36,26,.10) 1.1px,transparent 1.1px);
  background-size:22px 22px;
}

/* Прогресс-бары */
.tr-barlist{list-style:none;display:flex;flex-direction:column;gap:14px;flex:1;min-width:0}
.tr-bar{display:grid;grid-template-columns:80px 1fr 42px;align-items:center;gap:12px}
.tr-bar__label{font-size:var(--text-sm);font-weight:var(--w-medium);color:var(--content-emph)}
.tr-bar__track{height:8px;border-radius:999px;background:#EEF1F4;overflow:hidden}
.tr-bar__track i{
  display:block;height:100%;width:calc(var(--v)*1%);border-radius:999px;
  background:linear-gradient(90deg,var(--green-dark),var(--green));
  transition:width 1s cubic-bezier(.22,.61,.36,1);
}
.tr-bar__val{font-size:var(--text-sm);font-weight:var(--w-semibold);color:var(--content-strong);text-align:right}
/* стартовое состояние для reveal-анимации */
[data-reveal] .tr-bar__track i{width:0}

/* Кольцо-донат */
.tr-ring{
  --v:0;flex:none;width:132px;height:132px;border-radius:50%;
  background:conic-gradient(var(--green) calc(var(--v)*1%),#EEF1F4 0);
  display:flex;align-items:center;justify-content:center;
  transition:--v 1s ease;
}
.tr-ring__hole{
  width:96px;height:96px;border-radius:50%;background:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  box-shadow:inset 0 0 0 1px var(--line);
}
.tr-ring__hole b{font-size:32px;font-weight:var(--w-bold);color:var(--content-strong);line-height:1;letter-spacing:-.02em}
.tr-ring__hole b span{font-size:16px;color:var(--green-dark)}
.tr-ring__hole small{font-size:var(--text-label);color:var(--content);text-align:center;line-height:1.15}

/* ==========================================================================
   СЕКЦИИ
   ========================================================================== */

/* Контент — центрированная колонка как на референсе (1200px), не во всю ширину.
   Переопределяет глобальный .container (max-width:1440px в styles.css) только для
   страницы online-test. Фоны секций (hero, финальный CTA) остаются full-bleed. */
.ot .container{max-width:1200px}
/* меню из четырёх блоков спокойно помещается в колонку 1200px */

.ot-block{margin-top:72px}
.ot-block:first-of-type{margin-top:72px}
.ot-block__head{text-align:center;max-width:640px;margin:0 auto 36px;display:flex;flex-direction:column;align-items:center;gap:14px}
.ot-block__head h2{font-size:var(--text-h2);font-weight:var(--w-bold)}
.ot-block__head p{font-size:var(--text-title);color:var(--content)}

/* ---------- HERO (градиент cognac, без фото) ---------- */
.ot-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--brown-line);
  background:linear-gradient(125deg,var(--dark) 0%,#5A3E24 55%,var(--green-dark) 100%)}
.ot-hero.tr-dotgrid{background-image:
  radial-gradient(circle,rgba(255,255,255,.06) 1.1px,transparent 1.1px),
  linear-gradient(125deg,var(--dark) 0%,#5A3E24 55%,var(--green-dark) 100%);
  background-size:24px 24px,100% 100%}
/* фото аудитории на фоне hero: тёмная растяжка слева — чтобы текст читался,
   справа фото открыто (там мальчик за партой) */
.ot-hero__inner{position:relative;
  background-image:linear-gradient(100deg,
    var(--dark) 0%, rgba(51,36,26,.94) 30%, rgba(51,36,26,.70) 48%,
    rgba(51,36,26,.34) 68%, rgba(51,36,26,.30) 100%),
    url("oft-hero.jpg");
  /* hero шире фото по пропорциям → cover масштабирует его по ширине и сдвиг в процентах
     ничего не даёт; двигаем фото вправо явным смещением в px (слой №2) */
  background-size:100% 100%,cover;
  background-position:center,calc(50% + 70px) center;
  background-repeat:no-repeat}
.ot-hero__wrap{width:100%}
.ot-hero__copy{position:relative;max-width:720px;padding:74px 0 78px}
.ot-hero__eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:22px;
  font-size:var(--text-sm);font-weight:var(--w-semibold);letter-spacing:.02em;color:#F3E7D8;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);border-radius:999px;padding:8px 15px}
.ot-hero__eyebrow b{color:#fff}
.ot-hero__title{font-size:clamp(32px,4.6vw,58px);line-height:1.05;letter-spacing:-.02em;font-weight:800;color:#fff}
.ot-hero__title .ot-accent{color:#E7C39A}
.ot-hero__subtitle{display:block;margin-top:14px;font-size:clamp(17px,2.1vw,26px);font-weight:var(--w-semibold);color:#F1E4D4;letter-spacing:-.01em}
.ot-hero__lead{font-size:clamp(15px,1.5vw,19px);line-height:1.55;color:rgba(255,255,255,.86);max-width:520px;margin:20px 0 28px}
.ot-hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px}

/* кнопки выбора класса (на тёмном hero) */
.ot-btn{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-family:var(--font);
  border:none;border-radius:14px;transition:.16s;white-space:nowrap}
.ot-btn--class{background:#fff;color:var(--green-dark);font-size:16px;font-weight:var(--w-bold);letter-spacing:-.01em;
  padding:10px 16px 10px 10px;border:1px solid transparent;box-shadow:0 16px 34px -18px rgba(0,0,0,.6)}
.ot-btn--class:hover{transform:translateY(-2px);box-shadow:0 24px 46px -18px rgba(0,0,0,.65)}
.ot-btn__ic{flex:none;width:36px;height:36px;border-radius:11px;background:var(--green);color:#fff;
  display:inline-flex;align-items:center;justify-content:center}
.ot-btn__ic svg{width:21px;height:21px}
.ot-btn__arrow{display:inline-flex;color:var(--content)}
.ot-btn__arrow svg{width:19px;height:19px}
.ot-btn--class:hover .ot-btn__arrow{color:var(--green-dark)}

/* мини-факты под кнопками hero */
.ot-hero__facts{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:30px}
.ot-hero__fact{display:inline-flex;align-items:center;gap:9px;color:#EFE3D4;font-size:var(--text-default);font-weight:var(--w-medium)}
.ot-hero__fact svg{width:18px;height:18px;color:#E7C39A;flex:none}

/* ручные переносы строк только на телефонах (<=720); на планшете/десктопе скрыты */
@media (min-width:721px){br.mbr{display:none}}

/* ---------- Мобильная шапка: бургер + выпадающее меню (только <=900) ---------- */

.ot-burger{
  display:none;flex:none;width:44px;height:44px;padding:0;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:#F3F4F6;border:1px solid var(--line);border-radius:12px;
}
.ot-burger span{display:block;width:20px;height:2px;border-radius:2px;background:var(--content-strong);transition:transform .2s ease,opacity .2s ease}
.ot-burger.is-active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.ot-burger.is-active span:nth-child(2){opacity:0}
.ot-burger.is-active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.ot-menu{
  position:absolute;top:100%;left:0;right:0;z-index:49;
  background:#fff;border-bottom:1px solid var(--line);
  box-shadow:0 20px 40px -24px rgba(16,24,40,.28);
  padding:12px 20px 20px;
}
.ot-menu[hidden]{display:none}
.ot-menu__nav{display:flex;flex-direction:column}
.ot-menu__nav a{
  padding:14px 4px;font-size:var(--text-title);font-weight:var(--w-medium);
  color:var(--content-emph);border-bottom:1px solid var(--line);cursor:pointer;
}
.ot-menu__nav a:hover{color:var(--green)}
.ot-menu__lang{padding-top:16px}
/* языковой переключатель внутри меню: показываем варианты РУС/ҚАЗ строкой-чипами */
.tm-select--menu{position:static}
.tm-select--menu .tm-select__trigger{display:none}
.tm-select--menu .tm-select__menu{display:flex;position:static;gap:10px;min-width:0;padding:0;border:none;box-shadow:none}
.tm-select--menu .tm-select__option{border:1px solid var(--line);border-radius:999px;padding:9px 20px;font-size:var(--text-default)}
.tm-select--menu .tm-select__option.is-selected{border-color:var(--green);background:rgba(129,196,64,.1)}
.tm-select--menu .tm-select__option.is-selected::after{display:none}

/* ---------- Что такое пробное тестирование ---------- */
.ot-intro{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ot-intro__card{padding:30px 26px;display:flex;flex-direction:column;gap:16px}
.ot-intro__card:hover{transform:translateY(-4px);border-color:rgba(129,196,64,.5);box-shadow:0 18px 36px -20px rgba(51,36,26,.4)}
.ot-intro__card h4{font-size:var(--text-title);font-weight:var(--w-semibold)}
.ot-intro__card p{font-size:var(--text-default);color:var(--content);line-height:1.55}

/* ---------- Шаги ---------- */
.ot-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.ot-step{position:relative;padding:26px 22px}
.ot-step:hover{transform:translateY(-4px);border-color:rgba(129,196,64,.5);box-shadow:0 18px 36px -20px rgba(51,36,26,.4)}
.ot-step__num{
  position:absolute;top:18px;right:20px;
  font-size:38px;font-weight:var(--w-bold);color:rgba(51,36,26,.08);line-height:1;
}
.ot-step .tr-ico{margin-bottom:18px}
.ot-step h4{font-size:var(--text-title);font-weight:var(--w-semibold);margin-bottom:8px}
.ot-step p{font-size:var(--text-sm);color:var(--content);line-height:1.5}
.ot-step--accent{background:linear-gradient(160deg,#fff,rgba(129,196,64,.08));border-color:rgba(129,196,64,.4)}

/* ---------- «Как проходит» — картинка слева, разделы справа ---------- */
.ot-how__panel{
  position:relative;overflow:hidden;background:#fff;
  border:1px solid var(--line);border-radius:24px;
  box-shadow:0 24px 60px -40px rgba(51,36,26,.35);
  display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
}
.ot-how__media{background:#fff url(how-people.jpg?v=1) no-repeat center center / cover;min-height:460px}
.ot-how__body{display:flex;flex-direction:column;justify-content:center;gap:24px;padding:44px 44px 44px 32px}
.ot-how__head{text-align:left;max-width:none;margin:0;align-items:flex-start}
.ot-how__head p{text-align:left}
.ot-how .ot-steps{grid-template-columns:repeat(2,1fr);gap:16px}

/* ---------- Почему это работает ---------- */
.ot-why{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.ot-why__card{display:flex;flex-direction:column;gap:14px;padding:26px}
.ot-why__card:hover{transform:translateY(-4px);border-color:rgba(129,196,64,.5);box-shadow:0 18px 36px -20px rgba(51,36,26,.4)}
.ot-why__card h4{font-size:var(--text-title);font-weight:var(--w-semibold)}
.ot-why__card p{font-size:var(--text-default);color:var(--content);line-height:1.55}
.ot-quote{
  grid-column:1 / -1;display:flex;gap:22px;align-items:flex-start;
  background:linear-gradient(120deg,var(--dark),var(--dark-2));
  border-radius:18px;padding:34px 38px;color:#fff;
}
.ot-quote__mark{font-size:80px;line-height:.7;font-weight:var(--w-bold);color:var(--green);font-family:Georgia,serif;flex:none}
.ot-quote__body p{font-size:var(--text-h3);line-height:1.5;font-weight:var(--w-medium);color:#fff;margin-bottom:14px}
.ot-quote__src{font-size:var(--text-sm);color:rgba(255,255,255,.8);line-height:1.5}

/* ---------- Отзывы (бегущие колонки) ---------- */
.ot-tst{
  display:flex;justify-content:center;gap:24px;max-height:600px;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);
}
.ot-tst__col{flex:1;max-width:360px}
.ot-tst__track{display:flex;flex-direction:column;gap:20px;animation:ot-tst-scroll var(--dur,40s) linear infinite}
/* пауза только при зажатой ЛКМ (класс ставит JS), не при наведении */
.ot-tst.is-held .ot-tst__track{animation-play-state:paused}
@keyframes ot-tst-scroll{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.ot-tst__card{padding:26px;display:flex;flex-direction:column;gap:18px}
.ot-tst__card blockquote{margin:0;font-size:var(--text-default);line-height:1.55;color:var(--content)}
.ot-tst__card figcaption{display:flex;align-items:center;gap:12px}
.ot-tst__card figcaption img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.ot-tst__card figcaption .ot-tst__ava{width:44px;height:44px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;background:#F3F4F6;border:1px solid var(--line);font-size:var(--text-sm);font-weight:var(--w-semibold);color:var(--content)}
.ot-tst__card figcaption span{display:flex;flex-direction:column;line-height:1.3}
.ot-tst__card figcaption b{font-weight:var(--w-semibold);font-size:var(--text-default)}
.ot-tst__card figcaption i{font-style:normal;font-size:var(--text-sm);color:var(--content)}
.ot-tst__col--md{display:none}
.ot-tst__col--lg{display:none}
@media(min-width:768px){.ot-tst__col--md{display:block}}
@media(min-width:1024px){.ot-tst__col--lg{display:block}}

/* ---------- Что получаете ---------- */
.ot-benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.ot-benefit{padding:26px 22px;display:flex;flex-direction:column;gap:14px}
.ot-benefit:hover{transform:translateY(-4px);border-color:rgba(129,196,64,.5);box-shadow:0 18px 36px -20px rgba(51,36,26,.4)}
.ot-benefit h4{font-size:var(--text-default);font-weight:var(--w-semibold)}
.ot-benefit p{font-size:var(--text-sm);color:var(--content);line-height:1.5}

/* ---------- Кому подходит ---------- */
.ot-audience-card{padding:40px}
.ot-audience-card__head{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;margin-bottom:28px}
.ot-audience-card__head h2{font-size:var(--text-h2);font-weight:var(--w-bold)}
.ot-audience{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.ot-audience li{
  display:flex;align-items:center;gap:14px;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:18px 20px;font-size:var(--text-title);font-weight:var(--w-medium);color:var(--content-strong);
}
.ot-check{
  flex:none;width:30px;height:30px;border-radius:50%;
  background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;
}
.ot-check svg{width:16px;height:16px}

/* ---------- KPI ---------- */
.ot-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tr-kpi{padding:30px 28px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.tr-kpi:hover{transform:translateY(-4px);border-color:rgba(129,196,64,.5);box-shadow:0 18px 36px -20px rgba(51,36,26,.4)}
.tr-kpi__label{font-size:var(--text-sm);color:var(--content)}
.tr-kpi__num{font-size:clamp(34px,3vw,44px);font-weight:var(--w-bold);color:var(--green-dark);letter-spacing:-.03em;line-height:1;white-space:nowrap}

/* ---------- FAQ ---------- */
.ot-accordion{display:flex;flex-direction:column;gap:12px;max-width:860px;margin:0 auto}
.ot-acc{overflow:hidden}
.ot-acc.is-open{border-color:rgba(129,196,64,.5)}
.ot-acc__head{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:none;border:none;cursor:pointer;text-align:left;padding:20px 24px;font-family:var(--font);
  font-size:var(--text-title);font-weight:var(--w-semibold);color:var(--content-strong);
}
.ot-acc__head:hover{color:var(--green-dark)}
.ot-acc__chevron{flex:none;color:var(--content);transition:transform .25s ease}
.ot-acc.is-open .ot-acc__chevron{transform:rotate(180deg);color:var(--green-dark)}
.ot-acc__body{max-height:0;overflow:hidden;transition:max-height .3s ease}
.ot-acc__body p{padding:0 24px 20px;font-size:var(--text-default);color:var(--content);line-height:1.6}

/* ---------- Финальный CTA ---------- */
.ot-final{position:relative;overflow:hidden;border-radius:24px;
  background:linear-gradient(125deg,var(--dark),var(--dark-2))}
.ot-final.tr-dotgrid{background-image:
  radial-gradient(circle,rgba(255,255,255,.07) 1.1px,transparent 1.1px),
  linear-gradient(125deg,var(--dark),var(--dark-2));
  background-size:22px 22px,100% 100%}
.ot-final__glow{position:absolute;bottom:-160px;left:-120px;width:480px;height:480px;border-radius:50%;
  background:radial-gradient(circle,rgba(129,196,64,.35),rgba(129,196,64,0) 70%);pointer-events:none}
.ot-final__inner{position:relative;text-align:center;padding:64px 40px;display:flex;flex-direction:column;align-items:center;gap:16px}
.ot-final__inner h2{color:#fff;font-size:36px;font-weight:var(--w-bold);line-height:1.15;max-width:680px}
.ot-final__inner p{color:rgba(255,255,255,.85);font-size:var(--text-title);max-width:520px}
.ot-final__inner .btn{margin-top:10px}

/* ---------- Footer ---------- */
.ot-footer{margin-top:72px;border-top:1px solid var(--line);background:#fff}
.ot-footer__inner{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:40px;padding:48px 40px;align-items:start;
}
.ot-footer__brand{max-width:340px}
.ot-footer__logo{height:44px;width:auto;margin-bottom:16px}
.ot-footer__tm{font-size:var(--text-sm);line-height:1.6;color:var(--content)}
/* нижняя строка футера: внутренние страницы + политика возврата мелким шрифтом */
.ot-footer__bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;
  padding:18px 40px 30px;border-top:1px solid var(--line);
}
.ot-footer__links{display:flex;flex-wrap:wrap;gap:10px 24px}
.ot-footer__links a{font-size:var(--text-sm);font-weight:var(--w-medium);color:var(--content-emph)}
.ot-footer__links a:hover{color:var(--green)}
.ot-footer__legal{margin-left:auto;font-size:var(--text-label);line-height:1.5}
.ot-footer__legal a{color:var(--content);text-decoration:underline;text-underline-offset:2px}
.ot-footer__legal a:hover{color:var(--green-dark)}

/* ссылка «Все вопросы и ответы» под аккордеоном FAQ на лендинге */
.ot-faq__more{margin-top:22px;text-align:center}
.ot-faq__more a{font-size:var(--text-default);font-weight:var(--w-semibold);color:var(--green-dark)}
.ot-faq__more a:hover{color:var(--green)}

/* ссылки «подробнее» под секциями лендинга */
.ot-more{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:24px}
.ot-more--center{justify-content:center}
.ot-more a{
  display:inline-flex;align-items:center;gap:7px;
  font-size:var(--text-default);font-weight:var(--w-semibold);color:var(--green-dark);
}
.ot-more a:hover{color:var(--green)}
.ot-more a::after{content:'→';font-weight:var(--w-medium)}
.ot-footer__h{
  font-size:var(--text-label);font-weight:var(--w-semibold);letter-spacing:.06em;
  text-transform:uppercase;color:var(--content-strong);margin-bottom:14px;
}
.ot-footer__text{font-size:var(--text-sm);line-height:1.6;color:var(--content-emph)}
.ot-footer__list,.ot-footer__social{list-style:none;display:flex;flex-direction:column;gap:10px}
.ot-footer__list li,.ot-footer__list a{font-size:var(--text-sm);color:var(--content-emph)}
.ot-footer__list a:hover{color:var(--green)}
.ot-footer__muted{color:var(--content);font-size:var(--text-label)}
.ot-footer__accent{color:var(--green);font-weight:var(--w-semibold)}
.ot-footer__accent:hover{color:var(--green-dark)}
.ot-footer__social a{
  display:inline-flex;align-items:center;gap:10px;
  font-size:var(--text-sm);color:var(--content-emph);
}
.ot-footer__social a:hover{color:var(--green)}
.ot-footer__social a:hover .ot-footer__ic{border-color:rgba(129,196,64,.35);background:rgba(129,196,64,.12);color:var(--green-dark)}
.ot-footer__ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;flex:0 0 32px;border-radius:9px;
  border:1px solid var(--line);background:var(--bg);color:var(--content-emph);
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1150px){
  .ot-hero__copy{max-width:44%}
  .ot-hero__lead{max-width:300px}
}
@media (max-width:900px){
  .ot-footer__bar{flex-direction:column;align-items:flex-start;padding:18px 20px 26px}
  .ot-footer__legal{margin-left:0}
  /* HERO (моб): тот же градиент, контент по центру, кнопки классов в ряд */
  .ot-hero__copy{max-width:none;text-align:center;padding:48px 0 52px;display:flex;flex-direction:column;align-items:center}
  .ot-hero__lead{margin-left:auto;margin-right:auto}
  .ot-hero__cta{flex-wrap:nowrap;justify-content:center;gap:12px;width:100%;max-width:420px}
  .ot-hero__cta .ot-btn{flex:1 1 0;min-width:0;justify-content:center;padding:11px 12px;gap:8px;font-size:15px}
  .ot-hero__cta .ot-btn__ic{width:30px;height:30px;border-radius:9px}
  .ot-hero__cta .ot-btn__ic svg{width:18px;height:18px}
  .ot-hero__facts{justify-content:center}
  /* шапка: навигация → бургер, языковой селектор уходит в меню */
  .nav{display:none}
  .header__actions .tm-select{display:none}
  .ot-burger{display:inline-flex}
  /* how: панель в одну колонку, картинка сверху баннером */
  .ot-how__panel{grid-template-columns:1fr}
  .ot-how__media{min-height:220px}
  .ot-how__body{padding:28px 24px}
  .ot-how .ot-steps{grid-template-columns:repeat(2,1fr)}
  .ot-steps{grid-template-columns:repeat(2,1fr)}
  .ot-intro{grid-template-columns:1fr}
  .ot-benefits{grid-template-columns:repeat(2,1fr)}
  .ot-kpis{grid-template-columns:1fr}
  .ot-footer__inner{grid-template-columns:1fr 1fr;gap:32px}
  .ot-footer__brand{grid-column:1 / -1;max-width:none}
}
@media (max-width:860px){
  /* компактный хедер, чтобы кнопка и язык помещались */
  .header__inner{gap:10px}
  .logo__img{height:38px}
  .header .header__actions .btn--primary{padding:10px 14px;font-size:var(--text-sm)}
}
@media (max-width:720px){
  .ot-block{margin-top:56px}
  .ot-why{grid-template-columns:1fr}
  .ot-quote{flex-direction:column;gap:8px;padding:26px 22px}
  .ot-quote__mark{font-size:54px}
  .ot-audience{grid-template-columns:1fr}
  .ot-audience li{font-size:var(--text-default)}
  .ot-audience-card{padding:26px 20px}
  .ot-block__head p{font-size:var(--text-default)}
  .ot-acc__head{font-size:var(--text-default)}
  .ot-final__inner{padding:44px 22px}
  .ot-final__inner h2{font-size:26px}
  /* порядок футера на мобильном: лого → соцсети → контакты → адрес → товарный знак */
  .ot-footer__inner{display:flex;flex-direction:column;gap:26px;padding:32px 20px}
  .ot-footer__brand{display:contents}   /* лого и ТЗ становятся самостоятельными для order */
  .ot-footer__logo{order:1;margin-bottom:0}
  .f-social{order:2}
  .f-contacts{order:3}
  .f-addr{order:4}
  .ot-footer__tm{order:5;max-width:none}
}
@media (max-width:640px){
  /* hero: кнопки классов на всю ширину */
  .ot-hero__lead{font-size:16px;margin:14px 0 22px}
  .ot-hero__cta{gap:10px}
  .ot-hero__cta .ot-btn{flex:1;justify-content:center;padding-left:14px;padding-right:14px}
}
@media (max-width:520px){
  .ot-steps{grid-template-columns:1fr}
  .ot-how .ot-steps{grid-template-columns:1fr}
  .ot-benefits{grid-template-columns:1fr}
  .ot-bar{grid-template-columns:70px 1fr 38px}
}

@media (prefers-reduced-motion:reduce){
  .tr-card,.ot-step,.ot-why__card,.ot-benefit,.tr-kpi{transition:none}
  .tr-bar__track i{transition:none}
  .ot-tst{max-height:none}
  .ot-tst__track{animation:none}
}

/* ==========================================================================
   OFFLINE-СПЕЦИФИКА: расписание, памятка, модальное окно регистрации
   ========================================================================== */

/* ---------- Полоска-баннер «по всему Казахстану» под hero ---------- */
.ot-strip{background:var(--dark-2);color:#F1E4D4}
.ot-strip__inner{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 40px;padding:16px 40px;text-align:center}
.ot-strip__item{display:inline-flex;align-items:center;gap:10px;font-size:var(--text-default);font-weight:var(--w-medium)}
.ot-strip__item svg{width:19px;height:19px;color:#E7C39A;flex:none}

/* ---------- Цена-пилюля ---------- */
.ot-price{display:inline-flex;align-items:baseline;gap:8px;
  background:rgba(129,196,64,.10);border:1px solid rgba(129,196,64,.22);border-radius:999px;
  padding:9px 18px;color:var(--green-dark);font-weight:var(--w-semibold)}
.ot-price b{font-size:var(--text-h3);font-weight:var(--w-bold);letter-spacing:-.01em}
.ot-price span{font-size:var(--text-sm);color:var(--content)}

/* ---------- Города и даты проведения ---------- */
.ot-cities__h2{font-size:var(--text-h2);font-weight:var(--w-bold);margin-bottom:22px}
.ot-cities__bar{display:flex;align-items:center;justify-content:space-between;gap:24px;
  flex-wrap:wrap;margin-bottom:22px}

/* два шага выбора: сначала класс, потом город (расписание у 5 и 6 классов разное) */
.ot-picksteps{display:flex;align-items:stretch;gap:14px;flex-wrap:wrap}
.ot-pickstep{display:flex;align-items:center;gap:14px;background:var(--card);
  border:1px solid var(--line);border-radius:16px;padding:12px 18px;transition:.16s}
.ot-pickstep__n{flex:none;width:26px;height:26px;border-radius:50%;
  background:var(--brown-soft);color:var(--content);font-size:13px;font-weight:var(--w-bold);
  display:inline-flex;align-items:center;justify-content:center;transition:.16s}
.ot-pickstep.is-done{border-color:rgba(129,196,64,.45)}
.ot-pickstep.is-done .ot-pickstep__n{background:var(--green);color:#fff}
.ot-pickstep.is-off{opacity:.5;pointer-events:none}
.ot-pickstep__body{display:flex;flex-direction:column;gap:7px;min-width:0}
.ot-pickstep__label{font-size:var(--text-label);font-weight:var(--w-semibold);
  letter-spacing:.06em;text-transform:uppercase;color:var(--content)}
.ot-pickstep .ot-citysel{min-width:240px}
.ot-pickstep .ot-citysel__trigger{padding:9px 14px}
.ot-pickstep .ot-gradepick__btn{padding:9px 18px}

/* выбор класса участника */
.ot-gradepick{display:flex;gap:8px}
.ot-gradepick__btn{cursor:pointer;font-family:var(--font);font-size:var(--text-default);
  font-weight:var(--w-semibold);color:var(--content-emph);background:var(--card);
  border:1px solid var(--line);border-radius:999px;padding:12px 20px;transition:.16s}
.ot-gradepick__btn:hover{border-color:rgba(129,196,64,.55);color:var(--green-dark)}
.ot-gradepick__btn.is-active{background:var(--green);border-color:var(--green);color:#fff}

/* селект города */
.ot-citysel{position:relative;min-width:300px}
.ot-citysel__trigger{display:flex;align-items:center;gap:10px;width:100%;cursor:pointer;
  font-family:var(--font);font-size:var(--text-default);color:var(--content);
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:13px 16px;transition:.16s}
.ot-citysel__trigger:hover{border-color:rgba(129,196,64,.55)}
.ot-citysel.is-open .ot-citysel__trigger{border-color:var(--green);box-shadow:0 0 0 3px rgba(129,196,64,.18)}
.ot-citysel.is-filtered .ot-citysel__value{color:var(--content-strong);font-weight:var(--w-medium)}
.ot-citysel__pin{width:19px;height:19px;color:var(--green-dark);flex:none}
.ot-citysel__value{flex:1;text-align:left}
.ot-citysel__chev{width:18px;height:18px;color:var(--content);flex:none;transition:transform .16s}
.ot-citysel.is-open .ot-citysel__chev{transform:rotate(180deg)}
.ot-citysel__menu{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:20;display:none;
  max-height:296px;overflow:auto;list-style:none;padding:6px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 24px 48px -24px rgba(51,36,26,.45)}
.ot-citysel.is-open .ot-citysel__menu{display:block}
.ot-citysel__option{padding:10px 12px;border-radius:9px;cursor:pointer;
  font-size:var(--text-default);color:var(--content-emph);transition:background .12s}
.ot-citysel__option:hover{background:var(--bg)}
.ot-citysel__option:focus-visible{outline:none;background:var(--bg);box-shadow:inset 0 0 0 2px var(--green)}
.ot-citysel__option.is-selected{color:var(--green-dark);font-weight:var(--w-semibold);background:rgba(129,196,64,.10)}

/* легенда статусов */
.ot-legend{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;list-style:none}
.ot-legend li{display:inline-flex;align-items:center;gap:9px;
  font-size:var(--text-default);color:var(--content-emph)}

.ot-dot{width:11px;height:11px;border-radius:50%;flex:none}
.ot-dot--ok{background:var(--green)}
.ot-dot--few{background:#F2A93B}
.ot-dot--closed{background:#E03B3B}

/* сетка городов */
/* auto-fit: на десктопе те же 6 колонок, на узких ноутбуках перестраивается сам,
   без жёстких брейкпоинтов и переполнения длинными названиями городов */
/* auto-fill, а не auto-fit: у 5 класса всего две даты — карточки не должны
   растягиваться на пол-экрана, пустые колонки остаются пустыми */
.ot-cities__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:16px}
.ot-cities__grid.is-empty{display:block}

/* подсказка, пока не выбраны класс и город */
.ot-prompt{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
  padding:44px 24px;background:var(--card);border:1px dashed var(--brown-line);border-radius:16px}
.ot-prompt__n{width:34px;height:34px;border-radius:50%;background:rgba(129,196,64,.14);
  color:var(--green-dark);font-weight:var(--w-bold);display:inline-flex;align-items:center;justify-content:center}
.ot-prompt b{font-size:var(--text-title);color:var(--content-strong)}
.ot-prompt span:last-child{font-size:var(--text-default);color:var(--content)}

/* карточка даты тестирования */
.ot-slot{display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:100%;min-width:0;text-align:left;
  cursor:pointer;font-family:var(--font);background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:18px 20px;transition:.16s;box-shadow:0 10px 24px -20px rgba(51,36,26,.5)}
.ot-slot:hover{transform:translateY(-3px);border-color:rgba(129,196,64,.5);
  box-shadow:0 18px 34px -22px rgba(51,36,26,.55)}
.ot-slot[disabled]{cursor:default;opacity:.72}
.ot-slot[disabled]:hover{transform:none;border-color:var(--line);box-shadow:0 10px 24px -20px rgba(51,36,26,.5)}
.ot-slot__status{display:inline-flex;align-items:center;gap:8px;font-size:var(--text-label);
  font-weight:var(--w-semibold);letter-spacing:.02em;color:var(--content)}
.ot-slot__date{font-size:var(--text-title);font-weight:var(--w-bold);color:var(--content-strong);letter-spacing:-.01em}
.ot-slot__time{font-size:var(--text-sm);color:var(--content)}
.ot-slot__book{display:flex;flex-direction:column;gap:1px;padding-top:10px;margin-top:6px;width:100%;
  border-top:1px solid var(--line)}
.ot-slot__book em{font-style:normal;font-size:var(--text-label);letter-spacing:.04em;
  text-transform:uppercase;color:var(--content);margin-bottom:2px}
.ot-slot__book span{font-size:var(--text-sm);color:var(--content-emph)}
.ot-slot__cta{margin-top:12px;display:inline-flex;align-items:center;justify-content:center;
  width:100%;padding:9px 14px;border-radius:10px;background:var(--green);color:#fff;
  font-size:var(--text-sm);font-weight:var(--w-semibold)}
.ot-slot:hover .ot-slot__cta{background:var(--green-dark)}
.ot-city{display:flex;flex-direction:column;align-items:flex-start;gap:7px;width:100%;min-width:0;text-align:left;
  cursor:pointer;font-family:var(--font);background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:20px 20px 18px;transition:.16s;
  box-shadow:0 10px 24px -20px rgba(51,36,26,.5)}
.ot-city:hover{transform:translateY(-3px);border-color:rgba(129,196,64,.5);
  box-shadow:0 18px 34px -22px rgba(51,36,26,.55)}
.ot-city[disabled]{cursor:default;opacity:.7}
.ot-city[disabled]:hover{transform:none;border-color:var(--line);box-shadow:0 10px 24px -20px rgba(51,36,26,.5)}
.ot-city__name{font-size:var(--text-title);font-weight:var(--w-bold);color:var(--content-strong);letter-spacing:-.01em;
  overflow-wrap:break-word}
/* статус словами с карточек убран (он есть в легенде над сеткой) — остаётся точка у даты */
.ot-city__date{display:inline-flex;align-items:center;gap:8px;font-size:var(--text-default);color:var(--content)}
/* окно бронирования: метка сверху, даты снизу — в узкую карточку одной строкой не влезает */
.ot-city__book{display:flex;flex-direction:column;gap:1px;padding-top:7px;width:100%;
  border-top:1px solid var(--line);font-size:var(--text-sm);color:var(--content-emph)}
.ot-city__book em{font-style:normal;font-size:var(--text-label);font-weight:var(--w-semibold);
  letter-spacing:.06em;text-transform:uppercase;color:var(--content)}
/* статус только цветом — для скринридеров дублируем словом */
.ot-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.ot-cities__note{margin-top:20px;font-size:var(--text-sm);color:var(--content)}

/* ---------- Памятка «что взять с собой» ---------- */
.ot-memo{display:grid;grid-template-columns:1.05fr 1fr;gap:24px;align-items:stretch}
.ot-memo__aside{
  background:linear-gradient(150deg,var(--dark),var(--dark-2));border-radius:20px;color:#fff;
  padding:40px 36px;display:flex;flex-direction:column;justify-content:center;gap:14px;position:relative;overflow:hidden}
.ot-memo__aside .tr-badge--onDark{align-self:flex-start}
.ot-memo__aside h2{color:#fff;font-size:var(--text-h2);font-weight:var(--w-bold);line-height:1.15}
.ot-memo__aside p{color:rgba(255,255,255,.82);font-size:var(--text-default);line-height:1.6}
.ot-memo__glow{position:absolute;bottom:-120px;right:-90px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(214,163,102,.30),rgba(214,163,102,0) 70%);pointer-events:none}
.ot-memo__list{list-style:none;display:flex;flex-direction:column;gap:12px}
.ot-memo__item{display:flex;align-items:flex-start;gap:15px;
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px;transition:.18s}
.ot-memo__item:hover{transform:translateY(-3px);border-color:rgba(129,196,64,.5);box-shadow:0 16px 32px -22px rgba(51,36,26,.4)}
.ot-memo__ic{flex:none;width:42px;height:42px;border-radius:12px;background:rgba(129,196,64,.12);color:var(--green-dark);
  display:flex;align-items:center;justify-content:center}
.ot-memo__ic svg{width:22px;height:22px}
.ot-memo__item h4{font-size:var(--text-title);font-weight:var(--w-semibold);margin-bottom:3px}
.ot-memo__item p{font-size:var(--text-sm);color:var(--content);line-height:1.5}

/* ==========================================================================
   МОДАЛЬНОЕ ОКНО РЕГИСТРАЦИИ (вкладки Вход / Регистрация)
   ========================================================================== */
.reg-card{max-width:460px;padding:0;overflow:hidden;transition:max-width .18s ease}
/* вход — компактнее: полей всего два (как в онлайн-лендинге) */
.reg-card.is-login{max-width:420px}
.reg-slot{display:flex;align-items:center;gap:12px;padding:16px 28px;
  background:var(--brown-soft);border-bottom:1px solid var(--brown-line)}
.reg-slot[hidden]{display:none}
.reg-slot svg{width:22px;height:22px;color:var(--green-dark);flex:none}
.reg-slot small{display:block;font-size:var(--text-label);color:var(--content);letter-spacing:.04em;text-transform:uppercase;font-weight:var(--w-semibold)}
.reg-slot b{font-size:var(--text-default);color:var(--content-strong);font-weight:var(--w-semibold)}
/* окно бронирования под слотом: обычный текст, а не капслок-метка сверху
   (селектор с small — иначе капслок из общего правила .reg-slot small перебивает) */
.reg-slot small.reg-slot__book{margin-top:3px;font-size:var(--text-sm);font-weight:var(--w-medium);
  color:var(--content);text-transform:none;letter-spacing:0}
.reg-slot__book[hidden]{display:none}
.reg-body{padding:30px 28px 28px}
.reg-pane[hidden]{display:none}
.reg-fields{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card);
  transition:border-color .15s,box-shadow .15s}
.reg-fields:focus-within{border-color:rgba(129,196,64,.55);box-shadow:0 0 0 3px rgba(129,196,64,.14)}
.reg-field{position:relative;display:flex;align-items:center;border-top:1px solid var(--line)}
.reg-field:first-child{border-top:none}
.reg-field input{
  width:100%;border:none;background:none;outline:none;font-family:var(--font);
  font-size:var(--text-default);color:var(--content-strong);padding:16px 18px;
}
.reg-field input::placeholder{color:var(--content)}
.reg-field.is-invalid{background:rgba(220,80,60,.05)}
.reg-eye{flex:none;background:none;border:none;border-left:1px solid var(--line);cursor:pointer;
  color:var(--content);padding:0 16px;align-self:stretch;display:flex;align-items:center;transition:color .15s}
.reg-eye:hover{color:var(--content-emph)}
.reg-eye svg{width:20px;height:20px}
.reg-consent{display:flex;align-items:flex-start;gap:11px;margin:16px 2px 0;
  font-size:var(--text-sm);color:var(--content-emph);line-height:1.5;cursor:pointer}
.reg-consent input{flex:none;width:18px;height:18px;margin-top:1px;accent-color:var(--green);cursor:pointer}
.reg-consent a{color:var(--green-dark);font-weight:var(--w-semibold);text-decoration:underline}
.reg-captcha{display:flex;align-items:center;gap:10px;margin-top:16px}
.reg-captcha__img{flex:none;width:118px;height:46px;border-radius:10px;border:1px solid var(--line);
  background:repeating-linear-gradient(45deg,#EFEAE3,#EFEAE3 5px,#F6F3EE 5px,#F6F3EE 10px);
  display:flex;align-items:center;justify-content:center;
  font-family:"Courier New",monospace;font-size:23px;font-weight:700;letter-spacing:5px;
  color:var(--green-dark);font-style:italic;user-select:none;text-decoration:line-through}
.reg-captcha__reload{flex:none;width:44px;height:46px;border-radius:10px;border:1px solid var(--line);
  background:var(--card);cursor:pointer;color:var(--content);display:flex;align-items:center;justify-content:center;transition:.15s}
.reg-captcha__reload:hover{color:var(--green-dark);border-color:rgba(129,196,64,.5)}
.reg-captcha__reload svg{width:20px;height:20px}
.reg-captcha input{flex:1;min-width:0;border:1px solid var(--line);border-radius:10px;outline:none;
  font-family:var(--font);font-size:var(--text-default);padding:13px 14px;color:var(--content-strong)}
.reg-captcha input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(129,196,64,.18)}
.btn--block{width:100%;justify-content:center}
.reg-submit{margin-top:20px}
/* «Забыли пароль?» — ссылка-кнопка справа под полями */
.reg-row{display:flex;justify-content:flex-end;margin-top:10px}
.reg-forgot{background:none;border:none;padding:0;cursor:pointer;font-family:var(--font);
  font-size:var(--text-sm);font-weight:var(--w-medium);color:var(--content)}
.reg-forgot:hover{color:var(--green-dark)}
/* вторичная кнопка (Регистрация / Вход) — собственный ghost:
   .btn--ghost из styles.css скрыт медиа-запросом <=1280 */
.reg-alt{margin-top:10px;background:var(--card);color:var(--content-emph);border:1px solid var(--line)}
.reg-alt:hover{background:var(--bg)}
.reg-error{margin-top:14px;font-size:var(--text-sm);color:#C0392B;font-weight:var(--w-medium);text-align:center}
.reg-error.is-info{color:var(--content-emph)}
.reg-error[hidden]{display:none}
/* успех */
.reg-success{text-align:center;padding:40px 30px}
.reg-success[hidden]{display:none}
.reg-success__ic{width:66px;height:66px;border-radius:50%;margin:0 auto 18px;
  background:rgba(129,196,64,.12);color:var(--green-dark);display:flex;align-items:center;justify-content:center}
.reg-success__ic svg{width:34px;height:34px}
.reg-success h3{font-size:var(--text-h3);font-weight:var(--w-bold);margin-bottom:10px}
.reg-success p{font-size:var(--text-default);color:var(--content);line-height:1.6;max-width:340px;margin:0 auto}
.reg-success .btn{margin-top:22px}

@media (max-width:720px){
  .ot-memo{grid-template-columns:1fr}
  .reg-body{padding:24px 20px 20px}
  .reg-slot{padding:14px 20px}
}


/* ---------- Кнопка регистрации: неактивна, пока не отмечено согласие ---------- */
.reg-pane button[type="submit"]:disabled{background:#D2CDC7;color:#fff;cursor:not-allowed;box-shadow:none}
.reg-pane button[type="submit"]:disabled:hover{background:#D2CDC7}

/* ==========================================================================
   РЕКЛАМА ОНЛАЙН-ТЕСТИРОВАНИЯ: промо-секция на главной + плавающий тизер
   Нарочно в зелёных цветах онлайн-лендинга (#234016/#2E5320 — это --dark/--dark-2
   из styles.css, которые .oft переопределяет на коричневые), чтобы блок читался
   как «другой продукт», а не как ещё одна секция офлайн-сайта.
   ========================================================================== */

/* пульсирующая точка в бейдже — общая для промо и тизера */
.ot-pulse{flex:none;width:8px;height:8px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 0 rgba(129,196,64,.6);animation:ot-pulse 1.8s ease-out infinite}
@keyframes ot-pulse{
  0%{box-shadow:0 0 0 0 rgba(129,196,64,.6)}
  70%{box-shadow:0 0 0 9px rgba(129,196,64,0)}
  100%{box-shadow:0 0 0 0 rgba(129,196,64,0)}
}

/* ---------- Промо-секция (только главная) ---------- */
.ot-promo{position:relative;overflow:hidden;border-radius:24px;color:#fff;
  display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:center;padding:52px 56px;
  background:linear-gradient(125deg,#234016,#2E5320 55%,#3F7A25)}
.ot-promo.tr-dotgrid{background-image:
  radial-gradient(circle,rgba(255,255,255,.07) 1.1px,transparent 1.1px),
  linear-gradient(125deg,#234016,#2E5320 55%,#3F7A25);
  background-size:22px 22px,100% 100%}
.ot-promo__glow{position:absolute;bottom:-180px;left:-140px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(129,196,64,.38),rgba(129,196,64,0) 70%);pointer-events:none}
.ot-promo__copy{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.ot-promo__badge{gap:9px}
.ot-promo__copy h2{color:#fff;font-size:clamp(26px,3vw,36px);font-weight:var(--w-bold);line-height:1.15;letter-spacing:-.02em;max-width:520px}
.ot-promo__copy p{font-size:var(--text-title);line-height:1.55;color:rgba(255,255,255,.86);max-width:520px}
.ot-promo__facts{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px}
.ot-promo__facts li{display:inline-flex;align-items:center;gap:8px;color:#EAF5DF;font-size:var(--text-default);font-weight:var(--w-medium)}
.ot-promo__facts svg{width:18px;height:18px;color:#C9E8A6;flex:none}
.ot-promo__cta{margin-top:8px;gap:10px;box-shadow:0 16px 34px -16px rgba(0,0,0,.55);transition:transform .16s ease,box-shadow .16s ease,background .16s ease}
.ot-promo__cta:hover{transform:translateY(-2px);box-shadow:0 22px 40px -16px rgba(0,0,0,.6)}
.ot-promo__cta svg{width:18px;height:18px;flex:none}

/* мини-отчёт (декоративный): белая карточка с кольцом и барами */
.ot-promo__media{position:relative}
.ot-promo__report{max-width:380px;margin-left:auto;padding:22px 24px;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.55);color:var(--content-emph)}
.ot-promo__report-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.ot-promo__report-head b{font-size:var(--text-default);font-weight:var(--w-semibold);color:var(--content-strong)}
.ot-promo__report-body{display:flex;align-items:center;gap:22px}
.ot-promo__report .tr-ring{width:108px;height:108px}
.ot-promo__report .tr-ring__hole{width:76px;height:76px}
.ot-promo__report .tr-ring__hole b{font-size:24px}
.ot-promo__report .tr-ring__hole b span{font-size:13px}
.ot-promo__report .tr-bar{grid-template-columns:104px minmax(40px,1fr) 38px;gap:10px}
.ot-promo__report .tr-bar__label{font-size:var(--text-label);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ot-promo__report .tr-bar__val{font-size:var(--text-label)}

/* ---------- Плавающий тизер (все страницы; разметку инжектит offline-test.js) ---------- */
.ot-teaser{position:fixed;right:24px;bottom:24px;z-index:60;width:340px;   /* z: шапка 50 < тизер < модалка 100 */
  display:flex;align-items:flex-start;gap:14px;padding:18px 40px 16px 18px;
  background:#fff;border:1px solid var(--line);border-left:4px solid var(--green);border-radius:18px;
  box-shadow:0 24px 48px -20px rgba(16,24,40,.35);
  opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity .35s ease,transform .35s ease}
.ot-teaser[hidden]{display:none}
.ot-teaser.is-in{opacity:1;transform:none;pointer-events:auto}
/* пока промо-секция на экране — тизер не дублирует её */
.ot-teaser.is-in.is-muted{opacity:0;transform:translateY(16px);pointer-events:none}
.ot-teaser__ic{width:44px;height:44px;border-radius:13px}
.ot-teaser__ic svg{width:22px;height:22px}
.ot-teaser__body{display:flex;flex-direction:column;gap:4px;min-width:0}
.ot-teaser__badge{display:inline-flex;align-items:center;gap:8px;margin-bottom:3px;
  font-size:var(--text-label);font-weight:var(--w-semibold);letter-spacing:.06em;text-transform:uppercase;color:var(--green-dark)}
.ot-teaser__body b{font-size:var(--text-default);font-weight:var(--w-semibold);color:var(--content-strong);line-height:1.3}
.ot-teaser__body > span{font-size:var(--text-sm);color:var(--content);line-height:1.45}
.ot-teaser__cta{display:inline-flex;align-items:center;gap:6px;margin-top:6px;
  font-size:var(--text-sm);font-weight:var(--w-semibold);color:var(--green-dark)}
.ot-teaser__cta:hover{color:var(--green)}
.ot-teaser__cta svg{width:16px;height:16px;transition:transform .16s ease}
.ot-teaser__cta:hover svg{transform:translateX(3px)}
.ot-teaser__close{position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:8px;
  background:none;border:none;cursor:pointer;color:var(--content);display:flex;align-items:center;justify-content:center;transition:.15s}
.ot-teaser__close:hover{background:var(--bg);color:var(--content-strong)}
.ot-teaser__close svg{width:16px;height:16px}

/* узкий десктоп/планшет: карточке отчёта не хватает ширины на кольцо + бары в ряд —
   кольцо ставим над барами, колонки промо выравниваем 1:1 */
@media (max-width:1150px){
  .ot-promo{grid-template-columns:1fr 1fr;padding:44px 40px;gap:28px}
  .ot-promo__report-body{flex-direction:column;align-items:stretch;gap:18px}
  .ot-promo__report .tr-ring{align-self:center}
}
@media (max-width:900px){
  .ot-promo{grid-template-columns:1fr;padding:34px 26px;gap:28px}
  .ot-promo__report{margin:0 auto}
  .ot-promo__report-body{flex-direction:row;align-items:center}
}
@media (max-width:720px){
  .ot-teaser{left:16px;right:16px;bottom:16px;width:auto}
}
@media (prefers-reduced-motion:reduce){
  .ot-pulse{animation:none}
  .ot-promo__report .tr-ring{transition:none}
  .ot-teaser,.ot-promo__cta{transition:none}
}