/* THEME: Go TV - 80% PURPLE + 20% SKY BLUE */
 :root {
   --goto-primary: #6D28D9;
   --goto-primary-deep: #5B21B6;
   --goto-primary-soft: #8B5CF6;
   --goto-secondary: #38BDF8;
   --goto-secondary-dark: #0EA5E9;
   --goto-accent: #22D3EE;
   --goto-dark: #1E1B4B;
   --goto-light-bg: #FAF5FF;
   --goto-card-bg: #ffffff;
   --goto-glass: rgba(109, 40, 217, 0.06);
   --goto-border: rgba(109, 40, 217, 0.18);
   --goto-text-dark: #2E1065;
   --goto-text-muted: #6D28D9;
   --goto-gradient: linear-gradient(135deg, #6D28D9 0%, #8B5CF6 70%, #38BDF8 100%);
   --goto-glow: 0 20px 35px -12px rgba(109, 40, 217, 0.35);
   --section-gap: 5rem;
 }

 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }

 body {
   font-family: 'Inter', sans-serif;
   background: linear-gradient(145deg, #FBF7FF 0%, #F3E8FF 100%);
   color: var(--goto-text-dark);
   overflow-x: hidden;
 }

 /* Custom Scrollbar */
 ::-webkit-scrollbar {
   width: 8px;
 }

 ::-webkit-scrollbar-track {
   background: #E9D5FF;
 }

 ::-webkit-scrollbar-thumb {
   background: var(--goto-primary);
   border-radius: 10px;
 }

 /* ========== GLOBAL HOVER ANIMATIONS ========== */
 a,
 button,
 .btn-primary-custom,
 .btn-outline-cyan,
 .btn-app-elegant,
 .app-card-elegant,
 .pricing-card-professional,
 .stat-card,
 .glass-card-elegant,
 .nav-link-elegant,
 .feature-item-elegant,
 .faq-question-new,
 .footer-links-elegant li a,
 .whatsapp-float-elegant,
 .back-to-top-elegant {
   transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1) !important;
 }

 /* Scale effect on cards */
 .app-card-elegant:hover {
   transform: translateY(-8px) scale(1.02);
   border-color: var(--goto-secondary);
   box-shadow: 0 25px 35px -12px rgba(56, 189, 248, 0.3);
 }

 /* Pricing card hover with lift */
 .pricing-card-professional:hover {
   transform: translateY(-10px) scale(1.02);
   border-color: var(--goto-secondary);
   box-shadow: 0 25px 40px -12px rgba(56, 189, 248, 0.3);
 }

 /* Stat card hover */
 .stat-card {
   transition: all 0.3s ease;
   border-radius: 20px;
   cursor: default;
 }

 .stat-card:hover {
   transform: translateY(-5px);
   background: rgba(109, 40, 217, 0.05);
 }

 .stat-card:hover .stat-number-elegant {
   background: var(--goto-gradient);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
 }

 /* Glass card hover */
 .glass-card-elegant:hover {
   transform: translateY(-6px);
   border-color: var(--goto-secondary);
   box-shadow: var(--goto-glow);
 }

 /* Feature icons animation */
 .feature-item-elegant {
   transition: all 0.3s ease;
   display: inline-block;
 }

 .feature-item-elegant:hover {
   transform: scale(1.1) rotate(3deg);
   filter: drop-shadow(0 8px 20px rgba(109, 40, 217, 0.3));
 }

 /* FAQ hover effect */
 .faq-item-new {
   transition: all 0.3s ease;
 }

 .faq-item-new:hover {
   transform: translateX(5px);
   border-color: var(--goto-primary);
   box-shadow: 0 8px 20px rgba(109, 40, 217, 0.1);
 }

 /* Footer links animation */
 .footer-links-elegant li a {
   display: inline-block;
   transition: all 0.25s ease;
 }

 .footer-links-elegant li a:hover {
   transform: translateX(6px);
   color: #38BDF8;
 }

 /* Navbar links animation */
 .nav-link-elegant {
   transition: all 0.25s ease;
 }

 .nav-link-elegant:hover {
   transform: translateY(-2px);
 }

 /* Spinner */
 #spinner {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: #ffffff;
   z-index: 9999;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: opacity 0.4s ease;
 }

 .elegant-spinner {
   width: 60px;
   height: 60px;
   border: 4px solid rgba(109, 40, 217, 0.2);
   border-top: 4px solid var(--goto-primary);
   border-radius: 50%;
   animation: spin 1s linear infinite;
 }

 @keyframes spin {
   0% {
     transform: rotate(0deg);
   }

   100% {
     transform: rotate(360deg);
   }
 }

 /* Navbar */
 .navbar-elegant {
   background: rgba(255, 255, 255, 0.96);
   backdrop-filter: blur(12px);
   border-bottom: 1px solid rgba(109, 40, 217, 0.2);
   padding: 0.5rem 1rem;
   box-shadow: 0 2px 15px rgba(109, 40, 217, 0.06);
 }

 /* ========== NAVBAR LOGO SHADOW ========== */
 .navbar-brand img {
   filter: drop-shadow(0 6px 14px rgba(109, 40, 217, 0.4));
   transition: all 0.3s ease;
 }

 .navbar-brand img:hover {
   filter: drop-shadow(0 10px 20px rgba(56, 189, 248, 0.6));
   transform: scale(1.02);
 }

 .nav-link-elegant {
   color: var(--goto-text-dark) !important;
   font-weight: 500;
   margin: 0 0.5rem;
   position: relative;
 }

 .nav-link-elegant:hover,
 .nav-link-elegant.active {
   color: var(--goto-primary) !important;
 }

 .nav-link-elegant.active::after {
   content: '';
   position: absolute;
   bottom: -4px;
   left: 0;
   width: 100%;
   height: 2px;
   background: var(--goto-gradient);
   border-radius: 4px;
 }

 /* ========== PROPER BUTTON CSS ========== */
 /* Primary Button */
 .btn-primary-custom {
   background: linear-gradient(135deg, #6D28D9 0%, #8B5CF6 60%, #38BDF8 100%);
   border: none;
   padding: 0.75rem 2rem;
   border-radius: 50px;
   color: white;
   font-weight: 600;
   font-size: 0.95rem;
   letter-spacing: 0.3px;
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   cursor: pointer;
   box-shadow: 0 6px 14px rgba(109, 40, 217, 0.3);
   transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
   position: relative;
   overflow: hidden;
 }

 .btn-primary-custom::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 ease;
 }

 .btn-primary-custom:hover::before {
   left: 100%;
 }

 .btn-primary-custom:hover {
   transform: translateY(-3px) scale(1.02);
   box-shadow: 0 12px 25px rgba(56, 189, 248, 0.45);
   background: linear-gradient(135deg, #7C3AED 0%, #9B6DFF 60%, #4BCDFF 100%);
 }

 .btn-primary-custom:active {
   transform: translateY(2px);
   box-shadow: 0 4px 10px rgba(109, 40, 217, 0.3);
 }

 /* Small variant */
 .btn-primary-custom.btn-sm {
   padding: 0.5rem 1.2rem;
   font-size: 0.85rem;
 }

 /* Outline Button */
 .btn-outline-cyan {
   background: transparent;
   border: 2px solid var(--goto-primary);
   padding: 0.75rem 2rem;
   border-radius: 50px;
   color: var(--goto-text-dark);
   font-weight: 600;
   font-size: 0.95rem;
   letter-spacing: 0.3px;
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   cursor: pointer;
   transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
   position: relative;
   overflow: hidden;
 }

 .btn-outline-cyan::before {
   content: '';
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(109, 40, 217, 0.1), transparent);
   transition: left 0.5s ease;
 }

 .btn-outline-cyan:hover::before {
   left: 100%;
 }

 .btn-outline-cyan:hover {
   background: var(--goto-primary);
   color: white;
   transform: translateY(-3px) scale(1.02);
   box-shadow: 0 8px 20px rgba(109, 40, 217, 0.3);
   border-color: var(--goto-primary);
 }

 .btn-outline-cyan:active {
   transform: translateY(2px);
 }

 .btn-outline-cyan.btn-sm {
   padding: 0.5rem 1.2rem;
   font-size: 0.85rem;
 }

 /* App Button */
 .btn-app-elegant {
   background: rgba(109, 40, 217, 0.1);
   border: 1px solid rgba(109, 40, 217, 0.2);
   padding: 0.4rem 1rem;
   border-radius: 40px;
   font-size: 0.7rem;
   font-weight: 600;
   color: var(--goto-text-dark);
   text-decoration: none;
   margin: 0.2rem;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   cursor: pointer;
   transition: all 0.3s ease;
 }

 .btn-app-elegant i {
   font-size: 0.7rem;
 }

 .btn-app-elegant:hover {
   background: var(--goto-primary);
   color: white;
   transform: translateY(-2px) scale(1.05);
   border-color: transparent;
   box-shadow: 0 4px 12px rgba(109, 40, 217, 0.3);
 }

 /* Buy Now Button (full width in pricing cards) */
 .pricing-card-professional .btn-primary-custom {
   width: 100%;
   padding: 0.8rem;
   font-size: 1rem;
   justify-content: center;
 }

 /* WhatsApp Float Button */
 .whatsapp-float-elegant {
   position: fixed;
   bottom: 24px;
   right: 24px;
   background: #25D366;
   padding: 0.7rem 1.2rem;
   border-radius: 40px;
   color: white;
   font-weight: bold;
   text-decoration: none;
   z-index: 100;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
   display: flex;
   align-items: center;
   gap: 8px;
   transition: all 0.3s ease;
 }

 .whatsapp-float-elegant:hover {
   transform: scale(1.08);
   background: #20B859;
   box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4);
 }

 /* Back to Top Button */
 .back-to-top-elegant {
   position: fixed;
   bottom: 24px;
   left: 24px;
   background: var(--goto-primary);
   width: 44px;
   height: 44px;
   border-radius: 30px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
   opacity: 0;
   visibility: hidden;
   text-decoration: none;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   transition: all 0.3s ease;
 }

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

 .back-to-top-elegant:hover {
   transform: translateY(-5px);
   background: var(--goto-secondary);
   box-shadow: 0 8px 20px rgba(56, 189, 248, 0.4);
 }

 /* Hero Section */
 .hero-elegant {
   position: relative;
   min-height: 85vh;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   padding: 3rem 1.5rem;
   overflow: hidden;
 }

 .hero-bg-image {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   opacity: 1 !important;
   z-index: 0;
 }

 .hero-elegant::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 100%);
   z-index: 1;
 }

 .hero-content {
   position: relative;
   z-index: 3;
   max-width: 900px;
 }

 .hero-title-wrapper {
   display: inline-block;
   font-size: 0.85rem;
   font-weight: 700;
   letter-spacing: 2px;
   color: #38BDF8;
   text-transform: uppercase;
   margin-bottom: 1.2rem;
   text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
 }

 .main-title-elegant {
   font-size: 5rem;
   font-weight: 800;
   background: linear-gradient(135deg, #FFFFFF, #E0D4FF, #38BDF8);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
   margin-bottom: 1rem;
   letter-spacing: -0.02em;
   text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
 }

 .title-sub-elegant {
   font-size: 1.6rem;
   font-weight: 500;
   color: #F0F0FF;
   margin-bottom: 1rem;
   text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
 }

 .hero-desc-elegant {
   font-size: 1.1rem;
   color: #E2E2FF;
   max-width: 700px;
   margin: 1.2rem auto;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 }

 /* Stats Card */
 .stats-modern {
   background: #ffffff;
   border-radius: 60px;
   border: 1px solid rgba(109, 40, 217, 0.2);
   padding: 1rem 2rem;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.03);
 }

 .stats-grid {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 1rem;
 }

 .stat-card {
   padding: 0.5rem 1.2rem;
   text-align: center;
   cursor: default;
 }

 .stat-number-elegant {
   font-size: 1.6rem;
   font-weight: 800;
   color: var(--goto-primary);
   display: block;
   transition: all 0.3s ease;
 }

 .stat-label {
   font-size: 0.8rem;
   color: var(--goto-text-muted);
   font-weight: 500;
 }

 .stat-divider {
   width: 1px;
   height: 40px;
   background: rgba(109, 40, 217, 0.2);
 }

 .whatsapp-stat a {
   color: #25D366 !important;
   text-decoration: none;
 }

 /* Glass Card */
 .glass-card-elegant {
   background: #ffffff;
   border-radius: 32px;
   padding: 2rem;
   border: 1px solid rgba(109, 40, 217, 0.2);
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.03);
 }

 /* App Cards */
 .app-card-elegant {
   background: #ffffff;
   border-radius: 28px;
   padding: 1.5rem 1rem;
   text-align: center;
   border: 1px solid rgba(109, 40, 217, 0.15);
   height: 100%;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
 }

 .app-icon-elegant {
   width: 120px;
   margin-bottom: 1rem;
 }

 /* Pricing Cards */
 .pricing-card-professional {
   background: #ffffff;
   border-radius: 32px;
   padding: 1.8rem;
   text-align: center;
   border: 1px solid rgba(109, 40, 217, 0.2);
   height: 100%;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
 }

 .price-amount {
   font-size: 3rem;
   font-weight: 800;
   color: var(--goto-dark);
 }

 .price-period {
   font-size: 1rem;
   color: var(--goto-text-muted);
 }

 .price-features-elegant {
   text-align: left;
   margin: 1.5rem 0;
 }

 .price-features-elegant li {
   margin: 0.8rem 0;
   font-size: 0.9rem;
   color: var(--goto-text-muted);
   display: flex;
   align-items: center;
   gap: 0.5rem;
 }

 .price-features-elegant li i {
   color: var(--goto-primary);
   width: 20px;
   font-size: 1rem;
 }

 /* FAQ */
 .faq-item-new {
   background: #ffffff;
   border-radius: 20px;
   margin-bottom: 1rem;
   border: 1px solid rgba(109, 40, 217, 0.15);
   overflow: hidden;
 }

 .faq-question-new {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 1.2rem 1.5rem;
   cursor: pointer;
   font-weight: 600;
   font-size: 1.05rem;
   color: var(--goto-dark);
 }

 .faq-answer-new {
   max-height: 0;
   padding: 0 1.5rem;
   overflow: hidden;
   transition: 0.3s ease;
   color: var(--goto-text-muted);
 }

 .faq-item-new.active .faq-answer-new {
   max-height: 200px;
   padding-bottom: 1.2rem;
 }

 .faq-item-new.active .fa-chevron-down {
   transform: rotate(180deg);
 }

 .faq-question-new i.fa-chevron-down {
   transition: transform 0.2s;
   color: var(--goto-primary);
 }

 /* Footer */
 .footer-elegant {
   background: linear-gradient(135deg, #5B21B6 0%, #6D28D9 50%, #8B5CF6 85%, #38BDF8 100%);
   padding: 3rem 0 1.5rem;
   margin-top: 3rem;
   border-top: none;
   color: white;
 }

 .footer-heading-elegant {
   color: white;
   margin-bottom: 1.5rem;
   font-weight: 700;
   letter-spacing: 0.5px;
   font-size: 1.35rem;
 }

 .footer-links-elegant {
   list-style: none;
   padding: 0;
 }

 .footer-links-elegant li {
   margin-bottom: 0.75rem;
 }

 .footer-links-elegant li a,
 .footer-links-elegant li i {
   color: rgba(255, 255, 255, 0.85);
   text-decoration: none;
   font-size: 1rem;
 }

 .footer-copyright {
   border-top: 1px solid rgba(255, 255, 255, 0.2);
   padding-top: 1.8rem;
   margin-top: 1.5rem;
 }

 .footer-copyright p {
   color: rgba(255, 255, 255, 0.85);
   font-size: 0.95rem;
 }

 .footer-copyright a {
   color: #38BDF8 !important;
   text-decoration: none;
   font-weight: 500;
 }

 .text-muted-custom {
   color: var(--goto-text-muted) !important;
 }

 .section-header-elegant h2 {
   font-family: 'Poppins', sans-serif;
   font-weight: 700;
 }

 @media (max-width: 768px) {
   .main-title-elegant {
     font-size: 3rem;
   }

   .title-sub-elegant {
     font-size: 1.2rem;
   }
 }


 html,
 body {
   overflow-x: hidden;
 }

 img,
 iframe {
   max-width: 100%;
 }