@import url('https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400;500;600;700&family=Noto+Sans+Arabic:wght@300;400;500;700&display=swap');

:root{
  --bg:#020617;
  --bg-2:#0b1020;
  --primary:#0F172A;
  --secondary:#1E293B;
  --muted:#1A1E2F;
  --surface:rgba(255,255,255,.05);
  --surface-2:rgba(255,255,255,.08);
  --border:rgba(255,255,255,.10);
  --border-strong:rgba(255,255,255,.20);
  --text:#F8FAFC;
  --text-muted:#9AA6BF;
  --accent:#22C55E;
  --accent-2:#38BDF8;
  --accent-3:#A78BFA;
  --warning:#FBBF24;
  --danger:#EF4444;
  --grad:linear-gradient(135deg,#22C55E,#38BDF8);
  --grad-3:linear-gradient(135deg,#22C55E,#38BDF8 55%,#A78BFA);
  --radius-sm:10px;
  --radius:16px;
  --radius-lg:24px;
  --shadow:0 8px 32px rgba(2,6,23,.55);
  --shadow-lg:0 24px 70px rgba(2,6,23,.7);
  --glow:0 0 0 1px rgba(34,197,94,.25),0 12px 40px rgba(34,197,94,.18);
  --icon-sm:16px; --icon-md:20px; --icon-lg:26px;
  --font-head:'Noto Naskh Arabic',ui-serif,serif;
  --font-body:'Noto Sans Arabic',ui-sans-serif,system-ui,sans-serif;
  --nav-h:66px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  min-height:100dvh;background:var(--bg);color:var(--text);
  font-family:var(--font-body);font-weight:400;line-height:1.75;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:700;line-height:1.35;letter-spacing:-.01em}
h1{font-size:clamp(1.9rem,4.6vw,3.1rem)}
h2{font-size:clamp(1.4rem,3vw,2.1rem)}
h3{font-size:clamp(1.05rem,2vw,1.35rem)}
p{color:var(--text-muted)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none !important}
.lucide{width:var(--icon-md);height:var(--icon-md);stroke-width:1.75}

/* ambient background */
.bg-glow{position:fixed;inset:0;pointer-events:none;z-index:0}
.bg-glow::before{
  content:"";position:absolute;inset:-30% -20% auto -20%;height:80vh;
  background:radial-gradient(ellipse at 50% 0%,rgba(56,189,248,.28),transparent 62%);
}
.bg-glow::after{
  content:"";position:absolute;inset:auto -15% -30% -15%;height:70vh;
  background:radial-gradient(ellipse at 50% 100%,rgba(34,197,94,.20),transparent 62%);
}