:root{--color-bg-main: #ffffff;--color-bg-secondary: #f8fafc;--color-bg-tertiary: #f1f5f9;--color-text-main: #0f172a;--color-text-secondary: #475569;--color-text-muted: #94a3b8;--color-text-inverse: #ffffff;--color-accent: #11ba82;--color-accent-hover: #059669;--color-accent-light: #d1fae5;--color-border: #e2e8f0;--color-border-hover: #cbd5e1;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1),0 2px 4px -2px rgb(0 0 0 / 0.1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),0 4px 6px -4px rgb(0 0 0 / 0.1);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),0 8px 10px -6px rgb(0 0 0 / 0.1);--shadow-glow: 0 0 20px rgba(16,185,129,0.3);--font-main: 'Inter',sans-serif;--font-heading: 'Plus Jakarta Sans',sans-serif;--transition: all 0.3s cubic-bezier(0.4,0,0.2,1);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-full: 9999px} *{margin: 0;padding: 0;box-sizing: border-box} body{font-family: var(--font-main);background-color: var(--color-bg-main);color: var(--color-text-main);line-height: 1.6;overflow-x: hidden;-webkit-font-smoothing: antialiased} a{text-decoration: none;color: inherit;transition: var(--transition)} ul{list-style: none} img{max-width: 100%;display: block} .container{max-width: 1200px;margin: 0 auto;padding: 0 24px} h1,h2,h3,h4,h5,h6{font-family: var(--font-heading);color: var(--color-text-main);line-height: 1.2;font-weight: 600;letter-spacing: -0.02em} p{color: var(--color-text-secondary)} .btn{display: inline-flex;align-items: center;justify-content: center;padding: 14px 32px;border-radius: var(--radius-full);font-weight: 500;cursor: pointer;text-align: center;border: 1px solid transparent;font-size: 1rem;transition: var(--transition);gap: 8px} .btn--primary{background-color: var(--color-accent);color: var(--color-text-inverse);box-shadow: var(--shadow-md),var(--shadow-glow)} .btn--primary:hover{background-color: var(--color-accent-hover);transform: translateY(-2px);box-shadow: var(--shadow-lg),var(--shadow-glow)} .btn--secondary{background-color: var(--color-bg-main);color: var(--color-text-main);border-color: var(--color-border);box-shadow: var(--shadow-sm)} .btn--secondary:hover{background-color: var(--color-bg-secondary);border-color: var(--color-border-hover);transform: translateY(-2px);box-shadow: var(--shadow-md)} .btn--outline{border-color: var(--color-accent);color: var(--color-accent);background: #ffffff} .btn--outline:hover{background-color: var(--color-accent-light);transform: translateY(-2px)} .btn--lg{padding: 18px 48px;font-size: 1.125rem} .btn--full{display: flex;width: 100%} .header{position: absolute;top: 0;left: 0;width: 100%;z-index: 1000;background-color: transparent;backdrop-filter: none;border-bottom: none;padding: 16px 0;transition: var(--transition)} .header.scrolled{position: fixed;background-color: rgba(255,255,255,0.95);backdrop-filter: blur(10px);border-bottom: 1px solid var(--color-border);box-shadow: var(--shadow-sm);padding: 12px 0} .header__container{display: flex;justify-content: space-between;align-items: center;position: relative} .logo{display: flex;align-items: center;text-decoration: none;flex-shrink: 0;z-index: 20} .logo img{height: 40px;width: auto;object-fit: contain} .nav{display: flex;align-items: center;gap: 40px;flex: 1;justify-content: center;position: relative} .nav__list{display: flex;gap: 32px;justify-content: center} .nav .btn{position: absolute;right: 0;flex-shrink: 0} .nav__link{font-weight: 600;color: var(--color-text-secondary);font-size: 0.95rem} .nav__link:hover{color: var(--color-accent)} .mobile-toggle{display: none;background: none;border: none;cursor: pointer;flex-direction: column;gap: 6px;padding: 4px} .mobile-toggle span{display: block;width: 24px;height: 2px;background-color: var(--color-text-main);border-radius: 2px;transition: var(--transition)} .hero{padding-top: 100px;padding-bottom: 100px;position: relative;overflow: visible;min-height: 100vh;display: flex;align-items: center;z-index: 2} .hero::before{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-image: url('assets/background.webp');@supports not (background-image: url('assets/background.webp')){background-image: url('assets/background.png')} background-size: cover;background-position: center;background-repeat: no-repeat;background-attachment: fixed;opacity: 0.05;z-index: -1} .hero__posters{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 0;pointer-events: none;margin-top: 94px} .poster{position: absolute;border-radius: 12px;overflow: hidden;box-shadow: 0 8px 24px rgba(0,0,0,0.12);transition: all 0.4s cubic-bezier(0.23,1,0.32,1);opacity: 0.9;height: 230px;width: auto} .poster img{width: auto;height: 100%;object-fit: cover;display: block} .poster:hover{transform: scale(1.05) rotate(0deg) !important;opacity: 1;box-shadow: 0 16px 32px rgba(0,0,0,0.2);z-index: 10} .poster-1{bottom: -40px;left: 2%;transform: rotate(-4deg);z-index: 2} .poster-2{bottom: -20px;left: 12%;transform: rotate(3deg);z-index: 1} .poster-3{bottom: -50px;left: 22%;transform: rotate(-2deg);z-index: 3} .poster-4{bottom: -10px;left: 32%;transform: rotate(5deg);z-index: 1} .poster-5{bottom: -45px;left: 42%;transform: rotate(-3deg);z-index: 2} .poster-6{bottom: -25px;left: 52%;transform: rotate(4deg);z-index: 1} .poster-7{bottom: -55px;left: 62%;transform: rotate(-5deg);z-index: 3} .poster-8{bottom: -15px;left: 72%;transform: rotate(2deg);z-index: 1} .poster-9{bottom: -40px;left: 82%;transform: rotate(-3deg);z-index: 2} .poster-10{bottom: -30px;left: 92%;transform: rotate(6deg);z-index: 1} @media (max-width: 768px){.hero{min-height: auto;padding-bottom: 160px;display: block;padding-top: 120px} .hero__container{margin-bottom: 40px} .hero__posters{position: absolute;bottom: -40px;top: auto;height: auto;left: 0;width: 100%;display: flex;overflow-x: auto;padding: 20px;gap: 16px;pointer-events: auto;-webkit-overflow-scrolling: touch;scrollbar-width: none;margin-top: 40px} .hero__posters::-webkit-scrollbar{display: none} .poster{position: relative;bottom: auto !important;left: auto !important;right: auto !important;top: auto !important;transform: none !important;flex-shrink: 0;height: 160px;width: auto;margin: 0} } .hero__container{display: flex;justify-content: center;align-items: center;position: relative;z-index: 1;width: 100%} .hero__content{text-align: center;max-width: 800px;animation: fade-in-up 1s ease-out;margin-bottom: 60px} .hero__title{font-family: var(--font-heading);font-size: 3rem;line-height: 1.1;margin-bottom: 24px;color: var(--color-text-main);letter-spacing: -0.03em;font-weight: 600} @media (max-width: 768px){.hero__title{font-size: 1.875rem} } .hero__text{font-size: 1.125rem;color: var(--color-text-secondary);margin-bottom: 40px;line-height: 1.6} .hero__actions{display: flex;gap: 16px;justify-content: center;align-items: center;flex-wrap: wrap} @media (max-width: 768px){.hero__actions{flex-direction: column;width: 100%;padding: 0 20px} .hero__actions .btn{width: 100%} } .btn--app{display: inline-flex;align-items: center;gap: 10px;padding: 12px 24px;background-color: #000000;color: #ffffff;border-radius: 8px;font-weight: 600;font-size: 0.875rem;cursor: pointer;transition: var(--transition);border: none} .btn--app:hover{background-color: #1a1a1a;transform: translateY(-2px);box-shadow: 0 8px 16px rgba(0,0,0,0.2)} .btn--app svg{flex-shrink: 0} @keyframes fade-in-up{from{opacity: 0;transform: translateY(30px)} to{opacity: 1;transform: translateY(0)} } .marquee-section{padding: 40px 0;margin-top: 136px;background-color: transparent;border-top: none;border-bottom: 1px solid var(--color-border);overflow: hidden;position: relative;z-index: 1} .marquee-label{text-align: center;margin-bottom: 32px;color: var(--color-text-muted);font-size: 0.875rem;text-transform: uppercase;letter-spacing: 0.1em;font-weight: 700} .marquee{position: relative;width: 100%;overflow: hidden;mask-image: linear-gradient(to right,transparent,black 10%,black 90%,transparent);-webkit-mask-image: linear-gradient(to right,transparent,black 10%,black 90%,transparent)} .marquee__track{display: flex;gap: 60px;width: max-content;animation: scroll 40s linear infinite} .marquee__item{width: 200px;height: 120px;display: flex;align-items: center;justify-content: center;opacity: 0.6;transition: var(--transition);filter: grayscale(100%)} .marquee__item img{max-height: 80px;width: auto;object-fit: contain} .marquee__item:hover{opacity: 1;filter: grayscale(0%);transform: scale(1.1)} .reviews-section{padding: 80px 0;background-color: var(--color-bg-secondary);overflow: hidden} .trustpilot-header{margin-top: 10px;color: var(--color-text-secondary)} .marquee--reviews{margin-bottom: 30px} .marquee--reviews .marquee__track{gap: 30px;animation-duration: 50s} .marquee--reverse .marquee__track{animation-direction: reverse} .review-card{width: 350px;background-color: var(--color-bg-main);padding: 25px;border-radius: var(--radius-sm);box-shadow: var(--shadow-sm);border: 1px solid var(--color-border);flex-shrink: 0;transition: var(--transition)} .review-card:hover{transform: translateY(-5px);box-shadow: var(--shadow-md);border-color: var(--color-accent)} .review-stars{color: #00b67a;font-size: 1.2rem;letter-spacing: 2px;margin-bottom: 10px;display: inline-block;background-color: #dbfbf0;padding: 2px 8px;border-radius: 4px} .review-title{font-size: 1.1rem;font-weight: 700;margin-bottom: 10px;color: var(--color-text-main)} .review-text{font-size: 0.95rem;color: var(--color-text-secondary);margin-bottom: 15px;line-height: 1.5;display: -webkit-box;-webkit-line-clamp: 3;line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden} .review-author{font-size: 0.9rem;font-weight: 600;color: var(--color-text-muted)} @keyframes scroll{0%{transform: translateX(0)} 100%{transform: translateX(-50%)} } .features{padding: 80px 0;background-color: var(--color-bg-main)} .section-header{text-align: center;margin-bottom: 50px;max-width: 700px;margin-left: auto;margin-right: auto} .section-title{font-size: 2.5rem;margin-bottom: 20px} .section-subtitle{color: var(--color-text-secondary);font-size: 1.25rem} .features__grid{display: grid;grid-template-columns: repeat(4,1fr);gap: 30px} @media (max-width: 1024px){.features__grid{grid-template-columns: repeat(2,1fr)} } @media (max-width: 640px){.features__grid{grid-template-columns: 1fr} } @media (max-width: 768px){.marquee-section{margin-top: 68px;padding: 20px 0} } .feature-card{background-color: var(--color-bg-main);padding: 48px 32px;border-radius: var(--radius-lg);border: 1px solid var(--color-border);transition: var(--transition);position: relative;overflow: hidden} .feature-card:hover{transform: translateY(-8px);border-color: var(--color-accent);box-shadow: var(--shadow-xl)} .feature-icon{font-size: 3rem;margin-bottom: 24px;display: inline-block;padding: 16px;background-color: var(--color-bg-secondary);border-radius: var(--radius-md);margin-bottom: 32px} .feature-card h3{font-size: 1.5rem;margin-bottom: 16px} .feature-card p{color: var(--color-text-secondary);line-height: 1.7} .pricing{padding: 100px 0;background: linear-gradient(to bottom,var(--color-bg-secondary),#ffffff);position: relative;overflow: hidden} .pricing::before{content: '';position: absolute;top: 20%;left: -10%;width: 500px;height: 500px;background: var(--color-accent);opacity: 0.03;filter: blur(100px);border-radius: 50%;z-index: 0} .pricing .container{position: relative;z-index: 1} .pricing-toggle-wrapper{display: inline-flex;align-items: center;justify-content: center;gap: 20px;margin-top: 40px;background: white;padding: 10px 30px;border-radius: 50px;box-shadow: var(--shadow-sm);border: 1px solid var(--color-border)} .toggle-label{font-weight: 700;color: var(--color-text-secondary);font-size: 0.95rem;transition: color 0.3s ease} .toggle-label.active{color: var(--color-text-main)} .switch{position: relative;display: inline-block;width: 64px;height: 36px} .switch input{opacity: 0;width: 0;height: 0} .slider{position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;background-color: #e2e8f0;transition: .4s;box-shadow: inset 0 2px 4px rgba(0,0,0,0.05)} .slider:before{position: absolute;content: "";height: 28px;width: 28px;left: 4px;bottom: 4px;background-color: white;transition: .4s;box-shadow: 0 2px 5px rgba(0,0,0,0.1)} input:checked+.slider{background-color: var(--color-accent)} input:focus+.slider{box-shadow: 0 0 1px var(--color-accent)} input:checked+.slider:before{transform: translateX(28px)} .slider.round{border-radius: 36px} .slider.round:before{border-radius: 50%} .pricing__grid{display: grid;grid-template-columns: repeat(auto-fit,minmax(260px,1fr));gap: 30px;margin-top: 60px;padding: 20px 10px} .pricing-card{background-color: white;border-radius: 24px;padding: 0;box-shadow: 0 10px 30px rgba(0,0,0,0.05);border: 1px solid rgba(0,0,0,0.05);transition: all 0.4s cubic-bezier(0.175,0.885,0.32,1.275);position: relative;display: flex;flex-direction: column;overflow: hidden} .pricing-card:hover{transform: translateY(-15px);box-shadow: 0 20px 40px rgba(16,185,129,0.15);border-color: rgba(16,185,129,0.3)} .pricing-card--featured{border: 2px solid var(--color-accent);transform: scale(1.05);z-index: 2;box-shadow: 0 20px 40px rgba(16,185,129,0.1)} .pricing-card--featured:hover{transform: scale(1.05) translateY(-15px);box-shadow: 0 30px 60px rgba(16,185,129,0.2)} .popular-badge{position: absolute;top: 0;left: 50%;transform: translateX(-50%);background: linear-gradient(135deg,var(--color-accent),#059669);color: white;padding: 8px 24px;border-bottom-left-radius: 16px;border-bottom-right-radius: 16px;font-size: 0.85rem;font-weight: 700;letter-spacing: 0.5px;box-shadow: 0 4px 10px rgba(16,185,129,0.3);z-index: 10;text-transform: uppercase} .pricing-card__header{text-align: center;padding: 40px 30px 30px;background: linear-gradient(to bottom,#f9fafb,#ffffff);border-bottom: 1px solid var(--color-border)} .pricing-card--featured .pricing-card__header{background: linear-gradient(to bottom,rgba(16,185,129,0.05),#ffffff)} .pricing-card__header h3{font-size: 1.1rem;font-weight: 700;margin-bottom: 15px;color: var(--color-text-secondary);text-transform: uppercase;letter-spacing: 1px} .pricing-card__header .price{display: flex;align-items: flex-start;justify-content: center;color: var(--color-text-main);line-height: 1} .pricing-card__header .currency{font-size: 1.5rem;font-weight: 600;margin-top: 8px;color: var(--color-text-main)} .pricing-card__header .amount{font-size: 3.5rem;font-weight: 800;color: var(--color-text-main);letter-spacing: -2px} .pricing-card--featured .pricing-card__header .amount{color: var(--color-accent)} .pricing-card__header .period{font-size: 0.9rem;color: var(--color-text-muted);align-self: flex-end;margin-bottom: 8px;margin-left: 4px;font-weight: 500} .pricing-card__features{list-style: none;padding: 30px;flex-grow: 1} .pricing-card__features li{margin-bottom: 18px;color: var(--color-text-secondary);display: flex;align-items: center;font-size: 0.95rem;font-weight: 500} .pricing-card__features li:last-child{margin-bottom: 0} .pricing-card__features li:before{content: "✓";display: inline-flex;align-items: center;justify-content: center;width: 20px;height: 20px;background-color: rgba(16,185,129,0.1);color: var(--color-accent);font-weight: 800;font-size: 0.75rem;border-radius: 50%;margin-right: 12px;flex-shrink: 0} .pricing-card__footer{padding: 0 30px 40px} .pricing-card .btn{width: 100%;padding: 14px 20px;font-size: 1rem;font-weight: 600;border-radius: 12px;transition: all 0.3s ease} .pricing-card .btn--outline{border: 2px solid var(--color-border);color: var(--color-text-main)} .pricing-card .btn--outline:hover{border-color: var(--color-text-main);background-color: var(--color-text-main);color: white} .pricing-card--featured .btn--primary{background: var(--color-accent);box-shadow: 0 10px 20px rgba(16,185,129,0.3)} .pricing-card--featured .btn--primary:hover{transform: translateY(-2px);box-shadow: 0 15px 25px rgba(16,185,129,0.4)} .detailed-features{padding: 80px 0;background-color: var(--color-bg-secondary)} .detailed-grid{display: grid;grid-template-columns: repeat(auto-fit,minmax(300px,1fr));gap: 30px} .info-card{background-color: var(--color-white);padding: 40px 30px;border-radius: var(--radius-lg);box-shadow: var(--shadow-md);border: 1px solid var(--color-border);transition: var(--transition);display: flex;flex-direction: column;align-items: center;text-align: center} .info-card:hover{transform: translateY(-5px);box-shadow: var(--shadow-xl)} .info-icon{width: 50px;height: 50px;background-color: var(--color-accent);border-radius: 12px;display: flex;align-items: center;justify-content: center;margin-bottom: 20px;color: white} .info-icon--checkmark{background-color: var(--color-accent)} .info-card h3{font-size: 1.25rem;margin-bottom: 15px;color: var(--color-text-main);font-weight: 700} .info-card p{font-size: 0.95rem;color: var(--color-text-secondary);line-height: 1.6} .faq{padding: 80px 0;background-color: var(--color-bg-main)} .faq__list{max-width: 800px;margin: 0 auto} .faq-item{margin-bottom: 24px;border: 1px solid var(--color-border);border-radius: var(--radius-md);transition: var(--transition);background-color: var(--color-bg-main)} .faq-item:hover{border-color: var(--color-border-hover);box-shadow: var(--shadow-sm)} .faq-item.active{border-color: var(--color-accent);box-shadow: var(--shadow-md)} .faq-question{width: 100%;text-align: left;background: none;border: none;padding: 24px;color: var(--color-text-main);font-size: 1.125rem;font-weight: 700;cursor: pointer;display: flex;justify-content: space-between;align-items: center} .faq-question .icon{font-size: 1.5rem;color: var(--color-accent);transition: var(--transition);width: 32px;height: 32px;display: flex;align-items: center;justify-content: center;background-color: var(--color-accent-light);border-radius: 50%} .faq-answer{max-height: 0;overflow: hidden;transition: var(--transition);color: var(--color-text-secondary);padding: 0 24px;line-height: 1.7} .faq-item.active .faq-answer{max-height: 300px;padding-bottom: 24px} .faq-item.active .icon{transform: rotate(45deg);background-color: var(--color-accent);color: var(--color-text-inverse)} .footer{background-color: var(--color-bg-secondary);padding: 80px 0 0;border-top: 1px solid var(--color-border)} .footer__container{display: grid;grid-template-columns: 1.5fr 1fr 1fr 1.5fr;gap: 60px;margin-bottom: 60px} .footer__col h4{margin-bottom: 24px;font-size: 1.125rem;color: var(--color-text-main)} .footer__desc{margin-top: 16px;margin-bottom: 24px;font-size: 0.95rem;color: var(--color-text-secondary);line-height: 1.6} .footer__col ul li{margin-bottom: 12px} .footer__col ul li a{color: var(--color-text-secondary);font-size: 0.95rem;transition: var(--transition)} .footer__col ul li a:hover{color: var(--color-accent);padding-left: 5px} .social-links{display: flex;gap: 16px} .social-links a{display: flex;align-items: center;justify-content: center;width: 40px;height: 40px;background-color: white;border: 1px solid var(--color-border);border-radius: 50%;color: var(--color-text-secondary);font-weight: 700;font-size: 0.8rem;transition: var(--transition)} .social-links a:hover{background-color: var(--color-accent);color: white;border-color: var(--color-accent);transform: translateY(-3px)} .footer__newsletter-text{margin-bottom: 16px;font-size: 0.95rem} .footer__newsletter-form{display: flex;gap: 10px} .footer__newsletter-form input{flex: 1;padding: 12px 16px;border-radius: var(--radius-full);border: 1px solid var(--color-border);background-color: white;font-family: var(--font-main);font-size: 0.9rem;outline: none;transition: var(--transition)} .footer__newsletter-form input:focus{border-color: var(--color-accent);box-shadow: 0 0 0 3px var(--color-accent-light)} .footer__newsletter-form .btn{padding: 12px 24px;font-size: 0.9rem} .footer__bottom{border-top: 1px solid var(--color-border);padding: 24px 0;background-color: white} .footer__bottom-content{display: flex;justify-content: space-between;align-items: center;font-size: 0.9rem;color: var(--color-text-muted)} .payment-methods{display: flex;gap: 16px;align-items: center} .payment-methods span{font-weight: 600;color: var(--color-text-secondary)} @media (max-width: 1024px){.footer__container{grid-template-columns: 1fr 1fr;gap: 40px} } @media (max-width: 640px){.footer__container{grid-template-columns: 1fr;gap: 40px} .footer__bottom-content{flex-direction: column;gap: 16px;text-align: center} } @media (max-width: 1024px){.hero__title{font-size: 3.2rem} .poster-9,.poster-10{display: none} .pricing-card--popular{transform: scale(1)} .pricing-card--popular:hover{transform: translateY(-8px)} } @media (max-width: 968px){.hero__title{font-size: 2.8rem} .hero__text{font-size: 1rem} .poster-3,.poster-4,.poster-7,.poster-8{display: none} .hero__actions{flex-direction: column;width: 100%;max-width: 400px;margin: 0 auto} .btn--app{width: 100%} } @media (max-width: 768px){.nav{position: fixed;top: 72px;left: 0;width: 100%;background-color: var(--color-bg-main);padding: 24px;flex-direction: column;flex: none;margin: 0;transform: translateY(-150%);transition: var(--transition);border-bottom: 1px solid var(--color-border);box-shadow: var(--shadow-lg)} .header__container{justify-content: space-between} .logo{position: static;transform: none} .nav .btn{position: static;transform: none;width: 100%} .nav.active{transform: translateY(0)} .nav__list{flex-direction: column;width: 100%;text-align: center;gap: 24px} .mobile-toggle{display: flex} .hero{padding-top: 100px;padding-bottom: 80px;min-height: auto} .hero__title{font-size: 2.2rem} .hero__text br{display: none} .poster-2,.poster-5,.poster-6{display: none} .poster-1{width: 100px;height: 150px;top: 5%;left: 5%} .poster-4{display: block;width: 95px;height: 142px;bottom: 5%;left: 5%} .poster-5{display: block;width: 100px;height: 150px;top: 5%;right: 5%} .poster-8{display: block;width: 95px;height: 142px;bottom: 5%;right: 5%} .footer__container{grid-template-columns: 1fr;gap: 48px;text-align: center} .btn--full{width: 100%} } .free-trial-section{padding: 120px 0 80px;background: radial-gradient(circle at top right,rgba(16,185,129,0.1),transparent 40%),radial-gradient(circle at bottom left,rgba(16,185,129,0.05),transparent 40%);min-height: 80vh;display: flex;align-items: center} .trial-content{display: grid;grid-template-columns: 1fr 1fr;gap: 60px;align-items: center} .trial-text h1{font-size: 3.5rem;line-height: 1.1;margin-bottom: 20px} .trial-text p{font-size: 1.2rem;color: var(--color-text-secondary);margin-bottom: 30px} .trial-features{list-style: none;padding: 0} .trial-features li{font-size: 1.1rem;margin-bottom: 15px;display: flex;align-items: flex-start;gap: 12px;font-weight: 500;color: var(--color-text-secondary);line-height: 1.6} .trial-features li::before{content: "✓";color: var(--color-accent);font-weight: 700;font-size: 1.2rem;flex-shrink: 0;margin-top: 2px} .trial-form-wrapper{background: var(--color-bg-main);padding: 40px;border-radius: 24px;border: 1px solid var(--color-border);box-shadow: 0 20px 40px rgba(0,0,0,0.1)} .trial-form h3{font-size: 1.8rem;margin-bottom: 25px;text-align: center} .form-group{margin-bottom: 20px} .form-group label{display: block;margin-bottom: 8px;font-weight: 500;font-size: 0.95rem;color: var(--color-text-secondary)} .form-group input,.form-group select{width: 100%;padding: 12px 16px;background: var(--color-bg-main);border: 1px solid var(--color-border);border-radius: 12px;color: var(--color-text-main);font-size: 1rem;transition: all 0.3s ease} .form-group input:focus,.form-group select:focus{outline: none;border-color: var(--color-accent);box-shadow: 0 0 0 3px rgba(16,185,129,0.2)} .btn--full{width: 100%;justify-content: center;margin-top: 10px} .form-note{text-align: center;font-size: 0.85rem;color: var(--color-text-muted);margin-top: 15px} @media (max-width: 968px){.trial-content{grid-template-columns: 1fr;gap: 40px} .trial-text{text-align: center} .trial-features{display: inline-block;text-align: left} } @media (max-width: 480px){.free-trial-section{padding-top: 100px} .trial-text h1{font-size: 2.5rem} .trial-form-wrapper{padding: 25px} } .badge{display: inline-block;padding: 8px 16px;background: linear-gradient(135deg,var(--color-accent),var(--color-accent-hover));color: white;border-radius: var(--radius-full);font-size: 0.875rem;font-weight: 600;margin-bottom: 20px;text-transform: uppercase;letter-spacing: 0.05em;box-shadow: var(--shadow-md)} .hero-subtitle{font-size: 1.25rem;color: var(--color-text-secondary);line-height: 1.7;margin-bottom: 30px} .hero-subtitle a{color: var(--color-accent);text-decoration: underline;text-decoration-color: rgba(16,185,129,0.3);transition: var(--transition)} .hero-subtitle a:hover{color: var(--color-accent-hover);text-decoration-color: var(--color-accent-hover)} .trust-badges{display: flex;gap: 20px;margin-top: 40px;flex-wrap: nowrap;justify-content: flex-start;align-items: center} .trust-badge{display: flex;flex-direction: row;align-items: center;gap: 8px;padding: 12px 20px;background: var(--color-bg-secondary);border-radius: var(--radius-md);border: 1px solid var(--color-border);transition: var(--transition);white-space: nowrap;flex: 0 1 auto} .trust-badge:hover{transform: translateY(-2px);border-color: var(--color-accent);box-shadow: var(--shadow-md)} .trust-badge strong{font-size: 1.5rem;font-weight: 700;color: var(--color-accent);margin: 0} .trust-badge span{font-size: 0.875rem;color: var(--color-text-secondary);font-weight: 500} @media (max-width: 768px){.trust-badges{gap: 12px;flex-wrap: wrap;justify-content: center} .trust-badge{padding: 10px 16px;flex: 1 1 auto;min-width: 0} .trust-badge strong{font-size: 1.25rem} .trust-badge span{font-size: 0.8rem} } @media (max-width: 480px){.trust-badges{gap: 8px} .trust-badge{padding: 8px 12px} .trust-badge strong{font-size: 1.1rem} .trust-badge span{font-size: 0.75rem} } .form-subtitle{text-align: center;color: var(--color-text-secondary);margin-bottom: 30px;font-size: 1rem} .section{padding: 80px 0} .section.bg-dark{background-color: var(--color-bg-secondary)} .text-center{text-align: center} .section-header{margin-bottom: 50px} .section-header h2{font-size: 2.5rem;margin-bottom: 16px;color: var(--color-text-main)} .section-header p{font-size: 1.125rem;color: var(--color-text-secondary);max-width: 700px;margin: 0 auto} .grid{display: grid;gap: 30px} .grid-3{grid-template-columns: repeat(3,1fr)} @media (max-width: 968px){.grid-3{grid-template-columns: repeat(2,1fr)} } @media (max-width: 640px){.grid-3{grid-template-columns: 1fr} } .feature-card{background-color: var(--color-bg-main);padding: 40px 30px;border-radius: var(--radius-lg);border: 1px solid var(--color-border);transition: var(--transition);position: relative;overflow: hidden} .feature-card:hover{transform: translateY(-8px);border-color: var(--color-accent);box-shadow: var(--shadow-xl)} .feature-card h3{font-size: 1.5rem;margin-bottom: 16px;color: var(--color-text-main)} .feature-card p{color: var(--color-text-secondary);line-height: 1.7} .inline-link{color: var(--color-accent);text-decoration: underline;text-decoration-color: rgba(16,185,129,0.3);transition: var(--transition)} .inline-link:hover{color: var(--color-accent-hover);text-decoration-color: var(--color-accent-hover)} .steps-grid{display: grid;grid-template-columns: repeat(3,1fr);gap: 40px;margin-top: 50px} .step-card{background-color: var(--color-bg-main);padding: 40px 30px;border-radius: var(--radius-lg);border: 1px solid var(--color-border);text-align: center;transition: var(--transition);position: relative} .step-card:hover{transform: translateY(-8px);border-color: var(--color-accent);box-shadow: var(--shadow-xl)} .step-number{width: 64px;height: 64px;background: linear-gradient(135deg,var(--color-accent),var(--color-accent-hover));color: white;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 1.75rem;font-weight: 700;margin: 0 auto 24px;box-shadow: var(--shadow-md)} .step-card h3{font-size: 1.5rem;margin-bottom: 16px;color: var(--color-text-main)} .step-card p{color: var(--color-text-secondary);line-height: 1.7} @media (max-width: 968px){.steps-grid{grid-template-columns: repeat(2,1fr)} } @media (max-width: 640px){.steps-grid{grid-template-columns: 1fr} } .two-column-content{display: grid;grid-template-columns: 1fr 1fr;gap: 60px;align-items: center} .content-text h2{font-size: 2.5rem;margin-bottom: 24px;color: var(--color-text-main)} .content-text p{font-size: 1.125rem;color: var(--color-text-secondary);margin-bottom: 24px;line-height: 1.7} .checkmark-list{list-style: none;padding: 0;margin: 30px 0} .checkmark-list li{padding: 16px 0;padding-left: 40px;position: relative;color: var(--color-text-secondary);line-height: 1.7;font-size: 1.0625rem} .checkmark-list li::before{content: "✓";position: absolute;left: 0;top: 16px;width: 24px;height: 24px;background-color: var(--color-accent-light);color: var(--color-accent);border-radius: 50%;display: flex;align-items: center;justify-content: center;font-weight: 700;font-size: 0.875rem} .checkmark-list li strong{color: var(--color-text-main);font-weight: 600} .content-image{border-radius: var(--radius-lg);overflow: hidden;box-shadow: var(--shadow-xl)} .content-image img{width: 100%;height: auto;display: block} @media (max-width: 968px){.two-column-content{grid-template-columns: 1fr;gap: 40px} .content-image{order: -1} } .testimonial-card{background-color: var(--color-bg-main);padding: 40px 30px;border-radius: var(--radius-lg);border: 1px solid var(--color-border);transition: var(--transition);height: 100%;display: flex;flex-direction: column} .testimonial-card:hover{transform: translateY(-8px);border-color: var(--color-accent);box-shadow: var(--shadow-xl)} .stars{color: #FACC15;font-size: 1.25rem;margin-bottom: 20px;letter-spacing: 4px} .testimonial-card p{color: var(--color-text-secondary);line-height: 1.7;margin-bottom: 24px;flex-grow: 1;font-size: 1.0625rem} .testimonial-author{display: flex;flex-direction: column;padding-top: 20px;border-top: 1px solid var(--color-border)} .testimonial-author strong{color: var(--color-text-main);font-weight: 600;margin-bottom: 4px} .testimonial-author span{color: var(--color-text-muted);font-size: 0.875rem} .faq-section{padding: 80px 0} .faq-container{max-width: 900px;margin: 0 auto} .faq-item{margin-bottom: 20px;border: 1px solid var(--color-border);border-radius: var(--radius-md);background-color: var(--color-bg-main);transition: var(--transition);overflow: hidden} .faq-item:hover{border-color: var(--color-border-hover);box-shadow: var(--shadow-sm)} .faq-item.active{border-color: var(--color-accent);box-shadow: var(--shadow-md)} .faq-question{width: 100%;text-align: left;background: none;border: none;padding: 24px;color: var(--color-text-main);font-size: 1.125rem;font-weight: 600;cursor: pointer;display: flex;justify-content: space-between;align-items: center;gap: 20px} .faq-icon{font-size: 1.5rem;color: var(--color-accent);transition: var(--transition);flex-shrink: 0;width: 32px;height: 32px;display: flex;align-items: center;justify-content: center;background-color: var(--color-accent-light);border-radius: 50%;font-weight: 700} .faq-item.active .faq-icon{transform: rotate(45deg);background-color: var(--color-accent);color: white} .faq-answer{max-height: 0;overflow: hidden;transition: max-height 0.3s ease,padding 0.3s ease;color: var(--color-text-secondary);padding: 0 24px;line-height: 1.7} .faq-item.active .faq-answer{max-height: 1000px;padding-bottom: 24px} .faq-answer p{margin-bottom: 16px} .faq-answer ul{margin: 16px 0;padding-left: 24px;list-style: disc} .faq-answer ul li{margin-bottom: 8px;color: var(--color-text-secondary)} .cta-section{padding: 100px 0;background: linear-gradient(135deg,rgba(16,185,129,0.05),rgba(16,185,129,0.02));position: relative} .cta-content{max-width: 800px;margin: 0 auto} .cta-content h2{font-size: 2.75rem;margin-bottom: 20px;color: var(--color-text-main)} .cta-subtitle{font-size: 1.25rem;color: var(--color-text-secondary);margin-bottom: 40px} .cta-buttons{display: flex;gap: 20px;justify-content: center;flex-wrap: wrap;margin-bottom: 30px} .cta-buttons .btn{min-width: 200px} .cta-note{text-align: center;font-size: 0.95rem;color: var(--color-text-muted)} .btn--large{padding: 18px 48px;font-size: 1.125rem} @media (max-width: 640px){.cta-content h2{font-size: 2rem} .cta-buttons{flex-direction: column} .cta-buttons .btn{width: 100%} } .blog-hero{padding: 120px 0 60px;text-align: center;background: radial-gradient(circle at top,rgba(16,185,129,0.1),transparent 50%)} .blog-hero h1{font-size: 3.5rem;margin: 20px 0} .blog-hero p{font-size: 1.25rem;color: var(--color-text-secondary);max-width: 600px;margin: 0 auto} .blog-section{padding: 60px 0 100px} .blog-grid{display: grid;grid-template-columns: repeat(auto-fill,minmax(350px,1fr));gap: 40px} .blog-card{background: var(--color-bg-main);border-radius: 16px;overflow: hidden;border: 1px solid var(--color-border);transition: all 0.3s ease} .blog-card:hover{transform: translateY(-8px);box-shadow: 0 20px 40px rgba(0,0,0,0.15)} .blog-card__image{position: relative;width: 100%;height: 220px;overflow: hidden} .blog-card__image img{width: 100%;height: 100%;object-fit: cover;transition: transform 0.3s ease} .blog-card:hover .blog-card__image img{transform: scale(1.05)} .blog-category{position: absolute;top: 16px;left: 16px;background: var(--color-accent);color: white;padding: 6px 14px;border-radius: 20px;font-size: 0.85rem;font-weight: 600} .blog-card__content{padding: 24px} .blog-card__content h2{font-size: 1.4rem;margin-bottom: 12px;line-height: 1.4} .blog-card__content p{color: var(--color-text-secondary);margin-bottom: 20px;line-height: 1.6} .blog-card__meta{display: flex;justify-content: space-between;align-items: center;padding-top: 16px;border-top: 1px solid var(--color-border)} .read-time{font-size: 0.9rem;color: var(--color-text-muted)} .read-more{color: var(--color-accent);font-weight: 600;text-decoration: none;transition: all 0.3s ease} .read-more:hover{color: var(--color-accent-dark);transform: translateX(4px)} @media (max-width: 768px){.blog-hero h1{font-size: 2.5rem} .blog-grid{grid-template-columns: 1fr;gap: 30px} } .sports-highlight{padding: 80px 0;background-color: var(--color-bg-main)} .highlight-card{background-color: #000000;border-radius: 24px;overflow: hidden;display: flex;align-items: stretch;box-shadow: var(--shadow-xl);position: relative} .highlight-image{flex: 1;position: relative;min-height: 400px;background: linear-gradient(135deg,#0f172a 0%,#000000 100%);overflow: hidden} .highlight-image::before{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-image: linear-gradient(45deg,rgba(255,255,255,0.03) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.03) 50%,rgba(255,255,255,0.03) 75%,transparent 75%,transparent);background-size: 40px 40px;opacity: 0.5} .highlight-image img{width: 100%;height: 100%;object-fit: cover;display: block;position: relative;z-index: 1} .highlight-content{flex: 1;padding: 60px;color: #ffffff;display: flex;flex-direction: column;justify-content: center;background-color: #000000} .highlight-title{font-family: var(--font-heading);font-size: 2.5rem;margin-bottom: 20px;color: #ffffff;line-height: 1.1} .highlight-text{color: #cbd5e1;margin-bottom: 40px;font-size: 1.05rem;line-height: 1.6;max-width: 95%} .highlight-plans{display: flex;flex-direction: column;gap: 16px} .highlight-plan-row{background-color: rgba(255,255,255,0.05);padding: 20px 24px;border-radius: 12px;display: flex;align-items: center;justify-content: space-between;border: 1px solid rgba(255,255,255,0.1);transition: var(--transition)} .highlight-plan-row:hover{background-color: rgba(255,255,255,0.1);border-color: rgba(255,255,255,0.2)} .plan-name{font-weight: 700;font-size: 1rem;letter-spacing: 0.05em;text-transform: uppercase;color: #ffffff} .plan-right{display: flex;align-items: center;gap: 24px} .plan-price{font-weight: 700;font-size: 1.25rem;color: #ffffff} .plan-price span{font-size: 0.875rem;font-weight: 400;color: #94a3b8;margin-left: 4px} .btn--sm{padding: 10px 24px;font-size: 0.9rem} @media (max-width: 968px){.highlight-card{flex-direction: column} .highlight-image{width: 100%;min-height: 300px;max-height: 400px} .highlight-content{width: 100%;padding: 40px 24px} } @media (max-width: 768px){.highlight-plan-row{flex-direction: column;align-items: flex-start;gap: 12px} .plan-right{width: 100%;flex-direction: column;align-items: flex-start;gap: 12px} .plan-price{font-size: 1.5rem} .btn--sm{width: 100%;text-align: center;padding: 12px 24px} } .sports-carousel{padding: 4rem 0;background-color: var(--color-bg-main);overflow: hidden} .sports-carousel .section-title{margin-bottom: 2rem;text-align: center} .carousel-wrapper{position: relative;width: 100%;overflow-x: auto;-webkit-overflow-scrolling: touch;scrollbar-width: none;-ms-overflow-style: none;padding-bottom: 1rem} .carousel-wrapper::-webkit-scrollbar{display: none} .carousel-track{display: flex;gap: 1.5rem;padding: 0 24px;width: max-content;animation: scroll-right 60s linear infinite} .carousel-track:hover{animation-play-state: paused} .carousel-item{flex: 0 0 auto;width: 200px;border-radius: 12px;overflow: hidden;box-shadow: 0 4px 6px rgba(0,0,0,0.3);transition: all 0.3s ease;border: 2px solid transparent} .carousel-item:hover{transform: translateY(-5px);border-color: var(--color-accent);box-shadow: 0 10px 20px rgba(17,186,130,0.2)} .carousel-item img{width: 100%;height: 100%;object-fit: cover;display: block;aspect-ratio: 2/3} @keyframes scroll-right{0%{transform: translateX(-50%)} 100%{transform: translateX(0)} } @media (max-width: 768px){.carousel-item{width: 150px} } .contact-hero{padding: 140px 0 80px;background: radial-gradient(circle at top,rgba(16,185,129,0.08),transparent 50%);text-align: center} .contact-hero__content{max-width: 800px;margin: 0 auto} .contact-hero h1{font-size: 3.5rem;margin-bottom: 16px;color: var(--color-text-main)} .hero-subtitle{font-size: 1.25rem;color: var(--color-accent);font-weight: 600;margin-bottom: 20px} .hero-description{font-size: 1.125rem;color: var(--color-text-secondary);line-height: 1.7} .hero-description strong{color: var(--color-accent)} .contact-methods{padding: 80px 0;background-color: var(--color-bg-main)} .contact-methods .section-title{text-align: center;font-size: 2.5rem;margin-bottom: 50px} .contact-methods__grid{display: grid;grid-template-columns: repeat(2,1fr);gap: 30px;margin-bottom: 50px} .contact-method-card{background-color: var(--color-bg-main);padding: 40px;border-radius: var(--radius-lg);border: 1px solid var(--color-border);transition: var(--transition);position: relative} .contact-method-card:hover{transform: translateY(-8px);border-color: var(--color-accent);box-shadow: var(--shadow-xl)} .contact-method-card--featured{border-color: var(--color-accent);background: linear-gradient(135deg,rgba(16,185,129,0.03),transparent)} .recommended-badge{position: absolute;top: 20px;right: 20px;background-color: var(--color-accent);color: white;padding: 6px 16px;border-radius: var(--radius-full);font-size: 0.75rem;font-weight: 600;text-transform: uppercase;letter-spacing: 0.05em} .method-icon{font-size: 3rem;margin-bottom: 20px;display: inline-block} .contact-method-card h3{font-size: 1.75rem;margin-bottom: 12px;color: var(--color-text-main)} .method-description{color: var(--color-text-secondary);margin-bottom: 20px;font-size: 1rem} .method-details{margin-top: 20px} .method-details p{margin-bottom: 12px;color: var(--color-text-secondary);line-height: 1.6} .contact-link{color: var(--color-accent);font-weight: 600;text-decoration: none;transition: var(--transition)} .contact-link:hover{text-decoration: underline} .method-note{font-size: 0.9rem;color: var(--color-text-muted);font-style: italic} .contact-info-box{background: linear-gradient(135deg,rgba(16,185,129,0.05),rgba(16,185,129,0.02));border: 1px solid var(--color-accent-light);border-radius: var(--radius-lg);padding: 35px;margin-top: 30px} .contact-info-box h3{font-size: 1.5rem;margin-bottom: 16px;color: var(--color-text-main)} .contact-info-box p{color: var(--color-text-secondary);margin-bottom: 16px} .contact-info-box ul{list-style: none;padding-left: 0;margin-bottom: 16px} .contact-info-box ul li{padding: 8px 0;color: var(--color-text-secondary);display: flex;align-items: center;gap: 8px} .contact-info-box ul li::before{content: "•";color: var(--color-accent);font-weight: bold;font-size: 1.2rem} .info-note{font-size: 0.95rem;color: var(--color-text-muted);font-style: italic;margin-top: 12px} .contact-form-section{padding: 80px 0;background-color: var(--color-bg-secondary)} .form-container{max-width: 800px;margin: 0 auto;background-color: var(--color-bg-main);padding: 50px;border-radius: var(--radius-lg);border: 1px solid var(--color-border);box-shadow: var(--shadow-lg)} .form-container h2{font-size: 2.5rem;margin-bottom: 12px;text-align: center;color: var(--color-text-main)} .form-intro{text-align: center;color: var(--color-text-secondary);margin-bottom: 40px;font-size: 1.1rem} .contact-form{width: 100%} .form-row{display: grid;grid-template-columns: repeat(2,1fr);gap: 24px;margin-bottom: 24px} .contact-form .form-group{margin-bottom: 24px} .contact-form .form-group label{display: block;margin-bottom: 8px;font-weight: 600;font-size: 0.95rem;color: var(--color-text-main)} .contact-form .form-group input,.contact-form .form-group select,.contact-form .form-group textarea{width: 100%;padding: 14px 18px;background: var(--color-bg-secondary);border: 1px solid var(--color-border);border-radius: var(--radius-md);color: var(--color-text-main);font-size: 1rem;font-family: var(--font-main);transition: var(--transition)} .contact-form .form-group input:focus,.contact-form .form-group select:focus,.contact-form .form-group textarea:focus{outline: none;border-color: var(--color-accent);box-shadow: 0 0 0 3px rgba(16,185,129,0.1);background-color: var(--color-bg-main)} .contact-form .form-group textarea{resize: vertical;min-height: 150px} .field-note{font-size: 0.85rem;color: var(--color-text-muted);margin-top: 6px;font-style: italic} .contact-form .btn--full{margin-top: 10px;padding: 16px 32px;font-size: 1.1rem} .contact-form .form-note{text-align: center;font-size: 0.9rem;color: var(--color-text-muted);margin-top: 20px} @media (max-width: 968px){.contact-hero h1{font-size: 2.5rem} .contact-methods__grid{grid-template-columns: 1fr} .form-row{grid-template-columns: 1fr;gap: 0} .form-container{padding: 35px 25px} } @media (max-width: 640px){.contact-hero{padding: 120px 0 60px} .contact-hero h1{font-size: 2rem} .hero-subtitle{font-size: 1.1rem} .hero-description{font-size: 1rem} .contact-method-card{padding: 30px 20px} .recommended-badge{top: 15px;right: 15px;font-size: 0.7rem;padding: 5px 12px} .contact-methods .section-title{font-size: 2rem} .form-container h2{font-size: 2rem} } :root{--color-premium-bg: #FFFFFF;--color-premium-bg-secondary: #F8FAFC;--color-premium-bg-tertiary: #F1F5F9;--color-premium-accent: #11BA82;--color-premium-accent-hover: #0D9668;--color-premium-accent-light: #D1FAE5;--color-premium-text: #0F172A;--color-premium-text-secondary: #475569;--color-premium-text-muted: #94A3B8;--color-premium-border: #E2E8F0;--color-premium-border-light: #F1F5F9;--shadow-premium-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);--shadow-premium-md: 0 4px 6px -1px rgb(0 0 0 / 0.08),0 2px 4px -2px rgb(0 0 0 / 0.06);--shadow-premium-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08),0 4px 6px -4px rgb(0 0 0 / 0.06);--shadow-premium-xl: 0 20px 25px -5px rgb(0 0 0 / 0.08),0 8px 10px -6px rgb(0 0 0 / 0.06);--shadow-glow-green: 0 0 0 3px rgba(17,186,130,0.1)} body.reseller-page{background-color: var(--color-premium-bg);color: var(--color-premium-text);font-family: 'Inter',sans-serif} .reseller-page .header{position: absolute;top: 0;left: 0;width: 100%;background: transparent;backdrop-filter: none;border-bottom: none;box-shadow: none;z-index: 1000} .reseller-page .logo img{height: 40px;width: auto;object-fit: contain} .reseller-page .nav__link{color: var(--color-premium-text-secondary)} .reseller-page .nav__link:hover,.reseller-page .nav__link.active{color: var(--color-premium-accent)} .text-gradient-gold{background: linear-gradient(135deg,#11BA82 0%,#0D9668 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text} .text-center{text-align: center} .glass-panel{background: var(--color-premium-bg);border: 1px solid var(--color-premium-border);border-radius: 20px;box-shadow: var(--shadow-premium-lg)} .premium-hero{padding: 160px 0 100px;background: linear-gradient(180deg,#F8FAFC 0%,#FFFFFF 100%);position: relative;overflow: hidden} .premium-hero .container{display: flex;flex-direction: column;align-items: center} .premium-hero__content{text-align: center;max-width: 900px;margin: 0 auto;position: relative;z-index: 2} .premium-badge{display: inline-flex;align-items: center;gap: 8px;padding: 10px 20px;background: var(--color-premium-accent-light);border: 1px solid var(--color-premium-accent);border-radius: 100px;color: var(--color-premium-accent);font-size: 0.875rem;font-weight: 600;margin-bottom: 32px;text-transform: uppercase;letter-spacing: 0.05em} .premium-badge i{color: var(--color-premium-accent)} .premium-hero__title{font-size: 4rem;line-height: 1.1;font-weight: 700;margin-bottom: 24px;letter-spacing: -0.02em;color: var(--color-premium-text)} .premium-hero__text{font-size: 1.25rem;color: var(--color-premium-text-secondary);margin-bottom: 40px;line-height: 1.6;max-width: 700px;margin-left: auto;margin-right: auto} .premium-hero__actions{display: flex;gap: 16px;justify-content: center;align-items: center;flex-wrap: wrap;margin-bottom: 32px} .premium-btn{background: var(--color-premium-accent);color: white;padding: 16px 40px;border-radius: 100px;font-weight: 600;font-size: 1.125rem;border: none;box-shadow: var(--shadow-premium-md);transition: all 0.3s ease;display: inline-flex;align-items: center;gap: 10px;cursor: pointer;text-decoration: none} .premium-btn:hover{transform: translateY(-2px);box-shadow: var(--shadow-premium-lg);background: var(--color-premium-accent-hover)} .btn-secondary{background: white;color: var(--color-premium-text);border: 2px solid var(--color-premium-border);box-shadow: var(--shadow-premium-sm)} .btn-secondary:hover{background: var(--color-premium-bg-secondary);border-color: var(--color-premium-accent);color: var(--color-premium-accent)} .trust-badges{display: flex;gap: 32px;justify-content: center;align-items: center;flex-wrap: wrap;margin-top: 24px} .trust-badge{display: flex;align-items: center;gap: 8px;color: var(--color-premium-text-secondary);font-size: 0.95rem;font-weight: 500} .trust-badge i{color: var(--color-premium-accent);font-size: 1.125rem} .hero-visual{margin-top: 80px;position: relative;width: 100%;display: flex;justify-content: center} .hero-dashboard-img{width: 100%;max-width: 1000px;border-radius: 20px;border: 1px solid var(--color-premium-border);box-shadow: var(--shadow-premium-xl)} .premium-features{padding: 100px 0;background: var(--color-premium-bg-secondary)} .premium-features .section-title{font-size: 2.75rem;margin-bottom: 16px;color: var(--color-premium-text)} .premium-features .section-subtitle{font-size: 1.25rem;color: var(--color-premium-text-secondary);margin-bottom: 0} .premium-grid{display: grid;grid-template-columns: repeat(3,1fr);gap: 32px;margin-top: 60px} .premium-card{padding: 48px 32px;transition: all 0.3s ease;background: white;border: 1px solid var(--color-premium-border);border-radius: 20px;box-shadow: var(--shadow-premium-md)} .premium-card:hover{border-color: var(--color-premium-accent);transform: translateY(-8px);box-shadow: var(--shadow-premium-xl)} .premium-icon{width: 64px;height: 64px;background: var(--color-premium-accent-light);border-radius: 16px;display: flex;align-items: center;justify-content: center;font-size: 1.75rem;color: var(--color-premium-accent);margin-bottom: 24px} .premium-card h3{font-size: 1.5rem;margin-bottom: 16px;color: var(--color-premium-text);font-weight: 600} .premium-card p{color: var(--color-premium-text-secondary);line-height: 1.7;font-size: 1rem} .premium-timeline{padding: 100px 0;background: white;position: relative} .premium-timeline .section-title{font-size: 2.75rem;margin-bottom: 16px;color: var(--color-premium-text)} .premium-timeline .section-subtitle{font-size: 1.25rem;color: var(--color-premium-text-secondary);margin-bottom: 0} .timeline-track{display: flex;justify-content: space-between;position: relative;max-width: 1000px;margin: 80px auto 0;gap: 40px} .timeline-track::before{content: '';position: absolute;top: 32px;left: 10%;width: 80%;height: 3px;background: linear-gradient(90deg,var(--color-premium-border) 0%,var(--color-premium-accent-light) 50%,var(--color-premium-border) 100%)} .timeline-node{position: relative;z-index: 2;text-align: center;flex: 1} .node-circle{width: 64px;height: 64px;background: white;border: 3px solid var(--color-premium-accent);border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 1.75rem;font-weight: 700;color: var(--color-premium-accent);margin: 0 auto 24px;box-shadow: var(--shadow-premium-md)} .timeline-node h3{color: var(--color-premium-text);margin-bottom: 12px;font-size: 1.5rem;font-weight: 600} .timeline-node p{color: var(--color-premium-text-secondary);font-size: 1rem;max-width: 280px;margin: 0 auto;line-height: 1.6} .premium-pricing{padding: 100px 0;background: var(--color-premium-bg-secondary)} .premium-pricing .section-title{font-size: 2.75rem;margin-bottom: 16px;color: var(--color-premium-text)} .premium-pricing .section-subtitle{font-size: 1.25rem;color: var(--color-premium-text-secondary);margin-bottom: 0} .pricing-grid{display: grid;grid-template-columns: repeat(3,1fr);gap: 32px;margin-top: 60px} .pricing-glass-card{background: white;border: 2px solid var(--color-premium-border);border-radius: 20px;padding: 48px 40px;text-align: center;transition: all 0.3s ease;position: relative;box-shadow: var(--shadow-premium-md)} .pricing-glass-card:hover{border-color: var(--color-premium-accent);transform: translateY(-8px);box-shadow: var(--shadow-premium-xl)} .pricing-glass-card.featured{background: linear-gradient(180deg,var(--color-premium-accent-light) 0%,white 100%);border-color: var(--color-premium-accent);transform: scale(1.03);box-shadow: 0 20px 40px rgba(17,186,130,0.15)} .pricing-glass-card.featured:hover{transform: scale(1.03) translateY(-8px)} .popular-badge{position: absolute;top: -16px;left: 50%;transform: translateX(-50%);background: var(--color-premium-accent);color: white;padding: 8px 24px;border-radius: 100px;font-size: 0.875rem;font-weight: 600;text-transform: uppercase;letter-spacing: 0.05em;box-shadow: var(--shadow-premium-md)} .pricing-glass-card h3{font-size: 1.25rem;font-weight: 700;margin-bottom: 16px;color: var(--color-premium-text);text-transform: uppercase;letter-spacing: 0.05em} .plan-price{font-size: 3rem;font-weight: 700;color: #ffffff !important;margin: 24px 0} .plan-price span{font-size: 1rem;color: #e2e8f0 !important;font-weight: 400} .pricing-list{text-align: left;margin: 32px 0;list-style: none;padding: 0} .pricing-list li{margin-bottom: 16px;color: var(--color-premium-text-secondary);display: flex;align-items: center;gap: 12px;font-size: 1rem} .check-gold{color: var(--color-premium-accent);font-size: 1.125rem} .premium-testimonials{padding: 100px 0;background: white} .premium-testimonials .section-title{font-size: 2.75rem;margin-bottom: 16px;color: var(--color-premium-text)} .testimonial-slider{display: grid;grid-template-columns: repeat(3,1fr);gap: 32px;margin-top: 60px} .testimonial-glass{padding: 40px;background: white;border: 1px solid var(--color-premium-border);border-radius: 20px;box-shadow: var(--shadow-premium-md);transition: all 0.3s ease} .testimonial-glass:hover{transform: translateY(-8px);box-shadow: var(--shadow-premium-xl);border-color: var(--color-premium-accent)} .testimonial-glass .stars{color: #FACC15;font-size: 1.25rem;margin-bottom: 20px;letter-spacing: 4px} .testimonial-glass .quote{color: var(--color-premium-text-secondary);font-size: 1.05rem;line-height: 1.7;margin-bottom: 24px} .user-profile{display: flex;align-items: center;justify-content: center;margin-top: 24px;padding-top: 24px;border-top: 1px solid var(--color-premium-border-light)} .user-profile > div{text-align: center} .user-profile strong{display: block;color: var(--color-premium-text);font-weight: 600;margin-bottom: 4px} .user-profile span{display: block;color: var(--color-premium-text-muted);font-size: 0.875rem} .premium-form-section{padding: 100px 0;background: var(--color-premium-bg-secondary)} .form-container-glass{max-width: 700px;margin: 0 auto;padding: 60px;background: white;border: 1px solid var(--color-premium-border);border-radius: 20px;box-shadow: var(--shadow-premium-lg)} .form-container-glass .section-title{font-size: 2.5rem;margin-bottom: 16px;color: var(--color-premium-text)} .form-container-glass p{color: var(--color-premium-text-secondary);font-size: 1.125rem;margin-bottom: 40px} .form-group{margin-bottom: 24px} .form-label{display: block;color: var(--color-premium-text);margin-bottom: 8px;font-size: 0.95rem;font-weight: 600} .premium-input{background: var(--color-premium-bg-secondary);border: 1px solid var(--color-premium-border);color: var(--color-premium-text);padding: 16px;border-radius: 12px;width: 100%;transition: all 0.3s ease;font-size: 1rem;font-family: 'Inter',sans-serif} .premium-input:focus{border-color: var(--color-premium-accent);outline: none;box-shadow: var(--shadow-glow-green);background: white} .premium-input::placeholder{color: var(--color-premium-text-muted)} .section-title{font-size: 2.75rem;margin-bottom: 16px;color: var(--color-premium-text);font-weight: 700;line-height: 1.2} .section-subtitle{font-size: 1.25rem;color: var(--color-premium-text-secondary);line-height: 1.6} .reseller-page .footer{background: var(--color-bg-secondary);border-top: 1px solid var(--color-border)} .reseller-page .footer__container{display: grid;grid-template-columns: 1.5fr 1fr 1fr 1.5fr;gap: 60px;margin-bottom: 60px} .reseller-page .footer__col h4{color: var(--color-text-main);margin-bottom: 24px;font-size: 1.125rem} .reseller-page .footer__col p,.reseller-page .footer__desc{color: var(--color-text-secondary);line-height: 1.6} .reseller-page .footer__col ul{list-style: none;padding: 0} .reseller-page .footer__col ul li{margin-bottom: 12px} .reseller-page .footer__col ul li a{color: var(--color-text-secondary);font-size: 0.95rem;transition: var(--transition)} .reseller-page .footer__col ul li a:hover{color: var(--color-accent);padding-left: 5px} .reseller-page .social-links a{background: white;border: 1px solid var(--color-border);color: var(--color-text-secondary)} .reseller-page .social-links a:hover{background: var(--color-accent);color: white;border-color: var(--color-accent)} .reseller-page .footer__bottom{background: white;border-top: 1px solid var(--color-border);padding: 24px 0} .reseller-page .footer__bottom p{color: var(--color-text-muted)} .reseller-page .footer__newsletter-text{color: var(--color-text-secondary);margin-bottom: 16px;font-size: 0.95rem} .reseller-page .footer__newsletter-form{display: flex;gap: 10px} .reseller-page .footer__newsletter-form input{flex: 1;padding: 12px 16px;border-radius: var(--radius-full);border: 1px solid var(--color-border);background-color: white;font-family: var(--font-main);font-size: 0.9rem;outline: none;transition: var(--transition)} .reseller-page .footer__newsletter-form input:focus{border-color: var(--color-accent);box-shadow: 0 0 0 3px var(--color-accent-light)} .reseller-page .footer__newsletter-form .btn{padding: 12px 24px;font-size: 0.9rem} .reseller-page .footer__bottom-content{display: flex;justify-content: space-between;align-items: center;font-size: 0.9rem;color: var(--color-text-muted)} .reseller-page .payment-methods{display: flex;gap: 16px;align-items: center} .reseller-page .payment-methods span{font-weight: 600;color: var(--color-text-secondary)} @media (max-width: 1024px){.premium-hero__title{font-size: 3rem} .premium-grid,.testimonial-slider,.pricing-grid{grid-template-columns: repeat(2,1fr)} .pricing-glass-card.featured{transform: scale(1)} } @media (max-width: 768px){.reseller-page .header{padding: 12px 0} .reseller-page .header__container{justify-content: space-between} .reseller-page .logo{position: static;transform: none} .reseller-page .nav{position: fixed;top: 64px;left: 0;width: 100%;background-color: white;padding: 24px;flex-direction: column;transform: translateY(-150%);transition: var(--transition);border-bottom: 1px solid var(--color-border);box-shadow: var(--shadow-lg);z-index: 999} .reseller-page .nav.active{transform: translateY(0)} .reseller-page .nav__list{flex-direction: column;width: 100%;text-align: center;gap: 20px} .reseller-page .nav .btn{width: 100%;margin-top: 16px} .reseller-page .mobile-toggle{display: flex} .premium-hero{padding: 120px 0 80px} .premium-hero__title{font-size: 2.5rem} .premium-hero__actions{flex-direction: column;width: 100%} .premium-hero__actions .premium-btn,.premium-hero__actions .btn-secondary{width: 100%} .trust-badges{flex-direction: column;gap: 16px} .premium-grid,.testimonial-slider,.pricing-grid,.timeline-track{grid-template-columns: 1fr;flex-direction: column;gap: 32px} .pricing-glass-card.featured{transform: scale(1)} .timeline-track::before{width: 3px;height: calc(100% - 64px);left: 32px;top: 32px;transform: none} .timeline-node{text-align: left;padding-left: 80px} .node-circle{position: absolute;left: 0;top: 0} .section-title{font-size: 2.25rem} .section-subtitle{font-size: 1.125rem} .form-container-glass{padding: 40px 24px} .reseller-page .footer__container{grid-template-columns: repeat(2,1fr);gap: 40px} .reseller-page .footer__bottom-content{flex-direction: column;gap: 16px;text-align: center} } @media (max-width: 480px){.premium-hero__title{font-size: 2rem} .section-title{font-size: 1.875rem} .reseller-page .footer__container{grid-template-columns: 1fr;gap: 40px;text-align: center} .reseller-page .footer__newsletter-form{flex-direction: column} .reseller-page .footer__newsletter-form .btn{width: 100%} } .article-hero{padding: 140px 0 60px;background: radial-gradient(circle at top,rgba(16,185,129,0.08),transparent 60%)} .breadcrumb{font-size: 0.875rem;color: var(--color-text-muted);margin-bottom: 24px} .breadcrumb a{color: var(--color-accent);transition: color 0.2s ease} .breadcrumb a:hover{color: var(--color-accent-hover)} .breadcrumb span{color: var(--color-text-secondary)} .article-hero h1{font-size: 3.5rem;line-height: 1.1;margin-bottom: 24px;max-width: 900px} .article-meta{display: flex;align-items: center;gap: 24px;flex-wrap: wrap;color: var(--color-text-muted);font-size: 0.9375rem} .article-meta span{display: flex;align-items: center;gap: 8px} .article-meta svg{opacity: 0.7} .featured-image-container{margin: 40px 0;border-radius: 16px;overflow: hidden;box-shadow: var(--shadow-lg)} .featured-image{width: 100%;height: auto;display: block} .article-content{max-width: 800px;margin: 0 auto;padding: 40px 24px 100px} .article-content .lead{font-size: 1.25rem;color: var(--color-text-secondary);margin-bottom: 2rem;line-height: 1.8} .article-content h2{font-size: 2rem;margin-top: 3rem;margin-bottom: 1rem;color: var(--color-text-main)} .article-content h3{font-size: 1.5rem;margin-top: 2rem;margin-bottom: 0.75rem;color: var(--color-text-main)} .article-content p{font-size: 1.0625rem;line-height: 1.8;color: var(--color-text-secondary);margin-bottom: 1.5rem} .article-content ul,.article-content ol{margin: 1.5rem 0;padding-left: 1.5rem} .article-content ul{list-style: disc} .article-content ol{list-style: decimal} .article-content li{font-size: 1.0625rem;line-height: 1.8;color: var(--color-text-secondary);margin-bottom: 0.75rem;padding-left: 0.5rem} .article-content li strong{color: var(--color-text-main)} .article-content strong{font-weight: 600;color: var(--color-text-main)} .article-content a{color: var(--color-accent);text-decoration: underline;text-decoration-color: rgba(16,185,129,0.3);text-underline-offset: 2px;transition: all 0.2s ease} .article-content a:hover{color: var(--color-accent-hover);text-decoration-color: var(--color-accent-hover)} .article-content code{background-color: var(--color-bg-tertiary);padding: 2px 8px;border-radius: 4px;font-size: 0.9em;font-family: 'Courier New',monospace;color: var(--color-text-main)} .cta-box{background: linear-gradient(135deg,var(--color-accent-light) 0%,rgba(16,185,129,0.1) 100%);border-left: 4px solid var(--color-accent);padding: 32px;border-radius: var(--radius-md);margin: 3rem 0} .cta-box h3{font-size: 1.5rem;margin-bottom: 12px;color: var(--color-text-main);margin-top: 0} .cta-box p{margin-bottom: 20px;color: var(--color-text-secondary)} .cta-box .btn{background-color: var(--color-accent);color: white;padding: 14px 32px;border-radius: var(--radius-full);font-weight: 600;display: inline-block;text-decoration: none;transition: all 0.3s ease} .cta-box .btn:hover{background-color: var(--color-accent-hover);transform: translateY(-2px);box-shadow: var(--shadow-lg)} .step-box{background-color: var(--color-bg-secondary);border: 1px solid var(--color-border);padding: 28px;border-radius: var(--radius-md);margin: 2rem 0} .step-box ol{margin: 0;padding-left: 1.5rem} .step-box li{margin-bottom: 1rem} .step-box li:last-child{margin-bottom: 0} .article-content table{width: 100%;border-collapse: collapse;margin: 2rem 0;font-size: 0.9375rem} .article-content table th{background-color: var(--color-bg-tertiary);padding: 14px;text-align: left;font-weight: 600;color: var(--color-text-main);border: 1px solid var(--color-border)} .article-content table td{padding: 14px;border: 1px solid var(--color-border);color: var(--color-text-secondary)} .article-content table tr:nth-child(even){background-color: var(--color-bg-secondary)} .table-container{overflow-x: auto;margin: 2rem 0} @media (max-width: 768px){.article-hero{padding: 100px 0 40px} .article-hero h1{font-size: 2.25rem} .article-meta{gap: 16px;font-size: 0.875rem} .article-content{padding: 24px 20px 60px} .article-content h2{font-size: 1.75rem;margin-top: 2.5rem} .article-content h3{font-size: 1.25rem;margin-top: 1.75rem} .article-content p,.article-content li{font-size: 1rem} .cta-box,.step-box{padding: 24px;margin: 2rem 0} .cta-box h3{font-size: 1.25rem} .featured-image-container{margin: 24px 0} .article-content table{font-size: 0.875rem} .article-content table th,.article-content table td{padding: 10px} } @media (max-width: 480px){.article-hero h1{font-size: 1.875rem} .article-meta{flex-direction: column;align-items: flex-start;gap: 8px} .article-content h2{font-size: 1.5rem} .article-content h3{font-size: 1.125rem} .cta-box .btn{display: block;text-align: center;width: 100%} }