/* ============================================================
   web22.ru — стили страницы /podderzhka-sajtov
   Компоненты: тариф/adv/extra/audit__list — page-home.css,
   пульс ЭКГ — .extra__pulse (page-home.css),
   форма .devform и сноска .dev-seo — page-razrabotka.css.
   Медиа-оверрайды — после базовых правил.
   ============================================================ */

/* ===================== HERO (текст слева + мониторинг справа) ===================== */
.hero--sup { padding: 88px 0 80px; }

.hero--sup .hero__layout {
  grid-template-columns: 1.1fr 0.9fr;
}

.hero--sup .hero__inner { max-width: 640px; }

.hero--sup .hero__title { font-size: clamp(40px, 5.6vw, 64px); }

.hero--sup .hero__lead {
  max-width: 620px;
  font-size: clamp(17px, 2vw, 21px);
}

/* ---------- Иллюстрация: панель мониторинга ---------- */
.monit {
  border-radius: var(--r-lg);
  border: 1px solid var(--border-str);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)), var(--bg-elev);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8), 0 0 60px -20px var(--glow);
  padding: var(--space-5);
  backdrop-filter: blur(6px);
}

.monit__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--border);
}
.monit__dots { display: inline-flex; gap: 5px; }
.monit__dots i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
}
.monit__title {
  font: 500 12.5px/1 var(--mono);
  color: var(--text-2);
  letter-spacing: 0.02em;
}
.monit__badge {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px dashed var(--border-str);
  font: 500 10.5px/1.3 var(--mono);
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: uppercase;
}

/* ЭКГ-пульс (переиспользование .extra__pulse-base/.extra__pulse) */
.monit__pulse {
  padding: var(--space-4) 0 6px;
  border-bottom: 1px solid var(--border);
}
.monit__pulse svg { width: 100%; height: 56px; }
.monit__pulse-cap {
  display: block;
  margin-top: 6px;
  font: 500 11.5px/1.4 var(--mono);
  color: rgba(52, 211, 153, 0.75);
}

.monit__rows {
  display: grid;
  gap: 8px;
  margin-top: var(--space-4);
}
.monit__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  font-size: 13px;
  color: var(--text-2);
}
.monit__row svg { flex: none; color: var(--ok); }
.monit__row b {
  margin-left: auto;
  font: 600 11.5px/1 var(--mono);
  white-space: nowrap;
}
.monit__row b.is-ok { color: var(--ok); }

.monit__verdict {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--space-4);
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid rgba(52, 211, 153, 0.35);
  background: rgba(52, 211, 153, 0.07);
  font-size: 13.5px;
  color: var(--text-2);
}
.monit__verdict b { color: var(--ok); }
.monit__verdict-dot {
  flex: none;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 10px var(--ok);
}

@media (max-width: 1024px) {
  .hero--sup .hero__layout { grid-template-columns: 1fr; }
  .hero--sup .hero__visual { max-width: 520px; }
}
@media (max-width: 640px) {
  .hero--sup { padding-top: 56px; }
  .hero--sup .hero__visual { max-width: 440px; margin-top: var(--space-6); }
}

/* ===================== ЧТО ВХОДИТ (12 услуг, 3 группы) ===================== */
.incl__grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: var(--space-4);
  align-items: start;
}

.incl__group { padding: var(--space-6); }
.incl__group--main .audit__list { margin-top: var(--space-5); }
.incl__side {
  display: grid;
  gap: var(--space-4);
}
.incl__side .audit__list { margin-top: var(--space-4); }

.incl__title {
  font: 600 12px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-2);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}

/* честная рамка: развитие/SEO — отдельно */
.incl__frame {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: var(--space-5);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--r-md);
  border: 1px dashed rgba(251, 191, 36, 0.45);
  background: rgba(251, 191, 36, 0.05);
  font-size: 14px;
  color: var(--text-2);
}
.incl__frame svg { flex: none; margin-top: 2px; color: var(--warn); }
.incl__frame b { color: var(--text); font-weight: 600; }

@media (max-width: 900px) {
  .incl__grid { grid-template-columns: 1fr; }
}

/* ===================== ТАРИФ (одна карточка) ===================== */
.sup-tariff {
  max-width: 640px;
  margin-inline: auto;
  padding: var(--space-7) var(--space-7) var(--space-6);
  display: grid;
  gap: var(--space-4);
  justify-items: center;
  text-align: center;
}

.sup-tariff .tariff__list {
  width: 100%;
  text-align: left;
  margin: var(--space-2) 0 0;
}

.sup-tariff__full {
  font-size: 13.5px;
  font-weight: 600;
}

.sup-tariff__note {
  font-size: 12.5px;
  color: var(--muted);
  max-width: 420px;
}

.sup-tariff__upsell {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: var(--space-6);
}

.sup-tariff__upsell svg { color: var(--accent-2); }
.sup-tariff__upsell a {
  font-size: 15px;
  font-weight: 600;
}

@media (max-width: 640px) {
  .sup-tariff { padding: var(--space-6) var(--space-5); }
}

/* ===================== ОПЫТ (регресс-паттерн) ===================== */
.regress__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}

.regress {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-6);
}

.regress__tag {
  justify-self: start;
  padding: 5px 12px;
  border-radius: 999px;
  font: 600 12px/1 var(--mono);
}
.regress__tag--up {
  border: 1px solid rgba(52, 211, 153, 0.35);
  background: rgba(52, 211, 153, 0.08);
  color: var(--ok);
}
.regress__tag--down {
  border: 1px solid rgba(248, 113, 113, 0.35);
  background: rgba(248, 113, 113, 0.07);
  color: #f87171;
}

.regress__chart svg { width: 100%; height: 70px; }
.regress__line { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.regress__line--up { stroke: #34d399; }
.regress__line--down { stroke: #f87171; stroke-dasharray: 4 6; }
.regress__area--up { fill: rgba(52, 211, 153, 0.12); }

.regress__t { font-size: 17px; font-weight: 700; }
.regress--down .regress__t { color: var(--muted); }
.regress__s { font-size: 13.5px; color: var(--muted); }

.regress__more {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--card);
}

.regress__exp { font-size: 15px; color: var(--text-2); }

@media (max-width: 860px) {
  .regress__grid { grid-template-columns: 1fr; }
  .regress__more { flex-direction: column; align-items: flex-start; }
}