/* ============================================================
   Шрифты. AA Stetica — только заголовки; остальное Manrope.
   Начертания: Medium (заголовки), Regular и Bold — про запас.
   ============================================================ */
@font-face{
  font-family:'AA Stetica'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/AAStetica-Medium.woff2') format('woff2');
}
@font-face{
  font-family:'AA Stetica'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/AAStetica-Regular.woff2') format('woff2');
}
@font-face{
  font-family:'AA Stetica'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/AAStetica-Bold.woff2') format('woff2');
}

/* ============================================================
   WatchLingo — design tokens (ivi-inspired dark system)
   ============================================================ */
:root{
  /* surfaces */
  --bg:            #0c0c0d;
  --bg-elev:       #101014;
  --surface:       #16161b;
  --surface-2:     #1e1e25;
  --surface-3:     #26262f;
  --line:          rgba(255,255,255,.08);
  --line-strong:   rgba(255,255,255,.16);

  /* text */
  --text:          #ffffff;
  --text-2:        #b6b6c2;
  --text-3:        #7c7c8a;

  /* brand */
  --brand:         #D9002A;
  --brand-hover:   #F51339;
  --brand-press:   #A80020;
  --brand-soft:    rgba(217,0,42,.14);
  --brand-glow:    rgba(217,0,42,.45);

  /* accents */
  --violet:        #6E56E8;
  --violet-soft:   rgba(110,86,232,.18);
  --green:         #3EC461;
  --gold:          #F5B32B;
  --grey:          #8D8D8D;
  --ink:           #0B0F17;
  --light:         #EFF3F6;

  /* шрифты */
  --font-display:  'AA Stetica', 'Manrope', system-ui, sans-serif;

  /* флюидная типографика: значения макета (1920) — верхняя граница */
  --fs-nav:  clamp(0.875rem, 1.04vw, 1.25rem);   /* 20px */
  --fs-lead: clamp(0.9375rem, 1.25vw, 1.5rem);   /* 24px */
  --fs-btn:  clamp(1.0625rem, 1.67vw, 2rem);     /* 32px */
  --fs-pill: clamp(0.75rem,  1.04vw, 1.25rem);   /* 20px */

  /* radii */
  --r-xs: 0.5rem;  --r-sm: 0.75rem;  --r-md: 1rem;  --r-lg: 1.5rem;  --r-xl: 2rem;  --r-pill: 62.4375rem;

  /* motion */
  --e-out: cubic-bezier(.22,.61,.36,1);
  --e-spring: cubic-bezier(.34,1.4,.5,1);

  --container: 120rem;                            /* 1920px, контент 1720 при gutter 100 */
  --gutter: clamp(1.25rem, 5.2vw, 6.25rem);       /* 100px на макете */
  --header-h: clamp(4.5rem, 6.77vw, 8.125rem);    /* 130px на макете */
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:1rem;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; border:0; background:none; cursor:pointer; }
::selection{ background:var(--brand); color:#fff; }

.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }

/* ---------- typography ---------- */
h1,h2,h3,h4{ margin:0; font-weight:800; letter-spacing:-.03em; line-height:1.05; }
.h-display{ font-size:clamp(2.5rem,6.4vw,5rem); }
.h-section{ font-size:clamp(1.75rem,3.6vw,2.75rem); letter-spacing:-.032em; }
.h-card{ font-size:1.25rem; letter-spacing:-.02em; font-weight:800; }
.lead{ font-size:clamp(1rem,1.35vw,1.1875rem); line-height:1.55; color:var(--text-2); margin:0; }
.muted{ color:var(--text-3); }
.brandtext{ color:var(--brand); }


/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.625rem;
  height:3.25rem; padding:0 1.75rem; border-radius:var(--r-pill);
  font-weight:800; font-size:0.9375rem; letter-spacing:-.01em; white-space:nowrap;
  transition:transform .18s var(--e-out), background .18s var(--e-out), box-shadow .32s var(--e-out), border-color .18s;
}
.btn:active{ transform:translateY(1px) scale(.99); }

/* Макет «Btn main» и «Btn white secondary», оба состояния. Фон в два
   слоя: радиальная подсветка снизу по центру поверх вертикального
   градиента. Радиусы подсветки заданы в процентах от самой кнопки
   (231.94% по ширине — те же 1065 px при кнопке 459×82 из макета),
   поэтому свечение не разъезжается на кнопках другой ширины.
   Обводка 1.5px — из тех же компонентов.

   Подсветка вынесена в ::before (покой) и ::after (наведение), а
   переключается их прозрачностью: градиенты браузер не
   интерполирует, transition на background по ним не работает, и
   состояние менялось бы рывком. У состояний разные и цвета, и
   высота эллипса, так что двумя переменными тут не обойтись —
   слои просто перетекают друг в друга. z-index:-1 кладёт их над
   собственным фоном кнопки, но под её текст, а isolation не даёт
   им уехать за фон родителя. */
.btn--brand, .btn--light{
  position:relative; isolation:isolate;
  color:#fff;
  border:1.5px solid rgba(255,255,255,.2);
}
.btn--brand::before, .btn--brand::after,
.btn--light::before, .btn--light::after{
  content:''; position:absolute; inset:0; z-index:-1;
  border-radius:inherit; pointer-events:none;
  transition:opacity .32s var(--e-out);
}
.btn--brand::after, .btn--light::after{ opacity:0; }
.btn--brand:hover::before, .btn--light:hover::before{ opacity:0; }
.btn--brand:hover::after,  .btn--light:hover::after{ opacity:1; }

.btn--brand{
  background:linear-gradient(180deg, #E61B43 0%, #F5567E 100%);
  box-shadow:0 0.5rem 1.875rem -0.625rem var(--brand-glow);
}
.btn--brand::before{
  background:radial-gradient(ellipse 231.94% 231.94% at 50% 100%,
    rgba(240,21,21,1) 0%, rgba(186,53,53,0) 25.24%);
}
/* на наведении меняется не сама заливка, а подсветка снизу: пятно
   становится выше и уходит в розовый. Промежуточные стопы не для
   красоты — CSS гасит прозрачность с premultiplied alpha и без них
   держал бы один цвет до конца, а в макете оттенок едет от розового
   к глубокому красному. */
.btn--brand::after{
  background:radial-gradient(ellipse 231.94% 298.41% at 50% 100%,
    rgba(255,126,126,1) 0%, rgba(244,94,94,.75) 6.31%, rgba(234,63,63,.5) 12.62%,
    rgba(223,31,31,.25) 18.93%, rgba(213,0,0,0) 25.24%);
}
.btn--brand:hover{ box-shadow:0 0.875rem 2.5rem -0.75rem var(--brand-glow); }
/* у .btn свой display, и он перебивает атрибут hidden */
.btn[hidden]{ display:none; }
.btn--light{
  background:linear-gradient(180deg, rgba(187,187,187,.54) 0%, rgba(131,131,131,.54) 100%);
}
.btn--light::before{
  background:radial-gradient(ellipse 231.94% 231.94% at 50% 100%,
    rgba(235,218,218,.56) 0%, rgba(208,208,208,0) 36.06%);
}
.btn--light::after{
  background:radial-gradient(ellipse 231.94% 231.94% at 50% 100%,
    rgba(255,255,255,.83) 0%, rgba(208,208,208,0) 36.06%);
}
.btn--ghost{ background:rgba(255,255,255,.07); color:#fff; backdrop-filter:blur(0.5rem); }
.btn--ghost:hover{ background:rgba(255,255,255,.13); }
.btn--outline{ border:1px solid var(--line-strong); }
.btn--outline:hover{ border-color:rgba(255,255,255,.34); background:rgba(255,255,255,.04); }
/* скругление у всех размеров одно — полная пилюля из .btn */
.btn--sm{ height:2.625rem; padding:0 1.25rem; font-size:0.875rem; }
.btn--lg{ height:3.75rem; padding:0 2.125rem; font-size:1.0625rem; }
.btn--block{ width:100%; }
.btn__sub{ display:block; font-size:0.75rem; font-weight:600; opacity:.78; letter-spacing:0; }
.btn--stack{ flex-direction:column; gap:1px; height:3.875rem; }

/* ---------- header ---------- */
.header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--header-h); display:flex; align-items:center;
  backdrop-filter:blur(0.625rem);
  border-bottom:1px solid transparent;
  transition:background .3s var(--e-out), border-color .3s, height .3s var(--e-out);
}
.header.is-stuck{
  background:rgba(12,12,13,.82); backdrop-filter:blur(1.125rem) saturate(1.4);
  border-bottom-color:var(--line);
}
.header__inner{ display:flex; align-items:center; gap:clamp(1rem,2.4vw,2.5rem); width:100%; }
.logo{ display:flex; align-items:center; flex:none; }
.logo__img{ height:clamp(2rem,2.44vw,2.924rem); width:auto; }

.nav{ display:flex; align-items:center; gap:clamp(0.75rem,2.2vw,4rem); min-width:0; }
.nav a{
  font-size:var(--fs-nav); font-weight:500; color:var(--grey);
  white-space:nowrap; transition:color .16s var(--e-out);
}
.nav a:hover{ color:#fff; }

.header__right{ margin-left:auto; display:flex; align-items:center; gap:1rem; flex:none; }

/* поисковая плашка */
.search{
  display:flex; align-items:center; gap:0.625rem;
  height:clamp(2.625rem,3.1vw,3.5rem); width:clamp(13rem,18vw,21rem);
  padding:0 clamp(0.875rem,1.1vw,1.25rem);
  border-radius:var(--r-xs); background:rgba(255,255,255,.06); color:var(--text-3);
  font-size:clamp(0.875rem,1vw,1.125rem); font-weight:600; text-align:left;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:background .18s, color .18s;
}
.search:hover{ background:rgba(255,255,255,.1); color:var(--text-2); }
.search .icon{ flex:none; }
/* ellipsis работает только на самом текстовом блоке, иначе строка
   упирается в правый край кнопки и отступ съедается */
.search__label{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* переключатель языка интерфейса: русский и английский */
.langpicker{ position:relative; flex:none; }
.langpicker__btn{
  display:flex; align-items:center; gap:0.5rem;
  font-size:var(--fs-nav); font-weight:500; color:#fff; white-space:nowrap;
}
.langpicker__btn .chevron{ width:1rem; height:1rem; transition:transform .24s var(--e-out); }
.langpicker.is-open .chevron{ transform:rotate(180deg); }

.langmenu{
  position:absolute; top:calc(100% + 0.75rem); right:0; z-index:60;
  width:max-content; min-width:11rem;
  display:grid; gap:0.125rem;
  padding:0.5rem; border-radius:1rem; background:#fff;
  box-shadow:0 1.75rem 4rem -1rem rgba(0,0,0,.5);
  opacity:0; visibility:hidden; transform:translateY(-0.5rem);
  transition:opacity .2s var(--e-out), transform .2s var(--e-out), visibility .2s;
}
.langpicker.is-open .langmenu{ opacity:1; visibility:visible; transform:none; z-index:70; }
.langmenu__item{
  display:flex; align-items:center; gap:0.75rem; white-space:nowrap;
  padding:0.5rem 0.75rem; border-radius:0.625rem;
  font-size:1.0625rem; font-weight:600; color:var(--ink);
  transition:background .16s var(--e-out);
}
.langmenu__item:hover{ background:var(--light); }
.langmenu__item.is-current{ background:var(--light); }

.flag{
  width:2rem; height:1.5rem; flex:none; object-fit:cover;
  border-radius:0.125rem; border:1px solid rgba(0,0,0,.1);
}
.usermenu{ position:relative; flex:none; }
/* кнопки входа в шапке лендинга */
.header__auth{ display:flex; align-items:center; gap:0.625rem; flex:none; }
.header__auth .btn{ white-space:nowrap; }

.userbtn{
  display:grid; place-items:center;
  width:2.5rem; height:2.5rem; border-radius:0.625rem;
  background:rgba(255,255,255,.14); transition:background .18s var(--e-out);
}
.usermenu:hover .userbtn, .userbtn:focus-visible{ background:rgba(255,255,255,.24); }

/* аватар вместо иконки — состояние «вошёл».
   Живёт здесь, а не в pages.css: у лендинга своя шапка, но
   вошедшему он показывает ровно тот же аватар. */
.userbtn--avatar{
  background:var(--brand); color:#fff;
  font-size:1rem; font-weight:800; letter-spacing:0;
}
.usermenu:hover .userbtn--avatar, .userbtn--avatar:hover, .userbtn--avatar:focus-visible{ background:var(--brand-hover); }
.userbtn img{ width:1.375rem; height:1.375rem; opacity:.85; }

/* ---------- появление блоков ----------
   Скрипт вешает .is-in, когда блок входит в экран. Прячем только
   при работающем JS (html.js): иначе при отключённом JS половина
   лендинга осталась бы невидимой.

   Сдвиг маленький и только вверх: большие вылеты по диагонали
   на длинной странице укачивают. */
html.js .reveal{
  opacity:0; transform:translateY(1.25rem);
  transition:opacity .55s var(--e-out), transform .55s var(--e-out);
  will-change:opacity, transform;
}
html.js .reveal.is-in{ opacity:1; transform:none; }

/* Устройства выезжают по очереди, поэтому сама сцена не двигается —
   .reveal висит на ней только как триггер, а едут картинки внутри.
   Каждая приходит со своей стороны: ноутбук справа, телефон снизу
   с небольшим доворотом. Пружинная кривая даёт лёгкий перелёт. */
html.js .devsec__stage.reveal{ opacity:1; transform:none; transition:none; will-change:auto; }
html.js .devsec__dev{
  opacity:0;
  transition:opacity .7s var(--e-out), transform .9s var(--e-spring);
  will-change:opacity, transform;
}
html.js .devsec__dev--laptop{ transform:translate3d(14%, 5%, 0) scale(.95); transition-delay:60ms; }
html.js .devsec__dev--phone{ transform:translate3d(-7%, 26%, 0) rotate(-5deg) scale(.93); transition-delay:230ms; }
html.js .devsec__stage.is-in .devsec__dev{ opacity:1; transform:none; }

/* Кому анимации мешают — показываем сразу, без движения. */
@media (prefers-reduced-motion:reduce){
  html.js .reveal{ opacity:1; transform:none; transition:none; }
  html.js .devsec__dev{ opacity:1; transform:none; transition:none; }
}

/* ---------- плашка пробного периода ----------
   Макет: Figma «state btns» (414:20). Цвет меняется по мере
   того, как дни заканчиваются: от зелёного к красному —
   человек видит срок, даже не читая текст.

   Фон в два слоя, как в макете: радиальная подсветка снизу
   по центру и вертикальный градиент под ней. Радиусы подсветки
   заданы в процентах (231.94% — те же 365.31px на ширине
   157.5px из макета), поэтому свечение не разъезжается, когда
   текст делает плашку шире. */
.trialpill{
  flex:none; display:inline-flex; align-items:center; gap:0.2083rem;
  height:3.125rem; padding:0.4688rem 1.0417rem 0.5208rem;
  border:0.052rem solid rgba(255,255,255,.15); border-radius:2.6042rem;
  overflow:hidden; white-space:nowrap;
  font-size:0.8333rem; font-weight:500; color:#fff;
  transition:filter .18s var(--e-out);
}
.trialpill:hover{ filter:brightness(1.14); }
.trialpill__icon{ flex:none; width:3.0469rem; height:3.0469rem; }
/* PNG-и лежат квадратами 468×468 с прозрачными полями, а в макете
   иконка обрезана по краю эмодзи — небольшой апскейл возвращает
   ей тот же видимый размер, что и на макете. */
.trialpill__icon img{ width:100%; height:100%; object-fit:contain; transform:scale(1.08); }

.trialpill--d7{
  background:
    radial-gradient(ellipse 231.94% 231.94% at 50% 100%, rgba(49,195,16,1) 0%, rgba(50,128,41,0) 25.24%),
    linear-gradient(180deg, rgba(17,229,28,.19) 0%, rgba(134,181,136,.17) 100%);
}
.trialpill--d6{
  background:
    radial-gradient(ellipse 231.94% 231.94% at 50% 100%, rgba(126,195,16,1) 0%, rgba(70,128,41,0) 25.24%),
    linear-gradient(180deg, rgba(91,229,17,.19) 0%, rgba(134,181,136,.17) 100%);
}
.trialpill--d5{
  background:
    radial-gradient(ellipse 231.94% 231.94% at 50% 100%, rgba(183,195,16,1) 0%, rgba(118,128,41,0) 25.24%),
    linear-gradient(180deg, rgba(169,229,17,.19) 0%, rgba(158,181,134,.17) 100%);
}
.trialpill--d4{
  background:
    radial-gradient(ellipse 231.94% 231.94% at 50% 100%, rgba(195,141,16,1) 0%, rgba(128,103,41,0) 25.24%),
    linear-gradient(180deg, rgba(229,208,17,.19) 0%, rgba(181,177,134,.17) 100%);
}
.trialpill--d3{
  background:
    radial-gradient(ellipse 231.94% 231.94% at 50% 100%, rgba(16,91,195,1) 0%, rgba(41,73,128,0) 25.24%),
    linear-gradient(180deg, rgba(17,102,229,.19) 0%, rgba(134,153,181,.17) 100%);
}
.trialpill--d2{
  background:
    radial-gradient(ellipse 231.94% 231.94% at 50% 100%, rgba(195,46,16,1) 0%, rgba(128,61,41,0) 25.24%),
    linear-gradient(180deg, rgba(229,49,17,.19) 0%, rgba(181,146,134,.17) 100%);
}
/* на узком экране подпись не помещается рядом с бургером и
   аватаром — остаётся кружок с иконкой, он ведёт туда же */
@media (max-width:640px){
  /* слева направо: смайлик, бургер, аватар */
  .trialpill{ width:2.5rem; height:2.5rem; padding:0; gap:0; justify-content:center; order:-1; }
  .trialpill__text{ display:none; }
  .trialpill__icon{ width:2.375rem; height:2.375rem; }
}

.trialpill--d1, .trialpill--over{
  background:
    radial-gradient(ellipse 231.94% 231.94% at 50% 100%, rgba(195,16,16,1) 0%, rgba(128,41,41,0) 25.24%),
    linear-gradient(180deg, rgba(229,17,17,.19) 0%, rgba(181,134,134,.17) 100%);
}

/* бургер: появляется там же, где прячется строка навигации */
.navmenu{ position:relative; flex:none; display:none; }
.navmenu__btn{
  display:grid; place-items:center; width:2.5rem; height:2.5rem;
  border-radius:0.625rem; background:rgba(255,255,255,.14); color:#fff;
  transition:background .18s var(--e-out);
}
.navmenu__btn .icon{ width:1.25rem; height:1.25rem; }
.navmenu__btn:hover, .navmenu__btn:focus-visible{ background:rgba(255,255,255,.24); }

.navmenu__list{
  /* к правому краю кнопки: бургер стоит у края экрана,
     и меню, выровненное по левому краю, уезжало за границу */
  position:absolute; top:calc(100% + 0.75rem); right:0; z-index:60;
  width:max-content; min-width:12.5rem;
  display:grid; gap:0.125rem; padding:0.5rem;
  border-radius:1rem; background:#fff;
  box-shadow:0 1.75rem 4rem -1rem rgba(0,0,0,.5);
  opacity:0; visibility:hidden; transform:translateY(-0.5rem);
  transition:opacity .2s var(--e-out), transform .2s var(--e-out), visibility .2s;
}
.navmenu.is-open .navmenu__list{ opacity:1; visibility:visible; transform:none; z-index:70; }
.navmenu__list a{
  display:flex; align-items:center; white-space:nowrap;
  padding:0.5rem 0.75rem; border-radius:0.625rem;
  font-size:1.0625rem; font-weight:600; color:var(--ink);
  transition:background .16s var(--e-out);
}
.navmenu__list a:hover{ background:var(--light); }
.navmenu__list a[aria-current]{ background:var(--light); }

/* меню профиля раскрывается по наведению; перемычка не даёт ему схлопнуться */
.usermenu__list{
  position:absolute; top:calc(100% + 0.75rem); right:0; z-index:60;
  width:max-content; min-width:12.5rem;
  display:grid; gap:0.125rem; padding:0.5rem;
  border-radius:1rem; background:#fff;
  box-shadow:0 1.75rem 4rem -1rem rgba(0,0,0,.5);
  opacity:0; visibility:hidden; transform:translateY(-0.5rem);
  transition:opacity .2s var(--e-out), transform .2s var(--e-out), visibility .2s;
}
.usermenu__list::before{ content:''; position:absolute; left:0; right:0; top:-0.75rem; height:0.75rem; }
.usermenu:hover .usermenu__list, .usermenu:focus-within .usermenu__list{
  opacity:1; visibility:visible; transform:none;
}
/* раздел изучаемого языка в меню профиля */
.usermenu__section{ display:grid; gap:0.125rem; padding:0.25rem 0.25rem 0; }
.usermenu__label{
  padding:0.375rem 0.75rem 0.25rem; font-size:0.6875rem; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; color:#9aa0a6;
}
.learnopt{
  display:flex; align-items:center; gap:0.625rem; width:100%;
  padding:0.5rem 0.75rem; border-radius:0.625rem;
  font-size:1rem; font-weight:600; color:var(--ink); white-space:nowrap;
  transition:background .16s var(--e-out);
}
.learnopt:hover{ background:var(--light); }
.learnopt .flag{ border-color:rgba(0,0,0,.14); }
.learnopt span{ flex:1; text-align:left; }
.learnopt__check{ width:1rem; height:1rem; color:var(--brand); opacity:0; flex:none; }
.learnopt.is-active{ font-weight:800; }
.learnopt.is-active .learnopt__check{ opacity:1; }
.usermenu__sep{ height:1px; margin:0.375rem 0.5rem; background:rgba(0,0,0,.1); }

.usermenu__list a{
  display:flex; align-items:center; gap:0.625rem; white-space:nowrap;
  padding:0.5rem 0.75rem; border-radius:0.625rem;
  font-size:1.0625rem; font-weight:600; color:var(--ink);
  transition:background .16s var(--e-out);
}
.usermenu__list a:hover{ background:var(--light); }
.usermenu__list .icon{ width:1.25rem; height:1.25rem; color:var(--text-3); }

.icon{ width:1.125rem; height:1.125rem; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }

/* ---------- hero ---------- */
/* по горизонтали режем (дальняя карточка уходит за край), по вертикали — нет,
   чтобы красный блюр свободно уходил в следующую секцию */
.hero{ position:relative; overflow-x:clip; padding-top:var(--header-h); background:var(--bg); }
/* фоновая лента постеров: два одинаковых полотна едут влево на transform,
   сдвиг ровно на одно полотно — стык не виден */
.hero__ribbon{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  opacity:.06;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.85) 34%,rgba(0,0,0,.45) 62%,transparent 92%);
          mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.85) 34%,rgba(0,0,0,.45) 62%,transparent 92%);
}
.hero__ribbon-track{ display:flex; width:max-content; animation:ribbon 150s linear infinite; }
.hero__ribbon-track img{ height:31.25rem; width:auto; max-width:none; }
@keyframes ribbon{ to{ transform:translateX(-50%); } }

