:root{
  --bg:#f5f7fb;
  --card:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --line:#e5e7eb;
  --brand:#111827;
  --brand-2:#2563eb;
  --ok:#047857;
  --ok-bg:#ecfdf5;
  --bad:#b91c1c;
  --bad-bg:#fef2f2;
  --soft:#f8fafc;
  --shadow:0 12px 30px rgba(15,23,42,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, Arial, Helvetica, sans-serif;
  background:linear-gradient(180deg,#f8fafc 0%, #eef2ff 100%);
  color:var(--text);
}
a{text-decoration:none;color:inherit}
.wrap{max-width:1100px;margin:0 auto;padding:0 18px}
header.site{
  position:sticky;top:0;z-index:30;
  backdrop-filter:blur(12px);
  background:rgba(255,255,255,.72);
  border-bottom:1px solid rgba(229,231,235,.9);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:18px}
.brand{font-weight:800;font-size:20px;letter-spacing:-.02em}
.brand small{display:block;font-weight:500;color:var(--muted);font-size:11px;letter-spacing:0}
.navlinks{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.navlinks a{color:var(--muted);font-size:14px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:0 18px;border-radius:14px;border:1px solid var(--line);
  font-weight:700;cursor:pointer;transition:.18s ease;background:#fff;
}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.blue{background:var(--brand-2);border-color:var(--brand-2);color:#fff}
.btn.ghost{background:#fff;color:var(--text)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.hero{padding:56px 0 34px}
.badge{display:inline-block;background:#111827;color:#fff;padding:8px 12px;border-radius:999px;font-size:12px}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:stretch;margin-top:16px}
.card{
  background:rgba(255,255,255,.86);
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:var(--shadow);
}
.hero-main{padding:34px}
.hero-main h1{font-size:50px;line-height:1.02;letter-spacing:-.04em;margin:14px 0}
.hero-main p{font-size:18px;color:var(--muted);line-height:1.7}
.hero-side{padding:24px}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.kpi{
  border:1px solid var(--line);background:var(--soft);padding:16px;border-radius:18px
}
.kpi span{display:block;color:var(--muted);font-size:12px}
.kpi b{display:block;font-size:24px;margin-top:6px}
.section{padding:18px 0 34px}
.section h2{font-size:34px;letter-spacing:-.03em;margin:0 0 8px}
.section p.lead{color:var(--muted);margin:0 0 18px}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feature{padding:24px}
.feature h3{margin:0 0 10px}
.feature p{margin:0;color:var(--muted);line-height:1.7}
.price-card{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding:28px;align-items:center}
.price-card .left b{font-size:42px;letter-spacing:-.04em}
.price-card ul{margin:10px 0 0 18px;color:var(--muted);line-height:1.8}
.footer{padding:34px 0 60px;color:var(--muted);font-size:14px}
.quiz-top{padding:28px 0 12px}
.toolbar,.stats,.quiz-card{
  background:rgba(255,255,255,.88);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)
}
.toolbar{padding:18px}
.toolbar-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
select{
  height:46px;border-radius:14px;border:1px solid var(--line);padding:0 14px;
  font-size:15px;background:#fff;color:var(--text)
}
.stats{
  display:grid;grid-template-columns:repeat(6,1fr);gap:12px;padding:14px;margin:14px 0
}
.stat{background:var(--soft);border:1px solid var(--line);border-radius:18px;padding:14px}
.stat .label{font-size:12px;color:var(--muted)}
.stat .value{font-size:24px;font-weight:800;margin-top:6px}
.quiz-card{padding:26px}
.qtag{display:inline-block;background:#111827;color:#fff;border-radius:999px;padding:8px 11px;font-size:12px}
.qen{font-size:27px;line-height:1.42;font-weight:800;margin:14px 0 8px}
.qcn{font-size:22px;line-height:1.6;margin:0 0 20px;color:#1f2937}
.options{display:grid;gap:12px}
.option{
  width:100%;text-align:left;padding:16px;border-radius:18px;border:1px solid var(--line);
  background:#fff;cursor:pointer;transition:.15s ease
}
.option:hover{transform:translateY(-1px);border-color:#cbd5e1}
.option.correct{background:var(--ok-bg);border-color:#a7f3d0}
.option.wrong{background:var(--bad-bg);border-color:#fecaca}
.option.disabled{cursor:not-allowed}
.olabel{font-weight:800;margin-bottom:5px}
.oen{font-size:16px}
.ocn{font-size:15px;margin-top:4px;color:#374151}
.feedback{
  margin-top:18px;padding-top:18px;border-top:1px solid var(--line)
}
.good{color:var(--ok);font-weight:800}
.bad{color:var(--bad);font-weight:800}
.small{font-size:14px;color:var(--muted)}
.status-pass{color:var(--ok)}
.status-fail{color:var(--bad)}
.pill{display:inline-block;padding:5px 10px;border-radius:999px;background:var(--soft);font-size:12px;color:var(--muted)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.result-card{padding:30px}
.result-card h2{margin:0 0 8px}
.notice{background:#fff8e1;border:1px solid #f6e4a5;color:#775e00;border-radius:16px;padding:14px 16px;margin-top:14px}
@media (max-width: 900px){
  .hero-grid,.feature-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .hero-main h1{font-size:38px}
  .qen{font-size:23px}
  .qcn{font-size:19px}
}

.btnRow a.cta{cursor:pointer}

.bottom-actions{
  display:flex;
  justify-content:center;
  gap:12px;
  margin:14px 0 28px;
  flex-wrap:wrap;
}
.qtag{margin-bottom:10px!important}
.qen{margin-bottom:8px!important; line-height:1.35!important}
.qcn{margin-bottom:12px!important; line-height:1.45!important}
.options{gap:10px!important}
.option{padding:12px 14px!important}
.option .olabel{margin-bottom:4px!important}
.option .oen{line-height:1.35!important}
.option .ocn{line-height:1.4!important; margin-top:2px!important}
.feedback{margin-top:12px!important; padding:14px 16px!important}
@media (max-width: 768px){
  .bottom-actions .btn{width:100%}
}