/* ═══════════════════════════════════════════════════════════════
   AiXenix v2 — cyber.css
   Дизайн-система портирована с живого aixenix.com (DESIGN-KEEP):
   палитра, шрифты, глитчи, терминал-приёмы — сохранены 1:1.
   Кириллические фоллбеки: Exo 2 (display/body), JetBrains Mono (mono).
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* Фоны */
    --cyber-bg-primary: #0a0012;
    --cyber-bg-secondary: #120020;
    --cyber-bg-tertiary: #1a0030;
    --cyber-bg-card: rgba(20, 0, 40, .8);
    --cyber-bg-glass: rgba(10, 0, 18, .9);

    /* Неоновые акценты */
    --cyber-neon-pink: #ff00ff;
    --cyber-neon-cyan: #00ffff;
    --cyber-neon-yellow: #ffff00;
    --cyber-neon-green: #00ff88;
    --cyber-neon-purple: #bf00ff;
    --cyber-neon-orange: #ff6600;

    /* Текст */
    --cyber-text-primary: #ffffff;
    --cyber-text-secondary: rgba(255, 255, 255, .72);
    --cyber-text-muted: rgba(255, 255, 255, .6);

    /* Градиенты */
    --cyber-gradient-pink: linear-gradient(135deg, #ff00ff, #ff6b6b);
    --cyber-gradient-cyan: linear-gradient(135deg, #00ffff, #00ff88);
    --cyber-gradient-mixed: linear-gradient(90deg, #ff00ff, #00ffff);
    --cyber-gradient-purple: linear-gradient(135deg, #bf00ff, #ff00ff);

    /* Свечения */
    --cyber-glow-pink: 0 0 20px rgba(255, 0, 255, .5), 0 0 40px rgba(255, 0, 255, .3);
    --cyber-glow-cyan: 0 0 20px rgba(0, 255, 255, .5), 0 0 40px rgba(0, 255, 255, .3);
    --cyber-glow-text: 0 0 10px currentColor, 0 0 20px currentColor;

    /* Рамки */
    --cyber-border-color: rgba(255, 0, 255, .3);

    /* Шрифты: латиница = как на текущем сайте, кириллица = техно-фоллбеки */
    --cyber-font-display: "Orbitron", "Exo 2", sans-serif;
    --cyber-font-body: "Rajdhani", "Exo 2", sans-serif;
    --cyber-font-mono: "Share Tech Mono", "JetBrains Mono", monospace;

    /* Ритм */
    --sp-xs: .5rem; --sp-sm: 1rem; --sp-md: 2rem; --sp-lg: 4rem; --sp-xl: clamp(3.5rem, 6vw, 4.5rem);
    --tr-fast: .15s ease; --tr-normal: .3s ease; --tr-slow: .5s ease;
    --z-background: -1; --z-content: 1; --z-overlay: 100; --z-nav: 1000;
}

/* ── база ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--cyber-font-body);
    font-size: 1.06rem;
    background: var(--cyber-bg-primary);
    color: var(--cyber-text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
}
img { max-width: 100%; height: auto; }
a { color: var(--cyber-neon-cyan); text-decoration: none; transition: var(--tr-fast); }
a:hover { text-shadow: 0 0 10px currentColor; }
:focus-visible { outline: 2px solid var(--cyber-neon-cyan); outline-offset: 3px; }
.svc > summary:focus-visible, .case > summary:focus-visible,
.faq-list summary:focus-visible { outline: 2px solid var(--cyber-neon-cyan); outline-offset: -3px; }
[hidden] { display: none !important; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem); }
/* длинные SNAKE_CASE-строки не должны распирать гриды и вьюпорт */
.price-grid > *, .price-ladder > *, .clients-facts > *, .svc-body > *,
.contact-grid > *, .about-grid > *, .why-grid > *, .clients-grid > *,
.case-grid > *, .apps-grid > *, .footer-inner > * { min-width: 0; }
.cyber-btn { white-space: normal; }
h1, h2, h3, h4, p, li, summary { overflow-wrap: break-word; }
section { position: relative; z-index: var(--z-content); padding: var(--sp-xl) 0; }
/* рубежи между секциями — ритм вместо чёрных пустот */
main > section:not(.proof):not(.divider) { border-top: 1px solid rgba(255, 0, 255, .1); }
/* якоря не прячутся под фикс-шапкой */
section[id], .svc[id], .case[id], header[id] { scroll-margin-top: 84px; }
h1, h2, h3, h4 { margin: 0 0 .6em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }

/* ── атмосферные слои (с живого сайта) ────────────────── */
.cyber-scanlines { position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: var(--z-overlay);
    background: repeating-linear-gradient(0deg, rgba(0,0,0,.1) 0px, rgba(0,0,0,.1) 1px, transparent 1px, transparent 3px);
    opacity: .3; }
.cyber-grid { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;
    z-index: var(--z-background);
    background-image: linear-gradient(rgba(255,0,255,.03) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,0,255,.03) 1px, transparent 1px);
    background-size: 50px 50px; }
.cyber-body::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(ellipse at 20% 20%, rgba(191,0,255,.1) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 80%, rgba(0,255,255,.1) 0%, transparent 50%);
    pointer-events: none; z-index: var(--z-background); }
.cyber-shape { position: fixed; pointer-events: none; z-index: var(--z-background);
    opacity: .6; border-radius: 50%; animation: cyber-float 20s ease-in-out infinite; }
.cyber-shape-1 { top: 10%; left: 5%; width: 300px; height: 300px; background: radial-gradient(circle, rgba(255,0,255,.2) 0%, transparent 70%); }
.cyber-shape-2 { top: 60%; right: 10%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(0,255,255,.15) 0%, transparent 70%); animation-delay: -5s; }
.cyber-shape-3 { bottom: 20%; left: 15%; width: 250px; height: 250px; background: radial-gradient(circle, rgba(191,0,255,.15) 0%, transparent 70%); animation-delay: -10s; }
.cyber-shape-4 { top: 40%; right: 30%; width: 200px; height: 200px; background: radial-gradient(circle, rgba(0,255,136,.1) 0%, transparent 70%); animation-delay: -15s; }
@keyframes cyber-float {
    0%, to { transform: translate(0) scale(1); }
    25% { transform: translate(30px, -20px) scale(1.1); }
    50% { transform: translate(-20px, 30px) scale(.9); }
    75% { transform: translate(-30px, -10px) scale(1.05); }
}

