/* CSS INTERNAL */
        :root {
            --primary: #0044cc; /* Biru Mewah */
            --secondary: #0066ff;
            --accent: #ff7b00; /* Orange Glossy */
            --dark: #0a192f;
            --light: #f0f4f8;
            --success: #25D366;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Poppins', sans-serif; color: var(--dark); line-height: 1.6; scroll-behavior: smooth; background-color: #fff; }

        .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
        
        /* Navigation */
        nav {
            display: flex; justify-content: space-between; align-items: center;
            padding: 15px 0; background:#003081; position: sticky; top: 0; z-index: 1000;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .logo { font-weight: 700; font-size: 24px; color: var(--primary); display: flex; align-items: center; }
        .logo img { height: 40px; margin-right: 10px; }
        .nav-links a { text-decoration: none; color: #fff; margin-left: 20px; font-weight: 500; }
        .btn-check { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff !important; padding: 8px 20px; border-radius: 50px; box-shadow: 0 4px 10px rgba(0,68,204,0.3); }

        /* Hero Section */
        .hero {
            padding: 100px 0 60px;
            /* Opacity dikurangi dari 0.95 ke 0.5 agar gambar terlihat */
            background: linear-gradient(135deg, rgba(0, 40, 120, 0.85), rgba(0, 80, 200, 0.7)), 
                        url('../images/hero.jpeg');
            background-size: cover; background-position: center;
            color: #fff; text-align: center;
        }
        .hero h1 { font-size: 3rem; line-height: 1.2; margin-bottom: 20px; }
        .hero p { font-size: 1.2rem; margin-bottom: 35px; opacity: 0.9; max-width: 800px; margin-inline: auto; }
        .hero-btns .btn {
            display: inline-block; padding: 15px 35px; border-radius: 50px;
            text-decoration: none; font-weight: 700; transition: 0.3s; margin: 5px;
        }
        .btn-main { background: linear-gradient(135deg, #ff9900, #ff5500); color: #fff; box-shadow: 0 5px 15px rgba(255, 123, 0, 0.4); border: none; }
        .btn-sub { border: 2px solid #fff; color: #fff; }
        .btn:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.2); }

        /* Trust Section (Lokal Sukabumi) */
        .trust-bar {
            background: linear-gradient(135deg, #ff9800, #ff5f00);
            padding: 30px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        }
        .trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; text-align: center; color: rgba(255, 255, 255, 0.95); }
        .trust-item strong { display: block; color: #fff; font-size: 1.2rem; }

        /* Segments Section */
        .section-padding { padding: 80px 0; }
        .text-center { text-align: center; margin-bottom: 50px; }
        .section-title { font-size: 2.5rem; color: var(--primary); }
        
        .segment-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 25px; }
        .segment-card {
            background: #fff; padding: 30px; border-radius: 20px; border: 1px solid #eee;
            transition: 0.3s; position: relative; overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        }
        .segment-card:hover { border-color: var(--accent); box-shadow: 0 15px 30px rgba(0,0,0,0.1); transform: translateY(-5px); }
        .segment-card .icon { font-size: 3rem; margin-bottom: 15px; display: block; }
        .segment-card h3 { margin-bottom: 10px; color: var(--primary); }
        .segment-card p { font-size: 0.95rem; color: #666; margin-bottom: 20px; }
        .btn-wa-sm { color: var(--success); text-decoration: none; font-weight: 600; font-size: 0.9rem; border-bottom: 1px solid var(--success); }

        /* Banner Highlights */
        .visual-proof { background: #fff; }
        .banner-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
        .banner-card {
            background: #fff;
            border: 1px solid #e8edf3;
            border-radius: 18px;
            overflow: hidden;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
            transition: transform 0.25s ease, box-shadow 0.25s ease;
        }
        .banner-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 18px 36px rgba(0, 0, 0, 0.12);
        }
        .banner-card img {
            width: 100%;
            height: 190px;
            object-fit: cover;
            display: block;
        }
        .banner-body { padding: 16px 16px 18px; }
        .banner-body h3 {
            font-size: 1.02rem;
            color: var(--primary);
            line-height: 1.35;
            margin-bottom: 8px;
        }
        .banner-body p {
            font-size: 0.92rem;
            color: #5b6672;
            margin: 0;
        }

        /* Pricing */
        .pricing { background: var(--light); }
        .price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; }
        .price-card {
            background: #fff; padding: 50px 30px; border-radius: 25px; text-align: center;
            border: 2px solid transparent; transition: 0.3s;
            box-shadow: 0 10px 25px rgba(0,0,0,0.05);
        }
        .price-card.featured { border: 2px solid var(--accent); transform: scale(1.05); position: relative; box-shadow: 0 15px 40px rgba(0,0,0,0.1); }
        .badge { background: linear-gradient(135deg, #ff9900, #ff5500); color: #fff; padding: 5px 20px; border-radius: 20px; position: absolute; top: -15px; left: 50%; transform: translateX(-50%); font-size: 0.8rem; box-shadow: 0 4px 10px rgba(255, 123, 0, 0.3); }
        
        .price-value { font-size: 2.5rem; font-weight: 700; margin: 20px 0; color: var(--dark); }
        .price-value span { font-size: 1rem; color: #888; }
        
        .price-features { list-style: none; margin-bottom: 35px; text-align: left; }
        .price-features li { padding: 10px 0; border-bottom: 1px solid #f4f4f4; }
        .price-features li::before { content: '✓'; color: var(--success); margin-right: 10px; font-weight: bold; }

        .btn-order {
            display: block; padding: 15px; border-radius: 50px; background: var(--primary);
            background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; text-decoration: none; font-weight: 700; transition: 0.3s; box-shadow: 0 4px 10px rgba(0,68,204,0.2);
        }
        .price-card.featured .btn-order { background: linear-gradient(135deg, #ff9900, #ff5500); color: #fff; box-shadow: 0 4px 10px rgba(255, 123, 0, 0.3); }

        /* Testimonials */
        .testi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
        .testi-card {
            background: var(--light);
            padding: 22px;
            border-radius: 15px;
            border: 1px solid #e5ecf3;
        }
        .testi-head {
            display: grid;
            grid-template-columns: 62px 1fr;
            gap: 14px;
            align-items: center;
            margin-bottom: 14px;
        }
        .testi-photo {
            width: 62px;
            height: 62px;
            border-radius: 50%;
            border: 2px solid #d9e5f7;
            object-fit: cover;
            display: block;
        }
        .testi-name { color: var(--primary); font-weight: 700; line-height: 1.3; }
        .testi-role { color: #6e7b88; font-size: 0.88rem; margin-top: 2px; }
        .testi-quote { font-style: italic; color: #37424d; }

        /* Footer CTA */
        .footer-cta { background: var(--dark); color: #fff; text-align: center; padding: 80px 0; }
        .site-footer {
            background: #061224;
            color: #fff;
            text-align: center;
            padding: 26px 0;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
        .site-footer p {
            margin: 0;
            font-size: 0.8rem;
            opacity: 0.7;
            line-height: 1.7;
        }
        .btn-whatsapp-big {
            display: inline-block; background: linear-gradient(135deg, #25D366, #128C7E); color: #fff; padding: 20px 40px;
            border-radius: 50px; text-decoration: none; font-weight: 700; font-size: 1.2rem; margin-top: 25px;
            box-shadow: 0 5px 15px rgba(37, 211, 102, 0.3);
        }

        /* Locate Button */
        #locate-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            min-width: 260px;
            padding: 14px 28px;
            border: 1px solid rgba(255, 255, 255, 0.28);
            border-radius: 999px;
            background: linear-gradient(135deg, #ff9900 0%, #ff6b00 45%, #ff4500 100%);
            color: #fff;
            font-size: 1.05rem;
            font-weight: 700;
            letter-spacing: 0.2px;
            cursor: pointer;
            box-shadow: 0 12px 30px rgba(255, 94, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
            transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
            position: relative;
            overflow: hidden;
        }
        #locate-btn::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, 0.25) 50%, transparent 75%);
            transform: translateX(-130%);
            transition: transform 0.4s ease;
            pointer-events: none;
        }
        #locate-btn:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 0 16px 34px rgba(255, 94, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.25);
            filter: saturate(1.08);
        }
        #locate-btn:hover:not(:disabled)::before {
            transform: translateX(130%);
        }
        #locate-btn:active:not(:disabled) {
            transform: translateY(0);
            box-shadow: 0 8px 18px rgba(255, 94, 0, 0.35), inset 0 2px 4px rgba(0, 0, 0, 0.12);
        }
        #locate-btn:focus-visible {
            outline: none;
            box-shadow: 0 0 0 4px rgba(255, 123, 0, 0.2), 0 12px 30px rgba(255, 94, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
        }
        #locate-btn:disabled {
            filter: grayscale(0.15);
            box-shadow: 0 8px 18px rgba(255, 94, 0, 0.22);
        }

        /* Map Styles */
        #map { height: 400px; width: 100%; border-radius: 20px; z-index: 1; }
        .map-container { position: relative; box-shadow: 0 15px 40px rgba(0,0,0,0.1); border-radius: 20px; border: 5px solid #fff; }
        .map-overlay { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 1000; background: rgba(255,255,255,0.9); padding: 15px 30px; border-radius: 50px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); display: none; text-align: center; width: 80%; max-width: 400px; }
        .status-success { color: var(--success); font-weight: 700; font-size: 1.1rem; }
        .status-fail { color: #dc3545; font-weight: 700; font-size: 1.1rem; }

        /* Responsive */
        @media (max-width: 768px) {
            .hero h1 { font-size: 2.2rem; }
            .price-card.featured { transform: scale(1); }
            .nav-links { display: none; }
            .banner-grid { grid-template-columns: 1fr; }
            #locate-btn { width: 100%; max-width: 360px; min-width: 0; font-size: 1rem; padding: 13px 22px; }
        }