@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap');


:root{

    --bg:#f4f4f0;
    --white:#ffffff;
    --black:#111111;

    --yellow:#ffe600;
    --pink:#ff6b9d;
    --green:#6dff8b;
    --blue:#75d8ff;

    --border:4px solid #111;

    --shadow:8px 8px 0 #111;

}



*{

    margin:0;
    padding:0;
    box-sizing:border-box;

    font-family:
    "Plus Jakarta Sans",
    sans-serif;

}



html{

    scroll-behavior:auto;

}



body{

    background:var(--bg);

    color:var(--black);

    overflow-x:hidden;

}



a{

    text-decoration:none;

    color:inherit;

}





/* =====================
NAVBAR
===================== */


.navbar{


    position:sticky;

    top:0;

    z-index:50;


    height:80px;


    display:flex;

    align-items:center;

    justify-content:space-between;


    padding:0 25px;


    background:var(--white);


    border-bottom:var(--border);


}



.logo{


    font-size:28px;

    font-weight:900;

    letter-spacing:-1px;


}



.logo span{


    display:inline-block;


    background:var(--yellow);


    border:3px solid var(--black);


    padding:3px 8px;


    margin-left:5px;


}






.menu-btn{


    width:55px;

    height:55px;


    background:var(--yellow);


    border:var(--border);


    font-size:30px;


    font-weight:900;


    cursor:pointer;


    box-shadow:5px 5px 0 var(--black);


}



.menu-btn:active{


    transform:translate(5px,5px);


    box-shadow:none;


}








/* =====================
OVERLAY
===================== */


.overlay{


    position:fixed;


    inset:0;


    background:rgba(0,0,0,.35);


    backdrop-filter:blur(10px);


    opacity:0;


    pointer-events:none;


    transition:.35s;


    z-index:80;


}



.overlay.active{


    opacity:1;


    pointer-events:auto;


}








/* =====================
SIDEBAR
===================== */


.sidebar{


    position:fixed;


    top:0;


    left:0;


    width:310px;


    height:100vh;


    padding:25px;


    background:white;


    border-right:var(--border);


    z-index:100;


    transform:translateX(-110%);


    transition:.35s cubic-bezier(.4,0,.2,1);


    overflow-y:auto;


}



.sidebar.active{


    transform:translateX(0);


}





.side-head{


    display:flex;


    align-items:center;


    justify-content:space-between;


    margin-bottom:35px;


}



.side-head h2{


    font-size:28px;

    font-weight:900;


}



.side-head button{


    width:45px;


    height:45px;


    background:var(--pink);


    border:var(--border);


    font-size:28px;


    font-weight:900;


    cursor:pointer;


}






.sidebar a{


    display:flex;


    align-items:center;


    gap:12px;


    padding:15px;


    margin-bottom:15px;


    background:white;


    border:var(--border);


    font-weight:800;


    transition:.2s;


}



.sidebar a:hover{


    background:var(--yellow);


    transform:translateX(5px);


}





.sidebar i{


    font-size:22px;


}




.side-bottom{


    margin-top:40px;


    padding-top:25px;


    border-top:var(--border);


}



.side-bottom h3{


    font-weight:900;

    margin-bottom:15px;


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


main{

    max-width:1100px;

    margin:auto;

    padding:30px 20px;

}





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


.hero{


    text-align:center;


    padding:70px 10px 50px;


}



.hero-badge{


    display:inline-block;


    padding:10px 18px;


    background:var(--green);


    border:var(--border);


    font-weight:900;


    box-shadow:5px 5px 0 var(--black);


}



.hero h1{


    margin-top:35px;


    font-size:clamp(42px,8vw,80px);


    line-height:1;


    font-weight:900;


    letter-spacing:-3px;


}



.hero h1 span{


    background:var(--yellow);


    border:var(--border);


    padding:0 10px;


    display:inline-block;


}



.hero p{


    margin-top:30px;


    font-size:18px;


    font-weight:700;


    line-height:1.6;


}







/* =====================
DOWNLOAD CARD
===================== */


.download-card{


    background:var(--white);


    border:5px solid var(--black);


    padding:30px;


    box-shadow:var(--shadow);


}



.card-title{


    display:flex;


    align-items:center;


    gap:12px;


}



.card-title i{


    font-size:32px;


}



.card-title h2{


    font-size:28px;


    font-weight:900;


}







.input-box{


    margin-top:25px;


    display:flex;


    gap:15px;


}



.input-box input{


    flex:1;


    height:60px;


    padding:0 18px;


    border:var(--border);


    outline:none;


    font-size:16px;


    font-weight:700;


    background:white;


}



.input-box input:focus{


    background:#fff9c4;


}






.input-box button{


    height:60px;


    padding:0 35px;


    background:var(--pink);


    border:var(--border);


    font-weight:900;


    cursor:pointer;


    box-shadow:5px 5px 0 var(--black);


}



.input-box button:active{


    transform:translate(5px,5px);


    box-shadow:none;


}





#statusText{


    margin-top:15px;


    font-weight:700;


}







/* =====================
PLATFORM
===================== */


.platform-section,
.feature-preview,
.faq-section{


    margin-top:80px;


}



.platform-section h2,
.feature-preview h2,
.faq-section h2{


    font-size:34px;


    font-weight:900;


    margin-bottom:30px;


}






.platform-grid{


    display:grid;


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


    gap:20px;


}





.platform-card{


    background:white;


    border:var(--border);


    padding:25px;


    box-shadow:6px 6px 0 var(--black);


    transition:.2s;


}



