/* ============================================
   THE ILANZI FOUNDATION — design system
   "Ilanzi" means Light. The visual language is bright
   and pastel: white and soft lavender-purple as the
   base, with pastel green and pastel yellow accents —
   echoing the founder's own words: light carried forward.
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --ink: #F1E7FF;         /* pastel lavender — replaces dark panels */
  --ink-2: #F8F2FF;       /* lighter pastel panel */
  --ink-3: #E3D0FA;       /* pastel border on panels */
  --cream: #FFFFFF;       /* clean white */
  --cream-2: #FFF8DE;     /* soft pastel yellow-white for cards */
  --parchment-line: #E7D6FA; /* borders/rules on light */
  --copper: #B48CFF;      /* the light — primary accent, pastel purple */
  --copper-dark: #7C4FE0;
  --ember: #FDE68A;       /* pastel yellow glow highlight */
  --gold-text: #92650B;   /* readable warm gold for yellow-branded text */
  --forest: #9AF0C4;      /* pastel green */
  --forest-2: #C6F7DD;    /* lighter pastel green for accents/gradients */
  --ink-text: #2E2148;    /* deep plum, body text on white/pastel */
  --muted: #7A6D96;
  --muted-on-dark: #5F5280;

  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Inter', system-ui, sans-serif;

  --max: 1160px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink-text);
  background:var(--cream);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(31,16,53,0.05) 1px, transparent 0);
  background-size:22px 22px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}

/* thin gold ornamental divider used between rich sections */
.divider{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin:0; padding:0;
}
.divider::before, .divider::after{
  content:""; height:1px; width:64px;
  background:linear-gradient(90deg, transparent, var(--copper), transparent);
}
.divider .dot{
  width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%, var(--ember), var(--copper) 70%);
}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:var(--serif);margin:0 0 .5em;font-weight:600;letter-spacing:-0.01em;}
p{margin:0 0 1em;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

/* ---------- utility ---------- */
.eyebrow{
  font-family:var(--sans);
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--copper-dark);
  margin-bottom:0.9em;
  display:inline-block;
}
.on-dark .eyebrow{color:var(--copper-dark);}
.photo-hero .eyebrow{color:var(--ember);}

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 26px;
  border-radius:999px;
  font-family:var(--sans);
  font-weight:700;
  font-size:0.96rem;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:focus-visible{outline:3px solid var(--ember); outline-offset:3px;}
.btn:hover{transform:translateY(-1px);}

.btn-donate{
  background:linear-gradient(135deg,#C7A9FF,#A374F7);
  color:#2E2148;
  box-shadow:0 6px 20px rgba(139,92,246,0.35);
}
.btn-donate:hover{box-shadow:0 8px 26px rgba(139,92,246,0.45);}

.btn-outline-dark{
  border-color:rgba(255,255,255,0.35);
  color:#fff;
  background:transparent;
}
.btn-outline-dark:hover{background:rgba(255,255,255,0.08);}

.btn-outline-light{
  border-color:rgba(20,20,30,0.25);
  color:var(--ink-text);
  background:transparent;
}
.btn-outline-light:hover{background:rgba(20,20,30,0.05);}

.btn-forest{
  background:var(--forest);
  color:var(--ink-text);
}
.btn-forest:hover{background:var(--forest-2);}

/* ---------- nav ---------- */
.site-nav{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,0.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(46,33,72,0.08);
}
.nav-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:16px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--serif);
  font-weight:600;
  font-size:1.15rem;
  color:var(--ink-text);
}
.brand .glow-dot{
  width:11px;height:11px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #FFF3C4, var(--copper) 60%, var(--copper-dark) 100%);
  box-shadow:0 0 10px 2px rgba(139,92,246,0.45);
  flex:none;
}
.nav-links{
  display:flex;
  align-items:center;
  gap:28px;
  font-size:0.94rem;
  font-weight:500;
  color:var(--muted);
}
.nav-links a{transition:color .15s ease;}
.nav-links a:hover{color:var(--copper-dark);}
.nav-links a.current{color:var(--ink-text); border-bottom:2px solid var(--copper);}
.nav-cta{margin-left:6px;}
.nav-toggle{display:none;}

