:root{
    --navy-900:#0e1a2b;
    --navy-800:#16233a;
    --navy-700:#20334f;
    --green-700:#245c2d;
    --green-600:#2f7d3d;
    --green-500:#4f9d4f;
    --green-400:#7cc165;
    --green-300:#a7db8d;
    --cream:#f5f7f1;
    --white:#ffffff;
    --ink:#16233a;
    --muted:#5b6b7c;
    --line: rgba(22,35,58,0.1);
    --radius: 14px;
    --shadow: 0 20px 40px -20px rgba(14,26,43,0.25);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:'Inter',sans-serif;
    color:var(--ink);
    background:var(--cream);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4,.display{
    font-family:'Poppins',sans-serif;
    margin:0;
    line-height:1.15;
    letter-spacing:-0.01em;
  }
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  .wrap{
width:min(1180px,100%);
margin:auto;
padding-inline:20px;
}
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'Poppins',sans-serif; font-weight:600; font-size:12.5px;
    letter-spacing:0.14em; text-transform:uppercase;
    color:var(--green-700);
  }
  .eyebrow::before{content:""; width:22px; height:2px; background:var(--green-500); display:inline-block; border-radius:2px;}
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:14px 26px; border-radius:999px; font-family:'Poppins',sans-serif;
    font-weight:600; font-size:15px; cursor:pointer; border:2px solid transparent;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    white-space:nowrap;
  }
  .btn-primary{ background:var(--green-600); color:#fff; box-shadow:0 12px 24px -10px rgba(47,125,61,0.55);}
  .btn-primary:hover{ transform:translateY(-2px); background:var(--green-500);}
  .btn-outline{ border-color:rgba(255,255,255,0.4); color:#fff; }
  .btn-outline:hover{ background:rgba(255,255,255,0.12); transform:translateY(-2px);}
  .btn-dark{ background:var(--navy-800); color:#fff; }
  .btn-dark:hover{ background:var(--navy-700); transform:translateY(-2px);}

  /* HEADER */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(245,247,241,0.9);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 0;
  }
  .brand{ display:flex; align-items:center; gap:12px; }
  .brand img{ width:46px; height:46px; border-radius:10px; }
  .brand-text{ display:flex; flex-direction:column; line-height:1.1; }
  .brand-text b{ font-family:'Poppins',sans-serif; font-weight:700; font-size:16px; color:var(--navy-900);}
  .brand-text span{ font-size:11px; letter-spacing:0.08em; color:var(--green-600); font-weight:600; text-transform:uppercase;}
  nav.links{ display:flex; align-items:center; gap:30px; }
  nav.links a{ font-size:14.5px; font-weight:500; color:var(--navy-800); position:relative; padding:4px 0;}
  nav.links a::after{
    content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--green-500);
    transition:width .2s ease;
  }
  nav.links a:hover::after{ width:100%; }
  .nav-actions{ display:flex; align-items:center; gap:14px; }
  .phone-chip{
    display:flex; align-items:center; gap:8px; font-family:'Poppins',sans-serif; font-weight:600;
    font-size:14px; color:var(--navy-900); background:#fff; border:1px solid var(--line);
    padding:9px 16px; border-radius:999px;
  }
  .menu-toggle{ display:none; background:none; border:none; cursor:pointer; }
  .menu-toggle span{ display:block; width:24px; height:2px; background:var(--navy-900); margin:5px 0; border-radius:2px;}

  /* HERO */
 .hero{
    position:relative;
    overflow:hidden;
    min-height:720px;
    display:flex;
    align-items:center;
}

.hero-bg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    z-index:1;
}
.hero-bg{
    object-fit:cover;
    object-position:center;
    filter:brightness(.85);
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        90deg,
        rgba(14,26,43,.82) 0%,
        rgba(14,26,43,.65) 35%,
        rgba(14,26,43,.45) 60%,
        rgba(14,26,43,.55) 100%
    );
    z-index:2;
}

.hero .wrap{
    position:relative;
    z-index:3;
}

.hero-grid{
    display:grid;
    grid-template-columns:1fr;
}
.hero h1{
    color:#fff;
}

.hero h1 em{
    color:#7cc165;
}

.hero .lead{
    color:rgba(255,255,255,.92);
}

