/**
 * Haraj One — Ultra Modern Landing Page Stylesheet
 * Inspired by ThemeForest Creative Portfolio & Automotive Showcase Themes
 */

/* ==========================================================================
   CSS Variables & Design Tokens
   ========================================================================== */
:root {
  /* Dark Mode (Default) */
  --bg-primary: #070a12;
  --bg-secondary: #0c1220;
  --bg-card: rgba(16, 24, 40, 0.75);
  --bg-card-hover: rgba(24, 34, 56, 0.9);
  --bg-glass: rgba(255, 255, 255, 0.04);
  --bg-glass-strong: rgba(255, 255, 255, 0.08);

  --border-color: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(16, 185, 129, 0.4);
  --border-glow: rgba(59, 130, 246, 0.3);

  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-inverse: #070a12;

  /* Brand Accents */
  --emerald-500: #10b981;
  --emerald-400: #34d399;
  --emerald-600: #059669;
  --emerald-glow: rgba(16, 185, 129, 0.35);

  --blue-500: #2563eb;
  --blue-400: #60a5fa;
  --blue-600: #1d4ed8;
  --blue-glow: rgba(37, 99, 235, 0.35);

  --cyan-500: #06b6d4;
  --amber-500: #f59e0b;
  --amber-glow: rgba(245, 158, 11, 0.35);

  --gradient-primary: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
  --gradient-accent: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  --gradient-gold: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
  --gradient-dark: linear-gradient(180deg, rgba(12, 18, 32, 0) 0%, rgba(7, 10, 18, 0.95) 100%);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 35px var(--emerald-glow);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.6s cubic-bezier(0.16, 1, 0.3, 1);

  --font-ar: 'Readex Pro', 'Cairo', system-ui, -apple-system, sans-serif;
  --font-en: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
}

[data-theme="light"] {
  --bg-primary: #f8fafc;
  --bg-secondary: #ffffff;
  --bg-card: rgba(255, 255, 255, 0.85);
  --bg-card-hover: rgba(255, 255, 255, 0.98);
  --bg-glass: rgba(15, 23, 42, 0.03);
  --bg-glass-strong: rgba(15, 23, 42, 0.06);

  --border-color: rgba(15, 23, 42, 0.08);
  --border-hover: rgba(16, 185, 129, 0.5);
  --border-glow: rgba(37, 99, 235, 0.2);

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --text-inverse: #ffffff;

  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.12);
  --shadow-glow: 0 0 35px rgba(16, 185, 129, 0.2);

  --gradient-dark: linear-gradient(180deg, rgba(248, 250, 252, 0) 0%, rgba(248, 250, 252, 0.95) 100%);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-ar);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.65;
  overflow-x: hidden;
  position: relative;
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

body[dir="ltr"] {
  font-family: var(--font-en);
}

a {
  color: inherit;
  text-decoration: none;
  transition: all var(--transition-fast);
}

img, svg {
  display: block;
  max-width: 100%;
}

button, select, input {
  font: inherit;
  border: none;
  outline: none;
  background: none;
}

/* ==========================================================================
   Ambient Background & Animations
   ========================================================================== */
.ambient-scene {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

#particle-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.6;
}

.ambient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.35;
  will-change: transform;
}

.ambient-orb-1 {
  width: 500px;
  height: 500px;
  top: -100px;
  left: 10%;
  background: radial-gradient(circle, #10b981 0%, rgba(16, 185, 129, 0) 70%);
  animation: floatOrb 18s ease-in-out infinite alternate;
}

.ambient-orb-2 {
  width: 550px;
  height: 550px;
  top: 25%;
  right: 5%;
  background: radial-gradient(circle, #2563eb 0%, rgba(37, 99, 235, 0) 70%);
  animation: floatOrb 22s ease-in-out infinite alternate-reverse;
}

.ambient-orb-3 {
  width: 450px;
  height: 450px;
  bottom: 10%;
  left: 20%;
  background: radial-gradient(circle, #7c3aed 0%, rgba(124, 58, 237, 0) 70%);
  animation: floatOrb 16s ease-in-out infinite alternate;
}

.ambient-grid {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 50px 50px;
  mask-image: radial-gradient(circle at 50% 30%, black 40%, transparent 85%);
  -webkit-mask-image: radial-gradient(circle at 50% 30%, black 40%, transparent 85%);
}

[data-theme="light"] .ambient-grid {
  background-image: 
    linear-gradient(to right, rgba(15, 23, 42, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.03) 1px, transparent 1px);
}

@keyframes floatOrb {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(60px, -40px) scale(1.1); }
  100% { transform: translate(-50px, 30px) scale(0.95); }
}

/* ==========================================================================
   Layout & Container
   ========================================================================== */
.site-wrapper {
  position: relative;
  z-index: 1;
}

.container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 24px;
}

@media (max-width: 768px) {
  .container {
    padding-inline: 16px;
  }
}

/* ==========================================================================
   Navbar
   ========================================================================== */
.navbar-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(7, 10, 18, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-color);
  transition: all var(--transition-normal);
}

[data-theme="light"] .navbar-header {
  background: rgba(255, 255, 255, 0.88);
}

.navbar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
  gap: 20px;
}

.brand-group {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}

.brand-logo-img {
  height: 48px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.2));
  transition: transform var(--transition-normal);
}

.brand-group:hover .brand-logo-img {
  transform: scale(1.04);
}

.brand-info {
  display: flex;
  flex-direction: column;
}

.brand-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.25;
}

.brand-subtitle {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
}

.nav-links-desktop {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
}

.nav-link {
  padding: 8px 14px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  position: relative;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-link:hover, .nav-link.active {
  color: var(--emerald-400);
  background: var(--bg-glass-strong);
}

.nav-link-badge {
  font-size: 0.68rem;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  font-weight: 700;
  animation: pulseBadge 2s infinite;
}

@keyframes pulseBadge {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.08); }
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-start: 0;
  min-width: 220px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 8px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all var(--transition-fast);
  list-style: none;
  z-index: 110;
}

.nav-dropdown:hover .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.88rem;
  font-weight: 600;
  transition: all var(--transition-fast);
}

.dropdown-item:hover {
  background: var(--bg-glass-strong);
  color: var(--emerald-400);
}

.dropdown-item i {
  font-size: 1rem;
  width: 20px;
  color: var(--emerald-500);
}

/* Actions in Navbar */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.theme-toggle-btn {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-full);
  background: var(--bg-glass-strong);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.15rem;
  transition: all var(--transition-fast);
}

.theme-toggle-btn:hover {
  background: var(--bg-glass);
  color: var(--amber-500);
  border-color: var(--amber-500);
  transform: rotate(20deg);
}

.lang-selector-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.lang-select {
  padding: 8px 16px;
  padding-inline-end: 32px;
  border-radius: var(--radius-full);
  background: var(--bg-glass-strong);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: all var(--transition-fast);
}

.lang-select:hover {
  border-color: var(--emerald-500);
}

.lang-arrow-icon {
  position: absolute;
  inset-inline-end: 12px;
  pointer-events: none;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.nav-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-full);
  background: var(--gradient-primary);
  color: #070a12 !important;
  font-weight: 800;
  font-size: 0.92rem;
  box-shadow: 0 4px 18px var(--emerald-glow);
  cursor: pointer;
  transition: all var(--transition-normal);
  white-space: nowrap;
}

.nav-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px var(--emerald-glow);
  filter: brightness(1.1);
}

.mobile-toggle-btn {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--bg-glass-strong);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 1.3rem;
  cursor: pointer;
}

@media (max-width: 1080px) {
  .nav-links-desktop {
    display: none;
  }
  .mobile-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Mobile Drawer Menu */
.mobile-menu-drawer {
  position: fixed;
  inset: 0;
  background: rgba(7, 10, 18, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  padding: 24px;
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-normal);
}

.mobile-menu-drawer.active {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.mobile-drawer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
}

.mobile-close-btn {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--bg-glass-strong);
  color: var(--text-primary);
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 24px;
  overflow-y: auto;
}

.mobile-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  background: var(--bg-glass);
  color: var(--text-primary);
  font-size: 1.05rem;
  font-weight: 700;
}

.mobile-nav-link:hover {
  background: var(--bg-glass-strong);
  color: var(--emerald-400);
}

/* ==========================================================================
   Hero Section
   ========================================================================== */
.hero-section {
  position: relative;
  padding: 60px 0 90px;
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 48px;
}

@media (max-width: 991px) {
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 40px;
  }
}

.hero-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  border-radius: var(--radius-full);
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: var(--emerald-400);
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 24px;
  backdrop-filter: blur(10px);
}

.pulsing-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--emerald-400);
  box-shadow: 0 0 10px var(--emerald-400);
  animation: pulseDot 1.6s infinite;
}

@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.4; }
}

.hero-headline {
  font-size: 3.25rem;
  font-weight: 900;
  line-height: 1.22;
  color: var(--text-primary);
  margin-bottom: 22px;
  letter-spacing: -0.02em;
}

@media (max-width: 768px) {
  .hero-headline {
    font-size: 2.2rem;
  }
}

