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

body{
background:#000;
font-family:Arial, sans-serif;
color:white;
}

.header{
background:#171b2e;
height:58px;
border-bottom:1px solid #22d3b6;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 15px;
}

.logo{
position:absolute;
left:-2px;
top:0px;
display:flex;
align-items:center;
}

.logo img{
width:325px;
max-width:none;
height:auto;
display:block;
background:none !important;
mix-blend-mode:screen;
margin-top:8px;
}

.menu{
position:absolute;
right:22px;
top:17px;
font-size:22px;
color:#fff;
line-height:1;
}

.hero{
background:#000;
padding:10px 15px 35px;
text-align:center;
border-top:3px solid #22d3b6;
border-bottom:3px solid #22d3b6;
}

.hero h1{
font-size:46px;
font-weight:200;
color:#fff;
line-height:52px;
margin-top:-35px;
margin-bottom:12px;
font-family:Arial,sans-serif;
position:relative;
top:8px;
}

.hero p{
font-size:24px;
color:#d5d5d5;
line-height:28px;
max-width:1100px;
margin:auto;
margin-top:-6px;
font-weight:300;
}

.search-box{
margin-top:28px;
width:100%;
padding:0 0px;
display:flex;
box-sizing:border-box;
}

.search-box input{
width:calc(100% - 68px);
height:28px;
padding:0 14px;
font-size:16px;
border:none;
outline:none;
background:#ececec;
color:#777;
}

.search-box button{
width:68px;
height:28px;
background:#22d3b6;
color:#fff;
font-size:12px;
border:none;
font-weight:normal;
}

.latest-apps{
background:#dfe3ea;
padding:25px 15px;
}

.latest-apps h2{
font-size:50px;
margin-bottom:30px;
}

.telegram-btn{
text-align:center;
margin-top:18px;
margin-bottom:-4px;
}

.telegram-btn img{
width:38px;
height:38px;
border-radius:50%;
}

.app-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px;
padding:0 8px;
}

.app-card{
background:#f2f2f2;
border-radius:2px;
overflow:hidden;
padding:8px;
border-bottom:4px solid #22d3b6;
text-align:center;
}

.app-card img{
width:100%;
height:95px;
object-fit:cover;
border-radius:18px;
}

.app-card h3{
font-size:17px;
color:#444;
margin-top:10px;
font-weight:500;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.app-card p{
font-size:13px;
color:#b0b0b0;
margin-top:4px;
}

.app-card a{
display:none;
}

.stars{
font-size:18px;
color:#f4c400;
margin-top:6px;
letter-spacing:2px;
}

@media(max-width:768px){

.hero{
padding:45px 15px 25px;
}

.hero h1{
font-size:38px;
line-height:58px;
margin-bottom:25px;
}

.hero p{
font-size:16px;
line-height:34px;
}

.search-box{
flex-direction:row !important;
}

.search-box input{
height:55px;
font-size:16px;
padding:0 15px;
}

.search-box button{
height:55px;
width:75px;
font-size:18px;
}

.latest-apps h2{
font-size:40px;
}

}

body{
    overflow-x:hidden;
}

.hero,
.latest-apps,
.header{
    width:100%;
    overflow:hidden;
}

.footer{
background:#171c2c;
border-top:3px solid #22d3b6;
padding:14px 10px 90px;
text-align:center;
}

.footer p{
color:#8d8d8d;
font-size:14px;
margin-bottom:12px;
font-family:Arial,sans-serif;
}

.footer p span{
color:#ffffff;
}

.footer-btn{
position:fixed;
will-change:transform;

left:50%;
bottom:12px;

transform:translate3d(-50%,0,0);

width:82%;
max-width:520px;

background:#ffb300;
color:#000;
font-size:16px;
font-weight:700;
text-decoration:none;
text-align:center;

padding:13px 0;

border-radius:40px;
border:3px solid #fff2b8;

box-shadow:10px 0 0 #22d3b6;

font-family:Arial,sans-serif;

z-index:9999;
}

.search-box input{
height:32px !important;
padding:0 10px !important;
font-size:14px !important;
}

.search-box button{
height:32px !important;
font-size:11px !important;
}