.key-activities-page[data-v-99604cbf] {
    min-height: 100vh;
    background: linear-gradient(180deg, #4da6ff 0%, #80c0ff 50%, #b3d9ff 100%);
    position: relative;
    overflow: hidden;
    padding-top: 20px
}

.key-activities-page .zyzzd-crumbs-bar[data-v-99604cbf] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    backdrop-filter: blur(10px);
    z-index: 10;
    padding: 20px 0
}

.key-activities-page .zyzzd-crumbs-bar .zyzzd-crumbs[data-v-99604cbf] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px
}

.key-activities-page[data-v-99604cbf]:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><defs><pattern id="dots" x="0" y="0" width="80" height="80" patternUnits="userSpaceOnUse"><circle cx="40" cy="40" r="2" fill="rgba(255,255,255,0.15)"/></pattern></defs><rect width="80" height="80" fill="url(%23dots)"/></svg>');
    opacity: .6
}

.activities-section[data-v-99604cbf] {
    padding: 60px 0 50px;
    position: relative;
    z-index: 1
}

.activities-section .container[data-v-99604cbf] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px
}

.activities-section .activities-grid[data-v-99604cbf] {
    display: grid;
    grid-template-columns:repeat(2, 1fr);
    gap: 50px;
    align-items: stretch
}

.activities-section .activity-card[data-v-99604cbf] {
    position: relative;
    height: 350px;
    border-radius: 24px;
    cursor: pointer;
    overflow: hidden;
    transition: all .5s cubic-bezier(.4, 0, .2, 1);
    box-shadow: 0 20px 60px #00000026;
    animation: fadeInScale-99604cbf .8s ease-out
}

.activities-section .activity-card .card-background[data-v-99604cbf] {
    position: absolute;
    inset: 0;
    transition: transform .6s cubic-bezier(.4, 0, .2, 1)
}

.activities-section .activity-card .card-content[data-v-99604cbf] {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 2
}

.activities-section .activity-card .card-content[data-v-99604cbf]:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: rgba(255, 255, 255, .3);
    transform: scaleX(0);
    transition: transform .5s ease
}

.activities-section .activity-card .card-title[data-v-99604cbf] {
    font-size: 36px;
    font-weight: 800;
    line-height: 45px;
    color: #fff;
    margin-bottom: 20px;
    letter-spacing: 3px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .2);
    transition: all .3s ease
}

.activities-section .activity-card .card-description[data-v-99604cbf] {
    font-size: 18px;
    color: #ffffffe6;
    line-height: 1.8;
    font-weight: 500;
    letter-spacing: 1px;
    margin-bottom: 30px;
    opacity: .9;
    transition: all .3s ease
}

.activities-section .activity-card .card-badge[data-v-99604cbf] {
    display: inline-block;
    padding: 10px 24px;
    background: rgba(255, 255, 255, .25);
    border: 2px solid rgba(255, 255, 255, .4);
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 2px;
    backdrop-filter: blur(8px);
    transition: all .3s ease
}

.activities-section .activity-card .hover-arrow[data-v-99604cbf] {
    position: absolute;
    bottom: 40px;
    right: 40px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .2);
    border-radius: 50%;
    opacity: 0;
    transform: translate(-20px);
    transition: all .4s ease
}

.activities-section .activity-card .hover-arrow svg[data-v-99604cbf] {
    width: 24px;
    height: 24px;
    color: #fff
}

.activities-section .activity-card.launch-ceremony .card-background[data-v-99604cbf] {
    background: linear-gradient(135deg, #97a3da 0%, #9179aa 50%, #bc75c4 100%)
}

.activities-section .activity-card.team-training .card-background[data-v-99604cbf] {
    background: linear-gradient(135deg, #4facfe 0%, #8db3b4 50%, #84e5a5 100%)
}

.activities-section .activity-card[data-v-99604cbf]:hover {
    transform: translateY(-15px) scale(1.02);
    box-shadow: 0 30px 80px #00000040
}

.activities-section .activity-card:hover .card-background[data-v-99604cbf] {
    transform: scale(1.1)
}

.activities-section .activity-card:hover .card-content[data-v-99604cbf]:before {
    transform: scaleX(1)
}

.activities-section .activity-card:hover .card-title[data-v-99604cbf] {
    transform: scale(1.05)
}

.activities-section .activity-card:hover .card-description[data-v-99604cbf] {
    opacity: 1;
    transform: translateY(-5px)
}

.activities-section .activity-card:hover .card-badge[data-v-99604cbf] {
    background: rgba(255, 255, 255, .35);
    border-color: #fff9;
    transform: scale(1.05)
}

.activities-section .activity-card:hover .hover-arrow[data-v-99604cbf] {
    opacity: 1;
    transform: translate(0)
}

.activities-section .activity-card[data-v-99604cbf]:active {
    transform: translateY(-12px) scale(.98)
}

@keyframes fadeInDown-99604cbf {
    0% {
        opacity: 0;
        transform: translateY(-40px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes fadeInUp-99604cbf {
    0% {
        opacity: 0;
        transform: translateY(40px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes fadeInScale-99604cbf {
    0% {
        opacity: 0;
        transform: scale(.9)
    }
    to {
        opacity: 1;
        transform: scale(1)
    }
}

@media (max-width: 750px) {
    .key-activities-page[data-v-99604cbf] {
        padding-top: 0
    }

    .key-activities-page .zyzzd-crumbs-bar[data-v-99604cbf], .key-activities-page .zyzzd-crumbs-bar .zyzzd-crumbs[data-v-99604cbf] {
        padding: 0 .27rem
    }

    .activities-section[data-v-99604cbf] {
        padding: .53rem 0 1.33rem
    }

    .activities-section .activities-grid[data-v-99604cbf] {
        grid-template-columns:1fr;
        gap: .53rem
    }

    .activities-section .activity-card[data-v-99604cbf] {
        height: 5.33rem;
        border-radius: .32rem
    }

    .activities-section .activity-card .card-content[data-v-99604cbf]:before {
        height: .053rem
    }

    .activities-section .activity-card .card-title[data-v-99604cbf] {
        font-size: .6rem;
        margin-bottom: .27rem;
        letter-spacing: .04rem;
        line-height: 1.3
    }

    .activities-section .activity-card .card-description[data-v-99604cbf] {
        font-size: .29rem;
        line-height: 1.6;
        letter-spacing: .01rem;
        margin-bottom: .4rem
    }

    .activities-section .activity-card .card-badge[data-v-99604cbf] {
        padding: .13rem .32rem;
        font-size: .24rem;
        letter-spacing: .03rem
    }

    .activities-section .activity-card .hover-arrow[data-v-99604cbf] {
        bottom: .53rem;
        right: .53rem;
        width: .67rem;
        height: .67rem
    }

    .activities-section .activity-card .hover-arrow svg[data-v-99604cbf] {
        width: .32rem;
        height: .32rem
    }

    .activities-section .activity-card .hover-arrow[data-v-99604cbf] {
        opacity: .8;
        transform: translate(0)
    }

    .activities-section .activity-card[data-v-99604cbf]:hover {
        transform: translateY(-.13rem) scale(1.01)
    }

    .activities-section .activity-card[data-v-99604cbf]:active {
        transform: translateY(-.11rem) scale(.99)
    }
}
