:root{
  --ink:#1d2733; --muted:#6b7885; --accent:#0e6e4e; --accent-dark:#0a543c;
  --gold:#b98a1c; --bg:#f7f5ef; --card:#ffffff; --line:#e3ded0;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Segoe UI",Tahoma,"Noto Naskh Arabic","Traditional Arabic",serif;
  background:var(--bg);color:var(--ink);line-height:1.8}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.muted{color:var(--muted)}

.site-header{background:var(--accent-dark);color:#fff;position:sticky;top:0;z-index:10;
  box-shadow:0 2px 8px rgba(0,0,0,.18)}
.header-inner{max-width:900px;margin:0 auto;padding:.6rem 1rem;display:flex;
  align-items:center;justify-content:space-between;gap:1rem}
.brand{color:#fff;display:flex;align-items:center;gap:.6rem}
.brand:hover{text-decoration:none}
.brand-mark{font-size:1.7rem}
.brand-text{display:flex;flex-direction:column;line-height:1.25}
.brand-text strong{font-size:1.15rem;letter-spacing:.3px}
.brand-text small{opacity:.85;font-size:.78rem}
.donate-btn{background:var(--gold);color:#fff;font-weight:700;padding:.45rem 1rem;
  border-radius:999px;white-space:nowrap}
.donate-btn:hover{background:#a3781a;text-decoration:none}

main{max-width:900px;margin:0 auto;padding:1.2rem 1rem 2.5rem}

.hero{text-align:center;padding:2.2rem 0 .8rem}
.hero .emoji{font-size:4rem;line-height:1.2}
.hero h1{font-size:2.4rem;margin:.3rem 0;color:var(--accent-dark)}
.hero-sub{color:var(--muted);max-width:660px;margin:.4rem auto 1rem;font-size:1.08rem}

.badge{display:inline-block;border-radius:999px;padding:.25rem 1.1rem;font-weight:700;
  font-size:.95rem;margin:.2rem}
.badge-now{background:#e3f2e9;color:var(--accent-dark);border:1.5px solid var(--accent)}
.badge-future{background:#fdf3d7;color:#7a5c07;border:1.5px solid var(--gold)}

.card{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:1.1rem 1.4rem;margin:1rem 0}
.card h2{margin:.2rem 0 .6rem;color:var(--accent-dark);font-size:1.3rem}
.card ul{margin:.3rem 0;padding-inline-start:1.4rem}
.card li{margin:.25rem 0}

.status-line{text-align:center;margin:1.2rem 0 .2rem}

.family{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:1rem 1.4rem;margin:1.2rem 0;text-align:center}
.family h2{margin:.2rem 0 .6rem;color:var(--accent-dark);font-size:1.2rem}
.family-links{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:.5rem}
.family-links a{background:#f0ede2;border:1px solid var(--line);border-radius:999px;
  padding:.3rem 1rem;color:var(--ink)}
.family-links a:hover{border-color:var(--accent);text-decoration:none}

.planet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.8rem;margin-top:.8rem}
.planet-card{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:.9rem 1.1rem}
.planet-card h3{margin:.1rem 0 .4rem;color:var(--accent-dark)}

.free-note{text-align:center;background:linear-gradient(180deg,#fffdf4,#fdf6dd);
  border:1px solid #eadf9f;border-radius:12px;padding:1rem 1.4rem;margin:1.2rem 0}

.site-footer{border-top:1px solid var(--line);color:var(--muted);text-align:center;
  padding:1.2rem 1rem 2rem;font-size:.92rem}
@media (max-width:600px){
  .brand-text small{display:none}
  .hero h1{font-size:1.9rem}
}