/* ============================================================
   Лендинг возврата — Throne and Liberty
   Токены и раскладка сняты с throneandliberty.ru:
   базовый кегль 10px, 1rem = 10px, на широких экранах — vw.
   ============================================================ */

:root {
  /* Палитра брендбука TL (Figma «Брендбук-Tl», глава 2; совпадает с плагином
     TL Helper). Базовый цвет, тёмный и светлый край спектра. */
  --tl-gold:            #c5946b;
  --tl-gold-dark:       #38302a;
  --tl-gold-light:      #fff0c7;
  --tl-dark-violet:     #211636;
  --tl-dark-violet-dark:#120f19;
  --tl-violet:          #502b68;
  --tl-light-violet:    #9736b4;
  --tl-light-blue:      #9cc0e2;
  --tl-accent-red:      #b82e46;
  --tl-accent-green:    #7d983d;

  --bg:            #000;
  --bg-deep:       #0b0710;
  --panel:         var(--tl-dark-violet);
  --violet-deep:   var(--tl-dark-violet-dark);
  --violet-glow:   var(--tl-dark-violet);
  --violet:        var(--tl-violet);

  /* Градиент текста. На слайде «Стили слоя» нижняя точка подписана 986332,
     но в самом файле брендбука так залиты 5 текстовых слоёв, а 986c44 — 89,
     и плагин TL Helper ставит его же. Разбор в brand/BRANDBOOK.md. */
  --gold-a:        #ffedc7;
  --gold-b:        #986c44;
  /* Тени крупного заголовка из Figma: мягкая 50 % и жёсткая 30 %, смещение
     и размытие пропорциональны кеглю (80px → 3.8px / 7.6px). */
  --shadow-title:  drop-shadow(0 .048em .095em rgba(0,0,0,.5)) drop-shadow(0 .048em 0 rgba(0,0,0,.3));
  /* Золото декоративных линий (компонент Dividers) */
  --line-gold:     #e5c99c;
  --line-gold-dim: #be9b7c;
  /* Тег из UI kit (компонент Text tags): покой и наведение */
  --tag-bg:        #0a0a0a;
  --tag-line:      #51473e;
  --tag-bg-hover:  rgba(76,64,53,.5);
  --tag-line-hover:#6d6050;
  --bronze:        var(--tl-gold);
  --bronze-dim:    #8e7b6f;
  --frame-top:     #99816a;
  --frame-side:    #66564c;

  --text:          #fff;
  --text-dim:      #c7c7c7;
  --text-soft:     rgba(255,255,255,.72);

  --wrap:          140rem;
  --ease:          cubic-bezier(.2,.7,.3,1);
}

@font-face{font-family:"TI Throne Header";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/TiThroneHeader-Regular.woff2) format("woff2")}
@font-face{font-family:"Noto Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/NotoSans-Regular.woff2) format("woff2")}
@font-face{font-family:"Noto Sans";font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/NotoSans-Medium.woff2) format("woff2")}
@font-face{font-family:"Noto Sans";font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/NotoSans-Bold.woff2) format("woff2")}

*,*::before,*::after { box-sizing: border-box; }

html {
  font-size: 10px;
  scroll-behavior: smooth;
  /* clip, а не hidden: hidden делает элемент скролл-контейнером,
     из-за чего IntersectionObserver перестаёт видеть контент ниже экрана */
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (min-width: 1920px) { html { font-size: .5208333333vw; } }
@media (max-width: 639px)  { html { font-size: 9px; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Noto Sans", system-ui, sans-serif;
  font-size: 1.6rem;
  line-height: 1.6;
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; }
h1,h2,h3 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--panel); color: #fff; padding: 1.2rem 2rem;
  font-size: 1.4rem; text-decoration: none;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ---------- Общие приёмы ---------- */

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 3vw; }

