/* BASE STYLES */
        body { 
            margin: 0; 
            padding: 0; 
            background-color: #f9f9f9; 
            scroll-behavior: smooth;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important; 
        }

        .stp-container { 
            color: #333; 
            max-width: 1200px; 
            margin: 0 auto; 
            padding: 20px; 
        }
        
        /* TOP NAVIGATION */
        .top-nav { display: flex; justify-content: space-between; align-items: center; padding: 15px 5%; background: #fff; position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
        .stp-logo { font-size: 24px; font-weight: bold; color: #2c3e50; text-decoration: none; }
        .stp-logo span { color: #27ae60; }
        .nav-links { display: flex; gap: 15px; }
        .nav-btn { text-decoration: none; padding: 10px 20px; border-radius: 5px; font-size: 14px; font-weight: 600; transition: 0.3s; }
        .login-btn { color: #2c3e50; border: 1px solid #ddd; }
        .create-btn { background: #2c3e50; color: white; }
        .create-btn:hover { background: #34495e; }

        /* HERO SECTION */
        .hero { text-align: center; padding: 100px 20px; background: linear-gradient(135deg, #ffffff 0%, #eef2f3 100%); border-radius: 0 0 50px 50px; }
        .hero h1 { font-size: 52px; color: #2c3e50; margin-bottom: 15px; line-height: 1.2; }
        .hero h1 span { color: #27ae60; }
        .hero p { font-size: 22px; color: #7f8c8d; margin-bottom: 40px; max-width: 700px; margin-left: auto; margin-right: auto; }
        
        /* MEDIA SECTIONS */
        .preview-section { padding: 80px 20px; text-align: center; }
        .section-title { font-size: 36px; margin-bottom: 15px; color: #2c3e50; }
        .section-subtitle { color: #7f8c8d; margin-bottom: 50px; font-size: 18px; }
        .video-container { max-width: 900px; margin: 0 auto 60px auto; background: #000; border-radius: 20px; box-shadow: 0 30px 60px rgba(0,0,0,0.15); overflow: hidden; aspect-ratio: 16/9; }
        
        /* REWORKED SCREENSHOTS SLIDER WITH SIDE ARROWS */
        .slider-section { background: #fff; padding: 80px 20px; text-align: center; }
        
        .slider-display-wrapper { max-width: 950px; margin: 0 auto; background: #fff; padding: 12px; border-radius: 16px; box-shadow: 0 20px 40px rgba(0,0,0,0.08); border: 1px solid #eef2f5; }
        .slider-window-header { display: flex; align-items: center; gap: 6px; padding: 4px 8px 12px 8px; border-bottom: 1px solid #f1f3f5; margin-bottom: 12px; }
        .slider-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
        .slider-dot.red { background: #ff5f56; }
        .slider-dot.yellow { background: #ffbd2e; }
        .slider-dot.green { background: #27c93f; }
        .slider-view-title { margin-left: 12px; font-size: 13px; color: #94a3b8; font-family: sans-serif; font-weight: 500; }
        
        /* Main structural wrapper for positioning relative side arrows */
        .slider-interactive-frame { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; }
        
        .slider-content-container { width: 100%; border-radius: 8px; overflow: hidden; background: #fafafa; cursor: zoom-in; }
        .slider-view-img { width: 100%; height: auto; display: none; object-fit: contain; max-height: 520px; animation: slideFade 0.45s ease-in-out forwards; border-radius: 6px; }
        .slider-view-img.active { display: block; }

        /* Side Navigation Arrows Styles */
        .slider-nav-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(44, 62, 80, 0.7); color: white; border: none; width: 50px; height: 50px; border-radius: 50%; font-size: 24px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10; transition: all 0.3s ease; }
        .slider-nav-arrow:hover { background: rgba(39, 174, 96, 0.9); scale: 1.05; }
        .slider-nav-arrow.left-arrow { left: 20px; }
        .slider-nav-arrow.right-arrow { right: 20px; }
        
        @keyframes slideFade {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* LIGHTBOX MODAL STYLES */
        .stp-lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.9); z-index: 10000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; padding: 20px; box-sizing: border-box; }
        .stp-lightbox.active { opacity: 1; pointer-events: auto; }
        .lightbox-img { max-width: 85%; max-height: 85vh; object-fit: contain; border-radius: 8px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); transform: scale(0.95); transition: transform 0.3s ease; z-index: 10001; }
        .stp-lightbox.active .lightbox-img { transform: scale(1); }
        
        /* Updated Close Button Styling to Red */
        .lightbox-close { position: absolute; top: 25px; right: 30px; background: #e74c3c; border: none; color: #fff; font-size: 32px; font-weight: 300; width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s; z-index: 10003; }
        .lightbox-close:hover { background: #c0392b; }

        /* Lightbox Arrow Navigation */
        .lightbox-nav-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.15); color: white; border: none; width: 60px; height: 60px; border-radius: 50%; font-size: 30px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10002; transition: all 0.2s ease; }
        .lightbox-nav-arrow:hover { background: rgba(39, 174, 96, 1); transform: translateY(-50%) scale(1.1); }
        .lightbox-nav-arrow.left-lightbox-arrow { left: 40px; }
        .lightbox-nav-arrow.right-lightbox-arrow { right: 40px; }

        /* BILLING TOGGLE */
        .billing-toggle { display: flex; justify-content: center; align-items: center; gap: 15px; margin: 50px 0; }
        .toggle-label { font-weight: bold; cursor: pointer; color: #777; transition: 0.3s; }
        .toggle-label.active { color: #27ae60; }
        .switch { position: relative; display: inline-block; width: 60px; height: 30px; }
        .switch input { opacity: 0; width: 0; height: 0; }
        .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; }
        .slider:before { position: absolute; content: ""; height: 22px; width: 22px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; }
        input:checked + .slider { background-color: #27ae60; }
        input:checked + .slider:before { transform: translateX(30px); }

        /* PRICING TABLE - ADJUSTED FOR 5 CARDS IN A ROW */
        .pricing-wrapper { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; align-items: stretch; }
        .plan-card { border: 1px solid #ddd; border-radius: 15px; flex: 1 1 200px; max-width: 220px; padding: 25px 15px; transition: 0.3s; background: #fff; display: flex; flex-direction: column; position: relative; box-sizing: border-box; }
        .plan-card:hover { transform: translateY(-10px); border-color: #27ae60; box-shadow: 0 15px 30px rgba(0,0,0,0.1); }
        .popular-badge { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: #27ae60; color: white; padding: 5px 10px; border-radius: 20px; font-size: 11px; font-weight: bold; white-space: nowrap; }
        
        .plan-name { font-size: 22px; font-weight: bold; text-align: center; margin-bottom: 10px; color: #2c3e50; }
        .plan-price { text-align: center; font-size: 26px; font-weight: bold; margin-bottom: 25px; color: #2c3e50; }
        .plan-price small { font-size: 14px; color: #7f8c8d; font-weight: normal; }
        
        .feature-list { list-style: none; padding: 0; margin: 0 0 30px 0; flex-grow: 1; }
        .feature-list li { padding: 12px 0; border-bottom: 1px solid #f1f1f1; font-size: 13px; display: flex; align-items: center; }
        .feature-list li::before { content: "✓"; color: #27ae60; font-weight: bold; margin-right: 8px; }
        .feature-list li.disabled { color: #ccc; text-decoration: line-through; }
        .feature-list li.disabled::before { content: "✕"; color: #ccc; }

        .buy-btn { background: #27ae60; color: white; text-align: center; padding: 14px; border-radius: 8px; text-decoration: none; font-weight: bold; display: block; transition: 0.3s; }
        .buy-btn:hover { background: #219150; transform: scale(1.02); }
        .pro-btn { background: #f1c40f; color: #2c3e50; }
        .trial-btn { background: transparent; color: #27ae60; border: 2px solid #27ae60; }
        .trial-btn:hover { background: #27ae60; color: white; }

        /* SYSTEM REQUIREMENTS */
        .requirements-section { background: #fff; border: 1px solid #eee; border-radius: 15px; max-width: 800px; margin: 40px auto; padding: 30px; text-align: left; box-shadow: 0 5px 15px rgba(0,0,0,0.02); }
        .req-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; margin-top: 20px; }
        .req-item { padding: 10px; border-left: 3px solid #27ae60; background: #fcfcfc; }
        .req-item label { display: block; font-size: 12px; color: #7f8c8d; text-transform: uppercase; font-weight: bold; }
        .req-item span { font-size: 15px; color: #2c3e50; font-weight: 600; }

        /* FAQ SECTION */
        .faq-section { max-width: 800px; margin: 100px auto; padding: 0 20px; }
        .faq-item { background: #fff; margin-bottom: 15px; border-radius: 10px; overflow: hidden; border: 1px solid #eee; }
        .faq-question { padding: 20px; font-weight: bold; color: #2c3e50; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: 0.3s; }
        .faq-question:hover { background: #fcfcfc; }
        .faq-answer { padding: 0 20px 20px 20px; color: #666; line-height: 1.6; display: none; border-top: 1px solid #fafafa; }

        /* TOGGLE LOGIC CLASSES */
        .yearly-price { display: block; }
        .monthly-price { display: none; }
        .show-monthly .yearly-price { display: none; }
        .show-monthly .monthly-price { display: block; }

        /* WHATSAPP BUTTON STYLES */
        .whatsapp-float {
            position: fixed;
            width: 60px;
            height: 60px;
            bottom: 40px;
            right: 40px;
            background-color: #25d366;
            color: #FFF;
            border-radius: 50px;
            text-align: center;
            font-size: 30px;
            box-shadow: 2px 2px 15px rgba(0,0,0,0.2);
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            transition: 0.3s;
        }
        .whatsapp-float:hover {
            background-color: #128c7e;
            transform: scale(1.1);
        }
        .whatsapp-float svg { width: 35px; height: 35px; fill: white; }

        @media (max-width: 992px) {
            .pricing-wrapper { flex-direction: row; }
            .plan-card { max-width: 260px; flex: 1 1 260px; }
        }

        @media (max-width: 768px) {
            .hero h1 { font-size: 36px; }
            .pricing-wrapper { flex-direction: column; align-items: center; }
            .plan-card { width: 100%; max-width: 320px; }
            .whatsapp-float { bottom: 20px; right: 20px; width: 50px; height: 50px; }
            .slider-nav-arrow { width: 40px; height: 40px; font-size: 18px; }
            .slider-nav-arrow.left-arrow { left: 8px; }
            .slider-nav-arrow.right-arrow { right: 8px; }
            .lightbox-nav-arrow { width: 45px; height: 45px; font-size: 20px; }
            .lightbox-nav-arrow.left-lightbox-arrow { left: 10px; }
            .lightbox-nav-arrow.right-lightbox-arrow { right: 10px; }
        }
        
        /* Mobile Optimization */
        @media (max-width: 768px) {
            /* Hero section ko thoda chota kiya */
            .hero { padding: 60px 20px; border-radius: 0 0 30px 30px; }
            .hero h1 { font-size: 32px; }
            .hero p { font-size: 18px; }
        
            /* Pricing section fix */
            .pricing-wrapper { 
                flex-direction: column; 
                align-items: center; 
                gap: 20px; 
            }
            .plan-card { 
                width: 90%; /* Mobile par full width ki bajaye thodi jagah chhorna achha lagta hai */
                max-width: 350px; 
                flex: 1 1 auto; 
            }
        
            /* WhatsApp button ko mobile par adjust kiya */
            .whatsapp-float { bottom: 20px; right: 20px; width: 50px; height: 50px; }
        
            /* Slider Arrows ko touch-friendly banaya */
            .slider-nav-arrow { width: 40px; height: 40px; }
            
            /* Container padding kam ki taake mobile par content zayada dikhe */
            .stp-container { padding: 15px; }
        }
        
        /* Founder Section Styling */
        .founder-section {
            padding: 60px 20px;
            background-color: #f9f9f9;
            display: flex;
            justify-content: center;
        }
        
        .founder-wrapper {
            max-width: 900px;
            display: flex;
            align-items: center;
            gap: 40px;
            background: #ffffff;
            padding: 40px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        }
        
        .founder-img {
            width: 300px;
            border-radius: 10px;
        }
        
        .founder-text h2 {
            color: #2c3e50;
            margin-bottom: 15px;
        }
        
        .founder-text p {
            color: #555;
            line-height: 1.6;
            margin-bottom: 20px;
        }
        
        @media (max-width: 768px) {
            .founder-wrapper { flex-direction: column; text-align: center; }
            .founder-img { width: 100%; max-width: 300px; }
        }