/* ----------------------------------------------------
Hero Section
---------------------------------------------------- */
section.hero {
    margin-bottom: 4rem;
    max-width: 80rem;
    margin: auto;
    padding: 0 5rem;
}


section.hero h1 {
    margin-top: 2rem;
    margin-bottom: 2rem;
    font-size: 5.5rem;
    text-align: center;
    text-shadow: 0 0 1000px var(--primary-color);
    color: var(--primary-white);
}

section.hero h1 span {
    padding: 0 5rem;
    background-color: var(--primary-bg);
    border: 4px solid var(--primary-stroke);
    text-shadow: none;
    border-radius: 5rem;
    color: var(--primary-color);
}

section.hero p {
    text-align: center;
    font-weight: 400;
    margin-bottom: 3rem;
    font-size: 1.2rem;
    color: var(--primary-white);

}

section.hero p span {
    color: var(--primary-color);
    text-shadow: 0 0 15px var(--primary-color);
    font-weight: 500;
}

/* ----------------------------------------------------
Clients Section
---------------------------------------------------- */
section.our-clients {
    padding: 5rem 5rem;
    position: relative;
}

section.our-clients .clients {
    max-width: 75rem;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1.5rem;

    margin-top: 0;
}

section.our-clients .clients .client {
    width: min-content;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

section.our-clients .clients .client img {
    height: 9rem;
    /* filter: grayscale(1110%); */
    transition: all ease 0.5s;
    border: 2px solid var(--primary-color);
    padding: 0.35rem;
    border-radius: 50rem;
}

section.our-clients .clients .client img:hover {
    filter: grayscale(0%);
    animation: floatAnimation 10s infinite alternate;

}

@keyframes floatAnimation {
    0% {
        transform: translateY(5px);
        /* Starting position */
    }

    25% {
        transform: translateY(-5px);
        /* 1st Quarter of the circle */
    }

    50% {
        transform: translateY(5px);
        /* 2nd Quarter of the circle */
    }

    75% {
        transform: translateY(-5px);
        /* 3rd Quarter of the circle */
    }

    100% {
        transform: translateY(5px);
        /* Ending position */
    }
}

section.our-clients .clients .client p {
    font-weight: 500;
    text-align: center;
    margin-top: 0;
    font-size: 1.2rem;

}


/* ----------------------------------------------------
About us Section
---------------------------------------------------- */
section.about {
    margin: 5rem 0;
    padding: 0 5rem;
}

section.about .container {
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;

}

section.about .container .img-cont {
    flex: 1;
    display: flex;
    justify-content: left;
    align-items: center;
}

section.about .container .img-cont img {
    height: 25rem;
}

section.about .container .text-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

section.about .container .text-container h2 {
    font-size: 3rem;
    color: var(--primary-color);
}

section.about .container .text-container p {
    /* font-family: "montserrat" ; */
    font-weight: 500;
    line-height: 30px;
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

section.about .container .text-container .box {
    background-color: #021A2C;
    padding: 1rem 2rem;
    border-radius: 1rem;
    width: 25rem;
}

section.about .container .text-container .box h3 {
    font-size: 1.6rem;
    color: var(--primary-color);
    margin-bottom: .75rem;
}

section.about .container .text-container .box p {
    /* font-family: "montserrat"; */
    line-height: 25px;
    font-size: 1rem;
    margin-bottom: 0;
}

section.about .container .text-container .box a {
    padding: 0.5rem 1rem;
    display: inline-block;
    margin-top: 1rem;
    font-weight: 600;
}


/* ----------------------------------------------------
Case Study Section
---------------------------------------------------- */

section.case {
    padding: 5rem 5rem 0 5rem;
    margin-top: 5rem !important;
    border-top: 0.5px solid grey;

}

section.case .container {
    box-sizing: border-box;
    max-width: 80rem;
    margin: auto;
    margin-bottom: 2rem;
    border: 2px solid var(--primary-stroke);
    border-radius: 2rem;
    padding: 5rem 2rem 2rem 2rem;

}

section.case .container a.pdf {
    display: none;
}

@media(max-width: 1275px) {
    section.case .container a {
        display: none;
    }

    section.case .container a.pdf {
        display: block;
    }


}

section.case .container pre {
    text-align: left;
    line-height: 120%;
    font-weight: 500;
    font-size: 3.5rem;
    position: relative;
}

section.case .container img {
    height: 10rem;
    position: absolute;
    top: -3.5rem;
    left: 23rem;
}

section.case .container pre span {
    font-size: 4.5rem;
    font-weight: 700;
}

/* Client Case Study Boxes */
section.case .container .case-study-clients-container {
    background-color: var(--secondary-bg);
    padding: 2rem 3rem 2rem 2rem;
    border-radius: 1rem;
    border: 2px solid var(--primary-stroke);
    margin-top: 1.5rem !important;
}

section.case .case-study-client {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

section.case .case-study-client .txt-cont h2 {
    color: var(--primary-color);
    font-size: 2rem;
}

section.case .case-study-client .txt-cont p {
    font-size: 1.2rem;
    font-weight: 500;
}

section.case .case-study-client i {
    font-size: 2rem;
    transform: rotate(45deg);
}

/* --------
On Hover
-------- */
section.case .container .case-study-clients-container:hover {
    transition: all 1s;
    background-color: var(--primary-color);
}

section.case .container .case-study-clients-container:hover .case-study-client .txt-cont h2 {
    color: var(--primary-bg);
    transition: all 1s;
}

section.case .container .case-study-clients-container:hover .case-study-client .txt-cont p {
    color: var(--primary-bg);
    transition: all 1s;
}

section.case .container .case-study-clients-container:hover .case-study-client i {
    color: var(--primary-bg);
    transition: all 1s;
}

section.case .container .case-study-clients-container:hover .case-study-client .txt-cont p {
    color: var(--secondary-bg) !important;
}


/* ----------------------------------------------------
Problem Solution
---------------------------------------------------- */

section.prob-sol {
    padding: 5rem 5rem 0 5rem;
    margin-top: 5rem !important;
    border-top: 0.5px solid grey;

}

section.prob-sol .container {
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;

    overflow: hidden;
}

section.prob-sol .box {
    flex: 1;
    padding: 1rem;
    background-color: var(--secondary-bg);
    border: 3px solid var(--primary-stroke);
    border-radius: 1rem;
}

section.prob-sol .box .heading-box {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 4rem;
    background-color: rgb(255, 120, 41);
    border-radius: .5rem;
    margin-bottom: 2rem;
}

section.prob-sol .box .heading-box.sol {
    background-color: var(--primary-color);
}

section.prob-sol .box .heading-box p {
    font-size: 1.5rem;
    font-weight: 600;
}

section.prob-sol .box .heading-box.sol p {
    color: var(--primary-bg);
}

section.prob-sol .box .txt-cont {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    height: max-content;
    gap: 1rem;
}

section.prob-sol .box .txt-cont .problem-sol-line {
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 1rem;
}

section.prob-sol .box .txt-cont .problem-sol-line .tick-cross {
    min-height: 3rem;
    min-width: 3rem;
    border-radius: 50%;
    background-color: rgb(255, 120, 41);
    box-shadow: inset 0 0 4px black;
    display: flex;
    justify-content: center;
    align-items: center;
}

section.prob-sol .box.sol .txt-cont .problem-sol-line .tick-cross {
    background-color: var(--primary-color);
}

section.prob-sol .box .txt-cont .problem-sol-line .tick-cross i {
    font-size: 1.7rem;
    color: var(--primary-bg);
}

section.prob-sol .box .txt-cont .problem-sol-line p {
    font-size: 1.2rem;
    font-weight: 500;
}

/* ----------------------------------------------------
Results Section
---------------------------------------------------- */
section.results {
    padding: 5rem 5rem;
    margin-top: 5rem !important;
    position: relative;
    max-width: 65rem;
    margin: auto;

}


section.results .container {
    box-sizing: border-box !important;
    margin: auto;
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;


}

section.results .container .result {
    display: flex;
    flex-direction: column;
    align-items: center;
}

section.results .container .result h3 {
    color: var(--primary-color);
    font-size: 5rem;

}

section.results .container .result p {
    text-align: center;
    font-family: "poppins";
    font-size: 1.2rem;
    margin-top: -.5rem;
}

/* Glow */

section.results::before {
    content: '';
    /* Creates an empty pseudo-element for the glow effect */
    position: absolute;
    /* Positions the glow effect relative to the section */
    top: 0;
    /* Positions the pseudo-element to start at the top of the section */
    left: 0;
    /* Positions the pseudo-element to start at the left of the section */
    width: 100%;
    /* Matches the width of the section */
    height: 100%;
    /* Matches the height of the section */
    border-radius: 50%;
    /* Matches the oval shape of the section */
    box-shadow: inset 0 0 20px var(--primary-bg);
    /* Applies an inner glowing effect using the primary color */
    z-index: 0;
    /* Places the glow effect inside the section */
    background-color: var(--primary-color);
    opacity: 7%;
    filter: blur(3rem);
    transition: all 1s;
}

/* ----------------------------------------------------
Expertise Section
---------------------------------------------------- */


section.expertise {
    padding: 5rem 5rem 0 5rem;
    margin-top: 5rem !important;
    border-top: 0.5px solid grey;

}

section.expertise .container {

    max-width: 80rem;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(1, 1fr);
    gap: 1.5rem;

}

section.expertise .container .service {
    background-color: var(--secondary-bg);
    border: 3px solid var(--primary-stroke);
    padding: 1.5rem;
    overflow: hidden;
    border-radius: 1rem;
}

section.expertise .container .service .img-cont {
    width: 100%;
    height: 15rem;
    overflow: hidden;
    margin-bottom: 1rem;
    border-radius: 1rem;

}

section.expertise .container .service img {
    height: 100%;
}

section.expertise .container .service h2 {
    font-size: 1.8rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
}

section.expertise .container .service p {
    /* font-family: "montserrat"; */
    font-size: 1.2rem;
    line-height: 130%;
}


/* /* ----------------------------------------------------
Portfolio Section
---------------------------------------------------- */

.portfolio pre {
    width: max-content;
    margin: auto;
    font-family: "poppins";
    font-size: 3.75rem;
    font-weight: 600;
    line-height: 140%;
    height: max-content;
    margin-top: 5rem;
    margin-bottom: 3rem;
}

.portfolio pre span {
    font-size: 5rem;
    font-weight: 700;
    color: var(--primary-color);
}

/* --------------
Videos 
-------------- */
.portfolio .portfolio-vids {
    padding: 0 5rem;
    max-width: 80rem;
    margin: auto;
    height: max-content;
    display: flex;
    justify-content: space-between;
    gap: 2.5rem;
    /* flex-wrap: wrap; added this for better responsiveness */
}

.portfolio .portfolio-vid {
    margin: auto;
    width: 15rem;
    border-radius: 1rem;
    border: 2px solid var(--primary-stroke);
    padding: 0.5rem;
    background-color: black;
}

/* --- Wistia Player Responsive Fix --- */
wistia-player {
    /* width: 100% !important; */
    /* max-width: 100% !important; */
    height: auto !important;
    /* aspect-ratio: 16 / 9 !important; */
    /* display: block; */
    border-radius: 0.75rem;
    overflow: hidden;
}

.wistia_responsive_wrapper {
    /* max-width: 100% !important; */
    height: auto !important;
}

/* Optional: Adjust for small screens */
@media screen and (max-width: 768px) {
    .portfolio .portfolio-vids {
        padding: 0 1rem;
        /* reduce crazy padding */
        flex-direction: column;
        align-items: center;
    }

    .portfolio .portfolio-vid {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    wistia-player {
        width: 100% !important;
        /* aspect-ratio: 9 / 16 !important; */
    }
}


.portfolio .portfolio-vid iframe {
    border-radius: .75rem;
}

.portfolio .portfolio-vids .first-left-one {
    position: relative;
    top: -13rem;
    transform: rotate(-5deg);
}

.portfolio .portfolio-vids .second-left-one {
    position: relative;
    top: -1rem;
    transform: rotate(-3deg);
}

.portfolio .portfolio-vids .second-right-one {
    position: relative;
    top: -1rem;
    transform: rotate(3deg);
}

.portfolio .portfolio-vids .first-right-one {
    position: relative;
    top: -13rem;
    transform: rotate(5deg);
}

.portfolio a {
    width: max-content;
    margin: auto;
    margin-top: 4rem;
}

/* Landscape  */
.portfolio .landescape-vids {
    max-width: 80rem;
    margin: 5rem auto;
    display: flex;
    gap: 2rem;
    padding: 0 2rem;
    flex-wrap: wrap;
}

.portfolio .landescape-vids .landescape {
    flex: 1;
}

/* Other Videos  */
.portfolio .other-vids {
    max-width: 80rem;
    margin: auto;
    height: max-content;
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    margin-top: 5rem;
    margin-bottom: 5rem;
}


/* -----------------------------------------
Testimonial Section
----------------------------------------- */
section.testimonials {
    padding: 5rem 5rem 0 5rem;
    margin-top: 5rem !important;
    border-top: 0.5px solid grey;
}

section.testimonials .container {
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;


}

section.testimonials .container .testimonial {
    flex: 1;
    background-color: var(--secondary-bg);
    border: 3px solid var(--primary-stroke);
    padding: 1.5rem 1.5rem 2.5rem 1.5rem;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;

}

section.testimonials .container .testimonial p {
    /* font-family: "montserrat"; */
    font-weight: 600;
    font-size: 1.2rem;
    line-height: 150%;
    margin-bottom: 2rem;
    font-style: italic;
    z-index: 5;
}

section.testimonials .container .testimonial .abt-client {
    display: flex;
    align-items: center !important;
    gap: 1rem;
    z-index: 5;

}

section.testimonials .container .testimonial .abt-client img {
    height: 4.5rem;
    border-radius: 50%;
    border: 3px solid var(--primary-stroke);

}

section.testimonials .container .testimonial .abt-client div h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary-color);
    text-shadow: 0 0 20px var(--primary-color);
    margin-bottom: 0.25rem;
}

section.testimonials .container .testimonial .abt-client p {
    font-size: .9rem;
    margin-bottom: 0;
    font-style: normal;
    padding-left: 1px;
}

section.testimonials .container .testimonial::before {
    content: '“';
    /* Double quote symbol */
    font-size: 15rem;
    /* Adjust size as needed */
    line-height: 0;
    color: var(--primary-color);
    /* Adjust color as needed */
    position: absolute;
    bottom: 5.75rem;
    /* Adjust positioning as needed */
    right: 0;
    /* Adjust positioning as needed */
    font-family: "Lucida Console";
    /* Choose a font that has a nice double quote symbol */
    font-weight: 900;
    z-index: 0;
    /* Ensure it's behind the text */
    transform: rotate(180deg);
}

/* -----------------------------------------
FAQs
----------------------------------------- */
section.qns-ans {
    transition: all ease 0.4s;
    padding: 0 5rem;

    margin: 5rem auto;

    /* border-top: 0.5px solid grey; */

}

section.qns-ans .faq {
    max-width: 80rem;
    margin: auto;
    border: 3px solid var(--primary-stroke);
    margin-bottom: 2rem;
    border-radius: 1rem;
    transition: all 0.7s;
    padding: 2rem 3rem 3rem 3rem;
    transition: all ease 0.8s;

}

section.qns-ans .faq.active {
    border: 2px solid var(--primary-color);

}

.accordion {
    background-color: transparent;
    color: rgba(255, 255, 255);
    cursor: pointer;
    font-size: 1.5rem;
    width: 100%;
    border: none;
    outline: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    transition: all ease 0.4s;
    text-shadow: none;


}

.accordion i {
    font-size: 1.6rem;

}


.pannel {
    background-color: transparent;
    overflow: hidden;
    background-color: transparent;
    display: none;
    padding-top: 2rem;
    transition: all ease 0.4s;

}

.pannel p {
    color: rgba(255, 255, 255);
    font-size: 1.2rem;
    line-height: 1.4;
    font-weight: 400;
    transition: all ease 0.4s;
    text-shadow: none;

}


/* ----------------------------------------------------
Team Section
---------------------------------------------------- */

section.team {
    padding: 5rem 5rem 0 5rem;
    margin-top: 5rem !important;
    border-top: 0.5px solid grey;

}

section.team .container {
    max-width: 80rem;
    margin: auto;
    display: flex;
    gap: 1.5rem;
}

section.team .container .team-member {
    flex: 1;
    height: 18rem;
    background-color: var(--secondary-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    padding: 2rem 1rem .5rem 1rem;
    border-radius: 1rem;
    overflow: hidden;
    border: 3px solid var(--primary-stroke);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

}

section.team .container .team-member h2 {
    font-family: "jost";
    font-size: 1.7rem;
    color: var(--primary-color);
    text-shadow: 2px 2px 10px black;
    z-index: 1;
}

section.team .container .team-member p {
    font-weight: 400;
    text-align: center;
    font-size: .9rem;
    z-index: 1;
}

section.team .container .team-member p span {
    color: var(--primary-color);
    text-shadow: 0 0 2px var(--primary-color);
    font-weight: 500;
    z-index: 1;

}

section.team .container .team-member .icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .75rem;
    z-index: 1;

}

section.team .container .team-member img {
    height: 2.5rem;
    border-radius: 50%;
    border: 2px solid var(--primary-stroke);

    box-shadow: 0 0 10px var(--primary-color);

    margin-top: 1rem;
}

section.team .container .member-1 {
    background-image: url('/Images/Team/Sufyan.png');
    position: relative;
}

section.team .container .member-2 {
    background-image: url('/Images/Team/Uxair.png');
    position: relative;
}

section.team .container .member-3 {
    background-image: url('/Images/Team/Rehmat.jpg');
    position: relative;
}

section.team .container .member-4 {
    background-image: url('/Images/Team/Yasir.png');
    position: relative;
}

.team-member::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.85) 25%, rgba(0, 0, 0, 0) 45%);
    z-index: 0;
}



