/* =========================================================================
   ЧУДО — единый шаблон страницы приложения (product view)
   Требует design.css. Палитра задаётся классом .pv-<app> (см. design.css).
   ========================================================================= */

.pv-page { background-attachment: fixed, fixed, fixed, fixed; }

/* ---------- Hero ---------- */
.pv-hero {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(48px, 6vw, 88px) var(--pad) clamp(56px, 6vw, 92px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.92fr);
  align-items: center;
  gap: clamp(36px, 6vw, 96px);
}
.pv-hero > * { min-width: 0; }

.pv-title-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 20px 0 18px;
}
.pv-icon {
  width: 86px;
  height: 86px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: var(--c-shadow-sm);
}
.pv-title {
  font-size: var(--fs-hero);
  line-height: 0.86;
}
.pv-title-sub {
  display: block;
  margin-top: 12px;
  color: var(--c-muted);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.25;
  text-transform: none;
}
.pv-lead {
  max-width: 60ch;
  margin: 0;
  color: var(--c-muted);
  font-size: var(--fs-lg);
  line-height: 1.5;
}
.pv-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 32px 0 26px;
}
.pv-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
}

.pv-hero-art {
  position: relative;
  min-height: 440px;
  display: grid;
  place-items: center;
  margin: 0;
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--c-accent) 20%, transparent), transparent 62%),
    color-mix(in srgb, var(--c-surface) 60%, var(--c-bg));
}
.pv-hero-art img {
  width: min(74%, 460px);
  max-height: 640px;
  object-fit: contain;
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.5));
}

/* ---------- Proof ---------- */
.pv-proof {
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  background: color-mix(in srgb, var(--c-surface) 55%, transparent);
}
.pv-proof-inner {
  max-width: var(--maxw);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.pv-proof article {
  min-height: 200px;
  padding: clamp(26px, 3vw, 46px);
  border-right: 1px solid var(--c-line);
}
.pv-proof article:last-child { border-right: 0; }
.pv-proof strong {
  display: block;
  margin: 26px 0 10px;
  font-size: var(--fs-xl);
  line-height: 1.15;
  color: var(--c-text);
}
.pv-proof p { margin: 0; color: var(--c-muted); line-height: 1.55; }

/* ---------- Секции ---------- */
.pv-section {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: var(--sp-10) var(--pad);
  border-bottom: 1px solid var(--c-line);
}
.pv-section-head {
  display: grid;
  grid-template-columns: minmax(160px, 0.5fr) minmax(0, 1.5fr);
  gap: clamp(20px, 4vw, 60px);
  align-items: start;
  margin-bottom: var(--sp-8);
}
.pv-section-head > * { min-width: 0; }
.pv-section-head h2 { font-size: var(--fs-3xl); margin: 0 0 18px; }
.pv-section-head p {
  max-width: 68ch;
  margin: 0;
  color: var(--c-muted);
  font-size: var(--fs-lg);
  line-height: 1.55;
}

.pv-h2 { font-size: var(--fs-3xl); margin: 16px 0; }

/* ---------- Bento-сетка возможностей ---------- */
.pv-features {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.pv-feature {
  container-type: inline-size;
  grid-column: span 2;
  min-height: 250px;
  padding: clamp(22px, 2.4vw, 32px);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--c-surface) 82%, transparent), color-mix(in srgb, var(--c-bg) 94%, transparent));
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-soft),
    box-shadow var(--dur-2) var(--ease-soft);
}
.pv-feature:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--c-accent) 55%, var(--c-line));
  box-shadow: var(--c-shadow-sm);
}
.pv-feature--wide { grid-column: span 4; }
.pv-feature--half { grid-column: span 3; }
.pv-feature--full { grid-column: span 6; }
.pv-feature-icon {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--c-accent) 45%, var(--c-line));
  border-radius: var(--r-md);
  color: var(--c-accent-2);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 800;
  background: var(--c-accent-soft);
}
.pv-feature h3 {
  margin: auto 0 8px;
  font-size: clamp(19px, 1.4vw + 12px, 26px);
  line-height: 1.08;
}
.pv-feature p { margin: 0; color: var(--c-muted); line-height: 1.5; }
.pv-feature--wide h3 { font-size: clamp(22px, 1.8vw + 14px, 34px); }

@container (max-width: 260px) {
  .pv-feature h3 { font-size: 20px; }
}

