/* ==================== GLOBAL ==================== */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Poppins',sans-serif; color:#111; background:#fff; line-height:1.6; }
.container { width:90%; max-width:1200px; margin:auto; }

/* ==================== NAVBAR ==================== */
.navbar {
  padding:20px 0;
  background:#f6fff9;
  position:fixed;
  width:100%;
  top:0;
  left:0;
  transition:top .4s ease;
  z-index:1000;
}
.nav-container { display:flex; justify-content:space-between; align-items:center; }
.logo { font-weight:700; font-size:24px; color:#2ecc71; }
.nav-links { list-style:none; display:flex; gap:30px; }
.nav-links a { text-decoration:none; color:#111; font-weight:500; position:relative; }
.nav-links a.active { color:#2ecc71; }
.nav-links a.active .dot { position:absolute; bottom:-6px; left:50%; transform:translateX(-50%); width:6px; height:6px; background:#2ecc71; border-radius:50%; }
.menu-btn { display:none; font-size:24px; border:none; background:none; cursor:pointer; }

/* Slim line */
.slim-line { border:none; height:2px; background-color:#f1f1f1d8; width:100%; margin:20px auto; }

/* ==================== HERO ==================== */
.hero {
  background: #f6fff9;
  padding-top: 100px;
  padding-bottom: 200px;
  position: relative;
}
.hero-content {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:40px;
  padding-left:50px;
  flex-wrap:wrap;
}
.hero-text { flex:1 1 500px; text-align:left; }
.hero-text h2 {
  font-size:68px;
  font-weight:500;
  margin:8px 0 2px 0;
  transform: translateY(78px);
}
.hero-text p {
  font-size:18px;
  line-height:1.6;
  transform: translateY(78px);
  margin-bottom:5px;
}
.hero-text p:last-child { margin-bottom:15px; }
.hero-text .btn {
  transform: translateY(78px);
  display:inline-block;
  margin-top:20px;
  padding:12px 28px;
  font-size:16px;
  border-radius:6px;
  background:#2ecc71;
  color:#fff;
  text-decoration:none;
  font-weight:600;
  position:relative;
  z-index:10;
  pointer-events:auto;
}

/* ==================== HERO IMAGE SECTION ==================== */
.hero-image-section {
  position: relative;
  margin-top: -550px; /* desktop only */
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.hero-image { position:relative; text-align:right; flex:1 1 500px; }
.image-wrapper { position:relative; display:inline-block; overflow:visible; }
.image-wrapper img { display:block; border-radius:10px; }
.polkadot-bg { position:absolute; bottom:-20px; right:-15px; width:174px !important; height:auto !important; z-index:1; }
.rating {
  position:absolute;
  top:70%;
  left:-70px;
  transform:translateY(-50%);
  background:#fff;
  padding:6px 10px;
  border-radius:50px;
  display:flex;
  align-items:center;
  gap:6px;
  font-weight:600;
  box-shadow:0 2px 6px rgba(0,0,0,0.12);
  z-index:3;
}
.rating .stars { color:#2ecc71; letter-spacing:2px; }
.banner-tag {
  position:absolute;
  top:40%;
  right:-30px;
  background:#fff;
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:50px;
  box-shadow:0 2px 6px rgba(0,0,0,0.12);
  z-index:3;
}
.banner-tag img { width:30px; height:30px; border-radius:50%; object-fit:cover; }
.brands { display:flex; gap:25px; margin-top:20px; justify-content:center; }
.brands img { width:80px; filter:grayscale(100%); opacity:0.8; }

/* ==================== HERO LOGOS ==================== */
.hero-logos-section { padding:10px 0; }
.hero-logos { display:flex; justify-content:flex-start; align-items:center; gap:50px; }
.hero-logos img { height:30px; object-fit:contain; opacity:0.8; transform:translateY(-80px); margin-left:40px; }

/* ==================== FEATURES ==================== */
.features { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin:40px auto; }
.feature { display:flex; align-items:center; gap:15px; background:#fff; padding:15px; border-radius:10px; box-shadow:0 1px 4px rgba(0,0,0,0.05); }
.feature img { width:55px; }

/* ==================== BENEFIT ==================== */
.benefit {
  display:flex;
  align-items:center;
  gap:40px;
  margin:100px auto;
  flex-wrap:wrap;
}
.benefit-img { position:relative; flex:1 1 500px; }
.benefit-img img:first-child { width:100%; border-radius:10px; }
.polkadot-side {
  position:absolute;
  right:-190px;
  top:35%;
  transform:translateY(-100%);
  width:25%;
  opacity:1;
  color:#00ff6a;
  z-index:0;
}
.benefit-text { flex:1 1 500px; z-index:1; }
.section-subtitle { color:#000; font-weight:600; font-size:14px; margin-bottom:10px; }
.benefit-text h3 { font-size:50px; line-height:1.1; margin-bottom:15px; }
.benefit-text li { margin-bottom:8px; }
.benefit-text li::before { content:"✔ "; color:#2ecc71; }

/* ==================== STATS ==================== */
.stats {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  margin:80px auto;
  position:relative;
  flex-wrap:wrap;
}
.stats-text { position:relative; z-index:2; flex:1 1 500px; }
.stats-text h3 { font-size:50px; line-height:1.1; margin-bottom:15px; }
.numbers { display:flex; gap:50px; margin:20px 0; flex-wrap:wrap; }
.numbers h2 { color:#2ecc71; }
.stats-text .btn { display:inline-block; margin-top:20px; padding:12px 28px; font-size:16px; border-radius:6px; background:#2ecc71; color:#fff; text-decoration:none; font-weight:600; position:relative; z-index:3; pointer-events:auto; }
.polkadot-stats { position:absolute; top:20%; left:5%; width:250px; opacity:0.2; z-index:1; pointer-events:none; }

/* ==================== VARIETY ==================== */
.variety h3 { text-align:left; font-size:28px; margin-bottom:30px; }
.variety-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0px; }
.variety-item img { width:100%; }
.variety-item h4 { margin-top:10px; }
.variety-item a { color:#2ecc71; text-decoration:none; font-weight:500; }
.variety-item.text {
  background-color: rgba(46, 204, 113, 0.08);
  padding:20px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
}
.variety-item .btn {
  display:inline-block;
  background-color: rgba(46, 204, 113, 0.15);
  color:#2ecc71;
  padding:8px 18px;
  border-radius:6px;
  text-decoration:none;
  font-weight:500;
  transition:0.3s ease;
}
.variety-item .btn:hover { background-color:#2ecc71; color:#fff; }

/* ==================== PRODUCTS ==================== */
.products h3 { text-align:center; margin-bottom:30px; }
.product-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.product-card { text-align:center; border:1px solid #eee; padding:15px; border-radius:10px; background:#fff; }
.product-card img { width:85%; border-radius:10px; margin-bottom:10px; }
.product-card .stars { color:#2ecc71; margin-bottom:5px; font-size:34px; }
.product-card p { font-size:25px; margin:0; color:#2ecc71; }
.product-card p span { text-decoration:line-through; color:gray; margin-right:5px; }
.btn-outline { border:1px solid #2ecc71; color:#2ecc71; padding:8px 20px; border-radius:4px; text-decoration:none; display:inline-block; margin-top:10px; }

/* ==================== BANNER ==================== */
.banner {
  position:relative;
  width:100%;
  height:100vh;
  background:url('images/banner-bg.jpg') center/cover no-repeat;
  color:#fff;
  text-align:center;
  overflow:hidden;
}
.banner-overlay {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.45);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:50px 80px;
  box-sizing:border-box;
  z-index:1;
}
.banner-overlay h3 { font-size:60px; font-weight:700; margin-bottom:30px; z-index:2; }
.banner-overlay .btn {
  display:inline-block;
  margin-top:20px;
  font-size:18px;
  padding:15px 35px;
  background:#2ecc71;
  color:#fff;
  text-decoration:none;
  border-radius:6px;
  font-weight:600;
  z-index:3;
  position:relative;
  cursor:pointer;
  transition:0.3s ease;
}
.banner-overlay .btn:hover { background:#28a745; }

/* ==================== FOOTER ==================== */
.footer { background:#ffffff; padding:60px 0; margin-top:80px; }
.footer-content { display:grid; grid-template-columns:repeat(4,1fr); gap:30px; }
.footer-col h4, .footer-col h5 { margin-bottom:15px; }
.footer-col ul { list-style:none; }
.footer-col li { margin-bottom:10px; color:#555; }
.footer form { display:flex; gap:10px; flex-wrap:wrap; }
.footer input { flex:1; padding:8px; border-radius:4px; border:1px solid #ccc; }
.footer button {
  background:#2ecc71;
  color:#fff;
  border:none;
  padding:8px 15px;
  border-radius:4px;
  cursor:pointer;
  position:relative;
  z-index:10;
  pointer-events:auto;
}
.socials img { width:20px; margin-right:10px; }
.copyright { text-align:center; margin-top:30px; font-size:14px; }

/* ==================== RESPONSIVE ==================== */
@media (max-width:1200px){
  .features{grid-template-columns:repeat(3,1fr);}
  .product-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:992px){
  .features{grid-template-columns:repeat(2,1fr);}
  .product-grid{grid-template-columns:repeat(2,1fr);}
  .hero-content,.benefit,.stats{flex-direction:column;text-align:center; gap:30px;}
  .variety-grid{grid-template-columns:repeat(2,1fr);}
  .footer-content{grid-template-columns:repeat(2,1fr);}
  .hero-text h2,.hero-text p,.hero-text .btn{transform:none; margin:0;}
  .hero-image-section{margin-top:0;}
  .hero-logos img { transform:none; margin-left:0; justify-content:center; }
  .polkadot-bg { width:100px !important; bottom:-10px; left:-10px; opacity:0.35; }
  .rating { left:12px; top:auto; bottom:12px; transform:none; }
  .banner-tag { right:12px; top:12px; }
}
@media (max-width:768px){
  .nav-links{display:none;}
  .menu-btn{display:block;}
  .variety-grid{grid-template-columns:1fr;}
  .footer-content{grid-template-columns:1fr;}
  .hero-text h2{font-size:36px;}
  .hero-text p{font-size:16px;}
  .btn,.hero-text .btn,.banner-overlay .btn{padding:10px 18px; font-size:14px; width:100%; text-align:center;}
  .polkadot-bg{width:60px !important; bottom:-10px; left:-10px; opacity:0.35;}
}
@media (max-width:480px){
  .hero-text h2{font-size:28px;}
  .product-grid,.footer-content{grid-template-columns:1fr;}
  .features{grid-template-columns:1fr;}
}