/* =====================================================================
   style.css — статические стили сайта Елены Савадеровой
   Заменяет собой скрипт https://cdn.tailwindcss.com (он и был причиной
   того, что сайт открывался без оформления: у части посетителей этот
   внешний скрипт из сети Cloudflare не загружается/блокируется, и без
   него ни один Tailwind-класс не превращается в реальный CSS).
   Здесь все нужные классы уже переведены в обычный CSS, поэтому сайт
   будет выглядеть одинаково у всех, независимо от блокировок CDN.
   ===================================================================== */

/* ---------- Базовый сброс (было в <style> внутри html) ---------- */
html, body { width: 100vw; margin: 0; padding: 0; }
body { overscroll-behavior: none; -webkit-font-smoothing: antialiased; }
*::-webkit-scrollbar { display: none; }
.pt-safe { padding-top: env(safe-area-inset-top, 0px); }
.pb-safe { padding-bottom: env(safe-area-inset-bottom, 0px); }
main > :first-child { margin-top: 0 !important; }
main > :last-child { margin-bottom: 0 !important; }

/* ---------- Иконки Material Symbols ---------- */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* ---------- Анимация "ripple" (было в исходном файле) ---------- */
@keyframes ripple-wave {
  0% { transform: scale(0.85); opacity: 0.55; }
  50% { opacity: 0.25; }
  100% { transform: scale(1.65); opacity: 0; }
}
@keyframes ripple-wave-delay {
  0% { transform: scale(0.8); opacity: 0.45; }
  50% { opacity: 0.2; }
  100% { transform: scale(1.9); opacity: 0; }
}
.ripple-effect::before, .ripple-effect::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background-color: #2a4736;
  pointer-events: none;
  z-index: 0;
}
.ripple-effect::before { animation: ripple-wave 2.6s cubic-bezier(0,0.2,0.8,1) infinite; }
.ripple-effect::after { animation: ripple-wave-delay 2.6s cubic-bezier(0,0.2,0.8,1) infinite 1.2s; }

/* ---------- Цветовая палитра ---------- */
:root {
  --tertiary-fixed: 236 225 210;
  --primary: 19 48 33;
  --on-surface: 26 28 27;
  --surface-variant: 226 227 224;
  --surface-container-low: 244 244 241;
  --on-surface-variant: 66 72 67;
  --on-secondary: 255 255 255;
  --on-primary-container: 148 181 159;
  --on-tertiary: 255 255 255;
  --on-primary: 255 255 255;
  --surface-container: 238 238 236;
  --surface: 249 249 247;
  --secondary: 141 77 58;
  --primary-container: 42 71 54;
  --secondary-fixed: 255 219 209;
  --primary-fixed: 201 235 211;
  --tertiary: 48 42 32;
  --secondary-container: 253 169 146;
  --on-secondary-container: 120 60 43;
  --error: 186 26 26;
  --surface-container-lowest: 255 255 255;
  --primary-fixed-dim: 173 206 184;
}

.bg-primary { background-color: rgb(var(--primary)); }
.bg-primary-container { background-color: rgb(var(--primary-container)); }
.bg-secondary { background-color: rgb(var(--secondary)); }
.bg-surface { background-color: rgb(var(--surface)); }
.bg-surface-container { background-color: rgb(var(--surface-container)); }
.bg-surface-container-low { background-color: rgb(var(--surface-container-low)); }
.bg-surface-container-lowest { background-color: rgb(var(--surface-container-lowest)); }

.bg-primary\/10 { background-color: rgb(var(--primary) / 0.10); }
.bg-secondary\/10 { background-color: rgb(var(--secondary) / 0.10); }
.bg-secondary\/20 { background-color: rgb(var(--secondary) / 0.20); }
.bg-surface\/85 { background-color: rgb(var(--surface) / 0.85); }
.bg-surface\/90 { background-color: rgb(var(--surface) / 0.90); }

