/* ============================================
   MOHSEN SALEM - LAWYER CONTACT PAGE
   Ultra Premium Gold & Black Theme
   ============================================ */

/* ---------- CSS Variables ---------- */
:root {
  --bg-primary: #060608;
  --bg-secondary: #0d0d10;
  --bg-card: rgba(18, 18, 22, 0.85);
  --glass-bg: rgba(20, 20, 26, 0.65);
  --glass-border: rgba(212, 175, 55, 0.12);
  --glass-highlight: rgba(212, 175, 55, 0.2);
  --gold: #d4af37;
  --gold-light: #f0d060;
  --gold-dark: #b8962e;
  --gold-glow: rgba(212, 175, 55, 0.3);
  --gold-ultra: #ffe17a;
  --text-primary: #f5f0e8;
  --text-secondary: rgba(245, 240, 232, 0.65);
  --text-muted: rgba(245, 240, 232, 0.4);
  --whatsapp: #25D366;
  --phone-blue: #4d9fff;
  --email-red: #EA4335;
  --facebook: #1877F2;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Cairo', 'Tajawal', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  overflow-x: hidden;
  line-height: 1.6;
  min-height: 100vh;
  direction: rtl;
}

/* ---------- Remove ALL unwanted underlines ---------- */
a, a:hover, a:focus, a:active, a:visited {
  text-decoration: none !important;
}

.contact-card a,
.card-actions a,
.action-btn,
.save-btn,
.card-title,
.card-subtitle,
.card-info *,
.contact-section a {
  text-decoration: none !important;
  border-bottom: none !important;
  box-shadow: none;
  outline: none;
}

/* LTR support for English/French */
html[dir="ltr"] body {
  direction: ltr;
}

html[dir="ltr"] .card-actions {
  margin-right: 0;
  margin-left: auto;
}

/* ---------- Language Switcher ---------- */
.lang-switcher {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 9999;
  display: flex;
  gap: 6px;
  background: rgba(18, 18, 22, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 5px;
  opacity: 0;
  animation: fadeInUp 0.6s ease forwards 1.4s;
}

.lang-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  font-family: 'Cairo', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.lang-btn:hover {
  color: var(--text-primary);
  background: rgba(212, 175, 55, 0.08);
}

.lang-btn.active {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  color: #0a0a0a;
}

@media (max-width: 480px) {
  .lang-switcher {
    top: 10px;
    left: 10px;
    padding: 3px;
    gap: 3px;
  }
  .lang-btn {
    padding: 5px 8px;
    font-size: 11px;
  }
}

::selection {
  background: rgba(212, 175, 55, 0.3);
  color: #fff;
}

::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-track {
  background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 55, 0.3);
  border-radius: 2px;
}

/* ============================================
   ULTRA PREMIUM LOADER
   ============================================ */
#loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 1.2s;
  overflow: hidden;
}

#loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Loader Background Effects */
.loader-bg-effect {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.loader-bg-effect::before {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: loader-bg-pulse 4s ease-in-out infinite;
}

.loader-bg-effect::after {
  content: '';
  position: absolute;
  width: 800px;
  height: 800px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 150, 46, 0.04) 0%, transparent 60%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: loader-bg-pulse 4s ease-in-out infinite 1s;
}

@keyframes loader-bg-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.3; }
  50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
}

/* Rotating Rings */
.loader-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid transparent;
}

.loader-ring-1 {
  width: 280px;
  height: 280px;
  border-top-color: rgba(212, 175, 55, 0.4);
  border-right-color: rgba(212, 175, 55, 0.1);
  animation: ring-spin 3s linear infinite;
}

.loader-ring-2 {
  width: 320px;
  height: 320px;
  border-bottom-color: rgba(240, 208, 96, 0.3);
  border-left-color: rgba(240, 208, 96, 0.08);
  animation: ring-spin-reverse 4s linear infinite;
}

.loader-ring-3 {
  width: 360px;
  height: 360px;
  border-top-color: rgba(184, 150, 46, 0.2);
  border-right-color: rgba(184, 150, 46, 0.05);
  animation: ring-spin 5s linear infinite;
}

