:root {
    --primary-color: #6366f1;
    --secondary-color: #8b5cf6;
    --text-dark: #333;
    --text-light: #fff;
    --transition-speed: 0.3s;
  }
  
  /* Animations */
  @keyframes pulse-glow {
    0% {
      box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
      transform: scale(1);
    }
    
    50% {
      box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.2);
      transform: scale(1.02);
    }
    
    100% {
      box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
      transform: scale(1);
    }
  }
  
  @keyframes text-shimmer {
    0% {
      background-position: -100% 0;
    }
    100% {
      background-position: 100% 0;
    }
  }
  
  @keyframes ripple {
    0% {
      transform: scale(0, 0);
      opacity: 0.5;
    }
    20% {
      transform: scale(25, 25);
      opacity: 0.3;
    }
    100% {
      opacity: 0;
      transform: scale(40, 40);
    }
  }
  
  /* Login Button Styles */
  .login-btn {
    position: relative;
    overflow: hidden;
    transition: all var(--transition-speed) ease;
    animation: pulse-glow 2s infinite;
  }
  
  .login-btn:hover {
    transform: translateY(-2px);
    background: linear-gradient(45deg, #fff, #f8f9fa);
  }
  
  .login-text {
    background: linear-gradient(
      90deg,
      var(--text-dark) 0%,
      #333 50%,
      var(--text-dark) 100%
    );
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: text-shimmer 3s linear infinite;
  }
  
  .login-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%);
    transform-origin: 50% 50%;
  }
  
  .login-btn:active::after {
    animation: ripple 1s ease-out;
  }
  
  /* Hero Section */
  .hero-section {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    padding: 120px 0;
    color: var(--text-light);
  }
  
  /* Feature Cards */
  .feature-card {
    transition: transform var(--transition-speed) ease;
    cursor: pointer;
  }
  
  .feature-card:hover {
    transform: translateY(-5px);
  }
  
  /* Documentation Sidebar */
  .sidebar {
    position: sticky;
    top: 2rem;
  }
  
  .doc-section {
    scroll-margin-top: 2rem; 
  }
  
  /* Responsive Adjustments */
  @media (max-width: 768px) {
    .hero-section {
      padding: 80px 0;
    }
    
    .sidebar {
      position: relative;
      margin-bottom: 2rem;
    }
  }