/* =========================================
   ManCare Pro – Landing Styles (SEO-friendly, responsive)
   ========================================= */

:root{
  --brand:#8cfa8a;
  --brand2:#0ea5e9;
  --ink:#0f172a;
  --muted:#64748b;
  --stroke:#e2e8f0;
  --bg:#ffffff;
  --bg2:#f8fafc;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
}
img{max-width:100%;display:block;height:auto}
.wrap{max-width:1160px;margin:0 auto;padding:0 16px}
.wide{max-width:1280px;margin:0 auto;padding:0 16px}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px}

/* Topbar / Header */
.topbar{background:#083344;color:#e5fffb;padding:8px 0;text-align:center;font-weight:700}
.header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--stroke);z-index:50}
.logo{width:40px;height:40px;object-fit:contain}

/* Breadcrumb */
.breadcrumb{font-size:14px;color:var(--muted);padding:8px 0}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}

/* Backgrounds */
.bg-1{background:radial-gradient(60% 60% at 70% 30%, #e8fff7 0%, rgba(255,255,255,0) 60%), #ffffff}
.bg-2{background:#f5f7fb}
.bg-3{background-image:url('assets/pattern-light.svg'); background-repeat:repeat; background-color:#ffffff}
.bg-5{background:linear-gradient(180deg,#ffffff,#fff8f3)}
.bg-6{background:linear-gradient(180deg,#ffffff,#f7fbfb)}
.bg-7{background:linear-gradient(180deg,#ffffff,#f4fff9)}
.bg-10{background:linear-gradient(180deg,#ffffff,#f4f4ff)}

/* Hero */
.kicker{display:inline-block;background:var(--bg2);padding:6px 10px;border-radius:999px;border:1px solid var(--stroke);font-size:12px;color:var(--muted);margin-bottom:10px}
.hero{position:relative;overflow:hidden;padding:56px 0}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}
.hero-sub{color:#27354a; opacity:.85; max-width:620px}
.trust-strip img{max-width:420px;width:100%}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 4px}
.headline-anim{font-size:42px;line-height:1.1;margin:.2em 0;font-weight:900;display:flex;gap:8px;flex-wrap:wrap}
.headline-anim span{
  background: linear-gradient(90deg,#0ea5e9,#c7e431,#08eaa6,#ef4444,#3b82f6);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:300% 100%;
  animation:hueSwipe 6s ease-in-out infinite;
}
.headline-anim span:nth-child(2){animation-delay:.25s}
.headline-anim span:nth-child(3){animation-delay:.5s}
@keyframes hueSwipe{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

.bottle-bg{
  position:absolute; inset:-10% -10% auto -10%;
  height:120%;
  background:
    radial-gradient(40% 40% at 75% 30%, rgba(13,148,136,0.25), transparent 60%),
    radial-gradient(40% 40% at 20% 80%, rgba(59,130,246,0.2), transparent 60%);
  transform-origin:center;
  animation:bgZoom 12s ease-in-out infinite alternate;
  z-index:0;
}
@keyframes bgZoom{0%{transform:scale(1)}100%{transform:scale(1.08)}}
.hero-product{position:relative; z-index:1; display:flex;justify-content:center}
.bottle.big{width:320px;filter:drop-shadow(0 10px 20px rgba(0,0,0,.25))}

/* Generic Layout */
.section{padding:56px 0}
.strip{border-top:1px solid var(--stroke);border-bottom:1px solid var(--stroke)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:#fff;border:1px solid var(--stroke);border-radius:16px;padding:18px;box-shadow:0 8px 22px rgba(0,0,0,.05)}
.notice{background:#fff8e1;border:1px solid #f4cc55;color:#92400e;padding:10px;border-radius:12px;margin-top:10px}
.center{text-align:center}
.muted{color:var(--muted)}
.tiny{font-size:12px}

/* Buttons */
.btn, button{
  -webkit-appearance:none;appearance:none;border:none;border-radius:14px;font-weight:700;font-size:16px;
  padding:14px 22px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;
  line-height:1.2;letter-spacing:.25px;
  background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(244,244,244,.92));
  color:#111;
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.6), 0 4px 12px rgba(0,0,0,.08), 0 1px 0 rgba(0,0,0,.04);
  backdrop-filter:blur(12px);
  transition:transform .2s ease, box-shadow .2s ease, background .3s ease, filter .2s;
}
.btn:hover, button:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.7),0 6px 18px rgba(0,0,0,.12)}
.btn:active, button:active{transform:translateY(0);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.15),0 2px 6px rgba(0,0,0,.1)}
.btn.primary{background:linear-gradient(145deg,var(--brand2),var(--brand));color:#fff;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.25),0 6px 18px rgba(37,99,235,.35)}
.btn.primary:hover{background:linear-gradient(145deg,#38bdf8,#1d4ed8)}
.btn.primary:active{background:linear-gradient(145deg,#0284c7,#1e40af)}
.btn.ghost{background:rgba(255,255,255,.7);color:#111;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.1),0 4px 10px rgba(0,0,0,.06)}
.w-full{width:100%}
.cta-animate{animation:breathe 1.8s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1);box-shadow:0 4px 12px rgba(0,0,0,.08)}50%{transform:scale(1.05);box-shadow:0 8px 22px rgba(0,0,0,.14)}}

.call-btn{background:linear-gradient(145deg,#facc15,#f59e0b);color:#111;font-weight:800}
.call-btn:hover{background:linear-gradient(145deg,#fde047,#d97706)}

/* Courier Logos */
.strip.bg-2{padding:12px 8px}
.cols-logos{display:flex;align-items:center;justify-content:center;gap:clamp(8px,2.5vw,24px);flex-wrap:nowrap;overflow:hidden}
.cols-logos strong{font-weight:600;color:#111;white-space:nowrap;margin-right:6px}
.cols-logos img{flex:1 1 0;max-width:16%;height:clamp(16px,6vw,36px);width:auto;object-fit:contain;filter:grayscale(25%);transition:transform .25s ease, filter .25s ease}
.cols-logos img:hover{filter:grayscale(0%);transform:scale(1.05)}
@media (max-width:480px){
  .cols-logos strong{display:none}
  .cols-logos img{max-width:14%;height:clamp(14px,5.2vw,28px)}
}
@media (max-width:360px){
  .cols-logos img{max-width:12%;height:clamp(12px,4.8vw,24px)}
}

/* Why Section */
.why .grid2{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
.why .product-side{text-align:center;display:flex;align-items:center;justify-content:center;gap:20px}
.bottle-zoom{animation:zoomPulse 3s infinite}
@keyframes zoomPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

/* Best Selling */
.best-selling{background:#4b0000;color:#fff;text-align:center;padding:60px 20px}
.best-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px}
.best-left{text-align:center}
.best-line{display:flex;align-items:center;justify-content:center;gap:14px}
.best-line .big{font-size:52px;font-weight:900;text-transform:uppercase;line-height:1}
.best-line .yellow{color:#ffcc00}
.best-line .black{background:#ffcc00;color:#000;padding:6px 14px;border-radius:4px}
.best-bottle{max-width:160px}
.stone-text{font-size:42px;font-weight:900;text-transform:uppercase;margin-top:20px;color:#fff;text-shadow:2px 2px 8px rgba(0,0,0,0.7)}
.best-right{font-size:20px;line-height:1.6;font-weight:500}

/* Consumption */
.consumption{background:#ddf677;color:#000;text-align:center;padding:60px 20px}
.consumption h2{font-size:28px;margin-bottom:20px}
.howto{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.howto .step img{width:100px;height:100px;border-radius:50%;object-fit:cover;margin-bottom:10px}
.notice.consumption-note{background:#111;color:#fff;padding:12px 18px;border-radius:30px;display:inline-block;margin-top:20px}
.btn.primary.pulse{animation:pulse 1.5s infinite}
@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}

/* Video */
.video-wide{position:relative;padding-top:56%;border-radius:16px;overflow:hidden;border:1px solid var(--stroke);box-shadow:0 8px 26px rgba(0,0,0,.06)}
.video-wide iframe{position:absolute;inset:0;width:100%;height:100%}
.whatsapp{text-align:center;padding:60px 20px;background:#f9f9f9}
.whatsapp-img{max-width:1120px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.15)}

/* Offer Call */
.offer-call{background:linear-gradient(135deg,#fff4e6,#ffe5b4);color:#111;text-align:center;padding:70px 20px}
.offer-box{display:flex;flex-direction:column;align-items:center;gap:25px}
.offer-img{max-width:180px;border-radius:50%;box-shadow:0 10px 30px rgba(0,0,0,.25);animation:zoomPulse 3s infinite}
.offer-text h2{font-size:34px;font-weight:800;color:#b91c1c;margin-bottom:8px}
.offer-text p{font-size:20px;font-weight:500;margin-bottom:20px;color:#333}

/* Order Section */
.order-section{background:#111;padding:40px 20px;color:#fff}
.order-container{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.order-left{flex:1 1 50%;color:#fff}
.order-left .headline{font-size:22px;font-weight:700;color:#ffd700;margin-bottom:10px}
.order-left .subtext{margin-bottom:6px;font-size:16px}
.order-left .highlight-text{font-size:26px;font-weight:800;line-height:1.35}
.order-left .highlight-text span{color:#ffcc00}
.order-left .product-img{margin-top:20px;max-width:280px}
.order-right.card{flex:1 1 40%;background:#fff;border-radius:16px;padding:24px;box-shadow:0 8px 24px rgba(0,0,0,.25);color:#111}
.order-right h2{text-align:center;margin-bottom:14px}
.order-form{margin-top:8px;display:flex;flex-direction:column;gap:14px}
.order-form label span{display:block;font-weight:600;margin-bottom:6px;color:#334155}
.order-form input{width:100%;padding:14px;border:1px solid #cbd5e1;border-radius:12px;font-size:16px;transition:border .2s}
.order-form input:focus{outline:none;border-color:var(--brand2);box-shadow:0 0 0 3px rgba(14,165,233,.18)}

/* Reviews */
.reviews.list{display:flex;flex-direction:column;gap:12px;margin-top:10px}
.review-row{padding:14px}
.review-row .review-meta{display:flex;gap:12px;align-items:center;margin-bottom:6px}
.avatar{width:40px;height:40px;border-radius:50%;background:#e0f2fe;color:#0c4a6e;display:flex;align-items:center;justify-content:center;font-weight:800}
.who .name{font-weight:800}
.who .sub{font-size:13px}
.rating{color:#f59e0b}
.hidden{display:none}

/* Sticky CTA */
.sticky-cta{position:sticky;bottom:0;background:#ffffffd9;backdrop-filter:blur(6px);border-top:1px solid var(--stroke);padding:10px 0}
.price{font-weight:900;font-size:18px}
.footer{background:#111;color:#eee;padding:40px 20px}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:20px}
.footer h3{margin-bottom:10px}
.footer ul{list-style:none;padding:0}
.footer ul li{margin: 6px 0}
.footer a{color:#bbb;text-decoration:none}
.footer a:hover{color:#fff}
.footer .socials a{color:#bbb;margin-right:10px;font-size:16px}
.footer .socials a:hover{color:#fff}
.footer .small{text-align:center;font-size: 13px;color: #777}

/* Modal */
.modal{border:none;border-radius:16px;padding:0}
.modal::backdrop{background:rgba(0,0,0,.35)}
.modal-card{position:relative;background:#fff;border-radius:16px;padding:22px;min-width:320px;max-width:420px}
.modal-card--wide{max-width:760px;width:92vw}
.modal-backdrop{position:fixed;inset:0}
.close{position:absolute;right:10px;top:8px;border:none;background:transparent;font-size:24px;cursor:pointer}

/* Confetti */
.confetti{position:absolute;width:10px;height:10px;border-radius:2px;transform:translate(-50%,-50%);pointer-events:none;animation:pop 1.1s ease-out forwards;z-index:9999}
@keyframes pop{
  0%{opacity:1; transform:translate(-50%,-50%) scale(1) rotate(0)}
  100%{opacity:0; transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.8) rotate(var(--rot))}
}

/* Floating Buttons */
.call-me-btn{
  position: fixed; bottom: 140px; left: 20px;
  padding: 14px 22px; border-radius: 999px; background: linear-gradient(135deg, #10b981, #059669);
  color: #fff; font-weight: 700; text-decoration: none; box-shadow: 0 8px 20px rgba(0,0,0,.25);
  animation: blink 1.5s infinite; z-index: 999;
}
@keyframes blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.08)}}
.whatsapp-btn{
  position: fixed; bottom: 90px; right: 10px; padding: 14px 14px; border-radius: 999px;
  background: linear-gradient(135deg, #25D366, #128C7E); color: #fff; font-size: 16px; font-weight: 700; text-decoration: none;
  display: flex; align-items: center; gap: 8px; box-shadow: 0 8px 20px rgba(0,0,0,.25);
  z-index: 999; transition: transform .25s ease, box-shadow .25s ease; animation: wa-pulse 2s infinite;
}
.whatsapp-btn:hover{transform: scale(1.08); box-shadow: 0 12px 28px rgba(0,0,0,.35)}
@keyframes wa-pulse{0%,100%{transform:scale(1);box-shadow:0 8px 20px rgba(0,0,0,.25)}50%{transform:scale(1.05);box-shadow:0 12px 28px rgba(0,0,0,.35)}}

/* Responsive */
@media (max-width:980px){
  .grid2{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
  .hero-grid{grid-template-columns:1fr}
  .headline-anim{font-size:36px}
  .order-left,.order-right{flex:1 1 100%}
}

/* --- Why Section: Premium Mobile Layout --- */
.why h2 {
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 16px;
  line-height: 1.3;
}
.why p {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 14px;
}

/* Product + badges styling */
.why .product-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.why .product-side img.bottle-zoom {
  max-width: 220px;
  height: auto;
}
.why .certs {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.why .certs img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
  padding: 6px;
}

/* Responsive adjustments */
@media (max-width: 980px) {
  .why .grid2 {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }
  .why h2 {
    font-size: 24px;
  }
  .why p {
    font-size: 15px;
    margin-left: auto;
    margin-right: auto;
    max-width: 600px;
  }
}
@media (max-width: 480px) {
  .why h2 {
    font-size: 20px;
  }
  .why .product-side img.bottle-zoom {
    max-width: 180px;
  }
  .why .certs img {
    width: 60px;
    height: 60px;
  }
}

/* ====== Mobile polish for Best Selling + WhatsApp ====== */

/* Make the 2-col band stack on phones and tighten spacing */
/* --- Fix mobile alignment for "INDIA’S [bottle] BEST" --- */
@media (max-width: 768px){
  .best-selling{
    padding: 32px 16px;   /* breathing room on sides */
    overflow: hidden;
  }

  /* Stack the three items vertically and center */
  .best-line{
    display: flex;
    flex-direction: column;      /* <— key change */
    align-items: center;
    justify-content: center;
    gap: 8px;                    /* even spacing */
    text-align: center;
  }

  /* Control order explicitly */
  .best-line .big:first-of-type{ order: 1; }   /* INDIA’S */
  .best-bottle{ order: 2; }                    /* image */
  .best-line .big:last-of-type{ order: 3; }    /* BEST */

  /* Responsive sizing that never overflows */
  .best-line .big{
    display: block;
    line-height: 1;
    font-size: clamp(22px, 8vw, 34px);
    letter-spacing: 0.5px;
  }
  .best-bottle{
    width: clamp(88px, 28vw, 120px);
    height: auto;
    flex: 0 0 auto;
  }
  .stone-text{
    font-size: clamp(20px, 7vw, 28px);
    margin-top: 10px;
  }
}

/* XS phones: tighten further */
@media (max-width: 380px){
  .best-line{ gap: 6px; }
  .best-line .big{ font-size: clamp(20px, 9vw, 28px); }
  .best-bottle{ width: clamp(80px, 30vw, 110px); }
}


/* Prevent text wrap jumps on very small phones */
@media (max-width: 380px){
  .best-line .big { font-size: 28px; }
  .best-bottle { max-width: 100px; }
  .stone-text { font-size: 24px; }
}

/* WhatsApp image should be fully fluid with no overflow */
.whatsapp .center { overflow: hidden; }
.whatsapp-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 800px;          /* optional ceiling for large screens */
  -webkit-tap-highlight-color: transparent;
}

/* Give the WhatsApp section a bit less vertical padding on mobile */
@media (max-width: 768px){
  .whatsapp { padding: 32px 16px; }
}
/* Order section container */
.order-container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

/* Ensure left + right don't overlap */
.order-left {
  flex: 1 1 55%;
  position: relative;   /* ensures overlay stays within */
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.order-right {
  flex: 1 1 40%;
  max-width: 460px;
}

/* Bigger image with overlay */
.order-media {
  position: relative;
  width: 100%;
  max-width: 620px;      /* controlled width so it won’t bleed */
}

.order-left .product-img {
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 14px 40px rgba(0,0,0,.25);
}

/* Overlay heading centered inside only the image */
.overlay-heading {
  position: absolute;
  bottom: 12%;           /* keep lower part of image */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #fff;
  font-weight: 900;
  line-height: 1.1;
  text-shadow: 0 2px 8px rgba(0,0,0,.45);
}

.overlay-heading .line {
  font-size: clamp(26px, 5vw, 54px);
  margin: 4px 0;
}
.overlay-heading .highlight { color: #ffcc00; }
.overlay-heading .thin { font-weight: 700; letter-spacing: 1.5px; }

/* Responsive */
@media (max-width: 980px) {
  .order-left, .order-right { flex: 1 1 100%; }
  .order-media { max-width: 100%; }
  .overlay-heading { bottom: 10%; }
}
/* --- Premium Card for WHY section --- */
.why-card{
  background:#fff;
  border:1px solid var(--stroke);
  border-radius:20px;
  padding: clamp(16px, 3vw, 28px);
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
  position: relative;
  overflow: hidden; /* keeps badge edges & shadows tidy */
}

/* subtle decorative glow */
.why-card::before{
  content:"";
  position:absolute; inset:-40% -10% auto -10%;
  height:70%;
  background:
    radial-gradient(40% 40% at 75% 30%, rgba(14,165,233,.08), transparent 60%),
    radial-gradient(40% 40% at 20% 80%, rgba(16,185,129,.08), transparent 60%);
  pointer-events:none;
}

/* Refine typography inside the card */
.why h2{
  font-size: clamp(20px, 3.2vw, 28px);
  font-weight: 800;
  line-height: 1.25;
  margin: 0 0 10px;
}
.why p{
  font-size: clamp(14px, 1.8vw, 16px);
  line-height: 1.65;
  margin: 0 0 12px;
}

/* Product column inside card */
.why .product-side{
  display:flex; flex-direction:column; align-items:center; gap:16px;
}
.why .product-side .bottle-zoom{
  max-width: clamp(180px, 28vw, 240px);
  height:auto;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.12));
}
.why .certs{
  display:flex; gap:12px; flex-wrap:wrap; justify-content:center;
}
.why .certs img{
  width:64px; height:64px; object-fit:contain;
  border-radius:12px; background:#fff; 
  border:1px solid var(--stroke);
  box-shadow:0 6px 16px rgba(0,0,0,.06);
  padding:6px;
}

/* Responsive layout inside the card */
@media (max-width:980px){
  .why .grid2{ grid-template-columns:1fr; gap:22px; text-align:center; }
}