/* ============================================================
   WINCLASS ДЛЯ ШКОЛ — ПРЕМИУМ-СЛОЙ
   Поверх app.css winclass.ru. Базовые компоненты не переопределяем
   без нужды: разойдясь с базой, сайт перестанет быть узнаваемым.
   Ноль хардкод-цветов — только переменные из tokens.css.
   ============================================================ */

/* ---------- ДОСТУПНОСТЬ ---------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:calc(var(--z-header) + 5);
  background:var(--bg-card);padding:12px 20px;border-radius:0 0 var(--r-m) 0;font-weight:700;box-shadow:var(--sh-m)}
.skip-link:focus{left:0}
::selection{background:rgba(var(--lime-rgb),.35)}

/* Активный пункт меню: без него человек не понимает, где он. */
.nav-link.is-active{color:var(--text)}
.nav-link.is-active::after{content:'';display:block;height:2px;margin-top:2px;border-radius:2px;background:var(--grad-primary)}

/* ---------- ЗАГОЛОВОК СТРАНИЦЫ ---------- */
.page-head{padding-block:clamp(28px,4vw,56px) clamp(8px,2vw,20px);text-align:center}
.page-head .eyebrow{display:block;margin-bottom:var(--s-3)}
.page-head h1{max-width:900px;margin:0 auto}
.page-head .lead{max-width:720px;margin:var(--s-4) auto 0}

/* ---------- ТОНКАЯ ГРАДИЕНТНАЯ ГРАНИЦА ----------
   Дороже обычной рамки и стоит одного псевдоэлемента: маска рисует
   границу градиентом, а не заливает фон. */
.hairline{position:relative;border:none}
.hairline::after{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:var(--grad-hair);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}

/* ---------- ПРЕМИУМ-КАРТОЧКА ---------- */
.card-p{position:relative;background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--r-2xl);padding:var(--s-8);box-shadow:var(--sh-m),var(--sh-inset);
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t)}
.card-p:hover{transform:translateY(-5px);box-shadow:var(--sh-xl);border-color:rgba(var(--teal-rgb),.28)}
.card-p h3{margin:var(--s-4) 0 var(--s-2)}
.card-p p{color:var(--text-2)}
.card-p .ico{width:56px;height:56px;font-size:26px}

/* Нумерованная карточка шага. Цифра рисуется из атрибута, а не лежит
   в разметке словом: это оформление, а не содержание.

   Стоит в потоке, а не поверх карточки. Первая версия была абсолютной
   и налезала на заголовок — сорок четыре пикселя цифры не помещались в
   отступ сверху. Абсолютная цифра ломается от любой правки отступов
   и ломается молча: замеры контраста и переполнения её не видят. */
.step .step-num,
.step::before{content:attr(data-step);display:block;width:max-content;margin-bottom:var(--s-2);
  font-size:44px;font-weight:900;line-height:1;letter-spacing:-.04em;
  background:var(--grad-rainbow);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}
.step h3{margin-top:0}

/* ---------- ТЁМНАЯ ПЛАШКА ---------- */
.ink{position:relative;overflow:hidden;background:var(--grad-ink);color:var(--on-ink);
  border-radius:var(--r-2xl);padding:clamp(28px,4vw,56px);box-shadow:var(--sh-ink)}
.ink::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(900px 380px at 12% -10%,rgba(var(--lime-rgb),.16),transparent 60%),
             radial-gradient(700px 340px at 92% 0%,rgba(var(--teal-rgb),.14),transparent 62%),
             radial-gradient(600px 300px at 60% 115%,rgba(var(--purple-rgb),.12),transparent 60%)}
.ink>*{position:relative}
.ink h2,.ink h3{color:var(--on-ink)}
.ink .lead,.ink .muted,.ink p{color:var(--on-ink-2)}
.ink .eyebrow{color:rgba(var(--teal-rgb),.9)}
.ink-full{border-radius:0;margin-inline:calc(50% - 50vw);width:100vw;padding-block:clamp(40px,6vw,88px)}
.ink-card{background:rgba(255,255,255,.045);border:1px solid var(--ink-3);border-radius:var(--r-xl);padding:var(--s-6)}
.ink .btn-ghost{border-color:rgba(255,255,255,.28);color:var(--on-ink)}
.ink .btn-ghost:hover{border-color:var(--lime);color:var(--lime);background:rgba(var(--lime-rgb),.08)}
.ink .link-arrow{color:var(--lime);border-color:rgba(var(--lime-rgb),.35)}

/* ---------- ЛЕНТА ЦИФР ---------- */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4)}
.metric{text-align:center;padding:var(--s-6) var(--s-4);background:var(--bg-card);
  border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--sh-s)}
