.hero {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("/wp-content/uploads/2026/05/hero.jpg") center / cover no-repeat;
    position: relative;
    padding: 351px 20px 331px;
    border-radius: 12px;
    margin: -80px 20px 0;
}
.hero::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    background: linear-gradient(0.1deg, rgba(0, 0, 0, 0) 3.22%, rgba(0, 0, 0, 0.64) 99.92%);
    border-radius: 12px;
}
.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1090px;
    margin: 0 auto;
    z-index: 10;
    position: relative;
}
h1 {
    font-weight: 700;
    font-size: clamp(34px, 2rem + 1.4vw, 54px);
    line-height: 122%;
    text-align: center;
    margin: 0 0 40px;
    color: var(--White);
}
.glass {
      padding: 34px 38px;
      background: rgba(12, 11, 9, 0.42);
      border-radius: 30px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: 
        0 8px 32px -8px rgba(0, 0, 0, 0.4),
        inset 0 2px 12px rgba(255, 255, 255, 0.2),
        inset 0 -2px 8px rgba(0, 0, 0, 0.2);
      
      /* Основний Glass ефект */
      backdrop-filter: blur(10px) saturate(180%);
      
      /* Додаткові ефекти для імітації Refraction + Frost */
      position: relative;
      overflow: hidden;
    }

    /* Внутрішній світловий блик (Light at -45°) */
    .glass::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 80%;
      height: 80%;
      background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.35) 0%,
        rgba(255, 255, 255, 0.08) 40%,
        transparent 70%
      );
      transform: rotate(-45deg);
      pointer-events: none;
      z-index: 1;
      filter: blur(2px);
    }

    /* Frost + Dispersion шар */
    .glass::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(
        circle at 30% 20%,
        rgba(255, 255, 255, 0.15) 0%,
        transparent 60%
      );
      border-radius: 30px;
      pointer-events: none;
      z-index: 2;
      opacity: 0.6;
    }

.glass > * {
    position: relative;
    z-index: 3;
}
.glass p {
    font-weight: 400;
    font-size: 20px;
    line-height: 170%;
    color: var(--White);
    margin: 0 0 30px;
}
.glass a {
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: var(--Black);
    padding: 16px 40px;
    display: inline-flex;
    gap: 8px;
    align-items: center;
    background: var(--Accent);
    border-radius: 64px;
}

/* =========================================================
   About (Про нас) & Contacts (Контакти) pages + city popup
   (kept here in the shared stylesheet by request)
   ========================================================= */

