*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --gd:#0A1F02;--gf:#2D6A1E;--gm:#6BBF4E;--gl:#B8F369;--gp:#F0FFF0;--gs:#A8D5A2;
  --fd:'Bricolage Grotesque',sans-serif;--fb:'Spline Sans',sans-serif;
}
html,body{width:100%;height:100%;overflow:hidden;background:var(--gd);font-family:var(--fb);color:var(--gp)}

#particle-canvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}

.progress-vine{position:fixed;top:24px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:16px;z-index:100}
.vine-track{width:200px;height:4px;background:rgba(184,243,105,0.2);border-radius:2px;overflow:hidden}
.vine-fill{height:100%;background:var(--gl);border-radius:2px;transition:width 0.6s cubic-bezier(0.4,0,0.2,1);width:10%}
.slide-counter{font-family:var(--fd);font-size:13px;font-weight:600;color:var(--gl);letter-spacing:.05em}

.nav-controls{position:fixed;bottom:32px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:20px;z-index:100;background:rgba(10,31,2,0.75);backdrop-filter:blur(12px);border:1px solid rgba(184,243,105,0.2);border-radius:50px;padding:10px 20px}
.nav-btn{width:36px;height:36px;background:rgba(184,243,105,0.1);border:1px solid rgba(184,243,105,0.3);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--gl);font-size:16px;transition:all .2s}
.nav-btn:hover{background:var(--gl);color:var(--gd)}
.slide-dots{display:flex;gap:8px;align-items:center}
.dot{width:8px;height:8px;border-radius:50%;background:rgba(184,243,105,0.3);cursor:pointer;transition:all .3s}
.dot.active{background:var(--gl);transform:scale(1.3)}

.keyboard-hint{position:fixed;bottom:90px;left:50%;transform:translateX(-50%);font-size:11px;color:rgba(184,243,105,0.4);letter-spacing:.08em;z-index:100;animation:fadeHint 5s ease forwards}
@keyframes fadeHint{0%,60%{opacity:1}100%{opacity:0}}

.slides-container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1}
.slide{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .7s ease,transform .7s cubic-bezier(0.4,0,0.2,1);transform:translateY(30px)}
.slide.active{opacity:1;pointer-events:all;transform:translateY(0)}
.slide.exit{opacity:0;transform:translateY(-30px)}

