:root{
  --bg:#071226; --panel:rgba(10,26,53,.92); --panel2:#08172f; --text:#e5eefc; --muted:#93a8ca;
  --border:rgba(125,168,255,.22); --primary:#63c8ff; --primary-strong:#279dff; --shadow:rgba(0,0,0,.28);
}
*{box-sizing:border-box}
body{
  margin:0; font-family:'Sora',Arial,Helvetica,sans-serif; color:var(--text);
  background:radial-gradient(circle at top, rgba(39,157,255,.16), transparent 32%), linear-gradient(180deg, #08152b 0%, #071226 100%);
}
a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:980px; margin:0 auto; padding:20px 14px 40px}
.topbar,.footer{display:flex; justify-content:space-between; gap:16px; align-items:center; margin:12px 0 22px}
.logo{font-weight:800; letter-spacing:.02em; color:var(--text)}
.nav{display:flex; flex-wrap:wrap; gap:12px}
.card{
  background:var(--panel); border:1px solid var(--border); border-radius:24px; box-shadow:0 20px 50px var(--shadow);
  padding:28px 24px;
}
.hero h1{margin:0 0 10px; font-size:clamp(2rem,3vw,2.7rem)}
.hero p.lead{margin:0 0 18px; color:var(--muted); line-height:1.7; max-width:760px}
.badges{display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 0}
.badge{
  display:inline-flex; align-items:center; padding:8px 12px; border-radius:999px;
  border:1px solid var(--border); background:rgba(8,23,47,.82); color:var(--primary); font-weight:700; font-size:.9rem;
}
.section{margin-top:18px}
.section h2{margin:0 0 10px; font-size:1.35rem}
.section p, .section li{color:var(--text); line-height:1.75}
.section ul{margin:10px 0 0 18px}
.grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:14px}
.sample-grid{display:grid; grid-template-columns:1fr; gap:16px; margin-top:14px}
.tile{
  background:rgba(8,23,47,.72); border:1px solid var(--border); border-radius:18px; padding:18px 16px;
}
.tile h3{margin:0 0 8px; font-size:1.06rem}
.tile p{margin:0 0 10px; color:var(--muted); line-height:1.6}
.sample-card{
  background:rgba(8,23,47,.72); border:1px solid var(--border); border-radius:18px; padding:18px 16px;
}
.sample-card h3,.sample-card h4{margin:0 0 8px}
.sample-meta{display:flex; justify-content:flex-start; margin-bottom:10px}
.sample-pill,.pill-link{
  display:inline-flex; align-items:center; padding:7px 11px; border-radius:999px;
  border:1px solid var(--border); background:rgba(99,200,255,.08); color:var(--primary); font-weight:700; font-size:.85rem;
}
.pill-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px}
.sample-question{font-size:1rem; line-height:1.75; color:var(--text)}
.answer-list{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:10px}
.answer-item{
  display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:flex-start;
  border:1px solid var(--border); border-radius:14px; padding:12px 14px; background:rgba(5,17,34,.45);
}
.answer-correct{border-color:rgba(99,200,255,.45); background:rgba(39,157,255,.13)}
.answer-key{font-weight:800; color:var(--primary)}
.answer-text{line-height:1.6}
.answer-state{color:var(--muted); font-size:.86rem}
.sample-explanation{margin-top:14px}
.sample-explanation p,.sample-detail{margin:0 0 10px; color:var(--muted); line-height:1.75}
.section-intro{color:var(--muted)}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:20px}
.btn{
  display:inline-block; border-radius:12px; padding:12px 16px; font-weight:700;
  background:linear-gradient(135deg,var(--primary-strong),var(--primary)); color:#061120; box-shadow:0 8px 20px rgba(39,157,255,.28);
}
.btn.secondary{background:rgba(8,23,47,.82); border:1px solid var(--border); color:var(--text); box-shadow:none}
.breadcrumbs{display:flex; flex-wrap:wrap; gap:8px; color:var(--muted); margin:0 0 14px; font-size:.92rem}
.breadcrumbs span{opacity:.7}
.small{color:var(--muted); font-size:.95rem}
.footer{margin-top:26px; color:var(--muted); font-size:.92rem}
@media (max-width: 720px){ .grid{grid-template-columns:1fr} .topbar,.footer{flex-direction:column; align-items:flex-start} .cta-row .btn{width:100%; text-align:center} }