:root{
  --green:#00482c;
  --green-deep:#00301d;
  --green-mid:#0a5637;
  --gold:#eeab01;
  --ink:#ffffff;
  --muted:#d6e2db;
  --text:#20302a;
  --text-soft:#54655d;
  --cream:#f4f6f2;
  --line:#e2e8e2;
  --display:'Poppins',system-ui,-apple-system,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --max:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--text);background:var(--cream);line-height:1.6;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.15}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 22px}

/* reveal — only hidden when JS is active, so the page still shows if JS fails */
.reveal.is-visible{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.is-visible{opacity:1;transform:none}

/* Single logo, always position:fixed, always anchored at this same small
   top-left spot. Only its `transform` (translate + scale) ever changes —
   never top/left/height — so there's nothing for layout to reflow and
   nothing that can look janky. JS computes the transform analytically
   (see main.js) rather than by measuring the rendered image, since the
   image's width isn't known until it has loaded. */
.brand{position:fixed;top:20px;left:22px;height:30px;z-index:4;transform-origin:top left;will-change:transform}
.brand img{height:100%;display:block}
@media(min-width:820px){
  .brand{top:26px;left:48px;height:36px}
}

/* floating whatsapp */
.wa-float{position:fixed;right:16px;bottom:16px;z-index:20;display:inline-flex;align-items:center;gap:8px;
  background:var(--gold);color:var(--green-deep);font-family:var(--display);font-weight:600;font-size:14px;
  padding:12px 16px;border-radius:999px;box-shadow:0 6px 18px rgba(0,32,20,.28);
  opacity:0;transform:translateY(12px);transition:opacity .3s ease,transform .3s ease}
.wa-float[hidden]{display:none}
.wa-float.show{opacity:1;transform:none}
.wa-float svg{width:18px;height:18px}

/* buttons */
.btn{font-family:var(--display);font-weight:600;font-size:16px;color:var(--green-deep);background:var(--gold);
  padding:15px 26px;border-radius:999px;display:inline-flex;align-items:center;gap:10px;
  transition:transform .18s ease,filter .18s ease}
.btn:hover{transform:translateY(-2px);filter:brightness(1.05)}
.btn:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.btn svg{width:18px;height:18px}
.btn--lg{font-size:17px;padding:17px 30px}
.wa{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:600;font-size:14px;
  color:var(--green-deep);background:var(--gold);padding:10px 16px;border-radius:999px;transition:transform .18s,filter .18s}
.wa:hover{transform:translateY(-1px);filter:brightness(1.05)}
.wa:focus-visible{outline:3px solid #fff;outline-offset:2px}
.wa svg{width:16px;height:16px}

.eyebrow{font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin-bottom:14px;display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:26px;height:3px;background:var(--gold)}
.eyebrow--dark{color:var(--green-mid)}
.eyebrow--dark::before{background:var(--gold)}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;isolation:isolate;z-index:1;color:var(--ink)}
.hero__bg{position:absolute;inset:0;z-index:-2;background:url('../assets/hero.jpg') center/cover no-repeat;animation:kb 24s ease-out infinite alternate}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(0,48,29,.55) 0%,rgba(0,48,29,0) 26%,rgba(0,48,29,0) 55%,rgba(0,40,24,.42) 100%)}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.08)}}
.nav{display:flex;justify-content:flex-end;align-items:center;padding:20px 22px;position:relative;z-index:2}
.hero__body{margin-top:auto;padding:0 22px 46px;max-width:760px;width:100%;margin-left:auto;margin-right:auto}
.hero h1{font-weight:700;letter-spacing:-.015em;font-size:clamp(2.1rem,7.2vw,3.9rem);margin-bottom:18px;line-height:1.04}
.hero h1 .g{color:var(--gold)}
.sub{font-size:clamp(1rem,2.4vw,1.18rem);color:var(--muted);max-width:52ch;margin-bottom:28px}
.cta{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.link{font-family:var(--display);font-weight:500;font-size:15px;color:#fff;border-bottom:2px solid rgba(255,255,255,.35);padding-bottom:3px;transition:border-color .18s}
.link:hover{border-color:var(--gold)}

/* sections share solid bg so the fixed logo passes behind them */
.benefits,.how,.battery,.contact,.foot{position:relative;z-index:5}

/* benefits */
.benefits{background:var(--cream);padding:64px 0}
.benefits__grid{display:grid;gap:18px}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px 26px}
.card__icon{display:inline-flex;width:46px;height:46px;align-items:center;justify-content:center;border-radius:12px;background:rgba(0,72,44,.07);color:var(--green);margin-bottom:16px}
.card__icon svg{width:24px;height:24px}
.card h3{font-size:19px;margin-bottom:8px;color:var(--green)}
.card p{color:var(--text-soft);font-size:15px}

/* how + proof */
.how{background:#fff;padding:70px 0}
.how__head{max-width:640px;margin-bottom:40px}
.how__head h2{font-size:clamp(1.5rem,3.6vw,2.1rem);color:var(--green)}
.how__grid{display:grid;gap:16px;margin-bottom:56px}
.step{border-top:2px solid var(--gold);padding-top:18px}
.step__n{font-family:var(--display);font-weight:700;font-size:15px;color:var(--gold);display:block;margin-bottom:8px}
.step h3{font-size:19px;color:var(--green);margin-bottom:8px}
.step p{color:var(--text-soft);font-size:15px}
.proof__label{font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.06em;color:var(--green-mid);margin-bottom:16px}
.proof__media{display:grid;gap:14px;margin-bottom:32px}
.proof__media figure{border-radius:16px;overflow:hidden;position:relative}
.proof__media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.proof__media figcaption{position:absolute;left:14px;bottom:12px;color:#fff;font-size:13px;font-family:var(--display);font-weight:500;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.stats{display:grid;gap:14px}
.stat{background:var(--green);color:#fff;border-radius:14px;padding:22px 24px}
.stat__n{display:block;font-family:var(--display);font-weight:700;font-size:50px;color:var(--gold);line-height:1}
.stat__l{display:block;font-size:14px;color:var(--muted);margin-top:6px}

/* second-life */
.battery{background:var(--green);color:#fff;padding:72px 0}
.battery__head{max-width:640px;margin-bottom:40px}
.battery__head h2{font-size:clamp(1.6rem,3.8vw,2.3rem);color:#fff;margin-bottom:14px}
.battery__sub{color:var(--muted);font-size:clamp(1rem,2.2vw,1.1rem);max-width:52ch}
.flow{list-style:none;display:grid;gap:18px}
.flow__step{position:relative;background:var(--green-mid);border-radius:16px;overflow:hidden}
.flow__step img{width:100%;height:180px;object-fit:cover}
.flow__n{position:absolute;top:12px;left:12px;width:30px;height:30px;border-radius:50%;background:var(--gold);color:var(--green-deep);
  font-family:var(--display);font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center}
.flow__step h3{font-size:16px;color:#fff;padding:14px 16px 18px}
.flow__loop{margin-top:26px;color:var(--gold);font-family:var(--display);font-weight:500;font-size:15px;display:flex;align-items:center;gap:8px}
.flow__loop span{font-size:20px}

/* contact */
.contact{background:var(--cream);padding:76px 0}
.contact__inner{max-width:620px;text-align:center;margin:0 auto}
.contact__inner h2{font-size:clamp(1.7rem,4vw,2.4rem);color:var(--green);margin-bottom:14px}
.contact__inner p{color:var(--text-soft);margin-bottom:26px}
.contact__inner .btn{margin:0 auto}
.contact__meta{margin-top:22px;font-size:15px;color:var(--text-soft)}
.contact__meta a{color:var(--green);font-weight:500}

/* footer */
.foot{background:var(--green-deep);color:#fff;padding:72px 0 150px}
.foot__grid{display:grid;gap:36px}
.foot__logo{height:50px;margin-bottom:16px}
.foot__brand p{color:var(--muted);font-size:15px;max-width:34ch}
.foot__col h4{font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.foot__col ul{list-style:none}
.foot__col li{margin-bottom:10px;color:var(--muted);font-size:15px}
.foot__col a{color:var(--muted);transition:color .18s}
.foot__col a:hover{color:#fff}
.foot__bottom{margin-top:150px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);color:var(--muted);font-size:13px}

/* desktop */
@media(min-width:768px){
  .benefits__grid{grid-template-columns:repeat(3,1fr);gap:22px}
  .how__grid{grid-template-columns:repeat(3,1fr);gap:26px}
  .proof__media{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:repeat(3,1fr)}
  .flow{grid-template-columns:repeat(4,1fr)}
  .foot__grid{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
}
@media(min-width:820px){
  .nav{padding:26px 48px}
  .wrap{padding:0 48px}
  .hero__body{padding:0 48px 66px;max-width:1120px}
  .benefits,.contact{padding:88px 0}
  .how,.battery{padding:96px 0}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero__bg{animation:none}
  .js .reveal{opacity:1;transform:none;transition:none}
}