body {
    font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: url('images/background-website.jpeg') center/cover no-repeat fixed;
    min-height: 100vh;
    color: #1f2532;
}
.navbar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    background: linear-gradient(90deg, rgba(13,110,253,0.92), rgba(111,66,193,0.92));
}
.navbar .nav-link {
    color: #eef2ff !important;
}
.navbar .nav-link.active {
    color: #fffbf5 !important;
}
.navbar .nav-link:hover {
    transform: translateY(-1px);
    color: #ffe08a !important;
}
.navbar-brand span {
    color: #fffbf5;
}
.hero-card {
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 10% 20%, rgba(255,255,255,0.3), transparent 35%), radial-gradient(circle at 85% 10%, rgba(255,255,255,0.25), transparent 30%), linear-gradient(135deg, rgba(255,255,255,0.75), rgba(255,255,255,0.4));
    border: 1px solid rgba(255, 255, 255, 0.4);
}
.hero-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255,255,255,0.24), transparent 50%);
    pointer-events: none;
}
.section-title {
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 600;
    color: #6639b6;
    font-size: 0.9rem;
}
.card {
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(6px);
}
.card-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(102, 57, 182, 0.18);
}
.hero-card {
    animation: fadeInUp 0.8s ease both;
}
.card {
    animation: fadeInUp 0.9s ease both;
}
.card:nth-child(2) { animation-delay: 0.05s; }
.card:nth-child(3) { animation-delay: 0.1s; }
.card:nth-child(4) { animation-delay: 0.15s; }
.card:nth-child(5) { animation-delay: 0.2s; }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.avatar-lg {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #ddd;
}
footer {
    background: linear-gradient(90deg, rgba(13,110,253,0.9), rgba(111,66,193,0.9));
    color: #fffbf5;
}