.text-on-primary { color: rgb(var(--on-primary)); }
.text-on-secondary { color: rgb(var(--on-secondary)); }
.text-on-surface { color: rgb(var(--on-surface)); }
.text-on-surface-variant { color: rgb(var(--on-surface-variant)); }
.text-on-surface-variant\/80 { color: rgb(var(--on-surface-variant) / 0.80); }
.text-primary { color: rgb(var(--primary)); }
.text-primary-fixed { color: rgb(var(--primary-fixed)); }
.text-primary-fixed-dim { color: rgb(var(--primary-fixed-dim)); }
.text-secondary { color: rgb(var(--secondary)); }
.text-secondary-fixed { color: rgb(var(--secondary-fixed)); }
.text-surface { color: rgb(var(--surface)); }
.text-surface-variant { color: rgb(var(--surface-variant)); }

.border-surface-container { border-color: rgb(var(--surface-container)); }

.hover\:bg-surface-container:hover { background-color: rgb(var(--surface-container)); }
.hover\:bg-secondary\/90:hover { background-color: rgb(var(--secondary) / 0.90); }
.active\:bg-surface-container:active { background-color: rgb(var(--surface-container)); }
.selection\:bg-secondary\/20::selection { background-color: rgb(var(--secondary) / 0.20); }
.selection\:text-secondary::selection { color: rgb(var(--secondary)); }

/* Градиенты (используются ровно в двух сочетаниях в макете) */
.bg-gradient-to-t.from-primary\/80.via-transparent.to-transparent {
  background-image: linear-gradient(to top, rgb(var(--primary) / 0.80), transparent, transparent);
}
.bg-gradient-to-t.from-primary\/95.via-primary\/40.to-transparent {
  background-image: linear-gradient(to top, rgb(var(--primary) / 0.95), rgb(var(--primary) / 0.40), transparent);
}

/* ---------- Шрифты (семейства) ---------- */
.font-headline-lg-mobile, .font-display-hero, .font-display-hero-mobile,
.font-headline-md, .font-headline-sm, .font-title-editorial, .font-headline-lg {
  font-family: 'Playfair Display', serif;
}
.font-body-lg, .font-body-md, .font-label-sm, .font-body-sm, .font-label-md {
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ---------- Размеры шрифта (кегль/интерлиньяж/трекинг/насыщенность) ---------- */
.text-headline-lg-mobile { font-size: 28px; line-height: 36px; letter-spacing: -0.01em; font-weight: 500; }
.text-display-hero { font-size: 56px; line-height: 64px; letter-spacing: -0.02em; font-weight: 500; }
.text-body-lg { font-size: 18px; line-height: 27px; letter-spacing: -0.01em; font-weight: 400; }
.text-body-md { font-size: 16px; line-height: 24px; letter-spacing: 0em; font-weight: 400; }
.text-label-sm { font-size: 11px; line-height: 16px; letter-spacing: 0.08em; font-weight: 600; }
.text-display-hero-mobile { font-size: 38px; line-height: 46px; letter-spacing: -0.01em; font-weight: 500; }
.text-body-sm { font-size: 14px; line-height: 21px; letter-spacing: 0em; font-weight: 400; }
.text-headline-md { font-size: 28px; line-height: 36px; letter-spacing: -0.01em; font-weight: 500; }
.text-headline-sm { font-size: 22px; line-height: 30px; letter-spacing: -0.005em; font-weight: 600; }
.text-title-editorial { font-size: 18px; line-height: 26px; letter-spacing: 0.01em; font-weight: 500; }
.text-label-md { font-size: 13px; line-height: 18px; letter-spacing: 0.04em; font-weight: 600; }
.text-headline-lg { font-size: 40px; line-height: 48px; letter-spacing: -0.015em; font-weight: 500; }

/* Произвольные размеры (иконки/уточнения) */
.text-\[11px\]{font-size:11px} .text-\[12px\]{font-size:12px} .text-\[14px\]{font-size:14px}
.text-\[16px\]{font-size:16px} .text-\[18px\]{font-size:18px} .text-\[20px\]{font-size:20px}
.text-\[22px\]{font-size:22px} .text-\[24px\]{font-size:24px} .text-\[28px\]{font-size:28px}

/* ---------- Радиусы скругления ---------- */
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-md { border-radius: 0.375rem; }
.rounded-full { border-radius: 9999px; }

/* ---------- Тени ---------- */
.shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
.shadow-xs { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04); }
.shadow-md { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }
.shadow-\[0_-8px_32px_rgba\(42\,71\,54\,0\.06\)\]{ box-shadow: 0 -8px 32px rgba(42,71,54,0.06); }
.shadow-\[0_2px_8px_rgba\(42\,71\,54\,0\.04\)\]{ box-shadow: 0 2px 8px rgba(42,71,54,0.04); }
.shadow-\[0_2px_8px_rgba\(42\,71\,54\,0\.08\)\]{ box-shadow: 0 2px 8px rgba(42,71,54,0.08); }
.shadow-\[0_4px_16px_rgba\(141\,77\,58\,0\.22\)\]{ box-shadow: 0 4px 16px rgba(141,77,58,0.22); }
.shadow-\[0_4px_24px_rgba\(42\,71\,54\,0\.03\)\]{ box-shadow: 0 4px 24px rgba(42,71,54,0.03); }

