/* ==========================================
   AMAL Landing Engine
   Product : Terperangkap di Akhir Zaman
   Version : 1.0
   ========================================== */


/* ===========================
   RESET
=========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


/* ===========================
   BODY
=========================== */

body{

    font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

    background:#ffffff;

    color:#1e293b;

    line-height:1.7;

    -webkit-font-smoothing:antialiased;

}


/* ===========================
   CONTAINER
=========================== */

.container{

    width:min(92%,720px);

    margin:auto;

}


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

.hero{

    padding:80px 0;

    text-align:center;

}


/* ===========================
   BADGE
=========================== */

.hero-badge{

    display:inline-block;

    padding:10px 18px;

    border-radius:999px;

    background:#ecfdf5;

    color:#0F5F6E;

    font-size:.85rem;

    font-weight:600;

    letter-spacing:.4px;

    margin-bottom:32px;

}


/* ===========================
   TITLE
=========================== */

.hero-title{

    font-size:clamp(2.2rem,6vw,3.8rem);

    font-weight:800;

    line-height:1.15;

    margin-bottom:48px;

}


/* ===========================
   VIDEO
=========================== */

.hero-video{

    margin-bottom:42px;

}


.hero-video video{

    width:100%;

    border-radius:24px;

    display:block;

    box-shadow:

    0 20px 60px rgba(0,0,0,.12);

}


/* ===========================
   DESCRIPTION
=========================== */

.hero-description{

    max-width:620px;

    margin:auto;

    font-size:1.1rem;

    color:#475569;

    margin-bottom:42px;

}


/* ===========================
   BUTTON
=========================== */

.hero-button{

    display:inline-block;

    text-decoration:none;

    padding:18px 34px;

    border-radius:999px;

    border:2px solid #0F5F6E;

    color:#0F5F6E;

    font-weight:700;

    transition:.30s;

}


.hero-button:hover{

    background:#0F5F6E;

    color:white;

}


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

@media(max-width:768px){

.hero{

    padding:60px 0;

}

.hero-title{

    font-size:2.5rem;

}

.hero-description{

    font-size:1rem;

}

.hero-button{

    width:100%;

}

}