/* ---------- Навигация (общая с landing.html) ---------- */
.nav {
position: sticky; top: 0; z-index: 50;
background: color-mix(in oklch, var(--bg) 82%, transparent);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.brand { --brand-mark: 30px; --brand-text: var(--fs-xl); display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 800; font-size: var(--brand-text); letter-spacing: -0.02em; color: var(--fg); width: fit-content; white-space: nowrap; }
.brand .mark { flex: 0 0 auto; width: var(--brand-mark); height: var(--brand-mark); display: block; }
.brand .mark svg { display: block; width: 100%; height: 100%; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a { padding: 8px 12px; font-size: var(--fs-ui); font-weight: 600; color: var(--muted); border-radius: var(--r-sm); }
.nav-links a:hover { color: var(--fg); background: var(--surface-2); }
.nav-links a:focus-visible, .ft-grid a:focus-visible, .mobile-menu a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-cta { display: flex; align-items: center; gap: 8px; }
.theme-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill); flex: none; }
.theme-seg button { width: 32px; height: 32px; border: 0; background: transparent; border-radius: 50%; cursor: pointer; color: var(--muted); display: grid; place-items: center; transition: background .15s, color .15s; }
.theme-seg button:hover { color: var(--fg); }
.theme-seg button[aria-pressed="true"] { background: var(--surface); color: var(--accent-ink); box-shadow: var(--shadow-sm); }
.theme-seg svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.theme-float { position: fixed; left: 16px; bottom: 16px; z-index: 200; background: color-mix(in oklch, var(--surface) 82%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--shadow-md, 0 6px 24px rgba(0,0,0,.12)); }
@media (max-width: 640px) { .theme-float { left: 12px; bottom: 12px; } }
@media print { .theme-float { display: none; } }
.burger { display: none; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); cursor: pointer; flex-direction: column; gap: 4px; align-items: center; justify-content: center; }
.burger span { width: 18px; height: 2px; background: var(--fg); border-radius: 2px; }
.mobile-menu { display: none; }
/* ---------- Hero ---------- */
.hero { padding: var(--s-8) 0 var(--s-7); position: relative; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--s-7); align-items: center; }
.hero h1 { font-size: clamp(32px, 5.5vw, 58px); letter-spacing: -0.03em; margin: 16px 0; }
.hero h1 .accent { color: var(--accent); }
.hero p.lead { font-size: clamp(16px, 2.2vw, 19px); color: var(--muted); max-width: 52ch; }
.hero-cta { display: flex; gap: 12px; margin-top: var(--s-5); flex-wrap: wrap; }
.hero-stats { display: flex; gap: var(--s-6); margin-top: var(--s-6); flex-wrap: wrap; }
.hero-stats .st b { display: block; font-family: var(--font-display); font-size: var(--fs-3xl); letter-spacing: -0.02em; }
.hero-stats .st span { font-size: var(--fs-sm); color: var(--muted); }
/* визуал героя — студийная панель с API-запросом */
.hero-visual {
background: var(--shell); border-radius: var(--r-xl); padding: var(--s-5);
box-shadow: var(--shadow-lg); color: var(--shell-fg);
}
.hv-top { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s-5); }
.hv-title { font-weight: 700; font-size: var(--fs-base); color: var(--shell-fg); }
.hv-meta { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--shell-muted); }
.hv-dot { width: 10px; height: 10px; border-radius: 50%; }
.hv-pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); position: relative; flex: none; }
.hv-pulse::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--accent); opacity: .6; animation: hvpulse 1.8s ease-out infinite; }
@keyframes hvpulse { 0%{transform:scale(.6);opacity:.7} 100%{transform:scale(1.5);opacity:0} }
.hv-latency { display: flex; align-items: baseline; gap: 10px; margin-bottom: var(--s-4); }
.hv-lat-num { font-family: var(--font-mono); font-size: 44px; font-weight: 700; letter-spacing: -0.02em; color: var(--shell-fg); line-height: 1; font-variant-numeric: tabular-nums; }
.hv-lat-num small { font-size: var(--fs-lg); color: oklch(78% 0.14 293); margin-left: 2px; }
.hv-lat-label { font-size: var(--fs-sm); color: var(--shell-muted); }
.hv-stream { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-md); padding: 16px; }
.hv-chunks { display: flex; gap: 5px; margin-bottom: 14px; flex-wrap: wrap; align-content: flex-start; height: 91px; overflow: hidden; }
.hv-chunks .ck { font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .04em; color: oklch(80% 0.12 155); background: color-mix(in oklch, oklch(72% 0.16 155) 16%, transparent); border: 1px solid color-mix(in oklch, oklch(72% 0.16 155) 30%, transparent); border-radius: var(--r-sm); padding: 4px 8px; opacity: 0; transform: translateY(4px); animation: hvck .5s ease forwards; }
.hv-chunks .ck.ck-int { color: var(--accent); background: color-mix(in oklch, var(--accent) 16%, transparent); border-color: color-mix(in oklch, var(--accent) 34%, transparent); display: inline-flex; align-items: center; gap: 5px; }
.hv-chunks .ck.ck-int svg { width: 11px; height: 11px; flex: none; }
.hv-chunks .ck.ck-end { color: oklch(80% 0.12 155); background: color-mix(in oklch, oklch(72% 0.16 155) 22%, transparent); border-color: color-mix(in oklch, oklch(72% 0.16 155) 44%, transparent); display: inline-flex; align-items: center; gap: 5px; }
.hv-chunks .ck.ck-end svg { width: 11px; height: 11px; flex: none; }
@keyframes hvck { to { opacity: 1; transform: translateY(0); } }
.hv-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: var(--s-4); flex-wrap: wrap; }
.hv-foot-item { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-xs); color: var(--shell-muted); }
.hv-foot-dot { width: 7px; height: 7px; border-radius: 50%; background: oklch(72% 0.16 155); flex: none; }
.hv-foot-q { font-family: var(--font-mono); color: oklch(78% 0.14 293); }
@media (prefers-reduced-motion: reduce){ .hv-pulse::after{animation:none} .hv-chunks .ck{animation:none;opacity:1;transform:none} }
/* ---------- Секции ---------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* якорные секции не должны прятаться под липкую шапку (60px) */
section[id] { scroll-margin-top: 76px; }
section.band { padding: var(--s-8) 0; }
/* сдержанный hover-lift для контентных карточек */
.feat, .case, .op { transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.feat:hover, .case:hover, .op:hover { transform: translateY(-2px); border-color: color-mix(in oklch, var(--accent) 24%, var(--border)); box-shadow: var(--shadow-sm); }
@media (prefers-reduced-motion: reduce) { .feat, .case, .op { transition: border-color .18s ease; } .feat:hover, .case:hover, .op:hover { transform: none; } }
.sec-title { text-align: center; max-width: 60ch; margin: 0 auto var(--s-6); }
.sec-title .eyebrow { display: block; margin-bottom: 10px; }
.sec-title h2 { font-size: clamp(24px, 4vw, 36px); }
.sec-title p { color: var(--muted); margin-top: 10px; }
/* ---------- Плеер-пример (как на лендинге) ---------- */
.listen { max-width: 720px; margin: 0 auto; }
.listen .player { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-5); }
.listen .pp { width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color: var(--on-accent); border: 0; cursor: pointer; flex: none; display: grid; place-items: center; }
.listen .pp svg { width: 20px; height: 20px; fill: none; stroke: currentColor; display: block; }
.listen .pp .icon-pause { display: none; }
.listen .pp[data-playing="true"] .icon-play { display: none; }
.listen .pp[data-playing="true"] .icon-pause { display: block; }
.listen .pp:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.listen .pl-body { flex: 1; min-width: 0; }
.listen .pl-title { font-weight: 700; font-size: var(--fs-base); margin-bottom: 8px; }
.listen .pl-bar { height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.listen .pl-bar i { display: block; height: 100%; width: 0%; background: var(--accent); border-radius: 3px; }
.listen .pl-time { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); margin-top: 6px; }
/* ---------- Проблемы → решения ---------- */
.ps-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto; gap: var(--s-4); }
@media (max-width: 900px) { .ps-grid { grid-template-columns: 1fr; grid-template-rows: none; } }
.ps { padding: var(--s-5); display: grid; grid-row: span 2; grid-template-rows: subgrid; gap: 0; }
@media (max-width: 900px) { .ps { grid-row: auto; grid-template-rows: auto 1fr; } }
.ps .prob { display: flex; align-items: flex-start; gap: 10px; padding-bottom: var(--s-4); margin-bottom: var(--s-4); border-bottom: 1px dashed var(--border); }
.ps .prob .x { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in oklch, var(--danger) 12%, transparent); color: var(--danger); margin-top: 1px; }
.ps .prob .x svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; }
.ps .prob h3 { font-size: var(--fs-lg); }
.ps .prob p { font-size: var(--fs-sm); color: var(--muted); margin-top: 4px; }
.ps .sol { display: flex; align-items: flex-start; gap: 10px; }
.ps .sol .c { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); margin-top: 1px; }
.ps .sol .c svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ps .sol h4 { font-size: var(--fs-base); }
.ps .sol p { font-size: var(--fs-sm); color: var(--muted); margin-top: 4px; }
/* ---------- Возможности: 2 лид-фичи во всю ширину + сетка ---------- */
.lead-feats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-bottom: var(--s-4); }
@media (max-width: 820px) { .lead-feats { grid-template-columns: 1fr; } }
.lfeat { padding: var(--s-6); position: relative; overflow: hidden; border-color: color-mix(in oklch, var(--accent) 32%, var(--border)); }
.lfeat::after { content: ""; position: absolute; inset: 0 0 auto auto; width: 180px; height: 180px; background: radial-gradient(circle at top right, var(--accent-soft), transparent 70%); opacity: .7; pointer-events: none; }
.lfeat .ic { width: 48px; height: 48px; border-radius: 13px; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; margin-bottom: var(--s-4); position: relative; z-index: 1; }
.lfeat .ic svg { width: 26px; height: 26px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.lfeat .kicker { position: relative; z-index: 1; }
.lfeat h3 { font-size: var(--fs-2xl); margin: 8px 0 10px; position: relative; z-index: 1; }
.lfeat p { font-size: var(--fs-base); color: var(--muted); position: relative; z-index: 1; max-width: 44ch; }
.lfeat ul { list-style: none; margin-top: var(--s-4); display: flex; flex-wrap: wrap; gap: 8px; position: relative; z-index: 1; }
.lfeat li { font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent-soft); padding: 5px 10px; border-radius: var(--r-pill); }
.feat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
@media (max-width: 900px) { .feat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .feat-grid { grid-template-columns: 1fr; } }
.feat { padding: var(--s-5); }
.feat .ic { width: 40px; height: 40px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; margin-bottom: var(--s-3); }
.feat .ic svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.feat h3 { font-size: var(--fs-lg); margin-bottom: 8px; }
.feat p { font-size: var(--fs-sm); color: var(--muted); }
/* ---------- Кейсы ---------- */
.cases { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
@media (max-width: 900px) { .cases { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .cases { grid-template-columns: 1fr; } }
.case { padding: var(--s-5); display: flex; flex-direction: column; }
.case .tag { font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.case h3 { font-size: var(--fs-lg); margin-bottom: 8px; }
.case p { font-size: var(--fs-sm); color: var(--muted); }
/* ---------- Три шага + API-сниппет ---------- */
.steps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); align-items: center; }
@media (max-width: 860px) { .steps-grid { grid-template-columns: 1fr; } }
.steps { display: flex; flex-direction: column; gap: var(--s-4); }
.step { display: flex; gap: var(--s-4); align-items: flex-start; }
.step .num { flex: none; width: 40px; height: 40px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent-ink); font-family: var(--font-mono); font-weight: 600; display: grid; place-items: center; }
.step h3 { font-size: var(--fs-lg); margin-bottom: 4px; }
.step p { font-size: var(--fs-sm); color: var(--muted); }
.code-card { background: var(--shell); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.code-card .cc-top { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
.code-card .cc-top .hv-meta { margin-left: auto; }
.code-card pre { margin: 0; padding: 16px; font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 1.7; color: var(--shell-fg); overflow-x: auto; }
.code-card .k { color: oklch(78% 0.14 293); }
.code-card .s { color: oklch(80% 0.12 155); }
.code-card .f { color: oklch(82% 0.11 230); }
/* ---------- Метрики ---------- */
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
@media (max-width: 720px) { .metrics { grid-template-columns: repeat(2, 1fr); } }
.metric { padding: var(--s-5); text-align: center; }
.metric b { display: block; font-family: var(--font-display); font-size: var(--fs-4xl); letter-spacing: -0.02em; color: var(--accent); }
.metric .ml { font-weight: 700; font-size: var(--fs-base); margin: 6px 0 2px; }
.metric .ms { font-size: var(--fs-xs); color: var(--muted); }
/* ---------- On-Premise ---------- */
.onprem-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
@media (max-width: 900px) { .onprem-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .onprem-grid { grid-template-columns: 1fr; } }
.op { padding: var(--s-5); }
.op .ic { width: 40px; height: 40px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; margin-bottom: var(--s-3); }
.op .ic svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.op h3 { font-size: var(--fs-base); margin-bottom: 6px; }
.op p { font-size: var(--fs-sm); color: var(--muted); }
.onprem-cta { margin-top: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; justify-content: center; }
.onprem-cta .chip { font-family: var(--font-mono); }
/* ---------- FAQ ---------- */
.faq { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--s-3); }
.faq details { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
.faq summary { list-style: none; cursor: pointer; padding: var(--s-4); font-weight: 600; font-size: var(--fs-base); display: flex; align-items: center; justify-content: space-between; gap: 12px; transition: color .15s ease; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-ink); }
.faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r-md); }
.faq details[open] { border-color: color-mix(in oklch, var(--accent) 32%, var(--border)); }
.faq summary .chev { flex: none; color: var(--muted); transition: transform .2s ease; }
.faq details[open] summary .chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .faq summary .chev { transition: none; } }
.faq .fa-body { padding: 0 var(--s-4) var(--s-4); font-size: var(--fs-ui); color: var(--muted); line-height: 1.6; }
/* ---------- Контакт-форма (расширенная) ---------- */
.contact { background: var(--shell); color: var(--shell-fg); border: 1px solid transparent; border-radius: var(--r-xl); padding: var(--s-8) var(--s-6); position: relative; overflow: hidden; }
:root[data-theme="dark"] .contact { background: var(--surface-2); color: var(--fg); border-color: var(--border); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) .contact, :root[data-theme="system"] .contact { background: var(--surface-2); color: var(--fg); border-color: var(--border); }
}
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--s-7); align-items: center; max-width: 980px; margin: 0 auto; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; gap: var(--s-6); } }
.contact h2 { font-size: clamp(24px, 4vw, 34px); margin-bottom: 12px; }
.contact .c-lead { color: var(--shell-muted); max-width: 42ch; margin-bottom: var(--s-5); }
:root[data-theme="dark"] .contact .c-lead { color: var(--muted); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .contact .c-lead, :root[data-theme="system"] .contact .c-lead { color: var(--muted); } }
.contact .c-info { display: flex; flex-direction: column; gap: var(--s-3); }
.contact .c-info a, .contact .c-info span { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-ui); color: var(--shell-fg); }
:root[data-theme="dark"] .contact .c-info a, :root[data-theme="dark"] .contact .c-info span { color: var(--fg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .contact .c-info a, :root[data-theme="system"] .contact .c-info a { color: var(--fg); } }
.contact .c-info svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; color: var(--accent); flex: none; }
.c-form { background: var(--surface); border-radius: var(--r-lg); padding: var(--s-5); box-shadow: var(--shadow-md); }
.c-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
@media (max-width: 480px) { .c-form .row { grid-template-columns: 1fr; } }
.c-form .field { margin-bottom: var(--s-3); }
.c-form .field.full { grid-column: 1 / -1; }
.c-form .label .opt { font-weight: 500; text-transform: none; letter-spacing: 0; color: color-mix(in oklch, var(--muted) 80%, transparent); }
.c-form .field.invalid .input, .c-form .field.invalid .textarea,
.c-form .field.invalid .input:focus, .c-form .field.invalid .textarea:focus { border-color: var(--danger) !important; box-shadow: 0 0 0 3px color-mix(in oklch, var(--danger) 22%, transparent) !important; }
.c-form .field .err { display: none; color: var(--danger); font-size: var(--fs-xs); margin-top: 6px; align-items: center; gap: 5px; }
.c-form .field.invalid .err { display: flex; }
@keyframes cf-shake { 10%,90%{transform:translateX(-1px)} 20%,80%{transform:translateX(2px)} 30%,50%,70%{transform:translateX(-3px)} 40%,60%{transform:translateX(3px)} }
@media (prefers-reduced-motion: no-preference) { .c-form .field.invalid .input, .c-form .field.invalid .textarea { animation: cf-shake .4s ease; } }
.c-form .field .err svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.c-form .ok:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--r-md); }
.c-form .privacy { font-size: var(--fs-xs); color: var(--muted); margin-top: 12px; text-align: center; }
.c-form .privacy a { color: var(--accent-ink); }
.c-form .btn { width: 100%; margin-top: 4px; }
.c-form .ok { display: none; text-align: center; padding: var(--s-4); }
.c-form .ok.show { display: block; }
.c-form .ok .ok-ic { width: 48px; height: 48px; border-radius: 50%; background: color-mix(in oklch, var(--success) 16%, transparent); color: var(--success); display: grid; place-items: center; margin: 0 auto var(--s-3); }
.c-form .ok .ok-ic svg { width: 26px; height: 26px; stroke: currentColor; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* footer (общий с landing.html) */
footer.ft { border-top: 1px solid var(--border); padding: var(--s-7) 0 var(--s-5); }
.ft-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-6); }
.ft-grid h4 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 12px; font-family: var(--font-mono); }
.ft-grid a { display: block; padding: 5px 0; font-size: var(--fs-ui); color: var(--muted); }
.ft-grid a.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--fg); margin-bottom: 12px; }
.ft-grid a:hover { color: var(--fg); }
.ft-bottom { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--border); font-size: var(--fs-sm); color: var(--muted); }
/* ---------- Планшет + мобайл: меню сворачивается в бургер ---------- */
@media (max-width: 920px) {
.nav-links, .nav-cta .btn-ghost, .nav-cta .btn-primary { display: none; }
.burger { display: flex; }
.mobile-menu.open { display: block; border-bottom: 1px solid var(--border); background: var(--surface); }
.mobile-menu.open a { display: block; padding: 13px var(--s-4); font-weight: 600; border-top: 1px solid var(--border); }
.mobile-menu.open .btn { margin: var(--s-4); display: flex; }
}
@media (max-width: 860px) {
.hero-grid { grid-template-columns: 1fr; gap: var(--s-5); }
.hero { padding: var(--s-6) 0; }
.ft-grid { grid-template-columns: 1fr 1fr; gap: var(--s-5); }
}
@media (max-width: 640px) {
section.band { padding: var(--s-7) 0; }
.hero-stats { gap: var(--s-5); }
.ft-grid { grid-template-columns: 1fr; gap: var(--s-4); }
}