* { box-sizing:border-box; font-family:'Poppins',sans-serif; scroll-behavior:smooth; }
body { margin:0; background:#ffffff; color:#0f172a; }

:root {
  --primary:#0891b2;
  --light:#ecfeff;
  --accent:#e0f2fe;
}
.menu-toggle {
  display: none;
  font-size: 26px;
  cursor: pointer;
}

@media (max-width: 100%) {
  .menu-toggle {
    display: block;
  }

  nav ul {
    display: none;
  }

  nav ul.active {
    display: flex;
  }
}

ul {
  list-style: none;
}

ul li:before {
  content: '\2714 ';
  color: 'blue';
}

.nav {
  display:flex; justify-content:space-between; align-items:center;
  padding:1.2rem 3rem; border-bottom:1px solid #e2e8f0;
}
.logo span { color:var(--primary); }
.nav a { margin-left:1.5rem; text-decoration:none; color:#334155; }
.btn {
  background:var(--primary); color:#fff; padding:.6rem 1.4rem;
  border-radius:999px; font-weight:600;
}

.hero {
  display:grid; grid-template-columns:1fr;
  gap:1rem; padding:2rem 2rem; align-items:center;
}
.hero-img { width:100%; border-radius:28px; animation:float 6s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);} }

.pill {
  background:var(--accent); color:var(--primary);
  padding:.4rem .9rem; border-radius:999px; font-size:.75rem;
}

.badges span {
  display:inline-block; background:var(--light);
  padding:.4rem .8rem; border-radius:999px; margin:.3rem;
}

.section { padding:4rem 3rem; max-width:100%; margin:auto; }
.section.light { background:var(--light); }
.sub { color:#475569; margin-bottom:2rem; }

.icon-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:2rem;
}
.card {
  background:#fff; padding:2rem; border-radius:24px;
  box-shadow:0 20px 40px rgba(2,132,199,.15); text-align:center;
}

.columns { display:grid; grid-template-columns:1fr 1fr; gap:3rem; }

.stats {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem;
  text-align:center;
}
.stats div {
  background:#fff; padding:1.5rem; border-radius:20px;
  box-shadow:0 10px 30px rgba(2,132,199,.15);
}

.product-img { max-width:80%; display:block; margin:2rem auto; }

blockquote {
  background:var(--accent); padding:2rem; border-radius:20px;
  font-style:italic; margin:2rem 0;
}

/* POLISHED CONTACT */
.contact-section {
  background:linear-gradient(135deg,#0891b2,#0ea5e9);
  padding:5rem 1.5rem;
  display:flex; justify-content:center;
}
.contact-card {
  background:#fff; border-radius:32px; padding:3rem;
  max-width:100%; width:100%; text-align:center;
  box-shadow:0 40px 80px rgba(2,132,199,.35);
  animation:fadeUp .8s ease;
}
@keyframes fadeUp { from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);} }

.contact-items {
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:2rem; margin-top:2.5rem; text-align:left;
}
.contact-item {
  display:flex; gap:1rem; padding:1rem;
  border-radius:16px; transition:.3s;
}
.contact-item:hover { background:#f0f9ff; transform:translateY(-2px); }

.icon-box {
  background:#e0f2fe; color:var(--primary);
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
}

footer {
  background:#f1f5f9; padding:3rem; text-align:center;
  color:#475569; font-size:.9rem;
}

/* === Global Typography Enhancements === */
html {
    font-size: 18px;
}

body {
    line-height: 1.75;
}

p {
    margin-bottom: 1.2em;
}

section {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

h1 {
    font-size: 3rem;
    margin-bottom: 1.5rem;
}

h2 {
    font-size: 2.2rem;
    margin-bottom: 1.2rem;
}

h3 {
    font-size: 1.6rem;
    margin-bottom: 1rem;
}

img {
    max-width: 100%;
    transform: scale(1.15);
}

/* === Icon Size Enhancement === */
.icon,
svg.icon,
.icon svg {
    width: 48px;
    height: 48px;
}

img.icon {
    width: 48px;
    height: auto;
}

.guaranteed-analysis img,
.features img,
.benefits img {
    width: 56px;
    height: auto;
}

@media (max-width: 100%) {
    .icon,
    svg.icon,
    .icon svg {
        width: 40px;
        height: 40px;
    }

    .guaranteed-analysis img,
    .features img,
    .benefits img {
        width: 44px;
    }
}

/* ===============================
   MOBILE FINAL RESPONSIVE STYLES
   =============================== */

body { overflow-x: hidden; }
img { max-width: 100%; height: auto; }

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
}

.hamburger span {
  width: 26px;
  height: 3px;
  background: #0f172a;
  border-radius: 2px;
}

@media (max-width: 768px) {
  .hamburger { display: flex; }

  .nav-menu {
    display: none;
    flex-direction: column;
    width: 100%;
    text-align: center;
  }

  .nav-menu.active {
    display: flex;
  }

  .hero img {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
  }

  h1 { font-size: 1.8rem; }
  h2 { font-size: 1.5rem; }
  p  { font-size: 1rem; line-height: 1.6; }

  button, .btn {
    width: 100%;
    padding: 14px;
    font-size: 1rem;
  }
}