/* ============================================================
   LARAVINA — High-End Software & OTT Styles
   ============================================================ */

   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Outfit:wght@400;600;800;900&display=swap');

   html {
     scroll-behavior: smooth;
     background-color: #050811;
     color: #F8FAFC;
   }
   
   body {
     overflow-x: hidden;
     background: #050811; 
   }
   
   ::selection {
     background: rgba(0, 240, 255, 0.3);
   }
   
   /* Custom Scrollbar */
   ::-webkit-scrollbar {
     width: 8px;
   }
   ::-webkit-scrollbar-track {
     background: #050811;
   }
   ::-webkit-scrollbar-thumb {
     background: #1E293B;
     border-radius: 4px;
   }
   ::-webkit-scrollbar-thumb:hover {
     background: #0055FF;
   }
   
   /* Glassmorphism Classes */
   .glass {
     background: rgba(20, 28, 43, 0.4);
     backdrop-filter: blur(24px);
     -webkit-backdrop-filter: blur(24px);
     border: 1px solid rgba(255, 255, 255, 0.05);
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
   }
   .glass-nav {
     background: rgba(5, 8, 17, 0.7);
     backdrop-filter: blur(24px);
     -webkit-backdrop-filter: blur(24px);
     border-bottom: 1px solid rgba(255, 255, 255, 0.05);
   }
   
   /* Glowing Text Gradients */
   .text-gradient {
     background: linear-gradient(to right, #00F0FF, #0055FF);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
   }
   .text-gradient-purple {
     background: linear-gradient(135deg, #A855F7, #EC4899);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
   }
   
   /* Premium Buttons */
   .btn-primary {
     position: relative;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 0.875rem 2rem;
     font-family: 'Outfit', sans-serif;
     font-weight: 600;
     font-size: 1.125rem;
     color: #FFFFFF;
     background: linear-gradient(135deg, #0055FF, #0022AA);
     border-radius: 9999px;
     transition: all 0.3s ease;
     box-shadow: 0 10px 20px -5px rgba(0, 85, 255, 0.5);
     z-index: 1;
     overflow: hidden;
   }
   .btn-primary::before {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, #00F0FF, #0055FF);
     z-index: -1;
     opacity: 0;
     transition: opacity 0.3s ease;
   }
   .btn-primary:hover {
     transform: translateY(-2px);
     box-shadow: 0 15px 30px -5px rgba(0, 240, 255, 0.6);
   }
   .btn-primary:hover::before {
     opacity: 1;
   }
   
   .btn-secondary {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 0.875rem 2rem;
     font-family: 'Outfit', sans-serif;
     font-weight: 600;
     font-size: 1.125rem;
     color: #FFFFFF;
     border-radius: 9999px;
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(10px);
     transition: all 0.3s ease;
   }
   .btn-secondary:hover {
     background: rgba(255, 255, 255, 0.1);
     border-color: rgba(255, 255, 255, 0.2);
     transform: translateY(-2px);
   }
   
   /* Floating Glow Orbs for background aesthetics */
   .glow-orb {
     position: absolute;
     border-radius: 50%;
     filter: blur(120px);
     z-index: -1;
     pointer-events: none;
   }
   .orb-1 {
     top: -100px;
     left: -100px;
     width: 600px;
     height: 600px;
     background: rgba(0, 85, 255, 0.15);
   }
   .orb-2 {
     top: 40%;
     right: -200px;
     width: 800px;
     height: 800px;
     background: rgba(0, 240, 255, 0.1);
   }
   .orb-3 {
     bottom: -200px;
     left: 20%;
     width: 700px;
     height: 700px;
     background: rgba(168, 85, 247, 0.1);
   }
   
   /* Feature Cards */
   .feature-card {
     position: relative;
     padding: 2.5rem;
     border-radius: 1.5rem;
     background: linear-gradient(180deg, rgba(30, 41, 59, 0.4) 0%, rgba(15, 23, 42, 0.4) 100%);
     border: 1px solid rgba(255, 255, 255, 0.05);
     backdrop-filter: blur(12px);
     transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
     overflow: hidden;
   }
   .feature-card::before {
     content: '';
     position: absolute;
     top: 0; left: 0; right: 0;
     height: 1px;
     background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.3), transparent);
     opacity: 0;
     transition: opacity 0.4s ease;
   }
   .feature-card:hover {
     transform: translateY(-5px);
     border-color: rgba(0, 240, 255, 0.3);
     box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5);
   }
   .feature-card:hover::before {
     opacity: 1;
   }
   
   /* Form Inputs */
   .form-input {
     width: 100%;
     background: rgba(15, 23, 42, 0.6);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 0.75rem;
     padding: 1rem 1.25rem;
     font-size: 1rem;
     color: #F8FAFC;
     transition: all 0.3s ease;
   }
   .form-input:focus {
     outline: none;
     border-color: #00F0FF;
     box-shadow: 0 0 0 2px rgba(0, 240, 255, 0.2);
     background: rgba(15, 23, 42, 0.9);
   }
   .form-input::placeholder {
     color: #64748B;
   }
   textarea.form-input {
     resize: vertical;
     min-height: 120px;
   }
   
   /* Animations */
   .reveal-up {
     opacity: 0;
     transform: translateY(30px);
     transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
   }
   .reveal-up.revealed {
     opacity: 1;
     transform: translateY(0);
   }
   .delay-100 { transition-delay: 100ms; }
   .delay-200 { transition-delay: 200ms; }
   .delay-300 { transition-delay: 300ms; }