.text-gradient {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-gold {
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-subtitle {
  font-size: 1.15rem;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 34px;
  max-width: 600px;
}

@media (max-width: 991px) {
  .hero-subtitle {
    margin-inline: auto;
  }
}

.hero-cta-group {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

@media (max-width: 991px) {
  .hero-cta-group {
    justify-content: center;
  }
}

.btn-primary-hero {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 34px;
  border-radius: var(--radius-full);
  background: var(--gradient-primary);
  color: #070a12 !important;
  font-size: 1.05rem;
  font-weight: 800;
  box-shadow: 0 8px 30px var(--emerald-glow);
  cursor: pointer;
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.btn-primary-hero:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px var(--emerald-glow);
  filter: brightness(1.1);
}

.btn-secondary-hero {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: var(--radius-full);
  background: var(--bg-glass-strong);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-secondary-hero:hover {
  background: var(--bg-glass);
  border-color: var(--emerald-400);
  color: var(--emerald-400);
  transform: translateY(-2px);
}

/* Stats Counter Row */
.hero-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding-top: 30px;
  border-top: 1px solid var(--border-color);
}

@media (max-width: 640px) {
  .hero-stats-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

.stat-item {
  display: flex;
  flex-direction: column;
}

.stat-number {
  font-size: 1.85rem;
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1.2;
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.stat-number span {
  color: var(--emerald-400);
}

.stat-label {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 600;
  margin-top: 4px;
}

/* Hero Visual Showcase with Floating Cards */
.hero-visual-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 480px;
}

.mockup-glow-wrapper {
  position: relative;
  z-index: 2;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.mockup-glow-wrapper:hover {
  transform: translateY(-8px) scale(1.02);
}

.mockup-device-img {
  width: 290px;
  height: auto;
  max-width: 100%;
  filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.6));
  position: relative;
  z-index: 2;
}

.mockup-ambient-glow {
  position: absolute;
  inset: -15px;
  background: radial-gradient(circle, var(--emerald-glow) 0%, transparent 70%);
  filter: blur(40px);
  z-index: 1;
  opacity: 0.8;
  animation: glowPulse 4s ease-in-out infinite alternate;
}

@keyframes glowPulse {
  0% { transform: scale(0.9); opacity: 0.5; }
  100% { transform: scale(1.15); opacity: 0.9; }
}

/* Floating Motion Badges */
.floating-badge {
  position: absolute;
  z-index: 4;
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-color);
  padding: 12px 18px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: auto;
  animation: floatMotion 6s ease-in-out infinite;
  white-space: nowrap;
}

.floating-badge-1 {
  top: 10%;
  inset-inline-end: -25px;
  border-color: rgba(239, 68, 68, 0.4);
  animation-delay: 0s;
}

.floating-badge-2 {
  bottom: 18%;
  inset-inline-start: -30px;
  border-color: rgba(16, 185, 129, 0.4);
  animation-delay: 1.8s;
}

.floating-badge-3 {
  bottom: -15px;
  inset-inline-end: 20px;
  border-color: rgba(59, 130, 246, 0.4);
  animation-delay: 3.2s;
}

@media (max-width: 768px) {
  .floating-badge-1 {
    inset-inline-end: 0;
    top: 5%;
    padding: 8px 12px;
  }
  .floating-badge-2 {
    inset-inline-start: 0;
    bottom: 10%;
    padding: 8px 12px;
  }
  .floating-badge-3 {
    display: none;
  }
}

@keyframes floatMotion {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

.badge-icon-box {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.icon-red {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.icon-emerald {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.icon-blue {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.badge-texts {
  display: flex;
  flex-direction: column;
}

.badge-headline {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--text-primary);
}

.badge-sub {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-weight: 600;
}

/* ==========================================================================
   Section Headers & Common
   ========================================================================== */
.section-pad {
  padding: 85px 0;
  position: relative;
}

.section-header-center {
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
  margin-bottom: 54px;
}

.section-pill-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: var(--radius-full);
  background: var(--bg-glass-strong);
  border: 1px solid var(--border-color);
  color: var(--emerald-400);
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.section-title {
  font-size: 2.35rem;
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1.25;
  margin-bottom: 16px;
}

@media (max-width: 768px) {
  .section-title {
    font-size: 1.85rem;
  }
}

.section-desc {
  font-size: 1.05rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* ==========================================================================
   Live Auctions Showcase Section
   ========================================================================== */
.auctions-showcase-section {
  position: relative;
}

.auctions-grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

@media (max-width: 991px) {
  .auctions-grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .auctions-grid-container {
    grid-template-columns: 1fr;
  }
}

.auction-preview-card {
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-normal);
  position: relative;
}

.auction-preview-card:hover {
  transform: translateY(-8px);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-lg), 0 0 25px rgba(16, 185, 129, 0.15);
}

.card-image-box {
  position: relative;
  width: 100%;
  height: 210px;
  overflow: hidden;
  background: #000;
}

.card-car-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.auction-preview-card:hover .card-car-img {
  transform: scale(1.08);
}

.card-top-badges {
  position: absolute;
  top: 14px;
  inset-inline-start: 14px;
  inset-inline-end: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 2;
}

.badge-live-pulse {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  background: rgba(220, 38, 38, 0.85);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
}

.badge-condition {
  padding: 5px 12px;
  border-radius: var(--radius-full);
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.card-timer-overlay {
  position: absolute;
  bottom: 12px;
  inset-inline-start: 14px;
  background: rgba(7, 10, 18, 0.8);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  color: var(--amber-500);
  font-size: 0.8rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
}

.card-body-content {
  padding: 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card-auction-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 8px;
  line-height: 1.3;
}

.card-auction-specs {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 18px;
}

.card-bid-details {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px;
  border-radius: var(--radius-md);
  background: var(--bg-glass-strong);
  border: 1px solid var(--border-color);
  margin-bottom: 18px;
}

.bid-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 600;
}

.bid-price {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--emerald-400);
}

.btn-card-bid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--gradient-primary);
  color: #070a12 !important;
  font-weight: 800;
  font-size: 0.95rem;
  transition: all var(--transition-fast);
}

.btn-card-bid:hover {
  filter: brightness(1.15);
  box-shadow: 0 4px 18px var(--emerald-glow);
}

.auctions-more-cta {
  text-align: center;
  margin-top: 44px;
}

/* ==========================================================================
   Why Haraj1 Section (Features Bento Grid)
   ========================================================================== */
.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

@media (max-width: 1080px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .features-grid {
    grid-template-columns: 1fr;
  }
}

.feature-card {
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 32px 24px;
  transition: all var(--transition-normal);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(16, 185, 129, 0.08), transparent 70%);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.feature-card:hover {
  transform: translateY(-8px);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-lg);
}

.feature-card:hover::before {
  opacity: 1;
}

.feature-icon-wrapper {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-lg);
  background: var(--bg-glass-strong);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: var(--emerald-400);
  margin-bottom: 22px;
  transition: all var(--transition-normal);
}

