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

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#000;
    color:#fff;
    overflow-x:hidden;
}


/* ===========================
   GRID BACKGROUND
=========================== */

.grid-bg{

    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:flex-start;

    padding:40px 15px;

    background-color:#050505;

    background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);

    background-size:32px 32px;
}


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

.mobile-box{

    width:360px;
    max-width:100%;

    background:#111115;

    border-radius:18px;

    overflow:hidden;

    box-shadow:
    0 15px 40px rgba(0,0,0,.6);

}


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

.hero-card{

    padding:35px 25px 30px;

    text-align:center;

    position:relative;

    background:#111115;

}


.hero-card::before{

    content:"";

    position:absolute;

    left:12px;
    right:12px;
    bottom:18px;

    height:130px;

    background:#1b1b22;

    border-radius:18px;

    clip-path:polygon(50% 0%,100% 18%,100% 100%,0% 100%,0% 18%);

    z-index:0;
}


/* ===========================
   CHARACTER
=========================== */

.character{

    width:95px;

    position:relative;

    z-index:5;

    margin-bottom:10px;
}


/* ===========================
   LOGO
=========================== */

.logo{

    width:170px;

    display:block;

    margin:0 auto 18px;

    position:relative;

    z-index:5;
}


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

.start-btn{

    display:inline-block;

    width:100%;

    max-width:210px;

    padding:14px;

    border-radius:12px;

    background:#ff8c12;

    color:#fff;

    font-weight:bold;

    font-size:18px;

    text-decoration:none;

    transition:.3s;

    position:relative;

    z-index:5;
}

.start-btn:hover{

    background:#ff7700;

    transform:translateY(-2px);

}


/* ===========================
   CONTENT
=========================== */

.content{

    padding:28px;

}


.content h2{

    font-size:28px;

    line-height:1.25;

    margin-bottom:18px;

    color:#f2f2f2;

}


.content p{

    color:#bdbdbd;

    font-size:15px;

    line-height:1.8;

    margin-bottom:22px;

}


.content h3{

    color:#ffffff;

    margin-top:22px;

    margin-bottom:12px;

    font-size:24px;

}


.content ul{

    padding-left:22px;

    margin-bottom:20px;

}


.content ul li{

    color:#bdbdbd;

    margin-bottom:10px;

    line-height:1.7;

}


/* ===========================
   LINK
=========================== */

.content a{

    color:#6db7ff;

    text-decoration:none;

}

.content a:hover{

    text-decoration:underline;

}


/* ===========================
   SCROLLBAR
=========================== */

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-thumb{

    background:#555;

    border-radius:20px;

}

::-webkit-scrollbar-track{

    background:#111;

}