/* Eksperlet live visual fix - 2026-07-18
   Purpose: visible but not loud brand warmth, pastel blue bubbles, and calmer carousel density.
   This file is intentionally loaded last. */

:root {
  --eks-orange: #ff7417;
  --eks-navy: #0f172a;
  --eks-cream: #fff4e7;
  --eks-blue: #dff2ff;
}

html,
body {
  background-color: #fff4e7 !important;
  background-image:
    radial-gradient(circle at 8% 8%, rgba(255, 116, 23, .18), transparent 340px),
    radial-gradient(circle at 88% 16%, rgba(59, 130, 246, .24), transparent 430px),
    radial-gradient(circle at 16% 84%, rgba(34, 211, 238, .18), transparent 420px),
    radial-gradient(circle at 92% 90%, rgba(255, 189, 96, .17), transparent 390px),
    linear-gradient(135deg, #fff7ee 0%, #f8e7d4 38%, #eaf7ff 72%, #fff0df 100%) !important;
}

body::before {
  opacity: .24 !important;
  background-image:
    linear-gradient(rgba(255, 116, 23, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 130, 246, .045) 1px, transparent 1px) !important;
  background-size: 46px 46px !important;
}

main,
section:not(.hero):not(.section-hero),
.section-process,
.section-services,
.section-faq,
.support-page,
.results-page,
.profile-page,
.booking-page {
  background-color: transparent !important;
  background-image:
    radial-gradient(circle at 12% 10%, rgba(255, 116, 23, .13), transparent 310px),
    radial-gradient(circle at 86% 18%, rgba(96, 165, 250, .22), transparent 390px),
    radial-gradient(circle at 20% 88%, rgba(34, 211, 238, .14), transparent 360px),
    linear-gradient(135deg, rgba(255, 247, 236, .92), rgba(241, 248, 255, .90)) !important;
}

.section-process,
.section-services,
.section-faq {
  position: relative !important;
  overflow: hidden !important;
}

.section-process::before,
.section-services::before,
.section-faq::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 7% 22%, rgba(59, 130, 246, .18), transparent 150px),
    radial-gradient(circle at 88% 34%, rgba(255, 116, 23, .12), transparent 180px),
    radial-gradient(circle at 52% 86%, rgba(34, 211, 238, .13), transparent 155px) !important;
  z-index: 0 !important;
}

.section-process > *,
.section-services > *,
.section-faq > * {
  position: relative !important;
  z-index: 1 !important;
}

.process-card,
.service-card,
.faq-item,
.contact-card,
.support-card,
.login-card,
.shop-card,
.result-card,
.card,
.box,
.panel {
  background-color: rgba(255, 251, 246, .96) !important;
  background-image:
    radial-gradient(circle at 0% 0%, rgba(96, 165, 250, .12), transparent 150px),
    radial-gradient(circle at 100% 0%, rgba(255, 116, 23, .10), transparent 155px),
    linear-gradient(180deg, rgba(255, 253, 248, .98), rgba(255, 244, 232, .94)) !important;
  border-color: rgba(255, 116, 23, .22) !important;
  box-shadow:
    0 20px 48px rgba(87, 45, 10, .085),
    0 12px 30px rgba(59, 130, 246, .075) !important;
}

.process-card:hover,
.service-card:hover,
.faq-item:hover,
.shop-card:hover,
.result-card:hover {
  transform: translateY(-7px) !important;
  border-color: rgba(255, 116, 23, .42) !important;
  box-shadow:
    0 26px 60px rgba(87, 45, 10, .13),
    0 16px 38px rgba(59, 130, 246, .11) !important;
}

