/* Adnan Khalid — PMP & PMI-ACP Prep. Deliberate single light theme (brand default). */

:root{
  --bg:#f7f6f9;
  --bg-raised:#ffffff;
  --card:#ffffff;
  --card-hover:#faf9fc;
  --border:#e4e1ea;
  --border-soft:#ececf1;
  --text:#211f2b;
  --muted:#69667a;
  --muted-2:#8c899a;
  --accent:#7c5cd6;
  --accent-soft:rgba(124,92,214,.10);
  --accent-line:rgba(124,92,214,.32);
  --good:#22935f;
  --bad:#c8433a;
  --warn:#b1780f;
  --people:#c17a2e;
  --process:#2f74b8;
  --business:#1f8f5c;
  --shadow: 0 20px 50px -24px rgba(33,21,64,.16);
  --radius:14px;
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
}

*{box-sizing:border-box; -webkit-tap-highlight-color: transparent;}
html{color-scheme: light;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--accent-soft); color:var(--text); }
a{color:inherit;}
img{max-width:100%;}
[hidden]{display:none!important;}
button{font-family:inherit;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px;}

.wrap{max-width:1080px; margin:0 auto; padding-inline:20px;}
.wrap-narrow{max-width:760px; margin:0 auto; padding-inline:20px;}