@keyframes ring-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes ring-spin-reverse {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

/* Orbiting Dots */
.loader-orbit-dots {
  position: absolute;
  width: 300px;
  height: 300px;
  animation: ring-spin 6s linear infinite;
}

.orbit-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-light);
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.8), 0 0 30px rgba(212, 175, 55, 0.4);
}

.orbit-dot:nth-child(1) { top: 0; left: 50%; transform: translateX(-50%); }
.orbit-dot:nth-child(2) { top: 50%; right: 0; transform: translateY(-50%); }
.orbit-dot:nth-child(3) { bottom: 0; left: 50%; transform: translateX(-50%); opacity: 0.6; width: 4px; height: 4px; }
.orbit-dot:nth-child(4) { top: 50%; left: 0; transform: translateY(-50%); opacity: 0.4; width: 3px; height: 3px; }

.loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  position: relative;
  z-index: 2;
}

.loader-logo-wrapper {
  position: relative;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader-logo {
  width: 140px;
  height: 140px;
  object-fit: contain;
  position: relative;
  z-index: 3;
  animation: logo-premium-float 3s ease-in-out infinite;
  filter: drop-shadow(0 0 40px rgba(212, 175, 55, 0.6));
}

@keyframes logo-premium-float {
  0%, 100% { 
    transform: translateY(0) scale(1); 
    filter: drop-shadow(0 0 40px rgba(212, 175, 55, 0.5));
  }
  50% { 
    transform: translateY(-12px) scale(1.05); 
    filter: drop-shadow(0 0 60px rgba(212, 175, 55, 0.8)) drop-shadow(0 0 100px rgba(240, 208, 96, 0.3));
  }
}

.loader-glow {
  position: absolute;
  inset: -40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.2) 0%, rgba(212, 175, 55, 0.08) 30%, transparent 70%);
  animation: glow-mega-breathe 3s ease-in-out infinite;
  z-index: 1;
}

@keyframes glow-mega-breathe {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.5); opacity: 1; }
}

/* Sparkles - Enhanced */
.loader-sparkles {
  position: absolute;
  inset: -30px;
  z-index: 4;
  pointer-events: none;
}

.loader-sparkles span {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold-ultra);
  box-shadow: 0 0 8px var(--gold-light), 0 0 16px rgba(212, 175, 55, 0.4);
  animation: sparkle-premium 2s ease-in-out infinite;
}

.loader-sparkles span:nth-child(1) { top: 5%; left: 50%; animation-delay: 0s; }
.loader-sparkles span:nth-child(2) { top: 20%; right: 8%; animation-delay: 0.25s; }
.loader-sparkles span:nth-child(3) { top: 50%; right: -5%; animation-delay: 0.5s; }
.loader-sparkles span:nth-child(4) { bottom: 20%; right: 8%; animation-delay: 0.75s; }
.loader-sparkles span:nth-child(5) { bottom: 5%; left: 50%; animation-delay: 1s; }
.loader-sparkles span:nth-child(6) { bottom: 20%; left: 8%; animation-delay: 1.25s; }
.loader-sparkles span:nth-child(7) { top: 50%; left: -5%; animation-delay: 1.5s; }
.loader-sparkles span:nth-child(8) { top: 20%; left: 8%; animation-delay: 1.75s; }

@keyframes sparkle-premium {
  0%, 100% { transform: scale(0) rotate(0deg); opacity: 0; }
  50% { transform: scale(1.8) rotate(180deg); opacity: 1; box-shadow: 0 0 15px var(--gold-light), 0 0 30px rgba(212, 175, 55, 0.5); }
}

/* Text */
.loader-text-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.loader-text {
  font-family: 'Cairo', sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--gold);
  text-shadow: 0 0 30px rgba(212, 175, 55, 0.4), 0 0 60px rgba(212, 175, 55, 0.15);
  opacity: 0;
  animation: text-glow-reveal 1s ease forwards 0.5s;
}

@keyframes text-glow-reveal {
  from { opacity: 0; transform: translateY(15px); letter-spacing: 6px; }
  to { opacity: 1; transform: translateY(0); letter-spacing: 2px; }
}

/* Premium Progress Bar */
.loader-bar {
  width: 200px;
  height: 3px;
  background: rgba(212, 175, 55, 0.08);
  border-radius: 4px;
  overflow: hidden;
  opacity: 0;
  animation: text-glow-reveal 0.8s ease forwards 0.8s;
  position: relative;
}

