/* Макет «Витрина».

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

   Кадр — это видео на фоне и текст поверх. Отсюда два требования, которые
   в этом файле важнее всего:

     * текст должен читаться на любом кадре. Поэтому поверх каждого видео
       лежит затемняющая плёнка (.veil) с градиентом снизу: без неё белые
       буквы на светлом кадре исчезают, и это не лечится подбором шрифта;
     * когда файла видео нет, фон рисуется своим кодом (.stage-fallback):
       падающие символы и полоса развёртки. Страница не должна выглядеть
       недоделанной из-за отсутствия чужого клипа.

   Палитру задают темы, как во всех макетах. */

:root{
  --bg:#0a0f1e;
  --card:rgba(255,255,255,.05);
  --line:rgba(130,160,255,.16);
  --text:#eef2fb;
  --muted:#9aa6c4;
  --accent:#3b82f6;
  --accent2:#8ab4ff;
  --accent-hover:#2f6fe0;
  --green:#34d399;
  --radius:18px;
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;
}

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

/* ─── шапка ───────────────────────────────────────────────────────────────
   Липкая, но без размытия фона: размытие липкой шапки дёргает прокрутку
   на Mac сильнее, чем любая анимация. */
.bar{ position:sticky; top:0; z-index:50; background:rgba(10,15,30,.92);
      border-bottom:1px solid var(--line); }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:16px;
      padding:14px 22px; }
.brand{ display:inline-flex; align-items:center; gap:9px; font-weight:850; font-size:16px; }
.brand-mark{ width:26px; height:26px; }

/* ─── кнопки ──────────────────────────────────────────────────────────── */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
      border:0; border-radius:13px; padding:12px 22px; font-size:15px; font-weight:700;
      cursor:pointer; font-family:inherit;
      transition:background .15s, transform .1s, border-color .15s; }
.btn:active{ transform:translateY(1px); }
.btn-lg{ padding:16px 32px; font-size:16.5px; }
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover{ background:var(--accent-hover); }
.btn-ghost{ background:rgba(255,255,255,.06); color:var(--text);
            border:1px solid var(--line); }
.btn-ghost:hover{ border-color:var(--accent2); }

/* Метка над заголовком: моноширинная, с зелёной точкой — от «хакерского»
   стиля остаётся ровно этот акцент, без имитации терминала */
.tag{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono);
      font-size:12.5px; letter-spacing:.02em; color:var(--accent2);
      background:rgba(59,130,246,.14); border:1px solid rgba(59,130,246,.3);
      border-radius:999px; padding:6px 14px; margin-bottom:16px; }
.tag::before{ content:''; width:7px; height:7px; border-radius:50%;
              background:var(--green); box-shadow:0 0 8px var(--green); }