.metric-num{font-size:var(--fs-num);font-weight:900;line-height:1;letter-spacing:-.035em;
  background:var(--grad-primary);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.metric-lbl{font-size:var(--fs-small);font-weight:600;color:var(--text-2);margin-top:8px}
.ink .metric{background:rgba(255,255,255,.05);border-color:var(--ink-3);box-shadow:none}
.ink .metric-lbl{color:var(--on-ink-2)}

/* ---------- МАКЕТ УСТРОЙСТВА ----------
   Показать экран платформы важнее любого стокового фото: школа
   покупает то, что увидит педагог, а не иллюстрацию. */
.device{position:relative;border-radius:var(--r-l);overflow:hidden;background:var(--ink);
  border:1px solid var(--ink-3);box-shadow:var(--sh-ink)}
.device-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:rgba(255,255,255,.05);border-bottom:1px solid var(--ink-3)}
.device-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18)}
.device-title{margin-left:8px;font-size:11px;font-weight:700;color:var(--on-ink-2);letter-spacing:.02em}
.device-body{padding:var(--s-5)}

/* Строка свода урока — та же раскладка, что на проекторе в классе. */
.board-row{display:grid;grid-template-columns:26px 1fr 92px;align-items:center;gap:12px;
  padding:9px 12px;border-radius:var(--r-m);background:rgba(255,255,255,.04);border:1px solid var(--ink-3)}
.board-row+.board-row{margin-top:8px}
.board-pos{font-weight:900;font-size:13px;color:var(--on-ink-2);text-align:center}
.board-row.is-1 .board-pos{color:var(--gold)}
.board-name{font-weight:700;font-size:14px;color:var(--on-ink)}
.board-sub{font-size:11px;font-weight:600;color:var(--on-ink-2)}
.board-bar{--v:50%;height:7px;border-radius:var(--r-pill);background:rgba(255,255,255,.1);overflow:hidden}
.board-bar i{display:block;height:100%;border-radius:inherit;background:var(--grad-primary);width:var(--v,50%)}
.board-row.is-stuck{border-color:rgba(255,59,89,.45);background:rgba(255,59,89,.08)}
.board-row.is-stuck .board-bar i{background:var(--error)}
.board-stars{font-size:13px;font-weight:800;color:var(--gold);text-align:right}

/* ---------- ВКЛАДКИ КАБИНЕТОВ ---------- */
.tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:var(--s-8)}
.tab{padding:10px 20px;border-radius:var(--r-pill);font-size:14px;font-weight:700;color:var(--text-2);
  background:var(--bg-card);border:1.5px solid var(--border-2);transition:all var(--t);min-height:44px}
.tab:hover{border-color:rgba(var(--teal-rgb),.45);color:var(--text)}
.tab[aria-selected="true"]{background:var(--grad-primary);border-color:transparent;color:var(--text);box-shadow:var(--sh-lime)}
.tab-panel[hidden]{display:none}

/* ---------- ТАЙМЛАЙН НАПРАВЛЕНИЙ ---------- */
.timeline{position:relative;display:flex;flex-direction:column;gap:var(--s-4);padding-left:34px}
.timeline::before{content:'';position:absolute;left:11px;top:10px;bottom:10px;width:2px;border-radius:2px;background:var(--grad-rainbow-v);opacity:.5}
.tl-item{position:relative;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-xl);
  padding:var(--s-5) var(--s-6);box-shadow:var(--sh-s)}
.tl-item::before{content:'';position:absolute;left:-29px;top:24px;width:12px;height:12px;border-radius:50%;
  background:var(--bg-card);border:3px solid var(--teal)}
.tl-item.is-live::before{background:var(--lime);border-color:var(--lime-ink)}
.tl-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tl-item h3{font-size:17px}
.tl-item p{color:var(--text-2);font-size:14px;margin-top:6px}
.tag{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:var(--r-pill);
  font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.tag-live{background:rgba(var(--lime-rgb),.14);color:var(--lime-ink)}
.tag-soon{background:var(--bg-subtle);color:var(--text-2)}
.tag-gold{background:rgba(var(--gold-rgb),.16);color:#8A6300}

/* ---------- ТАБЛИЦА СРАВНЕНИЯ ---------- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5)}
.cmp{border-radius:var(--r-2xl);padding:var(--s-8);border:1px solid var(--border);background:var(--bg-card);box-shadow:var(--sh-m)}
.cmp h3{display:flex;align-items:center;gap:10px;margin-bottom:var(--s-4)}
.cmp ul{display:flex;flex-direction:column;gap:11px}
.cmp li{display:flex;gap:10px;align-items:flex-start;color:var(--text-2);font-size:15px}
.cmp li i{margin-top:3px;flex-shrink:0}
.cmp-keep{background:var(--bg-subtle);box-shadow:none}
.cmp-keep li i{color:var(--text-muted)}
.cmp-add li i{color:var(--lime-ink)}
.cmp-add{position:relative;overflow:hidden}
.cmp-add::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad-primary)}

/* ---------- КАЛЬКУЛЯТОР ЭКОНОМИКИ ---------- */
.calc{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s-8);align-items:center}
.calc-controls{display:flex;flex-direction:column;gap:var(--s-6)}
.calc-field label{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4);
  font-size:var(--fs-small);font-weight:700;color:var(--on-ink-2);margin-bottom:10px}
