/* file name: landing-main_style.css
   ============================================================================
   Універсальний стиль для всіх головних лендінгів (landing_main.php):
   СЕС, кондиціонери/теплові насоси, вентиляція, розумний будинок.

   Базується на solar-power-plant-main_style.css + доповнення з
   ventilation-systems-main_style.css та air-conditioners-heat-pump-main_style.css.

   v2 (2026-07): + breadcrumbs, вторинний Hero-CTA на #powers,
   секція «Потужності» (.pw-*), доступний FAQ, reduced-motion.

   Залежить ЛИШЕ від токенів глобального styles.css:
   --accent, --accent-dark, --dark, --muted, --bg, --radius,
   --shadow, --shadow-hover, --max-width, --header-height, --primary-dark.
   Нових кольорів не вводить.
   ============================================================================ */

/* =========================
   BASE
========================= */
* { margin: 0; padding: 0; }

body { background: var(--bg); color: var(--dark); line-height: 1.7; }

section { width: 100%; padding: 50px 10px; }

.container { width: 100%; max-width: var(--max-width); margin: auto; }

h1, h2, h3 { color: var(--dark); line-height: 1.15; font-weight: 800; }
h1 { font-size: clamp(42px, 6vw, 72px); margin-bottom: 24px; }
h2 { font-size: clamp(30px, 4vw, 48px); margin-bottom: 22px; }
h3 { font-size: 22px; margin-bottom: 14px; }
p  { color: var(--muted); margin-bottom: 16px; }

ul { list-style: none; padding-left: 0; }
li { margin-bottom: 10px; }

button {
  padding: 12px 24px;
  border: none;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  border-radius: 6px;
  font-weight: 600;
}
button:hover { opacity: .9; }

/* Якірний скрол з урахуванням фіксованого хедера (для #powers, #form ...) */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: calc(var(--header-height, 72px) + 16px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* =========================
   BREADCRUMBS
========================= */
.breadcrumbs { padding: 16px 10px 0; }
.breadcrumbs .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--muted);
}
.breadcrumbs a { color: var(--muted); text-decoration: none; transition: color .2s; }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs-current { color: var(--dark); font-weight: 600; }

/* =========================
   HERO
========================= */
.hero {
  position: relative;
  min-height: 60dvh;
  display: flex;
  align-items: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hero h1, .hero h2, .hero h3 { color: #fff; }
.hero p, .hero li, .hero span { color: #cbd5e1; }

.background-image-hero {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

/* затемнення для читабельності */
.hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(15,23,42,.75), rgba(15,23,42,.75));
  z-index: 1;
}

.hero .container { position: relative; z-index: 2; }

.width-buttons button { width: 100%; }

.hero-label { display: inline-block; font-size: 14px; opacity: .85; margin-bottom: 12px; }
.hero-subtitle { max-width: 850px; margin: 20px auto; color: rgba(255,255,255,.85); }

.hero-btn {
  padding: 20px 40px;
  font-size: clamp(18px, 2vw, 22px);
  border-radius: 10px;
  font-weight: 700;
  min-width: 260px;
  box-shadow: 0 15px 40px rgba(0,195,255,.3);
  transition: all .3s ease;
}
.hero-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0,195,255,.5);
}

.hero-list {
  list-style: none;
  max-width: 700px;
  margin: 20px auto;
}
.hero-list li {
  background: rgba(255,255,255,.08);
  padding: 12px;
  border-radius: 10px;
  margin-bottom: 10px;
  backdrop-filter: blur(6px);
  text-align: left;
}

/* вторинний текстовий CTA до вибору потужності (#powers) */
.hero-secondary-link {
  display: inline-block;
  margin-top: 18px;
  color: #cbd5e1;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color .2s;
}
.hero-secondary-link:hover { color: var(--accent); }