/* ---------- top nav ---------- */
.topnav{
  position:sticky; top:0; z-index:40;
  background:rgba(247,246,249,.86); backdrop-filter: blur(10px);
  border-bottom:0.5px solid var(--border);
}
.topnav-inner{
  max-width:1080px; margin:0 auto; padding:14px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{display:flex; align-items:center; gap:10px; cursor:pointer; background:none; border:none; color:inherit; padding:0;}
.brand-mark{
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(155deg, var(--accent), #5b3fae);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  padding:2px; flex:none; box-shadow:0 0 0 1px var(--border);
}
.brand-mark img{ width:100%; height:100%; border-radius:50%; object-fit:cover; object-position:center 8%; display:block; }
.brand-text{display:flex; flex-direction:column; align-items:flex-start; line-height:1.2;}
.brand-name{font-family:var(--font-display); font-size:16.5px; font-weight:600; letter-spacing:.01em;}
.brand-sub{font-size:11px; color:var(--muted); letter-spacing:.04em; font-family:var(--font-mono);}
.nav-links{display:flex; gap:4px; align-items:center;}
.nav-links button{
  background:none; border:none; color:var(--muted); font-size:14px; padding:8px 12px;
  border-radius:8px; cursor:pointer; transition:.15s;
}
.nav-links button:hover{ color:var(--text); background:var(--card); }
.nav-links button.active{ color:var(--text); background:var(--accent-soft); }
.nav-cta{
  background:var(--accent); color:#ffffff; border:none; padding:9px 16px; border-radius:9px;
  font-size:13.5px; font-weight:600; cursor:pointer; white-space:nowrap;
}
.lang-select{
  background:var(--card); color:var(--text); border:0.5px solid var(--border); border-radius:9px;
  padding:8px 10px; font-size:13px; font-family:inherit; cursor:pointer;
}
.lang-select:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.nav-hide-mobile{display:inline-flex;}
.nav-burger{
  display:none; flex-direction:column; justify-content:center; align-items:center; gap:4px;
  width:38px; height:38px; background:var(--card); border:0.5px solid var(--border); border-radius:9px; cursor:pointer;
}
.nav-burger span{ width:16px; height:1.5px; background:var(--text); border-radius:1px; transition:.18s; }
.nav-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }
.mobile-menu{
  display:none; flex-direction:column; gap:2px; padding:10px 20px 16px; border-top:0.5px solid var(--border-soft);
  background:var(--bg-raised);
}
.mobile-menu button{
  background:none; border:none; color:var(--text); font-size:15px; text-align:left; padding:12px 4px;
  border-bottom:0.5px solid var(--border-soft); cursor:pointer;
}
.mobile-menu .nav-cta{ text-align:center; border-bottom:none; margin-top:8px; }
@media (max-width:680px){
  .nav-hide-mobile{display:none;}
  .brand-sub{display:none;}
  .nav-burger{display:flex;}
  .mobile-menu:not([hidden]){display:flex;}
}

/* ---------- hero ---------- */
.hero{ padding:56px 0 44px; border-bottom:0.5px solid var(--border); animation:sectionRise .5s cubic-bezier(.2,.7,.3,1) both; }
.hero-grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:44px; align-items:center; }
@media (max-width:860px){ .hero-grid{ grid-template-columns:1fr; gap:32px; } .hero-avatar-card{ order:-1; max-width:280px; margin:0 auto; } }
.hero-avatar-card{
  background:var(--card); border:0.5px solid var(--border); border-radius:20px; padding:26px 24px;
  text-align:center; position:relative; box-shadow:var(--shadow);
}
.hero-avatar-glow{
  position:absolute; inset:-30% -30% auto -30%; height:60%; border-radius:50%;
  background:radial-gradient(circle, var(--accent-soft), transparent 70%); z-index:0; pointer-events:none;
}
.hero-avatar-photo{
  width:104px; height:104px; border-radius:50%; margin:0 auto 16px; position:relative; z-index:1;
  background:linear-gradient(155deg, var(--accent), #5b3fae); padding:3px;
  animation:avatarDance 2.4s ease-in-out infinite;
  transform-origin:50% 90%;
}
.hero-avatar-photo img{ width:100%; height:100%; border-radius:50%; object-fit:cover; object-position:center 8%; display:block; border:2.5px solid var(--card); }
@keyframes avatarDance{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  15%{ transform:translateY(-9px) rotate(-7deg); }
  30%{ transform:translateY(0) rotate(5deg); }
  45%{ transform:translateY(-6px) rotate(-4deg); }
  60%{ transform:translateY(0) rotate(6deg); }
  80%{ transform:translateY(-4px) rotate(-2deg); }
}
.hero-avatar-name{ font-family:var(--font-display); font-size:18px; font-weight:600; position:relative; z-index:1; }
.hero-avatar-cred{ font-family:var(--font-mono); font-size:11.5px; color:var(--accent); letter-spacing:.03em; margin-top:3px; position:relative; z-index:1; }
.hero-avatar-note{ font-size:13px; color:var(--muted); margin:12px 0 0; line-height:1.55; position:relative; z-index:1; }
.eyebrow{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--accent); display:inline-flex; align-items:center; gap:8px; margin-bottom:18px;
}
.eyebrow::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--accent);}
.hero h1{
  font-family:var(--font-display); font-weight:600; font-size:clamp(30px,5vw,48px);
  line-height:1.08; letter-spacing:-0.01em; margin:0 0 18px; text-wrap:balance; max-width:15ch;
}
.hero h1 em{ font-style:italic; color:var(--accent); }
.hero p.lede{ font-size:17px; color:var(--muted); max-width:56ch; margin:0 0 28px; }
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:36px;}
.btn{
  border-radius:10px; padding:12px 20px; font-size:14.5px; font-weight:600; cursor:pointer;
  border:0.5px solid transparent; display:inline-flex; align-items:center; gap:8px; transition:.15s;
}
.btn:active{ transform:scale(.96); }
.btn-primary{ background:var(--accent); color:#ffffff; }
.btn-primary:hover{ background:#6a4bc9; transform:translateY(-1px); box-shadow:0 8px 18px -10px rgba(124,92,214,.5); }
.btn-ghost{ background:var(--card); color:var(--text); border-color:var(--border); }
.btn-ghost:hover{ background:var(--card-hover); border-color:var(--accent-line); transform:translateY(-1px); }
.nav-cta:active, .task-row-slide-btn:active{ transform:scale(.94); }
.hero-stats{display:flex; gap:0; flex-wrap:wrap; border:0.5px solid var(--border); border-radius:var(--radius); overflow:hidden;}
.hero-stat{flex:1; min-width:130px; padding:16px 18px; border-right:0.5px solid var(--border);}
.hero-stat:last-child{border-right:none;}
.hero-stat .n{font-family:var(--font-mono); font-size:22px; font-weight:600; color:var(--accent); font-variant-numeric:tabular-nums;}
.hero-stat .l{font-size:12px; color:var(--muted); margin-top:2px;}

/* ---------- domain overview cards ---------- */
.section{ padding:52px 0; border-bottom:0.5px solid var(--border); animation:sectionRise .5s cubic-bezier(.2,.7,.3,1) both; }
@keyframes sectionRise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:26px; flex-wrap:wrap; }
.section-head h2{ font-family:var(--font-display); font-size:clamp(22px,3vw,28px); margin:0 0 6px; font-weight:600; }
.section-head p{ color:var(--muted); margin:0; max-width:56ch; font-size:14.5px; }

.domain-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.domain-grid > *{ opacity:0; animation:gridPop .45s cubic-bezier(.25,.6,.3,1) forwards; }
.domain-grid > *:nth-child(1){ animation-delay:.06s; }
.domain-grid > *:nth-child(2){ animation-delay:.13s; }
.domain-grid > *:nth-child(3){ animation-delay:.2s; }
@keyframes gridPop{ from{ opacity:0; transform:translateY(12px) scale(.98); } to{ opacity:1; transform:translateY(0) scale(1); } }
@media (max-width:760px){ .domain-grid{ grid-template-columns:1fr; } }
.domain-card{
  background:var(--card); border:0.5px solid var(--border); border-radius:var(--radius);
  padding:22px; cursor:pointer; transition:.15s; position:relative; overflow:hidden;
}
.domain-card:hover{ border-color:var(--accent-line); transform:translateY(-3px); box-shadow:0 14px 30px -18px rgba(33,21,64,.22); }
.domain-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--dc);
}
.domain-card .code{
  font-family:var(--font-mono); font-size:11px; color:var(--dc); letter-spacing:.06em;
  display:flex; align-items:center; gap:8px; margin-bottom:10px;
}
.domain-card .code .dot{width:7px; height:7px; border-radius:50%; background:var(--dc);}
.domain-card h3{ font-family:var(--font-display); font-size:19px; margin:0 0 8px; font-weight:600; }
.domain-card p{ font-size:13.5px; color:var(--muted); margin:0 0 16px; }
.domain-card .meta{ display:flex; justify-content:space-between; align-items:center; font-size:12.5px; color:var(--muted-2); font-family:var(--font-mono); }
.domain-card .weight{ color:var(--dc); font-weight:600; }
.progress-track{ height:4px; background:var(--border-soft); border-radius:99px; margin-top:12px; overflow:hidden; }
.progress-fill{ height:100%; background:var(--dc); border-radius:99px; transition:width .3s; }
.mock-hub-cta{ font-family:var(--font-mono); font-size:12.5px; font-weight:600; }

