:root {
    --bg-color: #050505;
    --card-bg: #0d0d0d;
    --border-color: #222;
}

body {
    padding-top: 56px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-color);
    font-family: 'Inter', -apple-system, sans-serif;
    color: #eee;
    overflow-x: hidden;
}

main {
    flex: 1;
}

section {
    padding: 3rem 0;
}

.profile-pic {
    border-radius: 50%;
    object-fit: cover;
    width: 150px;
    height: 150px;
    display: block;
}

.glass-effect {
    background: rgba(5, 5, 5, 0.8) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
}

.hero-section {
    padding: 120px 0 80px;
}

.hero-logo {
    width: 140px;
    filter: drop-shadow(0 0 20px rgba(13, 110, 253, 0.2));
}

.separator {
    width: 60px;
    height: 4px;
    background: #0d6efd;
    border-radius: 2px;
}

.bg-dark-card {
    background-color: var(--card-bg);
}

.project-card {
    background: #151515;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    transition: all 0.3s ease;
}

.team-member{
       background: #151515;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    transition: all 0.3s ease;
}

.project-card.empty {
    border-style: dashed;
    background: transparent;
    opacity: 0.4;
}

.profile-img {
    width: 120px;
    height: 120px;
    border-radius: 30px;
    object-fit: cover;
    border: 2px solid var(--border-color);
    transition: transform 0.3s ease;
}

.team-member:hover .profile-img {
    transform: rotate(5deg) scale(1.05);
    border-color: #0d6efd;
}

.hover-primary:hover {
    color: #0d6efd !important;
}

.fw-black { font-weight: 900; }
.tracking-tight { letter-spacing: -1px; }
.tracking-widest { letter-spacing: 4px; }
.x-small { font-size: 0.75rem; }

@media (max-width: 768px) {
    .hero-section { padding-top: 100px; }
    .display-2 { font-size: 3rem; }
}