/* --- Shared primitives (scoped to the two new pages) --- */
.about-page .section-title,
.contacts-page .section-title {
  font-weight: 700;
  font-size: clamp(28px, 1.4rem + 1.6vw, 44px);
  line-height: 120%;
  color: var(--Black);
  margin: 0 0 16px;
}
.about-page .section-title--light,
.contacts-page .section-title--light { color: var(--White); }
.about-page .section-title--center,
.contacts-page .section-title--center { text-align: center; }
.about-page .section-text,
.contacts-page .section-text { font-size: 16px; line-height: 175%; color: var(--Text); margin: 0; }
.about-page .container-block,
.contacts-page .container-block {
  padding-left: clamp(1rem, -1.1348rem + 8.7582vw, 9.375rem);
  padding-right: clamp(1rem, -1.1348rem + 8.7582vw, 9.375rem);
  margin-top: var(--main-margin);
}
.about-page .ph,
.contacts-page .ph {
  background: repeating-linear-gradient(45deg, #ececec 0 12px, #f4f4f4 12px 24px);
  border-radius: 20px;
}

/* Buttons (generic, reused by hero & city popup) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-size: 16px; line-height: 24px; color: var(--Black);
  background: var(--Accent); border: none; border-radius: 64px; padding: 14px 32px;
  cursor: pointer; text-decoration: none; transition: filter .2s ease;
}
.btn:hover { filter: brightness(.95); }
.btn--outline { background: transparent; color: var(--Accent); border: 1px solid var(--Accent); }
.btn--outline:hover { background: rgba(239, 186, 64, .12); filter: none; }

/* Frosted text panel (over dark/image) */
.glass-panel {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  padding: clamp(24px, 3vw, 40px);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
}

/* --- About hero (reuses .hero base; only background differs) --- */
.hero--about {
  background:
    linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    repeating-linear-gradient(45deg, #15110b 0 16px, #1f1a12 16px 32px) !important;
}

/* --- Наша історія --- */
.about-page .story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
.about-page .ph--story { width: 100%; min-height: 360px; }

/* --- Наша місія --- */
.about-page .mission { margin-top: var(--main-margin); padding: 0 20px; }
.about-page .mission__inner {
  background:
    linear-gradient(90deg, rgba(0,0,0,0.85), rgba(0,0,0,0.3)),
    linear-gradient(120deg, #1a1340, #7a1f6b, #c0392b, #e8a83a);
  border-radius: 24px;
  padding: clamp(48px, 6vw, 90px) clamp(24px, 5vw, 64px);
  text-align: center;
}
.about-page .mission__box { max-width: 760px; margin: 24px auto 0; }
.about-page .mission__box p { color: rgba(255,255,255,0.9); font-size: 16px; line-height: 175%; margin: 0; text-align: center; }

/* --- Наші цінності --- */
.about-page .values__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 32px; }
.about-page .value-card { display: flex; gap: 16px; align-items: flex-start; background: #FBF8F2; border: 1px solid #EFE7D6; border-radius: 16px; padding: 24px; }
.about-page .value-card__num { font-size: 16px; font-weight: 800; color: var(--Accent); border: 1px solid rgba(239,186,64,0.5); border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; flex: 0 0 40px; }
.about-page .value-card__title { font-size: 18px; font-weight: 700; margin: 0 0 8px; color: var(--Black); }
.about-page .value-card__text { font-size: 14px; line-height: 160%; color: var(--Text); margin: 0; }

/* --- Contacts hero + form --- */
.contacts-page .contact-hero { margin-top: -80px; padding: 0 20px; }
.contacts-page .contact-hero__inner {
  background:
    linear-gradient(90deg, rgba(0,0,0,0.92), rgba(0,0,0,0.45)),
    repeating-linear-gradient(45deg, #1a1a1a 0 14px, #222 14px 28px);
  border-radius: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  padding: clamp(130px, 16vh, 200px) clamp(24px, 5vw, 80px) clamp(48px, 6vw, 90px);
}
.contacts-page .contact-hero__form { max-width: 480px; }
.contacts-page .contact-hero .section-title { text-align: left; margin-bottom: 28px; }
.contacts-page .ph--contact-hero { width: 100%; min-height: 340px; }
.contacts-page .contact-hero .wpcf7-form p { margin: 0 0 16px; }
.contacts-page .contact-hero input[type="text"],
.contacts-page .contact-hero input[type="tel"],
.contacts-page .contact-hero textarea {
  width: 100%; padding: 14px 18px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.08);
  color: var(--White); font-size: 15px;
}
.contacts-page .contact-hero textarea { min-height: 120px; resize: vertical; }
.contacts-page .contact-hero input::placeholder,
.contacts-page .contact-hero textarea::placeholder { color: rgba(255,255,255,0.5); }
.contacts-page .contact-hero .wpcf7-acceptance .wpcf7-list-item-label { color: rgba(255,255,255,0.7); font-size: 13px; }
.contacts-page .contact-hero input[type="submit"] {
  width: 100%; font-weight: 700; font-size: 16px; color: var(--Black); background: var(--Accent);
  border: none; border-radius: 64px; padding: 16px 32px; cursor: pointer;
}

/* --- Наші контакти --- */
.contacts-page .contacts-info__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: stretch; margin-top: 24px; }
.contacts-page .contacts-info__list { list-style: none; margin: 0; padding: clamp(20px, 3vw, 32px); background: #FBF8F2; border-radius: 20px; }
.contacts-page .contacts-info__list li { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid #EFE7D6; }
.contacts-page .contacts-info__list li:last-child { border-bottom: none; }
.contacts-page .contacts-info__list li span:first-child { font-weight: 700; color: var(--Black); }
.contacts-page .contacts-info__list li span:last-child { color: var(--Text); }
.contacts-page .ph--contacts { min-height: 220px; }

/* --- Наші офіси --- */
.contacts-page .offices__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 24px; }
.contacts-page .office__city { font-size: 20px; font-weight: 700; margin: 0 0 16px; color: var(--Black); }
.contacts-page .office__phone { display: inline-flex; align-items: center; gap: 8px; color: var(--Accent); font-weight: 600; text-decoration: none; margin-bottom: 16px; }
.contacts-page .office__map { border-radius: 16px; overflow: hidden; }
.contacts-page .office__map iframe { width: 100%; height: 300px; border: 0; display: block; }

/* --- "Чому обирають нас" banner (both pages) --- */
.why-choose {
  margin: var(--main-margin) 20px 0;
  border-radius: 24px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.25), rgba(0,0,0,0.6)),
    repeating-linear-gradient(45deg, #3a2f1a 0 16px, #4a3d22 16px 32px);
  padding: clamp(48px, 7vw, 120px) clamp(24px, 5vw, 72px);
  display: flex;
  justify-content: flex-end;
}
.why-choose__box { max-width: 620px; }
.why-choose__text { color: rgba(255,255,255,0.85); font-size: 16px; line-height: 170%; margin: 0; }

/* --- City-selection popup --- */
#city.popup-city {
  background: rgba(20, 18, 14, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border-radius: 24px;
  max-width: 720px;
  padding: clamp(28px, 4vw, 48px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.popup-city__title { font-size: clamp(22px, 2vw, 30px); font-weight: 700; color: var(--White); margin: 0 0 12px; }
.popup-city__text { color: rgba(255, 255, 255, 0.7); font-size: 16px; line-height: 160%; margin: 0 0 28px; }
.popup-city__actions { display: flex; gap: 16px; flex-wrap: wrap; }
.popup-city__actions .btn { min-width: 200px; }
.popup-city .close-popup--round {
  position: absolute; top: 18px; right: 18px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(239, 186, 64, 0.15); border: 1px solid var(--Accent);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.popup-city .close-popup--round svg { width: 18px; height: 18px; }
.popup-city .close-popup--round svg path { fill: var(--Accent); }

/* --- Responsive (new pages) --- */
@media (max-width: 1024px) {
  .about-page .story,
  .about-page .values__grid,
  .contacts-page .contact-hero__inner,
  .contacts-page .contacts-info__grid,
  .contacts-page .offices__grid { grid-template-columns: 1fr; }
  .why-choose { justify-content: flex-start; }
  h1 {
    font-size: 24px;
  }
  .hero {
    padding: 157px 16px 40px;
    margin: -80px 0 0;
    border-radius: 0;
  }
  .hero::before {
    border-radius: 0;
  }
}
@media (max-width: 600px) {
  .popup-city__actions .btn { width: 100%; min-width: 0; }
}