.service-card .card-icon,
.process-card .card-icon {
  background:
    radial-gradient(circle at 25% 15%, rgba(59, 130, 246, .20), transparent 55%),
    linear-gradient(135deg, #fff2df, #eef8ff) !important;
  color: var(--eks-orange) !important;
}

.services-carousel-wrapper {
  max-width: 1240px !important;
  margin: 0 auto !important;
  overflow: visible !important;
}

.services-scroll-container {
  display: flex !important;
  gap: 24px !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  padding: 8px 48px 36px !important;
  scrollbar-width: none !important;
}

.services-scroll-container::-webkit-scrollbar {
  display: none !important;
}

.services-scroll-container .service-card {
  flex: 0 0 236px !important;
  width: 236px !important;
  min-width: 236px !important;
  max-width: 236px !important;
  min-height: 330px !important;
  scroll-snap-align: start !important;
}

@media (min-width: 1900px) {
  .services-carousel-wrapper {
    max-width: 1320px !important;
  }
}

@media (max-width: 768px) {
  html,
  body {
    background-image:
      radial-gradient(circle at 0% 2%, rgba(255, 116, 23, .17), transparent 250px),
      radial-gradient(circle at 100% 12%, rgba(59, 130, 246, .20), transparent 280px),
      radial-gradient(circle at 10% 82%, rgba(34, 211, 238, .14), transparent 260px),
      linear-gradient(135deg, #fff7ee 0%, #f7e8d8 52%, #edf8ff 100%) !important;
  }

  .services-scroll-container {
    gap: 16px !important;
    padding: 4px 24px 30px !important;
  }

  .services-scroll-container .service-card {
    flex: 0 0 78vw !important;
    width: 78vw !important;
    min-width: 260px !important;
    max-width: 320px !important;
  }
}

/* Live2: make the page feel alive in the user's real wide Chrome viewport. */
.services-carousel-wrapper {
  max-width: 1120px !important;
}

.services-scroll-container {
  padding-left: 44px !important;
  padding-right: 44px !important;
}

.services-scroll-container .service-card {
  flex-basis: 230px !important;
  width: 230px !important;
  min-width: 230px !important;
  max-width: 230px !important;
}

@media (min-width: 1900px) {
  .services-carousel-wrapper {
    max-width: 1180px !important;
  }

  .services-scroll-container .service-card {
    flex-basis: 232px !important;
    width: 232px !important;
    min-width: 232px !important;
    max-width: 232px !important;
  }
}

.section-faq {
  background-image:
    radial-gradient(circle at 18% 14%, rgba(255, 116, 23, .14), transparent 330px),
    radial-gradient(circle at 78% 26%, rgba(59, 130, 246, .26), transparent 410px),
    radial-gradient(circle at 54% 88%, rgba(34, 211, 238, .16), transparent 340px),
    linear-gradient(135deg, rgba(255, 244, 229, .94), rgba(230, 246, 255, .94) 72%, rgba(255, 239, 220, .92)) !important;
}

.faq-item {
  background:
    radial-gradient(circle at 0% 0%, rgba(59, 130, 246, .14), transparent 160px),
    linear-gradient(90deg, rgba(255, 255, 255, .96), rgba(255, 246, 235, .94)) !important;
  border-left: 5px solid rgba(255, 116, 23, .72) !important;
  border-top-color: rgba(96, 165, 250, .18) !important;
}

.faq-item i,
.faq-item .fa-chevron-down,
.faq-item .faq-icon {
  color: #ff7417 !important;
  background: rgba(255, 116, 23, .10) !important;
  border-radius: 999px !important;
}

.section-services .section-head,
.section-faq .section-head {
  background:
    radial-gradient(circle at 10% 0%, rgba(255, 116, 23, .12), transparent 180px),
    radial-gradient(circle at 90% 20%, rgba(59, 130, 246, .12), transparent 200px) !important;
  border-radius: 28px !important;
}

/* Live3: make the blue bubbles actually visible, not ghosted away. */
html,
body {
  background-image:
    radial-gradient(circle at 8% 8%, rgba(255, 116, 23, .16), transparent 330px),
    radial-gradient(circle at 88% 14%, rgba(59, 130, 246, .34), transparent 430px),
    radial-gradient(circle at 18% 78%, rgba(14, 165, 233, .26), transparent 410px),
    radial-gradient(circle at 82% 86%, rgba(125, 211, 252, .22), transparent 390px),
    radial-gradient(circle at 48% 42%, rgba(255, 189, 96, .12), transparent 360px),
    linear-gradient(135deg, #fff7ee 0%, #f7e8d8 35%, #e5f5ff 68%, #fff0df 100%) !important;
}

.section-process,
.section-services,
.section-faq {
  background-image:
    radial-gradient(circle at 10% 18%, rgba(14, 165, 233, .20), transparent 270px),
    radial-gradient(circle at 86% 20%, rgba(59, 130, 246, .30), transparent 360px),
    radial-gradient(circle at 22% 90%, rgba(125, 211, 252, .20), transparent 330px),
    radial-gradient(circle at 72% 72%, rgba(255, 116, 23, .10), transparent 280px),
    linear-gradient(135deg, rgba(255, 247, 236, .90), rgba(229, 245, 255, .92) 76%, rgba(255, 239, 220, .88)) !important;
}

.section-process::after,
.section-services::after,
.section-faq::after {
  content: "" !important;
  position: absolute !important;
  pointer-events: none !important;
  width: 520px !important;
  height: 520px !important;
  right: 7% !important;
  top: 12% !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 35% 35%, rgba(125, 211, 252, .30), transparent 30%),
    radial-gradient(circle at 58% 60%, rgba(59, 130, 246, .18), transparent 45%),
    radial-gradient(circle, rgba(186, 230, 253, .20), transparent 68%) !important;
  filter: blur(2px) !important;
  z-index: 0 !important;
}

.section-services::after {
  right: 4% !important;
  top: 20% !important;
}

.section-faq::after {
  left: 6% !important;
  right: auto !important;
  top: 8% !important;
}

.section-process .container,
.section-services .container,
.section-faq .container,
.section-process .section-head,
.section-services .section-head,
.section-faq .section-head,
.services-carousel-wrapper,
.faq-grid {
  position: relative !important;
  z-index: 1 !important;
}

/* Live4: no more white canvas. Strong but still brand-safe blue/cream atmosphere. */
html,
body {
  background-color: #eaf6ff !important;
  background-image:
    radial-gradient(circle at 10% 8%, rgba(255, 116, 23, .22), transparent 340px),
    radial-gradient(circle at 82% 10%, rgba(37, 99, 235, .36), transparent 460px),
    radial-gradient(circle at 18% 72%, rgba(14, 165, 233, .34), transparent 430px),
    radial-gradient(circle at 92% 86%, rgba(125, 211, 252, .30), transparent 430px),
    radial-gradient(circle at 52% 48%, rgba(255, 186, 92, .18), transparent 390px),
    linear-gradient(135deg, #fff1df 0%, #f3dfc9 30%, #dff2ff 62%, #f8ead8 100%) !important;
}

main,
section:not(.hero):not(.section-hero),
.section-process,
.section-services,
.section-faq,
.section-contact,
.support-page,
.results-page,
.profile-page,
.booking-page {
  background-color: #eaf6ff !important;
  background-image:
    radial-gradient(circle at 8% 12%, rgba(255, 116, 23, .18), transparent 310px),
    radial-gradient(circle at 84% 18%, rgba(37, 99, 235, .32), transparent 390px),
    radial-gradient(circle at 22% 88%, rgba(14, 165, 233, .27), transparent 370px),
    radial-gradient(circle at 74% 78%, rgba(255, 186, 92, .16), transparent 320px),
    linear-gradient(135deg, rgba(255, 238, 216, .86), rgba(217, 242, 255, .92) 60%, rgba(255, 232, 202, .82)) !important;
}

.section-process::before,
.section-services::before,
.section-faq::before {
  background:
    radial-gradient(circle at 12% 26%, rgba(14, 165, 233, .28), transparent 190px),
    radial-gradient(circle at 82% 28%, rgba(37, 99, 235, .26), transparent 230px),
    radial-gradient(circle at 48% 84%, rgba(125, 211, 252, .24), transparent 190px),
    radial-gradient(circle at 70% 62%, rgba(255, 116, 23, .12), transparent 190px) !important;
}

.section-process::after,
.section-services::after,
.section-faq::after {
  width: 680px !important;
  height: 680px !important;
  background:
    radial-gradient(circle at 32% 32%, rgba(56, 189, 248, .42), transparent 28%),
    radial-gradient(circle at 62% 58%, rgba(37, 99, 235, .24), transparent 44%),
    radial-gradient(circle, rgba(186, 230, 253, .28), transparent 70%) !important;
  filter: blur(1px) !important;
}

.section-services::after {
  right: 0 !important;
  top: 8% !important;
}

.section-faq::after {
  left: 0 !important;
  top: 0 !important;
}

.process-card,
.service-card,
.faq-item,
.contact-card,
.support-card,
.login-card,
.shop-card,
.result-card,
.card,
.box,
.panel {
  background-color: rgba(255, 249, 241, .92) !important;
  background-image:
    radial-gradient(circle at 0% 0%, rgba(14, 165, 233, .16), transparent 160px),
    radial-gradient(circle at 100% 0%, rgba(255, 116, 23, .12), transparent 160px),
    linear-gradient(180deg, rgba(255, 252, 246, .96), rgba(255, 239, 221, .90)) !important;
  border-color: rgba(255, 116, 23, .26) !important;
}

.faq-item {
  border-left-color: rgba(255, 116, 23, .88) !important;
  box-shadow: 0 18px 38px rgba(37, 99, 235, .09), 0 12px 32px rgba(87, 45, 10, .08) !important;
}