* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: #ffffff;
  color: #111111;
  overflow-x: hidden;
  touch-action: pan-y;
}

.glass-nav {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(234, 234, 234, 0.9);
}
@supports (backdrop-filter: blur(12px)) {
  .glass-nav {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}

.glass-card {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(240, 240, 245, 0.9);
  transform: translateZ(0);
}

.bg-dot-pattern {
  background-image: radial-gradient(
    rgba(17, 17, 17, 0.05) 1px,
    transparent 1px
  );
  background-size: 24px 24px;
}

.step-card {
  will-change: transform, opacity;
  transition:
    opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1),
    transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.step-card.active {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  pointer-events: auto !important;
}
.step-card.inactive {
  opacity: 0 !important;
  transform: translate3d(0, 16px, 0) scale(0.97) !important;
  pointer-events: none !important;
}

.app-screen {
  will-change: transform, opacity;
  transform: translateZ(0);
  transition:
    opacity 0.35s cubic-bezier(0.25, 1, 0.5, 1),
    transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}
.app-screen.active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  z-index: 10;
}
.app-screen.inactive {
  opacity: 0;
  transform: translate3d(0, 8px, 0) scale(0.97);
  z-index: 1;
}

.mobile-step-content {
  will-change: transform, opacity;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

#features-scroll {
  height: 400vh;
  position: relative;
  z-index: 10;
}




#premium-beam {
  /* Genera un segmento de trazo luminoso de ~180px */
  stroke-dasharray: 180 800;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 6px rgba(108, 62, 232, 0.6));
}