:root{
  --bg:#ffffff;
  --ink:#111827;
  --muted:#6b7280;
  --brand:#B63AA6;
  --brand-2:#6C8CFF;
  --soft:#F8F5FA;
  --card:#ffffff;
  --ring:rgba(182,58,166,0.25);
  --radius:16px;
  --shadow:0 10px 30px rgba(17,24,39,.08);
  --grad:linear-gradient(135deg, #B63AA6 0%, #6C8CFF 100%);
  --grad-2:linear-gradient(135deg, #ffe3f7 0%, #e8edff 100%);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(182,58,166,0.10), transparent 60%),
    radial-gradient(900px 500px at 120% 10%, rgba(108,140,255,0.12), transparent 60%),
    var(--bg);
  line-height:1.6;
  overflow-x:hidden;
}

h1,h2,h3,h4{font-family:Poppins,Inter,sans-serif;margin:0 0 .5rem}
h1{font-size:clamp(2rem, 2.2rem + 1.5vw, 3.25rem); line-height:1.1}
h2{font-size:clamp(1.5rem, 1.3rem + 1vw, 2.25rem)}
h3{font-size:1.25rem}
p{margin:0 0 1rem; color:var(--ink)}
.gtext{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

a{color:var(--brand); text-decoration:none}
a:hover{opacity:.9}
.container{max-width:1140px;margin:0 auto;padding:0 20px}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--grad);color:#fff;padding:.9rem 1.2rem;
  border-radius:999px;font-weight:600;box-shadow:var(--shadow);
  border:0;cursor:pointer;transition:.25s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-sm{padding:.6rem .9rem;font-size:.9rem}
.btn-glow{box-shadow:0 10px 25px rgba(182,58,166,.35),0 4px 12px rgba(108,140,255,.25)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid #e5e7eb}

/* Header & nav */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.75);backdrop-filter: blur(10px);border-bottom:1px solid #eef0f4}
.header-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.1rem;color:var(--ink)}
.brand-mark{width:38px;height:38px;border-radius:50%;background:var(--grad);display:grid;place-items:center;color:#fff}
.nav{display:flex;align-items:center;gap:22px}
.nav a{color:var(--ink);position:relative}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;transform:scaleX(0);transform-origin:left;background:var(--grad);transition:transform .25s}
.nav a:hover::after{transform:scaleX(1)}
.nav .btn-sm{margin-left:6px}

/* Hero with parallax layers */
.hero{position:relative;min-height:76vh;display:grid;align-items:center;overflow:hidden;padding:64px 0 40px}
.hero-bg{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(246,240,255,.55), rgba(255,255,255,.9)),
    radial-gradient(800px 480px at 20% 10%, rgba(182,58,166,.18), transparent 60%),
    radial-gradient(700px 420px at 90% 10%, rgba(108,140,255,.16), transparent 60%),
  background-attachment: fixed;
  z-index:-2;
}
.hero-inner{display:grid;gap:28px;grid-template-columns:1.1fr .9fr;align-items:center}
.hero-content p{color:var(--muted);font-size:1.05rem;max-width:56ch}
.hero-actions{display:flex;gap:12px;margin:18px 0 10px}
.hero-bullets{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:8px}
.hero-bullets li{display:flex;gap:10px;align-items:center;color:#374151}
.hero-bullets i{color:var(--brand)}
.hero-visual img{width:100%;border-radius:24px;box-shadow:var(--shadow);object-fit:cover;will-change:transform}

.hero-float{position:absolute;border-radius:999px;filter:blur(16px);opacity:.45;z-index:-1}
.hero-float-a{width:320px;height:320px;left:-60px;top:10%;background:var(--grad)}
.hero-float-b{width:260px;height:260px;right:-40px;bottom:8%;background:var(--grad-2)}

/* Utility parallax on sections */
.parallax-fixed{
  background:
    linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.9)),
    radial-gradient(700px 420px at 12% 0%, rgba(182,58,166,.10), transparent 60%),
    radial-gradient(700px 420px at 100% 10%, rgba(108,140,255,.10), transparent 60%);
  background-attachment: fixed;
}