.hero .eyebrow{
    color:#7cc165;
}
.hero{
    min-height:100vh;
padding:120px 0 80px;
}
  
  .hero h1 em{ font-style:normal; color:var(--green-400); }
  .hero p.lead{ font-size:17.5px; color:rgba(255,255,255,0.78); max-width:520px; margin-bottom:32px;}
  .hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:40px;}
  .hero-stats{ display:flex; gap:34px; flex-wrap:wrap; }
  .hero-stats div{ }
  .hero-stats b{ font-family:'Poppins',sans-serif; font-size:26px; display:block; color:var(--green-400);}
  .hero-stats span{ font-size:12.5px; color:rgba(255,255,255,0.6); letter-spacing:.03em;}

  .hero-badge-card{
    background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14);
    border-radius:22px; padding:28px; backdrop-filter:blur(6px);
    position:relative;
  }
  .hero-badge-card .price-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px;}
  .price-head b{ font-family:'Poppins',sans-serif; font-size:15px;}
  .live-dot{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--green-400); font-weight:600;}
  .live-dot i{ width:7px; height:7px; border-radius:50%; background:var(--green-400); display:inline-block; animation:pulse 1.4s infinite;}
  @keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(124,193,101,0.6);} 70%{box-shadow:0 0 0 8px rgba(124,193,101,0);} 100%{box-shadow:0 0 0 0 rgba(124,193,101,0);} }
  .price-row{ display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px dashed rgba(255,255,255,0.16); font-size:14.5px;}
  .price-row:last-child{ border-bottom:none;}
  .price-row span:first-child{ color:rgba(255,255,255,0.82);}
  .price-row span:last-child{ font-family:'Poppins',sans-serif; font-weight:600; color:var(--green-400);}
  .badge-note{ margin-top:16px; font-size:12px; color:rgba(255,255,255,0.5);}

  /* TICKER / CONVEYOR */
  .conveyor{
    background:var(--navy-900); border-top:1px solid rgba(255,255,255,0.08); border-bottom:1px solid rgba(255,255,255,0.08);
    overflow:hidden; padding:14px 0;
  }
  .conveyor-track{ display:flex; width:max-content; animation:scroll-left 30s linear infinite; }
  .conveyor:hover .conveyor-track{ animation-play-state:paused; }
  .conveyor-item{
    display:flex; align-items:center; gap:10px; color:rgba(255,255,255,0.85);
    font-family:'Poppins',sans-serif; font-weight:600; font-size:14px; padding:0 34px;
    border-right:1px solid rgba(255,255,255,0.12); white-space:nowrap;
  }
  .conveyor-item .dot{ width:6px; height:6px; border-radius:50%; background:var(--green-400);}
  @keyframes scroll-left{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

  /* SECTIONS GENERIC */
  section{ padding:90px 0; }
  .section-head{ max-width:640px; margin-bottom:50px; }
  .section-head h2{ font-size:36px; font-weight:800; margin-top:14px; color:var(--navy-900);}
  .section-head p{ color:var(--muted); font-size:16px; margin-top:14px;}
  .center{ text-align:center; margin-left:auto; margin-right:auto; }

  /* WHY / STATS */
  .why{ background:#fff; }
  .why-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start;}
  .why-copy p{ color:var(--muted); font-size:15.5px; margin-top:16px;}
  .stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:20px;}
  .stat-card{
    background:var(--cream); border:1px solid var(--line); border-radius:var(--radius); padding:26px;
  }
  .stat-card b{ font-family:'Poppins',sans-serif; font-size:32px; color:var(--green-600); display:block;}
  .stat-card span{ font-size:13.5px; color:var(--muted);}

  /* SERVICES */
  .services{ background:var(--cream); }
  .service-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:26px;
}
  .service-card{
    display:block;
    background:#fff;
    border:1px solid #e8ecef;
    border-radius:16px;
    overflow:hidden;
    text-decoration:none;
    color:inherit;
    transition:.3s;
}
  .service-card:hover .service-image img{
    transform:scale(1.08);
}

.service-image{
    width:100%;
    height:220px;
    overflow:hidden;
}
.service-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.45s;
}
  .service-icon{
    width:52px; height:52px; border-radius:14px; background:linear-gradient(135deg,var(--green-500),var(--green-700));
    display:flex; align-items:center; justify-content:center; margin-bottom:18px; color:#fff; font-size:22px;
  }
  .service-card h3{
    font-size:24px;
    font-weight:700;
    margin:22px 22px 10px;
    color:#16233a;
}

