/* ═══════════════════════════════════════════════════════════════════════════
   rinta.app — الصفحةُ الأولى · إعادةُ بناءٍ 2026-09-08
   ───────────────────────────────────────────────────────────────────────────
   **حكمُ المؤسّس على السابقة**: «التصميمُ بائسٌ للغاية». وكان محقًّا: كانت
   **وثيقةً موسَّطةً ببطاقاتٍ رماديّة** لا صفحةَ منتَج. وقِيست ثلاثُ صفحاتٍ حيّةٍ
   بمتصفّحٍ حقيقيّ (Linear · Knowunity · Tabby-AR) فخرج منها ثلاثةُ دروس:
     ① **الحقلُ الأوّلُ يُملَك لونًا**: أرضٌ واحدةٌ داكنةٌ أو مشبعةٌ تملأ الشاشة —
        لا صفحةٌ بيضاءُ فيها فقرة. (Linear أسودُ · Knowunity بنفسجيٌّ · Tabby أخضر.)
     ② **المنتجُ هو الصورة**: لقطةٌ حقيقيّةٌ كبيرةٌ تنزف تحت الطيّ، **وفي تطبيقات
        الجوّالِ داخلَ إطارِ جهاز** على بلاطةٍ ملوّنة (Tabby).
     ③ **الثقةُ فوق العنوان لا في الذيل**: تابي تضع «4.8★ · 1.11 مليون تقييم»
        قبل الجملةِ الأولى.
   ولوحتُنا هي هويّةُ التطبيقِ حرفًا — الحبرُ `#16211D` والكهرمانيُّ `#E39A2E`
   والقشديُّ `#FDF6E8` — **ولا لونَ جديدٌ يُخترَع للموقع.**
   ⛔ ويبقى `P-10` (لا شريطَ ملوَّنٌ على حافّةِ سطح) و`P-11` (الأرقامُ لاتينيّة).
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face { font-family: 'Plex AR'; font-weight: 400; font-display: swap; src: url('fonts/plex-ar-400-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'Plex AR'; font-weight: 600; font-display: swap; src: url('fonts/plex-ar-600-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'Plex AR'; font-weight: 700; font-display: swap; src: url('fonts/plex-ar-700-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'Plex AR'; font-weight: 400; font-display: swap; src: url('fonts/plex-ar-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF; }
@font-face { font-family: 'Plex AR'; font-weight: 600; font-display: swap; src: url('fonts/plex-ar-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF; }

:root {
  --ink:#16211D; --ink-deep:#0E1613; --ink-2:#5C6B65; --ink-3:#7B8781;
  --bg:#F4F6F5; --surface:#FFFFFF; --sunk:#EDF0EE; --line:#E4E9E6;
  --amber:#E39A2E; --amber-ink:#8A5A00; --amber-soft:#FAF1DD; --on-amber:#1A1206;
  --cream:#FDF6E8; --cream-2:rgba(253,246,232,.66); --cream-3:rgba(253,246,232,.42);
  --hair:rgba(253,246,232,.14);
  --font:'Plex AR', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --max:1180px;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--font);
       font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased; }
h1,h2,h3 { margin:0; font-weight:700; letter-spacing:-.022em; line-height:1.08; text-wrap:balance; }
p { margin:0; }
img { max-width:100%; height:auto; display:block; }
a { color:var(--amber-ink); }
.wrapx { max-width:var(--max); margin:0 auto; padding:0 24px; }
.dot { color:var(--amber); }
/* رقمٌ لاتينيٌّ مصفوفٌ دائمًا (`P-11`) */
.num { font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate; }

/* ── الحقلُ الحبريّ ───────────────────────────────────────────────────────── */
.ink { background:var(--ink-deep); color:var(--cream); position:relative; overflow:hidden; }
/* توهّجٌ كهرمانيٌّ واحدٌ خلفَ العنوان — عمقٌ بلا زخرفة، ولا شريطَ ولا حافّة. */
.ink::before { content:''; position:absolute; inset-inline-start:50%; top:-38%;
  width:min(1100px,120%); aspect-ratio:1; transform:translateX(50%);
  background:radial-gradient(closest-side, rgba(227,154,46,.20), rgba(227,154,46,0) 72%);
  pointer-events:none; }
.ink > * { position:relative; }

/* ── الترويسة ─────────────────────────────────────────────────────────────── */
.top { max-width:var(--max); margin:0 auto; padding:20px 24px;
       display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:inline-flex; align-items:center; text-decoration:none; }
