* {
        font-family: "Plus Jakarta Sans", sans-serif;
      }

      body {
        background: linear-gradient(135deg, #0a0e27 0%, #0f1436 100%);
        color: #e8eaed;
      }

      .material-symbols-outlined {
        font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
      }

      /* Gradient text effect */
      .gradient-text {
        background: linear-gradient(135deg, #00d9ff 0%, #00e5b8 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }

      /* Card with glass effect */
      .glass-card {
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        transition: all 0.3s ease;
      }

      .glass-card:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(0, 217, 255, 0.3);
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(0, 217, 255, 0.1);
      }

      /* Smooth scroll */
      html {
        scroll-behavior: smooth;
      }

      /* Scroll progress bar */
      .scroll-progress {
        position: fixed;
        top: 0;
        left: 0;
        width: 0%;
        height: 3px;
        background: linear-gradient(90deg, #00d9ff, #00e5b8);
        z-index: 9999;
        transition: width 0.3s ease;
      }

      /* Animated gradient border */
      .gradient-border {
        position: relative;
        border: 2px solid transparent;
        background-clip: padding-box;
        background: linear-gradient(135deg, #0a0e27, #0f1436) padding-box;
      }

      .gradient-border::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, #00d9ff, #00e5b8);
        border-radius: inherit;
        z-index: -1;
        opacity: 0.3;
      }

      /* Button styles */
      .btn-primary {
        background: linear-gradient(135deg, #00d9ff 0%, #00e5b8 100%);
        color: #0a0e27;
        font-weight: 600;
        transition: all 0.3s ease;
        box-shadow: 0 10px 25px rgba(0, 217, 255, 0.2);
      }

      .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 15px 35px rgba(0, 217, 255, 0.3);
      }

      .btn-outline {
        border: 2px solid #00d9ff;
        color: #00d9ff;
        transition: all 0.3s ease;
      }

      .btn-outline:hover {
        background: rgba(0, 217, 255, 0.1);
        transform: translateY(-2px);
      }

      /* Fade in animation */
      @keyframes fadeInUp {
        from {
          opacity: 0;
          transform: translateY(30px);
        }

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

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

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

      @keyframes slideInRight {
        from {
          opacity: 0;
          transform: translateX(30px);
        }

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

      .animate-fadeInUp {
        animation: fadeInUp 0.8s ease-out forwards;
      }

      .animate-fadeInDown {
        animation: fadeInDown 0.8s ease-out forwards;
      }

      .animate-slideInRight {
        animation: slideInRight 0.8s ease-out forwards;
      }

      /* Mobile menu */
      .mobile-menu {
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;
      }

      .mobile-menu.open {
        transform: translateX(0);
      }

      /* Back to top */
      .back-to-top {
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
      }

      .back-to-top.visible {
        opacity: 1;
        visibility: visible;
      }

      /* Feature grid */
      .feature-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
      }

      /* Section spacing */
      .section-spacing {
        padding: 6rem 1.5rem;
      }

      @media (max-width: 768px) {
        .section-spacing {
          padding: 3rem 1rem;
        }
      }