:root{
      --green-700:#2d5a2d;
      --green-600:#4a6b4a;
      --green-500:#6b8e6b;
      --green-400:#9bb99b;
      --bg-1:#f8fdf8;
      --bg-2:#f0f7f0;
      --bg-3:#e8f5e8;
      --border:#d4ead4;
      --card:#ffffff;
      --muted:#6b8e6b;
      --shadow:0 10px 30px rgba(13,20,13,0.08);
    }
    *{box-sizing:border-box;scroll-behavior:smooth}
    html,body{margin:0;font-family:Inter,system-ui,Arial,Helvetica,sans-serif;background:linear-gradient(180deg,var(--bg-3) 0%, #fefefe 100%);color:var(--green-700);overflow-x:hidden; text-align: center;}
    a{color:inherit;text-decoration:none}
    .container{max-width:1300px;margin:auto;padding:30px}

    header{position:sticky;top:0;background:rgba(255,255,255,0.8);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);z-index:10;transition:background 0.3s ease}
    header.scrolled{background:rgba(255,255,255,0.95)}
    .nav{display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:16px;padding:14px 0;position:relative}
    .brand{display:flex;align-items:center;gap:10px}
    .brand svg{width:42px;height:42px}

   .nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  position: relative;
  flex-wrap: nowrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 30px;
  flex: 1;
}

nav a {
  font-weight: 600;
  color: var(--green-600);
  position: relative;
}

.cta {
  background: var(--green-500);
  color: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  box-shadow: var(--shadow);
  font-weight: 600;
  transition: transform .2s ease, box-shadow .3s ease;
  margin-left: 20px;
  position: static; /* only static on desktop */
}
.cta:hover {
  transform: scale(1.05);
  box-shadow: 0 0 12px var(--green-400);
}

