/* ================================
   GLOBAL VARIABLES
================================ */

:root{
--bg:#f5f5f7;
--card:#ffffff;
--text:#1d1d1f;
--muted:#6e6e73;
--accent:#0a84ff;
--radius:22px;
--maxw:1100px;
--shadow:0 20px 60px rgba(0,0,0,0.08);
--font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* ================================
   RESET
================================ */

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
margin:0;
font-family:var(--font);
background:var(--bg);
color:var(--text);
-webkit-font-smoothing:antialiased;
}

img{
max-width:100%;
height:auto;
display:block;
}

a{
text-decoration:none;
color:inherit;
}

/* ================================
   CONTAINER
================================ */

.container{
max-width:var(--maxw);
margin:auto;
padding:0 20px;
}

/* ================================
   HEADER
================================ */

.site-header{
position:sticky;
top:0;
background:rgba(245,245,247,0.9);
backdrop-filter:blur(10px);
border-bottom:1px solid rgba(0,0,0,0.05);
z-index:100;
}

.site-header__inner{
display:flex;
align-items:center;
justify-content:space-between;
padding:14px 0;
}

.brand{
display:flex;
align-items:center;
gap:10px;
}

.logo{
width:36px;
height:36px;
object-fit:contain;
}

.brand-text{
display:flex;
flex-direction:column;
}

.brand-title{
font-size:15px;
font-weight:600;
}

.brand-subtitle{
font-size:12px;
color:var(--muted);
}

/* NAVIGATION */

.main-nav{
display:flex;
gap:20px;
align-items:center;
}

.nav-link{
font-size:14px;
color:var(--muted);
transition:0.2s;
}

.nav-link:hover{
color:var(--text);
}

/* BURGER MENU */

.menu-toggle{
display:none;
font-size:26px;
cursor:pointer;
}

/* ================================
   PAGE
================================ */

.page{
max-width:var(--maxw);
margin:40px auto;
padding:0 20px;
}

/* ================================
   HERO
================================ */

.hero{
background:var(--card);
border-radius:var(--radius);
padding:60px;
box-shadow:var(--shadow);
}

.hero-wrapper{
display:flex;
align-items:center;
gap:60px;
}

.hero__content{
flex:1;
}

.logo-inline{
width:32px;
margin-bottom:10px;
}

.hero__title{
font-size:36px;
margin:12px 0;
line-height:1.2;
}

.hero__subtitle{
color:var(--muted);
max-width:520px;
font-size:16px;
}

/* BUTTONS */

.hero__actions{
margin-top:22px;
display:flex;
gap:14px;
flex-wrap:wrap;
}

.btn{
display:flex;
align-items:center;
gap:10px;
padding:12px 18px;
border-radius:12px;
font-weight:600;
font-size:15px;
transition:0.2s;
}

.btn img.icon{
width:20px;
}

.btn--play{
background:#000;
color:#fff;
}

.btn--play:hover{
opacity:0.9;
}

.btn--apple{
background:#fff;
border:1px solid #ddd;
}

.btn--apple:hover{
background:#f5f5f7;
}

/* LINKS */

.hero__links{
margin-top:20px;
color:var(--muted);
font-size:14px;
}

.hero__links a{
text-decoration:underline;
}

.meta{
margin-top:10px;
font-size:13px;
color:var(--muted);
}

/* ================================
   DEVICE PREVIEW
================================ */

.hero__visual{
width:260px;
}

.device-mock{
background:#f5f5f7;
border-radius:18px;
padding:20px;
}

.phone-frame{
border-radius:16px;
overflow:hidden;
}

.phone-screenshot{
width:100%;
}

/* ================================
   FEATURES
================================ */

.features{
display:flex;
gap:30px;
margin-top:40px;
}

.feature{
flex:1;
}

.feature h3{
margin-bottom:6px;
}

.feature p{
color:var(--muted);
}

/* ================================
   PAGE CARDS (CONTACT + DELETE)
================================ */

.card-page{
background:white;
padding:40px;
border-radius:22px;
box-shadow:var(--shadow);
}

.page-title{
font-size:32px;
margin-bottom:10px;
}

.page-desc{
color:var(--muted);
margin-bottom:30px;
}

/* GRID */

.page-grid{
display:grid;
grid-template-columns:1fr 340px;
gap:40px;
}

/* INFO CARD */

.info-card{
background:#f5f5f7;
padding:25px;
border-radius:14px;
}

/* FORM */

.form{
display:flex;
flex-direction:column;
gap:14px;
margin-top:20px;
}

.form input,
.form textarea{
padding:14px;
border-radius:10px;
border:1px solid #d2d2d7;
font-size:14px;
}

.form textarea{
min-height:120px;
resize:vertical;
}

/* PREVIEW */

.preview-box{
background:#f5f5f7;
border-radius:18px;
padding:40px;
display:flex;
align-items:center;
justify-content:center;
}

.preview-box img{
max-width:200px;
}

/* ================================
   FOOTER
================================ */

.site-footer{
margin-top:60px;
padding:30px 0;
}

.site-footer__inner{
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
}

.footer-left{
display:flex;
gap:10px;
align-items:center;
}

.footer-logo{
width:36px;
}

.footer-text small{
color:var(--muted);
}

.footer-right{
display:flex;
gap:14px;
}

.footer-link{
font-size:14px;
color:var(--muted);
}

/* ================================
   RESPONSIVE
================================ */

@media (max-width:900px){

.hero-wrapper{
flex-direction:column;
text-align:center;
}

.hero{
padding:40px 20px;
}

.hero__visual{
order:-1;
width:200px;
}

.features{
flex-direction:column;
}

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

.preview-box{
display:none;
}

.site-footer__inner{
flex-direction:column;
text-align:center;
}

}

/* MOBILE */

@media (max-width:700px){

.menu-toggle{
display:block;
}

.main-nav{
display:none;
position:absolute;
top:65px;
left:0;
width:100%;
background:white;
flex-direction:column;
padding:20px;
gap:16px;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

.main-nav.active{
display:flex;
}

}

/* SMALL MOBILE */

@media (max-width:600px){

.hero__title{
font-size:26px;
}

.hero__subtitle{
font-size:14px;
}

.btn{
width:100%;
justify-content:center;
}

.page-title{
font-size:26px;
}

.card-page{
padding:30px 20px;
}

}