/* ══════════════════════════════════════
   RESET & DESIGN TOKENS
══════════════════════════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --g:#1e713a;--g-l:#27904b;--g-pale:#edf7f1;--g-deep:#0d3a1e;
  --o:#ff5100;--o-pale:#fff3ee;
  --white:#ffffff;--bg:#f8fbf9;--bg2:#f2f8f4;
  --ink:#080f0a;--ink2:#1a2e20;--mute:#5a6b61;--mute2:#8a9e90;
  --bdr:rgba(30,113,58,.12);--bdr2:rgba(30,113,58,.07);
  --sh:0 2px 16px rgba(0,0,0,.06);--sh-md:0 8px 40px rgba(0,0,0,.09);--sh-lg:0 20px 72px rgba(0,0,0,.12);
  --r:18px;--r-sm:10px;
}
html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;background:var(--white);color:var(--ink);overflow-x:hidden;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ══════════════════════════════════════
   TOP ACCENT BAR
══════════════════════════════════════ */
.top-bar{height:3px;background:linear-gradient(90deg,var(--g) 0%,#2ec870 40%,var(--o) 70%,#ff8040 100%);position:fixed;top:0;left:0;right:0;z-index:10000}

/* ══════════════════════════════════════
   NAVIGATION
══════════════════════════════════════ */
nav{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:9999;
  width:calc(100% - 40px);max-width:1200px;
  height:68px;display:flex;align-items:center;justify-content:space-between;
  padding:0 10px 0 18px;gap:16px;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(32px) saturate(200%);-webkit-backdrop-filter:blur(32px) saturate(200%);
  border:1px solid rgba(255,255,255,.72);
  border-radius:20px;
  box-shadow:0 2px 12px rgba(0,0,0,.05),0 8px 40px rgba(0,0,0,.07);
  transition:background .4s,box-shadow .4s,width .45s cubic-bezier(.4,0,.2,1),max-width .45s cubic-bezier(.4,0,.2,1),border-radius .4s,top .4s,padding .4s,border-color .4s;
}
nav.scrolled{
  background:rgba(255,255,255,.97);
  box-shadow:0 1px 0 rgba(0,0,0,.07),0 4px 24px rgba(0,0,0,.08);
  width:100%;
  max-width:100%;
  border-radius:0;
  top:3px;
  padding:0 24px 0 40px;
  border-color:rgba(0,0,0,.07);
  border-left:none;
  border-right:none;
  border-top:none;
}

.nav-brand{display:flex;align-items:center;flex-shrink:0}
.nav-logo-img{height:42px;width:auto;display:block}

.nav-divider{width:1px;height:28px;background:rgba(0,0,0,.08);flex-shrink:0;margin:0 4px}

.nav-center{display:flex;align-items:center;gap:1px;flex:1;justify-content:center}
.nav-center a{
  font-size:13.5px;font-weight:500;color:var(--mute);
  padding:8px 15px;border-radius:10px;
  transition:color .18s,background .18s;white-space:nowrap;letter-spacing:-.1px;
}
.nav-center a:hover{color:var(--ink);background:rgba(0,0,0,.05)}
.nav-center a.active{color:var(--ink);background:rgba(0,0,0,.06);font-weight:600}

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

.btn-nav{
  background:linear-gradient(135deg,var(--o),#e84800);color:#fff;
  padding:11px 22px;border-radius:12px;font-weight:700;font-size:13.5px;
  box-shadow:0 4px 18px rgba(255,81,0,.32);
  transition:transform .2s,box-shadow .2s,filter .2s;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;letter-spacing:-.1px;
}
.btn-nav:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(255,81,0,.42);filter:brightness(1.06)}

.nav-hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;border:none;background:rgba(0,0,0,.04);border-radius:10px}
.nav-hamburger span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:all .3s}

/* ══════════════════════════════════════
   HERO — contrast split
══════════════════════════════════════ */
#hero{
  min-height:100svh;
  display:grid;grid-template-columns:54% 46%;
  position:relative;overflow:hidden;
}

