:root{
  --bg:#fffdfa; --ink:#161616; --muted:#5b5b5b;
  --accent:#e9694e; --soft:#fff2ea; --card:#fff;
  --shadow:0 10px 28px rgba(0,0,0,.08)
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;line-height:1.65;
  scroll-behavior:smooth}
a{color:#1b7e86;text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
img{max-width:100%;height:auto;display:block}

.topbar{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid #eee;
  display:flex;justify-content:space-between;align-items:center;padding:10px 16px}
nav{display:flex;gap:12px;flex-wrap:wrap}
.btn{border:1px solid #ddd;border-radius:12px;padding:8px 12px;display:inline-block;transition:transform .12s ease, box-shadow .12s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.06)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.ghost{border-color:#ccc;background:transparent}
.btn.outline{border-color:var(--accent);color:var(--accent);background:#fff}

.section{padding:56px 0}
.section.alt{background:#fff}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:12px}
.card{background:var(--card);border:1px solid #eee;border-radius:16px;padding:16px;box-shadow:var(--shadow)}
.badges{display:flex;flex-wrap:wrap;gap:8px}
.badge{border:1px solid #eee;border-radius:999px;padding:6px 10px;background:#fff}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.gallery img{width:100%;height:230px;object-fit:cover;border-radius:10px;box-shadow:var(--shadow)}
.small{font-size:.92rem;color:var(--muted)}
footer{padding:36px 0;border-top:1px solid #eee;color:var(--muted)}
.to-top{float:right;margin-left:10px}

/* --- HERO polished --- */
.hero--overlay{
  position: relative;
  min-height: 72vh;
  display: grid;
  align-items: center;
  overflow: hidden;
  border-radius: 20px;
  margin: 24px 0;
  background: linear-gradient(180deg,#fff,var(--soft));
}
.hero--overlay .hero-content{
  position: relative;
  z-index: 2;
  padding: clamp(20px, 6vw, 60px);
  max-width: 760px;
  animation: herofade .7s ease-out both;
}
.hero--overlay .hero-kicker{
  font-size: 0.95rem;
  letter-spacing: .02em;
  opacity: .85;
  margin-bottom: .25rem;
}
.hero--overlay h1{
  margin: .2rem 0 .75rem;
  line-height: 1.15;
}
.hero--overlay .lead{
  max-width: 60ch;
  opacity: .95;
}
.hero--overlay .cta{ margin-top: 1rem; display:flex; gap:.6rem; flex-wrap:wrap; }

/* фонове фото + затемнення
   ВАЖЛИВО: styles.css лежить у /assets, фото — у /assets/img
   Тому шлях повинен бути img/..., а не assets/img/... */
.hero--overlay .hero-bg{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, #0e0e0fcc 0%, #0e0e0f66 35%, transparent 62%),
    url("img/DSC_0900.JPG") center/cover no-repeat;
  filter: saturate(1.02);
}
@media (max-width: 980px){
  .hero--overlay{ min-height: 64vh; }
  .hero--overlay .hero-bg{
    background:
      linear-gradient(0deg, #0e0e0fcc 0%, #0e0e0f66 40%, transparent 70%),
      url("img/DSC_0900.JPG") center/cover no-repeat;
  }
}
@keyframes herofade{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }

/* приховування мов — тільки коли JS ставить hidden */
.uk[hidden], .en[hidden]{display:none !important;}

@media (max-width:900px){
  .cards{gap:12px}
}
/* HERO: ліворуч текст, праворуч фото в «рамочці» */
.hero--split{
  display:grid;
  grid-template-columns: minmax(320px,1.1fr) minmax(280px,0.9fr);
  gap: clamp(18px, 4vw, 28px);
  align-items:center;
  padding: clamp(28px, 6vw, 56px) 0;
  background: linear-gradient(180deg,#fff,var(--soft));
  border-radius: 20px;
  margin: 24px 0;
}
.hero--split .hero-content{
  padding-inline: clamp(16px, 3vw, 28px);
}
.hero--split .hero-img{
  height: clamp(600px, 48vh, 520px);
  border-radius: 18px;
  background: url("img/DSC_0900.JPG") center/cover no-repeat;
  box-shadow: var(--shadow);
  border: 1px solid #eee;
}

/* на мобілках фото під текстом, повна ширина */
@media (max-width: 900px){
  .hero--split{
    grid-template-columns: 1fr;
  }
  .hero--split .hero-img{
    height: 340px;
    margin: 4px 16px 0;
  }
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 15px;     /* відступ зверху */
  margin-bottom: 15px;  /* відступ знизу */
}
/* Центрування і повітря для блоків з бейджами */
.badges {
    display: flex;
    flex-wrap: wrap; /* щоб переносились на новий ряд */
    justify-content: center; /* центр по горизонталі */
    gap: 10px; /* відстань між бейджами */
    padding-left: 20px;  /* повітря зліва */
    padding-right: 20px; /* повітря справа */
}

/* Відступи між бейджами і текстом */
.badges + .badges {
    margin-top: 23px; /* як у тебе стоїть inline, але можна перенести в CSS */
}

/* Опціонально — щоб бейджі виглядали охайно */
.badge {
    padding: 6px 12px;
    border-radius: 15px;
    background: #f3f3f3;
    font-size: 14px;
    white-space: nowrap;
}