.top-nav { display:flex; align-items:center; gap:26px; }
.top-nav a { color:var(--cream-2); text-decoration:none; font-size:15.5px; white-space:nowrap; }
.top-nav a:hover { color:var(--cream); }

/* ── الأزرار ──────────────────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
       min-height:52px; padding:0 28px; border-radius:999px; border:0; cursor:pointer;
       background:var(--amber); color:var(--on-amber); font:700 17px/1 var(--font);
       text-decoration:none; white-space:nowrap; transition:transform .15s, filter .15s; }
.btn:hover { filter:brightness(1.05); transform:translateY(-1px); }
.btn:focus-visible { outline:3px solid var(--cream); outline-offset:3px; }
.btn-sm { min-height:42px; padding:0 20px; font-size:15.5px; }
.btn-ghost { background:transparent; color:var(--cream); border:1px solid var(--hair); }
.btn-ghost:hover { background:rgba(253,246,232,.07); }

/* ── البطل ────────────────────────────────────────────────────────────────── */
.hero { max-width:var(--max); margin:0 auto; padding:56px 24px 0; text-align:center; }
.eyebrow { display:inline-flex; align-items:center; gap:10px; padding:7px 16px;
  border:1px solid var(--hair); border-radius:999px; color:var(--cream-2); font-size:14.5px; }
.hero h1 { margin-top:26px; font-size:clamp(2.5rem, 1.4rem + 4.4vw, 4.75rem);
  color:var(--cream); }
.hero .lead { margin:22px auto 0; max-width:44ch; font-size:clamp(1.1rem,1rem + .55vw,1.4rem);
  color:var(--cream-2); line-height:1.6; }
.hero .lead b { color:var(--cream); font-weight:600; }
.hero-cta { margin-top:34px; display:flex; flex-wrap:wrap; gap:14px; justify-content:center; align-items:center; }
.hero-note { color:var(--cream-3); font-size:14.5px; }