/* ---------- Отступы (spacing) ---------- */
.gap-1{gap:.25rem} .gap-1\.5{gap:.375rem} .gap-2{gap:.5rem} .gap-2\.5{gap:.625rem}
.gap-3{gap:.75rem} .gap-3\.5{gap:.875rem} .gap-4{gap:1rem} .gap-5{gap:1.25rem}

.p-1{padding:.25rem} .p-2\.5{padding:.625rem} .p-3{padding:.75rem} .p-3\.5{padding:.875rem}
.p-4{padding:1rem} .p-5{padding:1.25rem}
.px-1{padding-left:.25rem;padding-right:.25rem}
.px-2{padding-left:.5rem;padding-right:.5rem}
.px-2\.5{padding-left:.625rem;padding-right:.625rem}
.px-3{padding-left:.75rem;padding-right:.75rem}
.px-margin-mobile{padding-left:1.25rem;padding-right:1.25rem}
.px-space-sm{padding-left:.75rem;padding-right:.75rem}
.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}
.py-1{padding-top:.25rem;padding-bottom:.25rem}
.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}
.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}
.py-8{padding-top:2rem;padding-bottom:2rem}
.pt-3{padding-top:.75rem} .pt-4{padding-top:1rem} .pt-16{padding-top:4rem}
.pb-2{padding-bottom:.5rem} .pb-8{padding-bottom:2rem} .pb-28{padding-bottom:7rem}
.pl-1{padding-left:.25rem} .pr-2{padding-right:.5rem}

.ml-1{margin-left:.25rem}
.mt-0\.5{margin-top:.125rem} .mt-1{margin-top:.25rem} .mt-1\.5{margin-top:.375rem}
.mt-2{margin-top:.5rem} .mt-3{margin-top:.75rem}
.mx-auto{margin-left:auto;margin-right:auto}

/* ---------- Размеры (ширина/высота) ---------- */
.w-8{width:2rem} .w-9{width:2.25rem} .w-11{width:2.75rem} .w-28{width:7rem} .w-full{width:100%}
.h-8{height:2rem} .h-9{height:2.25rem} .h-11{height:2.75rem} .h-16{height:4rem}
.h-28{height:7rem} .h-44{height:11rem} .h-72{height:18rem} .h-full{height:100%}
.min-h-\[46px\]{min-height:46px} .min-h-\[48px\]{min-height:48px}
.min-h-\[50px\]{min-height:50px} .min-h-\[52px\]{min-height:52px}
.max-w-md{max-width:28rem}
.aspect-\[4\/5\]{aspect-ratio:4/5}