.feature-card:hover .feature-icon-wrapper {
  background: var(--gradient-primary);
  color: #070a12;
  box-shadow: 0 8px 24px var(--emerald-glow);
  transform: scale(1.08) rotate(5deg);
}

.feature-title {
  font-size: 1.22rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.feature-description {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

/* ==========================================================================
   How It Works Section (Interactive Step Timeline)
   ========================================================================== */
.how-it-works-section {
  position: relative;
}

.steps-nav-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 36px;
}

@media (max-width: 850px) {
  .steps-nav-timeline {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .steps-nav-timeline {
    grid-template-columns: 1fr;
  }
}

.step-tab-btn {
  background: var(--bg-card);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 18px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: all var(--transition-normal);
  text-align: start;
}

.step-tab-btn:hover {
  border-color: var(--border-hover);
  background: var(--bg-glass-strong);
}

.step-tab-btn.active {
  border-color: var(--emerald-400);
  background: rgba(16, 185, 129, 0.08);
  box-shadow: 0 8px 25px var(--emerald-glow);
}

.step-number-disc {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-glass-strong);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--text-secondary);
  flex-shrink: 0;
  transition: all var(--transition-normal);
}

.step-tab-btn.active .step-number-disc {
  background: var(--gradient-primary);
  color: #070a12;
  border-color: transparent;
  box-shadow: 0 0 15px var(--emerald-glow);
}

.step-tab-texts {
  display: flex;
  flex-direction: column;
}

.step-tab-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-primary);
}

.step-tab-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Step Content Card */
.step-content-viewport {
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 40px;
  box-shadow: var(--shadow-lg);
  position: relative;
  min-height: 240px;
}

@media (max-width: 640px) {
  .step-content-viewport {
    padding: 24px;
  }
}

.step-panel {
  display: none;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: center;
  gap: 36px;
  animation: fadeInStep 0.45s ease forwards;
}

.step-panel.active {
  display: grid;
}

@media (max-width: 850px) {
  .step-panel {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@keyframes fadeInStep {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.step-panel-info {
  display: flex;
  flex-direction: column;
}

.step-badge-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--emerald-400);
  margin-bottom: 12px;
}

.step-main-title {
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--text-primary);
  margin-bottom: 16px;
}

.step-main-description {
  font-size: 1.05rem;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 24px;
}

.step-panel-img-box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.step-avatar-img {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--emerald-400);
  box-shadow: 0 0 35px var(--emerald-glow);
}

/* ==========================================================================
   App Download Banner
   ========================================================================== */
.app-download-section {
  position: relative;
}

.app-banner-card {
  position: relative;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(37, 99, 235, 0.12) 100%);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: var(--radius-xl);
  padding: 60px 48px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: center;
  gap: 40px;
}

@media (max-width: 991px) {
  .app-banner-card {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 40px 24px;
  }
}

.app-banner-content {
  position: relative;
  z-index: 2;
}

.app-banner-title {
  font-size: 2.35rem;
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1.25;
  margin-bottom: 16px;
}

.app-banner-desc {
  font-size: 1.1rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 32px;
}

.store-buttons-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

@media (max-width: 991px) {
  .store-buttons-wrap {
    justify-content: center;
  }
}

.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 24px;
  border-radius: var(--radius-lg);
  background: rgba(7, 10, 18, 0.8);
  border: 1px solid var(--border-color);
  color: white;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-md);
}

.store-btn:hover {
  transform: translateY(-4px);
  border-color: var(--emerald-400);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

.store-icon-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.store-texts {
  display: flex;
  flex-direction: column;
  text-align: start;
}

.store-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
}

.store-name {
  font-size: 1.05rem;
  font-weight: 800;
  color: white;
}

.app-banner-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
}

.app-visual-phone {
  width: 260px;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
  animation: floatMotion 7s ease-in-out infinite;
}

/* ==========================================================================
   Map & Location Section
   ========================================================================== */
.location-section {
  position: relative;
}

.map-wrapper-card {
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.map-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border-color);
  flex-wrap: wrap;
  gap: 14px;
}

.map-location-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-primary);
}

.map-location-title i {
  color: #ef4444;
}

.map-cta-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-map-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: var(--radius-full);
  background: var(--bg-glass-strong);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 700;
  transition: all var(--transition-fast);
}

.btn-map-action:hover {
  background: var(--emerald-500);
  color: #070a12;
  border-color: var(--emerald-500);
}

.map-iframe-container {
  width: 100%;
  height: 420px;
  position: relative;
}

.map-iframe-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ==========================================================================
   Contact Cards & Footer
   ========================================================================== */
.contact-highlight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 50px;
}

@media (max-width: 850px) {
  .contact-highlight-grid {
    grid-template-columns: 1fr;
  }
}

.contact-card {
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 28px;
  display: flex;
  align-items: center;
  gap: 20px;
  transition: all var(--transition-normal);
}

.contact-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-md);
}

.contact-card-icon {
  width: 54px;
  height: 54px;
  border-radius: var(--radius-lg);
  background: var(--bg-glass-strong);
  color: var(--emerald-400);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.contact-card-texts {
  display: flex;
  flex-direction: column;
}

.contact-card-label {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 600;
}

.contact-card-val {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-top: 2px;
  direction: ltr;
  unicode-bidi: embed;
}

/* Main Footer */
.site-footer {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  padding: 60px 0 30px;
  position: relative;
  z-index: 2;
}

.footer-top-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}