/* ── типографика ──────────────────────────────────────── */
.cyber-hero-title { font-family: var(--cyber-font-display); font-size: clamp(1.7rem, 3.6vw, 3.1rem);
    font-weight: 900; line-height: 1.18; text-transform: uppercase; letter-spacing: .01em; }
.cyber-section-title { font-family: var(--cyber-font-display); font-size: clamp(1.6rem, 4vw, 2.7rem);
    font-weight: 800; text-transform: uppercase; line-height: 1.2; }
.cyber-text-gradient { background: var(--cyber-gradient-mixed); -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; background-clip: text; }
.cyber-section-label { font-family: var(--cyber-font-mono); font-size: .9rem;
    color: var(--cyber-text-muted); letter-spacing: .1em; margin-bottom: .8rem; }
.cyber-accent { color: var(--cyber-neon-pink); }
.cyber-tag-bracket { color: var(--cyber-neon-pink); }
.cyber-tag-text { color: var(--cyber-neon-cyan); }
.section-intro { max-width: 46em; color: var(--cyber-text-secondary); font-size: 1.1rem; }

/* ── ГЛИТЧ-эффекты (порт 1:1) ─────────────────────────── */
.cyber-title-glitch { position: relative; display: inline; }
.cyber-title-glitch::before, .cyber-title-glitch::after {
    content: attr(data-text); position: absolute; top: 0; left: 0;
    width: 100%; height: 100%; opacity: 0; pointer-events: none; z-index: 0; }
.hero-inner { isolation: isolate; }
.cyber-title-glitch::before { color: var(--cyber-neon-cyan); animation: cyber-glitch-1 3s infinite; }
.cyber-title-glitch::after  { color: var(--cyber-neon-pink); animation: cyber-glitch-2 3s infinite; }
@keyframes cyber-glitch-1 {
    0%, 90%, to { opacity: 0; transform: translate(0); }
    91% { opacity: .8; transform: translate(-2px, 2px); }
    92% { opacity: 0; }
    93% { opacity: .8; transform: translate(2px, -2px); }
    94% { opacity: 0; } }
@keyframes cyber-glitch-2 {
    0%, 90%, to { opacity: 0; transform: translate(0); }
    91% { opacity: .8; transform: translate(2px, -2px); }
    92% { opacity: 0; }
    93% { opacity: .8; transform: translate(-2px, 2px); }
    94% { opacity: 0; } }

[data-animate] { opacity: 0; }
[data-animate].animated { animation: cyber-glitch-in .5s ease forwards; }
@keyframes cyber-glitch-in {
    0%  { opacity: 0; transform: translateY(30px) skew(-5deg); }
    50% { transform: translateY(-5px) skew(2deg); }
    to  { opacity: 1; transform: translateY(0) skew(0); } }
.no-js [data-animate] { opacity: 1; }

.cyber-logo { display: inline-flex; align-items: baseline; gap: .5rem; }
.cyber-logo-mark { font-family: var(--cyber-font-mono); color: var(--cyber-neon-pink); font-size: 1.1rem; }
.cyber-logo-text { position: relative; font-family: var(--cyber-font-display); font-weight: 700;
    font-size: 1.15rem; letter-spacing: .12em; color: var(--cyber-text-primary); }
.cyber-logo-text::after { content: attr(data-text); position: absolute; top: 0; left: 0;
    color: var(--cyber-neon-cyan); opacity: 0; clip-path: inset(0 100% 0 0);
    animation: cyber-logo-scan 4s linear infinite; }
@keyframes cyber-logo-scan {
    0%, to { clip-path: inset(0 100% 0 0); opacity: 0; }
    50%    { clip-path: inset(0 0 0 0); opacity: .5; } }

/* ── навбар ───────────────────────────────────────────── */
.cyber-nav { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav);
    background: rgba(10, 0, 18, .95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--cyber-border-color); }
.cyber-nav-inner { max-width: 1180px; margin: 0 auto; padding: .7rem clamp(1rem, 4vw, 2.5rem);
    display: flex; align-items: center; gap: .9rem; transition: padding var(--tr-normal); }
.cyber-nav.scrolled .cyber-nav-inner { padding-top: .4rem; padding-bottom: .4rem; }
.cyber-nav-links { display: flex; align-items: center; gap: .2rem; margin-left: auto; }

/* телефон — виден всегда, на любом экране */
.cyber-nav-phone { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2;
    padding: .15rem 1rem; border-left: 1px solid rgba(255, 0, 255, .3); white-space: nowrap; }
.nav-phone-label { font-family: var(--cyber-font-mono); font-size: .6rem; letter-spacing: .18em;
    color: var(--cyber-text-muted); }
