body {
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

.brand-gradient {
    background: linear-gradient(135deg, #187a63 0%, #124238 100%);
}

.card-hover {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card-hover:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(18, 66, 56, 0.12);
}

.modal-backdrop-visible {
    background: rgba(15, 42, 36, 0.55);
}

.scrollbar-thin::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
    background: #ade1cf;
    border-radius: 999px;
}

[x-cloak] {
    display: none !important;
}

.banner-slide {
    animation: bannerFadeIn 0.4s ease;
}
@keyframes bannerFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.banner-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.5);
    transition: background 0.2s ease, transform 0.2s ease;
}
.banner-dot.active {
    background: #ffffff;
    transform: scale(1.2);
}