@import "https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap";
:root{--color-bg:#fff;--color-text:#111827;--color-accent:gold}html{direction:rtl}body{background-color:var(--color-bg);color:var(--color-text);margin:0;font-family:Cairo,sans-serif}.container{max-width:1100px;margin:0 auto;padding:1rem}header{color:#fff;background:#000}header .topbar{justify-content:space-between;align-items:center;padding:1rem;display:flex}header nav a{color:#fff;margin-left:1rem;font-weight:600;text-decoration:none}header nav a:hover{color:var(--color-accent)}.hero{color:#fff;background:linear-gradient(90deg,#000 0%,#111 100%);border-radius:10px;margin:1rem 0;padding:3rem 1rem}.section{margin-bottom:3rem}.section-title{border-bottom:3px solid var(--color-accent);justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:.5rem;display:flex}.grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;display:grid}.card{background:#fff;border:1px solid #eee;border-radius:10px;transition:all .2s;overflow:hidden}.card:hover{transform:translateY(-4px);box-shadow:0 2px 8px #0000001a}.card img{object-fit:cover;width:100%;height:160px}.card h3{padding:.5rem 1rem;font-size:1.1rem}.card p{color:#555;padding:0 1rem 1rem;font-size:.9rem}footer{color:#fff;text-align:center;background:#000;padding:1rem}