*{box-sizing:border-box}
:root{--primary:#0055FF;--ink:#0f172a;--muted:#6b7280;--bg:#ffffff;--card:#f3f4f6}
body{font-family:'Tajawal',system-ui,Arial,sans-serif;margin:0;background:var(--bg);color:var(--ink)}
.site-header{padding:48px 20px;text-align:center;background:linear-gradient(180deg,#e8f0ff,transparent)}
.logo{width:160px;max-width:50vw;height:auto;display:block;margin:0 auto 12px;border-radius:16px;box-shadow:0 6px 18px rgba(0,85,255,.18)}
h1{margin:8px 0 6px;font-weight:800;font-size:clamp(26px,5vw,38px);color:var(--ink)}
.tagline{margin:0 auto 16px;color:var(--muted);font-size:clamp(14px,3.6vw,18px);max-width:60ch}
.cta{display:inline-block;padding:12px 20px;background:var(--primary);color:#fff;text-decoration:none;border-radius:12px;font-weight:700;box-shadow:0 8px 20px rgba(0,85,255,.22)}
.cta:hover{transform:translateY(-1px)}
main{padding:32px 20px}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1100px;margin:0 auto}
@media(max-width:900px){.card-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.card-grid{grid-template-columns:1fr}}
.card{background:var(--card);padding:18px;border-radius:16px;box-shadow:0 10px 20px rgba(15,23,42,.06)}
.card h2{margin-top:0;font-size:20px}
.card p{margin:8px 0 0;color:var(--muted)}
.about{max-width:900px;margin:36px auto 0;background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:22px;box-shadow:0 8px 20px rgba(15,23,42,.04)}
.site-footer{margin-top:40px;padding:16px;text-align:center;color:#94a3b8;background:#f8fafc;border-top:1px solid #e5e7eb}