/* ━━━ الصَفحةُ التَعريفيّة ━━━ */

/* ── الترويسة ── */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);
     backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:18px;height:68px}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand img{width:36px;height:36px}
/* الشِعارُ كامِلًا في مَواضِعِ الشِعار (الرَأسُ والذَيل)، والمَعلَمُ وَحدَهُ في مَواضِعِ الأَيقونة (٢٨ أُكتوبَر) */
.brand img.lk{width:auto;height:42px}
@media(max-width:560px){.brand img.lk{height:36px}}
.brand b{font-size:21px;color:var(--navy);font-weight:800;letter-spacing:-.01em}
.brand span{font-size:11px;color:var(--mut);display:block;line-height:1;margin-top:1px;
            letter-spacing:.04em;direction:ltr}
.nav nav{display:none;gap:4px;margin-inline-start:auto}
.nav nav a{padding:8px 14px;border-radius:var(--r-s);font-size:14.5px;color:var(--body);
           font-weight:500;transition:.15s}
.nav nav a:hover{background:var(--soft);color:var(--ink)}
.nav .cta{margin-inline-start:4px}
.nav .login{margin-inline-start:auto;font-size:14.5px;font-weight:700;color:var(--navy);padding:8px 12px;border-radius:10px;white-space:nowrap}
.nav .login:hover{background:#F5F7FA}
@media(min-width:900px){.nav nav{display:flex} .nav .login{margin-inline-start:14px} .nav .cta{margin-inline-start:6px}}

/* ── الأزرار ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
     padding:13px 24px;border-radius:var(--r-s);font-weight:700;font-size:15px;
     border:1px solid transparent;cursor:pointer;transition:.18s;white-space:nowrap;
     min-height:46px}
.btn-p{background:var(--navy);color:#fff;box-shadow:var(--sh-s)}
.btn-p:hover{background:var(--navy-700);transform:translateY(-1px);box-shadow:var(--sh)}
.btn-g{background:var(--green);color:#fff}
.btn-g:hover{filter:brightness(1.07);transform:translateY(-1px)}
.btn-o{background:#fff;color:var(--navy);border-color:var(--line)}
.btn-o:hover{border-color:var(--navy-300);background:var(--soft)}
.btn-sm{padding:9px 17px;font-size:14px;min-height:40px}

/* ── البطل ── */
.hero{position:relative;overflow:hidden;padding:64px 0 72px;
      background:linear-gradient(170deg,#FBFCFE 0%,#F2F6FA 55%,#FFFFFF 100%)}
.hero::before{content:"";position:absolute;inset-inline-end:-180px;top:-200px;
      width:620px;height:620px;border-radius:50%;
      background:radial-gradient(circle,rgba(0,119,200,.09),transparent 68%)}
.hero::after{content:"";position:absolute;inset-inline-start:-150px;bottom:-240px;
      width:520px;height:520px;border-radius:50%;
      background:radial-gradient(circle,rgba(0,168,107,.09),transparent 68%)}
.hero .wrap{position:relative;z-index:1;display:grid;gap:44px;align-items:center}
/* الدائِرَتانِ زينةٌ خَلفَ المُحتَوى — كانَت الثانيةُ (::after) فَوقَهُ فَتَأكُلُ النَقرَ عَن زِرِّ «افتح غرفة تجربة» إِلّا حافَّتَهُ العُليا */
.hero::before,.hero::after{pointer-events:none}
@media(min-width:1000px){.hero{padding:84px 0 92px}
  .hero .wrap{grid-template-columns:1.02fr .98fr;gap:56px}}
.pill{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;
      color:var(--navy);background:#fff;border:1px solid var(--line);
      padding:6px 15px;border-radius:999px;box-shadow:var(--sh-s)}
.pill i{width:7px;height:7px;border-radius:50%;background:var(--green);
        box-shadow:0 0 0 3px rgba(0,168,107,.18);animation:bp 2.4s infinite}
@keyframes bp{0%,100%{opacity:1}50%{opacity:.45}}
.hero h1{font-size:clamp(31px,6.4vw,54px);margin:20px 0 18px;letter-spacing:-.035em}
.hero h1 em{font-style:normal;color:var(--green)}
.hero .lead{font-size:clamp(16px,2.3vw,19px);max-width:34em;color:var(--body)}
.hero .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero .note{margin-top:20px;font-size:13.5px;color:var(--mut);display:flex;
            flex-wrap:wrap;gap:6px 18px}
.hero .note span{display:inline-flex;align-items:center;gap:6px}

/* ── لَوحةُ المَجلِسِ في البَطَل ── */
.stage{position:relative;background:var(--navy);border-radius:var(--r-xl);
       padding:22px;box-shadow:var(--sh-l);aspect-ratio:4/3;display:flex;
       flex-direction:column;overflow:hidden}
.stage::before{content:"";position:absolute;inset:0;
   background:radial-gradient(900px 300px at 50% -8%,rgba(0,119,200,.30),transparent 62%)}
.stage .bar{position:relative;display:flex;align-items:center;gap:7px;
            color:#9FB4CC;font-size:11.5px;margin-bottom:14px}
.stage .bar i{width:8px;height:8px;border-radius:50%;background:var(--green)}
.stage .ring{position:relative;flex:1;display:flex;flex-direction:column;
             align-items:center;justify-content:center;gap:14px}
.tile{border-radius:14px;background:linear-gradient(160deg,#1C3E66,#16304F);
      display:grid;place-items:center;color:#C9D8E8;font-size:12.5px;font-weight:600;
      border:1px solid rgba(255,255,255,.07);position:relative}
.tile.me{width:min(58%,230px);aspect-ratio:16/10;font-size:14px;
         box-shadow:0 0 0 2px var(--green),0 14px 34px rgba(0,0,0,.34)}
.tile.me::after{content:"معلّم";position:absolute;bottom:8px;inset-inline-start:8px;
      background:var(--green);color:#fff;font-size:10px;padding:2px 9px;border-radius:999px}
.stage .row{display:flex;gap:10px;justify-content:center;width:100%}
.stage .row .tile{flex:1;max-width:96px;aspect-ratio:1/.82}
.stage .row .tile.hand{box-shadow:0 0 0 2px var(--amber)}
.stage .row .tile.hand::after{content:"✋";position:absolute;top:-9px;
      inset-inline-end:-6px;font-size:15px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}
.stage .dock{position:relative;display:flex;gap:7px;justify-content:center;margin-top:16px}
.stage .dock b{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.1);
      display:grid;place-items:center;font-size:14px}
.stage .dock b.off{background:var(--red)}

/* ── أَقسامٌ عامّة ── */
section{padding:72px 0}
@media(min-width:900px){section{padding:94px 0}}
.sec-head{max-width:720px;margin:0 auto 48px;text-align:center}
.sec-head .kick{color:var(--green);font-weight:700;font-size:13.5px;letter-spacing:.07em;
                text-transform:uppercase;margin-bottom:10px}
.sec-head h2{font-size:clamp(25px,4.4vw,38px);margin-bottom:14px}
.sec-head p{font-size:16.5px}
.alt{background:var(--soft)}
.dark{background:var(--navy);color:#B9C9DB}
.dark h2,.dark h3{color:#fff}
.dark .sec-head .kick{color:#6FE3B2}

/* ── شَبَكةُ البِطاقات ── */
.grid{display:grid;gap:18px}
@media(min-width:620px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.grid-3{grid-template-columns:repeat(3,1fr)}
                        .grid-4{grid-template-columns:repeat(4,1fr)}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
      padding:26px 24px;transition:.2s}
.card:hover{border-color:var(--navy-300);box-shadow:var(--sh);transform:translateY(-2px)}
.card .ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
           font-size:21px;margin-bottom:16px;background:var(--soft)}
.card h3{font-size:17.5px;margin-bottom:9px}
.card p{font-size:14.8px;line-height:1.8}
.dark .card{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.1)}
.dark .card:hover{background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.2)}
.dark .card p{color:#9FB4CC}
.dark .card .ico{background:rgba(255,255,255,.09)}

/* ── المُقارَنة ── */
.vs{display:grid;gap:16px;max-width:900px;margin:0 auto}
@media(min-width:760px){.vs{grid-template-columns:1fr 1fr;gap:22px}}
.vs>div{border-radius:var(--r);padding:28px 26px}
.vs .them{background:var(--soft);border:1px solid var(--line)}
.vs .us{background:#fff;border:2px solid var(--green);box-shadow:var(--sh)}
.vs h3{font-size:16px;margin-bottom:18px;display:flex;align-items:center;gap:9px}
.vs ul{margin:0;padding:0;list-style:none;display:grid;gap:13px}
.vs li{font-size:14.8px;display:flex;gap:11px;align-items:flex-start;line-height:1.75}
.vs li::before{content:"—";color:var(--mut);flex-shrink:0;font-weight:700}
.vs .us li::before{content:"✓";color:var(--green)}

/* ── الخَطَوات ── */
.steps{display:grid;gap:20px;counter-reset:s}
@media(min-width:900px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{counter-increment:s;position:relative;padding-top:8px}
.step::before{content:counter(s);display:grid;place-items:center;width:40px;height:40px;
     border-radius:12px;background:var(--navy);color:#fff;font-weight:800;font-size:17px;
     margin-bottom:15px}
.step h3{font-size:17px;margin-bottom:8px}
.step p{font-size:14.8px}
pre{background:var(--navy);color:#D7E6F5;border-radius:var(--r);padding:20px;
    overflow-x:auto;direction:ltr;text-align:left;font-size:13px;line-height:1.85;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;margin:22px 0 0;
    border:1px solid rgba(255,255,255,.09)}
pre .k{color:#7FD1A8} pre .s{color:#F0C27B} pre .c{color:#6E8CAD}

/* ── التَسعير ── */
.plans{display:grid;gap:20px;align-items:start}
@media(min-width:900px){.plans{grid-template-columns:repeat(3,1fr)}}
.plan{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);
      padding:30px 26px;display:flex;flex-direction:column;height:100%}
.plan.best{border:2px solid var(--navy);box-shadow:var(--sh-l);position:relative}
.plan.best::before{content:"الأكثر ملاءمة";position:absolute;top:-13px;
     inset-inline-start:50%;transform:translateX(50%);background:var(--navy);color:#fff;
     font-size:11.5px;font-weight:700;padding:4px 16px;border-radius:999px}
.plan h3{font-size:18px;margin-bottom:5px}
.plan .who{font-size:13.5px;color:var(--mut);margin-bottom:18px;min-height:2.6em}
.plan .price{display:flex;align-items:baseline;gap:7px;margin-bottom:5px}
.plan .price b{font-size:38px;color:var(--ink);font-weight:800;letter-spacing:-.03em}
.plan .price span{font-size:14px;color:var(--mut)}
.plan .sub{font-size:13px;color:var(--mut);margin-bottom:22px;min-height:1.6em}
.plan ul{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:11px;flex:1}
.plan li{font-size:14.5px;display:flex;gap:10px;align-items:flex-start;line-height:1.7}
.plan li::before{content:"✓";color:var(--green);font-weight:800;flex-shrink:0}
.plan li.no{color:var(--mut)}
.plan li.no::before{content:"·";color:var(--mut)}
.note-box{max-width:760px;margin:30px auto 0;background:#FFFBEB;border:1px solid #FDE9B8;
     border-radius:var(--r);padding:17px 20px;font-size:14px;color:#8A6318;text-align:center}

/* ── الأَسئِلة ── */
.faq{max-width:800px;margin:0 auto;display:grid;gap:12px}
details{background:#fff;border:1px solid var(--line);border-radius:var(--r);
        padding:18px 22px;transition:.2s}
details[open]{border-color:var(--navy-300);box-shadow:var(--sh-s)}
summary{cursor:pointer;font-weight:700;color:var(--ink);font-size:16px;
        list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--green);font-size:22px;font-weight:400;flex-shrink:0;
               transition:.2s;line-height:1}
details[open] summary::after{transform:rotate(45deg)}
details p{margin-top:13px;font-size:15px;line-height:1.85}

/* ── الخاتِمة ── */
.final{text-align:center}
.final h2{font-size:clamp(26px,4.6vw,40px);margin-bottom:16px}
.final p{max-width:560px;margin:0 auto 30px;font-size:17px;color:#9FB4CC}
.final .acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
/* ━━━ الذَيل ━━━ (٢٨ أُكتوبَر) كانَ كُحلِيًّا فَاضطُرَّ الشِعارُ أَن يَكونَ أَبيَضَ فيه — والآنَ سَطحٌ
   فاتِحٌ هادِئٌ يَحمِلُ الشِعارَ المُلَوَّنَ نَفسَهُ كَرَأسِ الصَفحة: عَلامةٌ واحِدةٌ في المَوضِعَين. */
footer{background:var(--soft);color:var(--body);padding:54px 0 30px;border-top:1px solid var(--line)}
footer .cols{display:grid;gap:34px;margin-bottom:36px}
@media(min-width:760px){footer .cols{grid-template-columns:1.7fr 1fr 1fr 1fr}}
footer h4{color:var(--ink);font-size:14px;margin-bottom:14px;letter-spacing:-.01em}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:14.5px}
footer a{color:var(--body);transition:color .15s}
footer a:hover{color:var(--navy)}
footer .btm{border-top:1px solid var(--line);padding-top:22px;font-size:13px;color:var(--mut);
     display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center}

/* ═══════════ تَجديدُ ١٦ أُكتوبَر: أَيقوناتٌ خَطِّيّة، غُرفةٌ حَقيقيّةُ الشَكل، وأَقسامُ الحَلقةِ وما بَعدَها ═══════════ */
/* الأَيقوناتُ خَطِّيّةٌ مُوَحَّدةٌ كَالغُرفة — الرُموزُ التَعبيريّةُ تُرسَمُ بِحَسَبِ الجِهازِ فَتَختَلِف */
.ic{width:22px;height:22px;flex-shrink:0}
.card .ico{color:var(--navy);background:#EAF6F0}
.card .ico .ic{width:23px;height:23px;color:#0F7B52}
.dark .card .ico .ic{color:#6FE3B2}
.vs h3 .ic{width:20px;height:20px}
.hero .note span .ic{width:15px;height:15px;color:var(--green)}

/* ── الغُرفةُ في البَطَل: كَما يَراها المُعَلِّمُ حَقًّا ── */
.mock{position:relative;background:#0A2240;border-radius:var(--r-xl);padding:12px;box-shadow:var(--sh-l);
      border:1px solid rgba(255,255,255,.08);color:#DDE7F2;font-size:12px}
.mock .mb{display:flex;align-items:center;gap:8px;padding:4px 6px 10px}
.mock .mb img{width:20px;height:20px}
.mock .mb b{color:#fff;font-size:13px}
.mock .mb .sp{margin-inline-start:auto}
.mock .rec{display:inline-flex;align-items:center;gap:5px;background:#E5484D;color:#fff;border-radius:99px;
      padding:3px 9px;font-weight:700;font-size:11px;font-variant-numeric:tabular-nums}
.mock .rec i{width:7px;height:7px;border-radius:50%;background:#fff;animation:mockPulse 1.6s infinite}
@keyframes mockPulse{50%{opacity:.35}}
.mock .hands{display:inline-flex;align-items:center;gap:4px;background:rgba(229,169,60,.18);color:#F3C77A;
      border-radius:99px;padding:3px 9px;font-weight:700;font-size:11px}
.mock .hands .ic{width:13px;height:13px}
.mock .page{background:#FBF7EE;border-radius:14px;padding:14px 16px 12px;color:#2A2418;position:relative}
.mock .page .ph{display:flex;justify-content:space-between;font-size:10.5px;color:#8A7B5C;margin-bottom:6px}
.mock .page p{font-family:"Amiri Quran","Amiri",serif;font-size:clamp(15px,2.3vw,19px);line-height:2.15;margin:0;text-align:justify}
.mock .page mark{background:rgba(229,169,60,.38);color:inherit;border-radius:6px;padding:0 3px;
      box-shadow:0 0 0 1px rgba(229,169,60,.6)}
.mock .page .n{font-size:.8em;color:#9A8657}
.mock .laser{position:absolute;width:12px;height:12px;border-radius:50%;background:#E5484D;
      box-shadow:0 0 0 5px rgba(229,72,77,.22);top:44%;inset-inline-start:38%}
.mock .strip{display:flex;gap:8px;margin-top:10px}
.mock .t{flex:1;aspect-ratio:4/3;border-radius:11px;background:linear-gradient(150deg,#16365C,#0D2747);
      display:grid;place-items:center;position:relative;border:1px solid rgba(255,255,255,.07)}
.mock .t .av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px}
.mock .t .nm{position:absolute;bottom:5px;inset-inline-start:7px;font-size:10px;color:#fff;
      background:rgba(0,0,0,.35);border-radius:6px;padding:0 6px}
.mock .t.hand{box-shadow:0 0 0 2px #E5A93C}
.mock .t .q{position:absolute;top:5px;inset-inline-start:6px;background:#E5A93C;color:#2B1B00;border-radius:99px;
      font-size:10px;font-weight:800;padding:0 6px;display:flex;align-items:center;gap:2px}
.mock .t .q .ic{width:10px;height:10px}
.mock .t .st{position:absolute;top:5px;inset-inline-end:6px;color:#F3C77A;font-size:10px;font-weight:800;display:flex;gap:2px;align-items:center}
.mock .t .st .ic{width:11px;height:11px}
.mock .t.speak{box-shadow:0 0 0 2px #00A86B}
.mock .dock{display:flex;justify-content:center;gap:6px;margin:12px auto 2px;background:rgba(255,255,255,.07);
      border-radius:99px;padding:6px;width:max-content}
.mock .dock b{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);color:#DDE7F2}
.mock .dock b .ic{width:15px;height:15px}
.mock .dock b.on{background:#00A86B;color:#fff}
.mock .whisper{position:absolute;inset-inline-end:-14px;bottom:150px;background:#fff;color:var(--ink);border-radius:12px 12px 4px 12px;
      padding:8px 11px;font-size:11.5px;box-shadow:var(--sh-l);max-width:190px;line-height:1.6}
.mock .whisper small{display:block;color:var(--mut);font-size:10px}
@media(max-width:520px){.mock .whisper{display:none}}
@media(prefers-reduced-motion:reduce){.mock .rec i{animation:none}}

/* ── داخِلَ الحَلقة: شَبَكةٌ يَتَصَدَّرُها المُصحَف ── */
.bento{display:grid;gap:16px}
@media(min-width:760px){.bento{grid-template-columns:repeat(3,1fr)}
  .bento .lead-card{grid-column:span 2;grid-row:span 2}}
.bento .card{display:flex;flex-direction:column}
.lead-card{background:linear-gradient(160deg,#F2FBF6,#fff 55%);border:1px solid #CBEBDB}
.lead-card .mini{margin-top:auto;padding-top:18px}
.lead-card .mini .page{background:#FBF7EE;border:1px solid #EFE6D2;border-radius:14px;padding:12px 16px;color:#2A2418}
.lead-card .mini p{font-family:"Amiri Quran","Amiri",serif;font-size:18px;line-height:2.2;margin:0}
.lead-card .mini .err{text-decoration:underline wavy #E5484D;text-underline-offset:6px}
.lead-card .mini .hid{background:#E9E1CF;color:transparent;border-radius:5px;user-select:none}
.lead-card .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.lead-card .chips span{font-size:12px;font-weight:700;border-radius:99px;padding:3px 10px;background:#fff;border:1px solid var(--line)}

/* ── بَعدَ الحِصّة: المُشَغِّل ── */
.after{display:grid;gap:30px;align-items:center}
@media(min-width:900px){.after{grid-template-columns:1fr 1fr;gap:56px}}
.after ul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:14px}
.after li{display:flex;gap:12px;font-size:15px;line-height:1.75}
.after li .ic{color:#0F7B52;margin-top:3px}
.after li b{color:var(--ink)}
.player{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-l);overflow:hidden}
.player .pv{background:#0A2240;padding:14px}
.player .pv .page{background:#FBF7EE;border-radius:12px;padding:10px 14px;color:#2A2418}
.player .pv p{font-family:"Amiri Quran","Amiri",serif;font-size:16px;line-height:2.1;margin:0}
.player .pv mark{background:rgba(229,169,60,.38);color:inherit;border-radius:5px;padding:0 3px}
.player .bar{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.player .play{width:38px;height:38px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;flex-shrink:0}
.player .play .ic{width:16px;height:16px}
.player .track{flex:1;height:6px;border-radius:9px;background:linear-gradient(to left,var(--green) 42%,#E3E8EF 42%);position:relative}
.player .track i{position:absolute;top:-3px;width:3px;height:12px;border-radius:2px;background:var(--amber)}
.player .time{font-size:12px;color:var(--mut);font-variant-numeric:tabular-nums}
.player ol{list-style:none;margin:0;padding:8px;display:grid;gap:2px}
.player li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;font-size:13.5px}
.player li.on{background:#EAF6F0}
.player li .ic{width:16px;height:16px;color:var(--mut)}
.player li.on .ic{color:#0F7B52}
.player li time{margin-inline-start:auto;font-size:12px;color:var(--mut);font-variant-numeric:tabular-nums}

/* ── سُلَّمُ الدَمج ── */
.ladder{display:grid;gap:12px;counter-reset:l}
@media(min-width:760px){.ladder{grid-template-columns:repeat(5,1fr)}}
.ladder a{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--r);padding:18px;transition:.18s;display:block}
.ladder a:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.25)}
.ladder i{font-style:normal;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#6FE3B2;color:#0B2545;font-weight:800;font-size:14px;margin-bottom:10px}
.ladder b{color:#fff;display:block;font-size:15.5px}
.ladder span{font-size:13px;color:#9FB4CC;display:block;margin-top:4px;line-height:1.65}
.ladder em{font-style:normal;font-size:12px;font-weight:700;color:#6FE3B2;display:block;margin-top:8px}
.ladder em.soon{color:#F3C77A}
.dark details.code{margin-top:22px}
.dark details.code summary{cursor:pointer;color:#6FE3B2;font-weight:700;font-size:14.5px}
.dark details.code{background:transparent;border:0;box-shadow:none;padding:0}
.dark details.code summary{list-style:none;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;
  border:1px solid rgba(111,227,178,.4);border-radius:99px}
.dark details.code summary::-webkit-details-marker{display:none}
.dark details.code summary::after{content:none}
.dark details.code[open] summary{margin-bottom:12px}
@media(max-width:520px){.mock .t{aspect-ratio:1/1.05} .mock .t .av{margin-bottom:12px}}
@media(max-width:759px){
  .ladder a{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"n t e" "n s s";gap:2px 12px;align-items:center;padding:14px}
  .ladder i{grid-area:n;margin:0}
  .ladder b{grid-area:t}
  .ladder span{grid-area:s;margin:0}
  .ladder em{grid-area:e;margin:0}
}

/* ═══════════ سُلَّمُ الخَطِّ (١٦ أُكتوبَر) ═══════════
   الخَطُّ العَرَبِيُّ يَبدو أَصغَرَ مِنَ اللاتينيِّ بِالمَقاسِ نَفسِه، وكانَ أَغلَبُ النَصِّ بَينَ ١٣ و١٥ بكسل — صَغيرًا
   عَلى الحاسوبِ وأَصغَرَ عَلى الهاتِف. الآن: نَصُّ القِراءةِ ١٧–١٨، ونَصُّ البِطاقاتِ ١٦٫٥، ولا شَيءَ يُقرَأُ تَحتَ ١٤.
   ورَسمُ الغُرفةِ في البَطَلِ تَوضيحٌ لا نَصٌّ يُقرَأ — لا يُمَسّ. */
.nav nav a{font-size:16px}
.btn{font-size:16px} .btn-sm{font-size:15px}
.hero .lead{font-size:clamp(17.5px,2.4vw,20.5px)}
.hero .note{font-size:15px}
.pill{font-size:14px}
.sec-head .kick{font-size:14.5px}
.sec-head h2{font-size:clamp(27px,4.6vw,40px)}
.sec-head p{font-size:18.5px}
.card h3{font-size:19px}
.card p{font-size:16.5px;line-height:1.85}
.vs h3{font-size:18px}
.vs li{font-size:16.5px}
.after li{font-size:17px}
.player li{font-size:15px}
.player .time{font-size:13px}
.lead-card .chips span{font-size:13.5px}
.lead-card .mini p{font-size:20px}
.ladder b{font-size:17px}
.ladder span{font-size:14.5px}
.ladder em{font-size:13.5px}
.dark details.code summary{font-size:16px}
pre{font-size:14px}
.plan h3{font-size:20px}
.plan .who{font-size:15px}
.plan .price span{font-size:15px}
.plan .sub{font-size:14.5px}
.plan li{font-size:16px}
.plan.best::before{font-size:13px}
summary{font-size:17.5px}
details p{font-size:16.5px}
.final p{font-size:18.5px}
footer h4{font-size:15.5px}
footer ul{font-size:15.5px}
footer .btm{font-size:14px}
footer p{font-size:15.5px!important}
@media(max-width:560px){
  .sec-head p{font-size:17.5px}
  .card p,.vs li,.plan li{font-size:16px}
}

/* مَن دَخَلَ: «لوحتي» وحَرفُ اسمِهِ إِلى «حسابي» */
.nav .me-nav{display:inline-flex;align-items:center;gap:6px;margin-inline-start:auto}
@media(min-width:900px){.nav .me-nav{margin-inline-start:14px}}
.nav .me-nav .login{margin:0}
.me-av{width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px;text-decoration:none}

/* ═══════════ صَقلٌ احتِرافِيّ ═══════════ (٢٨ أُكتوبَر) لا تَصميمٌ جَديدٌ بَل شَدُّ ما هُوَ قائِم:
   عُمقٌ في الأَسطُحِ الداكِنة، وحَلقةُ تَركيزٍ ظاهِرةٌ لِمَن يَتَنَقَّلُ بِلَوحةِ المَفاتيح،
   وارتِفاعٌ خَفيفٌ لِلبِطاقاتِ عِندَ اللَمس، وإِيقاعٌ أَوسَعُ بَينَ الأَقسام. */
.dark{background:linear-gradient(180deg,#0A3C73 0%,#062B53 100%)}
.dark .sec-head .kick{color:#6FE3B2;letter-spacing:.08em}
section{padding:84px 0}
@media(max-width:700px){section{padding:60px 0}}
.sec-head{margin-bottom:52px}
.sec-head h2{letter-spacing:-.025em}
/* حَلقةُ التَركيز: شَرطٌ في كُلِّ واجِهةٍ جادّة — تُرى بِلَوحةِ المَفاتيحِ ولا تَظهَرُ لِلفَأرة */
a:focus-visible,button:focus-visible,.btn:focus-visible,summary:focus-visible{
  outline:3px solid rgba(1,118,186,.45);outline-offset:3px;border-radius:10px}
.btn{box-shadow:0 1px 2px rgba(11,37,69,.06)}
.btn-g{box-shadow:0 6px 18px rgba(20,168,106,.26)}
.btn-g:hover{box-shadow:0 10px 24px rgba(20,168,106,.32)}
.btn-p:hover{box-shadow:0 10px 24px rgba(11,37,69,.22)}
.card{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.card:hover{transform:translateY(-2px);box-shadow:var(--sh);border-color:var(--navy-300)}
.dark .card:hover{border-color:rgba(255,255,255,.22);box-shadow:0 14px 34px rgba(0,0,0,.28)}
.nav{background:rgba(255,255,255,.82)}

/* ═══════════ صَدارةُ الصَفحة — إِعادةُ تَصميم ═══════════ (٢٨ أُكتوبَر)
   المَبدَأ: جُملةٌ واحِدةٌ تَقولُ الفَرقَ، وتَحتَها ثَلاثُ حَقائِقَ تُثبِتُه، وإِلى جانِبِها الغُرفةُ
   كَما يَراها المُعَلِّمُ حَقًّا — لا صورةٌ مُزَخرَفة. والخَلفيّةُ طَبَقاتٌ هادِئةٌ بِأَلوانِ الشِعار. */
.hero{padding:76px 0 84px;
  background:
    radial-gradient(1100px 520px at 88% -10%, rgba(1,118,186,.10), transparent 60%),
    radial-gradient(900px 480px at 5% 108%, rgba(20,168,106,.10), transparent 62%),
    linear-gradient(175deg,#FCFDFE 0%,#F3F7FB 58%,#FFFFFF 100%)}
.hero::before,.hero::after{display:none}
.hero .wrap{gap:52px}
@media(min-width:1000px){.hero{padding:96px 0 104px} .hero .wrap{grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}}
.hero h1{font-size:clamp(33px,6.8vw,60px);line-height:1.18;margin:22px 0 20px;letter-spacing:-.04em}
.hero h1 em{font-style:normal;color:var(--green);display:inline-block}
.hero .lead{font-size:clamp(16.5px,2.3vw,20px);max-width:32em;line-height:1.85}
.hero .acts{margin-top:28px}
/* ثَلاثُ حَقائِقَ لا ثَلاثُ وُعود: كُلُّ واحِدةٍ شَيءٌ يَعمَلُ اليَوم */
.proof{list-style:none;margin:30px 0 0;padding:26px 0 0;border-top:1px solid var(--line);
  display:grid;gap:20px}
@media(min-width:560px){.proof{grid-template-columns:repeat(3,1fr);gap:22px}}
.proof li{display:grid;gap:4px}
.proof b{font-size:15.5px;color:var(--ink);letter-spacing:-.01em}
.proof span{font-size:13.5px;color:var(--mut);line-height:1.6}
/* الغُرفةُ المَعروضة: ضَوءٌ خَلفَها وتَعليقٌ تَحتَها */
.hero .mock{position:relative}
.hero .mock::after{content:"";position:absolute;inset:-6% -4% -10%;z-index:-1;border-radius:40px;
  background:radial-gradient(60% 55% at 50% 45%, rgba(1,118,186,.20), transparent 70%);filter:blur(10px)}
.mock-cap{margin:16px auto 0;max-width:34em;text-align:center;font-size:13.5px;color:var(--mut);line-height:1.8}
@media(max-width:999px){.mock-cap{text-align:start}}
/* شِعارُ الذَيلِ أَكبَرُ مِن شِعارِ الرَأس: في الذَيلِ مَكانٌ ولَيسَ فيهِ مُزاحِمٌ، وهُوَ آخِرُ ما تَقَعُ عَلَيهِ العَين (٢٨ أُكتوبَر) */
footer .brand img.lk{height:64px}
footer .brand{margin-bottom:4px}
@media(max-width:560px){footer .brand img.lk{height:54px}}
/* يُقرَأُ ولا يُرى: نَصٌّ لِقارِئِ الشاشةِ وَحدَه — «غير مشمولة» في جَدوَلِ الأَسعار (٢٩ أُكتوبَر).
   كانَ التَمييزُ بِاللَونِ وَحدَه، فَيَقرَأُ قارِئُ الشاشةِ المَيزةَ كَأَنَّها مَشمولةٌ في الباقة. */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* ورابِطُ التَخَطّي: أَوَّلُ ما تَقَعُ عَلَيهِ لَوحةُ المَفاتيح، ولا يُرى بِالفَأرة */
.skip{position:absolute;inset-inline-start:-9999px;top:10px;z-index:100;background:var(--navy);color:#fff;
  padding:12px 18px;border-radius:10px;font-weight:700}
.skip:focus{inset-inline-start:14px}