:root{
  --bg:#0f172a; --card:#0b1224; --muted:#94a3b8; --text:#e2e8f0; --accent:#22c55e; --accent2:#38bdf8;
  --shadow:0 10px 30px rgba(2,6,23,.4); --radius:18px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}
a{color:var(--accent)}
.container{max-width:1120px;margin:0 auto;padding:0 16px}
.topbar{position:sticky;top:0;z-index:20;background:rgba(15,23,42,.7);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid rgba(148,163,184,.15)}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800}
.dot{width:12px;height:12px;border-radius:999px;background:linear-gradient(135deg,var(--accent),var(--accent2))}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:999px;border:1px solid rgba(148,163,184,.25);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));color:var(--text);text-decoration:none;font-weight:600}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#041014;border:none}
.hero{padding:64px 0 24px;background:radial-gradient(800px 300px at 10% -20%, rgba(56,189,248,.25), transparent),radial-gradient(800px 300px at 90% -20%, rgba(34,197,94,.25), transparent)}
.hero-inner{display:grid;grid-template-columns:1.15fr .85fr;gap:32px;align-items:center}
.card{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(148,163,184,.15);padding:24px;border-radius:var(--radius);box-shadow:var(--shadow)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.section{padding:52px 0}
.list{display:grid;gap:12px;margin:18px 0 0;padding:0}
.list li{list-style:none;padding:14px 16px;border:1px dashed rgba(148,163,184,.25);border-radius:12px;background:rgba(255,255,255,.03)}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.badges{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0 8px}
.badge{font-size:12px;padding:6px 10px;border-radius:999px;border:1px solid rgba(148,163,184,.2);opacity:.9}
.ad{display:block;min-height:90px;margin:24px 0;border-radius:12px;overflow:hidden;background:rgba(255,255,255,.04);border:1px dashed rgba(148,163,184,.25)}
.footer{padding:40px 0;color:var(--muted);border-top:1px solid rgba(148,163,184,.15)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.snippet{white-space:pre-wrap;background:rgba(2,6,23,.6);padding:14px;border-radius:12px;border:1px solid rgba(148,163,184,.2)}
.newsletter{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.newsletter .hp{display:none}
.newsletter .consent{grid-column:1/-1;font-size:14px;color:var(--muted)}
.note{font-size:12px;color:var(--muted)}

/* Quiz UI */
.quiz-q{margin:0 0 8px;font-weight:700}
.answers{display:grid;gap:10px;margin-top:10px}
.answer{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:10px;border:1px solid rgba(148,163,184,.2);cursor:pointer}
.answer input{margin-top:3px}
.answer:hover{background:rgba(148,163,184,.06)}
.answer.selected{border-color:rgba(56,189,248,.5);background:rgba(56,189,248,.08)}

.quiz-nav{display:flex;justify-content:space-between;gap:12px;margin-top:16px}
.progress{height:10px;background:rgba(148,163,184,.2);border-radius:999px;overflow:hidden}
.progress > span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2))}

@media (max-width:980px){
  .hero-inner{grid-template-columns:1fr}
  .grid-3,.grid-2{grid-template-columns:1fr}
}
/* === Wynik – efekty wizualne === */
.result {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}

/* Nagłówek wyniku */
.result .headline {
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.1;
  margin: 0 0 8px;
  letter-spacing: .2px;
}

/* Zły wynik: mocna czerwień + lekkie trzęsienie */
.result.bad {
  background: rgba(239,68,68,.10);
  border: 1px solid rgba(239,68,68,.45);
}
.result.bad .headline {
  color: #ef4444;
  text-shadow: 0 2px 12px rgba(239,68,68,.45);
  animation: mk-shake .45s ease-in-out both;
}
@keyframes mk-shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* Średni wynik: bursztynowo */
.result.mid {
  background: rgba(245,158,11,.10);
  border: 1px solid rgba(245,158,11,.35);
}
.result.mid .headline { color: #f59e0b; }

/* Dobry wynik: zielony + płótno na confetti */
.result.good {
  background: rgba(16,185,129,.10);
  border: 1px solid rgba(16,185,129,.45);
}
.result.good .headline {
  color: #10b981;
  text-shadow: 0 2px 12px rgba(16,185,129,.35);
}

/* Canvas na fajerwerki/confetti */
.confetti-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.result > * { position: relative; z-index: 1; }

/* Etykiety/pigułki */
.pill {
  display: inline-block;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.25);
  color: #cbd5e1;
  margin-bottom: 8px;
}