.quick-access {
    --ink: #2B2A33;
    --muted: #726F80;
    /* Pastel pair per card: soft tint background (a→b) + a deeper "ink" shade
     from the same family for the icon badge, CTA pill and hover shadow —
     so text stays readable at AA contrast on a light background. */
    --g1-a: #D6F3E3;
    --g1-b: #BDEBD3;
    --g1-ink: #1D7A4C; /* c1 — mint    e.g. Student Profile Registration */
    --g2-a: #FDE6C9;
    --g2-b: #FCD8A8;
    --g2-ink: #B4661A; /* c2 — peach   e.g. View Result */
    --g3-a: #D3EAF6;
    --g3-b: #B9DEF0;
    --g3-ink: #1E6E96; /* c3 — sky     e.g. Student Login */
    --g4-a: #E9E1FB;
    --g4-b: #DBCDF8;
    --g4-ink: #6941C6; /* c4 — lilac   e.g. Registration Receipt */
    --g5-a: #FBDDE4;
    --g5-b: #F8C6D2;
    --g5-ink: #B23A57; /* c5 — blush   e.g. Alumni Portal */
    --g6-a: #DEE3FA;
    --g6-b: #CBD3F6;
    --g6-ink: #3B4CA8; /* c6 — periwinkle e.g. Admin Login */
    background: linear-gradient(135deg, #FFFBF3 0%, #FDF6EC 50%, #F6FAF1 100%);
    padding: 64px 0 72px;
    position: relative;
    overflow: hidden;
}

    .quick-access::before,
    .quick-access::after {
        content: '';
        position: absolute;
        border-radius: 50%;
        filter: blur(10px);
        opacity: .55;
        z-index: 0;
        pointer-events: none;
    }

    .quick-access::before {
        width: 420px;
        height: 420px;
        top: -190px;
        left: -160px;
        background: radial-gradient(circle at 30% 30%, var(--g1-b), transparent 70%);
    }

    .quick-access::after {
        width: 380px;
        height: 380px;
        bottom: -190px;
        right: -140px;
        background: radial-gradient(circle at 60% 40%, var(--g2-b), transparent 70%);
    }

    .quick-access .qa-heading {
        position: relative;
        z-index: 1;
        text-align: center;
        max-width: 620px;
        margin: 0 auto 44px;
    }

        .quick-access .qa-heading .eyebrow {
            display: inline-block;
            font-weight: 800;
            font-size: .75rem;
            letter-spacing: .14em;
            text-transform: uppercase;
            color: var(--g1-ink);
            background: var(--g1-a);
            padding: 6px 16px;
            border-radius: 999px;
            margin-bottom: 16px;
        }

        .quick-access .qa-heading h2 {
            font-size: 2.05rem;
            font-weight: 900;
            letter-spacing: -0.02em;
            margin: 0 0 10px;
            color: var(--ink);
        }

        .quick-access .qa-heading p {
            margin: 0;
            color: var(--muted);
            font-size: 1rem;
            line-height: 1.6;
        }

    .quick-access .qa-grid {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 24px;
    }

@media (max-width:900px) {
    .quick-access .qa-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media (max-width:560px) {
    .quick-access .qa-grid {
        grid-template-columns: 1fr;
    }
}

.quick-access .qa-card {
    background: linear-gradient(155deg, var(--accent-a), var(--accent-b));
    border-radius: 22px;
    padding: 30px 26px 28px;
    text-decoration: none;
    color: var(--ink);
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: 0 10px 22px -12px var(--accent-shadow, rgba(43,42,51,0.18));
    transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease;
    position: relative;
    overflow: hidden;
}

    .quick-access .qa-card::before {
        content: '';
        position: absolute;
        top: -40px;
        right: -40px;
        width: 140px;
        height: 140px;
        border-radius: 50%;
        background: rgba(255,255,255,0.35);
        pointer-events: none;
    }

    .quick-access .qa-card:hover, .quick-access .qa-card:focus-visible {
        transform: translateY(-8px) scale(1.015);
        box-shadow: 0 20px 36px -14px var(--accent-shadow, rgba(43,42,51,0.28));
    }

    .quick-access .qa-card:focus-visible {
        outline: 3px solid var(--accent-ink, var(--ink));
        outline-offset: 3px;
    }

.quick-access .qa-icon {
    position: relative;
    z-index: 1;
    width: 58px;
    height: 58px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-ink, var(--ink));
    margin-bottom: 20px;
    transition: transform .3s ease;
}

.quick-access .qa-card:hover .qa-icon, .quick-access .qa-card:focus-visible .qa-icon {
    transform: scale(1.08) rotate(-4deg);
}

.quick-access .qa-icon img {
    height: 28px;
    width: 28px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.quick-access .qa-icon svg {
    width: 28px;
    height: 28px;
    stroke: #fff;
}

.quick-access .qa-title {
    position: relative;
    z-index: 1;
    font-weight: 800;
    font-size: 1.08rem;
    line-height: 1.35;
    color: var(--ink);
    margin: 0 0 6px;
}

.quick-access .qa-desc {
    position: relative;
    z-index: 1;
    font-size: .875rem;
    line-height: 1.55;
    color: var(--accent-ink, var(--muted));
    opacity: .85;
    margin: 0 0 18px;
}

.quick-access .qa-go {
    position: relative;
    z-index: 1;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 800;
    font-size: .825rem;
    color: #fff;
    background: var(--accent-ink, var(--ink));
    padding: 7px 14px;
    border-radius: 100px;
    width: fit-content;
    transition: opacity .28s ease;
}

.quick-access .qa-card:hover .qa-go, .quick-access .qa-card:focus-visible .qa-go {
    opacity: .88;
}

.quick-access .qa-go svg {
    width: 15px;
    height: 15px;
    stroke: #fff;
    transition: transform .28s ease;
}

.quick-access .qa-card:hover .qa-go svg, .quick-access .qa-card:focus-visible .qa-go svg {
    transform: translateX(5px);
}

.quick-access .c1 {
    --accent-a: var(--g1-a);
    --accent-b: var(--g1-b);
    --accent-ink: var(--g1-ink);
    --accent-shadow: rgba(29,122,76,0.28);
}

.quick-access .c2 {
    --accent-a: var(--g2-a);
    --accent-b: var(--g2-b);
    --accent-ink: var(--g2-ink);
    --accent-shadow: rgba(180,102,26,0.28);
}

.quick-access .c3 {
    --accent-a: var(--g3-a);
    --accent-b: var(--g3-b);
    --accent-ink: var(--g3-ink);
    --accent-shadow: rgba(30,110,150,0.28);
}

.quick-access .c4 {
    --accent-a: var(--g4-a);
    --accent-b: var(--g4-b);
    --accent-ink: var(--g4-ink);
    --accent-shadow: rgba(105,65,198,0.28);
}

.quick-access .c5 {
    --accent-a: var(--g5-a);
    --accent-b: var(--g5-b);
    --accent-ink: var(--g5-ink);
    --accent-shadow: rgba(178,58,87,0.28);
}

.quick-access .c6 {
    --accent-a: var(--g6-a);
    --accent-b: var(--g6-b);
    --accent-ink: var(--g6-ink);
    --accent-shadow: rgba(59,76,168,0.28);
}

/* Fallback: if AccentClass is ever missing/blank from the data source,
   don't render a card with no background. */
.quick-access .qa-card:not(.c1):not(.c2):not(.c3):not(.c4):not(.c5):not(.c6) {
    --accent-a: var(--g1-a);
    --accent-b: var(--g1-b);
    --accent-ink: var(--g1-ink);
}

/* Click "pop" + ripple — triggered by quick-access.js on click/Enter/Space,
   plays briefly before the JS navigates to NavigateUrl. */
.quick-access .qa-card.qa-pop {
    animation: qaCardPop .32s ease;
}

@keyframes qaCardPop {
    0% {
        transform: translateY(0) scale(1);
    }

    40% {
        transform: translateY(-3px) scale(.97);
    }

    70% {
        transform: translateY(-9px) scale(1.03);
    }

    100% {
        transform: translateY(-8px) scale(1.015);
    }
}

.quick-access .qa-ripple {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(255,255,255,0.55);
    width: 10px;
    height: 10px;
    transform: translate(-50%,-50%) scale(0);
    animation: qaRipple .55s ease-out forwards;
}

@keyframes qaRipple {
    to {
        transform: translate(-50%,-50%) scale(26);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .quick-access .qa-card, .quick-access .qa-icon, .quick-access .qa-go svg {
        transition: none !important;
        transform: none !important;
    }

        .quick-access .qa-card.qa-pop {
            animation: none !important;
        }

    .quick-access .qa-ripple {
        display: none !important;
    }
}

@media (max-width:767px) {
    .quick-access {
        padding: 44px 0 52px;
    }

        .quick-access .qa-heading h2 {
            font-size: 1.6rem;
        }
}