/* PREMIUM DARK B2C APP STORE LAYOUT */
        body { background: #02040a; color: #cbd5e1; font-family: 'Plus Jakarta Sans', sans-serif; overflow-x: hidden; margin: 0; }
        
        .b2c-hero { padding: 160px 5% 100px; text-align: center; position: relative; border-bottom: 1px solid rgba(255,255,255,0.05); overflow: hidden; }
        .b2c-hero::before { content: ''; position: absolute; top: -20%; left: 50%; transform: translateX(-50%); width: 800px; height: 800px; background: radial-gradient(circle, rgba(236, 72, 153, 0.15) 0%, transparent 70%); filter: blur(60px); z-index: -1; pointer-events: none; }
        .hero-grid-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(rgba(236, 72, 153, 0.05) 1px, transparent 1px); background-size: 40px 40px; z-index: -2; pointer-events: none; }

        .b2c-title { font-family: 'Outfit', sans-serif; font-size: clamp(45px, 6vw, 85px); font-weight: 900; color: #f8fafc; line-height: 1.05; margin-bottom: 25px; letter-spacing: -2px; }
        .b2c-title span { background: linear-gradient(135deg, #ec4899, #8b5cf6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        .b2c-desc { font-size: 1.25rem; color: #94a3b8; max-width: 700px; margin: 0 auto 40px; line-height: 1.7; }
        
        .app-mockup-wrapper { max-width: 1200px; margin: 60px auto 0; position: relative; display: flex; justify-content: center; gap: 40px; align-items: flex-end; }
        .phone-mockup { width: 300px; height: 620px; background: #0f172a; border-radius: 40px; border: 12px solid #000; box-shadow: 0 40px 80px rgba(0,0,0,0.6); overflow: hidden; position: relative; z-index: 2; transform: translateY(20px); border-bottom: none; }
        .phone-mockup.secondary { transform: translateY(-30px) scale(0.9); opacity: 0.6; z-index: 1; filter: blur(2px); }
        
        .phone-notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 120px; height: 25px; background: #000; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; z-index: 10; }
        .phone-screen { width: 100%; height: 100%; background: url('<?= base_url('global_assets/images/img/design (3).png') ?>') center/cover; }
        .phone-screen-2 { width: 100%; height: 100%; background: url('<?= base_url('global_assets/images/img/design (12).png') ?>') center/cover; }

        .btn-pink { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #ec4899, #be185d); color: #fff; padding: 18px 40px; border-radius: 100px; font-weight: 700; font-size: 1.1rem; text-decoration: none; box-shadow: 0 10px 25px rgba(236, 72, 153, 0.3); transition: 0.3s; border: 1px solid rgba(255,255,255,0.1); }
        .btn-pink:hover { transform: translateY(-3px); box-shadow: 0 15px 30px rgba(236, 72, 153, 0.4); }

        /* Icon Grid - Dark Glassmorphism */
        .benefits-section { background: rgba(15, 23, 42, 0.3); padding: 120px 5%; border-bottom: 1px solid rgba(255,255,255,0.05); }
        .benefits-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
        .benefit-card { background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(10px); padding: 40px 30px; border-radius: 24px; text-align: center; border: 1px solid rgba(255,255,255,0.05); transition: 0.3s; position: relative; overflow: hidden; }
        .benefit-card:hover { transform: translateY(-5px); border-color: rgba(236, 72, 153, 0.3); box-shadow: 0 20px 40px rgba(0,0,0,0.4); }
        .benefit-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at top right, rgba(236, 72, 153, 0.05), transparent); opacity: 0; transition: 0.3s; pointer-events: none; }
        .benefit-card:hover::before { opacity: 1; }
        
        .b-icon { width: 70px; height: 70px; margin: 0 auto 25px; border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 32px; }
        .benefit-card h3 { font-family: 'Outfit', sans-serif; font-size: 1.4rem; color: #f8fafc; margin-bottom: 15px; }
        .benefit-card p { color: #94a3b8; font-size: 0.95rem; line-height: 1.6; }

        /* Deep Dive Alternate - Dark */
        .feature-showcase { max-width: 1200px; margin: 120px auto; padding: 0 5%; display: flex; align-items: center; gap: 80px; }
        .feature-showcase.reverse { flex-direction: row-reverse; }
        .fs-text { flex: 1; }
        .fs-image { flex: 1; position: relative; }
        .fs-image img { width: 100%; border-radius: 24px; box-shadow: 0 30px 60px rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.05); }
        
        .fs-text h2 { font-family: 'Outfit', sans-serif; font-size: 2.8rem; color: #f8fafc; margin-bottom: 20px; line-height: 1.1; font-weight: 800; }
        .fs-text p { font-size: 1.15rem; color: #94a3b8; line-height: 1.8; margin-bottom: 30px; }
        
        .fs-list { list-style: none; padding: 0; display: grid; gap: 15px; color: #cbd5e1; font-weight: 500; }
        .fs-list li { display: flex; align-items: center; }
        .fs-list i { color: #ec4899; font-size: 1.5rem; margin-right: 10px; }

        @media (max-width: 1024px) {
            .app-mockup-wrapper { display: none; }
            .benefits-grid { grid-template-columns: repeat(2, 1fr); }
            .feature-showcase, .feature-showcase.reverse { flex-direction: column; gap: 40px; text-align: center; }
            .fs-list li { justify-content: center; }
        }
        @media (max-width: 600px) {
            .benefits-grid { grid-template-columns: 1fr; }
        }