/* =========================
   SECTION HEADER
========================= */
.section-heading { margin-bottom: 40px; }
.section-heading.center {
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.section-label {
  display: inline-block;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.section-dark .section-label { color: rgba(255,255,255,.55); }

/* =========================
   DARK SECTION (утиліта)
========================= */
.section-dark { background: #0f172a; }
.section-dark > .container > .section-heading h2 { color: #fff; }
.section-dark > .container > .section-heading p  { color: rgba(255,255,255,.72); }

/* =========================
   2-COLUMN (Для кого підходить: Дім / Бізнес)
========================= */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.card {
  background: #fff;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.05);
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 60%;
  height: 100%;
  background:
    linear-gradient(to left,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.7) 40%,
      rgba(255,255,255,.95) 65%,
      rgba(255,255,255,1) 100%
    ),
    url("/assets/images/hero_01.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: .25;
  pointer-events: none;
  z-index: 0;
}
.card > * { position: relative; z-index: 2; }
.card ul { margin-bottom: 30px; }
.card li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 14px;
  font-weight: 500;
}
.card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 10px;
  height: 10px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(0,195,255,.15);
}
.card h3 {
  margin-top: 30px;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--dark);
}

/* =========================
   1. КАТЕГОРІЇ: icon + title + short description, max 4 per row
========================= */
.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #fff;
  border-radius: var(--radius);
  padding: 28px 20px;
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  transition: transform .25s, box-shadow .25s;
}
.category-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.category-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(0,195,255,.12);
  color: var(--accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.category-icon svg { width: 26px; height: 26px; }
.category-card h3 { font-size: 18px; margin-bottom: 8px; }
.category-card p  { font-size: 14px; margin-bottom: 0; }

/* ============================================================================
   СЕКЦІЯ «ПОТУЖНОСТІ» (.pw-*)
   Навігація на сторінки landing_ses_power. Рядки тягнуться з БД, тож
   стилі мають витримувати від 3 до 30+ карток без ручного втручання.
============================================================================ */
.pw-section { background: var(--bg); }

/* --- швидкий вибір: рядок чипів з УСІМА потужностями (рівна перелінковка) --- */
.pw-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: -16px auto 44px;
  max-width: 900px;
}
.pw-chip {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(15,23,42,.12);
  color: var(--dark);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.pw-chip:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: translateY(-2px);
}
.pw-chip-featured {
  border-color: rgba(0,195,255,.5);
  background: rgba(0,195,255,.08);
  color: var(--accent-dark);
}

/* --- групи (Для дому / Бізнес / Промислові) --- */
.pw-group { margin-bottom: 44px; }
.pw-group:last-of-type { margin-bottom: 8px; }

.pw-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(0,195,255,.25);
}
.pw-group-head h3 { font-size: 22px; margin-bottom: 0; }
.pw-group-head p  { font-size: 14px; color: var(--muted); margin-bottom: 0; }

/* --- картки потужностей --- */
.pw-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.pw-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: var(--radius);
  padding: 22px 20px 18px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.pw-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(0,195,255,.45);
}
.pw-card.featured { border: 2px solid var(--accent); }

.pw-badge {
  position: absolute;
  top: -12px;
  right: 16px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.pw-kw {
  font-size: clamp(26px, 2.6vw, 32px);
  font-weight: 800;
  line-height: 1;
  color: var(--dark);
  margin-bottom: 6px;
}
.pw-card:hover .pw-kw { color: var(--accent-dark); }

.pw-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 8px;
}
.pw-hint {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 14px;
}

.pw-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  margin-bottom: 14px;
}
.pw-price { font-size: 14px; font-weight: 800; color: var(--dark); }
.pw-payback {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-dark);
  background: rgba(0,195,255,.1);
  border-radius: 999px;
  padding: 3px 10px;
}

.pw-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-dark);
  padding-top: 12px;
  border-top: 1px solid rgba(15,23,42,.06);
}
.pw-cta span { transition: transform .2s; }
.pw-card:hover .pw-cta span { transform: translateX(4px); }

.pw-callout { margin-top: 36px; }

/* =========================
   2. ВАРТІСТЬ: pricing cards
========================= */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.price-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
  text-align: center;
}
.price-card h3 { color: var(--dark); }
.price-card p {
  color: var(--primary-dark);
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 10px;
}
.section-dark .price-card h3 { color: var(--dark); }
.section-dark .price-card p {
  color: var(--accent);
  font-weight: 700;
  font-size: 16px;
}
.price-card-link {
  display: inline-block;
  color: var(--accent-dark);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}
.section-dark .price-card-link { color: var(--accent); }
.price-card-link:hover { text-decoration: underline; }

/* =========================
   3. ПОРІВНЯННЯ: hover reveals "Детально" button
========================= */
.classification-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.classification-card {
  position: relative;
  overflow: hidden;
  background: #182d5b;
  color: #fff;
  border-radius: var(--radius);
  padding: 22px;
  padding-bottom: 64px;
  transition: transform .25s;
}
.classification-card:hover { transform: translateY(-4px); }
.classification-card h3 { color: #fff; }
.classification-card p { color: rgba(255,255,255,.75); margin-bottom: 0; }

.card-details-link {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .25s, transform .25s;
}
.classification-card:hover .card-details-link {
  opacity: 1;
  transform: translateY(0);
}
/* доступність: показати кнопку і при фокусі з клавіатури */
.classification-card:focus-within .card-details-link {
  opacity: 1;
  transform: translateY(0);
}

/* dark variant, reused by "Переваги" cards */
.advantages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.advantage-card {
  background: #182d5b;
  color: #fff;
  border-radius: var(--radius);
  padding: 22px;
}
.advantage-card h3 { color: #fff; }
.advantage-card p { color: rgba(255,255,255,.75); margin-bottom: 0; }

/* =========================
   4. ПІДБІР: numbered criteria cards + callout
========================= */
.criteria-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}
.criteria-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 24px 22px;
  box-shadow: var(--shadow);
}
.criteria-number {
  display: block;
  font-size: 32px;
  font-weight: 800;
  color: var(--accent);
  opacity: .4;
  margin-bottom: 8px;
}
.criteria-card h3 { font-size: 18px; margin-bottom: 8px; }
.criteria-card p  { font-size: 14px; margin-bottom: 0; }