/* ---------- Позиционирование ---------- */
.relative{position:relative} .absolute{position:absolute} .fixed{position:fixed}
.inset-0{top:0;right:0;bottom:0;left:0}
.top-0{top:0} .bottom-0{bottom:0}
.left-3{left:.75rem} .right-3{right:.75rem} .bottom-3{bottom:.75rem}
.-top-8{top:-2rem} .-right-8{right:-2rem}
.z-10{z-index:10} .z-50{z-index:50}

/* ---------- Flex / Grid ---------- */
.flex{display:flex} .inline-flex{display:inline-flex} .flex-col{flex-direction:column}
.flex-1{flex:1 1 0%} .shrink-0{flex-shrink:0}
.grid{display:grid} .grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.items-center{align-items:center} .items-start{align-items:flex-start}
.justify-center{justify-content:center} .justify-between{justify-content:space-between}
.self-center{align-self:center} .self-start{align-self:flex-start}
.min-w-0{min-width:0}
.hidden{display:none}

/* ---------- Текст ---------- */
.uppercase{text-transform:uppercase} .italic{font-style:italic} .font-normal{font-weight:400}
.text-center{text-align:center} .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.leading-none{line-height:1} .leading-tight{line-height:1.25}
.leading-snug{line-height:1.375} .leading-relaxed{line-height:1.625}
.tracking-tight{letter-spacing:-0.025em} .tracking-wide{letter-spacing:0.025em}
.tracking-wider{letter-spacing:0.05em} .tracking-widest{letter-spacing:0.1em}

/* ---------- Прочее визуальное оформление ---------- */
.overflow-hidden{overflow:hidden}
.pointer-events-none{pointer-events:none}
.object-cover{object-fit:cover} .object-top{object-position:top}
.opacity-80{opacity:.8}
.border-b{border-bottom-width:1px;border-bottom-style:solid}
.backdrop-blur-md{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.backdrop-blur-xl{backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.blur-xl{filter:blur(24px)}

/* ---------- Переходы и активные состояния ---------- */
.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}
.transition-colors{transition-property:color,background-color,border-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}
.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}
.active\:scale-\[0\.98\]:active{transform:scale(.98)}
.active\:scale-\[0\.99\]:active{transform:scale(.99)}

/* ---------- Адаптивность (мобильный вид уже базовый, десктоп не требуется для данного макета) ---------- */


/* =====================================================================
   АДАПТИВНОСТЬ — ДЕСКТОП
   Все мобильные стили выше остаются нетронутыми; этот блок срабатывает
   только при ширине экрана ≥ 768px и переопределяет нужные правила.
   ===================================================================== */

/* ---- Контейнеры ---- */
.content-container {
  /* средняя колонка: контент не шире 760px, выровнен по центру */
}
.content-container--wide {
  /* широкая колонка: контент не шире 1100px, выровнен по центру */
}