.nav-phone-num { font-family: var(--cyber-font-mono); font-size: .98rem; color: var(--cyber-neon-cyan); }
.cyber-nav-phone:hover { text-shadow: none; }
.cyber-nav-phone:hover .nav-phone-num { text-shadow: 0 0 12px var(--cyber-neon-cyan); }
.cyber-nav-cta.nav-cta-mobile { display: none; }

/* переключатель языка (флажок) */
.cyber-nav-lang { flex: none; display: inline-flex; align-items: center; gap: .45rem;
    padding: .35rem .6rem; border: 1px solid var(--cyber-border-color);
    font-family: var(--cyber-font-mono); font-size: .8rem; letter-spacing: .08em;
    color: var(--cyber-text-secondary); }
.cyber-nav-lang svg { width: 20px; height: 14px; display: block; }
.cyber-nav-lang:hover { border-color: var(--cyber-neon-cyan); color: var(--cyber-neon-cyan);
    text-shadow: none; box-shadow: 0 0 10px rgba(0,255,255,.25); }

/* компактная TG-кнопка: фирменный градиент + пробегающий блик */
.cyber-nav-tg { flex: none; width: 44px; height: 40px; display: inline-flex; align-items: center;
    justify-content: center; background: var(--cyber-gradient-mixed); color: var(--cyber-bg-primary);
    position: relative; overflow: hidden; transition: var(--tr-fast); }
.cyber-nav-tg::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transition: .5s; }
.cyber-nav-tg:hover { box-shadow: var(--cyber-glow-pink), var(--cyber-glow-cyan); transform: scale(1.07); text-shadow: none; }
.cyber-nav-tg:hover::before { left: 100%; }
.cyber-nav-link { font-family: var(--cyber-font-body); font-weight: 600; font-size: .95rem;
    text-transform: uppercase; letter-spacing: .05em; color: var(--cyber-text-secondary);
    padding: .45rem .7rem; border: 1px solid transparent; white-space: nowrap; }
.cyber-nav-link:hover { color: var(--cyber-neon-cyan); text-shadow: 0 0 10px var(--cyber-neon-cyan);
    border-color: rgba(0,255,255,.3); background: rgba(0,255,255,.05); }
.cyber-nav-index { font-family: var(--cyber-font-mono); font-size: .75rem; color: var(--cyber-neon-pink); opacity: .7; }
.cyber-nav-cta { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.3rem; white-space: nowrap;
    font-family: var(--cyber-font-display); font-size: .8rem; font-weight: 600; text-transform: uppercase;
    color: var(--cyber-bg-primary) !important; background: var(--cyber-gradient-mixed); border: none; cursor: pointer;
    position: relative; overflow: hidden; }
.cyber-nav-cta::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent); transition: .5s; }
.cyber-nav-cta:hover { box-shadow: var(--cyber-glow-pink), var(--cyber-glow-cyan); transform: scale(1.04); text-shadow: none; }
.cyber-nav-cta:hover::before { left: 100%; }
.cyber-nav-glow { position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
    background: var(--cyber-gradient-mixed); box-shadow: var(--cyber-glow-pink); }
.cyber-nav-progress { position: absolute; bottom: 0; left: 0; height: 2px; width: 0;
    background: var(--cyber-gradient-mixed); box-shadow: var(--cyber-glow-pink); }
.cyber-burger { display: none; background: none; border: 1px solid var(--cyber-border-color);
    padding: .5rem .6rem; cursor: pointer; flex-direction: column; gap: 4px; }
.cyber-burger span { display: block; width: 20px; height: 2px; background: var(--cyber-neon-cyan); }

/* ── кнопки (порт 1:1) ────────────────────────────────── */
.cyber-btn { position: relative; display: inline-flex; align-items: center; justify-content: center;
    gap: .75rem; padding: 1rem 2rem; font-family: var(--cyber-font-display); font-size: .9rem;
    font-weight: 600; text-transform: uppercase; letter-spacing: .1em; cursor: pointer;
    transition: var(--tr-fast); overflow: hidden; border: none; }
.cyber-btn-neon { background: transparent; color: var(--cyber-neon-pink); border: 2px solid var(--cyber-neon-pink); }
.cyber-btn-neon .cyber-btn-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: var(--cyber-neon-pink); transform: scaleX(0); transform-origin: right;
    transition: transform .3s ease; z-index: 0; }
.cyber-btn-neon .cyber-btn-text, .cyber-btn-neon .cyber-btn-arrow { position: relative; z-index: 1; }
.cyber-btn-neon:hover { color: var(--cyber-bg-primary); box-shadow: var(--cyber-glow-pink); text-shadow: none; }
.cyber-btn-neon:hover .cyber-btn-bg { transform: scaleX(1); transform-origin: left; }
.cyber-btn-glow { border: 1px solid var(--cyber-neon-cyan);
    background: linear-gradient(135deg, rgba(0,255,255,.1), rgba(0,255,136,.05)); color: var(--cyber-neon-cyan);
    box-shadow: 0 0 20px rgba(0,255,255,.2), inset 0 0 20px rgba(0,255,255,.05); }