@media (max-width: 850px) {
  .footer-top-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

.footer-brand-desc {
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.7;
  margin-top: 16px;
  max-width: 380px;
}

.footer-social-links {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}

.social-icon-btn {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--bg-glass-strong);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: all var(--transition-fast);
}

.social-icon-btn:hover {
  background: var(--gradient-primary);
  color: #070a12;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px var(--emerald-glow);
}

.footer-col-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 20px;
}

.footer-links-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-link-item a {
  color: var(--text-secondary);
  font-size: 0.92rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all var(--transition-fast);
}

.footer-link-item a:hover {
  color: var(--emerald-400);
}

.footer-bottom-bar {
  padding-top: 30px;
  border-top: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.footer-legal-links {
  display: flex;
  align-items: center;
  gap: 20px;
}

.footer-legal-links a:hover {
  color: var(--emerald-400);
}

/* ==========================================================================
   Scroll To Top Floating Button
   ========================================================================== */
.scroll-top-btn {
  position: fixed;
  bottom: 28px;
  inset-inline-end: 28px;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--gradient-primary);
  color: #070a12;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 25px var(--emerald-glow);
  cursor: pointer;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all var(--transition-normal);
}

.scroll-top-btn.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-top-btn:hover {
  transform: translateY(-4px);
  filter: brightness(1.15);
}


/* ==========================================================================
   Dynamic Background Modes & Switcher (Multi-Option Visuals)
   ========================================================================== */
/* Mode 1: Aurora Mesh */
.aurora-scene {
  display: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
}

body[data-bg-mode="aurora"] .aurora-scene {
  display: block;
}

body[data-bg-mode="aurora"] #particle-canvas {
  opacity: 0.15;
}

.aurora-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.45;
  mix-blend-mode: screen;
  will-change: transform;
}

.aurora-blob-1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, #10b981 0%, rgba(16, 185, 129, 0) 70%);
  top: -100px;
  left: 15%;
  animation: auroraMorph1 14s ease-in-out infinite alternate;
}

.aurora-blob-2 {
  width: 650px;
  height: 650px;
  background: radial-gradient(circle, #2563eb 0%, rgba(37, 99, 235, 0) 70%);
  top: 30%;
  right: 10%;
  animation: auroraMorph2 18s ease-in-out infinite alternate;
}

.aurora-blob-3 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, #06b6d4 0%, rgba(6, 182, 212, 0) 70%);
  bottom: 5%;
  left: 25%;
  animation: auroraMorph3 16s ease-in-out infinite alternate;
}

.aurora-blob-4 {
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, #f59e0b 0%, rgba(245, 158, 11, 0) 70%);
  top: 45%;
  left: 5%;
  animation: auroraMorph1 20s ease-in-out infinite alternate;
}

@keyframes auroraMorph1 {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
  50% { transform: translate(80px, 60px) scale(1.15) rotate(180deg); border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  100% { transform: translate(-60px, -40px) scale(0.9) rotate(360deg); border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; }
}

@keyframes auroraMorph2 {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); }
  50% { transform: translate(-70px, 50px) scale(1.2) rotate(-140deg); }
  100% { transform: translate(40px, -60px) scale(0.95) rotate(-280deg); }
}

@keyframes auroraMorph3 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(50px, -70px) scale(1.25); }
  100% { transform: translate(-40px, 40px) scale(0.9); }
}

/* Mode 2: Cyber Grid (Futuristic 3D Automotive Highway) */
.cyber-grid-scene {
  display: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
}

body[data-bg-mode="grid"] .cyber-grid-scene {
  display: block;
}

body[data-bg-mode="grid"] #particle-canvas {
  opacity: 0.25;
}

.cyber-grid-plane {
  position: absolute;
  left: -50%;
  width: 200%;
  bottom: 0;
  height: 65vh;
  background-image: 
    linear-gradient(to right, rgba(16, 185, 129, 0.22) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(16, 185, 129, 0.22) 1px, transparent 1px);
  background-size: 60px 45px;
  transform: perspective(450px) rotateX(75deg);
  transform-origin: center bottom;
  animation: moveCyberGrid 4s linear infinite;
}

@keyframes moveCyberGrid {
  0% { transform: perspective(450px) rotateX(75deg) translateY(0); }
  100% { transform: perspective(450px) rotateX(75deg) translateY(45px); }
}

.cyber-horizon-glow {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 45vh;
  height: 180px;
  background: radial-gradient(ellipse at bottom, rgba(16, 185, 129, 0.35) 0%, rgba(6, 182, 212, 0.15) 45%, transparent 75%);
  filter: blur(20px);
  pointer-events: none;
}

/* Mode 3: Waves */
.waves-scene {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 1;
}

body[data-bg-mode="waves"] .waves-scene {
  display: block;
}

body[data-bg-mode="waves"] #particle-canvas {
  display: none;
}

#waves-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.8;
}

/* Mode 4: Automotive Video */
.video-scene {
  display: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
}

body[data-bg-mode="video"] .video-scene {
  display: block;
}

.bg-video-element {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  opacity: 0.22;
  filter: contrast(1.1) saturate(1.2);
}