.loader-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 4px;
  box-shadow: inset 0 0 8px rgba(212, 175, 55, 0.1);
}

.loader-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-light), var(--gold-ultra), var(--gold-light), var(--gold-dark));
  background-size: 200% 100%;
  border-radius: 4px;
  animation: bar-premium-fill 2s ease-in-out infinite;
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.5), 0 0 4px var(--gold-light);
}

@keyframes bar-premium-fill {
  0% { width: 0%; margin-left: 0; background-position: 0% 50%; }
  50% { width: 65%; margin-left: 17%; background-position: 100% 50%; }
  100% { width: 0%; margin-left: 100%; background-position: 0% 50%; }
}

/* ============================================
   AMBIENT BACKGROUND - ULTRA INTERACTIVE
   ============================================ */
.ambient-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Mouse-following glow (activated by JS) */
.ambient-mouse-glow {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.07) 0%, rgba(212, 175, 55, 0.03) 30%, transparent 60%);
  pointer-events: none;
  transition: left 0.8s ease-out, top 0.8s ease-out;
  transform: translate(-50%, -50%);
  z-index: 2;
  will-change: left, top;
}

/* Orbs */
.ambient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.15;
  will-change: transform;
}

.orb-1 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, var(--gold) 0%, transparent 70%);
  top: -150px;
  right: -150px;
  animation: orb-drift-1 18s ease-in-out infinite;
}

.orb-2 {
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, var(--gold-dark) 0%, transparent 70%);
  bottom: -120px;
  left: -120px;
  animation: orb-drift-2 22s ease-in-out infinite;
}

.orb-3 {
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, var(--gold-light) 0%, transparent 70%);
  top: 40%;
  left: 30%;
  animation: orb-drift-3 15s ease-in-out infinite;
}

.orb-4 {
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(184, 150, 46, 0.6) 0%, transparent 70%);
  top: 20%;
  right: 20%;
  animation: orb-drift-4 20s ease-in-out infinite;
}

.orb-5 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(240, 208, 96, 0.4) 0%, transparent 70%);
  bottom: 30%;
  right: -100px;
  animation: orb-drift-5 25s ease-in-out infinite;
}

.orb-6 {
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.5) 0%, transparent 70%);
  top: 60%;
  left: -50px;
  animation: orb-drift-6 17s ease-in-out infinite;
}

@keyframes orb-drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.15; }
  25% { transform: translate(-80px, 50px) scale(1.15); opacity: 0.22; }
  50% { transform: translate(-40px, 100px) scale(0.95); opacity: 0.12; }
  75% { transform: translate(-100px, 30px) scale(1.08); opacity: 0.18; }
}

@keyframes orb-drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.12; }
  25% { transform: translate(60px, -40px) scale(1.2); opacity: 0.18; }
  50% { transform: translate(100px, -80px) scale(0.9); opacity: 0.1; }
  75% { transform: translate(40px, -60px) scale(1.12); opacity: 0.16; }
}

@keyframes orb-drift-3 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.08; }
  33% { transform: translate(50px, -40px) scale(1.35); opacity: 0.15; }
  66% { transform: translate(-60px, 30px) scale(0.8); opacity: 0.06; }
}

@keyframes orb-drift-4 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.1; }
  50% { transform: translate(-50px, 70px) scale(1.25); opacity: 0.18; }
}

@keyframes orb-drift-5 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.08; }
  30% { transform: translate(-80px, -50px) scale(1.2); opacity: 0.14; }
  60% { transform: translate(-40px, 60px) scale(0.85); opacity: 0.1; }
  80% { transform: translate(-100px, 15px) scale(1.15); opacity: 0.12; }
}

@keyframes orb-drift-6 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.06; }
  40% { transform: translate(70px, -60px) scale(1.35); opacity: 0.12; }
  70% { transform: translate(25px, 40px) scale(0.9); opacity: 0.08; }
}