.calc-field output{font-size:19px;font-weight:900;color:var(--on-ink);letter-spacing:-.02em}
.calc-field input[type=range]{width:100%;height:34px;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.calc-field input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:var(--r-pill);background:rgba(255,255,255,.14)}
.calc-field input[type=range]::-moz-range-track{height:6px;border-radius:var(--r-pill);background:rgba(255,255,255,.14)}
.calc-field input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-10px;
  border-radius:50%;background:var(--grad-primary);border:2px solid var(--ink);box-shadow:var(--sh-lime)}
.calc-field input[type=range]::-moz-range-thumb{width:26px;height:26px;border:2px solid var(--ink);
  border-radius:50%;background:var(--lime);box-shadow:var(--sh-lime)}
.calc-out{text-align:center}
.calc-out .eyebrow{display:block;margin-bottom:var(--s-2)}
.calc-sum{font-size:clamp(34px,5vw,54px);font-weight:900;line-height:1;letter-spacing:-.04em;
  background:var(--grad-primary);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.calc-rows{margin-top:var(--s-6);display:flex;flex-direction:column;gap:10px;text-align:left}
.calc-row{display:flex;justify-content:space-between;gap:var(--s-4);font-size:14px;font-weight:600;color:var(--on-ink-2);
  padding-bottom:10px;border-bottom:1px solid var(--ink-3)}
.calc-row b{color:var(--on-ink);font-weight:800;white-space:nowrap}
.calc-row:last-child{border-bottom:none}
.calc-note{margin-top:var(--s-5);font-size:var(--fs-small);color:var(--on-ink-2);line-height:1.5}

/* ---------- ТАРИФ ---------- */
.plan{position:relative;overflow:hidden;background:var(--bg-card);border-radius:var(--r-2xl);
  padding:clamp(26px,3.4vw,44px);box-shadow:var(--sh-xl)}
.plan::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:var(--grad-rainbow)}
.plan-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:var(--s-4) 0 var(--s-2)}
.plan-sum{font-size:clamp(34px,4.6vw,52px);font-weight:900;letter-spacing:-.04em;line-height:1}
.plan-per{font-size:16px;font-weight:700;color:var(--text-2)}
.plan-alt{font-size:var(--fs-small);color:var(--text-muted);font-weight:600}
.plan-feats{display:grid;grid-template-columns:1fr 1fr;gap:12px var(--s-6);margin:var(--s-6) 0}
.plan-feats li{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.plan-feats i{color:var(--lime-ink);margin-top:3px;flex-shrink:0}
.addon{display:flex;gap:var(--s-4);align-items:flex-start;padding:var(--s-5) var(--s-6);
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-xl)}
.addon .ico{width:44px;height:44px;font-size:21px}
.addon h4{font-size:16px;font-weight:800;margin-bottom:4px}
.addon p{color:var(--text-2);font-size:14px}
.addon-price{margin-left:auto;text-align:right;font-weight:900;white-space:nowrap;font-size:15px}
.addon-price small{display:block;font-size:11px;font-weight:600;color:var(--text-muted)}

/* ---------- ЦИТАТА-КЕЙС ---------- */
.quote-p{position:relative;padding:clamp(28px,4vw,48px)}
.quote-p::before{content:'\201C';position:absolute;top:8px;left:24px;font-size:110px;line-height:1;
  font-weight:900;color:rgba(var(--teal-rgb),.16)}
.quote-p .quote-text{position:relative;font-size:clamp(17px,1.7vw,21px);font-weight:600;line-height:1.45}

/* ---------- ФОРМА ЗАЯВКИ ---------- */
.lead-card{max-width:640px;margin:0 auto}
.lead-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s-4)}
.lead-grid .field-wide{grid-column:1 / -1}
.msg{display:flex;gap:12px;align-items:flex-start;padding:var(--s-5) var(--s-6);border-radius:var(--r-l);
  margin-bottom:var(--s-6);font-weight:600}
