/* ═══════════════════════════════════════════════════════════════
   ODARA — prototype «The Gate» · المزيج: قوس رخامي فوق بحر الغيوم
   اللوحة: لافندر · وردي · خوخي · سماوي · عاجي · نصّ بنفسجي داكن · لمسة ذهبية
   الخطّ: Onest (لاتيني) · IBM Plex Sans Arabic (بوابة) — محليان
   ═══════════════════════════════════════════════════════════════ */

:root{
  --lav:#C9B8E8; --rose:#F2C9D6; --peach:#F7D6B8; --skyc:#BFD8F0; --ivory:#FBF7F2;
  --ink:#2B2140; --gold:#E9B872;
  --ink-80:rgba(43,33,64,.8); --ink-60:rgba(43,33,64,.6); --ink-40:rgba(43,33,64,.4);
  --ink-16:rgba(43,33,64,.16); --ink-08:rgba(43,33,64,.08);
  --glass:linear-gradient(135deg, rgba(255,255,255,.62), rgba(255,255,255,.30) 55%, rgba(255,255,255,.46));
  --glass-edge:rgba(255,255,255,.78);
  --glass-shadow:0 30px 60px rgba(43,33,64,.12), 0 2px 6px rgba(43,33,64,.05), inset 0 1px 0 rgba(255,255,255,.9);
  --display:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
  --arabic:"Plex Arabic","Onest",system-ui,sans-serif;
  --arch-w:min(78vh, 56vw);
  --word:clamp(60px, 28vw, 1050px);
  --gutter:clamp(32px, 2.2vw, 64px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
html,body{background:var(--lav);color:var(--ink)}
body{
  font-family:var(--display);
  font-size:16px;line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
ul,ol{list-style:none}

/* ───────── المحمّل ───────── */
.loader{
  position:fixed;inset:0;z-index:100;
  display:grid;place-content:center;justify-items:center;gap:22px;
  background:radial-gradient(90% 80% at 50% 35%, var(--rose) 0%, var(--lav) 55%, var(--skyc) 100%);
  transition:opacity .9s ease, visibility .9s;
}
.loader.done{opacity:0;visibility:hidden}
.loader[hidden]{display:none}            /* الدليل §٣ — [hidden] تُهزم بأي display صريح */
.lw{
  font-weight:800;font-size:clamp(40px, 9vw, 120px);line-height:1;letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.95);
}
.bar{width:min(60vw, 420px);height:1px;background:var(--ink-16);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--ink);transition:width .35s ease}
.lt{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-60)}

/* ───────── العالم — السماء الثابتة ───────── */
.world{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.sky{
  position:absolute;left:-4%;top:-4%;width:108%;height:108%;max-width:none;
  object-fit:cover;object-position:50% 55%;
  transform-origin:50% 55%;
  will-change:transform;
}

/* ───────── التنقّل ───────── */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(22px, 1.5vw, 40px) var(--gutter);
}
.brand{
  display:block;line-height:1;
  font-size:clamp(24px, 1.7vw, 48px);font-weight:700;letter-spacing:.2em;
  color:var(--ink);text-indent:.2em;   /* يوازن التتبّع كي يبقى البصر متمركزاً */
}
.links{display:flex;gap:clamp(34px, 2.4vw, 64px)}
.links a{
  font-size:clamp(17px, 1.18vw, 34px);font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-80);transition:color .3s;
}
.links a:hover{color:var(--ink)}
/* ستّة روابط منذ أُضيفت الألمانية: بين 821 و1100 كانت روابط /de/ تلتصق بالشعار (مسافة صفر عند 821، مقيس 25 سبتمبر) */
@media (min-width:821px) and (max-width:1100px){.links{gap:22px}}
.menu{
  display:none;font-size:14px;letter-spacing:.16em;text-transform:uppercase;
  padding:10px 16px;border:1px solid var(--ink-40);border-radius:999px;
  background:rgba(255,255,255,.35);
}

/* ───────── مشترك ───────── */
/* ارتفاع المشهد المثبَّت = الشاشة وشريط العنوان مخفيّ (lvh) لا ظاهر (svh): على التابلت والجوّال يختفي الشريط
   مع التمرير فتطول الشاشة، وكان المشهد يبقى بطول svh فتُقصّ الغيوم بخطّ مستقيم وتظهر السماء تحته
   (لقطة عُدي من MatePad أفقياً، 26 سبتمبر). على الحاسوب لا شريط يختفي فالثلاثة متساوية */
.pin{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden}
.wrap{max-width:min(1320px, 92vw);margin:0 auto}
@media (min-width:1800px){ .wrap{max-width:min(1800px, 62vw)} }
.chapter{
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-size:clamp(12px, .83vw, 24px);font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-80);
}
.chapter i{width:.5em;height:.5em;border-radius:50%;background:var(--gold);flex:none}
h2{
  font-weight:700;font-size:clamp(38px, 5.6vw, 150px);line-height:1.02;letter-spacing:-.03em;
  max-width:16ch;margin:.25em auto .65em;text-align:center;
}
.glass{
  background:var(--glass);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);backdrop-filter:blur(18px) saturate(1.35);
  border:1px solid var(--glass-edge);
  box-shadow:var(--glass-shadow);
}

/* ═══════════ 00 · THE GATE ═══════════ */
.gate{position:relative;z-index:1;height:320vh}
.gate-scene{position:absolute;inset:0}

.glow{
  position:absolute;left:50%;top:41vh;z-index:1;
  width:80vmin;height:80vmin;margin:-40vmin 0 0 -40vmin;border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,246,220,.95) 0%, rgba(247,214,184,.6) 38%, rgba(233,184,114,0) 72%);
  transform-origin:50% 50%;
  will-change:transform,opacity;
}
.arch-group{
  position:absolute;left:50%;bottom:25vh;z-index:2;
  width:var(--arch-w);aspect-ratio:1600/1216;
  margin-left:calc(var(--arch-w) / -2);
  transform-origin:50% 43%;               /* مركز فتحة القوس — حوله يكبر العبور */
  will-change:transform,opacity;
}
.arch{display:block;width:100%;height:100%}
.arch-ref{
  position:absolute;left:0;top:78%;width:100%;height:58%;
  overflow:hidden;opacity:.34;
  transform:scaleY(-1);
  filter:blur(3px);
  -webkit-mask-image:linear-gradient(to top, rgba(0,0,0,.85), transparent 62%);
  mask-image:linear-gradient(to top, rgba(0,0,0,.85), transparent 62%);
  pointer-events:none;
}
.arch-ref img{position:absolute;left:0;bottom:0;width:100%;height:auto}