.callout-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: rgba(0,195,255,.06);
  border-left: 4px solid var(--accent);
  border-radius: 14px;
  padding: 24px 28px;
}
.callout-box p { margin-bottom: 0; max-width: 640px; color: var(--dark); }
.section-dark .callout-box p { color: #fff; }

.callout-link {
  flex: 0 0 auto;
  display: inline-block;
  white-space: nowrap;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  padding: 12px 22px;
  border-radius: 10px;
  text-decoration: none;
  transition: transform .2s;
}
.callout-link:hover { transform: translateY(-2px); }

/* =========================
   5. ЕТАПИ РЕАЛІЗАЦІЇ: process grid
========================= */
.process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.process-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 24px 22px;
  box-shadow: var(--shadow);
  text-align: center;
}
.process-card span {
  display: block;
  font-size: 30px;
  font-weight: 800;
  color: var(--accent);
  opacity: .4;
  margin-bottom: 10px;
}
.process-card h3 { font-size: 17px; margin-bottom: 8px; }
.process-card p  { font-size: 14px; margin-bottom: 0; }

/* =========================
   6. КЕЙСИ: badge + tag pills
========================= */
.cases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.case-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
  border-top: 4px solid var(--accent);
}
.case-card-header { margin-bottom: 16px; }
.case-card-badge {
  display: inline-block;
  background: rgba(0,195,255,.12);
  color: var(--accent-dark);
  font-weight: 700;
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.case-card-header h3 { margin-bottom: 0; }
.case-card-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.case-tag {
  background: var(--bg);
  color: var(--dark);
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.08);
  margin-bottom: 0;
}
.section-dark .case-tag {
  background: rgba(255,255,255,.08);
  color: #fff;
  border-color: rgba(255,255,255,.15);
}

/* =========================
   SYSTEMS / ПОСЛУГИ
========================= */
.systems-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.system-card {
  background: #fff;
  padding: 28px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: .3s;
}
.system-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}

/* =========================
   7. ЧИТАЙТЕ ТАКОЖ: list
========================= */
.reading-list { border-top: 1px solid rgba(255,255,255,.12); }
.reading-list li {
  margin-bottom: 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.reading-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 4px;
  text-decoration: none;
  color: inherit;
  transition: padding-left .2s, background-color .2s;
}
.reading-list a:hover {
  padding-left: 14px;
  background: rgba(255,255,255,.04);
}
.reading-list-title {
  flex: 0 0 auto;
  min-width: 260px;
  font-weight: 700;
  color: #fff;
}
.reading-list-desc { flex: 1; color: #cbd5e1; font-size: 14px; }
.reading-list-arrow {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 20px;
  transition: transform .2s;
}
.reading-list a:hover .reading-list-arrow { transform: translateX(4px); }

/* =========================
   FAQ: accordion (доступний)
========================= */
.faq-list { border-top: 1px solid rgba(255,255,255,.12); }
.faq-item {
  background: none;
  padding: 0;
  border-radius: 0;
  margin-bottom: 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: none;
  border: none;
  padding: 22px 4px;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  margin-bottom: 0;
}
.faq-question:hover { opacity: 1; }
.faq-question:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.faq-icon {
  flex: 0 0 auto;
  font-size: 22px;
  font-weight: 400;
  color: var(--accent);
  transition: transform .25s;
}
.faq-item.active .faq-icon { transform: rotate(45deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 4px;
  transition: max-height .3s ease, padding .3s ease;
}
.faq-item.active .faq-answer { max-height: 320px; padding-bottom: 22px; }
.faq-answer p { color: #cbd5e1; margin-bottom: 0; }

/* ============================================================================
   SECTION HUB — ГАЛУЗЕВІ РІШЕННЯ
   Фон і відступи бере зі стандартного .section.section-dark, тут лишається
   лише glow-ефект і сітка карток.
============================================================================ */
.section-hub { position: relative; overflow: hidden; }
.section-hub::before {
  content: "";
  position: absolute;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(0,195,255,.12) 0%, transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}
.hub-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 60px;
  position: relative;
  z-index: 2;
}
.hub-header h2 {
  color: #fff;
  font-size: clamp(28px, 4vw, 44px);
  margin-bottom: 16px;
}
.hub-header p { color: #94a3b8; font-size: 18px; line-height: 1.7; }

.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  position: relative;
  z-index: 2;
}
.hub-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 28px 24px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  text-decoration: none;
  color: inherit;
  transition: all .35s ease;
  position: relative;
  overflow: hidden;
}
.hub-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform .35s ease;
  transform-origin: left;
}
.hub-card:hover {
  background: rgba(0,195,255,.07);
  border-color: rgba(0,195,255,.3);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0,0,0,.3);
}
.hub-card:hover::before { transform: scaleX(1); }
.hub-card-body { flex: 1; }
.hub-card-body h3 {
  color: #f1f5f9;
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
}
.hub-card-body p {
  color: #64748b;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}
.hub-arrow {
  color: var(--accent);
  font-size: 20px;
  flex-shrink: 0;
  align-self: center;
  transition: transform .3s ease;
}
.hub-card:hover .hub-arrow { transform: translateX(4px); }

/* =========================
   БРЕНДИ: light bg, max 6 per row, opacity on hover
========================= */
.brands-section { background: var(--bg); }
.brands-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}
.brand-card {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 20px;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: none;
  text-decoration: none;
}
.brand-card img {
  width: 75%;
  max-width: 150px;
  height: 150px;
  object-fit: contain;
  display: block;
  opacity: .45;
  transition: opacity .25s, transform .25s;
}
.brand-card:hover img { opacity: 1; transform: scale(1.12); }