@media (min-width: 768px) {

  /* ── Body/main ── */
  body { max-width: 100%; }

  main {
      /* убираем отступ под мобильный нав-бар */
    padding-bottom: 0 !important;
  }

  /* ── Фиксированная нижняя навигация скрыта на десктопе ── */
  nav[data-active-classes] {
    display: none;
  }

  /* ── Хедер: фиксирован, контент ограничен шириной ── */
  header .content-container--wide,
  header > div > .content-container--wide {
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
  }

  header > div {
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  /* ── Секции: горизонтальные паддинги → авто-центровка ── */
  .px-margin-mobile {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  /* Контент-обёртки */
  .content-container {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
  .content-container--wide {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }

  /* ── Hero ── */
  .hero-layout {
    display: grid;
    grid-template-columns: 1fr 420px;
    grid-template-rows: auto auto auto;
    column-gap: 3rem;
    align-items: start;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
  /* Бейдж и заголовок — левая колонка, строки 1-2 */
  .hero-badge       { grid-column: 1; grid-row: 1; }
  .hero-heading     { grid-column: 1; grid-row: 2; }
  .hero-ctas        { grid-column: 1; grid-row: 3; margin-top: 1.5rem; }
  .hero-metrics     { grid-column: 1; grid-row: 4; }
  /* Визуал — правая колонка, все строки */
  .hero-visual {
    grid-column: 2;
    grid-row: 1 / 5;
    margin-top: 0 !important;
    position: sticky;
    top: 5rem;
  }
  /* Фиксируем пропорцию фото — не на всю ширину, но красиво */
  .hero-visual .aspect-\[4\/5\] {
    aspect-ratio: 4/5;
    max-height: 80vh;
  }

  /* ── Типографика на десктопе ── */
  .text-display-hero-mobile { font-size: 48px; line-height: 56px; }

  /* ── Editorial photo tiles: фиксированная высота ── */
  .tile-photo { height: 220px; object-fit: cover; }

  /* ── Energy card photo ── */
  .energy-photo-frame { height: 420px; }

  /* ── Facilities grid: 4 колонки ── */
  .facilities-grid { grid-template-columns: repeat(4, 1fr) !important; }

  /* ── Pricing grid: 3 карточки в ряд ── */
  .pricing-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    align-items: stretch;
  }
  /* Каждая карточка становится flex-колонкой */
  .pricing-grid > div {
    display: flex;
    flex-direction: column;
  }
  /* CTA всегда у нижнего края карточки */
  .pricing-grid > div .cta-bottom {
    margin-top: auto !important;
  }

  /* ── Нижняя navbar скрыта, pb-28 сбрасывается ── */
  .pb-28 { padding-bottom: 2rem !important; }

  /* ── Десктопный хедер: правый блок иконок ── */
  header .flex.items-center.gap-1\.5.shrink-0 {
    gap: 0.5rem;
  }

  /* Мобильный CTA-текст делаем немного крупнее */
  .text-label-md { font-size: 13px; }

  /* Сетка метрик: шире ячейки */
  .hero-metrics { grid-template-columns: repeat(4, 1fr); display: grid; }

}

@media (min-width: 1024px) {
  .px-margin-mobile {
    padding-left: 3rem;
    padding-right: 3rem;
  }
  .hero-layout {
    grid-template-columns: 1fr 460px;
    column-gap: 4rem;
  }
  .text-display-hero-mobile { font-size: 54px; line-height: 62px; }

  /* Metrics grid нормально влезает в 4 клетки */
  .hero-metrics.grid-cols-2 {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

@media (min-width: 768px) {
  /* Убираем sticky у нижней nav, которая скрыта */
  nav[data-active-classes] { position: static; }
}



/* ── Десктопный хедер: добавляем ссылки-навигацию ── */
@media (min-width: 768px) {
  /* Мобильная иконка «Меню» скрыта на десктопе */
  a[aria-label="Меню"] { display: none; }

  /* Панель фото в хедере тоже скрыта (дублирует логотип) */
  header img[alt="Profile"] { display: none; }
}

/* ── Исправление: секции не должны иметь горизонтальный скролл ── */
section { overflow: hidden; }

/* ── Исправление: изображения не выходят за границы ── */
img { max-width: 100%; }

/* ── Исправление: hero-visual не сжимается ── */
@media (min-width: 768px) {
  .hero-visual img { object-fit: cover; object-position: top; width: 100%; }
}

/* ── Metrics 4-col on desktop (override grid-cols-2) ── */
@media (min-width: 1024px) {
  #key-metrics-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* ── Tiles в about-секции: высота через aspect-ratio если нет tile-photo ── */
@media (max-width: 767px) {
  .tile-photo { height: 11rem; }      /* восстанавливаем мобильный h-44 */
  .energy-photo-frame { height: 18rem; } /* восстанавливаем мобильный h-72 */
}

/* ── Убрать отступ pb-28 на десктопе ── */
@media (min-width: 768px) {
  main.pb-28 { padding-bottom: 3rem !important; }
  /* main не имеет pb-28 как класс, но его padding-bottom задан inline-классом */
  main { padding-bottom: 3rem !important; }
}