.site-icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    color: currentColor;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.landing-logo-icon,
.stat-icon,
.product-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.logo .site-icon,
.landing-logo-icon .site-icon {
    width: 18px;
    height: 18px;
}

.nav-item .site-icon {
    opacity: 0.75;
}

.nav-item:hover .site-icon,
.nav-item.active .site-icon {
    opacity: 1;
}

.page-header .icon-wrap {
    color: var(--text-muted);
}

.feature-card .icon-wrap {
    margin-bottom: 16px;
    color: var(--text);
    opacity: 0.85;
}

@keyframes icon-spin {
    to { transform: rotate(360deg); }
}

@keyframes icon-bounce-y {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(3px); }
}

@keyframes icon-pulse-scale {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

@keyframes icon-sparkle-opacity {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

.icon-wrap--spin:hover .site-icon {
    animation: icon-spin 1.2s linear;
}

.icon-wrap--bounce:hover .site-icon {
    animation: icon-bounce-y 0.7s ease-in-out infinite;
}

.icon-wrap--pulse:hover .site-icon {
    animation: icon-pulse-scale 0.8s ease-in-out infinite;
}

.icon-wrap--sparkle:hover .site-icon {
    animation: icon-sparkle-opacity 1s ease-in-out infinite;
}

.stat-card:hover .icon-wrap--spin .site-icon {
    animation: icon-spin 2s linear infinite;
}

.feature-card:hover .icon-wrap--pulse .site-icon {
    animation: icon-pulse-scale 1.2s ease-in-out infinite;
}

.btn .icon-wrap {
    margin-right: 2px;
}

.btn:hover .icon-wrap--bounce .site-icon {
    animation: icon-bounce-y 0.6s ease-in-out infinite;
}

.modal h2,
.success-notification {
    display: flex;
    align-items: center;
    gap: 10px;
}

.auth-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
    color: var(--text);
}

.auth-logo .site-icon {
    width: 28px;
    height: 28px;
}