:root{
  --navy:#0a192f; --emerald:#047857; --emerald-600:#0f766e;
  --white:#ffffff; --gold:#facc15; --slate:#334155;
  --bg:#f6f9fb; --card:#ffffff; --ink:#0f1724; --muted:#6b7280;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.55}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.wrap{max-width:1100px;margin:0 auto;padding:0 16px}

.header{position:sticky;top:0;background:var(--navy);color:#fff;z-index:40;box-shadow:0 6px 18px rgba(2,6,23,.12)}
.header .wrap{display:flex;align-items:center;gap:16px;padding:12px 16px}
.logo{font-weight:800;font-size:1.15rem;letter-spacing:.2px}
.nav{margin-left:auto;display:flex;gap:14px;align-items:center}
.nav a{color:#fff;font-weight:700}
.nav a:hover{color:var(--gold);text-decoration:underline}

main{max-width:1100px;margin:14px auto;padding:0 16px}

.band{background:var(--card);border:1px solid #e6eef3;border-radius:12px;padding:16px;margin-bottom:10px;box-shadow:0 4px 12px rgba(2,6,23,.04)}
.band h1,.band h2,.band h3{margin-top:0;margin-bottom:8px}
.hero{background:linear-gradient(135deg,#fff,#eef5fb);border:1px solid #e6eef3}
.hero h1{font-size:1.65rem;color:var(--navy)}
.hero p.small{color:var(--muted);margin-top:4px}

.grid{display:grid;gap:12px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.grid.cols-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid.cols-3{grid-template-columns:1fr}}

.card{background:var(--card);border:1px solid #eaf2f7;border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.card.center{text-align:center;align-items:center}
.card h3{color:var(--emerald);margin:0;font-size:1.02rem}
.kicker{font-size:.9rem;color:var(--muted)}

.btn{display:inline-block;background:var(--emerald);color:#fff;padding:10px 14px;border-radius:10px;font-weight:800}
.btn:hover{filter:brightness(.95)}
.btn.outline{background:#fff;border:2px solid var(--emerald);color:var(--emerald)}

.form{padding:6px}
label{display:block;margin:8px 0 6px;font-weight:700}
input,select{width:100%;padding:10px;border:1px solid #d1e6ea;border-radius:8px;background:#fff}
.result{margin-top:10px;font-weight:800;color:var(--emerald)}
.small{color:var(--muted);font-size:.95rem}

.ads{margin:8px 0;text-align:center}

.blog-list{display:grid;gap:12px;grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.blog-list{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.blog-list{grid-template-columns:1fr}}

.blog-item{display:flex;flex-direction:column;border-radius:10px;overflow:hidden;border:1px solid #e6eef3;background:#fff}
.blog-item img{height:170px;object-fit:cover}
.blog-item .meta{padding:12px}
.blog-item h4{margin:0 0 6px;color:var(--navy)}
.blog-item p{margin:0;color:var(--muted)}

footer{margin:12px 0 0;background:var(--navy);color:#fff;padding:14px 18px;text-align:center;border-radius:8px}
.footer-small{color:#cbd5e1;font-size:.95rem}