:root{
  --cream:#FBF6E8;
  --cream-deep:#F1E9D2;
  --teal:#7FAFA6;
  --teal-deep:#4E7A73;
  --teal-pale:#DCEAE7;
  --charcoal:#262420;
  --charcoal-2:#332F29;
  --ivory:#FBF6E8;
  --gold:#B8935B;
  --gold-deep:#8F6E3E;
  --muted:#8A8577;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Vazirmatn', sans-serif; background:var(--cream); color:var(--charcoal); line-height:1.9; overflow-x:hidden;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1100px; margin:0 auto; padding:0 32px;}
section{padding:110px 0;}
@media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms !important; transition-duration:.001ms !important;} }

.spark{display:inline-block; width:1em; height:1em; background:currentColor;
  clip-path: path('M50 0 C52 34 66 48 100 50 C66 52 52 66 50 100 C48 66 34 52 0 50 C34 48 48 34 50 0 Z');}
.spark-divider{display:flex; align-items:center; justify-content:center; gap:14px; margin:0 0 28px; color:var(--teal-deep);}
.spark-divider .line{width:44px; height:1px; background:var(--teal-deep); opacity:.35;}
.spark-divider .spark{width:16px; height:16px;}
.eyebrow{font-size:14px; font-weight:600; letter-spacing:.02em; color:var(--teal-deep); margin-bottom:14px; display:block;}

.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* nav */
nav{position:fixed; top:0; right:0; left:0; z-index:50; background:rgba(251,246,232,.85); backdrop-filter:blur(10px); border-bottom:1px solid rgba(38,36,32,.08); transition:padding .25s ease, box-shadow .25s ease;}
nav.scrolled{box-shadow:0 8px 24px rgba(38,36,32,.06);}
nav .wrap{display:flex; align-items:center; justify-content:space-between; padding-top:18px; padding-bottom:18px; transition:padding .25s ease;}
nav.scrolled .wrap{padding-top:12px; padding-bottom:12px;}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:18px; color:var(--charcoal);}
.brand .spark{color:var(--teal-deep); width:20px; height:20px;}
nav ul{display:flex; gap:34px; list-style:none; font-size:15px; font-weight:500;}
nav ul a{opacity:.75; transition:opacity .2s, color .2s; position:relative; padding-bottom:4px;}
nav ul a:hover{opacity:1;}
nav ul a.active{opacity:1; color:var(--teal-deep);}
nav ul a.active::after{content:''; position:absolute; bottom:-2px; right:0; left:0; height:2px; background:var(--teal-deep); border-radius:2px;}
.nav-cta{background:var(--charcoal); color:var(--ivory); padding:10px 22px; border-radius:100px; font-size:14px; font-weight:600; transition:transform .15s ease;}
.nav-cta:hover{transform:translateY(-2px);}

.nav-toggle{display:none; flex-direction:column; justify-content:center; gap:5px; width:34px; height:34px; background:none; border:none; cursor:pointer; padding:0; margin-inline-start:auto;}
.nav-toggle span{display:block; width:100%; height:2px; background:var(--charcoal); border-radius:2px; transition:transform .25s ease, opacity .25s ease;}
nav.menu-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
nav.menu-open .nav-toggle span:nth-child(2){opacity:0;}
nav.menu-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* hero + scroll-scrub video */
.hero{min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding-top:120px; position:relative; overflow:hidden;}
.hero canvas{position:absolute; inset:0; width:100%; height:100%; z-index:0;}
.hero video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
.hero::before{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(251,246,232,.55), rgba(251,246,232,.75)); z-index:0;}
.hero-content{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center;}
.hero-mark{width:74px; height:74px; color:var(--teal); margin-bottom:36px; animation:breathe 5s ease-in-out infinite;}
@keyframes breathe{0%,100%{transform:scale(1); opacity:.9;} 50%{transform:scale(1.08); opacity:1;}}
.hero h1{font-size:clamp(38px,6vw,64px); font-weight:800; letter-spacing:-.01em; max-width:820px; margin-bottom:24px;}
.hero h1 span{color:var(--teal-deep);}
.hero p{font-size:19px; color:var(--charcoal-2); opacity:.75; max-width:520px; margin-bottom:44px;}
.hero-ctas{display:flex; gap:16px; flex-wrap:wrap; justify-content:center;}
.btn{padding:15px 32px; border-radius:100px; font-size:15px; font-weight:600; display:inline-block; transition:transform .15s ease, box-shadow .2s ease;}
.btn:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(38,36,32,.12);}
.btn-primary{background:var(--teal-deep); color:var(--ivory);}
.btn-gold{background:var(--gold); color:var(--ivory);}
.btn-outline{border:1.5px solid var(--charcoal); color:var(--charcoal);}
.scroll-cue{position:absolute; bottom:36px; left:50%; transform:translateX(-50%); z-index:1; color:var(--teal-deep); opacity:.6; animation:bob 2.2s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translate(-50%,0);} 50%{transform:translate(-50%,8px);}}

