/* =====================================================================
   نهضة AI — Landing page styles (RTL, mobile-first)
   ===================================================================== */
:root{
  --canvas:#F5F6F8;
  --surface:#FFFFFF;
  --ink:#0C1424;
  --ink-2:#2C3547;
  --muted:#5F6878;
  --line:#E3E6EC;
  --line-2:#EEF0F4;
  --accent:#2447D9;
  --accent-ink:#1B36A8;
  --accent-soft:#EDF1FE;
  --mint:#0E9F84;
  --mint-soft:#E7F6F2;
  --danger:#C0392B;
  --radius:14px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(12,20,36,.05), 0 4px 12px rgba(12,20,36,.04);
  --shadow-md:0 2px 6px rgba(12,20,36,.06), 0 18px 40px rgba(12,20,36,.07);
  --font:"IBM Plex Sans Arabic","Tajawal","Segoe UI",system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--canvas); color:var(--ink);
  font-family:var(--font); font-size:16px; line-height:1.75;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
/* الأرقام لاتينية دائمًا، حتى داخل النص العربي */
body{font-variant-numeric:lining-nums tabular-nums}
[dir="ltr"] body{line-height:1.65}
[dir="ltr"] .h1{letter-spacing:-.03em}
[dir="ltr"] .lede,[dir="ltr"] .body-lg{max-width:56ch}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important; transition-duration:.001ms!important}
}
img,svg{max-width:100%}
h1,h2,h3{margin:0; line-height:1.35; letter-spacing:-.01em; font-weight:700}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
button{font:inherit; color:inherit}

.wrap{width:100%; max-width:1080px; margin-inline:auto; padding-inline:20px}
.wrap-narrow{max-width:720px}
.is-hidden{display:none!important}

.skip-link{position:absolute; inset-inline-start:-9999px; top:0; background:var(--ink); color:#fff; padding:10px 16px; z-index:99}
.skip-link:focus{inset-inline-start:12px; top:12px}

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--accent); outline-offset:2px; border-radius:8px;
}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:40; background:rgba(245,246,248,.85);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line-2)}
.nav-in{display:flex; align-items:center; justify-content:space-between; height:62px}
.nav-right{display:flex; align-items:center; gap:12px}

/* مبدّل اللغة */
.lang-switch{display:flex; align-items:center; gap:2px; background:var(--surface);
  border:1px solid var(--line); border-radius:999px; padding:3px}
.lang-switch .lang{display:inline-flex; align-items:center; justify-content:center; min-width:34px;
  height:28px; padding:0 9px; border-radius:999px; font-size:.82rem; font-weight:600;
  color:var(--muted); text-decoration:none; transition:background .16s ease, color .16s ease}
.lang-switch .lang:hover{color:var(--ink); background:var(--canvas)}
.lang-switch .lang.on{background:var(--accent); color:#fff}
@media(max-width:420px){
  .lang-switch .lang{min-width:30px; padding:0 7px; font-size:.78rem}
  .nav .nav-cta{padding:8px 12px; font-size:.8rem}
}
.logo{display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink)}
.logo-mark{width:30px; height:30px; flex:none}
.lm-core{fill:var(--accent)}
.lm-node{fill:var(--mint)}
.lm-link{stroke:var(--ink); stroke-width:1.4; opacity:.35}
.logo-txt{font-weight:700; font-size:1.05rem; letter-spacing:-.02em}
.nav .nav-cta{padding:8px 15px; font-size:.86rem}
@media(min-width:600px){.nav .nav-cta{padding:9px 18px; font-size:.9rem}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:999px; border:1px solid transparent;
  font-weight:600; font-size:.98rem; text-decoration:none; cursor:pointer;
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent); color:#fff}
.btn-primary:hover{background:var(--accent-ink)}
.btn-ghost{background:transparent; color:var(--ink-2); border-color:var(--line)}
.btn-ghost:hover{background:var(--surface); border-color:#CFD5E0}
.btn-lg{padding:15px 30px; font-size:1.03rem}
.btn-sm{padding:9px 18px; font-size:.9rem}
.btn-block{width:100%}
.btn[disabled]{opacity:.55; cursor:not-allowed}
.btn-ico{width:19px; height:19px}
[dir="ltr"] .btn-ico{transform:scaleX(-1)}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; background:var(--ink); color:#fff;
  padding:64px 0 72px; isolation:isolate}
