body,
        html {
  font-size: 16px;
  overflow-x: hidden;
  position: relative;
}

.gradient-text {
  background: linear-gradient(135deg, #0ea5e9, #38bdf8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

#journeyProgress {
  transition: box-shadow 0.3s ease;
}

#journeyProgress::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(14,165,233,0.4), rgba(56,189,248,0.4));
  filter: blur(12px);
  opacity: 0.5;
}

.glass-effect {
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(56, 189, 248, 0.1);
}

.nav-blur {
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  background: rgba(15, 23, 42, 0.95);
}

.gradient-border {
  position: relative;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.1), rgba(56, 189, 248, 0.1));
  border: 1px solid transparent;
  background-clip: padding-box;
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, #0ea5e9, #38bdf8);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.3;
  transition: opacity 0.3s ease;
}

.gradient-border:hover::before {
  opacity: 1;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.bg-gradient {
  /* upgrade to a true vertical gradient so sections blend better */
  background: linear-gradient(180deg, #0b1222 0%, #0a1020 100%);
}

/* global page gradient for a continuous, smooth backdrop */

body.bg-dark {
  background:
                radial-gradient(600px 300px at 80% -10%, rgba(14, 165, 233, 0.08), transparent 60%),
                radial-gradient(600px 300px at -10% 110%, rgba(56, 189, 248, 0.08), transparent 60%),
                linear-gradient(180deg, #0a1020 0%, #0b1426 50%, #0a1020 100%);
  background-attachment: fixed, fixed, fixed;
}

/* smooth top/bottom fades on sections to blend between surfaces */

.section-blend,
        .pin-spacer {
  isolation: isolate;
  /* keep pseudo-elements local */
  position: relative;
  z-index: 1;
  /* ensure content sits above fades */
}

.section-blend::before,
        .section-blend::after,
        .pin-spacer::before,
        .pin-spacer::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 72px;
  pointer-events: none;
  z-index: 0;
}

/* fade into previous section/background */

.section-blend::before,
        .pin-spacer::before {
  top: -1px;
  background: linear-gradient(to bottom, rgba(8, 10, 33, 1), rgba(8, 10, 33, 0));
}

/* fade into next section/background */

.section-blend::after,
        .pin-spacer::after {
  bottom: -1px;
  background: linear-gradient(to top, rgba(8, 10, 33, 1), rgba(8, 10, 33, 0));
}

/* Initial states for animations */

.hero-title .line {
  opacity: 0;
  transform: translateY(50px);
}

.hero-ctas {
  opacity: 0;
  transform: translateY(30px);
}

.hero-visual {
  opacity: 0;
}

.hero-card {
  opacity: 0;
  transform: translateY(50px) rotate(0deg);
}

/* Scroll progress bar */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #0ea5e9, #38bdf8);
  transform-origin: left;
  z-index: 9999;
  transform: scaleX(0);
}

.testimonial-card {
  overflow: hidden;
}

#testimonials .testimonial-card[data-hover="aurora"]::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(240px 240px at var(--mx, 50%) var(--my, 50%),
                    rgba(56, 189, 248, 0.30) 0%,
                    rgba(147, 51, 234, 0.22) 35%,
                    rgba(17, 24, 39, 0.0) 65%);
  filter: blur(18px) saturate(120%);
  opacity: 0;
  transition: opacity 280ms ease, transform 320ms ease;
  transform: scale(0.98);
}

#testimonials .testimonial-card[data-hover="aurora"]:hover::before {
  opacity: 1;
  transform: scale(1);
}

#testimonials .testimonial-card[data-hover="aurora"] {
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
  border: 1px solid rgba(56, 189, 248, 0.25);
  box-shadow: 0 0 0 rgba(56, 189, 248, 0);
}

#testimonials .testimonial-card[data-hover="aurora"]:hover {
  border-color: rgba(147, 51, 234, 0.45);
  box-shadow: 0 10px 32px rgba(56, 189, 248, 0.15), inset 0 0 0 1px rgba(147, 51, 234, 0.15);
  transform: translateY(-2px);
}