/* SN for Generator — deep navy, orange spark and silver, like the logo */
:root{
  --bg:#0a1530; --bg-2:#0d1b3d; --surface:#11214a; --text:#eef2fa; --muted:#a3b3d2; --line:rgba(160,190,255,.16);
  --accent:#f28a1a; --accent-ink:#0a1530; --nav-bg:rgba(10,21,48,.9); --icon-bg:rgba(242,138,26,.14); --badge-bg:#fff;
  --display:"Saira","Noto Kufi Arabic",system-ui,sans-serif; --body:"Inter Tight","Noto Sans Arabic",system-ui,sans-serif;
  --radius:12px; --btn-radius:8px; --h-weight:800; --h-track:-.01em;
}
.hl{background:linear-gradient(90deg,#f9b233,#e85d0c);-webkit-background-clip:text;background-clip:text;color:transparent}
.btn-accent{background:linear-gradient(90deg,#f9b233,#e85d0c);color:#0a1530}
.hero h1{font-style:italic}
.grid-bg{position:absolute;inset:0;background:
  radial-gradient(45% 60% at 80% 40%,rgba(37,99,235,.35),transparent 70%),
  linear-gradient(rgba(160,190,255,.06) 1px,transparent 1px) 0 0/44px 44px,
  linear-gradient(90deg,rgba(160,190,255,.06) 1px,transparent 1px) 0 0/44px 44px;
  -webkit-mask-image:linear-gradient(#000 40%,transparent);mask-image:linear-gradient(#000 40%,transparent)}
.hero-logo{position:relative;animation:pulse 3.5s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(242,138,26,0),0 30px 60px -30px rgba(0,0,0,.6)}50%{box-shadow:0 0 0 10px rgba(242,138,26,.12),0 30px 60px -30px rgba(0,0,0,.6)}}
.card{border-top:3px solid var(--accent)}
.logo-text{font-style:italic}

[dir="rtl"] .hero h1{font-style:normal}