/* ==========================================================================
   KhvWeb — базовая тема поверх Tailwind CDN
   ========================================================================== */

html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: #f5f7fb;
  color: #0f172a;
}
.display { font-family: 'Playfair Display', ui-serif, Georgia, serif; letter-spacing: -.02em; }

/* якоря не заезжают под sticky-шапку */
[id] { scroll-margin-top: 96px; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

/* ---------------------- Аккордеон FAQ / болей ---------------------------- */
.acc { border-radius: 1.5rem; background: #fff; box-shadow: 0 10px 30px rgba(15,23,42,.06); overflow: hidden; }
.acc + .acc { margin-top: .75rem; }
.acc > summary { display: flex; align-items: flex-start; gap: 1rem; padding: 1.35rem 1.6rem; font-weight: 700; color: #0f172a; }
.acc > summary .acc-ico { margin-left: auto; flex-shrink: 0; display: grid; place-items: center; height: 2rem; width: 2rem; border-radius: 9999px; background: #f5f7fb; color: #94a3b8; transition: .25s; }
.acc[open] > summary .acc-ico { background: #2f7cf6; color: #fff; transform: rotate(45deg); }
.acc > .acc-body { padding: 0 1.6rem 1.5rem; color: #64748b; line-height: 1.7; font-size: .95rem; }

/* ---------------------- Таблицы сравнения -------------------------------- */
.cmp { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .92rem; }
.cmp th, .cmp td { padding: 1rem 1.25rem; text-align: left; border-bottom: 1px solid #eef1f6; vertical-align: top; }
.cmp thead th { background: #fff; font-weight: 700; color: #0f172a; white-space: nowrap; }
.cmp tbody tr:hover td { background: #fbfcfe; }
.cmp .hi { background: rgba(47,124,246,.05) !important; box-shadow: inset 3px 0 0 #2f7cf6; }
.cmp thead th.hi { background: rgba(47,124,246,.09) !important; border-radius: 1.25rem 1.25rem 0 0; color: #2f7cf6; }
.cmp .yes { color: #10b981; font-weight: 700; }
.cmp .no  { color: #cbd5e1; font-weight: 700; }

/* ---------------------- Плашка-«полоса» технологий ----------------------- */
.marquee { display: flex; gap: 3rem; width: max-content; animation: khv-marquee 32s linear infinite; }
@keyframes khv-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-mask { mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }

/* ---------------------- Sticky-поднавигация страницы услуги -------------- */
.subnav { position: sticky; top: 76px; z-index: 40; }
.subnav a.active { color: #2f7cf6; background: #eff6ff; }

/* ---------------------- Статья блога (prose) ---------------------------- */
.prose-khv { font-size: 1.05rem; line-height: 1.8; color: #334155; }
.prose-khv > * + * { margin-top: 1.15rem; }
.prose-khv h2 { font-family: 'Playfair Display', serif; font-size: 1.9rem; font-weight: 900; color: #0f172a; margin-top: 2.75rem; letter-spacing: -.02em; }
.prose-khv h3 { font-size: 1.25rem; font-weight: 800; color: #0f172a; margin-top: 2rem; }
.prose-khv ul, .prose-khv ol { padding-left: 1.35rem; }
.prose-khv ul { list-style: none; padding-left: 0; }
.prose-khv ul > li { position: relative; padding-left: 1.9rem; }
.prose-khv ul > li + li { margin-top: .6rem; }
.prose-khv ul > li::before {
  content: ''; position: absolute; left: .35rem; top: .62rem; height: .55rem; width: .55rem;
  border-radius: 9999px; background: #2f7cf6;
}
.prose-khv ol { list-style: decimal; }
.prose-khv ol > li + li { margin-top: .6rem; }
.prose-khv ol > li::marker { color: #2f7cf6; font-weight: 700; }
.prose-khv strong { color: #0f172a; font-weight: 700; }
.prose-khv a { color: #2f7cf6; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.prose-khv blockquote {
  border-left: 4px solid #2f7cf6; background: #fff; border-radius: 0 1.25rem 1.25rem 0;
  padding: 1.25rem 1.5rem; font-size: 1.05rem; color: #0f172a; font-weight: 500;
}
.prose-khv table { width: 100%; border-collapse: collapse; font-size: .92rem; background: #fff; border-radius: 1rem; overflow: hidden; }
.prose-khv th, .prose-khv td { padding: .85rem 1rem; border-bottom: 1px solid #eef1f6; text-align: left; }
.prose-khv th { background: #f8fafc; font-weight: 700; }
.prose-khv .note {
  background: #eff6ff; border-radius: 1.25rem; padding: 1.25rem 1.5rem; font-size: .95rem; color: #1e3a8a;
}

/* ---------------------- Мелкие утилиты ---------------------------------- */
.grad-blue { background: linear-gradient(135deg, #eff6ff 0%, #ffffff 55%, #f5f7fb 100%); }
.grad-dark { background: radial-gradient(120% 120% at 15% 0%, #1e3a8a 0%, #0f172a 45%, #0b1220 100%); }
.grad-violet { background: radial-gradient(120% 120% at 15% 0%, #4c1d95 0%, #1e1b4b 50%, #0f172a 100%); }
.card-hover { transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 20px 60px rgba(15,23,42,.08); }
.blob { position: absolute; border-radius: 9999px; filter: blur(80px); opacity: .5; z-index: 0; pointer-events: none; }
.mobile-cta { position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; }

#hero_section {
    background-image: url(/assets/img/mainBG.png);
    background-position: right top;
    background-repeat: no-repeat;
    background-size: contain;
}

/* Печать */
@media print { header, footer, .mobile-cta { display: none !important; } }