/* ===========================================
   ORO TOKEN
   MOBILE FIRST
=========================================== */

html,
body{

    width:100%;

    min-height:100%;

}

body{

    max-width:480px;

    margin:auto;

    position:relative;

    background:#070707;

}

/* Safe Area iPhone */

body{

    padding-top:env(safe-area-inset-top);

    padding-bottom:env(safe-area-inset-bottom);

}

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

.header{

    position:sticky;

    top:0;

    z-index:999;

    backdrop-filter:blur(18px);

    background:

    rgba(10,10,10,.75);

}

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

.hero-logo{

    width:140px;

    max-width:45%;

}

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

.hero h2{

    font-size:28px;

}

.hero p{

    width:90%;

    margin:auto;

    margin-bottom:28px;

}

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

.connect-btn{

    width:100%;

    height:58px;

    font-size:18px;

    border-radius:18px;

}

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

.features{

    padding:18px;

}

.card{

    padding:22px;

    border-radius:20px;

}

.card h3{

    font-size:20px;

}

.card p{

    font-size:14px;

}

/* ==========================
STATISTICS
========================== */

.stats-grid{

    grid-template-columns:1fr;

}

.stat{

    padding:22px;

}

.stat h3{

    font-size:28px;

}

/* ==========================
MENU
========================== */

.menu{

    padding:18px;

}

.menu a{

    font-size:17px;

    border-radius:18px;

    padding:18px;

}

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

footer{

    padding:40px 20px;

}

footer p{

    font-size:13px;

}

/* ==========================
SMALL PHONE
========================== */

@media(max-width:390px){

.hero h2{

    font-size:24px;

}

.hero-logo{

    width:120px;

}

.connect-btn{

    height:54px;

}

.card{

    padding:18px;

}

}

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

@media(min-width:768px){

body{

    max-width:500px;

}

}