/* Скрыть визуально, оставив для скринридеров и структуры документа.
   display:none убрал бы элемент из дерева доступности, поэтому clip-path. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.h2 {
  font-family: "TI Throne Header", serif;
  font-size: 7rem;
  letter-spacing: .05em;
  line-height: 1.1;
  text-align: center;
  background: linear-gradient(180deg, var(--gold-a), var(--gold-b));
  background-size: 100% 1.2em;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: var(--shadow-title);
}
@media (max-width: 959px) { .h2 { font-size: 4.2rem; } }
@media (max-width: 639px) { .h2 { font-size: 3.4rem; } }

/* Разделитель Level 3 из UI kit: золотая линия с ромбом и свечением.
   Ставится между крупным заголовком и тем, что под ним (брендбук, слайд 27).
   SVG выгружен из Figma целиком со свечением, поэтому высота ассета 81 при
   видимой части 23 (строки 19–42). Коробка элемента равна видимой части,
   ассет вылезает за неё через ::before — отступы считаются от линии и ромба,
   а не от прозрачного ореола. Масштабируется целиком, пропорционально. */
.divider {
  display: block;
  position: relative;
  width: min(56rem, 100%);
  aspect-ratio: 691 / 23;
  margin: 2.6rem auto 0;
  pointer-events: none;
}
.divider::before {
  content: "";
  position: absolute; left: 0; right: 0;
  top: -82.61%;     /* 19 / 23 */
  height: 352.17%;  /* 81 / 23 */
  background: url(../img/ui/divider.svg) 0 0 / 100% 100% no-repeat;
}

.cta-row { display: flex; justify-content: center; margin-top: 6rem; }


.section {
  position: relative;
  z-index: 2;
  /* В макете секция не чёрная: сверху фиолетовый замес, книзу уходит почти в ноль.
     Значения сняты пипеткой с рендера CSD-01890. */
  background:
    radial-gradient(120% 55% at 50% 0%, rgba(70,52,58,.20), transparent 68%),
    linear-gradient(180deg, #1a1125 0%, #150e1e 26%, #0d0912 62%, #050307 100%);
  padding: 12rem 0 12rem;
}
@media (max-width: 959px) { .section { padding: 7rem 0 8rem; } }

/* Секция «Что нового» идёт сразу за золотой линией и не имеет видимого
   заголовка — верхний отступ меньше, чтобы блок перетекал из предыдущего. */
.section--seamless { padding-top: 7rem; }
@media (max-width: 959px) { .section--seamless { padding-top: 4rem; } }

.section--glow::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at bottom, var(--violet-glow), transparent 40%);
  pointer-events: none;
  z-index: -1;
}
.section--bg::before {
  content: "";
  position: absolute; inset: 0;
  background: url(../img/page-bg-bottom.vPHJkCLN.webp) 50% 0 / cover no-repeat;
  opacity: .5;
  pointer-events: none;
  z-index: -1;
}

/* ============================================================
   Рамка — тот же элемент, что .hero-block на основном сайте:
   бронзовый кант, шевроны сверху и снизу, внутренний волосок.
   ============================================================ */

.frame {
  position: relative;
  border: 5px solid;
  border-color: var(--frame-top) var(--frame-side);
  background: linear-gradient(180deg, #17101f, #0d0913);
  overflow: hidden;
}
.frame__cap {
  position: absolute; left: 50%; translate: -50% 0;
  width: 16px; aspect-ratio: 16/5; z-index: 4;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='5' fill='none' viewBox='0 0 16 5'%3E%3Cpath fill='%2399816A' d='M8 5c2.4-3.333 6.333-4.722 8-5v-5H0v5c1.667.278 5.6 1.667 8 5'/%3E%3C/svg%3E") 50% 50% / 100% 100% no-repeat;
}
.frame__cap--t { top: -1px; }
.frame__cap--b { bottom: -1px; scale: 1 -1; }
.frame__inner {
  position: absolute; inset: .9rem;
  border: 1px solid hsla(38,62%,83%,.3);
  pointer-events: none; z-index: 3;
}
@media (max-width: 639px) {
  .frame__inner { inset: .9rem 0; border-left: none; border-right: none; }
}

/* ============================================================
   HERO с фоновым трейлером
   ============================================================ */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12rem 3vw 14rem;
  background: #000;
  overflow: hidden;
  isolation: isolate;
}

