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

:root {
  --brand-red: #96151D;
  --brand-red-hover: #b81d24;
  --brand-red-light: rgba(150, 21, 29, 0.05);
  --brand-red-15: rgba(150, 21, 29, 0.15);
  --slate-50: #FAFAFA;
  --slate-100: #F3F4F6;
  --slate-200: #E5E7EB;
  --slate-300: #D1D5DB;
  --slate-700: #374151;
  --slate-800: #1F2937;
  --slate-900: #111827;
  --white: #FFFFFF;
}

* {
  box-sizing: border-box;
}

body {
  background-color: var(--white);
  color: var(--slate-900);
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

h1, h2, h3, h4, .brand, .display-font {
  font-family: 'Tajawal', sans-serif;
}

/* Custom Scrollbar for white clean layout */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--slate-50);
}
::-webkit-scrollbar-thumb {
  background: var(--slate-300);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--brand-red);
}

.radar-mark {
  position: relative;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid var(--slate-200);
}
.radar-mark .ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(150, 21, 29, 0.08);
}
.radar-mark .ring.r2 { inset: 18%; }
.radar-mark .ring.r3 { inset: 36%; }
.radar-mark .sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background: conic-gradient(from 0deg, rgba(150, 21, 29, 0.15), transparent 55%);
}
.radar-mark.is-animated .sweep {
  animation: radarspin 2.6s linear infinite;
}
.radar-mark .dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background: var(--brand-red);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px rgba(150, 21, 29, 0.4);
}
@keyframes radarspin {
  to { transform: rotate(360deg); }
}

.scan-laser {
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--brand-red), transparent);
  box-shadow: 0 0 8px var(--brand-red);
  animation: scanline 2.8s ease-in-out infinite;
  z-index: 5;
}
@keyframes scanline {
  0% { top: 0%; }
  50% { top: 100%; }
  100% { top: 0%; }
}

/* Glow buttons with premium feel */
.glow-btn {
  transition: all 0.3s ease;
  box-shadow: 0 4px 14px rgba(150, 21, 29, 0.15);
}
.glow-btn:hover {
  box-shadow: 0 6px 20px rgba(150, 21, 29, 0.3);
  transform: translateY(-2px);
}

.nav-blur {
  backdrop-filter: blur(12px);
  background-color: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid var(--slate-100);
}

.bg-radial-glow {
  background: radial-gradient(circle at 50% 50%, rgba(150, 21, 29, 0.03) 0%, transparent 70%);
}