.hero__glow{
  /* эллипс 2344×1002 из макета: центр у нижней границы первого экрана.
     Лежит под фигурой ниже — в макете они работают вместе. */
  position:absolute; left:50%; bottom:-31.3rem; z-index:1; pointer-events:none;
  width:146.5rem; height:62.625rem; transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(217,0,42,.16) 0%, rgba(217,0,42,.16) 32%, rgba(217,0,42,.07) 58%, transparent 80%);
}

/* ---------- пятно внизу первого экрана ----------
   Фигура из макета (Vector 1 / Vector mobile). Экспорт из Figma
   шире самой фигуры ровно на два радиуса размытия с каждой
   стороны, поэтому по горизонтали SVG ложится в блок один в один,
   а по вертикали его низ приходится почти на нижний край экрана:
   на десктопе выше на 44 из 1920 по ширине макета, на мобильном
   вровень. Привязываем низ к ширине (vw), чтобы при любой высоте
   первого экрана сохранялись пропорции макета. */
.heroglow{
  position:absolute; left:0; z-index:1; pointer-events:none;
  width:100%; height:auto;
  /* Размытие фигуры выходит за пределы viewBox, и по умолчанию SVG
     срезает его по своей рамке — на странице это видно как резкую
     горизонтальную линию. Разрешаем выходить за края: пятно уходит
     вниз и гаснет само. По горизонтали его придержит overflow-x
     у .hero, так что боковой прокрутки не появится. */
  overflow:visible;
}
.heroglow--desk{ bottom:-7vw; }
.heroglow--mob{ display:none; bottom:-6vw; }

/* Фигура медленно плывёт: сдвиг и лёгкое дыхание по размеру.
   Трансформация висит на группе с размытием — так браузер
   растрирует размытие один раз и дальше только двигает результат.
   transform-box:fill-box нужен, чтобы проценты и центр вращения
   считались от самой фигуры, а не от холста SVG. */