.hero-bg{position:absolute; inset:0; z-index:-1; opacity:.3}
@media(min-width:760px){.hero-bg{opacity:.5}}
.hero-bg svg{width:100%; height:100%}
.net-links path{fill:none; stroke:#5A76E8; stroke-width:1.1; opacity:.45}
.net-dots circle{fill:#54C8B4; opacity:.7; animation:pulse 5.5s ease-in-out infinite}
.net-dots circle:nth-child(2n){fill:#6E8CF5; animation-delay:1.4s}
.net-dots circle:nth-child(3n){animation-delay:2.8s}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:.9}}
.hero::after{content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(120% 90% at 80% 0%, rgba(36,71,217,.35), transparent 60%)}

.hero-in{display:grid; gap:34px; grid-template-columns:1fr}
@media(min-width:900px){
  .hero-in{grid-template-columns:1.05fr .95fr; gap:48px; align-items:center}
  .hero-copy{max-width:560px}
}
.badge{display:inline-block; font-size:.83rem; font-weight:600; letter-spacing:.01em;
  color:#BFD0FF; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  padding:7px 15px; border-radius:999px; margin-bottom:22px}
.h1{font-size:clamp(1.95rem, 6.2vw, 3.15rem); letter-spacing:-.025em}
.lede{margin-top:18px; font-size:clamp(1rem,2.6vw,1.16rem); color:#C6CCDA; max-width:610px}
.hero-cta{margin-top:30px}
.cta-note{margin-top:12px; font-size:.86rem; color:#98A2B8}
/* trust checklist */
.trust{margin-top:26px; display:grid; gap:11px}
.trust li{display:flex; gap:10px; align-items:flex-start; font-size:.93rem; color:#C6CCDA; line-height:1.6}
.tick-ico{width:19px; height:19px; flex:none; margin-top:3px; color:#54C8B4}

/* hero photo */
.hero-media{margin:0; position:relative}
.hero-media img{display:block; width:100%; height:auto; border-radius:var(--radius-lg);
  border:1px solid rgba(255,255,255,.14); box-shadow:0 24px 60px rgba(0,0,0,.38);
  aspect-ratio:3/4; object-fit:cover; max-height:min(68vh, 560px)}
@media(max-width:899px){
  .hero-media img{aspect-ratio:16/11; max-height:44vh}
}
.hero-media::after{content:""; position:absolute; inset:0; border-radius:var(--radius-lg); pointer-events:none;
  background:linear-gradient(to top, rgba(12,20,36,.4), transparent 42%)}

.stats{display:flex; flex-wrap:wrap; gap:12px; margin-top:6px; grid-column:1/-1}
.stats li{flex:1 1 120px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius); padding:14px 16px}
.stats b{display:block; font-size:1.25rem; letter-spacing:-.02em}
.stats span{font-size:.82rem; color:#98A2B8}

/* ---------- sections ---------- */
.sec{padding:64px 0}
.sec-learn{background:var(--surface); border-block:1px solid var(--line-2)}
.eyebrow{font-size:.82rem; font-weight:600; color:var(--accent); letter-spacing:.06em; margin-bottom:10px}
.h2{font-size:clamp(1.45rem,4.4vw,2.05rem); letter-spacing:-.02em; max-width:24ch}
.sub{margin-top:12px; color:var(--muted); max-width:60ch}
.body-lg{margin-top:16px; color:var(--ink-2); max-width:66ch; font-size:1.03rem}

/* who we are */
.sec-about{background:var(--ink); color:#fff}
.sec-about .eyebrow{color:#8FA6FF}
.sec-about .body-lg{color:#C6CCDA}
.about-in{display:grid; gap:30px; grid-template-columns:1fr; align-items:start}
@media(min-width:900px){.about-in{grid-template-columns:1.1fr .9fr; gap:52px}}
.about-media{margin:26px 0 0}
.about-media img{display:block; width:100%; height:auto; border-radius:var(--radius-lg);
  border:1px solid rgba(255,255,255,.14); aspect-ratio:4/3; object-fit:cover;
  box-shadow:0 18px 44px rgba(0,0,0,.34); max-height:min(40vh, 340px)}
.about-points{display:grid; gap:16px}
.about-points li{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius); padding:18px 20px}
.about-points h3{font-size:1rem; margin-bottom:6px}
.about-points p{color:#98A2B8; font-size:.92rem; line-height:1.7}

/* how it works */
.sec-how{background:var(--surface); border-block:1px solid var(--line-2)}
.steps{margin-top:30px; display:grid; gap:16px; grid-template-columns:1fr; counter-reset:s}
@media(min-width:780px){.steps{grid-template-columns:repeat(3,1fr); gap:20px}}
.steps li{display:flex; gap:14px; align-items:flex-start; background:var(--canvas);
  border:1px solid var(--line); border-radius:var(--radius); padding:20px}
.step-n{width:34px; height:34px; flex:none; border-radius:50%; background:var(--accent); color:#fff;
  display:grid; place-items:center; font-weight:700; font-size:1rem}
.steps h3{font-size:1rem; margin-bottom:6px}
.steps p{color:var(--muted); font-size:.92rem; line-height:1.7}

/* wide photo band */
.band{margin:34px 0 0}
.band img{display:block; width:100%; height:auto; border-radius:var(--radius-lg);
  border:1px solid var(--line); aspect-ratio:16/9; object-fit:cover; object-position:50% 42%;
  box-shadow:var(--shadow-sm); max-height:min(46vh, 430px)}
.band figcaption{margin-top:12px; font-size:.88rem; color:var(--muted); text-align:center}

/* why grid */
.why-grid{margin-top:30px; display:grid; gap:14px; grid-template-columns:1fr}
@media(min-width:640px){.why-grid{grid-template-columns:1fr 1fr}}
.why-grid li{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 20px 20px 20px; position:relative}
.why-grid li::before{content:""; position:absolute; inset-block:18px; inset-inline-start:0;
  width:3px; border-radius:3px; background:var(--accent); opacity:.8}
.why-grid h3{font-size:1.02rem; margin-bottom:6px}
.why-grid p{color:var(--muted); font-size:.94rem; line-height:1.7}

/* learn cards */
.cards{margin-top:34px; display:grid; gap:14px; grid-template-columns:1fr}
@media(min-width:640px){.cards{grid-template-columns:1fr 1fr}}
@media(min-width:940px){.cards{grid-template-columns:repeat(3,1fr)}}
.cards li{border:1px solid var(--line); border-radius:var(--radius-lg); padding:24px;
  background:var(--surface); transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease}
.cards li:hover{border-color:#C9D3F5; box-shadow:var(--shadow-sm); transform:translateY(-2px)}
.card-ico{width:42px; height:42px; border-radius:12px; background:var(--accent-soft);
  display:grid; place-items:center; margin-bottom:16px}
.card-ico svg{width:22px; height:22px; stroke:var(--accent); fill:none; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round}
.cards h3{font-size:1.05rem; margin-bottom:7px}
.cards p{color:var(--muted); font-size:.94rem; line-height:1.7}

/* ---------- quiz / panels ---------- */
.sec-quiz{padding-bottom:80px}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:30px 22px; box-shadow:var(--shadow-md)}
@media(min-width:640px){.panel{padding:40px}}
.panel .btn-lg{margin-top:24px}
.panel-split{display:grid; gap:26px; grid-template-columns:1fr; align-items:center}
@media(min-width:760px){.panel-split{grid-template-columns:1.1fr .9fr; gap:36px}}
.quiz-media{margin:0}
.quiz-media img{display:block; width:100%; height:auto; border-radius:var(--radius);
  aspect-ratio:4/3; object-fit:cover; border:1px solid var(--line); max-height:min(38vh, 340px)}

.prog{margin-bottom:26px}
.prog-bar{height:5px; background:var(--line-2); border-radius:99px; overflow:hidden}
.prog-bar{display:flex}
.prog-bar span{display:block; height:100%; width:10%; background:var(--accent);
  border-radius:99px; transition:width .35s cubic-bezier(.4,0,.2,1)}
.prog-txt{margin-top:9px; font-size:.82rem; color:var(--muted)}

.q-head{display:flex; gap:14px; align-items:flex-start}
.q-ico{width:44px; height:44px; flex:none; padding:10px; border-radius:12px;
  background:var(--accent-soft); color:var(--accent); fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.q-title{font-size:clamp(1.1rem,3.4vw,1.35rem); font-weight:600; line-height:1.6}
.q-hint{margin-top:6px; font-size:.85rem; color:var(--mint); font-weight:500}
.opts{margin-top:22px; display:grid; gap:10px}
.opts.grid2{grid-template-columns:1fr}
@media(min-width:560px){.opts.grid2{grid-template-columns:1fr 1fr}}
.opt-ico{width:22px; height:22px; flex:none; color:var(--muted); fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; transition:color .16s ease}
.opt.on .opt-ico{color:var(--accent)}
.opt-txt{min-width:0}
.opt{display:flex; align-items:center; gap:11px; width:100%; text-align:start;
  padding:14px 16px; border:1.5px solid var(--line); border-radius:var(--radius);
  background:var(--surface); cursor:pointer; font-size:.97rem; line-height:1.5;
  transition:border-color .16s ease, background .16s ease}
.opt:hover{border-color:#B9C4E8; background:#FCFCFE}
.opt .box{width:21px; height:21px; flex:none; border:1.5px solid #C4CAD6; border-radius:50%;
  display:grid; place-items:center; transition:all .16s ease; margin-inline-start:auto}
/* اختيار فردي + أيقونة: الأيقونة وحدها كافية كمؤشر، فنخفي الدائرة */
.opt.has-ico[data-multi="0"] .box{display:none}
.opt[data-multi="1"] .box{border-radius:6px}
.opt .box svg{width:12px; height:12px; opacity:0; stroke:#fff; stroke-width:3; fill:none;
  stroke-linecap:round; stroke-linejoin:round}
.opt.on{border-color:var(--accent); background:var(--accent-soft)}
.opt.on .box{background:var(--accent); border-color:var(--accent)}
.opt.on .box svg{opacity:1}

.opts.chips{grid-template-columns:repeat(auto-fit,minmax(72px,1fr)); gap:9px}
.opts.chips .opt{justify-content:center; font-weight:600; font-size:1.05rem; padding:15px 8px}
.opts.chips .box, .opts.chips .opt-ico{display:none}

.other-in{margin-top:10px; width:100%; padding:13px 15px; border:1.5px solid var(--line);
  border-radius:var(--radius); font-family:inherit; font-size:.97rem}
.q-nav{display:flex; gap:10px; margin-top:26px; align-items:center}
.q-nav .btn-primary{margin-inline-start:auto; min-width:130px}

/* result */
.score{display:flex; gap:20px; align-items:center; margin-top:26px; flex-wrap:wrap}
.score-ring{position:relative; width:112px; height:112px; flex:none}
.score-ring svg{width:112px; height:112px; transform:rotate(-90deg) scaleX(-1)}
[dir="ltr"] .score-ring svg{transform:rotate(-90deg)}
.sr-bg{fill:none; stroke:var(--line-2); stroke-width:9}
.sr-fg{fill:none; stroke:var(--accent); stroke-width:9; stroke-linecap:round;
  stroke-dasharray:327; stroke-dashoffset:327; transition:stroke-dashoffset 1s cubic-bezier(.3,0,.2,1)}
.score-ring b{position:absolute; inset:0; display:grid; place-items:center; font-size:1.45rem; letter-spacing:-.02em}
.score-txt{flex:1 1 230px}
.score-txt h3{font-size:1.15rem; color:var(--accent); margin-bottom:6px}
.score-txt p{color:var(--ink-2); font-size:.97rem}
.fineprint{margin-top:18px; font-size:.83rem; color:var(--muted); line-height:1.7}

/* ---------- form ---------- */
#regForm{margin-top:26px; display:grid; gap:17px}
.row{display:grid; gap:17px; grid-template-columns:1fr}
@media(min-width:560px){.row{grid-template-columns:1fr 1fr}}
.field{display:grid; gap:7px; min-width:0}
.field label{font-size:.9rem; font-weight:600; color:var(--ink-2)}
.field .opt-tag{color:var(--muted); font-weight:400}
.field input,.field select{
  width:100%; padding:13px 15px; border:1.5px solid var(--line); border-radius:var(--radius);
  background:var(--surface); font-family:inherit; font-size:1rem; color:var(--ink);
  transition:border-color .16s ease}
.field input:hover,.field select:hover{border-color:#C6CEE0}
.field input:focus,.field select:focus{border-color:var(--accent); outline:none;
  box-shadow:0 0 0 3px var(--accent-soft)}
.field.bad input,.field.bad select{border-color:var(--danger)}
.err{font-size:.82rem; color:var(--danger); display:none}
.field.bad .err,.err.show{display:block}
.hp{position:absolute; inset-inline-start:-9999px; height:0; overflow:hidden}
.check{display:flex; gap:11px; align-items:flex-start; font-size:.92rem; color:var(--ink-2);
  line-height:1.6; cursor:pointer}
.check input{width:19px; height:19px; margin-top:3px; flex:none; accent-color:var(--accent)}
.form-err{color:var(--danger); font-size:.9rem; display:none}
.form-err.show{display:block}

/* ---------- thanks ---------- */
.panel-done{text-align:center}
.tick{width:58px; height:58px; margin:0 auto 20px; border-radius:50%;
  background:var(--mint-soft); color:var(--mint); display:grid; place-items:center}
.tick svg{width:30px; height:30px}
.panel-done .sub{margin-inline:auto}
.ref{margin-top:34px; padding-top:28px; border-top:1px solid var(--line-2)}
.ref h3{font-size:1.05rem}
.ref p{margin-top:8px; color:var(--muted); font-size:.94rem}
.ref-actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:20px}

/* ---------- footer ---------- */
.foot{background:var(--ink); color:#98A2B8; padding:34px 0; font-size:.9rem}
.foot-in{display:flex; flex-direction:column; gap:6px}
.foot p:first-child{color:#DCE1EC}
.foot-sm{font-size:.82rem}

/* reveal */
.reveal{opacity:0; transform:translateY(14px)}
.reveal.in{opacity:1; transform:none; transition:opacity .55s ease, transform .55s ease}