/* Визитка: один файл, без сборки. Цвета и отступы — токены в :root, тема по системной через light-dark(). */
:root {
  color-scheme: light dark;
  --bg: light-dark(#f6f7fb, #0b0f17);
  --surface: light-dark(#ffffff, #141a26);
  --surface-2: light-dark(#eef1f8, #1b2333);
  --text: light-dark(#12161f, #e9edf5);
  --muted: light-dark(#4f5a6b, #a0abbd);
  --line: light-dark(#dde2ec, #2a3347);
  --accent: light-dark(#0a62d6, #6aaaff);
  --accent-2: light-dark(#6d28d9, #b69cff);
  --accent-ink: light-dark(#ffffff, #0b0f17);
  --accent-soft: light-dark(#e6effd, #14223b);
  --cta-a: light-dark(#1e4fc2, #1a2a66);
  --cta-b: light-dark(#5b21b6, #3a1d78);
  --cta-ink: #ffffff;
  --cta-ink-soft: rgb(255 255 255 / .86);
  --cta-btn: light-dark(#ffffff, #f2f4fa);
  --cta-btn-ink: #12161f;
  --danger: light-dark(#b42318, #ff8a80);
  --glow-a: light-dark(rgb(10 98 214 / .16), rgb(106 170 255 / .20));
  --glow-b: light-dark(rgb(109 40 217 / .12), rgb(182 156 255 / .16));
  --shadow: light-dark(0 1px 2px rgb(18 22 31 / .05), 0 1px 2px rgb(0 0 0 / .4));
  --shadow-lift: light-dark(0 14px 32px -12px rgb(10 60 140 / .28), 0 14px 32px -12px rgb(0 0 0 / .7));
  --radius: 18px;
  --radius-sm: 12px;
  --radius-pill: 999px;
  --tap: 2.75rem;
  --gap: clamp(1rem, 3vw, 1.5rem);
  --section: clamp(3rem, 8vw, 5.5rem);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 1rem/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { max-width: 100%; }
a { color: var(--accent); }
h1, h2, h3 { line-height: 1.15; margin: 0; letter-spacing: -0.02em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.wrap { width: min(100% - 2rem, 66rem); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 0; background: var(--surface); padding: .5rem 1rem; z-index: 20; }
.skip:focus { left: 1rem; top: 1rem; }

/* шапка */
.top { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 0 1rem; min-height: 3.5rem; }
.brand { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap); min-height: var(--tap); border-radius: 10px; transition: transform .25s var(--ease); }
.brand:hover { transform: rotate(-6deg) scale(1.06); }
.brand img { display: block; }
.nav { display: flex; gap: clamp(.1rem, 1.5vw, .75rem); font-size: .94rem; }
.nav a { display: inline-flex; align-items: center; min-height: var(--tap); padding-inline: .6rem; color: var(--muted); text-decoration: none; border-radius: 8px; transition: color .2s; }
.nav a:hover { color: var(--text); }
@media (max-width: 34rem) { .nav a:not(:last-child) { display: none; } }
@media (max-width: 34rem) { .eyebrow { border-radius: var(--radius); } }

/* первый экран */
.hero { position: relative; overflow: clip; padding-block: clamp(2.5rem, 8vw, 6rem) var(--section); }
.hero-bg { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(40rem 28rem at 85% 10%, var(--glow-b), transparent 70%),
    radial-gradient(44rem 30rem at 10% 0%, var(--glow-a), transparent 70%),
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--text) 12%, transparent) 1px, transparent 0) 0 0 / 28px 28px;
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
.hero-in { position: relative; display: grid; gap: 2.5rem; align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 56rem) { .hero-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; } }
.eyebrow { display: inline-flex; align-items: center; gap: .55rem; color: var(--accent); font-weight: 600; font-size: .86rem; letter-spacing: .02em; padding: .3rem .85rem; border-radius: var(--radius-pill); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); margin-bottom: 1.25rem; }
.hero h1 { font-size: clamp(2.1rem, 6.4vw, 3.9rem); font-weight: 780; max-width: 18ch; }
.grad { background: linear-gradient(100deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { margin-top: 1.5rem; color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.22rem); max-width: 38rem; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); padding: .5rem 1.4rem; border-radius: var(--radius-pill);
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s, border-color .2s, background-color .2s;
}
.btn:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.btn-primary { background: linear-gradient(100deg, var(--accent), var(--accent-2)); border-color: transparent; color: light-dark(#fff, #06101f); }
.btn-primary:hover { border-color: transparent; }

/* схема в первом экране */
.viz { width: 100%; height: auto; max-width: 40rem; justify-self: center; overflow: visible; }
.viz .track { stroke: var(--line); }
.viz .flow-line { stroke: url(#vg); stroke-dasharray: 10 90; animation: run 3.2s linear infinite; }
.viz .d2 { animation-delay: -.8s; } .viz .d3 { animation-delay: -1.6s; } .viz .d4 { animation-delay: -2.4s; }
.viz-src rect, .viz-report rect:first-child { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; }
.viz-hub { pointer-events: none; cursor: default; }
.viz-hub rect { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; }
.viz-hub path { stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.viz-src path { stroke: var(--muted); stroke-width: 2; stroke-linecap: round; fill: none; }
.viz-report rect:first-child { filter: drop-shadow(0 12px 18px color-mix(in srgb, var(--accent) 18%, transparent)); }
.viz .bar { fill: url(#vg); transform-box: fill-box; transform-origin: bottom; animation: grow 3.2s var(--ease) infinite; }
.viz .b2 { animation-delay: .15s; } .viz .b3 { animation-delay: .3s; } .viz .b4 { animation-delay: .45s; }
@keyframes run { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes grow { 0%, 12% { transform: scaleY(.15); } 40%, 85% { transform: scaleY(1); } 100% { transform: scaleY(.15); } }

/* блоки */
.block { padding-block: var(--section); border-top: 1px solid var(--line); }
.band .block, .band + .block { border-top: 0; }
.band-alt { background: var(--surface-2); border-block: 1px solid var(--line); }
body { --body-size: clamp(1rem, .94rem + .3vw, 1.1rem); }
.block h2 { font-size: clamp(1.7rem, 4vw, 2.5rem); font-weight: 760; }
.section-lead { margin-top: .9rem; color: var(--muted); max-width: 40rem; font-size: clamp(1.05rem, 1rem + .3vw, 1.15rem); }
.note { margin: 2.5rem 0 0; max-width: 46rem; padding: .35rem 0 .35rem clamp(1.1rem, 3vw, 1.75rem); border-inline-start: 4px solid var(--accent); font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); line-height: 1.45; font-weight: 520; letter-spacing: -.01em; text-wrap: balance; }

.cards { display: grid; gap: var(--gap); margin-top: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.cards.cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); }
.card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.5rem; box-shadow: var(--shadow); overflow: hidden; }
.card::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); opacity: .8; }
.card h3 { font-size: 1.3rem; margin-bottom: .55rem; }
.card p { color: var(--muted); font-size: var(--body-size); }
.card ul { margin: 0; padding-left: 1.1rem; color: var(--muted); display: grid; gap: .7rem; font-size: var(--body-size); }
.card li::marker { color: var(--accent); }

/* аналитика: путь из шагов */
.analytics { display: grid; grid-template-columns: minmax(0, 1fr); }
.analytics-head { display: contents; }
.analytics-head h2 { order: 1; }
.analytics-head .section-lead { order: 2; }
.analytics .steps { order: 3; }
.analytics .stack { order: 4; }
.steps { list-style: none; margin: 2.25rem 0 0; padding: 0; display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); }
.steps li { position: relative; padding: 0 0 1.75rem 4rem; min-height: 4.5rem; transition: opacity .5s, translate .6s var(--ease); }
.steps li:last-child { padding-bottom: 0; }
.steps h3 { font-size: 1.3rem; margin-bottom: .35rem; padding-top: .4rem; }
.steps p { color: var(--muted); font-size: var(--body-size); }
.step-n { position: absolute; inset: 0 auto auto 0; z-index: 1; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: light-dark(#fff, #06101f); font-weight: 750; box-shadow: 0 0 0 5px var(--bg), 0 0 22px -2px var(--glow-a); transition: opacity .4s, transform .5s var(--ease); }
/* линия между центрами соседних узлов: дорожка + заполнение */
.steps li::before, .steps li::after { content: ""; position: absolute; top: 1.375rem; bottom: -1.375rem; left: calc(1.375rem - 1px); width: 2px; border-radius: 2px; }
.steps li::before { background: var(--line); }
.steps li::after { background: linear-gradient(180deg, var(--accent), var(--accent-2)); transform-origin: top; transition: transform .45s var(--ease); }
.steps li:last-child::before, .steps li:last-child::after { display: none; }
/* подсветка шагов по очереди — только если JS включил анимации */
.js .steps li:not(.is-lit) .step-n { opacity: .7; transform: scale(.85); }
.js .steps li:not(.is-lit)::after { transform: scaleY(0); }
@media (min-width: 62rem) {
  .analytics { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(2rem, 6vw, 5rem); align-items: start; }
  .analytics-head { display: block; position: sticky; top: 5.5rem; }
  .analytics-head h2, .analytics-head .section-lead, .analytics .stack { order: 0; }
  .analytics-head .stack { margin-top: 1.75rem; }
  .analytics .steps { margin-top: .4rem; }
}

.stack { display: flex; flex-wrap: wrap; gap: .5rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.stack li { padding: .3rem .85rem; border: 1px solid var(--line); border-radius: var(--radius-pill); font-size: .88rem; color: var(--muted); background: var(--surface); }

/* как работаю */
.flow { list-style: none; counter-reset: flow; margin: 2rem 0 0; padding: 0; display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.flow li { counter-increment: flow; display: grid; gap: .4rem; align-content: start; padding: 1.1rem 1.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.flow strong { font-size: 1.3rem; line-height: 1.2; letter-spacing: -.02em; }
.flow li::before { content: "0" counter(flow); font-size: 1.6rem; font-weight: 780; line-height: 1; background: linear-gradient(100deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.flow span { color: var(--muted); font-size: var(--body-size); }

/* контакты: полоса на всю ширину с градиентом */
.band-contact { position: relative; isolation: isolate; overflow: clip; text-align: center; color: var(--cta-ink);
  background:
    radial-gradient(34rem 18rem at 90% 0%, rgb(255 255 255 / .14), transparent 70%),
    radial-gradient(30rem 16rem at 5% 100%, color-mix(in srgb, var(--accent-2) 30%, transparent), transparent 70%),
    linear-gradient(120deg, var(--cta-a), var(--cta-b)); }
.contact-card { padding-block: clamp(3.5rem, 9vw, 6rem); }
.contact-card h2 { font-size: clamp(2.2rem, 6vw, 3.8rem); font-weight: 780; }
.contact-card .section-lead { margin-inline: auto; max-width: 32rem; color: var(--cta-ink-soft); font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); }
.contact-card :focus-visible { outline-color: var(--cta-ink); }
.contact-actions { display: grid; grid-auto-flow: column; grid-auto-columns: 16rem; justify-content: center; gap: .75rem; margin-top: 2rem; }
.btn-contact { gap: .6rem; min-height: 3.5rem; padding-inline: 1.6rem; font-size: 1.05rem; max-width: 100%; background: var(--cta-btn); color: var(--cta-btn-ink); border-color: transparent; box-shadow: 0 10px 24px -10px rgb(0 0 0 / .5); }
.btn-contact:hover { border-color: var(--accent); }
.btn-contact svg, .btn-contact img { flex: none; }
@media (max-width: 38rem) { .contact-actions { grid-auto-flow: row; grid-auto-columns: 1fr; justify-content: stretch; } }

/* появление при прокрутке: только transform/opacity, скрытие лишь при включённом JS */
[data-reveal] { transition: opacity .6s var(--ease), translate .7s var(--ease); }
.js [data-reveal]:not(.is-in) { opacity: 0; translate: 0 18px; }
.js [data-reveal] { transition-delay: calc(var(--i, 0) * 70ms); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .viz .flow-line { stroke-dasharray: none; }
  .viz .bar { transform: none; }
  }

@media print {
  [data-reveal], .js [data-reveal]:not(.is-in) { opacity: 1 !important; translate: none !important; transition: none !important; }
  .js .steps li:not(.is-lit) .step-n { opacity: 1; transform: none; }
  .js .steps li:not(.is-lit)::after { transform: none; }
  *, *::before, *::after { animation: none !important; }
}

@media (prefers-contrast: more) {
  :root { --line: color-mix(in srgb, var(--text) 55%, transparent); --muted: color-mix(in srgb, var(--text) 85%, var(--bg)); }
  .grad { background: none; color: var(--accent); }
}
@media (forced-colors: active) {
  .grad, .flow li::before { background: none; color: LinkText; -webkit-background-clip: border-box; }
  .step-n, .card { border: 1px solid CanvasText; }
  .note { border-inline-start-color: CanvasText; }
  .band-contact { background: Canvas; color: CanvasText; border-block: 1px solid CanvasText; }
  .btn-contact { border-color: ButtonText; background: ButtonFace; color: ButtonText; }
  .btn-primary { border-color: ButtonText; background: ButtonFace; color: ButtonText; }
  .hero-bg { display: none; }
}

/* страница «временно недоступна» (визитка выключена в настройках) */
.unavailable { min-height: 100vh; display: grid; place-content: center; justify-items: center; text-align: center; gap: 1rem; }
.unavailable h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); }
.unavailable p { color: var(--muted); }