:root{
    --bg:#FFF9FB;
    --card:#FFFFFF;
    --accent:#D977A7;
    --accent-2:#F3D6E5;
    --ink:#2D2433;
    --ink-soft:#6B6470;
    --line:#F1E4EC;
    --accent-deep:#B85D8A;
    /* Тот же плум, но глубже — только для ТЕКСТА на светло-розовой подложке.
       У --accent-deep на --accent-2 контраст 3.1:1, для мелкого текста мало.
       У этого — 5.2:1. Для иконок и рамок по-прежнему годится --accent-deep. */
    --accent-ink:#8A3F63;
    --shadow: 0 12px 32px -12px rgba(45,36,51,0.14);
    --shadow-lg: 0 24px 64px -20px rgba(45,36,51,0.20);
    --radius: 24px;
    --radius-sm: 16px;
    --serif: 'Fraunces', serif;

    /* Токены движения. Одни и те же длительности и кривые по всему сайту —
       так анимации читаются как один почерк, а не как набор случайных эффектов. */
    --dur-fast: .18s;    /* отклик на нажатие, смена цвета */
    --dur-base: .32s;    /* наведение, раскрытие, подсветка поля */
    --dur-slow: .6s;     /* появление блока по скроллу */
    --dur-reveal: .85s;  /* выезд заголовка по словам */
    --ease-out: cubic-bezier(.22,.8,.28,1);   /* торможение на подлёте — для появлений */
    --ease-in-out: cubic-bezier(.65,0,.35,1); /* для уходов и занавеса */

    /* Шкала отступов — вместо произвольных значений */
    --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
    --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

    --focus: 0 0 0 3px var(--bg), 0 0 0 5.5px var(--accent-deep);
  }

  *{ margin:0; padding:0; box-sizing:border-box; }
  html{ scroll-behavior:smooth; }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
    /* Скролл-анимации переводим обратно на обычную шкалу времени: вместе с нулевой
       длительностью выше это мгновенно ставит элемент в конечное состояние, а не оставляет
       его невидимым в начале трека. */
    *{ animation-timeline:auto !important; animation-range:normal !important; }
    .preloader{ display:none !important; }
    .reveal{ opacity:1 !important; transform:none !important; }
    .word-in{ transform:none !important; }
  }

  /* Базовый цвет переехал на html, а body стал прозрачным — иначе фон страницы
     закрывал бы холст с живым фоном, лежащий под содержимым. */
  html{ background:var(--bg); }

  body{
    background:transparent; color:var(--ink); font-family:'Inter', sans-serif;
    line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; position:relative;
  }

  /* width/height здесь обязательны. canvas — заменяемый элемент: при width:auto
     он берёт размер из атрибутов width/height, а их выставляет скрипт. Без явных
     100% получалась петля — ResizeObserver менял атрибуты, те меняли размер
     коробки, наблюдатель срабатывал снова, и холст разрастался до сотен тысяч пикселей. */
  .voxel-bg{
    position:fixed; inset:0; width:100%; height:100%;
    z-index:-1; display:block; pointer-events:none;
  }

  /* Зернистость поверх страницы. mix-blend-mode здесь убран намеренно: режим наложения
     заставляет браузер перерисовывать подложку на каждом кадре скролла, и на телефонах
     это была главная причина подтормаживания. contain изолирует слой от остальной страницы. */
  body::before{
    content:''; position:fixed; inset:0; z-index:2; pointer-events:none; opacity:0.03; contain:strict;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }

  h1,h2,h3,h4{ font-family:'Manrope', sans-serif; color:var(--ink); line-height:1.15; letter-spacing:-0.02em; }
  a{ text-decoration:none; color:inherit; }
  ul{ list-style:none; }
  /* height:auto здесь обязателен. У картинок проставлены атрибуты width/height —
     они резервируют место и не дают странице дёргаться при загрузке, но без
     height:auto браузер берёт высоту прямо из атрибута и растягивает картинку.
     Там, где высота задаётся осознанно (фото в рамках), правила ниже её переопределяют. */
  img{ max-width:100%; height:auto; display:block; }
  button{ font-family:inherit; cursor:pointer; border:none; background:none; }
  input{ font-family:inherit; }

  .wrap{ max-width:1200px; margin:0 auto; padding:0 32px; }

  /* ---------- ИКОНКИ ----------
     Один набор вместо эмодзи: эмодзи рисуются шрифтом операционной системы,
     поэтому на Windows, Android и iPhone выглядят по-разному и сбивают стиль. */
  .icon-sprite{ display:none; }
  .ic-svg{
    width:1em; height:1em; fill:none; stroke:currentColor;
    stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
  }
  .ic-fill{ width:1em; height:1em; fill:currentColor; stroke:none; }

  /* ---------- ДОСТУПНОСТЬ ---------- */

  /* Ссылка для тех, кто ходит по сайту с клавиатуры: первым же Tab даёт пропустить меню. */
  .skip-link{
    position:absolute; left:var(--s-4); top:-72px; z-index:2100;
    background:var(--ink); color:#fff; padding:var(--s-3) var(--s-5); border-radius:0 0 12px 12px;
    font-family:'Manrope', sans-serif; font-weight:700; font-size:14px;
    transition:top var(--dur-base) var(--ease-out);
  }
  .skip-link:focus{ top:0; }

  /* Единое кольцо фокуса. :focus-visible — значит видно при работе с клавиатуры,
     но не появляется от обычного клика мышью. outline сам повторяет скругление элемента. */
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{
    outline:2.5px solid var(--accent-deep);
    outline-offset:3px;
  }

  /* ---------- ЗАСТАВКА ПРИ ЗАГРУЗКЕ ---------- */
  .preloader{
    position:fixed; inset:0; z-index:2000; background:var(--bg);
    display:flex; align-items:center; justify-content:center;
    transition:transform .72s var(--ease-in-out), opacity .45s ease .18s, visibility 0s linear .72s;
    /* Страховка на случай, если script.js не загрузился: заставка уберётся сама. */
    animation:lxFailsafe 0s linear 2.6s forwards;
  }
  .preloader.done{ transform:translateY(-100%); opacity:0; visibility:hidden; pointer-events:none; }
  @keyframes lxFailsafe{ to{ transform:translateY(-100%); opacity:0; visibility:hidden; pointer-events:none; } }

  .lx-ring{
    stroke-dasharray:2608; stroke-dashoffset:2608;
    transform:rotate(-90deg); transform-origin:50% 50%;
    animation:lxRing .8s var(--ease-out) forwards;
  }
  @keyframes lxRing{ to{ stroke-dashoffset:0; } }
  .lx-l{ opacity:0; transform:translateY(60px); animation:lxL .5s var(--ease-out) .4s forwards; }
  @keyframes lxL{ to{ opacity:1; transform:translateY(0); } }

  /* ---------- РАСКРЫВАЮЩИЕСЯ КАРТОЧКИ ---------- */
  /* Заголовок карточки — настоящая кнопка, а псевдоэлемент растягивает её зону нажатия
     на всю карточку. Так мышью кликается вся плитка, а с клавиатуры фокус один и понятный. */
  .why-toggle, .tl-toggle{
    font:inherit; color:inherit; letter-spacing:inherit; text-align:left;
    display:block; width:100%; cursor:pointer;
  }
  .why-toggle::after, .tl-toggle::after{ content:''; position:absolute; inset:0; z-index:1; }
  .why-toggle:focus-visible, .tl-toggle:focus-visible{ outline:none; }
  .why-card:has(.why-toggle:focus-visible),
  .tl-step:has(.tl-toggle:focus-visible){ outline:2.5px solid var(--accent-deep); outline-offset:3px; }
  .why-detail, .tl-detail{ position:relative; z-index:2; }

  .eyebrow{
    display:inline-flex; align-items:center; gap:8px; font-family:'Manrope', sans-serif; font-weight:700;
    font-size:12.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent-deep); margin-bottom:16px;
  }
  .eyebrow::before{ content:''; width:18px; height:2px; background:var(--accent); border-radius:2px; }

  .section{ padding:120px 0; }

  /* content-visibility здесь сознательно не используется: высота блока цен на десктопе
     около 1000 px, а на телефоне втрое больше, поэтому любая заранее заданная
     contain-intrinsic-size окажется неверной и полоса прокрутки будет прыгать.
     Выигрыш от пропуска отрисовки двух секций этого не стоит. */

  .section-head{ max-width:640px; margin-bottom:64px; }
  .section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
  .section-head h2{ font-size:clamp(28px, 3.6vw, 42px); margin-bottom:16px; }
  .section-head p{ color:var(--ink-soft); font-size:17px; max-width:520px; }
  .section-head.center p{ margin:0 auto; }

  .serif-italic{ font-family:var(--serif); font-style:italic; font-weight:500; }

  .scroll-progress{ position:fixed; top:0; left:0; height:3px; width:0%; background:linear-gradient(90deg, var(--accent), var(--accent-deep)); z-index:1500; transition:width .08s linear; }

  /* ---------- BUTTONS ---------- */
  .btn{
    position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:16px 30px; border-radius:100px; font-family:'Manrope', sans-serif; font-weight:700; font-size:15px;
    letter-spacing:-0.01em; transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, background .35s, color .35s;
    white-space:nowrap;
  }
  .btn-primary{ background:var(--ink); color:#fff; box-shadow:0 14px 30px -12px rgba(45,36,51,0.45); }
  .btn-primary:hover{ transform:translateY(-3px); box-shadow:0 20px 40px -14px rgba(45,36,51,0.5); background:var(--accent-deep); }
  .btn-secondary{ background:transparent; color:var(--ink); border:1.5px solid var(--line); }
  .btn-secondary:hover{ border-color:var(--accent); background:var(--accent-2); transform:translateY(-3px); }
  .ripple{ position:absolute; border-radius:50%; background:rgba(255,255,255,0.55); transform:scale(0); animation:rippleAnim .6s ease-out; pointer-events:none; }
  @keyframes rippleAnim{ to{ transform:scale(2.6); opacity:0; } }

  /* ---------- NAV ---------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:1000; background:rgba(255,249,251,0.72);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid transparent;
    transition:border-color .4s, box-shadow .4s, background .4s;
  }
  header.scrolled{ border-bottom-color:var(--line); box-shadow:0 8px 30px -20px rgba(45,36,51,0.3); }
  nav{ display:flex; align-items:center; justify-content:space-between; gap:28px; padding:20px 32px; max-width:1200px; margin:0 auto; }
  .logo-link{ display:inline-flex; align-items:center; }
  .logo-img{ height:32px; width:auto; display:block; }
  .nav-links{ display:flex; align-items:center; gap:26px; }
  .nav-links a{ font-size:14px; font-weight:500; color:var(--ink); position:relative; padding:4px 0; transition:color .25s; }
  .nav-links a::after{ content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--accent); border-radius:2px; transition:width .3s ease; }
  .nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
  .nav-links a.active{ color:var(--accent-deep); }
  .nav-cta{ display:flex; align-items:center; gap:20px; }
  .nav-cta .btn{ padding:12px 24px; font-size:14px; }
  .burger{ display:none; width:24px; height:18px; position:relative; }
  .burger span{ position:absolute; left:0; width:100%; height:2px; background:var(--ink); border-radius:2px; transition:all .3s ease; }
  .burger span:nth-child(1){ top:0; } .burger span:nth-child(2){ top:8px; } .burger span:nth-child(3){ top:16px; }
  .burger.open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
  .burger.open span:nth-child(2){ opacity:0; }
  .burger.open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }
  .mobile-menu{
    display:none; position:fixed; top:72px; left:0; right:0; background:var(--bg); border-bottom:1px solid var(--line);
    padding:24px 32px 32px; flex-direction:column; gap:18px; transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:all .3s ease; z-index:999; max-height:calc(100vh - 72px); overflow-y:auto;
  }
  .mobile-menu.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .mobile-menu a{ font-size:16px; font-weight:600; }

  /* ---------- HERO (asymmetric) ---------- */
  .hero{ padding:172px 0 110px; position:relative; }
  .hero-blob-wrap{ position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
  .hero-blob{ position:absolute; top:-180px; right:-160px; width:560px; height:560px; background:radial-gradient(circle, var(--accent-2) 0%, transparent 70%); opacity:.9; transition:transform .3s ease-out; will-change:transform; }
  .hero-grid{ display:grid; grid-template-columns:1.08fr 0.92fr; gap:70px; align-items:center; position:relative; z-index:1; }
  .hero-copy h1{ font-size:clamp(38px, 5vw, 60px); margin-bottom:22px; }
  .hero-copy h1 em{ font-family:var(--serif); font-style:italic; font-weight:500; color:var(--accent-deep); }
  .hero-copy p.lead{ font-size:18px; color:var(--ink-soft); max-width:480px; margin-bottom:36px; }
  .hero-actions{ display:flex; flex-wrap:wrap; gap:16px; margin-bottom:44px; }
  .trust-row{ display:flex; flex-wrap:wrap; gap:14px; }
  .trust-badge{ display:flex; align-items:center; gap:8px; padding:10px 16px; background:var(--card); border:1px solid var(--line); border-radius:100px; font-size:13px; font-weight:600; color:var(--ink); box-shadow:var(--shadow); }
  .trust-badge .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); flex-shrink:0; animation:pulseDot 2.4s ease-in-out infinite; }
  @keyframes pulseDot{ 0%,100%{ box-shadow:0 0 0 0 rgba(217,119,167,0.5); } 50%{ box-shadow:0 0 0 5px rgba(217,119,167,0); } }

  .hero-visual{ position:relative; z-index:1; padding:0 8px 30px 34px; }
  .hero-photo-accent{
    position:absolute; top:26px; left:0; width:88%; height:92%; background:linear-gradient(155deg, var(--accent-2), var(--accent));
    border-radius:28px; transform:rotate(-4deg); z-index:0;
  }
  .hero-photo-frame{
    position:relative; z-index:1; border-radius:26px; overflow:hidden; aspect-ratio:4/5; box-shadow:var(--shadow-lg);
    transform:rotate(1.5deg);
    clip-path:inset(0 0 0 0 round 26px);
  }
  /* Фото первого экрана — самый крупный элемент страницы, по нему браузер считает
     скорость загрузки. Настоящий <img> с fetchpriority находится ещё при разборе HTML,
     тогда как CSS-фон обнаруживается только после загрузки стилей. */
  .hero-photo-frame picture{ display:block; position:absolute; inset:0; }
  .hero-photo-frame img{ width:100%; height:100%; object-fit:cover; object-position:center top; }
  .hero-photo-frame .photo-tag{
    position:absolute; left:18px; bottom:18px; z-index:2; background:rgba(255,255,255,0.16); backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,0.35); color:#fff; padding:14px 18px; border-radius:16px; max-width:calc(100% - 36px);
  }
  .hero-photo-frame .photo-tag strong{ display:block; font-family:'Manrope',sans-serif; font-size:14.5px; margin-bottom:2px; }
  .hero-photo-frame .photo-tag span{ font-size:12px; opacity:.9; }

  .float-card{ position:absolute; background:var(--card); border-radius:18px; box-shadow:var(--shadow-lg); padding:16px 18px; display:flex; align-items:center; gap:12px; border:1px solid var(--line); z-index:3; }
  .float-card.f1{ top:0%; left:-8%; animation:float1 6s ease-in-out infinite; }
  @keyframes float1{ 0%,100%{ transform:translateY(0px) rotate(-2deg); } 50%{ transform:translateY(-12px) rotate(-2deg); } }
  .waveform{ display:flex; align-items:center; gap:3px; height:26px; }
  .waveform span{ width:3px; border-radius:3px; background:var(--accent); animation:wave 1.2s ease-in-out infinite; }
  .waveform span:nth-child(1){ height:40%; animation-delay:0s; } .waveform span:nth-child(2){ height:80%; animation-delay:.12s; }
  .waveform span:nth-child(3){ height:55%; animation-delay:.24s; } .waveform span:nth-child(4){ height:100%; animation-delay:.36s; }
  .waveform span:nth-child(5){ height:65%; animation-delay:.48s; } .waveform span:nth-child(6){ height:35%; animation-delay:.6s; }
  @keyframes wave{ 0%,100%{ transform:scaleY(0.4); } 50%{ transform:scaleY(1); } }
  .float-card .fc-label strong{ display:block; font-size:14px; font-family:'Manrope',sans-serif; }
  .float-card .fc-label span{ font-size:12px; color:var(--ink-soft); }

  .stat-ticker{ bottom:-6%; right:-9%; width:184px; animation:float2 7s ease-in-out infinite; flex-direction:column; align-items:flex-start; gap:10px; cursor:pointer; }
  @keyframes float2{ 0%,100%{ transform:translateY(0px); } 50%{ transform:translateY(12px); } }
  .stat-ticker .ticker-top{ display:flex; align-items:center; gap:10px; width:100%; }
  .stat-ticker .ticker-icon{ width:34px; height:34px; border-radius:10px; background:var(--accent-2); color:var(--accent-deep); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
  .stat-ticker .ticker-num{ font-family:'Manrope',sans-serif; font-weight:800; font-size:17px; color:var(--ink); transition:opacity .25s; }
  .stat-ticker .ticker-label{ font-size:12px; color:var(--ink-soft); transition:opacity .25s; }
  .stat-ticker .ticker-dots{ display:flex; gap:2px; align-self:center; }
  /* Точки — настоящие кнопки. Видимый кружок остаётся мелким, а зона нажатия
     расширена внутренним отступом: background-clip оставляет заливку только в центре. */
  .stat-ticker .tdot{
    box-sizing:content-box; width:5px; height:5px; padding:5px; border-radius:50%;
    background:var(--line); background-clip:content-box;
    transition:background .3s, transform .3s;
  }
  .stat-ticker .tdot.active{ background:var(--accent); transform:scale(1.3); }
  .stat-ticker .tdot:hover{ background:var(--accent-deep); }

  /* Пауза автосмены: без неё показатели меняются сами и их невозможно дочитать. */
  .ticker-pause{
    position:absolute; top:7px; right:8px; width:19px; height:19px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--accent-2); opacity:.4; transition:opacity var(--dur-base) var(--ease-out);
  }
  .stat-ticker:hover .ticker-pause, .ticker-pause:focus-visible{ opacity:1; }
  .ticker-pause span{ width:7px; height:8px; border-left:2.5px solid var(--accent-deep); border-right:2.5px solid var(--accent-deep); }
  .ticker-pause.is-paused span{
    width:0; height:0; border-left:7px solid var(--accent-deep);
    border-right:none; border-top:5px solid transparent; border-bottom:5px solid transparent;
    margin-left:2px;
  }
  .stat-ticker.fading .ticker-num, .stat-ticker.fading .ticker-label{ opacity:0; }

  /* ---------- REVEAL ---------- */
  .reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
  .reveal.in{ opacity:1; transform:translateY(0); }
  .stagger .reveal:nth-child(1){ transition-delay:.03s; } .stagger .reveal:nth-child(2){ transition-delay:.09s; }
  .stagger .reveal:nth-child(3){ transition-delay:.15s; } .stagger .reveal:nth-child(4){ transition-delay:.21s; }
  .stagger .reveal:nth-child(5){ transition-delay:.27s; } .stagger .reveal:nth-child(6){ transition-delay:.33s; }
  .stagger .reveal:nth-child(7){ transition-delay:.39s; }

  /* ---------- QUIZ (lead magnet) ---------- */
  /* Уходим в прозрачность, а не в цвет фона: так снизу проступает живой фон */
  .quiz-section{ background:linear-gradient(180deg, var(--card) 0%, transparent 100%); }
  .quiz-card{
    max-width:600px; margin:0 auto; background:var(--card); border:1px solid var(--line); border-radius:32px;
    padding:44px 40px; box-shadow:var(--shadow-lg); position:relative; overflow:hidden;
  }
  .quiz-progress-wrap{ display:flex; gap:6px; margin-bottom:30px; }
  .quiz-progress-seg{ height:4px; flex:1; background:var(--line); border-radius:4px; overflow:hidden; }
  .quiz-progress-seg em{ display:block; height:100%; width:0%; background:var(--accent); border-radius:4px; transition:width .4s ease; font-style:normal; }
  .quiz-step{ display:none; }
  .quiz-step.active{ display:block; animation:quizIn .4s cubic-bezier(.2,.8,.2,1); }
  @keyframes quizIn{ from{ opacity:0; transform:translateX(14px); } to{ opacity:1; transform:translateX(0); } }
  .quiz-q{ font-size:22px; margin-bottom:22px; line-height:1.3; }
  .quiz-options{ display:flex; flex-direction:column; gap:10px; margin-bottom:8px; }
  .quiz-opt{
    text-align:left; padding:16px 20px; border:1.5px solid var(--line); border-radius:16px; font-size:15px; font-weight:600;
    color:var(--ink); transition:border-color .25s, background .25s, transform .2s;
  }
  .quiz-opt:hover{ border-color:var(--accent); background:var(--accent-2); transform:translateX(3px); }
  .quiz-opt.selected{ border-color:var(--accent-deep); background:var(--accent-2); color:var(--accent-deep); }
  .quiz-back{ margin-top:18px; font-size:13px; font-weight:600; color:var(--ink-soft); display:inline-flex; align-items:center; gap:6px; }
  .quiz-back:hover{ color:var(--accent-deep); }
  .quiz-result{ display:none; text-align:center; }
  .quiz-result.active{ display:block; animation:quizIn .4s cubic-bezier(.2,.8,.2,1); }
  .quiz-result .check{ width:56px; height:56px; border-radius:50%; background:var(--accent-2); color:var(--accent-deep); display:flex; align-items:center; justify-content:center; font-size:24px; margin:0 auto 18px; }
  .quiz-result h3{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:26px; margin-bottom:14px; }
  .quiz-result p{ color:var(--ink-soft); font-size:15px; margin-bottom:26px; max-width:440px; margin-left:auto; margin-right:auto; }
  .quiz-result-actions{ display:flex; flex-direction:column; align-items:center; gap:14px; }
  .quiz-restart{ font-size:13px; font-weight:600; color:var(--ink-soft); }
  .quiz-restart:hover{ color:var(--accent-deep); }

  /* ---------- GOALS (pills) ---------- */
  .goals-pills{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
  .goal-pill{
    display:inline-flex; align-items:center; gap:8px; padding:14px 24px; background:var(--card); border:1.5px solid var(--line);
    border-radius:100px; font-size:14.5px; font-weight:600; color:var(--ink); transition:transform .3s, border-color .3s, background .3s;
  }
  .goal-pill:hover{ transform:translateY(-4px); border-color:var(--accent); background:var(--accent-2); }
  .goal-pill .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); }
  .goals-note{ text-align:center; margin-top:28px; font-size:13.5px; color:var(--ink-soft); }
  .goals-note a{ color:var(--accent-deep); font-weight:700; }

  /* ---------- WHY ---------- */
  .why-section{ background:var(--card); }
  .why-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:2px; background:var(--line); border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); }
  .why-card{ position:relative; background:var(--card); padding:38px 34px; transition:background .35s; cursor:pointer; }
  .why-card:hover{ background:#FFFBFD; }
  .why-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
  .why-num{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:34px; color:var(--accent-2); -webkit-text-stroke:1px var(--accent-deep); margin-bottom:14px; display:block; line-height:1; }
  .why-card h4{ font-size:19px; margin-bottom:10px; }
  .why-card p.why-p{ font-size:14.5px; color:var(--ink-soft); }
  .why-chevron{ width:28px; height:28px; border-radius:50%; background:var(--accent-2); color:var(--accent-deep); display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; transition:transform .35s ease, background .35s; }
  .why-card.open .why-chevron{ transform:rotate(45deg); background:var(--accent); color:#fff; }
  .why-detail{ max-height:0; overflow:hidden; transition:max-height .4s cubic-bezier(.2,.8,.2,1); }
  .why-detail p{ padding-top:14px; font-size:13.5px; color:var(--ink-soft); border-top:1px dashed var(--line); margin-top:14px; }

  /* ---------- TIMELINE ---------- */
  .timeline{ position:relative; padding-left:8px; }
  .timeline-track{ position:relative; display:grid; grid-template-columns:repeat(6, 1fr); gap:16px; }
  .timeline-track::before{ content:''; position:absolute; top:22px; left:0; right:0; height:2px; background:var(--line); z-index:0; }
  .timeline-progress{ content:''; position:absolute; top:22px; left:0; height:2px; width:0%; background:var(--accent); z-index:0; transition:width .5s ease; }
  .tl-step{ position:relative; z-index:1; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:26px 18px 22px; cursor:pointer; transition:border-color .3s, box-shadow .3s; }
  .tl-step:hover{ box-shadow:var(--shadow); }
  .tl-step.active{ border-color:var(--accent-2); }
  .tl-num{ width:44px; height:44px; border-radius:50%; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Manrope',sans-serif; font-weight:700; font-size:16px; margin-bottom:18px; transition:background .35s, transform .35s; }
  .tl-step:hover .tl-num, .tl-step.active .tl-num{ background:var(--accent-deep); transform:scale(1.08); }
  .tl-step h4{ font-size:15px; margin-bottom:6px; }
  .tl-step p.tl-p{ font-size:13.5px; color:var(--ink-soft); }
  .tl-detail{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
  .tl-detail p{ font-size:13px; color:var(--ink-soft); padding-top:10px; margin-top:10px; border-top:1px dashed var(--line); }

  /* ---------- STORIES / RESULTS (merged, asymmetric) ---------- */
  .stats-strip{ display:flex; flex-wrap:wrap; justify-content:center; gap:0; margin-bottom:80px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .stat-item{ flex:1; min-width:150px; text-align:center; padding:28px 20px; border-left:1px solid var(--line); }
  .stat-item:first-child{ border-left:none; }
  .stat-num{ font-family:'Manrope',sans-serif; font-weight:800; font-size:32px; color:var(--accent-deep); margin-bottom:4px; }
  .stat-label{ font-size:13px; color:var(--ink-soft); }

  .story-feature{ position:relative; margin-bottom:100px; }
  .story-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:0; align-items:center; }
  /* Фото истории и отзывов — обычные <picture> с loading="lazy": они ниже первого
     экрана, и как CSS-фоны грузились бы сразу, ещё до того как до них доскроллят. */
  .story-photo{ position:relative; border-radius:28px; overflow:hidden; aspect-ratio:16/11; box-shadow:var(--shadow-lg); }
  .story-photo picture, .review-photo picture{ display:block; width:100%; height:100%; }
  .story-photo img{ width:100%; height:100%; object-fit:cover; object-position:center; }
  .story-card{
    position:relative; background:var(--card); border-radius:28px; box-shadow:var(--shadow-lg); padding:44px 40px;
    margin-left:-64px; z-index:2; border:1px solid var(--line);
  }
  .story-tag{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-ink); background:var(--accent-2); padding:6px 14px; border-radius:100px; margin-bottom:18px; }
  .story-card h3{ font-size:22px; margin-bottom:6px; }
  .story-goal{ font-size:13px; color:var(--ink-soft); margin-bottom:20px; }
  .story-quote{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:21px; line-height:1.4; margin-bottom:20px; color:var(--ink); }
  .story-more-toggle{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--accent-deep); font-family:'Manrope',sans-serif; margin-top:4px; }
  .story-more-toggle .arrow{ transition:transform .3s; }
  .story-card.open .story-more-toggle .arrow{ transform:rotate(90deg); }
  .story-more{ max-height:0; overflow:hidden; transition:max-height .5s ease; }
  .story-more p{ font-size:14.5px; color:var(--ink-soft); margin-top:16px; padding-top:16px; border-top:1px dashed var(--line); }
  .story-more p + p{ margin-top:12px; padding-top:0; border-top:none; }

  .reviews-masonry{ display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; }
  .review-card{
    background:var(--card); border:1px solid var(--line); border-radius:24px; overflow:hidden;
    transition:transform .35s, box-shadow .35s;
  }
  .review-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
  .review-card:nth-child(2){ margin-top:34px; }
  .review-photo{ aspect-ratio:3/4; overflow:hidden; }
  .review-photo img{ width:100%; height:100%; object-fit:cover; object-position:center top; }
  .review-body{ padding:24px 22px; }
  .review-body strong{ display:block; font-family:'Manrope',sans-serif; font-size:16px; margin-bottom:2px; }
  .review-body .goal-line{ font-size:12.5px; color:var(--ink-soft); display:block; margin-bottom:12px; }
  .review-stars{ display:flex; gap:3px; color:var(--accent); margin-bottom:10px; }
  .review-stars .ic-fill{ width:14px; height:14px; }
  .review-quote{ font-size:14.5px; color:var(--ink-soft); }

  /* ---------- ABOUT ---------- */
  .about-section{ background:var(--card); }
  .about-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px; align-items:start; }
  .about-portrait{ position:sticky; top:120px; border-radius:24px; aspect-ratio:3/4; background-size:cover; background-position:center top; background-image:url("teacher.jpg"); background-image:image-set(url("teacher.webp") type("image/webp")); box-shadow:var(--shadow-lg); overflow:hidden; display:flex; align-items:flex-end; }
  .about-portrait .tag{ position:relative; z-index:2; margin:24px; background:rgba(255,255,255,.18); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.35); color:#fff; padding:14px 18px; border-radius:16px; font-size:13px; width:calc(100% - 48px); }
  .about-copy .eyebrow{ margin-bottom:12px; }
  .about-copy h2{ font-size:clamp(26px, 3vw, 36px); margin-bottom:22px; }
  .about-copy p{ color:var(--ink-soft); font-size:16px; margin-bottom:20px; max-width:560px; }
  .quote-block{ margin:32px 0; padding:30px 32px; background:var(--bg); border-left:3px solid var(--accent); border-radius:0 18px 18px 0; font-family:var(--serif); font-style:italic; font-weight:500; font-size:22px; color:var(--ink); }
  .cred-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:28px 0; }
  .cred-item{ display:flex; align-items:center; gap:12px; padding:14px 16px; background:var(--bg); border:1px solid var(--line); border-radius:14px; font-size:13.5px; font-weight:600; }
  .cred-item .ico{ width:8px; height:8px; border-radius:50%; background:var(--accent); flex-shrink:0; }

  .cert-viewer{ margin-top:30px; padding:22px; background:var(--bg); border:1px solid var(--line); border-radius:20px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
  .cert-thumb-frame{ width:150px; flex-shrink:0; border-radius:12px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); cursor:zoom-in; position:relative; background:#fff; }
  .cert-thumb-frame img{ width:100%; display:block; }
  .cert-thumb-frame::after{ content:"Увеличить"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(45,36,51,0.55); color:#fff; font-size:11.5px; font-weight:600; opacity:0; transition:opacity .25s; font-family:'Manrope',sans-serif; }
  .cert-thumb-frame:hover::after{ opacity:1; }
  .cert-text-block{ flex:1; min-width:180px; }
  .cert-text-block strong{ display:block; font-size:15px; margin-bottom:4px; }
  .cert-text-block span{ font-size:12.5px; color:var(--ink-soft); display:block; margin-bottom:12px; }

  /* ---------- LIGHTBOX ---------- */
  .lightbox-overlay{ position:fixed; inset:0; z-index:1450; background:rgba(45,36,51,0.82); display:flex; align-items:center; justify-content:center; padding:30px; opacity:0; pointer-events:none; transition:opacity .3s ease; }
  .lightbox-overlay.open{ opacity:1; pointer-events:auto; }
  .lightbox-overlay img{ max-width:min(600px, 92vw); max-height:86vh; border-radius:16px; box-shadow:0 30px 80px rgba(0,0,0,0.4); transform:scale(0.94); transition:transform .3s cubic-bezier(.2,.8,.2,1); }
  .lightbox-overlay.open img{ transform:scale(1); }
  .lightbox-close{ position:absolute; top:24px; right:28px; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.3); color:#fff; display:flex; align-items:center; justify-content:center; font-size:18px; }

  /* ---------- PRICING ---------- */
  .pricing-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; align-items:stretch; }
  .price-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:38px 32px; display:flex; flex-direction:column; transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; position:relative; }
  .price-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
  .price-card.featured{ background:linear-gradient(165deg, #2D2433 0%, #442f42 100%); color:#fff; border-color:transparent; box-shadow:var(--shadow-lg); transform:scale(1.03); }
  .price-card.featured:hover{ transform:scale(1.03) translateY(-6px); }
  .price-card.featured .price-sub, .price-card.featured .price-feat{ color:rgba(255,255,255,0.72); }
  .price-card.featured .price-feat::before{ background:var(--accent); }
  .price-badge{ display:inline-block; align-self:flex-start; background:var(--accent); color:#fff; font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:6px 14px; border-radius:100px; margin-bottom:20px; }
  .price-name{ font-family:'Manrope',sans-serif; font-weight:700; font-size:18px; margin-bottom:8px; }
  .price-sub{ font-size:13.5px; color:var(--ink-soft); margin-bottom:24px; }
  .price-amount{ font-family:'Manrope',sans-serif; font-weight:800; font-size:32px; margin-bottom:2px; }
  .price-unit{ font-size:13px; color:var(--ink-soft); margin-bottom:28px; }
  .price-card.featured .price-unit{ color:rgba(255,255,255,0.72); }
  .price-features{ margin-bottom:32px; flex-grow:1; }
  .price-feat{ display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--ink-soft); margin-bottom:12px; position:relative; padding-left:20px; }
  .price-feat::before{ content:''; position:absolute; left:0; top:6px; width:6px; height:6px; border-radius:50%; background:var(--accent); }
  .price-card .btn{ width:100%; }
  .price-card.featured .btn-primary{ background:#fff; color:var(--ink); }
  .price-card.featured .btn-primary:hover{ background:var(--accent); color:#fff; }
  .rec-ribbon{
    position:absolute; top:-13px; right:24px; background:var(--ink); color:#fff; font-size:11px; font-weight:700;
    padding:7px 14px; border-radius:100px; display:none; align-items:center; gap:6px; box-shadow:var(--shadow);
  }
  .rec-ribbon.show{ display:inline-flex; }

  /* ---------- FAQ ---------- */
  .faq-list{ max-width:760px; margin:0 auto; }
  .faq-item{ border-bottom:1px solid var(--line); }
  .faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; padding:24px 4px; text-align:left; font-family:'Manrope',sans-serif; font-weight:600; font-size:16.5px; color:var(--ink); }
  .faq-plus{ width:26px; height:26px; border-radius:50%; background:var(--accent-2); color:var(--accent-deep); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; transition:transform .35s ease, background .35s; margin-left:20px; }
  .faq-item.open .faq-plus{ transform:rotate(45deg); background:var(--accent); color:#fff; }
  .faq-a{ max-height:0; overflow:hidden; transition:max-height .4s cubic-bezier(.2,.8,.2,1); }
  .faq-a p{ padding:0 4px 24px; color:var(--ink-soft); font-size:14.5px; max-width:640px; }

  /* ---------- FINAL CTA ---------- */
  .final-cta{ position:relative; overflow:hidden; border-radius:32px; padding:80px 60px; text-align:center; color:#fff; background:linear-gradient(120deg, #2D2433 0%, #472F45 45%, #B85D8A 90%, #472F45 100%); background-size:220% 220%; animation:gradientShift 12s ease infinite; }
  @keyframes gradientShift{ 0%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } 100%{ background-position:0% 50%; } }
  .final-cta::before{ content:''; position:absolute; top:-100px; left:50%; transform:translateX(-50%); width:600px; height:300px; background:radial-gradient(ellipse, rgba(217,119,167,0.35), transparent 70%); }
  .final-cta h2{ color:#fff; font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(28px, 4vw, 44px); margin-bottom:18px; position:relative; }
  .final-cta p{ color:rgba(255,255,255,0.75); max-width:520px; margin:0 auto 36px; font-size:16.5px; position:relative; }
  .final-cta .btn-primary{ background:#fff; color:var(--ink); position:relative; }
  .final-cta .btn-primary:hover{ background:var(--accent); color:#fff; }

  /* ---------- FOOTER ---------- */
  footer{ padding:72px 0 40px; }
  .footer-top{ display:flex; justify-content:space-between; align-items:flex-start; padding-bottom:48px; border-bottom:1px solid var(--line); margin-bottom:32px; flex-wrap:wrap; gap:32px; }
  .footer-logo-img{ height:36px; margin-bottom:12px; }
  .footer-brand p{ color:var(--ink-soft); font-size:14px; max-width:280px; }
  .footer-links{ display:flex; gap:64px; flex-wrap:wrap; }
  .footer-col h5{ font-family:'Manrope',sans-serif; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin-bottom:16px; }
  .footer-col a{ display:block; font-size:14.5px; color:var(--ink); margin-bottom:12px; transition:color .25s; }
  .footer-col a:hover{ color:var(--accent-deep); }
  .footer-bottom{ display:flex; justify-content:space-between; color:var(--ink-soft); font-size:13px; flex-wrap:wrap; gap:12px; }
  .hiring-badge{
    display:flex; align-items:center; gap:20px; flex-wrap:wrap; padding:20px 24px; margin-bottom:32px;
    background:var(--accent-2); border-radius:20px; border:1px solid var(--line);
  }
  .hiring-text{ flex:1 1 280px; }

  /* Три понятных действия вместо строчки «напишите нам по тем же контактам»:
     отклик через ту же форму, звонок и Telegram. */
  .hiring-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .hiring-cta{ padding:12px 22px; font-size:14px; }
  .hiring-link{
    display:inline-flex; align-items:center; gap:7px; padding:11px 16px; border-radius:100px;
    background:var(--card); border:1px solid var(--line);
    font-family:'Manrope', sans-serif; font-weight:600; font-size:13.5px; color:var(--ink);
    transition:border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  }
  .hiring-link:hover{ border-color:var(--accent); color:var(--accent-deep); transform:translateY(-2px); }
  .hiring-link .ic-svg{ width:15px; height:15px; color:var(--accent-deep); }
  .hiring-icon{
    width:44px; height:44px; border-radius:12px; background:var(--card); flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:20px; box-shadow:var(--shadow);
  }
  .hiring-text strong{ display:block; font-family:'Manrope',sans-serif; font-size:15px; color:var(--accent-ink); margin-bottom:3px; }
  .hiring-text span{ font-size:13.5px; color:var(--ink); }

  /* ---------- EDITABLE MODE ---------- */
  [data-key].editable{ transition:outline .2s ease, background .2s ease; border-radius:6px; }
  .fab-stack{ position:fixed; right:24px; bottom:24px; z-index:1100; display:flex; flex-direction:column; gap:12px; align-items:flex-end; }
  .call-fab, .top-fab{ width:52px; height:52px; border-radius:50%; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-lg); font-size:20px; transition:background .3s, transform .3s, opacity .3s; }
  .call-fab{ animation:callPulse 2.6s ease-in-out infinite; }
  .call-fab:hover, .top-fab:hover{ background:var(--accent-deep); transform:translateY(-2px); }
  @keyframes callPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(217,119,167,0.45), var(--shadow-lg); } 50%{ box-shadow:0 0 0 10px rgba(217,119,167,0), var(--shadow-lg); } }
  .top-fab{ opacity:0; pointer-events:none; transform:translateY(8px); }
  .top-fab.show{ opacity:1; pointer-events:auto; transform:translateY(0); }

  /* ---------- MODAL ---------- */
  .modal-overlay{ position:fixed; inset:0; z-index:1400; background:rgba(45,36,51,0.55); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; pointer-events:none; transition:opacity .3s ease; }
  .modal-overlay.open{ opacity:1; pointer-events:auto; }
  .modal-card{ background:var(--card); border-radius:28px; max-width:480px; width:100%; padding:36px 32px; position:relative; box-shadow:var(--shadow-lg); transform:scale(0.92) translateY(10px); opacity:0; transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s; max-height:88vh; overflow-y:auto; }
  .modal-overlay.open .modal-card{ transform:scale(1) translateY(0); opacity:1; }
  .modal-close{ position:absolute; top:20px; right:20px; width:32px; height:32px; border-radius:50%; background:var(--bg); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--ink-soft); transition:background .25s, color .25s; }
  .modal-close:hover{ background:var(--accent-2); color:var(--accent-deep); }
  .modal-eyebrow{ font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-deep); margin-bottom:10px; }
  .modal-card h3{ font-size:23px; margin-bottom:10px; }
  .modal-card > p{ color:var(--ink-soft); font-size:14.5px; margin-bottom:24px; }
  .modal-plan{ display:none; align-items:center; gap:10px; padding:12px 16px; background:var(--accent-2); color:var(--accent-ink); border-radius:14px; font-size:13.5px; font-weight:600; margin-bottom:22px; }
  .modal-plan.show{ display:flex; }
  .contact-row{ display:flex; flex-direction:column; gap:10px; }
  .contact-btn{ display:flex; align-items:center; gap:12px; padding:14px 16px; border:1px solid var(--line); border-radius:16px; font-size:14px; font-weight:600; transition:border-color .25s, background .25s, transform .25s; }
  .contact-btn:hover{ border-color:var(--accent); background:var(--accent-2); transform:translateX(3px); }
  .contact-btn .ic{ width:34px; height:34px; border-radius:10px; background:var(--accent-2); color:var(--accent-deep); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
  .contact-btn span.num{ display:block; font-size:12px; font-weight:500; color:var(--ink-soft); }
  .modal-body-content.hide{ display:none; }

  /* ============================================================
     ФОРМА ЗАЯВКИ
     ============================================================ */

  /* Медленный блик по рамке карточки — то же, что в присланном примере,
     но в цветах бренда и без тёмного стекла. Сделан маской: заливка видна
     только в полутора пикселях рамки, внутрь карточки она не заходит. */
  @property --beam{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
  .modal-card::before{
    content:''; position:absolute; inset:0; border-radius:28px; padding:1.5px; pointer-events:none;
    background:conic-gradient(from var(--beam), transparent 0 68%, var(--accent) 82%, var(--accent-deep) 88%, transparent 96%);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite:exclude;
    animation:beamSpin 5.5s linear infinite;
  }
  @keyframes beamSpin{ to{ --beam:360deg; } }

  /* ---------- Вкладки ---------- */
  .modal-tabs{
    display:flex; gap:var(--s-1); padding:var(--s-1); margin-bottom:var(--s-5);
    background:var(--bg); border:1px solid var(--line); border-radius:100px;
  }
  .modal-tab{
    flex:1; padding:10px var(--s-3); border-radius:100px;
    font-family:'Manrope', sans-serif; font-weight:700; font-size:13.5px; color:var(--ink-soft);
    transition:background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
  }
  .modal-tab:hover{ color:var(--ink); }
  .modal-tab.is-active{ background:var(--ink); color:#fff; }

  .modal-panel{ display:none; }
  .modal-panel.is-active{ display:block; animation:panelIn .35s var(--ease-out); }
  @keyframes panelIn{ from{ opacity:0; transform:translateY(7px); } to{ opacity:1; transform:none; } }
  .panel-lead{ color:var(--ink-soft); font-size:14.5px; margin-bottom:var(--s-5); }

  /* ---------- Поля ---------- */
  .field{ position:relative; margin-bottom:var(--s-3); }
  .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3); }

  /* Режим отклика на вакансию: цель обучения и формат занятий преподавателю
     не нужны, а оставшийся способ связи разворачивается на всю ширину. */
  .modal-card.is-hiring .hide-for-hiring{ display:none; }
  .modal-card.is-hiring .field-row{ grid-template-columns:1fr; }

  .field input, .field textarea, .field select{
    width:100%; border:1.5px solid var(--line); border-radius:14px; background:var(--bg);
    font-family:'Inter', sans-serif; font-size:15px; color:var(--ink);
    transition:border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
  }
  .field input, .field textarea{ padding:21px 15px 7px; }
  .field textarea{ resize:vertical; min-height:70px; line-height:1.5; }

  .field input:focus, .field textarea:focus, .field select:focus{
    outline:none; border-color:var(--accent); background:var(--card);
    box-shadow:0 0 0 4px rgba(217,119,167,0.15);
  }

  /* Плавающая подпись. Она не исчезает при заполнении, а уезжает наверх —
     подпись остаётся видна всегда, в отличие от подсказки внутри поля. */
  .field > label{
    position:absolute; left:16px; top:15px; font-size:15px; color:var(--ink-soft);
    pointer-events:none; transform-origin:left top;
    transition:transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
  }
  .field input:focus + label,
  .field input:not(:placeholder-shown) + label,
  .field textarea:focus + label,
  .field textarea:not(:placeholder-shown) + label{
    transform:translateY(-10px) scale(.76); color:var(--accent-deep);
  }
  .field .req{ color:var(--accent-deep); }

  /* У выпадающих списков подпись обычная, сверху: значение в них есть всегда,
     и плавающая подпись просто дублировала бы его. */
  .field-select > label{
    position:static; display:block; font-size:12.5px; font-weight:600; letter-spacing:.02em;
    color:var(--ink-soft); margin-bottom:5px; transform:none;
  }
  .field-select select{
    padding:13px 40px 13px 14px; appearance:none; cursor:pointer;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'><path d='M1 1.5 7 7.5l6-6' stroke='%236B6470' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat:no-repeat; background-position:right 15px center;
  }

  .field-hint{ font-size:12px; color:var(--ink-soft); margin-top:5px; padding-left:2px; }
  .field-error{ font-size:12.5px; color:#B03A5F; margin-top:5px; padding-left:2px; }
  .field.has-error input, .field.has-error textarea, .field.has-error select{ border-color:#B03A5F; }
  .field.has-error input:focus, .field.has-error textarea:focus{ box-shadow:0 0 0 4px rgba(176,58,95,0.14); }

  /* Сводка ошибок: по правилам доступности после неудачной отправки фокус
     переводится сюда, чтобы человек сразу услышал, что пошло не так. */
  .form-errors{
    background:#FCEBF0; border:1px solid #F0C4D2; color:#8C2C48; border-radius:12px;
    padding:12px 14px; font-size:13.5px; margin-bottom:var(--s-4);
  }
  .form-errors ul{ margin:6px 0 0; padding-left:16px; list-style:disc; }
  .form-errors li{ margin-top:3px; }
  .form-errors a{ color:#8C2C48; text-decoration:underline; }

  .consent{ display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--ink-soft); margin:var(--s-4) 0 var(--s-1); cursor:pointer; }
  .consent input{ width:18px; height:18px; margin-top:1px; flex-shrink:0; accent-color:var(--accent-deep); cursor:pointer; }

  /* Поле-ловушка: убрано за пределы экрана, а не display:none —
     часть ботов пропускает скрытые через display поля. */
  .hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

  .submit-btn{ width:100%; margin-top:var(--s-4); }
  .submit-btn .sb-spinner{
    display:none; width:17px; height:17px; border-radius:50%;
    border:2.2px solid rgba(255,255,255,0.35); border-top-color:#fff;
    animation:sbSpin .7s linear infinite;
  }
  .submit-btn.is-loading .sb-spinner{ display:block; }
  .submit-btn.is-loading .sb-label{ opacity:.7; }
  .submit-btn[disabled]{ cursor:progress; }
  @keyframes sbSpin{ to{ transform:rotate(360deg); } }

  .form-note{ font-size:12.5px; color:var(--ink-soft); text-align:center; margin-top:var(--s-3); line-height:1.5; }
  .linklike{ color:var(--accent-deep); font-weight:600; font-size:inherit; text-decoration:underline; }

  /* ---------- Успешная отправка ---------- */
  .form-success{ text-align:center; padding:var(--s-3) var(--s-1) var(--s-2); animation:panelIn .4s var(--ease-out); }
  .form-success h4{ font-size:20px; margin-bottom:var(--s-2); }
  .form-success p{ font-size:14px; color:var(--ink-soft); margin-bottom:var(--s-5); }
  .success-check{ width:58px; height:58px; color:var(--accent-deep); margin:0 auto var(--s-4); display:block; }
  .success-check circle{ stroke-dasharray:151; stroke-dashoffset:151; animation:drawRing .6s var(--ease-out) forwards; }
  .success-check path{ stroke-dasharray:46; stroke-dashoffset:46; animation:drawCheck .35s var(--ease-out) .5s forwards; }
  @keyframes drawRing{ to{ stroke-dashoffset:0; } }
  @keyframes drawCheck{ to{ stroke-dashoffset:0; } }

  .contact-btn .ic svg{ width:17px; height:17px; }

  /* ============================================================
     МОУШН
     Правило на весь блок: анимируем только transform и opacity —
     это единственные свойства, которые браузер считает на видеокарте
     и которые не заставляют пересчитывать вёрстку.
     ============================================================ */

  /* ---------- Заголовки, выезжающие по словам ----------
     JS разбивает текст на слова: .word — окошко с обрезкой, .word-in — само слово.
     Если JS не отработал, разбиения не происходит и заголовок просто виден целиком. */
  .word{
    display:inline-block; overflow:hidden; vertical-align:top;
    /* компенсация обрезки: без неё у букв «у», «р», «д» срезаются хвосты */
    padding-bottom:0.16em; margin-bottom:-0.16em;
  }
  .word-in{ display:inline-block; transform:translateY(110%); }
  .reveal.in .word-in,
  .hero-copy .word-in{
    animation:wordUp var(--dur-reveal) var(--ease-out) calc(var(--wi, 0) * 38ms) forwards;
  }
  @keyframes wordUp{ from{ transform:translateY(110%); } to{ transform:translateY(0); } }
  /* Первый экран ждёт, пока уйдёт заставка. На повторном заходе она не показывается —
     тогда JS ставит body.no-intro и заголовок стартует сразу.
     Селекторы намеренно длиннее правила выше: у .reveal.in .word-in специфичность 0-3-0,
     и более коротким селектором задержку не переопределить. */
  .hero-copy.reveal.in .word-in{ animation-delay:calc(0.95s + var(--wi, 0) * 38ms); }
  body.no-intro .hero-copy.reveal.in .word-in{ animation-delay:calc(var(--wi, 0) * 38ms); }

  /* ---------- Ступенчатый вход первого экрана ---------- */
  .hero-lift{ opacity:0; transform:translateY(18px); animation:heroLift .8s var(--ease-out) forwards; }
  .hero-lift{ animation-delay:calc(1.05s + var(--hi, 0) * 90ms); }
  body.no-intro .hero-lift{ animation-delay:calc(var(--hi, 0) * 90ms); }
  @keyframes heroLift{ to{ opacity:1; transform:translateY(0); } }

  /* ---------- Скролл-анимации на нативной шкале прокрутки ----------
     animation-timeline считается вне основного потока: скролл остаётся плавным
     даже когда JS занят. Где браузер этого не умеет (сейчас Firefox), всё
     продолжает работать на IntersectionObserver из script.js. */
  @supports (animation-timeline: view()){
    @media (prefers-reduced-motion: no-preference){
      /* Наклон рамки задан статически, поэтому двигаем картинку внутри неё —
         иначе анимация transform затёрла бы поворот. */
      .hero-photo-frame img{ animation:parHero linear both; animation-timeline:view(); animation-range:entry 0% exit 100%; }
      @keyframes parHero{ from{ transform:translateY(-16px) scale(1.05); } to{ transform:translateY(20px) scale(1.05); } }

      .hero-photo-accent{ animation:parAccent linear both; animation-timeline:view(); animation-range:entry 0% exit 100%; }
      @keyframes parAccent{ from{ transform:rotate(-4deg) translateY(10px); } to{ transform:rotate(-4deg) translateY(-14px); } }

      /* Двигаем саму картинку, а не контейнер: контейнер обрезает по скруглению,
         и если сдвинуть его, поедет вся вёрстка карточки. */
      .story-photo img{ animation:parStory linear both; animation-timeline:view(); animation-range:entry 0% exit 100%; }
      @keyframes parStory{ from{ transform:translateY(-18px) scale(1.04); } to{ transform:translateY(18px) scale(1.04); } }

      .review-photo img{ animation:parReview linear both; animation-timeline:view(); animation-range:entry 0% exit 100%; }
      @keyframes parReview{ from{ transform:scale(1.06) translateY(-8px); } to{ transform:scale(1.06) translateY(8px); } }

      /* Полоса прогресса секции «Почему LEXORA» — тонкая линия, наливающаяся по мере прокрутки */
      .why-grid{ position:relative; }
    }
  }

  /* ---------- Горизонтальный пин-скролл процесса обучения ----------
     Секция залипает, а шесть шагов проезжают вбок. Всё на CSS, без JS.
     На узких экранах и в браузерах без поддержки остаётся обычная сетка/карусель. */
  .timeline-sticky{ position:relative; }

  @supports (animation-timeline: view()){
    @media (min-width:981px) and (prefers-reduced-motion: no-preference){
      .timeline{
        height:300vh; padding-left:0;
        view-timeline-name:--tlscroll; view-timeline-axis:block;
      }
      .timeline-sticky{
        position:sticky; top:calc(50vh - 130px);
        overflow:hidden; padding:8px 0 20px;
      }
      .timeline-track{
        width:max-content; grid-template-columns:repeat(6, 300px); gap:24px;
        animation:tlSlide linear both;
        animation-timeline:--tlscroll;
        animation-range:contain 0% contain 100%;
      }
      /* Соединительная линия тянется на всю ширину ленты */
      .timeline-track::before{ width:100%; }
      @keyframes tlSlide{
        from{ transform:translateX(0); }
        to{ transform:translateX(calc(-100% + min(1136px, 92vw))); }
      }
    }
  }

  /* ---------- Магнитные кнопки ----------
     Только там, где есть настоящий курсор. Смещение маленькое, чтобы кнопка
     никогда не убегала из-под указателя. */
  .btn-magnetic{ will-change:transform; }

  /* ---------- Появление модалки и лайтбокса ---------- */
  .modal-overlay, .lightbox-overlay{ transition:opacity var(--dur-base) var(--ease-out); }

  /* ---------- RESPONSIVE ---------- */

  /* Шапка переключается в бургер отдельно от остальной вёрстки: семь пунктов
     плюс кнопка перестают помещаться раньше, чем ломаются секции ниже. */
  @media (max-width: 1090px){
    .nav-links{ display:none; }
    .burger{ display:block; }
    .mobile-menu{ display:flex; }
  }
  @media (max-width: 980px){
    .nav-links{ display:none; } .nav-cta .btn-secondary{ display:none; } .burger{ display:block; } .mobile-menu{ display:flex; }
    .hero{ padding:150px 0 70px; }
    .hero-grid{ grid-template-columns:1fr; gap:64px; }
    /* width:100% здесь обязателен: auto-поля отключают растягивание элемента
       грида, а внутри рамки все дети позиционированы абсолютно — без явной
       ширины блок считался нулевым и фото пропадало на всех экранах до 980px. */
    .hero-visual{ width:100%; max-width:420px; margin:0 auto; order:-1; padding:0 20px 30px 20px; }
    .goals-pills{ gap:10px; }
    .why-grid{ grid-template-columns:1fr; }
    .timeline-track{ grid-template-columns:repeat(3, 1fr); } .timeline-track::before, .timeline-progress{ display:none; }
    .stats-strip{ flex-wrap:wrap; }
    .stat-item{ min-width:45%; border-left:none; border-top:1px solid var(--line); }
    .story-grid{ grid-template-columns:1fr; }
    .story-card{ margin-left:0; margin-top:-40px; margin-right:20px; margin-left:20px; }
    .reviews-masonry{ grid-template-columns:1fr; }
    .review-card:nth-child(2){ margin-top:0; }
    .about-grid{ grid-template-columns:1fr; }
    .about-portrait{ position:relative; top:0; width:100%; max-width:360px; margin:0 auto; }
    .pricing-grid{ grid-template-columns:1fr; }
    .price-card.featured{ transform:none; order:-1; } .price-card.featured:hover{ transform:translateY(-6px); }
    .final-cta{ padding:56px 28px; }
    .edit-toggle span.lbl{ display:none; }
    .quiz-card{ padding:32px 24px; }
  }
  @media (max-width: 600px){
    .wrap{ padding:0 20px; } .section{ padding:80px 0; }

    /* У кнопок стоит white-space:nowrap, поэтому длинные подписи вроде
       «Подобрать формат за 1 минуту» (287px) не переносились и распирали
       первый экран на узких телефонах. На всю ширину — и переносим. */
    .hero-actions{ width:100%; }
    .hero-actions .btn, .final-cta .btn, .quiz-result-actions .btn{
      width:100%; white-space:normal;
    }
    .timeline-track{ grid-template-columns:1fr 1fr; }
    .footer-top{ flex-direction:column; }
    .hiring-badge{ flex-direction:column; text-align:center; }
    .hiring-actions{ justify-content:center; width:100%; }
    .hiring-cta{ flex:1 1 100%; }
    .cred-grid{ grid-template-columns:1fr; }
    .cert-viewer{ flex-direction:column; align-items:flex-start; }
    .story-card{ padding:30px 24px; }

    /* На телефоне парящие карточки занимают заметную долю фото и закрывают лицо.
       Сдвигаем их к краям и ужимаем — фото остаётся главным. */
    .float-card.f1{ top:-3%; left:-3%; padding:12px 14px; }
    .stat-ticker{ right:-3%; bottom:-1%; width:158px; padding:12px 14px; }
    .hero-photo-frame .photo-tag{ left:12px; bottom:12px; padding:10px 12px; max-width:calc(100% - 24px); }
    .hero-photo-frame .photo-tag strong{ font-size:13px; }
    .hero-photo-frame .photo-tag span{ font-size:11px; }
  }

  /* Совсем узкие телефоны (от 320px): ужимаем шапку, иначе логотип, кнопка
     и бургер вместе требуют больше места, чем есть на экране. */
  @media (max-width: 420px){
    nav{ padding:16px 20px; gap:12px; }
    .nav-cta .btn{ padding:10px 15px; font-size:13px; }
    .logo-img{ height:28px; }
    .fab-stack{ right:16px; bottom:16px; }
  }

  /* Шаги обучения: двум колонкам нужно около 350px по ширине окна —
     длинные слова вроде «Отслеживание» не переносятся и распирают сетку.
     Ниже этого порога выстраиваем в одну колонку. */
  @media (max-width: 400px){
    .timeline-track{ grid-template-columns:1fr; }
  }
  .tl-step{ min-width:0; }