:root{ --radius:1rem }
html{ scroll-behavior:smooth }
body{ font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif }
.hero{ position:relative; background:linear-gradient(180deg,#f8f9ff,transparent) }
.hero-img{ border-radius:var(--radius); object-fit:cover }
.hero-bg{ position:absolute; inset:-10% 0 0; background:radial-gradient(60% 50% at 10% 10%, #e6f0ff 0%, transparent 60%),radial-gradient(60% 60% at 90% 10%, #fff3e6 0%, transparent 60%); z-index:1 }
section{ scroll-margin-top:90px }
.badge{ border-radius:999px; padding:0.5rem 0.75rem }
.card{ border-radius:calc(var(--radius) + .25rem) }
#projects_list .card-img-top{ height:180px; object-fit:cover }

/* RTL support */
[dir="rtl"] body{ font-family:"Tajawal","Cairo",system-ui,sans-serif }
[dir="rtl"] .hero .list-inline{ padding-right:0 }

/* Subtle hover */
.card.hover{ transition:transform .25s ease, box-shadow .25s ease }
.card.hover:hover{ transform:translateY(-4px); box-shadow:0 10px 30px rgba(0,0,0,.06) }

/* Accessibility */
a:focus-visible, button:focus-visible, select:focus-visible{ outline:2px solid #0d6efd; outline-offset:2px }

/* Small tweaks */
.projects-filter input::placeholder{ opacity:.6 }