:root{
  --pink:#ff4fa3;
  --pink2:#ff86c6;
  --rose:#ffd6e7;

  --bg1:#fff7fb;
  --bg2:#fffdfd;

  --ink:#1f1f24;
  --muted:#6f6f7a;

  --glass: rgba(255,255,255,.64);
  --stroke: rgba(255,255,255,.40);
  --stroke2: rgba(0,0,0,.06);

  --shadow: 0 22px 70px rgba(20,10,20,.14);
  --radius: 28px;
}

*{ box-sizing:border-box; }
html{
  scroll-behavior: smooth;
}
body{
  margin:0;
  font-family: Manrope, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 450px at 50% -10%, rgba(255,79,163,.17), transparent 62%),
    radial-gradient(900px 500px at 18% 0%, rgba(255,214,231,.85), transparent 58%),
    radial-gradient(900px 500px at 90% 18%, rgba(255,134,198,.13), transparent 60%),
    linear-gradient(180deg, var(--bg2) 0%, var(--bg1) 100%);
  overflow-x:hidden;
}

/* ---------- Luxury background blobs + noise ---------- */
.bg{ position:fixed; inset:0; pointer-events:none; z-index:-1; }
.bg__blob{
  position:absolute;
  width: 520px; height: 520px;
  border-radius: 999px;
  filter: blur(40px);
  opacity: .55;
  transform: translate3d(0,0,0);
  animation: floaty 10s ease-in-out infinite;
}
.bg__blob--a{ left:-140px; top:-160px; background: rgba(255,79,163,.35); animation-duration: 12s; }
.bg__blob--b{ right:-180px; top:120px; background: rgba(255,214,231,.55); animation-duration: 14s; }
.bg__blob--c{ left:20%; bottom:-260px; background: rgba(255,134,198,.25); animation-duration: 16s; }

@keyframes floaty{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(18px,-14px) scale(1.03); }
}

.bg__noise{
  position:absolute; inset:0;
  opacity:.09;
  background-image:
    repeating-radial-gradient(circle at 0 0, rgba(0,0,0,.14) 0 1px, transparent 1px 3px);
  mix-blend-mode: soft-light;
}

/* HEADER */
.top{
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: 40px;
}

.header-inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.brand{
  text-align: center;
  width: 100%;
}

/* ЛОГО */
.logo{
  font-family: "Great Vibes", cursive;
  font-size: 72px;   /* крупно как ты хотел */
  line-height: 1;
  color: var(--pink);
  letter-spacing: .6px;
}

.sub{
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
}


/* ======= СКРОЛЛ СОСТОЯНИЕ ======= */
/* При скролле: стекло прозрачнее, вкладки исчезают, остаётся только бренд */
header.top.is-scrolled{
  padding: 10px 16px 8px;

  background: rgba(255,255,255,.35);   /* более прозрачное */
  box-shadow: 0 14px 34px rgba(0,0,0,.08);

  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}


header.top.is-scrolled .brand{
  transform: translateY(-2px) scale(.95);
  opacity: .98;
}



/* legacy .floating container (no longer used) */
.floating{}
.brand{
  text-align: center;
  margin-bottom: 6px;
}
.pill{
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 650;
  font-size: 12px;
  color: var(--muted);
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,79,163,.18);
  transition: transform .14s ease, background .14s ease, color .14s ease;
  white-space: nowrap;
}
.pill:active{ transform: scale(.98); }
.pill.is-active{
  color: var(--ink);
  background: rgba(255,79,163,.14);
  border-color: rgba(255,79,163,.28);
}

/* ---------- Feed: snap sections ---------- */
.feed{
  scroll-snap-type: y mandatory;
  padding: 18px 18px 42px;
  max-width: 980px;
  margin: 0 auto;
}
.panel{
  scroll-snap-align: start;
  scroll-snap-stop: always;

  min-height: calc(100vh - 170px);
  display:grid;
  place-items:center;
  padding: 18px 0;

  scroll-margin-top: 150px;  /* было 160 — делаем стабильнее */
}

/* ---------- Cards: glass premium ---------- */
.card{
  max-width: 1200px;
  width: 100%;
  max-width: 1200px;
  border-radius: var(--radius);
  background: var(--glass);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 18px;
  position: relative;
  overflow:hidden;
  /* animation base (will be activated by JS) */
  opacity: 0;
  transform: translateY(18px) scale(.985);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.9,.2,1);
}

