/* ============================================================
   product-detail.css — углублённые под-страницы продуктов.
   Поверх styles.css + product.css. Переиспользует .band, .glass,
   .section-head, .eyebrow, .cap-grid, .cap-card, .ps-grid.
   ============================================================ */

/* hero */
.pd-hero{position:relative;padding:120px 0 56px;overflow:hidden}
.pd-hero .breadcrumb{margin-bottom:22px}
.pd-eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);
  font-size:12.5px;letter-spacing:.04em;color:var(--aqua);text-transform:uppercase;
  padding:8px 15px;border-radius:999px;border:1px solid var(--stroke);background:rgba(15,30,61,.03);margin-bottom:20px}
html[data-theme="dark"] .pd-eyebrow{background:rgba(255,255,255,.04)}
.pd-hero h1{font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(34px,5.2vw,62px);line-height:1.04;margin-bottom:20px;max-width:18ch}
.pd-hero .pd-lead{font-size:clamp(17px,1.6vw,21px);line-height:1.6;color:var(--text-mid);max-width:62ch}
.pd-hero .pd-stats{display:flex;flex-wrap:wrap;gap:38px;margin-top:38px}
.pd-hero .pd-stat .v{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,3.4vw,42px);
  background:linear-gradient(120deg,var(--blue),var(--aqua));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pd-hero .pd-stat .k{font-size:13px;color:var(--text-dim);margin-top:4px;font-family:var(--font-mono)}

/* overview two-column */
.pd-overview{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start}
.pd-overview .pd-prose p{font-size:16.5px;line-height:1.75;color:var(--text-mid);margin-bottom:16px}
.pd-overview .pd-prose p strong{color:var(--text-hi);font-weight:600}
.pd-aside{padding:28px 26px}
.pd-aside h4{font-family:var(--font-display);font-size:18px;margin-bottom:16px;color:var(--text-hi)}
.pd-aside ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.pd-aside li{display:flex;gap:11px;font-size:14.5px;color:var(--text-mid);line-height:1.5}
.pd-aside li::before{content:"";flex:none;width:18px;height:18px;margin-top:1px;border-radius:6px;
  background:linear-gradient(135deg,var(--blue),var(--aqua));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12l5 5L20 6'/%3E%3C/svg%3E") center/13px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12l5 5L20 6'/%3E%3C/svg%3E") center/13px no-repeat}

/* spec rows */
.spec-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.spec-row{padding:22px 24px;display:flex;flex-direction:column;gap:6px}
.spec-row .sk{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-dim)}
.spec-row .sv{font-size:16px;color:var(--text-hi);line-height:1.5;font-weight:500}

/* numbered steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:step}
.step{position:relative;padding:28px 24px 26px}
/* держим номер в потоке: .glass::before делает псевдоэлемент absolute/inset:0,
   из-за чего цифра прилипала к углу без отступа — возвращаем в normal flow */
.step::before{counter-increment:step;content:counter(step);position:static;inset:auto;
  display:grid;place-items:center;width:40px;height:40px;border-radius:12px;margin:0 0 18px;
  font-family:var(--font-display);font-weight:700;font-size:18px;color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--violet))}
.step h4{font-family:var(--font-display);font-size:17px;margin-bottom:8px;color:var(--text-hi)}
.step p{font-size:14px;line-height:1.55;color:var(--text-mid)}

/* faq */
.pd-faq{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.pd-faq details{padding:0 24px;border-radius:16px;overflow:hidden}
.pd-faq summary{list-style:none;cursor:pointer;padding:20px 0;display:flex;justify-content:space-between;
  align-items:center;gap:18px;font-family:var(--font-display);font-weight:600;font-size:17px;color:var(--text-hi)}
.pd-faq summary::-webkit-details-marker{display:none}
.pd-faq summary::after{content:"+";font-size:24px;color:var(--aqua);transition:transform .25s;flex:none}
.pd-faq details[open] summary::after{transform:rotate(45deg)}
.pd-faq .fa{padding:0 0 22px;font-size:15.5px;line-height:1.7;color:var(--text-mid)}

/* big CTA band */
.pd-final{text-align:center;padding:70px 0}
.pd-final h2{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,3.6vw,46px);
  letter-spacing:-.02em;margin-bottom:16px;color:var(--text-hi)}
.pd-final p{font-size:17px;color:var(--text-mid);max-width:54ch;margin:0 auto 30px}
.pd-final .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* button under the interactive demo on the product page */
.detail-cta-row{display:flex;justify-content:center;margin-top:30px;position:relative;z-index:3}

@media (max-width:900px){
  .pd-overview{grid-template-columns:1fr;gap:26px}
  .spec-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .pd-hero{padding:100px 0 44px}
  .pd-hero .pd-stats{gap:22px}
  .steps{grid-template-columns:1fr}
}

/* ── Галерея скриншотов продукта (скрыта, пока нет изображений) ── */
.shot-section .shot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;margin-top:8px}
@media(max-width:640px){.shot-section .shot-grid{grid-template-columns:1fr}}
.shot{margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--stroke);
  background:rgba(15,30,61,.03);display:flex;flex-direction:column}
html[data-theme="dark"] .shot{background:rgba(255,255,255,.03);border-color:var(--stroke-soft)}
.shot img{width:100%;height:auto;display:block}
.shot figcaption{padding:12px 16px;font-size:13.5px;color:var(--text-mid);
  font-family:var(--font-text);border-top:1px solid var(--stroke-soft)}