/* =========================================================
   SPASIBO — Base styles (cleaned & consolidated)
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  /* Цвета */
  --bg: #f9f7f5;
  --paper: #ffffff;
  --ink: #050505;
  --muted: #6f6b66;

  --accent: #647261;        /* основной брендовый зелёно‑серый */
  --accent-2: #9aa197;      /* светлый акцент */
  --accent-strong: #0f3a2a; /* насыщённый зелёный для заголовков/бейджей */

  --ring: rgba(100,114,97,.35);

  /* UI */
  --radius: 16px;
  --shadow: 0 16px 44px rgba(10,10,10,.08);
  --border: 1px solid #e8e3dd;
  --soft-bg: #f5faf7;

  /* Сетка */
  --container: 1140px;
}

/* ---------- Reset & base ---------- */
*{ box-sizing:border-box }
html, body{ margin:0; padding:0 }
html, body{ background:var(--bg); color:var(--ink) }
body{
  font:16px/1.65 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  text-rendering: optimizeLegibility;
}
a{ color:var(--accent); text-decoration:none }
a:hover{ text-decoration:underline }

/* Базовый контейнер */
.container{ max-width:1200px; margin:0 auto; padding:0 20px }

/* Кнопки */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.9rem 1.2rem; border-radius:999px; border:0;
  background:var(--accent); color:#fff; font-weight:600;
  box-shadow:var(--shadow);
  transition:.2s transform,.2s box-shadow,.2s background;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 14px 36px rgba(0,0,0,.12) }