.cyber-btn-glow::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0,255,255,.3), transparent); transition: left .5s ease; }
.cyber-btn-glow:hover { background: linear-gradient(135deg, rgba(0,255,255,.2), rgba(0,255,136,.15));
    box-shadow: 0 0 30px rgba(0,255,255,.4), 0 0 60px rgba(0,255,255,.2), inset 0 0 30px rgba(0,255,255,.1);
    border-color: rgba(0,255,255,.8); color: #fff; text-shadow: none; }
.cyber-btn-glow:hover::before { left: 100%; }
.cyber-btn-glow:hover .cyber-btn-arrow { transform: translate(5px); }
.cyber-btn-arrow { font-size: 1.2rem; transition: transform .3s ease; font-weight: 300; }
.cyber-btn-ghost { background: rgba(10,0,18,.55); color: rgba(0,255,255,.85); border: 1px solid rgba(0,255,255,.45); }
.cyber-btn-ghost:hover { color: var(--cyber-neon-cyan); border-color: var(--cyber-neon-cyan); box-shadow: 0 0 15px rgba(0,255,255,.3); text-shadow: none; }

.quiet-cta { font-family: var(--cyber-font-mono); font-size: .95rem; color: var(--cyber-text-secondary);
    margin-top: 2rem; }
.quiet-cta a { color: var(--cyber-neon-cyan); border-bottom: 1px solid var(--cyber-neon-cyan); }

/* ── HERO + слот №1 ───────────────────────────────────── */
.hero { position: relative; margin: 0; padding: 0; }
.hero-sticky { position: sticky; top: 0; min-height: 100vh; min-height: 100svh;
    display: flex; align-items: center; overflow: hidden; }
.hero.has-scrub { height: 175vh; } /* доп. 75vh — длина скраба */
.hero-media { position: absolute; inset: 0; z-index: 0; background: var(--cyber-bg-secondary); }
.hero-media video, .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-veil { position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, rgba(10,0,18,.88) 0%, rgba(10,0,18,.55) 45%, rgba(10,0,18,.25) 100%),
                linear-gradient(0deg, var(--cyber-bg-primary) 0%, transparent 22%); }
.cyber-hero-grid-lines { position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, rgba(255,0,255,.05) 1px, transparent 1px),
                linear-gradient(rgba(0,255,255,.05) 1px, transparent 1px);
    background-size: 100px 100px; animation: cyber-grid-move 20s linear infinite; }
@keyframes cyber-grid-move { 0% { background-position: 0 0; } to { background-position: 100px 100px; } }
.hero-inner { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; width: 100%;
    padding: 7rem clamp(1rem, 4vw, 2.5rem) 4rem; }
.hero-label { margin-bottom: 1.2rem; }
.hero .cyber-hero-title { max-width: 21ch; }
.hero-sub { max-width: 44em; font-size: 1.15rem; color: var(--cyber-text-secondary); margin: 1.4rem 0 2rem; }
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-hint { position: absolute; bottom: 1.4rem; left: clamp(1rem, 4vw, 2.5rem);
    font-family: var(--cyber-font-mono); font-size: .8rem; color: var(--cyber-text-muted); letter-spacing: .15em; }
.hero-hint-arrow { display: inline-block; animation: hint-bob 1.6s ease-in-out infinite; color: var(--cyber-neon-cyan); }
@keyframes hint-bob { 0%, to { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* ── PROOF ────────────────────────────────────────────── */
.proof { padding: var(--sp-md) 0; border-top: 1px solid rgba(255,0,255,.15); border-bottom: 1px solid rgba(255,0,255,.15);
    background: rgba(18, 0, 32, .5); }
.proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-sm); }
.proof-item { display: block; padding: 1rem 1.2rem; border-left: 2px solid var(--cyber-neon-pink); color: inherit;
    position: relative; }
.proof-item p { margin: 0; font-size: .95rem; color: var(--cyber-text-secondary); }
a.proof-item::after { content: "\2192"; position: absolute; top: .7rem; right: .9rem;
    font-family: var(--cyber-font-mono); color: var(--cyber-neon-cyan); opacity: .75; }
a.proof-item:hover { background: rgba(255,0,255,.06); text-shadow: none; }
a.proof-item:hover .proof-num { text-shadow: var(--cyber-glow-text); }
.proof-num { font-family: var(--cyber-font-display); font-size: 2rem; font-weight: 800;
    background: var(--cyber-gradient-mixed); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.proof-unit { font-size: 1.1rem; }

/* ── карточки-фичи (why / clients) ────────────────────── */
.why-grid, .clients-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-sm); margin-top: var(--sp-md); }
.cyber-feature-card { background: var(--cyber-bg-card); border: 1px solid var(--cyber-border-color);
    padding: var(--sp-md); position: relative; overflow: hidden; transition: var(--tr-normal); }
.cyber-feature-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px;
    background: var(--cyber-gradient-mixed); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.cyber-feature-card:hover { border-color: var(--cyber-neon-pink); transform: translateY(-2px); }
.cyber-feature-card:hover::before { transform: scaleX(1); }
.cyber-feature-card h3 { font-family: var(--cyber-font-display); font-size: 1.05rem; font-weight: 700;
    text-transform: uppercase; line-height: 1.35; }
.cyber-feature-card p { color: var(--cyber-text-secondary); margin: 0; }
.cyber-work-index { font-family: var(--cyber-font-mono); font-size: .75rem; color: var(--cyber-neon-pink);
    opacity: .7; margin: 0 0 .8rem; }

/* ── УСЛУГИ (аккордеоны) ──────────────────────────────── */
.svc { background: var(--cyber-bg-card); border: 1px solid var(--cyber-border-color);
    margin-top: var(--sp-sm); transition: var(--tr-normal); position: relative; overflow: hidden; }
.svc::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px;
    background: var(--cyber-gradient-mixed); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.svc:hover, .svc[open] { border-color: var(--cyber-neon-pink); }
.svc:hover::before, .svc[open]::before { transform: scaleX(1); }
.svc > summary { display: flex; align-items: center; gap: 1.2rem; padding: 1.3rem 1.5rem;
    cursor: pointer; list-style: none; }
.svc > summary::-webkit-details-marker { display: none; }
.svc-head { flex: 1; display: flex; flex-direction: column; gap: .35rem; }
.svc-name { font-family: var(--cyber-font-display); font-weight: 700; font-size: 1.12rem;
    text-transform: uppercase; line-height: 1.35; }
