/* brandlantern — лендинг набора в бета-тест.
   Язык бренда — с маркетингового лендинга (палитра #39 «Sky + Orange», Inter + JetBrains Mono).
   Заголовки: Source Serif 4 вместо Newsreader — у Newsreader нет кириллицы. */

:root{
  --page:#F0F9FF; --ink:#0C4A6E; --ink-soft:#53718A; --border:#D6E6F2; --border-strong:#B8D3E6;
  --navy-0:#0B3651; --navy-1:#06243A; --navy-2:#02131F;
  --cta:#F97316; --cta-text:#C2410C; /* оранжевый для мелкого текста на светлом: 5.2:1 */
  --cta-btn:#CF4A0D; --cta-ink:#FFFFFF; --cta-hover:#B93F0B; /* кнопки: белый текст на глубоком оранжевом 4.5:1, на наведении 5.6:1 — темнее, а не светлее */
  --acc:#38BDF8; --acc-soft:#9AD9F5; --label:#0C6E96;
  --hl:#2E8BE6;       /* ключевое слово в заголовке — акцент кабинета (светлая тема); на тёмном — --acc, как в тёмной теме */
  --pill:#FDE3CB; --pill-fg:#9A3D0A;
  --hero-text:#FFFFFF; --hero-muted:#AFC9DD;
  --track:#E7F1FA; --bar:linear-gradient(90deg,#7CC4F2,#38BDF8); --bar-hot:linear-gradient(90deg,#FB8A33,#F97316);
  --err:#DC2626;
  --content:1112px;   /* одна ширина контента для всех светлых блоков */
  --sp:76px;          /* вертикальный отступ секции: между любыми соседними блоками — 2×, включая hero, тёмную панель и футер */
  --head-gap:56px;    /* заголовок секции → её контент */
  --tail-gap:28px;    /* контент → подпись под ним (итог-фраза, сноска) */
  --f-serif:"Source Serif 4",Georgia,serif; --f-sans:"Inter",system-ui,sans-serif; --f-mono:"JetBrains Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.16,1,.3,1); --spring:cubic-bezier(.34,1.42,.64,1);
  --plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='58'%3E%3Cpath d='M29 25 V33 M25 29 H33' stroke='%230C4A6E' stroke-opacity='0.10' stroke-width='1'/%3E%3C/svg%3E");
  --plus-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='58'%3E%3Cpath d='M29 25 V33 M25 29 H33' stroke='%2338BDF8' stroke-opacity='0.10' stroke-width='1'/%3E%3C/svg%3E");
}

*{box-sizing:border-box; margin:0; padding:0;}
[hidden]{display:none !important;}
html{accent-color:var(--cta); scrollbar-color:var(--border-strong) var(--page);}
::selection{background:rgba(249,115,22,.22);}
a, button, input{-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth; scroll-padding-top:16px;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }
body.bl-beta{font-family:var(--f-sans); background:var(--page) var(--plus); color:var(--ink); -webkit-font-smoothing:antialiased; min-height:100dvh; overflow-x:hidden;}
a{color:inherit; text-decoration:none;}
:focus-visible{outline:2px solid var(--acc); outline-offset:2px; border-radius:8px;}
.sprite{position:absolute; width:0; height:0; overflow:hidden;}
.ic{width:20px; height:20px; flex:none; display:inline-block; vertical-align:middle;}
.hl{color:var(--hl);}   /* выделение без курсива — только цвет, шрифт и вес заголовка */
h1 .hl, .dpanel .hl{color:var(--acc);}

.atmos{position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(58% 48% at 50% -8%, rgba(56,189,248,.12), transparent 70%);}
main, .site-nav, .site-foot{position:relative; z-index:1;}
.wrap{position:relative; max-width:1320px; margin:0 auto; padding:0 24px;}