.platform-card:hover{


    transform:translate(-5px,-5px);


    box-shadow:11px 11px 0 var(--black);


}



.platform-card i{


    font-size:42px;


}



.platform-card h3{


    margin-top:15px;


    font-size:22px;


    font-weight:900;


}



.platform-card p{


    margin-top:8px;


    font-weight:700;


}








/* =====================
FEATURE
===================== */


.feature-grid{


    display:grid;


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


    gap:20px;


}





.feature-item{


    background:white;


    border:var(--border);


    padding:25px;


    box-shadow:6px 6px 0 var(--black);


}



.feature-item i{


    font-size:42px;


}



.feature-item h3{


    margin-top:15px;


    font-size:22px;


    font-weight:900;


}



.feature-item p{


    margin-top:10px;


    font-weight:600;


}







/* =====================
FAQ
===================== */


.faq-box{


    background:white;


    border:var(--border);


    padding:20px;


    margin-bottom:20px;


    box-shadow:5px 5px 0 var(--black);


}



.faq-box button{


    width:100%;


    display:flex;


    align-items:center;


    justify-content:space-between;


    background:none;


    border:none;


    font-size:18px;


    font-weight:900;


    cursor:pointer;


}



.faq-box p{


    margin-top:15px;


    font-weight:600;


    line-height:1.5;


}
/* =====================
VIDEO POPUP
===================== */


.video-modal{

    position:fixed;

    inset:0;

    display:flex;

    align-items:flex-end;

    background:rgba(0,0,0,.35);

    backdrop-filter:blur(12px);

    opacity:0;

    pointer-events:none;

    transition:.3s;

    z-index:200;

}



.video-modal.active{

    opacity:1;

    pointer-events:auto;

}





.video-box{


    width:100%;


    max-height:90vh;


    overflow-y:auto;


    background:white;


    border:5px solid var(--black);


    border-radius:35px 35px 0 0;


    padding:25px;


    transform:translateY(100%);


    transition:.35s cubic-bezier(.4,0,.2,1);


}





.video-modal.active .video-box{

    transform:translateY(0);

}






.video-drag{


    width:75px;


    height:7px;


    background:#111;


    border-radius:20px;


    margin:0 auto 20px;


}






.video-box video{


    width:100%;


    aspect-ratio:1/1;


    object-fit:cover;


    border:var(--border);


    background:#000;


}






.video-box h3{


    margin-top:20px;


    font-size:24px;


    font-weight:900;


}



.video-box p{


    margin-top:8px;


    font-weight:700;


}



.video-box span{


    display:inline-block;


    margin-top:8px;


    background:var(--green);


    border:3px solid #111;


    padding:5px 12px;


    font-weight:900;


}






.video-actions{


    display:flex;


    gap:15px;


    margin-top:25px;


}



.video-actions a{


    flex:1;


    padding:16px;


    text-align:center;


    background:var(--yellow);


    border:var(--border);


    font-weight:900;


    cursor:pointer;


    box-shadow:5px 5px 0 #111;


}



.video-actions a:active{


    transform:translate(5px,5px);


    box-shadow:none;


}









/* =====================
CONTACT FLOAT
===================== */


.contact-float{


    position:fixed;


    right:25px;


    bottom:25px;


    width:65px;


    height:65px;


    display:flex;


    justify-content:center;


    align-items:center;


    background:var(--green);


    border:var(--border);


    font-size:30px;


    cursor:pointer;


    box-shadow:6px 6px 0 #111;


    z-index:60;


}





.contact-float:active{


    transform:translate(5px,5px);


    box-shadow:none;


}









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


footer{


    margin-top:100px;


    background:white;


    border-top:5px solid #111;


    padding:45px 20px;


    text-align:center;


}



.footer-box h2{


    font-size:32px;


    font-weight:900;


}



.footer-box p{


    margin-top:10px;


    font-weight:700;


}



.footer-links{


    display:flex;


    justify-content:center;


    flex-wrap:wrap;


    gap:15px;


    margin:25px 0;


}



.footer-links a{


    background:var(--yellow);


    border:3px solid #111;


    padding:10px 15px;


    font-weight:900;


}










/* =====================
TABLET
===================== */


@media(max-width:900px){



.platform-grid{


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


}



.feature-grid{


    grid-template-columns:1fr;


}



}




/* =====================
MOBILE
===================== */


@media(max-width:600px){



.navbar{


    height:70px;


    padding:0 15px;


}



.logo{


    font-size:22px;


}



.menu-btn{


    width:48px;


    height:48px;


    font-size:24px;


}





main{


    padding:20px 15px;


}




.hero{


    padding:45px 0;


}



.hero h1{


    font-size:42px;


    letter-spacing:-2px;


}




.download-card{


    padding:20px;


}





.input-box{


    flex-direction:column;


}




.input-box button{


    width:100%;


}





.platform-grid{


    grid-template-columns:1fr;


}





.sidebar{


    width:85%;


}




.video-box{


    padding:20px;


}



.video-actions{


    flex-direction:column;


}



.contact-float{


    width:55px;


    height:55px;


    right:18px;


    bottom:18px;


}



}
.video-title{
    line-height:1.5;
    overflow-wrap:anywhere;
}


.video-title.collapsed{

    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;

}


.show-title-btn{

    display:flex;
    align-items:center;
    gap:5px;

    margin-top:8px;

    border:0;
    background:none;

    font-family:"Plus Jakarta Sans";
    font-size:13px;
    font-weight:800;

    cursor:pointer;

}


.show-title-btn i{

    font-size:16px;

}