.heroglow__blob{
  transform-box:fill-box; transform-origin:50% 55%;
  animation:heroglow-drift 19s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes heroglow-drift{
  0%   { transform:translate3d(-2%, 1%, 0) scale(1); }
  50%  { transform:translate3d(1.5%, -1.5%, 0) scale(1.06); }
  100% { transform:translate3d(2.5%, 0.5%, 0) scale(1.02); }
}
@media (prefers-reduced-motion:reduce){
  .heroglow__blob{ animation:none; }
}
@media (max-width:640px){
  .heroglow--desk{ display:none; }
  .heroglow--mob{ display:block; }
}

.hero__inner{
  position:relative; z-index:2;
  padding-top:max(1.5rem, calc(clamp(2.5rem,7.3vw,7.3rem) - 1.875rem));
  padding-bottom:clamp(3.5rem,7vw,7rem);
}
.hero__grid{ display:grid; grid-template-columns:minmax(0,56%) minmax(0,44%); gap:0; align-items:start; }

.hero__title{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(2.25rem,4.69vw,5.625rem); line-height:1.17; letter-spacing:-.014em;
}
.hero__lead{
  margin:clamp(1.25rem,2vw,2rem) 0 0; max-width:min(50rem,83%);
  font-size:var(--fs-lead); line-height:1.42; color:#fff; font-weight:400;
}
.hero__cta{ display:flex; gap:1rem; margin-top:clamp(1.75rem,2.9vw,2.9rem); flex-wrap:wrap; }
/* Крупные кнопки на градиенте — первый экран и финальный блок.
   В макете это одни и те же компоненты: 40 px по бокам, 18/20 px
   сверху и снизу (в em, чтобы жить от флюидного кегля). Скругление
   не переопределяем: пилюля теперь у всех кнопок из .btn. */
.hero__cta .btn, .cta__btns .btn{
  height:auto; padding:0.5625em 1.25em 0.625em;
  font-size:var(--fs-btn); font-weight:500; letter-spacing:0; line-height:normal;
}
/* Ряд цифр шире текстовой колонки (в макете 1013 против 963) и
   заходит вправо под карточку — к этой высоте она уже кончилась,
   так что мешать нечему. Поэтому max-content и никаких переносов:
   иначе «3 языка» уезжает на вторую строку. */
.hero__metrics{
  display:flex; align-items:center; flex-wrap:nowrap;
  width:max-content; max-width:none;
  gap:clamp(1rem,2vw,2rem); margin-top:clamp(2rem,4.3vw,4.3rem);
  /* последний пункт заходит под нижний угол карточки — держим ряд
     выше неё, иначе картинка срезает «3 языка» */
  position:relative; z-index:2;
}
.metric b{ display:block; font-size:var(--fs-btn); font-weight:700; letter-spacing:-.01em; }
.metric span{ font-size:var(--fs-lead); color:rgba(255,255,255,.65); }
/* Флаги крупнее подписей и всегда в полную силу: у .metric span
   цвет с прозрачностью .65, и он приглушал их вместе с текстом. */
.metric .metric__flags{
  font-size:calc(var(--fs-lead) * 1.75); line-height:1.1;
  color:#fff; opacity:1; letter-spacing:0.125rem;
}
.metric__sep{ width:1px; height:4.375rem; background:rgba(255,255,255,.22); }
.metric__lbl{ font-size:0.8125rem; color:var(--text-3); font-weight:600; }

/* ---------- movie cards ---------- */
/* В макете карточки заходят на левую колонку на 40 px при ширине
   1920 — это 5.3% самой колонки, поэтому сдвиг едет вместе с ней. */
.hero__cards{ position:relative; margin-left:-5.3%; }

/* Карточки въезжают вместе с первым экраном. Двигаем их отдельными
   свойствами translate и scale, а не transform: у задней карточки в
   transform уже лежит наклон, к тому же разный на широком и узком
   экране, — так его не приходится повторять в каждом состоянии. */
html.js .hero__cards.reveal{ opacity:1; transform:none; transition:none; will-change:auto; }
html.js .hero__cards .mcard{
  opacity:0; translate:5% 9%; scale:.94;
  transition:opacity .7s var(--e-out), translate .9s var(--e-spring), scale .9s var(--e-spring);
  will-change:opacity, translate, scale;
}
html.js .hero__cards .mcard--front{ transition-delay:40ms; }
html.js .hero__cards .mcard--back{ translate:9% 13%; scale:.9; transition-delay:180ms; }
html.js .hero__cards.is-in .mcard{ opacity:1; translate:none; scale:1; }
@media (prefers-reduced-motion:reduce){
  html.js .hero__cards .mcard{ opacity:1; translate:none; scale:1; transition:none; }
}
.mcard{
  position:relative; display:block; width:100%; aspect-ratio:757/611;
  border-radius:1.4375rem; overflow:hidden; background:var(--surface);
}
.mcard__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.mcard--back{ position:absolute; inset:0; z-index:0; transform:translate(9.5%,7%) rotate(8.05deg); }
.mcard--back::after{ content:''; position:absolute; inset:0; background:rgba(0,0,0,.3); }
.mcard--front{ z-index:1; box-shadow:0 2.5rem 5rem -1.5rem rgba(0,0,0,.75); }

.mcard__name{
  position:absolute; left:1.875rem; top:1.875rem; z-index:3;
  display:flex; align-items:center; gap:0.5rem;
  padding:0.419rem 0.838rem; border-radius:6.25rem; background:rgba(0,0,0,.6);
  font-size:var(--fs-pill); letter-spacing:.02em; color:#fff;
}
.mcard__name .dot{ width:0.419rem; height:0.419rem; border-radius:50%; background:var(--brand); flex:none; }

.mcard__toggle{
  position:absolute; right:1.875rem; top:1.875rem; z-index:3;
  display:flex; padding:0.25rem; border-radius:6.25rem; background:rgba(0,0,0,.6);
}
.mtab{
  padding:0.419rem 0.838rem; border-radius:6.25rem;
  font-size:var(--fs-pill); letter-spacing:.02em; color:#fff;
  transition:background .18s var(--e-out);
}
.mtab.is-active{ background:var(--brand); }

.mcard__subs{
  position:absolute; left:1.25rem; right:1.25rem; bottom:clamp(0.75rem,1.7vw,1.7rem); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:0.5rem; text-align:center;
}
.subline{
  display:inline-flex; flex-wrap:wrap; justify-content:center; gap:0 .3em;
  max-width:100%; padding:0.625rem 1.25rem; border-radius:0.125rem;
  background:rgba(0,0,0,.6);
  font-family:var(--font-display),'Noto Sans Hebrew','Noto Sans SC',sans-serif;
  font-weight:500; font-size:clamp(1rem,2.19vw,2.625rem); line-height:1.25; color:#fff;
}
.subline[dir="rtl"]{ font-family:'Noto Sans Hebrew',var(--font-display),sans-serif; }
.subline.is-zh{ font-family:'Noto Sans SC',var(--font-display),sans-serif; gap:0; }
/* английская реплика длиннее остальных — держим её в одну строку
   и за счёт меньшего кегля */
.subline.is-en{ flex-wrap:nowrap; white-space:nowrap; font-size:clamp(0.8125rem,1.6vw,1.875rem); }
/* пиньинь над иероглифом */
.subline.is-zh .w{ display:inline-flex; flex-direction:column; align-items:center; line-height:1.1; }
.w__pin{
  font-family:'Manrope',sans-serif; font-style:normal; font-weight:600;
  /* нижняя граница — чтобы на телефоне пиньинь не превращался в пыль */
  font-size:clamp(0.5625rem,.42em,1.125rem); line-height:1.4; color:rgba(255,255,255,.8);
}
/* знак препинания прижимаем к предыдущему слову, пробел из gap убираем */
.subline:not(.is-zh) .punct{ margin-left:-.3em; }
/* в китайском между словами нет пробелов — подсветку даём без разрядки */
.subline.is-zh .w{ padding-left:0.125rem; padding-right:0.125rem; }
.subru{ font-size:var(--fs-lead); color:#fff; }

/* кликабельное слово в субтитрах */
.w{
  position:relative; padding:0.0625rem 0.3125rem; border-radius:0.4375rem; cursor:pointer;
  transition:background .16s var(--e-out), color .16s;
}
.w:hover{ background:rgba(255,255,255,.18); }
.w.is-open{ background:var(--brand); }
.w.is-saved::after{
  content:''; position:absolute; left:50%; bottom:-0.25rem; width:0.3125rem; height:0.3125rem;
  margin-left:-0.15625rem; border-radius:50%; background:var(--green);
}

.wordcard{
  position:absolute; z-index:20; min-width:14.375rem; padding:1rem;
  border-radius:var(--r-md); background:var(--surface-2);
  border:1px solid var(--line-strong); box-shadow:0 1.875rem 4.375rem -1.25rem rgba(0,0,0,.9);
  opacity:0; transform:translateY(0.5rem); pointer-events:none;
  transition:opacity .18s var(--e-out), transform .18s var(--e-out);
}
.wordcard.is-open{ opacity:1; transform:none; pointer-events:auto; }
.wordcard__orig{ font-size:1.5rem; font-weight:800; letter-spacing:-.02em; }
.wordcard__tr{ font-size:0.8125rem; color:var(--violet); font-weight:700; margin-top:0.125rem; }
.wordcard__ru{ font-size:1.0625rem; font-weight:700; margin-top:0.625rem; }
.wordcard__pos{ font-size:0.75rem; color:var(--text-3); font-weight:700; text-transform:uppercase; letter-spacing:.08em; margin-top:0.25rem; }
.wordcard__actions{ display:flex; gap:0.5rem; margin-top:0.875rem; }
.chipbtn{
  display:inline-flex; align-items:center; gap:0.375rem; height:2.125rem; padding:0 0.75rem;
  border-radius:var(--r-xs); background:rgba(255,255,255,.07);
  font-size:0.8125rem; font-weight:700; transition:background .16s var(--e-out);
}
.chipbtn:hover{ background:rgba(255,255,255,.14); }
.chipbtn.is-done{ background:var(--green); color:#04210d; }

.stars{ color:var(--gold); letter-spacing:0.125rem; font-size:0.875rem; }

/* ---------- section shell ---------- */
.section{ padding:6.875rem 0; position:relative; }
.section--tight{ padding:5rem 0; }
.section__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; margin-bottom:2.75rem; }
.link-all{ display:inline-flex; align-items:center; gap:0.4375rem; font-weight:700; font-size:0.9062rem; color:var(--text-2); transition:.18s; }
.link-all:hover{ color:#fff; gap:0.6875rem; }

/* ---------- language strip ---------- */
.langstrip{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.langcard{
  position:relative; overflow:hidden; padding:2rem; border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--line);
  transition:transform .3s var(--e-out), border-color .3s, background .3s;
}
.langcard:hover{ border-color:var(--line-strong); background:var(--surface-2); }
.langcard__glyph{
  position:absolute; right:-0.5rem; top:-1.875rem; font-size:11.875rem; font-weight:800; line-height:1;
  color:rgba(255,255,255,.045); pointer-events:none;
}
.langcard h3{ font-size:1.625rem; }
.langcard p{ margin:0.625rem 0 0; color:var(--text-2); font-size:0.9375rem; max-width:90%; }
.langcard__row{ display:flex; gap:0.625rem; margin-top:1.375rem; flex-wrap:wrap; }
.tag{
  display:inline-flex; align-items:center; gap:0.375rem; padding:0.375rem 0.75rem; border-radius:var(--r-pill);
  background:rgba(255,255,255,.06); font-size:0.7812rem; font-weight:700; color:var(--text-2);
}
.tag--brand{ background:var(--brand-soft); color:#ff819a; }
.tag--violet{ background:var(--violet-soft); color:#a493ff; }
.soon{ font-size:0.75rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); }

/* ---------- steps ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.step{
  position:relative; display:flex; flex-direction:column; gap:0.5rem;
  padding:1.75rem 2rem; border-radius:1.125rem;
  background:linear-gradient(180deg,#15151a,#1d1d21);
  border:1px solid rgba(255,255,255,.2); overflow:hidden;
  transition:transform .3s var(--e-out), border-color .3s;
}
.step:hover{ border-color:var(--line-strong); }
.step__num{ font-size:0.9375rem; font-weight:700; color:var(--brand); }
.step h3{ margin:0; font-size:1.375rem; line-height:1.25; }
.step p{ margin:0; color:var(--text-3); font-size:0.9375rem; line-height:1.55; }

/* Иллюстрация стоит между заголовком и подписью и растёт вместе с
   карточкой. margin-top:auto у подписи прижимает её к низу, чтобы
   у трёх карточек разной высоты текст стоял на одной линии. */
.step__art{ margin:0.75rem 0 1rem; }
.step__art img{ display:block; width:100%; height:auto; }
.step p{ margin-top:auto; }

/* ---------- catalog ---------- */
.tabs{ display:flex; gap:0.5rem; margin-bottom:1.75rem; flex-wrap:wrap; }
.tab{
  padding:0.5625rem 1.125rem; border-radius:var(--r-pill); font-size:0.875rem; font-weight:700;
  background:rgba(255,255,255,.06); color:var(--text-2); transition:.18s var(--e-out);
}
.tab:hover{ background:rgba(255,255,255,.12); color:#fff; }
.tab.is-active{ background:var(--violet); color:#fff; }

.rail{
  /* ширина колонки фиксированная, а не 1fr: при узком фильтре
     оставшиеся 2–3 обложки растягивались на всю строку и каталог
     «прыгал» от фильтра к фильтру */
  display:grid; grid-auto-flow:column; grid-auto-columns:11.875rem;
  gap:1.125rem; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:0.625rem;
  scrollbar-width:none;
}
.rail::-webkit-scrollbar{ display:none; }
.card{ scroll-snap-align:start; cursor:pointer; }
.poster{
  position:relative; aspect-ratio:2/3; border-radius:var(--r-sm); overflow:hidden;
  background:linear-gradient(165deg,var(--c1),var(--c2));
  transition:transform .32s var(--e-out), box-shadow .32s var(--e-out);
}
.card:hover .poster{ box-shadow:0 1.875rem 3.75rem -1.375rem rgba(0,0,0,.85); }
.poster__glyph{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:7.5rem; font-weight:800; color:rgba(255,255,255,.14); line-height:1;
}
.poster::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.28),transparent 40%,rgba(0,0,0,.7)); }
.poster__top{ position:absolute; z-index:2; top:0.625rem; left:0.625rem; right:0.625rem; display:flex; justify-content:space-between; }
.badge{
  padding:0.25rem 0.5rem; border-radius:0.375rem; font-size:0.7188rem; font-weight:800;
  background:rgba(0,0,0,.55); backdrop-filter:blur(0.375rem);
}
.badge--score{ color:var(--green); }
.badge--level{ background:rgba(110,86,232,.9); }
.poster__play{
  position:absolute; z-index:2; inset:0; display:grid; place-items:center;
  opacity:0; transition:opacity .25s var(--e-out);
}
.card:hover .poster__play{ opacity:1; }
.playcircle{
  width:3.25rem; height:3.25rem; border-radius:50%; display:grid; place-items:center;
  background:var(--brand); box-shadow:0 0.625rem 1.875rem -0.5rem var(--brand-glow);
}
/* флажок избранного: всегда виден на отмеченных, на остальных — по наведению */
.favbtn{
  position:absolute; z-index:3; right:0.625rem; bottom:0.625rem;
  display:grid; place-items:center; width:2rem; height:2rem;
  border-radius:0.5rem; background:rgba(0,0,0,.55); backdrop-filter:blur(0.25rem);
  color:#fff; opacity:0; transform:translateY(0.25rem);
  transition:opacity .18s var(--e-out), transform .18s var(--e-out), background .18s;
}
.favbtn svg{ width:1.0625rem; height:1.0625rem; fill:none; stroke:currentColor; stroke-width:2; stroke-linejoin:round; }
.card:hover .favbtn, .favbtn:focus-visible{ opacity:1; transform:none; }
.favbtn:hover{ background:rgba(0,0,0,.75); }
.favbtn.is-on{ opacity:1; transform:none; background:var(--brand); }
.favbtn.is-on svg{ fill:currentColor; }
.favbtn.is-on:hover{ background:var(--brand-hover); }

.card__title{ margin-top:0.75rem; font-size:0.9375rem; font-weight:800; letter-spacing:-.015em; }
.card__meta{ font-size:0.8125rem; color:var(--text-3); font-weight:600; margin-top:0.1875rem; }

/* ---------- feature split ---------- */
/* minmax(0,1fr) вместо 1fr: у грид-колонки min-width:auto, и колонка
   раздувается под минимальную ширину содержимого — карточка словаря
   с nowrap внутри так вылезала за контейнер. */
.split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:3.5rem; align-items:center; }
.split > *{ min-width:0; }
.split--rev .split__media{ order:-1; }
.split h2{ margin-bottom:1.125rem; }
.featlist{ margin:1.75rem 0 0; padding:0; list-style:none; display:grid; gap:1rem; }
.featlist li{ display:flex; gap:0.875rem; }
.featlist b{ display:block; font-size:1rem; margin-bottom:0.1875rem; }
.featlist span{ font-size:0.9062rem; color:var(--text-2); line-height:1.5; }
.featicon{ flex:none; width:2.375rem; height:2.375rem; border-radius:0.6875rem; display:grid; place-items:center; background:var(--brand-soft); color:#ff6b87; }

.vocabmock{ padding:1.5rem; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); box-shadow:0 2.5rem 5.625rem -2.5rem rgba(0,0,0,.9); }
.vocabmock__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.125rem; }
.vocabrow{
  display:flex; align-items:center; gap:0.875rem; padding:0.875rem; border-radius:var(--r-sm);
  background:var(--surface-2); margin-bottom:0.625rem; min-width:0;
  transition:transform .25s var(--e-out), background .25s;
}
.vocabrow:hover{ background:var(--surface-3); }
.vocabrow__word{ font-size:1.125rem; font-weight:800; min-width:4.625rem; }
.vocabrow__ru{ font-size:0.875rem; color:var(--text-2); font-weight:600; flex:1; min-width:0; }
/* откуда слово: сериал и серия вместо статуса повторения */
.vocabrow__from{ font-size:0.75rem; font-weight:600; color:var(--text-3); white-space:nowrap; }
.pillstat{ font-size:0.7188rem; font-weight:800; padding:0.25rem 0.5625rem; border-radius:var(--r-pill); }
.pillstat--new{ background:var(--brand-soft); color:#ff819a; }
.pillstat--rep{ background:var(--violet-soft); color:#a493ff; }
.pillstat--ok{ background:rgba(62,196,97,.16); color:#68e08b; }

/* ---------- devsec ---------- */
/* ---------- устройства ----------
   В макете это не карточка, а целая секция: текст слева, ноутбук и
   телефон справа, и ноутбук уходит за правый край экрана. Отступы
   взяты из макета (117 и 161 px при ширине 1920) и живут в vw. */
.devsec{
  --devsec-top:clamp(2.5rem,6.09vw,7.3125rem);
  position:relative; overflow-x:clip;
  padding:var(--devsec-top) 0 clamp(3rem,8.39vw,10.0625rem);
}
/* текст и сцена лежат в одной ячейке сетки: в макете они начинаются
   на одной высоте и перекрываются по горизонтали */
/* Пятно из макета (Vector 1). Экспорт шире фигуры ровно на два
   радиуса размытия с каждой стороны — отсюда 147.54%. Центрируем по
   блоку: в макете центр фигуры почти совпадает с центром секции.
   Плывёт тем же приёмом, что и остальные пятна на странице. */
.secglow{
  position:absolute; left:50%; top:50%; z-index:0; pointer-events:none;
  width:147.54%; height:auto; transform:translate(-50%,-50%);
  overflow:visible;
}
.secglow__blob{
  transform-box:fill-box; transform-origin:50% 50%;
  animation:ctaglow-drift 21s ease-in-out infinite alternate;
  will-change:transform;
}
@media (prefers-reduced-motion:reduce){
  .secglow__blob{ animation:none; }
}

.devsec__inner{ display:grid; align-items:start; position:relative; z-index:1; }
.devsec__copy{ grid-area:1/1; position:relative; z-index:2; }
.devsec__title{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.875rem,3.96vw,4.75rem); line-height:1.17; letter-spacing:-.014em;
}
.devsec__lead{
  margin:clamp(1rem,1.56vw,1.875rem) 0 0; max-width:min(100%,42rem);
  font-size:var(--fs-lead); line-height:1.42; color:#fff; font-weight:400;
}
/* Кегль плашек в макете фиксированный (16px), а раскладка тянется,
   поэтому на средних экранах ряд доезжал до телефона. Держим его
   в пределах колонки — не влез, значит переносится на вторую
   строку. 29% — левее сцены, которая начинается на 30.76%. */
.devsec__tags{
  display:flex; flex-wrap:wrap; gap:1rem;
  margin-top:clamp(1.25rem,2.08vw,2.5rem); max-width:29%;
}
.devtag{
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.3125rem 1rem; border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(90deg,
    rgba(168,144,148,.32) 0%, rgba(168,144,148,.27) 45.19%, rgba(168,144,148,.32) 100%);
  font-size:1rem; font-weight:400; color:rgba(252,252,255,.8); white-space:nowrap;
}
.devtag__soon{
  font-style:normal; font-size:0.9375rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.55);
}

/* Сцена. Размеры в процентах от колонки контейнера (529 и 1553 px
   при контенте 1720), поэтому на широких экранах она не разъезжается
   с текстом. Справа вылезает за контейнер — это и есть обрез. */
.devsec__stage{
  grid-area:1/1; position:relative; z-index:1;
  margin-left:30.76%; width:90.3%; aspect-ratio:1553/615;
  pointer-events:none;
}
.devsec__dev{ position:absolute; width:auto; height:auto; max-width:none; }
/* В ассет входит и мягкая тень под корпусом, поэтому картинка ниже
   самого ноутбука — низ тени уходит за нижний край сцены. */
.devsec__dev--laptop{ left:35.5%; top:0;   width:52%; }
/* Телефон сдвинут вправо на 30 px по меркам макета (1.93% сцены),
   чтобы заходить на ноутбук. В разметке он идёт вторым и поэтому
   лежит поверх. */
.devsec__dev--phone{  left:2.25%; top:52%; width:37.9%; }

/* ---------- pricing ---------- */
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; align-items:stretch; }
.plan{
  position:relative;
  display:flex; flex-direction:column; padding:2rem; border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--line); transition:.3s var(--e-out);
}
.plan:hover{ border-color:var(--line-strong); }
.plan--hot{ background:linear-gradient(180deg,rgba(217,0,42,.14),var(--surface) 55%); border-color:rgba(217,0,42,.45); }
.plan__tag{
  position:absolute; top:1.5rem; right:1.5rem;
  padding:0.3125rem 0.6875rem; border-radius:var(--r-pill); background:var(--brand);
  font-size:0.7188rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
}
.plan h3{ font-size:1.25rem; }
.plan__price{ display:flex; align-items:baseline; gap:0.4375rem; margin:1rem 0 0.375rem; }
.plan__price b{ font-size:2.625rem; font-weight:800; letter-spacing:-.04em; }
.plan__price span{ color:var(--text-3); font-size:0.875rem; font-weight:700; }
.plan__old{ font-size:1rem; font-style:normal; font-weight:700; color:var(--text-3); text-decoration:line-through; }
.plan ul{ list-style:none; margin:1.375rem 0 1.625rem; padding:0; display:grid; gap:0.75rem; }
.plan li{ display:flex; gap:0.625rem; font-size:0.9062rem; color:var(--text-2); }
.plan li svg{ flex:none; margin-top:0.125rem; color:var(--green); }
.plan .btn{ margin-top:auto; }

