:root{
  --bg: #0B1020;
  --ink: #0C1222;
  --paper: #F6F7FB;
  --paper2: #FFFFFF;
  --muted: rgba(12,18,34,.72);
  --muted2: rgba(255,255,255,.72);

  --a: #56F2B4;
  --b: #6EA8FF;
  --c: #FFB86B;

  --line: rgba(12,18,34,.12);
  --line2: rgba(255,255,255,.14);

  --shadow: 0 18px 55px rgba(12,18,34,.14);
  --radius: 22px;
  --max: 1140px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--ink);
  background: var(--paper);
}

.skip{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip:focus{
  left: 1rem; top: 1rem; width:auto; height:auto;
  padding:.75rem 1rem;
  background: var(--paper2);
  border: 1px solid var(--line);
  border-radius: 12px;
  z-index:9999;
}

.wrap{
  width:min(var(--max), calc(100% - 2rem));
  margin:0 auto;
}

.progress{
  position:fixed;
  top:0; left:0; right:0;
  height:3px;
  z-index:80;
  background: rgba(12,18,34,.06);
}
.progress__bar{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, var(--a), var(--b), var(--c));
}

/* Header */
.header{
  position:sticky;
  top:0;
  z-index:60;
  backdrop-filter: blur(14px);
  background: rgba(246,247,251,.72);
  border-bottom: 1px solid rgba(12,18,34,.08);
}
.header__inner{
  width:min(var(--max), calc(100% - 2rem));
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding: .85rem 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:.75rem;
  text-decoration:none;
  color:inherit;
  min-width: 250px;
}
.brand__mark{
  width:40px; height:40px;
  border-radius: 16px;
  background: radial-gradient(circle at 30% 30%, var(--a), rgba(110,168,255,.65) 55%, rgba(255,184,107,.55) 100%);
  box-shadow: 0 18px 45px rgba(12,18,34,.14);
}
.brand__text strong{
  display:block;
  letter-spacing:-.3px;
  font-size: 1.02rem;
}
.brand__text em{
  display:block;
  font-style:normal;
  color: var(--muted);
  font-size:.82rem;
  margin-top:.08rem;
}

.nav{
  display:none;
  align-items:center;
  gap:1.1rem;
}
.nav__link{
  color: rgba(12,18,34,.70);
  font-weight: 750;
  font-size:.93rem;
  text-decoration:none;
  position:relative;
  padding:.35rem 0;
}
.nav__link::after{
  content:"";
  position:absolute;
  left:0; bottom:-8px;
  width:0%;
  height:2px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--a), var(--b));
  transition: 220ms ease;
}
.nav__link:hover{ color: var(--ink); }
.nav__link.active::after{ width:100%; }

.nav__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.6rem .95rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(86,242,180,.35), rgba(110,168,255,.22));
  border: 1px solid rgba(12,18,34,.10);
  font-weight: 850;
  color: var(--ink);
  box-shadow: 0 14px 35px rgba(12,18,34,.10);
}

.menu{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.6rem .85rem;
  border-radius: 999px;
  border: 1px solid rgba(12,18,34,.12);
  background: rgba(255,255,255,.76);
  cursor:pointer;
  font-weight: 850;
}
.menu__icon{
  width:16px; height:12px;
  display:inline-block;
  position:relative;
}
.menu__icon::before,
.menu__icon::after{
  content:"";
  position:absolute; left:0; right:0;
  height:2px; border-radius:99px;
  background: rgba(12,18,34,.82);
}
.menu__icon::before{ top:0; box-shadow: 0 5px 0 rgba(12,18,34,.82), 0 10px 0 rgba(12,18,34,.82); }
.menu__text{ font-size:.92rem; }

.mobile{
  display:none;
  width:min(var(--max), calc(100% - 2rem));
  margin:0 auto;
  padding: .2rem 0 1rem;
}
.mobile__link{
  display:block;
  padding: .85rem .2rem;
  color: rgba(12,18,34,.72);
  font-weight: 800;
  border-bottom: 1px solid rgba(12,18,34,.08);
  text-decoration:none;
}
.mobile__link--cta{
  margin-top:.6rem;
  border-bottom:none;
  padding:.85rem .9rem;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(86,242,180,.30), rgba(110,168,255,.20));
}

