*{box-sizing:border-box}
:root{
  --navy:#072d72;
  --blue:#087dc0;
  --cyan:#13bddb;
  --sky:#eafaff;
  --white:#fff;
  --text:#113150;
  --shadow:0 22px 55px rgba(7,45,114,.18);
}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#f7fdff,#eafaff);
}
.hero{
  min-height:760px;
  padding:24px;
  background:
    radial-gradient(circle at 80% 10%,rgba(255,255,255,.35),transparent 27%),
    linear-gradient(135deg,#06347e 0%,#087dc0 50%,#19c6d9 100%);
  position:relative;
  overflow:hidden;
}
.hero:after{
  content:"";
  position:absolute;
  left:-5%;right:-5%;bottom:-70px;height:170px;
  background:
    radial-gradient(100px 55px at 10% 50%,rgba(255,255,255,.9),transparent 70%),
    radial-gradient(150px 70px at 30% 40%,rgba(255,255,255,.95),transparent 70%),
    radial-gradient(160px 75px at 55% 50%,rgba(255,255,255,.92),transparent 70%),
    radial-gradient(150px 70px at 78% 42%,rgba(255,255,255,.9),transparent 70%),
    radial-gradient(130px 65px at 96% 50%,rgba(255,255,255,.92),transparent 70%);
}
.nav{
  max-width:1180px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:relative;
  z-index:2;
}
.mini-brand{
  color:white;
  font-weight:900;
  display:flex;
  align-items:center;
  gap:12px;
}
.mini-brand img{
  width:58px;height:58px;
  object-fit:cover;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.7);
}
.nav-links{display:flex;gap:10px;align-items:center}
.nav-links a,.nav-order{
  color:white;text-decoration:none;
  padding:12px 18px;border-radius:999px;
  background:rgba(255,255,255,.16);
  font-weight:800;
  border:1px solid rgba(255,255,255,.25);
}
.nav-order{background:rgba(0,0,0,.18)!important}
.hero-grid{
  max-width:1180px;
  margin:78px auto 0;
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:32px;
  align-items:center;
  position:relative;
  z-index:2;
}
.hero-card{
  background:rgba(255,255,255,.94);
  border-radius:38px;
  padding:38px;
  text-align:center;
  box-shadow:var(--shadow);
}
.badge{
  display:inline-block;
  background:var(--navy);
  color:white;
  padding:10px 22px;
  border-radius:999px;
  letter-spacing:2px;
  font-weight:900;
}
.main-logo{
  display:block;
  width:min(320px,80%);
  margin:22px auto 10px;
  border-radius:18px;
}
h1{
  margin:10px 0 12px;
  color:var(--navy);
  font-size:clamp(44px,6vw,78px);
  line-height:.95;
}
.hero-text{
  color:var(--blue);
  font-size:clamp(21px,3vw,31px);
  font-weight:900;
  margin:0 0 12px;
}
.hero-sub{
  color:#4c6380;
  font-weight:900;
  letter-spacing:1.5px;
}
.btn{
  display:inline-block;
  text-decoration:none;
  background:linear-gradient(135deg,var(--cyan),var(--blue));
  color:white;
  padding:15px 24px;
  border-radius:999px;
  font-weight:900;
  box-shadow:0 12px 25px rgba(0,0,0,.16);
}
.secondary{background:linear-gradient(135deg,var(--navy),var(--blue))}
.hero-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.bottle-feature{
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.25);
  border-radius:32px;
  padding:32px;
  text-align:center;
  color:white;
  box-shadow:var(--shadow);
}
.bottle{
  width:210px;
  height:390px;
  margin:0 auto 18px;
  position:relative;
}
.cap{
  width:70px;height:32px;background:#0c4b9e;
  margin:0 auto;border-radius:12px 12px 6px 6px;
}
.neck{
  width:82px;height:62px;background:rgba(255,255,255,.75);
  margin:0 auto;
  border-radius:20px 20px 8px 8px;
}
.body{
  width:190px;height:285px;
  margin:-6px auto 0;
  background:linear-gradient(90deg,rgba(255,255,255,.75),rgba(255,255,255,.35),rgba(255,255,255,.82));
  border:3px solid rgba(255,255,255,.7);
  border-radius:52px 52px 32px 32px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.body img{
  width:182px;height:88px;
  object-fit:cover;
  border-radius:10px;
  box-shadow:0 8px 16px rgba(0,0,0,.2);
}
.bottle-feature p{font-weight:900;font-size:20px}
main{max-width:1180px;margin:0 auto;padding:60px 22px}
.intro{
  margin-top:-45px;
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:1fr auto;
  gap:24px;
  background:white;
  border-radius:30px;
  padding:32px;
  box-shadow:var(--shadow);
  align-items:center;
}
h2{font-size:clamp(30px,4vw,46px);color:var(--navy);margin:0 0 14px}
.intro p,.section-title p,.label-text p{font-size:19px;line-height:1.6}
.quick-box{
  background:var(--sky);
  border:2px solid rgba(19,189,219,.25);
  border-radius:24px;
  padding:22px;
  text-align:center;
  color:var(--blue);
}
.quick-box span{display:block;font-size:30px;font-weight:900;margin-top:5px}
.section-title{text-align:center;margin-bottom:28px}
.system-section,.pricing,.labels,.trust,.contact{margin-top:62px}
.wide-photo{
  width:100%;
  border-radius:34px;
  box-shadow:var(--shadow);
  display:block;
}
.price-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.price-card{
  background:white;
  border-radius:28px;
  padding:28px;
  box-shadow:0 14px 36px rgba(7,45,114,.11);
  border-top:7px solid var(--cyan);
  position:relative;
}
.price-card h3{font-size:23px;color:var(--navy);margin:0}
.price{font-size:46px;color:var(--blue);font-weight:900;margin:12px 0}
.price span{font-size:22px}
.price-card p{line-height:1.55}
.main{background:linear-gradient(180deg,#fff,#eafaff)}
.best{border-top-color:var(--navy)}
.tag{
  position:absolute;right:18px;top:18px;
  background:var(--navy);color:white;
  border-radius:999px;padding:7px 12px;
  font-size:13px;font-weight:900;
}
.labels{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:28px;
  align-items:center;
  background:white;
  border-radius:34px;
  padding:32px;
  box-shadow:var(--shadow);
}
.labels img{
  width:100%;
  border-radius:24px;
}
.labels ul{
  list-style:none;
  padding:0;
  font-size:19px;
  line-height:2;
  font-weight:900;
  color:var(--blue);
}
.labels li:before{content:"✓ ";color:var(--navy)}
.trust{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  background:linear-gradient(135deg,var(--navy),var(--blue));
  border-radius:34px;
  padding:32px;
  color:white;
  box-shadow:var(--shadow);
}
.trust-item{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  border-radius:26px;
  padding:24px;
  text-align:center;
}
.icon{
  font-size:30px;
  width:62px;height:62px;
  border-radius:50%;
  background:rgba(255,255,255,.18);
  display:grid;place-items:center;
  margin:0 auto 12px;
}
.trust h3{font-size:22px;margin:8px 0}
.trust p{line-height:1.55}
.contact{
  text-align:center;
  background:white;
  border-radius:34px;
  padding:44px 24px;
  box-shadow:var(--shadow);
}
.address,.phone{
  font-size:30px;
  font-weight:900;
  color:var(--blue);
  margin:12px 0;
}
.center{justify-content:center}
footer{
  background:var(--navy);
  color:white;
  padding:24px;
  text-align:center;
  font-weight:800;
}
@media(max-width:900px){
  .hero-grid,.intro,.price-grid,.labels,.trust{grid-template-columns:1fr}
  .hero{padding:16px;min-height:720px}
  .nav{align-items:flex-start;gap:12px}
  .nav-links{flex-direction:column;align-items:flex-end}
  .hero-card{padding:28px 18px}
  .main-logo{width:min(290px,88%)}
  .intro{margin-top:0}
}