.hero__media { position: absolute; inset: 0; z-index: -2; }

.hero__video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}

/* Затемнение: сверху и снизу к чёрному, плюс фиолетовый подмес — как на главной */
.hero__scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(75% 55% at 50% 52%, rgba(8,5,12,.72) 0%, rgba(8,5,12,.38) 55%, transparent 100%),
    radial-gradient(130% 90% at 50% 35%, transparent 10%, rgba(11,7,16,.6) 62%, rgba(0,0,0,.94) 100%),
    linear-gradient(180deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,.35) 26%, rgba(24,15,38,.62) 62%, #000 100%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 112rem;
}

/* Основной логотип брендбука — объёмный золотой (UI kit, Logotype_H, 3d).
   Раньше стоял белый SVG с боевого сайта: брендбук его допускает, но на
   кей-арте показывает только 3D. Растр обрезан по краю знака, без полей
   под тень, поэтому ширина 31.5rem равна видимой ширине старого SVG. */
.hero__logo {
  width: 31.5rem; height: auto;
  margin-bottom: .4rem;
  filter: drop-shadow(0 4px 24px rgba(0,0,0,.7));
}
@media (max-width: 639px) { .hero__logo { width: 22.2rem; } }

.hero__title {
  margin: 0;
  font-family: "TI Throne Header", serif;
  font-size: 8.6rem;
  line-height: 1.05;
  letter-spacing: .02em;
  background: linear-gradient(180deg, var(--gold-a), var(--gold-b));
  background-size: 100% 1.2em;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Фирменная пара теней плюс широкий ореол: заголовок лежит на видео,
     брендбук разрешает усиливать тень, если фон пёстрый (слайд 11). */
  filter: var(--shadow-title) drop-shadow(0 4px 18px rgba(0,0,0,.55));
}
@media (max-width: 959px) { .hero__title { font-size: 5.4rem; } }
@media (max-width: 639px) { .hero__title { font-size: 3.9rem; } }

.hero__lead {
  margin-top: 3.6rem;
  font-size: 1.8rem;
  color: #fff;
  font-weight: 500;
  max-width: 62rem;
  text-shadow: 0 2px 6px rgba(0,0,0,.8);
}

.hero__cta { margin-top: 4.6rem; }


.hero__scroll {
  position: absolute;
  bottom: 3.2rem; left: 50%; translate: -50% 0;
  z-index: 2;
  width: 4.4rem; height: 4.4rem;
  display: grid; place-items: center;
}
.hero__scroll-arrow {
  /* Стрелка пагинатора из UI kit (компонент next), повёрнута вниз */
  width: 3rem; aspect-ratio: 36 / 24;
  background: url(../img/ui/chevron-down.svg) 50% 50% / contain no-repeat;
  animation: nudge 2s var(--ease) infinite;
}
@keyframes nudge {
  0%,100% { transform: translateY(0);     opacity: .5; }
  50%     { transform: translateY(.6rem); opacity: 1; }
}

/* ============================================================
   Набор на возвращение
   ============================================================ */

/* Шесть плиток: два ряда по три, обе строки заполнены целиком. */
.gifts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 7rem;
}

@media (max-width: 1279px) {
  .gifts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
  .gifts { grid-template-columns: 1fr; gap: 1.2rem; max-width: 34rem; margin-inline: auto; }
}

.gift {
  padding: 3.4rem 2rem 3rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.gift::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(70% 55% at 50% 0%, rgba(80,43,104,.45), transparent 70%);
  pointer-events: none;
}
@media (hover: hover) {
  .gift:hover { border-color: var(--bronze) var(--frame-side); transform: translateY(-3px); }
}