.video-overlay-tint {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(7, 10, 18, 0.6) 0%, rgba(7, 10, 18, 0.94) 85%);
}

/* Floating Background Switcher Panel */
.bg-switcher-panel {
  position: fixed;
  bottom: 28px;
  inset-inline-start: 28px;
  z-index: 120;
  font-family: var(--font-ar);
}

body[dir="ltr"] .bg-switcher-panel {
  font-family: var(--font-en);
}

.bg-switcher-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: var(--radius-full);
  background: rgba(16, 24, 40, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-hover);
  color: var(--emerald-400);
  font-size: 0.88rem;
  font-weight: 800;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 15px var(--emerald-glow);
  cursor: pointer;
  transition: all var(--transition-normal);
}

.bg-switcher-toggle:hover {
  transform: translateY(-2px);
  background: rgba(24, 34, 56, 0.95);
  box-shadow: 0 12px 35px var(--emerald-glow);
  color: #fff;
}

.bg-switcher-toggle i {
  font-size: 1.1rem;
}

.bg-switcher-menu {
  position: absolute;
  bottom: calc(100% + 14px);
  inset-inline-start: 0;
  min-width: 280px;
  background: rgba(12, 18, 32, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.95);
  transform-origin: bottom start;
  transition: all var(--transition-normal);
}

.bg-switcher-panel.open .bg-switcher-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.bg-switcher-title {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 700;
  padding-inline: 8px;
  margin-bottom: 4px;
}

.bg-opt-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--bg-glass);
  border: 1px solid transparent;
  color: var(--text-secondary);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: start;
}

.bg-opt-btn:hover {
  background: var(--bg-glass-strong);
  color: var(--text-primary);
  border-color: var(--border-color);
}

.bg-opt-btn.active {
  background: rgba(16, 185, 129, 0.12);
  border-color: var(--emerald-400);
  color: var(--emerald-400);
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2);
}

.bg-opt-btn i {
  width: 20px;
  font-size: 1rem;
  color: var(--emerald-400);
}


/* ==========================================================================
   Nova Leap Automotive Showcase — Giant Typography Behind Car
   ========================================================================== */
.hero-centered-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  width: 100%;
}

.hero-view-switcher {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border-radius: var(--radius-full);
  background: var(--bg-glass-strong);
  border: 1px solid var(--border-color);
  margin-bottom: 24px;
}

.hero-view-btn {
  padding: 8px 18px;
  border-radius: var(--radius-full);
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.hero-view-btn:hover {
  color: var(--text-primary);
}

.hero-view-btn.active {
  background: var(--gradient-primary);
  color: #070a12;
  box-shadow: 0 4px 15px var(--emerald-glow);
}

/* Nova Leap Stage */
.hero-nova-stage {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  margin-bottom: 30px;
}

.hero-giant-typography {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  text-align: center;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

.giant-word-solid {
  font-family: 'Plus Jakarta Sans', 'Cairo', sans-serif;
  font-size: clamp(3.2rem, 12.5vw, 11.5rem);
  font-weight: 900;
  letter-spacing: 0.05em;
  color: #ffffff;
  text-shadow: 0 0 40px rgba(255, 255, 255, 0.25), 0 0 80px rgba(16, 185, 129, 0.2);
  line-height: 0.9;
  text-transform: uppercase;
}

.giant-word-outline {
  font-family: 'Plus Jakarta Sans', 'Cairo', sans-serif;
  font-size: clamp(3.2rem, 12.5vw, 11.5rem);
  font-weight: 900;
  letter-spacing: 0.05em;
  color: transparent;
  -webkit-text-stroke: 2.5px rgba(255, 255, 255, 0.45);
  text-shadow: 0 0 35px rgba(6, 182, 212, 0.25);
  line-height: 0.9;
  text-transform: uppercase;
}

.giant-arabic-sub {
  position: absolute;
  top: 96%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Readex Pro', 'Cairo', sans-serif;
  font-size: clamp(1.1rem, 3.2vw, 2.2rem);
  font-weight: 800;
  letter-spacing: 0.35em;
  color: rgba(16, 185, 129, 0.7);
  text-shadow: 0 0 25px rgba(16, 185, 129, 0.5);
  white-space: nowrap;
}

.hero-car-wrapper {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  justify-content: center;
}

.hero-car-wrapper:hover {
  transform: scale(1.02);
}

.hero-supercar-img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 25px 45px rgba(0, 0, 0, 0.85));
  border-radius: 12px;
}

.car-ambient-glow {
  position: absolute;
  inset: 15% 10% 5% 10%;
  background: radial-gradient(ellipse at center, rgba(16, 185, 129, 0.25) 0%, rgba(37, 99, 235, 0.15) 50%, transparent 75%);
  filter: blur(50px);
  z-index: -1;
  pointer-events: none;
}

/* Automotive Specs Row (Inspired by Nova Leap: 350 MPH / 0-579 KM/H / 420 KW) */
.hero-automotive-specs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding: 16px 36px;
  border-radius: var(--radius-full);
  background: rgba(12, 18, 32, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-md);
  position: relative;
  z-index: 3;
}

