:root { --primary:#2b6cb0; --primary-dark:#1e4e86; --bg:#ffffff; --text:#1a202c; --muted:#718096; --accent:#38b2ac; }
* { box-sizing:border-box }
html { scroll-behavior:smooth }
body { margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif; color:var(--text); background:var(--bg); line-height:1.6 }
a { color:var(--primary); text-decoration:none }
a:hover { color:var(--primary-dark) }
img { max-width:100%; display:block }

.container { max-width:960px; margin:0 auto; padding:16px }
.header { display:flex; align-items:center; justify-content:space-between; padding:16px 0 }
.brand { display:flex; align-items:center; gap:12px }
.brand img { width:40px; height:40px }
.brand-name { font-weight:700; font-size:18px }
.nav { display:flex; gap:16px; flex-wrap:wrap }

.hero { padding:48px 0; display:grid; gap:16px }
.hero-title { font-size:28px; font-weight:800 }
.hero-text { color:var(--muted) }
.btn { display:inline-block; padding:12px 18px; border-radius:10px; background:var(--primary); color:#fff; transition:transform .2s ease, background .2s ease }
.btn:hover { transform:translateY(-1px); background:var(--primary-dark) }
.btn-secondary { background:var(--accent); color:#073b3a }

.card { background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:16px; box-shadow:0 6px 24px rgba(0,0,0,.06) }
.grid { display:grid; gap:16px }
.grid-2 { grid-template-columns:1fr 1fr }

.footer { margin-top:48px; padding:24px 0; border-top:1px solid #e2e8f0; color:var(--muted); font-size:14px }
.footer .links { display:flex; gap:12px; flex-wrap:wrap }
.footer .contact { margin-top:8px }

.progress { height:10px; background:#edf2f7; border-radius:8px; overflow:hidden }
.progress-bar { height:100%; width:0%; background:linear-gradient(90deg,var(--primary),var(--accent)); transition:width .4s ease }
.progress-label { margin-top:8px; font-size:14px; color:var(--muted) }

.question { margin-top:16px }
.options { display:grid; gap:8px; margin-top:12px }
.options label { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid #e2e8f0; border-radius:10px }
.actions { display:flex; gap:10px; margin-top:16px }

.banner { position:fixed; left:0; right:0; bottom:0; background:#1a202c; color:#fff; padding:16px; display:flex; gap:12px; align-items:center; justify-content:center; z-index:999 }
.banner .btn { background:#38b2ac; color:#073b3a }

@media (max-width:720px) {
  .grid-2 { grid-template-columns:1fr }
  .hero-title { font-size:24px }
}