.gift__icon {
  position: relative; z-index: 2;
  width: 18rem; height: 18rem;
  object-fit: contain;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.55));
}

.gift__name {
  position: relative; z-index: 2;
  font-family: "TI Throne Header", serif;
  font-size: 2.2rem;
  line-height: 1.2;
  background: linear-gradient(180deg, var(--gold-a), var(--gold-b));
  background-size: 100% 1.2em;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ============================================================
   Ролики. Шахматка на 12-колоночной сетке: кадр занимает пять колонок
   слева или справа, текст — шесть, между ними пустая колонка. Пустая
   колонка обязательна: без неё текст лип к кадру и это читалось как баннер.
   Формат кадра — вертикаль stories, обрезанная снизу на 12%: там вшита
   игровая панель умений.
   ============================================================ */

.clips {
  --clip-aspect: 9 / 14; /* меняется одной строкой, если придут другие исходники */
  display: flex;
  flex-direction: column;
  gap: 9rem;
}

.clip {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 2.4rem;
  align-items: center;
}
.clip > .clip__media { grid-column: 1 / span 5; grid-row: 1; }
.clip > .clip__body  { grid-column: 7 / span 6; grid-row: 1; }
/* Чётные строки зеркалим — кадр уходит вправо, текст влево. */
.clip:nth-child(even) > .clip__media { grid-column: 8 / span 5; }
.clip:nth-child(even) > .clip__body  { grid-column: 1 / span 6; }

.clip__media {
  position: relative;
  aspect-ratio: var(--clip-aspect);
  background: #0a0710;
  overflow: hidden;
}
.clip__poster,
.clip__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}
.clip__video {
  opacity: 0;
  transition: opacity .5s var(--ease);
}
.clip__video.is-ready { opacity: 1; }

.clip__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 68%, rgba(13,9,19,.75));
  pointer-events: none;
  z-index: 2;
}

.clip__play {
  position: absolute; inset: auto 50% 2.4rem auto; translate: 50% 0;
  z-index: 4;
}

.clip__body { display: flex; flex-direction: column; gap: 2.6rem; }

.clip__rule {
  width: 14rem; height: 2px;
  background: linear-gradient(90deg, var(--gold-a), transparent);
}

.clip__title {
  font-family: "TI Throne Header", serif;
  /* 8.4rem — предел, при котором «Шесть новых боссов» ложится в две строки,
     а не в три: колонка текста 6 из 12 даёт около 66rem. */
  font-size: 8.4rem;
  line-height: 1.05;
  background: linear-gradient(180deg, var(--gold-a), var(--gold-b));
  background-size: 100% 1.2em;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: var(--shadow-title);
}
.clip__text { font-size: 2.9rem; color: var(--text-soft); line-height: 1.45; }

@media (max-width: 1279px) {
  .clips { gap: 7rem; }
  .clip__title { font-size: 7rem; }
  .clip__text { font-size: 2.2rem; }
}

/* Узкие экраны: столбиком, текст под кадром. */
@media (max-width: 959px) {
  .clips { gap: 6rem; }
  .clip,
  .clip:nth-child(even) { display: block; }
  .clip > .clip__media,
  .clip:nth-child(even) > .clip__media { max-width: 38rem; margin: 0 auto 2.8rem; }
  .clip__title { font-size: 5rem; }
  .clip__text { font-size: 1.8rem; }
  .clip__rule { width: 10rem; }
}

/* ============================================================
   Почему стоит вернуться
   ============================================================ */

.reasons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5.2rem 7rem;
  margin-top: 7rem;
}
@media (max-width: 959px) { .reasons { grid-template-columns: 1fr; gap: 3.4rem; } }

