@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&family=Cairo:wght@400;700;900&display=swap');

:root{
  --bg-dark:#240031;
  --bg-deeper:#1b0026;
  --violet:#9b4dff;
  --white:#fff;
  --ink:#1d1d1b;
  --muted:#cfc6da;
  --radius:22px;
  --shadow:0 18px 50px rgba(0,0,0,.35);
}

/* ===== Reset + قفل أنيميشن وقت التحميل لمنع الشرشرة ===== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html.loading *{animation-play-state:paused!important;transition:none!important}
body{margin:0;font-family:"Cairo","Inter",system-ui;line-height:1.75;background:var(--bg-dark);color:var(--white);overflow-x:hidden}
img{max-width:100%;display:block}
.container{width:min(1200px,92%);margin-inline:auto}
.center{text-align:center}

/* ===== Motif Rails (خطان رأسيان نحيف/سميك) ===== */
.motif{position:relative;isolation:isolate}
.motif::before,.motif::after{
  content:""; position:absolute; top:-12vh; bottom:-12vh; z-index:-1;
  background:#ffffff10; animation:railDrift 12s ease-in-out infinite alternate;
}
.motif::before{ right:6%; width:10px }
.motif::after { right:10%; width:6px; animation-delay:1.2s }
@keyframes railDrift{ from{transform:translateY(-8px)} to{transform:translateY(12px)} }

