:root {
    --fade-speed: 0.45s;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes glowPulse {
    0%, 100% {
        box-shadow: 0 0 18px rgba(62, 231, 255, 0.06);
    }
    50% {
        box-shadow: 0 0 28px rgba(62, 231, 255, 0.12);
    }
}

.glass-card,
.glass-panel,
.stat-card,
.analytics-card,
.team-card,
.project-card,
.contact-form,
.contact-details,
.chart-panel {
    animation: fadeInUp var(--fade-speed) ease both;
}

.hero-copy,
.hero-panel,
.section-header,
.cards-grid > *,
.solutions-grid > *,
.feature-grid > *,
.analytics-grid > *,
.team-grid > *,
.project-grid > *,
.chart-item {
    animation: fadeInUp calc(var(--fade-speed) + 0.1s) ease both;
}

.glass-card:hover,
.solution-card:hover,
.team-card:hover,
.chart-item:hover,
.project-card:hover {
    transform: translateY(-4px);
}

.hero-panel {
    animation-duration: 0.6s;
}

.hero-copy {
    animation-duration: 0.65s;
}

.glass-card,
.hero-panel,
.contact-form,
.project-card {
    transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.glass-card:hover {
    border-color: rgba(62, 231, 255, 0.18);
}

.stats-row > div,
.card,
.solution-card,
.feature-block,
.team-card,
.project-card {
    animation: fadeInUp 0.55s ease both;
}

button,
.button,
.link-chip {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

button:hover,
.button:hover,
.link-chip:hover {
    transform: translateY(-1px);
}