:root{
  --bg: #f6f8fb;
  --bg-alt: #eef3f8;
  --card: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --primary: #2f7cf6;
  --primary-dark: #1f63d6;
  --accent: #ff5a5f;
  --success: #14b86a;
  --border: rgba(15, 23, 42, .08);
  --shadow: 0 12px 40px rgba(15, 23, 42, .10);
  --shadow-2: 0 8px 24px rgba(47, 124, 246, .18);
  --radius: 24px;
  --radius-sm: 16px;
  --container: 1180px;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:'Inter', sans-serif;
  color:var(--text);
  background: radial-gradient(circle at top, #ffffff 0%, var(--bg) 45%, #edf3fa 100%);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img, video{
  max-width:100%;
  display:block;
}

a{ color:inherit; text-decoration:none; }

button, input, textarea, select{ font:inherit; }

.site-wrapper{ overflow:hidden; }

.container{
  width:min(var(--container), calc(100% - 32px));
  margin:0 auto;
}

.top-bar{
  background:linear-gradient(90deg, #0f172a 0%, #1e3a8a 100%);
  color:#fff;
  padding:12px 0;
  position:sticky;
  top:0;
  z-index:50;
  box-shadow:0 8px 30px rgba(15,23,42,.18);
}

.top-bar__items{
  display:flex;
  justify-content:center;
  gap:28px;
  flex-wrap:wrap;
}

.top-bar__item{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  font-weight:500;
  opacity:.98;
}

.top-bar__item i{
  font-size:18px;
  color:#8fd3ff;
}

.hero{
  padding:32px 0 24px;
}

.hero__grid{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:28px;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.88));
  border:1px solid var(--border);
  border-radius:32px;
  box-shadow:var(--shadow);
  padding:28px;
  position:relative;
}

.hero__content{
  flex:1 1 420px;
}

.hero__image{
  flex:1 1 320px;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:360px;
}

.bottom-offer__image img {
   border-radius: 22px;
}
.hero__image img{
  border-radius: 22px;
  width:min(100%, 420px);
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 20px 35px rgba(15,23,42,.18));
}

