:root{
  --blue:#064b91;
  --green:#54bd10;
  --green-dark:#3fa009;
  --ink:#073d75;
  --muted:#55748b;
  --soft:#f1f9fe;
  --line:#dceaf4;
  --shadow:0 12px 35px rgba(0,55,110,.14);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:#fff;
  overflow-x:hidden;
}
a{text-decoration:none}
img{max-width:100%}

.wrap{width:min(1180px,92%);margin:0 auto}

/* HERO */
.hero{position:relative;background:#0a69a8;overflow:hidden;line-height:0}
.hero img{display:block;width:100%;height:auto}
.hero-link{
  position:absolute;
  left:5.5%;
  width:42%;
  bottom:8%;
  height:12%;
  z-index:3;
  border-radius:999px;
}

/* BENEFIT STRIP */
.trust{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  background:#fff;
  box-shadow:var(--shadow);
  position:relative;
  z-index:3;
}
.trust-item{
  padding:23px 10px;
  text-align:center;
  font-weight:800;
  font-size:16px;
  line-height:1.25;
  border-right:1px solid var(--line);
}
.trust-item:last-child{border-right:0}
.circle{
  width:48px;
  height:48px;
  border-radius:50%;
  background:var(--blue);
  color:#fff;
  display:grid;
  place-items:center;
  margin:0 auto 9px;
  font-size:22px;
  line-height:1;
}

/* GENERAL SECTIONS */
.section{padding:72px 0}
.section.alt{background:var(--soft)}
.title{
  text-align:center;
  font-size:clamp(32px,4vw,48px);
  line-height:1.1;
  margin:0 0 7px;
}
.lead{
  text-align:center;
  color:var(--muted);
  font-size:19px;
  margin:0 auto 40px;
  line-height:1.5;
}

/* PRODUCT CARDS */
.products{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:16px;
}
.card{
  background:#fff;
  border-radius:16px;
  box-shadow:var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border:1px solid #e3eef5;
  min-width:0;
}
.card img{
  width:100%;
  height:145px;
  object-fit:cover;
  display:block;
}
.card-body{
  padding:16px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.card h3{margin:0 0 8px;font-size:19px;line-height:1.2}
.card p{
  margin:0 0 16px;
  color:var(--muted);
  line-height:1.45;
  font-size:14px;
  flex:1;
}

/* BUTTONS */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  background:linear-gradient(135deg,#72d520,#4bb50a);
  color:#fff;
  font-weight:800;
  border-radius:999px;
  padding:12px 20px;
  border:2px solid #fff;
  box-shadow:0 7px 18px rgba(50,130,0,.2);
  transition:transform .2s ease,box-shadow .2s ease;
  cursor:pointer;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(50,130,0,.25)}
.btn.full{width:100%}
.btn.large{font-size:20px;padding:17px 30px}

/* BENEFITS */
.benefits{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:center;
}
.benefits img{
  width:100%;
  height:390px;
  object-fit:cover;
  border-radius:28px;
  box-shadow:var(--shadow);
  display:block;
}
.benefits h2{
  font-size:clamp(32px,4vw,47px);
  line-height:1.1;
  margin:0 0 18px;
}
.checks{list-style:none;padding:0;margin:0 0 24px}
.checks li{
  font-size:18px;
  padding:10px 0;
  border-bottom:1px solid var(--line);
  line-height:1.35;
}
.checks li:before{
  content:"✓";
  display:inline-grid;
  place-items:center;
  width:27px;
  height:27px;
  border-radius:50%;
  background:var(--blue);
  color:#fff;
  margin-right:12px;
  font-weight:900;
}

/* FINAL CTA ARTWORK – text/button are already inside image_9.jpg */
.cta-band.cta-image-only{
  position:relative;
  overflow:hidden;
  padding:0;
  background:#075a9e;
  line-height:0;
}
.cta-art{
  display:block;
  width:100%;
  height:auto;
  margin:0;
}
.cta-hotspot{
  position:absolute;
  left:24%;
  top:67%;
  width:33%;
  height:18%;
  border-radius:999px;
  z-index:3;
}

/* FOOTER */
.site-footer{
  background:#fff;
  border-top:1px solid var(--line);
  padding:42px 0 22px;
}
.footer-grid{
  width:min(1180px,92%);
  margin:0 auto;
  display:grid;
  grid-template-columns:1.1fr 1fr 1.35fr auto;
  gap:34px;
  align-items:start;
}
.footer-brand{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--blue);
}
.footer-brand-mark{
  width:38px;
  height:48px;
  border-radius:50% 50% 52% 52% / 58% 58% 42% 42%;
  background:linear-gradient(160deg,#2b9de2,#075a9e);
  transform:rotate(2deg);
  position:relative;
  flex:none;
}
.footer-brand-mark:after{
  content:"";
  position:absolute;
  left:9px;
  top:7px;
  width:9px;
  height:22px;
  border-radius:50%;
  background:rgba(255,255,255,.55);
  transform:rotate(12deg);
}
.footer-brand strong{display:block;font-size:30px;line-height:1;font-weight:900;letter-spacing:.5px}
.footer-brand span{display:block;margin-top:5px;font-size:13px;color:#47728f}
.footer-col h3{margin:0 0 13px;font-size:16px;color:var(--blue)}
.footer-col a{display:block;color:var(--ink);font-size:14px;line-height:1.8}
.footer-col a:hover{text-decoration:underline}
.footer-note{font-size:12px;color:#6c8798;line-height:1.5;margin-top:9px}
.footer-features{display:grid;gap:8px}
.footer-feature{display:flex;align-items:center;gap:8px;font-size:13px;color:#315d79}
.footer-feature .fi{width:24px;text-align:center;font-size:16px}
.footer-shop{display:flex;justify-content:flex-end;align-items:center;height:100%}
.footer-shop .btn{white-space:nowrap}
.footer-bottom{
  width:min(1180px,92%);
  margin:30px auto 0;
  padding-top:16px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:#718b9a;
  font-size:11px;
  line-height:1.5;
}

/* RESPONSIVE */
@media(max-width:1100px){
  .products{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-shop{justify-content:flex-start}
}
@media(max-width:900px){
  .benefits{grid-template-columns:1fr;gap:32px}
  .benefits img{height:340px}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .section{padding:54px 0}
  .trust{grid-template-columns:repeat(2,1fr)}
  .trust-item{font-size:14px;padding:18px 6px}
  .trust-item:nth-child(2){border-right:0}
  .trust-item:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .products{grid-template-columns:1fr}
  .card img{height:190px}
  .benefits img{height:280px;border-radius:20px}
  .btn.large{width:100%}
  .hero-link{left:7%;width:45%;bottom:8%;height:10%}
  .cta-band.cta-image-only{min-height:0}
  .footer-grid{grid-template-columns:1fr;gap:25px}
  .footer-col{border-top:1px solid var(--line);padding-top:20px}
  .footer-shop{justify-content:stretch}
  .footer-shop .btn{width:100%}
  .footer-bottom{display:block;margin-top:24px}
  .footer-bottom span{display:block}
  .footer-bottom span+span{margin-top:7px}
}