:root{
  --container: 1440px;
  --nav-h: 76px;
  --radius: 20px;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --accent: #ff65a3;
  --lav: #e6ddff;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:#fff; color:#333; line-height:1.6; overflow-x:hidden;
}

.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 24px; }
.section{ position:relative; padding:96px 0; }
.section + .section{ border-top:1px solid rgba(0,0,0,.04); }
.section-title{
  margin:0 0 24px; text-align:center; font-size:clamp(28px,2.4vw,42px);
}
.section-title::after{
  content:""; display:block; width:80px; height:4px; margin:12px auto 0;
  border-radius:999px; background:linear-gradient(90deg, rgba(255,101,163,.7), rgba(230,221,255,.9));
  box-shadow:0 2px 10px rgba(255,101,163,.25);
}
.section-subtitle{ margin:-8px 0 24px; text-align:center; color:#666; }

/* NAV */
.navbar{
  position:fixed; inset:0 0 auto 0; height:var(--nav-h);
  display:flex; align-items:center; z-index:1000;
  background:rgba(255,255,255,.75); backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.nav-container{ display:flex; align-items:center; justify-content:space-between; }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }
.nav-logo{ height:48px; }
.brand-text{ font-weight:700; letter-spacing:.2px; }

.nav-toggle{ display:none; width:42px; height:38px; border:0; background:transparent; padding:6px; cursor:pointer; }
.nav-toggle span{ display:block; height:2px; margin:7px 0; background:#333; transition:.25s; }

.nav-links{ list-style:none; display:flex; align-items:center; gap:28px; margin:0; padding:0; }
.nav-links a{
  text-decoration:none; color:#333; font-weight:500; padding:10px 6px; border-radius:10px;
  transition: color .25s, background .25s;
}
.nav-links a:hover{ color:var(--accent); background:rgba(255,101,163,.08); }
.nav-cta .btn-small{ padding:10px 16px; border-radius:999px; font-weight:700; }

/* HERO */
.hero{
  position:relative; text-align:center; padding:80px 20px; color:white; overflow:hidden;
  background:linear-gradient(135deg,#FDE2FF,#FFC1E3,#FFD6E0); margin-top:var(--nav-h);
}
.logo{ width:500px; margin-bottom:2px; position:relative; }
.hero-slogan{ font-size:2rem; margin:0 0 30px; color:black; font-family:'Great Vibes',cursive; }
.hero-flower{ position:absolute; z-index:0; opacity:.9; transition:.3s; }
.hero-flower-left{ top:5%; left:-60px; width:500px; transform:rotate(-12deg); }
.hero-flower-right{ top:20%; right:-60px; width:400px; transform:rotate(-16deg); }

/* BUTTONS */
.btn{
  display:inline-block; padding:12px 24px; border-radius:999px; background:#fff; color:var(--accent);
  text-decoration:none; font-weight:700; transition: transform .25s, box-shadow .25s; box-shadow:var(--shadow);
}
.btn:hover{ transform: translateY(-2px); }
.btn-accent{ background:var(--accent); color:#fff; }
.btn-lg{ padding:16px 28px; font-size:18px; }
.btn-sm{ padding:10px 16px; font-size:14px; }
.btn-ghost{ background:#fff; color:#333; border:1px solid rgba(0,0,0,.08); }

/* ABOUT */
.about-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:start; }
.about-left .about-paragraph{ text-align:justify; line-height:1.75; margin-bottom:14px; }

.skin-about{
  background:
    radial-gradient(1200px 600px at -10% 10%, rgba(255,214,232,.35) 0, rgba(255,214,232,0) 60%),
    radial-gradient(900px 500px at 110% 0%, rgba(230,221,255,.35) 0, rgba(230,221,255,0) 60%),
    #fff;
}
.skin-about::after{
  content:""; position:absolute; left:50%; bottom:-1px; transform:translateX(-50%);
  width:min(1200px, 92%); height:32px; border-radius:30px 30px 0 0;
  background: radial-gradient(60% 100% at 50% 120%, rgba(0,0,0,.08), transparent 70%);
  filter:blur(10px); opacity:.25; pointer-events:none;
}

.about-features{ margin-top:28px; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.feature{
  position:relative; border-radius:var(--radius); padding:24px;
  background:linear-gradient(180deg,#fff 0%,#faf7ff 100%); border:1px solid #efe9ff;
  box-shadow:0 8px 18px rgba(22,8,43,.06),0 24px 50px rgba(255,101,163,.12);
  transition: transform .25s, box-shadow .25s, background .25s; overflow:hidden;
}
.feature:hover{ transform:translateY(-6px); box-shadow:0 16px 40px rgba(22,8,43,.12); }
.feature h3{ margin:0 0 8px; font-size:20px; color:#e14687; }
.feature p{ margin:0; color:#3f3f46; }

/* Video card */
.about-right{ display:flex; flex-direction:column; gap:6px; }
.video-card{
  position:relative; width:100%; padding:14px; border-radius:24px;
  background:linear-gradient(#ffffffcc,#ffffffcc) padding-box,
             linear-gradient(135deg, rgba(255,101,163,.5), rgba(230,221,255,.55)) border-box;
  border:1px solid transparent;
  box-shadow:0 8px 22px rgba(22,8,43,.10), 0 28px 70px rgba(255,101,163,.15);
  backdrop-filter:blur(6px); overflow:hidden;
}
.video-glare{
  position:absolute; inset:-20%;
  background:linear-gradient(120deg, rgba(255,255,255,.35), transparent 40% 60%, rgba(255,255,255,.18));
  mix-blend-mode:screen; opacity:.45; border-radius:28px; pointer-events:none;
}
.media-16x9{ position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; border-radius:16px; background:#000; }
.media-el{ width:100%; height:100%; object-fit:cover; display:block; }
.video-caption{ margin:4px 6px 0; color:#666a73; font-size:14px; }
.video-lic{ margin:0 6px; color:#8a8f99; font-size:12.5px; }

/* КАТАЛОГ */
.catalog-head{ margin-bottom:16px; }
.catalog-controls{
  display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:center;
  margin:0 auto 22px; max-width: 1100px;
}
.ctrl{
  height:42px; padding:0 14px; border-radius:12px; border:1px solid rgba(0,0,0,.1);
  background:#fff; color:#333; box-shadow:0 4px 12px rgba(0,0,0,.04);
}
.ctrl-search{ min-width:260px; flex:1 1 260px; }

.skin-catalog{
  position:relative; overflow:hidden;
  background:
    radial-gradient(950px 460px at 14% 10%,  rgba(230,221,255,.55) 0, rgba(230,221,255,0) 62%),
    radial-gradient(1000px 520px at 86% 86%, rgba(255,214,232,.58) 0, rgba(255,214,232,0) 64%),
    radial-gradient(700px 360px at 50% 0%,    rgba(255,255,255,.65) 0, rgba(255,255,255,0) 70%),
    #fff;
}

.catalog-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:28px; align-items:start; }
@media (min-width:1680px){ .catalog-grid{ grid-template-columns: repeat(4, 1fr); } }

.prod{
  background:linear-gradient(#fff,#fff) padding-box,
             linear-gradient(135deg, rgba(255,101,163,.30), rgba(230,221,255,.40)) border-box;
  border:1px solid transparent; border-radius:22px; overflow:hidden;
  box-shadow:0 8px 18px rgba(22,8,43,.06);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.prod:hover{ transform: translateY(-6px); box-shadow:0 16px 40px rgba(22,8,43,.12); }

.prod-media{ position:relative; width:100%; aspect-ratio: 4/3; overflow:hidden; background:#f7f5ff; }
.prod-media img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .35s ease; }
.prod:hover .prod-media img{ transform: scale(1.04); }

.badge{
  position:absolute; top:12px; left:12px; padding:6px 10px; border-radius:999px;
  font-size:12px; font-weight:700; color:#fff; background:linear-gradient(135deg,var(--accent),#ff88b8);
  box-shadow:0 6px 16px rgba(255,101,163,.25);
}
.badge.hot{ background:linear-gradient(135deg,#ff5a5a,#ff946b); }

.prod-body{ padding:18px 16px 16px; text-align:left; }
.prod-title{ margin:0 0 6px; font-size:18px; }
.prod-desc{ margin:0 0 10px; color:#555; min-height:44px; }
.prod-meta{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:2px; }
.tag{ font-size:12px; padding:6px 10px; border-radius:999px; background:#f5f1ff; color:#5b4e7c; border:1px solid #ebe6ff; }

/* единственная кнопка каталога */
.catalog-cta{
  margin-top:40px;
  display:flex; justify-content:center;
}
.catalog-cta .btn{ box-shadow:0 16px 40px rgba(255,101,163,.30); }

/* ORDER */
.order{ position:relative; overflow:hidden; }
.skin-order{
  background:
    radial-gradient(800px 400px at 20% 20%, rgba(255,214,232,.40) 0, rgba(255,214,232,0) 62%),
    radial-gradient(900px 450px at 85% 35%, rgba(230,221,255,.40) 0, rgba(230,221,255,0) 62%),
    #fff;
}
.order-subtitle{ margin: -6px 0 24px; text-align:center; color:#666; }

.order-steps{
  list-style:none; margin:0 auto 26px; padding:0;
  display:grid; grid-template-columns: repeat(3,1fr); gap:22px; max-width: 1120px;
}
@media (max-width: 992px){ .order-steps{ grid-template-columns: 1fr; } }

.order-step{
  position:relative; padding:22px 20px 20px; border-radius:20px;
  background: linear-gradient(#ffffff,#ffffff) padding-box,
              linear-gradient(135deg, rgba(255,101,163,.35), rgba(230,221,255,.45)) border-box;
  border:1px solid transparent;
  box-shadow: 0 8px 18px rgba(22,8,43,.06);
  text-align:left; min-height: 170px;
  transition: transform .25s, box-shadow .25s;
}
.order-step:hover{ transform: translateY(-6px); box-shadow: 0 16px 40px rgba(22,8,43,.12); }
.order-step h3{ margin:0 0 8px; font-size:18px; color:#e14687; }
.order-step p{ margin:0; color:#3f3f46; }

/* Décor */
.order-decor{
  position:absolute; left:50%; top: 180px; width: 1200px; height: 280px;
  transform: translateX(-50%);
  background:
    radial-gradient(60% 60% at 20% 30%, rgba(255,214,232,.35), transparent 70%),
    radial-gradient(60% 60% at 80% 70%, rgba(230,221,255,.35), transparent 70%);
  filter: blur(18px);
  z-index:0; pointer-events:none;
}
.order .container{ position:relative; z-index:1; }

.order-cta{ margin-top: 10px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.order-hint{ text-align:center; color:#666; margin-top:10px; font-size:14px; }
.order-hint a{ color:#333; font-weight:600; }

/* === Gallery enhanced === */
.skin-gallery{
  background:
    radial-gradient(900px 420px at 10% 85%, rgba(230,221,255,.32) 0, rgba(230,221,255,0) 60%),
    radial-gradient(900px 420px at 95% 15%, rgba(255,214,232,.32) 0, rgba(255,214,232,0) 60%),
    #fff;
}
.gallery-controls{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
  margin:6px 0 18px;
}
.gallery-controls .chip{
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  padding:10px 14px;
  border-radius:999px;
  cursor:pointer;
  font-weight:600;
  transition:.2s;
}
.gallery-controls .chip.is-active{
  color:#fff; background:var(--accent); border-color:transparent;
  box-shadow:0 8px 24px rgba(255,101,163,.35);
}

.gallery-masonry{ column-count:3; column-gap:18px; }
@media (max-width: 992px){ .gallery-masonry{ column-count:2; } }
@media (max-width: 560px){ .gallery-masonry{ column-count:1; } }

.gallery-card{
  break-inside: avoid;
  margin:0 0 18px;
  border-radius:14px;
  overflow:hidden;
  box-shadow: var(--shadow);
  background:#fff;
}
.gallery-card img{ width:100%; display:block; transition: transform .35s ease; cursor: zoom-in; }
.gallery-card:hover img{ transform: scale(1.03); }
.gallery-card figcaption{
  padding:10px 12px; font-size:13px; color:#555;
  background: linear-gradient(#fff,#faf7ff); border-top:1px solid rgba(0,0,0,.05);
}
.gallery-card.is-hidden{ display:none; }
.gallery-more{ display:flex; justify-content:center; margin-top:8px; }

/* Лайтбокс */
.lightbox{ position:fixed; inset:0; background:rgba(0,0,0,.85); display:none; align-items:center; justify-content:center; z-index:9999; }
.lightbox-content{ position:relative; max-width:95vw; max-height:95vh; }
.lightbox-content img{ max-width:95vw; max-height:95vh; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.lightbox-close{ position:absolute; top:-40px; right:-40px; background:#fff; border:0; font-size:2rem; cursor:pointer; padding:10px 15px; border-radius:50%; box-shadow:0 5px 15px rgba(0,0,0,.3); }
.lightbox .lightbox-prev,
.lightbox .lightbox-next{
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:50%;
  border:0; background:#ffffffdd; cursor:pointer; font-size:28px;
  display:grid; place-items:center;
}
.lightbox .lightbox-prev{ left:-56px; }
.lightbox .lightbox-next{ right:-56px; }
@media (max-width:700px){
  .lightbox .lightbox-prev{ left:6px; }
  .lightbox .lightbox-next{ right:6px; }
}

/* === FAQ (статичный) === */
.skin-faq{
  background:
    radial-gradient(900px 420px at 12% 18%, rgb(255, 255, 255) 0, rgb(255, 255, 255) 60%),
    radial-gradient(900px 420px at 90% 88%, rgb(255, 255, 255) 0, rgb(253, 253, 253) 60%),
    #fff;
}
.faq-accordion{
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
}
.faq-accordion details{
  border:1px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box,
             linear-gradient(135deg, rgb(255, 255, 255), rgba(255, 255, 255, 0.45)) border-box;
  border-radius:20px; box-shadow:0 8px 18px rgba(22,8,43,.06); overflow:hidden;
}
.faq-accordion summary{
  padding:16px 56px 16px 18px; font-weight:700; cursor:pointer; list-style:none; position:relative;
}
.faq-accordion summary::-webkit-details-marker{ display:none; }
.faq-accordion summary::after{
  content:"+"; position:absolute; right:16px; top:50%; transform:translateY(-50%); 
  font-size:24px; line-height:1; color:#c12272; transition:.2s;
}
.faq-accordion details[open] summary::after{ content:"–"; transform:translateY(-50%) rotate(0.0001deg); }
.faq-content{
  padding:0 18px 16px; color:#3f3f46; border-top:1px solid rgba(0,0,0,.06);
}
.faq-cta{
  margin-top:24px; text-align:center;
  background:linear-gradient(#ffffff,#ffffff) padding-box,
             linear-gradient(135deg, rgba(255, 101, 204, 0.322), rgba(230,221,255,.40)) border-box;
  border:1px solid transparent; border-radius:22px; padding:22px;
  box-shadow:0 8px 18px rgba(22,8,43,.06);
}
.faq-cta p{ margin:0 0 12px; color:#555; }
.faq-cta-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ——— Убираем пустую зону между FAQ и Контактами ——— */
#faq.section{ padding-bottom: 28px; }
#faq .faq-cta{ margin-bottom: 0; }
#faq .faq-accordion details:last-of-type{ margin-bottom: 0; }
#contacts.section{ padding-top: 36px; }

/* === Contacts (статичный) === */
.skin-contacts{
  position: relative; isolation: isolate; z-index: 1;
  background:
    radial-gradient(900px 420px at 15% 20%, rgba(230,221,255,.35) 0, rgba(230,221,255,0) 60%),
    radial-gradient(900px 420px at 85% 80%, rgba(255,214,232,.35) 0, rgba(255,214,232,0) 60%),
    #fff;
}
.contacts-subtitle{
  margin:-6px 0 24px; text-align:center; color:#666;
}
.contacts-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
  max-width:1100px; margin:0 auto;
}
@media (max-width: 992px){ .contacts-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 560px){ .contacts-grid{ grid-template-columns:1fr; } }

.contact-card{
  position:relative; display:flex; align-items:center; gap:14px;
  padding:18px; border-radius:22px; text-decoration:none; color:inherit;
  background:linear-gradient(#ffffff,#ffffff) padding-box,
             linear-gradient(135deg, rgba(255,101,163,.35), rgba(230,221,255,.45)) border-box;
  border:1px solid transparent; box-shadow:0 8px 20px rgba(22,8,43,.08);
  transition: transform .25s ease, box-shadow .25s ease;
  overflow:hidden;
}
.contact-card::after{
  content:""; position:absolute; inset:-40% -20%;
  background: radial-gradient(50% 60% at 10% 20%, rgba(255,214,232,.35), transparent 60%),
              radial-gradient(50% 60% at 90% 80%, rgba(230,221,255,.35), transparent 60%);
  filter: blur(18px); opacity:.35; pointer-events:none;
}
.contact-card:hover{ transform: translateY(-6px); box-shadow:0 16px 40px rgba(22,8,43,.12); }

.contact-icon{
  flex:0 0 56px; width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center;
  background: radial-gradient(90% 90% at 30% 20%, #fff 0, #ffeaf3 40%, #ffd5e7 100%);
  box-shadow: 0 8px 18px rgba(255,101,163,.25), inset 0 0 0 6px #fff;
}
.contact-icon svg{
  width:26px; height:26px; stroke:#c12266; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}

.contact-body h3{ margin:0 0 4px; font-size:16px; color:#e14687; }
.contact-body p{ margin:0; color:#3f3f46; font-size:14px; }

/* CTA текст + стрелочка-кнопка */
.contact-cta{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  color:#7a7a85;
  opacity:.95;
  transition: color .25s ease;
}
.contact-cta::after{
  content:"";
  width:26px; height:26px; border-radius:50%;
  background:#fff;
  border:1px solid rgba(255,101,163,.35);
  box-shadow:0 6px 14px rgba(255,101,163,.22);
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c12266' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M5 12h14'/><path d='M13 5l7 7-7 7'/>\
</svg>");
  background-repeat:no-repeat;
  background-position:center;
  background-size:14px 14px;
  transform: translateX(0);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.contact-card:hover .contact-cta{ color:#333; }
.contact-card:hover .contact-cta::after{
  transform: translateX(3px);
  border-color: rgba(255,101,163,.7);
  box-shadow:0 10px 22px rgba(255,101,163,.35);
}

.contacts-actions{ display:flex; justify-content:center; margin-top:16px; }

/* Footer */
.footer{ background:#222; color:#aaa; text-align:center; padding:24px 0; }

/* Responsive */
@media (max-width:1200px){
  .about-grid{ grid-template-columns:1fr; }
  .about-features{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:992px){
  .nav-toggle{ display:block; }
  .nav-links{
    position:absolute; right:24px; top:calc(var(--nav-h) + 8px);
    flex-direction:column; gap:10px; padding:14px;
    background:rgba(255,255,255,.95); backdrop-filter:blur(8px);
    border:1px solid rgba(0,0,0,.06); border-radius:14px; display:none;
    box-shadow:var(--shadow);
  }
  .navbar.open .nav-links{ display:flex; }
  .catalog-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .about-features{ grid-template-columns:1fr; }
  .catalog-grid{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}
/* ===== Mobile polish (добавить в самый конец styles.css) ===== */

/* планшеты и уже */
@media (max-width: 768px){
  .container{ padding: 0 16px; }
  .section{ padding: 80px 0; }

  /* HERO */
  .logo{ width: clamp(220px, 55vw, 380px); }
  .hero-slogan{ font-size: clamp(18px, 4.5vw, 22px); margin-bottom: 22px; }
  .hero{ padding: 64px 16px; }

  /* ABOUT */
  .about-grid{ grid-template-columns: 1fr; gap: 28px; }
  .video-card{ padding: 10px; border-radius: 18px; }
  .media-16x9{ border-radius: 12px; }
  .about-features{ grid-template-columns: repeat(2,1fr); gap: 16px; }

  /* Каталог — фильтры на всю ширину */
  .catalog-controls{ gap: 10px; }
  .ctrl{ height: 44px; }
  .ctrl, .ctrl-search{ flex: 1 1 100%; width: 100%; }

  /* Карточки каталога */
  .catalog-grid{ grid-template-columns: 1fr 1fr; gap: 20px; }
  .prod-body{ padding: 14px; }
  .prod-title{ font-size: 16px; }
  .prod-desc{ font-size: 14px; min-height: auto; }

  /* FAQ */
  .faq-accordion summary{ padding: 14px 48px 14px 16px; }
  .faq-content{ padding: 0 16px 14px; }

  /* Контакты */
  .contacts-grid{ grid-template-columns: 1fr 1fr; gap: 14px; }
  .contact-card{ padding: 16px; border-radius: 18px; }
  .contact-icon{ width: 52px; height: 52px; }
  .contact-cta::after{ width: 24px; height: 24px; }
}

/* телефоны */
@media (max-width: 560px){
  .section{ padding: 68px 0; }

  /* Спрятать декоративные PNG-цветы, чтобы не перехлёстывали контент */
  .hero-flower-left,
  .hero-flower-right{ display: none; }

  .logo{ width: clamp(180px, 60vw, 320px); }
  .hero-buttons .btn{ width: 100%; max-width: 320px; }

  /* ABOUT */
  .about-features{ grid-template-columns: 1fr; }
  .feature{ padding: 18px; }

  /* КАТАЛОГ */
  .catalog-grid{ grid-template-columns: 1fr; }
  .catalog-cta .btn{ width: 100%; max-width: 360px; }

  /* ГАЛЕРЕЯ */
  .gallery-masonry{ column-count: 1; column-gap: 14px; }
  .gallery-card{ margin-bottom: 14px; }

  /* FAQ CTA */
  .faq-cta{ padding: 16px; }

  /* КОНТАКТЫ */
  .contacts-grid{ grid-template-columns: 1fr; }
  .contact-card{ gap: 12px; }
  .contact-cta{ gap: 8px; font-size: 14px; }
  .contact-cta::after{ width: 22px; height: 22px; background-size: 12px 12px; }
}

/* самые маленькие устройства */
@media (max-width: 400px){
  .container{ padding: 0 12px; }
  .section{ padding: 60px 0; }

  .nav-links{ right: 12px; }

  .hero{ padding: 56px 12px; }
  .logo{ width: clamp(160px, 58vw, 280px); }

  .ctrl{ font-size: 14px; }
  .chip{ padding: 8px 12px; }

  .prod-title{ font-size: 15px; }
  .prod-desc{ font-size: 13px; }

  .contact-body h3{ font-size: 15px; }
  .contact-body p{ font-size: 13px; }
}

/* улучшение тач-ощущений */
a, button, .btn, .chip, .ctrl { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
/* ===== HERO LOCK (фикс высоты и размеров элементов) ===== */
:root{
  /* под тебя можно менять эти числа */
  --hero-h-desktop: 620px;   /* высота секции hero на десктопе */
  --hero-logo-w: 500px;      /* ширина «ячейки» логотипа */
  --hero-logo-h: 140px;      /* высота «ячейки» логотипа */
  --hero-btn-w: 170px;       /* фикс. ширина кнопок */
  --hero-btn-h: 48px;        /* фикс. высота кнопок */
}

/* сама секция не меняет размер от картинки логотипа */
.hero{
  height: var(--hero-h-desktop);
  min-height: var(--hero-h-desktop);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;                /* фиксированный интервал */
  overflow: hidden;         /* ничего не «выпирает» */
}

/* логотип всегда в одной «ячейке» — можно менять файл без сдвигов */
.logo{
  width: var(--hero-logo-w);
  height: var(--hero-logo-h);
  display: block;
  object-fit: contain;
  object-position: center;
  /* убираем влияние собственных размеров картинки */
  max-width: none !important;
  max-height: none !important;
}

/* слоган тоже с фиксированными отступами */
.hero-slogan{
  margin: 0;
  line-height: 6;
}

/* кнопки фикс размера, чтобы не прыгали из-за текста/шрифтов */
.hero-buttons{ display:flex; gap:12px; }
.hero-buttons .btn{
  min-width: var(--hero-btn-w);
  height: var(--hero-btn-h);
  line-height: calc(var(--hero-btn-h) - 2px); /* аккуратный вертикальный центр */
  padding: 0 22px;
  white-space: nowrap;
}

/* фиксируем размеры декоративных цветов по бокам */
.hero-flower-left{ width: 500px; }
.hero-flower-right{ width: 400px; }

/* На узких экранах чуть «размораживаем», чтобы не ломать мобильную вёрстку */
@media (max-width: 768px){
  .hero{
    height: auto;
    min-height: 520px;
    padding: 64px 16px 80px;
  }
  .logo{
    width: clamp(220px, 60vw, 360px);
    height: 110px;
  }
  .hero-buttons .btn{
    min-width: 140px;
    height: 44px;
    line-height: 42px;
  }
  .hero-flower-left,
  .hero-flower-right{ display:none; } /* чтобы ничего не наезжало */
}
/* ===== HERO CONTROL PANEL (только CSS, без правки HTML) ===== */

/* базовые настройки — можно править числа под себя */
:root{
  /* фикс высоты секции (блок не “прыгает”) */
  --hero-h-desktop: 626px;

  /* размер “ячейки” под логотип (меняется только логотип, не макет) */
  --hero-logo-w: 500px;
  --hero-logo-h: 140px;

  /* Позиции (смещения) — X вправо (+), влево (-); Y вниз (+), вверх (-) */
  --hero-logo-x: 0px;    --hero-logo-y: 0px;
  --hero-slogan-x: 0px;  --hero-slogan-y: 0px;
  --hero-buttons-x: 0px; --hero-buttons-y: 0px;

  /* выравнивание по горизонтали внутри hero: flex-start | center | flex-end */
  --hero-align: center;

  /* порядок элементов (если нужно переставить местами) */
  --hero-order-logo: 0;
  --hero-order-slogan: 1;
  --hero-order-buttons: 2;

  /* вертикальный зазор между элементами */
  --hero-gap: 10px;

  /* фикс. размеры кнопок, чтобы не “гуляли” от длины текста */
  --hero-btn-w: 170px;
  --hero-btn-h: 48px;
}

/* секция зафиксирована по высоте */
.hero{
  height: var(--hero-h-desktop);
  min-height: var(--hero-h-desktop);
  display: flex;
  flex-direction: column;
  align-items: var(--hero-align);
  justify-content: center;
  gap: var(--hero-gap);
  overflow: hidden;
}

/* логотип — внутри своей ячейки, можно свободно менять файл/размер */
.hero-logo{
  width: var(--hero-logo-w);
  height: var(--hero-logo-h);
  order: var(--hero-order-logo);
  transform: translate(var(--hero-logo-x), var(--hero-logo-y));
}
.logo{
  width: 100%;
  height: 70%;
  object-fit: contain;
  object-position: center;
  display: block;
  max-width: none !important;
  max-height: none !important;
}

/* слоган: сдвиг и порядок */
.hero-slogan{
  order: var(--hero-order-slogan);
  transform: translate(var(--hero-slogan-x), var(--hero-slogan-y));
  margin: 0; /* чтобы отступы не влияли на фиксацию */
  line-height: 1.15;
}

/* кнопки: фикс. размеры + сдвиг и порядок */
.hero-buttons{
  order: var(--hero-order-buttons);
  transform: translate(var(--hero-buttons-x), var(--hero-buttons-y));
  display: flex; gap: 18px;
}
.hero-buttons .btn{
  min-width: var(--hero-btn-w);
  height: var(--hero-btn-h);
  line-height: calc(var(--hero-btn-h) - 2px);
  padding: 0 22px;
  white-space: nowrap;
}

/* фикс размеров декоративных цветов по бокам (если они есть) */
.hero-flower-left{ width: 500px; }
.hero-flower-right{ width: 400px; }

/* Мобильные значения (при желании подправь под себя) */
@media (max-width: 768px){
  .hero{
    height: auto;       /* чтобы на телефоне не резать контент */
    min-height: 520px;
    padding: 64px 16px 80px;
    align-items: center;
  }
  :root{
    --hero-logo-w: clamp(220px, 60vw, 360px);
    --hero-logo-h: 110px;
    --hero-logo-x: 0px; --hero-logo-y: 0px;
    --hero-slogan-x: 0px; --hero-slogan-y: 0px;
    --hero-buttons-x: 0px; --hero-buttons-y: 0px;
  }
  .hero-flower-left,
  .hero-flower-right{ display:none; }
}
/* === WhatsApp button in navbar === */
.btn-whatsapp{
  background: #25D366;           /* фирменный зелёный */
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(0,0,0,0.0);
}
.btn-whatsapp:hover{
  transform: translateY(-1px);
  filter: brightness(0.95);
}
.btn-ico{ display:inline-block; flex:0 0 auto; }


/* === Catalog card (soft blush/white theme) === */
.prod{
  position: relative;
  border-radius: 20px;
  /* белая основа + очень лёгкое розовое свечение в углу */
  background:
    radial-gradient(130% 90% at 100% 0, rgba(255,101,163,.10), transparent 42%),
    linear-gradient(180deg, #ffffff, #ffffff);
  /* тонкая «розовая» обводка, чтобы карточка не терялась на белом фоне */
  border: 1px solid rgba(255, 101, 163, 0.363);
  /* мягкая розовая тень без грязи */
  box-shadow:
    0 12px 23px rgba(255, 101, 163, 0.315),
    0 1px 0 rgba(255,101,163,.06) inset;
  overflow: hidden;
  transform: translateZ(0);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* деликатные цветовые пятна (лаванда + розовый) под контентом */
.prod::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(240px 140px at -10% -20%, rgba(230,221,255,.20), transparent 62%),
    radial-gradient(260px 160px at 120% 0%,  rgba(255,214,232,.22), transparent 62%);
  pointer-events:none;
}

/* блик, который «ездит» за курсором (работает с --mx из JS) */
.prod::after{
  content:"";
  position:absolute; inset:-1px;
  background: radial-gradient(420px 130px at var(--mx,60%) -12%, rgba(255,255,255,.55), transparent 60%);
  mix-blend-mode: screen;
  pointer-events:none;
  opacity:.45;
  transition: opacity .2s ease;
}

/* hover — карточка чуть выше и тени/бордер «розовеют» на полтона */
.prod:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 44px rgba(255,101,163,.18), 0 1px 0 rgba(255,101,163,.06) inset;
  border-color: rgba(255,101,163,.22);
}

/* медиа-зона: чисто белая «рамка» и аккуратный низ */
.prod-media{
  aspect-ratio: 3 / 2;             /* можешь вернуть 4/3, если так было в сетке */
  overflow: hidden;
  border-bottom: 1px solid rgba(255,101,163,.12);
  background: linear-gradient(180deg, #ffffff, #fff);
}
.prod-media img{
  width:100%; height:100%;
  object-fit:cover; display:block;
  transition: transform .35s ease;
}
.prod:hover .prod-media img{ transform: scale(1.04); }

/* текстовая часть — без серого «пыльного» оттенка */
.prod-body{ padding:16px 16px 18px; }
.prod-title{
  font-weight:700; margin:0 0 6px;
  color:#e14687;                       /* нежный акцент заголовка */
}
.prod-desc{
  color:#555; margin:0 0 10px;
}

/* чипы (группа/калибр): белые, с тонкой розовой рамкой */
.tag{
  background: linear-gradient(#fff, #fff);
  border:1px solid rgba(255,101,163,.18);
  color:#6f5663;                      /* нейтральный «розовато-серый» текст */
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
}

/* если используешь .badge — можно сделать её мягче под тему */
.badge{
  background: linear-gradient(135deg, #ff65a3, #ff88b8);
  box-shadow: 0 6px 16px rgba(255,101,163,.25);
}
.badge.hot{
  background: linear-gradient(135deg, #ff6b6b, #ffa07a);
}

/* === Hero: мягкая тень у боковых цветов === */
.hero-flower{
  /* две мягкие тени: основная и «подложка» поменьше */
  filter:
    drop-shadow(0 14px 28px rgba(0,0,0,.12))
    drop-shadow(0 3px 8px rgba(0,0,0,.08));
  transition: filter .25s ease; /* плавность при ховере (если нужен) */
}

/* чуть сильнее при наведении на десктопах (необязательно) */
@media (hover:hover){
  .hero-flower:hover{
    filter:
      drop-shadow(0 18px 36px rgba(0,0,0,.14))
      drop-shadow(0 4px 10px rgba(0,0,0,.10));
  }
}








/* === HERO: мягкая тень у логотипа === */
.hero .logo{
  /* нежное «свечение» в фирменном тоне + лёгкая объёмная тень */
  filter:
    drop-shadow(0 14px 28px rgba(255,101,163,.22))
    drop-shadow(0 4px 10px rgba(0,0,0,.08));
  transition: filter .25s ease;
}
@media (hover:hover){
  .hero .logo:hover{
    filter:
      drop-shadow(0 18px 36px rgba(255,101,163,.28))
      drop-shadow(0 6px 14px rgba(0,0,0,.10));
  }
}

/* === BUTTONS: единый «пухлый» объём + фокус-кольцо === */
.btn{
  /* базовая мягкая тень для всех кнопок */
  box-shadow:
    0 10px 24px rgba(22,8,43,.08),
    0 0 0 1px rgba(255,255,255,.55) inset;
  transition: box-shadow .25s ease, transform .2s ease, filter .2s ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(-1px); }

/* акцентная (розовая) — чуть ярче и теплее */
.btn.btn-accent{
  box-shadow:
    0 12px 30px rgba(255,101,163,.35),
    0 0 0 1px rgba(255,255,255,.20) inset;
}
.btn.btn-accent:hover{
  box-shadow:
    0 16px 40px rgba(255,101,163,.42),
    0 0 0 1px rgba(255,255,255,.20) inset;
}

/* WhatsApp — зелёный объём в той же эстетике */
.btn.btn-whatsapp{
  box-shadow:
    0 12px 30px rgba(37,211,102,.34),
    0 0 0 1px rgba(255,255,255,.22) inset;
}
.btn.btn-whatsapp:hover{
  box-shadow:
    0 16px 40px rgba(37,211,102,.42),
    0 0 0 1px rgba(255,255,255,.22) inset;
}

/* «прозрачная»/белая */
.btn.btn-ghost{
  box-shadow:
    0 10px 24px rgba(22,8,43,.08),
    0 0 0 1px rgba(0,0,0,.06) inset;
}
.btn.btn-ghost:hover{
  box-shadow:
    0 14px 32px rgba(22,8,43,.12),
    0 0 0 1px rgba(0,0,0,.06) inset;
}

/* доступность: красивое фокус-кольцо под тему */
.btn:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(255,101,163,.35),
    0 10px 24px rgba(22,8,43,.10);
}
.btn.btn-whatsapp:focus-visible{
  box-shadow:
    0 0 0 3px rgba(37,211,102,.35),
    0 12px 28px rgba(22,8,43,.10);
}





/* === ORDER: настраиваемый фон + боковые фото, центр чистый === */
#order{ position: relative; z-index: 1; }
#order .container{ position: relative; z-index: 1; }

/* 1) Цвет фона блока меняется переменной --order-bg */
.skin-order{
  background: var(--order-bg, #fff); /* поставь, например: #FFF4FA */
}

/* 2) Боковые фото через ::before/::after
      — управляются прямо с атрибутов style на секции #order */
#order::before,
#order::after{
  content:"";
  position:absolute;
  top: var(--order-side-top, -60px);         /* отрицательное = выпирает в блок ВЫШЕ */
  width: var(--order-side-w, 320px);         /* общая ширина обеих картинок */
  aspect-ratio: var(--order-side-aspect, 3/4); /* соотношение сторон, если нужно */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter:
    drop-shadow(0 18px 40px rgba(22,8,43,.10))
    drop-shadow(0 6px 12px rgba(0,0,0,.06));
  pointer-events:none;
  z-index: 0;                                /* под контентом, но над фоновым цветом */
  opacity: var(--order-side-opacity, 1);
}

/* левая */
#order::before{
  left: calc(50% - var(--container, 1440px)/2 - var(--order-side-gap, 400px));
  transform: translateX(-20%) rotate(var(--order-left-rot, -4deg));
  background-image: var(--order-left, none); /* url(...) */
}

/* правая */
#order::after{
  right: calc(50% - var(--container, 1440px)/2 - var(--order-side-gap, 40px));
  transform: translateX(20%) rotate(var(--order-right-rot, 4deg));
  background-image: var(--order-right, none); /* url(...) */
}

/* На мобильных — уменьшаем, можно и скрыть, если мешают */
@media (max-width: 768px){
  #order::before,
  #order::after{
    width: min(220px, 30vw);
    top: var(--order-side-top-mobile, -30px);
    opacity: .85;
  }
}











/* === Каталог не перекрывает соседа сверху === */
.skin-catalog{
  position: relative;
  z-index: 0; /* важно: не выше следующего блока */
}

/* === ORDER: даём выступать вверх === */
.order{
  position: relative;
  overflow: visible !important; /* было hidden — из-за этого "резало" картинку */
  z-index: 0;                   /* не поднимаем блок целиком (чтобы вниз не лезло) */
}

/* Боковые фото */
#order::before,
#order::after{
  content:"";
  position:absolute;
  top: var(--order-side-top, -120px); /* отрицательное = выступает ВВЕРХ в каталог */
  width: var(--order-side-w, 360px);
  aspect-ratio: 3 / 4;                /* можно сменить при желании */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter:
    drop-shadow(0 18px 40px rgba(22,8,43,.10))
    drop-shadow(0 6px 12px rgba(0,0,0,.06));
  pointer-events:none;
  z-index: 1; /* поверх фона каталога */
  opacity: 1;
}

/* левая картинка */
#order::before{
  left: calc(50% - var(--container, 1440px)/2 - var(--order-side-gap, 200px));
  transform: translateX(-20%) rotate(var(--order-left-rot, -4deg));
  background-image: var(--order-left, none);
}

/* правая картинка */
#order::after{
  right: calc(50% - var(--container, 1440px)/2 - var(--order-side-gap, 200px));
  transform: translateX(20%) rotate(var(--order-right-rot, 4deg));
  background-image: var(--order-right, none);
}

/* мобильная настройка (по желанию) */
@media (max-width: 768px){
  #order::before,
  #order::after{
    width: min(220px, 32vw);
    top: var(--order-side-top-mobile, -60px);
    opacity: .9;
  }
}




/* ===== ORDER side images: без обрезки + индивидуальные пропорции ===== */

/* оставляем возможность «выпирать» вверх */
.order{ overflow: visible !important; }

#order::before,
#order::after{
  /* базовые размеры */
  width: var(--order-side-w, 500px);
  top: var(--order-side-top, -120px);

  /* по умолчанию показываем всю картинку, без подрезки */
  background-size: var(--order-side-fit, contain);
  background-repeat: no-repeat;
  background-position: var(--order-side-pos, center bottom);

  /* лёгкая анимация при настройках */
  transition: transform .25s ease;
}

/* левая: индивидуальные пропорции и режим вписывания */
#order::before{
  aspect-ratio: var(--order-left-aspect, var(--order-side-aspect, 3/4));
  background-size: var(--order-left-fit, var(--order-side-fit, contain));
  /* свободные трансформации (мы добавляли раньше) */
  transform-origin: var(--order-left-origin, center);
  transform:
    translate(var(--order-left-x, -20%), var(--order-left-y, 0))
    rotate(var(--order-left-rot, -6deg))
    scaleX(var(--order-left-scale-x, 1))
    scaleY(var(--order-left-scale-y, 1))
    skewX(var(--order-left-skew-x, 0))
    skewY(var(--order-left-skew-y, 0));
}

/* правая: индивидуальные пропорции и режим вписывания */
#order::after{
  aspect-ratio: var(--order-right-aspect, var(--order-side-aspect, 3/4));
  background-size: var(--order-right-fit, var(--order-side-fit, contain));
  transform-origin: var(--order-right-origin, center);
  transform:
    translate(var(--order-right-x, 20%), var(--order-right-y, 0))
    rotate(var(--order-right-rot, 6deg))
    scaleX(var(--order-right-scale-x, 1))
    scaleY(var(--order-right-scale-y, 1))
    skewX(var(--order-right-skew-x, 0))
    skewY(var(--order-right-skew-y, 0));
}




/* Каталог не перекрывает соседа снизу */
.skin-catalog{
  position: relative;
  z-index: 0 !important;
}

/* Разрешаем выступ вверх у блока order */
.order{
  position: relative;
  overflow: visible !important; /* чтобы было видно то, что выше */
  z-index: 0;
}

/* Боковые картинки: можно выходить вверх, но не вниз */
#order::before,
#order::after{
  /* твои текущие стили тут уже есть: width/top/background/transform и т.д. */
  /* добавляем ограничитель: низ всегда обрезается, верх можно расширить 
  /*            ↑↑↑ сколько «добавочного» пространства разрешаем над секцией */
  z-index: 1;  /* поверх фона каталога, но под следующими секциями */
}




/* Каталог всегда ниже соседа снизу */
.skin-catalog{
  position: relative;
  z-index: 0 !important;
}

/* Как заказать — выше каталога, тени и выступ вверх разрешены */
.order{
  position: relative;
  z-index: 1;                 /* выше каталога */
  overflow: visible !important;
}

/* Галерея — поверх всего, что может выступать снизу */
.skin-gallery{
  position: relative;
  z-index: 2;                 /* перекрывает возможные “хвосты” снизу */
}

/* На случай полупрозрачного фона вверху Галереи — тонкая маска,
   чтобы точно «накрыть» то, что выступает снизу, и при этом не ломать тени. */
.skin-gallery::before{
  content:"";
  position:absolute;
  left:0; right:0; top:-1px;
  height: var(--gallery-top-mask, 28px);          /* можно настроить высоту маски */
  background: linear-gradient(#fff, rgba(255,255,255,0));
  pointer-events:none;
  z-index: 0;
}
.skin-gallery > .container{ position:relative; z-index:1; }




/* === WHY (Почему наши луковицы) === */
.skin-why{
  position: relative;
  z-index: 2; /* выше #order, чтобы хвосты картинок не были видны */
  background:
    radial-gradient(900px 420px at 10% 85%, rgba(230,221,255,.28) 0, rgba(230,221,255,0) 60%),
    radial-gradient(900px 420px at 95% 15%, rgba(255,214,232,.30) 0, rgba(255,214,232,0) 60%),
    #fff;
}

/* мягкая верхняя маска (если снизу есть выступы из order) */
.skin-why::before{
  content:"";
  position:absolute; left:0; right:0; top:-1px;
  height: var(--why-top-mask, 28px);
  background: linear-gradient(#fff, rgba(255,255,255,0));
  pointer-events:none;
  z-index: 0;
}
.skin-why > .container{ position:relative; z-index:1; }

.why-grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
@media (max-width: 1200px){ .why-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px){ .why-grid{ grid-template-columns: 1fr; } }

.why-card{
  position:relative;
  border-radius: 20px;
  padding: 18px 16px;
  text-align:left;
  background:
    linear-gradient(#ffffff,#ffffff) padding-box,
    linear-gradient(135deg, rgba(255,101,163,.35), rgba(230,221,255,.45)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 10px 26px rgba(22,8,43,.08);
  transition: transform .25s ease, box-shadow .25s ease;
}
.why-card:hover{ transform: translateY(-6px); box-shadow:0 16px 42px rgba(22,8,43,.12); }

.why-icon{
  width: 56px; height: 56px; border-radius: 50%;
  display:grid; place-items:center;
  background: radial-gradient(90% 90% at 30% 20%, #fff 0, #ffeaf3 40%, #ffd5e7 100%);
  box-shadow: 0 8px 18px rgba(255,101,163,.25), inset 0 0 0 6px #fff;
  margin-bottom: 10px;
}
.why-icon svg{
  width:26px; height:26px; stroke:#c12266; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}

.why-card h3{ margin:0 0 6px; font-size:18px; color:#e14687; }
.why-card p{ margin:0; color:#3f3f46; }

.why-cta{
  margin-top: 22px;
  border-radius: 22px;
  padding: 20px;
  text-align:center;
  background:
    linear-gradient(#ffffff,#ffffff) padding-box,
    linear-gradient(135deg, rgba(255,101,163,.30), rgba(230,221,255,.40)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 8px 18px rgba(22,8,43,.06);
}
.why-cta p{ margin:0 0 12px; color:#555; }
.why-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }




/* === WHY: мини-калькулятор луковиц === */
.why-calc{
  margin-top: 26px;
  padding: 20px;
  border-radius: 22px;
  text-align: center;
  background:
    linear-gradient(#ffffff,#ffffff) padding-box,
    linear-gradient(135deg, rgba(255,101,163,.30), rgba(230,221,255,.40)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 8px 18px rgba(22,8,43,.06);
}
.why-calc-title{ margin:0 0 14px; font-size:20px; }

.why-calc-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(160px,1fr));
  gap:12px;
  margin-bottom:10px;
}
.why-calc-grid label{
  display:flex; flex-direction:column; gap:6px;
  text-align:left; font-weight:600; color:#444;
}
.why-calc-grid input,
.why-calc-grid select{
  height:44px; border-radius:12px; padding:0 12px;
  border:1px solid rgba(0,0,0,.1); background:#fff; color:#333;
  box-shadow:0 4px 12px rgba(0,0,0,.04);
  outline:none;
}

.why-calc-result{
  margin: 8px 0 12px;
  font-weight:800;
  font-size: clamp(22px, 3vw, 28px);
  color:#e14687;
}
.why-calc-actions{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.why-calc-note{ margin:6px 0 0; color:#666; font-size:13px; }

@media (max-width: 992px){ .why-calc-grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 560px){ .why-calc-grid{ grid-template-columns: 1fr; } }










/* Фон секции (легкая «дымка») */
.skin-why{
  background:
    radial-gradient(900px 420px at 10% 15%, rgba(230,221,255,.32), transparent 60%),
    radial-gradient(900px 420px at 90% 85%, rgba(255,214,232,.30), transparent 60%),
    #fff;
}

/* Сетка карточек */
.why-grid{
  display:grid;
  grid-template-columns: repeat(5,1fr);
  gap:18px;
}
@media (max-width: 1200px){ .why-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 700px){ .why-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .why-grid{ grid-template-columns: 1fr; } }

/* Карточка */
.why-card{
  position:relative;
  padding:18px 16px 16px;
  border-radius:20px;
  background:
    linear-gradient(#ffffff,#ffffff) padding-box,
    linear-gradient(135deg, rgba(255,101,163,.35), rgba(230,221,255,.45)) border-box;
  border:1px solid transparent;
  box-shadow: 0 10px 22px rgba(22,8,43,.08);
  overflow:hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.why-card::before{
  content:"";
  position:absolute; inset:-20% -10% auto -10%;
  height:60%;
  background:
    radial-gradient(180px 120px at 20% 10%, rgba(255,101,163,.14), transparent 60%),
    radial-gradient(180px 120px at 80% 20%, rgba(230,221,255,.22), transparent 60%);
  pointer-events:none;
  filter: blur(10px);
}
.why-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(22,8,43,.14);
}

/* Иконка в «петал-блобе» */
.why-icon{
  width:56px; height:56px; border-radius:16px; margin-bottom:10px;
  display:grid; place-items:center;
  background:
    radial-gradient(130% 100% at 20% 15%, #fff 0, #ffeaf3 55%, #ffd6e8 100%);
  box-shadow: 0 8px 18px rgba(255,101,163,.25), inset 0 0 0 6px #fff;
}
.why-icon svg{ width:28px; height:28px; stroke:#c12266; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

.why-card h3{ margin:2px 0 6px; font-size:16.5px; color:#e14687; }
.why-card p{ margin:0; color:#3f3f46; }





/* Карточка калькулятора (glass + gradient border) */
.why-calc{
  margin-top: 26px;
  padding: 20px;
  border-radius: 22px;
  background:
    linear-gradient(#ffffff,#ffffff) padding-box,
    linear-gradient(135deg, rgba(255,101,163,.30), rgba(230,221,255,.40)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 12px 28px rgba(22,8,43,.08);
}
.why-calc-title{ margin:0 0 12px; text-align:center; font-size:20px; }

.why-calc-wrap{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap:18px;
  align-items:center;
}
@media (max-width: 720px){
  .why-calc-wrap{ grid-template-columns: 1fr; }
}

/* Индикатор-кольцо */
.why-meter{ display:grid; place-items:center; }
.meter-ring{
  --deg: 0deg;                /* JS меняет угол */
  width:160px; height:160px; border-radius:50%;
  background: conic-gradient(var(--accent, #ff65a3) var(--deg), #eee 0);
  position:relative;
  filter: drop-shadow(0 8px 24px rgba(255,101,163,.25));
}
.meter-hole{
  position:absolute; inset:10px; border-radius:50%;
  background:#fff; box-shadow: inset 0 0 0 6px #fff;
}
.meter-num{
  position:absolute; inset:0; display:grid; place-items:center;
  font-weight:800; font-size:28px; color:#e14687;
}
.meter-label{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
  font-size:12px; color:#6b7280; letter-spacing:.3px;
}

/* Форма */
.why-form{ display:grid; gap:12px; grid-template-columns: repeat(2,minmax(180px,1fr)); }
@media (max-width: 720px){ .why-form{ grid-template-columns: 1fr; } }
.why-form label{ display:flex; flex-direction:column; gap:6px; font-weight:700; color:#444; }
.ctrl{
  height:44px; border-radius:12px; padding:0 12px;
  border:1px solid rgba(0,0,0,.1); background:#fff; color:#333;
  box-shadow:0 4px 12px rgba(0,0,0,.04);
}

/* Чипы (переключатели) */
.chip-group{ display:flex; gap:8px; flex-wrap:wrap; }
.chip-group input{ position:absolute; left:-9999px; }
.chip{
  display:inline-flex; align-items:center; height:40px;
  padding:0 14px; border-radius:999px; cursor:pointer;
  background:#fff; border:1px solid rgba(0,0,0,.08);
  box-shadow:0 4px 10px rgba(0,0,0,.04);
  transition:.2s;
}
.chip-group input:checked + .chip{
  color:#fff; background:var(--accent,#ff65a3); border-color:transparent;
  box-shadow:0 8px 24px rgba(255,101,163,.35);
}

/* Слайдер + число справа */
.range-wrap{ display:flex; gap:10px; align-items:center; }
.range-number{ width:90px; }
#calcSpacingRange{
  flex:1; height:6px; border-radius:999px; appearance:none; background:#eee; outline:none;
}
#calcSpacingRange::-webkit-slider-thumb{
  appearance:none; width:20px; height:20px; border-radius:50%;
  background:var(--accent,#ff65a3); box-shadow:0 6px 16px rgba(255,101,163,.35);
  border:2px solid #fff; cursor:pointer;
}

.why-calc-actions{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:10px; }
.why-calc-note{ margin:8px 0 0; text-align:center; color:#666; font-size:13px; }






/* === FOOTER: жёсткий reset параграфа === */
.footer{
  background:#222;
  color:#aaa;
  padding:24px 0;
  text-align:center;
}

.footer p{
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  background:none !important;
  box-shadow:none !important;
  text-align:center !important;
  display:block !important;
  float:none !important;
  font: inherit !important;     /* размер/гарнитура как у футера */
  color: inherit !important;     /* серый из футера */
}




/* ===== БАЗОВАЯ БЕЗОПАСНОСТЬ ВЁРСТКИ НА МОБИЛКАХ ===== */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;                  /* режем горизонтальную прокрутку */
  overscroll-behavior-x: none;         /* Chrome/Android: нет «протягивания» по Х */
  -webkit-text-size-adjust: 100%;      /* iOS не увеличивает шрифт самовольно */
}

/* когда открыто мобильное меню — блокируем фон */
body.no-scroll { height: 100vh; overflow: hidden; }

/* чтобы случайные широкие элементы не «ломали» ширину */
img, video, svg, canvas { max-width: 100%; height: auto; }

/* убираем перетаскивание/выделение картинок на iOS */
img { -webkit-user-drag: none; user-select: none; }

/* убираем синий хайлайт на тач-тапах */
a, button { -webkit-tap-highlight-color: transparent; }

/* секции с декором, параллаксами и т.п. — без выхода за край */
.navbar, .hero, .section, .skin-order, .order, .order-decor { overflow-x: hidden; }

/* декоративные цветки/фон в hero, чтобы не создавали горизонтальный скролл */
.hero .hero-flower { pointer-events: none; user-select: none; }

/* иногда box-shadow/трансформации выходят за край — подстрахуемся */
.container { overflow: visible; }




/* === FIX: «О компании» не должен скроллиться отдельно === */

/* Родительская секция и сетка */
#about,
.skin-about,
.skin-about .about-grid {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  overscroll-behavior: auto !important;          /* не изолируем прокрутку */
}

/* Колонки внутри about */
.skin-about .about-left,
.skin-about .about-right {
  min-height: 0 !important;                      /* анти-nested-scroll для grid/flex */
  min-width: 0 !important;
  overflow: visible !important;                  /* вместо auto/scroll */
  -webkit-overflow-scrolling: auto !important;   /* iOS: убираем инерционный inner-scroll */
}

/* Если где-то было задано фиксированное значение высоты — гасим его */
.skin-about .about-left *,
.skin-about .about-right * {
  max-height: none !important;
}

/* Безопасный контейнер под видео */
.video-card { overflow: visible !important; }
.media-16x9 {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden; /* только для обрезки видео по рамке, без вертикального скролла */
}
.media-16x9 .media-el {
  display: block;
  width: 100%;
  height: 100%;
}
@supports not (aspect-ratio: 16/9) {
  .media-16x9 { height: 0; padding-top: 56.25%; }
  .media-16x9 .media-el { position: absolute; inset: 0; }
}

/* На всякий случай режем горизонтальный скролл у секций */
.section, .skin-about { overflow-x: hidden; }