:root{--accent:#0b5fff;--accent2:#ff4d6d;--bg:#f9fbff}
*{box-sizing:border-box}
body{font-family:Inter,Poppins,Arial,sans-serif;background:linear-gradient(180deg,var(--bg),#fff);margin:0;color:#111;line-height:1.7}
.header{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#fff;padding:36px 18px;text-align:center}
.header h1{margin:0;font-size:1.8rem;letter-spacing:0.5px}
.container{max-width:1100px;margin:-40px auto 40px auto;padding:28px;background:#fff;border-radius:14px;box-shadow:0 12px 30px rgba(0,0,0,0.08)}
.hero{display:flex;gap:20px;align-items:center;margin-bottom:18px}
.hero img{width:320px;height:auto;border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,0.12)}
h1,h2{color:var(--accent);margin-top:0}
a{color:var(--accent);text-decoration:none}
a.btn{display:inline-block;background:var(--accent);color:#fff;padding:8px 14px;border-radius:8px;text-decoration:none}
.section{margin-top:18px}
.card{background:#fff;padding:14px;border-radius:10px;border:1px solid #f0f4ff;box-shadow:0 6px 18px rgba(0,0,0,0.03)}
.searchbar{display:flex;gap:8px;margin-bottom:16px}
.searchbar input{flex:1;padding:12px;border-radius:8px;border:1px solid #eee}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.city-card{background:linear-gradient(180deg,#fff,#f7fbff);padding:12px;border-radius:10px;border:1px solid #eef6ff}
footer{background:#111;color:#fff;padding:18px;text-align:center;border-radius:0 0 14px 14px;margin-top:20px}
@media(max-width:800px){.hero{flex-direction:column}.hero img{width:100%}}