/* new  */
 .hero-section {
   user-select: none !important;
   /* Prevents text selection */
   pointer-events: none !important;
   /* Disables clicks */
 }

 .hero-section {

   display: flex;
   margin-top: 40px;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: 0rem;
 }


 .main-title {
   font-size: clamp(2.8rem, 8vw, 2rem);
   text-align: center;
   margin-bottom: 1.5rem;
   background: linear-gradient(135deg, #ffffff 0%, #a0a0a0 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   letter-spacing: -0.02em;
 }

 .fixed-top {
   background-color: #000 !important;
 }

 .subtitle {
   font-size: clamp(1rem, 2.5vw, 1rem);
   color: #888;
   text-align: center;
   margin-bottom: 2rem;
   max-width: 800px;
 }


 /* new */
 /* 🔹 Transparent Section */
 .comparison-wrapper {
   max-width: 1050px;
   margin: auto;
   background: rgba(0, 0, 0, 0.4);
   /* transparent dark glass effect */
   padding: 30px;
   border-radius: 16px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
   border: 1px solid rgba(255, 255, 255, 0.2);
   backdrop-filter: blur(12px);
   /* 🔸 glassy blur effect */
   -webkit-backdrop-filter: blur(12px);
 }

 .comparison-main {
   color: #fff;
   padding-bottom: 50px;
 }

 .comparison-wrapper h2 {
   text-align: center;
   margin-bottom: 10px;

 }

 .comparison-wrapper p.subtitle {
   text-align: center;
   color: #bbb;
   margin-bottom: 30px;
 }

 .comparison-table {
   width: 100%;
   border-collapse: collapse;
   text-align: center;
   border: 1px solid rgba(155, 99, 230, 0.4);
   border-radius: 12px;
   overflow: hidden;
   background: rgba(20, 10, 30, 0.4);
   /* semi-transparent purple tint */
   backdrop-filter: blur(10px);
 }

 .comparison-table th,
 .comparison-table td {
   padding: 15px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }

 .comparison-table th {
   background: rgba(43, 30, 77, 0.6);
   font-weight: 600;
 }

 .comparison-table td {
   font-size: 1rem;
 }

 .highlight {
   color: #fff;
   font-weight: 600;
 }

 .savings {
   color: #EBDC8B;
   font-weight: 600;
 }

 .total-row {
   background: rgba(43, 30, 77, 0.6);
   font-weight: 600;
 }

 .table-note {
   text-align: center;
   font-size: 0.85rem;
   color: #ccc;
   margin-top: 10px;
 }

 /* ----- Hover effects ----- */
 .comparison-table tbody tr {
   transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
   will-change: transform, background-color;
 }

 .comparison-table tbody tr:hover {
   background-color: rgba(155, 99, 230, 0.1);
   transform: translateY(-4px);
   box-shadow: 0 6px 20px rgba(155, 99, 230, 0.1);
   cursor: pointer;
 }

 .comparison-table tbody tr:hover td {
   cursor: pointer;
 }

 .comparison-table thead th {
   cursor: default;
 }


 /* ✅ Responsive Fixes Only */
 @media (max-width: 768px) {

   .comparison-wrapper {
     padding: 20px;
   }

   .comparison-table th,
   .comparison-table td {
     padding: 10px;
     font-size: 0.9rem;
     white-space: nowrap;
   }

   .comparison-table {
     display: block;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
   }
 }

 @media (max-width: 480px) {
   .comparison-wrapper h2 {
     font-size: 1.2rem;
   }

   .comparison-wrapper p.subtitle {
     font-size: 0.85rem;
   }

   .table-note {
     font-size: 0.75rem;
   }
 }

 /* end */
 /* new */
 /* BACKGROUND */
 .how-gamaa-works {
   background: radial-gradient(circle at 20% 30%, #0a0b2e 0%, #000000 80%);
   color: #fff;
   min-height: 100vh;
   position: relative;
   overflow: hidden;
 }





 /* HORIZONTAL TIMELINE */
 .steps-row {
   position: relative;
   z-index: 1;
   gap: 30px;
 }

 .steps-row::before {
   content: '';
   position: absolute;
   top: 50%;
   left: 5%;
   right: 5%;
   height: 4px;

   background: linear-gradient(90deg, #7c8fff, #EBDC8B);
   z-index: 0;
 }

 /* STEP CARD */
 .step-card {
   background: rgba(255, 255, 255, 0.04);
   backdrop-filter: blur(18px);
   border-radius: 16px;
   position: relative;
   width: 300px;
   transition: transform 0.4s ease, box-shadow 0.4s ease;
   z-index: 1;
   padding-top: 40px;
 }

 .step-card:hover {
   transform: translateY(-8px) scale(1.03);
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
 }

 /* STEP NUMBER */
 .step-number {
   width: 60px;
   height: 60px;
   line-height: 60px;

   border-radius: 50%;
   margin: 0 auto 30px;
   font-weight: bold;
   font-size: 1.4rem;
   color: #fff;
   text-shadow: 0 0 15px rgba(124, 140, 255, 0.6);
   box-shadow: 0 0 25px rgba(124, 140, 255, 0.4);
   transition: all 0.4s ease;
 }

 .step-card:hover .step-number {
   transform: scale(1.2);
   box-shadow: 0 0 35px rgba(124, 140, 255, 0.8);
 }

 /* ICON */
 .step-icon {
   font-size: 2rem;
   color: #9ba2ff;
   margin-bottom: 10px;
   transition: transform 0.4s ease, color 0.4s ease;
 }

 .step-card:hover .step-icon {
   transform: rotate(10deg) scale(1.1);
   color: #fff;
 }

 /* STEP LIST */
 .step-list li {
   margin: 10px 0;
   font-weight: 500;
   position: relative;
   color: #fff;
   font-size: 0.95rem;
 }

 .step-list .arrow {
   display: inline-block;
   margin-left: 8px;
   color: #7c8fff;
   animation: arrowBounce 1.2s infinite alternate;
   font-size: 1.1rem;
 }

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

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

 /* NOTES */
 .work-note {
   font-size: 0.9rem;
   color: #cfcfff;
   line-height: 1.6;
   margin-top: 15px;
 }

 /* RESPONSIVE */
 @media (max-width: 992px) {
   .steps-row {
     flex-direction: column;
     align-items: center;
   }

   .steps-row::before {
     display: none;
   }

   .step-card {
     margin-bottom: 30px;
     width: 80%;
   }
 }

 /* end */

 /* Wrapper (Transparent Glass) */
 .plans-wrapper {
   max-width: 1150px;
   margin: 0 auto;
   padding: 40px;


 }

 .plans-head {
   text-align: center;
   margin-bottom: 35px;
 }

 .plans-head h2 {

   color: #fff;
   text-shadow: 0 0 12px rgba(255, 255, 255, 0.15);
 }

 /* Cards (Transparent & Glassy) */
 .plan-card {

   border-radius: 18px;
   padding: 25px;
   min-height: 260px;
   display: flex;
   flex-direction: column;
   align-items: center;
   border: 1px solid rgba(255, 255, 255, 0.6);

   transition: all 0.3s ease;
 }

 .plan-card:hover {
   transform: translateY(-8px);
   border-color: rgba(255, 255, 255, 0.25);
   box-shadow: 0 18px 50px rgba(140, 60, 255, 0.3);
 }

 .plan-icon {
   width: 80px;
   height: 80px;
   margin: 0 auto 25px;
   background: linear-gradient(22deg, #5b401c, #EBDC8B, #EBDC8B, #000);
   border-radius: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow:
     0 10px 30px rgba(120, 0, 255, 0.4),
     inset 0 2px 10px rgba(255, 255, 255, 0.2);
   transition: all 0.3s ease;
   position: relative;
 }

 .plan-card:hover .plan-icon {
   transform: translateY(-10px) rotateY(360deg);
   box-shadow:
     0 15px 40px rgba(120, 0, 255, 0.6),
     inset 0 2px 10px rgba(255, 255, 255, 0.3);
 }

 .plan-icon svg {
   width: 40px;
   height: 40px;
   fill: #000;
   filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
 }

 .plan-title {
   font-weight: 600;
   color: #fff;
   margin-bottom: 8px;
 }

 .amount {
   color: #EBDC8B;
   font-weight: 700;
   font-size: 1.15rem;
   margin-bottom: 12px;
   text-shadow: 0 0 10px rgba(255, 255, 150, 0.3);
 }

 .plan-details {
   color: rgba(255, 255, 255, 0.7);
   font-size: 0.92rem;
   line-height: 1.7;
   margin-top: 6px;
 }

 .plan-details li {
   margin-bottom: 0px;
 }


 /* Featured (Glow Transparent Card) */


 .plan-card.featured:hover {
   transform: translateY(-10px);
   box-shadow: 0 25px 70px rgba(170, 130, 255, 0.4);
 }

 @media (max-width: 767px) {
   .plans-wrapper {
     padding: 24px;
   }

   .plan-card {
     padding: 20px;
   }
 }

 /* new */
 /* Animated Background Particles */
 .particles {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
   z-index: 0;
 }

 .particle {
   position: absolute;
   width: 4px;
   height: 4px;
   background: rgba(255, 255, 255, 0.5);
   border-radius: 50%;
   animation: float 15s infinite;
 }

 @keyframes float {

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

   10% {
     opacity: 1;
   }

   90% {
     opacity: 1;
   }

   100% {
     transform: translateY(-100vh) translateX(50px);
     opacity: 0;
   }
 }

 .token-system-section {
   position: relative;
   z-index: 1;
   padding: 80px 0;
 }

 /* Header Styling */
 .section-header {
   perspective: 1000px;
   margin-bottom: 60px;
 }

 .section-header h2 {
   color: #fff;
   animation: gradientShift 3s ease infinite;
   text-shadow: 0 0 40px rgba(102, 126, 234, 0.5);
   transform-style: preserve-3d;
 }

 @keyframes gradientShift {

   0%,
   100% {
     filter: hue-rotate(0deg);
   }

   50% {
     filter: hue-rotate(20deg);
   }
 }

 .section-header p {
   color: rgba(255, 255, 255, 0.7);
   font-size: 1.2rem;
   animation: fadeInUp 1s ease;
 }

 @keyframes fadeInUp {
   from {
     opacity: 0;
     transform: translateY(30px);
   }

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

 /* new */
 /* Smart Access Section */
 .smart-access-section {
   background: #0b0c1a;
   /* dark background */
   color: #fff;
 }



 .smart-access-section p {
   font-size: 1rem;
 }

 .access-card {
   background: rgba(20, 20, 20, 0.8);
   backdrop-filter: blur(20px);
   border-radius: 20px;
   padding: 40px;
   box-shadow:
     0 20px 60px rgba(0, 0, 0, 0.5),
     inset 0 1px 0 rgba(255, 255, 255, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.1);
   transform-style: preserve-3d;
   transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   position: relative;
   overflow: hidden;
 }

 .access-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: linear-gradient(135deg, rgba(120, 0, 255, 0.05) 0%, rgba(0, 200, 255, 0.05) 100%);
   transform: translateZ(-10px);
   border-radius: 20px;
 }

 .access-card:hover {

   box-shadow:
     0 30px 80px rgba(0, 0, 0, 0.7),
     0 0 40px rgba(120, 0, 255, 0.3),
     inset 0 1px 0 rgba(255, 255, 255, 0.2);
   border-color: rgba(120, 0, 255, 0.5);
 }

 .access-header {
   text-align: center;
   margin-bottom: 30px;
   transform: translateZ(40px);
 }

 .access-icon {
   font-size: 4rem;
   margin-bottom: 20px;
   display: inline-block;
   animation: float 3s ease-in-out infinite;
   filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
 }

 @keyframes float {

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

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

 .access-header h3 {
   color: white;
   font-size: 1.8rem;
   margin-bottom: 15px;
   text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
 }

 .access-badge {
   display: inline-block;
   background: linear-gradient(22deg, #5b401c, #EBDC8B, #EBDC8B, #000);
   color: #000;
   padding: 8px 20px;
   border-radius: 20px;
   font-size: 0.85rem;
   font-weight: 600;

 }

 .external-badge {
   background: linear-gradient(22deg, #5b401c, #EBDC8B, #EBDC8B, #000);

 }

 .access-desc {
   color: rgba(255, 255, 255, 0.9);
   text-align: center;
   margin-bottom: 30px;
   font-size: 1.05rem;
   transform: translateZ(30px);
 }

 .access-features {
   list-style: none;
   margin-bottom: 30px;
 }

 .access-features li {
   color: white;
   padding: 12px 0;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   display: flex;
   align-items: center;
   gap: 15px;
   transform: translateZ(20px);
   transition: all 0.3s ease;
 }

 .access-features li:hover {

   color: #EBDC8B;
 }

 .access-features li:last-child {
   border-bottom: none;
 }

 .check-icon {
   width: 24px;
   height: 24px;
   background: linear-gradient(135deg, #7800ff 0%, #00c8ff 100%);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 0.8rem;
   flex-shrink: 0;
   box-shadow: 0 4px 15px rgba(120, 0, 255, 0.5);
 }

 .access-pricing {
   text-align: center;
   background: rgba(255, 255, 255, 0.15);
   padding: 20px;
   border-radius: 15px;
   color: white;
   font-size: 1.1rem;
   box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.2);
   transform: translateZ(40px);
 }

 .access-pricing strong {
   font-size: 1.8rem;
   color: #EBDC8B;
   text-shadow: 0 2px 10px rgba(255, 215, 0, 0.5);
 }





 /* Responsive adjustments */
 @media (max-width: 991px) {
   .access-header {
     flex-direction: column;
     align-items: flex-start;
   }

   .access-icon {
     margin-bottom: 10px;
   }
 }

 /* end */


 /* 3D Card Styling */
 .token-card-3d {
   position: relative;
   background: rgba(255, 255, 255, 0.05);
   backdrop-filter: blur(20px);
   border-radius: 30px;
   padding: 40px;
   transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
   transform-style: preserve-3d;
   perspective: 1000px;
   border: 1px solid rgba(255, 255, 255, 0.1);
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
   height: 100%;
   overflow: hidden;
 }

 .token-card-3d::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
   border-radius: 30px;
   opacity: 0;
   transition: opacity 0.6s ease;
 }

 .token-card-3d:hover {
   transform: translateY(-20px) rotateX(5deg) rotateY(5deg);
   box-shadow: 0 40px 80px rgba(102, 126, 234, 0.4), 0 0 100px rgba(102, 126, 234, 0.2);
 }

 .token-card-3d:hover::before {
   opacity: 1;
 }

 .token-card-3d.pay {
   border-color: rgba(245, 87, 108, 0.3);
 }

 .token-card-3d.free {
   border-color: rgba(0, 242, 254, 0.3);
 }

 .card-glow {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 200%;
   height: 200%;
   background: radial-gradient(circle, rgba(102, 126, 234, 0.3) 0%, transparent 70%);
   transform: translate(-50%, -50%);
   opacity: 0;
   transition: opacity 0.6s ease;
   pointer-events: none;
 }

 .token-card-3d:hover .card-glow {
   opacity: 1;
 }

 .token-card-3d h3 {
   color: #fff;

   font-weight: 700;
   margin-bottom: 30px;
   position: relative;
   z-index: 1;
   display: flex;
   align-items: center;
   gap: 15px;
 }

 .token-card-3d h3 i {
   font-size: 2.5rem;
   animation: rotate3d 4s ease infinite;
 }

 @keyframes rotate3d {

   0%,
   100% {
     transform: rotateY(0deg) rotateX(0deg);
   }

   50% {
     transform: rotateY(180deg) rotateX(10deg);
   }
 }

 /* Token List Items */
 .token-list-3d {
   list-style: none;
   padding: 0;
   margin: 0;
   position: relative;
   z-index: 1;
 }

 .token-list-3d li {
   background: rgba(255, 255, 255, 0.05);
   padding: 20px;
   margin-bottom: 15px;
   border-radius: 15px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
   border: 1px solid rgba(255, 255, 255, 0.1);
   position: relative;
   overflow: hidden;
 }

 .token-list-3d li::before {
   content: '';
   position: absolute;
   left: 0;
   top: 0;
   height: 100%;
   width: 0;
   background: linear-gradient(90deg, rgba(102, 126, 234, 0.2), rgba(240, 147, 251, 0.2));
   transition: width 0.4s ease;
 }

 .token-list-3d li:hover {
   transform: translateX(10px) scale(1.02);
   border-color: rgba(102, 126, 234, 0.5);
   box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
 }

 .token-list-3d li:hover::before {
   width: 100%;
 }

 .token-service {
   color: #fff;
   font-weight: 600;
   font-size: 1.1rem;
   position: relative;
   z-index: 1;
 }

 .token-rate {
   color: rgba(255, 255, 255, 0.7);
   font-size: 0.95rem;
   padding: 8px 16px;
   width: 50%;
   text-align: center;
   background: rgba(255, 255, 255, 0.1);
   border-radius: 20px;
   position: relative;
   z-index: 1;
 }

 .free-badge {
   background: linear-gradient(22deg, #5b401c, #EBDC8B, #EBDC8B, #000);
   color: #000;
   font-weight: 600;
   animation: pulse 2s ease infinite;
 }

 @keyframes pulse {

   0%,
   100% {
     box-shadow: 0 0 0 0 rgba(79, 172, 254, 0.7);
   }

   50% {
     box-shadow: 0 0 20px 10px rgba(79, 172, 254, 0);
   }
 }

 /* Example Box */
 .token-example-3d {
   margin-top: 30px;
   padding: 25px;
   background: rgba(255, 255, 255, 0.05);
   border-radius: 20px;
   border-left: 4px solid #EBDC8B;
   position: relative;
   z-index: 1;
   animation: slideInLeft 1s ease;
 }

 @keyframes slideInLeft {
   from {
     opacity: 0;
     transform: translateX(-50px);
   }

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

 .token-example-3d strong {
   color: #EBDC8B;
   font-size: 1.1rem;
 }

 .token-example-3d {
   color: rgba(255, 255, 255, 0.8);
   line-height: 1.8;
 }

 /* Usage Cards */
 .usage-card-3d {
   background: rgba(255, 255, 255, 0.05);
   backdrop-filter: blur(20px);
   border-radius: 25px;
   padding: 35px;
   text-align: center;
   transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
   border: 1px solid rgba(255, 255, 255, 0.1);
   position: relative;
   overflow: hidden;
   transform-style: preserve-3d;
 }

 .usage-card-3d::before {
   content: '';
   position: absolute;
   top: -50%;
   left: -50%;
   width: 200%;
   height: 200%;
   background: conic-gradient(from 0deg, transparent, rgba(102, 126, 234, 0.3), transparent);
   animation: rotate 4s linear infinite;
   opacity: 0;
   transition: opacity 0.5s ease;
 }

 @keyframes rotate {
   100% {
     transform: rotate(360deg);
   }
 }

 .usage-card-3d:hover::before {
   opacity: 1;
 }

 .usage-card-3d::after {
   content: '';
   position: absolute;
   inset: 2px;
   background: linear-gradient(135deg, #1e1e2e 0%, #2d1b3d 100%);
   border-radius: 24px;
   z-index: 0;
 }

 .usage-card-3d>* {
   position: relative;
   z-index: 1;
 }

 .usage-card-3d:hover {
   transform: translateY(-15px) scale(1.05);
   box-shadow: 0 30px 60px rgba(102, 126, 234, 0.4);
 }

 .usage-card-3d.featured {
   border: 2px solid rgba(250, 112, 154, 0.5);
   transform: scale(1.05);
 }

 .usage-icon {
   font-size: 4rem;
   margin-bottom: 20px;
   animation: bounce 2s ease infinite;
   display: inline-block;
 }

 @keyframes bounce {

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

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

 .usage-card-3d h5 {
   color: #fff;
   font-size: 1.5rem;
   font-weight: 700;
   margin-bottom: 15px;
 }

 .usage-amount {
   font-size: 2rem;
   font-weight: 800;
   background: linear-gradient(135deg, #667eea 0%, #f093fb 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   margin-bottom: 20px;
 }

 .usage-list {
   list-style: none;
   padding: 0;
   margin: 0;
 }

 .usage-list li {
   color: rgba(255, 255, 255, 0.8);
   padding: 8px 0;
   font-size: 1rem;
   position: relative;
   padding-left: 25px;
 }

 .usage-list li::before {
   content: '✓';
   position: absolute;
   left: 0;
   color: #00f2fe;
   font-weight: bold;
 }

 /* Breakdown Section */
 .token-breakdown {
   background: rgba(255, 255, 255, 0.03);
   border-radius: 30px;
   padding: 50px;
   border: 1px solid rgba(255, 255, 255, 0.1);
   margin-top: 60px;
 }

 .token-breakdown h4 {
   font-size: 2.5rem;
   font-weight: 800;
   margin-bottom: 40px;
   animation: fadeInUp 1s ease;
 }

 /* Responsive */
 @media (max-width: 768px) {
  

   .token-card-3d {
     margin-bottom: 30px;
     padding: 18px;
   }

   .pricing-card {
     padding: 18px;
   }

   .usage-card-3d {
     margin-bottom: 20px;
   }
 }

 /* Loading Animation */
 @keyframes shimmer {
   0% {
     background-position: -1000px 0;
   }

   100% {
     background-position: 1000px 0;
   }
 }

 .shine {
   position: relative;
   overflow: hidden;
 }

 .shine::after {
   content: '';
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
   animation: shine 3s infinite;
 }

 @keyframes shine {
   0% {
     left: -100%;
   }

   100% {
     left: 100%;
   }
 }

 /* end */



 @media (max-width: 768px) {
   .input-wrapper {
     flex-direction: column;
     align-items: stretch;
   }

   .input-placeholder {
     left: 8%;
     top: 47%
   }

   .action-buttons {
     justify-content: center;
   }

   .main-input {
     min-width: 100%;
     text-align: center;
   }

 }

 /* end */
 .mt-7 {
   margin-top: 5rem !important;
 }

 /* new */
 /* Card */
 .hustats-card {
   width: 100%;
   margin-top: 50px;
   max-width: 900px;
   border-radius: 24px;
   padding: 40px;
   margin: auto;
   border: 1px solid #fff;
   box-shadow: 0 20px 40px rgba(11, 20, 24, 0.12);
   text-align: center;
   backdrop-filter: blur(6px);
   position: relative;
   overflow: hidden;
 }

 /* Decorative elements */
 .hustats-card::before {
   content: "";
   position: absolute;
   top: -50%;
   right: -20%;
   width: 300px;
   height: 300px;
   border-radius: 50%;
   background: linear-gradient(135deg, rgba(241, 245, 8, 0.1) 0%, rgba(247, 243, 4, 1.05) 100%);
   z-index: 0;
 }

 .hustats-card::after {
   content: "";
   position: absolute;
   bottom: -30%;
   left: -10%;
   width: 200px;
   height: 200px;
   border-radius: 50%;
   background: linear-gradient(135deg, rgba(255, 106, 0, 0.05) 0%, rgba(139, 92, 246, 1.1) 100%);
   z-index: 0;
 }

 .hustats-card>* {
   position: relative;
   z-index: 1;
 }

 .hustats-card h2 {
   margin-bottom: 18px;
   color: #fff;

 }

 .hustats-card p.lead {
   color: #fff;
   font-size: 18px;
   margin-bottom: 40px;
   max-width: 640px;
   margin-left: auto;
   margin-right: auto;
   line-height: 1.6;
 }

 /* Metrics grid */
 .hustats-metrics {
   display: grid;
   grid-template-columns: 1fr;
   gap: 32px;
 }

 @media(min-width: 768px) {
   .hustats-metrics {
     grid-template-columns: repeat(3, 1fr);
   }

 }

 .hustats-metric {
   display: flex;
   flex-direction: column;
   align-items: center;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   padding: 24px 12px;
   border-radius: 20px;

   border: 2px solid rgba(255, 255, 255, 0.8);
   backdrop-filter: blur(10px);
   position: relative;
 }



 .hustats-metric:hover {
   transform: translateY(-8px);
   box-shadow: 0 15px 30px rgba(11, 20, 24, 0.15);

 }

 .hustats-metric:hover::before {
   opacity: 1;
 }

 .hustats-value {
   font-size: 44px;
   font-weight: 800;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   color: #fff;
   margin-bottom: 8px;
 }

 .hustats-star {
   width: 28px;
   height: 70px;
 }

 .hustats-label {
   color: #fff;
   font-size: 16px;
   font-weight: 500;
   margin-top: 6px;
 }


 .hustats-value.orange {
   color: #ebdc8b;
 }

 /* Call to action button */
 .hustats-cta {
   margin-top: 48px;
 }

 .hustats-btn {
   background: linear-gradient(135deg, #fff, var(--accent-purple));
   border: none;
   padding: 14px 36px;
   border-radius: 50px;
   font-weight: 600;
   font-size: 16px;
   box-shadow: 0 8px 20px rgba(226, 231, 230, 0.3);
   transition: all 0.3s ease;
   position: relative;
   overflow: hidden;
 }

 /* .hustats-btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 25px rgba(14, 193, 163, 0.4);
    } */

 .hustats-btn::before {
   content: "";
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 1.2), transparent);
   transition: left 0.5s ease;
 }

 .hustats-btn:hover::before {
   left: 100%;
 }


 /* Pulse animation for metrics */
 @keyframes pulse {
   0% {
     box-shadow: 0 0 0 0 rgba(219, 243, 4, 0.4);
   }

   70% {
     box-shadow: 0 0 0 10px rgba(241, 245, 5, 0);
   }

   100% {
     box-shadow: 0 0 0 0 rgba(237, 253, 3, 0);
   }
 }

 .hustats-metric:nth-child(1) {
   border: none;
 }

 .hustats-metric:nth-child(2) {
   border: none;
 }


 .hustats-metric:nth-child(3) {
   border: none;
 }

 /* end */
 /* new */
 .premium-ai-features-container {
   width: 100%;
   padding: 2rem 0;
   flex-direction: column;
   display: flex;
   justify-content: center;
   align-items: center;

   overflow-x: hidden;
 }

 .premium-ai-features-wrapper {
   width: 100%;
   height: 700px;
   overflow: hidden;
   position: relative;
 }

 .premium-ai-card {
   width: 100%;
   max-width: 1000px;
   border: 2px solid #fff;
   border-radius: 20px;
   color: #fff;
   box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
   padding: 45px 30px;
   display: flex;
   gap: 25px;
   align-items: center;
   transition: all 0.6s ease;
   margin: 0 auto;
 }


 /* Small cards styling */
 .premium-ai-card.premium-ai-side {
   width: 70%;
   height: 200px;
   opacity: 0.7;
   transform: scale(0.9);
   margin-top: 10px;
 }

 .premium-ai-card-body {
   flex: 1;
 }

 .premium-ai-icons {
   display: flex;
   gap: 15px;
   margin-bottom: 15px;

 }

 .premium-ai-icons svg {
   width: 20px;
   height: 20px;
 }

 .premium-ai-card-body h3 {
   font-size: 1.5rem;
   font-weight: 700;
   margin-bottom: 15px;
 }

 .premium-ai-center .premium-ai-card-body h3 {
   font-size: 2rem;
 }

 .premium-ai-feature-list {
   list-style: none;
   padding: 0;
   margin-top: 20px;
   display: flex;
   flex-direction: column;
   gap: 12px;
 }

 .premium-ai-side .premium-ai-card-body .premium-ai-feature-list {
   display: none;
 }

 .premium-ai-feature-list li {
   display: flex;
   align-items: center;
   gap: 12px;
   font-size: 0.9rem;
   color: var(--text-muted);
 }

 .premium-ai-center .premium-ai-card-body .premium-ai-feature-list li {
   font-size: 1rem;
 }

 .premium-ai-checkmark {
   width: 22px;
   height: 22px;
   background-color: var(--accent-color);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 }

 .premium-ai-checkmark svg {
   width: 12px;
   height: 12px;
 }

 .premium-ai-visual {
   flex-basis: 40%;
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
 }

 .premium-ai-center .premium-ai-visual {
   flex-basis: 35%;
   height: 100%;
 }

 .premium-ai-side .premium-ai-visual {
   flex-basis: 30%;
   height: 100%;
 }

 .premium-ai-visual img {
   width: 100%;
   height: 100%;
   display: block;
   object-fit: contain;
 }

 /* end */

 #stars {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
   z-index: 2;
   /* background */
   overflow: hidden;
 }

 .btn-login {
   position: relative !important;
   display: inline-block !important;
   padding: 10px 25px !important;
   color: #fff !important;
   background: #111;
   /* button background */
   border-radius: 25px !important;
   overflow: hidden;
   z-index: 1;
   text-decoration: none !important;
   font-weight: 600 !important;
 }

 /* Gradient Border */
 .btn-login::before {
   content: "";
   position: absolute;
   inset: -3px;
   /* border thickness */
   border-radius: 25px;
   background: conic-gradient(from 0deg,
       #A57C46,
       #EBDC8B,
       #EBDC8B,
       #A57C46);

   z-index: -1;
 }

 /* Inner button background mask */
 .btn-login::after {
   content: "";
   position: absolute;
   inset: 2px;
   border-radius: 25px;
   background: #111;
   /* same as button bg */
   z-index: -1;
 }




 .feature-card {
   position: relative;
   padding: 20px;
   border-radius: 12px;
   background: #111;
   /* inner background */
   color: #fff;
   font-family: sans-serif;
   z-index: 1;
   overflow: hidden;
 }

 /* Gradient Border */
 .feature-card::before {
   content: "";
   position: absolute;
   inset: 0;
   padding: 1px;
   /* border thickness */
   border-radius: 12px;
   background: conic-gradient(from 0deg,
       #A57C46,
       #EBDC8B,
       #EBDC8B,
       #A57C46);
   -webkit-mask:
     linear-gradient(#fff 0 0) content-box,
     linear-gradient(#fff 0 0);
   -webkit-mask-composite: xor;
   mask-composite: exclude;

   z-index: -1;
 }



 .feature-card:hover {
   transform: translateY(-8px);
   box-shadow: 0 20px 40px rgba(20, 40, 80, 0.35);
 }

 .feature-icon {
   width: 72px;
   height: 72px;
   margin: 0 auto 1rem;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 14px;
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
   border: 1px solid rgba(255, 255, 255, 0.04);
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
 }

 .feature-icon img {
   height: 100%;
 }

 .feature-title {
   font-weight: 600;
   margin-bottom: .35rem;
 }

 .feature-desc {
   color: rgba(230, 238, 249, 0.7);
   font-size: .95rem
 }

 .affiliate-section {
   padding: 5rem 1rem;
   position: relative;
   overflow: hidden;
   /* Ensure content stays within bounds */
 }

 .affiliate-title {

   font-weight: 700;
   text-align: center;
   margin-bottom: 3rem;
   position: relative;
   z-index: 10;
 }

 .features-wrapper {
   position: relative;
   padding-left: 2.5rem;
   /* Increased padding to give space for bullets */
   z-index: 5;
 }

 /* Base vertical line */
 .features-wrapper::before {
   content: '';
   position: absolute;
   left: 1rem;
   /* Adjusted to align with bullets */
   top: 24px;
   width: 2px;
   height: 85%;
   background: rgba(177, 171, 243, 0.2);
   border-radius: 2px;
   z-index: 0;
 }

 /* Bullets */
 .bullet {
   position: absolute;
   left: 0.7rem;
   /* Adjusted to center on the line */
   width: 14px;
   height: 14px;
   background: #EBDC8B;
   border-radius: 50%;
   box-shadow: 0 0 10px #a39de5;
   transition: top 0.5s ease-in-out;
   z-index: 2;
 }

 /* Highlight line */
 .highlight-line {
   position: absolute;
   left: 1rem;
   /* Adjusted to align with base line */
   width: 2px;
   background: #EBDC8B;
   border-radius: 2px;
   z-index: 1;
   transition: top 0.5s ease, height 0.5s ease;
 }

 .feature-item {
   position: relative;
   padding-left: 2rem;
   /* Consistent padding */
   margin-bottom: 2rem;
   padding-top: 0.25rem;
   /* Small padding to adjust text alignment */
   padding-bottom: 0.25rem;
   z-index: 3;
   /* Ensure text is above lines */
 }

 .feature-title {
   font-weight: 600;
   color: #fff;
   font-size: 1.1rem;
   transition: color 0.3s, text-shadow 0.3s;
 }

 .feature-desc {
   color: rgba(255, 255, 255, 0.7);
   font-size: 0.95rem;
 }

 /* Active / lite effect */
 .feature-item.active .feature-title {
   color: #EBDC8B;
   text-shadow: 0 0 15px #847bee;
   /* Slightly stronger glow */
 }

 .ai-visual {
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
   z-index: 4;
   padding: 1rem;
 }

 .ai-visual img {
   max-width: 100%;
   height: auto;
   width: 100%;
   border-radius: 12px;
   transition: transform 0.5s ease-in-out;
 }

 .ai-visual img:hover {
   transform: scale(1.02);
   /* Slight zoom on hover */
 }

 .hero-bg-video {
   height: 400px;
 }

 @media (max-width: 991px) {
   .affiliate-title {
     font-size: 1.8rem;
   }

   .features-wrapper {
     padding-left: 1.5rem;
   }

   .features-wrapper::before {
     left: 0.5rem;
   }

   .bullet {
     left: 0.2rem;
   }

   .highlight-line {
     left: 0.5rem;
   }

   .feature-item {
     padding-left: 1.5rem;
   }

   .ai-visual {
     margin-top: -5rem;
   }
 }



 /* Dynamic Soft Glow Overlay */
 .screen-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: radial-gradient(circle at 50% 50%, transparent, transparent 80%);
   z-index: 0;
   transition: background 0.2s ease;
   pointer-events: none;
 }

 /* Shiny CTA Button */
 .shiny-cta {
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 1rem 3rem;
   border-radius: 50px;
   background: linear-gradient(90deg, var(--accent-purple), var(--accent-pink));
   color: #fff;
   font-weight: 600;
   text-decoration: none;
   overflow: hidden;
   transition: transform 0.1s ease-out, box-shadow 0.3s ease;
   box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5), 7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
   z-index: 2;
   transform-style: preserve-3d;
   perspective: 900px;
 }

 .shiny-cta:hover {
   border: 1px solid #fff;
   box-shadow: 0 12px 35px rgba(123, 47, 247, 0.5), 0 0 40px rgba(241, 7, 163, 0.3) inset;
 }

 /* Inner glow inside button */
 .bg-button-purple {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   border-radius: 50px;
   background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.4), transparent 70%);
   z-index: -1;
   opacity: 0;
   transition: opacity 0.3s ease;
 }

 .shiny-cta:hover .bg-button-purple {
   opacity: 1;
 }

 /* Moving glow circle */
 .moving-circle {
   width: 120px;
   height: 120px;
   border-radius: 50%;
   background: radial-gradient(circle, var(--accent-orange), var(--accent-red));
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate3d(-50%, -50%, 0) scale(0.8);
   z-index: -1;
   opacity: 0.7;
   pointer-events: none;
   transition: all 0.2s ease;
   filter: blur(15px);
   transform-style: preserve-3d;
 }

 .shiny-cta:hover .moving-circle {
   opacity: 1;
   filter: blur(20px);
 }

 /* Button content */
 .content-2 {
   position: relative;
   z-index: 2;
   display: flex;
   align-items: center;
   gap: 12px;
 }

 .content-2 p {
   margin: 0;
   font-size: 1.2rem;
   font-weight: 600;
 }

 .image-9 {
   width: 24px;
   height: auto;
   transition: transform 0.3s ease;
 }

 .shiny-cta:hover .image-9 {
   transform: translateX(8px);
 }


 /* new */
 .faq-section {
   max-width: 900px;
   margin: auto;
 }

 .faq-title {
   color: #fff;
   text-align: center;


   margin-top: 5rem;
   margin-bottom: 2rem;
 }

 /* Accordion buttons without background */
 .accordion-button {
   background: transparent !important;
   /* background removed */
   color: #fff !important;
   border: none !important;
   font-weight: 500;
   padding: 1rem 1.25rem;
 }

 .accordion-button:not(.collapsed) {
   background: transparent !important;
   /* no background on active */
   color: #fff;
 }

 .accordion-button::after {
   filter: invert(1);
 }

 /* Accordion body without background */
 .accordion-body {
   background: transparent !important;
   color: #ddd;
   font-size: 0.95rem;
   padding: 1rem 1.25rem;
 }

 /* Items */
 .accordion-item {
   margin-bottom: 1rem;
   border: none !important;
   border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
   /* ruling line */
 }

 .accordion-item:last-child {
   margin-bottom: 10px;
   border-bottom: none;
 }

 .accordion-button:hover {
   background: rgba(255, 255, 255, 0.08);
   /* only hover shade if you want */
 }

 .accordion {
   --bs-accordion-color: var(--bs-body-color);
   --bs-accordion-bg: transparent !important;
   /* remove default bg */
 }

 .accordion-button:focus {
   outline: none;
   box-shadow: none;
 }

 /* end */

 /* new */
 .ai-mid-main {
   z-index: 0;
   flex: 32%;
   position: relative;
 }

 .ai-section {
   min-height: 100vh;
   display: flex;
   max-width: 1150px !important;
   align-items: center;
   justify-content: center;
 }

 .ai-main-left {
   position: relative;
   right: -6%;
   z-index: 1;
   top: -35px;
 }

 .ai-main-right {
   position: relative;
   left: -6%;
   top: -35px;
 }

 .ai-box {
   color: #fff;
   border-radius: 10px;
   padding: 20px;
   width: 300px;
   height: 170px;
   background-image: url(../image/box.png);
   background-repeat: no-repeat;
   background-size: contain;

   text-align: center;

 }

 .ai-box {

   transition: all 0.4s ease;
   animation: floatPulse 3s ease-in-out infinite;
 }


 /* Continuous subtle animation */
 @keyframes floatPulse {
   0% {
     transform: translateY(0px) scale(1);
   }

   50% {
     transform: translateY(-4px) scale(1.02);
   }

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


 .ai-box-4 {
   position: relative;
   left: -128%;
   top: 49%;
 }


 .ai-mid {
   background: url('../image/new-bg3.png') no-repeat center;
   background-size: contain;
   width: 450px;
   height: 380px;
   margin: auto;
 }


 /* Responsive */
 @media (max-width: 991px) {
   .ai-mid {
     display: none;
   }

   .ai-box {
     margin: 10px auto;
     width: 100%;
   }
 }

 @media (max-width: 786px) {

   .ai-box-2,
   .ai-box-4 {
     position: unset;
   }

   .ai-main-right,
   .ai-main-left {
     position: unset;
   }

   .ai-box {
     width: 300px;
   }

   .token-list-3d li {
     padding: 12px;
   }
 }

 /* end */

 /* footer */
 .footer-wrapper {
   margin-top: auto;
   background: linear-gradient(180deg, #0a1929 0%, #051423 100%);
   padding: 60px 0 30px;
 }

 .footer-content {
   text-align: center;
 }

 .logo-section {
   margin-bottom: 40px;

   display: flex;
   justify-content: center;
   /* horizontally center */
   align-items: center;
   /* vertically center (optional) */
   height: 100%;
   /* optional - depends on parent */
   text-align: center;

 }

 .logo-icon {

   height: 90px;
   margin-bottom: 15px;
 }


 .contact-section {
   margin: 40px 0;
 }

 .contact-link {
   color: #e0e0e0;
   text-decoration: none;
   font-size: 1.1rem;
   display: inline-flex;
   align-items: center;
   gap: 10px;
   transition: color 0.3s ease;
 }

 .contact-link:hover {
   color: #00d9ff;
 }

 .contact-link i {
   font-size: 1.2rem;
 }

 .divider {
   border: 0;
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   margin: 30px auto;
   max-width: 1200px;
 }

 .footer-bottom {
   display: flex;
   justify-content: space-between;
   align-items: center;
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 20px;
 }

 .footer-links {
   display: flex;
   gap: 30px;
 }

 .footer-link {
   color: #b0b0b0;
   text-decoration: none;
   font-size: 1rem;
   transition: color 0.3s ease;
 }

 .footer-link:hover {
   color: #00d9ff;
 }

 .copyright {
   color: #b0b0b0;
   font-size: 1rem;
   margin: 0;
 }

 @media (max-width: 768px) {
   .footer-bottom {
     flex-direction: column;
     gap: 20px;
     text-align: center;
   }

   .affiliate-section {
     padding: 1rem 1rem;
   }

   .hustats-card {
     width: 90%;
   }

   .hustats-card::before {
     top: -23%;
   }



   .ai-section {
     min-height: 100%;

   }

   .main-title {
     font-size: 1.5rem;
   }

   .hustats-card::after {
     content: "";
     position: absolute;
     bottom: -11%;
     left: -16%;
   }

   .footer-links {
     flex-direction: column;
     gap: 15px;
   }

   .brand-name {
     font-size: 2rem;
   }

   .premium-ai-card {
     width: 90%;
     flex-direction: column-reverse;
     padding: 20px;
   }

   .navbar-nav {
     border-radius: 12px;
     background-color: transparent;
   }
 }


 /* Right Side Offcanvas Menu */
 /* Offcanvas Menu */
 .offcanvas-menu {
   position: fixed;
   top: 0;
   right: -300px;
   width: 280px;
   height: 100vh;
   background: rgba(30, 30, 30, 0.8);
   backdrop-filter: blur(20px);
   box-shadow: -4px 0 15px rgba(0, 0, 0, 0.3);
   transition: right 0.4s ease;
   z-index: 1050;
   padding-top: 65px;
 }

 .offcanvas-menu.show {
   right: 0;
 }

 /* Overlay */
 .offcanvas-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5);
   backdrop-filter: blur(2px);
   z-index: 1040;
   display: none;
 }

 .offcanvas-overlay.show {
   opacity: 1;
   pointer-events: auto;
 }

 /* Close Button */
 .close-btn {
   position: absolute;
   top: 10px;
   right: 10px;
   /* right side */
   background: none;
   border: none;
   font-size: 2.5rem;
   cursor: pointer;
   color: #fff;
   align-self: flex-start;
   /* vertical alignment top */
   margin-left: auto;
   /* horizontal right */
 }


 /* footer end */