*{box-sizing:border-box}
body{margin:0;background:#000;color:#fff;font-family:Arial,Helvetica,sans-serif}
header{height:58px;background:#b3212c;display:flex;align-items:center;padding:0 12px;gap:12px}
.menu{font-size:24px}.logo{font-weight:bold;font-size:16px;flex:1}
header button{background:#fff;border:0;border-radius:20px;padding:9px 18px}
.more{font-size:25px}
nav{height:50px;background:#171717;display:flex;align-items:center;gap:25px;padding:0 12px;color:#aaa}
nav .active{color:#fff;border-bottom:3px solid #e52b35;height:50px;display:flex;align-items:center}
.title{padding:12px}
.title h1{font-size:22px;margin:0 0 12px}
.title p{color:#999;font-size:14px;line-height:20px}
.filters{display:flex;gap:8px;padding:5px 10px;overflow:hidden}
.filters div{background:#292929;border-radius:20px;padding:9px 14px;font-size:13px;white-space:nowrap}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;padding:10px}
.card{height:170px;background:#222;position:relative;overflow:hidden}
.card img{width:100%;height:100%;object-fit:cover;background:#333}
.name{position:absolute;bottom:8px;left:8px;text-shadow:0 1px 4px #000;font-size:13px}
@media(min-width:700px){
.grid{grid-template-columns:repeat(4,1fr)}
}


.download-modal{
position:fixed;
inset:0;
background:rgba(0,0,0,.75);
display:none;
align-items:center;
justify-content:center;
z-index:9999;
}

.download-box{
width:300px;
background:#fff;
color:#222;
border-radius:18px;
padding:25px;
text-align:center;
position:relative;
}

.app-logo{
width:90px;
height:90px;
object-fit:contain;
border-radius:20px;
background:#eee;
}

.close-btn{
position:absolute;
right:15px;
top:8px;
font-size:28px;
cursor:pointer;
color:#666;
}

.download-btn{
display:block;
background:#e52b35;
color:#fff;
padding:14px;
border-radius:30px;
text-decoration:none;
font-weight:bold;
margin-top:20px;
}