/* ── LEFT panel ── */
.hero-left{
  display:flex;flex-direction:column;justify-content:center;
  padding:96px 52px 72px 72px;
  background:#fff;position:relative;z-index:2;
}
.hero-left::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle,rgba(30,113,58,.07) 1px,transparent 1px);
  background-size:30px 30px;
  -webkit-mask-image:linear-gradient(145deg,rgba(0,0,0,.22) 0%,transparent 55%);
  mask-image:linear-gradient(145deg,rgba(0,0,0,.22) 0%,transparent 55%);
}
.hero-left::after{
  content:'';position:absolute;top:18%;right:0;bottom:18%;width:1px;
  background:linear-gradient(180deg,transparent,rgba(30,113,58,.14) 30%,rgba(30,113,58,.14) 70%,transparent);
}

.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--g-pale);border:1px solid rgba(30,113,58,.22);
  padding:6px 14px;border-radius:100px;width:fit-content;
  font-size:11px;font-weight:700;color:var(--g);letter-spacing:.45px;text-transform:uppercase;
  margin-bottom:30px;
}
.badge-pulse{width:6px;height:6px;background:var(--g);border-radius:50%;flex-shrink:0;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.5)}}

.hero-h1{
  font-size:clamp(2.8rem,3.8vw,4.8rem);font-weight:900;
  line-height:1.04;letter-spacing:-2.5px;color:var(--ink);
  margin-bottom:22px;
}
.hero-h1 .hl{color:var(--o)}

.hero-rule{
  width:44px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--g),var(--o));
  margin-bottom:20px;
}

.hero-sub{
  font-size:.97rem;color:var(--mute);line-height:1.82;
  max-width:390px;margin-bottom:38px;
}

.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:48px}

.btn-pri{
  background:linear-gradient(135deg,var(--o),#ff7030);color:#fff;
  padding:14px 30px;border-radius:100px;font-size:14px;font-weight:700;
  border:none;cursor:pointer;
  box-shadow:0 8px 24px rgba(255,81,0,.28);
  transition:transform .25s,box-shadow .25s;
  display:inline-flex;align-items:center;gap:7px;
}
.btn-pri:hover{transform:translateY(-3px);box-shadow:0 14px 36px rgba(255,81,0,.40)}

.btn-sec{
  background:transparent;color:var(--ink);
  padding:14px 30px;border-radius:100px;font-size:14px;font-weight:600;
  border:1.5px solid rgba(30,113,58,.22);
  transition:all .25s;display:inline-flex;align-items:center;gap:7px;
}
.btn-sec:hover{border-color:var(--o);color:var(--o);transform:translateY(-3px);box-shadow:var(--sh)}

/* stats — 4-column horizontal strip */
.hero-stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--bdr);padding-top:24px;
}
.hstat{padding-right:28px;padding-left:28px;border-right:1px solid var(--bdr)}
.hstat:first-child{padding-left:0}
.hstat:last-child{border-right:none;padding-right:0}
.hstat-val{font-size:1.4rem;font-weight:900;letter-spacing:-.8px;line-height:1;color:var(--ink);margin-bottom:5px}
.hstat-val.g{color:var(--g)}.hstat-val.o{color:var(--o)}
.hstat-lbl{font-size:9.5px;font-weight:500;color:var(--mute2);text-transform:uppercase;letter-spacing:.6px;line-height:1.4}

.hero-scroll-cue{display:flex;align-items:center;gap:10px;margin-top:32px}
.scroll-line{width:28px;height:1px;background:var(--mute2)}
.scroll-label{font-size:9.5px;font-weight:600;color:var(--mute2);text-transform:uppercase;letter-spacing:1.5px}
@keyframes bounce-y{from{transform:translateY(0)}to{transform:translateY(5px)}}
.scroll-arrow{animation:bounce-y .9s ease-in-out infinite alternate}

/* ── RIGHT panel — photo ── */
.hero-right{
  position:relative;overflow:hidden;
  background:#010d16;
}
.hero-bg-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;z-index:1;
}
.hero-right::before{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.28) 0%,rgba(0,0,0,.08) 50%,rgba(0,0,0,.42) 100%);
}

/* energy orb */
.hero-orb-wrap{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-52%);
  width:300px;height:300px;z-index:2;
}
.hero-orb-core{
  position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 38% 38%,
    rgba(60,220,155,.3) 0%,rgba(20,160,110,.17) 42%,rgba(5,60,40,.05) 80%,transparent 100%
  );
  box-shadow:0 0 130px rgba(40,200,140,.15),inset 0 0 80px rgba(40,200,140,.07);
  animation:coreBreath 5s ease-in-out infinite alternate;
}
@keyframes coreBreath{from{opacity:.8;transform:scale(.97)}to{opacity:1;transform:scale(1.03)}}

