html {
         scroll-behavior: smooth;
         }
         .active {
         color: #0860c4;
         }
         .glass {
         background: rgba(255, 255, 255, 0.1);
         backdrop-filter: blur(12px);
         }
         .tabBtn {
         padding: 8px 18px;
         border-radius: 999px;
         background: rgba(255,255,255,0.05);
         border: 1px solid rgba(255,255,255,0.1);
         color: #aaa;
         transition: 0.3s;
         }
         .activeTab {
         background: linear-gradient(to right,#9333ea,#6366f1);
         color: white;
         }
         .cardWrap {
         position: relative;
         overflow: hidden;
         border-radius: 16px;
         }
         .imgStyle {
         width: 100%;
         height: 250px;
         object-fit: cover;
         transition: 0.6s;
         }
         .cardWrap:hover .imgStyle {
         transform: scale(1.1);
         }
         .overlay {
         position: absolute;
         inset: 0;
         background: rgba(0,0,0,0.6);
         display: flex;
         align-items: center;
         justify-content: center;
         opacity: 0;
         transition: 0.4s;
         }
         .cardWrap:hover .overlay {
         opacity: 1;
         }
         .hideItem {opacity:0; transform:scale(.8);}
         .showItem {opacity:1; transform:scale(1);}
         /* REVEAL ANIMATION */
         .reveal {
         opacity: 0;
         transform: translateY(60px);
         transition: all 0.8s ease;
         }
         .reveal.active {
         opacity: 1;
         transform: translateY(0);
         }
         /* DOT STYLE */
         
         
         /* PULSE EFFECT */
         .dot::before {
         content: "";
         position: absolute;
         width: 100%;
         height: 100%;
         border-radius: 50%;
         background: rgba(147,51,234,0.4);
         animation: pulse 2s infinite;
         }
         @keyframes pulse {
         0% {transform: scale(1); opacity: .7;}
         70% {transform: scale(1.8); opacity: 0;}
         100% {opacity: 0;}
         }
         /* LINE FILL */
         #lineFill {
         transition: height 1s ease;
         }
         /* GLASS */
         .glass {
         background: rgba(255,255,255,0.05);
         backdrop-filter: blur(12px);
         }
         /* FAQ ANIMATION */
         .faqContent {
         max-height: 0;
         overflow: hidden;
         transition: all 0.4s ease;
         padding-bottom: 0;
         }
         .faqItem.active .faqContent {
         max-height: 200px;
         padding-bottom: 20px;
         }
         /* ICON ROTATE */
         .faqItem .icon {
         font-size: 22px;
         }
         .faqItem.active .icon {
         transform: rotate(45deg);
         color: #a78bfa;
         }
         /* FLOAT ANIMATION */
         @keyframes float {
         0% {transform: translateY(0);}
         50% {transform: translateY(-10px);}
         100% {transform: translateY(0);}
         }
         .animate-float {
         animation: float 4s ease-in-out infinite;
         }
         .whyCard {
         position: relative;
         padding: 30px 20px;
         border-radius: 20px;
         background: rgba(255,255,255,0.04);
         border: 1px solid rgba(255,255,255,0.08);
         backdrop-filter: blur(12px);
         transition: 0.4s;
         overflow: hidden;
         }
         .whyCard:hover {
         transform: translateY(-10px) scale(1.03);
         border-color: rgba(168,85,247,0.5);
         }
         /* glow effect */
         .whyCard::before {
         content: "";
         position: absolute;
         inset: 0;
         background: radial-gradient(circle at top, rgba(168,85,247,0.25), transparent 70%);
         opacity: 0;
         transition: 0.5s;
         }
         .whyCard:hover::before {
         opacity: 1;
         }
         /* icon */
         .whyCard .icon {
         font-size: 40px;
         margin-bottom: 15px;
         transition: 0.4s;
         }
         .whyCard:hover .icon {
         transform: scale(1.3) rotate(8deg);
         }
         /* text */
         .whyCard h3 {
         font-weight: 600;
         margin-bottom: 8px;
         }
         .whyCard p {
         font-size: 14px;
         color: #aaa;
         }
         .step {
  opacity: 0;
  transform: translateY(60px);
  transition: all 0.6s ease;
}

.step.show {
  opacity: 1;
  transform: translateY(0);
}

.dot {
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.6);
  transition: all 0.4s ease;
}