/* subtle inner highlight */
.card::before{
  content:"";
  position:absolute; inset:-1px;
  border-radius: inherit;
  background:
    radial-gradient(500px 220px at 20% 0%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(500px 220px at 85% 10%, rgba(255,79,163,.14), transparent 62%);
  pointer-events:none;
  opacity:.55;
}

/* active section glow ring */
.panel.is-active .card{
  box-shadow:
    0 22px 70px rgba(20,10,20,.16),
    0 0 0 1px rgba(255,79,163,.18),
    0 0 0 10px rgba(255,79,163,.06);
}

/* animate in when visible */
.panel.is-visible .card{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ---------- Split layout ---------- */
.split{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 16px;
  align-items: stretch;
}
.split--reverse{ grid-template-columns: .95fr 1.05fr; }
.split--reverse .media{ order: 2; }
.split--reverse .content{ order: 1; }

.media{
  position: relative;
  border-radius: 24px;
  overflow:hidden;
  border: 1px solid rgba(255,79,163,.16);
  background: rgba(255,255,255,.55);
  min-height: 340px;
}
.media img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transform: scale(1.02);
}
.mediaTag{
  position:absolute;
  left: 12px;
  bottom: 12px;
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  color: var(--ink);
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(255,79,163,.16);
  backdrop-filter: blur(10px);
}

.content{ padding: 6px 4px; }

.head{ margin-bottom: 10px; }
h2{
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 750;
}
.muted{ color: var(--muted); }
.sm{ font-size: 12px; }

/* chips & actions */
.chips{ display:flex; flex-wrap:wrap; gap: 8px; margin: 12px 0 12px; }
.chip{
  font-size: 12px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,79,163,.11);
  border: 1px solid rgba(255,79,163,.18);
}

.actions{ display:flex; gap: 10px; flex-wrap:wrap; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border-radius: 16px;
  padding: 10px 12px;
  font-weight: 700;
  font-size: 13px;
  border: 1px solid transparent;
  cursor:pointer;
  position: relative;
}
.btn.full{ width:100%; }

.btn-primary{
  color:#fff;
  background: linear-gradient(135deg, var(--pink) 0%, var(--pink2) 100%);
  box-shadow: 0 14px 30px rgba(255,79,163,.25);
}
.btn-ghost{
  color: var(--ink);
  background: rgba(255,255,255,.62);
  border-color: rgba(0,0,0,.06);
}

/* subtle shimmer on primary */
.btn-primary::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.35) 45%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .8s ease;
  pointer-events:none;
  opacity:.55;
}
.btn-primary:hover::after{ transform: translateX(120%); }

/* mini stats */
.miniStats{ display:flex; gap: 10px; flex-wrap:wrap; margin-top: 14px; }
.miniStat{
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,79,163,.14);
  min-width: 120px;
}
.miniStat b{ color: var(--pink); font-size: 16px; }
.miniStat span{ display:block; margin-top: 4px; color: var(--muted); font-size: 12px; }

/* price list */
.price{ margin-top: 10px; }
#price h2 {
  text-align: center;
  margin-bottom: 25px;
  font-size: 26px;
  font-weight: 600;
}
.row{
  display:flex;
  justify-content:space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px dashed rgba(0,0,0,.10);
}
.row:last-child{ border-bottom:none; }
.ttl{ font-weight: 750; }
.val{ font-weight: 800; color: var(--pink); white-space:nowrap; }

.note{
  margin-top: 12px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,79,163,.10);
  border: 1px solid rgba(255,79,163,.16);
  color: var(--muted);
  font-size: 12px;
}

/* training callout */
.callout{
  margin: 12px 0;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,79,163,.14);
}
.calloutTitle{ font-weight: 800; }

/* lists */
.list{
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--muted);
}
.list li{ margin: 6px 0; }

/* faq */
.faq{ margin-top: 10px; display:grid; gap: 10px; }
.qa{
  border-radius: 18px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,79,163,.14);
  padding: 10px 12px;
}
.qa summary{
  cursor:pointer;
  font-weight: 750;
}
.qa p{ margin: 10px 0 0; }

/* socials */
.socials{ margin-top: 12px; display:grid; gap: 10px; }
.soc{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.55);
  text-decoration:none;
  color: var(--ink);
}
.soc__icon{
  width: 44px; height: 44px;
  display:grid; place-items:center;
  border-radius: 16px;
  font-weight: 800;
  color: var(--pink);
  background: rgba(255,79,163,.10);
  border: 1px solid rgba(255,79,163,.18);
}
.soc__title{ display:block; font-weight: 800; }
.soc__meta{ display:block; font-size: 12px; color: var(--muted); }
.soc__go{ margin-left:auto; font-weight: 900; color: var(--pink); }