.msg i{font-size:22px;flex-shrink:0;margin-top:1px}
.msg-ok{background:rgba(var(--lime-rgb),.12);color:var(--success)}
.msg-err{background:rgba(255,59,89,.1);color:var(--error)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- ЛОГОТИПЫ / ДОВЕРИЕ ---------- */
.trust{display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:center}
.trust .badge{background:var(--bg-card)}

/* ---------- СЕТКИ ---------- */
.grid-p{display:grid;gap:var(--s-5)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.split-6-4{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,3.4vw,56px);align-items:center}

/* ---------- ГЕРОЙ ШКОЛЬНОГО САЙТА ---------- */
.hero-p{position:relative;padding-block:clamp(28px,4vw,64px) clamp(20px,3vw,40px)}
.hero-p h1{font-size:var(--fs-h1);font-weight:900;line-height:1.12;letter-spacing:-.03em;margin:var(--s-4) 0}
.hero-p .lead{max-width:600px}
.hero-p .hero-cta{margin-top:var(--s-6)}
.hero-facts{display:flex;flex-wrap:wrap;gap:var(--s-5);margin-top:var(--s-6)}
.hero-fact{display:flex;align-items:center;gap:8px;font-size:var(--fs-small);font-weight:700;color:var(--text-2)}
.hero-fact i{font-size:17px;color:var(--lime-ink)}

/* ---------- АДАПТИВ ---------- */
@media(max-width:1080px){
  .split-6-4,.calc{grid-template-columns:1fr}
  /* Сначала ползунки, потом итог: результат до того, как человек
     что-то задал, читается как наша выдумка, а не как его расчёт. */
  .calc-out{order:1}
}
@media(max-width:900px){
  .metrics{grid-template-columns:repeat(2,1fr)}
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .compare{grid-template-columns:1fr}
  .plan-feats{grid-template-columns:1fr}
}
@media(max-width:640px){
  .g2,.g3,.g4,.grid-p{grid-template-columns:1fr}
  .lead-grid{grid-template-columns:1fr}
  .ink{padding:var(--s-6) var(--s-5)}
  .card-p{padding:var(--s-6)}
  .board-row{grid-template-columns:22px 1fr 74px;gap:9px;padding:8px 10px}
  .addon{flex-wrap:wrap}
  .addon-price{margin-left:0;text-align:left;width:100%}
  .timeline{padding-left:26px}
  .tl-item::before{left:-21px}
}

/* Кнопка «Демо» в нижнем меню выделена: на телефоне это главное
   действие, и оно не должно теряться среди четырёх серых значков. */
.bn-cta i{background:var(--grad-primary);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ---------- ПОЯВЛЕНИЕ БЛОКОВ ----------
   В базе `.anim` спрятан всегда и показывается скриптом. Скрипт не
   доехал — страница остаётся пустой, и выглядит это как поломка сайта,
   а не как отключённый JavaScript. Прячем только когда скрипт заведомо
   работает: класс `js` ставит строка в <head>. */
.anim{opacity:1;transform:none}
.js .anim{opacity:0;transform:translateY(16px)}
.js .anim.in{opacity:1;transform:none}

/* Макет устройства на планшете и телефоне.
   В базе вся правая колонка героя прячется — плашки вылезали за край.
   Здесь в ней не плашки, а доказательство продукта, поэтому на узком
   экране она возвращается под текст во всю ширину. */
@media(max-width:1080px){
  .hero-p .hero-visual{display:flex;min-height:0;padding-top:var(--s-4)}
  .hero-p .hv-stage{width:100%;height:auto;display:block}
  .hero-p .hv-chip{display:none}
}

/* ============================================================
   ЧИТАЕМОСТЬ И ФИОЛЕТОВЫЙ АКЦЕНТ
   Ниже — правки поверх базы winclass.ru. Каждая сделана по замеру
   контраста на отрисованной странице, а не по ощущению.
   ============================================================ */

/* Текстовая бирюза вместо заливочной. Яркая #46D2D2 остаётся на
   иконках, границах и тёмных плашках — там она читается. */
.link-arrow{color:var(--teal-ink);border-color:rgba(var(--teal-rgb),.4)}
.link-arrow:hover{color:var(--purple-ink);border-color:var(--purple)}
.nav-link:hover{color:var(--teal-ink)}
.footer a:hover{color:var(--teal-ink)}
.breadcrumbs a{color:var(--teal-ink)}
.faq-q .chev{color:var(--teal-ink)}
.prose blockquote{border-left-color:var(--purple)}

/* Бейдж на бледной подложке: текст тёмный, значок остаётся ярким —
   значок не текст, к нему порог 3:1 и он его проходит. */
.badge-soft{color:var(--lime-ink)}
.badge i{color:var(--teal-ink)}

/* «Остаётся как есть» лежало на серой подложке, и приглушённый текст
   давал там 4.34 при пороге 4.5. Карточка стала белой с пунктиром —
   заодно она честнее читается как «это не наше». */
.cmp-keep{background:var(--bg-card);border:1.5px dashed var(--border-2)}
.cmp-keep li i{color:var(--text-muted)}

/* ---------- ФИОЛЕТОВЫЙ ---------- */

/* Заголовок в три цвета — для главных строк страницы. Лайм и бирюза
   ведут, фиолет закрывает: так марка читается целиком, а не половиной. */
.gt3{background:var(--grad-rainbow);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}

/* Цифры ленты: первые две в лайм-бирюзе, вторая пара уходит в фиолет.
   Один градиент на четыре числа читается как заливка, два — как ритм. */
.metrics .metric:nth-child(3) .metric-num,
.metrics .metric:nth-child(4) .metric-num{background:var(--grad-teal-purple);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* Свечение тёмной плашки: фиолетовое пятно крупнее и ближе к краю —
   на широком экране именно оно отличает плашку от чёрного прямоугольника. */
.ink::before{background:
  radial-gradient(900px 380px at 10% -12%,rgba(var(--lime-rgb),.16),transparent 60%),
  radial-gradient(760px 360px at 88% -6%,rgba(var(--teal-rgb),.15),transparent 62%),
  radial-gradient(820px 420px at 72% 112%,rgba(var(--purple-rgb),.22),transparent 62%),
  radial-gradient(520px 300px at 4% 108%,rgba(var(--purple-rgb),.12),transparent 60%)}

/* Верхняя кромка тёмной плашки — вся триада. Тонкая линия делает для
   премиума больше, чем ещё один градиентный фон. */
.ink::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-rainbow)}

/* Наведение на карточку уводит границу в фиолет: движение цвета
   заметнее, чем движение тени. */
.card-p:hover{border-color:rgba(var(--purple-rgb),.45)}

/* Лента направлений: третья точка и дальше — фиолетовые. Готовое
   отличается от планов не только подписью. */
.tl-item:nth-child(n+4)::before{border-color:var(--purple)}
.timeline::before{opacity:.75}

/* Фоновые орбы: фиолетовый крупнее и ярче остальных. */
.orb-3{width:520px;height:520px;opacity:.34}

/* ---------- ЗОНА НАЖАТИЯ ----------
   Замер на 390 точках нашёл шесть элементов ниже 44: логотип, кнопка
   в шапке, ссылки подвала, чип «дорожная карта». По ним бьют пальцем,
   и промах здесь стоит дороже любого украшения. */
@media (pointer: coarse){
  .logo{min-height:44px}
  .header-actions .btn-primary{padding:12px 15px}
  .link-arrow{padding-top:11px;padding-bottom:11px}
  .footer a{padding:10px 0}
  .disc-more{padding:12px 16px}
  .faq-q{min-height:52px}
}

/* Три места, найденные пересчётом контраста по отрисованной странице. */

/* Чип «дорожная карта» — ссылка, а бирюза заливочная даёт 1.71. */
.disc-more{color:var(--teal-ink);border-color:rgba(var(--teal-rgb),.35)}

/* Метка «в работе» на серой подложке давала 4.34 при пороге 4.5. */
.tag-soon{color:var(--text-muted)}

/* Кружок с инициалами: белым по бирюзово-фиолетовой заливке выходит
   около 2:1. Тёмные варианты тех же цветов дают выше пяти и заодно
   добавляют фиолета там, где его видно. */
.avatar{background:linear-gradient(135deg,var(--purple-ink),var(--teal-ink))}

/* Ещё три места, найденные пересчётом по остальным страницам. */

/* Список внутри тёмной плашки наследовал светло-серый текст базы и
   давал 3.98. На тёмном свой цвет — 7.88. */
.ink .split-list li{color:var(--on-ink-2)}
.ink .split-list i{color:var(--lime)}

/* Ссылка внутри абзаца. Отдельный класс вместо цвета в атрибуте:
   цвет в разметке переживёт смену палитры и останется старым. */
.link-in{color:var(--teal-ink);font-weight:700;border-bottom:1px solid rgba(var(--teal-rgb),.4)}
.link-in:hover{color:var(--purple-ink);border-color:var(--purple)}

/* Цитата в статье на серой подложке давала 4.34. */
.prose blockquote{color:var(--text-muted)}

/* ---------- КОД УРОКА ----------
   Отдельный компонент, а не набор свойств в атрибуте: этот блок стоит
   на двух страницах, и разойтись им нельзя. */
.code-plate{text-align:center;padding:var(--s-10) var(--s-6)}
.code-plate .code-label{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--on-ink-2)}
.code-plate .code-digits{font-size:clamp(34px,4vw,44px);font-weight:900;letter-spacing:.16em;color:var(--on-ink);margin:var(--s-4) 0}
.code-plate .code-note{font-size:13px;font-weight:600;color:var(--on-ink-2)}

