:root {
         --bg-color: #0a0f1e;
         --accent-primary: #00f5ff;
         --accent-secondary: #c63421;
         --text-primary: #ffffff;
         --text-secondary: rgba(255, 255, 255, 0.7);
         --card-bg: rgba(15, 23, 42, 0.7);
         --card-border: rgba(0, 245, 255, 0.2);
     }

     body {
         background-color: var(--bg-color);
         font-family: 'Inter', sans-serif;
         color: var(--text-primary);
         margin: 0;
         padding: 0;
         min-height: 100vh;
         overflow-x: hidden;
     }

     .space {
         height: 80px;
     }

     h1 {
         font-size: 3.5rem;
         font-weight: 800;
         text-align: center;
         margin-bottom: 3rem;
         background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
         -webkit-background-clip: text;
         background-clip: text;
         color: transparent;
         position: relative;
         padding-bottom: 1rem;
     }

     h1::after {
         content: '';
         position: absolute;
         bottom: 0;
         left: 50%;
         transform: translateX(-50%);
         width: 100px;
         height: 4px;
         background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
         border-radius: 2px;
     }

     /* Services Section */
     .services-container {
         max-width: 1400px;
         margin: 0 auto;
         padding: 2rem;
     }

     .services-tabs {
         display: flex;
         justify-content: center;
         flex-wrap: wrap;
         gap: 1rem;
         margin-bottom: 3rem;
     }

     .services-tab {
         padding: 1rem 2rem;
         background: var(--card-bg);
         border: 1px solid var(--card-border);
         border-radius: 50px;
         cursor: pointer;
         transition: all 0.3s ease;
         font-weight: 600;
         backdrop-filter: blur(10px);
     }

     .services-tab:hover {
         transform: translateY(-3px);
         box-shadow: 0 5px 15px rgba(0, 245, 255, 0.2);
     }

     .services-tab.active {
         background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
         border-color: transparent;
     }

     .services-content {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
         gap: 2rem;
     }

     .service-card {
         background: var(--card-bg);
         border: 1px solid var(--card-border);
         border-radius: 20px;
         padding: 2.5rem;
         transition: all 0.4s ease;
         position: relative;
         overflow: hidden;
         backdrop-filter: blur(10px);
         transform-style: preserve-3d;
         perspective: 1000px;
         opacity: 0;
         transform: translateY(50px);
     }

     .service-card::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: linear-gradient(135deg, rgba(0, 245, 255, 0.1) 0%, transparent 50%);
         opacity: 0;
         transition: opacity 0.4s ease;
         z-index: 0;
     }

     .service-card::after {
         content: '';
         position: absolute;
         top: -2px;
         left: -2px;
         right: -2px;
         bottom: -2px;
         background: linear-gradient(45deg, var(--accent-primary), transparent, var(--accent-secondary), transparent);
         background-size: 400% 400%;
         z-index: -1;
         border-radius: 22px;
         animation: gradientShift 8s ease infinite;
         opacity: 0;
         transition: opacity 0.4s ease;
     }

     .service-card:hover {
         transform: translateY(-10px) scale(1.02);
         box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
     }

     .service-card:hover::before {
         opacity: 1;
     }

     .service-card:hover::after {
         opacity: 1;
     }

     .service-icon {
         width: 80px;
         height: 80px;
         background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
         border-radius: 20px;
         display: flex;
         align-items: center;
         justify-content: center;
         margin: 0 auto 1.5rem;
         position: relative;
         transition: all 0.4s ease;
     }

     .service-card:hover .service-icon {
         transform: scale(1.1) rotate(5deg);
     }

     .service-icon .material-symbols-outlined {
         font-size: 2.5rem;
         color: var(--text-primary);
     }

     .service-icon::after {
         content: '';
         position: absolute;
         inset: -3px;
         background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
         border-radius: 22px;
         z-index: -1;
         opacity: 0.7;
         filter: blur(10px);
     }

     .service-title {
         font-size: 1.5rem;
         font-weight: 700;
         text-align: center;
         margin-bottom: 1rem;
         color: var(--text-primary);
         position: relative;
     }

     .service-title::after {
         content: '';
         position: absolute;
         bottom: -8px;
         left: 50%;
         transform: translateX(-50%);
         width: 40px;
         height: 3px;
         background: var(--accent-primary);
         border-radius: 2px;
         transition: width 0.4s ease;
     }

     .service-card:hover .service-title::after {
         width: 80px;
     }

     .service-description {
         color: var(--text-secondary);
         text-align: center;
         margin-bottom: 1.5rem;
         line-height: 1.6;
     }

     .service-features {
         list-style: none;
         padding: 0;
         margin: 0 0 1.5rem 0;
     }

     .service-features li {
         position: relative;
         padding: 0.5rem 0 0.5rem 2rem;
         color: var(--text-secondary);
         transition: all 0.3s ease;
     }

     .service-features li::before {
         content: '✓';
         position: absolute;
         left: 0;
         color: var(--accent-primary);
         font-weight: 600;
         transition: all 0.3s ease;
     }

     .service-features li:hover {
         color: var(--text-primary);
         transform: translateX(5px);
     }

     .service-features li:hover::before {
         color: var(--accent-secondary);
         transform: scale(1.2);
     }

     .service-price {
         text-align: center;
         font-size: 1.5rem;
         font-weight: 700;
         margin-bottom: 1.5rem;
         color: var(--accent-primary);
     }

     .service-price span {
         font-size: 1rem;
         color: var(--text-secondary);
         font-weight: 400;
     }

     .service-cta {
         display: block;
         width: 100%;
         padding: 1rem;
         background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
         color: var(--text-primary);
         border-radius: 50px;
         text-decoration: none;
         font-weight: 600;
         text-align: center;
         transition: all 0.3s ease;
         border: none;
         cursor: pointer;
     }

     .service-cta:hover {
         transform: translateY(-2px);
         box-shadow: 0 5px 15px rgba(0, 245, 255, 0.3);
     }

     /* Background elements */
     .bg-globe {
         position: absolute;
         top: 20%;
         right: 5%;
         width: 400px;
         height: 400px;
         background: radial-gradient(circle at center, rgba(0, 245, 255, 0.1) 0%, transparent 70%);
         border-radius: 50%;
         filter: blur(40px);
         z-index: -1;
         animation: float 15s ease-in-out infinite;
     }

     .bg-particles {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         pointer-events: none;
         z-index: -1;
     }

     .particle {
         position: absolute;
         background: var(--accent-primary);
         border-radius: 50%;
         opacity: 0.3;
         animation: floatParticle 20s linear infinite;
     }

     /* Animations */
     @keyframes gradientShift {
         0%, 100% { background-position: 0% 50%; }
         50% { background-position: 100% 50%; }
     }

     @keyframes float {
         0%, 100% { transform: translateY(0) rotate(0deg); }
         50% { transform: translateY(-20px) rotate(5deg); }
     }

     @keyframes floatParticle {
         0% {
             transform: translateY(100vh) translateX(0) rotate(0deg);
             opacity: 0;
         }
         10% { opacity: 0.3; }
         90% { opacity: 0.2; }
         100% {
             transform: translateY(-100px) translateX(100px) rotate(360deg);
             opacity: 0;
         }
     }

     /* Responsive Design */
     @media (max-width: 1024px) {
         .services-content {
             grid-template-columns: repeat(2, 1fr);
         }

         h1 {
             font-size: 2.8rem;
         }
     }

     @media (max-width: 768px) {
         .services-content {
             grid-template-columns: 1fr;
             padding: 1rem;
         }

         .services-tabs {
             flex-direction: column;
             align-items: center;
         }

         .services-tab {
             width: 100%;
             text-align: center;
         }

         h1 {
             font-size: 2.2rem;
         }

         .service-card {
             padding: 2rem;
         }

         .bg-globe {
             width: 300px;
             height: 300px;
             top: 10%;
             right: -50px;
         }
     }

     @media (max-width: 480px) {
         h1 {
             font-size: 1.8rem;
         }

         .service-icon {
             width: 60px;
             height: 60px;
         }

         .service-icon .material-symbols-outlined {
             font-size: 2rem;
         }
     }