body{
font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;
margin:0;
background:#f7f7f7;
color:#111;
line-height:1.6;
}

.container{
max-width:1100px;
margin:auto;
padding:30px 20px;
}

.header{
background:white;
border-bottom:1px solid #eee;
}

.nav{
display:flex;
align-items:center;
justify-content:space-between;
}

.logo{
height:40px;
}

nav a{
margin-left:20px;
text-decoration:none;
color:#444;
font-weight:500;
}

.hidden{
display:none;
}

.hero{
text-align:center;
padding:80px 20px 40px;
background:#fafafa;
}

.hero-icon{
height:90px;
margin-bottom:20px;
}

.hero h1{
font-size:48px;
margin-bottom:10px;
}

.hero p{
font-size:18px;
max-width:600px;
margin:auto;
}

.btn-primary{
margin-top:30px;
background:#4A90E2;
color:white;
padding:14px 30px;
border-radius:10px;
text-decoration:none;
display:inline-block;
font-weight:600;
}

.store-link img{
height:48px;
width:auto;
}

.phone-preview{
margin-top:80px;
display:flex;
justify-content:center;
align-items:flex-end;
gap:20px;
}

.phone{
width:220px;
border-radius:30px;
box-shadow:0 20px 40px rgba(0,0,0,0.15);
}

.phone.left{
transform:rotate(-8deg);
}

.phone.right{
transform:rotate(8deg);
}

.phone.center{
width:250px;
}

.features{
padding-top:80px;
}

.features h2{
text-align:center;
margin-bottom:40px;
}

.feature-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
}

.feature{
background:white;
padding:25px;
border-radius:12px;
border:1px solid #eee;
box-shadow:0 5px 15px rgba(0,0,0,0.05);
}

.screens{
padding:80px 20px;
text-align:center;
background:white;
}

.screen-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
margin-top:40px;
}

.screen-grid img{
width:100%;
border-radius:16px;
box-shadow:0 10px 25px rgba(0,0,0,0.1);
}

.footer{
text-align:center;
padding:40px;
background:#111;
color:white;
}

.footer a{
color:white;
display:block;
margin-top:10px;
}

.footer-icon{
height:40px;
margin-bottom:10px;
}

.hero-screens{
position:relative;
margin-top:80px;
height:420px;
display:flex;
justify-content:center;
align-items:center;
}

.hero-screens img{
position:absolute;
border-radius:28px;
box-shadow:0 30px 60px rgba(0,0,0,0.2);
}

/* CENTER SCREEN */

.screen-center{
width:260px;
z-index:3;
animation:floatCenter 6s ease-in-out infinite;
}

/* LEFT SCREEN */

.screen-left{
width:220px;
left:22%;
transform:rotate(-10deg);
animation:floatLeft 7s ease-in-out infinite;
}

/* RIGHT SCREEN */

.screen-right{
width:220px;
right:22%;
transform:rotate(10deg);
animation:floatRight 7s ease-in-out infinite;
}

/* ANIMATIONS */

@keyframes floatCenter{
0%{transform:translateY(0px);}
50%{transform:translateY(-10px);}
100%{transform:translateY(0px);}
}

@keyframes floatLeft{
0%{transform:rotate(-10deg) translateY(0px);}
50%{transform:rotate(-12deg) translateY(-12px);}
100%{transform:rotate(-10deg) translateY(0px);}
}

@keyframes floatRight{
0%{transform:rotate(10deg) translateY(0px);}
50%{transform:rotate(12deg) translateY(-12px);}
100%{transform:rotate(10deg) translateY(0px);}
}