/* Макет «Кино».

   Собран по образцу студийных портфолио: экран целиком занимает видео,
   поверх — огромный заголовок нормального начертания, а вся остальная
   обвязка сведена к минимуму. Ни карточек, ни таблиц, ни колонок: одна
   мысль на экран.

   Особенность нашего материала: все клипы вертикальные, снятые под телефон.
   Поэтому на широком экране кадр обрезается по бокам — это осознанно.
   Клипы атмосферные (дождь, море, город ночью), у них нет главного объекта
   в углу, который жалко потерять; зато на телефоне такой клип ложится
   идеально, а именно оттуда приходит большая часть людей.

   Текст читается на любом кадре: поверх видео лежит плёнка с градиентом
   снизу. Без неё белые буквы на светлом кадре исчезают, и подбором шрифта
   это не лечится. */

:root{
  --ink:#f4f6fb;
  --ink-soft:rgba(244,246,251,.72);
  --bg:#07090f;
  --line:rgba(255,255,255,.16);
  --accent:#3b82f6;
  --accent-hover:#2f6fe0;
  --radius:999px;
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
}

*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html{ background:var(--bg); scroll-behavior:smooth; }
body{ background:var(--bg); color:var(--ink); line-height:1.5;
      font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; }
a{ color:inherit; text-decoration:none; }
.wrap{ width:100%; max-width:1240px; margin:0 auto; padding:0 34px; }

/* ─── экран целиком ───────────────────────────────────────────────────── */
.screen{ position:relative; min-height:100vh; min-height:100dvh;
         display:flex; flex-direction:column; overflow:hidden; }
.film{ position:absolute; inset:0; z-index:0; background:#07090f; }
.film video, .film img{ width:100%; height:100%; object-fit:cover; display:block;
                        filter:saturate(.92) brightness(.66); }

/* Клипы вертикальные, 720×1280 — сняты под телефон. На широком экране cover
   тянет кадр по ширине, и от него остаётся полоса по центру: на 1280×800
   видно 35% высоты, на 1920×1080 — 32%. Положение полосы задаёт
   object-position: она начинается на (значение × 65%) высоты кадра. Отсюда и
   проценты ниже — считались как (доля смыслового центра − 0.14) / 0.65,
   чтобы главное попало в полосу и легло выше текста, а не под него.
   Кадры без единого смыслового центра (02, 03, 16, 18, 19 — фактура:
   волны, облака, морда в центре) оставлены с обрезкой по центру.
   На телефоне не меняем ничего: там клип виден целиком. */
@media (min-width:821px){
  /* cine-01: фонарь и его ореол в верхней четверти */
  .film video[poster*="cine-01"], .film img[src*="cine-01"]{ object-position:50% 20%; }
  /* cine-04: ядро Млечного Пути и линия горизонта */
  .film video[poster*="cine-04"], .film img[src*="cine-04"]{ object-position:50% 35%; }
  /* cine-05: башня выше полосы кадра целиком не влезает — берём подсвеченный
     город, теряя кончик шпиля: он тонкий, а город даёт кадру жизнь */
  .film video[poster*="cine-05"], .film img[src*="cine-05"]{ object-position:50% 30%; }
  /* cine-06: поток воды ниже середины, лес над ним */
  .film video[poster*="cine-06"], .film img[src*="cine-06"]{ object-position:50% 55%; }
  /* cine-07: фонарь маяка — единственная светлая точка */
  .film video[poster*="cine-07"], .film img[src*="cine-07"]{ object-position:50% 25%; }
  /* cine-08: вывеска-чашка в верхней трети */
  .film video[poster*="cine-08"], .film img[src*="cine-08"]{ object-position:50% 30%; }
  /* cine-09: луна в верхней пятой части */
  .film video[poster*="cine-09"], .film img[src*="cine-09"]{ object-position:50% 15%; }
  /* cine-10: фонари в глубине переулка задают перспективу */
  .film video[poster*="cine-10"], .film img[src*="cine-10"]{ object-position:50% 25%; }
  /* cine-11: силуэты с зонтами внизу, выше только туман */
  .film video[poster*="cine-11"], .film img[src*="cine-11"]{ object-position:50% 70%; }
  /* cine-12: стык воды: айсберг сверху и подводная часть */
  .film video[poster*="cine-12"], .film img[src*="cine-12"]{ object-position:50% 35%; }
  /* cine-13: луна и освещённые пики над морем облаков */
  .film video[poster*="cine-13"], .film img[src*="cine-13"]{ object-position:50% 20%; }
  /* cine-14: морда почти во всю высоту кадра — по центру срезает уши */
  .film video[poster*="cine-14"], .film img[src*="cine-14"]{ object-position:50% 40%; }
  /* cine-15: солнце у горизонта в верхней трети */
  .film video[poster*="cine-15"], .film img[src*="cine-15"]{ object-position:50% 25%; }
  /* cine-17: замок на скале прижат к верхнему краю */
  .film video[poster*="cine-17"], .film img[src*="cine-17"]{ object-position:50% 0%; }
}

/* Плёнка: сверху едва заметна, снизу плотная — там лежит текст */
.veil{ position:absolute; inset:0;
       background:linear-gradient(180deg, rgba(7,9,15,.55) 0%,
                  rgba(7,9,15,.35) 38%, rgba(7,9,15,.88) 100%); }

/* ─── шапка ───────────────────────────────────────────────────────────── */
.bar{ position:relative; z-index:2; }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:16px;
      padding:22px 34px; }
