:root{
  --green: #3f7a4a;
  --green-2: #6bb04e;
  --dark: #13231a;
  --muted: #687379;
  --glass: rgba(255,255,255,0.94);
  --border: rgba(63,122,74,0.14);
  --shadow: 0 12px 30px rgba(20,40,20,0.08);
  --radius: 14px;
  --container: 1200px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial;
  color:var(--dark);
  background: linear-gradient(180deg,#ffffff 0%, #f7fcf7 60%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
}

/* Header */
.header{
  position:fixed; top:0; left:0; right:0; z-index:1200;
  background:var(--glass); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border); box-shadow:0 6px 18px rgba(0,0,0,0.03);
}
.header-grid{
  max-width:var(--container); margin:0 auto; display:grid;
  grid-template-columns: 1fr auto 1fr; align-items:center; gap:12px;
  padding:12px 22px;
}
.company-name{ font-weight:700; font-size:1.05rem; color:var(--dark); }
.header-center{ display:flex; justify-content:center; align-items:center; }
.header-logo{ height:86px; width:auto; border-radius:12px; box-shadow:var(--shadow); transition:transform .18s ease; }
.header-logo:hover{ transform:translateY(-3px) scale(1.01); }
.header-right{ text-align:right; }
.header-right a{ text-decoration:none; color:var(--dark); font-weight:600; margin-left:18px; }
.header-right a:hover{ color:var(--green); }

/* main spacing under header */
main{ padding-top:118px; }

/* container helper */
.container{ max-width:var(--container); margin:0 auto; padding:0 20px; }

/* HERO */
.hero{
  min-height:78vh; display:flex; align-items:center; justify-content:center; text-align:center;
  background: url('https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1600&q=80') center/cover no-repeat;
  position:relative;
}
.hero::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,12,8,0.16), rgba(8,12,8,0.26)); }
.hero-inner{ position:relative; z-index:2; max-width:900px; padding:28px; color:#fff; }
.badge{ display:inline-block; background: rgba(255,255,255,0.12); color:#f3f3f3; padding:8px 14px; border-radius:999px; font-weight:700; margin-bottom:12px; }
.hero-title{ font-size:2.4rem; font-weight:800; margin:10px 0 12px; letter-spacing:-0.4px; }
.hero-lead{ color:#e9f2e9; margin-bottom:18px; }
.hero-ctas{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.btn{ display:inline-block; padding:10px 16px; border-radius:999px; font-weight:700; text-decoration:none; cursor:pointer; }
.btn-primary{ background: linear-gradient(135deg,var(--green),var(--green-2)); color:#fff; box-shadow: 0 10px 30px rgba(80,120,70,0.12); }
.btn-outline{ color:#fff; border:2px solid rgba(255,255,255,0.12); background:transparent; }
.btn-outline:hover{ background: rgba(255,255,255,0.06); }

/* Sections */
.section{ padding:72px 0; }
.section.alt{ background:#f7fbf7; }
.section-title{ font-size:1.9rem; color:var(--dark); margin-bottom:8px; }
.section-sub{ color:var(--muted); margin-bottom:16px; }

/* ABOUT */
.about-grid{ display:grid; grid-template-columns: 1fr 380px; gap:28px; align-items:start; }
.about-left h2{ font-size:1.4rem; margin-bottom:10px; }
.bullets{ list-style:none; margin-top:12px; color:var(--muted); }
.bullets li{ margin:8px 0; padding-left:20px; position:relative; }
.bullets li:before{ content:""; position:absolute; left:0; top:7px; width:10px; height:10px; background:var(--green); border-radius:50%; }

/* vision block */
.vision-block{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:22px; }
.vision-card{ padding:18px; border-radius:12px; background:var(--glass); border:1px solid var(--border); box-shadow:var(--shadow); }

/* products zig-zag */
.category-title{ font-size:1.05rem; color:var(--green); font-weight:700; margin-top:6px; margin-bottom:14px; }
.stack{ display:flex; flex-direction:column; gap:18px; }
.product-row{
  display:grid; grid-template-columns:420px 1fr; gap:22px; align-items:center;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.96));
  border-radius:12px; padding:16px; border:1px solid var(--border); box-shadow:0 8px 22px rgba(34,66,46,0.06);
}
.product-row:nth-child(even){ grid-template-columns:1fr 420px; } /* zig-zag */
.product-media img{ width:100%; height:260px; object-fit:cover; border-radius:10px; display:block; }
.product-info{ padding:6px 8px; }
.product-info.reverse{ text-align:right; }
.product-info h4{ color:var(--green); margin-bottom:8px; font-size:1.05rem; }
.lead-text{ color:var(--muted); margin-bottom:12px; }
.btn-info{ background:transparent; border:2px solid var(--green); color:var(--green); padding:8px 12px; border-radius:999px; font-weight:700; cursor:pointer; }
.coming-soon::after{ content:"Coming Soon"; position:absolute; top:-12px; right:12px; background:#ff7a59; color:#fff; padding:6px 10px; border-radius:999px; font-weight:700; font-size:12px; }

/* services */
.service-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:18px; margin-top:18px; }
.service-card{ padding:18px; border-radius:12px; background:var(--glass); border:1px solid var(--border); box-shadow:var(--shadow); }

/* contact */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.contact-card{ padding:16px; border-radius:12px; background:var(--glass); border:1px solid var(--border); box-shadow:var(--shadow); }

/* footer */
.footer{ background:var(--dark); color:#fff; padding:22px 0; margin-top:28px; }
.footer-grid{ max-width:var(--container); margin:0 auto; display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; padding:0 20px; }
.footer-grid h4{ margin-bottom:8px; color:#fff; }
.footer-grid a{ color: #e9efe9; text-decoration:none; display:inline-block; margin-bottom:6px; }
.footer-copy{ text-align:center; margin-top:14px; opacity:0.9; font-size:0.95rem; }

/* modal */
.modal{ display:none; position:fixed; inset:0; background: rgba(0,0,0,0.6); justify-content:center; align-items:center; z-index:1600; padding:18px; }
.modal.active{ display:flex; }
.modal-card{ width:100%; max-width:780px; background:#fff; border-radius:12px; padding:18px; position:relative; box-shadow: 0 30px 60px rgba(20,40,20,0.12); }
.modal-card img{ width:100%; height:320px; object-fit:cover; border-radius:10px; margin-bottom:12px; }
.modal-close{ position:absolute; right:12px; top:10px; background:none; border:none; font-size:22px; cursor:pointer; color:var(--muted); }

/* fade-in reveal */
.fade-in{ opacity:0; transform:translateY(20px); transition:all .7s cubic-bezier(.2,.9,.3,1); }
.fade-in.visible{ opacity:1; transform:translateY(0); }

/* responsive */
@media(max-width:1100px){
  .product-row{ grid-template-columns: 1fr; }
  .product-row:nth-child(even){ grid-template-columns: 1fr; }
  .about-grid{ grid-template-columns: 1fr; }
  .vision-block{ grid-template-columns: 1fr; }
  .header-logo{ height:72px; }
  main{ padding-top:108px; }
}
@media(max-width:700px){
  .header-grid{ grid-template-columns: 1fr auto; padding:10px; }
  .company-name{ display:none; }
  .header-right{ display:none; }
  .header-logo{ height:64px; }
  .product-media img{ height:200px; }
}