/* page hero (non-home pages, shorter) */
.page-hero{padding:170px 0 60px; text-align:center; background:var(--cream-deep);}
.page-hero .eyebrow{display:flex; justify-content:center; gap:8px; align-items:center;}
.page-hero h1{font-size:clamp(30px,4.5vw,44px); font-weight:800; margin-top:10px;}

/* stats */
.stats{background:var(--charcoal); color:var(--ivory); padding:70px 0;}
.stats .wrap{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; text-align:center;}
.stat .num{font-size:clamp(34px,5vw,52px); font-weight:800; color:var(--teal); display:flex; justify-content:center; gap:2px;}
.stat .label{font-size:14px; opacity:.65; margin-top:8px;}

/* about */
.about{background:var(--cream-deep);}
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center;}
.about h2{font-size:32px; font-weight:700; margin-bottom:22px;}
.about p{color:var(--charcoal-2); opacity:.82; margin-bottom:16px; font-size:16px;}
.values{list-style:none; margin-top:28px; display:flex; flex-direction:column; gap:14px;}
.values li{display:flex; align-items:flex-start; gap:12px; font-size:15px; font-weight:500;}
.values .spark{color:var(--teal-deep); width:14px; height:14px; margin-top:6px; flex-shrink:0;}
.about-visual{aspect-ratio:1; border-radius:24px; background:var(--charcoal); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;}
.about-visual .spark{width:120px; height:120px; color:var(--teal);}
.about-visual::after{content:''; position:absolute; inset:0; background:radial-gradient(circle at 30% 20%, rgba(127,175,166,.25), transparent 55%);}

/* trust strip */
.trust{padding:80px 0;}
.trust-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:36px;}
.trust-item{display:flex; gap:16px; align-items:flex-start;}
.trust-item .spark{color:var(--teal-deep); width:26px; height:26px; flex-shrink:0; margin-top:4px;}
.trust-item h3{font-size:17px; font-weight:700; margin-bottom:6px;}
.trust-item p{font-size:14px; color:var(--charcoal-2); opacity:.75;}

/* projects */
.projects .head{text-align:center; margin-bottom:56px;}
.projects h2{font-size:32px; font-weight:700; margin-bottom:14px;}
.projects .sub{color:var(--charcoal-2); opacity:.75; max-width:480px; margin:0 auto;}
.project-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.project-card{background:var(--cream); border:1px solid rgba(38,36,32,.08); border-radius:20px; padding:30px; transition:border-color .2s, transform .2s, box-shadow .2s;}
.project-card:hover{border-color:var(--teal); transform:translateY(-6px); box-shadow:0 16px 32px rgba(38,36,32,.08);}
.project-card .tag{display:inline-block; background:var(--teal-pale); color:var(--teal-deep); font-size:12px; font-weight:600; padding:5px 12px; border-radius:100px; margin-bottom:18px;}
.project-card h3{font-size:18px; font-weight:700; margin-bottom:10px;}
.project-card p{font-size:14px; color:var(--charcoal-2); opacity:.75;}