.slide-bg{position:absolute;inset:0;background:var(--gd);z-index:0}
.bg-circle{position:absolute;border-radius:50%;filter:blur(80px);opacity:.4}
.c1{width:600px;height:600px;background:#1a4a0a;top:-200px;right:-100px}
.c2{width:400px;height:400px;background:#0d3505;bottom:-100px;left:-100px}
.c3{width:300px;height:300px;background:#2D6A1E;top:50%;left:40%;opacity:.2}

.deco{position:absolute;z-index:1;pointer-events:none}
.deco-tr{top:-20px;right:-20px;width:220px;height:320px}
.deco-bl{bottom:-20px;left:-20px;width:200px;height:200px;transform:rotate(180deg)}

.slide-content{position:relative;z-index:2;width:100%;max-width:1100px;padding:80px 60px;margin:0 auto}

/* TITLE */
.eyebrow{font-size:13px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--gl);margin-bottom:24px;display:flex;align-items:center;gap:12px}
.eyebrow::before{content:'';display:block;width:40px;height:1px;background:var(--gl)}
h1{font-family:var(--fd);font-weight:800;line-height:.95;margin-bottom:28px}
.t1{display:block;font-size:clamp(56px,8vw,108px);color:var(--gp)}
.t2{display:block;font-size:clamp(56px,8vw,108px);-webkit-text-stroke:2px var(--gl);color:transparent}
.subtitle{font-size:18px;line-height:1.7;color:rgba(240,255,240,.7);max-width:520px;margin-bottom:36px}
.title-meta{display:flex;gap:28px;margin-bottom:48px}
.title-meta span{display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(240,255,240,.5)}
.mdot{width:6px;height:6px;border-radius:50%;background:var(--gl);display:inline-block}
.cta-btn{display:inline-flex;align-items:center;gap:12px;background:var(--gl);color:var(--gd);font-family:var(--fd);font-weight:700;font-size:16px;padding:16px 32px;border:none;border-radius:50px;cursor:pointer;transition:all .3s}
.cta-btn:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(184,243,105,.4)}

.tag{font-family:var(--fd);font-size:11px;font-weight:800;letter-spacing:.2em;color:var(--gl);margin-bottom:16px;display:inline-block;border:1px solid rgba(184,243,105,.3);padding:4px 12px;border-radius:20px}
.tag.light{color:rgba(240,255,240,.6);border-color:rgba(240,255,240,.2)}

h2{font-family:var(--fd);font-weight:800;font-size:clamp(34px,4.5vw,58px);line-height:1.1;color:var(--gp);margin-bottom:20px}
h2 em{font-style:normal;color:var(--gl)}
h2.light{color:#fff}
h2.light em{color:var(--gl)}

.sb{font-size:17px;line-height:1.75;color:rgba(240,255,240,.75);margin-bottom:28px}
.sb strong{color:var(--gl);font-weight:600}
.sb.light{color:rgba(255,255,255,.8)}
.sb-sm{font-size:14px;line-height:1.7;color:rgba(240,255,240,.55)}
.sb-sm strong{color:var(--gl)}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.center-content{text-align:center}

/* STATS */
.stat-row{display:flex;gap:16px;margin-bottom:24px}
.stat-card{flex:1;background:rgba(184,243,105,.08);border:1px solid rgba(184,243,105,.15);border-radius:12px;padding:16px;text-align:center}
.sn{font-family:var(--fd);font-weight:800;font-size:22px;color:var(--gl)}
.sl{font-size:11px;color:rgba(240,255,240,.5);margin-top:4px}

/* RING CHART */
.ring-chart{display:flex;flex-direction:column;align-items:center;gap:24px}
.ring-outer{width:220px;height:220px;border-radius:50%;background:conic-gradient(#B8F369 0% 25%,#2D6A1E 25% 55%,#6BBF4E 55% 75%,#A8D5A2 75% 100%);display:flex;align-items:center;justify-content:center;box-shadow:0 0 60px rgba(184,243,105,.2)}
.ring-inner{width:140px;height:140px;border-radius:50%;background:var(--gd);display:flex;align-items:center;justify-content:center}
.ring-ct{text-align:center}
.rb{display:block;font-family:var(--fd);font-weight:800;font-size:36px;color:var(--gl)}
.rs{display:block;font-size:11px;color:rgba(240,255,240,.5)}
.ring-labels{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px}
.rl{display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(240,255,240,.7)}
.rld{width:10px;height:10px;border-radius:50%;flex-shrink:0}

/* FOREST */
.forest-bg{background:linear-gradient(135deg,#0A1F02 0%,#1a4a0a 50%,#0d3505 100%) !important}
.forest-ov{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(45,106,30,.3) 0%,transparent 70%)}
.forest-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:32px 0}
.fcard{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:24px 16px;transition:transform .3s}
.fcard:hover{transform:translateY(-4px)}
.fcard.hi{background:rgba(184,243,105,.1);border-color:rgba(184,243,105,.3)}
.fi{font-size:28px;margin-bottom:12px}
.fn{font-family:var(--fd);font-weight:800;font-size:22px;color:var(--gl)}
.fl{font-size:12px;color:rgba(255,255,255,.6);margin-top:6px}
.quote-block{font-size:16px;line-height:1.7;color:rgba(255,255,255,.6);border-left:3px solid var(--gl);padding:16px 24px;text-align:left;background:rgba(184,243,105,.05);border-radius:0 12px 12px 0;margin-top:24px}
.qm{font-size:40px;color:var(--gl);line-height:0;vertical-align:-12px;margin-right:4px}

/* OCEAN */
.ocean-bg{background:linear-gradient(180deg,#0a1929 0%,#1a3f6f 50%,#0a1929 100%) !important}
.ocean-facts{display:flex;flex-direction:column;gap:16px}
.of{display:flex;flex-direction:column;gap:6px}
.ofb{height:6px;background:rgba(168,213,245,.15);border-radius:3px;overflow:hidden}
.off{height:100%;background:linear-gradient(90deg,#5B9BD5,#A8D5F5);border-radius:3px}
.oft{font-size:13px;color:rgba(168,213,245,.8)}
.depth-chart{display:flex;flex-direction:column;width:100%;border-radius:16px;overflow:hidden}
.dz{height:var(--dh);background:var(--dc);display:flex;align-items:center;justify-content:space-between;padding:0 20px;min-height:50px}
.dz span{font-size:13px;font-weight:600;color:rgba(255,255,255,.9)}
.dz em{font-size:11px;font-style:normal;color:rgba(255,255,255,.6)}

/* CLIMATE */
.climate-bg{background:linear-gradient(135deg,#1a0a02 0%,#3d1a02 50%,#1a0a02 100%) !important}
.hw{position:absolute;border-radius:50%;filter:blur(100px);opacity:.15;animation:heatPulse 4s ease-in-out infinite}
.hw1{width:500px;height:500px;background:#E83A1A;top:-100px;right:-100px}
.hw2{width:300px;height:300px;background:#E8944A;bottom:0;left:20%;animation-delay:1.5s}
.hw3{width:200px;height:200px;background:#E8C84A;top:30%;left:-50px;animation-delay:3s}
@keyframes heatPulse{0%,100%{opacity:.15}50%{opacity:.3}}
.temp-timeline{display:flex;align-items:flex-end;gap:16px;height:200px;margin:32px 0;justify-content:center}
.tbg{display:flex;flex-direction:column;align-items:center;gap:8px}
.ty{font-size:11px;color:rgba(240,255,240,.5)}
.tbw{height:140px;display:flex;align-items:flex-end}
.tb{width:40px;height:var(--bh);background:var(--bc);border-radius:6px 6px 0 0;min-height:8px}
.abg .tb{box-shadow:0 0 20px var(--bc)}
.tv{font-size:11px;color:rgba(240,255,240,.7);font-weight:600}

/* DEFORESTATION */
.causes{display:flex;flex-direction:column;gap:16px;margin-top:8px}
.ci{display:flex;flex-direction:column;gap:6px}
.cl{font-size:13px;color:rgba(240,255,240,.7)}
.ct{height:8px;background:rgba(240,255,240,.1);border-radius:4px;overflow:hidden}
.cf{height:100%;width:var(--fw);background:var(--fc);border-radius:4px;display:flex;align-items:center;justify-content:flex-end;padding-right:6px;font-size:10px;color:rgba(0,0,0,.7);font-weight:700}
.tree-vis{display:flex;flex-direction:column;gap:16px;align-items:center}
.tree-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;width:100%}
.tree-icon{font-size:20px;text-align:center}
.tree-leg{display:flex;gap:20px;font-size:12px;color:rgba(240,255,240,.6)}
.tld{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px}
.tld.green{background:var(--gl)}
.tld.red{background:#E83A1A}

/* WILDLIFE */
.wildlife-bg{background:linear-gradient(135deg,#1a1a0a 0%,#2d2a0a 50%,#1a1a0a 100%) !important}
.wildlife-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.wcard{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:20px;text-align:center;transition:transform .3s,border-color .3s}
.wcard:hover{transform:translateY(-4px);border-color:rgba(184,243,105,.3)}
.we{font-size:32px;margin-bottom:10px}
.wn{font-family:var(--fd);font-weight:700;font-size:14px;color:#fff;margin-bottom:8px}
.ws{display:inline-block;font-size:10px;font-weight:700;padding:3px 10px;border-radius:20px;margin-bottom:8px;letter-spacing:.05em;text-transform:uppercase}
.ws.vulnerable{background:rgba(232,148,74,.2);color:#E8944A}
.ws.critical{background:rgba(232,58,26,.2);color:#E83A1A}
.ws.endangered{background:rgba(232,106,42,.2);color:#E86A2A}
.ws.recovering{background:rgba(184,243,105,.2);color:var(--gl)}
.wp{font-size:12px;color:rgba(255,255,255,.5)}

/* RENEWABLE */
.renew-bg{background:linear-gradient(135deg,#0A1F02 0%,#1a3a0a 60%,#0A1F02 100%) !important}
.sun-glow{position:absolute;width:400px;height:400px;background:radial-gradient(circle,rgba(232,200,74,.15) 0%,transparent 70%);top:-100px;right:10%;border-radius:50%;animation:sunPulse 6s ease-in-out infinite}
@keyframes sunPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.energy-list{display:flex;flex-direction:column;gap:20px}
.ei{display:flex;align-items:center;gap:16px}
.eic{font-size:24px;flex-shrink:0}
.eii{flex:1}
.ein{font-family:var(--fd);font-weight:700;font-size:15px;color:var(--gp);margin-bottom:6px}
.eit{height:6px;background:rgba(184,243,105,.15);border-radius:3px;overflow:hidden;margin-bottom:4px}
.eif{height:100%;width:var(--w);background:linear-gradient(90deg,#2D6A1E,#B8F369);border-radius:3px}
.ein2{font-size:11px;color:rgba(240,255,240,.45)}
.donut-wrap{display:flex;flex-direction:column;align-items:center;gap:20px}
.donut-svg{width:200px;height:200px}
.donut-leg{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px}
.dl{display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(240,255,240,.7)}
.dl span{width:12px;height:12px;border-radius:3px;flex-shrink:0}

/* CONSERVATION */
.cons-bg{background:linear-gradient(135deg,#0a1f0a 0%,#1a3a1a 50%,#0a1f0a 100%) !important}
.cons-timeline{display:flex;flex-direction:column;gap:0;margin-top:32px;position:relative;max-width:700px;margin-left:auto;margin-right:auto}
.cons-timeline::before{content:'';position:absolute;left:80px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--gl),rgba(184,243,105,.1))}
.cti{display:flex;align-items:center;gap:20px;padding:16px 0;position:relative}
.cty{font-family:var(--fd);font-weight:800;font-size:16px;color:var(--gl);width:60px;text-align:right;flex-shrink:0}
.ctd{width:14px;height:14px;border-radius:50%;background:var(--gl);flex-shrink:0;box-shadow:0 0 12px rgba(184,243,105,.5);position:relative;z-index:1}
.ctt{font-size:15px;color:rgba(255,255,255,.75);line-height:1.5}

/* CTA */
.action-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:32px 0}
.acard{background:rgba(184,243,105,.06);border:1px solid rgba(184,243,105,.15);border-radius:16px;padding:24px 16px;text-align:left;transition:all .3s;position:relative;overflow:hidden}
.acard::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--gl);transform:scaleX(0);transition:transform .3s;transform-origin:left}
.acard:hover::before{transform:scaleX(1)}
.acard:hover{transform:translateY(-4px);border-color:rgba(184,243,105,.35)}
.an{font-family:var(--fd);font-size:11px;font-weight:800;color:rgba(184,243,105,.4);letter-spacing:.1em;margin-bottom:12px}
.ai{font-size:28px;margin-bottom:12px}
.at{font-family:var(--fd);font-weight:700;font-size:15px;color:var(--gp);margin-bottom:8px}
.ad{font-size:13px;color:rgba(240,255,240,.55);line-height:1.6}
.final-quote{font-size:18px;font-style:italic;color:rgba(240,255,240,.6);line-height:1.7;max-width:600px;margin:0 auto;padding:24px;border-top:1px solid rgba(184,243,105,.15)}
.fqm{font-size:48px;color:var(--gl);line-height:0;vertical-align:-16px;margin-right:4px}
.fqa{display:block;font-size:13px;font-style:normal;color:var(--gl);margin-top:12px;letter-spacing:.1em}

/* ANIMATIONS */
.slide.active h2,.slide.active h1,.slide.active .sb,.slide.active .subtitle{animation:slideUp .6s ease forwards}
.slide.active .sb{animation-delay:.1s}
.slide.active .stat-row,.slide.active .forest-grid,.slide.active .wildlife-grid,.slide.active .action-grid,.slide.active .temp-timeline,.slide.active .cons-timeline,.slide.active .ocean-facts,.slide.active .energy-list,.slide.active .causes{animation:slideUp .6s ease .2s forwards;opacity:0}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:900px){
  .two-col{grid-template-columns:1fr;gap:30px}
  .forest-grid{grid-template-columns:repeat(2,1fr)}
  .wildlife-grid{grid-template-columns:repeat(2,1fr)}
  .action-grid{grid-template-columns:repeat(2,1fr)}
  .slide-content{padding:60px 30px}
  .t1,.t2{font-size:52px}
}