:root{
  --bg:#0e1013;
  --panel:#14181e;
  --muted:#a9b0bb;
  --text:#e8edf2;
  --accent:#66e0c2;
  --accent-2:#a882ff;
  --card:#11151b;
  --border:#222a34;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  color:var(--text);
  background:linear-gradient(180deg, #0c0f13 0%, #0e1013 100%);
  line-height:1.65;
}

a{ color:var(--accent); text-decoration:none; }
a:hover{ opacity:.9; }

.container{ width:min(1100px, 92%); margin-inline:auto; }
.mt{ margin-top:1.25rem; }
.muted{ color:var(--muted); }
.muted.sm{ font-size:.95rem; }

.site-header{
  position:sticky; top:0; z-index:40;
  backdrop-filter:saturate(140%) blur(12px);
  background:rgba(14,16,19,.6);
  border-bottom:1px solid var(--border);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.9rem 4vw;
}
.logo{ font-weight:800; letter-spacing:.5px; color:#fff; }
.logo span{ color:var(--accent); }
.links{ display:flex; gap:1rem; }
.links a{ color:#cfd6df; padding:.4rem .6rem; border-radius:.5rem; }
.links .pill{ background:var(--panel); border:1px solid var(--border); }

.hero{
  padding:8rem 0 5rem;
  background:
    radial-gradient(1000px 400px at 10% -20%, rgba(102,224,194,.12), transparent 60%),
    radial-gradient(800px 300px at 100% 0%, rgba(168,130,255,.13), transparent 60%);
  border-bottom:1px solid var(--border);
}
.hero-inner{ width:min(1000px, 92%); margin-inline:auto; }
.eyebrow{ color:var(--accent); text-transform:uppercase; letter-spacing:.12em; font-weight:700; font-size:.85rem; }
h1{ font-size:clamp(2rem, 3.8vw + 1rem, 3.2rem); margin:.4rem 0 1rem; }
.lead{ color:#cfd6df; font-size:1.15rem; max-width:65ch; }
.accent{ background:linear-gradient(90deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }

.cta{ display:flex; gap:.8rem; margin-top:1.5rem; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.7rem 1rem; border-radius:.6rem; font-weight:600; color:#0b0e12;
  background:linear-gradient(180deg, var(--accent), #58c9b0);
  box-shadow:0 10px 28px rgba(88,201,176,.25);
}
.btn.ghost{
  background:transparent; color:var(--text);
  border:1px solid var(--border); box-shadow:none;
}

.section{ padding:4rem 0; }
.section.alt{ background:var(--panel); border-block:1px solid var(--border); }

h2{ font-size:1.8rem; margin:0 0 1rem; }
h3{ margin:0 0 .5rem; }

.grid{ display:grid; gap:1rem; }
.grid.three{ grid-template-columns:repeat(3, minmax(0,1fr)); }
@media (max-width: 900px){
  .grid.three{ grid-template-columns:1fr; }
}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:1rem 1.1rem;
}
.card ul{ margin:.4rem 0 0 1rem; padding:0; }
.card li{ margin:.2rem 0; }

.bullets{ margin:.6rem 0 0 1rem; }
.bullets li{ margin:.35rem 0; }

.project{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:1rem 1.1rem;
}
.project p{ color:#cbd3dd; }
.project-link{ display:inline-block; margin-top:.4rem; }

.hadith{
  margin:1.2rem 0 0;
  padding:1rem 1.1rem;
  border-left:4px solid var(--accent);
  background:rgba(102,224,194,.06);
  border-radius:10px;
}
.hadith .stars{ color:#ffd88d; margin-right:.5rem; }
.hadith .source{ display:block; color:var(--muted); margin-top:.4rem; font-size:.95rem; }

.contact-ways{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1rem; }

.site-footer{
  border-top:1px solid var(--border);
  background:var(--panel);
}
.foot{ padding:1.1rem 0; display:flex; align-items:center; justify-content:space-between; color:var(--muted); }