*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Arial,sans-serif;background:#f7f4ef;color:#070707}
.container{max-width:480px;margin:auto}
.hero{background:#070707;color:#fff;padding:15px}
.logo{width:160px}
.hero h1{font-size:30px;line-height:1.1;margin:15px 0}
.hero p{margin-bottom:15px}
.btns{display:flex;gap:10px;flex-wrap:wrap}
.btn{padding:12px 14px;border:1px solid #d4af37;color:#d4af37;text-decoration:none;border-radius:6px; cursor: pointer;}
.primary{background:#d4af37;color:#000}
.hero-img{width:100%;margin-top:20px;border-radius:16px}
.features{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:20px}
.features div,.card{background:#fff;padding:12px;border-radius:12px;text-align:center}
h2{text-align:center;padding:20px 10px}
.grid{display:grid;grid-template-columns:1fr;gap:15px;padding:15px}
.card img,.why img{width:100%;border-radius:12px}
.why{padding:15px}
.why div{background:#071427;color:#fff;padding:20px;border-radius:12px;margin-top:10px}
footer{background:#000;color:#fff;text-align:center;padding:20px;margin-top:20px}
.mobile-website{display: block;}
.desktop-website{display: none;}

@media(min-width:768px){
.container{max-width:1920px}
.grid{grid-template-columns:repeat(3,1fr)}
.features{grid-template-columns:repeat(6,1fr)}
.hero{display:grid;grid-template-columns:1fr 1fr;align-items:center}
.desktop-website{display: block; text-align: center; padding: 45px; background: #070707; color: #fff; height: 100vh;}
	.desktop-website h2{font-weight: 500;}	
	.desktop-website a{color:#ffe180; font-size:18px; display: block; text-align: center; text-decoration: underline; font-weight: 400; letter-spacing: 2px;}
.mobile-website{display: none;}
	
}