/* ==========================================================================
   STYLES-2.CSS - ZOOMINFO B2B DATA ENGINE (VARIANT 2 - HIGH CONTRAST DARK)
   BACKGROUND: NAVY DEEP DEEP (#050B14)
   SURFACES & CARDS: MIDNIGHT SLATE (#0E1726)
   ACCENT COLOR: ELECTRIC SKY BLUE (#0EA5E9) & LIGHT BLUE (#38BDF8)
   CTA BUTTON: NEADOO ORANGE (#FF8000)
   ========================================================================== */

/* 1. Global Reset & Dark Theme Body Base */
body[data-variant="2"] {
  background-color: #050B14 !important;
  color: #F8FAFC !important;
  font-family: 'Inter', sans-serif !important;
  -webkit-font-smoothing: subpixel-antialiased !important;
}

body[data-variant="2"] main,
body[data-variant="2"] main > div,
body[data-variant="2"] section:not(#side-drawer *) {
  background-color: #050B14 !important;
  color: #F8FAFC !important;
}

/* 2. Top Rule Accent Bar */
body[data-variant="2"] .top-rule {
  height: 4px;
  background: linear-gradient(90deg, #0EA5E9 0%, #38BDF8 100%);
}

/* 3. Hero Section (Deep Navy with Glow) */
body[data-variant="2"] section:first-of-type {
  background: radial-gradient(circle at 50% 0%, #0E243A 0%, #050B14 70%) !important;
  color: #FFFFFF !important;
  position: relative !important;
}

/* Hero Typography H1 */
body[data-variant="2"] h1 {
  color: #FFFFFF !important;
  font-size: 48px !important;
  line-height: 1.18 !important;
  letter-spacing: -0.02em !important;
  font-weight: 900 !important;
}

body[data-variant="2"] h1 .bg-clip-text {
  color: transparent !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  background-image: linear-gradient(to right, #FF8000, #38BDF8, #0EA5E9) !important;
  font-weight: 900 !important;
}

/* 4. Dark Cards & Surfaces (Midnight Slate #0E1726 with Sky Blue Glass Borders) */
body[data-variant="2"] .bg-[#14101F],
body[data-variant="2"] .bg-[#161024],
body[data-variant="2"] .bg-[#1A1428],
body[data-variant="2"] .bg-[#0D0917],
body[data-variant="2"] .bg-[#16121F],
body[data-variant="2"] .bg-white,
body[data-variant="2"] .bg-surface,
body[data-variant="2"] .bg-gray-50,
body[data-variant="2"] .step-card,
body[data-variant="2"] .faq-item {
  background-color: #0E1726 !important;
  border: 1px solid rgba(14, 165, 233, 0.25) !important;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.6) !important;
  color: #F8FAFC !important;
}

/* Replace Stark White & Current Borders with Sky Blue Glass Tint */
body[data-variant="2"] [class*="border-white"],
body[data-variant="2"] [class*="border-current"] {
  border-color: rgba(14, 165, 233, 0.25) !important;
}

/* 5. Typography Colors inside Dark Section */
body[data-variant="2"] h2,
body[data-variant="2"] h3,
body[data-variant="2"] h4,
body[data-variant="2"] .text-[#16121F],
body[data-variant="2"] .text-gray-900,
body[data-variant="2"] .text-slate-900,
body[data-variant="2"] .text-gray-800 {
  color: #FFFFFF !important;
}

body[data-variant="2"] p,
body[data-variant="2"] li,
body[data-variant="2"] .text-gray-600,
body[data-variant="2"] .text-slate-500,
body[data-variant="2"] .text-gray-500,
body[data-variant="2"] .text-white\/70,
body[data-variant="2"] .text-white\/60 {
  color: #94A3B8 !important;
}

/* 6. High Contrast Sky Blue Icons */
body[data-variant="2"] .material-symbols-outlined:not(#side-drawer *) {
  color: #38BDF8 !important;
}

body[data-variant="2"] .fast-icon-1,
body[data-variant="2"] .fast-icon-2,
body[data-variant="2"] .fast-icon-3,
body[data-variant="2"] .fast-icon-4,
body[data-variant="2"] .w-12.h-12.rounded-xl {
  background-color: rgba(14, 165, 233, 0.18) !important;
  color: #38BDF8 !important;
  border: 1px solid rgba(14, 165, 233, 0.35) !important;
}

/* 7. Hover Card Effects */
body[data-variant="2"] .step-card:hover,
body[data-variant="2"] .faq-item:hover {
  border-color: #0EA5E9 !important;
  box-shadow: 0 0 25px rgba(14, 165, 233, 0.25) !important;
}

/* 8. Conversion Orange Button (Neadoo CTA - Flat Style) */
body[data-variant="2"] .btn-orange-ripple,
body[data-variant="2"] button[type="submit"] {
  background-color: #FF8000 !important;
  color: #FFFFFF !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
}