:root{
--bg:#f5f7ff;
--card:#fff;
--text:#222;
}

.dark{
--bg:#303c4d;
--card:#1f2937;
--text:#f3f4f6;
}

*{
box-sizing:border-box;
}

body{
margin:0;
font-family:Arial,sans-serif;
background:var(--bg);
color:var(--text);
overflow-x:hidden;
}

.hero{
background:linear-gradient(135deg,#61c7ff,#b687ff);
padding:20px;
min-height:100vh;
}

nav{
max-width:1200px;
margin:auto;
display:flex;
justify-content:space-between;
align-items:center;
}

.logo{
width:64px;
height:64px;
border-radius:18px;
}

.logoWrap{
display:flex;
align-items:center;
gap:14px;
font-weight:bold;
color:white;
}

.menu{
display:flex;
gap:20px;
}

.menu a{
color:white;
text-decoration:none;
font-weight:bold;
}

.heroContent{
max-width:1200px;
margin:60px auto;
display:grid;
grid-template-columns:1fr 1fr;
gap:50px;
align-items:center;
}

.heroText h1{
font-size:4rem;
color:white;
line-height:1;
}

.big{
font-size:1.3rem;
color:white;
}

.heroImage img{
width:100%;
border-radius:24px;
animation:float 4s ease-in-out infinite;
box-shadow:0 20px 60px rgba(0,0,0,0.25);
}

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

.buttons{
display:flex;
gap:16px;
margin-top:30px;
flex-wrap:wrap;
}

.store{
padding:16px 22px;
border-radius:14px;
font-weight:bold;
text-decoration:none;
color:white;
}

.apple{
background:black;
}

.google{
background:#1fa855;
}

.section{
max-width:1200px;
text-align:center;

    border-radius:18px;
    padding:40px;
    margin:30px 0;
    box-shadow:0 4px 20px rgba(0,0,0,0.26);
}

.cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:20px;
}

.card{
background:var(--card);
padding:30px;
border-radius:24px;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

.gallery{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:18px;
}

.gallery img{
width:100%;
border-radius:18px;
transition:0.2s;
}

.gallery img:hover{
transform:scale(1.03);
}

.videoWrap{
position:relative;
padding-bottom:56.25%;
height:0;
overflow:hidden;
border-radius:24px;
}

.videoWrap iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border:0;
}

footer{
padding:60px 20px;
text-align:center;
}

@media(max-width:900px){

.heroContent{
grid-template-columns:1fr;
}

.heroText h1{
font-size:2.5rem;
}

nav{
flex-direction:column;
gap:20px;
}

}