/* ---------- chapter list ---------- */
.task-list{ display:flex; flex-direction:column; gap:10px; }
.task-list > *{ opacity:0; animation:rowSlide .4s ease forwards; }
.task-list > *:nth-child(1){ animation-delay:.03s; }
.task-list > *:nth-child(2){ animation-delay:.07s; }
.task-list > *:nth-child(3){ animation-delay:.11s; }
.task-list > *:nth-child(4){ animation-delay:.15s; }
.task-list > *:nth-child(5){ animation-delay:.19s; }
.task-list > *:nth-child(n+6){ animation-delay:.22s; }
@keyframes rowSlide{ from{ opacity:0; transform:translateX(-10px); } to{ opacity:1; transform:translateX(0); } }
.task-row{
  display:flex; align-items:center; gap:14px; background:var(--card); border:0.5px solid var(--border);
  border-radius:11px; padding:14px 16px; cursor:pointer; transition:.15s;
}
.task-row:hover{ border-color:var(--accent-line); background:var(--card-hover); box-shadow:0 8px 20px -16px rgba(33,21,64,.25); }
.task-row .num{
  font-family:var(--font-mono); font-size:12px; color:#ffffff; background:var(--dc);
  width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  flex:none; font-weight:700;
}
.task-row .title{ font-size:14.5px; font-weight:500; flex:1; }
.task-row .arrow{ color:var(--muted-2); font-size:14px; flex:none; }
.task-row .check{ color:var(--good); font-size:15px; flex:none; }
.task-row-slide-btn{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.03em; color:var(--muted);
  background:var(--bg-raised); border:0.5px solid var(--border); border-radius:7px; padding:5px 10px;
  cursor:pointer; flex:none; transition:.12s;
}
.task-row-slide-btn:hover{ color:var(--accent); border-color:var(--accent-line); }

