/* Custom CSS for Cyber Animations & Glassmorphism */
body{
      background-color: #05070f;
      color: #f1f5f9;
      font-family: 'Inter', sans-serif;
      overflow-x: hidden;
      user-select: none;
    }

    /* Custom Scrollbar */
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
    ::-webkit-scrollbar-track {
      background: #05070f;
    }
    ::-webkit-scrollbar-thumb {
      background: #00f0ff33;
      border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: #00f0ffaa;
    }

    /* Background Cyber Canvas */
    #cyberCanvas {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      z-index: 0;
      pointer-events: none;
    }

    /* Glassmorphism Card Style */
    .cyber-glass {
      background: rgba(10, 15, 29, 0.85);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(0, 240, 255, 0.2);
      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.6),
                  inset 0 0 15px rgba(0, 240, 255, 0.05);
    }

    .cyber-glass-green {
      background: rgba(10, 25, 20, 0.85);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(0, 255, 136, 0.3);
      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.6),
                  inset 0 0 15px rgba(0, 255, 136, 0.05);
    }

    .cyber-glass-red {
      background: rgba(25, 10, 15, 0.85);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 0, 85, 0.3);
      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.6),
                  inset 0 0 15px rgba(255, 0, 85, 0.05);
    }

    /* Neon Text Shadows */
    .glow-cyan {
      text-shadow: 0 0 10px rgba(0, 240, 255, 0.7), 0 0 20px rgba(0, 240, 255, 0.4);
    }
    .glow-green {
      text-shadow: 0 0 10px rgba(0, 255, 136, 0.7), 0 0 20px rgba(0, 255, 136, 0.4);
    }
    .glow-red {
      text-shadow: 0 0 10px rgba(255, 0, 85, 0.7), 0 0 20px rgba(255, 0, 85, 0.4);
    }

    /* Animated Border Pulse */
    @keyframes pulseGlow {
      0%, 100% { border-color: rgba(0, 240, 255, 0.4); box-shadow: 0 0 15px rgba(0, 240, 255, 0.2); }
      50% { border-color: rgba(0, 255, 136, 0.8); box-shadow: 0 0 25px rgba(0, 255, 136, 0.4); }
    }
    .cyber-pulse-border {
      animation: pulseGlow 4s infinite ease-in-out;
    }

    /* Slide Transition */
    .slide-step {
      display: none;
      opacity: 0;
      transform: translateY(20px) scale(0.98);
      transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .slide-step.active {
      display: block;
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    /* 3D Perspective Tilt Card Effects */
    .tilt-card {
      transform-style: preserve-3d;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .tilt-card:hover {
      transform: translateY(-5px) rotateX(4deg) rotateY(-2deg) scale(1.02);
      box-shadow: 0 12px 30px rgba(0, 240, 255, 0.25);
    }

    /* Matrix Scanlines Overlay */
    .scanlines {
      background: linear-gradient(
        to bottom,
        rgba(255,255,255,0),
        rgba(255,255,255,0) 50%,
        rgba(0, 0, 0, 0.3) 50%,
        rgba(0, 0, 0, 0.3)
      );
      background-size: 100% 4px;
      pointer-events: none;
    }

    /* Terminal Blink Cursor */
    @keyframes blink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0; }
    }
    .cursor-blink {
      animation: blink 1s infinite;
    }

    /* Glitch Animation */
    @keyframes glitch {
      0% { transform: translate(0) }
      20% { transform: translate(-2px, 2px) }
      40% { transform: translate(-2px, -2px) }
      60% { transform: translate(2px, 2px) }
      80% { transform: translate(2px, -2px) }
      100% { transform: translate(0) }
    }
    .glitch-hover:hover {
      animation: glitch 0.2s ease infinite;
    }