/* نسق القرآن — موقع التطبيق بهوية استوديو نسق (الألوان والصناديق والأزرار) وخط ثمانية */
@font-face{font-family:"Thmanyah Sans";src:url("fonts/thmanyahsans-Regular.woff2") format("woff2");font-weight:300 400;font-display:swap}
@font-face{font-family:"Thmanyah Sans";src:url("fonts/thmanyahsans-Medium.woff2") format("woff2");font-weight:500 600;font-display:swap}
@font-face{font-family:"Thmanyah Sans";src:url("fonts/thmanyahsans-Bold.woff2") format("woff2");font-weight:700 800;font-display:swap}
@font-face{font-family:"Thmanyah Sans";src:url("fonts/thmanyahsans-Black.woff2") format("woff2");font-weight:900;font-display:swap}

:root{
  color-scheme:light dark;
  --ink:#013e37;--butter:#ffefb3;--mint:#7fc8a9;
  --page:#fff;--surface:#fff;
  --tint:color-mix(in srgb,var(--butter) 16%,color-mix(in srgb,var(--ink) 3%,#fff));
  --title:var(--ink);
  --accent:color-mix(in srgb,var(--ink) 62%,var(--mint));
  --text:color-mix(in srgb,var(--ink) 74%,#000);
  --muted:color-mix(in srgb,var(--ink) 66%,#6d7a76);
  --line:color-mix(in srgb,var(--ink) 13%,#fff);
  --on-dark:color-mix(in srgb,#fff 82%,var(--mint));
  --r-box:44px;--r-card:24px;--gap:16px;--pad:clamp(24px,5vw,80px);
  --ease:cubic-bezier(.16,1,.3,1);
}
@media (prefers-color-scheme:dark){:root{
  --page:#071a17;--surface:#0b2420;
  --tint:#0f2b26;
  --title:#f4f1e2;
  --accent:var(--butter);
  --text:#d5dfd9;--muted:#a6b8b0;
  --line:color-mix(in srgb,var(--mint) 20%,transparent);
}}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:16px;-webkit-text-size-adjust:100%}
body{margin:0;padding:var(--gap);background:var(--page);color:var(--text);font:400 1.0625rem/1.85 "Thmanyah Sans",system-ui,sans-serif;display:grid;gap:var(--gap);max-width:1560px;margin-inline:auto;scrollbar-color:color-mix(in srgb,var(--ink) 45%,transparent) transparent}
::selection{background:var(--butter);color:var(--ink)}
:focus-visible{outline:3px solid var(--mint);outline-offset:3px;border-radius:8px}
img,video{display:block;max-width:100%}
h1,h2,h3{margin:0;color:var(--title);line-height:1.25;text-wrap:balance}
p{margin:0}
a{color:inherit;text-underline-offset:.25em}

/* صناديق */
.box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-box);padding:var(--pad);min-width:0}
.box--tint{background:var(--tint)}
.box--dark{position:relative;overflow:hidden;background:linear-gradient(160deg,color-mix(in srgb,var(--ink) 94%,#000),color-mix(in srgb,var(--ink) 72%,#000));border-color:transparent;color:var(--on-dark)}
.box--dark h1,.box--dark h2,.box--dark h3{color:#fff}
.box--dark .sub{color:var(--on-dark)}
.title{font-size:clamp(1.9rem,1.3rem + 2.4vw,3.25rem);font-weight:700}
.title em{font-style:normal;color:var(--accent)}
.box--dark .title em{color:var(--butter)}
.sub{margin-top:14px;font-size:clamp(1.05rem,1rem + .3vw,1.25rem);color:var(--muted);max-width:56ch}

/* أزرار نسق */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:8px 28px;border-radius:999px;font-weight:700;text-decoration:none;white-space:nowrap;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background-color .25s}
.btn:hover{transform:translateY(-2px)}
.btn i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;margin-inline-end:-14px;background:color-mix(in srgb,currentColor 14%,transparent)}
.btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
[dir=ltr] .btn svg{transform:scaleX(-1)}
.btn--glow{background:var(--butter);color:var(--ink);box-shadow:0 14px 30px -14px rgb(255 239 179/.7)}
.btn--glass{color:#fff;border:1px solid rgb(255 255 255/.28)}
.btn--glass:hover{background:rgb(255 255 255/.1)}
.btn--dark{background:var(--ink);color:#fff}
.btn--dark:hover{box-shadow:0 14px 26px -14px rgb(1 62 55/.9)}

/* الرأس */
.nav{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:inline-flex;align-items:center;gap:12px;font-size:1.25rem;font-weight:700;color:#fff;text-decoration:none}
.brand img{height:44px;width:auto}
.nav__links{display:flex;align-items:center;gap:clamp(16px,2.4vw,34px);font-weight:500}
.nav__links a{text-decoration:none;color:var(--on-dark);transition:color .2s}
.nav__links a:hover{color:var(--butter)}

/* البطل */
.hero{padding-block:clamp(20px,2.5vw,36px) clamp(24px,3vw,44px)}
.hero::before{content:"";position:absolute;top:-30%;inset-inline-end:-12%;width:60%;height:120%;background:radial-gradient(closest-side,rgb(127 200 169/.2),transparent);pointer-events:none}
.hero__grid{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:clamp(28px,5vw,88px);margin-block:clamp(24px,3vw,40px)}
.hero h1{font-size:clamp(3.2rem,2rem + 6vw,6rem);font-weight:900;line-height:1.1;color:var(--butter)}
.hero__lead{margin-top:20px;font-size:clamp(1.3rem,1.1rem + 1vw,1.9rem);font-weight:500;line-height:1.5;color:#fff;max-width:24em;text-wrap:balance}
.hero__sub{margin-top:14px;max-width:44ch;color:var(--on-dark)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.arch{position:relative;justify-self:center;width:min(100%,380px);aspect-ratio:9/12.8}
.arch::before{content:"";position:absolute;inset:-14px;border:1px solid rgb(255 239 179/.45);border-radius:999px 999px 46px 46px}
.arch__win{position:absolute;inset:0;overflow:hidden;border-radius:999px 999px 34px 34px;background:var(--ink);animation:rise 1.5s var(--ease) both}
.arch video{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
@keyframes rise{from{clip-path:inset(18% 0 0 0 round 999px 999px 34px 34px);transform:scale(1.03)}to{clip-path:inset(0 0 0 0 round 999px 999px 34px 34px);transform:none}}
.stats{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0;padding-top:24px;border-top:1px solid rgb(255 255 255/.14)}
.stats div{padding-inline:clamp(10px,2vw,28px);border-inline-start:1px solid rgb(255 239 179/.32)}
.stats div:first-child{border:0;padding-inline-start:0}
.stats dt{font-size:clamp(1.6rem,1.2rem + 1.5vw,2.5rem);font-weight:700;line-height:1.2;color:var(--butter);font-variant-numeric:tabular-nums}
.stats dd{margin:0;font-size:.97rem;line-height:1.5;color:var(--on-dark)}

/* أقسام بجوال */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(32px,6vw,96px)}
.points{list-style:none;margin:28px 0 0;padding:0}
.points li{padding-block:18px;border-top:1px solid var(--line)}
.box--dark .points li{border-color:rgb(255 255 255/.14)}
.points b{display:block;margin-bottom:2px;font-size:1.2rem;font-weight:700;color:var(--title)}
.box--dark .points b{color:#fff}
.phones{display:flex;justify-content:center;align-items:flex-start;gap:clamp(12px,2vw,28px)}
.phone{flex:0 1 300px;min-width:0;padding:7px;border-radius:clamp(26px,3.4vw,44px);background:#04100e;box-shadow:0 30px 50px -28px rgb(1 40 34/.75)}
.phone img{width:100%;height:auto;border-radius:clamp(20px,2.8vw,37px)}
.phones .phone:nth-child(2){margin-top:clamp(28px,5vw,72px)}

/* وأكثر */
.more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(24px,4vw,64px);margin-top:36px}
.more div{padding-block:22px;border-top:1px solid var(--line)}
.more svg{width:28px;height:28px;margin-bottom:10px;fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.more h3{font-size:1.22rem;font-weight:700;margin-bottom:4px}
.more p{color:var(--muted)}

/* الأجهزة */
.devices{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.62fr);align-items:end;gap:clamp(20px,4vw,56px);margin-top:40px}
.ipad{padding:9px;border-radius:30px;background:#04100e;box-shadow:0 30px 50px -28px rgb(1 40 34/.75)}
.ipad img{width:100%;height:auto;border-radius:22px;aspect-ratio:4/3;object-fit:cover;object-position:top}
.watch{justify-self:center;width:min(100%,210px);padding:10px;border-radius:44px;background:#04100e;box-shadow:0 30px 50px -28px rgb(1 40 34/.75)}
.watch img{width:100%;height:auto;border-radius:34px}
.devlist{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(18px,3vw,40px);margin-top:32px}
.devlist div{padding-top:16px;border-top:1px solid var(--line)}
.devlist b{display:block;color:var(--title);font-weight:700;font-size:1.12rem}
.devlist span{color:var(--muted);line-height:1.6;display:block}

/* الأسئلة */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,80px)}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px;font-size:1.15rem;font-weight:700;color:var(--title);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;transition:transform .35s var(--ease)}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq details p{padding-bottom:20px;color:var(--muted);max-width:60ch}

/* موعد App Store */
.appsoon{display:inline-block;margin-top:18px;color:var(--butter);font-weight:500;text-underline-offset:4px}
.appsoon b{font-weight:900;font-variant-numeric:tabular-nums}
.appstore{text-align:center}
.appstore h2{font-size:clamp(1.7rem,1.2rem + 2vw,2.8rem);font-weight:900;color:var(--butter);text-wrap:balance}
.cd{display:flex;justify-content:center;gap:12px;margin-top:24px}
.cd[hidden]{display:none}
.cd div{min-width:112px;padding:16px 12px;border-radius:24px;background:rgb(255 255 255/.08)}
.cd b{display:block;font-size:clamp(2.4rem,2rem + 2vw,3.6rem);font-weight:900;line-height:1.1;color:#fff;font-variant-numeric:tabular-nums}
.cd span{color:var(--on-dark)}
.appstore p{margin-top:18px;color:var(--on-dark)}

/* الدعوة */
.cta{text-align:center;background:linear-gradient(135deg,#ebcf88,#cfa95a);border-color:transparent;color:var(--ink)}
.cta h2{font-size:clamp(1.9rem,1.3rem + 2.4vw,3.25rem);font-weight:900;color:var(--ink)}
.cta p{margin:12px auto 0;max-width:46ch;font-size:1.15rem;color:color-mix(in srgb,var(--ink) 90%,#000)}
.stores{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px}
.install{width:fit-content;max-width:100%;margin:24px auto 0;padding-inline-start:1.4em;text-align:start;font-weight:500;line-height:1.7;color:var(--ink)}
.cta .install__note{margin-top:16px;font-size:1rem}

/* التذييل */
.foot{padding-block:clamp(32px,4vw,56px);font-size:.97rem}
.foot__row{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px}
.foot__logo img{height:76px;width:auto}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 26px;font-weight:500}
.foot nav a{text-decoration:none}
.foot nav a:hover{color:var(--butter)}
.foot small{position:relative;display:block;margin-top:24px;padding-top:20px;border-top:1px solid rgb(255 255 255/.14);font-size:.92rem;line-height:1.7}

/* صفحات النص */
.head h1{margin-top:clamp(28px,4vw,56px);font-size:clamp(2.2rem,1.5rem + 3vw,4rem);font-weight:900;color:var(--butter)}
.head p{margin-top:8px;color:var(--on-dark)}
.doc{padding-block:clamp(28px,4vw,56px)}
.doc__in{max-width:72ch;margin-inline:auto}
.doc h2{margin:2.2em 0 .5em;font-size:1.45rem;font-weight:700}
.doc__wide{overflow-x:auto}
.lang{margin-bottom:22px;font-weight:500}
.lang a,.doc a{color:var(--accent)}
.doc table{width:100%;border-collapse:collapse;margin-top:14px;font-size:.96rem;line-height:1.6}
.doc th{color:var(--title);font-weight:700}
.doc td,.doc th{padding:12px 10px;border-bottom:1px solid var(--line);text-align:start;vertical-align:top}

@media (max-width:980px){
  .nav__links a:not(.keep){display:none}
  .hero__grid,.split,.faq{grid-template-columns:minmax(0,1fr)}
  .arch{width:min(78%,360px);margin-top:14px}
  .split .phones{order:2}
  .more{grid-template-columns:repeat(2,minmax(0,1fr))}
  .devlist{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:18px}
}
@media (max-width:620px){
  :root{--r-box:30px;--gap:10px;--pad:22px}
  body{font-size:1rem}
  .brand img{height:38px}
  .hero__cta .btn{flex:1 1 100%}
  .stats{grid-template-columns:repeat(2,1fr);row-gap:18px}
  .stats div:nth-child(odd){border:0;padding-inline-start:0}
  .more{grid-template-columns:minmax(0,1fr)}
  .devices{grid-template-columns:minmax(0,1fr)}
  .watch{width:170px}
  .stores .btn{flex:1 1 100%}
  .foot__logo img{height:62px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before{animation:none!important;transition:none!important}
}

/* صفحة الخطأ */
.notfound{min-height:calc(100dvh - 2*var(--gap))}
.notfound .btn{margin-top:28px}
.contents{display:contents}