/* Mobile override */
@media(max-width:800px){
  nav {
    flex-direction: column;
    align-items: flex-start;
    max-height: 0;
    width: 100%;
    background: rgba(255,255,255,0.95);
    padding: 0;
    margin-top: 10px;
    border-radius: 8px;
  }
  nav.open { max-height: 300px; padding: 10px 0; }
  nav a { padding: 10px 20px; width: 100%; }
  .menu-toggle { display: flex; }
  .cta {
    position: absolute;
    right: 20px;
    top: 14px;
    font-size: 14px;
    padding: 8px 12px;
  }
}


    .menu-toggle{display:none;flex-direction:column;cursor:pointer;gap:5px}
    .menu-toggle span{display:block;width:24px;height:3px;background:var(--green-700);border-radius:3px;transition:all .3s ease}

   

    section{opacity:0;transform:translateY(40px);transition:all 0.8s ease-out}
    section.visible{opacity:1;transform:translateY(0)}

    .hero{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:40px;padding1:80px 0;background:linear-gradient(135deg,var(--bg-1),var(--bg-2));position:relative;overflow:hidden}
    .hero::before{content:'';position:absolute;top:-100px;left:0;width:100%;height:200%;background:url('https://www.transparenttextures.com/patterns/natural-paper.png');opacity:0.15;animation:movebg 40s linear infinite}
    @keyframes movebg{from{background-position:0 0}to{background-position:1000px 1000px}}
    .hero-text{flex:1;min-width:320px;max-width:640px;z-index:1;padding:20px;}
    .hero-text .kicker{display:inline-block;background:linear-gradient(90deg,var(--green-400),var(--bg-2));padding:6px 12px;border-radius:999px;font-weight:700;color:var(--green-700)}
    .hero-text h2{font-size:clamp(32px,4vw,50px);line-height:1.1;margin:14px 0;font-weight:300}
    .hero-text h2 span{font-weight:600}
    .hero-text p{font-size:17px;color:var(--muted);max-width:60ch}
    .hero .actions{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}

    .btn-primary{background:var(--green-500);color:#fff;padding:12px 18px;border:none;border-radius:12px;font-weight:700;transition:transform .2s ease,box-shadow .3s ease}
    .btn-primary:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 0 18px var(--green-400)}
    .btn-outline{border:2px solid var(--green-500);color:var(--green-500);padding:12px 18px;border-radius:12px;font-weight:700;background:transparent;transition:background .2s ease,color .2s ease,box-shadow .3s ease}
    .btn-outline:hover{background:var(--green-500);color:#fff;box-shadow:0 0 10px var(--green-400)}

    .product-visual{flex:1;min-width:280px;background:linear-gradient(135deg,var(--bg-3),#d4ead4);display:flex;align-items:center;justify-content:center;border-radius:20px;padding:40px;border:1px solid var(--border);box-shadow:var(--shadow);z-index:1;animation:zoomHero 20s ease-in-out infinite alternate}
    @keyframes zoomHero{from{transform:scale(1)}to{transform:scale(1.1)}}

    .ingredients{margin:80px 0}
    .ingredients-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
    .ingredient{background:#fff;border:1px solid var(--border);border-radius:16px;padding:24px;box-shadow:0 4px 12px rgba(0,0,0,0.05);transition:transform .3s ease,box-shadow .3s ease}
    .ingredient:hover{transform:translateY(-6px);box-shadow:0 10px 25px rgba(0,0,0,0.08)}
    .ingredient h3{color:var(--green-700);margin:0 0 8px 0;font-size:20px}
    .ingredient p{color:var(--muted);font-size:15px;line-height:1.6}

   .features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  margin: 80px 0;
  align-items: stretch;
}

.feature {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 20px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.feature:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.1);
  background: linear-gradient(180deg, var(--bg-1), #ffffff);
}

.feature svg {
  width: 38px;
  height: 38px;
  margin-bottom: 12px;
  color: var(--green-500);
}

.feature h3 {
  font-size: 18px;
  color: var(--green-700);
  margin-bottom: 8px;
  font-weight: 600;
}

.feature p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}


    footer{background:linear-gradient(180deg,var(--green-700),var(--green-500));color:#fff;padding:40px;margin-top:60px;position:relative;overflow:hidden}
    .footer-grid{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between;position:relative;z-index:1}

    @media(max-width:800px){
      nav{flex-direction:column;align-items:flex-start;max-height:0;width:100%;background:rgba(255,255,255,0.95);padding:0;margin-top:10px;border-radius:8px}
      nav.open{max-height:300px;padding:10px 0}
      nav a{padding:10px 20px;width:100%;}
      .menu-toggle{display:flex;}
      .cta{top:35px;right:15px;font-size:14px;padding:8px 12px;}
    }
	@media(min-width:801px){
  .cta {
    position: static;
    margin-left: auto;
  }
}


 .about-hero h1{font-size:clamp(32px,5vw,52px);font-weight:400;color:var(--green-700);}
    .about-hero p{max-width:700px;margin:20px auto;color:var(--muted);font-size:18px;line-height:1.6;}
    .about-section{max-width:1100px;margin:auto;padding:60px 20px;}
    .about-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:40px;align-items:center;}
    .about-text h2{color:var(--green-700);margin-bottom:16px;font-weight:500;}
    .about-text p{color:var(--muted);line-height:1.8;font-size:16px;}
    .about-img{background:url('https://images.unsplash.com/photo-1606761568499-6d2451b43f59?auto=format&fit=crop&w=800&q=80') center/cover;border-radius:18px;min-height:340px;box-shadow:0 8px 20px rgba(0,0,0,0.08);}
	
	
	 .contact-hero{text-align:center;padding:10px 20px;background:linear-gradient(135deg,var(--bg-1),var(--bg-2));}
    .contact-hero h1{font-size:clamp(32px,5vw,52px);color:var(--green-700);}
    .contact-hero p{max-width:700px;margin:20px auto;color:var(--muted);font-size:18px;}
    .contact-form{max-width:700px;margin:60px auto;background:#fff;border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,0.08);padding:40px;}
    form{display:flex;flex-direction:column;gap:18px;}
    input,textarea{padding:14px 16px;border:1px solid var(--border);border-radius:10px;font-size:15px;outline:none;transition:border-color .2s ease;}
    input:focus,textarea:focus{border-color:var(--green-500);}
    button{background:var(--green-500);color:#fff;padding:14px;border:none;border-radius:12px;font-weight:600;cursor:pointer;transition:all .3s ease;}
    button:hover{transform:translateY(-3px);box-shadow:0 0 12px var(--green-400);}