/* Moving Grid with Perspective */
.ambient-grid {
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  background-image: 
    linear-gradient(rgba(212, 175, 55, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212, 175, 55, 0.025) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: grid-shift 25s linear infinite;
  transform: perspective(500px) rotateX(30deg);
  transform-origin: center center;
  opacity: 0.6;
}

@keyframes grid-shift {
  0% { transform: perspective(500px) rotateX(30deg) translate(0, 0); }
  100% { transform: perspective(500px) rotateX(30deg) translate(50px, 50px); }
}

/* Light Rays */
.ambient-rays {
  position: absolute;
  top: -50%;
  left: 50%;
  width: 200%;
  height: 200%;
  transform: translateX(-50%);
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg,
    rgba(212, 175, 55, 0.025) 30deg,
    transparent 60deg,
    rgba(212, 175, 55, 0.02) 120deg,
    transparent 150deg,
    rgba(212, 175, 55, 0.025) 210deg,
    transparent 240deg,
    rgba(212, 175, 55, 0.02) 300deg,
    transparent 330deg,
    rgba(212, 175, 55, 0.025) 360deg
  );
  animation: rays-rotate 60s linear infinite;
}

.ambient-rays-2 {
  animation: rays-rotate-reverse 40s linear infinite;
  opacity: 0.7;
  background: conic-gradient(
    from 45deg at 50% 50%,
    transparent 0deg,
    rgba(240, 208, 96, 0.02) 20deg,
    transparent 40deg,
    rgba(184, 150, 46, 0.025) 100deg,
    transparent 130deg,
    rgba(212, 175, 55, 0.02) 190deg,
    transparent 220deg,
    rgba(240, 208, 96, 0.025) 280deg,
    transparent 310deg,
    rgba(184, 150, 46, 0.02) 360deg
  );
}

@keyframes rays-rotate {
  from { transform: translateX(-50%) rotate(0deg); }
  to { transform: translateX(-50%) rotate(360deg); }
}

@keyframes rays-rotate-reverse {
  from { transform: translateX(-50%) rotate(360deg); }
  to { transform: translateX(-50%) rotate(0deg); }
}

/* ============================================
   FLOATING GEOMETRIC SHAPES - Enhanced
   ============================================ */
.floating-shapes {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.shape {
  position: absolute;
  border: 1px solid rgba(212, 175, 55, 0.08);
  opacity: 0;
  animation: shape-float linear infinite;
  backdrop-filter: blur(1px);
}

.shape-1 { width: 45px; height: 45px; border-radius: 50%; top: 15%; left: 10%; animation-duration: 20s; animation-delay: 0s; }
.shape-2 { width: 65px; height: 65px; top: 70%; right: 15%; animation-duration: 25s; animation-delay: 2s; transform: rotate(45deg); }
.shape-3 { width: 35px; height: 35px; border-radius: 50%; top: 45%; right: 8%; animation-duration: 18s; animation-delay: 4s; }
.shape-4 { width: 55px; height: 55px; bottom: 20%; left: 20%; animation-duration: 22s; animation-delay: 1s; transform: rotate(30deg); }
.shape-5 { width: 28px; height: 28px; border-radius: 50%; top: 30%; left: 70%; animation-duration: 16s; animation-delay: 3s; }
.shape-6 { width: 50px; height: 50px; bottom: 40%; right: 25%; animation-duration: 28s; animation-delay: 5s; transform: rotate(60deg); }
.shape-7 { width: 38px; height: 38px; border-radius: 50%; top: 80%; left: 40%; animation-duration: 19s; animation-delay: 2.5s; }
.shape-8 { width: 60px; height: 60px; top: 10%; right: 35%; animation-duration: 24s; animation-delay: 6s; transform: rotate(15deg); }

@keyframes shape-float {
  0% { opacity: 0; transform: translateY(0) rotate(0deg) scale(0.5); }
  15% { opacity: 0.5; }
  50% { opacity: 0.7; transform: translateY(-70px) rotate(180deg) scale(1.1); border-color: rgba(212, 175, 55, 0.15); box-shadow: 0 0 20px rgba(212, 175, 55, 0.05); }
  85% { opacity: 0.4; }
  100% { opacity: 0; transform: translateY(-140px) rotate(360deg) scale(0.5); }
}

/* ============================================
   ANIMATED LINES - Enhanced with Glow
   ============================================ */
.animated-lines {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.line {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.06), rgba(212, 175, 55, 0.2), rgba(212, 175, 55, 0.06), transparent);
  animation: line-sweep linear infinite;
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.1);
}