/* Badges */
.badges{padding:18px 0 6px}
.badges-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.badge{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:999px;background:#fff;border:1px solid #f0eaf4}
.badge i{color:var(--brand)}

/* Sections */
.section{padding:72px 0;background:var(--bg)}
.section.alt{background:var(--soft)}
.section-head{text-align:center;margin-bottom:28px}
.section-head p{color:var(--muted)}

/* Cards & glass style */
.cards-grid{display:grid;gap:20px;grid-template-columns:repeat(3,1fr)}
.cards-4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--card);border:1px solid #edf0f5;border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);transition:.25s ease}
.card:hover{transform:translateY(-3px)}
.card img{width:100%;height:200px;object-fit:cover;border-radius:12px;margin-bottom:12px;will-change:transform}
.card .price{margin-top:10px;font-weight:700}
.card img {
  width: 100%;
  height: 200px; /* фиксированная высота */
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 12px;
  display: block;
}

.card .btn {
  margin-top: 10px;
  width: 100%;
  justify-content: center;
}
.card h3 {
  margin-top: 80px;
}
.glass{background:rgba(255,255,255,.7) !important;backdrop-filter: blur(10px)}
.card-border{position:relative}
.card-border::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none
}

/* About */
.about-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
.about-media img{width:100%;border-radius:24px;box-shadow:var(--shadow);will-change:transform}
.checklist{list-style:none;padding:0;margin-top:12px;display:grid;gap:8px}
.checklist li{display:flex;gap:10px;align-items:center}
.checklist i{color:#10b981}

/* Gallery */
.gallery-grid{display:grid;gap:10px;grid-template-columns:repeat(4,1fr)}
.gallery-grid img{width:100%;border-radius:14px;height:180px;object-fit:cover;box-shadow:var(--shadow);will-change:transform}

/* Pricing */
.pricing-table{max-width:720px;margin:0 auto;border:1px solid #e9ecf2;border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
.pricing-row{display:flex;justify-content:space-between;padding:14px 18px;border-bottom:1px dashed #eef1f6}
.pricing-row:last-child{border-bottom:0}
.pricing-note{padding:12px 18px;color:var(--muted);display:flex;align-items:center;gap:10px;background:#fafbff}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.step{border:1px solid #eef0f4;border-radius:18px;padding:16px;box-shadow:var(--shadow)}
.step-num{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--grad);color:#fff;font-weight:700;margin-bottom:8px}

/* Team */
.person img{height:240px}

/* Reviews */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.review{border:1px solid #eef0f4;border-radius:18px;padding:18px;box-shadow:var(--shadow)}
.review .stars{color:#f59e0b;margin-bottom:6px}
.review span{color:var(--muted);font-size:.95rem}

/* FAQ */
.faq{border:1px solid #e9ecf2;border-radius:14px;box-shadow:var(--shadow);padding:12px}
.faq details+details{margin-top:10px}
.faq summary{cursor:pointer;font-weight:600}
.faq p{margin-top:8px;color:#374151}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.contact-list{list-style:none;padding:0;display:grid;gap:8px}
.contact-list i{color:var(--brand);margin-right:8px}
.map-link{display:inline-flex;align-items:center;gap:8px;margin:10px 0;font-weight:600}
.map-image{width:100%;border-radius:16px;border:1px solid #ececf3;box-shadow:var(--shadow);will-change:transform}
.form{border:1px solid #e9ecf2;border-radius:18px;padding:18px;box-shadow:var(--shadow)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.form input,.form select,.form textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid #e5e7eb;outline:none;font:inherit}
.form input:focus,.form select:focus,.form textarea:focus{box-shadow:0 0 0 6px var(--ring);border-color:#d4d9ee}
.form textarea{min-height:120px;resize:vertical}
.form-disclaimer{color:var(--muted);font-size:.9rem;margin-top:10px}

/* Footer */
.site-footer{background:linear-gradient(180deg, #0f1020 0%, #191a33 100%);color:#e5e7eb;margin-top:40px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1.2fr 1fr;gap:24px;padding:36px 0}
.brand--light .brand-mark{background:#fff;color:#0f1020}
.brand--light .brand-name{color:#fff}
.footer-about{color:#c7c9d3;margin:10px 0}
.footer-links{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.footer-links a{color:#e5e7eb}
.footer-links i{margin-right:8px;color:#94a3b8}
.socials{display:flex;gap:10px;margin-top:8px}
.socials a{width:38px;height:38px;display:grid;place-items:center;border:1px solid #32344d;border-radius:10px;color:#e5e7eb;transition:.25s}
.socials a:hover{transform:translateY(-2px)}
.footer-bottom{border-top:1px solid #2b2d49;padding:12px 0;text-align:center;position:relative}
.to-top{position:absolute;right:20px;top:50%;transform:translateY(-50%);width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:#26284a;color:#fff}

/* Responsive */
@media (max-width:1024px){
  .hero-inner{grid-template-columns:1fr}
  .badges-grid{grid-template-columns:repeat(2,1fr)}
  .cards-grid{grid-template-columns:repeat(2,1fr)}
  .cards-4{grid-template-columns:repeat(2,1fr)}
  .about-row{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .reviews{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .badges-grid{grid-template-columns:1fr}
  .cards-grid,.cards-4{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .form-row{grid-template-columns:1fr}
}
.pricing-table.wide {
  width: 100%;
  max-width: none; /* убираем ограничение ширины */
  padding: 0; 
  border-radius: var(--radius);
  overflow: hidden;
}

.pricing-category {
  background: var(--grad);
  color: #fff;
  margin: 0;
  padding: 14px 20px;
  font-size: 1.1rem;
  font-weight: 600;
}

.pricing-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.pricing-row span {
  flex: 1;
  font-size: 0.95rem;
  line-height: 1.5;
}

.pricing-row strong {
  white-space: nowrap;
  font-size: 1rem;
}

.pricing-note {
  padding: 14px 20px;
  font-size: 0.9rem;
  color: var(--muted);
  background: rgba(0,0,0,0.03);
}

.pricing-note i {
  color: var(--brand);
  margin-right: 8px;
}
.offer-icon {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #f3f0f6; /* нежный фон */
  color: #b66ba6;       /* мягкий сиреневый цвет иконки */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.6rem;
  margin: 0 auto 20px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.offer-card:hover .offer-icon {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.hygiene-bg {
  position: relative;
  background-attachment: fixed; /* эффект параллакса */
  position: relative;
    background: linear-gradient(rgba(255, 255, 255, 0.92), rgb(255 255 255 / 34%)), /* белое полупрозрачное наложение */ url(../images/hygiene-bg.jpg) center / cover no-repeat!important;
    background-attachment: fixed;
}

.hygiene-bg .section-head h2,
.hygiene-bg .section-head p {
  position: relative;
  z-index: 1;
}

.hygiene-bg .steps {
  position: relative;
  z-index: 1;
}
.faq details summary {
  font-size: 1.1rem; /* увеличен размер заголовка вопроса */
  font-weight: 600;
  cursor: pointer;
  padding: 12px 0;
}

.faq details p {
  font-size: 1rem; /* увеличен размер текста ответа */
  line-height: 1.6;
  margin: 0 0 12px;
}

.faq {
  padding: 20px;
}

.faq details + details {
  border-top: 1px solid rgba(0,0,0,0.08);
}
.cookie-banner {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 500px;
  width: 90%;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  padding: 16px 20px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
  text-align: center;
}

.cookie-banner p {
  font-size: 0.95rem;
  margin: 0;
}

.cookie-banner a {
  color: var(--brand, #b66ba6);
  text-decoration: underline;
}

.cookie-banner .btn {
  align-self: center;
  padding: 6px 16px;
  font-size: 0.9rem;
}
/* --- Mobile nav toggle --- */
.nav-toggle{
  display:none;
  width:44px;height:44px;border:1px solid #e5e7eb;border-radius:10px;
  background:#fff; padding:0 8px; cursor:pointer;
  display:none; align-items:center; justify-content:center; gap:5px;
}
.nav-toggle span{
  display:block; width:20px; height:2px; background:#111827; border-radius:2px;
  transition:.25s ease;
}
.nav-toggle.active span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle.active span:nth-child(2){opacity:0}
.nav-toggle.active span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

body.no-scroll{overflow:hidden}

/* Desktop nav stays as-is */

/* --- Mobile layout --- */
@media (max-width:1024px){
  .nav-toggle{display:flex}
  .nav{
    position:fixed; left:0; right:0; top:64px; /* под шапкой */
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(10px);
    border-top:1px solid #eef0f4;
    display:flex; flex-direction:column; gap:14px;
    padding:16px 20px 24px;
    transform:translateY(-110%); opacity:0; pointer-events:none;
    transition:transform .28s ease, opacity .28s ease;
  }
  .nav.open{transform:translateY(0); opacity:1; pointer-events:auto}
  .nav a{font-size:1.05rem; padding:8px 4px}
  .nav .btn-sm{width:100%; justify-content:center; margin-top:6px}
}