/* ============================================================
   LinQuest Korea — единственный файл стилей.
   Порядок: шрифты → токены → reset → типографика → утилиты →
   шапка → компоненты → секции → формы → подвал → адаптив.
   Внешних запросов нет: шрифты лежат в assets/fonts/.
   ============================================================ */

/* ---------- шрифты (локально, разбивка по наборам символов) ---------- */
@font-face { font-family:"Montserrat"; src:url("../fonts/montserrat-700-cyrillic-ext.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family:"Montserrat"; src:url("../fonts/montserrat-700-cyrillic.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family:"Montserrat"; src:url("../fonts/montserrat-700-latin-ext.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:"Montserrat"; src:url("../fonts/montserrat-700-latin.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:"Montserrat"; src:url("../fonts/montserrat-800-cyrillic-ext.woff2") format("woff2"); font-weight:800; font-style:normal; font-display:swap; unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family:"Montserrat"; src:url("../fonts/montserrat-800-cyrillic.woff2") format("woff2"); font-weight:800; font-style:normal; font-display:swap; unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family:"Montserrat"; src:url("../fonts/montserrat-800-latin-ext.woff2") format("woff2"); font-weight:800; font-style:normal; font-display:swap; unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:"Montserrat"; src:url("../fonts/montserrat-800-latin.woff2") format("woff2"); font-weight:800; font-style:normal; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:"Inter"; src:url("../fonts/inter-400-cyrillic-ext.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family:"Inter"; src:url("../fonts/inter-400-cyrillic.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family:"Inter"; src:url("../fonts/inter-400-latin-ext.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:"Inter"; src:url("../fonts/inter-400-latin.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:"Inter"; src:url("../fonts/inter-500-cyrillic-ext.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family:"Inter"; src:url("../fonts/inter-500-cyrillic.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family:"Inter"; src:url("../fonts/inter-500-latin-ext.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:"Inter"; src:url("../fonts/inter-500-latin.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:"Inter"; src:url("../fonts/inter-600-cyrillic-ext.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family:"Inter"; src:url("../fonts/inter-600-cyrillic.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family:"Inter"; src:url("../fonts/inter-600-latin-ext.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:"Inter"; src:url("../fonts/inter-600-latin.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- токены ---------- */
:root {
  /* Палитра один в один с lin-quest.ru — тот же бренд, те же значения. */
  --c-blue-950:#0C2450;
  --c-blue-800:#123B7A;
  --c-blue-600:#1B7FE0;
  --c-blue-400:#57A8ED;
  --c-blue-200:#B9DDF8;
  --c-blue-050:#E8F3FD;

  --c-orange:#F58220;
  --c-orange-deep:#DA6A0E;
  --c-orange-050:#FDEEDC;

  --c-white:#FFFFFF;
  --c-ink:#0C2450;        /* заголовки */
  --c-body:#3E5B85;       /* основной текст (ink-soft у референса) */
  --c-muted:#546E95;      /* подписи (ink-faint) */
  --c-link:#1B7FE0;
  --c-line:#CFE4F7;
  --c-line-strong:#A8D4F6;
  --c-focus:#DA6A0E;
  --c-star:#FFB800;

  --g-blue:linear-gradient(135deg,#1B7FE0 0%,#0F5FB8 100%);
  --g-hero:linear-gradient(160deg,#E8F3FD 0%,#C9E4FA 55%,#A8D4F6 100%);
  --g-orange:linear-gradient(135deg,#FF9A3C 0%,#F0700F 100%);

  --f-head:"Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-kr:"Apple SD Gothic Neo", "Noto Sans KR", var(--f-body);

  /* Кегль крупнее обычного: аудитория читает с телефона и не всегда быстро. */
  --t-body:1.125rem;                          /* 18px: было 17, текст выглядел мелким */
  --t-h1:clamp(2.25rem, 5.6vw, 3.75rem);
  --t-h2:clamp(1.75rem, 3.9vw, 2.75rem);
  --t-h3:clamp(1.3125rem, 2.1vw, 1.625rem);
  --t-lead:clamp(1.1875rem, 1.9vw, 1.4375rem);
  --t-small:1rem;
  --t-micro:0.875rem;

  --max-w:1220px; --max-w-narrow:820px;
  --gutter:clamp(1.125rem, 4vw, 2.5rem);
  --s-1:.5rem; --s-2:.75rem; --s-3:1rem; --s-4:1.5rem;
  --s-5:2rem; --s-6:3rem; --s-7:4.25rem;
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-pill:999px;

  --sh-sm:0 2px 6px rgba(27,127,224,.10);
  --sh-md:0 14px 34px -14px rgba(18,59,122,.28);
  --sh-lg:0 30px 64px -26px rgba(18,59,122,.40);
  --sh-orange:0 12px 28px -10px rgba(218,106,14,.45);
  --tr:200ms cubic-bezier(.2,.7,.3,1);
}

/* ---------- reset ---------- */
*,*::before,*::after { box-sizing:border-box; }
* { margin:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}
body {
  font-family:var(--f-body); font-size:var(--t-body); line-height:1.65;
  color:var(--c-body); background:var(--c-white);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,picture,svg,video { display:block; max-width:100%; }
img { height:auto; }
input,button,textarea,select { font:inherit; color:inherit; }
button { background:none; border:0; cursor:pointer; }
ul,ol { padding:0; list-style:none; }
a { color:var(--c-link); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover { color:var(--c-orange-deep); }
:focus-visible { outline:3px solid var(--c-focus); outline-offset:2px; border-radius:4px; }

/* ---------- типографика ---------- */
h1,h2,h3,h4 { font-family:var(--f-head); color:var(--c-ink); line-height:1.18; text-wrap:balance; }
h1 { font-size:var(--t-h1); font-weight:800; line-height:1.1; letter-spacing:-.015em; }
h2 { font-size:var(--t-h2); font-weight:800; letter-spacing:-.01em; }
h3 { font-size:var(--t-h3); font-weight:700; }
h4 { font-size:1.0625rem; font-weight:700; }
/* Смысловой акцент в заголовке — синим, а на синем фоне оранжевым.
   em здесь не про курсив: начертание оставляем прямым, работает только цвет. */
h1 em,h2 em,h3 em { font-style:normal; color:var(--c-blue-600); }
.on-blue h1 em,.on-blue h2 em,.on-blue h3 em { color:var(--c-orange); }
.hero h1 em { color:var(--c-blue-600); }
/* цифра и валюта в крупных числах */
.facts b em,.format__main em,.price-hero__amount em { font-style:normal; color:var(--c-orange-deep); }
p { max-width:64ch; }
.lead { font-size:var(--t-lead); color:var(--c-body); line-height:1.55; }
strong,b { font-weight:600; color:var(--c-ink); }
.kr { font-family:var(--f-kr); white-space:nowrap; }
.small { font-size:var(--t-small); }
.muted { color:var(--c-muted); }
.on-blue,.on-blue h2,.on-blue h3,.on-blue p,.on-blue strong { color:var(--c-white); }
/* Только текстовые ссылки. Без :not(.btn) это правило перекрашивало текст
   на оранжевой кнопке в оранжевый — надпись пропадала целиком. */
.on-blue a:not(.btn) { color:var(--c-orange); }

/* ---------- утилиты ---------- */
.container { width:min(var(--max-w),100% - var(--gutter)*2); margin-inline:auto; }
.container--narrow { width:min(var(--max-w-narrow),100% - var(--gutter)*2); }
.section { padding-block:clamp(3rem,7vw,5.5rem); }
.section--tint { background:var(--c-blue-050); }
.section--blue { background:var(--c-blue-800); }
.section__head { max-width:64ch; margin-bottom:var(--s-5); }
.section__head p { margin-top:var(--s-3); }
.stack > * + * { margin-top:var(--s-3); }
.mt-4 { margin-top:var(--s-4); } .mt-5 { margin-top:var(--s-5); } .mt-6 { margin-top:var(--s-6); }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip-link { position:absolute; left:var(--s-3); top:-100px; z-index:100; background:var(--c-white); color:var(--c-ink); padding:var(--s-2) var(--s-4); border-radius:var(--r-pill); box-shadow:var(--sh-md); }
.skip-link:focus { top:var(--s-3); }

/* ---------- кнопки ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:52px; padding:.75rem 1.6rem; border-radius:var(--r-pill);
  font-weight:600; text-decoration:none; text-align:center;
  transition:background var(--tr), color var(--tr), border-color var(--tr);
}
.btn--primary { background:var(--c-orange); color:var(--c-white); box-shadow:var(--sh-orange); }
.btn--primary:hover { background:var(--c-orange-deep); color:var(--c-white); transform:translateY(-1px); }
.btn--ghost { background:transparent; color:var(--c-link); border:2px solid var(--c-line-strong); }
.btn--ghost:hover { border-color:var(--c-link); color:var(--c-link); background:var(--c-blue-050); }
.btn--wide { width:100%; }
.btn[disabled] { opacity:.6; cursor:not-allowed; box-shadow:none; }

/* ---------- шапка ---------- */
/* Шапка прозрачная над первым экраном и уплотняется при прокрутке —
   класс is-stuck ставит main.js. */
.header {
  position:sticky; top:0; z-index:50;
  background:transparent; border-bottom:1px solid transparent;
  transition:background var(--tr), box-shadow var(--tr), border-color var(--tr);
}
/* Первый экран заходит под шапку: иначе прозрачная шапка стоит на белом фоне
   страницы, и сверху получается белая полоса вместо продолжения градиента. */
.hero { margin-top:-76px; padding-top:calc(76px + clamp(2rem, 5vw, 4rem)); }
.header.is-stuck {
  background:rgba(255,255,255,.96);
  border-bottom-color:var(--c-line);
  box-shadow:var(--sh-sm);
  backdrop-filter:saturate(1.4) blur(10px);
}
.header__bar { min-height:76px; }
.header__bar { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-3); min-height:76px; }
/* Логотип как на lin-quest.ru: капсом, LIN тёмный, QUEST оранжевый. */
.logo {
  display:inline-flex; align-items:baseline; gap:0;
  font-family:var(--f-head); font-weight:800; font-size:1.45rem;
  letter-spacing:.02em; color:var(--c-ink); text-decoration:none;
}
.logo b { font-weight:800; color:var(--c-orange); }
.logo span { margin-left:.5rem; color:var(--c-orange-deep); font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.nav { margin-left:auto; }
.nav__list a { white-space:nowrap; }
.nav__list { display:flex; align-items:center; gap:clamp(.85rem, 1.6vw, 1.5rem); }
.nav__list a { color:var(--c-ink); text-decoration:none; font-weight:500; font-size:var(--t-small); }
.nav__list a:hover,.nav__list a[aria-current="page"] { color:var(--c-link); }
.nav__list a[aria-current="page"] { text-decoration:underline; text-decoration-thickness:2px; }
/* «Консультация» — главное действие сайта, в меню она кнопкой, а не ссылкой */
.btn--nav { min-height:48px; padding:.6rem 1.4rem; font-size:var(--t-small); }
.nav__list a.btn--nav { color:var(--c-white); text-decoration:none; }
.nav__list a.btn--nav:hover { color:var(--c-white); background:var(--c-orange-deep); }
@media (max-width:860px) {
  .nav__list li:last-child { padding:var(--s-3) 0 0; }
  .nav__list a.btn--nav { display:inline-flex; }
}
.burger { display:none; margin-left:auto; width:44px; height:44px; align-items:center; justify-content:center; border-radius:var(--r-sm); border:1px solid var(--c-line); }
.burger span { display:block; width:20px; height:2px; background:var(--c-ink); box-shadow:0 -6px 0 var(--c-ink), 0 6px 0 var(--c-ink); }

@media (max-width:860px) {
  .header:not(.is-stuck) { background:rgba(255,255,255,.9); }
  .burger { display:inline-flex; }
  /* Без JS кнопка-бургер скрыта атрибутом hidden, поэтому меню по умолчанию раскрыто
     вторым рядом шапки — иначе на телефоне без JS навигации не было бы вообще.
     Свернуть его в выпадающее умеет только JS, он же и ставит data-open. */
  .nav { width:100%; order:3; margin-left:0; }
  .nav[data-open="false"] { display:none; }
  .nav[data-open="true"] { display:block; }
  .nav__list { flex-direction:column; align-items:stretch; gap:0; padding-bottom:var(--s-2); }
  .nav__list a { display:block; padding:.85rem 0; border-bottom:1px solid var(--c-line); }
  .nav__list li:last-child a { border-bottom:0; }
}

/* ---------- герой ---------- */
.hero { padding-block:clamp(2.5rem,6vw,4.5rem) clamp(2rem,5vw,3.5rem); background:linear-gradient(175deg,#F4F9FE 0%,#E4F0FB 100%); }
.hero h1 { max-width:18ch; }
.hero .lead { margin-top:var(--s-3); max-width:52ch; }
.hero__note { margin-top:var(--s-4); font-size:var(--t-small); color:var(--c-muted); }

/* ---------- развилка ---------- */
.fork { display:grid; gap:var(--s-3); margin-top:var(--s-5); grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.fork__card {
  display:flex; gap:var(--s-3); align-items:flex-start;
  padding:var(--s-4); background:var(--c-white); border:2px solid var(--c-line);
  border-radius:var(--r-lg); text-decoration:none; color:var(--c-body);
  transition:border-color var(--tr), transform var(--tr), box-shadow var(--tr);
}
.fork__card:hover { border-color:var(--c-blue-600); box-shadow:var(--sh-md); transform:translateY(-2px); color:var(--c-body); }
.fork__icon { flex:0 0 auto; width:44px; height:44px; color:var(--c-blue-600); }
.fork__card h2 { font-size:1.25rem; }
.fork__card p { margin-top:.35rem; font-size:var(--t-small); color:var(--c-muted); }
.fork__card .arrow { margin-top:.6rem; display:inline-block; font-weight:600; color:var(--c-link); }

/* ---------- «Знакомо?» ---------- */
.recog { display:grid; gap:var(--s-3); grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.recog li {
  padding:var(--s-4); background:var(--c-white); border-left:4px solid var(--c-orange);
  border-radius:0 var(--r-md) var(--r-md) 0; box-shadow:var(--sh-sm); font-size:1.0625rem;
}

/* ---------- карточки/списки ---------- */
.cards { display:grid; gap:var(--s-4); grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.card { padding:var(--s-4); background:var(--c-white); border:1px solid var(--c-line); border-radius:var(--r-lg); }
.card--tint { background:var(--c-blue-050); border-color:transparent; }
.card h3 + p,.card h3 + ul { margin-top:var(--s-2); }
.card__kicker { display:inline-block; margin-bottom:.4rem; font-size:var(--t-micro); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-orange-deep); }

.checklist li { position:relative; padding-left:1.9rem; }
.checklist li + li { margin-top:var(--s-2); }
.checklist li::before {
  content:""; position:absolute; left:0; top:.45em; width:1.15rem; height:1.15rem;
  border-radius:50%; background:var(--c-orange-050);
  box-shadow:inset 0 0 0 2px var(--c-orange);
}
.checklist li::after {
  content:""; position:absolute; left:.33rem; top:.72em; width:.5rem; height:.28rem;
  border-left:2px solid var(--c-orange-deep); border-bottom:2px solid var(--c-orange-deep);
  transform:rotate(-45deg);
}

.facts { display:grid; gap:var(--s-3); grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); }
.facts div { padding:var(--s-3) var(--s-4); background:var(--c-white); border:1px solid var(--c-line); border-radius:var(--r-md); }
.facts b { display:block; font-family:var(--f-head); font-size:1.5rem; color:var(--c-ink); line-height:1.2; }
.facts span { font-size:var(--t-small); color:var(--c-muted); }

/* ---------- тарифы ---------- */
.price-table { width:100%; border-collapse:collapse; font-size:1.0625rem; }
.price-table caption { text-align:left; font-family:var(--f-head); font-weight:700; font-size:var(--t-h3); color:var(--c-ink); padding-bottom:var(--s-2); }
.price-table th,.price-table td { padding:.9rem .75rem; text-align:left; border-bottom:1px solid var(--c-line); vertical-align:top; }
.price-table thead th { font-size:var(--t-micro); text-transform:uppercase; letter-spacing:.06em; color:var(--c-muted); font-weight:700; }
.price-table td:last-child,.price-table th:last-child { text-align:right; white-space:nowrap; font-weight:600; color:var(--c-ink); }
.price-table tr[data-highlight] td { background:var(--c-orange-050); }
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.legal .table-scroll { margin-top:var(--s-3); }
.legal .table-scroll table { margin-top:0; min-width:32rem; }

.price-hero { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-4); padding:var(--s-5); background:var(--c-white); border:2px solid var(--c-orange); border-radius:var(--r-lg); }
.price-hero .btn { margin-left:auto; }
@media (max-width:600px) { .price-hero .btn { margin-left:0; width:100%; } }
.price-hero__amount { font-family:var(--f-head); font-weight:800; font-size:clamp(2rem,6vw,2.75rem); color:var(--c-ink); line-height:1; }
.price-hero__what { font-size:var(--t-small); color:var(--c-muted); margin-top:.35rem; }

/* ---------- программа по неделям ---------- */
.weeks { counter-reset:w; display:grid; gap:var(--s-2); }
.weeks li { counter-increment:w; display:flex; gap:var(--s-3); padding:var(--s-3) var(--s-4); background:var(--c-white); border:1px solid var(--c-line); border-radius:var(--r-md); }
.weeks li::before { content:counter(w); flex:0 0 2rem; height:2rem; display:grid; place-items:center; border-radius:50%; background:var(--c-blue-050); color:var(--c-link); font-weight:700; font-size:var(--t-small); }

/* ---------- аккордеон FAQ ---------- */
.faq { display:grid; gap:var(--s-2); }
.faq details { background:var(--c-white); border:1px solid var(--c-line); border-radius:var(--r-md); }
.faq summary {
  display:flex; justify-content:space-between; align-items:center; gap:var(--s-3);
  padding:var(--s-3) var(--s-4); cursor:pointer; font-weight:600; color:var(--c-ink);
  list-style:none; min-height:56px;
}
.faq summary::-webkit-details-marker { display:none; }
.faq__q { flex:1 1 auto; min-width:0; }
.faq summary::after { content:""; flex:0 0 auto; width:.6rem; height:.6rem; border-right:2px solid var(--c-link); border-bottom:2px solid var(--c-link); transform:rotate(45deg) translateY(-25%); transition:transform var(--tr); }
.faq details[open] summary::after { transform:rotate(-135deg) translateY(-25%); }
.faq details > div { padding:0 var(--s-4) var(--s-4); }

/* ---------- форма ---------- */
.form-wrap { padding:var(--s-5); background:var(--c-white); border:1px solid var(--c-line); border-radius:var(--r-lg); box-shadow:var(--sh-md); }
.field + .field,.field + fieldset,fieldset + .field { margin-top:var(--s-4); }
.field label,.fieldset__legend { display:block; margin-bottom:.35rem; font-weight:600; color:var(--c-ink); }
.field .hint { display:block; margin-bottom:.35rem; font-size:var(--t-small); color:var(--c-muted); font-weight:400; }
.field input[type="text"],.field input[type="tel"],.field select,.field textarea {
  width:100%; padding:.8rem .9rem; min-height:52px;
  background:var(--c-white); border:2px solid var(--c-line-strong); border-radius:var(--r-sm);
  transition:border-color var(--tr);
}
.field textarea { min-height:108px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus { border-color:var(--c-blue-600); }
.field[data-invalid="true"] input,.field[data-invalid="true"] select,.field[data-invalid="true"] textarea { border-color:var(--c-orange); }
.error { display:none; margin-top:.35rem; font-size:var(--t-small); color:var(--c-orange-deep); font-weight:600; }
.field[data-invalid="true"] .error { display:block; }

fieldset { border:0; padding:0; }
.radio-row { display:grid; gap:var(--s-2); grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
.radio-row label {
  display:flex; align-items:center; gap:.6rem; margin:0; padding:.8rem .9rem; min-height:52px;
  border:2px solid var(--c-line-strong); border-radius:var(--r-sm); cursor:pointer; font-weight:500; color:var(--c-body);
}
.radio-row input { width:1.15rem; height:1.15rem; accent-color:var(--c-blue-600); flex:0 0 auto; }
.radio-row label:has(input:checked) { border-color:var(--c-blue-600); background:var(--c-blue-050); }

.consent { display:flex; gap:.7rem; align-items:flex-start; margin-top:var(--s-4); }
.consent input { width:1.35rem; height:1.35rem; margin-top:.15rem; flex:0 0 auto; accent-color:var(--c-blue-600); }
.consent label { font-weight:400; font-size:var(--t-small); color:var(--c-body); }
.consent-more { margin-top:var(--s-2); font-size:var(--t-small); }
.consent-more summary { cursor:pointer; color:var(--c-link); font-weight:500; }
.consent-more p { margin-top:.5rem; color:var(--c-muted); }
.form-note { margin-top:var(--s-3); font-size:var(--t-small); color:var(--c-muted); }

/* honeypot: убираем со страницы, но не через type=hidden и не через display:none —
   часть ботов игнорирует именно эти два признака. */
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form-done { padding:var(--s-5); background:var(--c-blue-050); border:2px solid var(--c-blue-600); border-radius:var(--r-lg); text-align:center; }
.form-done h3 { color:var(--c-ink); }
.form-done p { margin:var(--s-2) auto 0; }
.form-fail { margin-top:var(--s-3); padding:var(--s-3); border-radius:var(--r-sm); background:var(--c-orange-050); color:#8A4104; font-size:var(--t-small); }

/* ---------- подвал ---------- */
.footer { padding-block:var(--s-6) var(--s-5); background:var(--c-blue-950); color:rgba(255,255,255,.72); }
.footer a { color:rgba(255,255,255,.8); }
.footer a:hover { color:var(--c-white); }
.footer__grid { display:grid; gap:var(--s-5); grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.footer h2 { font-size:1.0625rem; color:var(--c-white); margin-bottom:var(--s-2); }
.footer .logo { color:var(--c-white); }
.footer ul li + li { margin-top:.45rem; }
.footer__about { margin-top:.75rem; color:rgba(255,255,255,.72); }
.footer__line { max-width:none; color:rgba(255,255,255,.72); }
.footer__line--faint { color:rgba(255,255,255,.55); }
.footer__bottom { margin-top:var(--s-5); padding-top:var(--s-4); border-top:1px solid rgba(255,255,255,.14); font-size:var(--t-small); display:grid; gap:.5rem; }

/* ---------- баннер cookie ---------- */
.cookie {
  position:fixed; inset:auto var(--s-3) var(--s-3); z-index:80; max-width:520px; margin-inline:auto;
  padding:var(--s-4); background:var(--c-white); border:1px solid var(--c-line-strong);
  border-radius:var(--r-lg); box-shadow:var(--sh-lg);
}
.cookie[hidden] { display:none; }
.cookie p { font-size:var(--t-small); }
.cookie__buttons { display:flex; flex-wrap:wrap; gap:var(--s-2); margin-top:var(--s-3); }
.cookie__buttons .btn { min-height:46px; flex:1 1 auto; }

/* ---------- правовые страницы ---------- */
.legal { padding-block:var(--s-6); }
.legal h2 { margin-top:var(--s-5); font-size:1.4rem; }
.legal h3 { margin-top:var(--s-4); }
.legal p,.legal li { max-width:72ch; }
.legal ul { margin-top:var(--s-2); }
.legal ul li { position:relative; padding-left:1.2rem; }
.legal ul li + li { margin-top:.4rem; }
.legal ul li::before { content:""; position:absolute; left:.25rem; top:.7em; width:.35rem; height:.35rem; border-radius:50%; background:var(--c-orange); }
.legal ol { margin-top:var(--s-2); padding-left:1.4rem; list-style:decimal; }
.legal ol li + li { margin-top:.4rem; }
.legal table { width:100%; border-collapse:collapse; margin-top:var(--s-3); font-size:var(--t-small); }
.legal th,.legal td { padding:.65rem .6rem; border:1px solid var(--c-line); text-align:left; vertical-align:top; }
.legal thead th { background:var(--c-blue-050); color:var(--c-ink); }
.legal .updated { color:var(--c-muted); font-size:var(--t-small); }


/* ============================================================
   Фирменная графика и движение.
   Тот же язык, что на lin-quest.ru — волны, точки, вертикальный
   хангыль, — но спокойнее: аудитория читает с телефона после смены,
   декор не должен мешать тексту.
   ============================================================ */

/* ---------- появление при прокрутке ---------- */
/* Класс js ставит main.js. Без JS ничего не прячется — страница просто статична. */
.js [data-reveal] { opacity:0; transform:translateY(18px); }
.js [data-reveal].is-in { opacity:1; transform:none; transition:opacity 600ms ease, transform 600ms cubic-bezier(.2,.7,.3,1); }
.js [data-reveal][data-delay="1"].is-in { transition-delay:90ms; }
.js [data-reveal][data-delay="2"].is-in { transition-delay:180ms; }
.js [data-reveal][data-delay="3"].is-in { transition-delay:270ms; }
@media (prefers-reduced-motion:reduce) {
  .js [data-reveal] { opacity:1; transform:none; }
}

/* ---------- волна между секциями ---------- */
.wave { position:absolute; left:0; width:100%; line-height:0; pointer-events:none; z-index:1; }
.wave--top { top:-1px; }
.wave--bottom { bottom:-1px; }
.wave svg { width:100%; height:clamp(36px,5vw,72px); display:block; }
.wave--breathe svg { animation:wave-breathe 22s ease-in-out infinite; }
@keyframes wave-breathe { 0%,100% { transform:translateX(-12px); } 50% { transform:translateX(12px); } }
@media (prefers-reduced-motion:reduce) { .wave--breathe svg { animation:none; } }

/* ---------- точечная сетка ---------- */
.dots {
  position:absolute; pointer-events:none; z-index:0; opacity:.4;
  background-image:radial-gradient(var(--c-blue-600) 2px, transparent 2px);
  background-size:18px 18px;
}

/* ---------- вертикальный хангыль ---------- */
.vertical-kr {
  writing-mode:vertical-rl; text-orientation:upright;
  font-family:var(--f-kr); font-weight:500; letter-spacing:.18em; line-height:1.35;
  user-select:none; pointer-events:none;
}
.vertical-kr__wrap {
  position:absolute; z-index:1; display:grid; gap:.45rem;
  grid-template-columns:auto auto; grid-template-areas:"text rule" "cap cap"; justify-items:center;
}
.vertical-kr__wrap .vertical-kr { grid-area:text; }
.vertical-kr__rule { grid-area:rule; width:1px; align-self:stretch; background:currentColor; opacity:.4; }
/* перевод всегда горизонтальной строкой: кириллица столбцом не читается */
.vertical-kr__wrap small { grid-area:cap; writing-mode:horizontal-tb; white-space:nowrap; margin-top:.3rem; }

/* ---------- кикер ---------- */
.kicker {
  display:inline-flex; align-items:center; gap:.5em; margin-bottom:var(--s-2);
  font-size:var(--t-micro); font-weight:700; text-transform:uppercase; letter-spacing:.12em;
  color:var(--c-link);
}
.kicker::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--c-orange); flex:0 0 auto; }
.on-blue .kicker { color:var(--c-blue-200); }

/* ---------- секции с графикой ---------- */
.section { position:relative; }
.section--blue { background:var(--g-blue); overflow:hidden; }
.section--figure { overflow:hidden; }

/* ---------- герой ---------- */
.hero { position:relative; overflow:hidden; background:var(--g-hero); }
.hero:not(.hero--accent) > .hangul-field { z-index:0; }
.hero > .container { position:relative; z-index:2; }
.hero__inner { position:relative; z-index:2; display:grid; gap:var(--s-6); align-items:center; }
@media (min-width:960px) { .hero__inner { grid-template-columns:1.05fr .95fr; } }
.hero__dots { left:-2rem; bottom:12%; width:130px; height:130px; }
.group__vertical { top:14%; left:calc(var(--gutter) / 2); color:var(--c-blue-200); }
.group__vertical .vertical-kr { font-size:18px; opacity:.7; }
.group__vertical small { font-size:var(--t-micro); opacity:.55; }
@media (max-width:1180px) { .group__vertical { display:none; } }

/* стопка карточек с настоящими фразами — она же главная картинка первого экрана */
.phrase-stack { position:relative; display:grid; gap:var(--s-3); }
.phrase {
  display:grid; gap:.35rem; padding:var(--s-4);
  background:var(--c-white); border-radius:var(--r-lg);
  box-shadow:var(--sh-md); border:1px solid rgba(255,255,255,.9);
}
.phrase b { font-family:var(--f-kr); font-size:1.35rem; font-weight:600; color:var(--c-ink); line-height:1.3; }
.phrase span { font-size:var(--t-small); color:var(--c-muted); }
.phrase i { font-style:normal; font-size:var(--t-micro); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-orange-deep); }
.js .phrase { animation:phrase-float 9s ease-in-out infinite; }
.js .phrase:nth-child(2) { animation-delay:-3s; }
.js .phrase:nth-child(3) { animation-delay:-6s; }
@keyframes phrase-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-7px); } }
@media (prefers-reduced-motion:reduce) { .js .phrase { animation:none; } }
@media (min-width:960px) {
  .phrase-stack { padding-left:var(--s-5); }
  .phrase:nth-child(2) { margin-left:var(--s-5); }
  .phrase:nth-child(3) { margin-left:calc(var(--s-5) * 2); }
}

/* ---------- бегущая строка ---------- */
.marquee { overflow:hidden; background:var(--g-blue); height:58px; display:flex; align-items:center; }
.marquee__track { display:flex; white-space:nowrap; animation:marquee 46s linear infinite; }
.marquee__track span {
  padding-right:2.5rem; color:var(--c-white); font-size:var(--t-small); font-weight:500;
}
.marquee__track b { font-family:var(--f-kr); font-weight:600; color:var(--c-orange); }
@keyframes marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce) { .marquee__track { animation:none; } }

/* ---------- карточки: подъём ---------- */
.card { transition:transform var(--tr), box-shadow var(--tr), border-color var(--tr); }
.card:hover { transform:translateY(-4px); box-shadow:var(--sh-md); }
.card--flat:hover { transform:none; box-shadow:none; }

/* плитки на синем */
.tile {
  padding:var(--s-4); border-radius:var(--r-lg);
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18);
  transition:transform var(--tr), background var(--tr);
}
.tile:hover { transform:translateY(-4px); background:rgba(255,255,255,.18); }
.tile h3 { color:var(--c-white); margin-bottom:var(--s-2); }
.tile p { color:rgba(255,255,255,.92); }
.tile__num { font-family:var(--f-head); font-weight:800; font-size:1.75rem; color:var(--c-orange); line-height:1; margin-bottom:var(--s-2); }

/* ---------- крупные цифры ---------- */
.facts div { transition:transform var(--tr), box-shadow var(--tr); }
.facts div:hover { transform:translateY(-3px); box-shadow:var(--sh-sm); }

/* ---------- липкая кнопка на телефоне ---------- */
.sticky-cta {
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  padding:var(--s-2) var(--s-3) calc(var(--s-2) + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.95); border-top:1px solid var(--c-line);
  backdrop-filter:blur(10px);
  transform:translateY(115%); transition:transform var(--tr);
}
.sticky-cta.is-shown { transform:none; }
.sticky-cta .btn { width:100%; }
@media (min-width:860px) { .sticky-cta { display:none; } }
/* чтобы плашка cookie не легла поверх липкой кнопки */
@media (max-width:859px) { .cookie { bottom:5.25rem; } }

/* ---------- акцентная рамка тарифа ---------- */
.price-hero { position:relative; overflow:hidden; }
.price-hero::after {
  content:""; position:absolute; inset:auto -40px -60px auto; width:180px; height:180px;
  background:var(--c-orange-050); border-radius:50%; z-index:0;
}
.price-hero > * { position:relative; z-index:1; }

/* ============================================================
   Блоки, перенесённые из lin-quest.ru: видео-приветствие, автор,
   отзывы, подтверждения, карточки форматов, разбор занятия.
   ============================================================ */

/* ---------- бейдж и стрелка-ссылка ---------- */
.badge {
  display:inline-block; padding:.35rem .85rem; border-radius:var(--r-pill);
  background:var(--g-orange); color:var(--c-white);
  font-size:var(--t-micro); font-weight:700; text-transform:uppercase; letter-spacing:.06em;
}
.badge--quiet { background:var(--c-blue-050); color:var(--c-link); }
.link-arrow { display:inline-flex; align-items:center; gap:.35em; min-height:44px; font-weight:600; }
.link-arrow span { transition:transform var(--tr); }
.link-arrow:hover span { transform:translate(2px,-2px); }

/* ---------- видео-приветствие ---------- */
.video-bubble { position:relative; display:inline-grid; justify-items:center; gap:.5rem; }
.video-bubble__open {
  position:relative; display:grid; place-items:center;
  width:132px; height:132px; border-radius:50%; overflow:hidden;
  border:4px solid var(--c-white); box-shadow:var(--sh-lg); padding:0;
}
.video-bubble__loop { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.video-bubble__play {
  position:relative; z-index:1; display:grid; place-items:center;
  width:44px; height:44px; border-radius:50%; background:var(--c-orange); color:#2A1400;
  box-shadow:0 6px 18px -6px rgba(0,0,0,.5);
}
.video-bubble__label {
  display:block; padding:.2rem .7rem; border-radius:var(--r-pill); white-space:nowrap;
  background:var(--c-ink); color:var(--c-white); font-size:var(--t-micro); font-weight:600;
}
.video-bubble__open:hover .video-bubble__play { background:var(--c-orange-deep); color:var(--c-white); }
.hero__video { display:flex; align-items:center; gap:var(--s-3); margin-top:var(--s-5); }
.hero__video p { font-size:var(--t-small); color:var(--c-muted); max-width:22ch; }

/* модальное окно с видео */
.modal {
  position:fixed; inset:0; z-index:95; display:none;
  align-items:center; justify-content:center; padding:var(--gutter);
  background:rgba(12,36,80,.88);
}
.modal.is-open { display:flex; }
.modal__inner { position:relative; width:min(760px,100%); }
.modal video, .modal img { width:100%; height:auto; max-height:82vh; border-radius:var(--r-md); box-shadow:var(--sh-lg); }
.modal img { object-fit:contain; }
.modal__close {
  position:absolute; top:-56px; right:0; width:46px; height:46px; border-radius:50%;
  background:var(--c-white); color:var(--c-ink); display:grid; place-items:center;
}

/* ---------- автор курса ---------- */
.author__inner { display:grid; gap:var(--s-5); align-items:start; }
@media (min-width:860px) { .author__inner { grid-template-columns:.85fr 1.15fr; gap:var(--s-6); } }
.author__media { position:relative; }
.author__photo {
  position:relative; z-index:1; width:100%; border-radius:var(--r-lg);
  box-shadow:var(--sh-lg); object-fit:cover;
}
.author__blob {
  position:absolute; z-index:0; inset:-6% -8% auto -8%; aspect-ratio:1/1.1;
  background:var(--g-orange); border-radius:58% 42% 46% 54% / 52% 48% 52% 48%; opacity:.85;
}
/* на узком экране оранжевое пятно вылезало за край и добавляло 8px горизонтальной прокрутки */
@media (max-width:600px) { .author__blob { inset:-4% 0 auto 0; } }
.author__stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:var(--s-3); margin-top:var(--s-5); }
.author__stats p { margin:0; }
.author__stats b { display:block; font-family:var(--f-head); font-weight:800; font-size:1.85rem; color:var(--c-blue-600); line-height:1; }
.author__stats span { font-size:var(--t-small); color:var(--c-muted); }
.author__copy p + p { margin-top:var(--s-3); }

/* ---------- отзывы ---------- */
.slider__head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--s-4); }
.slider__nav { display:flex; align-items:center; gap:var(--s-2); }
.slider__nav button {
  width:46px; height:46px; border-radius:50%; border:2px solid var(--c-line-strong);
  display:grid; place-items:center; color:var(--c-link); background:var(--c-white);
  transition:border-color var(--tr), background var(--tr);
}
.slider__nav button:hover { border-color:var(--c-link); background:var(--c-blue-050); }
.slider__count { font-variant-numeric:tabular-nums; color:var(--c-muted); font-size:var(--t-small); min-width:3.5rem; text-align:center; }
.rating { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-top:var(--s-2); font-size:var(--t-small); color:var(--c-muted); }
.rating__stars { color:var(--c-star); letter-spacing:.1em; }
.review {
  margin-top:var(--s-5); padding:var(--s-5);
  background:var(--c-white); border:1px solid var(--c-line); border-radius:var(--r-lg); box-shadow:var(--sh-sm);
}
.review__quote { font-family:var(--f-head); font-size:2.75rem; line-height:1; color:var(--c-blue-200); }
.review__text { font-size:var(--t-lead); color:var(--c-ink); margin-block:var(--s-2) var(--s-4); max-width:62ch; }
.review__person { display:flex; align-items:center; gap:var(--s-3); }
.review__dot { width:46px; height:46px; flex:0 0 46px; border-radius:50%; display:grid; place-items:center; background:var(--c-blue-050); color:var(--c-link); font-weight:700; }
.review__person b { display:block; color:var(--c-ink); }
.review__person small { display:block; color:var(--c-muted); font-size:var(--t-small); }

/* ---------- подтверждения ---------- */
.proofs { display:grid; gap:var(--s-4); grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.proof { display:grid; gap:var(--s-2); padding:0; text-align:left; }
.proof img { width:100%; border-radius:var(--r-md); border:1px solid var(--c-line); box-shadow:var(--sh-sm); transition:transform var(--tr), box-shadow var(--tr); }
.proof:hover img { transform:translateY(-3px); box-shadow:var(--sh-md); }
.proof span { font-size:var(--t-small); color:var(--c-muted); }

/* ---------- разбор занятия ---------- */
.lesson { margin-top:var(--s-6); }
.lesson__list { display:grid; gap:var(--s-3); margin-top:var(--s-4); }
@media (min-width:900px) { .lesson__list { grid-template-columns:repeat(4,1fr); } }
.lesson__step { padding:var(--s-4); border-radius:var(--r-md); background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16); }
.lesson__num { display:flex; align-items:center; gap:.5rem; margin-bottom:.35rem; }
.lesson__num b { font-family:var(--f-head); font-weight:800; font-size:1.5rem; color:var(--c-orange); line-height:1; }
.lesson__num .vertical-kr { writing-mode:horizontal-tb; font-size:.8rem; color:var(--c-orange); letter-spacing:.08em; }
.lesson__time { font-size:var(--t-micro); text-transform:uppercase; letter-spacing:.07em; color:var(--c-blue-200); font-weight:700; }
.lesson__step h4 { color:var(--c-white); margin-block:.35rem .35rem; }
.lesson__step p { color:rgba(255,255,255,.9); font-size:var(--t-small); }
.lesson__note { margin-top:var(--s-3); font-size:var(--t-small); color:rgba(255,255,255,.75); }

/* ---------- карточки форматов ---------- */
.formats { display:grid; gap:var(--s-4); grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); align-items:start; }
.format { display:flex; flex-direction:column; gap:var(--s-3); height:100%; }
.format--featured { border:2px solid var(--c-orange); box-shadow:var(--sh-md); }
.format ul { display:grid; gap:.45rem; font-size:var(--t-small); }
.format li { display:flex; gap:.5rem; }
.format li::before { content:"—"; color:var(--c-orange); flex:0 0 auto; }
.format__price { margin-top:auto; padding-top:var(--s-2); }
.format__main { font-family:var(--f-head); font-weight:800; font-size:1.6rem; color:var(--c-ink); line-height:1.1; }
.format__sub { font-size:var(--t-small); color:var(--c-muted); }

/* ---------- разлёт хангыля на первом экране ---------- */
.hangul-field { position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none; }
.hangul {
  position:absolute; font-family:var(--f-kr); font-weight:700; line-height:1;
  will-change:transform, opacity; user-select:none; transform:translate3d(0,0,0);
}
.hangul--blue { color:var(--c-blue-600); }
.hangul--orange { color:var(--c-orange); }
.hangul--outline { -webkit-text-stroke:2px currentColor; color:transparent; }
/* без JS буквы не раскладываются по кругу и лежали бы кучей в углу — не показываем их вовсе */
html:not(.js) .hangul-field { display:none; }
@media (prefers-reduced-motion:reduce) { .hangul { transition:none; } }

/* ---------- фото в герое с карточками фраз поверх ---------- */
.hero__media { position:relative; z-index:2; }
.hero__photo {
  width:100%; border-radius:var(--r-lg); box-shadow:var(--sh-lg);
  aspect-ratio:4/5; object-fit:cover; object-position:50% 22%;
}
/* Карточки с фразами — отдельной строкой под первым экраном.
   Поверх фотографии они закрывали человека, ради которого её и ставили. */
.phrase-row { display:grid; gap:var(--s-3); margin-top:var(--s-5);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.phrase-row .phrase { padding:var(--s-3) var(--s-4); }
.phrase-row .phrase b { font-size:1.2rem; }

/* развилка — отдельной широкой строкой под первым экраном, иначе заголовки карточек
   ломаются в узкой колонке по одному слову */
.fork { margin-top:var(--s-6); grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.fork__card h2 { font-size:1.2rem; text-wrap:pretty; }

/* ---------- кадры с занятия ---------- */
.shots { display:grid; gap:var(--s-4); grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.shots .proof img { aspect-ratio:16/10; object-fit:cover; }

/* ============================================================
   Первый экран главной.
   Был тёмно-синим (#0C2450) — этого цвета в фирменных материалах нет:
   на баннерах бренд светлый, с ярким #1B7FE0 и оранжевым по светло-голубому.
   Поэтому герой светлый, тем же градиентом, что на lin-quest.ru.
   ============================================================ */
.hero--accent { background:var(--g-hero); }
.hero--accent h1 { color:var(--c-ink); }
.hero--accent .lead,
.hero--accent .hero__video p { color:var(--c-body); }
.hero--accent h1 em { color:var(--c-blue-600); }
.hero--accent .kicker { color:var(--c-link); }
.hero--accent .kicker::before { background:var(--c-orange); }
.hero--accent .hero__note a { color:var(--c-link); }
.hero--accent .dots { background-image:radial-gradient(var(--c-blue-400) 2px, transparent 2px); opacity:.5; }
.hero--accent .video-bubble__open { border-color:var(--c-white); }
.hero--accent .video-bubble__label { background:var(--c-ink); color:var(--c-white); }
/* фото в ханбоке — портрет, поэтому пропорция выше и кадр по центру */
.hero--accent .hero__photo { aspect-ratio:9/13; object-position:50% 18%; }
.hero--accent .fork__card { border-color:var(--c-line); background:var(--c-white); }
.hero--accent .fork__card:hover { border-color:var(--c-blue-600); }

/* ---------- разлёт хангыля на первом экране ---------- */
.hangul-field { position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none; }
.hangul {
  position:absolute; font-family:var(--f-kr); font-weight:700; line-height:1;
  will-change:transform, opacity; user-select:none; transform:translate3d(0,0,0);
}
.hangul--blue { color:var(--c-blue-600); }
.hangul--orange { color:var(--c-orange); }
.hangul--outline { -webkit-text-stroke:2px currentColor; color:transparent; }
/* без JS буквы не раскладываются по кругу и лежали бы кучей в углу — не показываем их вовсе */
html:not(.js) .hangul-field { display:none; }
@media (prefers-reduced-motion:reduce) { .hangul { transition:none; } }

/* ---------- фото в герое с карточками фраз поверх ---------- */
.hero__media { position:relative; z-index:2; }
.hero__photo {
  width:100%; border-radius:var(--r-lg); box-shadow:var(--sh-lg);
  aspect-ratio:4/5; object-fit:cover; object-position:50% 22%;
}
/* Карточки с фразами — отдельной строкой под первым экраном.
   Поверх фотографии они закрывали человека, ради которого её и ставили. */
.phrase-row { display:grid; gap:var(--s-3); margin-top:var(--s-5);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.phrase-row .phrase { padding:var(--s-3) var(--s-4); }
.phrase-row .phrase b { font-size:1.2rem; }

/* развилка — отдельной широкой строкой под первым экраном, иначе заголовки карточек
   ломаются в узкой колонке по одному слову */
.fork { margin-top:var(--s-6); grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.fork__card h2 { font-size:1.2rem; text-wrap:pretty; }

/* ---------- кадры с занятия ---------- */
.shots { display:grid; gap:var(--s-4); grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.shots .proof img { aspect-ratio:16/10; object-fit:cover; }

/* ============================================================
   Яркий первый экран главной. Отдельным модификатором: на /work
   и /school герой остаётся светлым, иначе три подряд тёмных экрана
   и сайт перестаёт дышать.

/* ============================================================
   Присланные иллюстрации и фоновые текстуры.
   Исходники — в assets/img/_src/, пережимает их tools/make-assets.py.
   ============================================================ */

/* Иллюстрация в герое: горизонтальная, кадрировать её нельзя — потеряется сцена. */
.hero__photo--art { aspect-ratio:3/2; object-fit:contain; box-shadow:none; border-radius:var(--r-md); }
.hero--accent .hero__photo--art { aspect-ratio:3/2; object-position:50% 50%; }

/* Текстуры.
   На светлом герое тёмно-синяя картинка не годится — там лежит лёгкий
   паттерн из чамо. Синий блок про группы остаётся синим, но фирменным
   ярким (#1B7FE0 → #0F5FB8), а не утемнённым до navy. */
.hero--accent::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:url("../img/pattern-hangul.jpg");
  background-image:image-set(url("../img/pattern-hangul.webp") type("image/webp"),
                             url("../img/pattern-hangul.jpg") type("image/jpeg"));
  background-repeat:repeat;
  background-size:235px 235px;
  opacity:.7;
}
.section--texture {
  background-color:#1B7FE0;
  background-image:var(--g-blue);
}
/* Текстуру с синего блока убрал: у картинки был виден край, и она читалась
   как отдельный прямоугольник поверх градиента. Остаётся чистый градиент. */
.hero--accent > .container,
.section--texture > .container { position:relative; z-index:2; }
.hero--accent > .hangul-field,
.section--texture > .hangul-field { z-index:1; }

/* Светлый бесшовный паттерн из чамо. Плитка честно бесшовная — проверено по стыкам. */
.section--pattern {
  background-image:url("../img/pattern-hangul.jpg");
  background-image:image-set(url("../img/pattern-hangul.webp") type("image/webp"),
                             url("../img/pattern-hangul.jpg") type("image/jpeg"));
  background-repeat:repeat;
  background-size:235px 235px;
}



/* ---------- герой по образцу lin-quest.ru ---------- */
.hero__actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-4); margin-top:var(--s-5); }
.hero__badges { display:flex; flex-wrap:wrap; gap:var(--s-4); margin-top:var(--s-5); }
.hero__badge { display:flex; align-items:center; gap:var(--s-2); font-weight:500; color:var(--c-ink); font-size:var(--t-small); }
.circle-badge {
  display:grid; place-items:center; width:64px; height:64px; flex:0 0 64px;
  background:var(--c-white); border:2px solid var(--c-blue-200); border-radius:50%;
  color:var(--c-blue-600); box-shadow:var(--sh-sm);
}
.circle-badge.kr { font-family:var(--f-kr); font-weight:700; font-size:1.15rem; }
.circle-badge.kr:not(:lang(ko)) { font-size:.78rem; letter-spacing:.02em; }
.circle-badge svg { width:26px; height:26px; }

/* карточка в углу фотографии — тот самый уголок из референса */
.hero__card {
  position:absolute; z-index:3; left:0; bottom:var(--s-5);
  max-width:16rem; padding:var(--s-3) var(--s-4);
  background:var(--c-white); border-radius:var(--r-md); box-shadow:var(--sh-lg);
}
.hero__card span {
  display:block; font-size:var(--t-micro); font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--c-orange-deep);
}
.hero__card strong { display:block; margin-top:.3rem; font-family:var(--f-head); color:var(--c-ink); line-height:1.3; }
@media (min-width:960px) { .hero__card { left:calc(var(--s-6) * -1); } }
/* вариант для иллюстраций: сюжет у них слева, свободное место справа */
.hero__card--right { left:auto; right:0; bottom:var(--s-4); }
@media (min-width:960px) { .hero__card--right { right:calc(var(--s-5) * -1); left:auto; } }
@media (max-width:600px) { .hero__card { position:static; max-width:none; margin-top:var(--s-3); box-shadow:var(--sh-md); } }

/* видео-приветствие: всплывает при прокрутке, как на референсе */
.video-bubble--float {
  position:fixed; left:var(--s-4); bottom:var(--s-4); z-index:76;
  opacity:0; visibility:hidden; transform:translateY(10px) scale(.96);
  transition:opacity var(--tr), transform var(--tr), visibility var(--tr);
}
.video-bubble--float.is-shown { opacity:1; visibility:visible; transform:none; }
@media (max-width:859px) {
  /* снизу живёт липкая кнопка заявки — поднимаем виджет над ней */
  .video-bubble--float { left:var(--s-3); bottom:calc(4.9rem + env(safe-area-inset-bottom)); }
  .video-bubble--float .video-bubble__open { width:96px; height:96px; }
}


/* ---------- таблицы программы обучения ---------- */
.plan { width:100%; border-collapse:collapse; font-size:var(--t-small); min-width:44rem; }
.plan th, .plan td { padding:.9rem .85rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--c-line); }
.plan thead th {
  font-size:var(--t-micro); text-transform:uppercase; letter-spacing:.06em;
  color:var(--c-muted); font-weight:700; background:var(--c-blue-050);
  position:sticky; top:0;
}
.plan tbody tr:hover { background:var(--c-blue-050); }
.plan__n { width:3rem; font-family:var(--f-head); font-weight:800; color:var(--c-blue-600); font-size:1.05rem; }
.plan strong { color:var(--c-ink); }
.plan__step {
  display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s-3);
  padding-bottom:.5rem; border-bottom:3px solid var(--c-orange); width:fit-content;
}
.plan__step span { font-family:var(--f-body); font-size:var(--t-small); font-weight:500; color:var(--c-muted); }

/* ---------- кнопка «наверх» ---------- */
.to-top {
  position:fixed; right:var(--s-4); bottom:var(--s-4); z-index:75;
  width:50px; height:50px; border-radius:50%; display:grid; place-items:center;
  background:var(--c-white); color:var(--c-blue-600);
  border:1px solid var(--c-line); box-shadow:var(--sh-md);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity var(--tr), transform var(--tr), visibility var(--tr), background var(--tr);
}
.to-top.is-shown { opacity:1; visibility:visible; transform:none; }
.to-top:hover { background:var(--c-blue-050); }
@media (max-width:859px) {
  /* снизу липкая кнопка заявки — поднимаем над ней */
  .to-top { right:var(--s-3); bottom:calc(4.9rem + env(safe-area-inset-bottom)); width:46px; height:46px; }
}