/* =========================================================
   Солнечный лендинг — единая голубо-красная гамма
   Правило: голубой = структура, красный = акцент
   ========================================================= */

.solarLanding {
  --solar-blue:        #1E88E5;
  --solar-blue-dark:   #0D47A1;
  --solar-blue-light:  #64B5F6;
  --solar-blue-soft:   #E3F2FD;
  --solar-red:         #E53935;
  --solar-red-light:   #FF6B68;
  --solar-red-soft:    #FFEDEC;
  --solar-ink:         #162033;
  --solar-muted:       #647187;
  --solar-line:        #E3E8F0;
  --solar-bg:          #F5F7FA;

  color: var(--solar-ink);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.45;
}
.solarLanding * { box-sizing: border-box; }
.solarLanding button,
.solarLanding input,
.solarLanding select { font: inherit; font-size: 16px; }

.solarContainer {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
}

/* ---------- HERO ---------- */
.solarHero {
  padding: 32px 0 44px;
  background:
    radial-gradient(circle at 82% 12%, rgba(229, 57, 53, 0.16), transparent 28%),
    linear-gradient(135deg, #FFFFFF 0%, #EAF4FF 55%, #FFEDEC 100%);
}
.solarHeroGrid,
.solarKit,
.solarQuizGrid,
.solarCalcGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
  gap: 28px;
  align-items: center;
}
.solarEyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 6px 12px;
  border: 1px solid rgba(30, 136, 229, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--solar-blue);
  font-size: 13px;
  font-weight: 700;
}
.solarEyebrow:before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--solar-red);
}
.solarHero h1 {
  margin: 18px 0 14px;
  font-size: clamp(38px, 6vw, 76px);
  line-height: 0.96;
  letter-spacing: 0;
}
.solarHero h1 span { color: var(--solar-blue); }

.solarLead,
.solarSectionText {
  margin: 0;
  color: var(--solar-muted);
  font-size: 16px;
  line-height: 1.55;
}
.solarLead { max-width: 650px; font-size: 18px; }

.solarActions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

/* ---------- КНОПКИ ---------- */
.solarBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.solarBtn:hover { transform: translateY(-1px); }
.solarBtnPrimary {
  background: linear-gradient(135deg, #64B5F6, #1E88E5);
  color: #fff;
  box-shadow: 0 14px 30px rgba(30, 136, 229, 0.28);
}
.solarBtnSecondary {
  background: #fff;
  color: var(--solar-ink);
  border-color: var(--solar-line);
}
.solarBtnLight {
  background: #fff;
  color: var(--solar-blue-dark);
  border-color: transparent;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
}
.solarBtnLight:hover {
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.28);
}

/* ---------- ПАНЕЛИ / КАРТОЧКИ ---------- */
.solarHeroPanel,
.solarPanel,
.solarCard,
.solarKit,
.solarStep {
  border: 1px solid var(--solar-line);
  border-radius: 8px;
  background: #fff;
}
.solarHeroPanel,
.solarPanel,
.solarKit { padding: 24px; }
.solarHeroPanel { box-shadow: 0 22px 70px rgba(52, 67, 95, 0.16); }

.solarHouse,
.solarKitVisual {
  display: block;
  width: 100%;
  aspect-ratio: 1.5;
}

.solarMetricGrid,
.solarCards,
.solarPriceGrid,
.solarCalcResults,
.solarChoiceRow { display: grid; gap: 12px; }