.auto-spec-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.auto-spec-val {
  font-size: 1.45rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.auto-spec-val small {
  color: var(--emerald-400);
}

.auto-spec-lbl {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-top: 2px;
}

.auto-spec-divider {
  width: 1px;
  height: 32px;
  background: var(--border-color);
}

@media (max-width: 768px) {
  .hero-automotive-specs {
    gap: 16px;
    padding: 14px 20px;
    border-radius: var(--radius-lg);
  }
  .auto-spec-divider {
    display: none;
  }
  .auto-spec-val {
    font-size: 1.15rem;
  }
}

/* ==========================================================================
   The hero photo becomes a faded backdrop behind the copy
   --------------------------------------------------------------------------
   hero_supercar.jpg is a black car shot on a black ground. As an in-flow
   block it read as a pasted dark rectangle. Here it spans the hero as a
   faded, edge-masked layer with the copy sitting on top of it — the same
   treatment the reference uses for its hero photo. Appended only; nothing
   above this line was changed.
   ========================================================================== */

.hero-section {
  min-height: 680px;
}

/* Static, so the layers inside anchor to the hero section itself. */
.hero-nova-stage {
  position: static;
  padding-top: 230px;
}

.hero-car-wrapper {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1500px, 120%);
  max-width: none;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}

.hero-car-wrapper:hover {
  transform: translateX(-50%);
}

.hero-supercar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  border-radius: 0;
  filter: none;
  opacity: 0.3;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, #000 20%, #000 64%, transparent 96%),
    linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image:
    linear-gradient(to bottom, transparent 0%, #000 20%, #000 64%, transparent 96%),
    linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* On the light theme the car is a dark subject on a pale ground. Raising the
   opacity alone turns it into a smudge under the copy, so the visible band is
   pushed further down as well: the headline keeps a clean ground while the car
   reads clearly below it. */
[data-theme="light"] .hero-supercar-img {
  opacity: 0.45;
  filter: brightness(1.45) contrast(1.3);
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, transparent 26%, #000 46%, #000 82%, transparent 99%),
    linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image:
    linear-gradient(to bottom, transparent 0%, transparent 26%, #000 46%, #000 82%, transparent 99%),
    linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

/* Copy rides above the backdrop. */
.hero-pill-badge,
.hero-headline,
.hero-subtitle,
.hero-cta-group,
.hero-automotive-specs {
  position: relative;
  z-index: 2;
}

/* The giant lockup used to be covered by the photo block; keep it in the same
   band between the buttons and the specs bar now that it is exposed. */
.hero-giant-typography {
  top: 63%;
  z-index: 1;
}

/* It was drawn in white for the dark theme and disappears on the light one. */
[data-theme="light"] .giant-word-solid {
  color: rgba(15, 23, 42, 0.1);
  text-shadow: none;
}

[data-theme="light"] .giant-word-outline {
  -webkit-text-stroke: 2.5px rgba(15, 23, 42, 0.18);
  text-shadow: none;
}

[data-theme="light"] .giant-arabic-sub {
  color: rgba(16, 185, 129, 0.55);
  text-shadow: none;
}

@media (max-width: 991px) {
  .hero-nova-stage {
    padding-top: 150px;
  }
  .hero-giant-typography {
    top: 60%;
  }
}

/* Empty / loading state for the auction grid — shown instead of invented cards
   when the API returns nothing or is unreachable. */
.auctions-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 16px;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.98rem;
}

/* The app section now shows a real screenshot of the app rather than a device
   render, so give it the rounded screen edge the old mockup drew itself. */
.app-visual-phone {
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
}

/* ==========================================================================
   Header: one flat row
   --------------------------------------------------------------------------
   The brand tagline is gone and the "المزيد" dropdown was flattened, so the
   bar now carries eight links. Let the nav take the space between the brand
   and the controls and spread the links across it instead of bunching them.
   ========================================================================== */
.navbar-container > nav {
  flex-grow: 1;
  min-width: 0;
}

.nav-links-desktop {
  width: 100%;
  justify-content: space-evenly;
  gap: 2px;
  flex-wrap: nowrap;
}

.nav-links-desktop .nav-link {
  padding: 8px 10px;
  white-space: nowrap;
}

/* The brand is a single line now. */
.brand-info {
  justify-content: center;
}

/* Eight links need the room back before the layout collapses to the drawer. */
@media (max-width: 1400px) {
  .nav-links-desktop .nav-link {
    padding: 8px 7px;
    font-size: 0.86rem;
  }
}

@media (max-width: 1180px) {
  .nav-links-desktop .nav-link {
    padding: 7px 5px;
    font-size: 0.8rem;
  }
  .navbar-container {
    gap: 10px;
  }
}

/* Numeric figures read left-to-right even on an RTL page. Without isolation
   the neutral characters (+ % /) drift to the wrong side: "15,000+" rendered
   as "+15,000" and "100%" as "%100". */
.auto-spec-val,
.timer-countdown,
.card-auction-title,
.bid-price {
  direction: ltr;
  unicode-bidi: isolate;
}

/* The title is Arabic text that may start with a Latin/number token, so keep
   its own paragraph direction but isolate it from the surrounding flow. */
.card-auction-title {
  direction: rtl;
}

/* ==========================================================================
   Responsive: tablets and phones
   --------------------------------------------------------------------------
   At 375 px the header alone measured 426 px inside a 375 px container, so the
   CTA was clipped off-screen and the page scrolled sideways (scrollWidth 462).
   ========================================================================== */

/* Nothing may widen the page, whatever an ambient layer or a long word does. */
html {
  overflow-x: hidden;
}

/* --- Tablet ------------------------------------------------------------- */
@media (max-width: 991px) {
  .navbar-container {
    height: 72px;
    gap: 10px;
  }

  .nav-actions {
    gap: 8px;
  }

  .brand-logo-img {
    height: 42px;
  }

  .brand-title {
    font-size: 0.92rem;
  }

  .hero-headline {
    font-size: 2.4rem;
  }

  .hero-automotive-specs {
    gap: 18px;
    padding: 14px 20px;
  }
}

/* --- Phone -------------------------------------------------------------- */
@media (max-width: 640px) {
  .navbar-container {
    height: 64px;
    gap: 8px;
  }

  .brand-group {
    gap: 8px;
    min-width: 0;
  }

  .brand-logo-img {
    height: 36px;
  }

  .brand-title {
    font-size: 0.82rem;
    white-space: nowrap;
  }

  .brand-info {
    border-inline-start: 0;
    padding-inline-start: 0;
  }

  /* The language menu and the auction CTA both live in the drawer, so the bar
     keeps only the theme switch and the hamburger. */
  .lang-selector-wrap,
  .nav-cta-btn {
    display: none;
  }

  .theme-toggle-btn,
  .mobile-toggle-btn {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
  }

  .hero-headline {
    font-size: 1.85rem;
    line-height: 1.35;
  }

  .hero-subtitle {
    font-size: 0.95rem;
  }

  .hero-cta-group {
    flex-direction: column;
    width: 100%;
  }

  .hero-cta-group > a {
    width: 100%;
    justify-content: center;
  }

  /* Four figures in one row is unreadable on a phone; two by two is not. */
  .hero-automotive-specs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 8px;
    padding: 16px 14px;
    border-radius: var(--radius-lg);
  }

  .auto-spec-divider {
    display: none;
  }

  .auto-spec-item {
    text-align: center;
  }

  .auto-spec-val {
    font-size: 1.2rem;
  }

  .auto-spec-lbl {
    font-size: 0.7rem;
  }

  .section-title {
    font-size: 1.5rem;
  }

  .auctions-grid-container {
    grid-template-columns: 1fr;
  }

  .app-visual-phone {
    width: 210px;
  }
}

/* --- Small phones -------------------------------------------------------- */
@media (max-width: 380px) {
  .brand-title {
    font-size: 0.75rem;
  }

  .hero-headline {
    font-size: 1.6rem;
  }
}

/* Drawer links were 24 px tall — below the 44 px touch target guideline, and
   they are the only navigation a phone gets. */
@media (max-width: 991px) {
  .mobile-nav-link {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 6px 4px;
  }

  .mobile-nav-list {
    gap: 2px;
  }
}

/* ==========================================================================
   Inner pages: FAQ, terms, about
   ========================================================================== */
.faq-list,
.legal-wrap {
  max-width: 840px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* --- FAQ accordion ------------------------------------------------------- */
.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.faq-item[open] {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-md);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  min-height: 46px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
  list-style: none;
}

.faq-question::-webkit-details-marker { display: none; }

.faq-question:hover { color: var(--emerald-500); }

.faq-chevron {
  flex-shrink: 0;
  font-size: 0.8rem;
  color: var(--emerald-500);
  transition: transform var(--transition-fast);
}

.faq-item[open] .faq-chevron { transform: rotate(180deg); }

.faq-answer {
  padding: 0 22px 20px;
  font-size: 0.95rem;
  line-height: 2;
  color: var(--text-secondary);
}

/* --- Legal sections ------------------------------------------------------ */
.legal-block {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 24px 26px;
}

.legal-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-primary);
}

