.wcu-card-container {
    --card-bg-normal: #F4F8FB;
    --card-bg-hover: #465568;
    --icon-bg-normal: #465568;
    --icon-bg-hover: #ffffff;
    --icon-color-normal: #ffffff;
    --icon-color-hover: #34566E;
    --title-color-normal: #111827;
    --title-color-hover: #ffffff;
    --desc-color-normal: #4B6076;
    --desc-color-hover: #ffffff;
    --transition-duration: 0.4s;
}

/* Card Base Styles */
.wcu-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 340px;
    background-color: var(--card-bg-normal);
    border-radius: 32px;
    padding: 32px;
    box-sizing: border-box;
    cursor: pointer;
    transition: all var(--transition-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* Glassmorphism Effect */
.wcu-card.glass-effect {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Icon Box Styles */
.wcu-icon-box {
    position: absolute;
    top: 32px;
    right: 32px;
    width: 56px;
    height: 56px;
    background-color: var(--icon-bg-normal);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-duration) ease;
    z-index: 2;
}

.wcu-icon-box i,
.wcu-icon-box svg,
.wcu-icon-box img,
.wcu-icon-box em {
    width: 28px;
    height: 28px;
    font-size: 28px;
    line-height: 1;
    color: var(--icon-color-normal);
    stroke: var(--icon-color-normal);
    fill: currentColor; /* Better for FA SVGs */
    transition: all var(--transition-duration) ease;
    object-fit: contain;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wcu-icon-box i::before {
    font-size: 28px;
}

.wcu-icon-box svg * {
    stroke: inherit;
    fill: inherit;
}

.wcu-icon-box svg path {
    stroke: inherit;
    fill: inherit;
}

/* Text Styles */
.wcu-text-content {
    margin-top: auto;
    z-index: 2;
}

.wcu-title {
    font-size: 26px;
    font-weight: 600;
    color: var(--title-color-normal);
    line-height: 1.3;
    margin: 0 0 16px 0;
    transition: color var(--transition-duration) ease;
}

.wcu-description {
    font-size: 15px;
    color: var(--desc-color-normal);
    line-height: 1.6;
    margin: 0;
    transition: color var(--transition-duration) ease;
}

/* ==============================
   HOVER EFFECTS
   ============================== */

.wcu-card:hover {
    background-color: var(--card-bg-hover);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.wcu-card:hover .wcu-icon-box {
    background-color: var(--icon-bg-hover);
    transform: scale(1.1);
}

.wcu-card:hover .wcu-icon-box i,
.wcu-card:hover .wcu-icon-box svg,
.wcu-card:hover .wcu-icon-box svg * {
    color: var(--icon-color-hover);
    stroke: var(--icon-color-hover);
    fill: var(--icon-color-hover);
}

.wcu-card:hover .wcu-title,
.wcu-card:hover .wcu-description {
    color: #ffffff;
}

/* Icon Animation on Hover */
.wcu-card:hover .wcu-icon-box.anim-bounce {
    animation: wcu-bounce 1s infinite;
}

@keyframes wcu-bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0) scale(1.1);}
    40% {transform: translateY(-10px) scale(1.1);}
    60% {transform: translateY(-5px) scale(1.1);}
}

/* Responsive Scaling */
@media (max-width: 767px) {
    .wcu-card {
        height: auto;
        min-height: 300px;
        padding: 24px;
    }
    .wcu-title {
        font-size: 22px;
    }
}