/* D versifi: Premium, elegant, professional */

html[data-theme="light"] body {
  background:
    radial-gradient(ellipse 1400px 900px at 10% -10%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse 1200px 800px at 90% 10%, rgba(34, 211, 238, 0.06) 0%, transparent 50%),
    linear-gradient(180deg, #F8FAFF 0%, #F1F5FF 100%);
  min-height: 100vh;
}

.hero {
  background:
    radial-gradient(ellipse 600px 400px at 0% 0%, rgba(99, 102, 241, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse 500px 350px at 100% 100%, rgba(34, 211, 238, 0.10) 0%, transparent 50%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 255, 0.90));
  border: 1px solid rgba(99, 102, 241, 0.12);
  box-shadow:
    0 4px 6px -1px rgba(99, 102, 241, 0.06),
    0 25px 50px -12px rgba(99, 102, 241, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.hero-media-wrap {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.8), rgba(241, 245, 255, 0.6));
  border: 1px solid rgba(99, 102, 241, 0.1);
  box-shadow:
    0 20px 40px -15px rgba(99, 102, 241, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  padding: 16px;
  border-radius: var(--radius-lg);
}

.hero-media {
  border-radius: 16px;
  box-shadow: 0 10px 30px -10px rgba(99, 102, 241, 0.2);
}

html[data-theme="light"] .card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 255, 0.90));
  border: 1px solid rgba(99, 102, 241, 0.08);
  box-shadow:
    0 4px 6px -1px rgba(99, 102, 241, 0.04),
    0 10px 30px -5px rgba(99, 102, 241, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

html[data-theme="light"] .card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 12px -2px rgba(99, 102, 241, 0.06),
    0 20px 40px -10px rgba(99, 102, 241, 0.12);
}

html[data-theme="light"] .section {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(248, 250, 255, 0.5));
  border: 1px solid rgba(99, 102, 241, 0.06);
  box-shadow: 0 15px 40px -15px rgba(99, 102, 241, 0.08);
}

html[data-theme="light"] .site-header {
  background: rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid rgba(99, 102, 241, 0.08);
  box-shadow: 0 4px 20px -5px rgba(99, 102, 241, 0.06);
}

html[data-theme="light"] .btn-primary {
  background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
  border: 1px solid rgba(99, 102, 241, 0.2);
  color: white;
  box-shadow: 0 4px 14px -3px rgba(99, 102, 241, 0.4);
}

html[data-theme="light"] .btn-primary:hover {
  background: linear-gradient(135deg, #818CF8 0%, #6366F1 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px -4px rgba(99, 102, 241, 0.5);
}

html[data-theme="light"] .btn {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(99, 102, 241, 0.15);
  box-shadow: 0 2px 8px -2px rgba(99, 102, 241, 0.1);
}

html[data-theme="light"] .btn:hover {
  background: rgba(255, 255, 255, 1);
  border-color: rgba(99, 102, 241, 0.25);
}

html[data-theme="light"] .badge {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(34, 211, 238, 0.06));
  border: 1px solid rgba(99, 102, 241, 0.12);
  color: #4F46E5;
}

html[data-theme="light"] .hero-kicker {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(34, 211, 238, 0.08));
  border: 1px solid rgba(99, 102, 241, 0.15);
  color: #4F46E5;
}

.hero h1 {
  background: linear-gradient(135deg, #1E1B4B 0%, #312E81 50%, #4338CA 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

html[data-theme="light"] .site-footer {
  background: linear-gradient(180deg, rgba(248, 250, 255, 0.8), rgba(241, 245, 255, 0.9));
  border-top: 1px solid rgba(99, 102, 241, 0.08);
}