/* Hero */
.hero{
  position:relative;
  overflow:hidden;
  padding: clamp(3rem, 7vw, 5.2rem) 0 3rem;
}
.hero__bg{
  position:absolute; inset:0;
  pointer-events:none;
}
.blob{
  position:absolute;
  width: 520px; height: 520px;
  border-radius: 999px;
  filter: blur(40px);
  opacity: .35;
  transform: translate3d(0,0,0);
  animation: floaty 10s ease-in-out infinite;
}
.blob--a{
  left:-120px; top:-140px;
  background: radial-gradient(circle at 30% 30%, rgba(86,242,180,.95), transparent 55%);
}
.blob--b{
  right:-160px; top:-120px;
  background: radial-gradient(circle at 30% 30%, rgba(110,168,255,.95), transparent 55%);
  animation-delay: -3s;
}
.grain{
  position:absolute; inset:0;
  opacity:.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

.hero__wrap{
  display:grid;
  gap: 2rem;
  align-items: start;
}
.eyebrow{
  margin:0 0 .6rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size:.78rem;
  color: rgba(12,18,34,.62);
}
.title{
  margin:0 0 .75rem;
  font-size: clamp(2.2rem, 5.4vw, 4rem);
  letter-spacing: -1.2px;
  line-height: 1.02;
}
.title__accent{
  background: linear-gradient(90deg, var(--a), var(--b));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}
.lead{
  margin:0;
  color: rgba(12,18,34,.76);
  font-size: 1.06rem;
  line-height: 1.65;
  max-width: 66ch;
}

.actions{
  display:flex;
  gap:.75rem;
  flex-wrap: wrap;
  margin-top: 1.2rem;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: .78rem 1.05rem;
  border-radius: 999px;
  font-weight: 900;
  text-decoration:none;
  border: 1px solid rgba(12,18,34,.12);
  transition: 180ms ease;
  box-shadow: 0 16px 40px rgba(12,18,34,.10);
}
.btn:hover{ transform: translateY(-1px); }
.btn--primary{
  background: linear-gradient(135deg, rgba(86,242,180,.40), rgba(110,168,255,.22));
  color: var(--ink);
}
.btn--ghost{
  background: rgba(255,255,255,.78);
  color: rgba(12,18,34,.84);
}

.signals{
  display:flex;
  flex-wrap: wrap;
  gap:.9rem;
  margin-top: 1.3rem;
  color: rgba(12,18,34,.66);
  font-weight: 800;
}
.signals__item{
  display:flex;
  align-items:center;
  gap:.55rem;
}
.signals__dot{
  width:10px; height:10px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--a), var(--b));
  box-shadow: 0 0 0 5px rgba(110,168,255,.14);
}

.photoStack{
  margin:0;
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
  position:relative;
  border: 1px solid rgba(255,255,255,.70);
}
.photoStack__img{
  width:100%;
  height: 380px;
  object-fit: cover;
  display:block;
}
.photoStack__cap{
  position:absolute;
  left:14px; bottom:14px;
  padding:.45rem .7rem;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(12,18,34,.10);
  color: rgba(12,18,34,.72);
  font-size:.85rem;
  font-weight: 850;
}

.microcopy{
  margin-top: 1rem;
  padding-left: .2rem;
  color: rgba(12,18,34,.70);
}
.microcopy p{ margin:.35rem 0; }