.service-card p{
    margin:0 22px 24px;
    color:#607084;
    line-height:1.7;
    font-size:15px;
}

  /* HOW IT WORKS */
  .steps{ background:var(--navy-900); color:#fff; }
  .steps .section-head h2, .steps .section-head p{ color:#fff; }
  .steps .section-head p{ color:rgba(255,255,255,0.65); }
  .steps .eyebrow{ color:var(--green-400); }
  .steps .eyebrow::before{ background:var(--green-400); }
  .step-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; position:relative;}
  .step-row::before{
    content:""; position:absolute; top:34px; left:8%; right:8%; height:2px;
    background:repeating-linear-gradient(90deg, rgba(124,193,101,0.4) 0 10px, transparent 10px 20px);
    z-index:0;
  }
  .step-card{ position:relative; z-index:1; }
  .step-num{
    width:68px; height:68px; border-radius:50%; background:var(--navy-800); border:2px solid var(--green-400);
    display:flex; align-items:center; justify-content:center; font-family:'Poppins',sans-serif; font-weight:700;
    font-size:22px; color:var(--green-400); margin-bottom:22px;
  }
  .step-card h3{ font-size:19px; margin-bottom:10px; }
  .step-card p{ font-size:14.5px; color:rgba(255,255,255,0.65); max-width:280px;}

  /* SUSTAINABILITY */
  .sustain{ background:#fff; }
  .sustain-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
  .sustain-list{ list-style:none; padding:0; margin:22px 0 0; display:grid; gap:12px;}
  .sustain-list li{
    display:flex; align-items:center; gap:12px; font-size:14.5px; font-weight:500; color:var(--navy-800);
    background:var(--cream); border-radius:10px; padding:12px 16px; border:1px solid var(--line);
  }
  .sustain-list li .ico{ width:26px; height:26px; border-radius:8px; background:var(--green-500); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; flex:none;}
  .sustain-visual{
    background:linear-gradient(160deg, var(--green-700), var(--navy-800));
    border-radius:24px; padding:44px; color:#fff; position:relative; min-height:320px;
    display:flex; flex-direction:column; justify-content:center;
  }
  .sustain-visual h3{ font-size:26px; margin-bottom:12px; }
  .sustain-visual p{ color:rgba(255,255,255,0.75); font-size:14.5px;}
  .sustain-visual .ring{
    position:absolute; right:-40px; bottom:-40px; width:180px; height:180px; border:2px solid rgba(255,255,255,0.15);
    border-radius:50%;
  }

  /* AREAS */
  .areas{ background:var(--cream); }
  .chip-row{ display:flex; flex-wrap:wrap; gap:12px; }
  .chip{
    background:#fff; border:1px solid var(--line); padding:12px 20px; border-radius:999px;
    font-family:'Poppins',sans-serif; font-weight:600; font-size:14px; color:var(--navy-800);
    display:flex; align-items:center; gap:8px;
  }
  .chip .dot{ width:7px; height:7px; border-radius:50%; background:var(--green-500);}

  /* TESTIMONIALS */
  .testimonials{ background:#fff; }
  .test-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  .test-card{ background:var(--cream); border-radius:var(--radius); padding:26px; border:1px solid var(--line);}
  .stars{ color:var(--green-500); font-size:14px; letter-spacing:2px; margin-bottom:12px;}
  .test-card p.quote{ font-size:14.5px; color:var(--navy-800); margin:0 0 18px; }
  .test-person{ display:flex; align-items:center; gap:10px; }
  .test-person .avatar{
    width:38px; height:38px; border-radius:50%; background:var(--green-600); color:#fff;
    display:flex; align-items:center; justify-content:center; font-family:'Poppins',sans-serif; font-weight:700; font-size:14px;
  }
  .test-person b{ font-size:13.5px; display:block; }
  .test-person span{ font-size:12px; color:var(--muted);}

  /* FAQ */
  .faq{ background:var(--cream); }
  .faq-list{ display:grid; gap:14px; max-width:820px; }
  .faq-item{ background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden;}
  .faq-q{
    display:flex; align-items:center; justify-content:space-between; padding:18px 22px; cursor:pointer;
    font-family:'Poppins',sans-serif; font-weight:600; font-size:15px; color:var(--navy-900);
  }
  .faq-q .plus{ font-size:20px; color:var(--green-600); transition:transform .2s ease; flex:none; margin-left:14px;}
  .faq-item.open .plus{ transform:rotate(45deg); }
  .faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; padding:0 22px;}
  .faq-item.open .faq-a{ max-height:200px; padding-bottom:18px; }
  .faq-a p{ margin:0; font-size:14.5px; color:var(--muted); }

  /* CONTACT */
  .contact{ background:var(--navy-900); color:#fff; }
  .contact .eyebrow{ color:var(--green-400);}
  .contact .eyebrow::before{ background:var(--green-400);}
  .contact .section-head h2{ color:#fff; }
  .contact .section-head p{ color:rgba(255,255,255,0.65); }
  .contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
  .contact-card{ background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12); border-radius:20px; padding:32px;}
  .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px;}
  .field{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px;}
  .field label{ font-size:12.5px; color:rgba(255,255,255,0.6); font-weight:500;}
  .field input, .field textarea{
    background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.18); border-radius:10px;
    padding:12px 14px; color:#fff; font-family:'Inter',sans-serif; font-size:14.5px; outline:none;
  }
  .field input::placeholder, .field textarea::placeholder{ color:rgba(255,255,255,0.4);}
  .field input:focus, .field textarea:focus{ border-color:var(--green-400); }
  .contact-info{ display:flex; flex-direction:column; gap:22px; }
  .info-row{ display:flex; gap:16px; align-items:flex-start; }
  .info-ico{
    width:44px; height:44px; border-radius:12px; background:rgba(124,193,101,0.15); border:1px solid rgba(124,193,101,0.3);
    display:flex; align-items:center; justify-content:center; color:var(--green-400); font-size:18px; flex:none;
  }
  .info-row h4{ font-size:15px; margin-bottom:4px; }
  .info-row p{ margin:0; font-size:14px; color:rgba(255,255,255,0.65); }
  .map-frame{ border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,0.15); margin-top:24px; }
  .map-frame iframe{ width:100%; height:260px; border:0; display:block; filter:grayscale(0.15) contrast(1.05);}

  /* FOOTER */
  footer{ background:var(--navy-900); border-top:1px solid rgba(255,255,255,0.08); color:rgba(255,255,255,0.7); padding:50px 0 24px;}
  .footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px;}
  .footer-brand{ display:flex; gap:12px; align-items:center; margin-bottom:14px;}
  .footer-brand img{ width:40px; height:40px; border-radius:9px;}
  .footer-brand b{ font-family:'Poppins',sans-serif; color:#fff; font-size:15px;}
  footer h5{ font-family:'Poppins',sans-serif; color:#fff; font-size:14px; margin-bottom:16px; letter-spacing:.03em;}
  footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:10px;}
  footer ul a{ font-size:13.5px; color:rgba(255,255,255,0.65);}
  footer ul a:hover{ color:var(--green-400); }
  .footer-bottom{ border-top:1px solid rgba(255,255,255,0.08); padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12.5px;}

  /* FLOATING CTA */
  .float-wa{
    position:fixed; bottom:24px; right:24px; z-index:60; width:58px; height:58px; border-radius:50%;
    background:var(--green-500); display:flex; align-items:center; justify-content:center; color:#fff; font-size:26px;
    box-shadow:0 14px 30px -10px rgba(47,125,61,0.6); animation:float 3s ease-in-out infinite;
  }
  @keyframes float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-6px);} }