/* testimonials */
.testi{background:var(--cream-deep);}
.testi .head{text-align:center; margin-bottom:50px;}
.testi h2{font-size:32px; font-weight:700;}
.testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.testi-card{background:var(--cream); border-radius:20px; padding:28px; border:1px solid rgba(38,36,32,.06);}
.testi-card .quote{font-size:15px; color:var(--charcoal-2); opacity:.85; margin-bottom:18px;}
.testi-card .who{font-size:13px; font-weight:700; color:var(--teal-deep);}

/* join */
.join{background:var(--charcoal); color:var(--ivory);}
.join .wrap{display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center;}
.join .eyebrow{color:var(--teal);}
.join h2{font-size:32px; font-weight:700; margin-bottom:20px;}
.join p{opacity:.7; margin-bottom:30px; font-size:16px;}
.roles{display:flex; flex-direction:column; gap:0;}
.role{display:flex; justify-content:space-between; align-items:center; padding:20px 0; border-bottom:1px solid rgba(251,246,232,.12); transition:padding-right .2s;}
.role:hover{padding-right:8px;}
.role:first-child{border-top:1px solid rgba(251,246,232,.12);}
.role .name{font-weight:600; font-size:16px;}
.role .loc{opacity:.55; font-size:13px; margin-top:4px;}
.role .arrow{color:var(--teal); font-size:20px;}

/* faq */
.faq .head{text-align:center; margin-bottom:50px;}
.faq h2{font-size:32px; font-weight:700;}
.faq-list{max-width:700px; margin:0 auto; display:flex; flex-direction:column; gap:12px;}
.faq-item{background:var(--cream-deep); border-radius:14px; overflow:hidden;}
.faq-q{display:flex; align-items:center; justify-content:space-between; padding:20px 22px; cursor:pointer; font-weight:600; font-size:15px;}
.faq-q .plus{color:var(--teal-deep); font-size:20px; transition:transform .25s ease; flex-shrink:0;}
.faq-item.open .plus{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease;}
.faq-a p{padding:0 22px 20px; font-size:14px; color:var(--charcoal-2); opacity:.8;}

/* donate / payment page */
.donate{background:var(--gold); color:var(--ivory); text-align:center; position:relative; overflow:hidden;}
.donate .spark-divider .line{background:rgba(251,246,232,.5);}
.donate .spark-divider .spark{color:var(--ivory);}
.donate h2{font-size:34px; font-weight:800; margin-bottom:18px;}
.donate p{max-width:520px; margin:0 auto 36px; opacity:.9; font-size:16px;}
.donate .btn-gold{background:var(--charcoal); color:var(--ivory);}
.amounts{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:30px;}
.amount-btn{background:rgba(251,246,232,.15); border:1.5px solid rgba(251,246,232,.4); color:var(--ivory); padding:14px 26px; border-radius:100px; font-weight:700; font-size:15px; cursor:pointer; transition:background .2s, transform .15s;}
.amount-btn:hover, .amount-btn.selected{background:var(--ivory); color:var(--gold-deep); transform:translateY(-2px);}
.custom-amount-wrap{display:none; justify-content:center; margin-bottom:26px;}
.custom-amount-wrap.show{display:flex;}
.custom-amount-wrap input{width:100%; max-width:280px; text-align:center; background:rgba(251,246,232,.15); border:1.5px solid rgba(251,246,232,.4); color:var(--ivory); padding:13px 18px; border-radius:100px; font-family:inherit; font-size:15px; font-weight:600;}
.custom-amount-wrap input::placeholder{color:rgba(251,246,232,.7);}
.pay-note{font-size:13px; opacity:.85; margin-top:14px; max-width:380px; margin-left:auto; margin-right:auto;}
.trust-row{display:flex; align-items:center; justify-content:center; gap:20px; margin-top:34px; flex-wrap:wrap;}
.trust-row .note{font-size:13px; opacity:.85; max-width:220px; text-align:right;}

