.carbon-pattern {
            background-image: radial-gradient(rgba(164, 230, 29, 0.05) 1px, transparent 1px);
            background-size: 20px 20px;
        }
        .neon-glow {
            box-shadow: 0 0 20px rgba(164, 230, 29, 0.4);
        }
        .neon-text-glow {
            text-shadow: 0 0 10px rgba(164, 230, 29, 0.6);
        }
        .glass-card {
            background: rgba(18, 18, 18, 0.8);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: backdrop-filter 0.5s ease, background 0.5s ease, border-color 0.5s ease;
        }
        .glass-card:hover {
            background: rgba(164, 230, 29, 0.05);
            backdrop-filter: blur(16px);
            border-color: rgba(164, 230, 29, 0.3);
        }
        .metallic-border {
            border: 1px solid transparent;
            background: linear-gradient(#121212, #121212) padding-box,
                        linear-gradient(to bottom, #8c947b, #121212) border-box;
        }
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }

        /* Premium Motion Effects */
        @keyframes pulse-neon {
            0%, 100% { box-shadow: 0 0 20px rgba(164, 230, 29, 0.4); }
            50% { box-shadow: 0 0 40px rgba(164, 230, 29, 0.7); }
        }
        .pulse-neon-anim {
            animation: pulse-neon 2s infinite ease-in-out;
        }

        @keyframes shimmer {
            0% { background-position: -200% center; }
            100% { background-position: 200% center; }
        }
        .chrome-shimmer:hover {
            background: linear-gradient(90deg, #e5e2e1 0%, #cdff78 50%, #e5e2e1 100%);
            background-size: 200% auto;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: shimmer 1.5s linear infinite;
        }

        @keyframes float-whatsapp {
            0%, 100% { transform: translateY(0) scale(1); }
            50% { transform: translateY(-10px) scale(1.05); }
        }
        .whatsapp-float {
            animation: float-whatsapp 3s infinite ease-in-out;
        }

        /* 3D Tilt Effect Utilities */
        .tilt-card {
            transform-style: preserve-3d;
            perspective: 1000px;
            transition: transform 0.1s ease-out;
        }
        .tilt-card > * {
            transform: translateZ(20px);
        }

        /* Scroll Reveal Transitions */
        .reveal-hidden {
            opacity: 0;
            transform: translateY(40px) scale(0.95);
            filter: blur(4px);
            transition: all 1s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .reveal-visible {
            opacity: 1;
            transform: translateY(0) scale(1);
            filter: blur(0);
        }

        /* Map Marker Breathing */
        @keyframes breathing-glow {
            0%, 100% { filter: drop-shadow(0 0 5px #a4e61d); opacity: 0.8; }
            50% { filter: drop-shadow(0 0 15px #a4e61d); opacity: 1; }
        }
        .map-marker-breath {
            animation: breathing-glow 3s infinite ease-in-out;
        }

        @media (prefers-reduced-motion: reduce) {
            .pulse-neon-anim, .chrome-shimmer:hover, .whatsapp-float, .reveal-hidden, .tilt-card {
                animation: none !important;
                transition: none !important;
                transform: none !important;
                opacity: 1 !important;
                filter: none !important;
            }
            #hero-canvas { display: none !important; }
        }


        /* about */
        .glass-card {
            background: rgba(18, 18, 18, 0.8);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(140, 148, 123, 0.3);
        }
        .neon-glow {
            box-shadow: 0 0 15px rgba(164, 230, 29, 0.2);
        }
        .metallic-border {
            border: 1px solid #424935;
            position: relative;
        }
        .metallic-border::after {
            content: '';
            position: absolute;
            inset: -1px;
            background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.1) 50%, transparent 60%);
            pointer-events: none;
        }

        /* Scanning Light Effect */
        @keyframes scan {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }
        .scan-effect {
            position: relative;
            overflow: hidden;
        }
        .scan-effect::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 50%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(205, 255, 120, 0.1), transparent);
            animation: scan 3s infinite linear;
            pointer-events: none;
        }

        /* Reveal Animations */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
        }
        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* Parallax Container */
        .parallax-wrap {
            position: relative;
            overflow: hidden;
        }
        .parallax-img {
            transition: transform 0.1s ease-out;
            will-change: transform;
        }

        /* Drawing line animation for timeline */
        .timeline-line {
            position: absolute;
            width: 2px;
            background: linear-gradient(to bottom, #cdff78, transparent);
            height: 0;
            transition: height 1.5s ease-out;
        }
        .timeline-line.active {
            height: 100%;
        }

        /* gallery */
         .masonry-item {
            break-inside: avoid;
            margin-bottom: 24px;
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
        }

        .masonry-item.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .masonry-item.hidden-category {
            display: none;
        }

        @media (min-width: 768px) {
            .masonry-container {
                column-count: 2;
                column-gap: 24px;
            }
        }

        @media (min-width: 1024px) {
            .masonry-container {
                column-count: 3;
                column-gap: 24px;
            }
        }

        /* Shine Effect */
        .shine-effect::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(
                to bottom right,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.1) 45%,
                rgba(255, 255, 255, 0.4) 50%,
                rgba(255, 255, 255, 0.1) 55%,
                rgba(255, 255, 255, 0) 100%
            );
            transform: rotate(-45deg) translate(-100%, -100%);
            transition: transform 0.6s ease;
            pointer-events: none;
        }

        .group:hover .shine-effect::after {
            transform: rotate(-45deg) translate(100%, 100%);
        }

        /* Before/After Slider */
        .comparison-slider {
            position: relative;
            overflow: hidden;
            cursor: ew-resize;
        }

        .comparison-after {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 50%;
            overflow: hidden;
            border-right: 2px solid #cdff78;
            box-shadow: 0 0 10px rgba(164, 230, 29, 0.5);
        }

        .comparison-slider .handle {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 32px;
            height: 32px;
            background: #cdff78;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #233600;
            pointer-events: none;
            z-index: 20;
            box-shadow: 0 0 15px rgba(164, 230, 29, 0.8);
        }

        /* Category Filter Active State */
        .filter-btn.active {
            background-color: #a4e61d;
            color: #131f00;
            border-color: #a4e61d;
        }

        /* faq */

         .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
            opacity: 0;
        }
        .accordion-item.active .accordion-content {
            max-height: 500px;
            padding-top: 16px;
            opacity: 1;
        }
        .accordion-item.active {
            border-color: #cdff78;
            box-shadow: 0 0 20px rgba(164, 230, 29, 0.1);
            animation: pulse-border 2s infinite ease-in-out;
        }
        @keyframes pulse-border {
            0% { border-color: rgba(205, 255, 120, 0.3); box-shadow: 0 0 10px rgba(164, 230, 29, 0.05); }
            50% { border-color: rgba(205, 255, 120, 1); box-shadow: 0 0 25px rgba(164, 230, 29, 0.2); }
            100% { border-color: rgba(205, 255, 120, 0.3); box-shadow: 0 0 10px rgba(164, 230, 29, 0.05); }
        }
        .accordion-item.active .icon-rotate {
            transform: rotate(180deg);
            color: #cdff78;
        }
        
        .fade-in-up {
            opacity: 0;
            transform: translateY(30px);
            animation: fadeInUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
        }
        
        @keyframes fadeInUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }


        /* contact-us */
        /* Floating Label & Neon Glow Animations */
        .form-group {
            position: relative;
        }
        .form-input:focus {
            box-shadow: 0 0 15px rgba(164, 230, 29, 0.2), inset 0 -2px 0 0 #cdff78;
        }
        .form-label {
            position: absolute;
            left: 0;
            top: 12px;
            pointer-events: none;
            transition: all 0.3s ease;
            transform-origin: left top;
        }
        .form-input:focus ~ .form-label,
        .form-input:not(:placeholder-shown) ~ .form-label {
            transform: translateY(-24px) scale(0.85);
            color: #cdff78;
        }

        /* Pulse Ripple for Map */
        @keyframes ripple {
            0% { transform: scale(1); opacity: 0.8; }
            100% { transform: scale(2.5); opacity: 0; }
        }
        .ripple-effect::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 9999px;
            background: #a4e61d;
            animation: ripple 2s infinite ease-out;
            z-index: -1;
        }

        /* Reveal Animations */
        .reveal {
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* High Tech Button State */
        .btn-transmitting .btn-content {
            display: none;
        }
        .btn-transmitting .btn-loading {
            display: flex;
        }
        @keyframes scan {
            0% { left: -100%; }
            100% { left: 100%; }
        }
        .scan-line {
            position: absolute;
            height: 100%;
            width: 50%;
            top: 0;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
            animation: scan 1.5s infinite linear;
        }

        /* contact */
        .accordion-content{
    max-height:0;
    overflow:hidden;
    opacity:0;
    transition:all .4s ease;
}

.accordion-item.active .accordion-content{
    max-height:300px;
    opacity:1;
}

.accordion-item.active .icon-rotate{
    transform:rotate(180deg);
}

.accordion-item.active{
    border-color:#cdff78;
    box-shadow:0 0 20px rgba(164,230,29,.15);
}

.before-after-card{
    position:relative;
    cursor:pointer;
}

/* image slider */

.before-image,
.after-image{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    transition:all .7s ease;
}

.before-image{
    background-image:url('https://lh3.googleusercontent.com/aida-public/AB6AXuD10NHt4-mRhrW1VPv8fQMyAi7H8KMGF6E8Yen-UyzJ0RuILwLyX5jiiSgkx7rjjihsU8U1ELgOU00Fg8DKaju5FNDYEqYHHqGrwufWkUYBADMat1YcjU3WuKWharLpvykWCNWGt2YV_iUt3ktg-FEcnzFlu9ERheozsqEpIzNPwxthG8ik-Nqc6e8S3zqWENHRHKBjHfaafacjsMbLXXw2_vZv-YR6u4ZdSDvLEwj-Yd90IJ8zugSSTxbJl0-YNs1P83n9u7ZnTHg');
    filter:grayscale(1) brightness(.5);
    opacity:1;
}

.after-image{
    background-image:url('https://lh3.googleusercontent.com/aida-public/AB6AXuCgXERhqcYEIyQXSMvgNHK4fxzUOBkIvemnmlabh_Qpd8i0mbd58TR9D0YImudrVJt0Q8r2mZQi6HPXlw-HLWdJbSieNVAPr65ONmriBnpGtjUtDMNxLFcEGQNAAAzwidFL9Yvy1AB3XdsyGGewc0lkbidV0hvTMm7_7WdM7lD15YAnAis9VgGSBkETXN_er6F0yT2r3ZNHa4Bx2PhfD0ehmGe2VOYbtO5LLtGh9RZ8V7kmRfy4_TQKNRnW0-sbpVcmVY5pjLWKldo');
    opacity:0;
    transform:scale(1.05);
}

.before-after-card:hover .before-image{
    opacity:0;
    transform:scale(1.05);
}

.before-after-card:hover .after-image{
    opacity:1;
    transform:scale(1);
}

.after-label{
    opacity:0;
    transition:.4s;
}

.before-after-card:hover .after-label{
    opacity:1;
}

.before-after-card:hover .before-label{
    opacity:0;
}

.before-after-card,
.before-image,
.after-image{
    width:100%;
    height:100%;
}


/* preloader */

/* =========================
   PRELOADER
========================= */

#preloader{
    position:fixed;
    inset:0;
    z-index:99999;
    background:#131313;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.6s ease;
}

#preloader.hide{
    opacity:0;
    visibility:hidden;
}

.loader-content{
    text-align:center;
}

.loader-logo{
    width:120px;
    margin:auto;
    animation:pulseLogo 1.8s infinite;
}

.loader-bar{
    width:260px;
    height:6px;
    background:#2a2a2a;
    margin:25px auto 15px;
    overflow:hidden;
    border-radius:50px;
}

.loader-progress{
    height:100%;
    width:0%;
    background:linear-gradient(
        90deg,
        #99da02,
        #cdff78
    );
    animation:loading 2s ease forwards;
}

.loader-text{
    color:#cdff78;
    font-size:12px;
    letter-spacing:2px;
    font-family:'JetBrains Mono', monospace;
}

@keyframes loading{
    from{
        width:0%;
    }
    to{
        width:100%;
    }
}

@keyframes pulseLogo{
    0%,100%{
        transform:scale(1);
        filter:drop-shadow(0 0 0 rgba(164,230,29,.3));
    }

    50%{
        transform:scale(1.05);
        filter:drop-shadow(0 0 15px rgba(164,230,29,.8));
    }
}