
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',sans-serif;background:#fff;color:#0f172a;overflow-x:hidden}
.container{width:min(1200px,92%);margin:auto}
img{max-width:100%;display:block}
a{text-decoration:none}

.header{position:sticky;top:0;background:#ffffffeb;border-bottom:1px solid #e2e8f0;backdrop-filter:blur(10px);z-index:100}
.nav-wrap{display:flex;justify-content:space-between;align-items:center;padding:18px 0;gap:20px}
.logo h1{font-size:28px;font-weight:900}
.logo p{color:#64748b}
nav{display:flex;gap:24px;flex-wrap:wrap}
nav a{font-weight:800;color:#475569}

.hero{padding:80px 0;background:linear-gradient(to bottom right,#ecfeff,#fff,#eff6ff)}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.badge{display:inline-block;padding:10px 18px;background:#fff;border:1px solid #bae6fd;border-radius:999px;font-weight:900;color:#0891b2;margin-bottom:22px}
.hero-content h2{font-size:64px;line-height:1;font-weight:900;margin-bottom:24px}
.hero-content p{font-size:20px;line-height:1.7;color:#475569;margin-bottom:30px}
.hero-buttons{display:flex;gap:14px;flex-wrap:wrap}

.btn{padding:15px 24px;border-radius:18px;font-weight:900}
.primary{background:#0891b2;color:#fff}
.secondary{border:1px solid #cbd5e1;color:#0f172a;background:#fff}

.hero-image{height:560px;width:100%;object-fit:cover;border-radius:32px;box-shadow:0 25px 50px rgba(15,23,42,.12)}

.content-section{padding:90px 0}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.two-col.reverse{direction:rtl}
.two-col.reverse > *{direction:ltr}

.two-col h2{font-size:48px;font-weight:900;line-height:1.1;margin-bottom:20px}
.two-col p{font-size:18px;color:#64748b;line-height:1.7}

.image-box img{height:420px;width:100%;object-fit:cover;border-radius:28px}

.form-wrap{background:#fff;border:1px solid #e2e8f0;border-radius:28px;padding:32px;box-shadow:0 25px 50px rgba(15,23,42,.06)}
.form-wrap h2{font-size:42px;font-weight:900;margin-bottom:24px}

form input,form textarea{
width:100%;
padding:16px;
margin-bottom:16px;
border:1px solid #cbd5e1;
border-radius:16px;
font:inherit;
}

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

form button{
width:100%;
padding:16px;
border:none;
border-radius:18px;
background:#0891b2;
color:#fff;
font-weight:900;
font-size:16px;
cursor:pointer;
}

.footer{background:#020617;color:#fff;padding:70px 0;margin-top:60px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
.footer h3,.footer h4{font-size:24px;font-weight:900;margin-bottom:16px}
.footer p,.footer li,.footer a{color:#94a3b8;list-style:none;margin-bottom:10px}

@media(max-width:992px){
.hero-grid,.two-col,.footer-grid{
grid-template-columns:1fr;
}

.hero-content h2{
font-size:48px;
}

.hero-image{
height:420px;
}

.two-col h2{
font-size:38px;
}
}

@media(max-width:640px){
nav{
display:grid;
grid-template-columns:repeat(2,1fr);
width:100%;
gap:10px;
}

nav a{
text-align:center;
padding:10px;
background:#f8fafc;
border:1px solid #e2e8f0;
border-radius:999px;
}

.hero-content h2{
font-size:38px;
}

.hero-content p{
font-size:16px;
}

.hero-image{
height:320px;
}

.hero-buttons{
flex-direction:column;
}

.btn{
width:100%;
text-align:center;
}

.image-box img{
height:300px;
}

.form-wrap h2{
font-size:34px;
}

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