/* two-plan layout */
.plan__note{ margin:0; font-size:0.8438rem; line-height:1.5; color:var(--text-3); }
.plan__note b{ color:var(--text); font-weight:800; }
.plan--hot .plan__note{ color:var(--text-2); }
.plan__foot{ margin:0.875rem 0 0; font-size:0.75rem; line-height:1.5; color:var(--text-3); text-align:center; }
.plan ul{ margin-top:1.5rem; }

/* ---------- отзывы ----------
   Секция во весь экран: заголовок, ряд площадок и колонки с
   отзывами. Отступы из макета (92 и 54 px при ширине 1920). */
.revsec{
  position:relative; overflow-x:clip; text-align:center;
  padding:clamp(2.5rem,4.79vw,5.75rem) 0 clamp(3rem,6vw,7.25rem);
}
.revsec__inner{ position:relative; z-index:1; }
.revsec__title{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.875rem,3.96vw,4.75rem); line-height:1.17; letter-spacing:-.014em;
  max-width:20ch; margin:0 auto;
}
.revsec__sources{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:0.8125rem; margin-top:clamp(1.5rem,2.81vw,3.375rem);
}
/* плашка площадки — та же пилюля, что у плашек про устройства */
.revsrc{
  display:inline-flex; align-items:center;
  padding:0.5rem 1.25rem; border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(90deg,
    rgba(168,144,148,.32) 0%, rgba(168,144,148,.27) 45.19%, rgba(168,144,148,.32) 100%);
}
.revsrc img{ display:block; width:auto; height:clamp(1.625rem,2.08vw,2.5rem); }
/* селектор из двух классов — иначе .revsrc img выше по весу и
   перебивает переключение лого на иконку */
.revsrc .revsrc__icon{ display:none; }

/* Колонки едут вертикально в разные стороны и зацикливаются. */
.revcols{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.125rem;
  margin-top:clamp(2rem,3.65vw,4.375rem);
  height:clamp(26rem,34vw,41rem); text-align:left;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 11%,#000 89%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 11%,#000 89%,transparent);
}
.revcol{ overflow:hidden; }
.revcol__track{ animation:revroll 64s linear infinite; will-change:transform; }
.revcol:nth-child(2) .revcol__track{ animation-name:revroll-back; animation-duration:78s; }
.revcol:nth-child(3) .revcol__track{ animation-duration:70s; }
.revcols:hover .revcol__track{ animation-play-state:paused; }
@keyframes revroll{      to{ transform:translateY(-50%); } }
@keyframes revroll-back{ from{ transform:translateY(-50%); } to{ transform:none; } }
@media (prefers-reduced-motion:reduce){
  .revcol__track{ animation:none; }
}

/* Карточки разведены margin-bottom, а не gap у дорожки: сдвиг идёт
   ровно на половину её высоты, и оба набора должны быть одинаковой
   высоты вместе с отступом — с gap последний отступ пропадал бы и
   на склейке был бы рывок. */
.revcard{
  margin-bottom:1.125rem; padding:1.5rem; border-radius:var(--r-lg);
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
}
.revcard__text{ margin:0.75rem 0 1.125rem; font-size:0.9375rem; line-height:1.55; color:var(--text-2); }
.revcard__who{ display:flex; flex-direction:column; gap:0.125rem; }
.revcard__who b{ font-size:0.875rem; font-weight:800; }
.revcard__who span{ font-size:0.7812rem; color:rgba(255,255,255,.7); font-weight:600; }

