:root{
  --bg:#0b1220; --card:#0f1b31; --soft:#122138; --muted:#9fb3c8; --txt:#e8f0fb;
  --accent:#5fa8ff; --ok:#3dd68c; --danger:#ff6b6b; --border:#1e2a3c;
}
*{box-sizing:border-box} body{margin:0;background:linear-gradient(180deg,#0a1020,#0a1328 35%,#0a1220);color:var(--txt);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.wrap{max-width:1100px;margin:0 auto;padding:1rem}
.row{display:flex;gap:.6rem;flex-wrap:wrap} .between{justify-content:space-between} .center{align-items:center} .gap{gap:.6rem}
a{color:#d9e7ff;text-decoration:none}
.top{position:sticky;top:0;background:rgba(10,16,32,.8);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);z-index:10}
.brand{font-weight:800}
.btn{background:var(--accent);color:#061426;border:0;padding:.6rem .9rem;border-radius:.7rem;cursor:pointer;font-weight:700}
.btn.ghost{background:transparent;border:1px solid var(--border);color:var(--txt)}
.btn.small{padding:.45rem .7rem;font-weight:600}
.pill{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .6rem;border-radius:999px;background:#0e1930;border:1px solid var(--border)}
.pill input{accent-color:var(--accent)}
.pill.locked{opacity:.6;cursor:not-allowed;position:relative}
.pill.locked:hover::after{content:attr(data-tip);position:absolute;left:0;top:calc(100% + 6px);background:#081226;border:1px solid var(--border);padding:.35rem .5rem;border-radius:.5rem;color:var(--muted);white-space:nowrap}
.chip{background:#0e1930;border:1px solid var(--border);border-radius:999px;color:#d9e7ff;padding:.4rem .7rem;cursor:pointer}
.chip.active{background:#10264a;border-color:#214a82}
.chip.locked{opacity:.45;position:relative;cursor:not-allowed}
.chip.locked:hover::after{content:attr(data-tip);position:absolute;left:0;top:calc(100% + 6px);background:#081226;border:1px solid var(--border);padding:.35rem .5rem;border-radius:.5rem;color:var(--muted);white-space:nowrap}
.grid{display:grid;grid-template-columns:1fr;gap:1rem} @media(min-width:980px){.grid{grid-template-columns:280px 1fr}}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1rem}
.card-soft{background:var(--soft);border:1px dashed var(--border);border-radius:12px;padding:.75rem}
.sticky{position:sticky;top:76px;align-self:start}
.progress{display:flex;gap:4px;flex-wrap:wrap;margin:.5rem 0}
.dot{width:9px;height:9px;border-radius:50%;background:#22314a}
.dot.answered{background:#6ea8ff}
.stage{display:flex;flex-direction:column;gap:.75rem}
.q{border:1px solid var(--border);border-radius:14px;padding:1rem;background:#0d162a}
.opts{display:grid;gap:.5rem;margin-top:.6rem}
.opt{display:flex;gap:.6rem;border:1px solid var(--border);background:#0e1a31;padding:.65rem .75rem;border-radius:10px;cursor:pointer}
.opt.correct{border-color:#2b8a57;background:rgba(61,214,140,.08)}
.opt.wrong{border-color:#8a2b2b;background:rgba(255,107,107,.08)}
.explain{margin-top:.6rem;padding:.7rem;border-left:3px solid #2b8a57;background:#0d1e2f;border-radius:8px}
.muted{color:var(--muted)} .tiny{font-size:.85rem}
.foot{margin:1.5rem 0}
/* Modal & microinteractions */
.modal{position:fixed;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.55)}
.modal.hidden{display:none}
.modal-card{background:#0f1b31;border:1px solid var(--border);border-radius:16px;max-width:520px;width:92%;padding:1rem;animation:pop .18s ease-out;position:relative}
.close{position:absolute;right:10px;top:10px;background:transparent;border:1px solid var(--border);color:#d9e7ff;border-radius:10px;padding:.25rem .5rem;cursor:pointer}
.tick li{margin:.35rem 0}
@keyframes pop{from{transform:scale(.97);opacity:.7}to{transform:scale(1);opacity:1}}
/* Tooltip locks */
.pill.locked::before, .chip.locked::before{content:'🔒';margin-right:.3rem}

/* --- Mobile polish ------------------------------------------------------- */
:root{
  --space: 20px;
  --radius: 14px;
}
img, svg, canvas { max-width: 100%; height: auto; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
button, .btn, .option, .pill, .chip { min-height: 44px; }
html { font-size: 16px; }
body { line-height: 1.6; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 var(--space); }
.card { border-radius: var(--radius); }
.quiz .options li{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:12px; }
.quiz .options li + li{ margin-top:10px; }
.quiz-controls{ position: sticky; bottom: 0; left: 0; right: 0; padding:10px 0; background: rgba(10,16,32,0.9); backdrop-filter: blur(6px); border-top: 1px solid rgba(255,255,255,.08); }
.btn, .button { width: 100%; padding: 14px 16px; font-weight: 600; }
.grid, .cards, .features, .pricing-grid{ display: grid; gap: var(--space); }
@media (min-width: 900px){
  .cards { grid-template-columns: repeat(3, 1fr); }
  .pricing-grid { grid-template-columns: repeat(3, 1fr); }
  .btn, .button { width: auto; }
}
@media (max-width: 900px){
  .hero { padding: 24px 0 8px; }
  .hero h1 { font-size: 1.6rem; line-height: 1.2; }
  .hero p  { font-size: 1rem; opacity: .9; }
  nav, .site-header { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(8px); }
  .cards, .pricing-grid { grid-template-columns: 1fr; }
  .container { padding: 0 14px; }
}
section, .container { overflow-x: clip; }
input[type="radio"], input[type="checkbox"] { width: 20px; height: 20px; }
.toast{ position: fixed; bottom: 14px; left: 14px; z-index: 9999; background: #0f1b31; color: #e8f0fb; padding: 10px 12px; border-radius: 12px; border: 1px solid #1e2a3c; }

@media (max-width: 900px){
  .sticky{position: static;}
  .grid{grid-template-columns: 1fr !important;}
  #stage{min-height: 60vh;}
}


/* === Final Topics contrast (closed vs open) === */
/* Closed (on dark header): make toggle readable */
#topicsBtn { color:#e6f0ff !important; opacity:1 !important; }
/* Open modal (light card): ensure dark text */
#topicsModal .card { background:#ffffff !important; color:#0f172a !important; }
#topicsModal label { color:#0f172a !important; }
#topicsModal .muted { color:#475569 !important; opacity:1 !important; }
/* Ensure icons inherit text color */
#topicsBtn svg, #topicsModal svg { fill: currentColor !important; }



/* === Revise page: gentle spacing polish (CSS-only, safe) === */
.chip { margin: .1rem .12rem; padding: .38rem .7rem; }          /* slightly bigger tap target */
#countRow { margin-top: .6rem; gap: .5rem; flex-wrap: wrap; }
#countRow .chip { margin: .12rem .08rem; }
#startBtn { padding: .55rem 1rem; border-radius: 10px; }

#quiz { margin-top: 1rem; padding: 1rem 1.1rem; }               /* more breathing room */
#qtext { font-size: 1.02rem; line-height: 1.6; margin: .8rem 0 1rem; }
#opts label { margin: .48rem 0; line-height: 1.5; }             /* space options a touch */
#prevBtn, #nextBtn, #finishBtn { padding: .5rem .9rem; border-radius: 8px; }

/* Desktop: a hair more room */
@media (min-width: 1024px) {
  #quiz { padding: 1.1rem 1.25rem; }
  #qtext { font-size: 1.08rem; }
}



/* === Mobile hero buttons stack (prevent overlap) === */
@media (max-width: 520px){
  a[href="rev.html"],
  a[href="industrial.html"]{
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    margin: .45rem 0;
  }
}



/* === Mobile hero CTA fix: stack buttons and prevent overlap === */
@media (max-width: 560px){
  .hero a[href="rev.html"],
  .hero a[href="industrial.html"],
  header a[href="rev.html"],
  header a[href="industrial.html"]{
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    text-align: center;
    margin: .5rem 0 !important;
  }
  .hero .cta, .hero .ctas, header .cta, header .ctas {
    display: block !important;
  }
}



/* --- Hard mobile fix to prevent CTA overlap on very narrow phones --- */
@media (max-width: 520px){
  .hero .ctas, .hero .cta{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:.75rem !important;
  }
  .hero .ctas .btn, .hero .cta .btn,
  .hero a[href="rev.html"], .hero a[href="industrial.html"]{
    display:block !important;
    width:100% !important;
    margin:.25rem 0 !important;
    box-sizing:border-box !important;
  }
}