/* ============================================================
   kp.css — B2B-презентация OCC/WAY (/kp). БЕЛАЯ премиум-тема, неон.
   Строится поверх legal-pages (.lp-*) — TOC + нумерованные секции.
   Добавляет богатые блоки: метрики, периметр, тарифы, финмодель, роли.
   Префикс: kp-
   ============================================================ */

/* ── Жёсткий сброс хрома (грузится в head после kp.css всё равно перебьём
      inline-критиком в шаблоне). Здесь — базовые токены KP. ── */
.kp-page { --kp-ink:#0f172a; --kp-mut:#64748b; --kp-vio:#7c3aed; --kp-vio2:#6366f1;
    --kp-line:#e2e8f0; --kp-soft:#f8fafc; }

/* ── HERO (светлый, премиум, неон-подсветка) ── */
.kp-hero {
    position: relative; overflow: hidden; text-align: center;
    padding: 110px 24px 84px;
    background:
        radial-gradient(900px 460px at 18% -10%, rgba(124,58,237,0.16), transparent 60%),
        radial-gradient(800px 420px at 88% 0%, rgba(99,102,241,0.14), transparent 58%),
        linear-gradient(180deg, #ffffff 0%, #f7f7ff 55%, #ffffff 100%);
    border-bottom: 1px solid var(--kp-line);
}
.kp-hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(99,102,241,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99,102,241,0.05) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(circle at 50% 24%, #000 0%, transparent 72%);
}
.kp-hero-inner { position: relative; z-index: 1; max-width: 980px; margin: 0 auto; }
.kp-eyebrow {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px;
    padding: 8px 18px; border-radius: 999px; font-size: 0.8rem; font-weight: 800;
    letter-spacing: 0.08em; text-transform: uppercase; color: #4338ca;
    background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(167,139,250,0.07));
    border: 1px solid rgba(99,102,241,0.24);
    box-shadow: 0 8px 26px rgba(99,102,241,0.12);
}
.kp-eyebrow i { color: #6366f1; }
.kp-h1 {
    font-size: clamp(2.3rem, 6vw, 4rem); font-weight: 900; line-height: 1.05;
    letter-spacing: -0.03em; margin: 0 0 18px; color: #0f172a;
}
.kp-h1 .kp-grad {
    background: linear-gradient(120deg, #4338ca, #7c3aed 45%, #a855f7 80%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.kp-lead { font-size: clamp(1.05rem, 1.7vw, 1.28rem); color: #475569; max-width: 760px;
    margin: 0 auto 30px; line-height: 1.6; }

.kp-hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.kp-btn { display: inline-flex; align-items: center; gap: 9px; padding: 15px 28px;
    border-radius: 14px; font-weight: 800; font-size: 1rem; text-decoration: none;
    transition: transform .16s ease, box-shadow .16s ease; border: 1px solid transparent; }
.kp-btn-primary { color: #fff; background: linear-gradient(135deg, #7c3aed, #6366f1);
    box-shadow: 0 16px 40px rgba(124,58,237,0.34); }
.kp-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 22px 52px rgba(124,58,237,0.46); color: #fff; }
.kp-btn-ghost { color: #4338ca; background: #fff; border-color: #ddd6fe; box-shadow: 0 8px 22px rgba(15,23,42,0.05); }
.kp-btn-ghost:hover { transform: translateY(-3px); background: #f5f3ff; color: #4338ca; }

/* HERO метрики — стеклянные пилюли */
.kp-hero-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 46px; }
.kp-hstat { position: relative; overflow: hidden; min-width: 150px; padding: 18px 24px;
    border-radius: 16px; background: rgba(255,255,255,0.9); border: 1px solid var(--kp-line);
    box-shadow: 0 12px 32px rgba(15,23,42,0.06); }
.kp-hstat::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, #6366f1, #8b5cf6, #a78bfa); }
.kp-hstat-v { font-size: 2rem; font-weight: 900; line-height: 1;
    background: linear-gradient(135deg, #4338ca, #8b5cf6); -webkit-background-clip: text;
    background-clip: text; -webkit-text-fill-color: transparent; }
.kp-hstat-l { font-size: 0.76rem; color: #64748b; margin-top: 6px; text-transform: uppercase;
    letter-spacing: 0.05em; font-weight: 700; }

/* ── Метрик-грид внутри секций ── */
.kp-metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin: 8px 0 6px; }
.kp-metric { text-align: center; padding: 22px 16px; border-radius: 16px; background: #fff;
    border: 1px solid #ece9fb; box-shadow: 0 8px 22px rgba(124,58,237,0.06); }
.kp-metric-v { font-size: 1.9rem; font-weight: 900; background: linear-gradient(135deg,#4338ca,#8b5cf6);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; }
.kp-metric-l { font-size: 0.84rem; color: #64748b; margin-top: 8px; font-weight: 600; line-height: 1.4; }

/* ── Карточки-фичи (внутри lp-content) ── */
.kp-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin: 6px 0; }
.kp-card { position: relative; overflow: hidden; border-radius: 18px; padding: 24px; background: #fff;
    border: 1px solid #ece9fb; box-shadow: 0 10px 28px rgba(124,58,237,0.06);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.kp-card::before { content: ""; position: absolute; left:0; top:0; right:0; height:3px;
    background: linear-gradient(90deg,#6366f1,#8b5cf6,#a78bfa); opacity:0; transition:opacity .18s; }
.kp-card:hover { transform: translateY(-5px); border-color: #ddd6fe; box-shadow: 0 22px 46px rgba(124,58,237,0.16); }
.kp-card:hover::before { opacity: 1; }
.kp-card-ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
    font-size: 1.4rem; color: #fff; background: linear-gradient(135deg,#7c3aed,#6366f1);
    box-shadow: 0 10px 24px rgba(124,58,237,0.30); margin-bottom: 14px; }
.kp-card h4 { margin: 0 0 7px; font-size: 1.06rem; font-weight: 800; color: #0f172a; }
.kp-card p { margin: 0; font-size: 0.9rem; color: #64748b; line-height: 1.5; }

/* ── Роли: компактная сетка карточек со скриншотом ── */
.kp-roles { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; margin: 6px 0; }
.kp-rolec { border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid #ece9fb;
    box-shadow: 0 12px 30px rgba(15,23,42,0.07); transition: transform .18s ease, box-shadow .18s ease; }
.kp-rolec:hover { transform: translateY(-4px); box-shadow: 0 22px 48px rgba(124,58,237,0.16); }
.kp-rolec-shotwrap { position: relative; background: #0e0e20; }
.kp-rolec-bar { display: flex; align-items: center; gap: 6px; padding: 9px 14px;
    background: linear-gradient(135deg,#15152b,#12122a); }
.kp-rolec-bar i { color: #c4b5fd; }
.kp-rolec-dot { width: 8px; height: 8px; border-radius: 50%; }
.kp-rolec-dot.r{background:#ff5f57}.kp-rolec-dot.y{background:#febc2e}.kp-rolec-dot.g{background:#28c840}
.kp-rolec-bar span { color: #e7e7f5; font-weight: 800; font-size: 0.84rem; margin-left: auto; }
.kp-rolec-img { display: block; width: 100%; height: 200px; object-fit: cover; object-position: top center; }
.kp-rolec-body { padding: 18px 20px; }
.kp-rolec-body h4 { margin: 0 0 6px; font-size: 1.04rem; font-weight: 800; color: #0f172a; }
.kp-rolec-body p { margin: 0 0 12px; font-size: 0.88rem; color: #64748b; line-height: 1.5; }
.kp-rolec-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.kp-rolec-feats li { display: flex; gap: 8px; font-size: 0.84rem; color: #334155; line-height: 1.4; }
.kp-rolec-feats li i { color: #7c3aed; flex-shrink: 0; margin-top: 2px; }

/* ── Тарифы ── */
.kp-tiers { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin: 8px 0; align-items: stretch; }
.kp-tier { position: relative; border-radius: 20px; padding: 26px 22px; background: #fff;
    border: 1px solid #ece9fb; box-shadow: 0 10px 28px rgba(124,58,237,0.06); display: flex; flex-direction: column;
    transition: transform .18s ease, box-shadow .18s ease; }
.kp-tier:hover { transform: translateY(-4px); box-shadow: 0 22px 48px rgba(124,58,237,0.16); }
.kp-tier--pop { border-color: #8b5cf6; box-shadow: 0 18px 44px rgba(124,58,237,0.20); }
.kp-tier-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(135deg,#7c3aed,#6366f1); color: #fff; font-size: 0.68rem; font-weight: 800;
    padding: 5px 13px; border-radius: 999px; letter-spacing: 0.04em; white-space: nowrap; }
.kp-tier-name { font-size: 1.1rem; font-weight: 900; color: #0f172a; }
.kp-tier-tag { font-size: 0.78rem; color: #94a3b8; margin: 2px 0 12px; }
.kp-tier-price { font-size: 1.6rem; font-weight: 900; background: linear-gradient(135deg,#4338ca,#8b5cf6);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.1; }
.kp-tier-price small { font-size: 0.8rem; font-weight: 700; color: #94a3b8; -webkit-text-fill-color: #94a3b8; }
.kp-tier-impl { font-size: 0.78rem; color: #64748b; margin: 4px 0 14px; }
.kp-tier-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; flex: 1; }
.kp-tier-list li { display: flex; gap: 8px; font-size: 0.84rem; color: #334155; line-height: 1.4; }
.kp-tier-list li i { color: #16a34a; flex-shrink: 0; margin-top: 2px; }
.kp-tier-list li.kp-tier-inh { color: #7c3aed; font-weight: 700; }
.kp-tier-list li.kp-tier-inh i { color: #7c3aed; }
.kp-tier-cta { display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 11px; border-radius: 12px; font-weight: 800; font-size: 0.86rem; text-decoration: none; }
.kp-tier-cta--pay { color: #fff; background: linear-gradient(135deg,#7c3aed,#6366f1); }
.kp-tier-cta--quote { color: #4338ca; background: #f5f3ff; border: 1px solid #ddd6fe; }

/* ── Финмодель: потоки выручки ── */
.kp-rev { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; margin: 6px 0; }
.kp-rev-card { display: grid; grid-template-columns: 52px 1fr; gap: 14px; padding: 20px; border-radius: 16px;
    background: #fff; border: 1px solid #ece9fb; box-shadow: 0 8px 22px rgba(124,58,237,0.06); }
.kp-rev-ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 1.3rem;
    color: #fff; background: linear-gradient(135deg,#16a34a,#22c55e); }
.kp-rev-ic.b { background: linear-gradient(135deg,#7c3aed,#6366f1); }
.kp-rev-ic.c { background: linear-gradient(135deg,#0ea5e9,#38bdf8); }
.kp-rev-ic.d { background: linear-gradient(135deg,#f59e0b,#f97316); }
.kp-rev-card h4 { margin: 0 0 5px; font-size: 1rem; font-weight: 800; color: #0f172a; }
.kp-rev-card p { margin: 0; font-size: 0.86rem; color: #64748b; line-height: 1.5; }
.kp-rev-tag { display: inline-block; margin-top: 8px; font-size: 0.72rem; font-weight: 800;
    padding: 3px 10px; border-radius: 999px; background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
.kp-rev-tag.once { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }

/* ── ROI / экономика клиента — две колонки до/после ── */
.kp-roi { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 8px 0; }
.kp-roi-col { border-radius: 18px; padding: 24px; border: 1px solid; }
.kp-roi-bad { background: linear-gradient(180deg,#fff5f5,#fff); border-color: #fecaca; }
.kp-roi-good { background: linear-gradient(180deg,#f0fdf4,#fff); border-color: #bbf7d0; }
.kp-roi-h { font-weight: 900; font-size: 1.05rem; margin-bottom: 14px; display: flex; align-items: center; gap: 9px; }
.kp-roi-bad .kp-roi-h { color: #dc2626; } .kp-roi-good .kp-roi-h { color: #16a34a; }
.kp-roi-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.kp-roi-col li { display: flex; gap: 10px; font-size: 0.9rem; color: #334155; line-height: 1.45; }
.kp-roi-col li i { flex-shrink: 0; margin-top: 2px; }
.kp-roi-bad li i { color: #ef4444; } .kp-roi-good li i { color: #22c55e; }

/* ── Цепочка процесса (эксклюзив) ── */
.kp-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0; }
.kp-chain-node { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 12px;
    background: linear-gradient(135deg, rgba(124,58,237,0.08), rgba(99,102,241,0.05));
    border: 1px solid #e9e3fb; color: #4338ca; font-weight: 700; font-size: 0.88rem; }
.kp-chain-node b { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center;
    background: linear-gradient(135deg,#7c3aed,#6366f1); color: #fff; font-size: 0.72rem; }
.kp-chain-sep { color: #c4b5fd; font-size: 1.1rem; }

/* ── Аддоны ── */
.kp-addons { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 6px 0; }
.kp-addon { border-radius: 14px; padding: 18px; background: #fff; border: 1px solid #ece9fb; }
.kp-addon-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-size: 1.05rem;
    background: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(99,102,241,0.08)); color: #7c3aed; margin-bottom: 9px; }
.kp-addon h4 { margin: 0 0 4px; font-size: 0.92rem; font-weight: 800; color: #0f172a; }
.kp-addon p { margin: 0 0 8px; font-size: 0.78rem; color: #64748b; line-height: 1.4; }
.kp-addon-price { font-size: 0.82rem; font-weight: 800; color: #7c3aed; }

/* ── Возможности в деталях — группы фич ── */
.kp-fgroups { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; margin: 8px 0 6px; }
.kp-fgroup { position: relative; border-radius: 18px; padding: 20px 22px; background: #fff;
    border: 1px solid #ece9fb; box-shadow: 0 10px 28px rgba(124,58,237,0.06);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.kp-fgroup:hover { transform: translateY(-4px); border-color: #ddd6fe; box-shadow: 0 22px 46px rgba(124,58,237,0.15); }
.kp-fgroup-h { display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
    padding-bottom: 12px; border-bottom: 1px dashed #ece9fb; }
.kp-fgroup-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0;
    font-size: 1.18rem; color: #fff; background: linear-gradient(135deg,#7c3aed,#6366f1);
    box-shadow: 0 8px 20px rgba(124,58,237,0.28); }
.kp-fgroup-h h4 { margin: 0; font-size: 1.05rem; font-weight: 800; color: #0f172a; }
.kp-fitems { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.kp-fitems li { position: relative; padding-left: 24px; font-size: 0.88rem; color: #334155; line-height: 1.45; }
.kp-fitems li::before { content: ""; position: absolute; left: 6px; top: 7px; width: 7px; height: 7px;
    border-radius: 50%; background: linear-gradient(135deg,#7c3aed,#6366f1); box-shadow: 0 0 0 3px rgba(124,58,237,0.10); }

/* ── Reveal + адаптив ── */
.kp-reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); }
.kp-reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .kp-reveal { opacity:1; transform:none; } }

/* ── Боли → решения (полная карта) ── */
.kp-ps { display: grid; gap: 10px; margin: 8px 0 6px; }
.kp-ps-item { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: 14px; overflow: hidden;
    border: 1px solid #ece9fb; box-shadow: 0 8px 22px rgba(124,58,237,0.05); background: #fff; }
.kp-ps-pain, .kp-ps-sol { display: flex; gap: 9px; padding: 14px 16px; font-size: 0.88rem; line-height: 1.45; }
.kp-ps-pain { background: linear-gradient(180deg,#fff5f5,#fff); color: #7f1d1d; border-right: 1px solid #fde2e2; }
.kp-ps-sol { background: linear-gradient(180deg,#f0fdf4,#fff); color: #14532d; }
.kp-ps-pain i { color: #ef4444; flex-shrink: 0; margin-top: 2px; }
.kp-ps-sol i { color: #16a34a; flex-shrink: 0; margin-top: 2px; }

/* ── Живой кейс ── */
.kp-case { border-radius: 22px; padding: 26px; margin: 10px 0 6px; background: #fff;
    border: 1px solid #ece9fb; box-shadow: 0 16px 44px rgba(124,58,237,0.08); }
.kp-case-head { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; margin-bottom: 20px; }
.kp-case-ava { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-size: 1.5rem;
    color: #fff; background: linear-gradient(135deg,#7c3aed,#6366f1); box-shadow: 0 10px 24px rgba(124,58,237,0.30); }
.kp-case-meta h3 { margin: 0 0 4px; font-size: 1.08rem; font-weight: 800; color: #0f172a; }
.kp-case-meta p { margin: 0; font-size: 0.84rem; color: #64748b; }
.kp-case-badge { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px;
    font-size: 0.76rem; font-weight: 800; color: #4338ca; background: #f5f3ff; border: 1px solid #ddd6fe; white-space: nowrap; }
.kp-case-before, .kp-case-after { border-radius: 16px; padding: 18px 20px; margin-bottom: 18px; }
.kp-case-before { background: linear-gradient(180deg,#fff5f5,#fff); border: 1px solid #fecaca; }
.kp-case-after { background: linear-gradient(180deg,#f0fdf4,#fff); border: 1px solid #bbf7d0; }
.kp-case-before h4, .kp-case-after h4 { margin: 0 0 10px; font-size: 1rem; font-weight: 900; display: flex; align-items: center; gap: 9px; }
.kp-case-before h4 { color: #dc2626; } .kp-case-after h4 { color: #16a34a; }
.kp-case-before p { margin: 0; font-size: 0.9rem; color: #475569; line-height: 1.65; }
.kp-case-flow { display: grid; gap: 10px; margin-bottom: 18px; }
.kp-case-step { display: grid; grid-template-columns: 34px 1fr; gap: 13px; align-items: start; padding: 14px 16px;
    border-radius: 14px; background: linear-gradient(135deg, rgba(124,58,237,0.05), rgba(99,102,241,0.03));
    border: 1px solid #efeafd; }
.kp-case-num { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 900;
    font-size: 0.95rem; color: #fff; background: linear-gradient(135deg,#7c3aed,#6366f1); box-shadow: 0 8px 18px rgba(124,58,237,0.28); }
.kp-case-step h5 { margin: 0 0 3px; font-size: 0.96rem; font-weight: 800; color: #0f172a; }
.kp-case-step p { margin: 0; font-size: 0.85rem; color: #64748b; line-height: 1.5; }
.kp-case-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.kp-case-stat { text-align: center; padding: 16px 12px; border-radius: 14px; background: #fff; border: 1px solid #bbf7d0; }
.kp-case-stat-v { font-size: 1.5rem; font-weight: 900; line-height: 1.1; background: linear-gradient(135deg,#15803d,#22c55e);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.kp-case-stat-l { font-size: 0.78rem; color: #64748b; margin-top: 6px; line-height: 1.4; }
.kp-case-quote { position: relative; padding: 22px 24px 22px 56px; border-radius: 16px;
    background: linear-gradient(135deg,#15152b,#1e1b3a); color: #e7e7f5; }
.kp-case-quote > i { position: absolute; left: 20px; top: 18px; font-size: 1.6rem; color: #a78bfa; }
.kp-case-quote p { margin: 0 0 10px; font-size: 0.98rem; line-height: 1.6; font-style: italic; color: #f1f0fb; }
.kp-case-quote span { font-size: 0.82rem; color: #b9b6d6; font-weight: 700; }

@media (max-width: 980px) {
    .kp-metrics, .kp-tiers { grid-template-columns: 1fr 1fr; }
    .kp-cards, .kp-roles, .kp-rev, .kp-roi, .kp-addons { grid-template-columns: 1fr 1fr; }
    .kp-fgroups { grid-template-columns: 1fr 1fr; }
    /* TOC → горизонтальная лента-чипы на планшете/мобиле */
    .lp-toc { position: static; max-height: none; padding: 12px; border-radius: 14px; }
    .lp-toc-title { display: none; }
    .lp-toc-list { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch;
        padding-bottom: 4px; scrollbar-width: thin; }
    .lp-toc-list li { flex: 0 0 auto; }
    .lp-toc-list a { white-space: nowrap; border-left: none; border: 1px solid #e9e3fb; border-radius: 999px;
        padding: 8px 14px; margin: 0; font-size: 0.82rem; }
    .lp-toc-list a.is-active { border-color: #8b5cf6; background: #f5f3ff; }
}
@media (max-width: 640px) {
    .kp-hero { padding: 56px 16px 44px; }
    .kp-h1 { font-size: clamp(1.7rem, 8vw, 2.3rem); }
    .kp-lead { font-size: 1rem; }
    .kp-hero-cta { flex-direction: column; }
    .kp-hero-cta .kp-btn { width: 100%; justify-content: center; }
    .kp-hero-stats { gap: 10px; }
    .kp-hstat { min-width: calc(50% - 5px); flex: 1 1 calc(50% - 5px); padding: 14px 12px; }
    .kp-hstat-v { font-size: 1.6rem; }
    .kp-metrics, .kp-cards, .kp-roles, .kp-tiers, .kp-rev, .kp-roi, .kp-addons { grid-template-columns: 1fr; }
    .kp-fgroups { grid-template-columns: 1fr; }
    /* боли → решения в одну колонку */
    .kp-ps-item { grid-template-columns: 1fr; }
    .kp-ps-pain { border-right: none; border-bottom: 1px solid #fde2e2; }
    /* кейс */
    .kp-case { padding: 18px; }
    .kp-case-head { grid-template-columns: 48px 1fr; }
    .kp-case-ava { width: 48px; height: 48px; font-size: 1.3rem; }
    .kp-case-badge { grid-column: 1 / -1; justify-self: start; }
    .kp-case-stats { grid-template-columns: 1fr 1fr; }
    .kp-case-quote { padding: 18px 18px 18px 18px; }
    .kp-case-quote > i { position: static; display: block; margin-bottom: 8px; }
    .kp-rev-card { grid-template-columns: 1fr; }
    .kp-rev-ic { margin-bottom: 4px; }
}


/* ============================================================
   v7.0 — анти-overflow (мобайл) + современный тёмный hero «премиум»
   Этот блок идёт последним и намеренно перебивает базовые правила.
   ============================================================ */

/* ── 1. Жёсткое ограничение ширины: ничего не уезжает за экран ── */
.lp-page.kp-page { width: 100%; max-width: 100%; overflow-x: clip; }
.kp-page * { box-sizing: border-box; }
/* grid-элементы лэйаута обязаны уметь сжиматься (фикс min-width:auto) */
.kp-page .lp-layout { min-width: 0; max-width: 100%; }
.kp-page .lp-layout > * { min-width: 0; }
.kp-page .lp-content { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.kp-page .lp-content img { max-width: 100%; height: auto; }
/* любые внутренние сетки не должны вылезать */
.kp-page .kp-cards, .kp-page .kp-roles, .kp-page .kp-tiers, .kp-page .kp-rev,
.kp-page .kp-roi, .kp-page .kp-addons, .kp-page .kp-fgroups, .kp-page .kp-metrics,
.kp-page .kp-ps, .kp-page .kp-case-stats { max-width: 100%; }
.kp-page .kp-ps-item, .kp-page .kp-rev-card, .kp-page .kp-case-head,
.kp-page .kp-case-step, .kp-page .kp-fgroup { min-width: 0; }

/* ── 2. HERO — тёмная драматичная тема с авророй ── */
.kp-hero {
    padding: 120px 24px 92px;
    background:
        radial-gradient(1200px 620px at 12% -18%, rgba(124,58,237,0.50), transparent 60%),
        radial-gradient(1000px 540px at 96% -8%, rgba(56,189,248,0.30), transparent 55%),
        radial-gradient(900px 560px at 50% 128%, rgba(236,72,153,0.28), transparent 60%),
        linear-gradient(180deg, #0a0a1a 0%, #11102b 55%, #0c0b22 100%);
    border-bottom: 1px solid rgba(124,58,237,0.28);
}
.kp-hero::before {
    background-image:
        linear-gradient(rgba(148,163,255,0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148,163,255,0.07) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(circle at 50% 18%, #000 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(circle at 50% 18%, #000 0%, transparent 70%);
}
/* движущиеся световые пятна (аврора) */
.kp-hero::after {
    content: ""; position: absolute; inset: -20% -10% auto -10%; height: 80%;
    pointer-events: none; z-index: 0; opacity: 0.7; filter: blur(60px);
    background:
        radial-gradient(420px 300px at 20% 30%, rgba(139,92,246,0.55), transparent 70%),
        radial-gradient(380px 280px at 80% 20%, rgba(56,189,248,0.40), transparent 70%),
        radial-gradient(360px 260px at 60% 70%, rgba(236,72,153,0.35), transparent 70%);
    animation: kpAurora 16s ease-in-out infinite alternate;
}
@keyframes kpAurora {
    0%   { transform: translate3d(-3%, -2%, 0) scale(1); }
    50%  { transform: translate3d(4%, 3%, 0) scale(1.08); }
    100% { transform: translate3d(-2%, 4%, 0) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) { .kp-hero::after { animation: none; } }

.kp-eyebrow {
    color: #e6deff; background: linear-gradient(135deg, rgba(139,92,246,0.28), rgba(56,189,248,0.16));
    border: 1px solid rgba(167,139,250,0.45);
    box-shadow: 0 10px 30px rgba(124,58,237,0.30), inset 0 1px 0 rgba(255,255,255,0.10);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.kp-eyebrow i { color: #c4b5fd; }
.kp-h1 { color: #ffffff; text-shadow: 0 2px 40px rgba(124,58,237,0.30); }
.kp-h1 .kp-grad {
    background: linear-gradient(110deg, #c4b5fd 0%, #a78bfa 35%, #7dd3fc 75%, #67e8f9 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.kp-lead { color: #c8cbe8; }

.kp-btn-primary {
    background: linear-gradient(135deg, #8b5cf6, #6366f1 55%, #38bdf8);
    box-shadow: 0 18px 46px rgba(99,102,241,0.50);
}
.kp-btn-primary:hover { box-shadow: 0 24px 60px rgba(56,189,248,0.50); }
.kp-btn-ghost {
    color: #ffffff; background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.22);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: none;
}
.kp-btn-ghost:hover { background: rgba(255,255,255,0.16); color: #fff; }

/* стеклянные пилюли метрик на тёмном */
.kp-hstat {
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 16px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.kp-hstat-v { background: linear-gradient(135deg, #c4b5fd, #7dd3fc); -webkit-background-clip: text;
    background-clip: text; -webkit-text-fill-color: transparent; }
.kp-hstat-l { color: #aab0d6; }

/* доверительная строка-чипы под метриками */
.kp-hero-trust {
    position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center;
    gap: 10px; margin-top: 26px;
}
.kp-hero-trust span {
    display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px;
    font-size: 0.82rem; font-weight: 700; color: #d7d9f0;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
}
.kp-hero-trust i { color: #a78bfa; }

/* ── 3. Полировка контента под современность ── */
.kp-page .lp-content {
    border-radius: 28px;
    box-shadow: 0 30px 80px rgba(15,23,42,0.10), 0 2px 0 rgba(255,255,255,0.6) inset;
}
.kp-page .lp-content h2 .lp-h2-num {
    background: linear-gradient(135deg, #7c3aed, #6366f1);
    box-shadow: 0 10px 24px rgba(124,58,237,0.35);
}
/* «звезда» живого кейса — золочёный бейдж */
.kp-page #case .lp-h2-num {
    background: linear-gradient(135deg, #f59e0b, #f97316);
    box-shadow: 0 10px 24px rgba(245,158,11,0.40);
}
.kp-card, .kp-fgroup, .kp-rolec, .kp-tier { border-radius: 20px; }

/* ── 4. Финальная мобильная подгонка (всё в одну колонку, крупные тапы) ── */
@media (max-width: 980px) {
    .kp-page .lp-layout { display: block; }     /* TOC-лента сверху, контент снизу — без grid-распирания */
    .kp-page .lp-toc { margin-bottom: 16px; }
}
@media (max-width: 640px) {
    .kp-hero { padding: 64px 16px 48px; }
    .kp-hero-inner { max-width: 100%; }
    .kp-h1 { font-size: clamp(1.75rem, 8.5vw, 2.4rem); letter-spacing: -0.02em; }
    .kp-hero-trust { gap: 7px; margin-top: 20px; }
    .kp-hero-trust span { font-size: 0.75rem; padding: 7px 11px; }
    .kp-hstat { min-width: calc(50% - 5px); flex: 1 1 calc(50% - 5px); }
    .kp-page .lp-content { padding: 22px 16px; border-radius: 20px; }
    .kp-ps-item { grid-template-columns: 1fr; }
    .kp-ps-pain { border-right: none; border-bottom: 1px solid #fde2e2; }
    .kp-case-stats { grid-template-columns: 1fr 1fr; }
    .kp-chain { gap: 6px; }
    .kp-chain-node { font-size: 0.8rem; padding: 9px 12px; }
    /* таблица периметра — горизонтальный скролл с подсказкой, не ломает страницу */
    .kp-page .lp-table-wrap { max-width: 100%; }
}
@media (max-width: 380px) {
    .kp-hstat { min-width: 100%; flex: 1 1 100%; }
    .kp-case-stats { grid-template-columns: 1fr; }
}