/* ============================================================
   Smart Baby — детский сад · стили
   Направление: тёплый национальный (терракот + песок)
   ============================================================ */

:root{
  --terra:      #c8612f;   /* основной терракот */
  --terra-dark: #a84e22;
  --terra-deep: #8a3f1b;
  --gold:       #e0a83e;
  --gold-soft:  #e8c98a;
  --cream:      #fbf3e7;
  --cream-2:    #f6e7cf;
  --sand:       #f4e0c4;
  --teal:       #2f9e9e;   /* акцент для разнообразия */
  --ink:        #4a2e15;   /* тёмно-коричневый текст */
  --ink-soft:   #7a5a3a;
  --white:      #ffffff;
  --shadow:     0 14px 38px rgba(122, 74, 30, .14);
  --shadow-sm:  0 6px 18px rgba(122, 74, 30, .10);
  --radius:     22px;
  --radius-sm:  14px;
  --maxw:       1160px;
  --ease:       cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:90px; }
body{
  font-family:'Nunito', system-ui, -apple-system, sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:'Comfortaa', cursive; line-height:1.2; color:var(--ink); }

.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 22px; }

/* ---------- Кнопки ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:'Nunito',sans-serif; font-weight:800; font-size:1rem;
  padding:.75em 1.5em; border-radius:999px; border:0; cursor:pointer;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s;
  white-space:nowrap; line-height:1;
}
.btn--lg{ padding:.95em 1.9em; font-size:1.05rem; }
.btn--block{ display:flex; width:100%; }
.btn--primary{ background:var(--terra); color:#fff; box-shadow:0 8px 20px rgba(200,97,47,.35); }
.btn--primary:hover{ background:var(--terra-dark); transform:translateY(-2px); box-shadow:0 12px 26px rgba(200,97,47,.45); }
.btn--ghost{ background:rgba(255,255,255,.85); color:var(--terra-deep); box-shadow:var(--shadow-sm); }
.btn--ghost:hover{ background:#fff; transform:translateY(-2px); }
.btn--wa{ background:#25d366; color:#fff; margin-top:10px; box-shadow:0 8px 20px rgba(37,211,102,.3); }
.btn--wa:hover{ background:#1eb455; transform:translateY(-2px); }

/* ---------- Верхняя полоса ---------- */
.topbar{ background:var(--terra-deep); color:#fff; font-size:.86rem; font-weight:600; }
.topbar__inner{ display:flex; align-items:center; justify-content:space-between; min-height:40px; gap:12px; }
.topbar__contacts{ display:flex; gap:18px; flex-wrap:wrap; align-items:center; }
.topbar__link{ opacity:.92; transition:opacity .2s; }
.topbar__link:hover{ opacity:1; }
.lang-switch{ display:flex; gap:4px; background:rgba(255,255,255,.12); border-radius:999px; padding:3px; }
.lang-btn{
  border:0; background:transparent; color:#fff; font-weight:800; font-size:.78rem;
  padding:4px 10px; border-radius:999px; cursor:pointer; opacity:.7; transition:all .2s;
}
.lang-btn:hover{ opacity:1; }
.lang-btn.is-active{ background:#fff; color:var(--terra-deep); opacity:1; }

/* ---------- Шапка ---------- */
.header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px); box-shadow:0 2px 16px rgba(122,74,30,.07); }
.header__inner{ display:flex; align-items:center; justify-content:space-between; min-height:72px; gap:16px; }

.logo{ display:flex; align-items:center; gap:11px; }
.logo__mark{
  width:44px; height:44px; flex:none; border-radius:14px;
  background:linear-gradient(135deg,var(--terra),var(--gold));
  color:#fff; font-family:'Comfortaa',cursive; font-weight:700; font-size:1.05rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 14px rgba(200,97,47,.35);
}
.logo__text{ display:flex; flex-direction:column; line-height:1.1; }
.logo__name{ font-family:'Comfortaa',cursive; font-weight:700; font-size:1.2rem; color:var(--terra-deep); }
.logo__sub{ font-size:.72rem; font-weight:700; color:var(--ink-soft); letter-spacing:.3px; }

.nav{ display:flex; align-items:center; gap:6px; }
.nav__link{ padding:8px 13px; border-radius:999px; font-weight:700; font-size:.95rem; color:var(--ink); transition:all .2s; }
.nav__link:hover{ background:var(--cream); color:var(--terra-deep); }
.nav__cta{ margin-left:8px; }

.burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; }
.burger span{ width:26px; height:3px; background:var(--terra-deep); border-radius:2px; transition:.3s; }
.burger.is-open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{ position:relative; color:#fff; overflow:hidden; }
.hero__bg{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(138,63,27,.78), rgba(168,78,34,.72)), url('../img/building.jpg') center/cover no-repeat;
}
.hero__inner{ position:relative; padding:84px 22px 120px; }
.hero__content{ max-width:660px; }
.hero__badge{
  display:inline-block; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.35);
  padding:7px 16px; border-radius:999px; font-weight:700; font-size:.85rem; margin-bottom:20px;
  backdrop-filter:blur(4px);
}
.hero__title{ color:#fff; font-size:clamp(2rem, 5vw, 3.4rem); margin-bottom:18px; text-shadow:0 2px 18px rgba(0,0,0,.25); }
.hero__text{ font-size:clamp(1.02rem,2vw,1.22rem); font-weight:600; opacity:.96; margin-bottom:30px; max-width:560px; }
.hero__actions{ display:flex; gap:14px; flex-wrap:wrap; }
.hero__facts{ display:flex; gap:30px; margin-top:42px; flex-wrap:wrap; }
.hero__fact{ display:flex; flex-direction:column; }
.hero__fact strong{ font-family:'Comfortaa',cursive; font-size:1.7rem; color:var(--gold-soft); }
.hero__fact span{ font-size:.86rem; font-weight:700; opacity:.9; }

.wave-divider{
  position:absolute; left:0; right:0; bottom:-1px; height:60px;
  background:var(--white);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60V20c180 30 360 30 540 5S900-5 1080 5s270 25 360 20v35z'/%3E%3C/svg%3E") bottom/100% 100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60V20c180 30 360 30 540 5S900-5 1080 5s270 25 360 20v35z'/%3E%3C/svg%3E") bottom/100% 100% no-repeat;
}

/* ---------- Секции общее ---------- */
.section{ padding:78px 0; }
.section--cream{ background:var(--cream); }
.section--accent{ background:linear-gradient(135deg,var(--terra),var(--terra-deep)); color:#fff; }
.section-head{ text-align:center; max-width:640px; margin:0 auto 46px; }
.section-head__sub{ color:var(--ink-soft); font-weight:600; font-size:1.05rem; margin-top:8px; }
.eyebrow{
  display:inline-block; text-transform:uppercase; letter-spacing:2px; font-size:.78rem; font-weight:800;
  color:var(--terra); background:var(--cream-2); padding:5px 14px; border-radius:999px; margin-bottom:12px;
}
.eyebrow--light{ color:#fff; background:rgba(255,255,255,.18); }
h2{ font-size:clamp(1.7rem,3.5vw,2.4rem); }

/* ---------- Преимущества ---------- */
.advantages{ padding:60px 0; }
.cards-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.adv-card{
  background:#fff; border:1px solid var(--cream-2); border-radius:var(--radius); padding:30px 24px;
  text-align:center; box-shadow:var(--shadow-sm); transition:transform .25s var(--ease), box-shadow .25s;
}
.adv-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.adv-card__icon{
  width:64px; height:64px; margin:0 auto 16px; border-radius:18px; font-size:1.9rem;
  display:flex; align-items:center; justify-content:center; background:var(--cream);
}
.adv-card h3{ font-size:1.15rem; margin-bottom:8px; color:var(--terra-deep); }
.adv-card p{ color:var(--ink-soft); font-weight:600; font-size:.95rem; }

/* ---------- О садике ---------- */
.about__grid{ display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center; }
.about__media{ position:relative; }
.about__media img{ border-radius:var(--radius); box-shadow:var(--shadow); width:100%; height:480px; object-fit:cover; }
.about__badge{
  position:absolute; left:-18px; bottom:28px; background:#fff; border-radius:18px;
  padding:14px 22px; box-shadow:var(--shadow); display:flex; flex-direction:column; line-height:1.2;
  border-left:5px solid var(--terra);
}
.about__badge strong{ font-family:'Comfortaa',cursive; color:var(--terra-deep); font-size:1.15rem; }
.about__badge span{ font-size:.8rem; font-weight:700; color:var(--ink-soft); }
.about__text h2{ margin-bottom:16px; }
.about__text p{ color:var(--ink-soft); font-weight:600; margin-bottom:14px; }
.checklist{ list-style:none; margin:22px 0 26px; display:grid; gap:11px; }
.checklist li{ position:relative; padding-left:34px; font-weight:700; color:var(--ink); }
.checklist li::before{
  content:"✓"; position:absolute; left:0; top:-1px; width:23px; height:23px; border-radius:50%;
  background:var(--terra); color:#fff; font-size:.8rem; display:flex; align-items:center; justify-content:center;
}

/* ---------- Программы ---------- */
.cards-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.prog-card{
  background:#fff; border-radius:var(--radius); padding:26px 22px; box-shadow:var(--shadow-sm);
  border:1px solid var(--cream-2); transition:transform .25s var(--ease), box-shadow .25s;
}
.prog-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.prog-card__ic{
  width:56px; height:56px; border-radius:16px; font-size:1.7rem; margin-bottom:14px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--sand),var(--gold-soft));
}
.prog-card h3{ font-size:1.08rem; margin-bottom:6px; color:var(--terra-deep); }
.prog-card p{ color:var(--ink-soft); font-weight:600; font-size:.9rem; }

/* ---------- Группы ---------- */
.group-card{
  border-radius:var(--radius); padding:30px 24px; color:#fff; box-shadow:var(--shadow-sm);
  transition:transform .25s var(--ease), box-shadow .25s; position:relative; overflow:hidden;
}
.group-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.group-card--1{ background:linear-gradient(135deg,#e8923e,#c8612f); }
.group-card--2{ background:linear-gradient(135deg,#d97b8f,#b54e6a); }
.group-card--3{ background:linear-gradient(135deg,#3fae9e,#1f7d76); }
.group-card--4{ background:linear-gradient(135deg,#b07cc9,#7e4fa0); }
.group-card__age{ font-family:'Comfortaa',cursive; font-weight:700; font-size:2.2rem; margin-bottom:8px; }
.group-card h3{ color:#fff; font-size:1.2rem; margin-bottom:8px; }
.group-card p{ font-weight:600; font-size:.95rem; opacity:.95; }

/* ---------- Галерея ---------- */
.gallery__grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:16px; }
.gallery__item{ overflow:hidden; border-radius:var(--radius-sm); box-shadow:var(--shadow-sm); cursor:pointer; }
.gallery__item img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.gallery__item:hover img{ transform:scale(1.08); }
.gallery__item--big{ grid-column:span 2; grid-row:span 2; }

/* ---------- Цены ---------- */
.price-card{
  max-width:480px; margin:0 auto; background:#fff; border-radius:28px; padding:40px 34px;
  box-shadow:var(--shadow); border:1px solid var(--cream-2); position:relative; text-align:center; overflow:hidden;
}
.price-card__ribbon{
  position:absolute; top:20px; right:-44px; transform:rotate(45deg); background:var(--teal); color:#fff;
  font-weight:800; font-size:.78rem; padding:6px 54px; box-shadow:var(--shadow-sm);
}
.price-card__head{ border-bottom:2px dashed var(--cream-2); padding-bottom:22px; margin-bottom:22px; }
.price-card__head h3{ color:var(--terra-deep); font-size:1.2rem; margin-bottom:10px; }
.price-card__amount{ font-family:'Comfortaa',cursive; font-weight:700; font-size:3rem; color:var(--terra); line-height:1; }
.price-card__amount span{ font-size:1.5rem; }
.price-card__per{ color:var(--ink-soft); font-weight:700; margin-top:4px; }
.price-card__list{ list-style:none; display:grid; gap:13px; margin-bottom:26px; text-align:left; }
.price-card__list li{ position:relative; padding-left:32px; font-weight:700; color:var(--ink); }
.price-card__list li::before{
  content:"✓"; position:absolute; left:0; width:21px; height:21px; border-radius:50%;
  background:var(--cream); color:var(--terra); font-size:.78rem; display:flex; align-items:center; justify-content:center;
}
.price-card__note{ font-size:.8rem; color:var(--ink-soft); margin-top:14px; }

/* ---------- Форма заявки ---------- */
.enroll__grid{ display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center; }
.enroll__text h2{ color:#fff; margin-bottom:14px; }
.enroll__text p{ font-weight:600; opacity:.95; margin-bottom:22px; max-width:440px; }
.enroll__contacts{ list-style:none; display:grid; gap:12px; }
.enroll__contacts a, .enroll__contacts span{ font-weight:700; font-size:1.05rem; }
.enroll__contacts a:hover{ text-decoration:underline; }

.enroll__form{ background:#fff; border-radius:var(--radius); padding:30px; box-shadow:var(--shadow); }
.field{ margin-bottom:16px; }
.field label{ display:block; font-weight:800; font-size:.88rem; color:var(--terra-deep); margin-bottom:6px; }
.field input, .field select, .field textarea{
  width:100%; padding:12px 15px; border:2px solid var(--cream-2); border-radius:12px;
  font-family:'Nunito',sans-serif; font-size:1rem; font-weight:600; color:var(--ink);
  background:var(--cream); transition:border-color .2s, background .2s; resize:vertical;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:0; border-color:var(--terra); background:#fff;
}
.field input.is-error, .field select.is-error{ border-color:#d8543f; background:#fdecea; }
.form__hint{ font-size:.8rem; color:var(--ink-soft); text-align:center; margin-top:12px; }
.form__hint.is-ok{ color:#1f8a4c; font-weight:800; }
.form__hint.is-err{ color:#d8543f; font-weight:800; }

/* ---------- Футер ---------- */
.footer{ background:#3a2414; color:#f4e8da; padding-top:58px; }
.footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1.2fr 1.4fr; gap:34px; padding-bottom:42px; }
.logo--light .logo__name{ color:#fff; }
.logo--light .logo__sub{ color:#d8c3ae; }
.footer__about{ margin:16px 0; color:#d8c3ae; font-weight:600; font-size:.95rem; max-width:260px; }
.footer__social{ display:flex; gap:10px; flex-wrap:wrap; }
.footer__social a{
  font-size:.82rem; font-weight:800; padding:7px 13px; border-radius:999px;
  background:rgba(255,255,255,.08); transition:background .2s;
}
.footer__social a:hover{ background:var(--terra); }
.footer__col h4{ color:#fff; font-size:1rem; margin-bottom:16px; }
.footer__col a, .footer__col span{ display:block; color:#d8c3ae; font-weight:600; margin-bottom:10px; transition:color .2s; }
.footer__col a:hover{ color:#fff; }
.footer__col--map iframe{ border-radius:var(--radius-sm); border:0; filter:grayscale(.1); }
.footer__bottom{ border-top:1px solid rgba(255,255,255,.1); padding:18px 0; }
.footer__bottom .container{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:.85rem; color:#bda88f; font-weight:600; }

/* ---------- Плавающая кнопка WhatsApp ---------- */
.fab-wa{
  position:fixed; right:22px; bottom:22px; z-index:60; width:58px; height:58px; border-radius:50%;
  background:#25d366; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(37,211,102,.5); transition:transform .2s; animation:pulse 2.4s infinite;
}
.fab-wa:hover{ transform:scale(1.08); }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(37,211,102,.5);} 70%{ box-shadow:0 0 0 16px rgba(37,211,102,0);} 100%{ box-shadow:0 0 0 0 rgba(37,211,102,0);} }

/* ---------- Лайтбокс ---------- */
.lightbox{
  position:fixed; inset:0; z-index:100; background:rgba(40,22,8,.92);
  display:none; align-items:center; justify-content:center; padding:30px;
}
.lightbox.is-open{ display:flex; }
.lightbox__img{ max-width:92vw; max-height:86vh; border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.lightbox__close, .lightbox__nav{
  position:absolute; background:rgba(255,255,255,.16); color:#fff; border:0; cursor:pointer;
  border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s;
}
.lightbox__close{ top:24px; right:24px; width:48px; height:48px; font-size:2rem; }
.lightbox__nav{ top:50%; transform:translateY(-50%); width:54px; height:54px; font-size:2.4rem; }
.lightbox__nav--prev{ left:24px; }
.lightbox__nav--next{ right:24px; }
.lightbox__close:hover, .lightbox__nav:hover{ background:var(--terra); }

/* ---------- Анимация появления ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }

/* ============================================================
   Адаптив
   ============================================================ */
@media (max-width:980px){
  .cards-4, .cards-grid{ grid-template-columns:repeat(2,1fr); }
  .about__grid, .enroll__grid{ grid-template-columns:1fr; gap:34px; }
  .about__media img{ height:380px; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .gallery__grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:160px; }
}
@media (max-width:760px){
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(82vw,320px); background:#fff; flex-direction:column;
    align-items:stretch; padding:90px 24px 30px; gap:6px; box-shadow:-10px 0 40px rgba(0,0,0,.15);
    transform:translateX(100%); transition:transform .3s var(--ease); z-index:45;
  }
  .nav.is-open{ transform:translateX(0); }
  .nav__link{ font-size:1.1rem; padding:12px 14px; }
  .nav__cta{ margin:10px 0 0; text-align:center; }
  .burger{ display:flex; z-index:46; }
  .topbar__link--hide-sm{ display:none; }
  .hero__inner{ padding:60px 22px 96px; }
  .hero__facts{ gap:22px; }
}
@media (max-width:540px){
  .cards-4, .cards-grid, .footer__grid, .gallery__grid{ grid-template-columns:1fr; }
  .gallery__item--big{ grid-column:span 1; grid-row:span 1; }
  .gallery__grid{ grid-auto-rows:200px; }
  .section{ padding:56px 0; }
  .about__badge{ left:10px; }
  .footer__bottom .container{ justify-content:center; text-align:center; }
}