/* ==========================================================================
   ItqanWare / إتقان وير — Master Brand Design System V2.0
   Palette: Deep Itqan Navy (#061B40) + Royal Blue (#0868E8) + Gold (#DDAE59)
   Font System: Cairo (Arabic) + Plus Jakarta Sans (English) + IBM Plex Mono (Technical)
   ========================================================================== */

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

:root {
  --brand-navy: #061B40;
  --brand-blue: #0868E8;
  --brand-blue-hover: #0654BD;
  --brand-blue-light: #EBF3FD;
  --brand-blue-highlight: #168BFF;
  --brand-gold: #DDAE59;
  --brand-gold-light: #F6CD78;
  --brand-soft-bg: #F5F8FC;
  --brand-structural: #D5DFEB;
  --font-cairo: 'Cairo', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-inter: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', 'JetBrains Mono', monospace;
}

/* Global Smoothness & Layout Safety */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw;
  scroll-behavior: smooth;
  font-family: var(--font-cairo);
}

.font-mono, [data-tech], .tech-badge {
  font-family: var(--font-mono) !important;
}

/* 1. Header Navigation - 100% Solid, Crisp & Impermeable */
.glass-nav,
header.glass-nav,
header.nav-scrolled,
header.scrolled {
  background-color: #ffffff !important;
  background: #ffffff !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: 0 4px 20px -2px rgba(6, 27, 64, 0.08), 0 1px 3px 0 rgba(6, 27, 64, 0.05) !important;
  border-bottom: 1px solid rgba(213, 223, 235, 0.95) !important;
  z-index: 100 !important;
}

/* 2. RTL Flip Helper */
[dir="rtl"] .rtl-flip {
  transform: scaleX(-1);
}

/* 3. Smooth Hover Transitions */
.card-hover-effect {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}

.card-hover-effect:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -8px rgba(8, 104, 232, 0.14), 0 8px 16px -4px rgba(6, 27, 64, 0.06);
}

/* 4. Background Tech Grid */
.bg-tech-grid {
  background-image: radial-gradient(rgba(6, 27, 64, 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* 5. Hero Glow Effect */
.bg-hero-glow {
  background: radial-gradient(circle at 50% 0%, rgba(8, 104, 232, 0.08) 0%, rgba(245, 248, 252, 0) 70%);
}

/* 6. Gold Signature Accent Badge */
.gold-badge {
  background: linear-gradient(135deg, rgba(221, 174, 89, 0.15) 0%, rgba(246, 205, 120, 0.25) 100%);
  border: 1px solid rgba(221, 174, 89, 0.4);
  color: #B28328;
}

/* 7. Mobile 3D Perspective Safety */
@media (max-width: 1024px) {
  .dashboard-tilt {
    transform: none !important;
  }
}

/* 8. Ambient Circular Glows (matching reference image) */
.ambient-glow-blue {
  background: radial-gradient(circle, rgba(8, 104, 232, 0.14) 0%, rgba(245, 248, 252, 0) 70%);
}
.ambient-glow-emerald {
  background: radial-gradient(circle, rgba(16, 185, 129, 0.14) 0%, rgba(245, 248, 252, 0) 70%);
}
.ambient-glow-purple {
  background: radial-gradient(circle, rgba(168, 85, 247, 0.14) 0%, rgba(245, 248, 252, 0) 70%);
}
.ambient-glow-amber {
  background: radial-gradient(circle, rgba(245, 158, 11, 0.14) 0%, rgba(245, 248, 252, 0) 70%);
}

/* 9. Floating Micro-Animations */
@keyframes floatSlow {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}
@keyframes floatReverse {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(8px); }
}
.animate-float-slow {
  animation: floatSlow 4s ease-in-out infinite;
}
.animate-float-reverse {
  animation: floatReverse 4.5s ease-in-out infinite;
}

/* 10. Phone Mockup Frame */
.phone-frame {
  position: relative;
  border: 8px solid #1e293b;
  border-radius: 40px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(6, 27, 64, 0.25);
  background: #0f172a;
}
.phone-frame::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 14px;
  background: #1e293b;
  border-radius: 10px;
  z-index: 30;
}