:root{
  --navy:#0b1f3a;
  --gold:#f6d46b;
  --ink:#0f172a;
  --muted:#475569;
  --line:#e8edf5;
  --bg:#ffffff;
  --bg-soft:#fbfcff;
  --shadow:0 10px 30px rgba(2,8,23,.08);
  --radius:18px;
  --max:1100px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background:var(--bg);
  line-height:1.5;
}
img{max-width:100%;display:block}
a{color:inherit}

/* Layout */
.container{max-width:var(--max); margin:0 auto; padding:0 1.25rem;}
.section{padding:3.25rem 0;}
.section.soft{background:var(--bg-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.grid{display:grid; gap:1.25rem;}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width: 900px){
  .grid.two,.grid.three{grid-template-columns:1fr;}
}

/* Header */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding: .9rem 0; gap:1rem;}
.brand{display:flex; align-items:center; gap:.65rem; text-decoration:none;}
.brand-mark{
  width:40px;height:40px;border-radius:12px;
  display:grid; place-items:center;
  font-weight:900; letter-spacing:.5px;
  background:var(--navy); color:var(--gold);
}
.brand-name{font-weight:800; color:var(--navy); letter-spacing:.2px;}

.nav{display:flex; align-items:center; gap:.9rem;}
.nav a{font-weight:600; text-decoration:none; color:#1f2937; opacity:.92; padding:.35rem .4rem; border-radius:10px;}
.nav a:hover{background:#f1f5f9;}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.65rem 1rem; border-radius:999px; text-decoration:none; font-weight:700;
  border:1px solid transparent;
}
.btn.primary{background:var(--navy); color:white; box-shadow:var(--shadow);}
.btn.primary:hover{filter:brightness(1.05)}
.btn.donate{background:var(--gold); color:var(--navy);}
.btn.outline{border-color:#c7d1e0; background:transparent; color:var(--navy);}
.btn.outline:hover{background:#f8fafc;}

.hamburger{
  display:none;
  border:1px solid #cbd5e1;
  background:white;
  border-radius:12px;
  padding:.55rem .7rem;
  cursor:pointer;
}
.hamburger svg{width:20px;height:20px}

@media (max-width: 980px){
  .hamburger{display:inline-flex; align-items:center; justify-content:center;}
  .nav{display:none; position:absolute; right:1.25rem; top:72px; background:white; border:1px solid var(--line);
       border-radius:16px; padding:.65rem; flex-direction:column; align-items:stretch; min-width:240px; box-shadow:var(--shadow);}
  .nav.open{display:flex;}
  .nav a{padding:.6rem .75rem; width:100%;}
  .nav .btn{width:100%;}
}

/* Hero */
.hero{padding:4rem 0 2.5rem;}
.hero-inner{display:grid; grid-template-columns:1.2fr .8fr; gap:2rem; align-items:center;}
@media (max-width: 980px){
  .hero-inner{grid-template-columns:1fr;}
}
.kicker{display:inline-flex; align-items:center; gap:.55rem; font-weight:800; color:var(--navy);
  background:#eff6ff; border:1px solid #dbeafe; padding:.35rem .6rem; border-radius:999px; font-size:.9rem;}
.kicker .dot{width:8px;height:8px;border-radius:999px;background:var(--gold); display:inline-block;}

h1{font-size:3rem; line-height:1.05; margin:.9rem 0 1rem; letter-spacing:-.02em;}
@media (max-width: 520px){h1{font-size:2.25rem;}}
.lead{color:var(--muted); font-size:1.12rem; max-width:60ch;}
.hero-actions{display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1.25rem;}

.hero-card{
  border:1px solid var(--line);
  background:linear-gradient(180deg,#ffffff 0%, #fbfdff 100%);
  border-radius:var(--radius);
  padding:1.25rem;
  box-shadow:var(--shadow);
}
.hero-card h3{margin:.2rem 0 .25rem;}
.hero-card p{color:var(--muted); margin:.25rem 0 .9rem;}
.badges{display:flex; flex-wrap:wrap; gap:.5rem;}
.badge{font-weight:700; font-size:.88rem; padding:.35rem .55rem; border-radius:999px; background:#f1f5f9; border:1px solid #e2e8f0; color:#0f172a;}

/* Cards */
.card{border:1px solid var(--line); border-radius:var(--radius); background:white; padding:1.2rem; box-shadow:0 6px 20px rgba(2,8,23,.05);}
.card h3{margin:.15rem 0 .35rem;}
.card p{color:var(--muted); margin:.25rem 0 0;}
.icon{
  width:44px; height:44px; border-radius:14px;
  display:grid; place-items:center;
  background:#f8fafc; border:1px solid #e2e8f0;
  color:var(--navy);
}

/* Lists */
.checklist{margin:.75rem 0 0; padding:0; list-style:none;}
.checklist li{display:flex; gap:.6rem; margin:.55rem 0; color:var(--muted);}
.checklist li::before{content:"✓"; font-weight:900; color:var(--navy);}

/* Quote */
.quote{border-left:4px solid var(--gold); padding-left:1rem; color:#334155;}
.quote cite{display:block; color:var(--muted); margin-top:.35rem; font-style:normal;}

/* Footer */
.site-footer{background:var(--bg-soft); border-top:1px solid var(--line);}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:1.25rem; padding:2.5rem 0 1.25rem;}
.footer-grid h4,.footer-grid h5{margin:.1rem 0 .6rem;}
.footer-grid p{color:var(--muted); margin:.25rem 0 0;}
.footer-grid a{display:block; color:#334155; text-decoration:none; margin:.4rem 0;}
.footer-grid a:hover{text-decoration:underline;}
.footer-bottom{border-top:1px solid var(--line); padding:1.1rem 0; color:var(--muted); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;}

/* Forms */
form{display:grid; gap:.9rem;}
label{font-weight:700; font-size:.95rem;}
input,select,textarea{
  width:100%; padding:.75rem .85rem;
  border:1px solid #cbd5e1;
  border-radius:14px;
  font-size:1rem;
}
textarea{min-height:120px; resize:vertical;}
.helper{color:var(--muted); font-size:.92rem; margin-top:.25rem;}

/* Page header */
.pagehead{padding:2.5rem 0 1.25rem; border-bottom:1px solid var(--line); background:linear-gradient(180deg,#ffffff 0%, #fbfcff 100%);}
.pagehead h1{font-size:2.4rem; margin:.3rem 0 .4rem;}
.pagehead p{color:var(--muted); max-width:70ch; margin:0;}

/* Tiny utilities */
.small{font-size:.92rem; color:var(--muted);}
.pill{display:inline-block; padding:.2rem .55rem; border-radius:999px; border:1px solid #e2e8f0; background:#f8fafc; font-weight:700; color:#0f172a; font-size:.85rem;}
