@keyframes gradient {
     0% {
         background-position: 0% 50%;
     }
     50% {
         background-position: 100% 50%;
     }
     100% {
         background-position: 0% 50%;
     }
 }

 .gradient-bg {
     background: linear-gradient(-45deg, #405DE6, #5B51D8, #833AB4, #C13584, #E1306C, #FD1D1D);
     background-size: 400% 400%;
     animation: gradient 15s ease infinite;
 }

 .input-focus-effect {
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .input-focus-effect:focus {
     transform: translateY(-2px);
     box-shadow: 0 8px 16px rgba(225, 48, 108, 0.2);
 }

 .card-hover {
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .card-hover:hover {
     transform: translateY(-4px);
     box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
 }

 .loading {
     border: 3px solid #f3f3f3;
     border-top: 3px solid #E1306C;
     border-radius: 50%;
     width: 40px;
     height: 40px;
     animation: spin 1s cubic-bezier(0.45, 0, 0.55, 1) infinite;
 }

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

 .fade-in {
     animation: fadeIn 0.5s ease-in;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(10px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .button-hover {
     transition: transform 0.2s ease, box-shadow 0.2s ease;
 }

 .button-hover:hover {
     transform: translateY(-2px);
     box-shadow: 0 6px 12px rgba(225, 48, 108, 0.3);
 }

 .hide {
     display: none;
 }

 .video-container {
     border-radius: 16px;
     overflow: hidden;
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
 }

 .progress-bar {
     width: 100%;
     height: 4px;
     background: #f3f3f3;
     border-radius: 2px;
     overflow: hidden;
 }

 .progress-value {
     width: 0%;
     height: 100%;
     background: linear-gradient(90deg, #E1306C, #FD1D1D);
     transition: width 0.3s ease;
 }

 .features-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 1.5rem;
 }

 .feature-card {
     background: white;
     padding: 1.5rem;
     border-radius: 1rem;
     transition: transform 0.3s ease;
 }

 .feature-card:hover {
     transform: translateY(-5px);
 }

 .footer-link {
     transition: color 0.3s ease;
 }

 .footer-link:hover {
     color: #E1306C;
 }

 .quality-selector {
     appearance: none;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23666'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: right 0.5rem center;
     background-size: 1.5em 1.5em;
 }

 /* Dark mode styles */

 .dark .dark\:bg-dark {
     background-color: #1a202c;
 }

 .dark .dark\:bg-darker {
     background-color: #0f141e;
 }

 .dark .dark\:text-white {
     color: #ffffff;
 }

 .dark .dark\:text-gray-300 {
     color: #d1d5db;
 }

 .dark .dark\:border-gray-700 {
     border-color: #374151;
 }

 .dark .dark\:bg-gray-800 {
     background-color: #1f2937;
 }

 .dark .feature-card {
     background-color: #1f2937;
 }

 .dark .dark\:hover\:text-pink-500:hover {
     color: #E1306C;
 }

 /* FAQ styles */

 .faq-item {
     border-bottom: 1px solid #e2e8f0;
 }

 .dark .faq-item {
     border-bottom-color: #374151;
 }

 .faq-answer {
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.3s ease;
 }

 .faq-answer.show {
     max-height: 500px;
 }

 .faq-question i {
     transition: transform 0.3s ease;
 }

 .faq-question.active i {
     transform: rotate(180deg);
 }

 /* Mobile menu */

 .mobile-menu {
     transition: transform 0.3s ease, opacity 0.3s ease;
     transform: translateX(100%);
     opacity: 0;
 }

 .mobile-menu.open {
     transform: translateX(0);
     opacity: 1;
 }