/* ===== Intro ===== */
#intro{ position:fixed; inset:0; z-index:9999; display:grid; place-items:center; background: radial-gradient(600px 440px at 70% 20%, #ffffff0a, transparent 60%), var(--bg-deeper); animation:introFade 1.2s ease 5.1s forwards }
.intro-lines{ width:170px; height:220px }
.intro-lines line{ stroke:#fff; stroke-dasharray:360; stroke-dashoffset:360; stroke-linecap:butt; animation:draw 3s ease forwards }
.intro-lines .thick{ stroke-width:10 }
.intro-lines .thin { stroke-width:6; animation-delay:.7s }
.intro-logo{ width:180px; opacity:0; filter:drop-shadow(0 8px 24px rgba(0,0,0,.35)); animation:logoIn 1.1s ease 2.8s forwards }
@keyframes draw{ to{ stroke-dashoffset:0 } }
@keyframes logoIn{ from{transform:translateY(16px) scale(.95); opacity:0} to{transform:none;opacity:1} }
@keyframes introFade{ to{ opacity:0; visibility:hidden } }

/* ===== NAV ===== */
.nav{ position:fixed; inset:0 0 auto 0; z-index:1000; background:#12001acc; backdrop-filter: blur(10px); transition:background .35s, box-shadow .35s }
.nav.scrolled{ box-shadow:0 8px 28px rgba(0,0,0,.25) }
.nav.on-white{ background:#ffffffeb; color:#1b0a22; }
.nav .nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 0; width:min(1200px,92%); margin-inline:auto }
.nav .brand{ display:flex; align-items:center }
.nav .brand img{ width:96px; height:auto; }
.nav .brand .logo-light{ display:none }
.nav.on-white .brand .logo-dark{ display:none }
.nav.on-white .brand .logo-light{ display:block }
.nav nav{ display:flex; gap:22px; align-items:center }
.nav a{ color:#e9def6; text-decoration:none; font-weight:900; letter-spacing:.02em }
.nav.on-white a{ color:#2b1237 }
.nav a:hover{ color:#fff }
.nav.on-white a:hover{ color:#000 }
.nav .cta-sm{ padding:.55rem 1rem; border:1.5px solid #ffffff33; border-radius:999px }
.nav.on-white .cta-sm{ border-color:#00000022 }

/* ===== HERO Identity (أبيض) ===== */
.hero-identity{ background:#fff; color:var(--ink); min-height:100vh; display:grid; place-items:center; padding-top:120px }
.identity-wrap{ position:relative; width:min(1100px,92%); aspect-ratio:16/9; display:grid; place-items:center }
.identity-img{ position:absolute; inset:0; margin:auto; width:min(880px,92%); opacity:.95;
  filter: contrast(135%) brightness(110%) drop-shadow(0 18px 50px rgba(0,0,0,.12));
  animation:flipSpin 18s ease-in-out infinite; transform-style:preserve-3d; will-change:transform }
.identity-headlines{ position:relative; width:100%; text-align:center; pointer-events:none; }
.identity-headlines h1{ font-family:"Inter","Cairo",system-ui; font-weight:900; text-transform:uppercase; letter-spacing:.08em; font-size: clamp(2rem, 7.6vw, 6rem); line-height:1.03; margin:0 }
@keyframes flipSpin{
  0%{transform: rotateY(0)   rotate(0)   scale(1)}
 40%{transform: rotateY(180deg) rotate(3deg) scale(1.03)}
 80%{transform: rotateY(360deg) rotate(0)   scale(1.01)}
100%{transform: rotateY(360deg) rotate(0)   scale(1)}
}

/* ===== HERO Dark ===== */
.hero-main{ background: radial-gradient(900px 600px at 80% -10%, #3b104c 0%, transparent 65%), var(--bg-dark); color:#fff; padding:120px 0 }
.ar-hero{ font-size: clamp(1.6rem, 3.6vw, 3rem); line-height:1.35; margin:0 }
.ar-hero span{ color:var(--violet) }
.lead{ color:#d6cde6; max-width:780px; margin:12px auto 0 }
.buttons{ margin-top:18px; display:flex; gap:12px; justify-content:center }

/* ===== Buttons (لطيفة) ===== */
.btn{ --mx:50%; --my:50%; position:relative; display:inline-flex; align-items:center; gap:.6rem;
  padding:.92rem 1.25rem; border-radius:999px; font-weight:900; text-decoration:none;
  transition:transform .25s, box-shadow .25s, background .25s, color .25s, border-color .25s; will-change:transform, background; }
.btn.soft{ color:#fff; border:1.5px solid #ffffff33; background: radial-gradient(220px 220px at var(--mx) var(--my), #ffffff22, #ffffff00 45%), linear-gradient(#ffffff06,#ffffff03); box-shadow: 0 10px 28px rgba(0,0,0,.18) }
.btn.soft:hover{ transform: translateY(-2px); border-color:#ffffff66; background: radial-gradient(220px 220px at var(--mx) var(--my), #ffffff30, #ffffff00 50%), linear-gradient(#ffffff10,#ffffff05) }
.btn.soft-fill{ color:#1b0a22; border:1.5px solid #ffffff10; background: radial-gradient(250px 250px at var(--mx) var(--my), #ffffff50, #ffffff10 45%), linear-gradient(135deg, #b396ff 0%, #8458ff 60%, #6a2de6 100%); box-shadow: 0 14px 36px rgba(106,45,230,.35) }
.btn.soft-fill:hover{ transform: translateY(-2px) scale(1.01) }

/* ===== Ticker ===== */
.ticker-band{ position:relative; background: linear-gradient(180deg,#1f022a,#160020); border-block: 1px solid #ffffff14; padding: 14px 0 }
.ticker-line{ --fs: clamp(18px, 2.2vw, 34px); height: calc(var(--fs) + 20px); overflow:hidden; white-space:nowrap }
.ticker-line .line{ display:inline-flex; gap:28px; list-style:none; padding:0; margin:0; align-items:center; will-change:transform }
.ticker-line .line li{ font-family:"Inter","Cairo",system-ui; font-weight:900; letter-spacing:.02em; font-size:var(--fs); color:#e7e0f1; opacity:.9 }
.ticker-line.t2 .line li{ color:#d2c7e7; opacity:.65 }
.t1 .line, .t1 .clone{ animation:marq var(--dur1,28s) linear infinite }
.t2 .line, .t2 .clone{ animation:marqR var(--dur2,30s) linear infinite }
.t1 .clone, .t2 .clone{ margin-inline-start:40px }
@keyframes marq  { from{ transform:translate3d(0,0,0) }   to{ transform:translate3d(-100%,0,0) } }
@keyframes marqR { from{ transform:translate3d(-100%,0,0) } to{ transform:translate3d(0,0,0) } }

/* ===== WHY (شبكة + نقاط) ===== */
.why{ padding:110px 0 90px }
.why-grid{ display:grid; grid-template-columns: 1.05fr 1.6fr; gap:72px; align-items:start }
.why-sticky{ position:sticky; top:96px }
.why-title{ font-weight:900; line-height:1.05; font-size: clamp(2rem, 5.8vw, 4.4rem); letter-spacing:.02em; margin:0 0 .35rem }
.why-sub{ color:#d6cde6; margin:0 }
.why-list-wrap.simple{ position:relative; padding-inline-start:96px }
.why-rail{ position:absolute; top:0; bottom:0; right:38px; width:2px; background: linear-gradient(to bottom, #9b4dff55, #9b4dff12); border-radius:2px }
.rail-dot{ position:absolute; right:calc(38px - 7px); width:12px; height:12px; border-radius:50%;
  background:#7a3fff33; border:2px solid #a579ff44; transform:scale(.55); box-shadow:0 0 0 0 rgba(155,77,255,.0); transition:.35s }
.rail-dot.active{ background:#9b4dff; transform:scale(1); box-shadow:0 0 22px rgba(155,77,255,.6) }

.why-list{ display:flex; flex-direction:column; gap:18px }
.why-item{ position:relative; padding:18px 18px; border-radius:18px; background: linear-gradient(180deg,#ffffff06,#ffffff03); border:1px solid #ffffff12; transform: translateY(22px); opacity:.35; transition:.45s ease; will-change:transform,opacity }
.why-item.in{ transform:none; opacity:1 }
.why-item::before{ content:""; position:absolute; right:26px; top:22px; height:2px; width:0; background:#9b4dff; transition: width .45s ease; box-shadow:0 0 12px rgba(155,77,255,.35) }
.why-item.in::before{ width:28px }
@media (max-width:980px){
  .why-grid{ grid-template-columns:1fr; gap:28px }
  .why-sticky{ position:relative; top:auto }
  .why-list-wrap.simple{ padding-inline-start:70px }
  .why-rail{ right:30px }
  .rail-dot{ right:calc(30px - 7px) }
}

/* ===== About / Vision / Mission ===== */
.about-visions{ padding:110px 0 70px }
.about-head h3{ margin:0 0 6px }
.about-head p{ margin:0 }
.rails{ position:relative; height:230px; margin:28px 0 16px }
.rails .baseline{ position:absolute; top:0; left:50%; transform:translateX(-50%); height:2px; width:0; background:#9b4dff; box-shadow:0 0 16px rgba(155,77,255,.4); animation: baseGrow 1.6s ease forwards }
.rails .rail{ position:absolute; top:0; width:0; height:0; background:#ffffff14 }
.rails .r1{ left:50%; transform:translateX(-50%); width:10px; animation: railDown 1.6s ease .3s forwards }
.rails .r2{ left:calc(50% + 14px); width:6px;  animation: railDown 1.6s ease .55s forwards }
@keyframes baseGrow{ to{ width:68% } }
@keyframes railDown{ to{ height:230px } }

.vm-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:28px; align-items:start }
.vm-card{ background: linear-gradient(180deg,#ffffff07,#ffffff04); border:1px solid #ffffff14; border-radius:22px; padding:18px 18px; box-shadow:var(--shadow) }
.vm-card .kicker{ display:inline-block; padding:.25rem .6rem; border:1px solid #ffffff2a; border-radius:999px; color:#e7def5; font-weight:900; letter-spacing:.12em; margin-bottom:.35rem }
.vm-card .baseline{ display:block; height:3px; width:140px; border-radius:2px; background:linear-gradient(90deg,#ffffff,#ffffff33,#ffffff); background-size:200% 100%; animation: blSweep 4s linear infinite }
@keyframes blSweep{ from{background-position:0% 0} to{background-position:200% 0} }

/* ===== Works ===== */
.section{ padding:90px 0 }
.works-box{ position:relative; overflow:hidden; border-radius:28px; height:280px; box-shadow:var(--shadow) }
.works-bg{ position:absolute; inset:0; background: radial-gradient(600px 380px at 70% 10%, #ffffff0e, transparent 60%), url('assets/IDENTITY-12.png') center/contain no-repeat, linear-gradient(180deg,#2b0a37,#1f072a) }
.works-content{ position:relative; z-index:1; height:100%; display:grid; place-items:center; text-align:center }
.works-content h3{ margin:0 0 8px }

/* ===== Clients ===== */
.marquee{ overflow:hidden; border-top:1px solid #ffffff18; border-bottom:1px solid #ffffff18; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent) }
.track{ display:flex; gap:90px; padding:28px 0; animation: slide 20s linear infinite; will-change:transform }
.track img{ width:220px; opacity:.92; filter:grayscale(100%) brightness(.95); transition:.25s }
.track img:hover{ filter:none; opacity:1; transform: translateY(-2px) }
@keyframes slide{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(-50%,0,0) } }
.marquee:hover .track{ animation-play-state:paused }

/* ===== Contact + Footer ===== */
.contact{ background: linear-gradient(180deg,#1c022a,#160020) }
.contact-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:10px }

.footer{ border-top:1px solid #ffffff18; background:#15001f; padding:34px 0 }
.footer-grid.pro{ display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap:20px }
.footer-grid.pro .brand{ display:flex; align-items:center; gap:12px; justify-self:start }
.footer-grid.pro .brand img{ width:72px; filter: drop-shadow(0 10px 22px rgba(0,0,0,.35)) }
.footer-grid.pro .btxt small{ display:block; opacity:.7 }
.f-links{ list-style:none; display:flex; gap:18px; padding:0; margin:0; justify-self:center }
.f-links a{ color:#e7def5; text-decoration:none }
.f-links a:hover{ color:#fff }
.rights{ justify-self:end; text-align:end }
.socials{ list-style:none; padding:0; margin:0 0 6px; display:flex; gap:14px; justify-content:flex-end }
.socials a{ color:#e7def5; text-decoration:none }
.socials a:hover{ color:#fff }
.rights small{ opacity:.8 }

/* ===== Responsive ===== */
@media (max-width:880px){
  .nav .brand img{ width:84px }
  .identity-img{ width:min(720px,92%) }
  .vm-grid{ grid-template-columns:1fr }
  .footer-grid.pro{ grid-template-columns:1fr; gap:14px; text-align:center }
  .rights{ justify-self:center; text-align:center }
}
/* ==== تعديلات لطيفة بدون لمس الأساس ==== */

/* 1) لماذا: مسافة أوضح بين العنوان والجملة */
.why .why-title{ margin-bottom:.7rem !important; }
.why .why-sub{ margin-top:.35rem !important; line-height:1.9; }

/* 2) من نحن: اجعل الرسوم تبدأ عند إضافة draw (بدل تشغيلها دائماً) */
.rails .baseline,
.rails .r1,
.rails .r2{ animation:none !important; }

.rails.draw .baseline{ animation: baseGrow 1.2s ease forwards; }
.rails.draw .r1{ animation: railDown 1.2s ease .15s forwards; }
.rails.draw .r2{ animation: railDown 1.2s ease .30s forwards; }

/* بطاقات الرؤية/الرسالة: دخول بتتابع + سطر داخلي يتسحب */
.vm-card{ opacity:.0; transform:translateY(8px); transition:opacity .45s ease, transform .45s ease; }
.vm-card.in{ opacity:1; transform:none; }
.vm-card .baseline{ transform:scaleX(0); transform-origin:right; transition:transform .6s ease .25s; }
.vm-card.in .baseline{ transform:scaleX(1); }

/* 3) العملاء: ارتفاع مريح للشعارات */
.track img{ height:46px; opacity:.9; filter:grayscale(100%); transition:filter .3s, opacity .3s; }
.track img:hover{ filter:none; opacity:1; }

/* 4) لمسة بسيطة للـ WHY items عند الدخول */
.why-item{ transform:translateY(14px); opacity:.35; transition:.45s ease; }
.why-item.in{ transform:none; opacity:1; }
.why-item::before{
  content:""; position:absolute; right:26px; top:22px; height:2px; width:0;
  background:#9b4dff; transition:width .45s ease; box-shadow:0 0 12px rgba(155,77,255,.35);
}
.why-item.in::before{ width:28px; }
/* ============ 1) تصحيح ظهور اللوقو في الـNav ============ */
/* افتراضياً: الخلفية داكنة → نعرض اللوقو الأبيض */
.nav .brand .logo-light{ display:block }
.nav .brand .logo-dark { display:none  }

/* عندما يصير الهيدر فوق خلفية فاتحة (class: on-white) → نعرض اللوقو الداكن */
.nav.on-white .brand .logo-dark { display:block }
.nav.on-white .brand .logo-light{ display:none  }

/* ============ 2) مسافة أوضح تحت "لماذا لسنا الاستوديو العادي؟" ============ */
.why .why-title{ margin-bottom: 1.50rem !important; line-height:1.50 }
.why .why-sub  { margin-top: .55rem  !important; line-height:1.9  }



/* نقطة ضوئية تمشي على خط القاعدة */
.about-visions .rails .baseline{ position:absolute; top:0; left:50%;
  transform:translateX(-50%); height:2px; width:0; background:#9b4dff;
  box-shadow:0 0 16px rgba(155,77,255,.4);
}
.about-visions .rails .baseline::after{
  content:""; position:absolute; top:-3px; left:-4px; width:8px; height:8px;
  border-radius:50%; background:#fff; box-shadow:0 0 14px #fff; opacity:0;
}
.about-visions .rails.draw .baseline::after{
  opacity:1; animation: dotRun 1s ease 1.25s forwards; /* تبدأ بعد ما يكبر الخط */
}
@keyframes dotRun{ from{ transform:translateX(0) } to{ transform:translateX(calc(100% - 4px)) } }

/* نقط ضوئية تنزل على كل سكة */
.about-visions .rails .rail{ position:absolute; top:0; width:0; height:0; background:#ffffff14 }
.about-visions .rails .r1{ left:50%; transform:translateX(-50%); width:10px }
.about-visions .rails .r2{ left:calc(50% + 14px); width:6px }

.about-visions .rails .rail::after{
  content:""; position:absolute; left:50%; transform:translate(-50%, -10px);
  width:8px; height:8px; border-radius:50%; background:#9b4dff;
  box-shadow:0 0 14px rgba(155,77,255,.8); opacity:0;
}
.about-visions .rails.draw .r1::after{ animation: dropDot .9s ease 1.55s forwards }
.about-visions .rails.draw .r2::after{ animation: dropDot .9s ease 1.70s forwards }

@keyframes baseGrow{ to{ width:68% } }
@keyframes railDown{ to{ height:230px } }
@keyframes dropDot{ from{ opacity:0; transform:translate(-50%,-10px) }
                    to  { opacity:1; transform:translate(-50%, calc(230px - 8px)) } }

/* دخول بطاقات الرؤية/الرسالة بتتابع لطيف */
.vm-card{ opacity:.0; transform:translateY(8px); transition:opacity .45s ease, transform .45s ease }
.vm-card.in{ opacity:1; transform:none }
.vm-card .baseline{ transform:scaleX(0); transform-origin:right; transition:transform .6s ease .25s }
.vm-card.in .baseline{ transform:scaleX(1) }

/* ============ 4) تكبير لوجوهات العملاء ============ */
.track img{ height:150px; opacity:.9; filter:grayscale(100%); transition:filter .3s, opacity .3s, transform .25s }
.track img:hover{ filter:none; opacity:1; transform:translateY(-2px) }
/* ——— من نحن: Stroke Reveal (خط مستقيم + خطّين رأسيين على طريقة الشعار) ——— */
.about-visions { position: relative; }





/* وضعية الخطّين عند المنتصف ثم إزاحة بسيطة */
.about-visions .stroke-rail.r-left { left:calc(50% - 16px) }
.about-visions .stroke-rail.r-right{ left:calc(50% + 16px) }

/* ظهور البطاقات */
.about-visions .vm-card{ opacity:0; transform:translateY(10px); transition:.45s ease }
.about-visions.revealed .vm-card{ opacity:1; transform:none }

/* baseline داخل البطاقة */
.about-visions .vm-card .baseline{ transform:scaleX(0); transform-origin:right; transition:.6s ease .2s }
.about-visions.revealed .vm-card .baseline{ transform:scaleX(1) }

/* مسافة أنظف في قسم لماذا */
.why .why-title{ margin-bottom: 1rem; }
.why .why-sub{   margin-top: .9rem; }

/* تكبير شعارات العملاء قليلًا */
.track img{ width:260px; }
@media (max-width:900px){
  .track img{ width:200px; }
}
/* ===== Fix override: حرك الأعمدة مع ال-progress وألغِ أي أنيميشن قديم ===== */
.about-visions { --aboutP: 0; }

.about-visions .about-head::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%) scaleX(var(--aboutP));
  transform-origin:center;
  bottom:8px; height:3px; width:64%;
  border-radius:3px;
  background:linear-gradient(90deg,#c6a8ff,#9b4dff,#c6a8ff);
  box-shadow:0 0 12px rgba(155,77,255,.45);
  transition:transform .25s ease-out;
}

/* منطقة القضبان */
.about-visions .rails { position:relative; height:230px; margin:28px 0 16px; }
.about-visions .rails .baseline{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  height:2px; width:calc(68% * var(--aboutP));
  background:#9b4dff; box-shadow:0 0 16px rgba(155,77,255,.4);
  transition:width .25s ease-out;
}

/* نلغي أي animation قديم ونفرض القياسات */
.about-visions .rails .rail{
  position:absolute; top:0;
  background:#ffffff14;
  animation:none !important;
  height:calc(230px * var(--aboutP)) !important;
  transition:height .25s ease-out;
}
.about-visions .rails .r1{
  left:50%; transform:translateX(-50%);
  width:10px !important;
}
.about-visions .rails .r2{
  left:calc(50% + 14px);
  width:6px !important;
  transition:height .25s ease-out .05s;
}
/* ——— فاصل متحرّك تحت عنوان "من نحن" ——— */
.about-visions .about-head{
  position: relative;
  padding-bottom: 26px;          /* مساحة للفاصل */
}
.about-visions .about-head::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%) scaleX(var(--aboutP));
  transform-origin:center;
  /* نخلي الخط فاصل تحت العنوان مباشرة */
  top: calc(100% - 6px);
  bottom: auto;
  height:3px; width:64%;
  border-radius:3px;
  background:linear-gradient(90deg,#c6a8ff,#9b4dff,#c6a8ff);
  box-shadow:0 0 12px rgba(155,77,255,.45);
  transition:transform .25s ease-out;
}

/* ——— إزالة الخط الأفقي الزائد داخل منطقة القضبان ——— */
.about-visions .rails .baseline{
  display:none !important;       /* هذا كان الخط اللي بين العنوان والبطاقات */
}

/* نرفع القضبان شوي تحت الفاصل عشان ما يركبون عليه */
.about-visions .rails{
  margin-top: 10px;              /* مسافة صغيرة بعد الفاصل */
}

/* الأعمدة العمودية تبقى تتبع التقدم (نثبّت الأوفررايد) */
.about-visions .rails .rail{
  animation:none !important;
  height:calc(230px * var(--aboutP)) !important;
  transition:height .25s ease-out;
}
.about-visions .rails .r1{
  left:50%; transform:translateX(-50%);
  width:10px !important;
}
.about-visions .rails .r2{
  left:calc(50% + 14px);
  width:6px !important;
  transition:height .25s ease-out .05s;
}

/* ===== أساسيات موبايل محسّنة ===== */
html{ -webkit-text-size-adjust:100%; }
:root{
  --container-w: min(1200px,92%);
  --container-w-m: min(760px,90%);
}
.container{ width: var(--container-w); }
@media (max-width: 880px){ .container{ width: var(--container-w-m); } }

/* ===== الهيدر ===== */
@media (max-width: 880px){
  .nav .nav-inner{ padding: 10px 0; }
  .nav nav{ gap: 14px; }
  .nav .brand img{ width: 84px; }
  .nav a{ font-weight: 800; font-size: 0.95rem; }
  .nav .cta-sm{ padding: .45rem .85rem; }
}
/* حماية منطقة النوتش */
.nav{ padding-top: env(safe-area-inset-top); }

/* ===== الهوية الأولى (الأبيض) ===== */
@media (max-width: 880px){
  .hero-identity{ min-height: 92dvh; padding-top: calc(86px + env(safe-area-inset-top)); }
  .identity-wrap{ width: 100%; aspect-ratio: auto; }
  .identity-img{ width: min(620px, 92%); }
  .identity-headlines h1{
    font-size: clamp(1.6rem, 8vw, 3.6rem);
    letter-spacing: .06em;
    line-height: 1.08;
  }
}

/* ===== الهيرو الداكن ===== */
@media (max-width: 880px){
  .hero-main{ padding: 80px 0; }
  .ar-hero{ font-size: clamp(1.2rem, 4.5vw, 2.1rem); }
  .lead{ max-width: 92%; font-size: 0.98rem; }
  .buttons{ flex-wrap: wrap; gap: 10px; }
  .btn{ padding: .85rem 1.05rem; font-weight: 800; }
}

/* ===== التيكر ===== */
@media (max-width: 880px){
  .ticker-band{ padding: 10px 0; }
  .ticker-line{ --fs: clamp(14px, 3.6vw, 18px); height: calc(var(--fs) + 16px); }
}
/* تخفيف السرعة على الموبايل */
@media (max-width: 600px){
  .t1 .line, .t1 .clone{ animation-duration: 36s !important; }
  .t2 .line, .t2 .clone{ animation-duration: 40s !important; }
}

/* ===== لماذا نحن ===== */
@media (max-width: 980px){
  .why{ padding: 84px 0 70px; }
  .why-grid{ grid-template-columns: 1fr; gap: 28px; }
  .why-sticky{ position: static; }
  .why-title{ font-size: clamp(1.6rem, 7vw, 2.2rem); margin-bottom: .6rem !important; }
  .why-sub{ font-size: .98rem; line-height: 1.9; margin-top: .35rem !important; }
  .why-list-wrap.simple{ padding-inline-start: 56px; }
  .why-rail{ right: 20px; }
  .rail-dot{ right: calc(20px - 7px); }
  .why-item{ padding: 14px 14px; border-radius: 14px; }
}

/* ===== من نحن + الرؤية/الرسالة ===== */
@media (max-width: 880px){
  .about-visions{ padding: 86px 0 64px; }
  .about-head h3{ font-size: clamp(1.2rem, 5.2vw, 1.6rem); }
  .about-head p{ font-size: 1rem; line-height: 1.95; }
  .rails{ height: 170px; margin: 22px 0 10px; }
  /* إن كنت تستخدم progress للخطوط: قلل طول الأعمدة على الموبايل */
  .about-visions .rails .rail{
    height: calc(170px * var(--aboutP)) !important;
  }
  .vm-grid{ grid-template-columns: 1fr; gap: 18px; }
  .vm-card{ padding: 16px; border-radius: 16px; }
  .vm-card .kicker{ font-size: .72rem; }
}

/* ===== الأعمال (كارد واحد ممتلئ) ===== */
@media (max-width: 880px){
  .works-box{ height: 240px; border-radius: 22px; }
  .works-content h3{ font-size: 1.2rem; }
  .works-content p{ font-size: .98rem; }
}

/* ===== عملاؤنا ===== */
@media (max-width: 1100px){ .track{ gap: 64px; } }
@media (max-width: 880px){
  .track{ gap: 42px; padding: 20px 0; }
  .track img{ height: 90px; width: auto !important; }
  .marquee{ mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
}
/* لمس: لا تعتمد على :hover */
@media (hover: none){
  .track img:hover{ transform: none; filter: grayscale(100%); opacity: .92; }
}

/* ===== تواصل + أزرار ===== */
@media (max-width: 880px){
  .contact{ padding: 70px 0; }
  .contact-row{ gap: 10px; }
  .contact-row .btn{ flex: 1 1 auto; justify-content: center; min-width: 44%; }
}


/* شبكة أيقونات التواصل */
.social-icons{
  display:flex;
  gap:18px;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  margin-top:14px;
}
/* عناوين القسم */
.sec-title{ margin:0 0 6px; }
.sec-sub  { margin:0 0 18px; color:#d9d0e6 }

/* شبكة البطاقات */
.contact-cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap:18px;
  justify-items:center;
  align-items:stretch;
  margin-top:10px;
}
@media (max-width:820px){
  .contact-cards{ grid-template-columns: repeat(3, 1fr); gap:14px }
}
@media (max-width:560px){
  .contact-cards{ grid-template-columns: 1fr 1fr 1fr; gap:12px }
}

/* بطاقة تواصل */
.c-card{
  --size: 128px;                 /* مقاس المربّع */
  --br: 22px;                    /* نصف القطر */
  position:relative;
  width:var(--size); height:var(--size);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; text-decoration:none; color:#efe9ff;
  border-radius: var(--br);
  background:
    radial-gradient(900px 600px at 80% -10%, #ffffff0a 0%, transparent 65%),
    linear-gradient(180deg,#ffffff0a,#ffffff06);
  border:1px solid #ffffff1c;
  box-shadow:
    0 18px 50px rgba(0,0,0,.35),
    inset 0 1px 0 #ffffff22,
    inset 0 -1px 0 #00000022;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  overflow:hidden;
  isolation:isolate;             /* للحبر */
}

/* حبر ضوء يتبع المؤشر */
.c-card .c-ink{
  content:"";
  position:absolute; inset:-1px;
  background: radial-gradient(180px 180px at var(--mx,50%) var(--my,50%),
               rgba(155,77,255,.25), transparent 55%);
  opacity:.0; transition:opacity .22s ease;
  pointer-events:none; z-index:0;
}

/* أيقونة داخل البطاقة */
.c-icon{
  position:relative; z-index:1;
  width:80%; height:80%; object-fit:contain;
  mix-blend-mode: screen;                 /* يزيل الخلفية السوداء للأيقونة */
  filter: brightness(1.05) contrast(1.06);
  transition: transform .2s ease;
  user-select:none; -webkit-user-drag:none; pointer-events:none;
}



/* تفاعل */
.c-card:hover, .c-card:focus-visible{
  transform: translateY(-2px);
  border-color:#ffffff33;
  box-shadow:
    0 22px 56px rgba(0,0,0,.38),
    0 0 0 1px rgba(155,77,255,.18);
}
.c-card:hover .c-ink, .c-card:focus-visible .c-ink{ opacity:1 }
.c-card:hover .c-icon, .c-card:focus-visible .c-icon{ transform: scale(1.06) }
.c-card:hover .c-label, .c-card:focus-visible .c-label{ opacity:1; transform: translateY(-2px) }

/* أحجام أصغر للجوال */
@media (max-width:880px){
  .c-card{ --size:118px; --br:20px }
}
@media (max-width:560px){
  .c-card{ --size:104px; --br:18px }
  .c-label{ font-size:.9rem }
}




/* ===== الفووتر ===== */
@media (max-width: 880px){
  .footer{ padding: 26px 0; }
  .footer-grid.pro{ grid-template-columns: 1fr; gap: 12px; text-align: center; }
  .footer-grid.pro .brand{ justify-content: center; }
  .f-links{ flex-wrap: wrap; gap: 12px; }
  .rights{ justify-self: center; text-align: center; }
  .socials{ justify-content: center; gap: 12px; }
}

/* ===== تحسينات أداء وحساسية اللمس ===== */
@media (pointer: coarse){
  .btn{ padding: 1rem 1.1rem; }
  .nav a{ padding: .25rem 0; }
}
/* تقليل الحركة إذا النظام مفعّل */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
  .track{ animation: none !important; }
}


/* ===== Mobile Nav & Contact Buttons Tightening ===== */

/* شاشات أصغر من 880px */
@media (max-width: 880px){
  /* الهيدر أصغر وأرتب */
  .nav .nav-inner{ padding: 6px 0; }
  .nav .brand img{ width: 72px; }                 /* كان 84–96 */
  .nav nav{ gap: 10px; }
  .nav a{
    font-size: .86rem;                             /* كان ~0.95–1rem */
    font-weight: 800;
    letter-spacing: .01em;
    padding: 6px 0;                                /* لمس أسهل بس حجم أقل */
  }
  .nav .cta-sm{
    padding: .35rem .70rem;                        /* زر التواصل في الهيدر */
    border-width: 1px;
    font-size: .86rem;
  }

  /* أزرار الهيرو (لو حسّيتيها كبيرة) */
  .buttons .btn{
    padding: .78rem 1rem;
    font-size: .95rem;
  }

  /* أزرار قسم التواصل أصغر وتنتظم صفين */
  .contact-row{ gap: 8px; }
  .contact-row .btn{
    padding: .70rem .90rem;                        /* كان ~.85–.92 */
    font-size: .95rem;
    min-width: 42%;
    font-weight: 800;
  }
}

/* شاشات أصغر من 480px (تصغير إضافي للجوالات الصغيرة) */
@media (max-width: 480px){
  .nav .brand img{ width: 64px; }
  .nav nav{ gap: 8px; }
  .nav a{ font-size: .8rem; padding: 5px 0; }
  .nav .cta-sm{ padding: .3rem .6rem; font-size: .8rem; }

  .buttons .btn{ padding: .68rem .9rem; font-size: .92rem; }

  .contact-row .btn{
    min-width: 100%;                               /* كل زر سطر كامل */
    padding: .62rem .85rem;
    font-size: .9rem;
    border-width: 1px;
  }
}