/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Outfit', sans-serif;
    background-color: #fff;
    color: #000;
    height: 200vh; /* For scroll effect (on index.html) */
}

.scroll-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200vh;
    pointer-events: none;
}

.app-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 3rem;
    overflow: hidden;
    z-index: 1;
}

/* Header Styles */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    z-index: 10;
}

.logo img {
    height: 60px;
    width: auto;
}

nav {
    display: flex;
    gap: 2.5rem;
}

nav a {
    text-decoration: none;
    color: #000;
    font-weight: 900;
    font-size: 1.2rem;
    letter-spacing: 0.05em;
    transition: color 0.2s;
}

nav a:hover, nav a.active {
    color: #555;
}

/* Hero Section */
main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    z-index: 5;
}

.hero-content {
    max-width: 1200px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    position: absolute;
    transition: opacity 0.2s ease-out;
}

.head-icon img {
    height: 120px;
    width: auto;
}

.hero-title {
    font-size: 7rem;
    font-weight: 900;
    line-height: 0.85;
    color: #fff;
    text-shadow: 
        5px 5px 0px #000,
        -5px -5px 0px #000,
        5px -5px 0px #000,
        -5px 5px 0px #000,
        0px 5px 0px #000,
        0px -5px 0px #000,
        5px 0px 0px #000,
        -5px 0px 0px #000,
        10px 10px 0px #000;
    letter-spacing: -0.03em;
}

.hero-subtitle {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.4;
    color: #000;
    max-width: 650px;
}

/* Full Image Hero */
.full-image-hero {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.full-image-hero picture,
.full-image-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Section Title (THE CREW) */
.section-title {
    font-size: 3rem;
    font-weight: 900;
    color: #000;
    margin-bottom: 1rem;
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.section-title::before, .section-title::after {
    content: '';
    display: inline-block;
    width: 50px;
    height: 3px;
    background-color: #000;
}

/* Team Grid */
.team-grid {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    width: 100%;
    flex-wrap: wrap;
}

.team-member {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 180px;
    text-align: center;
}

.avatar-container {
    width: 130px;
    height: 130px;
    overflow: hidden;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.team-member h3 {
    font-size: 1.2rem;
    font-weight: 900;
    margin-bottom: 0.2rem;
    color: #000;
}

.team-member h4 {
    font-size: 0.9rem;
    font-weight: 700;
    color: #666;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.team-member p {
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.3;
    color: #333;
}

/* Centered Person (Humans Page) */
.centered-person {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    z-index: 5;
}

.centered-person img {
    height: 200px;
    width: auto;
}

.centered-person h2 {
    font-size: 3rem;
    font-weight: 900;
    color: #000;
    letter-spacing: -0.02em;
}

/* Background Shapes (Blobs) */
.shape {
    position: absolute;
    background-color: #000;
    z-index: 7; /* Above content */
}

.blob-1 { top: 15%; left: -120px; width: 200px; height: 200px; border-radius: 40% 60% 70% 30% / 40% 40% 60% 60%; }
.blob-2 { top: -200px; right: -50px; width: 250px; height: 250px; border-radius: 50% 50% 30% 70% / 50% 30% 70% 50%; }
.blob-3 { bottom: -100px; left: -100px; width: 300px; height: 300px; border-radius: 30% 70% 50% 50% / 30% 30% 70% 70%; }
.blob-4 { bottom: -100px; right: -100px; width: 300px; height: 300px; border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
.blob-5 { top: 50%; right: -120px; width: 200px; height: 200px; border-radius: 50%; transform: translateY(-50%); }
.blob-6 { bottom: -80px; left: 45%; width: 150px; height: 120px; border-radius: 50% 50% 30% 30%; }
.blob-7 { top: -80px; left: -80px; width: 120px; height: 120px; border-radius: 30% 70% 70% 30%; }

/* Stars/Sparkles */
.star { position: absolute; width: 30px; height: 30px; color: #000; z-index: 2; }
.star-1 { top: 12%; left: 10%; width: 25px; }
.star-2 { top: 22%; right: 28%; width: 35px; }
.star-3 { bottom: 60%; left: 5%; width: 30px; }
.star-4 { bottom: 5%; right: 5%; width: 40px; }
.star-5 { top: 40%; left: 22%; width: 20px; }
.star-6 { bottom: 15%; right: 25%; width: 25px; }
.star-7 { top: 15%; right: 8%; width: 20px; }

/* Responsive Adjustments */
@media (max-width: 1200px) {
    .hero-title { font-size: 5.5rem; }
    .team-grid { gap: 1.5rem; }
    .team-member { width: 150px; }
    .avatar-container { width: 110px; height: 110px; }
}

@media (max-width: 768px) {
    .app-container { padding: 1.5rem; }
    header { flex-direction: column; gap: 1.5rem; }
    .hero-title { font-size: 3.5rem; }
    .hero-subtitle { font-size: 1.1rem; }
    nav { gap: 1.5rem; }
    .team-grid { flex-direction: column; align-items: center; gap: 2rem; overflow-y: auto; max-height: 60vh; }
    .team-member { width: 100%; max-width: 300px; }
}