/* ============================================================
   Шрифты. 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-sm);
  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 .25s var(--e-out), border-color .18s;
}
.btn:active{ transform:translateY(1px) scale(.99); }
.btn--brand{ background:var(--brand); color:#fff; box-shadow:0 0.5rem 1.875rem -0.625rem var(--brand-glow); }
.btn--brand:hover{ background:var(--brand-hover); box-shadow:0 0.875rem 2.5rem -0.75rem var(--brand-glow); }
.btn--light{ background:var(--light); color:var(--ink); }
.btn--light:hover{ background:#fff; }
.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--sm{ height:2.625rem; padding:0 1.25rem; font-size:0.875rem; border-radius:var(--r-xs); }
.btn--lg{ height:3.75rem; padding:0 2.125rem; font-size:1.0625rem; border-radius:var(--r-md); }
.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); }
.userbtn img{ width:1.375rem; height:1.375rem; opacity:.85; }

/* бургер: появляется там же, где прячется строка навигации */
.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 из макета: центр у нижней границы первого экрана, заливка 16% */
  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%);
}
.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.17vw,5rem); line-height:1.14; 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; }
.hero__cta .btn{
  height:auto; padding:0.5625em 1.25em 0.625em; border-radius:0.5625em;
  font-size:var(--fs-btn); font-weight:500; letter-spacing:0; line-height:normal;
}
.hero__metrics{ display:flex; align-items:center; gap:clamp(1rem,2vw,2rem); margin-top:clamp(2rem,4.3vw,4.3rem); flex-wrap:wrap; }
.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__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 ---------- */
.hero__cards{ position:relative; }
.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; padding:2.125rem 1.875rem 1.875rem; border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--surface),rgba(22,22,27,.4));
  border:1px solid var(--line); overflow:hidden;
  transition:transform .3s var(--e-out), border-color .3s;
}
.step:hover{ border-color:var(--line-strong); background:var(--surface-2); }
.step__num{
  font-size:0.8125rem; font-weight:800; letter-spacing:.14em; color:var(--brand);
}
.step h3{ margin:1.125rem 0 0.625rem; font-size:1.375rem; }
.step p{ margin:0; color:var(--text-2); font-size:0.9375rem; line-height:1.6; }
.step__art{ height:6rem; margin-top:1.5rem; border-radius:var(--r-sm); background:var(--surface-2); border:1px solid var(--line); overflow:hidden; position:relative; }
.step__art i{ position:absolute; border-radius:0.375rem; background:rgba(255,255,255,.09); }

/* ---------- 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 ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center; }
.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;
  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; }
/* откуда слово: сериал и серия вместо статуса повторения */
.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; }

/* ---------- devices ---------- */
.devices{
  position:relative; overflow:hidden; padding:3.5rem; border-radius:var(--r-xl);
  background:radial-gradient(90% 130% at 15% 0%, rgba(110,86,232,.22), transparent 60%), var(--surface);
  border:1px solid var(--line);
  display:grid; grid-template-columns:1fr auto; gap:2.5rem; align-items:center;
}
.devicerow{ display:flex; align-items:flex-end; gap:1rem; }
.dev{ border-radius:0.875rem; border:1px solid var(--line-strong); background:linear-gradient(160deg,#22222c,#101015); position:relative; }
.dev::after{ content:''; position:absolute; inset:0.5rem; border-radius:0.5rem; background:linear-gradient(150deg,rgba(217,0,42,.35),rgba(110,86,232,.3)); }
.dev--tv{ width:14.375rem; height:8.75rem; }
.dev--tab{ width:6.5rem; height:8.25rem; }
.dev--phone{ width:4rem; height:7.375rem; border-radius:1rem; }

/* ---------- 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; }

/* ---------- reviews marquee ---------- */
.marquee{ position:relative; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee__track{ display:flex; gap:1.125rem; width:max-content; animation:slide 46s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes slide{ to{ transform:translateX(-50%); } }
.review{
  width:21.25rem; padding:1.5rem; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line);
}
.review p{ margin:0.75rem 0 1.125rem; font-size:0.9375rem; line-height:1.55; color:var(--text-2); }
.review__who{ display:flex; align-items:center; gap:0.6875rem; }
.review__ava{ width:2.375rem; height:2.375rem; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:0.875rem; background:var(--surface-3); }
.review__name{ font-size:0.875rem; font-weight:800; }
.review__sub{ font-size:0.7812rem; color:var(--text-3); font-weight:600; }

/* ---------- 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 ---------- */
.cta{
  position:relative; overflow:hidden; text-align:center; padding:5.5rem 2.5rem; border-radius:var(--r-xl);
  background:
    radial-gradient(70% 130% at 50% 0%, rgba(217,0,42,.42), transparent 62%),
    linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--line-strong);
}
.cta h2{ max-width:14ch; margin:1rem auto 0; }
.cta .lead{ margin:1.125rem auto 0; max-width:44ch; }
.cta__btns{ display:flex; gap:0.75rem; justify-content:center; margin-top:2rem; flex-wrap:wrap; }
.cta__note{ margin-top:1.125rem; font-size:0.8438rem; color:var(--text-3); font-weight:600; }

/* ---------- 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){
  .hero__grid{ grid-template-columns:1fr; gap:3rem; }
  .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; }
  .devices{ grid-template-columns:1fr; padding:2.25rem; }
  .devicerow{ transform:scale(.86); transform-origin:left bottom; }
}
@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; }
  .devices{ padding:1.75rem; }
  .devicerow{ transform:none; gap:0.75rem; }
  .dev--tv{ width:9.375rem; height:5.875rem; }
  .dev--tab{ width:4.375rem; height:5.5rem; }
  .dev--phone{ width:2.75rem; height:5rem; }
  .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; }
  .cta{ padding:3.5rem 1.375rem; }
  .rail{ grid-auto-columns:minmax(9.375rem,1fr); }
}
@media (max-width:560px){
  /* плашка с названием и переключатель языков раньше налезали друг
     на друга: оба прижаты к своему краю, а места на 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; }
  .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; }
}