.solarMetricGrid,
.solarPriceGrid,
.solarCalcResults,
.solarChoiceRow { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.solarCards {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.solarMetric,
.solarPrice,
.solarCalcResult {
  min-height: 100px;
  padding: 16px;
  border-radius: 8px;
  background: var(--solar-bg);
}
.solarMetricFeatured {
  background: linear-gradient(135deg, var(--solar-blue), var(--solar-blue-dark));
  color: #fff;
}
.solarMetric small,
.solarPrice small,
.solarCalcResult small {
  display: block;
  opacity: 0.75;
  font-size: 13px;
  font-weight: 700;
}
.solarMetric strong,
.solarPrice b,
.solarCalcResult strong {
  display: block;
  margin-top: 7px;
  font-size: 26px;
  line-height: 1.08;
}
.solarPriceNote {
  display: block;
  margin-top: 7px;
  color: var(--solar-muted);
  font-size: 13px;
  line-height: 1.35;
}
.solarKitGlossary,
.solarCalcNote {
  display: block;
  margin-top: 6px;
  color: var(--solar-muted);
  font-size: 13px;
  line-height: 1.35;
}
.solarIconRotate { transform: rotate(90deg); }

/* ---------- СЕКЦИИ ---------- */
.solarSection {
  padding: 48px 0;
  background: #fff;
}
.solarSection:nth-of-type(odd) { background: var(--solar-bg); }

.solarSectionHead {
  max-width: 760px;
  margin-bottom: 24px;
}
.solarSectionTitle {
  margin: 0 0 10px;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.08;
  letter-spacing: 0;
}

.solarCard { min-height: 178px; padding: 20px; }
.solarIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin-bottom: 14px;
  border-radius: 8px;
  background: var(--solar-blue-soft);
  color: var(--solar-blue);
  font-size: 25px;
  font-weight: 900;
}
.solarCard h3 {
  margin: 0 0 8px;
  font-size: 19px;
  line-height: 1.25;
}
.solarCard p {
  margin: 0;
  color: var(--solar-muted);
  font-size: 15px;
  line-height: 1.5;
}

.solarKitTitle {
  max-width: none;
  font-size: clamp(27px, 3vw, 34px);
  white-space: nowrap;
}
.solarFeatures {
  display: grid;
  gap: 10px;
  margin: 18px 0 20px;
  padding: 0;
  list-style: none;
}
.solarFeatures li {
  display: flex;
  gap: 10px;
  color: var(--solar-muted);
}
.solarCheck {
  flex: 0 0 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(229, 57, 53, 0.13);
  color: var(--solar-red);
  text-align: center;
  font-weight: 900;
  line-height: 22px;
}
.solarPrice .support { color: var(--solar-blue); }

/* ---------- ШАГИ ---------- */
.solarSteps {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.solarStep {
  flex: 1 1 140px;
  min-height: 118px;
  padding: 16px;
  font-size: 15px;
  line-height: 1.25;
}
.solarStep strong { display: block; font-size: 15px; }
.solarStepNumber {
  width: 36px;
  height: 36px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: var(--solar-blue);
  color: #fff;
  text-align: center;
  font-weight: 900;
  line-height: 36px;
}

/* ---------- КВИЗ ---------- */
#solar-eligibility {
  background: linear-gradient(135deg, #E3F2FD 0%, #FFEDEC 100%);
}
#solar-eligibility .solarContainer {
  padding: 24px;
  border: 1px solid rgba(30, 136, 229, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.58);
}
#solar-eligibility .solarPanel {
  border-color: rgba(30, 136, 229, 0.25);
  box-shadow: 0 18px 44px rgba(52, 67, 95, 0.14);
}
.solarQuizProgress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #E9EDF5;
}
.solarQuizProgress span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--solar-blue), var(--solar-red));
  transition: width 0.2s ease;
}
.solarQuizQuestion {
  margin: 18px 0;
  font-size: 24px;
  line-height: 1.25;
}
.solarChoiceRow button {
  min-height: 46px;
  border: 1px solid var(--solar-line);
  border-radius: 8px;
  background: var(--solar-bg);
  color: var(--solar-ink);
  font-weight: 900;
  cursor: pointer;
}
.solarResult {
  margin-top: 14px;
  padding: 14px;
  border-radius: 8px;
  background: var(--solar-bg);
  color: var(--solar-muted);
  line-height: 1.45;
}

/* ---------- КАЛЬКУЛЯТОР + ВСТРОЕННЫЙ CTA ---------- */
.solarCalcWrap {
  border: 1px solid var(--solar-line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(52, 67, 95, 0.10);
}
.solarCalcBody {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.85fr);
  gap: 0;
  align-items: stretch;
}

/* Левая колонка — поля */
.solarCalcFields {
  padding: 28px;
  background: #FAFBFD;
  border-right: 1px solid var(--solar-line);
}

/* Правая колонка — результаты (тёмно-синий, не чёрный) */
.solarCalcOutput {
  padding: 28px;
  background: linear-gradient(160deg, #0D47A1 0%, #0B3D91 100%);
  color: #fff;
}
.solarCalcOutput h3 {
  margin: 0 0 16px;
  font-size: 20px;
  color: #fff;
}
.solarCalcOutput .solarCalcResult {
  background: #fff;
  color: var(--solar-ink);
}
.solarCalcOutput .solarCalcResult small {
  color: var(--solar-muted);
  opacity: 1;
}

/* Полоса-призыв — средний синий, светлее блока результатов */
.solarCalcCta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  padding: 20px 28px;
  background: linear-gradient(135deg, #1565C0, #1E88E5);
  color: #fff;
}
.solarCalcCtaText strong {
  display: block;
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 4px;
  color: #fff;
}
.solarCalcCtaText span {
  display: block;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  line-height: 1.4;
}

/* ---------- ПОЛЯ ---------- */
.solarField {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}
.solarField:last-child { margin-bottom: 0; }
.solarField label { font-weight: 800; }
.solarRange { width: 100%; accent-color: var(--solar-blue); }
.solarInput,
.solarSelect {
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid var(--solar-line);
  border-radius: 8px;
  background: #fff;
  color: var(--solar-ink);
  font: inherit;
  line-height: 38px;
}

/* ---------- ФУТЕР-ДИСКЛЕЙМЕР ---------- */
.solarCta {
  padding: 28px 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #0D47A1, #0B3D91);
  color: #fff;
}
.solarCtaGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
}
.solarCtaText h2 {
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 1.3;
  color: #fff;
}
.solarCtaText p {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
  line-height: 1.55;
  max-width: 720px;
}
.solarCtaText a {
  color: #fff;
  text-decoration: underline;
}
.solarCtaText a:hover { opacity: 0.85; }