.btn.outline{ background:transparent; color:var(--accent); border:1px solid var(--accent) }
.btn.primary{ background:#2e9a6d; box-shadow:0 6px 16px rgba(46,154,109,0.4) }
.btn.primary:hover{ background:#36b07b }
.btn.tg{ background:#2AABEE; color:#fff }
.btn.tg:hover{ background:#1A97D4 }
.btn.vk{ background:#0077FF; color:#fff }
.btn.vk:hover{ background:#005FCC }

.badge{
  display:inline-block; padding:.35rem .7rem; border-radius:999px;
  background:#ece7e3; color:var(--muted); font-weight:700; font-size:.8rem; letter-spacing:.02em;
}

/* ---------- Навигация ---------- */
.nav{
  position:sticky; top:0; z-index:20;
  background:rgba(245,240,237,.8);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid rgba(0,0,0,.05);
}
.nav .inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 0 }
.logo{ display:flex; align-items:center; gap:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase }
.logo .dot{ width:10px; height:10px; border-radius:50%; background:var(--accent) }
.menu{ display:flex; gap:22px }
.menu a{ font-weight:600; color:#302b27 }

/* ---------- Hero (full‑bleed) ---------- */
.hero{
  position:relative; overflow:hidden; border-radius:calc(var(--radius) + 12px); margin:24px 0;
  box-shadow:var(--shadow); display:flex; align-items:flex-end; min-height:clamp(460px, 82vh, 780px);
}

/* и видео, и картинка могут быть фоном hero */
.hero video,
.hero img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(.75);
}
.hero .overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,16,11,0) 0%, rgba(5,16,11,.5) 45%, rgba(5,16,11,.9) 100%);
  display:flex; align-items:flex-end;
}
.hero .copy{
  color:#fff; width:100%; max-width:var(--container);
  margin:0 auto; padding:64px 24px;
}
.hero .copy .badge{
  background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25);
  color:#fff; backdrop-filter:blur(6px);
}
.hero h1{ margin:0 0 .5rem 0; font-size:clamp(28px,4vw,52px); line-height:1.15; font-weight:700; text-shadow:0 4px 12px rgba(0,0,0,.3) }
.hero p{ margin:0 0 1.2rem 0; max-width:720px; color:#f2efed; font-size:clamp(16px,1.6vw,20px) }
.hero .cta-row{ display:flex; gap:12px; flex-wrap:wrap }

/* Full‑bleed трюк (выход из контейнера) */
@media (min-width: 641px){
  html, body { overflow-x:hidden; }
  .hero{
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    border-radius:0;
  }
}

/* ---------- Секции ---------- */
.section{ padding:56px 0 }
.section h2{ font-size:clamp(24px,3vw,36px); margin:0 0 18px 0 }

/* Унифицированный контейнер для дочерних элементов секций */
@media (min-width:641px){
  .section > *{
    max-width:var(--container);
    margin-left:auto; margin-right:auto;
    padding-left:16px; padding-right:16px;
  }
}

/* ---------- Услуги / каталог ---------- */
.chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:8px 0 16px;
  justify-content: center; /* выравниваем вкладки по центру */
}
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:999px; border:1px solid #e9e3db;
  background:#fff; color:#2b2b28; font-weight:700; letter-spacing:.02em;
  box-shadow:0 6px 16px rgba(0,0,0,.04); cursor:pointer; user-select:none;
}
.chip.active{ background:var(--accent); color:#fff; border-color:var(--accent) }

.catalog{ display:grid; gap:24px }
@media (max-width:640px){ .catalog{ grid-template-columns:1fr } }
@media (min-width:641px) and (max-width:899px){ .catalog{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (min-width:900px){ .catalog{ grid-template-columns:repeat(3, minmax(0,1fr)) } }

.card{
  background:var(--paper); border-radius:var(--radius); box-shadow:var(--shadow);
  overflow:hidden; display:flex; flex-direction:column; min-height:100%;
}
.card .media{ aspect-ratio:16/10; background:#ece7e3; display:flex; align-items:center; justify-content:center }
.card .media img{ width:100%; height:100%; object-fit:cover; display:block }
.card .body{ padding:18px }
.card h3{ margin:0 0 6px 0; font-size:1.1rem }
.card .meta{ color:#6b5d57; font-size:.92rem }

/* Карточки услуг (визуальная обводка) */
.card.service-card{ background:#fff; border:1px solid #e8e3dd; border-radius:24px; overflow:hidden; box-shadow:0 14px 34px rgba(0,0,0,.06) }
.card.service-card .media{ aspect-ratio:16/10; border-radius:18px; overflow:hidden; margin:14px; background:#eee }
.card.service-card .body{ padding:0 18px 18px 18px }
.tags{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 8px }
.tag{ display:inline-flex; align-items:center; padding:8px 12px; border-radius:999px; background:#f2efea; color:#6f6b66; border:1px solid #e8e3dd; font-weight:700; font-size:.84rem }
.card.service-card h3{ font-size:1.24rem; margin:6px 0 6px 0; line-height:1.2; color:#121212 }
.price-line{ color:#3a3a38; font-size:1rem; margin-bottom:12px }
.cta{ display:block; text-align:center; padding:14px 18px; border-radius:999px; background:var(--accent); color:#fff; font-weight:800; letter-spacing:.02em; box-shadow:0 12px 28px rgba(100,114,97,.28) }
.cta:hover{ filter:brightness(1.04) }

#services h2{
  text-align: center;
}

/* ---------- Почему мы ---------- */
#why{ background:linear-gradient(180deg, #ffffff 0%, var(--soft-bg) 100%) }
#why h2{ text-align:center; margin:18px auto 14px }
#why .why{ display:grid; grid-template-columns:1fr; gap:12px }
#why .item{
  background:#fff; border:var(--border); border-radius:var(--radius);
  padding:16px; box-shadow:var(--shadow);
}
#why .item .badge{
  display:inline-block; padding:6px 10px; border-radius:999px;
  background:#e8efe9; border:1px solid #d6e4db; color:var(--accent-strong);
  font-size:12px; font-weight:700;
}
#why .item h3{ margin:8px 0 6px; font-size:18px; line-height:1.3 }
#why .item p{ margin:0; color:#3e4b45; line-height:1.55 }
@media (min-width:641px){ #why .why{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px } }
@media (min-width:900px){ #why .why{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px } }

/* ---------- Отзывы ---------- */
#reviews{ background:#fcfdfc }
#reviews h2{ text-align:center; margin:18px auto 14px }
#reviews .grid{ display:grid; grid-template-columns:1fr; gap:12px }
#reviews .review{
  position:relative; background:#fff; border:var(--border); border-radius:var(--radius);
  padding:16px 18px; box-shadow:var(--shadow); line-height:1.55;
}
#reviews .review strong{ display:block; margin-bottom:6px; color:var(--accent-strong) }
#reviews .review::before{
  content:"“"; position:absolute; top:6px; left:12px; font-size:52px; line-height:0; opacity:.12; pointer-events:none;
}
@media (min-width:641px){ #reviews .grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px } }
@media (min-width:900px){ #reviews .grid{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px } }

/* ---------- Как нас найти ---------- */
#map{ background:var(--soft-bg) }
#map h2{ text-align:center; margin:18px auto 14px }
#map .map-cta{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:#fff; border:var(--border); border-radius:calc(var(--radius) + 2px);
  padding:16px; box-shadow:var(--shadow);
}
#map .kicker{ font-size:15px; color:#3e4b45 }
#map .map-cta .btn{ padding:12px 16px; border-radius:12px; white-space:nowrap }

/* ---------- Команда ---------- */
  .team-section{
  text-align:center;
  background:#f8faf9;
  padding:60px 20px;
  border-radius:20px;
  box-shadow:inset 0 0 20px rgba(15,58,42,.05);
}

.team-header{
  max-width:400%;        /* чтобы текст не сжимался до 400px */
  margin:0 auto 40px;
   text-align: center;
}

.team-section h2{
  font-size:32px;
  color:var(--accent-strong);
  margin-bottom:10px;
}
.team-subtitle{
  color:#666;
  margin:0;
  font-size:16px;
  white-space: nowrap;   /* запрет переноса строк */
}
.team-wrapper{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
  max-width:1100px;
  margin:0 auto;
}
.team-card{
  background:#fff; border-radius:18px; overflow:hidden;
  box-shadow:0 8px 25px rgba(0,0,0,.08);
  transition:transform .3s ease, box-shadow .3s ease;
}
.team-card:hover{ transform:translateY(-8px); box-shadow:0 12px 35px rgba(0,0,0,.12) }
.team-photo{ position:relative; width:100%; aspect-ratio:3/4; overflow:hidden }
.team-photo img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease }
.team-card:hover .team-photo img{ transform:scale(1.05) }
.team-info{ padding:18px 16px 24px }
.team-info h3{ margin:8px 0 6px; color:var(--accent-strong); font-size:18px }
.team-info p{ font-size:15px; color:#555; line-height:1.5 }


/* ---------- Подарочные сертификаты ---------- */

#certificates{
  background: linear-gradient(180deg, #ffffff 0%, #f5faf7 100%);
}

#certificates .cert-head{
  max-width: 640px;
  margin: 0 auto 28px;
  text-align: center;
}

#certificates .cert-head p{
  margin: 8px 0 0;
  color: var(--muted);
}

.cert-grid{
  max-width: 880px;
  margin: 0 auto 24px;
  display: grid;
  gap: 18px;
}

@media (min-width: 768px){
  .cert-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.cert-card{
  background: #fff;
  border: var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 18px 20px 20px;
}

.cert-card h3{
  margin: 0 0 6px;
  font-size: 18px;
  color: var(--accent-strong);
}

.cert-card p{
  margin: 0;
  font-size: 15px;
  color: #3e4b45;
  line-height: 1.5;
}

.cert-cta{
  text-align: center;
  margin-top: 12px;
}

.cert-btn{
  padding: 0.95rem 1.8rem;
  font-size: 15px;
  background: var(--accent-strong);
}

.cert-btn:hover{
  filter: brightness(1.05);
}

.cert-note{
  margin-top: 10px;
  font-size: 14px;
  color: var(--muted);
}

/* Мобилка: делаем по одной карточке в ряд */
@media (max-width: 640px){
  .cert-list{
    grid-template-columns: 1fr;
  }
}


/* ---------- Прочее ---------- */
.footer{ padding:40px 0; border-top:1px solid rgba(0,0,0,.07); color:#6b5d57 }
.kicker{ display:flex; align-items:center; gap:8px; color:#6b5d57 }
.search{ display:flex; gap:8px }
.search input{
  padding:.8rem 1rem; border:1px solid rgba(0,0,0,.12);
  border-radius:999px; outline:none;
}
.banner{
  display:flex; justify-content:center; align-items:center;
  padding:8px 10px; background:#ece7e3; color:#6b5d57; border-radius:999px; font-weight:600;
}
.table{ width:100%; border-collapse:collapse; font-size:.95rem }
.table td, .table th{ padding:12px; border-bottom:1px solid rgba(0,0,0,.06); text-align:left }

/* ---------- Адаптив ---------- */
@media (max-width: 640px){
  .menu{ display:none }
  .hero{ border-radius:0; box-shadow:none }            /* на мобилке hero по ширине экрана и без лишней тени */
  .hero .copy{ padding:30px 16px 40px }
  .hero .cta-row{ gap:10px }
  .hero .btn{ width:100% }

  .chips{
    display:flex; gap:8px; overflow-x:auto; padding-bottom:6px;
    scroll-snap-type:x mandatory;
  }
  .chips .chip{ flex:0 0 auto; scroll-snap-align:start }
  .service-card{ border-radius:16px; box-shadow:0 8px 22px rgba(12,26,20,.08) }
  .service-card .media img{ height:208px }
  .service-card .body{ padding:12px 14px 14px }
  .service-card h3{ font-size:16px; line-height:1.3; margin:8px 0 }
  .service-card .price-line{ margin:6px 0 10px }
  .service-card .cta{ width:100%; border-radius:12px }
  .section{ margin-bottom:22px }
}

@media (max-width: 850px){
  .team-wrapper{ grid-template-columns:repeat(2, 1fr) }
}
@media (max-width: 600px){
  .team-wrapper{ grid-template-columns:1fr }
}

#services h2,
#services .chips,
#services .catalog{
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}