@media (max-width:760px){
  .nav-links{
    position:fixed; top:64px; left:0; right:0;
    background:var(--ink-2);
    flex-direction:column;
    align-items:flex-start;
    padding:20px 28px 28px;
    gap:16px;
    transform:translateY(-8px);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
    border-bottom:1px solid rgba(46,33,72,0.08);
    box-shadow:0 12px 24px rgba(90,60,150,0.1);
  }
  .nav-links.open{opacity:1; transform:translateY(0); pointer-events:auto;}
  .nav-cta{margin-left:0;}
  .nav-toggle{
    display:block;
    background:none;border:none;color:var(--ink-text);font-size:1.6rem;cursor:pointer;
    line-height:1;
  }
}

/* ---------- full-bleed photo hero (founder photo, color-graded to brand) ---------- */
.photo-hero{
  position:relative;
  min-height:640px;
  display:flex;
  align-items:flex-end;
  color:#fff;
  overflow:hidden;
  background:var(--ink);
}
.photo-hero img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 15%;
  filter:saturate(1.05) contrast(1.05);
}
.photo-hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(0deg, rgba(46,33,72,0.78) 10%, rgba(46,33,72,0.4) 55%, rgba(46,33,72,0.22) 100%),
    linear-gradient(100deg, rgba(46,33,72,0.4) 0%, rgba(46,33,72,0.12) 45%, transparent 70%);
  z-index:1;
}
.photo-hero::after{
  content:"";
  position:absolute; inset:auto -10% -20% -10%;
  height:55%;
  background:
    radial-gradient(55% 70% at 35% 100%, rgba(139,92,246,0.4), transparent 70%),
    radial-gradient(40% 50% at 80% 0%, rgba(253,230,138,0.3), transparent 70%);
  z-index:1;
}
.photo-hero .wrap{position:relative; z-index:2; padding-bottom:64px; padding-top:64px;}
@media (max-width:700px){
  .photo-hero{min-height:520px;}
}