.cloud{position:absolute;pointer-events:none;user-select:none;will-change:transform,opacity}
.cloud img{display:block;width:100%;height:auto}
.c-wisp{left:46vw;top:60vh;width:48vw;z-index:3;opacity:.95;transform-origin:50% 50%}
.c-wide{left:-14vw;bottom:-27vh;width:min(80vw, 118vh);z-index:5;transform-origin:30% 80%}   /* مقيّدة بالارتفاع كي لا تبتلع الكلمة على الشاشات العريضة */
.c-puff{right:-10vw;bottom:-19vh;width:min(42vw, 63vh);z-index:6;transform-origin:70% 80%}

.word{
  position:absolute;left:0;right:0;top:45vh;z-index:4;
  text-align:center;
  font-weight:800;font-size:var(--word);line-height:.8;letter-spacing:-.045em;white-space:nowrap;
  transform-origin:50% 100%;
  will-change:transform,opacity;
}
.word .w{
  display:inline;
  background:linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.7) 55%, rgba(255,255,255,.42) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,.85);
  filter:drop-shadow(0 22px 44px rgba(43,33,64,.24)) drop-shadow(0 2px 3px rgba(43,33,64,.1));
}

.flash{
  position:absolute;inset:0;z-index:8;pointer-events:none;
  background:radial-gradient(60% 60% at 50% 54%, #FFF8EA 0%, var(--peach) 35%, rgba(201,184,232,0) 75%);
  opacity:0;
}

.gate-copy{
  position:absolute;left:var(--gutter);top:clamp(128px, 9vw, 240px);z-index:7;
  display:grid;gap:clamp(16px, 1.1vw, 30px);max-width:30vw;
  will-change:transform,opacity;
}
.gate-copy .chapter{justify-content:flex-start}
.lead{font-weight:600;font-size:clamp(28px, 2.9vw, 84px);line-height:1.08;letter-spacing:-.025em}
.sub{font-size:clamp(17px, 1.18vw, 34px);line-height:1.5;color:var(--ink-80)}
/* الألمانية أطول: بعرض 30vw يصير العنوان أربعة أسطر فينزل النصّ على الكلمة الزجاجية.
   36vw (38 لامس عمود القوس عند 1180) وعنوان أصغر ⇒ ثلاثة أسطر من 1180 فما فوق،
   وينتهي النصّ فوق حيث ينتهي الإنكليزي في كل عرض من 900 إلى 2560 (مقيس 25 سبتمبر) */
@media (min-width:821px){
  html[lang="de"] .gate-copy{max-width:36vw}
  html[lang="de"] .lead{font-size:clamp(24px, 2.3vw, 68px)}
}
/* ظهور بعد المحمّل — تدرّج ٨٠ms */
.gate-copy > *{opacity:0;transform:translateY(18px);transition:opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1)}
.ready .gate-copy > *{opacity:1;transform:none}
.ready .gate-copy > :nth-child(2){transition-delay:.08s}
.ready .gate-copy > :nth-child(3){transition-delay:.16s}
.word{opacity:0}
.ready .word{opacity:1;animation:wordIn 1.1s ease .15s backwards}   /* backwards: بعد انتهائها تحكم شفافيةُ JS */
@keyframes wordIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* ───────── شريط الفصول (ثابت) ───────── */
.hud{
  position:fixed;left:var(--gutter);bottom:clamp(30px, 2vw, 56px);z-index:40;
  display:grid;gap:clamp(16px, 1.1vw, 30px);
  transition:opacity .5s;
}
.hud.off{opacity:0;pointer-events:none}
/* «Scroll to enter» — خيط الضوء في أسفل وسط الشاشة (طلب عُدي 26 سبتمبر: في الزاوية لم يكن الزائر الأول يراه).
   العبارة فوق، وتحتها خطّ عمودي تنزل فيه نقطة ذهبية متوهّجة كل ~2.4 ثانية. ثابتٌ بالنافذة مستقلّاً عن الشريط،
   وJS يُخفيه مع أول تمرير (opacity على #gateHint) — فالتنفّس على .hint-t والظهور بـanimation backwards */
.hint{
  position:fixed;left:50%;bottom:clamp(26px, 3.4vh, 64px);z-index:40;transform:translateX(-50%);
  display:flex;flex-direction:column-reverse;align-items:center;gap:clamp(12px, .9vw, 22px);white-space:nowrap;
  font-size:clamp(13px, 1vw, 28px);font-weight:500;letter-spacing:.28em;text-indent:.28em;text-transform:uppercase;color:var(--ink);
  text-shadow:0 0 14px rgba(251,247,242,.9), 0 0 2px rgba(251,247,242,.6);   /* مقروء فوق الغيوم الكريمية على الجوّال */
  pointer-events:none;
}
.ready .hint{animation:hintIn 1s ease .9s backwards}
@keyframes hintIn{from{opacity:0;transform:translate(-50%, 10px)}to{opacity:1;transform:translate(-50%, 0)}}
.hint-t{animation:hintBreath 3.2s ease-in-out infinite}
@keyframes hintBreath{0%,100%{opacity:.7}50%{opacity:1}}
.hint-line{
  --hl:clamp(58px, 4.4vw, 124px);
  position:relative;width:1.5px;height:var(--hl);
  background:linear-gradient(to bottom, rgba(43,33,64,.42), rgba(43,33,64,.05));
}
.hint-line::after{
  content:"";position:absolute;left:50%;top:0;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;
  /* ضوء أبيض مسطّح (عُدي 26 سبتمبر): الذهبي بدا برتقالياً، ثم الكرة الذهبية بلمعتها بدت «مجسّمة» فرُفضت —
     نقطة بيضاء صافية بلا تدرّج، وهالة بيضاء ناعمة تكفي لتُرى فوق السماء والغيوم */
  background:#fff;
  box-shadow:0 0 8px 2px rgba(255,255,255,.95), 0 0 22px 7px rgba(255,255,255,.55);
  animation:hintDrop 2.4s cubic-bezier(.45,0,.55,1) infinite;
}
/* الحاسوب (بين التابلت العمودي و1800): أنزل بنحو 22px — حافّة أقرب وخيط أقصر قليلاً (طلب عُدي 26 سبتمبر: «للأسفل قليلاً») */
@media (min-width:821px) and (max-width:1799px) and (min-aspect-ratio:4/5){
  .hint{bottom:14px}
  .hint-line{--hl:clamp(46px, 4vw, 58px)}
}
/* الشاشة الكبيرة (≥1800): العبارة كانت على أقدام حروف ODARA (2880×1432: النصّ 1204–1247 والحروف تنتهي ~1235) ←
   أصغر (28 ← ~22px) وأنزل، والخيط أقصر معها، فتقف تحت الكلمة */
@media (min-width:1800px){
  .hint{bottom:clamp(16px, 1.6vh, 30px);font-size:calc(.55vw + 6px);gap:.55vw}
  .hint-line{--hl:3.1vw}
  html[dir="rtl"] body .hint{font-size:calc(.6vw + 7px)}   /* body لرفع الوزن فوق قاعدة العربية العامّة اللاحقة — تتغلّب على حجم العربية العامّ (1.1vw = 32px على 2880) */
}
@keyframes hintDrop{   /* جُرّبت ذروة 0.8 (أخفّ بـ20٪) فأعادها عُدي إلى 1 (26 سبتمبر) */
  0%{transform:translateY(0);opacity:0}
  15%{opacity:1}
  75%{opacity:1}
  100%{transform:translateY(var(--hl));opacity:0}
}
.chapters{display:flex;gap:.75em;font-weight:300;font-size:clamp(20px, 2.2vw, 60px);line-height:1;color:var(--ink-40)}
.chapters a{transition:color .3s}
.chapters a.on{color:var(--ink)}
.chapters a:hover{color:var(--ink-80)}

/* ═══════════ 01 · THE WORK ═══════════ */
.work{position:relative;z-index:1;height:470vh}
.sea{
  position:absolute;inset:auto 0 0 0;height:64vh;z-index:1;pointer-events:none;
  /* يذوب قبل حافة القسم المثبَّت — فلا خطّ حادّ حين يغادر */
  -webkit-mask-image:linear-gradient(to bottom, #000 62%, transparent 100%);
  mask-image:linear-gradient(to bottom, #000 62%, transparent 100%);
}
.sea img{position:absolute;bottom:0;height:auto}
.sea .s1{left:-12vw;bottom:-16vh;width:min(76vw, 112vh);opacity:.95;animation:drift1 70s ease-in-out infinite alternate}
.sea .s2{right:-10vw;bottom:-12vh;width:min(52vw, 78vh);opacity:.9;animation:drift2 90s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate3d(4vw,-1.5vh,0)}}
@keyframes drift2{to{transform:translate3d(-4vw,-2vh,0)}}

.work-head{
  position:absolute;left:0;right:0;top:14vh;z-index:3;
  display:grid;justify-items:center;gap:14px;padding:0 var(--gutter);
  will-change:opacity;pointer-events:none;   /* عنوانٌ لا يُنقر — وإلا حجب الشريحة المارّة تحته وهو شفاف */
}
.work-head h2{margin:0}

.scene{position:absolute;inset:0;z-index:2}
.panel{
  --pw:min(58vw, 128vh);                  /* أكبر — الشريحة هي المشهد · مقيّدة بالارتفاع كي يسع الشرحُ تحتها */
  position:absolute;left:50%;top:51%;
  width:var(--pw);
  margin-left:calc(var(--pw) / -2);
  margin-top:calc(var(--pw) * -.37);
  will-change:transform,opacity;
  opacity:0;
}
.face{
  display:block;position:relative;
  aspect-ratio:16/10;width:100%;
  border-radius:22px;
  background:rgba(255,255,255,.4);
  border:1px solid var(--glass-edge);
  box-shadow:var(--glass-shadow);
  overflow:hidden;
  transition:border-color .4s, box-shadow .4s;
}
.face img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}
/* لوحة الاسم على حجابٍ متدرّج — تبقى مقروءة فوق أي صورة */
.plate{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:grid;gap:.35em;
  padding:2.6em 1.5em 1.3em;
  background:linear-gradient(180deg, rgba(43,33,64,0) 0%, rgba(43,33,64,.42) 55%, rgba(43,33,64,.72) 100%);
  color:var(--ivory);
}
.face::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(115deg, rgba(255,255,255,.28), transparent 34%, transparent 72%, rgba(255,255,255,.14));
  pointer-events:none;
}
.face:hover{border-color:#fff;box-shadow:0 40px 70px rgba(43,33,64,.2), 0 2px 6px rgba(43,33,64,.06), inset 0 1px 0 #fff}
.face img{transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.face:hover :is(img,video){transform:scale(1.03)}
/* فيديو البطاقة (3 أكتوبر): فوق الصورة وتحت اللمعة واللوحة. الصورة غلاف يظهر فوراً، والفيديو يتلاشى إليها حين يدور أول إطار */
.face video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
  opacity:0;
  transition:opacity .6s, transform .7s cubic-bezier(.22,.61,.36,1);
}
.face video.on{opacity:1}
@media (prefers-reduced-motion: reduce){ .face video{display:none} }   /* من يفضّل تقليل الحركة يرى الصورة وحدها */
.face-mark{font-weight:700;font-size:clamp(22px, 2.6vw, 60px);line-height:1.05;letter-spacing:-.02em;color:#fff;text-shadow:0 2px 14px rgba(43,33,64,.5)}
.face-sub{font-size:clamp(11px, .85vw, 22px);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.86);text-shadow:0 1px 10px rgba(43,33,64,.5)}

.caption{margin-top:20px;display:grid;gap:6px;padding-left:2px;opacity:0}  /* يظهر حين يقترب اللوح — يضبطه JS */
@media (prefers-reduced-motion:reduce){ .caption{opacity:1} }
.client{font-size:clamp(12px, .83vw, 24px);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-60)}
.client b{color:var(--ink);font-weight:600}
.result{font-weight:400;font-size:clamp(17px, 1.45vw, 40px);line-height:1.32;letter-spacing:-.01em;max-width:46ch}

.counter{
  position:absolute;right:var(--gutter);bottom:34px;z-index:3;
  display:flex;align-items:center;gap:12px;
  font-weight:300;font-size:clamp(14px, .97vw, 28px);letter-spacing:.2em;color:var(--ink-80);   /* كان --ink-60: تباين 3.28 على 14px في الجوّال، والمطلوب 4.5 (11 أكتوبر) */
}
.counter span{color:var(--ink);font-weight:700}
.counter i{width:40px;height:1px;background:var(--ink-16)}

/* ═══════════ 02 · SERVICES ═══════════ */
.services{position:relative;z-index:1;padding:32vh var(--gutter) 14vh}
/* ───────── سجّادة الغيوم على الدرز ───────── */
.seam{
  position:absolute;left:0;right:0;top:-27vh;height:54vh;z-index:2;
  pointer-events:none;overflow:hidden;   /* يقصّ أفقياً فقط عملياً — الغيوم داخل ارتفاعه، وبلا قصّ يفيض العرض */
  /* أطراف السجّادة تذوب في السماء: قناع تدرّجي أعلى وأسفل */
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 26%, #000 74%, transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0%, #000 26%, #000 74%, transparent 100%);
}
/* طبقة ضباب متّصلة خلف الغيوم كلها — تضمن ألّا تنفتح ثغرة عند أي شريحة أفقية أثناء التمرير */
.seam::before{
  content:"";position:absolute;left:-6%;right:-6%;top:14%;bottom:8%;z-index:0;
  background:
    linear-gradient(180deg, rgba(255,249,242,0) 0%, rgba(255,249,242,.9) 30%, rgba(254,243,237,.92) 60%, rgba(255,249,242,0) 100%),
    radial-gradient(40% 60% at 28% 42%, rgba(255,255,255,.5), rgba(255,255,255,0) 70%),
    radial-gradient(38% 58% at 72% 46%, rgba(255,255,255,.45), rgba(255,255,255,0) 70%);
  filter:blur(24px);
}
.seam img{position:absolute;top:50%;transform:translateY(-50%);height:auto;z-index:1}
.seam .k1{left:-12vw;width:min(56vw, 84vh)}
.seam .k3{left:30vw;width:min(58vw, 88vh);transform:translateY(-46%) scaleX(-1)}
.seam .k4{right:-13vw;width:min(54vw, 82vh);transform:translateY(-54%)}
/* النفخات الصغيرة: خلف الكبيرة، أخفت وأنعم كي لا تبرز */
.seam .k2,.seam .k5{opacity:.7;filter:blur(1.5px)}
.seam .k2{left:24vw;width:min(22vw, 34vh);transform:translateY(-58%)}
.seam .k5{right:9vw;width:min(20vw, 30vh);transform:translateY(-60%) scaleX(-1)}
/* غيوم بعيدة باهتة تملأ الفجوات بين الكبيرة على الشاشات العريضة */
.seam .k6,.seam .k7{opacity:.55;filter:blur(2px)}
.seam .k6{left:50vw;width:min(40vw, 60vh);transform:translateY(-16%) scaleX(-1)}   /* منخفضة: تملأ الوهدة بين k3 وk4 */
.seam .k7{left:16vw;width:min(32vw, 48vh);transform:translateY(-28%)}
.services .wrap{position:relative;z-index:3}
.grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:22px}
.card{
  position:relative;padding:42px 36px 38px;border-radius:26px;
  background:var(--glass);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);backdrop-filter:blur(18px) saturate(1.35);
  border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow);
  display:grid;gap:14px;
  grid-template-rows:auto auto 1fr auto;   /* الفقرة تتمدّد فتستقرّ القائمة في القاع وتتحاذى الخطوط */
}
.num{font-weight:300;font-size:clamp(14px, .97vw, 28px);letter-spacing:.24em;color:var(--gold)}
/* العنوان يُقاس بعرض البطاقة لا بعرض النافذة: فوق 1800 تنكمش الحاوية إلى 62vw
   بينما كان الخطّ يكبر بـ2.3vw، فينكسر العنوان إلى أربعة أسطر (مقيس: 46px في بطاقة 399px) */
.card h3,.step h3{font-weight:600;font-size:clamp(24px, 1.55vw, 46px);letter-spacing:-.02em;line-height:1.18;text-wrap:balance}
.card p,.step p{color:var(--ink-80);font-size:clamp(17px, 1.18vw, 34px);line-height:1.6}
.card ul{display:grid;gap:.5em;margin-top:.6em;padding-top:1em;border-top:1px solid var(--ink-08);font-size:clamp(15px, 1.04vw, 30px);color:var(--ink-60);align-self:start}   /* من أعلى الصفّ: يتحاذى الخطّ الفاصل لا قاع القائمة */
.card li{display:grid;grid-template-columns:1em 1fr;gap:.4em}   /* السهم في عمود، والنصّ الملتفّ يحاذي أوّله */
.card li::before{content:"→";color:var(--gold)}
/* صفوف البطاقات الثلاث تتحاذى (رقم · عنوان · فقرة · قائمة) فيستوي الخطّ الفاصل في الثلاث */
@supports (grid-template-rows: subgrid){
  .grid{grid-template-rows:auto auto 1fr auto}
  .card{grid-row:span 4;grid-template-rows:subgrid}
}

.note{margin:2em auto 0;font-size:clamp(17px, 1.18vw, 34px);color:var(--ink-60);max-width:70ch;text-align:center}
.note b{color:var(--ink);font-weight:600}

/* ═══════════ 03 · THE WAY ═══════════ */
.process{position:relative;z-index:1;padding:8vh var(--gutter) 18vh;overflow:hidden}
.c-far{left:55vw;top:6vh;width:60vw;opacity:.55;filter:blur(1.5px);z-index:0}
.process .wrap,.faq .wrap{position:relative;z-index:1}
/* الأسئلة الشائعة (18 أكتوبر 2026): بطاقات «الطريقة» نفسها بلا رقم ذهبي، بإطارها ومسافاتها — حقائق صريحة
   تقرؤها محرّكات البحث والذكاء الاصطناعي، وتبقى على الشاشة كلّها (لا أكورديون يخفيها) */
.faq{position:relative;z-index:1;padding:0 var(--gutter) 18vh}
.faq h2{margin-bottom:.55em}   /* بلا سطر تمهيدي: 1.4em من خطّ العنوان كانت 112px فراغاً (مقيس 18 أكتوبر) */
.faq-item h3{font-size:clamp(20px, 1.3vw, 38px)}
.steps .step.rev:nth-child(5){transition-delay:.32s, .32s, 0s, 0s, 0s}
.steps .step.rev:nth-child(6){transition-delay:.40s, .40s, 0s, 0s, 0s}
/* إطار «الطريقة» بنسبة واحدة في كل العروض (نحو 64vw، بين 860 و1800px) بدل قاعدة .wrap العامّة:
   تلك تعطي 92vw على اللابتوب ثم تقفز إلى 62vw عند 1800، فكانت البطاقات على اللابتوب أعرض من
   العنوان بكثير (العنوان 61٪ منها) وعلى الشاشة الكبيرة بقدّه (84٪)، وتنكمش فجأة من 1320 إلى 1116 عند 1800.
   الآن العنوان 83 إلى 88٪ من عرض البطاقات في كل الشاشات (مقيس 26 سبتمبر) */
@media (min-width:821px){ .process .wrap,.faq .wrap{max-width:min(1800px, 92vw, max(860px, 64vw))} }
/* بطاقتان في الصفّ في كل العروض (كانت أربعاً): بأربع ضاق سطر النصّ إلى 223px بخطّ 22.6px عند 1920
   (نحو 16 حرفاً)، فتفاوتت الأسطر حتى 46٪ وبلغت الفقرة 9 أسطر. باثنتين: تفاوت ≤18٪ وثلاثة أسطر (مقيس 26 سبتمبر) */
.steps{display:grid;grid-template-columns:repeat(2, 1fr);gap:18px;counter-reset:step}
.step p{text-wrap:pretty}
.step{
  padding:34px 30px 36px;border-radius:24px;display:grid;gap:12px;align-content:start;
  background:var(--glass);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);backdrop-filter:blur(18px) saturate(1.35);
  border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow);
}
.step b{font-weight:300;font-size:clamp(34px, 3.4vw, 90px);line-height:1;color:var(--gold);letter-spacing:-.02em}
/* بطاقات الخدمات والطريقة عند التحويم: رفعة خفيفة + ضوء أبيض ينسكب من الحافة العليا + هالة بيضاء ناعمة.
   الرفعة بخاصية translate المستقلّة لا transform: الظهور (.rev.in) يفرض transform:none فكان يُلغي
   رفعة الخدمات القديمة بصمت (مقيس 26 سبتمبر: الفأرة فوقها وtransform=none). والظهور يؤخّر كل بطاقة
   (.08 · .16 · .24s): التأخير هنا لكل خاصية على حدة، فيبقى الظهور متدرّجاً والتحويم فورياً */
.grid .card,.steps .step{
  position:relative;isolation:isolate;
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1),
    translate .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s, border-color .5s;
}
.grid .card.rev:nth-child(2),.steps .step.rev:nth-child(2){transition-delay:.08s, .08s, 0s, 0s, 0s}
.grid .card.rev:nth-child(3),.steps .step.rev:nth-child(3){transition-delay:.16s, .16s, 0s, 0s, 0s}
.steps .step.rev:nth-child(4){transition-delay:.24s, .24s, 0s, 0s, 0s}
.card::before,.step::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 70% at 50% 0%, rgba(255,255,255,.62), rgba(255,255,255,0) 62%);
  opacity:0;transition:opacity .5s;
}
@media (hover:hover){
  .grid .card:hover,.steps .step:hover{
    translate:0 -6px;border-color:#fff;
    box-shadow:0 44px 70px rgba(43,33,64,.16), 0 0 46px rgba(255,255,255,.55), inset 0 1px 0 #fff;
  }
  .grid .card:hover::before,.steps .step:hover::before{opacity:1}
}

/* ═══════════ 04 · THE OTHER SIDE ═══════════ */
.outro{
  position:relative;z-index:1;
  min-height:100vh;display:grid;place-content:center;justify-items:center;gap:22px;
  text-align:center;padding:140px 24px 60px;
  background:linear-gradient(180deg, rgba(251,247,242,0) 0%, rgba(251,247,242,.82) 45%, var(--ivory) 100%);
}
/* صورة البوّابة في الخاتمة — تحت المحتوى، قناع علوي يذيبها في العاجي */
.outro-gate{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg, transparent 6%, #000 52%);
  mask-image:linear-gradient(180deg, transparent 6%, #000 52%);
}
.outro-gate img{
  display:block; /* inline يترك فراغ خطّ الأساس ~7px يفيض تحت القسم فيكشف لافندر الجسم */
  width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:50% 78%;
}
.outro > *:not(.outro-gate){position:relative;z-index:1}
.outro h2{margin:12px 0 4px;max-width:16ch}
.lede{max-width:52ch;color:var(--ink-80);font-size:clamp(16px, 1.5vw, 40px)}
/* العناوين والسطور التمهيدية بأسطر متوازنة: كانت تنتهي بكلمة يتيمة («Three disciplines. One / standard.»،
   وسطر «الطريقة» الألماني آخره كلمة واحدة بـ9٪ من طول الأول). مقيس 26 سبتمبر: صفر يتيمة إلا حالتين خفيفتين في .lead */
h2,.lead,.lede,.step-through{text-wrap:balance}
/* الجهة الأخرى: الجمل مفصولة بصرياً — إيقاع أهدأ (قرار عُدي ٧ سبتمبر).
   كل جملة سطر مستقلّ، والجملة الختامية فقرة تفصلها فجوة الشبكة (gap:22px) */
.lede-lines span{display:block;text-wrap:balance}
.lede-lines span+span{margin-top:.28em}
/* زرّان جنباً إلى جنب: البريد أساسي وواتساب شبحي — ثابتان في التدفّق، لا فقاعة طافية (قرار عُدي ٣٠ أغسطس) */
.cta-row{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
.cta-row .cta{margin-top:0}
.cta.cta-ghost{
  background:transparent;color:var(--ink);
  border:1.5px solid rgba(43,33,64,.32);box-shadow:none;
}
.cta.cta-ghost svg{width:1.35em;height:1.35em}
.cta{
  margin-top:14px;
  display:inline-flex;align-items:center;gap:14px;
  padding:1.4em 2.5em;border-radius:999px;
  background:var(--ink);color:var(--ivory);
  font-size:clamp(12px, .83vw, 24px);font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  box-shadow:0 20px 40px rgba(43,33,64,.22);
  position:relative;isolation:isolate;
  transition:translate .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s, background-color .4s, border-color .4s;
}
.cta span{transition:transform .3s}
.cta:hover span{transform:translateX(4px)}
.contact{
  margin-top:46px;width:min(100%, 1320px, 72vw);
  /* minmax(0,1fr): بدونها يوسّع البريدُ الطويل عمودَه لأن أدنى مقاسه أعرض من الحصّة */
  display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:18px;text-align:left;
}
.contact > div{
  padding:24px 26px;border-radius:20px;display:grid;gap:6px;align-content:start;
  background:var(--glass);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);backdrop-filter:blur(18px) saturate(1.35);
  border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow);
}
.contact .k{font-size:clamp(11px, .76vw, 22px);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-60);margin-bottom:4px}
.contact .v{font-weight:500;font-size:clamp(16px, 1.1vw, 32px)}
.contact .v a{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px;overflow-wrap:anywhere}
.contact .s{font-size:clamp(13px, .9vw, 26px);color:var(--ink-60);align-self:start}
/* صفوف البطاقات الثلاث تتحاذى (عنوان · قيمة · تعليق) */
@supports (grid-template-rows: subgrid){
  .contact{grid-template-rows:auto auto 1fr}
  .contact > div{grid-row:span 3;grid-template-rows:subgrid;align-content:normal}
}
/* الخاتمة: بطاقات الاتصال والزرّان بتأثير بطاقات الخدمات والطريقة نفسه (رفعة + ضوء أبيض من الأعلى + هالة).
   الزرّان يرتفعان 4px لا 6 (أصغر حجماً)، والضوء على الزرّ الداكن أخفّ كي يبقى النصّ العاجي مقروءاً */
.contact > div{position:relative;isolation:isolate;transition:translate .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s, border-color .5s}
.contact > div::before,.cta::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 70% at 50% 0%, rgba(255,255,255,.62), rgba(255,255,255,0) 62%);
  opacity:0;transition:opacity .5s;
}
.cta:not(.cta-ghost)::before{background:radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.22), rgba(255,255,255,0) 65%)}
@media (hover:hover){
  .contact > div:hover{
    translate:0 -6px;border-color:#fff;
    box-shadow:0 44px 70px rgba(43,33,64,.16), 0 0 46px rgba(255,255,255,.55), inset 0 1px 0 #fff;
  }
  .cta:hover{translate:0 -4px;box-shadow:0 26px 50px rgba(43,33,64,.28), 0 0 36px rgba(255,255,255,.5), inset 0 1px 0 rgba(255,255,255,.3)}
  .cta.cta-ghost:hover{background-color:rgba(255,255,255,.34);border-color:#fff;box-shadow:0 14px 30px rgba(43,33,64,.12), 0 0 36px rgba(255,255,255,.55), inset 0 1px 0 #fff}
  .contact > div:hover::before,.cta:hover::before{opacity:1}
}
.foot{margin-top:70px;font-size:clamp(11px, .76vw, 22px);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-40)}

/* ───────── ظهور مع التمرير (الدليل، الجزء الثاني/٢) ───────── */
.rev{opacity:0;transform:translateY(28px);transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1)}
.rev.in{opacity:1;transform:none}
.grid .rev:nth-child(2),.steps .rev:nth-child(2){transition-delay:.08s}
.grid .rev:nth-child(3),.steps .rev:nth-child(3){transition-delay:.16s}
.steps .rev:nth-child(4){transition-delay:.24s}

/* ═══════════ responsive ═══════════ */
@media (max-width:1180px){
  .grid{grid-template-columns:repeat(3, 1fr);gap:16px}
}
@media (max-width:820px){
  :root{--gutter:20px;--arch-w:100vw;--word:clamp(68px, 28vw, 240px)}
  .nav{padding:18px var(--gutter)}
  .links{
    position:fixed;inset:0;z-index:60;
    display:flex;flex-direction:column;justify-content:center;align-items:center;gap:28px;
    background:rgba(251,247,242,.94);
    -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
    opacity:0;pointer-events:none;transition:opacity .35s;
  }
  .links[hidden]{display:none}            /* الدليل §٣ — [hidden] must win */
  .links.open{opacity:1;pointer-events:auto}
  .links a{font-size:18px}
  .menu{display:inline-block;position:relative;z-index:70}

  .brand{font-size:19px;letter-spacing:.18em}
  .gate-copy{top:100px;max-width:84vw;gap:10px}
  .lead{font-size:clamp(24px, 6.6vw, 32px)}
  .sub{font-size:14px;line-height:1.45}
  .glow{top:34vh}
  .arch-group{bottom:34vh}
  .word{top:58vh}   /* سطر واحد لا سطران — يُنزَّل كي تختفي أقدامه خلف غيوم الأسفل */
  .c-wide{bottom:-2vh}
  .c-puff{bottom:-4vh}
  .c-wide{left:-24vw;bottom:-6vh;width:120vw}
  .c-puff{right:-20vw;bottom:-8vh;width:80vw}
  .chapters{display:none}
  .hud{bottom:22px}
  .hint{bottom:24px}

  .panel{--pw:90vw;top:50%}
  .result{font-size:17px}
  .contact{grid-template-columns:minmax(0, 1fr);text-align:center}
  .work{height:440vh}
  .work-head{top:12vh}
  .counter{right:var(--gutter);bottom:22px}
  .sea .s1{width:120vw;left:-30vw}
  .sea .s2{display:none}

  .services{padding:22vh var(--gutter) 10vh}
  .seam{top:-15vh;height:30vh}
  .seam .k1{left:-30vw;width:110vw}
  .seam .k2{left:10vw;width:50vw}
  .seam .k3{left:20vw;width:110vw}
  .seam .k4{right:-30vw;width:100vw;transform:translateY(-40%)}
  .seam .k5,.seam .k6,.seam .k7{display:none}
  .grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .process{padding:6vh var(--gutter) 14vh}
  .faq{padding:0 var(--gutter) 12vh}
  .c-far{left:20vw;top:4vh;width:120vw}
  .outro{padding:110px 20px 50px}
  /* شاشة عمودية: القوس في صورة v2 عند ~٢٢٪ أفقياً — ١٥٪ تضعه وسط الإطار */
  .outro-gate img{object-position:15% 46%}
}

/* ═══════════ التابلت العمودي — شاشة طويلة أعرض من الجوّال ═══════════
   فوق 820 كان يأخذ تركيب الحاسوب المصمَّم لشاشة عريضة، فعلى 920×1300 (MatePad عُدي عمودياً): القوس صغير
   والكلمة فوقه لا على أسفله، والغيوم الأمامية تحت الإطار (bottom بالـvh على شاشة طويلة)، والمواقع 58vw
   معزولة وسط فراغ، وبوابة الخاتمة خارج الصورة (لقطات عُدي 26 سبتمبر). هنا تركيب الجوّال مكبَّراً،
   والشريط العلوي وخطوط الحاسوب كما هي. aspect ≤ 4/5 لا يطابق أي حاسوب ولا تابلتاً أفقياً */
@media (min-width:821px) and (max-aspect-ratio:4/5){
  :root{--arch-w:80vw;--word:26vw}
  .gate-copy{top:clamp(110px, 9vh, 150px);max-width:74vw;gap:14px}
  .lead{font-size:4.3vw}
  .sub{font-size:2.1vw;max-width:60ch}
  html[lang="de"] .gate-copy{max-width:74vw}   /* تتغلّب على عمود البوابة الألماني 36vw (للشاشات العريضة) */
  html[lang="de"] .lead{font-size:4vw}
  .glow{top:40vh}
  .arch-group{bottom:26vh}   /* 30vh لامس القوسُ الفقرةَ على 920×1265 (39px) و1024×1366 (61px) */
  .word{top:57vh}
  .c-wide{left:-20vw;bottom:-11vh;width:102vw}
  .c-puff{right:-16vw;bottom:-12vh;width:66vw}

  .panel{--pw:86vw}
  .work-head{top:10vh}
  .sea .s1{width:120vw;left:-30vw}
  .sea .s2{width:70vw;right:-24vw}

  /* الخدمات: ثلاث بطاقات في صفّ على 920 تعطي نحو 20 حرفاً في السطر (196px) وفقرة من 6 أسطر ← بطاقة في الصفّ
     بعرض مريح للقراءة، وسط الإطار */
  .grid{grid-template-columns:minmax(0, 1fr);max-width:640px;margin-inline:auto}

  /* بوابة الخاتمة إلى اليسار (طلب عُدي 26 سبتمبر): 15% كانت تضع مركز القوس عند 33٪ من العرض ← 24% تضعه عند نحو 19٪
     (على الحاسوب ~10٪)، والقوس كاملٌ لا يلامس الحافّة */
  .outro-gate img{object-position:24% 46%}

  /* الخاتمة: العنوان والنصّ والزرّان أكبر بنحو 10٪، والبطاقات **أعرض فقط** (72 ← 76vw) بحشوتها وخطوطها الأصلية —
     جُرّب تكبيرها كلّها فرفضه عُدي («زيادة العرض فقط وليس الحجم الكامل»، 26 سبتمبر). للتابلت وحده */
  .outro h2{font-size:calc(clamp(38px, 5.6vw, 150px) * 1.1)}
  .outro .lede{font-size:calc(clamp(16px, 1.5vw, 40px) * 1.1)}
  .outro .cta{font-size:calc(clamp(12px, .83vw, 24px) * 1.1)}
  .contact{width:min(100%, 1320px, 76vw)}

  /* المسافة الفارغة بين اختفاء القوس وثبات عنوان الأعمال أقصر بنحو 15٪: قسم الأعمال يبدأ 17vh أبكر فوق
     ذيل البوابة (مشهدها مخفيّ هناك). ومسافة العنوان ← الموقع الأول في main.js (TAB_PORTRAIT) */
  .work{margin-top:-17vh}
}

/* ═══════════ reduced motion — designed, not skipped ═══════════ */
@media (prefers-reduced-motion:reduce){
  .hint-line::after{animation:none;top:50%}
  .hint-t{animation:none;opacity:1}
  .sea img{animation:none}
  .loader{transition:none}
  .gate-copy > *,.word,.rev{opacity:1!important;transform:none!important;transition:none;animation:none}
  .gate{height:auto}
  .gate .pin{position:relative;height:100vh;height:100lvh}
  .work{height:auto}
  .work .pin{position:relative;height:auto;overflow:hidden;padding:140px var(--gutter) 120px}   /* hidden: غيوم البحر تمتدّ خارج العرض */
  .work-head{position:relative;left:auto;top:auto;margin-bottom:50px}
  .panel{--pw:min(70vw, 900px)}
  .scene{position:relative;inset:auto;display:grid;gap:80px;justify-items:center}
  .panel{position:relative;left:auto;top:auto;margin:0;opacity:1!important;transform:none!important}
  .counter{position:relative;right:auto;bottom:auto;margin-top:60px;justify-content:flex-end}
  .hud{display:none}
  .card,.face,.step{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.6)}
  .grid .card:hover,.steps .step:hover,.contact > div:hover,.cta:hover{translate:none}   /* الضوء والهالة يبقيان، والحركة تسقط */
}

/* ═══════════ النسخة العربية — كتلة واحدة في الذيل (الدليل §٤)
   html[dir=rtl] لا يطابق الصفحة الإنكليزية أبداً فهي محمية فيزيائياً ═══════════ */
html[dir="rtl"] body{font-family:"Plex Arabic","Onest",sans-serif}
/* العربية لا تُفرَّق حروفها: صفّر التتبّع على كل حامل نصّ عربي.
   يبقى التتبّع للاتيني الصرف: .word .brand .lw .counter .num .lang */
html[dir="rtl"] :is(.lt,.chapter,.lead,.sub,.links a:not(.lang),.menu,.face-sub,.client,.result,.hint,.hint-t,.k,.v,.s,.note,.foot,.cta,h2,h3,p,li){letter-spacing:0}
/* Plex Arabic وزناه 400/600 — 700 عليه بولد مزيّف */
html[dir="rtl"] :is(h2,.lead,.face-mark,.contact .v){font-weight:600}
/* ما ارتبط باتجاه القراءة يُقلب (الدليل §٤): نصّ البوابة · شريط الفصول · العدّاد · حاشية اللوح */
html[dir="rtl"] .gate-copy{left:auto;right:var(--gutter)}
html[dir="rtl"] .hud{left:auto;right:var(--gutter)}
html[dir="rtl"] .hint{text-indent:0;font-size:clamp(15px, 1.1vw, 30px)}   /* العربية بلا تتبّع، وأكبر قليلاً لأن حروفها أصغر عيناً */
html[dir="rtl"] .counter{right:auto;left:var(--gutter)}
html[dir="rtl"] .caption{padding-left:0;padding-right:2px}
html[dir="rtl"] .contact{text-align:right}
/* سهم الزرّ «←» يتحرّك يساراً عند التحويم */
html[dir="rtl"] .cta:hover span{transform:translateX(-4px)}
/* الغيوم والمشهد والصور لا تُقلب — الأصل واحد للّغتين */
html[dir="rtl"] .card li::before{content:"←"}

/* سطر اعتماد صغير أسفل نتيجة الشريحة (معرض بغداد الدولي) — يظهر في تمر النخيل وحدها */
.credit{
  margin-top:.7em;
  font-size:clamp(11px, .76vw, 22px);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-40);
}
html[dir="rtl"] .credit{letter-spacing:0;text-transform:none}
/* عنوان 404 العربية: التتبّع السالب يقطع وصل الحروف، وPlex وزنه الأعلى 600، والعربية تحتاج سطراً أعلى */
html[dir="rtl"] .legal h1{font-weight:600;letter-spacing:0;line-height:1.35}

/* ═══════════ الصفحات القانونية — Impressum · Datenschutz ═══════════ */
/* الجسم يملأ الشاشة كاملةً: الصفحات القانونية طويلة فلا يظهر الفرق، أما 404 فقصيرة —
   ومع قناع السماء أدناه كان لافندر html يظهر شريطاً أسفلها (مقيس 21 سبتمبر) */
.legal-page{background:var(--ivory);min-height:100vh}
/* السماء في الصفحات القانونية: جوّ عند الرأس ثم تذوب في العاجي — النصّ القانوني
   يُقرأ ولا يُشاهَد، والغيوم بكامل قوّتها خلفه تشوّش القراءة (قرار عُدي 21 سبتمبر) */
.legal-page .world{
  -webkit-mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 34%, transparent 62%);
  mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 34%, transparent 62%);
}
.legal-page .sky{opacity:.72}
.legal{
  position:relative;z-index:1;
  width:min(1080px, 92vw);margin:0 auto;
  padding:clamp(120px, 12vh, 200px) 0 clamp(70px, 8vh, 120px);
}
.legal .chapter{justify-content:flex-start}
.legal h1{
  font-weight:700;font-size:clamp(34px, 3.4vw, 68px);line-height:1.05;letter-spacing:-.03em;
  margin:.22em 0 .3em;
  overflow-wrap:break-word;
}
/* القطع بالواصلة للجوّال وحده: "Datenschutzerklärung" كلمة واحدة تفيض تحت 480px.
   فوق ذلك الحاوية تتّسع لها كاملة — والواصلة على شاشة عريضة تبدو عطلاً لا علاجاً (مقيس 21 سبتمبر) */
@media (max-width:480px){
  .legal h1{hyphens:auto;-webkit-hyphens:auto}
}
.legal-lede{font-size:clamp(17px, 1.18vw, 30px);line-height:1.55;color:var(--ink-80);max-width:56ch}
.legal section{
  margin-top:clamp(34px, 4vh, 60px);
  padding:clamp(26px, 2.4vw, 44px) clamp(24px, 2.2vw, 40px);
  border-radius:22px;
  background:var(--glass);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);backdrop-filter:blur(18px) saturate(1.35);
  border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow);
}
.legal h2{
  font-weight:600;font-size:clamp(20px, 1.6vw, 38px);line-height:1.2;letter-spacing:-.015em;
  max-width:none;margin:0 0 .7em;text-align:inherit;
}
/* سطر يُقرأ لا يتجاوز نحو 72 محرفاً مهما اتّسعت البطاقة — العين تضلّ في السطر الأطول */
.legal p{font-size:clamp(15px, 1.05vw, 26px);line-height:1.65;color:var(--ink-80);margin-bottom:.85em;max-width:72ch}
.legal ul{max-width:72ch}
.legal p:last-child{margin-bottom:0}
.legal a{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.legal ul{margin:0 0 .9em;display:grid;gap:.35em}
.legal li{
  font-size:clamp(15px, 1.05vw, 26px);line-height:1.6;color:var(--ink-80);
  display:grid;grid-template-columns:1em 1fr;   /* السطر الملتفّ يحاذي النصّ لا النقطة */
}
.legal li::before{content:"·";color:var(--gold);font-weight:700}
/* قائمة الوصف: عنوان خافت ثم القيمة — تتحوّل عمودين على الشاشات الواسعة */
.legal dl{display:grid;gap:.9em}
.legal dt{
  font-size:clamp(11px, .76vw, 20px);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-40);margin-bottom:.25em;
}
.legal dd{font-size:clamp(15px, 1.05vw, 26px);line-height:1.6;color:var(--ink)}
@media (min-width:760px){
  .legal dl{grid-template-columns:max-content minmax(0, 1fr);gap:.55em 1.8em;align-items:baseline}
  .legal dt{margin-bottom:0}
}
/* علامة نقص مؤقّتة — تُحذف قبل النشر */
.legal .todo{
  color:#C84835;font-weight:600;letter-spacing:.12em;
  font-size:clamp(12px, .83vw, 20px);
}
.legal .foot{
  margin-top:clamp(40px, 5vh, 72px);text-align:center;
  font-size:clamp(11px, .76vw, 22px);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-40);
}
.legal .foot a{text-decoration:none}
.legal .foot a:hover{color:var(--ink-80)}
/* روابط قانونية في تذييل الصفحة الرئيسية */
.foot .legal-links{display:block;margin-top:.9em}
.foot .legal-links a{text-decoration:none;transition:color .3s}
.foot .legal-links a:hover{color:var(--ink-80)}
/* الصفحات القانونية بلا زرّ قائمة ولا JS — تُلغى طبقة القائمة كاملةً وتبقى الروابط في الشريط */
@media (max-width:820px){
  .legal-page .links{
    position:static;inset:auto;z-index:auto;
    flex-direction:row;gap:20px;
    background:none;-webkit-backdrop-filter:none;backdrop-filter:none;
    opacity:1;pointer-events:auto;
  }
  .legal-page .links a{font-size:11px;letter-spacing:.06em;white-space:nowrap}
  .legal-page .brand{font-size:16px;letter-spacing:.14em}
  .legal-page .nav{gap:12px;padding:16px 16px}
}
/* سطر تمهيدي تحت عنوان الخدمات (نصّ عُدي، قسم 03) */
.services .lede{margin:0 auto 2.2em;text-align:center;max-width:60ch}
/* سطر «الطريقة» التمهيدي: كان ملاصقاً للبطاقات فتبلغه هالة التحويم. جُرّبت 2.2em (كالخدمات) فرآها عُدي
   أبعد من اللازم ← 1.4em (ملاحظتا عُدي 26 سبتمبر) */
.process .lede{margin-bottom:1.4em}
/* زرّ البوابة — أصغر من زرّ الخاتمة ومحاذٍ لبداية النصّ لا للمنتصف */
.gate-cta{justify-self:start;margin-top:clamp(6px, .6vw, 16px);padding:1.15em 2.1em}
.ready .gate-copy > :nth-child(4){transition-delay:.24s}
/* «اعبر البوابة» — آخر سطر قبل التذييل، هادئ ومتباعد (دفتر عُدي، قسم 15) */
.step-through{
  margin-top:clamp(46px, 6vh, 90px);text-align:center;
  font-size:clamp(15px, 1.05vw, 26px);font-weight:500;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-60);
}
html[dir="rtl"] .step-through{letter-spacing:0;text-transform:none;font-size:clamp(17px, 1.18vw, 30px)}
/* صفحة 404 — تتوسّط الشاشة بدل أن تعلق أعلاها */
/* 404 تتوسّط الشاشة فعلاً: تُلغى حشوة .legal العلوية وتملأ الإطار كاملاً،
   وإلا استقرّ النصّ في الثلث الأعلى وبقي نصف الشاشة فارغاً (مقيس 21 سبتمبر) */
.notfound{min-height:100vh;padding-top:0;padding-bottom:0;display:grid;align-content:center}
/* 404 العربية: الحجم 11px صُمّم لحروف لاتينية كبيرة متباعدة، والعربية تضيع فيه */
html[dir="rtl"] .legal .foot{font-size:clamp(14px, .9vw, 24px)}
@media (max-width:820px){
  html[dir="rtl"] .legal-page .links a{font-size:14px}
}