/* ─── сцена: видео, картинка или анимация ─────────────────────────────── */
.stage{ position:absolute; inset:0; overflow:hidden; z-index:0; background:#070b16; }
.stage-media{ width:100%; height:100%; object-fit:cover; display:block;
              /* лёгкая деконтрастность, чтобы текст поверх не спорил с кадром */
              filter:saturate(.9) brightness(.72); }
/* Плёнка поверх кадра. Снизу темнее — там лежит текст. */
/* Плотность подобрана под светлые кадры: два клипа из пяти — светлые
   (роутер на белом столе, ноутбук у окна), и на них белый заголовок без
   такого затемнения теряется. На тёмных кадрах лишняя плотность не мешает. */
.veil{ position:absolute; inset:0;
       background:linear-gradient(180deg, rgba(7,11,22,.6) 0%,
                  rgba(7,11,22,.52) 38%, rgba(7,11,22,.93) 100%); }

/* Заглушка вместо видео: падающие символы и полоса развёртки. Оба слоя —
   градиенты, ни одной картинки: файл темы и так тяжёлый. */
.stage-fallback{ position:absolute; inset:0;
                 background:radial-gradient(120% 80% at 70% 10%, rgba(59,130,246,.22), transparent 60%),
                            radial-gradient(90% 70% at 15% 90%, rgba(52,211,153,.14), transparent 60%),
                            #070b16; }
.glyphs{ position:absolute; inset:-20% 0; opacity:.5;
         background-image:repeating-linear-gradient(90deg,
           rgba(52,211,153,.16) 0 1px, transparent 1px 22px);
         mask-image:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
         -webkit-mask-image:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
         animation:fall 9s linear infinite; }
@keyframes fall{ to{ transform:translateY(20%); } }
.scan{ position:absolute; left:0; right:0; height:36%;
       background:linear-gradient(180deg, transparent, rgba(138,180,255,.13), transparent);
       animation:sweep 7s ease-in-out infinite; }
@keyframes sweep{ 0%{ top:-40%; } 100%{ top:100%; } }

/* ─── первый экран ────────────────────────────────────────────────────── */
.hero{ position:relative; min-height:clamp(520px,78vh,760px); display:flex;
       align-items:flex-end; padding:110px 0 56px; overflow:hidden; }
.hero-text{ position:relative; z-index:1; max-width:760px; }
h1{ font-size:clamp(32px,6.4vw,64px); line-height:1.04; font-weight:850;
    letter-spacing:-.03em; }
.lead{ margin-top:18px; color:#cdd6ea; font-size:clamp(15.5px,2vw,19px);
       max-width:62ch; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.cta-note{ margin-top:13px; color:var(--muted); font-size:13.5px; }

/* ─── лента кадров ────────────────────────────────────────────────────── */
.frames{ padding:0; }
.frame{ position:relative; min-height:clamp(420px,64vh,620px); display:flex;
        align-items:flex-end; overflow:hidden;
        border-top:1px solid rgba(255,255,255,.06); }
.frame-text{ position:relative; z-index:1; width:100%; max-width:1080px;
             margin:0 auto; padding:0 22px 46px; }
.frame h2{ font-size:clamp(26px,4.6vw,46px); line-height:1.08; font-weight:850;
           letter-spacing:-.025em; }
.frame .note{ margin-top:12px; color:#cdd6ea; font-size:clamp(15px,1.8vw,17.5px);
              max-width:56ch; }

/* ─── что входит ──────────────────────────────────────────────────────── */
.included{ padding:64px 0 8px; }
.included h2{ font-size:clamp(24px,3.6vw,38px); font-weight:850; letter-spacing:-.02em; }
.inc-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;
           margin-top:28px; }
.card{ background:var(--card); border:1px solid var(--line);
       border-radius:var(--radius); padding:18px; }
.inc b{ display:block; font-size:16.5px; font-weight:800; }
.inc span{ display:block; margin-top:7px; color:var(--muted); font-size:14.5px; }
.note{ margin-top:18px; color:var(--muted); font-size:13.5px; max-width:80ch; }

/* ─── финал ───────────────────────────────────────────────────────────── */
.final{ padding:60px 0 66px; }
.final h2{ font-size:clamp(25px,3.8vw,40px); font-weight:850; letter-spacing:-.02em; }
.final .btn{ margin-top:26px; }

/* ─── подвал ──────────────────────────────────────────────────────────── */
footer{ border-top:1px solid var(--line); padding:26px 0 34px; }
.links{ display:flex; flex-wrap:wrap; gap:8px 18px; font-size:14px; }
.links a{ color:var(--muted); }
.links a:hover{ color:var(--text); }
.muted{ margin-top:16px; color:var(--muted); font-size:13px; }

/* ─── узкие экраны ────────────────────────────────────────────────────── */
@media (max-width:900px){
  .inc-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hero{ padding:84px 0 42px; min-height:clamp(460px,72vh,620px); }
}
@media (max-width:560px){
  .inc-grid{ grid-template-columns:1fr; }
  .frame{ min-height:380px; }
  .frame-text{ padding-bottom:34px; }
}

/* ─── экономный режим ─────────────────────────────────────────────────────
   Признак ставит 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; }

@media (prefers-reduced-motion: reduce){
  .glyphs, .scan{ animation:none !important; }
}