/* === BASE LAYOUT ========================================================= */
*{box-sizing:border-box}
html,body{height:100%}
:root{ --header-h:72px; --logo:64px; --logo-footer:48px; }

body{
  margin:0; padding-top:var(--header-h);
  background:var(--bg); color:var(--text);
  font:16px/1.6 var(--font);
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
.wrap{max-width:1100px;margin:0 auto;padding:0 clamp(16px,2vw,24px)}

/* header (fixed) */
.header{
  position:fixed; top:0; left:0; right:0; z-index:60;
  background:var(--header-bg);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:.75rem 0}
.logo{display:flex;align-items:center;gap:.5rem;color:var(--text)}
.logo-img{width:var(--logo);height:var(--logo);display:block}
.menu{display:flex;gap:18px;align-items:center;flex-wrap:wrap}

/* кнопки (геометрия) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;padding:.6rem 1rem;border-radius:999px;font-weight:700;line-height:1}

/* hero + секции */
.grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(20px,3vw,40px);align-items:center;padding:clamp(36px,6vw,72px) 0;row-gap:clamp(12px,2vw,20px)}
@media (max-width:900px){.grid{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:clamp(16px,2vw,22px)}
.media{object-fit:cover;border-radius:16px}
h1{font-size:clamp(28px,4vw,40px);line-height:1.2;margin:.2em 0 .4em}
h2{font-size:clamp(20px,2.6vw,28px);margin:0 0 .6em}
.muted{color:var(--muted)}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}

.section{padding:clamp(36px,6vw,72px) 0;border-top:1px solid var(--line)}

/* === Чёткое чередование ================================================== */
.sec > .text   { grid-area:text; }
.sec > .visual { grid-area:visual; }

.sec{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  grid-template-areas: "text visual";
  gap: clamp(20px,3vw,40px);
  align-items:center;
}
.sec.reverse{
  grid-template-columns: .95fr 1.05fr;
  grid-template-areas: "visual text";
}

/* мобила: у КАЖДОЙ секции сначала текст, потом фото — чтобы не было двух фото подряд */
@media (max-width:900px){
  .sec{ grid-template-columns:1fr; grid-template-areas:"text" "visual"; }
  .sec.reverse{ grid-template-columns:1fr; grid-template-areas:"text" "visual"; }
}

/* хедер повыше на узких и кнопка — в первую строку справа */
@media (max-width:560px){
  :root{ --header-h:120px; }
  .nav{ padding:.6rem 0; align-items:flex-start; }
  .menu{ gap:12px 14px; flex-wrap:wrap; width:100%; }
  .menu .btn{ order:-1; margin-left:auto; } /* поднять «Записатися» */
  .menu a{ font-size:.95rem; }
}
/* якоря не уезжают под фикс-хедер */
[id]{ scroll-margin-top: calc(var(--header-h) + 12px); }

/* footer + socials */
.footer{padding:40px 0;border-top:1px solid var(--line);color:var(--muted)}
.footer-brand{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;color:var(--text)}
.footer-brand .logo-img{width:var(--logo-footer);height:var(--logo-footer)}
.foot-grid{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.foot-grid .links{display:flex;gap:16px;flex-wrap:wrap}
.foot-grid a[aria-disabled="true"]{opacity:.6;pointer-events:none}

.socials{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:14px}
.social{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--accent);transition:background .2s cubic-bezier(.16,1,.3,1), transform .06s;color:var(--accent)}
.social:hover{background:var(--accent-soft)}
.social img,.social svg{width:20px;height:20px;display:block}

/* картинка без рамок, если у тега есть .card */
img.card,.card.media{border:0!important;padding:0!important;background:transparent!important;box-shadow:none!important}

/* финально прибиваем размеры логотипа */
.header .logo .logo-img{ width:64px !important; height:64px !important; }
.footer .footer-brand .logo-img{ width:48px !important; height:48px !important; }

/* === PROMO tune ========================================================= */
.promo{
  /* уже центрировано; сузим карточку */
  max-width: 680px;              /* было 820 */
  margin: 1rem auto 0;
  text-align: center;
  padding: 20px 18px;            /* компактнее по вертикали */
}

/* тонкая золотая кайма у карточки */
.promo.card{
  box-shadow: 0 0 0 1px var(--accent) inset, 0 6px 24px rgba(0,0,0,.08);
}

/* таймер в один ряд и «толще» цифры */
.promo__timer{
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 10px 0 14px;
}

.promo__timer div{
  min-width: 78px;
  padding: .55rem .35rem;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.promo__timer span{
  display: block;
  font-size: 1.45rem;            /* крупнее */
  font-weight: 800;              /* толще */
  line-height: 1.1;
  color: var(--accent);          /* золотой */
}

.promo__timer small{
  display: block;
  margin-top: 2px;
  opacity: .9;
}

/* кнопка уже по центру; чуть короче */
.promo__cta{ max-width: 520px; }

@media (min-width:1000px){
  .promo__title{ font-size: 1.9rem; }
  .promo__timer div{ min-width: 90px; }
}

/* === HEADER: мобильный двухрядный лайаут ================================ */
@media (max-width:560px){
  :root{ --header-h:132px; }                 /* чутка выше фикс-хедера */
  .nav{ display:flex; flex-wrap:wrap; align-items:flex-start; }
  .menu{
    width:100%;
    display:flex;
    flex-wrap:wrap;                          /* переносим на 2 строки */
    align-items:center;
    gap:10px 16px;                           /* row/col gap */
  }
  .menu .btn{
    order:-1;                                /* кнопка в первую строку */
    margin-left:auto;                        /* прижать вправо */
  }
  .menu a:not(.btn){
    font-size:.95rem;                        /* компактнее ссылки */
    padding:.25rem 0;
    flex:0 0 auto;
  }
}

/* супер-узкие (старые 320–360px) — кнопка компактнее */
@media (max-width:380px){
  .btn{ padding:0 14px; }
  .btn.lg{ padding:0 18px; font-size:1rem; }
}

/* ссылка "Детальніше" в промо */
.promo__more{ margin:.5rem 0 .25rem }
.link-more{
  font-weight:700;
  color: var(--accent);
  text-decoration: none;
}
.link-more:hover{ text-decoration: underline; }

/* компактнее вертикальные отступы на контентных страницах */
.section{ padding: 28px 0; }                 /* было больше — делаем плотнее */
.section .card{ margin: 0 auto 24px; }       /* между карточками меньше зазор */

.card h1, .card .title-text-2{ margin: 0 0 12px; }
.card h2{ margin: 0 0 10px; }
.card p{ margin: 8px 0 12px; }
.card ul{ margin: 8px 0 12px 1.1rem; }

@media (min-width: 960px){
  .section{ padding: 36px 0; }
  .section .card{ margin-bottom: 28px; }
}

/* для блока с аурой — убрать “лишний воздух” сверху/снизу */
.bg-aura.section{ padding-top: 24px; padding-bottom: 24px; }

/* если промо слишком отрывается сверху/снизу на десктопе */
#group-promo{ margin-top: 12px; margin-bottom: 16px; }