body { font-family: 'Montserrat', system-ui, sans-serif; }

/* Hero / page gradient backgrounds */
.gradient-hero {
  background:
    radial-gradient(60% 80% at 80% 0%, rgba(97,40,255,0.10), transparent 60%),
    radial-gradient(50% 60% at 0% 30%, rgba(97,40,255,0.06), transparent 60%),
    linear-gradient(180deg, #FAFAFB 0%, #F4F1FF 100%);
}
.gradient-cta-dark {
  background:
    radial-gradient(80% 100% at 50% 0%, rgba(97,40,255,0.35), transparent 60%),
    linear-gradient(180deg, #0C1115 0%, #1A1030 100%);
}
.gradient-cta-light {
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(97,40,255,0.10), transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, #F6F3FF 100%);
}

.ring-brand-soft { box-shadow: 0 0 0 1px rgba(97,40,255,0.15), 0 30px 60px -20px rgba(97,40,255,0.25); }

/* Decorative purple blob (used behind sectors section etc.) */
.blob {
  position: absolute; border-radius: 9999px; pointer-events: none;
  background: radial-gradient(circle at 30% 30%, rgba(97,40,255,0.20), rgba(97,40,255,0) 70%);
  filter: blur(20px);
}

/* Underline accent under headings */
.heading-accent {
  display: inline-block;
  border-bottom: 2px solid #6128FF;
  padding-bottom: 0.25rem;
}

/* Pastel card backgrounds */
.bg-pastel-mint   { background-color: #E8F8EE; }
.bg-pastel-blue   { background-color: #EAF2FF; }
.bg-pastel-cream  { background-color: #FFF8E1; }
.bg-pastel-rose   { background-color: #FFEBEE; }
.bg-pastel-lavender { background-color: #F1ECFF; }
.bg-pastel-lilac  { background-color: #EFE7F2; }

/* Marquee for the client logo carousel */
@keyframes marquee-x {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-track {
  display: flex; gap: 4rem; width: max-content;
  animation: marquee-x 40s linear infinite;
}
.marquee-mask {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

/* 3D tilt for the hero dashboard image */
.hero-tilt {
  transform: perspective(1600px) rotateX(8deg) rotateY(-6deg) rotateZ(-2deg);
  transform-origin: 50% 50%;
}

/* Range slider — purple thumb, lavender track, brand fill via background-image */
input[type="range"].brand-slider {
  -webkit-appearance: none;
          appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 9999px;
  background: #E3D9FF;
  outline: none;
  cursor: pointer;
}
input[type="range"].brand-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
          appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  background: #6128FF;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(97,40,255,0.4);
  cursor: grab;
}
input[type="range"].brand-slider::-webkit-slider-thumb:active { cursor: grabbing; }
input[type="range"].brand-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  background: #6128FF;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(97,40,255,0.4);
  cursor: grab;
}
input[type="range"].brand-slider::-moz-range-track {
  background: transparent;
}