/* a1b2.io — общий слой оформления статических страниц.
   Те же токены, что в кабинете: светлая по умолчанию, системная тёмная,
   и явный выбор через data-theme перебивает обе. */
:root {
  --bg: #f6f7f9;
  --fg: #131316;
  --muted: #61616b;
  --primary: #158443;
  --primary-fg: #f6f7f9;
  --border: #dadde1;
  --card: #ffffff;
  --code-bg: #eef0f2;
  --glass-bg: color-mix(in oklab, #ffffff 72%, transparent);
  --glass-border: color-mix(in oklab, #131316 12%, transparent);
  --glass-hairline: color-mix(in oklab, #fff 70%, transparent);
  --glass-blur: blur(16px) saturate(1.6);
  --glow-a: color-mix(in oklab, #158443 12%, transparent);
  --glow-b: color-mix(in oklab, #258cf4 9%, transparent);
  --radius: 14px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0d10; --fg: #e8eaed; --muted: #9aa3ad;
    --primary: #28bd66; --primary-fg: #06140c;
    --border: #1c2027; --card: #101419; --code-bg: #171b21;
    --glass-bg: color-mix(in oklab, #101419 66%, transparent);
    --glass-border: color-mix(in oklab, #fff 7%, transparent);
    --glass-hairline: color-mix(in oklab, #fff 8%, transparent);
    --glow-a: color-mix(in oklab, #28bd66 14%, transparent);
    --glow-b: color-mix(in oklab, #258cf4 10%, transparent);
  }
}
:root[data-theme="dark"] {
  --bg: #0b0d10; --fg: #e8eaed; --muted: #9aa3ad;
  --primary: #28bd66; --primary-fg: #06140c;
  --border: #1c2027; --card: #101419; --code-bg: #171b21;
  --glass-bg: color-mix(in oklab, #101419 66%, transparent);
  --glass-border: color-mix(in oklab, #fff 7%, transparent);
  --glass-hairline: color-mix(in oklab, #fff 8%, transparent);
  --glow-a: color-mix(in oklab, #28bd66 14%, transparent);
  --glow-b: color-mix(in oklab, #258cf4 10%, transparent);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
code, pre, .num {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }

.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-hairline);
}
/* Без поддержки размытия панель стала бы нечитаемой поверх контента. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--card); }
}
.glass-canvas {
  background-image:
    radial-gradient(900px 520px at 18% 6%, var(--glow-a), transparent 62%),
    radial-gradient(760px 460px at 86% 40%, var(--glow-b), transparent 58%);
}

/* Шапка — липкая и стеклянная, как таб-бар кабинета. */
.topbar {
  position: sticky; top: 0; z-index: 20;
  border-bottom: 1px solid var(--glass-border);
  border-left: 0; border-right: 0; border-top: 0;
}
.topbar-inner {
  max-width: 1180px; margin: 0 auto; padding: 0 20px;
  height: 60px; display: flex; align-items: center; gap: 20px;
}
.brand { font-weight: 700; font-size: 17px; letter-spacing: -0.02em; color: var(--fg); }
.brand:hover { text-decoration: none; }
.brand span { color: var(--primary); }
.nav { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.nav a {
  padding: 8px 12px; border-radius: 10px; font-size: 14px; color: var(--muted);
  transition: color .16s ease, background-color .16s ease;
}
.nav a:hover { color: var(--fg); background: color-mix(in oklab, var(--fg) 5%, transparent); text-decoration: none; }
.btn {
  display: inline-block; padding: 9px 16px; border-radius: 10px;
  font-size: 14px; font-weight: 500; border: 1px solid transparent;
  transition: filter .16s ease;
}
.btn:hover { text-decoration: none; filter: brightness(1.08); }
.btn-primary { background: var(--primary); color: var(--primary-fg); }
.btn-ghost { border-color: var(--glass-border); color: var(--fg); background: var(--glass-bg); }

footer.site {
  border-top: 1px solid var(--glass-border);
  background: var(--glass-bg);
  margin-top: 64px;
}
footer.site .inner {
  max-width: 1180px; margin: 0 auto; padding: 20px;
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
  font-size: 13px; color: var(--muted);
}
footer.site a { color: var(--muted); }
footer.site a:hover { color: var(--fg); }

/* Узкий экран: якоря на секции прячем, иначе шапка не помещается и
   тянет за собой горизонтальную прокрутку всей страницы. */
@media (max-width: 720px) {
  .nav a.anchor { display: none; }
  .topbar-inner { gap: 12px; padding: 0 16px; }
}
/* Страховка от «широкого» ребёнка: горизонтально скроллит контейнер,
   а не документ. */
html, body { max-width: 100%; overflow-x: clip; }

/* ---- Появление при прокрутке ----
   Элемент ждёт класса .in, который вешает IntersectionObserver.
   Стартовое состояние задаётся ТОЛЬКО когда скрипт жив (html.js) —
   иначе при выключенном JS контент остался бы навсегда прозрачным. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1);
  will-change: opacity, transform;
}
.js .reveal.in { opacity: 1; transform: none; }
/* will-change снимаем после появления: держать его на всех карточках
   значит зря занимать видеопамять. */
.js .reveal.done { will-change: auto; }

/* Ступенька внутри группы: анимируется группа, а не каждый блок сам по
   себе — иначе на экране одновременно дёргается десяток объектов. */
.js .reveal.d1 { transition-delay: .06s }
.js .reveal.d2 { transition-delay: .12s }
.js .reveal.d3 { transition-delay: .18s }
.js .reveal.d4 { transition-delay: .24s }
.js .reveal.d5 { transition-delay: .30s }

/* Уважение к настройке ОС: показываем конечное состояние сразу,
   а не ускоренную анимацию. */
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Карточка приподнимается под курсором — отклик на наведение, а не декор. */
.card, .stat {
  transition: transform .22s cubic-bezier(.2,.7,.3,1), border-color .22s ease;
}
@media (hover: hover) {
  .card:hover, .stat:hover {
    transform: translateY(-3px);
    border-color: color-mix(in oklab, var(--primary) 35%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .card, .stat { transition: none; }
  .card:hover, .stat:hover { transform: none; }
}

/* Кнопки: сдвиг вниз при нажатии — тактильная обратная связь. */
.btn { transition: filter .16s ease, transform .12s ease; }
.btn:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } }

/* Мягкое «дыхание» свечения под стеклом. Медленное и бесконечное —
   поэтому только на декоративном фоне и только если движение разрешено. */
@media (prefers-reduced-motion: no-preference) {
  .glass-canvas { animation: glow-drift 22s ease-in-out infinite alternate; }
  @keyframes glow-drift {
    from { background-position: 0% 0%, 100% 40%; }
    to   { background-position: 6% 4%, 94% 44%; }
  }
}

/* ============ MOTION-СЛОЙ ============ */

/* --- Прожектор под курсором ---
   Карточка подсвечивается там, где мышь. Координаты кладёт JS в --mx/--my,
   поэтому анимируется только фон псевдоэлемента — не layout. */
.card, .flow, .stat { position: relative; isolation: isolate; }
.spot::before {
  content: "";
  position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%),
              color-mix(in oklab, var(--primary) 16%, transparent), transparent 62%);
  opacity: 0; transition: opacity .35s ease;
}
@media (hover: hover) { .card:hover.spot::before, .flow:hover.spot::before { opacity: 1; } }

/* Кромка, подсвеченная под курсором: тонкая рамка-градиент поверх стекла. */
.spot::after {
  content: "";
  position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  padding: 1px;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%),
              color-mix(in oklab, var(--primary) 55%, transparent), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .35s ease;
}
@media (hover: hover) { .card:hover.spot::after, .flow:hover.spot::after { opacity: 1; } }

/* --- Заголовок: живой градиент ---
   Только на выделенной строке, не на всём тексте: градиентный текст
   хуже читается, поэтому основная строка остаётся сплошной. */
.grad {
  background: linear-gradient(100deg,
    var(--primary) 0%,
    color-mix(in oklab, var(--primary) 55%, #7ef0b0) 30%,
    var(--primary) 60%,
    color-mix(in oklab, var(--primary) 70%, #4cc9f0) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .grad { animation: grad-slide 9s ease-in-out infinite alternate; }
  @keyframes grad-slide { from { background-position: 0% 50% } to { background-position: 100% 50% } }
}
/* Если clip не поддержан — текст остаётся видимым сплошным цветом. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .grad { color: var(--primary); background: none; }
}

/* --- Появление: смещение + лёгкий масштаб --- */
.js .reveal {
  opacity: 0; transform: translateY(22px) scale(.985);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal.done { will-change: auto; }
.js .reveal.d1 { transition-delay: .07s } .js .reveal.d2 { transition-delay: .14s }
.js .reveal.d3 { transition-delay: .21s } .js .reveal.d4 { transition-delay: .28s }
.js .reveal.d5 { transition-delay: .35s }

/* --- Магнитная кнопка: тянется к курсору ---
   Сдвиг ограничен джаваскриптом, чтобы кнопка не уезжала из своей зоны клика. */
.magnet { transition: transform .35s cubic-bezier(.16,1,.3,1); }
.magnet:active { transform: scale(.97) !important; }

/* --- Карточка приподнимается --- */
.card, .flow, .stat { transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .3s ease; }
@media (hover: hover) {
  .card:hover, .flow:hover { transform: translateY(-4px); }
}

/* --- Живая демонстрация в первом экране --- */
.demo-row { transition: background-color .4s ease; }
.demo-row.flash { background: color-mix(in oklab, var(--primary) 13%, transparent); }
.demo-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); flex-shrink: 0; }
@media (prefers-reduced-motion: no-preference) {
  .demo-dot.live { animation: live 2s ease-in-out infinite; }
  @keyframes live { 0%,100% { opacity: 1; transform: scale(1) } 50% { opacity: .4; transform: scale(.82) } }
}

/* --- Настройка ОС важнее любого эффекта --- */
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .card, .flow, .stat, .magnet, .btn { transition: none !important; }
  .card:hover, .flow:hover { transform: none !important; }
  .spot::before, .spot::after { display: none; }
  .glass-canvas { animation: none !important; }
}