/* lightbox */
.lightbox{
  position:fixed; inset:0;
  background: rgba(20,10,20,.72);
  display:none;
  align-items:center;
  justify-content:center;
  padding: 18px;
  z-index: 80;
}
.lightbox.is-open{ display:flex; }
.lightbox img{
  max-width: 96vw;
  max-height: 78vh;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 22px 70px rgba(0,0,0,.38);
}
.lbClose{
  position: absolute;
  top: 14px; right: 14px;
  border:0;
  width: 44px; height: 44px;
  border-radius: 16px;
  background: rgba(255,255,255,.85);
  font-weight: 900;
  cursor:pointer;
}

/* mobile tweaks */
@media (max-width: 800px){
  .split{ grid-template-columns: 1fr; }
  .split--reverse .media{ order: 1; }
  .split--reverse .content{ order: 2; }
  .media{ min-height: 260px; }
  .logo{ font-size: 52px; }
}
@media (max-width: 520px){
  .feed{ padding: 14px 14px 34px; }
  .panel{ min-height: calc(100vh - 160px); }
  .cta{ padding: 9px 12px; font-size: 12px; }
}

body.nav-hide .top{
  transform: translateY(-100%);
}
/* === FIX: Portfolio preview not visible === */
.masonry{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  margin-top:12px;
  }
  
  .masonry .shot{
  width:48%;
  max-width:420px;
  }
  
  .masonry .shot img{
  width:100%;
  height:auto;
  border-radius:18px;
  }

.shot{
  display: inline-block;     /* важно для columns */
  width: 100%;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  background: transparent;
  break-inside: avoid;
  cursor: pointer;
}

.shot img{
  display: block;
  width: 100%;
  height: auto;              /* важно */
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 16px 38px rgba(0,0,0,.14);
  opacity: 1 !important;     /* на всякий */
  visibility: visible !important;
  transform: translateZ(0);
  transition: transform .18s ease, filter .18s ease;
}

.shot:hover img{
  transform: scale(1.02);
  filter: saturate(1.05) contrast(1.02);
}

/* mobile: 1 column */
@media (max-width: 520px){
  .masonry{ columns: 1; }
}
#gallery{ position: relative; z-index: 2; }
.card{ overflow: visible; }  /* чтобы columns не резало */
/* FIX: если JS не добавил is-visible — карточки всё равно видны */
.card{
  opacity: 1 !important;
  transform: none !important;
}
/* Центрированный About */
.about-center{
  text-align: center;
  max-width: 980px;
  margin: 0 auto;
  padding: 60px 50px;
}

.about-center .muted{
  font-size: 17px;
  line-height: 1.8;
}

.about-center .chips{
  display:flex;
  justify-content:center;
  gap:10px;
  margin:20px 0;
}

.about-center .chips span{
  background:#f4d6e2;
  padding:6px 14px;
  border-radius:20px;
  font-size:13px;
}

.about-center .stats{
  display:flex;
  justify-content:center;
  gap:40px;
  margin-top:30px;
}

.about-center .stats div{
  display:flex;
  flex-direction:column;
  font-size:14px;
}

.about-center .stats b{
  font-size:20px;
  color:#e94f8a;
}