.hero-ring{position:absolute;border-radius:50%}
.hero-ring.r1{inset:-38px;border:1px dashed rgba(60,220,155,.26);animation:spinRing 28s linear infinite}
.hero-ring.r2{inset:-80px;border:1px solid rgba(60,220,155,.13);animation:spinRing 48s linear infinite reverse}
.hero-ring.r3{inset:-132px;border:1px solid rgba(60,220,155,.06)}
@keyframes spinRing{from{transform:rotate(0)}to{transform:rotate(360deg)}}

.orb-node{
  position:absolute;width:9px;height:9px;border-radius:50%;
  background:rgba(60,220,155,.95);
  box-shadow:0 0 18px rgba(60,220,155,.75);
  top:-4.5px;left:50%;margin-left:-4.5px;
}

/* mini solar panel grid inside orb */
.hero-panels{
  position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
  display:grid;grid-template-columns:repeat(4,18px);grid-template-rows:repeat(2,11px);
  gap:3px;opacity:.5;
}
.hero-panel-cell{
  background:rgba(60,210,150,.38);
  border:1px solid rgba(60,210,150,.55);
  border-radius:2px;
}

/* floating glassmorphism cards */
.hfc{
  position:absolute;z-index:5;
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;padding:18px 22px;
  transition:transform .3s,background .3s;
}
.hfc:hover{background:rgba(255,255,255,.11);transform:translateY(-4px)}
.hfc-accent{display:block;width:24px;height:3px;border-radius:2px;margin-bottom:11px}
.hfc-val{font-size:1.5rem;font-weight:900;color:#fff;letter-spacing:-1px;line-height:1;margin-bottom:4px}
.hfc-lbl{font-size:9.5px;font-weight:600;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.8px}

@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* ══════════════════════════════════════
   SHARED SECTION STYLES
══════════════════════════════════════ */
.sec{padding:110px 56px}
.sec-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2.5px;color:var(--o);
  margin-bottom:20px;
}
.sec-eyebrow::before{content:'';width:24px;height:2px;background:var(--o);border-radius:2px}
.sec-h2{font-size:clamp(2.2rem,4vw,3.8rem);font-weight:900;letter-spacing:-1.8px;color:var(--ink);line-height:1.06;margin-bottom:20px}
.sec-sub{font-size:1.06rem;color:var(--mute);line-height:1.74;max-width:520px}

/* reveal animation */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal.d1{transition-delay:.1s}.reveal.d2{transition-delay:.18s}
.reveal.d3{transition-delay:.26s}.reveal.d4{transition-delay:.34s}

/* ══════════════════════════════════════
   IMPACT
══════════════════════════════════════ */
#impact{background:var(--bg)}

.impact-header{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:end;margin-bottom:72px}
.impact-header-right .sec-sub{max-width:420px}

.impact-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  grid-template-rows:auto auto;
  gap:2px;
  background:var(--bdr);
  border-radius:var(--r);overflow:hidden;
}

.imp-cell{
  background:var(--white);padding:48px 40px;position:relative;
  transition:background .3s;
}
.imp-cell:hover{background:var(--g-pale)}
.imp-cell.large{grid-row:span 2;display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--g-deep);color:white;padding:56px 48px}
.imp-cell.large:hover{background:var(--g)}

.imp-ico{font-size:28px;margin-bottom:20px}
.imp-n{font-size:clamp(2.8rem,4vw,4rem);font-weight:900;letter-spacing:-2px;line-height:1;margin-bottom:10px}
.imp-cell.large .imp-n{color:white}
.imp-n sup{font-size:.42em;letter-spacing:0;color:var(--g);font-weight:800}
.imp-cell.large .imp-n sup{color:#4dda82}
.imp-lbl{font-size:13px;font-weight:500;color:var(--mute);line-height:1.5}
.imp-cell.large .imp-lbl{color:rgba(255,255,255,.65)}

.imp-cell.large .big-label{
  font-size:clamp(1rem,1.6vw,1.3rem);font-weight:700;color:rgba(255,255,255,.9);
  margin-bottom:12px;letter-spacing:-.2px;
}

/* ══════════════════════════════════════
   SOLUTIONS
══════════════════════════════════════ */
#solutions{background:var(--white)}

.sol-intro{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end;margin-bottom:64px}

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

.sol-card{
  background:var(--bg);border:1px solid var(--bdr2);border-radius:var(--r);
  padding:44px 36px;position:relative;overflow:hidden;
  transition:transform .35s cubic-bezier(.23,1,.32,1),box-shadow .35s,border-color .35s;
}
.sol-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--g);transform:scaleX(0);transform-origin:left;
  transition:transform .35s ease;
}
.sol-card:hover{transform:translateY(-8px);box-shadow:var(--sh-lg);border-color:rgba(30,113,58,.2);background:var(--white)}
.sol-card:hover::before{transform:scaleX(1)}