/* ---------- slide deck ---------- */
.slide-frame{
  background:var(--card); border:0.5px solid var(--border); border-radius:20px;
  padding:30px 34px 26px; box-shadow:var(--shadow);
  min-height:420px; max-height:min(620px,72vh);
  display:flex; flex-direction:column; overflow:hidden;
}
.slide-frame.dir-none{ animation:slideFadeIn .32s cubic-bezier(.2,.7,.3,1); }
.slide-frame.dir-next{ animation:slideInFromRight .34s cubic-bezier(.2,.7,.3,1); }
.slide-frame.dir-prev{ animation:slideInFromLeft .34s cubic-bezier(.2,.7,.3,1); }
@keyframes slideFadeIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
@keyframes slideInFromRight{ from{ opacity:0; transform:translateX(26px); } to{ opacity:1; transform:translateX(0); } }
@keyframes slideInFromLeft{ from{ opacity:0; transform:translateX(-26px); } to{ opacity:1; transform:translateX(0); } }
.slide-text > div > *{ opacity:0; animation:contentRise .45s ease forwards; }
.slide-text > div > *:nth-child(1){ animation-delay:.04s; }
.slide-text > div > *:nth-child(2){ animation-delay:.11s; }
.slide-text > div > *:nth-child(3){ animation-delay:.18s; }
.slide-text > div > *:nth-child(4){ animation-delay:.25s; }
.slide-text > div > *:nth-child(n+5){ animation-delay:.3s; }
@keyframes contentRise{ from{ opacity:0; transform:translateY(7px); } to{ opacity:1; transform:translateY(0); } }
@media (max-width:640px){ .slide-frame{ padding:22px 18px 20px; min-height:380px; } }
.slide-topbar{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding-bottom:18px; border-bottom:0.5px solid var(--border-soft); margin-bottom:22px; flex:none; }
.slide-brand{ display:flex; align-items:center; gap:10px; }
.slide-brand-mark{
  width:30px; height:30px; border-radius:50%; background:linear-gradient(155deg, var(--accent), #5b3fae);
  display:flex; align-items:center; justify-content:center; overflow:hidden; padding:2px; flex:none;
}
.slide-brand-mark img{ width:100%; height:100%; border-radius:50%; object-fit:cover; object-position:center 8%; display:block; }
.slide-brand-text{ display:flex; flex-direction:column; line-height:1.25; }
.slide-brand-text b{ font-family:var(--font-display); font-size:13.5px; font-weight:600; }
.slide-brand-text span{ font-size:10.5px; color:var(--muted-2); font-family:var(--font-mono); letter-spacing:.03em; }
.slide-meta{ font-family:var(--font-mono); font-size:11px; color:var(--muted); letter-spacing:.03em; text-align:right; }
.slide-content{ flex:1; overflow:hidden; display:flex; align-items:stretch; gap:26px; }
.slide-visual{
  flex:0 0 36%; max-width:250px; border-radius:16px; overflow:hidden; position:relative;
  background:var(--bg); box-shadow:0 10px 26px -14px rgba(33,21,64,.35); animation:visualPop .4s cubic-bezier(.25,.6,.3,1) both;
}
.slide-visual img{ width:100%; height:100%; object-fit:cover; object-position:center 14%; display:block; }
@keyframes visualPop{ from{ opacity:0; transform:scale(.94) translateX(-8px); } to{ opacity:1; transform:scale(1) translateX(0); } }
.slide-text{ flex:1; min-width:0; overflow-y:auto; display:flex; align-items:center; }
.slide-text > div{ width:100%; }
@media (max-width:680px){
  .slide-content{ flex-direction:column; gap:16px; }
  .slide-visual{ flex:0 0 150px; max-width:none; width:100%; }
  .slide-visual img{ object-position:center 10%; }
}
.slide-kicker{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; }
.slide-kicker-row{ display:flex; align-items:center; gap:9px; margin-bottom:14px; }
.slide-icon{ width:20px; height:20px; flex:none; display:inline-flex; }
.slide-icon svg{ width:100%; height:100%; display:block; }
.slide-icon-lg{ width:26px; height:26px; }
.slide-h1{ font-family:var(--font-display); font-size:clamp(22px,3.6vw,30px); font-weight:600; margin:0 0 20px; text-wrap:balance; }
.slide-h2{ font-family:var(--font-display); font-size:clamp(18px,2.6vw,23px); font-weight:600; margin:0 0 14px; text-wrap:balance; }
.slide-body-text{ font-size:16px; line-height:1.65; color:#3d3a4a; margin:0; max-width:66ch; }
.slide-body-text strong{ color:var(--text); font-weight:700; }
.slide-tip-text{ font-size:16px; }
.slide-domain-badge-row{ display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.slide-domain-badge{
  display:inline-block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.05em; color:#ffffff;
  padding:5px 11px; border-radius:99px; font-weight:700;
  animation:badgeBounce .5s cubic-bezier(.34,1.56,.64,1) .05s both;
}
@keyframes badgeBounce{ from{ transform:scale(.6); opacity:0; } to{ transform:scale(1); opacity:1; } }
.slide-enablers{ display:flex; flex-direction:column; gap:9px; margin-top:8px; }
.slide-enabler-item{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--muted); opacity:0; animation:itemSlideIn .4s ease forwards; }
.slide-enabler-item:nth-child(1){ animation-delay:.32s; }
.slide-enabler-item:nth-child(2){ animation-delay:.38s; }
.slide-enabler-item:nth-child(3){ animation-delay:.44s; }
.slide-enabler-item:nth-child(n+4){ animation-delay:.5s; }
.slide-enabler-item span{ width:6px; height:6px; border-radius:50%; flex:none; }
@keyframes itemSlideIn{ from{ opacity:0; transform:translateX(-8px); } to{ opacity:1; transform:translateX(0); } }
.slide-terms-grid{ display:flex; flex-wrap:wrap; gap:10px; }
.slide-term-chip{
  background:var(--accent-soft); color:var(--accent); font-family:var(--font-mono); font-size:13.5px;
  padding:8px 14px; border-radius:9px; opacity:0; animation:chipPop .35s cubic-bezier(.34,1.56,.64,1) forwards;
}
.slide-term-chip:nth-child(1){ animation-delay:.28s; }
.slide-term-chip:nth-child(2){ animation-delay:.33s; }
.slide-term-chip:nth-child(3){ animation-delay:.38s; }
.slide-term-chip:nth-child(4){ animation-delay:.43s; }
.slide-term-chip:nth-child(5){ animation-delay:.48s; }
.slide-term-chip:nth-child(n+6){ animation-delay:.53s; }
@keyframes chipPop{ from{ opacity:0; transform:scale(.7); } to{ opacity:1; transform:scale(1); } }
.slide-q-text{ font-family:var(--font-display); font-size:18px; line-height:1.45; margin:0 0 18px; font-weight:500; text-wrap:balance; }
.slide-example-block .slide-body-text{ margin:0 0 20px; }
.slide-example-label{ display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2); margin-bottom:6px; font-weight:600; }
.slide-example-resolution{ padding:16px 18px; background:var(--accent-soft); border:0.5px solid var(--accent-line); border-radius:12px; margin-bottom:0 !important; }
.slide-recap-list{ margin:0 0 18px; padding-left:20px; color:#3d3a4a; font-size:14.5px; line-height:1.8; }
.slide-recap-list li{ opacity:0; animation:itemSlideIn .4s ease forwards; }
.slide-recap-list li:nth-child(1){ animation-delay:.28s; }
.slide-recap-list li:nth-child(2){ animation-delay:.34s; }
.slide-recap-list li:nth-child(3){ animation-delay:.4s; }
.slide-recap-list li:nth-child(n+4){ animation-delay:.46s; }
.slide-recap-terms{ display:flex; flex-wrap:wrap; gap:8px; }
.slide-recap-terms span{ font-size:12px; font-family:var(--font-mono); color:var(--muted); border:0.5px solid var(--border); padding:5px 10px; border-radius:99px; }
.slide-nav{ display:flex; justify-content:space-between; align-items:center; margin-top:18px; }

/* ---------- chapter detail ---------- */
.chapter-header{ margin-bottom:26px; }
.back-link{
  background:none; border:none; color:var(--muted); font-size:13.5px; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; padding:0; margin-bottom:18px;
}
.back-link:hover{ color:var(--text); }
.chapter-tag{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--dc); margin-bottom:10px; display:flex; align-items:center; gap:8px;
}
.chapter-header h1{ font-family:var(--font-display); font-size:clamp(24px,4vw,34px); font-weight:600; margin:0 0 14px; text-wrap:balance; }
.enabler-list{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.enabler-chip{
  font-size:12.5px; background:var(--card); border:0.5px solid var(--border); border-radius:99px;
  padding:6px 12px; color:var(--muted);
}
.chapter-body{ font-size:15.5px; color:#3d3a4a; max-width:70ch; }
.chapter-body p{ margin:0 0 18px; }
.chapter-body strong{ color:var(--text); font-weight:700; }
.keyterm-box{
  background:var(--card); border:0.5px solid var(--border); border-radius:12px; padding:18px 20px; margin:26px 0;
}
.keyterm-box h4{ margin:0 0 10px; font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-family:var(--font-mono); }
.keyterm-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.keyterm-tags span{ background:var(--accent-soft); color:var(--accent); font-size:13px; padding:5px 11px; border-radius:7px; font-family:var(--font-mono); }
.chapter-nav{ display:flex; justify-content:space-between; gap:12px; margin-top:34px; padding-top:24px; border-top:0.5px solid var(--border); }
.chapter-nav-btn{
  flex:1; background:var(--card); border:0.5px solid var(--border); border-radius:11px; padding:14px 16px;
  cursor:pointer; text-align:left; transition:.15s;
}
.chapter-nav-btn:hover{ border-color:var(--accent-line); }
.chapter-nav-btn .lbl{ font-size:11px; color:var(--muted-2); font-family:var(--font-mono); margin-bottom:4px; }
.chapter-nav-btn .t{ font-size:13.5px; font-weight:500; }
.chapter-nav-btn.right{ text-align:right; }

/* ---------- questions ---------- */
.q-progress{ display:flex; align-items:center; gap:12px; margin-bottom:24px; font-family:var(--font-mono); font-size:12.5px; color:var(--muted); }
.q-progress .bar{ flex:1; height:5px; background:var(--border-soft); border-radius:99px; overflow:hidden; }
.q-progress .bar-fill{ height:100%; background:var(--accent); border-radius:99px; transition:width .25s; }
.q-card{ background:var(--card); border:0.5px solid var(--border); border-radius:var(--radius); padding:26px; }
.q-tag{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--dc); margin-bottom:10px; }
.q-text{ font-family:var(--font-display); font-size:19px; line-height:1.4; margin:0 0 22px; font-weight:500; text-wrap:balance; }
.q-options{ display:flex; flex-direction:column; gap:10px; }
.q-option{
  display:flex; align-items:flex-start; gap:12px; padding:14px 16px; border:0.5px solid var(--border);
  border-radius:10px; cursor:pointer; background:var(--bg-raised); transition:.12s; text-align:left; font-size:14.5px;
}
.q-option:not(.disabled):hover{ border-color:var(--accent-line); box-shadow:0 6px 16px -12px rgba(33,21,64,.3); }
.q-option .letter{
  font-family:var(--font-mono); font-size:12px; width:22px; height:22px; border-radius:6px;
  background:var(--border-soft); display:flex; align-items:center; justify-content:center; flex:none; color:var(--muted);
}
.q-option.correct{ border-color:var(--good); background:rgba(127,207,158,.08); }
.q-option.correct .letter{ background:var(--good); color:#ffffff; }
.q-option.incorrect{ border-color:var(--bad); background:rgba(232,128,122,.08); }
.q-option.incorrect .letter{ background:var(--bad); color:#ffffff; }
.q-option.disabled{ cursor:default; }
.q-option.selected-answer{ border-color:var(--accent); background:var(--accent-soft); }
.q-option.selected-answer .letter{ background:var(--accent); color:#ffffff; }
.q-option .elim{ display:block; font-size:12.5px; color:var(--muted); margin-top:5px; }
.q-explain{
  margin-top:18px; padding:16px 18px; background:var(--accent-soft); border:0.5px solid var(--accent-line);
  border-radius:10px; font-size:14px; color:#3d3a4a;
}
.q-explain b{ color:var(--accent); }
.q-actions{ display:flex; justify-content:flex-end; margin-top:20px; }

.slide-question-block{ position:relative; }
.mini-confetti{ position:absolute; top:-6px; left:50%; width:0; height:0; pointer-events:none; }
.mini-confetti span{
  position:absolute; top:0; left:0; width:6px; height:6px; border-radius:2px; background:var(--good);
  opacity:0; animation:confettiPop .85s ease-out forwards; animation-delay:calc(var(--i) * 0.035s);
}
.mini-confetti span:nth-child(3n+1){ background:var(--accent); }
.mini-confetti span:nth-child(3n+2){ background:var(--warn); }
@keyframes confettiPop{
  0%{ opacity:0; transform:translate(calc((var(--i) - 4) * 13px), 0) rotate(0deg) scale(.5); }
  18%{ opacity:1; }
  100%{ opacity:0; transform:translate(calc((var(--i) - 4) * 24px), -52px) rotate(200deg) scale(1); }
}

/* ---------- results ---------- */
.result-hero{ text-align:center; padding:20px 0 10px; }
.dyk-card{
  display:flex; align-items:center; gap:16px; padding:18px 20px; border-radius:16px;
  background:linear-gradient(155deg, rgba(124,92,214,.07), rgba(124,92,214,.015));
  border:0.5px solid var(--accent-line);
}
@media (max-width:480px){ .dyk-card{ flex-direction:column; text-align:center; } }
.dyk-avatar{
  width:64px; height:64px; border-radius:50%; object-fit:cover; object-position:center 8%; flex:none;
  border:3px solid #fff; box-shadow:0 8px 18px -6px rgba(33,21,64,.32);
  animation:avatarDance 2.4s ease-in-out infinite; transform-origin:50% 90%;
}
.dyk-label-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:4px; }
.dyk-label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); font-weight:700; }
.dyk-text{ margin:0; font-size:14px; color:var(--text); line-height:1.55; }
.speak-btn{
  display:flex; align-items:center; gap:5px; background:var(--card); border:0.5px solid var(--accent-line);
  color:var(--accent); font-family:var(--font-mono); font-size:11px; font-weight:600; padding:5px 10px;
  border-radius:99px; cursor:pointer; flex:none; transition:.15s;
}
.speak-btn:hover{ background:var(--accent-soft); }
.speak-btn.speaking{ background:var(--accent); color:#fff; border-color:var(--accent); }
.speak-btn-compact{ padding:6px 8px; }
.speak-btn-compact .speak-label{ display:none; }
.speak-icon{ width:14px; height:14px; flex:none; }
.speak-btn.speaking .speak-wave{ animation:wavePulse 0.8s ease-in-out infinite; transform-origin:center; }
.speak-btn.speaking .speak-wave2{ animation-delay:.15s; }
@keyframes wavePulse{ 0%,100%{ opacity:.5; transform:scaleX(.85); } 50%{ opacity:1; transform:scaleX(1.1); } }
.is-speaking .speak-avatar{ animation:avatarTalk 1.1s ease-in-out infinite !important; }
@keyframes avatarTalk{ 0%,100%{ transform:scale(1) rotate(0deg); } 50%{ transform:scale(1.03) rotate(-2deg); } }
.speak-avatar.word-pulse{ animation:wordPop .16s cubic-bezier(.3,.8,.4,1) !important; }
@keyframes wordPop{ 0%{ transform:scale(1.14) rotate(-6deg); } 100%{ transform:scale(1) rotate(0deg); } }
.assistant-nudge{
  display:flex; align-items:center; gap:12px; margin-bottom:16px; padding:12px 16px;
  background:var(--accent-soft); border:0.5px solid var(--accent-line); border-radius:12px;
  animation:celebratePop .45s cubic-bezier(.34,1.56,.64,1) both;
}
.assistant-nudge-avatar{
  width:38px; height:38px; border-radius:50%; object-fit:cover; object-position:center 20%; flex:none;
  border:2px solid #fff; animation:mascotBob 3.2s ease-in-out infinite;
}
.assistant-nudge-bubble{ font-size:13.5px; color:var(--text); }
.celebrate-badge{ display:flex; flex-direction:column; align-items:center; margin-bottom:6px; animation:celebratePop .5s cubic-bezier(.34,1.56,.64,1) both; }
.celebrate-avatar{
  width:76px; height:76px; border-radius:50%; object-fit:cover; object-position:center 22%;
  border:3px solid #fff; box-shadow:0 8px 20px -6px rgba(33,21,64,.35); animation:celebrateWiggle 2.2s ease-in-out infinite 0.5s;
}
.celebrate-bubble{
  margin-top:10px; font-family:var(--font-mono); font-size:12px; letter-spacing:.03em; color:var(--good);
  background:rgba(34,147,95,.1); border:0.5px solid rgba(34,147,95,.3); padding:5px 12px; border-radius:99px; font-weight:600;
}
@keyframes celebratePop{ from{ opacity:0; transform:scale(.6) translateY(10px); } to{ opacity:1; transform:scale(1) translateY(0); } }
@keyframes celebrateWiggle{ 0%,100%{ transform:rotate(0deg); } 25%{ transform:rotate(-5deg); } 75%{ transform:rotate(5deg); } }
.celebrate-badge-encourage .celebrate-bubble{ color:var(--warn); background:rgba(177,120,15,.1); border-color:rgba(177,120,15,.3); }

.reaction-badge{
  display:flex; align-items:center; gap:12px; margin:14px 0; padding:12px 16px; border-radius:14px;
  animation:celebratePop .4s cubic-bezier(.34,1.56,.64,1) both;
}
.reaction-positive{ background:rgba(34,147,95,.08); border:0.5px solid rgba(34,147,95,.3); }
.reaction-negative{ background:rgba(177,120,15,.08); border:0.5px solid rgba(177,120,15,.3); }
.reaction-avatar{
  width:46px; height:46px; border-radius:50%; object-fit:cover; object-position:center 12%; flex:none;
  border:2.5px solid #fff; box-shadow:0 4px 12px -4px rgba(33,21,64,.3); animation:celebrateWiggle 1.8s ease-in-out infinite;
}
.reaction-bubble{ font-size:14.5px; font-weight:600; }
.reaction-positive .reaction-bubble{ color:var(--good); }
.reaction-negative .reaction-bubble{ color:var(--warn); }
.result-ring{ position:relative; width:170px; height:170px; margin:0 auto 22px; }
.result-ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.result-ring .pct{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:36px; font-weight:600;
}
.result-ring .pct span{ font-size:12px; color:var(--muted); font-family:var(--font-mono); font-weight:400; margin-top:2px; }
.result-domains{ display:flex; flex-direction:column; gap:12px; margin:30px 0; }
.result-domain-row{ display:flex; align-items:center; gap:14px; }
.result-domain-row .lbl{ width:130px; font-size:13px; color:var(--muted); flex:none; }
.result-domain-row .track{ flex:1; height:8px; background:var(--border-soft); border-radius:99px; overflow:hidden; }
.result-domain-row .fill{ height:100%; border-radius:99px; }
.result-domain-row .pctnum{ width:44px; text-align:right; font-family:var(--font-mono); font-size:12.5px; color:var(--muted); flex:none; }

/* ---------- mock exam ---------- */
.timer{
  font-family:var(--font-mono); font-size:14px; background:var(--card); border:0.5px solid var(--border);
  padding:7px 14px; border-radius:9px; display:inline-flex; align-items:center; gap:8px;
}
.timer.low{ color:var(--bad); border-color:var(--bad); }
.exam-grid{ display:grid; grid-template-columns:repeat(10,1fr); gap:6px; margin-bottom:20px; }
@media (max-width:640px){ .exam-grid{ grid-template-columns:repeat(6,1fr); } }
.exam-dot{
  aspect-ratio:1; border-radius:6px; border:0.5px solid var(--border); background:var(--bg-raised);
  font-family:var(--font-mono); font-size:10.5px; display:flex; align-items:center; justify-content:center;
  color:var(--muted-2); cursor:pointer;
}
.exam-dot.answered{ background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent); }
.exam-dot.current{ border-color:var(--accent); color:var(--text); }

/* ---------- cards / offer ---------- */
.offer-band{
  background:linear-gradient(155deg, rgba(124,92,214,.08), rgba(124,92,214,.02));
  border:0.5px solid var(--accent-line); border-radius:18px; padding:34px 30px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.offer-band h3{ font-family:var(--font-display); font-size:21px; margin:0 0 8px; font-weight:600; }
.offer-band p{ margin:0; color:var(--muted); font-size:14px; max-width:46ch; }
.offer-price{ font-family:var(--font-mono); color:var(--accent); font-size:14px; margin-top:8px; }
.offer-avatar{
  width:58px; height:58px; border-radius:50%; object-fit:cover; object-position:center 8%; flex:none;
  border:3px solid #fff; box-shadow:0 6px 16px -6px rgba(33,21,64,.3); animation:avatarDance 2.4s ease-in-out infinite;
  transform-origin:50% 90%;
}
@media (max-width:520px){ .offer-avatar{ display:none; } }

.acp-card{
  background:var(--card); border:0.5px dashed var(--border); border-radius:var(--radius);
  padding:30px; text-align:center;
}
.acp-card h3{ font-family:var(--font-display); font-size:20px; margin:0 0 10px; }
.acp-card p{ color:var(--muted); font-size:14px; max-width:52ch; margin:0 auto 20px; }

footer{ padding:36px 0 60px; text-align:center; }
.footer-avatar{ width:44px; height:44px; border-radius:50%; margin:0 auto 12px; overflow:hidden; border:0.5px solid var(--border); }
.footer-avatar img{ width:100%; height:100%; border-radius:50%; object-fit:cover; object-position:center 8%; display:block; }
footer .fname{ font-family:var(--font-display); font-size:15px; margin-bottom:4px; }
footer .fmeta{ color:var(--muted-2); font-size:12.5px; font-family:var(--font-mono); }
footer .flinks{ display:flex; justify-content:center; gap:16px; margin-top:14px; font-size:13px; }
footer .flinks a{ color:var(--muted); text-decoration:none; }
footer .flinks a:hover{ color:var(--accent); }

/* ---------- chatbot / mascot ---------- */
.chat-fab{
  position:fixed; bottom:22px; right:22px; z-index:60; width:60px; height:60px; border-radius:50%;
  background:transparent; border:none; cursor:pointer; box-shadow:var(--shadow); padding:0;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  animation:mascotBob 3.2s ease-in-out infinite;
}
.chat-fab:hover{ animation-play-state:paused; transform:scale(1.06) rotate(-4deg); }
.chat-fab::after{
  content:''; position:absolute; inset:-4px; border-radius:50%; border:2px solid var(--accent-line);
  animation:mascotRing 2.6s ease-out infinite;
}
.mascot-svg{
  width:100%; height:100%; display:block; border-radius:50%; object-fit:cover; object-position:center 20%;
  border:2.5px solid #fff; box-shadow:0 2px 10px rgba(33,21,64,.25);
}
.mascot-mini{ width:34px; height:34px; flex:none; display:inline-flex; }
.mascot-mini .mascot-svg{ animation:mascotBob 3.2s ease-in-out infinite; }
.mascot-mini-inline{ width:18px; height:18px; margin-right:6px; vertical-align:-4px; display:inline-flex; }
.mascot-mini-inline .mascot-svg{ animation:mascotNod 2.6s ease-in-out infinite; border-width:1.5px; }
@keyframes mascotNod{ 0%,100%{ transform:rotate(0deg); } 25%{ transform:rotate(-8deg); } 50%{ transform:rotate(0deg); } 75%{ transform:rotate(6deg); } }
@keyframes mascotBob{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-4px) rotate(-2deg); } }
@keyframes mascotRing{ 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(1.28); opacity:0; } }
.chat-panel{
  position:fixed; bottom:90px; right:22px; z-index:60; width:min(360px, calc(100vw - 32px));
  height:min(500px, calc(100vh - 140px)); background:var(--card); border:0.5px solid var(--border);
  border-radius:16px; box-shadow:var(--shadow); display:flex; flex-direction:column; overflow:hidden;
}
.chat-head{ padding:14px 16px; border-bottom:0.5px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.chat-head .t{ font-family:var(--font-display); font-size:15px; }
.chat-head .s{ font-size:11.5px; color:var(--muted); font-family:var(--font-mono); }
.chat-close{ background:none; border:none; color:var(--muted); cursor:pointer; font-size:18px; padding:4px; }
.chat-body{ flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:10px; }
.chat-msg{ font-size:13.5px; padding:10px 13px; border-radius:11px; max-width:88%; line-height:1.5; unicode-bidi:plaintext; }
.chat-msg.bot{ background:var(--bg-raised); border:0.5px solid var(--border); align-self:flex-start; border-bottom-left-radius:3px; }
.chat-msg.user{ background:var(--accent-soft); color:var(--text); align-self:flex-end; border-bottom-right-radius:3px; }
.chat-input-row{ padding:12px; border-top:0.5px solid var(--border); display:flex; gap:8px; }
.chat-input-row input{
  flex:1; background:var(--bg-raised); border:0.5px solid var(--border); border-radius:9px; padding:10px 12px;
  color:var(--text); font-size:13.5px; font-family:inherit;
}
.chat-input-row button{
  background:var(--accent); border:none; color:#ffffff; width:38px; border-radius:9px; cursor:pointer; font-size:15px;
}
.chat-suggest{ display:flex; flex-wrap:wrap; gap:6px; padding:0 16px 12px; }
.chat-suggest button{
  font-size:11.5px; background:var(--bg-raised); border:0.5px solid var(--border); color:var(--muted);
  padding:6px 10px; border-radius:99px; cursor:pointer;
}

.typing{ display:inline-flex; gap:3px; padding:4px 0; }
.typing span{ width:5px; height:5px; border-radius:50%; background:var(--muted-2); animation:blink 1.2s infinite; }
.typing span:nth-child(2){ animation-delay:.2s; }
.typing span:nth-child(3){ animation-delay:.4s; }
@keyframes blink{ 0%,80%,100%{ opacity:.3; } 40%{ opacity:1; } }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}