/* ---------- медиа блог ----------
   Отступы из макета (72 и 114 px при ширине 1920). */
.blog{
  position:relative; overflow-x:clip; text-align:center;
  padding:clamp(2.25rem,3.75vw,4.5rem) 0 clamp(2.5rem,5.94vw,7.125rem);
}
.blog__title{
  margin:0 auto; max-width:24ch;
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.875rem,3.96vw,4.75rem); line-height:1.17; letter-spacing:-.014em;
}
.blog__lead{
  margin:clamp(0.75rem,0.83vw,1rem) auto 0; max-width:min(100%,42rem);
  font-size:var(--fs-lead); line-height:1.38; font-weight:400; color:rgba(255,255,255,.65);
}

/* Сцена. Пропорции из макета: 1720×607 при контенте 1720, то есть
   вся композиция — от телеграма слева до инстаграма справа. Каждый
   элемент позиционируется в процентах, поэтому картинка целиком
   масштабируется вместе с блоком. */
.blog__stage{
  position:relative; margin-top:clamp(1.25rem,2vw,2.5rem);
  aspect-ratio:1720/607;
}
.blog__post, .blog__soc{ position:absolute; display:block; }
.blog__post{ width:19.66%; height:auto; }
.blog__soc img{ display:block; width:100%; height:auto; }
.blog__post--1{ left:18.31%; top:14.83%; }
.blog__post--2{ left:40.17%; top:8.57%;  }
.blog__post--3{ left:61.16%; top:14.83%; }
.blog__soc--tg{ left:7.09%;  top:30.29%; width:13.33%; }
.blog__soc--ig{ left:79.31%; top:0;      width:12.3%;  }
/* ховер мягкий: медленнее и без рывка в начале — иконки крупные,
   и резкий скачок на них особенно заметен */
.blog__soc{ transition:transform .18s cubic-bezier(.33,1,.68,1), filter .18s cubic-bezier(.33,1,.68,1); }
.blog__soc:hover{ transform:scale(1.045); filter:brightness(1.05); }
.blog__soc:focus-visible{ outline:2px solid #fff; outline-offset:6px; border-radius:1rem; }

/* Появление: карточки выезжают снизу по очереди, иконки прилетают
   следом со своих сторон. Двигаем translate/scale, а не transform —
   он занят у иконок под ховер. */
html.js .blog__stage.reveal{ opacity:1; transform:none; transition:none; will-change:auto; }
html.js .blog__stage .blog__post,
html.js .blog__stage .blog__soc{
  opacity:0; translate:0 14%; scale:.92;
  transition:opacity .65s var(--e-out), translate .85s var(--e-spring), scale .85s var(--e-spring);
  will-change:opacity, translate, scale;
}
/* У иконок к списку переходов добавлены transform и filter: правило
   появления весомее, чем .blog__soc, и без этого ховер срабатывал
   мгновенно — переход по ним просто не был объявлен.

   Задержка выезда задаётся переменной и вешается только на свойства
   появления. Раньше она стояла отдельным transition-delay и потому
   распространялась на все свойства сразу: ховер начинал двигаться
   лишь через треть секунды после наведения. */
html.js .blog__stage .blog__soc{
  --soc-in-delay:0ms;
  transition:opacity .65s var(--e-out) var(--soc-in-delay),
             translate .85s var(--e-spring) var(--soc-in-delay),
             scale .85s var(--e-spring) var(--soc-in-delay),
             transform .18s cubic-bezier(.33,1,.68,1),
             filter .18s cubic-bezier(.33,1,.68,1);
}
html.js .blog__stage .blog__post--1{ transition-delay:60ms; }
html.js .blog__stage .blog__post--2{ transition-delay:0ms; }
html.js .blog__stage .blog__post--3{ transition-delay:120ms; }
html.js .blog__stage .blog__soc--tg{ translate:-20% 12%; scale:.78; --soc-in-delay:270ms; }
html.js .blog__stage .blog__soc--ig{ translate:20% -14%; scale:.78; --soc-in-delay:350ms; }
html.js .blog__stage.is-in .blog__post,
html.js .blog__stage.is-in .blog__soc{ opacity:1; translate:none; scale:1; }
@media (prefers-reduced-motion:reduce){
  html.js .blog__stage .blog__post,
  html.js .blog__stage .blog__soc{ opacity:1; translate:none; scale:1; transition:none; }
}

/* ---------- faq ---------- */
.faq{ max-width:55rem; margin:0 auto; }
.qa{ border-bottom:1px solid var(--line); }
.qa__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1.5rem 0; text-align:left; font-size:1.125rem; font-weight:800; letter-spacing:-.02em;
  transition:color .18s;
}
.qa__q:hover{ color:var(--brand); }
.qa__ico{ flex:none; width:1.5rem; height:1.5rem; display:grid; place-items:center; color:var(--text-2); }
.qa__ico svg{ grid-area:1/1; width:100%; height:100%; transition:opacity .2s var(--e-out); }
.qa__minus, .qa.is-open .qa__plus{ opacity:0; }
.qa.is-open .qa__minus{ opacity:1; }
.qa__q:hover .qa__ico{ color:var(--brand); }
.qa__a{ overflow:hidden; height:0; transition:height .34s var(--e-out); }
.qa__a p{ margin:0; padding:0 3.75rem 1.625rem 0; color:var(--text-2); font-size:0.9688rem; line-height:1.62; }

/* ---------- final cta ----------
   В макете это не карточка, а целый экран: тёмный фон, под текстом
   такое же красное пятно, как на первом экране. Вертикальные отступы
   взяты из макета (351 и 417 px при ширине 1920) и живут в vw, чтобы
   пропорции блока сохранялись на любой ширине. */
.cta{
  position:relative; overflow-x:clip; text-align:center;
  padding:clamp(3.5rem,18.3vw,21.9375rem) 0 clamp(4rem,21.7vw,26.0625rem);
}
/* Пятно из макета (Vector 1). Инлайновый SVG, а не картинка: так
   фигуру можно медленно двигать — тем же приёмом, что на первом
   экране. Ширина 144.7% — экспорт шире блока ровно на два радиуса
   размытия с каждой стороны; фигура центрируется по блоку. */
.ctaglow{
  position:absolute; left:50%; top:50%; z-index:0; pointer-events:none;
  width:144.7%; height:auto; transform:translate(-50%,-50%);
  overflow:visible;
}
/* Пятно почти во весь блок и сильно размыто, поэтому мелкий сдвиг
   на глаз не читается: к смещению добавлены поворот и заметное
   «дыхание» по размеру — так видно, что фигура живёт. */
.ctaglow__blob{
  transform-box:fill-box; transform-origin:50% 50%;
  animation:ctaglow-drift 17s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes ctaglow-drift{
  0%   { transform:translate3d(-4%, 2%, 0) rotate(-1.6deg) scale(1); }
  50%  { transform:translate3d(0.5%, -3%, 0) rotate(0.4deg) scale(1.09); }
  100% { transform:translate3d(4.5%, 1.5%, 0) rotate(1.8deg) scale(1.04); }
}
@media (prefers-reduced-motion:reduce){
  .ctaglow__blob{ animation:none; }
}
.cta__inner{ position:relative; z-index:1; }
.cta__title{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.875rem,3.96vw,4.75rem); line-height:1.17; letter-spacing:-.014em;
}
.cta__lead{
  /* 891 px из макета: ровно столько, чтобы обе строки легли по
     переносу из разметки, а не как получится */
  margin:clamp(1rem,1.46vw,1.75rem) auto 0; max-width:min(100%,55.6875rem);
  font-size:var(--fs-lead); line-height:1.42; color:#fff; font-weight:400;
}
.cta__btns{
  display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;
  margin-top:clamp(1.75rem,2.66vw,3.1875rem);
}

