@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&display=swap');
:root{--bg:#080e20;--bg2:#0e1730;--panel:#121e3b;--border:#283454;--text:#f4f6ff;--muted:#a8b2d1;--purple:#8877ff;--cyan:#4de0d0;--radius:20px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Cairo,Tahoma,sans-serif;line-height:1.8}button,input{font:inherit}a{color:inherit;text-decoration:none}button{cursor:pointer}.container{width:min(1140px,calc(100% - 40px));margin:auto}.topbar{position:sticky;top:0;z-index:20;background:#080e20e8;backdrop-filter:blur(18px);border-bottom:1px solid #ffffff10}.nav{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:12px;font-weight:900;font-size:23px;direction:ltr}.brand small{font-size:10px;letter-spacing:4px;margin-left:5px;color:var(--muted)}.brand-mark{background:linear-gradient(135deg,var(--purple),var(--cyan));width:41px;height:41px;display:grid;place-items:center;border-radius:12px;color:#081022}.accent{color:var(--cyan)}nav{display:flex;gap:30px}nav a{color:var(--muted);font-size:14px}nav a:hover{color:white}.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;border-radius:12px;padding:12px 23px;font-weight:800;border:1px solid transparent;transition:transform .2s,background .2s}.btn:hover{transform:translateY(-2px)}.btn-primary{background:linear-gradient(110deg,#7666f3,#5a8ce9);color:white;box-shadow:0 12px 36px #6656f330}.btn-outline{border-color:#4b5278;color:white}.btn-ghost{border-color:#394360;background:#ffffff05}.btn-small{padding:7px 15px;font-size:13px}.hero{display:grid;grid-template-columns:1.04fr .96fr;gap:55px;align-items:center;min-height:630px;padding-block:90px}.eyebrow{display:inline-flex;gap:9px;align-items:center;color:#c5bcff;background:#8d75ff16;border:1px solid #8d75ff40;border-radius:30px;padding:5px 16px;font-size:12px;font-weight:700}.pulse{width:8px;height:8px;background:var(--cyan);border-radius:50%;box-shadow:0 0 15px var(--cyan)}h1{font-size:clamp(35px,4.2vw,61px);line-height:1.42;letter-spacing:-1px;margin:24px 0}h2{font-size:clamp(25px,3vw,37px);margin:7px 0 10px}h3{margin:8px 0;font-size:19px}.gradient-text{background:linear-gradient(95deg,#ab96ff,#5ce6d4);background-clip:text;color:transparent}.hero-copy>p{font-size:17px;color:var(--muted);max-width:530px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.hero-stats{display:flex;gap:45px;margin-top:45px}.hero-stats div{display:flex;flex-direction:column}.hero-stats strong{font-size:25px;line-height:1.4}.hero-stats span{font-size:12px;color:var(--muted)}.hero-visual{position:relative;min-height:420px;display:grid;place-items:center}.glow{position:absolute;inset:12%;background:radial-gradient(ellipse,#6e4dd855,transparent 70%);filter:blur(38px)}.mock-panel{position:relative;max-width:440px;width:100%;padding:26px;border:1px solid #556087;border-radius:23px;background:linear-gradient(155deg,#1a2747,#0d1630);box-shadow:0 28px 75px #0008;transform:rotate(-3deg)}.mock-top{display:flex;justify-content:space-between;font-size:12px;color:#aab6d5}.mock-dots{color:#b19cff;letter-spacing:3px}.mock-heading{font-size:22px;font-weight:800;margin-top:26px}.mock-heading span{color:var(--cyan)}.mock-sub{color:var(--muted);font-size:12px}.mock-score{display:flex;gap:20px;align-items:center;margin:23px 0}.mock-score>div:last-child{display:flex;flex-direction:column}.mock-score small{color:var(--muted)}.ring{width:96px;height:96px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(closest-side,#14203d 77%,transparent 79%),conic-gradient(var(--cyan) 72%,#354261 0);font-weight:900;font-size:21px}.mock-bars>div{margin:12px 0;font-size:12px}.mock-bars i{display:block;width:100%;height:8px;background:linear-gradient(to left,var(--purple) var(--v),#334160 var(--v));border-radius:10px;margin-top:5px}.mock-chip{display:inline-block;background:#4de0d01b;color:#7ef2e5;border:1px solid #4de0d04b;padding:6px 14px;border-radius:30px;font-size:12px;margin-top:17px}.floating-card{position:absolute;left:-10px;bottom:35px;background:#f7f7ff;color:#242445;border-radius:12px;padding:12px 17px;box-shadow:0 14px 30px #0005;font-size:12px;font-weight:800}.floating-card:first-letter{color:#7b6be9}.section{padding:85px 0}.section-soft{background:#0d1630}.section-head{text-align:center;margin-bottom:36px}.section-head p{color:var(--muted);margin:0}.kicker{font-size:12px;color:var(--cyan);letter-spacing:3px;font-weight:800}.path-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.path-card,.steps article,.workspace-panel{background:linear-gradient(155deg,#182440,#101a32);border:1px solid #2b3859;border-radius:var(--radius)}.path-card{padding:25px;transition:transform .2s,border-color .2s}.path-card:hover{transform:translateY(-5px);border-color:#8a7cff}.path-icon{width:58px;height:58px;border-radius:17px;display:grid;place-items:center;background:#8978ff25;color:#a99bff;font-size:28px}.path-card p,.steps p{color:var(--muted);font-size:13px;min-height:65px}.path-tags{display:flex;gap:6px;flex-wrap:wrap;margin:20px 0}.path-tags span{font-size:11px;color:#c3c9e1;background:#ffffff0b;border:1px solid #ffffff16;padding:4px 10px;border-radius:30px}.card-action{width:100%;background:#8272f5;color:white;border:0;border-radius:11px;padding:10px 14px;font-weight:800}.card-action:hover{background:#988aff}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.steps article{padding:28px;position:relative}.step-number{position:absolute;left:22px;top:15px;color:#667295;font-size:30px;font-weight:900}.step-icon{font-size:32px;color:var(--cyan)}.workspace-panel{max-width:840px;margin:auto;padding:30px;min-height:240px}.empty-state{text-align:center;padding:20px}.empty-state p{color:var(--muted)}.empty-icon{font-size:45px;color:var(--purple)}.quiz-head{display:flex;justify-content:space-between;gap:15px;align-items:center;flex-wrap:wrap}.quiz-head h3{margin:0}.quiz-counter{color:var(--cyan);font-size:13px}.question{font-size:18px;font-weight:800;margin:25px 0}.choices{display:grid;gap:10px}.choice{display:block;width:100%;text-align:right;background:#ffffff08;color:white;border:1px solid #384563;border-radius:12px;padding:12px 16px}.choice:hover,.choice.selected{border-color:var(--purple);background:#8471ff26}.quiz-actions{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:25px}.notice{color:var(--muted);font-size:12px;margin-top:15px}.score-row{display:flex;align-items:center;gap:15px;flex-wrap:wrap;margin:20px 0}.score{font-size:43px;font-weight:900;color:var(--cyan)}.result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.skill-result{background:#ffffff08;padding:14px;border-radius:12px;border:1px solid #ffffff0f}.skill-result strong{display:block}.skill-result small{color:var(--muted)}.task{display:flex;align-items:flex-start;gap:12px;background:#ffffff08;padding:12px;border-radius:10px;margin:9px 0}.task input{accent-color:#8b7af8;width:18px;height:18px;margin-top:7px}.task span{flex:1}.task.done span{text-decoration:line-through;color:var(--muted)}.task small{display:block;color:var(--muted);font-size:12px}.progress-track{height:11px;background:#293755;border-radius:20px;overflow:hidden;margin:12px 0}.progress-fill{height:100%;background:linear-gradient(90deg,var(--purple),var(--cyan));transition:width .25s}footer{border-top:1px solid #ffffff18;padding:35px 0}.footer-content{display:flex;justify-content:space-between;align-items:center;gap:15px}.footer-content p,.footer-content>span{font-size:12px;color:var(--muted)}:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}@media(max-width:850px){nav{display:none}.hero{grid-template-columns:1fr;padding-block:60px;gap:20px}.hero-visual{min-height:400px}.path-grid,.steps{grid-template-columns:1fr}.path-card p,.steps p{min-height:auto}}@media(max-width:520px){.container{width:min(100% - 28px,1140px)}.nav{min-height:68px}.brand{font-size:19px}.hero{padding-block:40px}.hero-stats{gap:22px}.hero-stats strong{font-size:21px}.hero-visual{min-height:330px}.mock-panel{padding:19px}.floating-card{left:0;bottom:0}.section{padding:60px 0}.workspace-panel{padding:18px}.result-grid{grid-template-columns:1fr}.footer-content{display:block}}

/* MASAR TECH v2 additions */
.level-tag{display:inline-flex;border:1px solid rgba(69,220,213,.35);color:var(--cyan);border-radius:99px;padding:7px 14px;margin:18px 0 0;font-size:.86rem}.subheading{margin:32px 0 14px!important}.insight-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:24px 0}.insight{padding:20px;border:1px solid rgba(117,151,171,.25);border-radius:16px;background:rgba(15,33,51,.5)}.insight strong{color:var(--cyan)}.insight p{line-height:1.9;margin:9px 0 0}.timeline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:18px 0 25px}.timeline>div{padding:15px;border:1px solid rgba(117,151,171,.24);border-radius:14px;background:rgba(19,40,58,.55)}.timeline b,.timeline span{display:block}.timeline b{color:var(--cyan);margin-bottom:9px}.timeline span{font-size:.86rem;line-height:1.7}.resources-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:12px 0 20px}.resource-link{display:flex;justify-content:space-between;gap:10px;padding:17px;border:1px solid rgba(90,207,220,.3);border-radius:14px;background:rgba(15,35,54,.65);color:var(--text,#fff);text-decoration:none;line-height:1.7}.resource-link:hover{border-color:var(--cyan);background:rgba(40,80,90,.5)}.resource-link span{color:var(--cyan)}@media(max-width:720px){.insight-grid,.resources-grid{grid-template-columns:1fr}.timeline{grid-template-columns:repeat(2,minmax(0,1fr))}}@media print{.topbar,.hero,.section:not(#workspace),footer,.quiz-actions,.resource-link span{display:none!important}body{background:#fff!important;color:#111!important}.workspace-panel{background:#fff!important;color:#111!important}.workspace-panel *{color:#111!important}.resource-link{background:#fff!important;border:1px solid #ddd!important}}

/* V3 */
.recommendations,.compare-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:20px 0}.recommend,.metric,.week-card{background:rgba(255,255,255,.035);border:1px solid rgba(128,160,200,.22);border-radius:16px;padding:18px}.recommend{display:flex;flex-direction:column;gap:12px}.recommend p{flex:1;color:var(--muted)}.recommend small,.metric small,.week-card small{color:var(--muted)}.metric strong{display:block;font-size:28px;margin-top:8px}.skill-chart{display:grid;gap:16px}.skill-line>div:first-child{display:flex;justify-content:space-between;gap:10px;margin-bottom:7px}.skill-line small{color:var(--muted)}.week-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}.week-card{display:flex;gap:12px;align-items:flex-start;cursor:pointer}.week-card>span{display:flex;flex-direction:column;gap:7px}.week-card.done{border-color:#4ad5b6;background:rgba(74,213,182,.08)}.week-card input{accent-color:#4ad5b6;margin-top:5px}.quiz-actions{flex-wrap:wrap}@media(max-width:700px){.recommendations,.compare-grid,.week-grid{grid-template-columns:1fr}}@media print{body{background:#fff!important;color:#111!important}header,.topbar,.hero,#discover,#paths,#how,footer,.section-head,.no-print{display:none!important}#workspace{padding:0!important;background:white!important}#appPanel,.workspace-panel,.week-card,.recommend,.metric{background:white!important;color:#111!important;border-color:#bbb!important;box-shadow:none!important}.container{max-width:none!important}.skill-line,.week-card{break-inside:avoid}.week-grid{grid-template-columns:repeat(2,1fr)}.notice,small{color:#444!important}a{color:#124f87!important;text-decoration:underline!important}.resources-grid{grid-template-columns:repeat(2,1fr)}.progress-fill{background:#555!important;print-color-adjust:exact;-webkit-print-color-adjust:exact}}

/* PDF export: keep report content legible on white pages */
#reportPrintable{background:#fff;color:#17213a;padding:22px;border-radius:12px;direction:rtl}
#reportPrintable .notice,#reportPrintable small{color:#46536b}
#reportPrintable .metric,#reportPrintable .insight,#reportPrintable .week-card,#reportPrintable .resource-link{background:#f5f7fc;color:#17213a;break-inside:avoid;page-break-inside:avoid}
#reportPrintable .skill-line,#reportPrintable .quiz-head{break-inside:avoid;page-break-inside:avoid}


/* MASAR TECH refinement — 2026-10-30 */
/* Compact path-discovery start panel; expand naturally after the quiz begins. */
#discoverPanel:has(> #discoverStart){min-height:0;max-width:540px;padding:28px 24px;display:flex;align-items:center;justify-content:center}
#discoverPanel:has(> #discoverStart) #discoverStart{max-width:100%;white-space:normal;text-align:center}
/* Brand-matched, eye-friendly report in both browser and exported PDF. */
#reportPrintable{background:#101a32!important;color:#f2f5ff!important;padding:24px;border:1px solid #34466b;border-radius:16px;direction:rtl;-webkit-print-color-adjust:exact;print-color-adjust:exact}
#reportPrintable h3,#reportPrintable strong,#reportPrintable .question,#reportPrintable .score{color:#f2f5ff!important}
#reportPrintable .notice,#reportPrintable small,#reportPrintable p{color:#c2cce5!important}
#reportPrintable .metric,#reportPrintable .insight,#reportPrintable .week-card,#reportPrintable .resource-link,#reportPrintable .recommend{background:#1a2846!important;color:#f2f5ff!important;border:1px solid #34466b!important;break-inside:avoid;page-break-inside:avoid}
#reportPrintable .metric strong,#reportPrintable .insight strong{color:#57e0d6!important}
#reportPrintable .resource-link span{color:#65dcd7!important}
#reportPrintable .progress-track{background:#344362!important}
#reportPrintable .progress-fill{background:linear-gradient(90deg,#7a66f5,#52dcd4)!important}
#reportPrintable .skill-line,#reportPrintable .quiz-head{break-inside:avoid;page-break-inside:avoid}
@media print{
 html,body,#workspace,#appPanel,.workspace-panel{background:#101a32!important;color:#f2f5ff!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
 #reportPrintable,#reportPrintable *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
 #reportPrintable .metric,#reportPrintable .insight,#reportPrintable .week-card,#reportPrintable .resource-link{background:#1a2846!important;color:#f2f5ff!important;border-color:#34466b!important}
 #reportPrintable .notice,#reportPrintable small,#reportPrintable p{color:#c2cce5!important}
 #reportPrintable a{color:#65dcd7!important}
}