/* ============================================================================
   صفحات الهبوط (الطالب / المعلم) + الاختبار التجريبي المجاني
   يعتمد على متغيرات style.css و brand.css (الألوان وسلّم الخطوط --fs-*)
   ============================================================================ */
.lp{max-width:1120px; margin:0 auto; padding:0 16px}
.lp section{padding:34px 0}
.lp-hero{background:var(--grad, linear-gradient(135deg,#14315F,#1D4479)); color:#fff; position:relative; overflow:hidden}
.lp-hero::after{content:""; position:absolute; width:340px; height:340px; border-radius:50%; background:rgba(240,138,36,.16); inset-inline-start:-120px; bottom:-170px}
.lp-hero .lp{display:grid; grid-template-columns:1.15fr .85fr; gap:28px; align-items:center; padding-top:40px; padding-bottom:44px; position:relative; z-index:1}
.lp-kick{display:inline-block; font-size:var(--fs-sm); font-weight:800; color:#FFB36B; margin-bottom:8px}
.lp-hero h1{font-size:clamp(28px,4.2vw,42px); line-height:1.35; font-weight:900; margin:0 0 12px}
.lp-hero h1 em{font-style:normal; color:#F08A24}
.lp-hero p.lead{font-size:var(--fs-md); line-height:1.85; color:#DCE6F7; margin:0 0 20px; max-width:560px}
.lp-ctas{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.lp-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:10px 22px; border-radius:14px;
  font-family:inherit; font-size:var(--fs-ctl); font-weight:800; text-decoration:none; cursor:pointer; border:0}
.lp-btn.pri{background:var(--accent, #F08A24); color:#fff}
.lp-btn.pri:hover{background:var(--accent-dark, #D9731A)}
.lp-btn.ghost{background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.28)}
.lp-btn.navy{background:var(--navy, #14315F); color:#fff}
.lp-btn.line{background:transparent; color:var(--navy, #14315F); border:1.5px solid var(--navy, #14315F)}
.lp-trust{display:flex; gap:18px; flex-wrap:wrap; margin-top:18px; font-size:var(--fs-sm); color:#C9D4E5}
.lp-trust span::before{content:"✓"; color:#F08A24; font-weight:900; margin-inline-end:6px}
.lp-stats{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.lp-stat{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:16px; padding:16px}
.lp-stat b{display:block; font-size:var(--fs-2xl); font-weight:900; color:#fff; line-height:1.3}
.lp-stat span{font-size:var(--fs-sm); color:#C9D4E5}

.lp-h{margin:0 0 18px}
.lp-h .k{font-size:var(--fs-sm); font-weight:800; color:var(--accent-dark, #D9731A)}
.lp-h h2{font-size:clamp(22px,3vw,28px); font-weight:900; color:var(--heading, #14315F); margin:4px 0 6px}
.lp-h p{font-size:var(--fs-base); color:var(--muted); margin:0; line-height:1.75}

.lp-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px}
.lp-card{position:relative; background:var(--surface, #fff); border:1px solid var(--border); border-radius:18px; padding:18px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:8px}
.lp-card .ic{width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font-size:22px; background:var(--accent-soft, #FFF1E3)}
.lp-card h3{font-size:var(--fs-md); font-weight:800; color:var(--heading, #14315F); margin:0}
.lp-card p{font-size:var(--fs-base); line-height:1.75; color:var(--muted); margin:0}
.lp-card .go{margin-top:auto; font-size:var(--fs-ctl); font-weight:800; color:var(--navy, #14315F); text-decoration:none}
.lp-card .go::after{content:" ←"}
[dir="ltr"] .lp-card .go::after{content:" →"}
.lp-card .tag{position:absolute; inset-inline-end:14px; top:14px; font-size:var(--fs-xs); font-weight:800; border-radius:999px; padding:2px 10px; background:var(--accent-soft, #FFF1E3); color:var(--accent-dark, #D9731A)}

.lp-band{background:var(--surface-2, #F4F6FA); border-block:1px solid var(--border)}
.lp-two{display:grid; grid-template-columns:.9fr 1.1fr; gap:26px; align-items:start}
.lp-steps{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; counter-reset:s}
.lp-steps li{display:flex; gap:12px; align-items:flex-start; font-size:var(--fs-base); line-height:1.75}
.lp-steps li::before{counter-increment:s; content:counter(s); flex:0 0 32px; height:32px; border-radius:50%; background:var(--navy, #14315F); color:#fff; display:grid; place-items:center; font-weight:900; font-size:var(--fs-ctl)}
.lp-steps b{display:block; font-size:var(--fs-md); color:var(--heading, #14315F)}

.lp-sims{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px}
.lp-sim{display:flex; flex-direction:column; gap:6px; text-decoration:none; color:var(--text); background:var(--surface, #fff); border:1px solid var(--border); border-radius:16px; padding:14px 16px; box-shadow:var(--shadow)}
.lp-sim:hover{border-color:var(--navy, #14315F)}
.lp-sim small{font-size:var(--fs-xs); color:var(--muted)}
.lp-sim b{font-size:var(--fs-md); line-height:1.6}
.lp-sim span{font-size:var(--fs-sm); font-weight:800; color:var(--accent-dark, #D9731A)}

.lp-faq details{background:var(--surface, #fff); border:1px solid var(--border); border-radius:14px; padding:12px 16px; margin-bottom:10px}
.lp-faq summary{cursor:pointer; font-weight:800; font-size:var(--fs-md); color:var(--heading, #14315F)}
.lp-faq p{font-size:var(--fs-base); line-height:1.8; color:var(--muted); margin:8px 0 0}

.lp-final{text-align:center; background:var(--grad, linear-gradient(135deg,#14315F,#1D4479)); color:#fff; border-radius:22px; padding:30px 20px; margin:10px 0 40px}
.lp-final h2{font-size:clamp(22px,3vw,28px); margin:0 0 8px; color:#fff}
.lp-final p{font-size:var(--fs-base); color:#DCE6F7; margin:0 0 16px}
.lp-final .lp-ctas{justify-content:center}

@media (max-width: 860px){
  .lp-hero .lp, .lp-two{grid-template-columns:1fr}
  .lp section{padding:26px 0}
}

/* ---------- الاختبار التجريبي ---------- */
.tq{background:var(--surface, #fff); border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow); padding:16px; color:var(--text)}
.tq-tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px}
.tq-tab{font-family:inherit; font-size:var(--fs-ctl); font-weight:800; padding:8px 18px; border-radius:999px; border:1.5px solid var(--navy, #14315F); background:transparent; color:var(--navy, #14315F); cursor:pointer}
.tq-tab.on{background:var(--navy, #14315F); color:#fff}
.tq-top{display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; font-size:var(--fs-sm); color:var(--muted); font-weight:700}
.tq-skill{background:var(--surface-2, #F4F6FA); border:1px solid var(--border); border-radius:999px; padding:1px 10px; font-size:var(--fs-xs)}
.tq-bar{height:6px; background:var(--surface-2, #F4F6FA); border-radius:99px; margin:8px 0 12px; overflow:hidden}
.tq-bar i{display:block; height:100%; background:var(--accent, #F08A24); border-radius:99px; transition:width .3s}
.tq-stem{font-size:var(--fs-base); font-weight:700; line-height:1.85; white-space:pre-line; margin-bottom:10px}
.tq-img{display:block; max-width:100%; max-height:280px; margin:0 auto 12px; border-radius:12px; border:1px solid var(--border); background:#fff}
.tq-opts{display:grid; gap:8px}
.tq-opt{font-family:inherit; font-size:var(--fs-base); text-align:start; line-height:1.7; padding:10px 14px; border-radius:12px; border:1.5px solid var(--border); background:var(--surface, #fff); color:var(--text); cursor:pointer}
.tq-opt:hover:not([disabled]){border-color:var(--navy, #14315F)}
.tq-opt[disabled]{cursor:default}
.tq-opt.ok{border-color:#0E9F6E; background:rgba(14,159,110,.10); font-weight:700}
.tq-opt.no{border-color:#E0445A; background:rgba(224,68,90,.08)}
.tq-fb{margin-top:12px; border-radius:12px; padding:12px 14px; font-size:var(--fs-base); line-height:1.8}
.tq-fb.ok{background:rgba(14,159,110,.08); border:1px solid rgba(14,159,110,.35)}
.tq-fb.no{background:rgba(224,68,90,.06); border:1px solid rgba(224,68,90,.3)}
.tq-fb b{display:block; margin-bottom:4px}
.tq-fb div{white-space:pre-line; color:var(--text)}
.tq-next, .tq-again{margin-top:10px; font-family:inherit; font-size:var(--fs-ctl); font-weight:800; padding:9px 18px; border-radius:12px; border:0; background:var(--navy, #14315F); color:#fff; cursor:pointer}
.tq-again{background:transparent; color:var(--navy, #14315F); border:1.5px solid var(--navy, #14315F)}
.tq-note{font-size:var(--fs-sm); color:var(--muted); text-align:center; margin:10px 0 0}
.tq-end{text-align:center; padding:8px 4px}
.tq-score{display:inline-flex; align-items:baseline; gap:6px; color:var(--navy, #14315F)}
.tq-score b{font-size:40px; font-weight:900; line-height:1.2}
.tq-score span{font-size:var(--fs-lg); font-weight:800; color:var(--muted)}
.tq-end h3{font-size:var(--fs-xl); margin:6px 0; color:var(--heading, #14315F)}
.tq-end p{font-size:var(--fs-base); color:var(--muted); margin:0 0 12px}
.tq-cta{display:inline-flex; min-height:46px; align-items:center; padding:10px 22px; border-radius:14px; background:var(--accent, #F08A24); color:#fff !important; font-weight:800; font-size:var(--fs-ctl); text-decoration:none}