/* ==========================================================================
   STYLES-1.CSS - EXACT MATCH FOR MOCKUP V3 DESKTOP (NEADOO ORIGINAL DESIGN)
   HERO GRADIENT: #5A1EC9 -> #7C32FF -> #8F4BFF
   LIGHT CONTENT SECTIONS WITH PURPLE ACCENTS & DEEP PURPLE/BLACK HEADINGS (#16121F)
   CTA BUTTON: NEADOO ORANGE (#FF8000)
   ========================================================================== */

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

body[data-variant="1"] main {
  background-color: #FFFFFF !important;
  color: #222222 !important;
}

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

/* 3. Hero Section (Exact Gradient #5A1EC9 -> #7C32FF -> #8F4BFF) */
body[data-variant="1"] section:first-of-type {
  background: linear-gradient(150deg, #5A1EC9 0%, #7C32FF 62%, #8F4BFF 100%) !important;
  color: #FFFFFF !important;
  position: relative !important;
  padding-top: 5rem !important;
  padding-bottom: 6rem !important;
}

/* Hero Typography H1 */
body[data-variant="1"] section:first-of-type h1 {
  color: #FFFFFF !important;
  font-size: 42px !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  font-weight: 800 !important;
  margin-top: 1rem !important;
  margin-bottom: 1.25rem !important;
}

body[data-variant="1"] section:first-of-type h1 .hl,
body[data-variant="1"] section:first-of-type h1 .bg-clip-text {
  background: linear-gradient(transparent 60%, rgba(255, 128, 0, 0.55) 60%) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  padding: 0 4px !important;
  display: inline !important;
}

/* Hero Subtitle & Kicker */
body[data-variant="1"] section:first-of-type .kicker,
body[data-variant="1"] section:first-of-type [class*="text-primary"] {
  color: #C9A6FF !important;
}

body[data-variant="1"] section:first-of-type p {
  color: #ECE3FF !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
}

/* 4. Light Sections (White / Light Neutral Alt) */
body[data-variant="1"] section:not(:first-of-type):not(#side-drawer *):not(#kontakt) {
  background-color: #FFFFFF !important;
  color: #222222 !important;
}

body[data-variant="1"] section:nth-of-type(even):not(#side-drawer *):not(#kontakt) {
  background-color: #F7F7F8 !important;
}

/* Headings in Light Content Sections */
body[data-variant="1"] section:not(:first-of-type):not(#kontakt) h2,
body[data-variant="1"] section:not(:first-of-type):not(#kontakt) h3,
body[data-variant="1"] section:not(:first-of-type):not(#kontakt) h4 {
  color: #16121F !important;
  font-weight: 700 !important;
}

body[data-variant="1"] section:not(:first-of-type):not(#kontakt) p,
body[data-variant="1"] section:not(:first-of-type):not(#kontakt) li,
body[data-variant="1"] section:not(:first-of-type):not(#kontakt) span:not(.material-symbols-outlined) {
  color: #444444 !important;
}

/* Cards & Surfaces in Light Sections (Excluding #kontakt) */
body[data-variant="1"] section:not(:first-of-type):not(#kontakt) .step-card {
  background-color: #FFFFFF !important;
  border: 1px solid #EAE3F5 !important;
  box-shadow: 0 10px 25px rgba(20, 10, 50, 0.06) !important;
  color: #16121F !important;
}

/* 5. Section 8 #kontakt Dark Form Card & Footer Protection */
body[data-variant="1"] #kontakt {
  background-color: #0B0813 !important;
  color: #FFFFFF !important;
}

body[data-variant="1"] #kontakt h2,
body[data-variant="1"] #kontakt p,
body[data-variant="1"] #kontakt label {
  color: #FFFFFF !important;
}

body[data-variant="1"] #kontakt .bg-gradient-to-br {
  background: linear-gradient(135deg, #14101F 0%, #0A0713 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

body[data-variant="1"] #kontakt form {
  background-color: rgba(0, 0, 0, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

body[data-variant="1"] #kontakt input {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
}

body[data-variant="1"] #kontakt button[type="submit"],
body[data-variant="1"] #kontakt .bg-\[\#FF8000\] {
  background-color: #FF8000 !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 18px rgba(255, 128, 0, 0.28) !important;
}

/* Material Symbols Icon Protection for Variant 1 */
body[data-variant="1"] .material-symbols-outlined:not(#side-drawer *) {
  color: #7C32FF !important;
}

body[data-variant="1"] section:first-of-type .material-symbols-outlined:not(#side-drawer *) {
  color: #C9A6FF !important;
}

/* Conversion CTA Buttons (Reserved Neadoo Orange #FF8000) */
.btn-orange-ripple,
body[data-variant="1"] button[type="submit"] {
  background-color: #FF8000 !important;
  color: #FFFFFF !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 18px rgba(255, 128, 0, 0.28) !important;
  transition: all 0.3s ease-in-out !important;
}

.btn-orange-ripple:hover,
body[data-variant="1"] button[type="submit"]:hover {
  background-color: #E67300 !important;
  transform: translateY(-1px) !important;
}