/* =========================================
           HOMEPAGE EXTRA STYLES
        ========================================= */

        .hero-actions {
            display: flex;
            align-items: center;
            gap: 1.5rem;
            flex-wrap: wrap;
        }

        .hero-meta-item {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            font-weight: 700;
        }

        .hero-meta-icon {
            width: 28px;
            height: 28px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: var(--primary);
            color: #fff;
            font-weight: 800;
        }

        .service-icon {
            width: 58px;
            height: 58px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--primary);
            color: #fff;
            border-radius: 16px;
            font-size: 1.5rem;
            margin-bottom: 1.2rem;
        }

        .whatsapp-floating {
            position: fixed;
            right: 22px;
            bottom: 22px;
            width: 58px;
            height: 58px;
            border-radius: 50%;
            background: #25D366;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.7rem;
            text-decoration: none;
            z-index: 999;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
            transition: transform 0.25s ease;
        }

        .whatsapp-floating:hover {
            transform: translateY(-4px) scale(1.05);
        }


        /* =========================================
           CART
        ========================================= */

        .cart-overlay {
            position: fixed;
            inset: 0;
            background: rgba(17, 24, 39, .48);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            z-index: 9998;
            transition: .3s ease;
        }

        .cart-overlay.active {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        .cart-drawer {
            position: fixed;
            top: 0;
            right: 0;

            width: min(430px, 92vw);
            height: 100vh;

            background: var(--white);

            z-index: 9999;

            display: flex;
            flex-direction: column;

            box-shadow:
                -15px 0 45px rgba(0, 0, 0, .16);

            transform: translateX(100%);
            visibility: hidden;

            transition:
                transform .3s ease,
                visibility .3s ease;
        }


        .cart-drawer.active {
            transform: translateX(0);
            visibility: visible;
        }

        .cart-header {
            min-height: 70px;

            display: flex;
            align-items: center;
            justify-content: space-between;

            padding: 1rem 1.25rem;

            border-bottom: 1px solid var(--border);
            background: var(--white);

            box-sizing: border-box;
        }

        .cart-header h3 {
            margin: 0;
            color: var(--dark);
            font-size: 1.15rem;
            font-weight: 800;
        }


        .cart-close {
            width: 38px;
            height: 38px;

            border: 0;
            border-radius: 10px;

            background: var(--light);
            color: var(--dark);

            font-size: 1.7rem;
            line-height: 1;

            cursor: pointer;

            display: flex;
            align-items: center;
            justify-content: center;

            transition: .2s ease;
        }
        .cart-items {
            flex: 1;
            overflow-y: auto;

            padding: 1rem 1.25rem;

            scrollbar-width: thin;
        }

        .empty-cart-icon {
            width: 70px;
            height: 70px;

            border-radius: 50%;

            background: var(--primary-light);

            display: flex;
            align-items: center;
            justify-content: center;

            font-size: 2rem;

            margin-bottom: 1rem;
        }


        .empty-cart p {
            margin: .25rem 0;
            line-height: 1.6;
        }
        .empty-cart strong {
            color: var(--dark);
        }


        .cart-item {
            display: flex;
            align-items: center;
            gap: 1rem;

            padding: 1rem 0;

            border-bottom: 1px solid var(--border);
        }

        .cart-item:last-child {
            border-bottom: 0;
        }

        .cart-item-info {
            flex: 1;
            min-width: 0;
        }

        .cart-item-name {
            color: var(--dark);
            font-weight: 800;
            font-size: .95rem;

            line-height: 1.4;

            margin-bottom: .3rem;
        }
        .cart-remove {
            flex: 0 0 auto;

            width: 34px;
            height: 34px;

            border: 0;
            border-radius: 50%;

            background: #f3f4f6;
            color: #374151;

            font-size: 1.25rem;

            cursor: pointer;

            display: flex;
            align-items: center;
            justify-content: center;

            transition: .2s ease;
        }

        .cart-remove:hover {
            background: #fee2e2;
            color: #dc2626;
        }
        .cart-footer {
            padding: 1.2rem 1.25rem;

            border-top: 1px solid var(--border);

            background: var(--white);

            box-shadow:
                0 -5px 20px rgba(0, 0, 0, .04);
        }


        .cart-total {
            display: flex;
            align-items: center;
            justify-content: space-between;

            margin-bottom: 1rem;

            color: var(--dark);

            font-size: 1rem;
            font-weight: 800;
        }

        .cart-total span:last-child {
            color: var(--primary);
            font-size: 1.25rem;
        }
        .cart-checkout {
            width: 100%;
            border: 0;
            border-radius: 10px;
            padding: .95rem;
            background: var(--dark);
            color: white;
            font-weight: 800;
            cursor: pointer;
        }

        .cart-checkout:disabled {
            opacity: .45;
            cursor: not-allowed;
        }

        /* =========================================
           FAQ ACCORDION
        ========================================= */

        .faq-container {
            max-width: 850px;
            margin: auto;
        }

        .faq-item {
            border: 1px solid var(--border);
            border-radius: 12px;
            margin-bottom: 1rem;
            overflow: hidden;
            background: var(--white);
        }

        .faq-question {
            width: 100%;
            padding: 1.25rem 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
            cursor: pointer;
            font-weight: 700;
            background: transparent;
            border: 0;
            color: var(--dark);
            font-family: inherit;
            font-size: 1rem;
            text-align: left;
        }

        .faq-question:focus-visible {
            outline: 3px solid var(--primary-light);
            outline-offset: -3px;
        }

        .faq-icon {
            font-size: 1.3rem;
            transition: 0.3s ease;
            flex-shrink: 0;
        }

        .faq-answer {
            max-height: 0;
            overflow: hidden;
            padding: 0 1.5rem;
            color: var(--dark-muted);
            line-height: 1.7;
            transition: 0.3s ease;
        }

        .faq-answer p {
            margin: 0;
        }

        .faq-item.active .faq-answer {
            max-height: 300px;
            padding: 0 1.5rem 1.5rem;
        }

        .faq-item.active .faq-icon {
            transform: rotate(45deg);
        }

        /* =========================================
           HERO STAT CARD ANIMATION
        ========================================= */

        .hero-stat-card.stat-animation-ready {
            opacity: 0;
            transform: translateY(26px) scale(0.94);
            transition:
                opacity 0.7s ease,
                transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
            will-change: transform, opacity;
        }

        .hero-stat-card.stat-animation-ready.is-visible {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

        .hero-stat-card.is-floating {
            animation: heroStatFloat 4s ease-in-out infinite;
        }

        .hero-stat-card.is-floating:hover {
            animation-play-state: paused;
            transform: translateY(-8px) scale(1.035);
        }

        .hero-stat-num.is-counting {
            animation: heroStatNumberPulse 0.55s ease;
        }

        @keyframes heroStatFloat {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-8px);
            }
        }

        @keyframes heroStatNumberPulse {
            0% {
                transform: scale(0.88);
                opacity: 0.45;
            }
            65% {
                transform: scale(1.08);
                opacity: 1;
            }
            100% {
                transform: scale(1);
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .hero-stat-card.stat-animation-ready,
            .hero-stat-card.stat-animation-ready.is-visible {
                opacity: 1;
                transform: none;
                transition: none;
            }

            .hero-stat-card.is-floating,
            .hero-stat-num.is-counting {
                animation: none;
            }
        }

        /* =========================================
           HOMEPAGE SCROLL REVEAL ANIMATIONS
        ========================================= */

        .page-reveal {
            opacity: 0;
            transform: translateY(28px);
            filter: blur(3px);
            transition:
                opacity 0.75s ease,
                transform 0.85s cubic-bezier(0.2, 0.8, 0.2, 1),
                filter 0.75s ease;
            transition-delay: var(--reveal-delay, 0ms);
            will-change: opacity, transform;
        }

        .page-reveal.reveal-left {
            transform: translateX(-32px);
        }

        .page-reveal.reveal-right {
            transform: translateX(32px);
        }

        .page-reveal.reveal-scale {
            transform: scale(0.94);
        }

        .page-reveal.is-revealed {
            opacity: 1;
            transform: translate3d(0, 0, 0) scale(1);
            filter: blur(0);
        }

        .page-reveal.reveal-image {
            overflow: hidden;
        }

        .page-reveal.reveal-image.is-revealed img,
        img.page-reveal.is-revealed {
            animation: homepageImageSettle 1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
        }

        @keyframes homepageImageSettle {
            0% {
                transform: scale(1.06);
            }
            100% {
                transform: scale(1);
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .page-reveal,
            .page-reveal.reveal-left,
            .page-reveal.reveal-right,
            .page-reveal.reveal-scale,
            .page-reveal.is-revealed {
                opacity: 1;
                transform: none;
                filter: none;
                transition: none;
            }

            .page-reveal.reveal-image.is-revealed img,
            img.page-reveal.is-revealed {
                animation: none;
            }
        }

        /* =========================================
           3D SERVICE AREA MAP ICONS
        ========================================= */

        .map-icon-3d {
            position: relative;
            width: 92px;
            height: 92px;
            margin-bottom: 1.35rem;
            display: grid;
            place-items: center;
            border-radius: 24px;
            background:
                radial-gradient(circle at 28% 20%, rgba(255,255,255,.95), rgba(255,255,255,.15) 38%, transparent 40%),
                linear-gradient(145deg, #e8fff8 0%, #c9f7e9 48%, #a7ead6 100%);
            border: 1px solid rgba(16, 185, 129, 0.24);
            box-shadow:
                0 16px 28px rgba(5, 150, 105, 0.18),
                inset 0 1px 0 rgba(255,255,255,.9);
            transform: perspective(500px) rotateX(8deg) rotateY(-8deg);
            transform-style: preserve-3d;
            transition: transform .35s ease, box-shadow .35s ease;
            overflow: visible;
        }

        .feature-card:hover .map-icon-3d {
            transform: perspective(500px) rotateX(2deg) rotateY(4deg) translateY(-6px);
            box-shadow:
                0 22px 36px rgba(5, 150, 105, 0.24),
                inset 0 1px 0 rgba(255,255,255,.95);
        }

        .map-icon-3d svg {
            width: 76px;
            height: 76px;
            overflow: visible;
            filter: drop-shadow(0 9px 7px rgba(6, 95, 70, .25));
            animation: mapIconFloat 4s ease-in-out infinite;
        }

        .map-icon-3d .map-depth {
            fill: #047857;
            opacity: .52;
            transform: translateY(5px);
        }

        .map-icon-3d .map-face {
            fill: url(#mapGreenGradient);
            stroke: rgba(255,255,255,.92);
            stroke-width: 1.5;
            stroke-linejoin: round;
        }

        .map-icon-3d .map-highlight {
            fill: none;
            stroke: rgba(255,255,255,.68);
            stroke-width: 1.4;
            stroke-linecap: round;
        }

        .map-icon-3d .map-pin {
            fill: #ff4d4f;
            stroke: #ffffff;
            stroke-width: 2;
            transform-origin: center;
            animation: mapPinPulse 1.8s ease-in-out infinite;
        }

        .map-icon-3d .map-pin-dot {
            fill: #ffffff;
        }

        .map-icon-3d .map-road {
            fill: none;
            stroke: #059669;
            stroke-width: 3;
            stroke-linecap: round;
            stroke-dasharray: 5 5;
        }

        .map-icon-label {
            position: absolute;
            right: -8px;
            bottom: -7px;
            min-width: 34px;
            height: 25px;
            padding: 0 7px;
            display: grid;
            place-items: center;
            border-radius: 999px;
            background: #0f172a;
            color: #ffffff;
            border: 2px solid #ffffff;
            font-size: .67rem;
            font-weight: 900;
            letter-spacing: .04em;
            box-shadow: 0 6px 14px rgba(15, 23, 42, .22);
            transform: translateZ(18px);
        }

        @keyframes mapIconFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-4px); }
        }

        @keyframes mapPinPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.12); }
        }

        @media (prefers-reduced-motion: reduce) {
            .map-icon-3d svg,
            .map-icon-3d .map-pin {
                animation: none;
            }
        }







        /* =========================================
           MOBILE
        ========================================= */

        @media (max-width: 900px) {

            .process-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .nav-actions .btn-header {
                display: none;
            }
        }

        @media (max-width: 650px) {

            .process-grid {
                grid-template-columns: 1fr;
            }

            .hero-actions {
                align-items: flex-start;
                flex-direction: column;
            }

            .hero-meta-item {
                font-size: 0.9rem;
            }

            .cta-box {
                padding: 3rem 1.3rem;
            }

            .cart-drawer {
                width: 94vw;
            }
        }