.line-1 { width: 250px; top: 20%; animation-duration: 8s; animation-delay: 0s; }
.line-2 { width: 180px; top: 40%; animation-duration: 12s; animation-delay: 2s; }
.line-3 { width: 220px; top: 60%; animation-duration: 10s; animation-delay: 4s; }
.line-4 { width: 150px; top: 80%; animation-duration: 9s; animation-delay: 1s; }
.line-5 { width: 200px; top: 50%; animation-duration: 14s; animation-delay: 6s; }

/* Vertical lines */
.line-v {
  position: absolute;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(212, 175, 55, 0.06), rgba(212, 175, 55, 0.15), rgba(212, 175, 55, 0.06), transparent);
  animation: line-sweep-v linear infinite;
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.08);
}

.line-v-1 { height: 200px; left: 15%; animation-duration: 10s; animation-delay: 3s; }
.line-v-2 { height: 160px; left: 75%; animation-duration: 13s; animation-delay: 5s; }
.line-v-3 { height: 180px; left: 45%; animation-duration: 11s; animation-delay: 7s; }

@keyframes line-sweep {
  0% { left: -250px; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: calc(100% + 250px); opacity: 0; }
}

@keyframes line-sweep-v {
  0% { top: -200px; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: calc(100% + 200px); opacity: 0; }
}

/* ============================================
   FLOATING STARS (JS-created) - Enhanced
   ============================================ */
.floating-star {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--gold-ultra);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.8), 0 0 16px rgba(212, 175, 55, 0.4), 0 0 24px rgba(212, 175, 55, 0.2);
  animation: star-twinkle ease-in-out infinite;
  pointer-events: none;
}

@keyframes star-twinkle {
  0%, 100% { opacity: 0; transform: scale(0.3); }
  50% { opacity: 1; transform: scale(1.5); box-shadow: 0 0 12px rgba(212, 175, 55, 1), 0 0 24px rgba(212, 175, 55, 0.6), 0 0 40px rgba(212, 175, 55, 0.3); }
}

/* ---------- Floating Particles ---------- */
#particles {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.particle {
  position: absolute;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0;
  animation: float-particle linear infinite;
}

@keyframes float-particle {
  0% { transform: translateY(110vh) translateX(0) scale(0); opacity: 0; }
  10% { opacity: 0.5; }
  50% { transform: translateY(50vh) translateX(30px) scale(1); }
  90% { opacity: 0.5; }
  100% { transform: translateY(-10vh) translateX(-20px) scale(0.5); opacity: 0; }
}

/* Golden dust particles */
.golden-dust {
  position: absolute;
  border-radius: 50%;
  background: var(--gold-ultra);
  pointer-events: none;
  animation: dust-drift linear infinite;
}

@keyframes dust-drift {
  0% { transform: translate(0, 0) scale(0); opacity: 0; }
  20% { opacity: 0.8; transform: translate(10px, -20px) scale(1); }
  80% { opacity: 0.3; }
  100% { transform: translate(-30px, -100px) scale(0); opacity: 0; }
}

/* ============================================
   CANVAS OVERLAY for interactive particles
   ============================================ */
#interactive-canvas {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* ============================================
   MAIN CONTAINER
   ============================================ */
.main-container {
  position: relative;
  z-index: 5;
  max-width: 520px;
  margin: 0 auto;
  padding: 40px 20px 30px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ============================================
   LOGO & NAME SECTION
   ============================================ */
.logo-section {
  text-align: center;
  margin-bottom: 36px;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.8s ease forwards 0.3s;
}

.logo-wrapper-clean {
  width: 150px;
  height: 150px;
  margin: 0 auto 20px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-logo-clean {
  width: 140px;
  height: 140px;
  object-fit: contain;
  filter: drop-shadow(0 0 25px rgba(212, 175, 55, 0.35));
  transition: filter var(--transition-smooth), transform var(--transition-smooth);
}

.main-logo-clean:hover {
  filter: drop-shadow(0 0 45px rgba(212, 175, 55, 0.6)) drop-shadow(0 0 80px rgba(240, 208, 96, 0.2));
  transform: scale(1.08);
}

.logo-glow-effect {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.12) 0%, transparent 70%);
  animation: glow-mega-breathe 4s ease-in-out infinite;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.lawyer-name {
  font-family: 'Cairo', sans-serif;
  font-size: 32px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--gold-ultra) 0%, var(--gold-light) 25%, var(--gold) 50%, var(--gold-dark) 75%, var(--gold-light) 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 4px;
  animation: gold-shimmer 4s ease-in-out infinite;
}

@keyframes gold-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.lawyer-title {
  font-family: 'Cairo', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 2px;
}

.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  position: relative;
}

.divider::before,
.divider::after {
  content: '';
  height: 1px;
  width: 60px;
  background: linear-gradient(90deg, transparent, var(--gold-glow), transparent);
}

.divider-icon {
  margin: 0 16px;
  color: var(--gold);
  font-size: 14px;
  opacity: 0.6;
  animation: icon-glow 3s ease-in-out infinite;
}

@keyframes icon-glow {
  0%, 100% { opacity: 0.4; text-shadow: none; }
  50% { opacity: 0.8; text-shadow: 0 0 10px rgba(212, 175, 55, 0.4); }
}

/* ============================================
   CONTACT CARDS
   ============================================ */
.contact-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 28px;
}

.contact-card {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: default;
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
  opacity: 0;
  transform: translateY(20px);
}

.contact-card:nth-child(1) { animation: fadeInUp 0.6s ease forwards 0.5s; }
.contact-card:nth-child(2) { animation: fadeInUp 0.6s ease forwards 0.65s; }
.contact-card:nth-child(3) { animation: fadeInUp 0.6s ease forwards 0.8s; }
.contact-card:nth-child(4) { animation: fadeInUp 0.6s ease forwards 0.95s; }

.contact-card:hover {
  transform: translateY(-5px);
}

.card-bg {
  position: absolute;
  inset: 0;
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--radius-lg);
  z-index: 0;
}

.card-border {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  z-index: 1;
  transition: border-color var(--transition-smooth), box-shadow var(--transition-smooth);
}

.contact-card:hover .card-border {
  border-color: rgba(212, 175, 55, 0.35);
  box-shadow: 0 4px 30px rgba(212, 175, 55, 0.08), inset 0 0 30px rgba(212, 175, 55, 0.02);
}

/* Card shine effect on hover */
.card-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(212, 175, 55, 0.04) 45%, rgba(212, 175, 55, 0.08) 50%, rgba(212, 175, 55, 0.04) 55%, transparent 60%);
  background-size: 250% 100%;
  background-position: 200% 0;
  border-radius: var(--radius-lg);
  transition: background-position 0.8s ease;
}

.contact-card:hover .card-bg::after {
  background-position: -50% 0;
}

.card-content {
  position: relative;
  z-index: 2;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.card-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: all var(--transition-smooth);
}

.card-info {
  flex: 1;
  min-width: 0;
}