/* =========================
   SEO BLOCK
========================= */
.seo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

/* =========================
   КАРТА УКРАЇНИ
========================= */
.ua-map-wrap { max-width: 620px; margin: 0 auto; }
.ua-map { width: 100%; height: auto; }
.ua-map-outline {
  fill: var(--bg);
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linejoin: round;
}
.ua-map-point { cursor: pointer; }
.ua-map-dot { fill: var(--accent-dark); transition: fill .2s; }
.ua-map-pulse {
  fill: var(--accent);
  opacity: .35;
  transform-box: fill-box;
  transform-origin: center;
  animation: ua-pulse 2.2s ease-out infinite;
}
.ua-map-point:hover .ua-map-dot { fill: var(--accent); }
.ua-map-label { font-size: 13px; font-weight: 700; fill: var(--dark); }
.ua-map-note {
  text-align: center;
  font-size: 14px;
  color: var(--muted);
  margin-top: 16px;
}

@keyframes ua-pulse {
  0%   { transform: scale(1);   opacity: .35; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* =========================
   HERO STATS
========================= */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 40px;
}
.hero-stats .stat {
  background: rgba(255,255,255,.06);
  padding: 16px;
  border-radius: 14px;
  color: #fff;
}
.hero-stats .stat strong {
  display: block;
  font-size: clamp(18px, 2.4vw, 26px);
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
}
.hero-stats .stat span { font-size: 13px; color: #94a3b8; }

/* =========================
   CONTACT FORM overrides
========================= */
.contact-form-section h1,
.contact-form-section h2,
.contact-form-section h3 {
  color: #fff;
  background: linear-gradient(135deg, #0f172a, #111827);
}
.contact-form-title h2 { color: #fff; }
.section-dark.contact-form-section h2,
.section-dark.contact-form-section h1,
.section-dark.contact-form-section h3 { color: #fff !important; }

/* ============================================================================
   RESPONSIVE
============================================================================ */
@media (max-width: 992px) {
  section { padding: 40px 0; }
  .container { padding: 0 16px; }

  .two-col,
  .grid2 { grid-template-columns: 1fr !important; }

  .category-grid,
  .classification-grid { grid-template-columns: repeat(2, 1fr); }

  .pw-grid { grid-template-columns: repeat(3, 1fr); }

  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .seo-grid { grid-template-columns: 1fr; }
  .systems-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  h1 { font-size: 32px; }
  h2 { font-size: 26px; }
  p  { font-size: 15px; }

  .hero-btn { min-width: auto; width: 100%; padding: 16px; }

  .card { padding: 24px; }

  .category-grid,
  .classification-grid,
  .cases-grid { grid-template-columns: 1fr; }

  .hub-grid { grid-template-columns: 1fr; }
  .hub-card { padding: 20px 18px; }

  .callout-box { flex-direction: column; align-items: flex-start; }

  /* потужності: 2 в ряд, чипи — горизонтальний скрол одним рядком */
  .pw-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .pw-card { padding: 18px 16px 14px; }
  .pw-chips {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 2px 10px;
    margin-bottom: 32px;
    max-width: none;
  }
  .pw-chips::-webkit-scrollbar { display: none; }
  .pw-chip { flex: 0 0 auto; }
}

@media (max-width: 600px) {
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .systems-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  h1 { font-size: 28px; }
  h2 { font-size: 22px; }
  .hero-list li { font-size: 14px; }
}

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