:root{
  --bg:#eef5ff;
  --bg2:#dfeaff;
  --card:#ffffff;
  --text:#0b1324;
  --muted:#5b6b8b;
  --brand:#3b82f6;
  --brand-2:#22d3ee;
  --ring: 0 0 0 8px color-mix(in hsl, var(--brand) 20%, transparent);
  --radius:18px;
  --shadow: 0 10px 25px rgba(15,23,42,.08), 0 2px 8px rgba(15,23,42,.05);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  color:var(--text);
  background: radial-gradient(1200px 800px at 0% -10%, var(--bg2), transparent),
              radial-gradient(900px 700px at 100% 10%, #e8f2ff, transparent),
              linear-gradient(180deg, #f6f9ff, #f0f5ff);
  overflow-x:hidden;
}

/* blobs */
/* Контейнер для декоративных «пятен» — фиксированный и обрезает всё, что вылазит */
.fx-decor{
  position: fixed;
  inset: 0;                /* во весь экран */
  overflow: hidden;        /* главное: никаких горизонтальных скроллов */
  pointer-events: none;
  z-index: -1;
}

/* Сами «пятна» теперь абсолютные внутри контейнера */
.blob{
  position: absolute;
  width: 40vmax; aspect-ratio: 1;
  background: radial-gradient(circle at 30% 30%, #bde3ff 0, #e5f2ff 40%, transparent 60%);
  filter: blur(50px);
  opacity: .5;
  animation: float 18s ease-in-out infinite;
}

/* Позиционируем слева/справа, но уже внутри обрезанного контейнера */
/* Фикс-контейнер на весь экран, режет всё что вылазит */
.fx-decor{
  position: fixed !important;
  inset: 0 !important;
  overflow: hidden !important;
  pointer-events: none;
  z-index: -1;
}

/* Блобы больше НЕ fixed, только absolute внутри .fx-decor */
.fx-decor .blob{
  position: absolute !important;
  width: 60vmin;          /* меньше, чем раньше */
  aspect-ratio: 1;
  filter: blur(50px);
  opacity: .5;
  animation: float 18s ease-in-out infinite;
}

/* Позиции внутри контейнера (ничего не «торчит» за пределы вьюпорта) */
.fx-decor .blob-a{ left: -12%; bottom: 24%; }
.fx-decor .blob-b{ right: -12%; bottom: 14%;
  animation-duration: 24s;
  background: radial-gradient(circle at 70% 40%, #c7e5ff, #ebf4ff 40%, transparent 60%);
}

/* Доп-защита от горизонтального скролла */
html, body { width:100%; overflow-x:hidden; }

/* Фикс-контейнер на весь экран, режет всё что вылазит */
.fx-decor{
  position: fixed !important;
  inset: 0 !important;
  overflow: hidden !important;
  pointer-events: none;
  z-index: -1;
}

/* Блобы больше НЕ fixed, только absolute внутри .fx-decor */
.fx-decor .blob{
  position: absolute !important;
  width: 60vmin;          /* меньше, чем раньше */
  aspect-ratio: 1;
  filter: blur(50px);
  opacity: .5;
  animation: float 18s ease-in-out infinite;
}

/* Позиции внутри контейнера (ничего не «торчит» за пределы вьюпорта) */
.fx-decor .blob-a{ left: -12%; bottom: 24%; }
.fx-decor .blob-b{ right: -12%; bottom: 14%;
  animation-duration: 24s;
  background: radial-gradient(circle at 70% 40%, #c7e5ff, #ebf4ff 40%, transparent 60%);
}

/* Доп-защита от горизонтального скролла */
html, body { width:100%; overflow-x:hidden; }



.container{width:min(1100px,92%); margin-inline:auto}

.header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0; position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(140%) blur(6px);
}
.logo{display:flex; gap:.6rem; align-items:center; text-decoration:none; color:var(--text); font-weight:800; font-family:Manrope,Inter}
.logo svg{color:var(--brand)}

.nav{display:flex; gap:22px; align-items:center}
.nav a{color:var(--text); text-decoration:none; font-weight:500}
.nav .btn--nav {padding:.45rem .9rem; border-radius:999px; box-shadow:var(--shadow)}
.nav .btn--nav:hover{padding:.45rem .9rem; border-radius:999px; background:#fff; box-shadow:var(--shadow)}
/* === Header / Nav base остаётся как есть === */

/* Размер и выравнивание самой кнопки */
.burger{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  gap:6px;                 /* расстояние между линиями */
  width:40px;
  height:36px;
  padding:0;
  border:0;
  background:transparent;
  border-radius:10px;
}

/* Три видимые полоски */
.burger span{
  display:block;
  width:24px;
  height:2.5px;            /* чуть толще, чтобы на светлом фоне было видно */
  background:#111827;      /* можно заменить на var(--text) */
  border-radius:2px;
  transition:transform .25s ease, opacity .2s ease;
}

/* Анимация в крестик при открытом меню */
.burger[aria-expanded="true"] span:nth-child(1){
  transform:translateY(8px) rotate(45deg);
}
.burger[aria-expanded="true"] span:nth-child(2){
  opacity:0;
}
.burger[aria-expanded="true"] span:nth-child(3){
  transform:translateY(-8px) rotate(-45deg);
}

.burger {
  display: none !important;
}


/* --- Мобильное меню --- */
@media (max-width: 720px){
  .nav{ display:none }                /* по умолчанию скрыто */
  .nav.is-open{
    display:flex;
    position:fixed;
    top:60px;                         /* высота шапки */
    left:0; right:0;
    flex-direction:column;
    gap:8px;
    padding:12px 16px 16px;
    background:#fff;
    border-radius:0 0 16px 16px;
    box-shadow:0 18px 30px rgba(2,6,23,.18);
    z-index:60;
    animation: dropdown .18s ease-out;
  }
  .nav.is-open a{
    padding:10px 12px;
    border-radius:10px;
    background:linear-gradient(180deg,#ffffff,#f8fbff);
    box-shadow:0 1px 0 #eef3ff inset;
  }
  .header{ padding:12px 0 }          /* немного компактнее */

  .burger {
    display: flex !important;
  }

}

@keyframes dropdown{
  from{ opacity:0; transform:translateY(-6px) }
  to  { opacity:1; transform:translateY(0) }
}


/* HERO */
.hero{
  display:grid; grid-template-columns: 1.1fr .9fr; gap:40px; align-items:center;
  padding:40px 0 30px;
}
.eyebrow{letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:#3c5a97; margin:0 0 6px}
.hero h1{font-family:Manrope,Inter; font-weight:800; font-size:clamp(28px,5vw,44px); line-height:1.1; margin:.2rem 0 .6rem}
.sub{color:var(--muted); max-width:42ch}
.hero__cta{display:flex; gap:14px; margin:18px 0 8px}
.chip{display:inline-block; padding:.4rem .7rem; border-radius:999px; background:linear-gradient(90deg,#fff, #f5fbff); box-shadow:0 2px 8px rgba(2,6,23,.08); font-size:.9rem}
.hero__badges{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}

.hero__image{position:relative; isolation:isolate}
.hero__image img{width:100%; height:auto; border-radius:24px;}
.hero__image .glow{position:absolute; inset:-10% -10% auto -10%; height:50%; border-radius:30px;
  background: radial-gradient(600px 220px at 50% 10%, color-mix(in oklab, var(--brand) 30%, transparent), transparent);
  filter: blur(30px); z-index:-1; opacity:.8; pointer-events:none}

/* CARDS & ELEMENTS */
.card{
  background:linear-gradient(180deg,#ffffff, #fcfeff);
  border-radius:var(--radius);
  box-shadow: var(--shadow);
  border:1px solid #f0f3ff;
}
.card--feature{display: flex; flex-direction: column; align-items: center; justify-content: center; padding:22px; position:relative; overflow:hidden}
.card--feature::after{
  content:""; position:absolute; inset:auto -20% -20% -20%; height:60%; border-radius:30px;
  background: radial-gradient(400px 120px at 30% 10%, rgba(34,211,238,.25), transparent 55%); filter:blur(20px)
}
.card.mini{display:flex; gap:14px; align-items:flex-start; padding:16px 18px}

.icon{width:100px; height:100px; display:grid; place-items:center; border-radius:12px;
  background:linear-gradient(180deg,#eaf5ff,#ffffff); box-shadow:inset 0 0 0 1px #e7efff}
.icon img{width:100%; height:100%; fill:#3b82f6}

.mini__icon{font-size:26px; line-height:1; width:42px; height:42px; display:grid; place-items:center;
  background:#fff; border-radius:12px; box-shadow:var(--shadow)
}

/* Perevagy */

.cards {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
}

.cards img {
  width: 20%;
  border-radius: 10%;
  transition: transform .5s ease;
}

.cards img:hover {
  transform:scale(1.06);
  box-shadow: 0 8px 25px rgba(0, 140, 255, 0.5);
}

@media (max-width: 1024px){
  .cards {
    flex-direction: column;
  }

  .cards img {
    width: 80%;
  }
}

/* PRODUCTS */
.products h2,.benefits h2,.sizing h2,.review h2,.guarantees h2,.faq h2,.cta h2{font-family:Manrope,Inter; font-weight:800}
.products__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.product{padding:14px; border-radius:16px; background:#fff; box-shadow: var(--shadow); position:relative; overflow:hidden}
.product::before{
  content:""; position:absolute; inset:-1px -1px auto -1px; height:60px; border-radius:16px 16px 0 0;
  background:linear-gradient(90deg, rgba(59,130,246,.12), rgba(34,211,238,.12)); filter:blur(8px)
}
.product__media{position:relative; background:#f6f9ff; border-radius:12px; }
.product__media img{width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.02); transition:transform .5s ease}
.product:hover .product__media img{transform:scale(1.06)}
.dot{position:absolute; left:10px; top:10px; font-size:18px; color:#10b981; filter:drop-shadow(0 2px 4px rgba(16,185,129,.35))}
.product__title{margin:.6rem 0 .1rem; font-size:1.05rem}
.muted{color:var(--muted)}
.price{margin:.3rem 0 .6rem}
.product__cta{display:flex; gap:8px}

.table-wrap{padding:10px 16px}
.size-table{width:100%; border-collapse:collapse; font-size:.95rem}
.size-table th,.size-table td{padding:10px 12px; border-bottom:1px dashed #e6ecff; text-align:left}
.size-table thead th{background:linear-gradient(180deg,#f4f8ff,#fff); border-top-left-radius:10px; border-top-right-radius:10px}

/* Характеристики */

.characters {
  text-align: center;
}

.characters-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  justify-items: center;
  padding: 100px;
}

.characters-cards img {
  border-radius: 5%;
  transition: transform .5s ease;
  width: 80%;
}

.characters-cards img:hover {
  transform:scale(1.06);
  box-shadow: 0 8px 25px rgba(0, 140, 255, 0.5);
}

@media (max-width: 1024px){
  .characters-cards {
    display: flex;
    flex-direction: column;
    padding: 0;
    align-items: center;
  }

  .characters-cards img {
    width: 90%;
  }
}

/* Отзывы */

.reviews-section {
  text-align: center;
  margin: 40px 0;
}

.reviews-carousel {
  display: flex;
  overflow: hidden;
  justify-content: center;
  position: relative;
}

.review-card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  max-width: 600px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow);
}

.review-card.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
  position: relative;
}



.review-card .avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

.review-text {
  text-align: left;
}

.review-text p {
  margin: 6px 0 0;
  color: var(--muted);
}

.review-nav {
  margin-top: 16px;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.review-nav button {
  background-color: var(--brand);
  color: white;
  border: none;
  padding: 10px 14px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
}


.accordion{max-width:800px; margin-inline:auto}
.ac{width:100%; background:#fff; border:1px solid #ecf1ff; border-radius:14px; padding:16px 52px 16px 18px;
  cursor:pointer; text-align:left; font-weight:600; position:relative; box-shadow: var(--shadow); margin:10px 0}
.ac__icon::before,.ac__icon::after{content:""; position:absolute; right:18px; top:50%; width:18px; height:2px; background:#334155}
.ac__icon::after{transform:translateY(-50%) rotate(90deg); transition:transform .25s ease}
.ac[aria-expanded="true"] .ac__icon::after{transform:translateY(-50%) rotate(0)}
.ap{max-height:0; overflow:hidden; transition:max-height .35s ease, opacity .35s ease; opacity:.7; padding:0 6px}
.ac[aria-expanded="true"] + .ap{max-height:180px; padding:8px 8px 18px}

.promo{padding:18px}
.field{display:grid; gap:6px; margin:10px 0}
.field input,.field select{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid #e8eeff; background:#fff;
  outline:none; box-shadow: inset 0 1px 2px rgba(0,0,0,.02)
}
.field input:focus,.field select:focus{box-shadow: var(--ring); border-color:#cfe0ff}
.center{text-align:center}
.tiny{font-size:.82rem}

.footer{margin-top:40px; background:linear-gradient(180deg,#f4f8ff,#e9f1ff)}
.footer__in{display:flex; justify-content:space-between; align-items:center; padding:18px 0}
.footer a{color:var(--muted)}

/* Каталог */

.catalog h2 {
  text-align: center;
  margin-bottom: 30px;
  color: #002f6c;
}

.product-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 20px;
}

.product-card {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  width: 280px;
  padding: 15px;
  text-align: center;
}

.carousel {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  margin-bottom: 10px;
}

.carousel-images {
  height: 300px;
  display: flex;
  transition: transform 0.4s ease-in-out;
}

.carousel-images img {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  border-radius: 10px;
}

.carousel button {
  z-index: 2;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: #0077cc;
  color: white;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 50%;
  font-size: 18px;
}

.carousel .prev {
  left: 10px;
}

.carousel .next {
  right: 10px;
}

.text-carusel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.text-carusel p {
  margin: 0;
}

@media (max-width: 768px) {
  .product-card {
    width: 90%;
  }
}


/* Buttons */
.btn{
  --pad-y:.65rem; --pad-x:1.05rem;
  display:inline-flex; align-items:center; gap:.55rem;
  padding:var(--pad-y) var(--pad-x); border-radius:999px; border:0; cursor:pointer;
  font-weight:700; text-decoration:none; position:relative; overflow:hidden;
}
.btn--primary{
  color:white;
  background:linear-gradient(90deg, var(--brand), var(--brand-2));
  box-shadow: 0 10px 20px rgba(59,130,246,.25), 0 4px 10px rgba(34,211,238,.18);
}
.btn--ghost{
  color:white;
  background:linear-gradient(90deg, var(--brand), var(--brand-2));
  box-shadow: 0 10px 20px rgba(59,130,246,.25), 0 4px 10px rgba(34,211,238,.18);
}
.btn--sm{--pad-y:.45rem; --pad-x:.8rem; font-size:.9rem}
.btn--lg{--pad-y:.9rem; --pad-x:1.4rem; font-size:1.02rem}
.btn:after{
  content:""; position:absolute; inset:0; background:radial-gradient(60px 60px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.35), transparent 40%);
  opacity:0; transition:opacity .2s ease
}
.btn:hover:after{opacity:1}

/* Reveal on scroll */
[data-animate] {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s ease;
}
.animated.fade-up {
  opacity: 1;
  transform: translateY(0);
}


/* Sections spacing */
section{padding:28px 0}
.benefits{padding-top:6px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}

/* Modal */
.modal{border:0; padding:0; width:min(900px,92%); background:transparent}
.modal::backdrop{background:rgba(2,6,23,.44); backdrop-filter:blur(2px)}
.modal__content{padding:0}
.modal__body{display:grid; grid-template-columns: 1fr 1.1fr; gap:0}
.modal__body img{width:100%; height:100%; object-fit:cover; border-radius:18px 0 0 18px}
.modal__text{padding:18px}
.modal__close{position:absolute; right:12px; top:10px; width:38px; height:38px; border:0; border-radius:12px; background:#fff; box-shadow:var(--shadow); cursor:pointer}

/* Responsive */
@media (max-width: 980px){
  .hero{grid-template-columns:1fr; padding-top:10px}
  .products__grid{grid-template-columns:repeat(2,1fr)}
  .modal__body{grid-template-columns:1fr}
  .modal__body img{border-radius:18px 18px 0 0}
}
@media (max-width: 720px){
  .nav{display:none}
  .burger{display:flex}
  .grid-3{grid-template-columns:1fr}
  .products__grid{grid-template-columns:1fr}
  .footer__in{flex-direction:column; gap:8px}
}