.legal-num {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-primary);
  color: var(--text-inverse);
  font-size: 0.9rem;
  font-weight: 800;
  direction: ltr;
}

.legal-list {
  margin: 0;
  padding-inline-start: 20px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 0.94rem;
  line-height: 1.95;
  color: var(--text-secondary);
}

.legal-list li::marker { color: var(--emerald-500); }

/* --- Shared closing call to action --------------------------------------- */
.inner-cta {
  max-width: 840px;
  margin: 44px auto 0;
  padding: 28px 24px;
  text-align: center;
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
}

.inner-cta p {
  margin: 0 0 18px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.inner-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .faq-question { padding: 16px 16px; font-size: 0.94rem; }
  .faq-answer { padding: 0 16px 18px; font-size: 0.9rem; }
  .legal-block { padding: 20px 18px; }
  .inner-cta-actions { flex-direction: column; }
  .inner-cta-actions > a { width: 100%; justify-content: center; }
}

/* --- Contact channels ----------------------------------------------------
   The old page carried a form whose action was "#", so every message a
   customer typed was discarded on submit. These are the channels that
   actually reach the company. */
.contact-channels {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}

.contact-channel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: 28px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.contact-channel:hover {
  transform: translateY(-4px);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-md);
}

.channel-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-glass-strong);
  color: var(--emerald-500);
  font-size: 1.2rem;
  margin-bottom: 4px;
}

.channel-icon-wa {
  background: rgba(37, 211, 102, 0.14);
  color: #1da851;
}

.channel-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

.channel-value {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-primary);
  direction: ltr;
  unicode-bidi: isolate;
}

/* The location card holds Arabic prose, not a number. */
.contact-channel:last-child .channel-value {
  direction: rtl;
  font-size: 0.92rem;
}