/* ───── nav ───── */
.site-nav nav{display:flex; align-items:center; height:76px; gap:20px;}
.brand{display:inline-flex; align-items:center; color:#16273F; transition:opacity .18s;}
.brand:hover{opacity:.82;}
/* вордмарк — как в кабинете: Newsreader 500, «lantern» курсивом оранжевым; везде, где в тексте слово brandlantern */
.wm{font-family:"Newsreader",Georgia,serif; font-optical-sizing:auto; font-weight:500; font-style:normal; letter-spacing:-.005em; text-transform:none; white-space:nowrap;}
.wm i{font-style:italic; color:var(--cta);}
.brand .wm{font-size:23px;}
.nav-links{display:flex; gap:8px; margin-left:24px;}
.nav-links a{font-size:14px; color:#3F6075; font-weight:500; padding:8px 12px; border-radius:8px; transition:color .18s, background .18s;}
.nav-links a:hover{color:var(--ink); background:rgba(12,74,110,.06);}

/* ───── buttons ───── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--f-sans); font-weight:600; font-size:14px; border:none; border-radius:999px; padding:11px 18px; cursor:pointer; white-space:nowrap;
  transition:transform .2s var(--spring), box-shadow .22s var(--ease), background .18s, border-color .18s, color .18s;}
.btn-lg{font-size:15px; padding:14px 22px;}
.btn .ic-arrow{width:16px; height:16px;}
.btn-primary{background:var(--cta-btn); color:var(--cta-ink); font-weight:700;}
.btn-primary:hover{background:var(--cta-hover); transform:translateY(-1px); box-shadow:0 10px 26px -10px rgba(207,74,13,.6);}
.btn-light{background:#fff; color:var(--ink); border:1px solid var(--border); font-weight:500;}
.btn-light:hover{border-color:var(--border-strong); transform:translateY(-1px); box-shadow:0 10px 26px -14px rgba(12,74,110,.26);}
.btn-ghost{background:rgba(5,20,34,.62); color:#EAF6FF; border:1px solid rgba(150,200,240,.28); font-weight:500;}   /* без backdrop-filter: под ним видео, размытие пересчитывалось бы каждый кадр */
.btn-ghost:hover{border-color:rgba(56,189,248,.6); background:rgba(10,40,64,.6); transform:translateY(-1px);}
.btn:active{transform:translateY(0) scale(.98); transition-duration:.07s;}
@media (prefers-reduced-motion:reduce){ .btn,.btn:hover,.btn:active{transform:none;} }

/* ───── hero ───── */
.panel{position:relative; overflow:hidden; border-radius:32px; min-height:min(720px, calc(100dvh - 110px));
  display:flex; align-items:center; justify-content:center; padding:72px 24px 96px;
  background:radial-gradient(150% 130% at 50% -10%, var(--navy-0) 0%, var(--navy-1) 52%, var(--navy-2) 100%);}
.bgstill{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 80%; z-index:0; pointer-events:none;}
.hero-loop{opacity:0; transition:opacity .25s linear;}
.hero-loop.show{opacity:1;}
.scrim{position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(62% 62% at 50% 46%, rgba(2,16,28,.62), rgba(2,16,28,0) 74%);}
.hc{position:relative; z-index:2; text-align:center; max-width:880px;}
.badge{display:inline-flex; align-items:center; gap:9px; padding:5px 14px 5px 6px; border-radius:999px;
  background:rgba(5,20,34,.74); border:1px solid rgba(150,200,240,.22); font-size:13px; color:#DCEBFB;
  margin-bottom:28px; transition:border-color .18s, background .18s;}
.badge:hover{border-color:rgba(56,189,248,.5); background:rgba(10,40,64,.7);}
.badge .new{background:var(--pill); color:var(--pill-fg); font-weight:600; font-size:11px; padding:3px 9px; border-radius:999px;}
h1{font-family:var(--f-serif); font-weight:500; color:var(--hero-text); font-size:clamp(34px,4.6vw,62px); line-height:1.06; letter-spacing:-.02em; text-wrap:balance;}
.sub{font-size:18px; color:var(--hero-muted); margin:22px auto 0; line-height:1.55; max-width:50ch; text-wrap:pretty;}
.sub u{text-decoration:none; color:#EAF6FF; border-bottom:1.5px solid var(--acc); padding-bottom:1px;}
.hero-cta{display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:34px;}
@media (prefers-reduced-motion:no-preference){
  .hc > *{animation:heroRise .6s var(--ease) both;}
  .hc > .badge{animation-delay:.04s;} .hc > h1{animation-delay:.10s;} .hc > .sub{animation-delay:.20s;}
  .hc > .hero-cta{animation-delay:.30s;}
}
@keyframes heroRise{ from{opacity:0; transform:translateY(14px); filter:blur(7px);} to{opacity:1; transform:none; filter:none;} }

/* ───── section shell ───── */
.sec{position:relative; padding:var(--sp) 0;}
/* между «Что такое» и «Метрики» посередине стоит строка «brand» (fx.js) — общий промежуток тот же 2×--sp */
#about{padding-top:calc(var(--sp) * 2); padding-bottom:calc(var(--sp) + 36px);}   /* у hero своего нижнего отступа нет */
#metrics{padding-top:calc(var(--sp) - 36px);}
.sec-head{max-width:1080px; margin:0 auto; padding:0 24px; text-align:center;}
.sec-title{font-family:var(--f-serif); font-weight:500; color:var(--ink); font-size:clamp(28px,3.8vw,48px); line-height:1.08; letter-spacing:-.02em; text-wrap:balance;}
.sec-sub{font-size:18px; color:var(--ink-soft); max-width:58ch; margin:18px auto 0; line-height:1.55; text-wrap:pretty;}
.fineprint{max-width:calc(var(--content) + 48px); margin:var(--tail-gap) auto 0; padding:0 24px; text-align:right; font-family:var(--f-mono); font-style:italic; font-size:12px; color:var(--ink-soft);}

/* reveal-on-scroll (включается в beta.js только при JS и разрешённой анимации) */
.reveal-on [data-reveal]{opacity:0; transform:translateY(18px);
  transition:opacity .62s var(--ease), transform .62s var(--ease), filter .62s var(--ease);}
/* размытие — только у строк текста: на карточках и панелях blur перерисовывал бы весь блок каждый кадр */
.reveal-on :is(.sec-title,.sec-sub,.close-line,.fineprint)[data-reveal]{filter:blur(7px);}
.reveal-on [data-reveal].in{opacity:1; transform:none; filter:none;}
.reveal-on [data-reveal][data-reveal-d="1"]{transition-delay:.07s;}
.reveal-on [data-reveal][data-reveal-d="2"]{transition-delay:.14s;}
.reveal-on [data-reveal][data-reveal-d="3"]{transition-delay:.21s;}

/* ───── 1 · что такое ───── */
.steps{position:relative; width:min(var(--content), calc(100% - 48px)); margin:var(--head-gap) auto 0; display:grid; grid-template-columns:repeat(3,1fr);
  background:#fff; border:1px solid var(--border); border-radius:24px; overflow:hidden; box-shadow:0 24px 60px -30px rgba(6,36,58,.35);}
.step{padding:34px 28px; display:flex; flex-direction:column; border-right:1px solid var(--border); position:relative;}
.step:last-child{border-right:none;}
.s-head{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.s-step{font-family:var(--f-mono); font-size:12px; color:var(--ink-soft);}
.s-label{font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--label);}
.step h3{font-size:18px; font-weight:700; letter-spacing:-.01em;}
.step p{font-size:14px; line-height:1.55; color:var(--ink-soft); margin-top:8px; flex:1; text-wrap:pretty;}
.close-line{display:flex; justify-content:center; align-items:center; gap:9px; margin:var(--tail-gap) auto 0; padding:0 24px; font-size:15px; font-weight:600; text-align:center;}
.close-line .ic{width:18px; height:18px; color:var(--cta);}

/* ───── 2 · метрики дашбордов ───── */
.dash-grid{max-width:calc(var(--content) + 48px); margin:var(--head-gap) auto 0; padding:0 24px; display:grid; grid-template-columns:repeat(3,1fr); column-gap:20px;}
.dash{grid-row:span 4; display:grid; grid-template-rows:subgrid; row-gap:0; margin-bottom:20px; background:#fff; border:1px solid var(--border); border-radius:18px; padding:24px 24px 22px;
  box-shadow:0 30px 70px -50px rgba(12,74,110,.30); transition:transform .22s var(--spring), box-shadow .24s var(--ease), border-color .18s;}
.dash:hover{transform:translateY(-4px); box-shadow:0 42px 84px -42px rgba(12,74,110,.34); border-color:var(--border-strong);}
/* «и ещё» — широкая карточка под шестью дашбордами: заголовок слева, список возможностей справа */
.dash-more{grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:20px 48px; margin-bottom:0; border:1px solid var(--border-strong); border-radius:18px; padding:28px 28px 26px;
  background:linear-gradient(115deg, #E2F2FD 0%, #EEF8FF 45%, #FFF4EA 100%); box-shadow:0 30px 70px -50px rgba(12,74,110,.30);}
.dmore-head .d-name{margin-top:0;}
.dmore-head .d-desc{margin:12px 0 0; max-width:30ch;}
.dmore-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 36px;}
.dmore-list li{position:relative; display:grid; gap:3px; padding-left:18px;}
.dmore-list li::before{content:""; position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:2px; background:var(--hl);}
.dmore-list b{font-size:15px; font-weight:600; line-height:1.35; color:var(--ink);}
.dmore-list span{font-size:14px; line-height:1.5; color:var(--ink-soft);}
/* шапка карточки — иконка слева от названия, по его первой строке */
.d-head{display:grid; grid-template-columns:auto 1fr; column-gap:12px;}
/* иконки — IBM Carbon: тонкая линия одного приглушённого цвета, без плашки */
.d-ic{align-self:start; margin-top:2px; color:var(--label);}   /* по центру первой строки названия */
.d-ic .ic{display:block; width:26px; height:26px;}
.d-name{font-family:var(--f-serif); font-weight:500; font-size:24px; line-height:1.1; letter-spacing:-.01em; margin-top:2px;}
.d-desc{font-size:14px; line-height:1.5; color:var(--ink-soft); margin:12px 0 6px;}
.d-metric{padding:16px 0 2px; border-top:1px solid var(--border); margin-top:12px;}
.dm-top{display:flex; align-items:baseline; justify-content:space-between; gap:12px;}
.dm-name{font-size:15px; font-weight:600;}
.dm-val{font-family:var(--f-serif); font-weight:500; font-size:28px; line-height:1; letter-spacing:-.01em; font-variant-numeric:tabular-nums; white-space:nowrap;}
.dm-val small{font-family:var(--f-sans); font-size:13px; font-weight:500; color:var(--ink-soft); margin-left:2px; letter-spacing:0;}
.dm-desc{font-size:13.5px; line-height:1.5; color:var(--ink-soft); margin-top:10px; text-wrap:pretty;}
.meter{display:block; height:8px; margin-top:12px; background:var(--track); border-radius:5px; overflow:hidden;}
.meter i{display:block; height:100%; width:var(--v); border-radius:5px; background:var(--bar);}
.meter.hot i{background:var(--bar-hot);}
.meter.risk i{background:linear-gradient(90deg,#F87171,var(--err));}
.dots{display:grid; grid-template-columns:repeat(9,1fr); gap:5px; margin-top:12px;}
.dots i{height:8px; border-radius:4px; background:var(--track);}
.dots i.on{background:var(--bar-hot);}
.stack{display:flex; gap:2px; height:8px; margin-top:12px; border-radius:5px; overflow:hidden;}
.stack i{width:var(--v); height:100%;}
.stack .own{background:var(--cta);} .stack .comp{background:#48A7E6;} .stack .earned{background:var(--acc-soft);} .stack .paid{background:#C9D9E7;}
/* полосы прорастают при появлении карточки */
.reveal-on .dash .meter i, .reveal-on .dash .stack{transform:scaleX(0); transform-origin:left center; transition:transform .9s cubic-bezier(.4,0,.1,1) .25s;}
.reveal-on .dash.in .meter i, .reveal-on .dash.in .stack{transform:scaleX(1);}
.reveal-on .dash .dots i.on{opacity:0; transition:opacity .3s ease;}
.reveal-on .dash.in .dots i.on{opacity:1;}
.reveal-on .dash.in .dots i:nth-child(1){transition-delay:.30s;} .reveal-on .dash.in .dots i:nth-child(2){transition-delay:.36s;}
.reveal-on .dash.in .dots i:nth-child(3){transition-delay:.42s;} .reveal-on .dash.in .dots i:nth-child(4){transition-delay:.48s;}
.reveal-on .dash.in .dots i:nth-child(5){transition-delay:.54s;} .reveal-on .dash.in .dots i:nth-child(6){transition-delay:.60s;}
.reveal-on .dash.in .dots i:nth-child(7){transition-delay:.66s;}

/* ───── 3 · каналы ───── */
.chan-grid{max-width:calc(var(--content) + 48px); margin:var(--head-gap) auto 0; padding:0 24px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.5fr); gap:20px;}
/* subgrid: заголовки, описания и плитки трёх колонок стоят на одних линиях */
.chan{grid-row:span 3; display:grid; grid-template-rows:subgrid; row-gap:0; background:#fff; border:1px solid var(--border); border-radius:20px; padding:26px; box-shadow:0 30px 70px -50px rgba(12,74,110,.30);}
.ch-head{display:flex; justify-content:space-between; align-items:flex-start; gap:16px;}
.ch-k{font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--label);}
.chan h3, .md-head h3{font-size:19px; font-weight:700; letter-spacing:-.01em; margin-top:8px; line-height:1.25;}
.ch-desc{font-size:14px; line-height:1.55; color:var(--ink-soft); margin:10px 0 18px; max-width:52ch;}
.cg-cards{display:grid; gap:10px; align-content:start;}
.cg-1{grid-template-columns:minmax(0,1fr);}
.cg-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.cg-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.srccard{display:flex; align-items:center; gap:9px; padding:10px 14px; border:1px solid var(--border); border-radius:12px; background:#fff;
  box-shadow:0 6px 16px -12px rgba(6,36,58,.4); font-size:13.5px; white-space:nowrap; min-width:0;
  transition:border-color .18s, box-shadow .2s var(--ease), transform .2s var(--spring);}
.srccard:hover{border-color:var(--border-strong); box-shadow:0 12px 26px -12px rgba(6,36,58,.45); transform:translateY(-2px);}
.sc-n{font-weight:500; overflow:hidden; text-overflow:ellipsis;}
.lc-logo{width:20px; height:20px; display:block; flex-shrink:0; object-fit:contain;}
.lc-mark{width:20px; height:20px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  color:#fff; font-size:11px; font-weight:700; letter-spacing:-.02em; background:linear-gradient(140deg, var(--acc), #2C7FB8);}
.mk-bing{background:linear-gradient(140deg,#0D7C76,#0A5F70);}
.mk-yahoo{background:#6001D2; font-size:11px; letter-spacing:-.06em;}
.mk-grok{background:#111;}
/* UI / API — общий блок под тремя колонками; разделители совпадают с левыми краями карточек выше */
.modes{grid-column:1 / -1; display:grid; grid-template-columns:subgrid; border:1px dashed var(--border-strong); border-radius:20px; background:rgba(240,249,255,.6);}
.md-head, .mode{padding:22px 26px;}
.mode{border-left:1px dashed var(--border-strong);}
.mode b{display:inline-block; font-family:var(--f-mono); font-size:11px; font-weight:600; letter-spacing:.1em; padding:3px 9px; border-radius:999px; background:var(--pill); color:var(--pill-fg);}
.mode:last-child b{background:rgba(56,189,248,.16); color:var(--label);}
.mode p{font-size:14px; line-height:1.55; color:var(--ink-soft); margin-top:10px; max-width:52ch;}

/* ───── 4 · периодичность и аналитика (тёмная панель) ───── */
.sec-dark{padding:var(--sp) 0;}
.dpanel{position:relative; overflow:hidden; border-radius:32px; padding:88px clamp(24px,5vw,72px);
  background:var(--plus-dark), radial-gradient(150% 130% at 50% -10%, var(--navy-0) 0%, var(--navy-1) 52%, var(--navy-2) 100%);}
.dpanel::after{content:""; position:absolute; left:50%; bottom:-180px; width:520px; height:320px; transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(closest-side, rgba(249,115,22,.22), rgba(249,115,22,0));}
.dp-head{position:relative; z-index:1; text-align:center; max-width:820px; margin:0 auto;}
.dpanel .sec-title{color:var(--hero-text);}
.dpanel .sec-sub{color:var(--hero-muted);}
.dp-grid{position:relative; z-index:1; display:grid; grid-template-columns:minmax(260px,.8fr) 2fr; gap:20px; margin-top:var(--head-gap); align-items:start;}
.freq{background:rgba(5,20,34,.55); border:1px solid rgba(150,200,240,.18); border-radius:20px; padding:26px; color:#fff;}
.fq-k{font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--acc-soft);}
.fq-list{list-style:none; margin-top:16px; display:flex; flex-direction:column;}
.fq-list li{display:grid; grid-template-columns:10px 1fr; column-gap:14px; row-gap:2px; padding:14px 0; border-top:1px solid rgba(150,200,240,.14);}
.fq-list li:first-child{border-top:none; padding-top:6px;}
.fq-dot{grid-row:1; width:10px; height:10px; margin-top:5px; border-radius:50%; background:var(--cta); box-shadow:0 0 0 4px rgba(249,115,22,.18);}
.fq-dot-alt{background:var(--acc); box-shadow:0 0 0 4px rgba(56,189,248,.18);}
.fq-list b{font-size:16px; font-weight:600;}
.fq-list em{grid-column:2; font-style:normal; font-family:var(--f-mono); font-size:12px; color:var(--hero-muted);}
.an-list{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.an{padding:22px; border-radius:18px; background:rgba(255,255,255,.035); border:1px solid rgba(150,200,240,.16); color:#fff;
  transition:border-color .2s, background .2s;}
.an:hover{border-color:rgba(56,189,248,.45); background:rgba(56,189,248,.06);}
.an-wide{grid-column:1 / -1;}
.an-num{font-family:var(--f-mono); font-size:12px; font-weight:600; color:var(--cta); letter-spacing:.08em;}
.an h3{font-size:17px; line-height:1.3; font-weight:600; letter-spacing:-.01em; margin-top:4px;}
.an p{font-size:14px; line-height:1.55; color:var(--hero-muted); margin-top:6px; text-wrap:pretty;}

/* ───── 4b · Гефест: «зеркало» — что находит → агент → что готовит (нити рисует fx.js) ───── */
.gf-mirror{max-width:calc(var(--content) + 48px); margin:var(--head-gap) auto 0; padding:0 24px; display:grid; grid-template-columns:minmax(0,1fr) 220px minmax(0,1fr); align-items:start;}
/* колонки — зеркальные: одинаковая ширина, группы 2·2·3 чипа, чипы по одному в строку и во всю ширину колонки */
.gf-side{width:min(100%, 340px); display:grid; gap:26px; align-content:start;}
.gf-in{justify-self:start;}
.gf-out{justify-self:end; text-align:right;}
.gf-k{font-family:var(--f-serif); font-weight:500; font-size:28px; line-height:1.1; letter-spacing:-.01em; color:var(--ink);}
.gf-group{display:grid; gap:10px;}
.gf-cards{display:grid; gap:10px;}
.gf-cards .ic{width:18px; height:18px; color:var(--label);}
/* узел — по вертикали на середине чипов: верхний отступ гасит заголовок колонки над группами и подпись «Гефест» под кругом */
.gf-core{align-self:stretch; display:flex; flex-direction:column; justify-content:center; align-items:center; padding-top:141px; text-align:center;}
.gf-node{width:96px; height:96px; border-radius:50%; display:grid; place-items:center; margin-bottom:14px; background:#fff; border:1px solid var(--border-strong);
  box-shadow:0 0 0 10px rgba(255,255,255,.6), 0 34px 60px -26px rgba(249,115,22,.5);}
.gf-node .ic{width:40px; height:40px; color:var(--cta);}
.gf-name{font-family:var(--f-serif); font-weight:500; font-size:24px; line-height:1.1; color:var(--ink);}
.gf-role{margin-top:6px; font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--label);}

/* ───── 5 · бета-тест ───── */
.beta{max-width:calc(var(--content) + 48px); margin:0 auto; padding:0 24px; display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;}
.beta-txt .sec-title, .beta-txt .sec-sub{text-align:left; margin-left:0;}
.next{list-style:none; counter-reset:n; margin-top:30px; display:flex; flex-direction:column; gap:16px;}
.next li{counter-increment:n; display:grid; grid-template-columns:34px 1fr; column-gap:14px; row-gap:2px; align-items:start;}
.next li::before{content:counter(n); grid-row:1 / span 2; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--f-mono); font-size:13px; font-weight:600; color:var(--pill-fg); background:var(--pill);}
.next b{font-size:16px; font-weight:600; padding-top:6px;}
.next span{font-size:14px; line-height:1.5; color:var(--ink-soft);}
.lead-wrap{background:#fff; border:1px solid var(--cta); border-radius:22px; padding:30px; box-shadow:0 38px 84px -44px rgba(249,115,22,.42);}
.lead{display:flex; flex-direction:column; gap:16px;}
.fld{display:flex; flex-direction:column; gap:7px;}
.fl{font-size:13px; font-weight:600;}
.fld input{height:48px; padding:0 15px; border:1px solid var(--border); border-radius:12px; background:#FAFDFF; color:var(--ink);
  font:500 16px/1 var(--f-sans); caret-color:var(--cta); outline:none; transition:border-color .15s, box-shadow .15s, background .15s;}
.fld input::placeholder{color:#56748D; font-weight:400;}
.fld input:hover{border-color:var(--border-strong);}
.fld input:focus{border-color:var(--acc); background:#fff; box-shadow:0 0 0 3px rgba(56,189,248,.25);}
.fe{display:none; font-size:13px; line-height:1.4; color:var(--err);}
.fld.err input{border-color:var(--err); box-shadow:0 0 0 3px rgba(220,38,38,.12);}
.fld.err .fe{display:block;}
.lead-btn{width:100%; margin-top:4px;}
.lead-btn[disabled]{opacity:.7; cursor:progress; transform:none;}
.lead-note{font-size:12px; line-height:1.5; color:var(--ink-soft); text-align:center;}
.lead-err{font-size:13px; line-height:1.5; color:var(--err); text-align:center;}
.lead-ok{text-align:center; padding:26px 8px 18px;}
.ok-ic{width:52px; height:52px; margin:0 auto; border-radius:50%; display:grid; place-items:center; color:#fff; background:var(--cta-btn); box-shadow:0 12px 30px -10px rgba(207,74,13,.55);}
.ok-ic .ic{width:26px; height:26px;}
.lead-ok h3{font-family:var(--f-serif); font-weight:500; font-size:28px; margin-top:16px; outline:none;}
.lead-ok p{font-size:15px; color:var(--ink-soft); margin-top:8px;}
@media (prefers-reduced-motion:no-preference){ .lead-ok:not([hidden]){animation:heroRise .5s var(--ease) both;} }
.alt{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px 14px; margin-top:22px; padding-top:20px; border-top:1px solid var(--border); font-size:14px; color:var(--ink-soft);}
.ic-tg{width:18px; height:18px; color:#229ED9;}

/* ───── footer ───── */
.site-foot{background:linear-gradient(rgba(240,249,255,0), var(--page) 72px); padding:var(--sp) 24px var(--head-gap);}   /* без линии: сетка плюсов плавно гаснет */
.sf-inner{max-width:var(--content); margin:0 auto; display:flex; justify-content:space-between; align-items:flex-start; gap:32px; flex-wrap:wrap;}
.sf-tag{margin-top:12px; font-size:14px; line-height:1.5; color:var(--ink-soft); max-width:46ch;}
.sf-links{display:flex; flex-wrap:wrap; gap:8px 22px; padding-top:6px;}
.sf-links a{font-size:14px; color:var(--ink-soft); padding:6px 0; transition:color .15s;}
.sf-links a:hover{color:var(--ink);}

/* ───── адаптив ───── */
@media (max-width:1080px){
  .dash-grid{grid-template-columns:repeat(2,1fr);}
  .dash-more{grid-template-columns:1fr;}
  .dmore-head .d-desc{max-width:none;}
  .dp-grid{grid-template-columns:1fr;}
  .fq-list{display:grid; grid-template-columns:repeat(2,1fr); column-gap:24px;}
  .fq-list li:nth-child(2){border-top:none; padding-top:6px;}
  /* три колонки не влезают: поиск | AI-ответы, LLM — на всю ширину, UI | API под заголовком */
  .chan-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .chan-llm{grid-column:1 / -1;}
  .md-head{grid-column:1 / -1; border-bottom:1px dashed var(--border-strong);}
  .md-head + .mode{border-left:none;}
}
@media (max-width:900px){
  :root{--sp:56px; --head-gap:40px; --tail-gap:24px;}
  .steps{grid-template-columns:1fr;}
  .step{border-right:none; border-bottom:1px solid var(--border);}
  .step:last-child{border-bottom:none;}
  .chan-grid{grid-template-columns:minmax(0,1fr); max-width:640px;}
  .mode{border-left:none;}
  .mode + .mode{border-top:1px dashed var(--border-strong);}
  .beta{grid-template-columns:1fr; gap:36px; max-width:600px;}
  .gf-mirror{grid-template-columns:1fr; max-width:640px; row-gap:36px;}
  .gf-in, .gf-out{justify-self:center; text-align:left;}
  .gf-core{padding-top:0;}
}
@media (max-width:820px){
  .nav-links{display:none;}
  .panel{border-radius:22px; padding:56px 18px 72px; min-height:auto;}
  .dpanel{border-radius:22px; padding:56px 20px;}
  .an-list{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .wrap{padding:0 16px;}
  .sec-head, .dash-grid, .fineprint, .chan-grid, .gf-mirror, .beta{padding:0 16px;}
  .steps{width:calc(100% - 32px);}
  .site-nav nav{height:64px;}
  .dash-grid{grid-template-columns:1fr;}
  .d-desc{min-height:0;}
  .dash-more{padding:22px 20px;}
  .dmore-list{grid-template-columns:1fr; gap:14px;}
  .gf-k{font-size:24px;}
  .sub, .sec-sub{font-size:16px;}
  h1 br, .sec-title br{display:none;}
  .hero-cta .btn{width:100%;}
  .panel{padding-bottom:124px;}   /* фонарь на фоне уходит ниже подписи */
  .cg-3{grid-template-columns:repeat(2,minmax(0,1fr));}
  .close-line{display:block;}            /* огонёк — в строке, а не сбоку от трёхстрочного блока */
  .close-line .ic{vertical-align:-3px; margin-right:6px;}
  .fq-list{grid-template-columns:1fr;}
  .fq-list li:nth-child(2){border-top:1px solid rgba(150,200,240,.14); padding-top:14px;}
  .an{padding:18px;}
  .lead-wrap{padding:22px 18px;}
  .site-foot{padding:var(--sp) 16px var(--head-gap);}
  .sf-links{gap:4px 22px;}
  .sf-links a{padding:10px 0;}
}

/* ───── фоновые canvas-анимации (fx.js): за контентом секции ───── */
.sec-fx{isolation:isolate; overflow:hidden;}
.sec-fx > canvas.fx{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;}
.sec-fx > :not(canvas){position:relative; z-index:1;}

/* ───── hover только там, где есть мышь; без сдвигов при reduced motion ───── */
@media (hover:none){
  .btn-primary:hover, .btn-light:hover, .btn-ghost:hover, .dash:hover, .srccard:hover{transform:none; box-shadow:none;}
  .dash:hover{box-shadow:0 30px 70px -50px rgba(12,74,110,.30); border-color:var(--border);}
  .srccard:hover{box-shadow:0 6px 16px -12px rgba(6,36,58,.4); border-color:var(--border);}
}
@media (prefers-reduced-motion:reduce){ .dash:hover, .srccard:hover{transform:none;} }