/* الجهاز: إطارٌ مرسومٌ لا صورةٌ لإطار. */
.device { --bez:11px; width:min(330px,78vw); margin:0 auto; padding:var(--bez);
  background:linear-gradient(160deg,#38423E,#141B18 62%); border-radius:46px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.65), 0 0 0 1px rgba(253,246,232,.07) inset; }
.device img { border-radius:35px; display:block; background:var(--surface); }
.device-lg { width:min(360px,82vw); }
.hero-shot { margin-top:56px; padding-bottom:0; }
.hero-shot .device { margin-bottom:-90px; }

/* ── شريطُ الحقائق ────────────────────────────────────────────────────────── */
.facts { border-top:1px solid var(--line); background:var(--surface); }
.facts ul { max-width:var(--max); margin:0 auto; padding:26px 24px; list-style:none;
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.facts li { display:flex; gap:12px; align-items:baseline; font-size:15.5px; color:var(--ink-2); }
.facts b { color:var(--ink); font-weight:700; }

/* ── مقاطعٌ عامّة ─────────────────────────────────────────────────────────── */
.sec { padding:104px 0; }
.sec-head { max-width:var(--max); margin:0 auto; padding:0 24px; }
.sec h2 { font-size:clamp(1.9rem,1.4rem + 1.9vw,3rem); }
.sub { margin-top:16px; max-width:54ch; color:var(--ink-2); font-size:1.075rem; }
.ink .sub { color:var(--cream-2); }

/* ── ثلاثُ خطوات ─────────────────────────────────────────────────────────── */
.steps { max-width:var(--max); margin:44px auto 0; padding:0 24px; list-style:none;
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.steps li { background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:28px 26px 30px; }
.step-n { display:block; font-size:2.4rem; font-weight:700; color:var(--amber-ink); line-height:1; margin-bottom:14px; }
.steps h3 { font-size:1.2rem; }
.steps p { margin-top:10px; color:var(--ink-2); font-size:15.5px; line-height:1.75; }
.steps strong { color:var(--ink); }

/* ── بلاطاتُ المنتج ──────────────────────────────────────────────────────── */
.tiles { max-width:var(--max); margin:44px auto 0; padding:0 24px;
  display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.tile { border-radius:28px; padding:40px 36px 0; overflow:hidden;
        display:flex; flex-direction:column; align-items:center; text-align:center; }
.tile-amber { background:var(--amber-soft); }
.tile-sunk  { background:var(--sunk); }
.tile h3 { font-size:1.45rem; }
.tile p { margin-top:12px; max-width:34ch; color:var(--ink-2); font-size:15.5px; }
.tile strong { color:var(--ink); }
.tile .device { margin-top:32px; margin-bottom:-56px; }

/* ── الصدق (حقلٌ حبريّ) ──────────────────────────────────────────────────── */
.truth-grid { max-width:var(--max); margin:44px auto 0; padding:0 24px;
  display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.truth-grid p { color:var(--cream-2); font-size:1.075rem; line-height:1.8; }
.truth-grid p + p { margin-top:18px; }
.truth-grid b { color:var(--cream); }
.bignum { font-size:clamp(3.4rem,2rem + 5vw,5.5rem); font-weight:700; line-height:1;
          color:var(--amber); letter-spacing:-.03em; }
.bignum + span { display:block; margin-top:10px; color:var(--cream-2); font-size:1.05rem; }

/* ── أسئلةٌ شائعة ────────────────────────────────────────────────────────── */
.qa { max-width:820px; margin:36px auto 0; padding:0 24px; }
.qa details { border-bottom:1px solid var(--line); }
.qa summary { list-style:none; cursor:pointer; padding:22px 0; font-weight:700; font-size:1.08rem;
  display:flex; justify-content:space-between; align-items:center; gap:16px; }
.qa summary::-webkit-details-marker { display:none; }
.qa summary::after { content:'+'; color:var(--amber-ink); font-size:1.5rem; font-weight:400; line-height:1; }
.qa details[open] summary::after { content:'−'; }
.qa .a { padding:0 0 24px; color:var(--ink-2); line-height:1.85; max-width:62ch; }
.qa .a strong { color:var(--ink); }

/* ── من نحن ──────────────────────────────────────────────────────────────── */
.who { max-width:820px; margin:36px auto 0; padding:0 24px; }
.who dl { margin:0; border:1px solid var(--line); border-radius:22px; background:var(--surface); overflow:hidden; }
.who div { display:flex; flex-wrap:wrap; gap:6px 18px; padding:16px 22px; border-bottom:1px solid var(--line); }
.who div:last-child { border-bottom:0; }
.who dt { min-width:160px; font-weight:700; font-size:15px; }
.who dd { margin:0; color:var(--ink-2); font-size:15px; }
.note { max-width:820px; margin:24px auto 0; padding:18px 22px; background:var(--amber-soft);
        border-radius:18px; font-size:15px; line-height:1.8; }
.note strong { color:var(--amber-ink); }

/* ── التحميل ─────────────────────────────────────────────────────────────── */
.get { text-align:center; }
.pending { display:inline-flex; flex-wrap:wrap; justify-content:center; gap:10px;
  margin-top:26px; padding:16px 26px; border:1px solid var(--hair); border-radius:999px;
  color:var(--cream-2); font-size:15.5px; }
.pending b { color:var(--amber); }

/* ── الذيل ───────────────────────────────────────────────────────────────── */
.foot { background:var(--ink-deep); color:var(--cream-3); padding:56px 0 64px; font-size:14.5px; }
.foot .wrapx { display:grid; gap:14px; }
.foot a { color:var(--cream-2); }
.foot .row { display:flex; flex-wrap:wrap; gap:8px 20px; }
.foot .lede { color:var(--cream-2); font-size:16px; }

.skip { position:absolute; inset-inline-start:8px; top:-60px; background:var(--amber);
        color:var(--on-amber); padding:10px 16px; border-radius:10px; z-index:20; }
.skip:focus { top:8px; }

@media (max-width:900px) {
  .steps, .tiles, .facts ul { grid-template-columns:1fr; }
  .truth-grid { grid-template-columns:1fr; gap:32px; }
  .sec { padding:76px 0; }
  .top-nav { gap:16px; font-size:15px; }
  .top-nav .hide-sm { display:none; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .btn { transition:none; } }

/* ═══ شارةُ App Store — أصلُ أبل الرسميُّ المُعرَّب ═══════════════════════════
   ⚠ **لا تُرسَم بيدٍ ولا يُعاد رسمُ تفّاحة**: الشارةُ علامةٌ تجاريّةٌ تُستعمَل كما
   تُعطى من `tools.applemediaservices.com` بلغةِ السوق (`ar-sa`). ولا يُغيَّر
   لونُها ولا تُقَصّ ولا يُكتَب فوقها. */
.store { display:inline-flex; line-height:0; border-radius:10px; transition:transform .15s; }
.store:hover { transform:translateY(-1px); }
.store:focus-visible { outline:3px solid var(--cream); outline-offset:4px; }
.store img { height:56px; width:auto; }
.get-cta { margin-top:30px; display:flex; justify-content:center; }