/* ===== المرقوم — الأنماط ===== */

/* الخطوط (محلية، رخصة OFL) */
@font-face{font-family:"Aref Ruqaa";src:url(fonts/aref-ruqaa-arabic-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Noto Naskh Arabic";src:url(fonts/noto-naskh-arabic-arabic-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011,U+204F,U+2E41}
@font-face{font-family:"Noto Naskh Arabic";src:url(fonts/noto-naskh-arabic-arabic-700-normal.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011,U+204F,U+2E41}
@font-face{font-family:"Noto Naskh Arabic";src:url(fonts/noto-naskh-arabic-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"Noto Naskh Arabic";src:url(fonts/noto-naskh-arabic-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"Amiri";src:url(fonts/amiri-arabic-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}

/* ألوان الهوية: «رَقّ» و«حبر» */
:root{
  --raqq:#EFE6D2; --raqq-card:#F6F0E2; --ink:#1F2B24; --ink-deep:#141C17;
  --muted:#5E5A4E; --red:#8E2C1F; --frame:#C9AE76; --gold:#A67C2E;
  --red-d:#E0907E; --gold-d:#C9A35A; --muted-d:#B9AF9A;

  /* الأدوار في الأقسام الفاتحة */
  --bg:var(--raqq); --card:var(--raqq-card); --text:var(--ink); --sub:var(--muted);
  --accent:var(--red); --on-accent:var(--raqq-card); --line:var(--frame); --orn:var(--gold);

  --f-title:"Aref Ruqaa","Amiri",serif;
  --f-text:"Noto Naskh Arabic","Amiri",serif;
  --f-quote:"Amiri","Noto Naskh Arabic",serif;
  --w:72rem; --r:2px;
  color-scheme:light;
}
/* الأقسام الغامقة («حبر») دايمًا، والصفحة كلها لو الجهاز على الوضع الغامق */
.ink, :root[data-theme="dark"] body{
  --bg:var(--ink-deep); --card:var(--ink); --text:var(--raqq); --sub:var(--muted-d);
  --accent:var(--red-d); --on-accent:var(--ink-deep); --line:#5C5034; --orn:var(--gold-d);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) body{
    --bg:var(--ink-deep); --card:var(--ink); --text:var(--raqq); --sub:var(--muted-d);
    --accent:var(--red-d); --on-accent:var(--ink-deep); --line:#5C5034; --orn:var(--gold-d);
  }
  :root:not([data-theme="light"]){color-scheme:dark}
}
:root[data-theme="dark"]{color-scheme:dark}
/* في الوضع الغامق، الأقسام «الحبر» تبقى أغمق شوية عشان تفضل مميزة */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ink{--bg:#0F1511}}
:root[data-theme="dark"] .ink{--bg:#0F1511}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:var(--f-text);font-size:1.0625rem;line-height:1.95;overflow-x:hidden}
.ink{background:var(--bg);color:var(--text)}
a{color:var(--accent);text-underline-offset:.25em}
svg{display:block}
.wrap{max-width:var(--w);margin-inline:auto;padding-inline:16px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.ltr{direction:ltr;unicode-bidi:isolate}
.q{font-family:var(--f-quote)}

/* ===== الهيدر ===== */
.top{position:absolute;inset-inline:0;top:0;z-index:5}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:68px}
.mark{width:30px;height:30px;color:var(--orn)}
.top-actions{display:flex;gap:8px;align-items:center}
.icon-btn{background:none;border:1px solid var(--line);color:var(--sub);width:40px;height:40px;border-radius:var(--r);cursor:pointer;display:grid;place-items:center}
.icon-btn svg{width:18px;height:18px}

/* الأزرار */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:var(--r);font:700 1rem/1 var(--f-text);text-decoration:none;border:1px solid var(--accent);cursor:pointer;white-space:nowrap;transition:background-color .15s,color .15s}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{filter:brightness(1.07)}
.btn-ghost{background:transparent;color:var(--accent)}
.btn-ghost:hover{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.btn-sm{min-height:40px;padding:0 16px;font-size:.92rem}

/* ===== الافتتاحية ===== */
.hero{position:relative;overflow:hidden;padding:96px 0 64px;isolation:isolate}
.hero .girih{position:absolute;inset:0;z-index:-1;color:var(--orn);opacity:.09}
.hero .girih svg{width:100%;height:100%}
.hero-grid{display:grid;gap:40px;align-items:center}
@media (min-width:900px){.hero-grid{grid-template-columns:1fr 1.05fr;gap:56px}.hero{padding:120px 0 96px}}

.name{font-family:var(--f-title);font-weight:700;font-size:clamp(4.6rem,22vw,9.5rem);line-height:1.05;color:var(--text);letter-spacing:0}
.name-wrap{position:relative;display:inline-block;padding-bottom:8px}
.name-wrap::after{content:"";position:absolute;inset-inline:6% 18%;bottom:0;height:2px;background:linear-gradient(to left,var(--orn),transparent)}
.hero h1{font-weight:700;font-size:clamp(1.35rem,4.6vw,1.75rem);line-height:1.7;margin-top:22px;max-width:28rem}
.hero .lede{color:var(--sub);margin-top:10px;max-width:30rem}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* العرض الحي: الصوت ← النص */
.demo{margin:7px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);position:relative}
.demo::before{content:"";position:absolute;inset:-7px;border:1px solid var(--orn);opacity:.55;pointer-events:none}
.demo-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line);font-size:.88rem;color:var(--sub)}
.demo-head b{color:var(--text);font-weight:700}
.replay{background:none;border:0;color:var(--sub);font:inherit;cursor:pointer;display:flex;gap:6px;align-items:center;padding:4px}
.replay svg{width:16px;height:16px}
.wave{height:64px;padding:10px 16px;display:flex;align-items:center;gap:2px;direction:ltr;position:relative}
.wave i{flex:1;background:var(--sub);opacity:.35;border-radius:1px;min-width:1px;transition:opacity .2s,background-color .2s}
.wave i.on{background:var(--accent);opacity:1}
.time{display:flex;justify-content:space-between;padding:0 16px 8px;font-size:.78rem;color:var(--sub);direction:ltr}
.page{padding:18px 20px 24px;border-top:1px dashed var(--line);min-height:12rem}
.page p{font-size:1.12rem;line-height:2.15}
.w{opacity:.18;transition:opacity .25s,color .25s}
.w.said{opacity:1}
.w.now{color:var(--accent);opacity:1}
.ayah{margin-top:14px;padding:12px 14px;border-inline-start:2px solid var(--orn);background:color-mix(in srgb,var(--orn) 8%,transparent);opacity:0;transform:translateY(4px);transition:opacity .5s,transform .5s}
.ayah.show{opacity:1;transform:none}
.ayah .q{font-size:1.5rem;line-height:2.1}
.ayah .ref{display:flex;gap:10px;align-items:center;font-size:.85rem;color:var(--sub);margin-top:2px}
.ayah .ref svg{width:14px;height:14px;color:var(--orn)}
.note{font-size:.85rem;color:var(--sub);margin-top:14px}

/* ===== أقسام عامة ===== */
.sec{padding:72px 0}
.sec-title{font-family:var(--f-title);font-weight:700;font-size:clamp(2rem,7vw,3rem);line-height:1.4}
.sec-intro{color:var(--sub);margin-top:8px;max-width:34rem}
.sec-head{margin-bottom:36px}

/* ===== الخدمات: نماذج حقيقية للشكل ===== */
.outputs{display:grid;gap:36px}
@media (min-width:900px){.outputs{grid-template-columns:repeat(3,1fr);gap:28px}}
.out h3{font-size:1.25rem;font-weight:700;margin-top:18px}
.out p{color:var(--sub);margin-top:4px}
.out .fmt{font-size:.88rem;color:var(--sub);margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.out .fmt span{border:1px solid var(--line);padding:1px 10px;border-radius:var(--r)}
.spec{aspect-ratio:4/3;position:relative;border-radius:var(--r);overflow:hidden}

/* فيديو + ترجمة */
.spec-video{background:#0F1511;display:flex;align-items:flex-end;justify-content:center;padding:0 12px 18px}
.spec-video .play{position:absolute;inset:0;margin:auto;width:54px;height:54px;border:1.5px solid rgba(239,230,210,.6);border-radius:50%;display:grid;place-items:center}
.spec-video .play::after{content:"";border-style:solid;border-width:9px 15px 9px 0;border-color:transparent rgba(239,230,210,.75) transparent transparent;margin-inline-end:4px}
.spec-video .bar{position:absolute;inset-inline:12px;bottom:8px;height:3px;background:rgba(239,230,210,.2)}
.spec-video .bar::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:38%;background:#E0907E}
.sub{background:rgba(0,0,0,.72);color:#fff;font-size:clamp(.95rem,3.6vw,1.05rem);line-height:1.75;padding:3px 12px;text-align:center;max-width:92%;margin-bottom:8px}

/* مستند */
.spec-doc{background:color-mix(in srgb,var(--text) 6%,var(--bg));display:grid;place-items:center;padding:18px}
.sheet{background:#FFFDF8;color:#1F2B24;width:78%;height:100%;box-shadow:0 1px 0 #d9ceb5,0 10px 24px -14px rgba(31,43,36,.45);padding:9% 10%;display:flex;flex-direction:column;gap:7px;font-size:.62rem;line-height:1.7;overflow:hidden}
.sheet h4{font-size:.86rem;font-weight:700;color:#8E2C1F;line-height:1.5}
.sheet .ln{height:5px;background:#D8D1C1;border-radius:1px}
.sheet .ln.s{width:62%}
.sheet .hq{font-family:var(--f-quote);font-size:.78rem;background:#F3EBDA;padding:2px 6px;border-inline-start:2px solid #A67C2E}

/* كتاب مفتوح */
.spec-book{background:color-mix(in srgb,var(--text) 6%,var(--bg));display:grid;place-items:center;padding:16px}
.book{display:grid;grid-template-columns:1fr 1fr;width:92%;height:88%;background:#F6F0E2;box-shadow:0 12px 26px -16px rgba(31,43,36,.55)}
.leaf{padding:10% 9%;display:flex;flex-direction:column;gap:6px;color:#1F2B24}
.leaf:first-child{border-inline-end:1px solid #D8CBA9;background:linear-gradient(to left,#EFE5CF,#F6F0E2 18%)}
.leaf:last-child{background:linear-gradient(to right,#EFE5CF,#F6F0E2 18%)}
.leaf .ln{height:4px;background:#D3CAB6}
.leaf .ln.s{width:55%}
.leaf .chap{font-family:"Aref Ruqaa",serif;font-size:1rem;color:#8E2C1F;text-align:center;line-height:1.4}
.leaf .vbox{border:1px solid #A67C2E;outline:1px solid #A67C2E;outline-offset:2px;padding:4px 5px;text-align:center;font-family:var(--f-quote);font-size:.74rem;line-height:1.9;margin:4px 0}
.leaf .vbox small{display:block;font-family:var(--f-text);font-size:.52rem;color:#5E5A4E;line-height:1.4}

/* ===== التشكيل: عرض تفاعلي ===== */
.tashkeel{display:grid;gap:28px}
@media (min-width:900px){.tashkeel{grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}}
.levels{display:flex;flex-direction:column;gap:6px;border:0;margin-top:22px}
.levels legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.lv{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid transparent;cursor:pointer;border-radius:var(--r)}
.lv input{appearance:none;width:18px;height:18px;border:1.5px solid var(--line);border-radius:50%;margin-top:7px;flex:none;display:grid;place-items:center;cursor:pointer}
.lv input:checked{border-color:var(--accent)}
.lv input:checked::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.lv:has(input:checked){border-color:var(--line);background:var(--card)}
.lv:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.lv b{display:block;font-weight:700}
.lv small{color:var(--sub);font-size:.88rem}
.passage{background:var(--card);border:1px solid var(--line);padding:26px 22px;border-radius:var(--r)}
.passage p{font-size:clamp(1.2rem,4.4vw,1.45rem);line-height:2.3}
.passage .src{font-size:.85rem;color:var(--sub);margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.t{transition:color .3s}
.t.fresh{color:var(--accent)}
.passage .q{font-size:1.12em}

/* ===== كيف نعمل ===== */
.rail{list-style:none;counter-reset:st;display:grid;gap:0;position:relative}
.rail li{counter-increment:st;position:relative;padding-inline-start:68px;padding-bottom:30px}
.rail li::before{content:counter(st,arabic-indic);position:absolute;inset-inline-start:0;top:0;width:46px;height:46px;display:grid;place-items:center;font-family:var(--f-title);font-size:1.5rem;line-height:1;color:var(--orn);border:1px solid var(--orn);background:var(--bg)}
.rail li::after{content:"";position:absolute;inset-inline-start:23px;top:46px;bottom:0;width:1px;background:var(--line)}
.rail li:last-child::after{display:none}
.rail h3{font-size:1.2rem;font-weight:700;padding-top:6px}
.rail p{color:var(--sub);max-width:26rem}
@media (min-width:900px){
  .rail{grid-template-columns:repeat(3,1fr);gap:32px}
  .rail li{padding-inline-start:0;padding-top:66px;padding-bottom:0}
  .rail li::after{top:23px;inset-inline-start:58px;inset-inline-end:-32px;width:auto;height:1px;bottom:auto}
}

/* ===== النماذج ===== */
.samples{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:700px){.samples{grid-template-columns:repeat(3,1fr)}}
.sample{background:var(--card);padding:22px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.sample b{display:block;font-weight:700}
.sample small{color:var(--sub)}
.soon{font-size:.85rem;color:var(--sub);border:1px dashed var(--line);padding:4px 12px;white-space:nowrap}

/* ===== الخصوصية (قسم حبر) ===== */
.privacy{position:relative;overflow:hidden;isolation:isolate}
.privacy .girih{position:absolute;inset:0;z-index:-1;color:var(--orn);opacity:.06}
.privacy .girih svg{width:100%;height:100%}
.pv-grid{display:grid;gap:36px}
@media (min-width:900px){.pv-grid{grid-template-columns:1fr 1.1fr;gap:64px;align-items:center}}
.pv-statement{font-family:var(--f-title);font-weight:700;font-size:clamp(2.2rem,8vw,3.6rem);line-height:1.45}
.pv-list{list-style:none;display:grid;gap:22px}
.pv-list li{display:grid;grid-template-columns:28px 1fr;gap:14px}
.pv-list svg{width:26px;height:26px;color:var(--orn);margin-top:6px}
.pv-list b{display:block;font-weight:700;font-size:1.1rem}
.pv-list p{color:var(--sub)}

/* ===== لمن ===== */
.who p{font-size:clamp(1.25rem,4.4vw,1.6rem);line-height:2;max-width:46rem}
.who p span{border-bottom:1px solid var(--orn)}

/* ===== التواصل ===== */
.contact{text-align:center}
.contact .box{border:1px solid var(--orn);outline:1px solid var(--orn);outline-offset:6px;padding:48px 20px;margin:8px;background:var(--card)}
.contact .sec-title{font-size:clamp(2.3rem,9vw,3.6rem)}
.contact p{color:var(--sub);max-width:32rem;margin:10px auto 28px}
.contact .cta{display:flex;flex-direction:column;gap:12px;max-width:22rem;margin-inline:auto}
@media (min-width:560px){.contact .cta{flex-direction:row;max-width:none;justify-content:center}}
.contact .cta svg{width:20px;height:20px}

/* ===== الفوتر ===== */
footer{padding:28px 0 36px;color:var(--sub);font-size:.92rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:22px}
footer a{color:var(--sub)}

/* ===== صفحة الخصوصية ===== */
.doc{max-width:44rem;padding-top:96px;padding-bottom:40px}
.doc h1{font-family:var(--f-title);font-size:2.4rem;line-height:1.5;margin-bottom:6px}
.doc h2{font-size:1.2rem;font-weight:700;margin:28px 0 6px}
.doc ul{padding-inline-start:1.4em}
.doc .meta{color:var(--sub);font-size:.92rem}
.brand{font-family:var(--f-title);font-size:1.7rem;color:var(--text);text-decoration:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}