/* ExamTestGenius base styles */
:root{
  --brand:#2F76FF; /* Wykies blue reused per instruction */
  --slate-900:#0f172a; --slate-800:#1e293b; --slate-700:#334155; --slate-100:#f1f5f9; --slate-50:#f8fafc;
  --text:#0f172a; --muted:#64748b; --bg:#ffffff;
  --radius:14px; --shadow:0 10px 30px rgba(2,8,23,0.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:var(--bg)}
a{color:var(--brand);text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.header{position:sticky;top:0;background:#fff;border-bottom:1px solid #e2e8f0;z-index:20}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px}
.nav a.logo{display:flex;align-items:center;gap:12px;font-weight:800;color:#0f172a}
.nav a.logo img{height:34px}
.nav .menu{display:flex;gap:22px}
.nav .menu a{color:#0f172a;font-weight:600}
.nav .cta{display:flex;gap:10px}
.btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:12px;padding:12px 18px;font-weight:700;cursor:pointer}
.btn-primary{background:var(--brand);color:#fff;box-shadow:var(--shadow)}
.btn-outline{background:#fff;color:var(--brand);border:2px solid var(--brand)}
.hero{background:var(--brand);color:#fff;padding:80px 0 60px;position:relative;overflow:hidden}
.hero h1{font-size:46px;line-height:1.06;margin:0 0 14px;font-weight:900}
.hero p{font-size:18px;opacity:.95;max-width:860px}
.hero .actions{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:8px;background:#fff;color:#0f172a;border-radius:999px;padding:6px 12px;font-weight:700}
.section{padding:64px 0}
.section.slate{background:var(--slate-900);color:#e2e8f0}
.section .title{font-size:34px;font-weight:900;margin:0 0 24px}
.grid{display:grid;gap:18px}
.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{background:#fff;border-radius:var(--radius);padding:18px;border:1px solid #e2e8f0;box-shadow:0 2px 10px rgba(2,8,23,.04)}
.card.dark{background:var(--slate-800);border-color:#0b1220;color:#e2e8f0}
.pill{display:flex;align-items:center;justify-content:center;border-radius:14px;height:64px;font-weight:800;color:#fff}
.pill.blue{background:#3b82f6} .pill.green{background:#10b981} .pill.purple{background:#8b5cf6}
.pill.teal{background:#14b8a6} .pill.red{background:#ef4444} .pill.orange{background:#f97316}
.pill.rose{background:#f43f5e} .pill.cyan{background:#06b6d4}
.feature{display:flex;gap:18px;align-items:flex-start}
.feature i{width:42px;height:42px;border-radius:12px;background:#fff;color:var(--brand);display:inline-flex;align-items:center;justify-content:center;font-weight:900}
.footer{background:var(--slate-900);color:#cbd5e1;padding:40px 0;border-top:1px solid #0b1220}
.footer a{color:#cbd5e1}
input,select{border:1px solid #cbd5e1;border-radius:12px;padding:10px 12px;width:100%;font:inherit}
.filterbar{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0}
.list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.list .item{border:1px solid #e2e8f0;border-radius:14px;padding:16px}
.list .item h4{margin:0 0 6px}
.kicker{letter-spacing:.08em;color:#cbd5e1;font-weight:800;text-transform:uppercase}
.note{font-size:14px;color:#64748b}
@media (max-width:960px){
  .grid.cols-4{grid-template-columns:repeat(2,1fr)}
  .list{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .grid.cols-3,.grid.cols-4{grid-template-columns:1fr}
  .filterbar{grid-template-columns:1fr 1fr}
  .hero h1{font-size:36px}
}