:root {
  --primary:#667eea; --secondary:#764ba2; --accent:#f093fb;
  --success:#11998e; --danger:#eb3349; --warning:#f7b731;
  --grad-main:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  --grad-accent:linear-gradient(135deg,#f093fb,#f5576c);
  --grad-success:linear-gradient(135deg,#11998e,#38ef7d);
  --glass:rgba(255,255,255,0.12); --glass-b:rgba(255,255,255,0.2);
  --tm:rgba(255,255,255,0.9); --ts:rgba(255,255,255,0.55);
  --r:16px; --rs:10px; --rl:24px; --font:'Poppins',sans-serif;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);min-height:100vh;overflow-x:hidden;background:#0a0a0f}

/* ---- LAMP SCREEN ---- */
#lampScreen{
  position:fixed;inset:0;background:#0a0a0f;
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;z-index:9999;
  transition:opacity 1s ease,visibility 1s ease;
}
#lampScreen.off{opacity:0;visibility:hidden;pointer-events:none}

#lampWrap{
  display:flex;flex-direction:column;align-items:center;
  cursor:pointer;position:relative;user-select:none;
  transition:transform 0.3s;
}
#lampWrap:hover{transform:translateY(-5px)}
#lampWrap:active{transform:scale(0.97)}

/* Ceiling bar */
.l-ceil{width:70px;height:12px;background:linear-gradient(180deg,#3a3040,#2a2030);border-radius:4px 4px 0 0}
/* Wire top */
.l-wire{width:3px;height:55px;background:linear-gradient(to bottom,#5a4a6a,#3a3050);border-radius:2px}
/* Shade — trapezoid: narrow top, wide bottom */
.l-shade{
  width:0;height:0;
  border-left:60px solid transparent;
  border-right:60px solid transparent;
  border-top:80px solid #4a3a6a;
  position:relative;cursor:pointer;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,0.7));
  transition:border-top-color 0.5s,filter 0.5s;
}
/* Bulb inside shade */
.l-bulb{
  position:absolute;top:-70px;left:50%;
  transform:translateX(-50%);
  width:36px;height:36px;border-radius:50%;
  background:transparent;
  transition:background 0.5s,box-shadow 0.5s;
  pointer-events:none;
}
/* Bottom knob */
.l-knob{width:18px;height:12px;background:#3a2a50;border-radius:3px;transition:background 0.5s}
/* Pull cord */
.l-cord{display:flex;flex-direction:column;align-items:center;margin-top:2px}
.l-cord-line{width:2px;height:50px;background:linear-gradient(to bottom,#c8a96e,#a08050)}
.l-cord-ball{width:10px;height:10px;border-radius:50%;background:radial-gradient(circle,#d4b070,#8a6030);box-shadow:0 2px 6px rgba(0,0,0,0.5);transition:box-shadow 0.5s,background 0.5s}
/* Beam cone */
.l-beam{
  position:absolute;top:152px;left:50%;transform:translateX(-50%);
  width:0;height:0;
  border-left:90px solid transparent;
  border-right:90px solid transparent;
  border-top:180px solid transparent;
  opacity:0;transition:opacity 0.6s;pointer-events:none;
}
/* Floor glow */
.l-floor{
  position:absolute;bottom:-25px;left:50%;transform:translateX(-50%);
  width:160px;height:30px;border-radius:50%;
  background:transparent;transition:background 0.6s;pointer-events:none;
}
/* Hint text */
.l-hint{
  margin-top:22px;font-size:13px;font-weight:500;
  color:rgba(255,255,255,0.3);
  display:flex;align-items:center;gap:7px;
  animation:hpulse 2.5s infinite;
  transition:opacity 0.3s;
}
.l-hint.gone{opacity:0}
@keyframes hpulse{0%,100%{opacity:0.3}50%{opacity:0.7}}

/* LIT state */
#lampWrap.lit .l-shade{
  border-top-color:#6a5a8a;
  filter:drop-shadow(0 0 20px rgba(255,220,100,0.8)) drop-shadow(0 0 50px rgba(255,200,60,0.4));
}
#lampWrap.lit .l-bulb{
  background:radial-gradient(circle,#ffffc8 0%,#ffdc50 40%,transparent 70%);
  box-shadow:0 0 20px 8px rgba(255,230,80,0.6);
}
#lampWrap.lit .l-knob{background:#7a5a8a;box-shadow:0 0 8px rgba(255,200,80,0.3)}
#lampWrap.lit .l-cord-ball{background:radial-gradient(circle,#ffe080,#c09040);box-shadow:0 0 12px rgba(255,220,80,0.8)}
#lampWrap.lit .l-beam{opacity:1;border-top-color:rgba(255,240,120,0.07)}
#lampWrap.lit .l-floor{background:radial-gradient(ellipse,rgba(255,230,80,0.15) 0%,transparent 70%)}

/* ---- BG SHAPES ---- */
.bg-shapes{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.shape{position:absolute;border-radius:50%;opacity:.07;animation:fshape 20s infinite ease-in-out}
.s1{width:500px;height:500px;background:#fff;top:-150px;left:-100px}
.s2{width:350px;height:350px;background:#f093fb;bottom:0;right:-80px;animation-delay:5s}
.s3{width:250px;height:250px;background:#11998e;top:40%;left:25%;opacity:.05;animation-delay:10s}
@keyframes fshape{0%,100%{transform:translate(0,0)}25%{transform:translate(40px,-50px)}50%{transform:translate(-30px,40px)}75%{transform:translate(50px,30px)}}

/* ---- LANDING PAGE ---- */
#landingPage{display:none;background:var(--grad-main);color:#fff;min-height:100vh}
#landingPage.show{display:block}

.landing-header{
  position:relative;z-index:10;
  display:flex;justify-content:space-between;align-items:center;
  padding:20px 8%;background:rgba(255,255,255,0.06);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--glass-b);
}
.logo-text{font-size:32px;font-weight:900;color:#fff;text-decoration:none}
.logo-text span{color:#f093fb}
.logo-text i{margin-right:6px;font-size:26px}
.hdr-contact{display:flex;gap:22px;font-size:13px;color:var(--ts)}
.hdr-contact span{display:flex;align-items:center;gap:5px}
.hdr-contact i{color:var(--accent)}

.hero-section{
  position:relative;z-index:1;min-height:82vh;
  display:flex;align-items:center;justify-content:space-between;
  padding:40px 8%;gap:40px;
}
.hero-left{flex:1;max-width:560px}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.25);
  backdrop-filter:blur(8px);padding:8px 18px;border-radius:100px;
  font-size:13px;font-weight:600;color:#fff;margin-bottom:22px;
}
.hero-badge i{color:#f7b731}
.hero-title{font-size:66px;font-weight:900;line-height:1.05;margin-bottom:18px;letter-spacing:-2px}
.g-text{background:var(--grad-accent);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-desc{font-size:16px;line-height:1.75;color:var(--tm);margin-bottom:32px;font-weight:300}
.hero-stats{display:flex;align-items:center;gap:20px;margin-bottom:28px}
.stat-pill{text-align:center}
.stat-pill strong{display:block;font-size:30px;font-weight:800;color:#fff;line-height:1}
.stat-pill span{font-size:11px;color:var(--ts);text-transform:uppercase;letter-spacing:.5px}
.stat-div{width:1px;height:34px;background:rgba(255,255,255,0.2)}
.subj-tags{display:flex;gap:10px;flex-wrap:wrap}
.stag{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 16px;background:var(--glass);border:1px solid var(--glass-b);
  border-radius:100px;font-size:13px;font-weight:600;
  backdrop-filter:blur(8px);transition:all 0.25s;
}
.stag:hover{background:rgba(255,255,255,0.2);transform:translateY(-2px)}

.hero-right{flex:0 0 400px}

/* ---- LOGIN CARD ---- */
.login-card{
  background:rgba(255,255,255,0.12);backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.25);border-radius:var(--rl);
  padding:34px 30px;box-shadow:0 20px 60px rgba(0,0,0,0.4);
  opacity:0;transform:translateY(24px) scale(0.95);
  transition:opacity 0.6s ease,transform 0.6s ease;
}
.login-card.show{opacity:1;transform:translateY(0) scale(1)}
.lc-logo{font-size:34px;font-weight:900;color:#fff;text-align:center;margin-bottom:4px}
.lc-logo span{color:#f093fb}
.lc-sub{text-align:center;font-size:14px;color:var(--ts);margin-bottom:24px}
.fw{position:relative;margin-bottom:13px}
.fw i{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,0.4);font-size:13px;pointer-events:none}
.fw input{
  width:100%;padding:13px 15px 13px 44px;
  background:rgba(255,255,255,0.1);border:1.5px solid rgba(255,255,255,0.2);
  border-radius:var(--rs);font-family:var(--font);font-size:14px;color:#fff;outline:none;
  transition:all 0.25s;
}
.fw input::placeholder{color:rgba(255,255,255,0.3)}
.fw input:focus{border-color:rgba(240,147,251,0.6);background:rgba(255,255,255,0.15);box-shadow:0 0 0 3px rgba(240,147,251,0.12)}
.btn-login{
  width:100%;padding:14px;background:var(--grad-main);color:#fff;border:none;
  border-radius:var(--rs);font-family:var(--font);font-size:15px;font-weight:700;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 6px 20px rgba(102,126,234,0.4);transition:all 0.25s;margin-top:4px;
}
.btn-login:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(102,126,234,0.55)}
.lc-foot{text-align:center;font-size:13px;color:rgba(255,255,255,0.4);margin-top:16px}
.lc-foot span{color:#f093fb;cursor:pointer;font-weight:600}

/* ---- PRICING ---- */
.pricing-section{
  position:relative;z-index:1;
  background:rgba(255,255,255,0.06);backdrop-filter:blur(10px);
  border-top:1px solid rgba(255,255,255,0.1);padding:70px 8%;
}

.sec-label{font-size:11px;font-weight:700;letter-spacing:3px;color:#f093fb;text-transform:uppercase;margin-bottom:10px}
.sec-title{font-size:40px;font-weight:800;color:#fff;margin-bottom:10px;letter-spacing:-1px}
.sec-sub{font-size:15px;color:var(--ts);margin-bottom:44px}
.pc{
  background:var(--glass);border:1px solid var(--glass-b);
  border-radius:var(--rl);padding:36px 28px;text-align:left;
  position:relative;overflow:hidden;backdrop-filter:blur(8px);transition:transform 0.3s,box-shadow 0.3s;
}
.pc:hover{transform:translateY(-7px);box-shadow:0 20px 50px rgba(0,0,0,0.3)}
.pc-feat{border-color:rgba(240,147,251,0.4);background:linear-gradient(135deg,rgba(240,147,251,0.1),rgba(102,126,234,0.08))}
.pc-pop{position:absolute;top:16px;right:-28px;background:var(--grad-accent);color:#fff;font-size:9px;font-weight:800;padding:5px 34px;transform:rotate(45deg);letter-spacing:.5px}
.pc-icon{width:50px;height:50px;background:var(--grad-main);border-radius:13px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.pc-icon i{font-size:21px;color:#fff}
.pc h3{font-size:19px;font-weight:700;color:#fff;margin-bottom:8px}
.pc-price{font-size:42px;font-weight:800;color:#fff;line-height:1;margin-bottom:18px}
.pc-price span{font-size:14px;font-weight:400;color:var(--ts)}
.pc ul{list-style:none;margin-bottom:24px}
.pc ul li{padding:7px 0;font-size:12px;color:var(--tm);display:flex;align-items:center;gap:9px;border-bottom:1px solid rgba(255,255,255,0.05)}
.pc ul li:last-child{border:none}
.pc ul li i{color:#38ef7d;font-size:12px}
.pc-btn{width:100%;padding:11px;background:rgba(255,255,255,0.14);border:1.5px solid rgba(255,255,255,0.22);border-radius:var(--rs);color:#fff;font-family:var(--font);font-size:13px;font-weight:700;cursor:pointer;transition:all 0.25s}
.pc-btn:hover{background:rgba(255,255,255,0.24);transform:scale(1.02)}
.pc-btn-w{background:var(--grad-accent);border-color:transparent}
.pc-btn-w:hover{opacity:.9}

/* ---- TOPBAR ---- */
.topbar{
  background:var(--grad-main);padding:0 6%;height:62px;
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:200;box-shadow:0 4px 20px rgba(0,0,0,0.25);
}
.tbar-logo{font-size:26px;font-weight:900;color:#fff}
.tbar-logo span{color:#f093fb}
.tbar-logo i{margin-right:5px}
.tbar-right{display:flex;align-items:center;gap:10px}
.user-pill{padding:7px 15px;background:rgba(255,255,255,0.15);border-radius:100px;font-size:13px;font-weight:600;color:#fff;display:flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,0.2)}
.btn-icon-tb{width:36px;height:36px;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.2);border-radius:9px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;transition:all 0.2s}
.btn-icon-tb:hover{background:rgba(255,255,255,0.25)}
.btn-ghost-tb{padding:7px 14px;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.2);border-radius:9px;font-family:var(--font);font-size:12px;font-weight:600;color:#fff;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all 0.2s}
.btn-ghost-tb:hover{background:rgba(255,255,255,0.22)}

/* ---- BREADCRUMB ---- */
.bc-bar{background:rgba(255,255,255,0.07);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,0.1);padding:0 6%;height:40px;display:flex;align-items:center}
.bc{display:flex;align-items:center;gap:5px;font-size:12px;flex-wrap:wrap}
.bc .crumb{color:rgba(255,255,255,0.45)}
.bc .crumb.active{color:#f093fb;font-weight:700}
.bc .sep{color:rgba(255,255,255,0.2);font-size:9px}

/* ---- INNER PAGES ---- */
#coursePage,#portalPage{display:none;min-height:100vh}
#coursePage.show,#portalPage.show{display:block}
.ipbg{position:relative;min-height:calc(100vh - 102px);background:var(--grad-main);overflow:hidden}
.inner-shapes{position:absolute}

.course-body{position:relative;z-index:1;max-width:860px;margin:0 auto;padding:48px 6%}
.ih{margin-bottom:32px}
.ih h2{font-size:32px;font-weight:800;color:#fff;margin-bottom:6px}
.ih p{font-size:14px;color:var(--ts)}
.course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:700px}
.cc{background:var(--glass);border:1px solid var(--glass-b);border-radius:var(--rl);padding:32px 20px;text-align:center;backdrop-filter:blur(10px);transition:all 0.3s}
.cc.active{cursor:pointer}
.cc.active:hover{transform:translateY(-8px);border-color:rgba(240,147,251,0.5);box-shadow:0 20px 50px rgba(0,0,0,0.3)}
.cc.locked{opacity:.5}
.cc-icon{width:58px;height:58px;background:var(--grad-main);border-radius:14px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.cc-icon i{font-size:24px;color:#fff}
.cc-icon.muted{background:rgba(255,255,255,0.1)}
.cc-icon.muted i{color:rgba(255,255,255,0.35)}
.cc h3{font-size:22px;font-weight:800;color:#fff;margin-bottom:5px}
.cc p{font-size:12px;color:var(--ts);margin-bottom:14px}
.ba{display:inline-block;padding:5px 13px;background:var(--grad-success);color:#fff;border-radius:100px;font-size:10px;font-weight:700;text-transform:uppercase}
.bl{display:inline-block;padding:5px 13px;background:rgba(255,255,255,0.1);color:rgba(255,255,255,0.45);border-radius:100px;font-size:10px;font-weight:600;border:1px solid rgba(255,255,255,0.12)}

/* ---- PORTAL ---- */
.portal-body{position:relative;z-index:1;max-width:940px;margin:0 auto;padding:36px 6%}
.step-h{margin-bottom:26px}
.step-h h2{font-size:28px;font-weight:800;color:#fff;margin-bottom:5px}
.step-h p{font-size:13px;color:var(--ts)}
.lock-banner{background:rgba(235,51,73,0.14);border:1px solid rgba(235,51,73,0.32);border-radius:var(--r);padding:13px 18px;color:#fff;font-size:13px;display:flex;align-items:center;gap:10px;margin-bottom:18px;backdrop-filter:blur(8px)}
.lock-banner i{color:#eb3349}
.purchase-panel{background:linear-gradient(135deg,rgba(17,153,142,.18),rgba(56,239,125,.07));border:1px solid rgba(56,239,125,.28);border-radius:var(--rl);padding:20px 22px;margin-bottom:26px;backdrop-filter:blur(10px)}
.pp-row{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.pp-icon{width:44px;height:44px;background:var(--grad-success);border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:19px;color:#fff;flex-shrink:0}
.pp-info{flex:1}
.pp-info strong{display:block;font-size:14px;color:#fff;margin-bottom:2px}
.pp-info p{font-size:11px;color:var(--ts)}
.pp-price{font-size:28px;font-weight:800;color:#38ef7d;font-style:italic}
.btn-buy{width:100%;padding:13px;background:var(--grad-success);color:#fff;border:none;border-radius:var(--rs);font-family:var(--font);font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 6px 18px rgba(17,153,142,.3);transition:all 0.25s}
.btn-buy:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(17,153,142,.5)}
.btn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-bottom:6px}
.sel-btn{
  padding:22px 16px;background:var(--glass);border:1px solid var(--glass-b);
  border-radius:var(--r);cursor:pointer;font-family:var(--font);font-size:13px;
  font-weight:600;color:#fff;text-align:left;backdrop-filter:blur(8px);
  transition:all 0.25s;display:flex;align-items:center;gap:11px;
}
.sel-btn i{color:#f093fb;font-size:14px}
.sel-btn:hover{background:rgba(255,255,255,0.18);border-color:rgba(240,147,251,0.5);transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,0.18)}
.btn-back{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.18);border-radius:var(--rs);padding:9px 18px;color:#fff;font-family:var(--font);font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:7px;margin-top:22px;transition:all 0.2s}
.btn-back:hover{background:rgba(255,255,255,0.18)}

/* ---- QUIZ ---- */
.quiz-layout{display:grid;grid-template-columns:112px 1fr;gap:18px;min-height:60vh}
.side-panel{background:var(--glass);border:1px solid var(--glass-b);border-radius:var(--r);padding:14px;height:fit-content;position:sticky;top:110px;backdrop-filter:blur(8px)}
.sp-head{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#f093fb;margin-bottom:10px}
.q-num-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.q-num-btn{aspect-ratio:1;border:1.5px solid rgba(255,255,255,0.14);background:rgba(255,255,255,0.05);border-radius:6px;font-size:10px;font-weight:700;color:rgba(255,255,255,0.55);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.15s}
.q-num-btn:hover{border-color:var(--primary);color:#fff}
.q-num-btn.current{background:var(--primary);border-color:var(--primary);color:#fff}
.q-num-btn.answered{background:rgba(17,153,142,0.38);border-color:#11998e;color:#fff}
.quiz-main{background:var(--glass);border:1px solid var(--glass-b);border-radius:var(--rl);padding:26px;backdrop-filter:blur(12px);display:flex;flex-direction:column;gap:16px}
.quiz-topbar{display:flex;align-items:center;gap:12px}
.chap-tag{padding:5px 12px;background:var(--grad-main);border-radius:100px;font-size:11px;font-weight:600;color:#fff;white-space:nowrap}
.prog-track{flex:1;height:6px;background:rgba(255,255,255,0.1);border-radius:3px;overflow:hidden}
.prog-fill{height:100%;background:linear-gradient(90deg,var(--success),var(--accent));border-radius:3px;transition:width 0.4s}
.q-count{font-size:12px;font-weight:700;color:rgba(255,255,255,0.65);white-space:nowrap}
.question-box{background:rgba(255,255,255,0.06);border-radius:var(--r);padding:20px 22px;border-left:4px solid var(--accent)}
.q-num-lbl{display:block;font-size:10px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:1px;margin-bottom:7px}
.question-box h3{font-size:17px;font-weight:500;color:#fff;line-height:1.6}
.options-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opt-btn{padding:14px 15px;border:1.5px solid rgba(255,255,255,0.14);background:rgba(255,255,255,0.07);border-radius:var(--rs);cursor:pointer;font-family:var(--font);font-size:13px;color:#fff;text-align:left;transition:all 0.18s;display:flex;align-items:center;gap:10px;line-height:1.5}
.opt-label{width:26px;height:26px;border:1.5px solid rgba(255,255,255,0.22);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;transition:all 0.18s}
.opt-btn:hover:not(:disabled){border-color:var(--primary);background:rgba(102,126,234,0.18)}
.opt-btn:hover:not(:disabled) .opt-label{background:var(--primary);border-color:var(--primary)}
.opt-btn.correct{background:rgba(17,153,142,0.28)!important;border-color:#11998e!important}
.opt-btn.correct .opt-label{background:#11998e;border-color:#11998e;color:#fff}
.opt-btn.wrong{background:rgba(235,51,73,0.22)!important;border-color:#eb3349!important}
.opt-btn.wrong .opt-label{background:#eb3349;border-color:#eb3349;color:#fff}
.opt-btn:disabled{cursor:not-allowed}
.expl-box{background:linear-gradient(135deg,rgba(247,183,49,.1),rgba(240,147,251,.06));border:1px solid rgba(247,183,49,.22);border-radius:var(--r);padding:13px 16px;display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--tm);line-height:1.65}
.expl-box i{color:var(--warning);font-size:16px;margin-top:2px;flex-shrink:0}
.quiz-footer{display:flex;justify-content:space-between;align-items:center;padding-top:4px;border-top:1px solid rgba(255,255,255,0.07)}
.qf-left{display:flex;gap:9px}
.btn-end{padding:9px 14px;background:rgba(235,51,73,.14);border:1px solid rgba(235,51,73,.28);border-radius:var(--rs);font-family:var(--font);font-size:12px;font-weight:600;color:#eb3349;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all 0.2s}
.btn-end:hover{background:rgba(235,51,73,.28)}
.btn-prev{padding:9px 14px;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.13);border-radius:var(--rs);font-family:var(--font);font-size:12px;font-weight:600;color:#fff;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all 0.2s}
.btn-prev:hover:not(:disabled){background:rgba(255,255,255,0.16)}
.btn-prev:disabled{opacity:.3;cursor:not-allowed}
.btn-next{padding:9px 22px;background:var(--grad-main);border:none;border-radius:var(--rs);font-family:var(--font);font-size:13px;font-weight:700;color:#fff;cursor:pointer;display:flex;align-items:center;gap:7px;transition:all 0.2s;box-shadow:0 4px 14px rgba(102,126,234,.38)}
.btn-next:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(102,126,234,.5)}

/* ---- RESULTS ---- */
.result-wrap{text-align:center;padding:56px 20px;display:flex;flex-direction:column;align-items:center;gap:18px}
.score-ring{width:150px;height:150px;border-radius:50%;background:var(--grad-main);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 18px 55px rgba(102,126,234,.5);animation:popin .6s cubic-bezier(.34,1.56,.64,1) both}
@keyframes popin{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
.score-ring span{font-size:40px;font-weight:800;color:#fff;line-height:1}
.score-ring small{font-size:11px;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:1px;margin-top:3px}
.result-wrap h2{font-size:30px;font-weight:800;color:#fff}

/* ---- MODAL ---- */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(6px);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px}
.modal-box{background:linear-gradient(135deg,#1e1b4b,#2d1b69);border:1px solid rgba(255,255,255,.14);border-radius:var(--rl);padding:34px;max-width:440px;width:100%;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.5);animation:modal-in .3s cubic-bezier(.34,1.56,.64,1) both;color:#fff}
@keyframes modal-in{from{opacity:0;transform:scale(.88) translateY(18px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal-close{position:absolute;top:14px;right:14px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.13);border-radius:7px;width:30px;height:30px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.55);font-size:12px;transition:all 0.2s}
.modal-close:hover{background:rgba(235,51,73,.2);color:#eb3349}
.modal-head{display:flex;align-items:center;gap:13px;margin-bottom:18px}
.mh-icon{width:44px;height:44px;background:var(--grad-main);border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff}
.modal-head h2{font-size:20px;font-weight:800}
.modal-head p{font-size:11px;color:rgba(255,255,255,.45)}
.modal-plan-row{background:rgba(255,255,255,.07);border-radius:var(--r);padding:12px 16px;display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;font-size:14px;color:rgba(255,255,255,.75)}
.modal-plan-row strong{font-size:22px;color:#38ef7d;font-weight:800}
.modal-form{display:flex;flex-direction:column;gap:11px}
.field-row-m{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.btn-pay{width:100%;padding:13px;background:var(--grad-success);color:#fff;border:none;border-radius:var(--rs);font-family:var(--font);font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 6px 18px rgba(17,153,142,.38);margin-top:3px;transition:all 0.25s}
.btn-pay:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(17,153,142,.5)}
.btn-pay:disabled{opacity:.6;cursor:not-allowed;transform:none}

.hidden{display:none!important}

@media(max-width:900px){
  .hero-section{flex-direction:column;padding:36px 6%;text-align:center}
  .hero-left{max-width:100%}
  .hero-title{font-size:44px}
  .hero-stats{justify-content:center}
  .subj-tags{justify-content:center}
  .hero-right{width:100%}
  .pricing-cards{grid-template-columns:1fr;max-width:340px}
  .course-grid{grid-template-columns:1fr;max-width:280px;margin:0 auto}
}
@media(max-width:640px){
  .hero-title{font-size:34px}
  .landing-header{flex-direction:column;gap:8px;padding:14px 5%}
  .quiz-layout{grid-template-columns:1fr}
  .side-panel{position:static}
  .options-grid{grid-template-columns:1fr}
  .quiz-footer{flex-direction:column;gap:9px}
  .qf-left{width:100%}
  .btn-next{width:100%;justify-content:center}
}