.brand{ display:inline-flex; align-items:center; gap:10px; font-weight:800;
        font-size:15px; letter-spacing:.16em; text-transform:uppercase; }
.brand-mark{ width:24px; height:24px; }

/* ─── кнопки ──────────────────────────────────────────────────────────── */
.btn{ display:inline-flex; align-items:center; justify-content:center;
      border:0; border-radius:var(--radius); padding:13px 26px; font-size:12px;
      font-weight:700; letter-spacing:.12em; text-transform:uppercase;
      cursor:pointer; font-family:inherit; transition:background .15s, opacity .15s; }
.btn-lg{ padding:17px 34px; font-size:13px; }
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover{ background:var(--accent-hover); }
.btn-ghost{ background:rgba(255,255,255,.10); color:var(--ink);
            border:1px solid var(--line); }
.btn-ghost:hover{ background:rgba(255,255,255,.18); }

/* ─── подача: заголовок во весь экран ─────────────────────────────────── */
.hero{ position:relative; z-index:2; flex:1; display:flex; align-items:center;
       padding:40px 0; }
.kicker{ display:inline-block; font-family:var(--mono); font-size:12px;
         letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft);
         margin-bottom:20px; }
h1{ font-size:clamp(44px,9vw,132px); line-height:.94; font-weight:400;
    letter-spacing:-.035em; max-width:14ch; }
.lead{ margin-top:22px; max-width:46ch; color:var(--ink-soft);
       font-size:clamp(15px,1.9vw,18.5px); }
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.note{ margin-top:14px; color:var(--ink-soft); font-family:var(--mono);
       font-size:12px; }

/* ─── нижняя строка экрана ────────────────────────────────────────────── */
.foot-line{ position:relative; z-index:2; display:flex; align-items:center;
            justify-content:space-between; gap:20px; padding:0 34px 26px; }
.facts{ display:flex; flex-wrap:wrap; gap:8px 18px; font-family:var(--mono);
        font-size:12px; color:var(--ink-soft); }
.facts span::before{ content:'— '; opacity:.5; }
.next{ font-family:var(--mono); font-size:12px; letter-spacing:.08em;
       color:var(--ink-soft); white-space:nowrap; }
.next:hover{ color:var(--ink); }

/* ─── второй экран: что входит ────────────────────────────────────────── */
.more{ padding:74px 0 20px; }
.more h2{ font-size:clamp(26px,4vw,44px); font-weight:400; letter-spacing:-.025em; }
.inc-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px;
           margin-top:30px; }
.card{ background:rgba(255,255,255,.05); border:1px solid var(--line);
       border-radius:16px; padding:18px; }
.inc b{ display:block; font-size:15.5px; font-weight:800; }
.inc span{ display:block; margin-top:6px; color:var(--ink-soft); font-size:14px; }
.small-note{ margin-top:18px; color:var(--ink-soft); font-size:13px; max-width:80ch; }

/* ─── финал ───────────────────────────────────────────────────────────── */
.final{ padding:56px 0 70px; }
.final h2{ font-size:clamp(24px,3.6vw,40px); font-weight:400; letter-spacing:-.02em; }
.final p{ margin-top:14px; color:var(--ink-soft); max-width:56ch; }
.final .btn{ margin-top:26px; }

/* ─── подвал ──────────────────────────────────────────────────────────── */
footer{ border-top:1px solid var(--line); padding:24px 0 34px; }
.links{ display:flex; flex-wrap:wrap; gap:8px 20px; font-family:var(--mono);
        font-size:12px; }
.links a{ color:var(--ink-soft); }
.links a:hover{ color:var(--ink); }
.muted{ margin-top:14px; color:var(--ink-soft); font-size:12px; }

/* ─── узкие экраны ────────────────────────────────────────────────────────
   Здесь вертикальный клип наконец показывается целиком — ради этого формат
   и выбран. Нижнюю строку разворачиваем в столбик. */
@media (max-width:820px){
  .wrap{ padding:0 22px; }
  .nav{ padding:16px 22px; }
  .foot-line{ flex-direction:column; align-items:flex-start; gap:10px;
              padding:0 22px 22px; }
  .inc-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .more{ padding:52px 0 14px; }
}
@media (max-width:520px){
  .inc-grid{ grid-template-columns:1fr; }
}

/* ─── экономный режим ─────────────────────────────────────────────────────
   Видео на весь экран — самое дорогое, что есть на странице. На слабом
   устройстве и при экономии трафика его не запускает landing.js, а здесь
   выключаем остальное движение. */
html[data-lite] *,
html[data-lite] *::before,
html[data-lite] *::after{
  animation:none !important;
  transition:none !important;
}
html[data-lite] *{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
html[data-lite]{ --rk-cursor:0; }