/* ============================================================
   ДИЗАЙН-КОД — Frame.io
   Источник: DESIGN.md (refero.design, style 30c3aa18) и bar.md
   Слой подключается ПОСЛЕ инлайн-стилей и переопределяет их.
   Куски: c1 (этот слой) → c2 (первый экран) → c3 (секции) → c4 (медиа)
   ============================================================ */

:root{
  --ink:#fcfcfc;
  --ink-2:#757580;
  --ink-3:#a3a3b3;
  --iris:#6199f6;
  --hair:#2a2a32;
  --line:#4f4f80;
  --bg:#0a0a13;
  --bg-soft:#08080c;
  --bg-deep:#02000a;
  --taxi:#F5C242;
  --taxi-deep:#C8891A;
  --r-media:10px;
  --r-pill:100px;
  --shadow-media:0 24px 48px rgba(0,0,0,.5);
  --cosmic:linear-gradient(180deg,#0a0010 0%,#02000a 46%,#0c1d32 100%);
  --eyebrow-ls:.06em;
  --label-w:500;
}

/* ---------- полотно: непрерывный космический градиент на всю страницу ---------- */
html{background:var(--bg)}
body{
  background:var(--cosmic);
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-attachment:scroll;
  min-height:100%;
}
.hero{
  background:radial-gradient(90% 70% at 8% 0%,rgba(61,44,140,.42) 0%,rgba(10,10,19,0) 62%);
}
.hero::before{display:none}

/* секции не перекрывают рампу полотна */
.quote-sec,.ticker,.cta-band,footer{background:transparent}

/* ---------- типографика: 400 в дисплее и заголовках секций ---------- */
h1,h2{font-weight:400}
.display{font-weight:400;font-stretch:92%}
.h2{font-weight:400;font-stretch:92%}

/* ---------- надзаголовки и mono-метки: вес 500, разрядка .06em, 12px ---------- */
.eyebrow{font-weight:var(--label-w);letter-spacing:var(--eyebrow-ls)}
.label-accent{font-weight:var(--label-w);letter-spacing:var(--eyebrow-ls)}
.facts .k,.pillars .k,.hero-meta .k{
  font-weight:var(--label-w);letter-spacing:var(--eyebrow-ls);
}
.pillars .k{font-size:12px}
.ticker span{letter-spacing:var(--eyebrow-ls)}

/* ---------- кнопки: цветных CTA нет ---------- */
.btn--fill:hover{background:#eaeaff;color:var(--bg)}
.btn--ghost:hover{border-color:var(--ink);color:var(--ink);background:rgba(252,252,252,.08)}
.teaser .frame:hover .play{background:var(--ink);color:#0a0a13}

/* ---------- точки-метки: сиреневый акцент, не жёлтый ---------- */
.dot{background:var(--iris);box-shadow:0 0 10px rgba(97,153,246,.45)}

/* ---------- подписи кадров: 12px, вторичный цвет, ровная строка ---------- */
.cap{
  font-family:inherit;font-size:12px;letter-spacing:normal;color:var(--ink-2);
}
.cap b{color:inherit;font-weight:400}
.ticker span{color:var(--ink-2);font-weight:var(--label-w)}

/* ---------- один типографический голос: цитата — серифная, но не заголовок ---------- */
.quote-sec blockquote{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(24px,3vw,34px);line-height:1.24;letter-spacing:-.02em;
}

/* ---------- первый экран: заголовок — утверждение, логотип — лок-ап ---------- */
.display{font-size:clamp(56px,6.8vw,86px)}
.hero-lockup{font-size:28px;margin:14px 0 0}
.hero-title{margin:16px 0 0}

/* ---------- один знак: типографический лок-ап и в футере ---------- */
.brandplate--type{
  width:auto;background:transparent;border:0;box-shadow:none;
}
.brandplate--type .wordmark{font-size:30px}