/* ===== Laguna AQUA landing — style.css ===== */
:root{
  --bg-top:#0a1826;
  --bg-mid:#0d2438;
  --bg-deep:#061019;
  --accent:#3f8fd6;
  --accent-light:#5aa9e6;
  --btn:#3a6fd0;
  --btn-hover:#2f5cb0;
  --text:#e8f1f8;
  --text-dim:#9fb6c9;
  --card:rgba(20,45,70,0.55);
  --card-border:rgba(90,169,230,0.25);
  --radius:14px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Montserrat',Arial,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#0b1c2e 0%,#0e2a44 30%,#0a2036 60%,#061019 100%);
  background-attachment:fixed;
  line-height:1.5;
  overflow-x:hidden;
}
.container{width:100%;max-width:1180px;margin:0 auto;padding:0 24px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.section{padding:70px 0}
.img-placeholder{width:100%;min-height:280px;border-radius:var(--radius);
  background:linear-gradient(135deg,#123049,#0a1c2c);border:1px solid var(--card-border)}

/* ===== Buttons ===== */
.btn{
  display:inline-block;background:var(--btn);color:#fff;font-weight:600;
  padding:14px 34px;border-radius:10px;transition:.2s;cursor:pointer;
  border:none;font-size:15px;text-align:center;
  box-shadow:0 6px 20px rgba(58,111,208,.35);
}
.btn:hover{background:var(--btn-hover);transform:translateY(-2px)}
.btn--sm{padding:10px 24px;font-size:14px}
.btn--lg{padding:17px 50px;font-size:17px}

/* ===== Header ===== */
.header{position:sticky;top:0;z-index:50;
  background:rgba(8,20,32,.85);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--card-border);padding:14px 0}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{font-weight:800;font-size:26px;letter-spacing:.5px}
.logo__main{color:#fff}
.logo__sub{color:var(--accent-light);font-size:14px;vertical-align:super;margin-left:2px}
.header__right{display:flex;align-items:center;gap:22px}
.header__mail{color:var(--text-dim);font-size:14px}

/* ===== Hero ===== */
.hero{padding:60px 0 40px;text-align:center}
.hero__title{margin-bottom:26px;line-height:1}
.hero__title-big{font-size:88px;font-weight:800;color:var(--accent-light);
  text-shadow:0 4px 30px rgba(90,169,230,.4);letter-spacing:2px}
.hero__title-small{display:inline-block;font-size:26px;font-weight:600;
  color:#fff;text-align:left;vertical-align:middle;margin-left:12px}
.hero__note{
  display:inline-block;padding:16px 40px;margin-bottom:40px;
  border:1px solid var(--card-border);border-radius:12px;
  background:var(--card);font-size:16px;color:var(--text)}
.hero__products{margin-bottom:34px}
.hero__products-fallback{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.jar{width:120px;height:150px;border-radius:12px;
  background:linear-gradient(160deg,#1a3e5c,#0c2338);
  border:1px solid var(--card-border);display:flex;align-items:flex-end;
  justify-content:center;padding-bottom:14px;font-size:13px;font-weight:600;color:var(--accent-light)}
.hero__features{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.feature-badge{display:flex;align-items:center;gap:10px;
  background:var(--card);border:1px solid var(--card-border);
  border-radius:12px;padding:14px 20px;font-size:13px;font-weight:600;color:var(--text)}
.feature-badge__icon{font-size:22px}

/* ===== Section titles ===== */
.section__title{text-align:center;font-size:34px;font-weight:700;
  color:#fff;margin-bottom:44px;line-height:1.25}
.section__title-sm{font-size:24px;font-weight:700;color:var(--accent-light);margin-bottom:16px}

/* ===== Pains ===== */
.pains__inner{display:flex;gap:50px;align-items:center;margin-bottom:40px}
.pains__left{flex:1}
.pains__text{color:var(--text-dim);margin-top:14px;font-size:16px}
.pains__arrow{font-size:44px;color:var(--accent);margin-top:24px}
.pains__right{flex:1}
.pains__img{width:100%;border-radius:var(--radius);border:1px solid var(--card-border)}
.pains__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:var(--card);border:1px solid var(--card-border);
  border-radius:var(--radius);padding:24px}
.card__title{color:var(--accent-light);font-size:18px;margin-bottom:10px}
.card p{color:var(--text-dim);font-size:14px}

/* ===== Solution ===== */
.solution__inner{display:flex;gap:50px;align-items:center;margin-bottom:50px}
.solution__media{flex:1}
.solution__img{width:100%;border-radius:var(--radius);border:1px solid var(--card-border)}
.solution__text{flex:1}
.solution__subtitle{color:var(--accent-light);font-size:22px;margin-bottom:14px}
.solution__text p{margin-bottom:14px;color:var(--text);font-size:16px}
.benefits{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.benefit{display:flex;gap:16px;align-items:center;
  background:var(--card);border:1px solid var(--card-border);
  border-radius:var(--radius);padding:20px}
.benefit__icon{font-size:30px;flex-shrink:0}
.benefit p{font-size:15px}

/* ===== How to feed ===== */
.howto__title{text-align:center;margin-bottom:44px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.step{text-align:center;padding:24px 16px;
  background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);
  position:relative}
.step__icon{font-size:40px;margin-bottom:14px}
.step h3{color:var(--accent-light);font-size:17px;margin-bottom:8px}
.step p{color:var(--text-dim);font-size:13px}

/* ===== Catalog slider ===== */
.catalog__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}
.catalog__nav{display:flex;gap:12px}
.slider-btn{width:48px;height:48px;border-radius:50%;
  border:1px solid var(--accent);background:transparent;color:var(--accent-light);
  font-size:26px;cursor:pointer;transition:.2s;line-height:1}
.slider-btn:hover{background:var(--accent);color:#fff}
.catalog__viewport{overflow:hidden}
.catalog__track{display:flex;gap:22px;transition:transform .4s ease}
.product{flex:0 0 calc((100% - 66px)/4);min-width:calc((100% - 66px)/4);
  background:var(--card);border:1px solid var(--card-border);
  border-radius:var(--radius);padding:22px;display:flex;flex-direction:column}
.product__img{font-size:56px;text-align:center;margin-bottom:16px;
  background:linear-gradient(160deg,#123049,#0a1c2c);border-radius:10px;padding:20px 0}
.product__title{color:var(--accent-light);font-size:18px;margin-bottom:14px}
.product p{font-size:13px;color:var(--text-dim);margin-bottom:8px}
.product b{color:var(--text)}
.product .btn{margin-top:auto}

/* ===== Video ===== */
.video-wrap{position:relative;width:100%;max-width:900px;margin:0 auto;
  padding-bottom:50.6%;height:0;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--card-border);box-shadow:0 10px 40px rgba(0,0,0,.5)}
.video-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

/* ===== CTA ===== */
.cta__inner{text-align:center}
.cta__lead{font-size:22px;color:var(--text);margin-bottom:24px}
.cta__title{font-size:34px;font-weight:700;color:var(--accent-light);
  margin-bottom:36px;line-height:1.3}

/* ===== Footer ===== */
.footer{background:rgba(6,14,22,.9);border-top:1px solid var(--card-border);padding:40px 0}
.footer__inner{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:center}
.footer__logo{font-weight:800;font-size:26px}
.footer__logo-sub{color:var(--accent-light);margin-left:4px}
.footer__rights,.footer__contacts{font-size:13px;color:var(--text-dim);line-height:1.7}
.footer__contacts a:hover{color:var(--accent-light)}

/* ===== Responsive ===== */
@media(max-width:900px){
  .section{padding:50px 0}
  .hero__title-big{font-size:60px}
  .hero__title-small{font-size:20px;display:block;margin:10px 0 0}
  .section__title{font-size:26px}
  .pains__inner,.solution__inner{flex-direction:column;gap:28px}
  .pains__cards{grid-template-columns:1fr}
  .benefits{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .product{flex:0 0 100%;min-width:100%}
  .cta__title{font-size:24px}
  .cta__lead{font-size:18px}
}
@media(max-width:600px){
  .header__mail{display:none}
  .header__right{gap:12px}
  .hero__title-big{font-size:48px}
  .jar{width:90px;height:120px}
  .video-wrap{padding-bottom:56.25%}
  .footer__inner{flex-direction:column;text-align:center;align-items:center}
}