.solarCta .solarBtnSecondary {
  background: #fff;
  color: var(--solar-blue-dark);
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  white-space: nowrap;
}
.solarCta .solarBtnSecondary:hover {
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24);
}

/* ---------- МОДАЛКА «НОРМАТИВНЫЕ ДОКУМЕНТЫ» ---------- */
.solarDocsOverlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(9, 28, 61, 0.45);
  backdrop-filter: blur(3px);
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: auto;
}
.solarDocsOverlay.is-open { display: flex; }

.solarDocsModal {
  width: min(620px, 100%);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  animation: solarDocsIn 0.22s ease-out;
}
@keyframes solarDocsIn {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.solarDocsHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--solar-line);
}
.solarDocsHead h3 {
  margin: 0 0 4px;
  font-size: 20px;
  line-height: 1.25;
  color: var(--solar-ink);
}
.solarDocsHead p {
  margin: 0;
  color: var(--solar-muted);
  font-size: 14px;
  line-height: 1.45;
}
.solarDocsClose {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--solar-line);
  background: #fff;
  color: var(--solar-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.solarDocsClose:hover {
  background: var(--solar-bg);
  color: var(--solar-ink);
}

.solarDocsBody {
  padding: 8px 12px 16px;
  overflow: auto;
}
.solarDocsList {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.solarDocsList a {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--solar-ink);
  transition: background 0.15s ease;
}
.solarDocsList a:hover { background: var(--solar-blue-soft); }

.solarDocsIcon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--solar-blue-soft);
  color: var(--solar-blue);
  font-weight: 900;
  font-size: 15px;
}
.solarDocsText strong {
  display: block;
  font-size: 15px;
  line-height: 1.3;
  margin-bottom: 3px;
}
.solarDocsText small {
  display: block;
  color: var(--solar-muted);
  font-size: 13px;
  line-height: 1.4;
}

/* ---------- АДАПТИВ: КАЛЬКУЛЯТОР + CTA ---------- */
@media (max-width: 980px) {
  .solarCalcBody { grid-template-columns: 1fr; }
  .solarCalcFields {
    padding: 22px;
    border-right: 0;
    border-bottom: 1px solid var(--solar-line);
  }
  .solarCalcOutput { padding: 22px; }
}
@media (max-width: 620px) {
  .solarCalcCta {
    grid-template-columns: 1fr;
    padding: 18px 20px;
  }
  .solarCalcCta .solarBtnLight { width: 100%; }
  .solarCalcFields,
  .solarCalcOutput { padding: 18px; }
}

/* ---------- АДАПТИВ: ФУТЕР И МОДАЛКА ---------- */
@media (max-width: 980px) {
  .solarCtaGrid { grid-template-columns: 1fr; }
  .solarCta .solarBtnSecondary { width: 100%; }
}
@media (max-width: 620px) {
  .solarCta { padding: 22px 18px; }
  .solarCtaText h2 { font-size: 18px; }
  .solarCtaText p { font-size: 13px; }
  .solarDocsHead { padding: 18px 18px 14px; }
  .solarDocsBody { padding: 6px 8px 12px; }
  .solarDocsList a { padding: 12px 10px; }
}

/* ---------- АДАПТИВ: ОБЩИЙ ---------- */
@media (max-width: 980px) {
  .solarHeroGrid,
  .solarKit,
  .solarQuizGrid { grid-template-columns: 1fr; }
  .solarCards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .solarCards,
  .solarMetricGrid,
  .solarPriceGrid,
  .solarChoiceRow,
  .solarCalcResults { grid-template-columns: 1fr; }
  .solarKitTitle { white-space: normal; }
  .solarStep {
    flex-basis: calc(50% - 5px);
    flex-grow: 0;
  }
}