/* WSI Homepage Custom Styles */

/* ---------- Base Styles ---------- */
* {
    scroll-behavior: smooth;
  }
  
  body {
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
  
  /* ---------- Hero Section ---------- */
  .hero-gradient {
    position: relative;
    background: linear-gradient(135deg, #0B2F5A 0%, #1E3A8A 50%, #059669 100%);
    min-height: 70vh;
  }
  
  .hero-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.03)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
    pointer-events: none;
  }
  
  @keyframes fade-in {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .animate-fade-in {
    animation: fade-in 1s ease-out forwards;
  }
  
  /* ---------- Button Styles ---------- */
  button {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  button:hover {
    transform: translateY(-1px);
  }
  
  button:active {
    transform: translateY(0);
  }
  
  button::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: left 0.5s;
  }
  
  button:hover::before {
    left: 100%;
  }
  
  /* ---------- Stats Section ---------- */
  .stats-counter {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    letter-spacing: -0.02em;
  }
  
  /* ---------- Feature Cards ---------- */
  .feature-card {
    position: relative;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(11, 47, 90, 0.05) 0%, rgba(5, 150, 105, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: inherit;
  }
  
  .feature-card:hover::before {
    opacity: 1;
  }
  
  .feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    border-color: rgba(124, 179, 66, 0.3);
  }
  
  /* ---------- Industry Cards ---------- */
  .industry-card {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .industry-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transition: left 0.6s ease;
  }
  
  .industry-card:hover::before {
    left: 100%;
  }
  
  .industry-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
  }
  
  /* ---------- Use Case Cards ---------- */
  .use-case-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(0, 0, 0, 0.05);
  }
  
  .use-case-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: rgba(124, 179, 66, 0.2);
  }
  
  /* ---------- Responsive Design ---------- */
  @media (max-width: 768px) {
    .hero-gradient {
      padding: 3rem 0;
    }
    
    .hero-gradient h1 {
      font-size: 2.5rem;
      line-height: 1.2;
    }
    
    .hero-gradient p {
      font-size: 1.1rem;
    }
    
    .feature-card, .use-case-card {
      padding: 1.5rem;
    }
    
    .stats-counter {
      font-size: 2.5rem;
    }
  }
  
  @media (max-width: 640px) {
    .hero-gradient h1 {
      font-size: 2rem;
    }
    
    .hero-gradient p {
      font-size: 1rem;
      margin-bottom: 2rem;
    }
    
    .feature-card, .use-case-card {
      padding: 1.25rem;
    }
    
    .industry-card {
      padding: 1rem;
    }
    
    .stats-counter {
      font-size: 2rem;
    }
  }
  
  /* ---------- Loading States ---------- */
  button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none !important;
  }
  
  button:disabled::before {
    display: none;
  }
  
  /* ---------- Focus States ---------- */
  button:focus {
    outline: none;
    ring: 4px;
    ring-opacity: 0.3;
  }
  
  button:focus.bg-gradient-to-r {
    ring-color: rgba(124, 179, 66, 0.3);
  }
  
  button:focus.border-2 {
    ring-color: rgba(255, 255, 255, 0.3);
  }
  
  /* ---------- Print Styles ---------- */
  @media print {
    .hero-gradient {
      background: #0B2F5A !important;
      color: white !important;
    }
    
    button {
      display: none;
    }
    
    .feature-card, .use-case-card, .industry-card {
      break-inside: avoid;
      box-shadow: none;
      border: 1px solid #ccc;
    }
  }
  
  /* ---------- High Contrast Mode ---------- */
  @media (prefers-contrast: high) {
    .feature-card, .use-case-card {
      border: 2px solid #000;
    }
    
    .hero-gradient {
      background: #000 !important;
    }
    
    .industry-card {
      border: 2px solid rgba(255, 255, 255, 0.5);
    }
  }
  
  /* ---------- Reduced Motion ---------- */
  @media (prefers-reduced-motion: reduce) {
    * {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
    
    .animate-fade-in {
      animation: none;
      opacity: 1;
      transform: none;
    }
  }