/* Sections */
.section{
  padding: clamp(2.8rem, 6vw, 4.5rem) 0;
}
.section--light{
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.35));
}
.section--tint{
  background:
    radial-gradient(900px 420px at 15% -10%, rgba(86,242,180,.18), transparent 60%),
    radial-gradient(900px 420px at 85% 0%, rgba(110,168,255,.14), transparent 60%),
    rgba(255,255,255,.30);
}
.section--dark{
  background: radial-gradient(900px 520px at 20% 0%, rgba(86,242,180,.22), transparent 60%),
              radial-gradient(900px 520px at 80% 10%, rgba(110,168,255,.18), transparent 60%),
              var(--bg);
  color: #EAF0FF;
}
.section__head{
  max-width: 72ch;
  margin-bottom: 1.6rem;
}
.h2{
  margin:0 0 .5rem;
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  letter-spacing:-.6px;
}
.h2--invert{ color:#F2F6FF; }
.subhead{
  margin:0;
  color: rgba(12,18,34,.72);
  line-height:1.65;
  font-size: 1.02rem;
}
.subhead--invert{ color: rgba(242,246,255,.78); }

.split{
  display:grid;
  gap: 1.5rem;
  align-items:start;
}
.split--wide{
  display:grid;
  gap: 1.8rem;
  align-items: start;
}
.copy p{
  margin:.65rem 0 1rem;
  color: rgba(12,18,34,.76);
  line-height:1.75;
}
.section--dark .copy p{ color: rgba(242,246,255,.80); }
.h3{
  margin: 1.1rem 0 .4rem;
  letter-spacing:-.3px;
}
.list{
  margin:.4rem 0 0;
  padding-left: 1.05rem;
  color: rgba(12,18,34,.76);
  line-height:1.75;
}
.section--dark .list{ color: rgba(242,246,255,.82); }

/* Media blocks */
.media{
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
  position:relative;
  border: 1px solid rgba(255,255,255,.75);
  background: rgba(255,255,255,.55);
}
.media__img{
  width:100%;
  height: 420px;
  object-fit: cover;
  display:block;
}
.media__tag{
  position:absolute;
  left:14px; bottom:14px;
  padding:.45rem .7rem;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(12,18,34,.10);
  color: rgba(12,18,34,.72);
  font-size:.85rem;
  font-weight: 850;
}

/* Timeline */
.timeline{
  display:grid;
  gap: .9rem;
  margin-top: 1.3rem;
}
.step{
  display:flex;
  gap: 1rem;
  align-items:flex-start;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(242,246,255,.10);
}
.step:last-child{ border-bottom:none; }
.step__num{
  font-weight: 950;
  letter-spacing: .08em;
  color: rgba(242,246,255,.62);
  min-width: 48px;
}
.step__title{
  margin:0 0 .2rem;
  letter-spacing:-.2px;
}
.step__text{
  margin:0;
  color: rgba(242,246,255,.78);
  line-height:1.65;
}

/* Banner image */
.banner{
  margin-top: 2rem;
  border-radius: calc(var(--radius) + 8px);
  overflow:hidden;
  position:relative;
  border: 1px solid rgba(242,246,255,.14);
  box-shadow: 0 22px 70px rgba(0,0,0,.35);
}
.banner img{
  width:100%;
  height: 340px;
  object-fit: cover;
  display:block;
  filter: saturate(1.04) contrast(1.02);
}
.banner__label{
  position:absolute;
  left:14px; bottom:14px;
  padding:.48rem .75rem;
  border-radius:999px;
  background: rgba(12,16,32,.58);
  border: 1px solid rgba(242,246,255,.18);
  color: rgba(242,246,255,.88);
  font-weight: 900;
  font-size:.86rem;
}

/* Metrics */
.metrics{
  display:grid;
  gap: 1.1rem;
  margin: 1.4rem 0 1.8rem;
}
.metric{
  padding: 1.2rem 0;
  border-bottom: 1px solid rgba(12,18,34,.10);
}
.metric:last-child{ border-bottom:none; }
.metric__big{
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  letter-spacing:-1px;
  font-weight: 950;
  background: linear-gradient(90deg, var(--a), var(--b));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}
.metric__label{
  margin-top:.25rem;
  color: rgba(12,18,34,.70);
  font-weight: 800;
}

/* People */
.people{
  display:grid;
  gap: 1rem;
  margin-top: 1.4rem;
}
.person{
  padding: 1rem 0;
  border-bottom: 1px solid rgba(12,18,34,.10);
}
.person:last-child{ border-bottom:none; }
.person__name{
  font-weight: 950;
  letter-spacing:-.2px;
}
.person__role{
  color: rgba(12,18,34,.70);
  font-weight: 850;
  margin-top:.15rem;
}
.person__blurb{
  color: rgba(12,18,34,.74);
  line-height:1.65;
  margin-top:.35rem;
}

.ctaBand{
  margin-top: 2.2rem;
  padding: 1.2rem 1.25rem;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(86,242,180,.24), rgba(110,168,255,.16));
  border: 1px solid rgba(12,18,34,.10);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.ctaBand__title{
  margin:0 0 .25rem;
  letter-spacing:-.3px;
}
.ctaBand__text{
  margin:0;
  color: rgba(12,18,34,.72);
  line-height:1.6;
}

/* FAQ */
.faq{
  display:grid;
  gap:.8rem;
  margin-top: 1.4rem;
}
.faq__item{
  border: 1px solid rgba(12,18,34,.10);
  border-radius: 16px;
  padding: .9rem 1rem;
  background: rgba(255,255,255,.72);
  box-shadow: 0 12px 40px rgba(12,18,34,.08);
}
.faq__item summary{
  cursor:pointer;
  font-weight: 900;
  color: rgba(12,18,34,.90);
}
.faq__item p{
  margin:.7rem 0 0;
  color: rgba(12,18,34,.76);
  line-height:1.7;
}

/* Donate */
.donate{
  display:grid;
  gap: 1.6rem;
  align-items:start;
  margin-top: 1.6rem;
}
.donate__form{
  border-radius: var(--radius);
  border: 1px solid rgba(242,246,255,.14);
  background: rgba(10,16,32,.55);
  box-shadow: 0 22px 70px rgba(0,0,0,.32);
  padding: 1.2rem 1.1rem;
}
.field{ display:grid; gap:.4rem; }
label{
  color: rgba(242,246,255,.78);
  font-weight: 850;
  font-size:.92rem;
}
input, select{
  padding: .85rem .9rem;
  border-radius: 14px;
  border: 1px solid rgba(242,246,255,.16);
  background: rgba(255,255,255,.08);
  color: rgba(242,246,255,.94);
  outline:none;
}
input:focus, select:focus{
  border-color: rgba(86,242,180,.55);
  box-shadow: 0 0 0 4px rgba(86,242,180,.18);
}
.row{
  display:grid;
  gap: .9rem;
}
.preset{
  display:flex;
  flex-wrap:wrap;
  gap: .55rem;
  margin: .95rem 0;
}
.preset button{
  cursor:pointer;
  border-radius: 999px;
  padding: .6rem .9rem;
  border: 1px solid rgba(242,246,255,.16);
  background: rgba(255,255,255,.08);
  color: rgba(242,246,255,.92);
  font-weight: 950;
}
.preset button:hover{
  background: rgba(255,255,255,.12);
}
.note{
  margin:.2rem 0 1rem;
  padding:.9rem 1rem;
  border-radius: 16px;
  border: 1px solid rgba(242,246,255,.14);
  background: rgba(110,168,255,.10);
  color: rgba(242,246,255,.84);
  line-height:1.6;
  font-weight: 750;
}

.btn--wide{ width:100%; padding:.9rem 1.05rem; justify-content:center; }
.formMsg{ margin-top:.8rem; color: rgba(242,246,255,.78); font-weight: 750; }
.fineprint{ margin:.8rem 0 0; color: rgba(242,246,255,.62); line-height:1.6; font-size:.92rem; }

.donate__media{
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid rgba(242,246,255,.14);
  box-shadow: 0 22px 70px rgba(0,0,0,.35);
  position:relative;
}
.donate__media img{
  width:100%;
  height: 420px;
  object-fit: cover;
  display:block;
}
.donate__tag{
  position:absolute;
  left:14px; bottom:14px;
  padding:.48rem .75rem;
  border-radius:999px;
  background: rgba(12,16,32,.58);
  border: 1px solid rgba(242,246,255,.18);
  color: rgba(242,246,255,.88);
  font-weight: 900;
  font-size:.86rem;
}

.end{
  margin-top: 2.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(242,246,255,.12);
  color: rgba(242,246,255,.72);
}
.end p{ margin:.35rem 0; }

/* Reveal animations */
.reveal{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 700ms ease, transform 700ms ease;
  will-change: opacity, transform;
}
.reveal.is-in{
  opacity: 1;
  transform: translateY(0);
}

/* Responsive */
@media (min-width: 960px){
  .nav{ display:flex; }
  .menu{ display:none; }
  .mobile{ display:none !important; }
  .hero__wrap{ grid-template-columns: 1.1fr .9fr; }
  .split{ grid-template-columns: 1.1fr .9fr; }
  .split--wide{ grid-template-columns: 1.1fr .9fr; }
  .metrics{ grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .metric{ border-bottom:none; padding:0; }
  .people{ grid-template-columns: repeat(2, 1fr); gap: 2.2rem; }
  .person{ border-bottom:none; }
  .donate{ grid-template-columns: 1.05fr .95fr; }
  .row{ grid-template-columns: 1fr 1fr; }
}

@keyframes floaty{
  0%,100%{ transform: translateY(0) translateX(0) scale(1); }
  50%{ transform: translateY(18px) translateX(10px) scale(1.02); }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .blob{ animation:none; }
  .reveal{ transition:none; }
}