*{box-sizing:border-box;margin:0;padding:0;font-family:Inter,Arial,sans-serif}
body{background:#f7f7f7;color:#1b1b1b;line-height:1.7}
a{text-decoration:none;color:inherit}

header{position:sticky;top:0;background:#fff;border-bottom:1px solid #eee;z-index:100}
nav{max-width:1100px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:12px}
nav .logo{font-weight:800;font-size:20px}
nav a{margin-left:14px;padding:6px 10px;border-radius:10px}
nav a:hover, nav a.active{background:#eef2ff}

.hero{min-height:65vh;display:flex;align-items:center;color:#fff;text-align:center;background-size:cover;background-position:center;position:relative}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom, rgba(0,0,0,.4), rgba(0,0,0,.6))}
.hero .content{z-index:2;max-width:650px;margin:auto}
.hero h1{font-size:36px;margin-bottom:12px}
.hero p{opacity:.9;margin-bottom:14px}
.btn{display:inline-block;background:#3b6cff;color:#fff;padding:10px 16px;border-radius:10px}
.btn-outline{border:1px solid #3b6cff;color:#3b6cff;padding:10px 16px;border-radius:10px}

.section{max-width:1100px;margin:60px auto;padding:0 10px}
.grid-3{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:#fff;border:1px solid #eee;border-radius:18px;padding:18px;box-shadow:0 10px 25px rgba(0,0,0,.03);opacity:0;transform:translateY(24px);transition:.6s}
.card.show{opacity:1;transform:translateY(0)}

.banner{padding:70px 0;background:#f4f7ff;text-align:center}
footer{text-align:center;padding:16px;border-top:1px solid #eee;background:#fff;margin-top:40px}

form input,form textarea{width:100%;padding:10px;border:1px solid #ddd;border-radius:10px;margin-bottom:10px}

@media(max-width:760px){
  nav{flex-wrap:wrap}
}