:root {
      --bg: #07010d;
      --bg-soft: #12031c;
      --line: rgba(191, 110, 255, 0.14);
      --text: #f4ecff;
      --muted: #c9b3dd;
      --primary: #c026d3;
      --primary-2: #a21caf;
      --accent: #e879f9;
    }

    * {
      box-sizing: border-box;
    }

    ;

    body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      background: var(--bg);
      color: var(--text);
      overflow-x: hidden;
    }

    @keyframes gridMove {
      0% {
        transform: translateY(0);
      }

      100% {
        transform: translateY(48px);
      }
    }

    @keyframes floatBlob1 {

      0%,
      100% {
        transform: translate3d(0, 0, 0) scale(1);
      }

      50% {
        transform: translate3d(30px, -20px, 0) scale(1.08);
      }
    }

    @keyframes floatBlob2 {

      0%,
      100% {
        transform: translate3d(0, 0, 0) scale(1);
      }

      50% {
        transform: translate3d(-40px, 25px, 0) scale(1.05);
      }
    }

    @keyframes beamDrift {
      0% {
        transform: translateX(-10%) rotate(-14deg);
        opacity: .15;
      }

      50% {
        opacity: .45;
      }

      100% {
        transform: translateX(12%) rotate(-14deg);
        opacity: .15;
      }
    }

    @keyframes ringPulse {

      0%,
      100% {
        transform: translate(-50%, -50%) scale(0.96);
        opacity: 0.3;
      }

      50% {
        transform: translate(-50%, -50%) scale(1.12);
        opacity: 0.8;
      }
    }

    @keyframes shimmer {
      0% {
        transform: translateX(-120%);
        opacity: 0;
      }

      15% {
        opacity: .8;
      }

      70% {
        opacity: .25;
      }

      100% {
        transform: translateX(120%);
        opacity: 0;
      }
    }

    @keyframes particleFloat {
      0% {
        transform: translate3d(0, 0, 0);
        opacity: 0;
      }

      15% {
        opacity: .9;
      }

      50% {
        transform: translate3d(16px, -24px, 0);
        opacity: .45;
      }

      100% {
        transform: translate3d(36px, -48px, 0);
        opacity: 0;
      }
    }

    @keyframes panelLift {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-15px);
      }
    }

    .grid-bg {
      background-image:
        linear-gradient(rgba(194, 38, 211, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(194, 38, 211, 0.08) 1px, transparent 1px);
      background-size: 60px 60px;
      animation: gridMove 10s linear infinite;
    }

    .title-main {

      text-transform: uppercase;
    }

    .glass {
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }

    #cursor-shadow {
      position: fixed;
      top: 0;
      left: 0;
      width: 180px;
      height: 180px;
      background: radial-gradient(circle, #c026d359 0%, rgba(192, 38, 211, 0.15) 40%, transparent 70%);
      pointer-events: none;
      transform: translate(-50%, -50%);
      filter: blur(30px);
      z-index: 10;
      transition: transform 0.08s linear;
    }


    @keyframes floatCard {

      0%,
      100% {
        transform: translateY(0px);
      }

      50% {
        transform: translateY(-20px);
      }
    }

    .float-card {
      animation: floatCard 4.8s ease-in-out infinite;
      will-change: transform;
    }

    @keyframes lightSweep {
      0% {
        transform: translateX(-120%);
      }

      100% {
        transform: translateX(420%);
      }
    }

    .hero-light {
      animation: lightSweep 5.5s linear infinite;
    }


    @keyframes heroFloat {

      0%,
      100% {
        transform: translateY(0px);
      }

      50% {
        transform: translateY(-12px);
      }
    }

    @keyframes orbitSpin {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    @keyframes driftOne {

      0%,
      100% {
        transform: translateY(0px) translateX(0px);
      }

      50% {
        transform: translateY(-8px) translateX(4px);
      }
    }

    @keyframes driftTwo {

      0%,
      100% {
        transform: translateY(0px) rotate(12deg);
      }

      50% {
        transform: translateY(8px) rotate(20deg);
      }
    }

    @keyframes driftThree {

      0%,
      100% {
        transform: translateX(0px);
        opacity: .8;
      }

      50% {
        transform: translateX(8px);
        opacity: 1;
      }
    }

    @keyframes driftFour {

      0%,
      100% {
        transform: rotate(45deg) translateY(0px);
      }

      50% {
        transform: rotate(60deg) translateY(-6px);
      }
    }

    .hero-float {
      animation: heroFloat 5s ease-in-out infinite;
    }

    .premium-orbit {
      animation: orbitSpin 16s linear infinite;
    }

    .float-a {
      animation: driftOne 4.5s ease-in-out infinite;
    }

    .float-b {
      animation: driftTwo 5.2s ease-in-out infinite;
    }

    .float-c {
      animation: driftThree 4.8s ease-in-out infinite;
    }

    .float-d {
      animation: driftFour 5.5s ease-in-out infinite;
    }

    @keyframes ringPulse {
      0% {
        transform: scale(0.95);
        opacity: 0.6;
      }

      70% {
        transform: scale(1.15);
        opacity: 0;
      }

      100% {
        transform: scale(1.15);
        opacity: 0;
      }
    }

    /* first ring */
    .animate-ring1 {
      animation: ringPulse 2.4s ease-out infinite;
    }

    /* second ring (delayed for layering effect) */
    .animate-ring2 {
      animation: ringPulse 2.4s ease-out infinite;
      animation-delay: 0.8s;
    }

    @keyframes float-soft {

      0%,
      100% {
        transform: translateY(0px);
      }

      50% {
        transform: translateY(-10px);
      }
    }

    @keyframes float-card {

      0%,
      100% {
        transform: translateY(0px) rotate(-1deg);
      }

      50% {
        transform: translateY(-12px) rotate(1deg);
      }
    }

    @keyframes beam-slow {
      0% {
        transform: translateY(-8%) rotate(12deg);
        opacity: 0.15;
      }

      50% {
        transform: translateY(8%) rotate(12deg);
        opacity: 0.4;
      }

      100% {
        transform: translateY(-8%) rotate(12deg);
        opacity: 0.15;
      }
    }

    @keyframes beam-delayed {
      0% {
        transform: translateY(10%) rotate(-14deg);
        opacity: 0.12;
      }

      50% {
        transform: translateY(-8%) rotate(-14deg);
        opacity: 0.32;
      }

      100% {
        transform: translateY(10%) rotate(-14deg);
        opacity: 0.12;
      }
    }

    @keyframes spin-slower {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    @keyframes spin-slow {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    @keyframes ring-wave-1 {

      0%,
      100% {
        transform: scale(0.98);
        opacity: 0.35;
      }

      50% {
        transform: scale(1.08);
        opacity: 0.8;
      }
    }

    @keyframes ring-wave-2 {

      0%,
      100% {
        transform: scale(0.96);
        opacity: 0.22;
      }

      50% {
        transform: scale(1.12);
        opacity: 0.55;
      }
    }

    @keyframes ring-wave-3 {

      0%,
      100% {
        transform: scale(0.94);
        opacity: 0.14;
      }

      50% {
        transform: scale(1.16);
        opacity: 0.35;
      }
    }

    @keyframes core-breathe {

      0%,
      100% {
        transform: scale(0.92);
        opacity: 0.45;
      }

      50% {
        transform: scale(1.12);
        opacity: 0.8;
      }
    }

    @keyframes scan-x {
      0% {
        transform: translateX(-12%);
        opacity: 0;
      }

      25% {
        opacity: 0.8;
      }

      50% {
        opacity: 0.45;
      }

      100% {
        transform: translateX(12%);
        opacity: 0;
      }
    }

    @keyframes scan-x-delayed {
      0% {
        transform: translateX(14%);
        opacity: 0;
      }

      25% {
        opacity: 0.65;
      }

      50% {
        opacity: 0.28;
      }

      100% {
        transform: translateX(-14%);
        opacity: 0;
      }
    }

    @keyframes bob-face {

      0%,
      100% {
        transform: translateY(0px) rotate(0deg);
      }

      50% {
        transform: translateY(-5px) rotate(6deg);
      }
    }

    @keyframes stroke-drift {

      0%,
      100% {
        transform: translateY(0) rotate(8deg);
        opacity: 0.7;
      }

      50% {
        transform: translateY(6px) rotate(-6deg);
        opacity: 1;
      }
    }

    @keyframes particle-a {

      0%,
      100% {
        transform: translate(0, 0);
      }

      50% {
        transform: translate(10px, -12px);
      }
    }

    @keyframes particle-b {

      0%,
      100% {
        transform: translate(0, 0) rotate(0deg);
      }

      50% {
        transform: translate(-8px, 10px) rotate(-8deg);
      }
    }

    @keyframes particle-c {

      0%,
      100% {
        transform: translate(0, 0) rotate(12deg);
      }

      50% {
        transform: translate(-6px, -10px) rotate(-4deg);
      }
    }

    @keyframes particle-d {

      0%,
      100% {
        transform: translate(0, 0) rotate(45deg);
      }

      50% {
        transform: translate(8px, -8px) rotate(90deg);
      }
    }

    @keyframes progress-a {

      0%,
      100% {
        width: 48%;
      }

      50% {
        width: 86%;
      }
    }

    @keyframes progress-b {

      0%,
      100% {
        width: 62%;
      }

      50% {
        width: 38%;
      }
    }

    @keyframes progress-c {

      0%,
      100% {
        width: 34%;
      }

      50% {
        width: 72%;
      }
    }

    @keyframes bar-1 {

      0%,
      100% {
        height: 26%;
      }

      50% {
        height: 72%;
      }
    }

    @keyframes bar-2 {

      0%,
      100% {
        height: 72%;
      }

      50% {
        height: 36%;
      }
    }

    @keyframes bar-3 {

      0%,
      100% {
        height: 42%;
      }

      50% {
        height: 90%;
      }
    }

    @keyframes bar-4 {

      0%,
      100% {
        height: 58%;
      }

      50% {
        height: 30%;
      }
    }

    @keyframes float-mini {

      0%,
      100% {
        transform: translateY(0px);
      }

      50% {
        transform: translateY(-8px);
      }
    }

    @keyframes float-mini-delayed {

      0%,
      100% {
        transform: translateY(0px);
      }

      50% {
        transform: translateY(8px);
      }
    }

    @keyframes float-dot {

      0%,
      100% {
        transform: translateY(0px) scale(1);
        opacity: 0.75;
      }

      50% {
        transform: translateY(-10px) scale(1.15);
        opacity: 1;
      }
    }

    @keyframes rotate-slow {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    .animate-float-soft {
      animation: float-soft 5s ease-in-out infinite;
    }

    .animate-float-card {
      animation: float-card 6.5s ease-in-out infinite;
    }

    .animate-beam-slow {
      animation: beam-slow 8s ease-in-out infinite;
    }

    .animate-beam-delayed {
      animation: beam-delayed 10s ease-in-out infinite;
    }

    .animate-spin-slower {
      animation: spin-slower 18s linear infinite;
    }

    .animate-spin-slow {
      animation: spin-slow 8s linear infinite;
    }

    .animate-ring-wave-1 {
      animation: ring-wave-1 2.8s ease-in-out infinite;
    }

    .animate-ring-wave-2 {
      animation: ring-wave-2 3.4s ease-in-out infinite;
    }

    .animate-ring-wave-3 {
      animation: ring-wave-3 4.2s ease-in-out infinite;
    }

    .animate-core-breathe {
      animation: core-breathe 3s ease-in-out infinite;
    }

    .animate-scan-x {
      animation: scan-x 6s linear infinite;
    }

    .animate-scan-x-delayed {
      animation: scan-x-delayed 7.5s linear infinite;
    }

    .animate-bob-face {
      animation: bob-face 3.5s ease-in-out infinite;
    }

    .animate-stroke-drift {
      animation: stroke-drift 3s ease-in-out infinite;
    }

    .animate-particle-a {
      animation: particle-a 4.8s ease-in-out infinite;
    }

    .animate-particle-b {
      animation: particle-b 4.2s ease-in-out infinite;
    }

    .animate-particle-c {
      animation: particle-c 5.4s ease-in-out infinite;
    }

    .animate-particle-d {
      animation: particle-d 4.6s ease-in-out infinite;
    }

    .animate-progress-a {
      animation: progress-a 3.5s ease-in-out infinite;
    }

    .animate-progress-b {
      animation: progress-b 4.2s ease-in-out infinite;
    }

    .animate-progress-c {
      animation: progress-c 3.8s ease-in-out infinite;
    }

    .animate-bar-1 {
      animation: bar-1 2.4s ease-in-out infinite;
    }

    .animate-bar-2 {
      animation: bar-2 2.1s ease-in-out infinite;
    }

    .animate-bar-3 {
      animation: bar-3 2.6s ease-in-out infinite;
    }

    .animate-bar-4 {
      animation: bar-4 2s ease-in-out infinite;
    }

    .animate-float-mini {
      animation: float-mini 5.5s ease-in-out infinite;
    }

    .animate-float-mini-delayed {
      animation: float-mini-delayed 6s ease-in-out infinite;
    }

    .animate-float-dot {
      animation: float-dot 4s ease-in-out infinite;
    }

    .animate-rotate-slow {
      animation: rotate-slow 14s linear infinite;
    }

    .offer {
      font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    }

    @keyframes cardFadeUp {
      from {
        opacity: 0;
        transform: translateY(28px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes fadeUpSoft {
      0% {
        opacity: 0;
        transform: translateY(26px);
      }

      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .animate-fade-up {
      animation: fadeUpSoft 0.8s ease forwards;
    }

    .animate-fade-up-delay {
      opacity: 0;
      animation: fadeUpSoft 0.8s ease forwards;
      animation-delay: 0.12s;
    }

    .animate-fade-up-delay-2 {
      opacity: 0;
      animation: fadeUpSoft 0.8s ease forwards;
      animation-delay: 0.24s;
    }

    .animate-step-1,
    .animate-step-2,
    .animate-step-3,
    .animate-step-4 {
      opacity: 0;
      animation: fadeUpSoft 0.85s ease forwards;
    }

    .animate-step-1 {
      animation-delay: 0.15s;
    }

    .animate-step-2 {
      animation-delay: 0.3s;
    }

    .animate-step-3 {
      animation-delay: 0.45s;
    }

    .animate-step-4 {
      animation-delay: 0.6s;
    }

    @keyframes spinSlow {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    .animate-spin-slow {
      animation: spinSlow 6s linear infinite;
    }

    .clip-path-triangle {
      clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    }

    /* testimonial styling */

    .testimonial-swiper {
      padding-bottom: 20px;
    }

    .testimonial-swiper .swiper-slide {
      height: auto;
      display: flex;
      align-items: stretch;
      transition:
        transform 700ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 700ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .testimonial-swiper .swiper-slide .testimonial-card {
      width: 100%;
      min-height: 280px;
      box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
      transition:
        transform 700ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 700ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 700ms ease,
        box-shadow 700ms ease;
    }

    .testimonial-swiper .swiper-slide:not(.swiper-slide-active) .testimonial-card {
      transform: scale(0.92);
      opacity: 0.62;
      filter: blur(1.2px);
      border-color: rgba(255, 255, 255, 0.08);
      box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.025);
      pointer-events: none;
    }

    .testimonial-swiper .swiper-slide-active .testimonial-card {
      transform: scale(1);
      opacity: 1;
      filter: blur(0);
      border-color: rgba(232, 121, 249, 0.25);
      box-shadow:
        0 18px 55px rgba(0, 0, 0, 0.30),
        0 0 0 1px rgba(232, 121, 249, 0.06),
        0 0 36px rgba(217, 70, 239, 0.08);
    }

    .testimonial-swiper .swiper-slide-active .testimonial-card:hover {
      /* transform: translateY(-8px) scale(1.01); */
      border-color: rgba(232, 121, 249, 0.38);
      box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.34),
        0 0 0 1px rgba(232, 121, 249, 0.09),
        0 0 45px rgba(217, 70, 239, 0.14);
    }

    .custom-swiper-btn::after {
      font-size: 13px !important;
      font-weight: 700 !important;
    }

    .testimonial-swiper .swiper-pagination-bullet {
      width: 9px;
      height: 9px;
      background: rgba(255, 255, 255, 0.22);
      opacity: 1;
      transition: all 0.4s ease;
    }

    .testimonial-swiper .swiper-pagination-bullet-active {
      width: 28px;
      border-radius: 999px;
      background: linear-gradient(90deg, #e879f9, #c084fc);
      box-shadow: 0 0 18px rgba(217, 70, 239, 0.35);
    }

    @media (max-width: 1023px) {
      .testimonial-swiper .swiper-slide:not(.swiper-slide-active) .testimonial-card {
        transform: scale(0.96);
        opacity: 0.78;
        filter: blur(0.6px);
      }
    }

    @media (max-width: 767px) {

      .testimonial-swiper .swiper-slide .testimonial-card,
      .testimonial-swiper .swiper-slide-active .testimonial-card,
      .testimonial-swiper .swiper-slide:not(.swiper-slide-active) .testimonial-card {
        min-height: auto;
        transform: scale(1);
        opacity: 1;
        filter: blur(0);
        pointer-events: auto;
      }

      .testimonial-swiper .swiper-slide-active .testimonial-card:hover {
        transform: none;
      }
    }



 .service-icon {
  animation: iconSlideLoop 1.2s ease-in-out infinite;
}
.service-icon {
  animation: iconSlideLoop 1.2s ease-in-out infinite;
}

/* On hover → STOP animation + RESET position */
.group:hover .service-icon {
  animation: none;
  transform: translateY(0);
  opacity: 1;
}

@keyframes iconSlideLoop {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  30% {
    transform: translateY(-120%);
    opacity: 0;
  }
  31% {
    transform: translateY(120%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}


@keyframes fadeUp {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}