.reason {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 2rem;
  padding: 3.2rem 0 0;
  /* Dividers Level 1: волосок, гаснущий к обоим краям */
  border-top: 1px solid;
  border-image: linear-gradient(90deg, rgba(190,155,124,0), var(--line-gold) 50%, rgba(190,155,124,0)) 1;
}
.reason__num {
  font-family: "TI Throne Header", serif;
  font-size: 8.4rem;
  line-height: .88;
  background: linear-gradient(180deg, var(--gold-a), var(--gold-b));
  background-size: 100% 1.2em;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.reason__title {
  font-family: "TI Throne Header", serif;
  font-size: 3.8rem;
  line-height: 1.15;
  margin-bottom: 1.4rem;
  background: linear-gradient(180deg, var(--gold-a), var(--gold-b));
  background-size: 100% 1.2em;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.reason__text { font-size: 2.2rem; color: var(--text-soft); line-height: 1.5; }

/* Кегли подрезаем ступенями: на планшете колонка сужается, на телефоне
   раскладка становится одноколоночной и место под номер уже не нужно. */
@media (max-width: 1279px) {
  .reasons { gap: 4.4rem 5rem; }
  .reason { grid-template-columns: 9rem 1fr; }
  .reason__num { font-size: 7rem; }
  .reason__title { font-size: 3rem; }
  .reason__text { font-size: 1.9rem; }
}
@media (max-width: 959px) {
  .reason { grid-template-columns: 8rem 1fr; gap: 1.6rem; padding-top: 2.6rem; }
  .reason__num { font-size: 6rem; }
  .reason__title { font-size: 2.6rem; }
  .reason__text { font-size: 1.7rem; }
}

/* ---------- Шапка ---------- */

.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 3rem;
  padding: 1rem 2.5rem;
  background: #0d0b11 url(../img/ui/menu-texture.webp) 50% 50% / cover no-repeat;
  backdrop-filter: blur(10px);
  filter: drop-shadow(0 20px 30px #000);
}
.topbar::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: url(../img/ui/gold-line.png) 50% 50% / 100% 100% no-repeat;
  filter: brightness(1.5) drop-shadow(0 0 6px rgba(255,200,120,.5));
}

.topbar__logo { display: block; flex-shrink: 0; }
.topbar__logo img { width: 11rem; height: auto; filter: drop-shadow(0 0 10px #000); }

.topbar__nav { display: flex; gap: 4rem; margin-right: auto; margin-left: 4rem; }
.topbar__nav a {
  font-family: "Noto Sans", sans-serif;
  font-size: 1.4rem; font-weight: 700;
  text-transform: uppercase;
  color: #fff; text-decoration: none;
  white-space: nowrap;
  transition: color .2s var(--ease);
}
.topbar__nav a:hover { color: var(--bronze); }

.topbar__share {
  position: relative;
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 4rem; height: 4rem;
  background: none; border: none; cursor: pointer;
  transition: opacity .2s var(--ease);
}
.topbar__share img { width: 2.4rem; height: auto; }
.topbar__share:hover { opacity: .7; }
.topbar__share-done {
  position: absolute; right: 0; top: 100%;
  margin-top: .6rem;
  padding: .6rem 1rem;
  background: rgba(10,10,10,.9);
  border: 1px solid #524d49;
  color: var(--text-dim);
  font-size: 1.2rem; line-height: 1;
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .2s var(--ease);
}
.topbar__share-done.is-shown { opacity: 1; }

@media (max-width: 959px) {
  .topbar { padding: .8rem 1.6rem; gap: 1.2rem; }
  .topbar__nav { display: none; }
  .topbar__logo img { width: 8.4rem; }
}

/* Якорные переходы не должны заезжать под липкую шапку */
:target { scroll-margin-top: 8rem; }

/* ---------- Вспышка над заголовком секции ---------- */

.gold-line {
  position: relative;
  height: 2px;
  background: url(../img/ui/gold-line.png) 50% 50% / 100% 100% no-repeat;
  /* В исходнике линия полупрозрачная (альфа 37–173) и на тёмном фоне теряется,
     поэтому добавляем свечение. */
  filter: brightness(1.5) drop-shadow(0 0 6px rgba(255,200,120,.5));
  z-index: 3;
}

/* Вспышка стоит ровно на стыке блоков: её яркое ядро — на 36 % высоты кадра,
   поэтому смещаем на эту долю, а не на половину. */
.title-burst {
  position: absolute;
  left: 50%; top: 0;
  translate: -50% -36%;
  width: 52rem; aspect-ratio: 800 / 288;
  background: url(../img/ui/title-burst.webp) 50% 50% / contain no-repeat;
  pointer-events: none;
}
.title-burst::before {
  content: "";
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 110rem; height: 40rem;
  background: radial-gradient(50% 50% at 50% 50%, rgba(80,43,104,.38), transparent 72%);
  z-index: -1;
}
@media (max-width: 639px) {
  .title-burst { width: 32rem; }
  .title-burst::before { width: 52rem; height: 22rem; }
}

/* ---------- Подвал по макету ---------- */

.footer { background: #000; padding: 6rem 0; }
.footer__inner {
  display: flex; flex-direction: column; align-items: stretch; gap: 3rem;
  max-width: var(--wrap); margin: 0 auto; padding: 0 7rem;
}
.footer__row { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.footer__logos { display: flex; align-items: center; gap: 4rem; opacity: .85; }
.footer__logos-pair { display: flex; align-items: center; gap: 1.2rem; }
.footer__logos img { height: 3.8rem; width: auto; }
.footer__logos-pair img { height: 3.4rem; }
.footer__age { width: auto; height: 2.6rem; flex-shrink: 0; }
.footer__legal {
  font-family: Arial, sans-serif;
  font-size: 1.6rem;
  color: #fff; opacity: .5;
  text-align: left;
  max-width: none;
  padding-top: 3rem;
  border-top: 1px solid rgba(255,255,255,.2);
}
.footer__legal a { text-decoration: none; }
@media (hover: hover) { .footer__legal a:hover { text-decoration: underline; } }

@media (max-width: 767px) {
  .footer__inner { padding: 0 3vw; gap: 2rem; }
  .footer__row { flex-wrap: wrap; gap: 2rem; }
  .footer__logos { gap: 2rem; }
  .footer__aside { gap: 2.4rem; }
  .footer__legal { font-size: 1.3rem; padding-top: 2rem; }
}

/* ---------- Соцсети в подвале ----------
   Блок social-list с throneandliberty.ru/promo/welcome/: маски иконок взяты
   оттуда как есть, покой — золотой градиент заголовков, наведение — белый.
   Маски — data URI, а не файлы: mask-image с другого домена (CDN) требует CORS. */

.footer__aside { display: flex; align-items: center; gap: 4rem; }
.footer__astrum { display: block; }

.social { display: flex; align-items: center; gap: 2rem; }
.social__link { position: relative; display: block; width: 4rem; aspect-ratio: 1; }
.social__link::before,
.social__link::after {
  content: "";
  position: absolute; inset: 0;
  -webkit-mask: var(--mask) 50% 50% / contain no-repeat;
          mask: var(--mask) 50% 50% / contain no-repeat;
  transition: opacity .2s var(--ease);
}
.social__link::before { background: linear-gradient(180deg, var(--gold-a), var(--gold-b)); }
.social__link::after  { background: #fff; opacity: 0; }
@media (hover: hover) {
  .social__link:hover::before { opacity: 0; }
  .social__link:hover::after  { opacity: 1; }
}
.social__link:active::before { opacity: 0; }
.social__link:active::after  { opacity: .5; }
.social__link--vk { --mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' fill='none' viewBox='0 0 40 40'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M33.333 0A6.667 6.667 0 0 1 40 6.667v26.666A6.667 6.667 0 0 1 33.333 40H6.667A6.667 6.667 0 0 1 0 33.333V6.667A6.667 6.667 0 0 1 6.667 0zM6.752 12.255c.208 10.4 5.68 16.656 14.704 16.656H22v-5.952c3.28.336 5.744 2.784 6.736 5.952h4.736c-1.28-4.736-4.624-7.36-6.688-8.352 2.064-1.232 4.992-4.24 5.68-8.304H28.16c-.896 3.311-3.584 6.304-6.16 6.592v-6.592h-4.384V23.79c-2.672-.656-6.144-3.904-6.288-11.536z' clip-rule='evenodd'/%3E%3C/svg%3E"); }
.social__link--tg { --mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' fill='none' viewBox='0 0 40 40'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M20 0c11.046 0 20 8.954 20 20s-8.954 20-20 20S0 31.046 0 20 8.954 0 20 0m8.177 12.04c-.752.014-1.907.415-7.46 2.725q-2.918 1.215-11.664 5.024-1.42.565-1.488 1.105c-.087.691.91.907 2.162 1.314 1.02.332 2.394.72 3.108.735q.972.021 2.17-.801 8.171-5.515 8.436-5.576c.124-.028.297-.064.414.04s.105.301.093.354c-.1.424-5.215 5.075-5.511 5.382-1.126 1.17-2.406 1.885-.431 3.186 1.709 1.126 2.703 1.844 4.463 2.998 1.125.737 2.007 1.612 3.168 1.505.535-.049 1.087-.552 1.368-2.05.662-3.543 1.964-11.217 2.265-14.38a3.5 3.5 0 0 0-.033-.787c-.027-.155-.082-.377-.284-.541-.24-.195-.61-.236-.776-.233' clip-rule='evenodd'/%3E%3C/svg%3E"); }
.social__link--max { --mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' fill='none' viewBox='8.666 5.346 32 31.912'%3E%3Cpath fill='%23fff' d='M24.928 5.346c8.821 0 15.738 7.183 15.738 16.044 0 8.86-7.137 15.868-15.655 15.868-3.144 0-4.604-.463-7.136-2.313-1.611 2.081-6.684 3.7-6.907.925 0-4.625-2.302-7.631-2.302-14.568 0-9.107 7.44-15.956 16.262-15.956m.248 7.896c-4.186-.22-7.453 2.696-8.174 7.26-.597 3.78.46 8.384 1.365 8.617.383.098 1.302-.607 1.974-1.241a.4.4 0 0 1 .478-.05c1.046.64 2.23 1.122 3.534 1.19 4.297.227 8.105-3.15 8.33-7.464.226-4.315-3.21-8.085-7.507-8.312'/%3E%3C/svg%3E"); }

/* ---------- Тег из UI kit (Text tags) ----------
   Служебная кнопка «Включить ролик» — появляется, когда видео не стартует само
   (prefers-reduced-motion, экономия трафика, 2G).
   Чёрная плашка, коричневый волосок, TI Throne Header с трекингом 25 %.
   Кегль 1.4rem: в UI kit тег набран 13px, но брендбук запрещает TI Throne
   Header мельче 14. */

.tag {
  display: inline-flex; align-items: center; gap: .8rem;
  padding: .6rem 1.2rem;
  background: var(--tag-bg);
  border: 1px solid var(--tag-line);
  color: var(--text-dim);
  font-family: "TI Throne Header", serif;
  font-size: 1.4rem; line-height: 1.2;
  letter-spacing: .25em;
  text-shadow: 0 .04em 0 rgba(0,0,0,.3);
  cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.tag[hidden] { display: none; }
@media (hover: hover) {
  .tag:hover { background-color: var(--tag-bg-hover); border-color: var(--tag-line-hover); }
}

/* ============================================================
   Появление блоков и уважение к prefers-reduced-motion
   ============================================================ */

.reveal { opacity: 0; transform: translateY(2.4rem); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero__scroll-arrow { animation: none; }
}