/* ---------- tasteful placeholder gallery for future field photos ---------- */
.field-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;
  margin-top:32px;
}
.field-card{
  position:relative;
  border-radius:18px;
  min-height:230px;
  padding:22px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
  color:var(--ink-text);
}
.field-card.grad-1{background:linear-gradient(150deg,#B8F0D2,#E6D9FA);}
.field-card.grad-2{background:linear-gradient(150deg,#D9C2FF,#FFF3C4);}
.field-card.grad-3{background:linear-gradient(150deg,#FDE9A8,#BEF0D1);}
.field-card::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(60% 60% at 70% 20%, rgba(196,181,253,0.28), transparent 70%);
}
.field-card img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 30%;
  z-index:0;
}
.field-card.has-photo::before{
  background:linear-gradient(180deg, rgba(46,33,72,0.05) 0%, rgba(46,33,72,0.78) 80%);
}
.field-card.has-photo, .field-card.has-photo h4, .field-card.has-photo p{color:#fff;}
.field-card .icon{
  position:relative; z-index:1;
  width:46px;height:46px;
  border-radius:50%;
  background:rgba(46,33,72,0.08);
  border:1px solid rgba(46,33,72,0.18);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:14px;
}
.field-card.has-photo .icon{
  background:rgba(255,255,255,0.15);
  border:1px solid rgba(255,255,255,0.35);
}
.field-card h4{position:relative; z-index:1; color:inherit; font-size:1.05rem; margin-bottom:0.25em;}
.field-card p{position:relative; z-index:1; color:inherit; font-size:0.86rem; margin-bottom:0; opacity:0.82;}

/* ---------- glow hero backdrop ---------- */
.glow-bg{
  position:relative;
  background:var(--ink);
  color:var(--ink-text);
  overflow:hidden;
}
.glow-bg::before{
  content:"";
  position:absolute;
  inset:-20% -10% auto -10%;
  height:130%;
  background:
    radial-gradient(60% 60% at 50% 20%, rgba(139,92,246,0.22), transparent 70%),
    radial-gradient(35% 45% at 80% 0%, rgba(253,230,138,0.4), transparent 70%);
  pointer-events:none;
}
.glow-pulse::before{
  animation:pulseGlow 8s ease-in-out infinite;
}
@keyframes pulseGlow{
  0%,100%{opacity:1;}
  50%{opacity:0.75;}
}

/* ---------- sections ---------- */
section{padding:88px 0;}
.section-tight{padding:56px 0;}
.on-dark{background:var(--ink); color:var(--ink-text);}
.on-cream2{background:linear-gradient(180deg,var(--cream-2),var(--cream));}

.grid-2{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:56px;
  align-items:center;
}
@media (max-width:820px){
  .grid-2{grid-template-columns:1fr;}
}

.lede{
  font-size:1.2rem;
  color:var(--muted);
  max-width:640px;
}
.on-dark .lede{color:var(--muted);}
.photo-hero .lede{color:rgba(255,255,255,0.88);}

/* founder photo frame */
.founder-frame{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  max-width:380px;
}
.founder-frame::after{
  content:"";
  position:absolute; inset:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.15);
  border-radius:18px;
  pointer-events:none;
}
.founder-frame img{border-radius:18px;}
.founder-glow{
  position:absolute; inset:-30px;
  background:radial-gradient(circle at 50% 30%, rgba(139,92,246,0.55), transparent 65%);
  filter:blur(10px);
  z-index:-1;
}

/* impact area cards */
.impact-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:22px;
  margin-top:36px;
}
.impact-card{
  background:linear-gradient(160deg,#FFFFFF,#F3ECFB);
  border:1px solid var(--parchment-line);
  border-radius:16px;
  padding:28px 24px;
  position:relative;
  box-shadow:0 10px 26px rgba(90,60,150,0.1);
}
.impact-card .mark{
  width:34px;height:34px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%, var(--ember), var(--copper) 65%);
  margin-bottom:16px;
  box-shadow:0 0 0 6px rgba(139,92,246,0.09);
}
.impact-card h3{font-size:1.12rem;margin-bottom:0.4em;}
.impact-card p{color:var(--muted); font-size:0.96rem; margin-bottom:0;}

/* value / pillar list */
.pillars{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:14px;
  margin-top:28px;
}
.pillar{
  padding:16px 18px;
  border-radius:12px;
  background:rgba(46,33,72,0.05);
  border:1px solid rgba(46,33,72,0.12);
  font-family:var(--serif);
  font-size:1.05rem;
}

/* impact area detail (impact page) */
.area{
  border-top:1px solid var(--parchment-line);
  padding:56px 0;
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:48px;
}
.area:first-of-type{border-top:none;}
@media (max-width:820px){
  .area{grid-template-columns:1fr; gap:20px;}
}
.area h3{font-size:1.55rem;}
.area .tagline{
  font-family:var(--serif);
  font-style:italic;
  color:var(--copper-dark);
  font-size:1.1rem;
  margin-bottom:0.6em;
}
.example-list{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  padding:0;
  margin:18px 0 0;
  list-style:none;
}
.example-list li{
  background:linear-gradient(160deg,#FFFFFF,#F0E6FA);
  border:1px solid var(--parchment-line);
  border-radius:999px;
  padding:7px 14px;
  font-size:0.86rem;
  color:var(--ink-text);
  font-weight:500;
}

/* milestone / timeline (honest founding-story framing, not fabricated stats) */
.timeline{
  position:relative;
  margin-top:44px;
  padding-left:28px;
  border-left:2px solid var(--parchment-line);
}
.timeline .stop{position:relative; padding-bottom:40px;}
.timeline .stop:last-child{padding-bottom:0;}
.timeline .stop::before{
  content:"";
  position:absolute; left:-34px; top:4px;
  width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%, var(--ember), var(--copper) 65%);
  box-shadow:0 0 0 5px var(--cream);
}
.timeline h4{margin-bottom:0.25em; font-size:1.08rem;}
.timeline .when{
  font-size:0.8rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--copper-dark); font-weight:700;
}

/* donate tiers */
.tiers{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:20px;
  margin-top:8px;
}
.tier{
  background:var(--ink-2);
  border:1px solid var(--ink-3);
  border-radius:18px;
  padding:28px 24px;
  color:var(--ink-text);
}
.tier .amt{
  font-family:var(--serif);
  font-size:2.1rem;
  color:var(--gold-text);
}
.tier p{color:var(--muted-on-dark); font-size:0.95rem; margin-bottom:0;}
.tier-note{
  font-size:0.78rem;
  color:var(--muted-on-dark);
  margin-top:28px;
}

/* payment methods */
.pay-methods{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:24px;
}
.pay-btn{
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 20px;
  border-radius:12px;
  background:linear-gradient(160deg,#FFFFFF,#F0E6FA);
  border:1px solid var(--parchment-line);
  font-weight:600;
  font-size:0.94rem;
  color:var(--ink-text);
  transition:border-color .15s ease, transform .15s ease;
  box-shadow:0 6px 16px rgba(90,60,150,0.08);
}
.pay-btn:hover{border-color:var(--copper); transform:translateY(-1px);}
.pay-btn svg{flex:none;}

/* ways to help */
.ways-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;
  margin-top:36px;
}
.way-card{
  border-radius:16px;
  padding:26px 22px;
  background:var(--ink-2);
  border:1px solid var(--ink-3);
}
.way-card h3{font-size:1.1rem;color:var(--ink-text);}
.way-card p{color:var(--muted-on-dark); font-size:0.92rem;}
.way-card a{
  font-weight:700;
  color:var(--copper-dark);
  font-size:0.9rem;
  display:inline-block;
  margin-top:8px;
}

/* newsletter */
.newsletter{
  background:linear-gradient(135deg,var(--forest),var(--forest-2));
  color:var(--ink-text);
  border-radius:22px;
  padding:44px 40px;
  display:flex;
  flex-wrap:wrap;
  gap:28px;
  align-items:center;
  justify-content:space-between;
}
.newsletter h3{color:var(--ink-text); margin-bottom:0.3em;}
.newsletter p{color:#3F5A4C; margin-bottom:0;}
.nl-form{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  flex:1;
  min-width:280px;
  max-width:420px;
}
.nl-form input{
  flex:1;
  padding:13px 16px;
  border-radius:999px;
  border:1.5px solid rgba(46,33,72,0.25);
  background:rgba(255,255,255,0.65);
  color:var(--ink-text);
  font-family:var(--sans);
  font-size:0.94rem;
  min-width:180px;
}
.nl-form input::placeholder{color:#5F7A6C;}
.nl-form input:focus-visible{outline:2px solid var(--gold-text);}
.nl-note{width:100%; font-size:0.78rem; color:#3F5A4C; margin-top:6px;}

/* contact / about page */
.contact-card{
  background:linear-gradient(160deg,#FFFFFF,#F3ECFB);
  border:1px solid var(--parchment-line);
  border-radius:18px;
  padding:32px;
  box-shadow:0 12px 28px rgba(90,60,150,0.1);
}
.contact-row{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:14px 0;
  border-bottom:1px solid var(--parchment-line);
}
.contact-row:last-child{border-bottom:none;}
.contact-row .lbl{
  font-size:0.78rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--copper-dark);
  font-weight:700;
  width:110px;
  flex:none;
}
.social-row{display:flex; gap:12px; margin-top:8px;}
.social-icon{
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--cream-2);
  border:1px solid var(--parchment-line);
  transition:background .15s ease;
}
.social-icon:hover{background:var(--copper); color:#fff;}

form.reach-form{display:flex; flex-direction:column; gap:14px;}
form.reach-form label{font-size:0.85rem; font-weight:600; color:var(--ink-text);}
form.reach-form input, form.reach-form textarea{
  padding:12px 14px;
  border-radius:10px;
  border:1.5px solid var(--parchment-line);
  font-family:var(--sans);
  font-size:0.95rem;
  background:#FAF7FE;
}
form.reach-form input:focus-visible, form.reach-form textarea:focus-visible{outline:2px solid var(--copper);}

/* footer */
footer{
  background:var(--ink);
  color:var(--muted);
  padding:56px 0 28px;
  font-size:0.9rem;
  border-top:1px solid var(--parchment-line);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:36px;
  padding-bottom:34px;
  border-bottom:1px solid rgba(46,33,72,0.12);
}
@media (max-width:700px){
  .footer-grid{grid-template-columns:1fr;}
}
footer h4{color:var(--ink-text); font-size:0.95rem; font-family:var(--sans); font-weight:700; margin-bottom:14px;}
footer a{color:var(--muted); transition:color .15s ease;}
footer a:hover{color:var(--copper-dark);}
footer .flinks{display:flex; flex-direction:column; gap:9px;}
.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:space-between;
  padding-top:22px;
  font-size:0.82rem;
  color:var(--muted);
}
.footer-bottom a{color:var(--muted);}

/* misc */
.center{text-align:center;}
.mt0{margin-top:0;}
.max-60{max-width:640px; margin-left:auto; margin-right:auto;}
.hero-pad{padding:120px 0 100px;}
@media (max-width:600px){
  .hero-pad{padding:80px 0 64px;}
  section{padding:64px 0;}
}
h1{font-size:clamp(2.2rem, 5vw, 3.4rem); line-height:1.08;}
h2{font-size:clamp(1.7rem, 3.2vw, 2.3rem);}