*{box-sizing:border-box;margin:0;padding:0;font-family:Arial,sans-serif}
body{color:#111}
header{height:80px;display:flex;align-items:center;justify-content:space-between;padding:0 8%}
.logo{font-size:28px;font-weight:700}
nav a{margin:0 15px;text-decoration:none;color:#333}
.nav-btn,.dark-btn,.light-btn{padding:14px 28px;border-radius:30px;text-decoration:none;display:inline-block}
.nav-btn,.dark-btn{background:#111;color:#fff}
.light-btn{background:#eee;color:#111}
.hero{display:flex;align-items:center;justify-content:space-between;padding:80px 8%;gap:40px}
.hero-text{max-width:600px}
.hero h1{font-size:56px;margin-bottom:20px}
.hero p{font-size:20px;line-height:1.6}
.buttons{margin-top:30px;display:flex;gap:15px}
.phone{width:320px;height:600px;border-radius:45px;background:#ddd;display:flex;align-items:center;justify-content:center}
.phone-screen{text-align:center;font-size:30px}
.cards-section,.steps,.security,.download{padding:80px 8%;text-align:center}
.cards{display:flex;gap:25px;margin-top:40px}
.cards div{flex:1;padding:35px;border-radius:20px;box-shadow:0 5px 25px #ddd}
footer{background:#111;color:#fff;text-align:center;padding:40px}
@media(max-width:768px){
header{padding:20px;height:auto}
nav{display:none}
.hero{flex-direction:column;text-align:center}
.hero h1{font-size:38px}
.buttons,.cards{flex-direction:column}
.phone{width:260px;height:500px}
}