.svc-teaser { color: var(--cyber-text-secondary); font-size: 1rem; }
.svc-teaser b { color: var(--cyber-neon-cyan); font-weight: 600; }
.svc-plus { font-family: var(--cyber-font-mono); font-size: 1.5rem; color: var(--cyber-neon-pink);
    flex: none; width: 2.2rem; height: 2.2rem; border: 1px solid var(--cyber-border-color);
    display: flex; align-items: center; justify-content: center; transition: var(--tr-normal); }
.svc[open] > summary .svc-plus, .case[open] > summary .svc-plus, .faq-list details[open] > summary .svc-plus { transform: rotate(45deg); border-color: var(--cyber-neon-pink); }
.svc-body { padding: .3rem 1.5rem 1.5rem; display: grid; grid-template-columns: 1fr 1.25fr; gap: var(--sp-md); }
.svc-body h4 { font-family: var(--cyber-font-mono); font-size: .85rem; color: var(--cyber-neon-cyan);
    letter-spacing: .1em; margin-bottom: .8rem; }
.pain-list, .solve-list { list-style: none; padding: 0; margin: 0; }
.pain-list li, .solve-list li { padding-left: 1.4rem; position: relative; margin-bottom: .7rem;
    color: var(--cyber-text-secondary); }
.pain-list li::before { content: "▸"; position: absolute; left: 0; color: var(--cyber-neon-orange); }
.solve-list li::before { content: "▸"; position: absolute; left: 0; color: var(--cyber-neon-green); }
.svc-links, .svc-format { grid-column: 1 / -1; font-family: var(--cyber-font-mono); font-size: .88rem;
    color: var(--cyber-text-muted); margin: 0; }
.svc-links a { color: var(--cyber-neon-cyan); }
.svc-cta { grid-column: 1 / -1; margin: .5rem 0 0; }
.svc-cta a { font-family: var(--cyber-font-mono); color: var(--cyber-neon-pink);
    border-bottom: 1px solid var(--cyber-neon-pink); padding-bottom: .1em; display: inline-block; }
.svc-cta a:hover { text-shadow: 0 0 10px var(--cyber-neon-pink); }

/* ── КЕЙСЫ ────────────────────────────────────────────── */
.case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-sm); margin-top: var(--sp-md); }
.case { background: var(--cyber-bg-card); border: 1px solid var(--cyber-border-color);
    transition: var(--tr-normal); position: relative; overflow: hidden; }
.case:hover, .case[open] { border-color: var(--cyber-neon-pink); box-shadow: 0 0 30px rgba(255,0,255,.2); }
.case > summary { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.3rem;
    cursor: pointer; list-style: none; }
.case > summary::-webkit-details-marker { display: none; }
.case-metric { font-family: var(--cyber-font-display); font-weight: 800; font-size: 1.05rem; flex: none;
    background: var(--cyber-gradient-mixed); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; min-width: 7.2rem; }
.case-title { flex: 1; font-weight: 600; font-size: 1.02rem; line-height: 1.4; }
.case .svc-plus { width: 2.2rem; height: 2.2rem; font-size: 1.5rem; }
.case-body { padding: 0 1.3rem 1.2rem; }
.case-body p { color: var(--cyber-text-secondary); font-size: .98rem; margin-bottom: .6em; }
.case-body b { color: var(--cyber-text-primary); }

/* ── КЛИЕНТЫ ──────────────────────────────────────────── */
.clients-thesis { max-width: 48em; font-size: 1.15rem; color: var(--cyber-text-secondary); }
.clients-thesis b { color: var(--cyber-neon-cyan); font-weight: 600; }
.clients-tags { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: var(--sp-md); }
.cyber-tech-tag { font-family: var(--cyber-font-mono); font-size: .78rem; padding: .4rem .8rem;
    background: rgba(255,0,255,.1); border: 1px solid var(--cyber-neon-pink); color: var(--cyber-neon-pink);
    text-transform: uppercase; letter-spacing: .05em; }
.clients-facts { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--sp-md); margin-top: var(--sp-md); align-items: start; }
.clients-long { color: var(--cyber-text-secondary); margin: 0; font-size: 1.05rem; }
.clients-no { border: 1px solid rgba(255,102,0,.35); background: rgba(255,102,0,.05); padding: 1.2rem 1.4rem; }
.clients-no h4 { font-family: var(--cyber-font-mono); font-size: .85rem; color: var(--cyber-neon-orange);
    letter-spacing: .1em; margin-bottom: .8rem; }
.clients-no ul { list-style: none; padding: 0; margin: 0; }
.clients-no li { padding-left: 1.3rem; position: relative; margin-bottom: .5rem; color: var(--cyber-text-secondary); font-size: .95rem; }
.clients-no li::before { content: "✕"; position: absolute; left: 0; color: var(--cyber-neon-orange); font-size: .8rem; top: .2em; }

/* ── ПРОЦЕСС ──────────────────────────────────────────── */
.steps { list-style: none; padding: 0; margin: var(--sp-md) 0 0; display: grid;
    grid-template-columns: repeat(5, 1fr); gap: var(--sp-sm); counter-reset: step; }
.steps li { background: var(--cyber-bg-card); border: 1px solid var(--cyber-border-color);
    padding: 1.3rem 1.2rem; position: relative; }
.steps li h3 { font-family: var(--cyber-font-display); font-size: .95rem; font-weight: 700;
    text-transform: uppercase; line-height: 1.35; }
.steps li p { color: var(--cyber-text-secondary); font-size: .92rem; margin: 0; }
.step-num { font-family: var(--cyber-font-mono); color: var(--cyber-neon-pink); font-size: .8rem;
    display: block; margin-bottom: .7rem; opacity: .8; }
.process-thread { margin-top: var(--sp-md); font-size: 1.1rem; color: var(--cyber-text-secondary); }
.process-thread b { color: var(--cyber-text-primary); }

/* ── СТОИМОСТЬ ────────────────────────────────────────── */
.price-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--sp-md); margin-top: var(--sp-md); align-items: start; }
.price-ladder { display: grid; gap: var(--sp-sm); }
.price-step { background: var(--cyber-bg-card); border: 1px solid var(--cyber-border-color);
    border-left: 3px solid var(--cyber-neon-pink); padding: 1.2rem 1.5rem; }
.price-step:nth-child(2) { border-left-color: var(--cyber-neon-cyan); }
.price-step:nth-child(3) { border-left: 3px solid; border-image: linear-gradient(180deg, #ff00ff, #00ffff) 1; }
.price-step h3 { font-family: var(--cyber-font-display); font-size: 1.1rem; text-transform: uppercase; margin-bottom: .4rem; }
.price-step p { color: var(--cyber-text-secondary); margin: 0; }
.price-tag { font-family: var(--cyber-font-mono); font-size: .8rem; color: var(--cyber-neon-cyan);
    letter-spacing: .1em; margin-bottom: .6rem; }
.price-compare { background: var(--cyber-bg-secondary); border: 1px solid var(--cyber-border-color); padding: 1.5rem; }
.price-compare h4 { font-family: var(--cyber-font-mono); font-size: .82rem; color: var(--cyber-neon-cyan);
    letter-spacing: .08em; margin-bottom: 1rem; }
.price-compare ul { list-style: none; padding: 0; margin: 0 0 1.4rem; }
.price-compare li { padding-left: 1.4rem; position: relative; margin-bottom: .8rem; color: var(--cyber-text-secondary); font-size: .97rem; }
.price-compare li::before { content: "▸"; position: absolute; left: 0; color: var(--cyber-neon-pink); }
.price-compare li b { color: var(--cyber-text-primary); }

/* ── ВИДЕО-РАЗДЕЛИТЕЛЬ (слот №2) ──────────────────────── */
.divider { padding: 0; margin: 0; }
.divider-sticky { position: relative; min-height: 52vh; display: flex; align-items: center;
    justify-content: center; overflow: hidden; border-top: 1px solid rgba(255,0,255,.15);
    border-bottom: 1px solid rgba(255,0,255,.15); background: var(--cyber-bg-secondary); }
.divider.has-scrub { height: 130vh; }
.divider.has-scrub .divider-sticky { position: sticky; top: 0; height: 100vh; }
.divider-media { position: absolute; inset: 0; }
.divider-media video, .divider-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.divider-veil { position: absolute; inset: 0; background: rgba(10,0,18,.45); }
.divider-line { position: relative; z-index: 2; font-family: var(--cyber-font-display); font-weight: 800;
    font-size: clamp(1.1rem, 2.6vw, 1.9rem); text-transform: uppercase; letter-spacing: .05em;
    text-align: center; padding: .45em .9em; background: rgba(5,0,10,.55);
    border: 1px solid rgba(255,0,255,.2); text-shadow: 0 2px 20px rgba(0,0,0,.8); }

/* ── ОБО МНЕ ──────────────────────────────────────────── */
.about-grid { display: grid; grid-template-columns: 340px 1fr; gap: var(--sp-lg); align-items: start; }
.about-frame { position: relative; background: var(--cyber-bg-secondary); border: 1px solid var(--cyber-border-color);
    padding: 10px; }
.about-frame img { display: block; width: 100%; height: auto; filter: saturate(.9) contrast(1.05); }
.about-photo-fb { display: none; }
.about-photo.no-photo .about-photo-fb { display: flex; align-items: center; justify-content: center;
    aspect-ratio: 4 / 5; background: linear-gradient(135deg, rgba(255,0,255,.12), rgba(0,255,255,.08)); }
.about-photo-fb span { font-family: var(--cyber-font-mono); font-size: 3.5rem; color: var(--cyber-neon-pink); opacity: .7; }
.cyber-modal-corner { position: absolute; width: 20px; height: 20px; border: 2px solid var(--cyber-neon-pink); z-index: 2; }
.cyber-modal-corner-tl { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.cyber-modal-corner-tr { top: -1px; right: -1px; border-left: none; border-bottom: none; }
.cyber-modal-corner-bl { bottom: -1px; left: -1px; border-right: none; border-top: none; }
.cyber-modal-corner-br { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.about-btn { margin-top: var(--sp-sm); width: 100%; }
.about-lead { font-size: 1.15rem; color: var(--cyber-text-secondary); max-width: 44em; }
.about-points { list-style: none; padding: 0; margin: 0 0 var(--sp-sm); }
.about-points li { padding-left: 1.4rem; position: relative; margin-bottom: .8rem; color: var(--cyber-text-secondary); }
.about-points li::before { content: "▸"; position: absolute; left: 0; color: var(--cyber-neon-cyan); }
.about-facts { border-left: 2px solid var(--cyber-border-color); padding-left: 1.2rem; margin-bottom: var(--sp-sm); }
.about-facts p { font-family: var(--cyber-font-mono); font-size: .88rem; color: var(--cyber-text-secondary); margin-bottom: .5em; }
.about-note { color: var(--cyber-text-muted); font-size: .98rem; }

/* ── APP STORE ────────────────────────────────────────── */
.apps-note { font-family: var(--cyber-font-mono); font-size: .85rem; color: var(--cyber-text-muted); }
.apps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-sm); margin-top: var(--sp-sm); min-height: 360px; }
@media (max-width: 720px) { .apps-grid { min-height: 900px; } }
.app-card { display: flex; gap: 1rem; background: var(--cyber-bg-card); border: 1px solid var(--cyber-border-color);
    padding: 1.1rem; color: inherit; transition: var(--tr-normal); position: relative; overflow: hidden; }
.app-card:hover { border-color: var(--cyber-neon-cyan); box-shadow: 0 0 25px rgba(0,255,255,.2); text-shadow: none; transform: translateY(-2px); }
.app-card > div { display: flex; flex-direction: column; flex: 1; }
.app-card .app-badge { margin-top: auto; align-self: flex-start; }
.app-card img { width: 56px; height: 56px; flex: none; border: 1px solid rgba(255,255,255,.1); }
.app-icon-fb { width: 56px; height: 56px; flex: none; display: flex; align-items: center; justify-content: center;
    background: rgba(255,0,255,.12); color: var(--cyber-neon-pink); font-family: var(--cyber-font-display); font-size: 1.5rem; }
.app-card h3 { font-family: var(--cyber-font-display); font-size: 1rem; margin: 0 0 .2rem; text-transform: uppercase; }
.app-meta { font-family: var(--cyber-font-mono); font-size: .75rem; color: var(--cyber-text-muted); margin: 0 0 .35rem; }
.app-meta .star { color: var(--cyber-neon-yellow); }
.app-card .blurb { font-size: .92rem; color: var(--cyber-text-secondary); margin: 0 0 .5rem; }
.app-badge { font-family: var(--cyber-font-mono); font-size: .72rem; color: var(--cyber-neon-cyan);
    border: 1px solid rgba(0,255,255,.3); padding: .2rem .55rem; display: inline-block; }
.app-badge.review { color: var(--cyber-neon-orange); border-color: rgba(255,102,0,.4); }

/* ── FAQ ──────────────────────────────────────────────── */
.faq-list { margin-top: var(--sp-md); display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; align-items: start; }
.faq-list details { background: var(--cyber-bg-card); border: 1px solid var(--cyber-border-color); }
.faq-list details[open] { border-color: var(--cyber-neon-pink); }
.faq-list summary { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.3rem; cursor: pointer;
    list-style: none; font-weight: 600; font-size: 1.05rem; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary .svc-plus { margin-left: auto; width: 1.7rem; height: 1.7rem; font-size: 1.1rem; }
.faq-list details p { padding: 0 1.3rem 1.1rem; margin: 0; color: var(--cyber-text-secondary); }

/* ── КОНТАКТ / ФОРМА (порт 1:1) ───────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-lg); align-items: start; }
.contact-alts p { font-family: var(--cyber-font-mono); font-size: .95rem; margin-bottom: .5em; }
.cyber-form { display: flex; flex-direction: column; gap: var(--sp-sm); position: relative;
    background: var(--cyber-bg-secondary); border: 1px solid var(--cyber-border-color);
    padding: var(--sp-md); }
.cyber-form-group { display: flex; flex-direction: column; gap: .5rem; }
.cyber-label { font-family: var(--cyber-font-mono); font-size: .8rem; color: var(--cyber-text-secondary);
    text-transform: uppercase; letter-spacing: .1em; }
.cyber-required { color: var(--cyber-neon-pink); }
.cyber-input, .cyber-textarea { width: 100%; padding: .875rem 1rem; font-family: var(--cyber-font-body);
    font-size: 1rem; color: var(--cyber-text-primary); background: rgba(0,0,0,.3);
    border: 1px solid var(--cyber-border-color); transition: var(--tr-fast); }
.cyber-input::placeholder, .cyber-textarea::placeholder { color: var(--cyber-text-muted);
    font-family: var(--cyber-font-mono); font-size: .85rem; }
.cyber-input:focus, .cyber-textarea:focus { outline: none; border-color: var(--cyber-neon-cyan);
    box-shadow: 0 0 15px rgba(0,255,255,.2); }
.cyber-textarea { resize: vertical; min-height: 110px; }
.cyber-modal-tag { display: inline-block; align-self: flex-start; font-family: var(--cyber-font-mono); font-size: .75rem;
    color: var(--cyber-neon-cyan); background: rgba(0,255,255,.1); padding: .25rem .75rem;
    border: 1px solid rgba(0,255,255,.3); margin: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-note { font-family: var(--cyber-font-mono); font-size: .78rem; color: var(--cyber-text-muted); margin: 0; }
.form-status { font-family: var(--cyber-font-mono); font-size: .9rem; color: var(--cyber-neon-green); margin: 0; }
.form-status:empty { display: none; }
.form-status.error { color: var(--cyber-neon-orange); }
.form-consent { font-size: .8rem; color: var(--cyber-text-muted); margin: 0; }
.form-consent a { color: var(--cyber-text-secondary); border-bottom: 1px solid rgba(255,255,255,.3); }

/* ── ФУТЕР ────────────────────────────────────────────── */
.footer { position: relative; z-index: var(--z-content); border-top: 1px solid var(--cyber-border-color); }
.cyber-marquee { overflow: hidden; background: var(--cyber-bg-secondary);
    border-bottom: 1px solid var(--cyber-border-color); padding: var(--sp-sm) 0; }
.cyber-marquee-track { display: flex; align-items: center; gap: 3rem; white-space: nowrap; width: max-content;
    animation: cyber-marquee 30s linear infinite; }
.cyber-marquee-track span { font-family: var(--cyber-font-display); font-size: .85rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .2em; color: var(--cyber-text-muted); }
.cyber-marquee-dot { color: var(--cyber-neon-pink) !important; }
@keyframes cyber-marquee { 0% { transform: translate(0); } to { transform: translate(-50%); } }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--sp-sm); padding-top: var(--sp-md); padding-bottom: var(--sp-md); }
.footer-status { font-family: var(--cyber-font-mono); font-size: .75rem; color: var(--cyber-text-muted); margin: .6rem 0 0;
    display: flex; align-items: center; gap: .5rem; }
.footer-sep { color: var(--cyber-neon-pink); }
.cyber-status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.cyber-status-dot.cyber-status-online { background: var(--cyber-neon-green);
    box-shadow: 0 0 10px var(--cyber-neon-green); animation: cyber-status-pulse 2s ease-in-out infinite; }
@keyframes cyber-status-pulse { 0%, to { opacity: 1; } 50% { opacity: .5; } }
.footer-links { display: flex; flex-wrap: wrap; gap: 1rem; }
.cyber-link { font-family: var(--cyber-font-mono); font-size: .85rem; color: var(--cyber-text-secondary);
    padding: .6rem 0; display: inline-block; }
.cyber-link:hover { color: var(--cyber-neon-pink); padding-left: .5rem; text-shadow: none; }
.footer-copy { font-family: var(--cyber-font-mono); font-size: .78rem; color: var(--cyber-text-muted); margin: 0; width: 100%; }

/* ── адаптив ──────────────────────────────────────────── */
/* средние экраны: шапка ужимается, но телефон остаётся */
@media (max-width: 1400px) and (min-width: 861px) {
    .cyber-nav-index { display: none; }
    .cyber-nav-link { font-size: .85rem; padding: .4rem .45rem; }
    .nav-phone-label { display: none; }
    .cyber-nav-phone { padding: .15rem .7rem; }
    .nav-phone-num { font-size: .9rem; }
}

@media (max-width: 1020px) {
    .proof-grid { grid-template-columns: repeat(2, 1fr); }
    .steps { grid-template-columns: repeat(2, 1fr) repeat(2, 1fr); grid-template-columns: repeat(2, 1fr); }
    .why-grid, .clients-grid { grid-template-columns: 1fr 1fr; }
    .price-grid { grid-template-columns: 1fr; }
    .about-grid { grid-template-columns: 300px 1fr; gap: var(--sp-md); }
}
@media (max-width: 860px) {
    section { padding: var(--sp-lg) 0; }
    .cyber-nav-links { position: fixed; top: 56px; right: 0; left: 0; z-index: calc(var(--z-nav) + 10);
        flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 1rem 1rem;
        background: #0a0012;
        border-bottom: 1px solid var(--cyber-border-color);
        box-shadow: 0 20px 40px rgba(0, 0, 0, .6);
        transform: translateY(-130%); transition: transform var(--tr-normal); }
    .cyber-nav-links.open { transform: translateY(0); }
    .cyber-nav-link { padding: .8rem .5rem; border-bottom: 1px solid rgba(255,0,255,.1); }
    .cyber-nav-cta { margin: .8rem 0 0; justify-content: center; }
    .cyber-burger { display: flex; order: 10; }
    .cyber-nav-cta.nav-cta-mobile { display: flex; }
    .cyber-nav-tg { width: 40px; height: 36px; }
    .cyber-nav-phone { margin-left: auto; border-left: none; padding: .15rem .3rem; }
    .nav-phone-label { display: none; }
    .nav-phone-num { font-size: .82rem; }
    .cyber-logo-text { font-size: 1rem; }
    .hero.has-scrub { height: auto; }
    .hero-sticky { position: relative; }
    .hero-inner { padding-top: 6rem; }
    .hero-veil { background: linear-gradient(0deg, var(--cyber-bg-primary) 0%, rgba(10,0,18,.75) 60%, rgba(10,0,18,.6) 100%); }
    .svc-body { grid-template-columns: 1fr; gap: var(--sp-sm); }
    .case-grid { grid-template-columns: 1fr; }
    .why-grid, .clients-grid { grid-template-columns: 1fr; }
    .steps { grid-template-columns: 1fr; }
    .clients-facts { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; gap: var(--sp-md); }
    .about-grid { grid-template-columns: 1fr; }
    .about-photo { max-width: 340px; }
    .divider.has-scrub { height: auto; }
    .divider.has-scrub .divider-sticky { position: relative; height: auto; }
    .divider-sticky { min-height: 24vh; }
    .divider-media { display: none; }
    .case-metric { min-width: 5.5rem; font-size: .95rem; }
    .proof-num { font-size: 1.6rem; }
    .faq-list { grid-template-columns: 1fr; }
    .footer-links { gap: 1.2rem; }
    [data-animate].animated { animation-duration: .25s; }
}
@media (max-width: 560px) {
    .cyber-nav-tg { display: none; } /* на узких экранах: лого + телефон + бургер */
    .cyber-nav-lang span { display: none; }
    .cyber-nav-lang { padding: .35rem .45rem; }
}
@media (max-width: 480px) {
    .proof-grid { grid-template-columns: 1fr; }
    .hero-cta .cyber-btn { width: 100%; }
}

/* ── reduced motion ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .cyber-shape, .cyber-hero-grid-lines, .cyber-marquee-track, .hero-hint-arrow,
    .cyber-logo-text::after, .cyber-title-glitch::before, .cyber-title-glitch::after,
    .cyber-status-dot.cyber-status-online { animation: none !important; }
    [data-animate] { opacity: 1 !important; animation: none !important; }
    * { transition-duration: .01ms !important; }
}