/* Give visitors a direct route to ready-made bundles. */
.hero-actions .btn-hero-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border:1.5px solid #087a58;border-radius:999px;color:#07684c;background:#fff;font-weight:800;text-decoration:none;box-shadow:0 6px 18px rgba(8,122,88,.08);transition:transform .2s,background .2s,box-shadow .2s}
.hero-actions .btn-hero-secondary:hover,.hero-actions .btn-hero-secondary:focus-visible{background:#eafaf2;transform:translateY(-2px);box-shadow:0 8px 20px rgba(8,122,88,.15)}

.design-examples{max-width:1320px;margin:auto;padding-block:40px 72px}
.design-examples-heading{text-align:center;max-width:690px;margin:0 auto 28px}
.design-examples-heading h2{color:var(--dark);font-size:clamp(1.8rem,3vw,2.6rem);margin:0 0 10px}
.design-examples-heading p{color:var(--dark-muted);line-height:1.6}
.design-examples-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.design-examples-grid a{display:block;overflow:hidden;border:1px solid #e3ebe7;border-radius:18px;background:#fff;text-decoration:none;color:var(--dark);box-shadow:0 8px 28px rgba(21,42,34,.07);transition:transform .2s,box-shadow .2s}
.design-examples-grid a:hover,.design-examples-grid a:focus-visible{transform:translateY(-4px);box-shadow:0 13px 30px rgba(21,42,34,.14)}
.design-examples-grid img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.design-examples-grid a>span{display:flex;justify-content:space-between;gap:10px;padding:16px 17px;font-weight:800}
@media(max-width:850px){.design-examples-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:500px){.design-examples-grid{gap:12px}.design-examples-grid a>span{padding:12px;font-size:.85rem}}