/* Значок рядом с заголовком карточки документа. */
.ico-inline{color:var(--teal-ink)}

/* Строки внутри макета устройства. */
.device .ink-card b{color:var(--on-ink)}
.device .ink-card p{color:var(--on-ink-2)}


/* ---------- ЦИФРЫ В ГЕРОЕ ----------
   Состав направления стоит рядом с обещанием, а не через экран от него:
   «интерактивная математика» — это слова, а «42 тренажёра» — предмет
   разговора. Отдельная лента цифр ниже по странице после этого лишняя. */
/* Четыре равные колонки во всю ширину текста: сбитые в кучу слева
   цифры читаются как подпись, разложенные по ширине — как состав. */
.hero-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-5) var(--s-4);
  margin-top:var(--s-8);padding-top:var(--s-6);border-top:1px solid var(--border)}
.hero-num{min-width:0}
.hero-num b{display:block;font-size:clamp(24px,2.4vw,32px);font-weight:900;line-height:1;letter-spacing:-.03em;
  background:var(--grad-primary);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-num:nth-child(3) b,
.hero-num:nth-child(4) b{background:var(--grad-teal-purple);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-num span{display:block;font-size:var(--fs-small);font-weight:600;color:var(--text-2);margin-top:5px}
@media(max-width:560px){
  .hero-nums{grid-template-columns:repeat(2,1fr);gap:var(--s-5) var(--s-4)}
  .hero-num b{font-size:22px}
}



/* ---------- ЭКРАН КАТАЛОГА В ГЕРОЕ ----------
   Планшет с каталогом вместо четырёх карточек с подписями. Четыре
   карточки читаются как «вот и всё»; сетка, уходящая за нижний край, —
   как «их много», и это правда: их сорок два. */
/* Плашка светлая, а не тёмная. Обложки внутри и так тёмные: тёмная
   рамка вокруг тёмной сетки даёт одно пятно, светлая — экран, на
   котором лежат карточки. */
.screen{position:relative;border-radius:var(--r-l);overflow:hidden;background:var(--bg-card);
  border:1px solid var(--border-2);box-shadow:var(--sh-xl)}
.screen-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;
  background:var(--bg-subtle);border-bottom:1px solid var(--border)}
.screen-dot{width:9px;height:9px;border-radius:50%;background:var(--border-2)}
.screen-title{margin-left:8px;font-size:11px;font-weight:700;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.screen-body{position:relative}

/* Показываем не всю картинку: нижний ряд обрезан, и под ним затемнение —
   так экран читается как прокручиваемый список, а не как плакат. */
.screen-body picture{display:block;max-height:300px;overflow:hidden}
.screen-body img{display:block;width:100%;height:auto}
.screen-fade{position:absolute;left:0;right:0;bottom:0;height:110px;pointer-events:none;
  background:linear-gradient(to top,var(--bg-card) 14%,rgba(var(--bg-card-rgb),.7) 55%,transparent)}
.screen-more{position:absolute;left:0;right:0;bottom:12px;text-align:center;
  font-size:13px;font-weight:800;color:var(--text);letter-spacing:.01em}

.hero-p .hero-visual{display:block;align-self:start}
.hero-p .screen{max-width:520px;margin-inline:auto}
@media(max-width:1080px){
  .hero-p .hero-visual{padding-top:var(--s-6)}
  .screen-body picture{max-height:260px}
}


/* ---------- ПРЕИМУЩЕСТВА ----------
   Сетка подстраивается под число карточек сама: добавили восьмую —
   ряды сошлись, уберут одну — дырки не будет. Так текст не приходится
   писать ради ровного ряда. */
.adv{grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.adv .card-p{padding:var(--s-6)}
.adv h3{font-size:17px;margin:var(--s-3) 0 var(--s-2)}
.adv p{font-size:14.5px}
.adv .ico{width:48px;height:48px;font-size:22px}

/* ---------- ШАПКА НЕ ЛОМАЕТСЯ ----------
   Пункт меню, переехавший на вторую строку, превращает шапку в
   гармошку — и это видно на первом же экране. Ничему в шапке
   переноситься нельзя, а лишнее уходит раньше, чем начнёт мешать. */
.header-inner{flex-wrap:nowrap}
.logo,.logo-tag,.nav-link,.lang-switch a,.header-actions .btn{white-space:nowrap}

.logo{flex-shrink:0}
.nav{flex-shrink:0}

/* Подпись у логотипа — первое, что можно убрать: имя школы от этого
   не страдает, а место она занимает как целый пункт меню. */
@media(max-width:1300px){
  .logo-tag{display:none}
  /* Следующим уходит слово «Войти»: значок понятен, а места он
     занимает как целый пункт меню. */
  .header-actions .btn-login{padding:11px 13px}
  .header-actions .btn-login i{display:inline-flex;font-size:19px}
  .header-actions .btn-login .btn-label{display:none}
}


/* Дальше сжимаем зазоры, и только потом прячем меню (это уже в базе). */
@media(max-width:1180px){
  .header-inner{padding:0 var(--s-5);gap:var(--s-4)}
  .nav{gap:var(--s-5)}
  .header-actions{gap:var(--s-2)}
  .header-actions .btn-ghost{padding:12px 16px}
}
@media(max-width:1080px){
  .nav{gap:var(--s-4)}
  .nav-link{font-size:13.5px}
  .header-inner{padding:0 var(--s-4)}
  /* Стрелка у языка — чистое украшение: список открывается и без неё. */
  .lang-pick summary .lang-chev{display:none}
}

/* Последняя ступень перед тем, как меню уедет в нижнюю панель.
   Нужна казахскому: «Бағдарламалар · Үйірмелер · Мүмкіндіктер ·
   Тарифтер · Біз туралы» на девяносто точек шире русского меню, и в
   полосе 960–1010 шапка без этой ступени переполняется. Русский и
   английский туда помещаются и так — правило про язык, а не про экран.

   Стоит после блока 1080 намеренно: на 980 подходят оба, и выигрывает
   тот, что ниже по файлу. Поставь его выше — правило молча не сработает,
   а выглядеть это будет как «стили не доехали». */
@media(max-width:1010px){
  .nav{gap:10px}
  .nav-link{font-size:12.5px}
  .header-inner{padding:0 var(--s-3)}
}


/* Годовая цена — второй строкой под основной, чтобы выгода читалась
   рядом с ценой, а не терялась в вопросах внизу страницы. */
.plan-year{margin-top:var(--s-3);padding:10px 14px;border-radius:var(--r-m);
  background:rgba(var(--lime-rgb),.1);color:var(--lime-ink);font-size:14px;font-weight:600}
.plan-year b{font-weight:900}

/* Адрес не переносится посреди домена: «ваша-школа.winclass» на одной
   строке и «.kz» на другой читается как опечатка. */
.nowrap{white-space:nowrap}
.plan-feats{gap:14px var(--s-8)}

/* ---------- ОСНОВАТЕЛЬ ----------
   Лицо рядом с историей: школа покупает у человека, а не у сайта. */
.founder{display:flex;align-items:center;gap:var(--s-8);max-width:820px;margin:0 auto;
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-2xl);
  padding:var(--s-8);box-shadow:var(--sh-m)}
.founder-photo{width:132px;height:132px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:3px solid var(--bg-card);box-shadow:var(--sh-l)}
.founder h2{font-size:var(--fs-h3)}

/* Вывод под фактом в ленте лет: чем это обернулось для школы. */
.tl-out{margin-top:10px;padding-left:12px;border-left:3px solid rgba(var(--lime-rgb),.5);
  font-weight:600;color:var(--text)}

@media(max-width:640px){
  .founder{flex-direction:column;text-align:center;gap:var(--s-5);padding:var(--s-6)}
  .founder .foot-contacts{align-items:center}
}

/* ---------- ВЫБОР ЯЗЫКА ----------
   Одна кнопка с текущим языком вместо трёх кодов в ряд. Собрана на
   <details>: открывается без скрипта, а скрипт только закрывает её
   при клике мимо — то есть улучшает, а не создаёт. */
.lang-pick{position:relative}
.lang-pick summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;
  padding:10px 12px;min-height:44px;border-radius:var(--r-pill);
  background:var(--bg-subtle);color:var(--text);font-size:13px;font-weight:700;
  transition:background var(--t)}
.lang-pick summary::-webkit-details-marker{display:none}
.lang-pick summary:hover{background:var(--border)}
.lang-pick summary i{font-size:16px;color:var(--text-muted)}
.lang-chev{transition:transform var(--t)}
.lang-pick[open] .lang-chev{transform:rotate(180deg)}
.lang-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:calc(var(--z-header) + 1);
  min-width:170px;padding:6px;border-radius:var(--r-l);
  background:var(--bg-card);border:1px solid var(--border);box-shadow:var(--sh-xl)}
.lang-menu a{display:block;padding:11px 14px;border-radius:var(--r-m);
  font-size:14px;font-weight:600;color:var(--text-2);white-space:nowrap;transition:all var(--t)}
.lang-menu a:hover{background:var(--bg-subtle);color:var(--text)}
.lang-menu a.is-current{color:var(--text);background:rgba(var(--lime-rgb),.12);font-weight:800}

/* «Войти» на узком экране остаётся значком: без него человек, которому
   надо в кабинет, ищет вход в подвале. Прятать его нельзя. */
.header-actions .btn-login i{display:none}
@media(max-width:960px){
  .header-actions .btn-login{display:inline-flex;padding:11px 13px}
  .header-actions .btn-login i{display:inline-flex;font-size:19px}
  .header-actions .btn-login .btn-label{display:none}
  .lang-pick summary{padding:10px}
  .lang-pick summary .ti-chevron-down{display:none}
}


/* ---------- ДИСЦИПЛИНЫ ----------
   Карточка, а не плитка. Значок с подписью хорош, когда человек уже
   знает, что это: школа, которая ни разу этим не пользовалась, по слову
   «ТРИЗ» не понимает ничего. Поэтому рядом со значком стоит число
   тренажёров, одно предложение о том, что делает ребёнок, и строка
   навыков.

   Значки прозрачные и лежат прямо на карточке: у них свечение по краям,
   и любая подложка превращает их в тёмный квадрат. */
.dcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:var(--s-4)}
.dcard{display:flex;gap:var(--s-4);align-items:flex-start;margin:0;
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-xl);
  padding:var(--s-5);box-shadow:var(--sh-m),var(--sh-inset);
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t)}
.dcard:hover{transform:translateY(-4px);box-shadow:var(--sh-xl);border-color:rgba(var(--purple-rgb),.30)}
.dcard picture{flex:0 0 auto}
.dcard img{display:block;width:76px;height:76px}
.dcard-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.dcard-h h3{margin:0;font-size:17px;line-height:1.25}
.dcard-n{font-size:12.5px;font-weight:700;color:var(--purple-ink);white-space:nowrap;
  background:rgba(var(--purple-rgb),.10);border-radius:999px;padding:3px 9px}
.dcard p{margin:8px 0 0;font-size:14.5px;line-height:1.55;color:var(--text-2)}
.dcard-s{margin-top:10px;font-size:13px;font-weight:600;color:var(--text-muted)}

@media(max-width:560px){
  .dcards{grid-template-columns:1fr}
  .dcard{padding:var(--s-4);gap:var(--s-3)}
  .dcard img{width:60px;height:60px}
  .dcard-h h3{font-size:16px}
}


/* ---------- ДВА НАПРАВЛЕНИЯ В ГЕРОЕ ----------
   Раньше тут лежали два ряда чипов: готовые и плановые программы, а под
   ними отдельным списком развивающие дисциплины. Читалось как свалка
   ярлыков, и главное терялось — что предложений ровно два и оба в одном
   тарифе. Теперь это две карточки: у каждой имя, одно предложение и
   переход. Плановые методики из героя убраны совсем — им место на
   дорожной карте, а не на первом экране. */