/* About section: premium photo + text layout */
.about-card{
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.about-title{
  margin: 0;
}

.about-main{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.about-photo-wrap{
  flex: 0 0 auto;
  padding: 14px 16px;
  border-radius: 26px;
  background: rgba(255,79,163,.04);
  border: 1px solid rgba(255,79,163,.12);
}

.about-photo{
  max-width: 340px;
}

.about-photo img{
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  object-fit: cover;
  border: 1px solid rgba(255,79,163,.22);
  box-shadow: 0 16px 38px rgba(0,0,0,.14);
}

.about-text{
  flex: 1 1 0;
  max-width: 540px;
  text-align: left;
}

.about-text .muted{
  margin: 0 0 18px;
}

.about-bottom{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.about-bottom .chips{
  margin: 0;
}

@media (max-width: 768px){
  .about-main{
    flex-direction: column;
  }

  .about-photo-wrap{
    padding: 12px 14px;
  }

  .about-photo{
    max-width: 280px;
  }

  .about-text{
    max-width: 100%;
    text-align: center;
  }
}
/* TRAINING CENTER STYLE */
.training-center{
  max-width: 760px;
  margin: 0 auto;
  padding: 60px 50px;
  text-align: center;
}

.training-center .muted{
  font-size: 17px;
  line-height: 1.8;
  margin-bottom: 30px;
}

.training-box{
  background: rgba(255,255,255,.6);
  padding: 25px 30px;
  border-radius: 20px;
  border: 1px solid rgba(0,0,0,.05);
  margin-bottom: 35px;
}

.training-box h3{
  margin-bottom: 15px;
}

.training-box ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

.training-box li{
  margin: 10px 0;
  font-size: 15px;
}

.training-info{
  display:flex;
  justify-content:center;
  gap:40px;
}

.training-info div{
  display:flex;
  flex-direction:column;
  font-size:14px;
}

.training-info b{
  font-size:18px;
  color:#e94f8a;
}
/* === Header floating styles removed: header is now static === */
.top{
}

/* состояние когда проскроллил */
.top.is-scrolled{
  background: rgba(255,255,255,.40);
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
}

/* pills под шапкой */
.pills{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* === Floating glass container removed === */
.floating{}

.brand{ text-align: center; width: 100%; }

.logo{
  font-family: "Great Vibes", cursive;
  font-size: 73px;       /* крупно */
  line-height: 1;
  color: var(--pink);    /* твой розовый */
  letter-spacing: 1px;
  text-align: center;
}

.sub{
  opacity: .75;
  font-size: 14px;
}

.pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 16px;
  border-radius: 999px;

  border: 1px solid rgba(255, 105, 180, 0.22);
  background: rgba(255,255,255,0.38);
  color: rgba(0,0,0,0.72);
  text-decoration: none;

  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.pill:hover{
  transform: translateY(-1px);
  border-color: rgba(255, 105, 180, 0.38);
  background: rgba(255,255,255,0.55);
}

.pill.is-active{
  background: rgba(255, 105, 180, 0.18);
  border-color: rgba(255, 105, 180, 0.55);
}

/* Make anchor jumps not hide content under header */
html{ scroll-padding-top: 170px; }

/* remove weird white line on scroll */
.floating{
  background-clip: padding-box;
  border: 1px solid rgba(255,255,255,0.35);
}

.top{
  border-bottom: 0 !important; /* убрать разделитель, который дает белую линию */
}
/* force header always visible */
.floating{
  transform: none !important;
  opacity: 1 !important;
}

/* DEBUG/FIX: force floating header visible */
.floating{
  position: fixed !important;
  top: 12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important; /* центрируем */
  z-index: 9999 !important;
  width: min(1100px, calc(100% - 24px)) !important;
}


/* чтобы сам блок шапки тоже был по центру */
.floating{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* ======= Header glass/scroll behavior removed – header is static now ======= */

/* FIX: без поломки sticky */
html { width: 100%; }

body{
  width: 100%;
  max-width: 100%;
  overflow-x: clip;   /* вместо hidden */
}

/* медиа/картинки */
img, video, svg, canvas{
  max-width: 100%;
  height: auto;
}

*, *::before, *::after{
  box-sizing: border-box;
}

/* Мобильная фиксация ширины */
@media (max-width: 520px){

  html, body{
    overflow-x: hidden;
  }

  .panel{
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
  }

  .card{
    width: 100% !important;
    margin: 0 auto;
  }

  .feed{
    padding-left: 0;
    padding-right: 0;
  }

}
@media (max-width: 520px){
  header.top{
    position: relative;
    top: 0;
    left: 0;
    right: 0;

    width: 100%;
    margin: 0 auto;
  }
}
@media (max-width: 520px){
  /* блок с 3 пунктами */
  .miniStats{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
  }

  .miniStat{
    flex: 1 1 30%;
    min-width: 110px;
    text-align: center;
  }

  /* если где-то есть nowrap — убираем */
  .miniStat, .miniStat *{
    white-space: normal;
  }
}

/* ===== MOBILE FIX ===== */
@media (max-width: 768px){

  /* header layout only on mobile – no sticky/fixed */
  header.top{
    position: relative;
    top: 0;
    z-index: 1;
    padding-top: env(safe-area-inset-top);
    background: transparent;
    backdrop-filter: none;
  }

  /* лого/подпись не раздувают */
  header.top .brand{
    padding: 14px 14px 8px;
    text-align: center;
  }
  header.top .logo{
    font-size: 44px;      /* если у тебя другое имя класса — скажи */
    line-height: 1;
  }
  header.top .sub{
    font-size: 14px;
  }

  /* tabs stay under logo, no sticky */
  nav.pills{
    position: static;
    top: auto;
    z-index: 1;
    padding: 10px 12px 14px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  nav.pills .pill{
    white-space: nowrap;
    font-size: 14px;
    padding: 10px 14px;
  }

  /* контейнеры не шире экрана */
  .feed, .panel, .card{
    max-width: 100%;
  }

  /* чтобы контент не прятался под шапкой */
  main.feed{
    padding-top: 10px;
  }
}
/* FIX: Training miniStats on mobile */
@media (max-width: 520px){
  .miniStats{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }

  .miniStat{
    flex: 1 1 140px;   /* чтобы переносилось */
    min-width: 140px;
    text-align: center;
  }
}

@media (max-width: 768px){
  #training .miniStats, 
  #training .stats,
  #training .features{
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
  }

  #training .miniStat,
  #training .stat,
  #training .feature{
    flex: 1 1 140px !important;
    min-width: 140px !important;
    text-align: center !important;
  }
}

/* ===== MOBILE FINAL FIX (вставить в самый конец styles.css) ===== */
@media (max-width: 768px){

  /* анти-уезд вправо/влево */
  html, body{
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  *, *::before, *::after{ box-sizing: border-box; }
  img, video, svg, canvas{ max-width: 100%; height: auto; }

  /* фоновые слои назад, чтобы НЕ перекрывали шапку */
  .bg{
    position: fixed !important;
    inset: 0 !important;
    z-index: -1 !important;
    pointer-events: none !important;
  }

  /* Header & menu on mobile – static under logo, no blur/sticky */
  header.top{
    display: block !important;
    position: relative !important;
    top: 0 !important;
    z-index: 1 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  nav.pills{
    display: flex !important;
    position: static !important;
    top: auto !important;
    z-index: 1 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    gap: 8px;
    padding: 10px 12px;
    overflow-x: visible;
  }

  /* чтобы контент не прятался под sticky */
  main#feed{
    padding-top: 0 !important;
  }
  section.panel{
    scroll-margin-top: 140px; /* чтобы при клике по вкладке не уезжало под шапку */
  }

  /* карточки на мобиле не должны быть шире экрана */
  .card{
    width: min(94vw, 720px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* FIX "Обучение" (3 пункта снизу) — чтобы не уезжало и красиво переносилось */
  .miniStats{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    justify-items: center !important;
  }
  .miniStat{
    width: 100% !important;
    min-width: 0 !important;
    text-align: center !important;
  }
  /* третий пункт на всю ширину */
  .miniStat:last-child{
    grid-column: 1 / -1 !important;
  }
}

/* HEADER static (no sticky/scroll animation) */
header.top{
  position: relative;
  top: 0;
  z-index: 1;
}

header.top.is-scrolled{
  transform: none;
  padding-top: 0;
  padding-bottom: 0;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

/* ===== MAP SIZE CONTROL ===== */

.map-image{
  margin-top: 15px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);

  max-width: 450px;   /* уменьшаем ширину */
  margin-left: auto;
  margin-right: auto;
}

.map-image img{
  width: 100%;
  height: auto;
  display: block;
}

.phone-row{
  position: relative;
  cursor: pointer;
}

.phone-actions{
  position: absolute;
  right: 14px;
  top: calc(100% + 10px);
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(255, 105, 180, 0.25);
  border-radius: 14px;
  padding: 8px;
  display: none;
  flex-direction: column;
  gap: 8px;
  min-width: 180px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.12);
  backdrop-filter: blur(10px);
  z-index: 50;
}

.phone-actions button{
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 12px;
  background: rgba(255, 105, 180, 0.12);
  color: #333;
  font-weight: 600;
  cursor: pointer;
}

.phone-actions button:hover{
  background: rgba(255, 105, 180, 0.18);
}

/* Guarantees section: center title only */
#guarantees .head{
  text-align: center;
}

/* ABOUT BOTTOM LAYOUT */

.about-bottom{
  margin-top:40px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:28px;
  width:100%;
  }
  
  .about-badges{
    display:flex;
    justify-content:center;
    gap:16px;
    margin-top:10px;
    margin-bottom:25px;
    flex-wrap:wrap;
    }
    
    .about-badge{
    background:#f7d7df;
    color:#444;
    padding:8px 18px;
    border-radius:999px;
    font-size:14px;
    font-weight:500;
    box-shadow:0 2px 8px rgba(0,0,0,0.05);
    }
  
  .about-stats{
  display:flex;
  justify-content:space-between;
  width:100%;
  max-width:520px;
  margin:auto;
  }
  
  .about-stat{
  text-align:center;
  }
  
  .about-stat .num{
  font-size:32px;
  font-weight:700;
  color:#ff5a8a;
  }
  
  .about-stat .label{
  font-size:14px;
  opacity:0.7;
  }

  .about-badge:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 14px rgba(0,0,0,0.08);
    }