/* contact */
.contact .wrap{display:grid; grid-template-columns:1fr 1fr; gap:70px;}
.contact h2{font-size:32px; font-weight:700; margin-bottom:18px;}
.contact p{color:var(--charcoal-2); opacity:.78; margin-bottom:30px;}
.contact-info{display:flex; flex-direction:column; gap:20px;}
.contact-info .item .label{font-size:13px; color:var(--muted); margin-bottom:4px;}
.contact-info .item .val{font-size:16px; font-weight:600;}
form{display:flex; flex-direction:column; gap:14px;}
form input, form textarea{background:var(--cream-deep); border:1px solid rgba(38,36,32,.1); border-radius:12px; padding:14px 16px; font-family:inherit; font-size:15px; color:var(--charcoal);}
form textarea{min-height:110px; resize:vertical;}
form button{border:none; cursor:pointer; font-family:inherit; background:var(--charcoal); color:var(--ivory); padding:15px; border-radius:12px; font-size:15px; font-weight:600; margin-top:6px; transition:transform .15s ease;}
form button:hover{transform:translateY(-2px);}
.form-note{font-size:13px; color:var(--teal-deep); opacity:0; height:0; overflow:hidden; transition:opacity .2s ease;}
.form-note.show{opacity:1; height:auto; margin-top:4px;}
.form-note.error{color:#B85C5C;}

/* footer */
footer{background:var(--charcoal); color:rgba(251,246,232,.6); padding:50px 0 34px; text-align:center;}
footer .spark{width:26px; height:26px; color:var(--teal); margin-bottom:16px;}
footer .foot-name{color:var(--ivory); font-weight:700; margin-bottom:6px;}
footer .foot-links{display:flex; gap:24px; justify-content:center; margin:20px 0; font-size:14px;}
.enamad-slot{display:flex; align-items:center; justify-content:center; margin:18px auto 6px;}
footer .copy{font-size:13px; opacity:.6; margin-top:14px;}

/* quick contact bubble */
.quick-contact{position:fixed; bottom:26px; left:26px; width:46px; height:46px; border-radius:50%; background:var(--teal-deep); color:var(--ivory); display:flex; align-items:center; justify-content:center; z-index:40; box-shadow:0 10px 22px rgba(38,36,32,.16); transition:transform .15s ease;}
.quick-contact:hover{transform:translateY(-3px);}
.quick-contact svg{width:20px; height:20px;}

/* back to top */
.to-top{position:fixed; bottom:88px; left:26px; width:46px; height:46px; border-radius:50%; background:var(--charcoal); color:var(--teal); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .25s ease, transform .15s ease; z-index:40;}
.to-top.show{opacity:1; pointer-events:auto;}
.to-top:hover{transform:translateY(-3px);}
.to-top .spark{width:16px; height:16px;}

@media(max-width:820px){
  .nav-toggle{display:flex;}
  nav ul{display:none; position:absolute; top:100%; right:0; left:0; flex-direction:column; gap:0; background:var(--cream); padding:6px 32px 18px; border-bottom:1px solid rgba(38,36,32,.08); box-shadow:0 14px 26px rgba(38,36,32,.08);}
  nav.menu-open ul{display:flex;}
  nav ul li{width:100%;}
  nav ul a{display:block; padding:14px 2px; border-bottom:1px solid rgba(38,36,32,.06);}
  nav ul a.active::after{display:none;}
  .about-grid, .join .wrap, .contact .wrap{grid-template-columns:1fr;}
  .project-grid, .testi-grid, .trust-grid{grid-template-columns:1fr;}
  .stats .wrap{grid-template-columns:1fr; gap:36px;}
  section{padding:70px 0;}
}