@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&family=Tajawal:wght@400;500;700;800;900&display=swap');

:root {
  --background: 230 48% 7%;
  --foreground: 210 45% 96%;
  --primary: 190 100% 58%;
  --primary-foreground: 230 52% 6%;
  --secondary: 270 100% 66%;
  --secondary-foreground: 0 0% 100%;
  --muted: 226 24% 18%;
  --muted-foreground: 218 22% 72%;
  --destructive: 350 100% 64%;
  --destructive-foreground: 0 0% 100%;
  --border: 220 34% 24%;
  --card: 230 38% 10%;
  --shadow-sm: 0 8px 26px hsl(190 100% 58% / .12);
  --shadow-md: 0 18px 55px hsl(270 100% 66% / .16);
  --shadow-lg: 0 30px 90px hsl(190 100% 58% / .22);
  --transition-fast: 160ms ease;
  --transition-smooth: 420ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: .75rem;
  --radius-md: 1.25rem;
  --radius-lg: 2rem;
}

.dark {
  --background: 232 55% 5%;
  --foreground: 210 48% 97%;
  --primary: 188 100% 60%;
  --secondary: 275 100% 68%;
  --muted: 232 28% 16%;
  --destructive: 350 100% 64%;
  --border: 224 32% 22%;
  --card: 232 42% 9%;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  direction: rtl;
  font-family: 'Tajawal', 'Cairo', system-ui, sans-serif;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 18%, hsl(var(--primary) / .20), transparent 30%),
    radial-gradient(circle at 88% 12%, hsl(var(--secondary) / .18), transparent 28%),
    radial-gradient(circle at 50% 90%, hsl(220 100% 50% / .12), transparent 34%),
    linear-gradient(180deg, hsl(var(--background)), hsl(232 55% 4%));
  z-index: -3;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(hsl(var(--foreground) / .035) 1px, transparent 1px), linear-gradient(90deg, hsl(var(--foreground) / .035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at center, black, transparent 78%);
  z-index: -2;
}

button, a, input, textarea { font-family: inherit; }
input, textarea { font-size: max(16px, 1rem); }
button, a[role='button'] { min-height: 44px; }
::selection { background: hsl(var(--primary) / .35); color: white; }

.glass {
  background: linear-gradient(145deg, hsl(var(--card) / .78), hsl(var(--muted) / .34));
  border: 1px solid hsl(var(--border) / .8);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(18px);
}

.neon-text {
  text-shadow: 0 0 24px hsl(var(--primary) / .45), 0 0 48px hsl(var(--secondary) / .25);
}

.neon-border {
  box-shadow: inset 0 0 0 1px hsl(var(--primary) / .22), 0 0 34px hsl(var(--primary) / .12);
}

.card-3d {
  transform-style: preserve-3d;
  transition: transform var(--transition-smooth), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.card-3d:hover, .card-3d:focus-within {
  transform: perspective(900px) rotateX(4deg) rotateY(-5deg) translateY(-8px);
  border-color: hsl(var(--primary) / .7);
  box-shadow: var(--shadow-lg);
}

.mouse-glow {
  position: fixed;
  width: 420px;
  height: 420px;
  border-radius: 999px;
  pointer-events: none;
  background: radial-gradient(circle, hsl(var(--primary) / .18), hsl(var(--secondary) / .08), transparent 62%);
  filter: blur(10px);
  transform: translate(-50%, -50%);
  z-index: 0;
}

.section-pad { padding: 5rem 1rem; }
@media (min-width: 768px) { .section-pad { padding: 7rem 2rem; } }

.safe-bottom { padding-bottom: calc(.75rem + env(safe-area-inset-bottom)); }
.safe-top { padding-top: calc(.75rem + env(safe-area-inset-top)); }

.cyber-scan {
  position: relative;
  overflow: hidden;
}
.cyber-scan::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 42%;
  background: linear-gradient(180deg, transparent, hsl(var(--primary) / .13), transparent);
  animation: scan 5s linear infinite;
}

.loader-ring {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  border: 2px solid hsl(var(--primary) / .15);
  border-top-color: hsl(var(--primary));
  border-left-color: hsl(var(--secondary));
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}