/*--------------------------
Book a Call Section
-----------------------------*/
.book-a-call {
    margin: 5rem 0;
    padding: 0 5rem;
}

.book-a-call .container {
    border: 2px solid var(--primary-stroke);
    max-width: 80rem;
    margin: auto;
    border-radius: 2rem;
    padding: 2rem 3rem 3rem 3rem;
    box-sizing: border-box;
}

.book-a-call .container img {
    height: 5rem;
    margin-bottom: 1rem;
}

.book-a-call .container h2 {
    text-align: left;
    font-size: 2.5rem;
    margin-bottom: .5rem;
}

.book-a-call .container p {
    font-size: 1.2rem;
    color: var(--primary-color);
    margin-bottom: 3rem;
    font-weight: 500;
    text-shadow: 2px 2px 20px var(--primary-color);
}

.book-a-call .container a {
    display: inline;
    font-size: 1rem;
}

.book-a-call .container a.filled-cta {
    margin-right: 1rem;

}

/* Floating neon background dots */
.floating-dot {
    position: absolute;
    border-radius: 50%;
    background: #000(0, 255, 100, 0.4);
    filter: blur(3px);
    animation: float 10s infinite ease-in-out;
}

@keyframes float {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0.6;
    }

    50% {
        transform: translateY(-100px) translateX(50px);
        opacity: 1;
    }

    100% {
        transform: translateY(0) translateX(0);
        opacity: 0.6;
    }
}

