:root{
  --text:#334455; --teal:#00AAAA; --red:#D22F2F; --yellow:#FFAC02; --purple:#6E79FF;
  --blue:#009CFF; --gold:#FFBB33; --panel:rgba(222,230,239,.5);
  --footer1:#334455; --footer2:#2B3A49; --footer3:#0F1419;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Poppins,sans-serif;font-size:18px;line-height:27px;color:var(--text);background:#fff;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg{display:block}
.container{max-width:1160px;margin:0 auto;padding:0 20px}
h1{font-size:48px;line-height:55.2px;letter-spacing:-1.2px;font-weight:700}
.h2{font-size:48px;line-height:55.2px;letter-spacing:-1.2px;font-weight:700}
.center{text-align:center}
.divider{height:0;border-top:4px solid var(--teal);width:120px;margin:28px 0}
.center .divider,.divider.c{margin-left:auto;margin-right:auto}
.divider.thin{border-top-width:2px}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:16px;line-height:19.2px;color:#fff;border-radius:40px;padding:12px 20px;transition:transform .15s,filter .15s;white-space:nowrap}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn.lg{padding:16px 24px}
.btn.red{background:var(--red)} .btn.yellow{background:var(--yellow)} .btn.teal{background:var(--teal)} .btn.purple{background:var(--purple)}
header{position:sticky;top:0;z-index:50;background:#fff;height:84px;box-shadow:0 1px 0 rgba(51,68,85,.06)}
header .container{display:flex;align-items:center;justify-content:space-between;height:84px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:21px;letter-spacing:-.4px}
.logo svg{width:34px;height:34px}
.logo b{color:var(--teal);font-weight:700}
nav.main{display:flex;align-items:center;gap:34px}
nav.main ul{display:flex;gap:34px;list-style:none}
nav.main li{position:relative}
nav.main li>a{font-size:16px;line-height:24px;padding:10px 0;display:flex;align-items:center;gap:6px}
nav.main li>a::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px)}
nav.main li:hover>a{color:var(--teal)}
.sub{position:absolute;top:100%;left:-20px;min-width:250px;background:#fff;border-radius:20px 0;box-shadow:0 12px 30px rgba(51,68,85,.14);padding:12px 0;opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s}
nav.main li:hover .sub{opacity:1;visibility:visible;transform:none}
.sub a{display:block;font-size:15px;line-height:22px;padding:8px 22px}
.sub a:hover{color:var(--teal);background:rgba(0,170,170,.06)}
.nav-btns{display:flex;gap:12px}
.burger{display:none;background:none;border:0;cursor:pointer;width:40px;height:40px}
.burger span{display:block;height:3px;background:var(--text);margin:6px 8px;border-radius:2px}
.hero{position:relative;padding:60px 0;overflow:hidden}
.waves{position:absolute;inset:0;pointer-events:none;opacity:.55}
.hero .container{position:relative;display:grid;grid-template-columns:1fr 456px;gap:80px;align-items:center;min-height:511px}
.hero p{max-width:546px}
.hero em{font-style:italic}
.campaigns{background:var(--panel);border-radius:32px 0;padding:30px}
.bars{display:flex;gap:0;margin-bottom:18px}
.bars i{display:block;width:30px;border-top:4px solid var(--blue)}
.bars i+i{border-color:var(--gold)}
.campaigns h2{font-size:24px;line-height:27.6px;letter-spacing:-.6px;margin-bottom:6px}
.campaigns>p{font-size:16px;line-height:24px;margin-bottom:18px}
.camp{display:flex;align-items:center;background:#fff;border-radius:12px;overflow:hidden;margin-bottom:12px;box-shadow:0 4px 14px rgba(51,68,85,.08);position:relative;transition:transform .15s}
.camp:hover{transform:translateX(4px)}
.camp .thumb{width:64px;align-self:stretch;flex-shrink:0;display:grid;place-items:center}
.camp .thumb svg{width:30px;height:30px}
.camp .txt{padding:10px 14px}
.camp h3{font-size:14px;line-height:21px;font-weight:400;color:var(--purple)}
.camp strong{display:block;font-size:15px;line-height:20px}
.ribbon{position:absolute;top:10px;right:-28px;background:var(--red);color:#fff;font-size:10px;font-weight:700;letter-spacing:.5px;transform:rotate(40deg);padding:2px 30px;text-transform:uppercase}
.impact{position:relative;padding:150px 0 30px;background:linear-gradient(135deg,#1f4e79 0%,#2d6a8a 45%,#e3a24a 100%);overflow:hidden}
.impact .art{position:absolute;inset:0;opacity:.35}
.impact .container{position:relative}
.impact h2{color:#fff;font-size:30px;line-height:34.5px;letter-spacing:-.75px}
.impact .divider{border-color:var(--teal);margin:14px 0 24px;width:60px}
.cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.pcard{display:block;background:#fff;border-radius:40px 0;padding:30px 20px;min-height:297px;transition:transform .2s}
.pcard:hover{transform:translateY(-6px)}
.pcard .plogo{height:48px;display:flex;align-items:center;gap:8px;margin-bottom:18px;font-weight:700;font-size:15px}
.pcard .plogo span{width:36px;height:36px;border-radius:10px;display:grid;place-items:center}
.pcard .plogo svg{width:20px;height:20px}
.pcard h3{font-size:18px;line-height:27px;font-weight:700;margin-bottom:6px}
.pcard p{font-size:14px;line-height:21px}
section.how{padding:90px 0}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:50px}
.how-grid .ico{width:96px;height:96px;margin:0 auto 22px;color:var(--teal)}
.how-grid h3{font-size:18px;line-height:23.4px;letter-spacing:-.45px;margin-bottom:10px}
.how-grid p{font-size:16px;line-height:25px}
.how .cta{margin-top:46px}
.pulse{position:relative;padding:90px 0;overflow:hidden;background:#f7f9fb}
.pulse .blob{position:absolute;width:640px;height:640px;border-radius:50%;background:radial-gradient(circle,rgba(0,170,170,.12),transparent 70%)}
.pulse .blob.a{left:-260px;top:-260px} .pulse .blob.b{right:-260px;bottom:-300px;background:radial-gradient(circle,rgba(110,121,255,.12),transparent 70%)}
.pulse .container{position:relative}
.pulse p{max-width:640px;margin:0 auto 30px}
section.data{padding:90px 0}
.data .lead{max-width:680px;margin:0 auto}
.data-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin:50px 0 40px}
.dcard{border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 8px 24px rgba(51,68,85,.08);display:flex;flex-direction:column;transition:transform .2s}
.dcard:hover{transform:translateY(-4px)}
.dcard .top{height:120px;display:grid;place-items:center;color:#fff}
.dcard .top svg{width:44px;height:44px}
.dcard .body{padding:18px 18px 22px}
.dcard h3{font-size:16px;line-height:19.2px;margin-bottom:8px}
.dcard p{font-size:14px;line-height:21px}
.network{padding:80px 0;background:var(--panel)}
.network p{max-width:700px;margin:0 auto 30px}
section.sdg{padding:90px 0}
.sdg-head{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;margin-bottom:40px}
.sdg-head a{color:var(--teal);font-weight:700}
.sdg-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.goal{aspect-ratio:1;border-radius:14px;color:#fff;padding:14px;display:flex;flex-direction:column;justify-content:space-between;transition:transform .15s}
.goal:hover{transform:scale(1.04)}
.goal b{font-size:30px;line-height:1}
.goal span{font-size:13px;line-height:17px;font-weight:500}
.goal.all{background:var(--text)}
.share{padding:50px 0;text-align:center}
.share h2{font-size:18px;line-height:27px;margin-bottom:14px}
.share-row{display:flex;justify-content:center;gap:12px}
.share-row a{width:44px;height:44px;border-radius:50%;background:var(--teal);display:grid;place-items:center;color:#fff}
.share-row svg{width:18px;height:18px}
.involved{position:relative;padding:90px 0 110px;background:#fff;overflow:hidden}
.involved::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 15% 30%,rgba(0,170,170,.10),transparent 45%),radial-gradient(ellipse at 85% 70%,rgba(255,172,2,.12),transparent 45%),radial-gradient(ellipse at 60% 10%,rgba(110,121,255,.08),transparent 40%)}
.involved .container{position:relative}
.gi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:50px}
.gicard{background:#fff;border-radius:20px;min-height:280px;padding:30px 22px;text-align:center;display:flex;flex-direction:column;align-items:center;box-shadow:0 10px 30px rgba(51,68,85,.10)}
.gicard .ico{width:80px;height:80px;border-radius:50%;display:grid;place-items:center;color:#fff;margin-bottom:18px}
.gicard .ico svg{width:40px;height:40px}
.gicard h3{font-size:18px;line-height:23.4px;letter-spacing:-.45px;margin-bottom:8px}
.gicard p{font-size:14px;line-height:21px;margin-bottom:18px;flex:1}
.gicard .btn{padding:10px 20px;font-size:14px}
.f1{background:var(--footer1);color:#fff;padding:30px 0}
.f1 .container{display:flex;align-items:center;justify-content:space-between;gap:30px;min-height:172px;flex-wrap:wrap}
.f1 .logo{color:#fff}
.f1 .tag{font-size:14px;opacity:.8;margin-top:8px}
.f1 ul{list-style:none;display:flex;gap:30px}
.f1 ul a{font-size:14px} .f1 ul a:hover{color:var(--teal)}
.f2{background:var(--footer2);color:#fff;padding:30px 0}
.f2 .container{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.f2 h2{font-size:18px;line-height:23.4px;letter-spacing:-.45px;margin-bottom:6px}
.f2 p{font-size:14px;line-height:21px;opacity:.85;margin-bottom:14px}
.f2 .btn{padding:10px 20px;font-size:14px}
.social{display:flex;gap:10px}
.social a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center}
.social a:hover{background:var(--teal)}
.social svg{width:16px;height:16px;fill:#fff}
.f3{background:var(--footer3);color:rgba(255,255,255,.7);font-size:13px;line-height:20px;padding:12px 0}
.f3 .container{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.f3 a:hover{color:var(--teal)}
.page-hero{position:relative;padding:80px 0 70px;background:var(--panel);overflow:hidden}
.page-hero .container{position:relative}
.crumbs{font-size:14px;color:var(--teal);margin-bottom:14px}
.crumbs a:hover{text-decoration:underline}
.page-hero p{max-width:720px}
.prog{padding:80px 0;border-bottom:1px solid #eef2f6;scroll-margin-top:84px}
.prog:nth-of-type(even){background:#fbfcfd}
.prog-grid{display:grid;grid-template-columns:1fr 380px;gap:60px;align-items:start}
.prog .tagline{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.prog .tagline span.ic{width:56px;height:56px;border-radius:16px;display:grid;place-items:center}
.prog .tagline span.ic svg{width:28px;height:28px}
.status{display:inline-block;font-size:13px;font-weight:700;padding:4px 12px;border-radius:40px;background:rgba(0,170,170,.12);color:var(--teal)}
.status.plan{background:rgba(255,172,2,.15);color:#b37800}
.prog h2{font-size:36px;line-height:42px;letter-spacing:-.9px;margin-bottom:6px}
.prog h3{font-size:18px;line-height:24px;margin:26px 0 10px}
.prog ul.ticks{list-style:none}
.prog ul.ticks li{position:relative;padding-left:30px;margin-bottom:8px;font-size:16px;line-height:25px}
.prog ul.ticks li::before{content:"";position:absolute;left:0;top:6px;width:18px;height:18px;border-radius:50%;background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z' fill='%23fff'/%3E%3C/svg%3E") center/12px no-repeat}
.side{background:#fff;border-radius:32px 0;padding:28px;box-shadow:0 10px 30px rgba(51,68,85,.10)}
.side dl{margin-bottom:22px}
.side dt{font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:var(--purple);margin-top:14px}
.side dd{font-size:16px;line-height:24px;font-weight:500}
.side .btn{width:100%;justify-content:center;margin-top:8px}
.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.role{background:#fff;border-radius:40px 0;padding:28px 24px;box-shadow:0 10px 30px rgba(51,68,85,.10);display:flex;flex-direction:column}
.role .type{font-size:13px;font-weight:700;color:var(--purple);margin-bottom:8px}
.role h3{font-size:19px;line-height:25px;margin-bottom:8px}
.role p{font-size:14px;line-height:21px;flex:1;margin-bottom:16px}
.role .meta{font-size:13px;color:#6a7a8a;margin-bottom:16px}
.role .btn{align-self:flex-start;padding:10px 20px;font-size:14px}
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:40px;text-align:center}
.values .v{padding:20px}
.values .v svg{width:64px;height:64px;margin:0 auto 14px;color:var(--teal)}
.values h3{font-size:18px;line-height:24px;margin-bottom:6px}
.values p{font-size:15px;line-height:23px}
.council{background:var(--text);color:#fff;border-radius:32px 0;padding:50px;display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center}
.council h2{font-size:32px;line-height:38px;letter-spacing:-.8px;margin-bottom:12px}
.council p{opacity:.9}
.council ul{list-style:none}
.council li{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:16px}
.council li:last-child{border:0}
.sec{padding:80px 0;scroll-margin-top:84px}
@media (max-width:1024px){
  .hero .container{grid-template-columns:1fr;gap:40px}
  .cards4,.data-grid,.gi-grid{grid-template-columns:repeat(2,1fr)}
  .sdg-grid{grid-template-columns:repeat(4,1fr)}
  .sdg-head{grid-template-columns:1fr;gap:16px}
  .prog-grid,.council{grid-template-columns:1fr}
  .roles,.values{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .burger{display:block}
  nav.main{position:fixed;top:84px;left:0;right:0;bottom:0;background:#fff;flex-direction:column;align-items:stretch;padding:20px;gap:20px;overflow:auto;transform:translateX(100%);transition:.25s}
  nav.main.open{transform:none}
  nav.main ul{flex-direction:column;gap:0}
  nav.main li>a{font-size:18px;padding:14px 0;border-bottom:1px solid #eef2f6}
  .sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;padding:0 0 8px 12px;min-width:0}
  .f2 .container{grid-template-columns:1fr}
}
@media (max-width:600px){
  body{font-size:16px;line-height:25px}
  h1{font-size:34px;line-height:40px;letter-spacing:-.8px}
  .h2{font-size:32px;line-height:38px;letter-spacing:-.8px}
  .container{padding:0 16px}
  .campaigns{padding:22px}
  .cards4,.data-grid,.gi-grid,.how-grid,.roles,.values{grid-template-columns:1fr}
  .sdg-grid{grid-template-columns:repeat(3,1fr)}
  .goal span{font-size:11px;line-height:14px}
  .impact{padding-top:90px}
  .nav-btns .btn{padding:10px 16px}
  .f1 ul{flex-wrap:wrap;gap:16px}
  .prog h2{font-size:28px;line-height:34px}
  .council{padding:30px 22px}
  .page-hero{padding:50px 0}
}