.card-title {
  font-family: 'Cairo', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.card-subtitle {
  font-family: 'Cairo', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}

.card-actions {
  display: flex;
  gap: 8px;
  margin-right: auto;
  margin-left: 0;
}

.action-btn {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  text-decoration: none;
  transition: all var(--transition-fast);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.action-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  opacity: 0;
  transition: opacity 0.3s;
}

.action-btn:hover {
  transform: scale(1.15);
}

.action-btn:active {
  transform: scale(0.95);
}

/* Platform Colors */
[data-platform="phone"] .card-icon,
[data-platform="phone2"] .card-icon {
  color: var(--whatsapp);
  background: rgba(37, 211, 102, 0.08);
  border: 1px solid rgba(37, 211, 102, 0.15);
}

[data-platform="email"] .card-icon {
  color: var(--email-red);
  background: rgba(234, 67, 53, 0.08);
  border: 1px solid rgba(234, 67, 53, 0.15);
}

[data-platform="facebook"] .card-icon {
  color: var(--facebook);
  background: rgba(24, 119, 242, 0.08);
  border: 1px solid rgba(24, 119, 242, 0.15);
}

.whatsapp-btn {
  background: rgba(37, 211, 102, 0.1);
  color: var(--whatsapp);
  border: 1px solid rgba(37, 211, 102, 0.2);
}
.whatsapp-btn:hover {
  background: rgba(37, 211, 102, 0.2);
  box-shadow: 0 0 25px rgba(37, 211, 102, 0.3);
}

.call-btn {
  background: rgba(77, 159, 255, 0.1);
  color: var(--phone-blue);
  border: 1px solid rgba(77, 159, 255, 0.2);
}
.call-btn:hover {
  background: rgba(77, 159, 255, 0.2);
  box-shadow: 0 0 25px rgba(77, 159, 255, 0.3);
}

.email-btn {
  background: rgba(234, 67, 53, 0.1);
  color: var(--email-red);
  border: 1px solid rgba(234, 67, 53, 0.2);
}
.email-btn:hover {
  background: rgba(234, 67, 53, 0.2);
  box-shadow: 0 0 25px rgba(234, 67, 53, 0.3);
}

.facebook-btn {
  background: rgba(24, 119, 242, 0.1);
  color: var(--facebook);
  border: 1px solid rgba(24, 119, 242, 0.2);
}
.facebook-btn:hover {
  background: rgba(24, 119, 242, 0.2);
  box-shadow: 0 0 25px rgba(24, 119, 242, 0.3);
}

/* Hover border effects per platform */
[data-platform="phone"]:hover .card-border,
[data-platform="phone2"]:hover .card-border {
  border-color: rgba(37, 211, 102, 0.35);
  box-shadow: 0 4px 30px rgba(37, 211, 102, 0.08);
}

[data-platform="email"]:hover .card-border {
  border-color: rgba(234, 67, 53, 0.35);
  box-shadow: 0 4px 30px rgba(234, 67, 53, 0.08);
}

[data-platform="facebook"]:hover .card-border {
  border-color: rgba(24, 119, 242, 0.35);
  box-shadow: 0 4px 30px rgba(24, 119, 242, 0.08);
}

/* ============================================
   SAVE CONTACT BUTTON
   ============================================ */
.save-contact-section {
  width: 100%;
  margin-bottom: 28px;
  opacity: 0;
  animation: fadeInUp 0.6s ease forwards 1.1s;
}

.save-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  background: linear-gradient(135deg, var(--gold-dark), var(--gold), var(--gold-light));
  border: none;
  border-radius: var(--radius-lg);
  color: #0a0a0a;
  font-family: 'Cairo', sans-serif;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-smooth);
  position: relative;
  overflow: hidden;
}

.save-btn::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--gold), var(--gold-light), var(--gold-ultra), var(--gold));
  background-size: 300% 300%;
  z-index: -1;
  animation: glow-rotate 3s linear infinite;
  filter: blur(12px);
  opacity: 0.4;
}

@keyframes glow-rotate {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.save-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 40px rgba(212, 175, 55, 0.35);
}

.save-btn:active {
  transform: translateY(0);
}

.save-btn i {
  font-size: 18px;
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  text-align: center;
  padding-top: 16px;
  border-top: 1px solid rgba(212, 175, 55, 0.08);
  width: 100%;
  opacity: 0;
  animation: fadeInUp 0.6s ease forwards 1.25s;
}

.footer-text {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 400;
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 480px) {
  .main-container { padding: 30px 16px 24px; }
  .logo-wrapper-clean { width: 120px; height: 120px; }
  .main-logo-clean { width: 110px; height: 110px; }
  .lawyer-name { font-size: 28px; }
  .card-content { padding: 14px 16px; gap: 12px; }
  .card-icon { width: 42px; height: 42px; min-width: 42px; font-size: 18px; }
  .card-title { font-size: 13px; }
  .card-subtitle { font-size: 12px; }
  .action-btn { width: 38px; height: 38px; font-size: 15px; }
  .loader-logo { width: 120px; height: 120px; }
  .loader-logo-wrapper { width: 160px; height: 160px; }
  .loader-ring-1 { width: 220px; height: 220px; }
  .loader-ring-2 { width: 250px; height: 250px; }
  .loader-ring-3 { width: 280px; height: 280px; }
  .loader-orbit-dots { width: 240px; height: 240px; }
}

@media (min-width: 520px) {
  .main-container { padding: 50px 24px 30px; }
}

/* ============================================
   TOUCH RIPPLE EFFECT
   ============================================ */
.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.15);
  transform: scale(0);
  animation: ripple-expand 0.6s ease-out;
  pointer-events: none;
  z-index: 10;
}

@keyframes ripple-expand {
  to { transform: scale(4); opacity: 0; }
}