/* ==========================
   Tablet
========================== */

@media (max-width:1024px){

.wrap{
    padding:0 20px;
}

.hero{
    min-height:auto;
    padding:100px 0 70px;
}

.hero h1{
    font-size:46px;
}

.hero-grid,
.why-grid,
.sustain-grid,
.contact-grid{
    grid-template-columns:1fr;
    gap:40px;
}

.service-grid{
    grid-template-columns:repeat(2,1fr);
}

.step-row{
    grid-template-columns:1fr;
}

.test-grid{
    grid-template-columns:1fr 1fr;
}

.footer-grid{
    grid-template-columns:repeat(2,1fr);
}

.step-row::before{
    display:none;
}

}

/* ==========================
   Mobile
========================== */

@media (max-width:768px){

.wrap{
    padding:0 16px;
}

nav.links,
.phone-chip{
    display:none;
}

.menu-toggle{
    display:block;
}

.hero{
    min-height:auto;
    padding:90px 0 50px;
}

.hero-content{
    width:100%;
}

.hero h1{
    font-size:34px;
    line-height:1.25;
}

.hero p{
    font-size:16px;
}

.hero-ctas{
    flex-direction:column;
}

.hero-ctas .btn{
    width:100%;
}

.hero-stats{
    grid-template-columns:repeat(2,1fr);
    display:grid;
    gap:20px;
}

.service-grid,
.test-grid,
.step-row,
.form-row,
.footer-grid{
    grid-template-columns:1fr;
}

.section-head h2{
    font-size:30px;
}

section{
    padding:60px 0;
}

.contact iframe{
    width:100%;
    height:260px;
}

}

/* ==========================
   Small Mobile
========================== */

@media (max-width:480px){

.hero h1{
    font-size:28px;
}

.hero p{
    font-size:15px;
}

.btn{
    width:100%;
    padding:14px;
}

.hero-stats{
    grid-template-columns:1fr;
}

.brand-text{
    display:none;
}

.brand img{
    width:42px;
}

.section-head h2{
    font-size:26px;
}

.service-image{
    height:190px;
}

.float-wa{
    width:52px;
    height:52px;
    right:18px;
    bottom:18px;
}

}
.service-card{
    display:block;
    text-decoration:none;
    color:inherit;
}

.service-card:hover h3{
    color:var(--green-600);
}

.service-card:hover .service-icon{
    transform:scale(1.08);
    transition:.25s;
}