.umeet-hero {

    max-width:1200px;

    margin:auto;

    padding:
        6rem 1.5rem;

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:4rem;

    align-items:center;

}



.hero-badge {

    display:inline-flex;

    align-items:center;

    gap:.5rem;

    background:#eff6ff;

    color:#2563eb;

    padding:.5rem 1rem;

    border-radius:50px;

    font-weight:600;

}



.live-dot {

    width:10px;

    height:10px;

    background:#10b981;

    border-radius:50%;

    display:inline-block;

}



.umeet-hero h1 {

    font-size:
        clamp(3rem,5vw,5rem);

    font-weight:800;

    line-height:1.05;

}



.umeet-hero p {

    font-size:1.2rem;

    color:
        var(--umeet-muted);

    max-width:500px;

}



.hero-actions {

    display:flex;

    gap:1rem;

    margin-top:2rem;

}



.secondary-btn {

    background:white;

    border:
        1px solid var(--umeet-border);

}




/* Meeting Preview */


.meeting-preview {

    background:#111827;

    border-radius:28px;

    overflow:hidden;

    box-shadow:
        0 30px 70px rgba(0,0,0,.25);

}



.preview-header {

    padding:1rem;

    color:white;

    display:flex;

    justify-content:space-between;

}



.preview-screen {

    height:380px;

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

    color:white;

}



.participant {

    font-size:1.5rem;

}



.self-preview {

    position:absolute;

    bottom:20px;

    right:20px;

    background:#1f2937;

    padding:1rem;

    border-radius:18px;

    color:white;

}



.avatar-circle {

    width:50px;

    height:50px;

    background:#2563eb;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:1.5rem;

}



.preview-controls {

    background:#030712;

    padding:1rem;

    display:flex;

    justify-content:center;

    gap:1.5rem;

    color:white;

}



.leave {

    color:#ef4444;

}



.features {

    max-width:1200px;

    margin:
        3rem auto;

    padding:1.5rem;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:2rem;

}



.feature-card {

    padding:2rem;

}



.how-it-works {

    text-align:center;

    padding:5rem 1rem;

}



.steps {

    display:flex;

    justify-content:center;

    gap:5rem;

}



.steps h3 {

    font-size:3rem;

    color:#2563eb;

}


@media(max-width:900px){

    .umeet-hero{

        grid-template-columns:1fr;

        text-align:center;

    }


    .umeet-hero p{

        margin:auto;

    }


    .hero-actions{

        justify-content:center;

    }


    .features{

        grid-template-columns:1fr;

    }


    .steps{

        flex-direction:column;

        gap:2rem;

    }

}