@font-face {
     font-family: 'PowerGrotesk';
     src: url('/assets/font/PowerGrotesk.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
     font-display: swap;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(20px);
     }

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

 @keyframes slideUp {
     from {
         opacity: 0;
         transform: translateY(40px);
     }

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

 @keyframes pulseGlow {

     0%,
     100% {
         box-shadow: 0 0 20px rgba(119, 96, 254, 0.3);
     }

     50% {
         box-shadow: 0 0 40px rgba(119, 96, 254, 0.6);
     }
 }

 @keyframes float {

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

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

 body {
     background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f1419 100%);
     font-family: 'Poppins', sans-serif;
 }

 .glass-card {
     background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(20px);
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 20px;
     transition: all 0.3s ease;
 }

 .glass-card:hover {
     background: rgba(255, 255, 255, 0.15);
     transform: translateY(-5px);
     box-shadow: 0 20px 40px rgba(119, 96, 254, 0.2);
 }

 .btn-primary {
     background: linear-gradient(135deg, #7760fe, #9180fa);
     transition: all 0.3s ease;
     position: relative;
     overflow: hidden;
 }

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

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

 .btn-primary:hover {
     transform: translateY(-2px);
     box-shadow: 0 10px 25px rgba(119, 96, 254, 0.4);
 }

 .stats-item {
     transition: all 0.3s ease;
 }

 .stats-item:hover {
     transform: scale(1.05);
 }

 .copy-notification {
     position: fixed;
     top: 20px;
     right: 20px;
     background: linear-gradient(135deg, #10b981, #059669);
     color: white;
     padding: 12px 24px;
     border-radius: 10px;
     transform: translateX(400px);
     transition: transform 0.3s ease;
     z-index: 1000;
 }

 .copy-notification.show {
     transform: translateX(0);
 }

 .tooltip {
     position: relative;
 }

 .tooltip:hover::after {
     content: attr(data-tooltip);
     position: absolute;
     bottom: 125%;
     left: 50%;
     transform: translateX(-50%);
     background: rgba(0, 0, 0, 0.8);
     color: white;
     padding: 8px 12px;
     border-radius: 6px;
     font-size: 14px;
     white-space: nowrap;
     z-index: 100;
 }

 @media (max-width: 768px) {
     .glass-card {
         margin: 20px;
         padding: 30px 20px;
     }
 }