/* Background animation container */
.bg-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

/* Optional glowing grid effect (extra touch) */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: radial-gradient(rgba(0, 0, 0, 0.3) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: float 6s infinite ease-in-out;
    filter: blur(1px);
    z-index: -1;
}

<script> // Create multiple floating dots
const bg=document.querySelector(".bg-animation");

for (let i=0; i < 25; i++) {
    const dot=document.createElement("div");
    dot.classList.add("floating-dot");
    dot.style.width=Math.random() * 8+4+"px";
    dot.style.height=dot.style.width;
    dot.style.top=Math.random() * 100+"%";
    dot.style.left=Math.random() * 100+"%";
    dot.style.animationDuration=Math.random() * 8+5+"s";
    bg.appendChild(dot);
}

</script>* Keep original portfolio margin */ section.portfolio pre {
    margin-bottom: 5rem;
}

/* === Neon Background + Floating Dots === */
body {
    position: relative;
    background: #000;
    00 overflow-x: hidden;
}

.bg-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.floating-dot {
    position: absolute;
    border-radius: 50%;
    background: rgba(0, 255, 42, 0.655);
    filter: blur(3px);
    animation: float 10s infinite ease-in-out;
}

@keyframes float {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0.6;
    }

    50% {
        transform: translateY(-100px) translateX(50px);
        opacity: 1;
    }

    100% {
        transform: translateY(0) translateX(0);
        opacity: 0.6;
    }

    .affiliate-section {
        text-align: center;
        margin: 80px 0;
    }

    /* === Affiliate Button Styling === */
    .affiliate-section {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 60px 0;
    }

    .affiliate-link {
        --neon: #00ff6a;
        --neon-dark: #06d055;
        display: inline-block;
        text-decoration: none;
        font-weight: 700;
        font-size: clamp(18px, 2.5vw, 26px);
        letter-spacing: 0.5px;
        color: #03120b;
        padding: 20px 45px;
        border-radius: 18px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.9));
        position: relative;
        z-index: 1;
        box-shadow: 0 6px 20px rgba(0, 255, 106, 0.12);
        transition: transform 0.18s ease, box-shadow 0.18s ease;
        cursor: pointer;
    }

    .affiliate-link::before {
        content: "";
        position: absolute;
        inset: -6px;
        background: linear-gradient(90deg, rgba(0, 255, 106, 0.18), rgba(0, 255, 170, 0.10), rgba(0, 255, 106, 0.18));
        filter: blur(12px);
        z-index: -2;
        border-radius: 22px;
        opacity: 0.9;
        animation: pulseGlow 2.8s ease-in-out infinite;
    }

    .affiliate-link::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 18px;
        padding: 2px;
        background: linear-gradient(90deg, rgba(0, 255, 106, 0.05), rgba(0, 255, 106, 0.02));
        z-index: -1;
        pointer-events: none;
    }

    .affiliate-link:hover {
        transform: translateY(-4px) scale(1.02);
        box-shadow: 0 18px 40px rgba(0, 255, 106, 0.18);
    }

    .affiliate-link:active {
        transform: translateY(-1px) scale(0.99);
    }

    .affiliate-link .icon {
        display: inline-block;
        vertical-align: middle;
        margin-right: 14px;
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background: linear-gradient(180deg, var(--neon), var(--neon-dark));
        box-shadow: 0 6px 18px rgba(0, 255, 106, 0.3);
        color: #02120b;
        font-weight: 900;
        text-align: center;
        line-height: 36px;
        font-size: 18px;
    }

    @keyframes pulseGlow {
        0% {
            filter: blur(8px);
            opacity: .85;
            transform: scale(1);
        }

        50% {
            filter: blur(18px);
            opacity: .55;
            transform: scale(1.02);
        }

        100% {
            filter: blur(8px);
            opacity: .85;
            transform: scale(1);
        }
    }