/* base theme */
/* ==========================================================================
   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; }

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


/* page styles (common) */

  html{scroll-behavior:smooth}
  body{font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;background:#f5f7fb;color:#0f172a}
  .display{font-family:'Playfair Display',serif;letter-spacing:-.02em}
  .blob{position:absolute;border-radius:9999px;filter:blur(80px);opacity:.5;z-index:0;pointer-events:none}
  .no-scrollbar::-webkit-scrollbar{display:none}
  .no-scrollbar{scrollbar-width:none}
  details summary::-webkit-details-marker{display:none}
  details > summary{list-style:none;cursor:pointer}
  [id]{scroll-margin-top:100px}
  /* сетки: длинный контент (таблицы, длинные слова) не должен растягивать страницу по горизонтали */
  .grid > *{min-width:0}
  .prose-khv{overflow-wrap:anywhere}

  /* ===== Типовая шапка ==============================================
     Пропорции взяты из довёрстанного кейса филармонии:
     арт-область 610px, лис 62% с выносом -5%, объект 76%, акценты 28%.
     Слои независимы: объект (z1) → лейблы (z2) → лис (z3).             */
  .hero-layout{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:34px;min-height:610px}
  /* лис и лейблы намеренно выступают за края арт-области — подрезаем по горизонтали,
     чтобы не появлялся скролл (в референсе это делает overflow на секции) */
  .hero-section{overflow-x:clip}
  /* Фон шапки: mainBG.webp прижат вправо, как hero-background.svg в макете */
  .hero-section{position:relative;isolation:isolate}
  .hero-section::before{content:"";position:absolute;inset:24px max(20px,calc((100% - 1360px)/2));z-index:-1;pointer-events:none}
  .hero-art{position:relative;min-width:0;width:100%;height:610px;isolation:isolate}
  .hero-art-object{position:absolute;left:0;top:70px;width:92%;height:auto;z-index:1;
    filter:drop-shadow(0 26px 38px rgba(50,76,117,.16))}
  /* Лейблы текстовые: в отличие от нот в референсе идут ПОВЕРХ лиса (z4),
     иначе на 768–1100px буквы уходят под ухо и слово не читается.
     Размер и позиция — как в референсе (28% ширины, вынос вправо). */
  .hero-art-labels{position:absolute;width:28%;height:auto;right:-96px;top:4px;z-index:4;pointer-events:none;
    filter:drop-shadow(0 2px 5px rgba(15,23,42,.14))}
  .hero-art-fox{position:absolute;width:62%;height:auto;right:-5%;bottom:0;z-index:7;
    filter:drop-shadow(0 12px 12px rgba(35,53,72,.10));pointer-events:none}
  @media(max-width:1100px) and (min-width:1024px){
    .hero-layout{gap:20px}.hero-art{height:530px}
    .hero-art-object{top:82px}.hero-art-fox{width:67%}
  }
  /* лейблы выступают за правый край — не даём им создавать горизонтальный скролл */
  @media(min-width:1024px) and (max-width:1519px){
    .hero-art-labels{right:clamp(-96px,calc((1280px - 100vw)/2 - 16px),0px)}
  }
  @media(max-width:1023px){
    .hero-layout{grid-template-columns:1fr;max-width:780px;gap:12px}
    .hero-art{height:640px;max-width:650px;margin:0 auto}
    .hero-art-object{top:104px;width:88%}
    .hero-art-fox{width:59%;right:-1%}
    .hero-art-labels{right:1%;width:27%}
    /* на узких экранах фон переносим внутрь арт-области, как в макете */
    .hero-section::before{display:none}
    .hero-art::before{content:"";position:absolute;inset:12px 8px 16px;
      background:url('/assets/img/mainBG.webp') right center/contain no-repeat;z-index:0;pointer-events:none}
  }
  @media(max-width:640px){
    .hero-layout{gap:25px;min-height:0}
    .hero-art{height:100vw;max-height:540px}
    .hero-art-object{top:15%;width:92%}
    .hero-art-fox{width:61%;bottom:1%;right:-3%}
    .hero-art-labels{width:29%;right:0;top:0}
  }
  @media(prefers-reduced-motion:reduce){.hero-art-labels{transform:none!important}}

  /* ===== Блоки кейса =================================================
     «Что получил заказчик», «Отзыв», «Хотите такой же результат?».
     Разметка и стили перенесены из довёрстанного кейса филармонии
     (portfolio-filarmoniya-complete), фоны переведены в WebP.          */
  .case-outcomes{width:min(100% - 48px,1280px);margin:0 auto;padding:40px 0 46px}
  .case-outcomes h2,.case-outcomes p,.case-outcomes blockquote{margin:0}
  .case-outcomes img{display:block;max-width:100%}
  .case-outcomes *{box-sizing:border-box}
  .results{background:linear-gradient(120deg,#f6f9ff 0%,#fafcff 48%,#f4f8ff 100%);
    border:1px solid #e9f0ff;border-radius:32px;padding:29px 31px 33px}
  .section-eyebrow{color:#1670ed;font-size:13px;font-weight:800;line-height:1.2}
  .section-title,.cta h2{font-family:'Playfair Display',Georgia,serif;letter-spacing:-.035em;font-weight:900}
  .section-title{margin:12px 0 24px;font-size:clamp(29px,2.7vw,37px);line-height:1.2;color:#111}
  .case-outcomes .result-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:19px}
  .case-outcomes .result-card{display:flex;align-items:center;background:#fff;border-radius:20px;
    padding:19px 14px;gap:15px;min-height:121px;min-width:0;box-shadow:0 12px 26px rgba(38,94,191,.045)}
  .result-icon{height:68px;width:68px;flex:none;display:grid;place-items:center;border-radius:50%}
  .result-icon svg{width:31px;height:31px;stroke-width:1.9}
  .result-icon--blue{background:#e9f0ff;color:#2771ed}
  .result-icon--teal{background:#e5f8f5;color:#2faeaa}
  .result-icon--pink{background:#ffe7f1;color:#ee4d89}
  .result-card strong{font-size:clamp(19px,1.8vw,28px);font-weight:800;line-height:1.15;
    color:#111;white-space:nowrap;letter-spacing:-.04em}
  .result-card p{font-size:clamp(12px,1.04vw,15px);line-height:1.55;color:#283544;margin-top:9px;font-weight:500}
  .review{min-height:217px;padding:36px 42px 31px;display:flex;align-items:flex-start;gap:40px;
    position:relative;isolation:isolate}
  .review-photo{width:124px;height:124px;flex:none;object-fit:cover;border-radius:50%}
  .review-initials{display:grid;place-items:center;background:linear-gradient(135deg,#151a2e,#1e2440);
    color:#fff;font-weight:900;font-size:34px;letter-spacing:-.02em}
  .review blockquote{max-width:780px;position:relative;z-index:2}
  .review blockquote>p{font-size:16px;line-height:1.72;font-weight:500;color:#384659}
  .review footer{margin-top:22px}
  .review footer strong{display:block;font-size:16px;color:#1e2632;margin-bottom:5px}
  .review footer span{font-size:13px;color:#5a6778}
  .review::before{content:"";position:absolute;z-index:-1;inset:0 0 0 40%;
    background:url("/assets/img/review-bg.webp") right center / cover no-repeat;opacity:.68;pointer-events:none}
  .cta{position:relative;isolation:isolate;min-height:208px;overflow:visible;
    background:url('/assets/img/cta-bg.webp') center center / 100% 100% no-repeat;
    border:1px solid #dce8ff;border-radius:30px;box-shadow:0 10px 24px rgba(25,80,186,.045);
    display:flex;align-items:center;padding:30px 52px}
  .cta-copy{position:relative;z-index:2;max-width:56%}
  .cta h2{font-size:clamp(30px,3.2vw,42px);color:#111;line-height:1.15;white-space:nowrap}
  .cta p{font-size:15px;color:#526071;font-weight:500;margin:15px 0 20px}
  .cta-button{width:max-content;min-width:204px;gap:12px;font-size:14px;line-height:20px}
  .cta-button svg{height:16px;width:16px}
  .cta-button:focus-visible{outline:3px solid #ff9a39;outline-offset:3px}
  .cta-fox{position:absolute;z-index:3;width:clamp(205px,23vw,290px);height:auto;bottom:-1px;right:14%;
    filter:drop-shadow(0 2px 3px rgba(20,40,80,.09))}
  @media(max-width:1100px){
    .case-outcomes .result-grid{gap:12px}
    .case-outcomes .result-card{gap:9px;padding:15px 10px}
    .result-icon{height:55px;width:55px}
    .result-card strong{font-size:20px}
    .result-card p{font-size:12px}
    .cta-fox{right:10%}
  }
  @media(max-width:780px){
    .case-outcomes{width:min(100% - 28px,680px);padding-top:24px}
    .results{padding:25px 19px;border-radius:24px}
    .case-outcomes .result-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
    .case-outcomes .result-card{min-height:105px;padding:15px}
    .result-icon{width:55px;height:55px}
    .review{padding:30px 8px;gap:22px;min-height:200px}
    .review-photo{width:88px;height:88px}
    .review-initials{font-size:26px}
    .review blockquote>p{font-size:14px}
    .review::before{opacity:.55}
    .cta{padding:30px 26px;min-height:215px}
    .cta h2{font-size:28px;white-space:normal}
    .cta-copy{max-width:66%}
    .cta-fox{width:190px;right:1%}
  }
  @media(max-width:520px){
    .section-title{margin:12px 0 19px;font-size:28px}
    .case-outcomes .result-grid{grid-template-columns:1fr}
    .case-outcomes .result-card{min-height:86px}
    .result-card strong{font-size:21px}
    .result-card p{margin-top:4px;font-size:13px}
    .wide-only{display:none}
    .review{min-height:0;padding:25px 4px 30px;gap:15px}
    .review-photo{width:64px;height:64px}
    .review-initials{font-size:20px}
    .review blockquote>p{font-size:13px;line-height:1.6}
    .review footer{margin-top:13px}
    .review footer strong{font-size:13px}
    .review footer span{font-size:11px}
    .review::before{display:none}
    .cta{min-height:300px;padding:26px 20px;align-items:flex-start;background-size:auto 100%;background-position:47% center}
    .cta-copy{max-width:100%;padding-right:0}
    .cta h2{font-size:28px;max-width:310px}
    .cta p{font-size:13px;line-height:1.5;max-width:230px}
    .cta-button{margin-top:5px;min-width:0;font-size:12px;padding:13px 20px}
    .cta-fox{width:145px;right:1%;bottom:0}
  }

  /* аккордеон FAQ и болей */
  .acc{background:#fff;border-radius:1.5rem;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}
  .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}

  /* липкая поднавигация страницы */
  .subnav a.active{color:#2f7cf6;background:#eff6ff}

  /* статья блога */
  .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.85rem;font-weight:900;color:#0f172a;margin-top:2.5rem}
  .prose-khv h3{font-size:1.2rem;font-weight:800;color:#0f172a;margin-top:1.9rem}
  .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:.5rem;width:.5rem;border-radius:9999px;background:#2f7cf6}
  .prose-khv ol{list-style:decimal;padding-left:1.4rem}
  .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;color:#0f172a;font-weight:500}
  .prose-khv table{display:block;width:100%;max-width:100%;overflow-x:auto;border-collapse:collapse;font-size:.92rem;background:#fff;border-radius:1rem;-webkit-overflow-scrolling:touch}
  .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}


  .ptab-in{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
  .ptab-panel{display:none}
  #pt-razrabotka:checked ~ .ptab-panels .ptab-panel-razrabotka{display:block}
  #pt-podderzhka:checked ~ .ptab-panels .ptab-panel-podderzhka{display:block}
  #pt-seo:checked ~ .ptab-panels .ptab-panel-seo{display:block}
  #pt-support:checked ~ .ptab-panels .ptab-panel-support{display:block}
  #pt-ai:checked ~ .ptab-panels .ptab-panel-ai{display:block}
  #pt-razrabotka:checked ~ .ptab-bar label[for="pt-razrabotka"]{background:#2f7cf6;color:#fff;border-color:#2f7cf6}
  #pt-podderzhka:checked ~ .ptab-bar label[for="pt-podderzhka"]{background:#2f7cf6;color:#fff;border-color:#2f7cf6}
  #pt-seo:checked ~ .ptab-bar label[for="pt-seo"]{background:#2f7cf6;color:#fff;border-color:#2f7cf6}
  #pt-support:checked ~ .ptab-bar label[for="pt-support"]{background:#2f7cf6;color:#fff;border-color:#2f7cf6}
  #pt-ai:checked ~ .ptab-bar label[for="pt-ai"]{background:#2f7cf6;color:#fff;border-color:#2f7cf6}
  .ptab-bar label{cursor:pointer}


/* page styles (home) */

  details summary::-webkit-details-marker{display:none}
  details > summary{list-style:none;cursor:pointer}
  [id]{scroll-margin-top:100px}
  html{scroll-behavior:smooth}
  body{font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;background:#f5f7fb;color:#0f172a}
  .display{font-family:'Playfair Display',serif;letter-spacing:-.02em}
  .blob{position:absolute;border-radius:9999px;filter:blur(80px);opacity:.5;z-index:0;pointer-events:none}
  .no-scrollbar::-webkit-scrollbar{display:none}
  .no-scrollbar{scrollbar-width:none}