:root{--brand:#0b5cab;--accent:#ff6a00;--bg:#f8fafc;--text:#111827}
*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;color:var(--text);background:var(--bg);line-height:1.7}
header{background:linear-gradient(90deg,var(--brand),#093b70);color:#fff;padding:12px 0}
.container{max-width:1120px;margin:0 auto;padding:0 16px}
nav ul{list-style:none;display:flex;gap:16px;margin:0;padding:0;flex-wrap:wrap}
nav a{color:white;text-decoration:none;font-weight:600}
.logo{font-weight:800;font-size:20px}
.hero{padding:48px 0;text-align:center;background:#fff}
.hero h1{margin:0 0 8px;font-size:30px}.hero p{margin:0 0 16px;color:#374151}
input[type=search]{padding:10px 12px;border:1px solid #d1d5db;border-radius:8px;min-width:260px}
button{padding:10px 14px;border:none;border-radius:8px;background:var(--accent);color:white;font-weight:700;cursor:pointer}
.section{padding:28px 0}.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.card{background:white;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;padding:12px}
.card h3{margin:0 0 6px}.card p{margin:0;color:#374151}
footer{background:#0f172a;color:white;padding:16px 0;margin-top:24px}
.rtl{direction:rtl}