:root {
  --card: #ffffff;
  --text: #151515;
  --muted: #6b7280;
  --brand: #0A66C2;
  --accent: #F97316;
  --err: #ef4444;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Arial;
  background: linear-gradient(180deg, #0A66C214, #ffffff);
  color: var(--text);
}

.hero { text-align: center; padding: 48px 16px 24px; }
.hero h1 { margin: 0 0 8px; font-size: 28px; color: var(--brand); }
.hero p { margin: 0; color: var(--muted); }

.card {
  background: var(--card);
  max-width: 720px;
  margin: 16px auto;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(2, 12, 27, 0.08);
}

label { display:block; margin-bottom:6px; font-weight:600; }
input[type="url"], input[type="email"] {
  width: 100%; height: 44px; padding: 10px 12px;
  border: 1px solid #e5e7eb; border-radius: 8px; font-size: 15px; margin-bottom: 12px;
}

button, .cta {
  display:inline-block; border:0; background: var(--brand); color:white;
  padding: 12px 18px; border-radius: 10px; font-weight:700; cursor:pointer; text-decoration:none;
}
button[disabled] { opacity:.6; cursor:not-allowed; }

.progress { width:100%; height:10px; background:#eef2f7; border-radius:999px; margin:18px 0 8px; overflow:hidden; }
.bar { height:100%; background: linear-gradient(90deg, var(--brand), var(--accent)); width:0%; transition: width .25s ease; }

.error { color: var(--err); }
.hidden { display:none; }

#result .score { font-size: 20px; margin-bottom: 10px; }
.kpis { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 16px; }
.badge { background:#f3f4f6; padding:6px 10px; border-radius:999px; font-size:13px; }

.footer { text-align:center; color:var(--muted); padding:24px 0 48px; }