.hero__prices{
  flex:1 1 260px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.hero__title{
  margin:0;
  font-size:clamp(28px, 4vw, 54px);
  line-height:1.05;
  letter-spacing:-.03em;
  font-weight:800;
}

.hero__subtitle{
  display:block;
  margin-top:12px;
  font-size:clamp(16px, 2vw, 20px);
  line-height:1.4;
  font-weight:600;
  color:var(--muted);
}

.hero__badge{
  margin-top:18px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.hero__discount{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:linear-gradient(135deg, #ff6a00, #ff3d6e);
  color:#fff;
  padding:12px 18px;
  border-radius:999px;
  font-weight:800;
  box-shadow:0 12px 28px rgba(255,61,110,.24);
}

.hero__stock{
  width: 100%;
  text-align: center;
  margin-top:18px;
  align-items:center;
  gap:8px;
  padding:12px 16px;
  border-radius:14px;
  background:#effaf4;
  color:#126b3f;
  font-weight:600;
  border:1px solid rgba(20,184,106,.16);
}

.price-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:22px;
  padding:16px 18px;
  box-shadow:0 10px 30px rgba(15,23,42,.06);
}

.price-card--old{
  background:linear-gradient(180deg, #fff, #fafafa);
}

.price-card--new{
  background:linear-gradient(135deg, #eff8ff, #ffffff);
  border-color:rgba(47,124,246,.18);
}

.price-card__label{
  color:var(--muted);
  font-size:14px;
  margin-bottom:6px;
}

.price-card__value{
  font-size:clamp(24px, 3vw, 34px);
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--text);
}

.price-card--new .price-card__value{
  color:var(--primary-dark);
}

.order,
.description,
.video,
.info-blocks,
.cta,
.reviews,
.steps,
.bottom-offer,
.order-bottom {
  padding:28px 0;
}

.order__form-wrapper{
  max-width:680px;
  margin:0 auto;
  background:linear-gradient(180deg, #ffffff, #fdfefe);
  border:1px solid var(--border);
  border-radius:30px;
  box-shadow:var(--shadow);
  padding:24px;
}

.order-form{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.order-form__input{
  width:100%;
  height:56px;
  border:1px solid rgba(15,23,42,.12);
  border-radius:16px;
  padding:0 18px;
  background:#fff;
  outline:none;
  transition:.2s ease;
}

.order-form__input:focus{
  border-color:rgba(47,124,246,.55);
  box-shadow:0 0 0 4px rgba(47,124,246,.12);
}

.order-form__btn,
.cta__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:58px;
  border:none;
  border-radius:16px;
  background:linear-gradient(135deg, var(--primary), var(--primary-dark));
  color:#fff;
  font-weight:800;
  font-size:16px;
  cursor:pointer;
  box-shadow:var(--shadow-2);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.order-form__btn:hover,
.cta__btn:hover{
  transform:translateY(-1px);
  filter:brightness(1.02);
  box-shadow:0 14px 30px rgba(47,124,246,.26);
}

.order-form__consent{
  margin-top:4px;
}

.checkbox{
  display:flex;
  align-items:flex-start;
  gap:12px;
  cursor:pointer;
  user-select:none;
}

.checkbox input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.checkbox__mark{
  flex:0 0 22px;
  width:22px;
  height:22px;
  border-radius:7px;
  border:1.5px solid rgba(15,23,42,.18);
  background:#fff;
  margin-top:2px;
  position:relative;
  transition:.2s ease;
}

.checkbox input:checked + .checkbox__mark{
  background:var(--primary);
  border-color:var(--primary);
}

.checkbox input:checked + .checkbox__mark::after{
  content:'';
  position:absolute;
  left:6px;
  top:2px;
  width:6px;
  height:11px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

.checkbox__text{
  font-size:13px;
  color:var(--muted);
  line-height:1.45;
}

.description__text{
  margin:0;
  max-width:900px;
  margin-inline:auto;
  text-align:center;
  font-size:18px;
  color:#374151;
  background:#fff;
  border:1px solid var(--border);
  border-radius:24px;
  padding:22px 20px;
  box-shadow:0 10px 28px rgba(15,23,42,.05);
}

.video__wrapper{
  border-radius:28px;
  overflow:hidden;
  background:#000;
  box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,.35);
}

.video video{
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
}

.info-blocks__grid,
.reviews__grid,
.steps__grid,
.bottom-offer__grid{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
}

.info-blocks__grid > *{
  flex:1 1 calc(50% - 18px);
}

.info-block{
  background:#fff;
  border:1px solid var(--border);
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 10px 24px rgba(15,23,42,.05);
}

.info-block--text{
  padding:22px;
  display:flex;
  align-items:center;
}

.info-block--text p{
  margin:0;
  color:#374151;
  font-size:16px;
}

.info-block__img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.section-title{
  margin:0 0 20px;
  text-align:center;
  font-size:clamp(22px, 3vw, 34px);
  line-height:1.15;
  letter-spacing:-.02em;
  font-weight:800;
  color:var(--text);
}

.reviews__grid > *{
  flex:1 1 calc(33.333% - 18px);
}

.review-card{
  background:linear-gradient(180deg, #ffffff, #fdfefe);
  border:1px solid var(--border);
  border-radius:24px;
  padding:22px;
  box-shadow:0 10px 24px rgba(15,23,42,.05);
}

.review-card__text{
  color:#374151;
  font-size:15px;
  line-height:1.7;
}

.review-card__author{
  margin-top:18px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  padding-top:14px;
  border-top:1px solid rgba(15,23,42,.08);
}

.review-card__name{
  font-weight:700;
}

.review-card__city{
  color:var(--muted);
  font-size:14px;
}

.steps__grid > *{
  flex:1 1 calc(25% - 18px);
}

.step-card{
  text-align:center;
  background:#fff;
  border:1px solid var(--border);
  border-radius:24px;
  padding:24px 18px;
  box-shadow:0 10px 24px rgba(15,23,42,.05);
}

.step-card__icon{
  width:64px;
  height:64px;
  border-radius:20px;
  margin:0 auto 16px;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:28px;
  background:linear-gradient(135deg, var(--primary), #5da8ff);
  box-shadow:0 10px 26px rgba(47,124,246,.24);
}

.step-card__title{
  margin:0 0 8px;
  font-size:18px;
}

.step-card__text{
  margin:0;
  color:var(--muted);
  font-size:14px;
}

.bottom-offer__grid{
  align-items:center;
}

.bottom-offer__image{
  flex:1 1 340px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:30px;
  padding:18px;
  box-shadow:var(--shadow);
  display:flex;
  justify-content:center;
}

.bottom-offer__image img{
  width:min(100%, 420px);
  object-fit:contain;
  filter:drop-shadow(0 18px 35px rgba(15,23,42,.18));
}

.bottom-offer__prices{
  flex:1 1 280px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.footer__content{
  text-align:center;
  background:#0f172a;
  color:#e5e7eb;
  border-radius:28px 28px 0 0;
  padding:28px 20px;
}

.footer__content p{
  margin:0 0 10px;
}

.footer__links{
  margin-top:16px;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:14px 20px;
}

.footer__links a{
  color:#8fd3ff;
  text-decoration:underline;
  text-underline-offset:3px;
}

.cta{
  text-align:center;
}

.cta .container{
  max-width:680px;
}

@media (max-width: 1024px){
  .hero__content,
  .hero__image,
  .hero__prices{
    flex-basis:100%;
  }

  .hero__image{
    min-height:auto;
  }

  .info-blocks__grid > *,
  .reviews__grid > *{
    flex-basis:calc(50% - 18px);
  }

  .steps__grid > *{
    flex-basis:calc(50% - 18px);
  }

  .bottom-offer__image,
  .bottom-offer__prices{
    flex-basis:100%;
  }
}

@media (max-width: 768px){
  .container{
    width:min(var(--container), calc(100% - 20px));
  }

  .top-bar{
    padding:10px 0;
  }

  .top-bar__items{
    gap:8px;
  }

  .top-bar__item{
    width:100%;
    justify-content:center;
    text-align:center;
    font-size:13px;
    line-height:1.35;
  }

  .hero{
    padding:16px 0 18px;
  }

  .hero__grid{
    padding:18px;
    border-radius:24px;
    gap:18px;
  }

  .hero__title,
  .hero__subtitle{
    text-align:center;
  }

  .hero__badge,
  .hero__stock{
    justify-content:center;
    width:100%;
  }

  .hero__image img{
    width:min(100%, 320px);
  }

  .price-card__value{
    font-size:28px;
  }

  .order,
  .description,
  .video,
  .info-blocks,
  .cta,
  .reviews,
  .steps,
  .bottom-offer,
  .order-bottom {
    padding:18px 0;
  }

  .order__form-wrapper{
    padding:18px;
    border-radius:24px;
  }

  .description__text{
    font-size:16px;
    padding:18px 16px;
    border-radius:20px;
    text-align:left;
  }

  .info-blocks__grid > *,
  .reviews__grid > *,
  .steps__grid > *{
    flex-basis:100%;
  }

  .info-block--text{
    padding:18px;
  }

  .review-card,
  .step-card{
    border-radius:20px;
    padding:18px;
  }

  .section-title{
    margin-bottom:16px;
  }

  .footer__content{
    border-radius:24px 24px 0 0;
    padding:22px 16px;
  }

  .footer__links{
    flex-direction:column;
    gap:10px;
  }
}

@media (max-width: 480px){
  .container{
    width:calc(100% - 16px);
  }

  .hero__grid{
    padding:14px;
    border-radius:22px;
  }

  .hero__title{
    font-size:30px;
  }

  .hero__subtitle{
    font-size:15px;
  }

  .hero__discount{
    width:100%;
    justify-content:center;
    text-align:center;
    padding:11px 14px;
  }

  .price-card{
    padding:14px;
    border-radius:18px;
  }

  .price-card__label{
    font-size:13px;
  }

  .price-card__value{
    font-size:24px;
  }

  .order-form__input,
  .order-form__btn,
  .cta__btn{
    min-height:52px;
    border-radius:14px;
  }

  .checkbox__text{
    font-size:12px;
  }

  .review-card__author{
    flex-direction:column;
    align-items:flex-start;
  }

  .step-card__icon{
    width:56px;
    height:56px;
    font-size:24px;
    border-radius:18px;
  }
}