.hero-dirs{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);margin-top:var(--s-6)}
.hero-dir{display:block;background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--r-xl);padding:var(--s-5) var(--s-6);box-shadow:var(--sh-s);
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t)}
.hero-dir:hover{transform:translateY(-3px);box-shadow:var(--sh-l);border-color:rgba(var(--teal-rgb),.32)}
.hero-dir-tag{display:inline-block;font-size:11px;font-weight:800;text-transform:uppercase;
  letter-spacing:.07em;color:var(--teal-ink);background:rgba(var(--teal-rgb),.10);
  border-radius:var(--r-pill);padding:3px 9px}
.hero-dir>b{display:block;margin:10px 0 6px;font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--text)}
.hero-dir p{margin:0;font-size:14.5px;line-height:1.5;color:var(--text-2)}
.hero-dir-num{display:block;color:var(--purple-ink);font-weight:800}
.hero-dir-go{display:inline-flex;align-items:center;gap:6px;margin-top:var(--s-4);
  font-size:14px;font-weight:700;color:var(--lime-ink)}
.hero-dir:hover .hero-dir-go i{transform:translateX(3px)}
.hero-dir-go i{transition:transform var(--t) var(--ease)}

@media(max-width:760px){
  .hero-dirs{grid-template-columns:1fr}
}