/* ==========================================================
   YADOMART LAYOUT
   Version: 1.0
========================================================== */

/* ==========================================
   HEADER
========================================== */

.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:var(--header-height);

    z-index:var(--z-header);

    background:rgba(255,255,255,.70);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);
    
    transition:var(--transition);

    border-bottom:1px solid rgba(255,255,255,.45);

}

.header .container{

    height:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

}


.header.scrolled{

    background:rgba(255,255,255,.92);

    box-shadow:var(--shadow-sm);

}

.logo{

    display:flex;

    align-items:center;

}

.logo img{

    height:44px;

    width:auto;

}

/* ==========================================
   MAIN
========================================== */

main{

    width:100%;

}

/* ==========================================
   HERO
========================================== */

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    padding-top:var(--header-height);

    overflow:hidden;

}

.hero-background{

    position:absolute;

    inset:0;

    overflow:hidden;

    z-index:-1;

}

.hero-container{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:80px;

    align-items:center;

}

.hero-left{

    display:flex;

    flex-direction:column;

    gap:2rem;

}

.hero-left p{

    max-width:620px;

}

.hero-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:20px;

}

.hero-right{

    display:flex;

    justify-content:center;

}

.hero-card{

    width:100%;

    max-width:430px;

    padding:2.8rem;

    border-radius:32px;

    background:rgba(255,255,255,.72);

    backdrop-filter:blur(24px);

    border:1px solid rgba(255,255,255,.45);

    box-shadow:var(--shadow-lg);

}

.hero-status{

    display:inline-flex;

    align-items:center;

    gap:.5rem;

    color:var(--success);

    font-weight:700;

    margin-bottom:1.5rem;

}

.hero-card h3{

    margin-bottom:1rem;

}

.hero-card ul{

    display:flex;

    flex-direction:column;

    gap:1rem;

}

.hero-card li{

    display:flex;

    align-items:center;

    gap:.75rem;

    color:var(--text-light);

}

.hero-card li::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--primary);

}

/* ==========================================
   ABOUT
========================================== */

.about{

    background:var(--surface);

}

.about .container{

    max-width:900px;

}

/* ==========================================
   FEATURES
========================================== */

.features{

    background:var(--background);

}

.features-grid{

    display:grid;

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

    gap:32px;

}

/* ==========================================
   MISSION
========================================== */

.mission{

    background:var(--surface);

}

.mission-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:start;

}

/* ==========================================
   WAITLIST
========================================== */

.waitlist{

    background:linear-gradient(
        180deg,
        var(--background),
        #eef8f3
    );

}

.waitlist-card{

    width:min(760px,100%);

    margin-inline:auto;

    padding:4rem;

    border-radius:32px;

    background:rgba(255,255,255,.82);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.5);

    box-shadow:var(--shadow-lg);

}

.waitlist-card h2{

    margin-bottom:1rem;

}

.waitlist-card p{

    margin-bottom:2.5rem;

}

.waitlist-form{

    display:flex;

    flex-direction:column;

    gap:1.5rem;

}

.form-group{

    display:flex;

    flex-direction:column;

    gap:.6rem;

}

.form-group label{

    font-size:.9rem;

    font-weight:700;

    color:var(--heading);

}

/* ==========================================
   FOOTER
========================================== */

.footer{

    padding:5rem 0;

    background:#0D1823;

    color:white;

}

.footer .container{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

}

.footer-logo{

    margin-bottom:2rem;

}

.footer-logo img{

    height:52px;

}

.footer h3{

    color:white;

    margin-bottom:1rem;

}

.footer p{

    color:rgba(255,255,255,.70);

    max-width:650px;

    margin-bottom:2rem;

}

.footer-links{

    display:flex;

    gap:2rem;

    margin-bottom:2rem;

}

.footer-links a{

    color:white;

    transition:var(--transition);

}

.footer-links a:hover{

    color:var(--accent);

}

.footer small{

    color:rgba(255,255,255,.55);

}