.sol-card-num{
  font-size:11px;font-weight:700;color:var(--mute2);text-transform:uppercase;
  letter-spacing:2px;margin-bottom:28px;
}
.sol-icon-wrap{
  width:60px;height:60px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;font-size:26px;
  margin-bottom:26px;transition:transform .3s;
}
.sol-icon-wrap.green{background:var(--g-pale)}
.sol-icon-wrap.orange{background:var(--o-pale)}
.sol-card:hover .sol-icon-wrap{transform:scale(1.1) rotate(-4deg)}

.sol-title{font-size:1.18rem;font-weight:800;color:#1e713a;margin-bottom:14px;letter-spacing:-.3px;line-height:1.25}
.sol-body{font-size:13.5px;color:var(--mute);line-height:1.76}
.sol-cta{
  display:inline-flex;align-items:center;gap:6px;margin-top:24px;
  font-size:12.5px;font-weight:700;color:var(--o);
  opacity:0;transform:translateY(4px);transition:all .3s;
}
.sol-card:hover .sol-cta{opacity:1;transform:translateY(0)}

/* ══════════════════════════════════════
   PROJECTS
══════════════════════════════════════ */
#projects{background:var(--bg)}

.proj-top{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:56px;gap:40px}
.proj-top-left{max-width:500px}

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

.proj-card{
  border-radius:var(--r);overflow:hidden;
  border:1px solid var(--bdr);
  transition:transform .4s cubic-bezier(.23,1,.32,1),box-shadow .4s;
  background:var(--white);position:relative;
}
.proj-card:hover{transform:translateY(-8px) scale(1.005);box-shadow:0 32px 80px rgba(0,0,0,.14)}

.proj-thumb{height:260px;position:relative;overflow:hidden}
.proj-thumb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;transition:transform .5s ease}
.proj-card:hover .proj-thumb-img{transform:scale(1.04)}
.proj-card:nth-child(1) .proj-thumb{background:linear-gradient(150deg,#062d4a 0%,#0d5a7e 30%,#1388b8 60%,#48b8dc 85%,#8ed8f0 100%)}
.proj-card:nth-child(2) .proj-thumb{background:linear-gradient(150deg,#081e48 0%,#133680 30%,#1f60b8 60%,#4494d8 85%,#80c4f0 100%)}
.proj-card:nth-child(3) .proj-thumb{background:linear-gradient(150deg,#061c0e 0%,#1e713a 32%,#28a050 62%,#42c870 85%,#7adea0 100%)}
.proj-card:nth-child(4) .proj-thumb{background:linear-gradient(150deg,#2a0e00 0%,#7a2e00 32%,#b84800 62%,#e86820 85%,#ff9850 100%)}

/* panel grid overlay */
.proj-panels{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.28) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.28) 1px,transparent 1px);
  background-size:18px 14px;opacity:.15;transition:opacity .4s;
}
.proj-card:hover .proj-panels{opacity:.26}

/* sun */
.proj-sun{
  position:absolute;top:22px;left:26px;width:44px;height:44px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,230,80,.95) 0%,rgba(255,160,40,.5) 45%,transparent 72%);
  box-shadow:0 0 32px rgba(255,200,60,.5);
}

/* glass data badge */
.proj-badge{
  position:absolute;top:18px;right:18px;z-index:2;
  background:rgba(255,255,255,.15);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.30);border-radius:12px;
  padding:10px 16px;color:white;text-align:right;
}
.proj-badge .bv{font-size:15px;font-weight:900;display:block;letter-spacing:-.3px}
.proj-badge .bl{font-size:10px;opacity:.8;font-weight:500;margin-top:1px}

/* wave bottom */
.proj-wave{
  position:absolute;bottom:0;left:0;right:0;height:100px;
  background:linear-gradient(to top,rgba(255,255,255,.14),transparent);
}

/* horizon line */
.proj-horizon{
  position:absolute;bottom:30%;left:0;right:0;height:1px;
  background:rgba(255,255,255,.12);
}

.proj-body{padding:26px 30px 30px;background:var(--white)}
.proj-name{font-size:1.2rem;font-weight:800;color:var(--ink);margin-bottom:12px;letter-spacing:-.3px}
.proj-tags{display:flex;gap:8px;flex-wrap:wrap}
.proj-tag{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 13px;border-radius:100px;font-size:11.5px;font-weight:700;
}
.pt-solar{background:var(--g-pale);color:var(--g);border:1px solid rgba(30,113,58,.18)}
.pt-bess{background:var(--o-pale);color:var(--o);border:1px solid rgba(255,81,0,.18)}

/* ══════════════════════════════════════
   WHY HAYLEYS SOLAR
══════════════════════════════════════ */
#why{background:var(--white)}

.why-layout{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}

.why-left{display:flex;flex-direction:column}
.why-left .sec-eyebrow{margin-bottom:16px}
.why-left .sec-h2{margin-bottom:16px}
.why-left .sec-sub{margin-bottom:44px}

.why-list{display:flex;flex-direction:column}
.why-item{
  display:grid;grid-template-columns:48px 1fr;gap:20px;
  padding:32px 0;border-bottom:1px solid var(--bdr2);
  transition:padding-left .3s;
}
.why-item:first-child{padding-top:0}
.why-item:last-child{border-bottom:none;padding-bottom:0}
.why-item:hover{padding-left:8px}

.why-num{
  font-size:11px;font-weight:800;color:var(--o);
  text-transform:uppercase;letter-spacing:1.5px;
  padding-top:4px;
}

.why-content h4{font-size:1.06rem;font-weight:800;color:var(--ink);margin-bottom:8px;letter-spacing:-.2px}
.why-content p{font-size:13.5px;color:var(--mute);line-height:1.75}

/* right panel */
.why-panel{
  border-radius:28px;overflow:hidden;
  background:#071f0f;
  aspect-ratio:4/5;position:relative;
}
.why-panel-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;z-index:0;
}
.why-panel::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.22) 0%,rgba(0,0,0,.05) 40%,rgba(0,0,0,.55) 100%);
}
.why-panel-inner{position:absolute;inset:0;z-index:2;padding:44px;display:flex;flex-direction:column;justify-content:flex-end;gap:16px}
.why-stat-card{
  background:rgba(255,255,255,.1);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.18);border-radius:16px;
  padding:22px 28px;color:white;
}
.wsc-num{font-size:clamp(2rem,3vw,2.8rem);font-weight:900;letter-spacing:-1.5px;line-height:1}
.wsc-lbl{font-size:11px;opacity:.72;margin-top:5px;text-transform:uppercase;letter-spacing:.8px;font-weight:600}
.why-float-a{
  position:absolute;top:-20px;left:-20px;z-index:10;
  background:var(--g);border-radius:16px;padding:16px 22px;
  box-shadow:0 10px 36px rgba(30,113,58,.38);color:white;
}
.wfa-num{font-size:1.7rem;font-weight:900;letter-spacing:-.8px;line-height:1}
.wfa-lbl{font-size:10px;opacity:.8;margin-top:3px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.why-float-b{
  position:absolute;bottom:-20px;right:-20px;z-index:10;
  background:var(--white);border-radius:18px;padding:18px 24px;
  box-shadow:0 12px 44px rgba(0,0,0,.12);
}
.wfb-num{font-size:2rem;font-weight:900;letter-spacing:-.8px;line-height:1;color:var(--o)}
.wfb-lbl{font-size:10.5px;color:var(--mute);margin-top:4px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}

/* ══════════════════════════════════════
   FUTURE / STATEMENT
══════════════════════════════════════ */
#future{
  background:var(--ink2);
  padding:140px 56px;text-align:center;position:relative;overflow:hidden;
}

/* subtle green glow */
#future::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(30,113,58,.18) 0%,transparent 60%),
    radial-gradient(ellipse 40% 40% at 80% 20%,rgba(255,81,0,.08) 0%,transparent 55%);
}
/* grid lines */
#future::after{
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:52px 52px;
}

.future-inner{position:relative;z-index:2;max-width:900px;margin:0 auto}

.future-eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2.5px;
  color:rgba(255,255,255,.4);margin-bottom:32px;
}
.future-eyebrow::before,.future-eyebrow::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.1);width:30px}

.future-h2{
  font-size:clamp(3rem,6vw,6.5rem);font-weight:900;
  letter-spacing:-3px;line-height:1.02;color:white;
  margin-bottom:28px;
}
.future-h2 .fg{color:#4dda82}
.future-h2 .fo{color:var(--o)}

.future-sub{font-size:1.2rem;color:rgba(255,255,255,.55);max-width:540px;margin:0 auto 56px;line-height:1.7}

/* animated energy line */
.eline{max-width:480px;margin:0 auto 52px;opacity:.55}

.future-btn{
  background:white;color:var(--o);
  padding:18px 44px;border-radius:100px;font-size:16px;font-weight:700;
  box-shadow:0 8px 32px rgba(0,0,0,.25);
  transition:transform .25s,box-shadow .25s,color .25s;
  display:inline-flex;align-items:center;gap:9px;
}
.future-btn:hover{transform:translateY(-3px);box-shadow:0 16px 48px rgba(0,0,0,.30);color:var(--g-l)}

/* floating particles */
.fp{position:absolute;border-radius:50%;pointer-events:none}

/* ══════════════════════════════════════
   CTA
══════════════════════════════════════ */
#cta{
  background:linear-gradient(160deg,#eef8f2 0%,#e2f4eb 45%,#f2fbf6 100%);
  padding:120px 56px;text-align:center;position:relative;overflow:hidden;
}
#cta::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(30,113,58,.3),transparent)}

.cta-inner{position:relative;z-index:2;max-width:640px;margin:0 auto}
.cta-h2{font-size:clamp(2.2rem,4.5vw,3.8rem);font-weight:900;letter-spacing:-1.8px;color:var(--ink);margin-bottom:18px;line-height:1.06}
.cta-sub{font-size:1.08rem;color:var(--mute);margin-bottom:44px;line-height:1.74}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
footer{background:#081910;color:rgba(255,255,255,.65);position:relative;overflow:hidden}
footer::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:radial-gradient(ellipse 60% 60% at 5% 55%,rgba(30,113,58,.16) 0%,transparent 55%),
    radial-gradient(ellipse 45% 45% at 95% 15%,rgba(255,81,0,.06) 0%,transparent 55%);
}
.footer-accent{height:3px;background:linear-gradient(90deg,transparent 0%,var(--g) 30%,#2ea860 50%,var(--o) 70%,transparent 100%)}
.footer-top{padding:76px 56px 60px;display:grid;grid-template-columns:2.2fr 1fr 1fr 1.6fr;gap:56px;position:relative;z-index:1;border-bottom:1px solid rgba(255,255,255,.07)}
.footer-brand-logo{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.footer-logo-img{height:52px;width:auto;display:block;filter:brightness(0) invert(1);opacity:.9}
.fb-icon{width:42px;height:42px;background:linear-gradient(145deg,var(--g),#2ea860);border-radius:11px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 18px rgba(30,113,58,.45);flex-shrink:0}
.fb-name{font-size:15px;font-weight:800;color:white;letter-spacing:-.3px}
.fb-name em{font-style:normal;color:#4dda82}
.footer-tagline{font-size:13.5px;line-height:1.76;color:rgba(255,255,255,.48);margin-bottom:28px;max-width:290px}
.footer-certbadge{display:inline-flex;align-items:center;gap:8px;background:rgba(30,113,58,.2);border:1px solid rgba(30,113,58,.35);padding:8px 16px;border-radius:100px;margin-bottom:28px}
.footer-certbadge span{font-size:11.5px;color:#4dda82;font-weight:600;letter-spacing:.2px}
.footer-certbadge-dot{width:6px;height:6px;background:#4dda82;border-radius:50%;animation:pulse 2s ease-in-out infinite}
.footer-social{display:flex;gap:10px}
.social-icon{width:38px;height:38px;background:rgba(255,255,255,.07);border-radius:9px;border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.55);font-size:13px;font-weight:700;transition:all .25s;font-style:normal}
.social-icon:hover{background:var(--g);border-color:var(--g);color:white;transform:translateY(-3px);box-shadow:0 6px 18px rgba(30,113,58,.4)}
.footer-col h5{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:rgba(255,255,255,.35);margin-bottom:22px}
.footer-col ul{list-style:none}
.footer-col ul li{margin-bottom:12px}
.footer-col ul li a{font-size:13.5px;color:rgba(255,255,255,.55);transition:color .2s,padding-left .2s;display:flex;align-items:center;gap:8px}
.footer-col ul li a::before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--g);opacity:.6;flex-shrink:0;transition:opacity .2s,transform .2s}
.footer-col ul li a:hover{color:white;padding-left:3px}
.footer-col ul li a:hover::before{opacity:1;transform:scale(1.4)}
.footer-contact-item{display:flex;align-items:flex-start;gap:12px;margin-bottom:20px}
.fci-icon{width:34px;height:34px;border-radius:9px;background:rgba(30,113,58,.18);border:1px solid rgba(30,113,58,.28);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:15px}
.fci-body{font-size:13px;color:rgba(255,255,255,.52);line-height:1.6}
.fci-label{font-size:10px;text-transform:uppercase;letter-spacing:1.2px;color:rgba(255,255,255,.28);margin-bottom:4px;font-weight:600}
.fci-body a{color:rgba(255,255,255,.65);transition:color .2s}
.fci-body a:hover{color:white}
.footer-bottom{padding:22px 56px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;position:relative;z-index:1}
.footer-copy{font-size:12.5px;color:rgba(255,255,255,.3)}
.footer-hayleys{font-size:12px;color:rgba(255,255,255,.22);display:flex;align-items:center;gap:6px}
.footer-legal{display:flex;gap:24px}
.footer-legal a{font-size:12.5px;color:rgba(255,255,255,.3);transition:color .2s}
.footer-legal a:hover{color:rgba(255,255,255,.7)}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media(max-width:1200px){
  .impact-grid{grid-template-columns:1fr 1fr 1fr}
  .imp-cell.large{grid-row:span 1}
  .why-layout{gap:60px}
  .sol-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:1100px){
  #hero{grid-template-columns:1fr}
  .hero-right{display:none}
  .hero-left{padding:90px 40px 64px}
  .impact-header{grid-template-columns:1fr}
  .sol-intro{grid-template-columns:1fr}
  .why-layout{grid-template-columns:1fr}
  .why-visual{display:none}
  .footer-top{grid-template-columns:1fr 1fr;gap:40px}
  .proj-top{flex-direction:column;align-items:flex-start}
}
@media(max-width:900px){
  nav{padding:0 8px 0 14px;width:calc(100% - 24px);top:10px;height:60px;border-radius:16px}
  .nav-center{display:none}
  .nav-divider{display:none}
  .nav-hamburger{display:flex}
  .btn-nav{padding:10px 18px;font-size:13px}
  .sec{padding:80px 28px}
  #hero{grid-template-columns:1fr;height:auto;min-height:100svh}
  .hero-left{padding:96px 28px 56px;justify-content:flex-start}
  .hero-right{display:block;height:280px;order:-1}
  .hfc{display:none}
  .impact-grid{grid-template-columns:1fr 1fr}
  .sol-grid{grid-template-columns:1fr}
  .proj-grid{grid-template-columns:1fr}
  .footer-top{padding:52px 28px 40px;grid-template-columns:1fr}
  .footer-bottom{padding:20px 28px;flex-direction:column;align-items:flex-start}
  .footer-legal{flex-wrap:wrap;gap:14px}
}
@media(max-width:600px){
  .hero-h1{letter-spacing:-1.5px}
  .hero-stats{grid-template-columns:1fr 1fr}
  .hstat:nth-child(2){border-right:none}
  .hstat:nth-child(3){border-top:1px solid var(--bdr);padding-top:14px;margin-top:6px}
  .hstat:nth-child(4){border-top:1px solid var(--bdr);padding-top:14px;margin-top:6px}
  .impact-grid{grid-template-columns:1fr}
  .impact-header{gap:32px}
  .proj-top,.impact-header{margin-bottom:40px}
  .future-h2{letter-spacing:-2px}
  #future,#cta{padding:80px 28px}
}