:root {
     --primary-color: #6c63ff;
     --primary-light: #8b85ff;
     --primary-dark: #564fd1;
     --secondary-color: #00bfa6;
     --dark-color: #1a1a2e;
     --light-color: #f8f9fa;
     --gray-color: #6c757d;
     --light-gray: #e9ecef;
     --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
     --gradient-dark: linear-gradient(135deg, var(--dark-color) 0%, #16213e 100%);
 }

 body {
     font-family: 'Poppins', sans-serif;
     overflow-x: hidden;
     color: var(--dark-color);
     line-height: 1.7;
     background-color: #fefefe;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 .display-1,
 .display-2,
 .display-3,
 .display-4 {
     font-family: 'Montserrat', sans-serif;
     font-weight: 700;
 }

 .navbar {
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
     background-color: rgba(255, 255, 255, 0.98);
     backdrop-filter: blur(10px);
     padding: 20px 0;
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }

 .navbar.scrolled {
     padding: 12px 0;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
 }

 .navbar-brand {
     font-weight: 800;
     font-size: 1.8rem;
     color: var(--primary-color) !important;
     letter-spacing: -0.5px;
 }

 .nav-link {
     font-weight: 600;
     color: var(--dark-color) !important;
     margin: 0 10px;
     position: relative;
     font-size: 0.95rem;
 }

 .nav-link:after {
     content: '';
     position: absolute;
     width: 0;
     height: 3px;
     background: var(--gradient-primary);
     bottom: 0;
     left: 0;
     transition: width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     border-radius: 3px;
 }

 .nav-link:hover:after {
     width: 100%;
 }

 .hero-section {
     background: var(--gradient-dark);
     padding: 10rem 0 8rem;
     color: white;
     position: relative;
     overflow: hidden;
 }

 .hero-section:before {
     content: '';
     position: absolute;
     top: -50%;
     right: -50%;
     width: 100%;
     height: 200%;
     background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 70%);
     transform: rotate(30deg);
     animation: pulse 15s infinite alternate;
 }

 @keyframes pulse {
     0% {
         opacity: 0.3;
     }

     100% {
         opacity: 0.1;
     }
 }

 .hero-title {
     font-weight: 800;
     line-height: 1.15;
     text-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
     letter-spacing: -0.5px;
 }

 .hero-subtitle {
     opacity: 0.9;
     font-size: 1.2rem;
 }

 .btn {
     font-weight: 600;
     padding: 0.8rem 1.8rem;
     border-radius: 10px;
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     border-width: 2px;
 }

 .btn-primary {
     background: var(--gradient-primary);
     border: none;
     box-shadow: 0 10px 20px rgba(108, 99, 255, 0.3);
     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: 0.5s;
 }

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

 .btn-primary:hover {
     transform: translateY(-3px);
     box-shadow: 0 15px 30px rgba(108, 99, 255, 0.4);
 }

 .btn-outline-light {
     border-color: rgba(255, 255, 255, 0.3);
     background: transparent;
     color: white;
 }

 .btn-outline-light:hover {
     background: white;
     color: var(--dark-color);
     transform: translateY(-3px);
     box-shadow: 0 10px 20px rgba(255, 255, 255, 0.2);
 }

 .section-title {
     font-weight: 800;
     position: relative;
     display: inline-block;
     margin-bottom: 2rem;
     letter-spacing: -0.5px;
 }

 .section-title:after {
     content: '';
     position: absolute;
     width: 60px;
     height: 5px;
     background: var(--gradient-primary);
     bottom: -12px;
     left: 50%;
     transform: translateX(-50%);
     border-radius: 3px;
 }

 .section-title.text-start:after {
     left: 0;
     transform: none;
 }

 .section-subtitle {
     color: var(--gray-color);
     max-width: 700px;
     margin: 0 auto 3rem;
     font-size: 1.1rem;
 }

 .feature-card {
     border: none;
     border-radius: 16px;
     overflow: hidden;
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     height: 100%;
     background-color: white;
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);
     border: 1px solid rgba(0, 0, 0, 0.03);
 }

 .feature-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
 }

 .feature-icon {
     width: 80px;
     height: 80px;
     border-radius: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 1.5rem;
     background: var(--gradient-primary);
     color: white;
     font-size: 2rem;
     box-shadow: 0 10px 20px rgba(108, 99, 255, 0.2);
 }

 .feature-icon.secondary {
     background: linear-gradient(135deg, #00bfa6 0%, #00a8cc 100%);
 }

 .feature-icon.orange {
     background: linear-gradient(135deg, #ff9a44 0%, #ff6b6b 100%);
 }

 .feature-icon.purple {
     background: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%);
 }

 .tech-badge {
     display: inline-block;
     background-color: white;
     color: var(--dark-color);
     padding: 8px 20px;
     border-radius: 50px;
     margin: 8px;
     font-size: 0.9rem;
     font-weight: 600;
     transition: all 0.3s ease;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
     border: 1px solid rgba(0, 0, 0, 0.05);
 }

 .tech-badge:hover {
     background: var(--gradient-primary);
     color: white;
     transform: translateY(-3px);
     box-shadow: 0 10px 25px rgba(108, 99, 255, 0.3);
 }

 .tech-badge i {
     margin-right: 8px;
     font-size: 1.1rem;
 }

 .pricing-card {
     border: none;
     border-radius: 20px;
     overflow: hidden;
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);
     border: 1px solid rgba(0, 0, 0, 0.03);
 }

 .pricing-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
 }

 .pricing-card.popular {
     border: 2px solid var(--primary-color);
     position: relative;
 }

 .popular-badge {
     position: absolute;
     top: 0;
     right: 20px;
     transform: translateY(-50%);
     background: var(--gradient-primary);
     color: white;
     padding: 6px 20px;
     border-radius: 50px;
     font-size: 0.8rem;
     font-weight: 700;
     box-shadow: 0 10px 20px rgba(108, 99, 255, 0.3);
 }

 .testimonial-card {
     border: none;
     border-radius: 16px;
     background-color: white;
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);
     position: relative;
     overflow: hidden;
     border: 1px solid rgba(0, 0, 0, 0.03);
 }

 .testimonial-card:before {
     content: '"';
     position: absolute;
     top: 20px;
     right: 30px;
     font-size: 6rem;
     color: var(--light-gray);
     font-family: Georgia, serif;
     line-height: 1;
     z-index: 0;
     opacity: 0.5;
 }

 .testimonial-content {
     position: relative;
     z-index: 1;
 }

 .contact-card {
     border: none;
     border-radius: 20px;
     background-color: white;
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);
     overflow: hidden;
     border: 1px solid rgba(0, 0, 0, 0.03);
 }

 .form-control,
 .form-select {
     border-radius: 10px;
     padding: 0.9rem 1.2rem;
     border: 1px solid var(--light-gray);
     transition: all 0.3s ease;
 }

 .form-control:focus,
 .form-select:focus {
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.2);
 }

 .social-icon {
     width: 45px;
     height: 45px;
     border-radius: 50%;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     background: var(--gradient-primary);
     color: white;
     margin-right: 12px;
     transition: all 0.3s ease;
     box-shadow: 0 5px 15px rgba(108, 99, 255, 0.2);
 }

 .social-icon:hover {
     transform: translateY(-3px);
     box-shadow: 0 10px 25px rgba(108, 99, 255, 0.3);
 }

 .footer {
     background: var(--gradient-dark);
     color: white;
     padding: 6rem 0 3rem;
     position: relative;
     overflow: hidden;
 }

 .footer:before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
 }

 .footer-link {
     color: rgba(255, 255, 255, 0.7);
     text-decoration: none;
     transition: all 0.2s ease;
     font-weight: 500;
 }

 .footer-link:hover {
     color: white;
     text-decoration: none;
     transform: translateX(5px);
 }

 .footer-title {
     font-weight: 700;
     margin-bottom: 1.8rem;
     position: relative;
     letter-spacing: -0.5px;
 }

 .footer-title:after {
     content: '';
     position: absolute;
     width: 40px;
     height: 4px;
     background: var(--gradient-primary);
     bottom: -10px;
     left: 0;
     border-radius: 3px;
 }

 .hero-image {
     border-radius: 20px;
     box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.3);
     transform: perspective(1000px) rotateY(-10deg);
     transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     border: 10px solid white;
 }

 .hero-image:hover {
     transform: perspective(1000px) rotateY(0deg);
 }

 .floating {
     animation: floating 8s ease-in-out infinite;
 }

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

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

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

 .bg-gradient-light {
     background: linear-gradient(to bottom, #f8f9fa 0%, white 100%);
 }

 .bg-pattern {
     background-image: radial-gradient(var(--light-gray) 1px, transparent 1px);
     background-size: 25px 25px;
 }

 .stats-card {
     background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(10px);
     border-radius: 16px;
     padding: 2rem;
     transition: all 0.4s ease;
     border: 1px solid rgba(255, 255, 255, 0.1);
 }

 .stats-card:hover {
     transform: translateY(-5px);
     background: rgba(255, 255, 255, 0.15);
 }

 /* Custom Shapes */
 .shape-1 {
     position: absolute;
     top: 10%;
     left: 5%;
     width: 200px;
     height: 200px;
     background: linear-gradient(45deg, var(--primary-color), transparent);
     border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
     opacity: 0.2;
     filter: blur(30px);
     animation: shapeMove1 15s infinite alternate;
 }

 .shape-2 {
     position: absolute;
     bottom: 10%;
     right: 5%;
     width: 300px;
     height: 300px;
     background: linear-gradient(45deg, var(--secondary-color), transparent);
     border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
     opacity: 0.2;
     filter: blur(40px);
     animation: shapeMove2 20s infinite alternate;
 }

 @keyframes shapeMove1 {
     0% {
         transform: translate(0, 0) rotate(0deg);
     }

     100% {
         transform: translate(50px, 50px) rotate(20deg);
     }
 }

 @keyframes shapeMove2 {
     0% {
         transform: translate(0, 0) rotate(0deg);
     }

     100% {
         transform: translate(-50px, -50px) rotate(-20deg);
     }
 }

 /* Responsive adjustments */
 @media (max-width: 768px) {
     .hero-section {
         padding: 8rem 0 6rem;
         text-align: center;
     }

     .hero-title {
         font-size: 2.5rem;
     }

     .section-title:after {
         left: 50%;
         transform: translateX(-50%);
         width: 60px;
     }

     .section-title.text-start:after {
         left: 50%;
         transform: translateX(-50%);
     }
 }