@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap");
* {
  font-family: "Montserrat", sans-serif;
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes borderFlow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}
@keyframes pulse {
  0%,
  100% {
    opacity: 0.25;
  }
  50% {
    opacity: 0.45;
  }
}
.animate-fade-in-up {
  animation: fadeInUp 0.8s ease-out forwards;
}
.animate-fade-in {
  animation: fadeIn 1s ease-out forwards;
}
.animate-scale-in {
  animation: scaleIn 0.6s ease-out forwards;
}
.delay-100 {
  animation-delay: 0.1s;
  opacity: 0;
}
.delay-200 {
  animation-delay: 0.2s;
  opacity: 0;
}
.delay-300 {
  animation-delay: 0.3s;
  opacity: 0;
}
.delay-400 {
  animation-delay: 0.4s;
  opacity: 0;
}
.delay-500 {
  animation-delay: 0.5s;
  opacity: 0;
}
.delay-600 {
  animation-delay: 0.6s;
  opacity: 0;
}
.glass {
  background: radial-gradient(
      1200px 600px at -10% -20%,
      rgba(147, 51, 234, 0.25),
      transparent 50%
    ),
    radial-gradient(
      1000px 700px at 110% 10%,
      rgba(236, 72, 153, 0.2),
      transparent 50%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.06),
      rgba(255, 255, 255, 0.03)
    );
  backdrop-filter: blur(14px);
}
.inner-gradient {
  background: radial-gradient(
      1200px 600px at 10% -10%,
      rgba(236, 72, 153, 0.25),
      transparent 40%
    ),
    radial-gradient(
      800px 500px at 90% 20%,
      rgba(99, 102, 241, 0.25),
      transparent 45%
    ),
    linear-gradient(180deg, rgba(17, 24, 39, 0.35), rgba(17, 24, 39, 0.65));
}
.grid-overlay {
  background-image: linear-gradient(
      to right,
      rgba(255, 255, 255, 0.1) 1px,
      transparent 1px
    ),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px;
}
.shadow-elevate {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.abon-card {
  position: relative;
  border-radius: 1rem;
  isolation: isolate;
  --b: 2px;
  --r: 1rem;
}
.abon-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r);
  padding: var(--b);
  background: linear-gradient(90deg, #ec4899, #9333ea, #6366f1, #ec4899);
  background-size: 300% 100%; /* grand pour pouvoir "glisser" */
  animation: borderFlow 6s ease-in-out infinite alternate;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  z-index: 0;
  pointer-events: none;
}
.abon-card::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: calc(var(--r) + 8px);
  background: linear-gradient(
    90deg,
    rgba(236, 72, 153, 0.35),
    rgba(147, 51, 234, 0.35),
    rgba(99, 102, 241, 0.35),
    rgba(236, 72, 153, 0.35)
  );
  background-size: 300% 100%;
  filter: blur(14px);
  opacity: 0.35;
  animation: borderFlow 6s ease-in-out infinite alternate,
    pulse 3s ease-in-out infinite;
  z-index: -1;
  pointer-events: none;
}
.pricing-featured {
  position: relative;
  border-radius: 1.25rem;
  padding: 2px;
  background: linear-gradient(
    120deg,
    #6366f1,
    #ec4899,
    #22c55e,
    #f97316,
    #6366f1
  );
  background-size: 220% 220%;
  animation: borderFlow 10s ease-in-out infinite alternate;
}
.pricing-featured-inner {
  border-radius: 1.15rem;
  background-color: rgba(15, 23, 42, 0.97);
  border: 1px solid rgba(148, 163, 184, 0.28);
  padding: 1.5rem;
  height: 100%;
}
.section {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
  border-top: 1px solid rgba(148, 163, 184, 0.22); /* slate-500/40 */
}
html {
  scroll-behavior: smooth;
}
body {
  overflow-x: hidden;
  padding-bottom: 4rem;
}