/* ---------- Витрина экранов ---------- */
.pv-showcase-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  scrollbar-width: thin;
}
.pv-shot {
  scroll-snap-align: start;
  margin: 0;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: color-mix(in srgb, var(--c-bg) 60%, #000);
}
.pv-shot img {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: contain;
  background: color-mix(in srgb, var(--c-bg) 80%, #000);
  transition: transform var(--dur-3) var(--ease-out);
}
.pv-shot:hover img { transform: scale(1.03); }
.pv-shot figcaption {
  padding: 14px 16px;
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-sm);
  font-weight: 800;
  line-height: 1.3;
  color: var(--c-text);
}

/* ---------- Детальные блоки ---------- */
.pv-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.82fr);
  align-items: center;
  gap: clamp(34px, 6vw, 96px);
}
.pv-detail-grid > * { min-width: 0; }
.pv-detail-copy h2 { font-size: var(--fs-3xl); margin: 0 0 18px; }
.pv-detail-copy p:not(.ui-eyebrow) {
  max-width: 62ch;
  margin: 0 0 16px;
  color: var(--c-muted);
  font-size: var(--fs-lg);
  line-height: 1.55;
}
.pv-detail-copy p:last-child { margin-bottom: 0; }
.pv-detail--reverse .pv-detail-grid > figure { order: -1; }
.pv-detail-figure {
  margin: 0;
  display: grid;
  place-items: center;
  padding: clamp(16px, 2.4vw, 30px);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--c-surface) 55%, transparent);
}
.pv-detail-figure img {
  width: min(100%, 420px);
  border-radius: var(--r-sm);
  box-shadow: var(--c-shadow-sm);
}

/* Список шагов */
.pv-steps {
  display: grid;
  margin: var(--sp-6) 0 0;
  list-style: none;
  border-top: 1px solid var(--c-line);
}
.pv-steps li {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  padding: 15px 0;
  border-bottom: 1px solid var(--c-line);
  color: var(--c-muted);
}
.pv-steps b {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--c-accent-2);
}

/* ---------- Приватность ---------- */
.pv-privacy {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(300px, 1.14fr);
  gap: clamp(36px, 6vw, 96px);
  max-width: var(--maxw);
  margin-inline: auto;
  padding: var(--sp-10) var(--pad);
  border-bottom: 1px solid var(--c-line);
}
.pv-privacy h2 { font-size: var(--fs-3xl); margin: 16px 0 18px; }
.pv-privacy p { color: var(--c-muted); font-size: var(--fs-lg); line-height: 1.55; }
.pv-privacy-list {
  list-style: none;
  border-top: 1px solid var(--c-line);
  margin-bottom: var(--sp-6);
}
.pv-privacy-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  padding: 17px 0;
  border-bottom: 1px solid var(--c-line);
  color: var(--c-muted);
  line-height: 1.5;
}
.pv-privacy-list b { color: var(--c-accent-2); }

/* ---------- CTA-скачивание ---------- */
.pv-cta {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: var(--sp-10) var(--pad);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
}
.pv-cta h2 { font-size: var(--fs-3xl); margin: 16px 0; }
.pv-cta p { max-width: 62ch; color: var(--c-muted); font-size: var(--fs-lg); line-height: 1.55; margin: 0 0 16px; }
.pv-audience { display: grid; gap: 9px; margin: 20px 0 26px; padding-left: 20px; color: var(--c-muted); }
.pv-store {
  min-width: 232px;
  display: grid;
  gap: 6px;
  padding: 22px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--c-surface) 70%, transparent);
}
.pv-store b { font-size: var(--fs-lg); color: var(--c-text); }
.pv-store small { color: var(--c-muted); font-size: var(--fs-sm); }

/* ---------- Адаптив ---------- */
@media (min-width: 1101px) {
  .pv-showcase-rail {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
  }
}

@media (max-width: 1100px) {
  .pv-hero { grid-template-columns: 1fr; }
  .pv-hero-art { min-height: 380px; }
  .pv-section-head { grid-template-columns: 1fr; gap: 14px; }
  .pv-feature { grid-column: span 3; }
  .pv-feature--wide,
  .pv-feature--full { grid-column: span 6; }
}

@media (max-width: 1020px) {
  .pv-privacy,
  .pv-detail-grid { grid-template-columns: 1fr; }
  .pv-detail--reverse .pv-detail-grid > figure { order: 0; }
  .pv-proof-inner { grid-template-columns: 1fr 1fr; }
  .pv-proof article:nth-child(2) { border-right: 0; }
  .pv-proof article:last-child { grid-column: 1 / -1; border-top: 1px solid var(--c-line); }
}

@media (max-width: 680px) {
  .pv-title-row { flex-direction: column; align-items: flex-start; }
  .pv-title { font-size: clamp(34px, 11vw, 58px); }
  .pv-icon { width: 72px; height: 72px; }
  .pv-actions { flex-direction: column; align-items: stretch; }
  .pv-hero-art { min-height: 300px; }
  .pv-feature,
  .pv-feature--wide,
  .pv-feature--full { grid-column: span 6; min-height: 0; }
  .pv-proof-inner { grid-template-columns: 1fr; }
  .pv-proof article,
  .pv-proof article:nth-child(2),
  .pv-proof article:last-child { border-right: 0; border-bottom: 1px solid var(--c-line); }
  .pv-proof article:last-child { border-bottom: 0; }
  .pv-cta { grid-template-columns: 1fr; }
  .pv-store { min-width: 0; }
}