@import './variables.css';
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-system);
    overflow-x: hidden;
}

.container {
    display: flex;
    height: 100vh;
    position: relative;
}

/* Left Section - Dark with Video */
.left-section {
    flex: 1;
    background-color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.left-section video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100);
    z-index: 1;
}

/* Right Section - Green with Logo */
.right-section {
    flex: 1;
    background-color: var(--primary-green);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo {
    width: 85%;
    height: auto;
    opacity: 0.35;
    filter: brightness(0) saturate(100%) invert(80%) sepia(27%) saturate(1200%) hue-rotate(40deg) brightness(105%) contrast(90%);
}

/* SAMSARA Banner - Centered on the divide */
.banner {
    position: absolute;
    top: 40%;
    left: 55%;
    transform: translate(-50%, -50%);
    z-index: 100;
    background-color: var(--primary-dark);
    padding: var(--spacing-4px) var(--spacing-8px);
}

.banner h1 {
    color: var(--primary-green);
    font-family: var(--font-label-black);
    font-size: 128px;
    font-weight: var(--weight-label-black);
    line-height: 0.96;
    text-transform: uppercase;
    margin: 0;
    letter-spacing: 0.01em;
}

/* Tagline - Centered on the divide */
.tagline {
    position: absolute;
    top: 53%;
    left: 60%;
    transform: translate(-50%, -50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5px);
    align-items: flex-start;
}

.tagline-line {
    background-color: var(--primary-dark);
    padding: var(--spacing-2px) var(--spacing-8px);
}

.tagline-line p {
    color: var(--primary-green);
    font-family: var(--font-label-black);
    font-size: 89px;
    font-weight: var(--weight-label-black);
    line-height: 1;
    margin: 0;
    white-space: nowrap;
}

/* Join Button - Centered on the divide */
.join-button {
    position: absolute;
    top: 65%;
    left: 60%;
    transform: translate(-50%, -50%);
    z-index: 100;
    width: 219px;
    height: 67px;
    background-color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: polygon(8% 0%, 100% 0%, 92% 100%, 0% 100%);
    transition: transform 0.2s ease;
    text-decoration: none;
}

.join-button:hover {
    transform: translateX(-50%) scale(1.05);
}

.join-button span {
    font-family: var(--font-button-standard);
    font-weight: var(--weight-button-standard);
    font-size: 45px;
    color: var(--nav-text-light);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.join-button:hover span {
    color: var(--primary-green);
}

/* Responsive */
@media (max-width: 1400px) {
    .banner h1 {
        font-size: 100px;
    }
    
    .tagline-line p {
        font-size: 70px;
    }
}

@media (max-width: 1200px) {
    .banner h1 {
        font-size: 90px;
    }
    
    .tagline-line p {
        font-size: 60px;
    }
    
    .join-button {
        width: var(--spacing-180px);
        height: var(--spacing-55px);
    }
    
    .join-button span {
        font-size: 38px;
    }
}

@media (max-width: 1024px) {
    .container {
        flex-direction: column;
    }
    
    .left-section,
    .right-section {
        flex: none;
        height: 50vh;
    }
    
    .banner {
        left: 50%;
    }
    
    .banner h1 {
        font-size: 80px;
    }
    
    .tagline {
        left: 50%;
        align-items: center;
    }
    
    .tagline-line p {
        font-size: 50px;
    }
    
    .join-button {
        left: 50%;
    }
}

@media (max-width: 768px) {
    .banner h1 {
        font-size: 60px;
    }
    
    .tagline-line p {
        font-size: 35px;
    }
    
    .join-button {
        width: var(--spacing-150px);
        height: var(--spacing-50px);
    }
    
    .join-button span {
        font-size: 30px;
    }
}

@media (max-width: 480px) {
    .banner h1 {
        font-size: 48px;
    }
    
    .tagline-line p {
        font-size: 28px;
    }
    
    .join-button {
        width: var(--spacing-130px);
        height: var(--spacing-45px);
    }
    
    .join-button span {
        font-size: 25px;
    }
}