/* ---------- footer ---------- */
.footer{ border-top:1px solid var(--line); padding:3.75rem 0 2.5rem; margin-top:2.5rem; }
.footer__grid{ display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:2.5rem; }
.footer p{ margin:1rem 0 0; font-size:0.875rem; color:var(--text-3); max-width:34ch; line-height:1.6; }
.footer h4{ font-size:0.8125rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); font-weight:800; }
.footer ul{ list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:0.6875rem; }
.footer li a{ font-size:0.9062rem; color:var(--text-2); font-weight:600; transition:color .16s; }
.footer li a:hover{ color:#fff; }
.footer__bottom{ display:flex; justify-content:space-between; gap:1.25rem; margin-top:3.25rem; padding-top:1.625rem; border-top:1px solid var(--line); font-size:0.8125rem; color:var(--text-3); font-weight:600; flex-wrap:wrap; }

/* ---------- responsive ---------- */
@media (max-width:1440px){
  .nav{ gap:1.25rem; }
  .search{ width:clamp(10rem,14vw,16rem); }
}
@media (max-width:1120px){
  /* Первый экран встал в одну колонку. Карточку показываем раньше
     цифр: на узком экране она объясняет продукт быстрее любой
     подписи, а цифры читаются уже после.

     display:contents у .hero__copy убирает его собственный бокс,
     и заголовок, текст, кнопки и цифры становятся прямыми
     элементами сетки — только так их можно переставить
     относительно карточки, которая лежит уровнем выше. Своих
     стилей у .hero__copy нет, поэтому терять нечего. */
  .hero__copy{ display:contents; }
  /* колонок больше нет — заход на соседнюю колонку тоже не нужен */
  .hero__cards{ order:1; margin-top:clamp(2rem,5vw,3rem); margin-left:0; }
  /* в одну колонку ряду цифр уже некуда выходить — разрешаем перенос */
  .hero__metrics{ flex-wrap:wrap; width:auto; }
  .hero__metrics{ order:2; margin-top:clamp(1.75rem,4vw,2.5rem); }

  /* gap у сетки обнулён: после display:contents ячейками стали все
     элементы подряд, и общий отступ раздвинул бы заголовок, текст и
     кнопки, у которых свои margin-top. Расстояния задаёт каждый
     элемент сам, как и было до перестановки. */
  .hero__grid{ grid-template-columns:1fr; gap:0; }
  .hero__cards{ width:100%; }
  .hero__title br{ display:none; }
  .hero__title{ max-width:none; }
  .hero__cards{ max-width:46rem; }
  .mcard--back{ transform:translate(7%,6%) rotate(8.05deg); }
  .langstrip{ grid-template-columns:repeat(2,1fr); }
  .split{ grid-template-columns:1fr; gap:2.25rem; }
  .split--rev .split__media{ order:0; }
  .nav, .search{ display:none; }
  .navmenu{ display:block; }
  /* текст и устройства перестают помещаться рядом — сцена уезжает
     под текст, на всю ширину и чуть шире, чтобы ноутбук всё так же
     обрезался краем экрана, а телефон читался целиком */
  .devsec__inner{ display:block; }
  .devsec__stage{
    margin:clamp(1.5rem,4vw,3rem) 0 0 -8%;
    width:128%;
  }
  /* ряд плашек больше не обходит сцену сбоку — ограничение снимаем,
     иначе на узком экране он ужимается в треть ширины */
  .devsec__tags{ max-width:none; }
  /* пропорции внутри сцены из мобильного макета: устройства крупнее
     относительно сцены, телефон целиком на экране */
  .devsec__dev--laptop{ left:25%; width:59.1%; }
  .devsec__dev--phone{  left:5%;  width:39.1%; }
  /* третья колонка отзывов не помещается — убираем её целиком,
     а не переносим на вторую строку */
  .revcols{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .revcol:nth-child(3){ display:none; }
}
@media (max-width:860px){
  .langpicker__btn span{ display:none; }
  .langmenu__item{ font-size:1rem; }
  .mcard--back{ display:none; }
  .metric__sep{ display:none; }
  .hero__metrics{ gap:1.25rem 2rem; }
  /* Сцена по мобильному макету: шире экрана, ноутбук обрезан правым
     краем, телефон целиком виден слева. */
  .devsec__stage{ margin-left:-13.4%; width:160.9%; }
  /* три плашки должны лечь в одну строку: кегль и отступы из макета
     (14 px, 5/14 px), тогда ряд укладывается в 375 */
  .devsec__tags{ gap:0.4375rem; }
  .devtag{ font-size:0.875rem; padding:0.3125rem 0.875rem; gap:0.375rem; }
  .devtag__soon{ font-size:0.8125rem; letter-spacing:.06em; }

  /* Медиа блог по мобильному макету: карточки крупнее относительно
     сцены и заходят друг на друга, крайние уходят за края экрана,
     иконки — в противоположные углы. */
  /* в мобильном макете сцена начинается сразу под текстом, без
     отбивки — иначе композиция висит слишком низко */
  .blog__stage{ aspect-ratio:336/413.25; margin-top:0; }
  .blog__post--1{ left:-12.05%; top:22.75%; width:47.97%; }
  .blog__post--2{ left:29.66%;  top:13.79%; width:42.6%;  }
  .blog__post--3{ left:69.93%;  top:19.84%; width:46.81%; }
  .blog__soc--tg{ left:-5.8%;   top:72.3%;  width:34.05%; }
  .blog__soc--ig{ left:78.13%;  top:0;      width:31.39%; }

  .steps,.plans,.langstrip{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .section{ padding:4.625rem 0; }
  .section__head{ flex-direction:column; align-items:flex-start; gap:0.875rem; }
  /* блок сужается, а пятно вместе с ним — растягиваем его шире
     колонки, иначе от свечения на телефоне остаётся полоска */
  .ctaglow{ width:240%; }
  .rail{ grid-auto-columns:minmax(9.375rem,1fr); }
}
@media (max-width:560px){
  /* В строку словаря три колонки на телефоне не влезают: источник
     набран без переносов и распирал карточку. Уводим его на вторую
     строку, слово и перевод остаются в одну. */
  .vocabrow{ flex-wrap:wrap; gap:0.25rem 0.75rem; }
  .vocabrow__word{ min-width:0; }
  .vocabrow__ru{ flex:1 1 auto; }
  .vocabrow__from{ flex:1 0 100%; white-space:normal; }

  /* от телеграма на телефоне оставляем иконку: полное лого с
     подписью занимает всю ширину и ряд площадок ломается */
  .revsrc .revsrc__full{ display:none; }
  .revsrc .revsrc__icon{ display:block; }
  .revsrc{ padding:0.4375rem 0.875rem; }
  .revcols{ grid-template-columns:minmax(0,1fr); height:clamp(24rem,92vw,30rem); }
  .revcol:nth-child(2){ display:none; }

  /* плашка с названием и переключатель языков раньше налезали друг
     на друга: оба прижаты к своему краю, а места на 375px не хватало.
     Отступ от краёв — 14px, как в макете */
  .mcard__name{
    left:0.875rem; top:0.875rem; max-width:46%;
    padding:0.25rem 0.5rem; font-size:0.5625rem;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .mcard__name .dot{ width:0.3125rem; height:0.3125rem; }
  .mcard__toggle{ right:0.875rem; top:0.875rem; padding:0.125rem; }
  .mtab{ padding:0.25rem 0.4375rem; font-size:0.5625rem; }
  .mcard__subs{ left:0.875rem; right:0.875rem; }
  .subline{ padding:0.375rem 0.625rem; }

  /* каталог — лента в две строки: одну строку на телефоне пришлось бы
     листать вдвое дольше, а высота экрана всё равно простаивает.
     grid-auto-flow:column у .rail уже стоит, поэтому карточки
     заполняют колонку сверху вниз и едут вправо как одно полотно */
  .rail{ grid-template-rows:repeat(2,auto); grid-auto-columns:9.5rem; gap:1rem; }

  /* пилюли в две строки занимали пол-экрана — ужимаем кнопки и просветы */
  .tab{ padding:0.4375rem 0.8125rem; font-size:0.8125rem; }
  .tabs{ gap:0.375rem 0.5rem; margin-bottom:1.25rem; }
  /* 44px между заголовком секции и пилюлями читаются как разрыв */
  .section__head{ margin-bottom:1.25rem; }

  /* в шапку лендинга на телефоне помещаются логотип, бургер и одна
     кнопка: «Зарегистрироваться» и так дублируется крупной кнопкой
     в первом экране */
  .header__auth .btn--brand{ display:none; }
  .hero__cta .btn{ width:100%; }
  .userbtn{ width:2.5rem; height:2.5rem; }
  .userbtn img{ width:1.5rem; height:1.5rem; }
  .footer__grid{ grid-template-columns:1fr; }
  .hero__cta .btn, .cta__btns .btn{ width:100%; }
  .hero__cta, .cta__btns{ flex-direction:column; }
  .ctaglow{ width:340%; }
  .header .btn{ padding:0 0.875rem; font-size:0.8125rem; }
  .avatar{ display:none; }
  .hero__meta{ gap:1rem; }
  .vr{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
}