/* extracted from /landing/index.php */
@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}

        body {
            font-family: 'Anek Bangla', 'Plus Jakarta Sans', sans-serif;
            background-color: #F8FAF8;
            scroll-behavior: smooth;
        }
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
            vertical-align: middle;
        }
        .sk-lp-shine {
            position: relative;
            overflow: hidden;
        }
        .sk-lp-shine::after {
            content: "";
            position: absolute;
            top: 0;
            left: -75%;
            width: 50%;
            height: 100%;
            background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
            transform: skewX(-20deg);
            animation: shine-effect 3s ease-in-out infinite;
        }
        @keyframes shine-effect {
            0% { left: -75%; }
            50% { left: 125%; }
            100% { left: 125%; }
        }
        .hero-glow {
            box-shadow: 0 20px 40px rgba(47, 177, 77, 0.18);
        }
        .sk-lp-btn-gradient {
            background: linear-gradient(135deg, #2FB14D 0%, #1F7A34 100%);
            box-shadow: 0 10px 25px rgba(31, 122, 52, 0.3);
            animation: pulse 2.5s ease-in-out infinite;
        }
        .sk-lp-btn-gradient:hover {
            background: linear-gradient(135deg, #38C458 0%, #226B2E 100%);
            box-shadow: 0 12px 28px rgba(31, 122, 52, 0.4);
        }
        .sk-lp-header-gradient {
            background: linear-gradient(135deg, #2FB14D 0%, #1F7A34 100%);
        }
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.015); }
            100% { transform: scale(1); }
        }
        .sk-lp-btn-accent {
            background: linear-gradient(135deg, #C9902A 0%, #A6690F 100%);
            box-shadow: 0 6px 16px rgba(166, 105, 15, 0.3);
        }
        .sk-lp-btn-accent:hover {
            background: linear-gradient(135deg, #D9A441 0%, #B8791A 100%);
        }
        .hero-grid {
            display: grid;
            grid-template-columns: 1fr;
            row-gap: 1.5rem;
            grid-template-areas:
                "badge"
                "heading"
                "image"
                "desc"
                "rating"
                "price"
                "cta";
        }
        @media (min-width: 1024px) {
            .hero-grid {
                grid-template-columns: 1fr 1fr;
                column-gap: 2.5rem;
                align-items: center;
                grid-template-areas:
                    "badge   image"
                    "heading image"
                    "desc    image"
                    "rating  image"
                    "price   image"
                    "cta     image";
            }
            .hero-area-image {
                align-self: start;
            }
        }
        .hero-area-badge { grid-area: badge; }
        .hero-area-heading { grid-area: heading; }
        .hero-area-image { grid-area: image; }
        .hero-area-desc { grid-area: desc; }
        .hero-area-rating { grid-area: rating; }
        .hero-area-price { grid-area: price; }
        .hero-area-cta { grid-area: cta; }
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        .package-option { cursor: pointer; transition: all 0.2s; }
        .package-option:hover { border-color: #2FB14D; }
        .package-option.selected { border-color: #2FB14D; background-color: #f0fdf4; }
        .package-option.selected .pkg-radio { background: #2FB14D; border-color: #2FB14D; }
        .package-option.selected .pkg-radio::after { content: ''; display: block; width: 8px; height: 8px; background: white; border-radius: 50%; }
        .pkg-radio { width: 20px; height: 20px; border: 2px solid #d1d5db; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.2s; }
        /* Order success overlay */
        .order-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 100; align-items: center; justify-content: center; padding: 1rem; }
        .order-overlay.active { display: flex; }
        .order-success-card { background: white; border-radius: 1.5rem; padding: 2.5rem; max-width: 420px; width: 100%; text-align: center; animation: popIn 0.3s ease-out; }
        @keyframes popIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }