@import url('tokens.css');

/* ========== Reset ========== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--font);font-weight:400;font-size:var(--t-body);
  line-height:1.65;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4{line-height:1.08;font-weight:700;letter-spacing:-.02em}
[lang="ar"] h1,[lang="ar"] h2,[lang="ar"] h3{letter-spacing:0;line-height:1.25}
::selection{background:var(--cobalt);color:#fff}

/* ========== Layout ========== */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section)}

/* ===== سكاشن الصفحة الرئيسية: طول موحّد + فاصل بينها ===== */
.section--tall{
  position:relative;
  min-height:700px;
  display:flex;align-items:center;
  padding-block:clamp(2.5rem,5vw,4rem);
}
.section--tall > .wrap{width:100%}
/* خط شعري بيبهت على الطرفين — بيدّي إحساس الفصل من غير خط قاطع.
   محصور بـ .section عشان ما يدوسش على .cta::before اللي بيرسم خلفية الـ CTA. */
.section.section--tall::before{
  content:"";position:absolute;inset-inline:0;inset-block-start:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-strong) 25%,var(--line-strong) 75%,transparent);
  opacity:.75;pointer-events:none;
}
@media(max-width:900px){
  .section--tall{min-height:auto;padding-block:var(--section)}
}
.eyebrow{
  font-size:.95rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-3);display:flex;align-items:center;gap:.55rem;margin-bottom:1.25rem;
}
.eyebrow::before{content:"";width:18px;height:1px;background:var(--cobalt)}
[lang="ar"] .eyebrow{letter-spacing:0;text-transform:none}

/* ========== الشريط العلوي: لوجو / سوشيال / لغة ========== */
.topbar{
  position:relative;z-index:61;background:var(--black);
  border-bottom:1px solid var(--line);
}
.topbar__in{
  max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter);
  min-height:var(--topbar-h);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;
}
.topbar__logo{justify-self:start}
.topbar__logo img{height:19px;width:auto}

.topbar__social{display:flex;align-items:center;gap:.15rem;justify-self:center}
.topbar__social a{
  --c:var(--cobalt-light);
  display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  color:var(--grey-60);transition:color .25s var(--ease),background .25s var(--ease);
}
.topbar__social a:nth-child(6n+2){--c:var(--iris-light)}
.topbar__social a:nth-child(6n+3){--c:var(--electric)}
.topbar__social a:nth-child(6n+4){--c:var(--coral)}
.topbar__social a:nth-child(6n+5){--c:var(--cobalt)}
.topbar__social a:nth-child(6n+6){--c:var(--iris)}
.topbar__social svg{width:15px;height:15px}
.topbar__social a:hover{color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent)}

.topbar__lang{display:flex;align-items:center;gap:.3rem;justify-self:end}
.flag{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.28rem .6rem;border-radius:var(--r-pill);
  font-size:var(--t-xs);line-height:1;color:var(--grey-60);
  border:1px solid transparent;transition:.25s var(--ease);
}
.flag__e{
  font-size:.95rem;line-height:1;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}
.flag__t{letter-spacing:.04em}
a.flag:hover{color:var(--text);border-color:var(--line-strong)}
.flag.is-on{color:var(--text);border-color:var(--line-strong);background:var(--grey-10)}

@media(max-width:700px){
  .topbar__in{grid-template-columns:auto 1fr;gap:.5rem}
  .topbar__social{display:none}
  .topbar__lang{justify-self:end}
}

/* ========== Header — كبسولة عائمة في النص بعرض المحتوى بس ==========
   مفيش بار بعرض الصفحة: الخلفية الزجاجية على الكبسولة نفسها.
   مهم: الـ backdrop-filter على .nav مباشرةً (مش على .hdr) — لأن .hdr
   بيحتوي قائمة الموبايل الـ fixed، وأي filter عليه بيعملها containing block
   فتتحسب بالنسبة للهيدر بدل الشاشة وتتسرّب على الصفحة. */
.hdr{
  position:sticky;inset-block-start:0;z-index:60;
  padding-block:.55rem;
}
.hdr__in{
  max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter);
  min-height:var(--hdr-h);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;
}
/* العلامة المختصرة: بتظهر بس لما الشريط العلوي يطلع بره الشاشة */
.hdr__start{justify-self:start}
.hdr__mark{
  display:block;opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.hdr__mark img{width:26px;height:26px;border-radius:7px}
.hdr.is-stuck .hdr__mark{opacity:1;transform:none;pointer-events:auto}
.hdr__end{justify-self:end;display:flex;align-items:center;gap:.75rem}

/* ---- الكبسولة ---- */
.nav{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(1.15rem,2.6vw,2.6rem);
  width:fit-content;padding:1rem clamp(1.75rem,3.2vw,2.9rem);
  border-radius:var(--r-md);
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(16px) saturate(1.5);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);
  transition:background .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.hdr.is-stuck .nav{
  background:rgba(12,12,20,.72);
  border-color:rgba(255,255,255,.10);
  box-shadow:0 10px 34px -14px rgba(0,0,0,.9);
}
.nav a{
  font-size:var(--t-sm);color:var(--grey-80);position:relative;padding-block:.3rem;
  white-space:nowrap;transition:color .28s var(--ease);
}
.nav a::after{
  content:"";position:absolute;inset-inline-start:0;bottom:0;height:1px;width:0;
  background:var(--cobalt);transition:width .34s var(--ease);
}
.nav a:hover{color:var(--white)}
.nav a:hover::after,.nav a[aria-current="page"]::after{width:100%}
.nav a[aria-current="page"]{color:var(--white)}
/* السوشيال واللغة جوّه قائمة الموبايل */
.nav__extra{display:none}
.nav__social{display:flex;gap:.4rem;justify-content:center;flex-wrap:wrap}
.nav__social a{
  display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  color:var(--grey-70);border:1px solid var(--line);
}
.nav__social svg{width:18px;height:18px}
.nav__lang{
  display:inline-flex;align-items:center;gap:.5rem;font-size:.95rem;color:var(--text-2);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:.55rem 1.2rem;
}

.burger{display:none;background:none;border:0;cursor:pointer;padding:.5rem;flex-direction:column;gap:5px}
.burger span{display:block;width:22px;height:1.5px;background:var(--text);transition:transform .3s var(--ease),opacity .3s}

/* ========== Buttons ========== */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.85rem 1.6rem;border-radius:var(--r-pill);
  font-size:var(--t-sm);font-weight:500;border:1px solid transparent;cursor:pointer;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease);
}
.btn svg{width:15px;height:15px;transition:transform .3s var(--ease)}
[lang="ar"] .btn svg{transform:scaleX(-1)}
.btn--primary{background:var(--cobalt);color:#fff;box-shadow:0 6px 26px -6px rgba(91,83,255,.7)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 12px 34px -8px rgba(91,83,255,.85)}
.btn--primary:hover svg{transform:translateX(3px)}
[lang="ar"] .btn--primary:hover svg{transform:scaleX(-1) translateX(3px)}
.btn--ghost{border-color:var(--line-strong);color:var(--text)}
.btn--ghost:hover{border-color:var(--white);transform:translateY(-2px)}
.btn--sm{padding:.55rem 1.1rem;font-size:var(--t-xs)}

/* ========== HERO ==========
   بنسحب الهيرو تحت الهيدر عشان الجراديانت يفضل ماشي وراه (زي Mivon)،
   والهيدر sticky فبيفضل ظاهر بالزجاج بعد ما تنزل. */
.hero{
  position:relative;min-height:100svh;display:grid;align-items:center;
  overflow:hidden;isolation:isolate;
  margin-block-start:calc(-1 * var(--hdr-h));
}
.hero__canvas{
  position:absolute;inset:0;width:100%;height:100%;z-index:-2;
  /* fallback: لو WebGL مش شغال، الجراديانت ده بيظهر مكانه */
  background:
    radial-gradient(90% 70% at 78% 18%, #42A1F0 0%, transparent 55%),
    radial-gradient(85% 75% at 22% 78%, #FC856D 0%, transparent 52%),
    radial-gradient(120% 100% at 50% 50%, #5B53FF 0%, #0A0A14 72%);
  opacity:.92;
}
.hero__canvas.is-live{background:none;opacity:1}
/* طبقة تعتيم عشان النص يفضل مقروء فوق أي لون */
/* طبقة تعتيم عشان النص يفضل مقروء فوق أي لون */
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(0,0,0,.72) 0%,rgba(0,0,0,.34) 28%,rgba(0,0,0,.52) 68%,var(--black) 100%),
    radial-gradient(120% 85% at 72% 62%, rgba(0,0,0,.55) 0%, transparent 70%);
}
.hero__inner{width:100%;padding-block:calc(6rem + var(--hdr-h)) 6.5rem}
.hero__grid{display:grid;grid-template-columns:1fr;gap:2.5rem}
@media(min-width:900px){.hero__grid{grid-template-columns:1.4fr .75fr;align-items:end;gap:clamp(2rem,5vw,5rem)}}

.hero h1{
  font-size:var(--t-hero);font-weight:700;letter-spacing:-.035em;
  text-wrap:balance;margin-bottom:.5em;
  text-shadow:0 2px 40px rgba(0,0,0,.45);
}
[lang="ar"] .hero h1{letter-spacing:0}
.hero h1 .thin{font-weight:300;font-style:italic}
.hero h1 .grad{
  background:var(--g-santa-monica);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.hero__lead{font-size:var(--t-lead);color:var(--grey-80);max-width:46ch;margin-bottom:2.25rem;
  text-shadow:0 1px 24px rgba(0,0,0,.55)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem}

/* أرقام تحت الهيرو */
.hero__stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem 1.75rem}
.stat__n{font-size:clamp(1.6rem,2.8vw,2.4rem);font-weight:700;letter-spacing:-.03em;line-height:1;
  direction:ltr;unicode-bidi:isolate}
.stat__l{font-size:var(--t-xs);color:var(--text-3);margin-top:.4rem;letter-spacing:.04em}
.stat:nth-child(1) .stat__n{color:var(--cobalt-light)}
.stat:nth-child(2) .stat__n{color:var(--electric)}
.stat:nth-child(3) .stat__n{color:var(--iris-light)}
.stat:nth-child(4) .stat__n{color:var(--coral)}

/* سطر التمرير تحت */
.hero__scroll{
  position:absolute;inset-block-end:1.75rem;inset-inline-start:var(--gutter);
  display:flex;align-items:center;gap:.6rem;font-size:var(--t-xs);color:var(--text-3);
  letter-spacing:.14em;text-transform:uppercase;
}
[lang="ar"] .hero__scroll{letter-spacing:0;text-transform:none}
.hero__scroll i{display:block;width:34px;height:1px;background:var(--grey-40);position:relative;overflow:hidden}
.hero__scroll i::after{content:"";position:absolute;inset:0;background:var(--cobalt);animation:sweep 2.1s var(--ease) infinite}
@keyframes sweep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* ========== Reveal ==========
   تحت الهيرو: مع التمرير. جوه الهيرو: مع التحميل على طول —
   عشان الزائر عمره ما يشوف هيرو فاضي لو الـ observer اتأخّر. */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease-out-expo),transform .8s var(--ease-out-expo)}
[data-reveal].is-in{opacity:1;transform:none}

@keyframes heroIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
/* مهم: الحالة الطبيعية = ظاهر. الأنيميشن بـ backwards بيخفي العنصر أثناء التأخير بس،
   وبعد ما يخلص بيرجع للحالة الطبيعية. لو الأنيميشن ماشتغلش أصلًا (متصفح قديم /
   تبويب متوقف / إعدادات) النص يفضل ظاهر — عمره ما هيبقى هيرو فاضي. */
.hero [data-reveal]{opacity:1;transform:none;transition:none;
  animation:heroIn .95s var(--ease-out-expo) backwards}
.hero .eyebrow{animation-delay:.06s}
.hero h1{animation-delay:.16s}
.hero__lead{animation-delay:.30s}
.hero__cta{animation-delay:.42s}
.hero__stats{animation-delay:.54s}
@media (prefers-reduced-motion:reduce){.hero [data-reveal]{animation:none;opacity:1;transform:none}}

/* ========== Responsive ========== */
@media(max-width:860px){
  .hdr__in{grid-template-columns:auto 0 1fr}
  .hdr__cta{display:none}
  .nav{
    position:fixed;inset:0;width:100vw;height:100dvh;background:rgba(0,0,0,.97);backdrop-filter:blur(20px);
    flex-direction:column;justify-content:center;gap:1.6rem;
    transform:translateY(-100%);transition:transform .45s var(--ease-out-expo);z-index:55;
    overflow-y:auto;padding:5rem 1.5rem 3rem;
    border:0;border-radius:0;box-shadow:none;   /* إلغاء شكل الكبسولة */
  }
  .hdr.is-stuck .nav{background:rgba(0,0,0,.97);border:0;box-shadow:none}
  .nav.is-open{transform:none}
  .nav a{font-size:1.4rem}
  .nav__extra{display:flex;flex-direction:column;align-items:center;gap:1.25rem;margin-top:1rem}
  /* العلامة المختصرة تفضل ظاهرة على الموبايل — الشريط العلوي ما فيهوش مساحة */
  .hdr__mark{opacity:1;transform:none;pointer-events:auto}
  .burger{display:flex;z-index:60}
  .burger.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .burger.is-open span:nth-child(2){opacity:0}
  .burger.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  .hero__stats{gap:1.25rem}
}

/* ========== Generic page (غير الرئيسية) ========== */
.page{padding-block-start:clamp(2rem,5vw,3.5rem)}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ========== Footer ========== */
.ft{border-top:1px solid var(--line);margin-top:var(--section);background:var(--black)}
.ft__grid{display:grid;grid-template-columns:1.4fr .7fr 1fr;gap:2.5rem;padding-block:clamp(2.5rem,6vw,4rem)}
.ft__brand img{height:24px;width:auto;margin-bottom:1rem}
.ft__brand p{color:var(--text-2);font-weight:300;max-width:38ch;font-size:.92rem}
.ft h4{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin-bottom:1rem;font-weight:500}
[lang="ar"] .ft h4{letter-spacing:0;text-transform:none}
.ft__nav,.ft__contact{display:flex;flex-direction:column;gap:.6rem}
.ft__nav a,.ft__contact a{color:var(--text-2);font-size:.92rem;transition:color .25s var(--ease);width:fit-content}
.ft__nav a:hover,.ft__contact a:hover{color:var(--cobalt-light)}
.ft__social{display:flex;flex-wrap:wrap;gap:.5rem .9rem;margin-top:.75rem}
.ft__social a{font-size:.8rem;color:var(--text-3)}
.ft__bar{border-top:1px solid var(--line);padding-block:1.25rem;font-size:.8rem;color:var(--text-3)}
@media(max-width:860px){.ft__grid{grid-template-columns:1fr;gap:2rem}}

/* ========== Section shell ========== */
/* أصغر شوية + سطر واحد: اللي كان بيكسّره هو max-width:20ch */
.sec__title{font-size:clamp(1.45rem,3vw,2.55rem);margin-bottom:.6rem;text-wrap:balance;max-width:none}
.sec__lead{color:var(--text-2);font-weight:300;max-width:58ch;margin-bottom:2.75rem;font-size:var(--t-lead)}
.sec__cta{margin-top:2.5rem}
/* شريحة أفتح شوية + وهج كوبالت خفيف من فوق — الفرق محسوس مش مرئي بحدّة */
.section--alt{
  background:
    radial-gradient(85% 55% at 50% 0%, color-mix(in srgb,var(--cobalt) 9%,transparent) 0%, transparent 72%),
    linear-gradient(180deg,transparent,var(--grey-10) 16%,var(--grey-10) 84%,transparent);
}
/* ستاجر بسيط للعناصر المتكررة */
[data-reveal][style*="--i"]{transition-delay:calc(var(--i) * .07s)}

/* ========== Service category cards ========== */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
.card{
  --c:var(--cobalt);
  position:relative;display:flex;flex-direction:column;gap:.85rem;
  background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-md);
  padding:1.5rem 1.35rem 1.25rem;overflow:hidden;
  transition:border-color .28s var(--ease),transform .28s var(--ease),box-shadow .28s var(--ease);
}
.card:nth-child(6n+2){--c:var(--iris)}
.card:nth-child(6n+3){--c:var(--electric)}
.card:nth-child(6n+4){--c:var(--coral)}
.card:nth-child(6n+5){--c:var(--cobalt-light)}
.card:nth-child(6n+6){--c:var(--iris-light)}
.card::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;height:2px;
  background:var(--c);transform:scaleX(0);transform-origin:var(--o,left);transition:transform .4s var(--ease-out-expo);
}
[dir="rtl"] .card::before{--o:right}
.card:hover{border-color:var(--c);transform:translateY(-4px);box-shadow:0 14px 40px -12px color-mix(in srgb,var(--c) 55%,transparent)}
.card:hover::before{transform:scaleX(1)}
.card__ico{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c) 16%,transparent);color:var(--c);font-size:1.4rem;
}
.card h3{font-size:1.05rem;font-weight:700;line-height:1.4}
.card__list{list-style:none;display:flex;flex-direction:column;gap:.3rem;margin-block:auto .25rem}
.card__list li{font-size:.85rem;color:var(--text-2);font-weight:300;display:flex;gap:.5rem;align-items:baseline}
.card__list li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--c);flex-shrink:0}
.card__n{font-size:.75rem;font-weight:500;color:var(--text-3);letter-spacing:.03em;direction:ltr;unicode-bidi:isolate;text-align:start}

/* ========== Principles ========== */
.princ{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.75rem 1.5rem;margin-top:2.5rem}
.princ__i{--c:var(--cobalt)}
.princ__i:nth-child(2){--c:var(--iris)}
.princ__i:nth-child(3){--c:var(--electric)}
.princ__i:nth-child(4){--c:var(--coral)}
.princ__ico{
  width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-size:1.25rem;
  background:color-mix(in srgb,var(--c) 15%,transparent);color:var(--c);margin-bottom:.9rem;
}
.princ__i h3{font-size:1rem;font-weight:700;margin-bottom:.4rem}
.princ__i p{font-size:.9rem;color:var(--text-2);font-weight:300;line-height:1.8}

/* ========== Work ========== */
.work{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;margin-top:2.5rem}
.work__i{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-md);overflow:hidden;transition:border-color .28s var(--ease),transform .28s var(--ease)}
.work__i:hover{border-color:var(--cobalt);transform:translateY(-4px)}
.work__i img{width:100%;aspect-ratio:4/3;object-fit:cover}
.work__i h3{font-size:1rem;padding:1rem 1.1rem .3rem}
.work__tag{display:inline-block;margin:0 1.1rem 1.1rem;font-size:.75rem;color:var(--text-3)}

/* ========== Testimonials ========== */
.says{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;margin-top:2rem}
.says__i{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-md);padding:1.5rem}
.says__i blockquote{font-size:1rem;line-height:1.85;color:var(--text);font-weight:300;margin-bottom:1rem}
.says__i blockquote::before{content:"”";display:block;font-size:2.5rem;line-height:.6;color:var(--cobalt);margin-bottom:.5rem}
.says__i figcaption{font-size:.85rem;font-weight:700}
.says__i figcaption span{display:block;font-size:.78rem;font-weight:300;color:var(--text-3);margin-top:.15rem}

/* ========== Closing CTA ========== */
.cta{position:relative;padding-block:clamp(4rem,9vw,7rem);overflow:hidden;isolation:isolate}
.cta::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(70% 120% at 20% 110%, color-mix(in srgb,var(--coral) 34%,transparent) 0%, transparent 62%),
    radial-gradient(70% 120% at 82% -10%, color-mix(in srgb,var(--electric) 26%,transparent) 0%, transparent 60%),
    radial-gradient(90% 140% at 50% 50%, color-mix(in srgb,var(--iris) 30%,transparent) 0%, var(--black) 72%);
}
.cta__in{text-align:center;display:flex;flex-direction:column;align-items:center;gap:1rem}
.cta h2{font-size:var(--t-h1);text-wrap:balance}
.cta p{color:var(--grey-80);max-width:48ch;font-weight:300;font-size:var(--t-lead)}
.cta__btns{display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center;margin-top:.75rem}

/* ========== Service page ========== */
.svcp__hero{position:relative;padding-block:clamp(2rem,5vw,3.5rem) clamp(2.5rem,6vw,4.5rem);overflow:hidden;isolation:isolate}
.svcp__hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(60% 100% at 85% 0%, color-mix(in srgb,var(--cobalt) 26%,transparent) 0%, transparent 62%),
    radial-gradient(55% 95% at 8% 18%, color-mix(in srgb,var(--iris) 20%,transparent) 0%, transparent 60%);
}
.crumb{display:flex;align-items:center;gap:.5rem;font-size:.78rem;color:var(--text-3);margin-bottom:1.5rem}
.crumb a{transition:color .25s var(--ease)}
.crumb a:hover{color:var(--cobalt-light)}
.svcp__hero h1{font-size:var(--t-h1);margin-bottom:.55em;text-wrap:balance;max-width:16ch}
.svcp__lead{font-size:var(--t-lead);color:var(--grey-80);max-width:52ch;font-weight:300;margin-bottom:2rem}
.svcp__cta{display:flex;flex-wrap:wrap;gap:.85rem}

.svcp__intro .wrap{max-width:70ch}
.svcp__intro p{font-size:1.05rem;line-height:1.95;color:var(--text-2);font-weight:300}
.svcp__intro p + p{margin-top:1.25rem}

/* إيه اللي بتاخده */
.incl{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:1rem;margin-top:2.25rem}
.incl__i{
  --c:var(--cobalt);position:relative;padding:1.5rem 1.35rem 1.35rem;
  background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-md);
  transition:border-color .28s var(--ease),transform .28s var(--ease);
}
.incl__i:nth-child(6n+2){--c:var(--iris)}
.incl__i:nth-child(6n+3){--c:var(--electric)}
.incl__i:nth-child(6n+4){--c:var(--coral)}
.incl__i:nth-child(6n+5){--c:var(--cobalt-light)}
.incl__i:nth-child(6n+6){--c:var(--iris-light)}
.incl__i:hover{border-color:var(--c);transform:translateY(-3px)}
.incl__n{
  display:block;font-size:.78rem;font-weight:700;color:var(--c);letter-spacing:.1em;
  margin-bottom:.65rem;direction:ltr;unicode-bidi:isolate;text-align:start;
}
.incl__i h3{font-size:1rem;font-weight:700;margin-bottom:.4rem}
.incl__i p{font-size:.9rem;color:var(--text-2);font-weight:300;line-height:1.8}

/* الخطوات */
.steps{list-style:none;counter-reset:st;display:grid;gap:0;margin-top:2.25rem;max-width:78ch}
.steps__i{
  counter-increment:st;position:relative;padding:1.5rem 0 1.5rem 0;
  padding-inline-start:4rem;border-top:1px solid var(--line);
}
.steps__i:last-child{border-bottom:1px solid var(--line)}
.steps__i::before{
  content:counter(st,decimal-leading-zero);position:absolute;inset-inline-start:0;inset-block-start:1.5rem;
  font-size:1.5rem;font-weight:700;color:var(--cobalt);line-height:1;
  direction:ltr;unicode-bidi:isolate;opacity:.9;
}
.steps__i h3{font-size:1.05rem;font-weight:700;margin-bottom:.35rem}
.steps__i p{font-size:.92rem;color:var(--text-2);font-weight:300;line-height:1.85;max-width:62ch}

/* أسئلة شائعة */
.faq{margin-top:1.75rem;max-width:78ch}
.faq__i{border-bottom:1px solid var(--line)}
.faq__i summary{
  cursor:pointer;list-style:none;padding:1.15rem 2.5rem 1.15rem 0;
  font-size:1rem;font-weight:700;position:relative;transition:color .25s var(--ease);
}
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary::after{
  content:"";position:absolute;inset-inline-end:.4rem;inset-block-start:1.5rem;
  width:10px;height:10px;border-inline-end:2px solid var(--text-3);border-block-end:2px solid var(--text-3);
  transform:rotate(45deg);transition:transform .28s var(--ease),border-color .25s;
}
.faq__i[open] summary{color:var(--cobalt-light)}
.faq__i[open] summary::after{transform:rotate(-135deg);border-color:var(--cobalt-light)}
.faq__i summary:hover{color:var(--text)}
.faq__i p{padding:0 0 1.25rem;color:var(--text-2);font-weight:300;line-height:1.9;font-size:.94rem;max-width:66ch}

/* ========== 404 ========== */
.nf__in{text-align:center;display:flex;flex-direction:column;align-items:center;gap:1rem;padding-block:3rem}
.nf__code{
  font-size:clamp(4rem,16vw,9rem);font-weight:700;line-height:1;letter-spacing:-.04em;
  background:var(--g-miami);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;direction:ltr;
}
.nf h1{font-size:var(--t-h2)}
.nf__lead{color:var(--text-2);font-weight:300;max-width:46ch}

/* ========== روابط صفحات الخدمات ========== */
.svclinks{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.6rem;margin-bottom:2rem}
.svclinks__i{
  --c:var(--cobalt);
  display:flex;align-items:center;gap:.75rem;padding:.85rem 1rem;
  background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-sm);
  transition:border-color .22s var(--ease),background .22s var(--ease),transform .22s var(--ease);
}
.svclinks__i:nth-child(4n+2){--c:var(--iris)}
.svclinks__i:nth-child(4n+3){--c:var(--electric)}
.svclinks__i:nth-child(4n+4){--c:var(--coral)}
.svclinks__i:hover{border-color:var(--c);background:var(--surface-2);transform:translateY(-2px)}
.svclinks__t{font-size:.9rem;font-weight:700;flex-shrink:0}
.svclinks__d{font-size:.78rem;color:var(--text-3);font-weight:300;flex:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.svclinks__i svg{width:15px;height:15px;color:var(--c);flex-shrink:0;transition:transform .22s var(--ease)}
[lang="ar"] .svclinks__i svg{transform:scaleX(-1)}
.svclinks__i:hover svg{transform:translateX(3px)}
[lang="ar"] .svclinks__i:hover svg{transform:scaleX(-1) translateX(3px)}
.svclinks__rule{border:0;border-top:1px solid var(--line);margin:0 0 2rem}

/* ========== Contact page ========== */
.ctp__hero{padding-block:clamp(1.5rem,4vw,3rem) clamp(1.5rem,4vw,2.5rem);position:relative;overflow:hidden;isolation:isolate}
.ctp__hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(60% 100% at 80% 0%, color-mix(in srgb,var(--iris) 22%,transparent) 0%, transparent 62%)}
.ctp__hero h1{font-size:var(--t-h1);margin-bottom:.5em;text-wrap:balance;max-width:16ch}
.ctp__lead{font-size:var(--t-lead);color:var(--grey-80);font-weight:300;max-width:54ch}
.ctp__grid{display:grid;grid-template-columns:1.35fr .8fr;gap:clamp(1.5rem,4vw,3rem);align-items:start}
.ctp__form{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-md);padding:clamp(1.25rem,3vw,2rem)}
.ctp__sel{
  width:100%;padding:.7rem .85rem;border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:var(--bg);color:var(--text);font-family:inherit;font-size:.88rem;outline:none;
  -webkit-appearance:none;appearance:none;cursor:pointer;transition:.2s;
}
.ctp__sel:focus{border-color:var(--cobalt);box-shadow:0 0 0 3px rgba(91,83,255,.25)}
.ctp__sel option{background:var(--surface-2);color:var(--text)}
.ctp__done{display:none;text-align:center;padding:2.5rem 1rem}
.ctp__done.on{display:block}
.ctp__done .ok{width:66px;height:66px;margin:0 auto 1rem;border-radius:50%;font-size:1.9rem;color:#fff;
  background:linear-gradient(135deg,var(--cobalt),var(--electric));display:grid;place-items:center}
.ctp__done h2{font-size:1.35rem;margin-bottom:.5rem}
.ctp__done p{color:var(--text-2);font-weight:300;line-height:1.85}
.ctp__side{display:flex;flex-direction:column;gap:1rem;position:sticky;top:6rem}
.ctp__card{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-md);padding:1.5rem 1.35rem}
.ctp__card--alt{background:linear-gradient(160deg,color-mix(in srgb,var(--cobalt) 16%,transparent),transparent);
  border-color:rgba(91,83,255,.4)}
.ctp__card h2{font-size:1.1rem;margin-bottom:1rem}
.ctp__card h3{font-size:1rem;margin-bottom:.5rem}
.ctp__card--alt p{font-size:.9rem;color:var(--text-2);font-weight:300;line-height:1.8;margin-bottom:1.1rem}
.ctp__list{list-style:none;display:flex;flex-direction:column;gap:.9rem}
.ctp__list li{display:flex;flex-direction:column;gap:.15rem}
.ctp__list span{font-size:.72rem;color:var(--text-3);letter-spacing:.06em}
.ctp__list a{font-size:.95rem;font-weight:700;transition:color .22s var(--ease);width:fit-content}
.ctp__list a:hover{color:var(--cobalt-light)}
.ctp__sub{margin-top:1.5rem;font-size:.72rem!important;color:var(--text-3);letter-spacing:.06em;text-transform:uppercase}
[lang="ar"] .ctp__sub{text-transform:none;letter-spacing:0}
.ctp__social{display:flex;flex-wrap:wrap;gap:.45rem .9rem;margin-top:.6rem}
.ctp__social a{font-size:.82rem;color:var(--text-2);transition:color .22s var(--ease)}
.ctp__social a:hover{color:var(--cobalt-light)}
@media(max-width:860px){.ctp__grid{grid-template-columns:1fr}.ctp__side{position:static}}

/* ==========================================================================
   عناوين الأقسام في المنتصف — ما عدا الهيرو (بند 6)
   ========================================================================== */
.section .eyebrow{justify-content:center}
.section .sec__title,
.section .sec__lead{margin-inline:auto;text-align:center}
.section .sec__cta{text-align:center}
.section .steps,
.section .faq,
.section .svcp__intro{margin-inline:auto}
/* السيكشن المقسوم نصّين بيفضل بمحاذاة البداية */
.prod .eyebrow{justify-content:flex-start}

/* ==========================================================================
   Trusted By — شريط لوجوهات بيلف باستمرار (بند 4)
   ========================================================================== */
.trust{padding-block:clamp(3rem,7vw,5rem) clamp(2.5rem,6vw,4rem)}
.trust__t{
  font-size:clamp(1.35rem,2.7vw,2.05rem);font-weight:500;color:var(--text);
  text-align:center;margin-bottom:clamp(2.25rem,5vw,3.5rem);text-wrap:balance;
  letter-spacing:-.01em;
}

/* الشريط محصور في صندوق — مش بعرض الشاشة كلها */
.marq{
  position:relative;overflow:hidden;
  max-width:780px;margin-inline:auto;
}
/* أطراف الدخول والخروج: اللوجو بيتضبّب وبيذوب في لون الخلفية قبل ما يختفي.
   الـ backdrop-filter بيضبّب اللي بيعدّي من ورا الطبقة، والـ mask بيخلّي
   الضباب أقوى ما يكون عند الحافة وبيتلاشى جوّه. */
.marq__fade{
  position:absolute;inset-block:0;z-index:2;pointer-events:none;
  width:clamp(56px,11%,120px);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
}
.marq__fade--s{
  left:0;
  background:linear-gradient(to right,var(--bg) 8%,transparent 100%);
  -webkit-mask-image:linear-gradient(to right,#000 0,#000 22%,transparent 100%);
          mask-image:linear-gradient(to right,#000 0,#000 22%,transparent 100%);
}
.marq__fade--e{
  right:0;
  background:linear-gradient(to left,var(--bg) 8%,transparent 100%);
  -webkit-mask-image:linear-gradient(to left,#000 0,#000 22%,transparent 100%);
          mask-image:linear-gradient(to left,#000 0,#000 22%,transparent 100%);
}
.marq__track{
  --shift:-50%;                 /* بيتظبط من app.js بالبكسل بعد الاستنساخ */
  display:flex;align-items:center;gap:clamp(2.5rem,5vw,4.25rem);width:max-content;
  animation:marqRun var(--marq-dur,46s) linear infinite;
  will-change:transform;
}
/* في RTL التراك مرساه الحافة اليمنى، فالاتجاه بينعكس وإلا بتفضل فجوة على اليمين */
[dir="rtl"] .marq__track{--shift:50%}
.marq:hover .marq__track{animation-play-state:paused}
@keyframes marqRun{from{transform:translate3d(var(--shift),0,0)} to{transform:translate3d(0,0,0)}}

/* من غير frames — اللوجوهات نفسها بس، كلها نسخة بيضة */
.marq__i{
  flex:0 0 auto;display:grid;place-items:center;
  height:42px;
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.marq__i img{
  height:auto;width:auto;
  max-height:34px;max-width:150px;object-fit:contain;
}
.marq__i:hover{transform:translateY(-2px)}
@media(max-width:690px){
  .marq__i{height:32px}
  .marq__i img{max-height:25px;max-width:110px}
}
@media (prefers-reduced-motion:reduce){
  .marq__track{animation:none}
  .marq{overflow-x:auto}
}

/* ==========================================================================
   ORCIID Social — سيكشن المنتج (بند 8)
   ========================================================================== */
.prod{
  --dir:1;
  --frame-w:clamp(150px,19vw,215px);
  --frame-h:clamp(196px,24vw,272px);
  display:flex;align-items:center;
}
[dir="rtl"] .prod{--dir:-1}
.prod__grid{
  width:100%;
  display:grid;grid-template-columns:1fr;gap:clamp(2rem,5vw,3.5rem);align-items:center;
}
@media(min-width:900px){.prod__grid{grid-template-columns:1fr 1fr}}

/* العنوان في النص فوق الصورة والكلام */
.prod__head{text-align:center;margin-bottom:clamp(1.5rem,3vw,2.25rem)}
.prod__head .eyebrow{justify-content:center;margin-bottom:.9rem}
/* سطر واحد: اللي كان بيكسّره هو max-width:20ch — شيلناه وصغّرنا الخط شوية.
   ما بنجبرش nowrap عشان مايحصلش overflow على الشاشات المتوسطة. */
.prod__t{font-size:clamp(1.45rem,3vw,2.55rem);text-wrap:balance;margin:0 auto;max-width:none}
.prod__lead{color:var(--text-2);font-weight:300;font-size:var(--t-lead);max-width:52ch;margin-bottom:1.15rem}
.prod__list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.6rem clamp(1rem,2vw,1.75rem);margin-bottom:1.5rem}
.prod__list li{
  --c:var(--cobalt-light);
  display:flex;align-items:baseline;gap:.65rem;
  font-size:.94rem;color:var(--text-2);font-weight:300;
}
.prod__list li:nth-child(2){--c:var(--iris-light)}
.prod__list li:nth-child(3){--c:var(--electric)}
.prod__list li:nth-child(4){--c:var(--coral)}
.prod__list li::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--c);flex-shrink:0;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent);
}
.prod__cta{display:flex;justify-content:center}
/* زرار عريض بسطر واحد */
.btn--wide{
  justify-content:center;
  min-width:280px;padding:.95rem 1.75rem;
}
@media(max-width:560px){.btn--wide{min-width:0;width:100%}}

/* --- الفريمات: كلها بنفس الطول والعرض، في صف بيزحف مع التمرير --- */
.prod__screens{
  position:relative;overflow:hidden;
  height:var(--frame-h);
  --p:0;                       /* بيتحدّث من app.js حسب موضع السيكشن */
}
.scr__row{
  display:flex;align-items:center;gap:clamp(10px,1.4vw,18px);
  height:100%;width:max-content;
  transform:translate3d(calc(var(--dir) * var(--p) * 78px),0,0);
  transition:transform .12s linear;will-change:transform;
}
.scr{
  flex:0 0 auto;
  width:var(--frame-w);height:var(--frame-h);
  display:flex;flex-direction:column;
  background:var(--grey-99);color:#14151A;
  border-radius:12px;overflow:hidden;
  box-shadow:0 18px 44px -18px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.07);
}

.scr__bar{display:flex;gap:4px;padding:7px 9px;background:#EDEDF3;border-bottom:1px solid #E0E0EA}
.scr__bar i{width:5px;height:5px;border-radius:50%;background:#C3C4D2}
.scr__body{padding:9px 10px 11px;display:grid;gap:7px;align-content:start;flex:1;min-height:0;overflow:hidden}
.scr__h{font-size:8.5px;font-weight:700;color:#3A3B4A;letter-spacing:0}

.scr__stats{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.scr__stats div{background:#F2F2F7;border-radius:5px;padding:5px 6px;display:grid;gap:1px}
.scr__stats b{font-size:9px;font-weight:700;color:#14151A;direction:ltr;unicode-bidi:isolate}
.scr__stats i{font-size:6.5px;font-style:normal;color:#12A150;direction:ltr;unicode-bidi:isolate}

.scr__chart{display:flex;align-items:flex-end;gap:3px;height:34px;padding-top:2px}
.scr__chart s{
  flex:1;height:var(--v);border-radius:2px 2px 0 0;text-decoration:none;
  background:linear-gradient(180deg,var(--cobalt),var(--iris));opacity:.85;
}

.scr__cal{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.scr__cal u{height:4px;border-radius:1px;background:#DEDFEE;text-decoration:none}
.scr__cal em{
  grid-column:var(--col,1);height:9px;border-radius:2px;
  background:color-mix(in srgb,var(--cobalt) 30%,#fff);
}
.scr__cal em:nth-child(3n){background:color-mix(in srgb,var(--coral) 34%,#fff)}
.scr__cal em:nth-child(3n+1){background:color-mix(in srgb,var(--electric) 34%,#fff)}

.scr__q{list-style:none;display:grid;gap:5px}
.scr__q li{display:flex;align-items:center;gap:5px;background:#F2F2F7;border-radius:5px;padding:5px 6px}
.scr__q span{width:12px;height:12px;border-radius:3px;background:#D5D6EA;flex-shrink:0}
.scr__q b{flex:1;height:4px;border-radius:2px;background:#DEDFEE}
.scr__q i{width:14px;height:4px;border-radius:2px;flex-shrink:0}
.scr__q i.ok{background:#12A150}
.scr__q i.wait{background:#E2A200}
.scr__q i.draft{background:#C3C4D2}


@media(max-width:560px){
  .prod{--frame-w:40vw;--frame-h:200px}
  .prod__list{grid-template-columns:1fr}
}

/* ==========================================================================
   الخدمات: 3 في الصف (بند 5)
   ========================================================================== */
/* كروت الخدمات جنب بعض مع سكرول أفقي */
.cards--scroll{
  display:flex;gap:1rem;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;
  /* مساحة رأسية عشان رفعة الـ hover والظل مايتقصّوش، والهوامش السالبة بتلغي أثرها على التخطيط */
  padding-block:1rem;margin-block:-1rem;
  padding-inline:2px;
  scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;
  overscroll-behavior-x:contain;
}
.cards--scroll::-webkit-scrollbar{height:6px}
.cards--scroll::-webkit-scrollbar-track{background:transparent}
.cards--scroll::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px}
.cards--scroll::-webkit-scrollbar-thumb:hover{background:var(--grey-40)}
.cards--scroll:focus-visible{outline:2px solid var(--cobalt);outline-offset:6px;border-radius:var(--r-md)}
.cards--scroll .card{
  flex:0 0 clamp(248px,25vw,318px);
  scroll-snap-align:start;
}
/* المحتوى جوّه الكارت في المنتصف */
.cards--scroll .card{align-items:center;text-align:center}
.cards--scroll .card__list{align-items:center}
.cards--scroll .card__list li{justify-content:center}
.cards--scroll .card__n{text-align:center}

/* ==========================================================================
   أيقونات السوشيال في الفوتر (بند 7)
   ========================================================================== */
.ft__social{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1rem}
.ft__social a{
  --c:var(--cobalt-light);
  display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  color:var(--grey-60);border:1px solid var(--line);
  transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease),transform .25s var(--ease);
}
.ft__social a:nth-child(6n+2){--c:var(--iris-light)}
.ft__social a:nth-child(6n+3){--c:var(--electric)}
.ft__social a:nth-child(6n+4){--c:var(--coral)}
.ft__social a:nth-child(6n+5){--c:var(--cobalt)}
.ft__social a:nth-child(6n+6){--c:var(--iris)}
.ft__social a svg{width:16px;height:16px}
.ft__social a:hover{
  color:var(--c);border-color:var(--c);transform:translateY(-2px);
  background:color-mix(in srgb,var(--c) 12%,transparent);
}