:root{
  --sky-deep:#0E86B4; --sky:#23B0E6; --sky-light:#6FCBEE; --sky-pale:#E9F7FC;
  --gray-900:#20272B; --gray-700:#4B565C; --gray-400:#8A9499; --gray-200:#DCE2E4; --gray-100:#F3F5F6;
  --paper:#FBFCFC; --amber:#FFC846; --amber-soft:#FFE6A8; --radius:2px;
  --violet:#7C6FE8; --violet-pale:#EFEDFC; --emerald:#149A6B; --emerald-pale:#E4F6EF; --coral:#E8615A; --coral-pale:#FCEBEA;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--paper); color:var(--gray-900); font-family:'Tajawal', sans-serif; line-height:1.75; overflow-x:hidden;}
h1,h2,h3,h4,.display{font-family:'Cairo', sans-serif; color:var(--gray-900);}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px;}
button{font-family:inherit;cursor:pointer;}
@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}}

/* FIXED SOLID HEADER — used on all inner pages (page/service/store/articles) */
header{position:fixed; inset:0 0 auto 0; height:80px; z-index:200; display:flex; align-items:center;
  background:transparent; border-bottom:1px solid transparent; transition:background .35s, border-color .35s;}
header.solid{background:rgba(251,252,252,.96); backdrop-filter:blur(10px); border-bottom:1px solid var(--gray-200);}
header.solid .logo,header.solid nav a{color:var(--gray-900) !important;}
header.solid .icon-btn{color:var(--gray-900); border-color:var(--gray-200);}
header .nav-row{width:100%;display:flex;align-items:center;justify-content:space-between; padding:0 24px; max-width:1200px; margin:0 auto;}
body.has-fixed-header{padding-top:80px;}

/* FLOATING NAV — no bar, no background, lives inside the hero and scrolls with it (home only) */
.floating-nav{position:absolute; top:0; right:0; left:0; z-index:5; display:flex; align-items:center; justify-content:space-between; padding:26px 24px 0;}
.logo{display:flex;align-items:center;gap:10px;font-family:'Cairo';font-weight:900;font-size:17px;color:#fff;}
.logo .mark{width:36px;height:36px;flex-shrink:0;overflow:hidden;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.logo small{display:block;font-family:'Tajawal';font-weight:400;font-size:10.5px;opacity:.8;}
nav ul{display:flex;gap:32px;list-style:none;}
nav a{color:#fff; font-size:14.5px;font-weight:500;position:relative;padding:6px 0;}
nav a::after{content:'';position:absolute;bottom:0;right:0;width:0;height:2px;background:var(--amber);transition:width .3s;}
nav a:hover::after{width:100%;}
.nav-actions{display:flex;align-items:center;gap:12px;}
.cta-btn{background:var(--sky);color:#fff;padding:11px 24px;font-size:13.5px;font-weight:700;border-radius:24px;border:1px solid var(--sky);transition:.3s;display:inline-block;}
.cta-btn:hover{background:var(--sky-deep);border-color:var(--sky-deep);}
.icon-btn{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:none;color:#fff;display:flex;align-items:center;justify-content:center;transition:.3s;}
.icon-btn:hover{border-color:var(--sky-light); color:var(--sky-light);}
.menu-toggle{display:none;}

/* HERO SLIDER (home) */
.hero{position:relative; overflow:visible; background:var(--gray-900); padding:0;}
.hero-stage{position:relative; min-height:100vh; overflow:hidden;}
.hero-spacer{height:130px; background:var(--gray-900);}
.hero-slide{position:absolute; inset:0; opacity:0; transition:opacity 1.2s ease; display:flex; align-items:center; pointer-events:none;}
.hero-slide.active{pointer-events:auto;}
.hero-slide.active{opacity:1; z-index:1;}
.hero-slide .base{position:absolute; inset:0; background:radial-gradient(circle at 75% 30%, #23B0E6 0%, #0E86B4 38%, #16323F 78%);}
.hero-slide:nth-child(3n+2) .base{background:radial-gradient(circle at 30% 25%, #6FCBEE 0%, #23B0E6 35%, #123B49 78%);}
.hero-slide:nth-child(3n) .base{background:radial-gradient(circle at 70% 70%, #23B0E6 0%, #20272B 55%, #16323F 100%);}
.hero-slide .texture{position:absolute; inset:0; opacity:.12; mix-blend-mode:multiply;
  background-image:repeating-linear-gradient(112deg, rgba(0,0,0,.2) 0 24px, transparent 24px 50px), repeating-linear-gradient(64deg, rgba(0,0,0,.15) 0 32px, transparent 32px 64px);}
.hero-overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,14,16,.55) 0%, rgba(10,14,16,.35) 40%, rgba(10,14,16,.7) 100%); z-index:1; pointer-events:none;}

/* ===== HERO FX — أثر بصري يحاكي مجال العمل: أرضية صالة معارض، مخطط أجنحة يُرسم، وإضاءة مسرح =====
   Sits between the slides and .hero-overlay so the overlay still darkens it exactly
   like it darkens the headline — keeps text contrast unchanged. Purely decorative:
   aria-hidden + pointer-events:none, and the global prefers-reduced-motion rule
   at the top of this file already freezes every animation below. */
.hero-fx{position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; mix-blend-mode:screen;}
/* The FX layer paints above the slide's headline (same stacking rule the existing
   .hero-overlay relies on), so it's masked to fade out over the text column —
   art stays on the side opposite the copy in both RTL and LTR. */
[dir="rtl"] .hero-fx{-webkit-mask-image:linear-gradient(to left, transparent 4%, rgba(0,0,0,.4) 30%, #000 58%); mask-image:linear-gradient(to left, transparent 4%, rgba(0,0,0,.4) 30%, #000 58%);}
[dir="ltr"] .hero-fx{-webkit-mask-image:linear-gradient(to right, transparent 4%, rgba(0,0,0,.4) 30%, #000 58%); mask-image:linear-gradient(to right, transparent 4%, rgba(0,0,0,.4) 30%, #000 58%);}

/* 1. أرضية الصالة — شبكة بمنظور ثلاثي الأبعاد تتحرك نحو المشاهد */
.hero-fx-floor{position:absolute; left:-30%; right:-30%; bottom:-6%; height:58%; perspective:340px; perspective-origin:50% 0%; opacity:.55;}
.hero-fx-floor i{position:absolute; inset:0; transform:rotateX(74deg); transform-origin:50% 0%;
  background-image:linear-gradient(rgba(111,203,238,.5) 1px, transparent 1px), linear-gradient(90deg, rgba(111,203,238,.28) 1px, transparent 1px);
  background-size:88px 88px;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 26%, #000 64%, transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0%, #000 26%, #000 64%, transparent 100%);
  animation:heroFloorRun 7s linear infinite;}
@keyframes heroFloorRun{from{background-position:0 0, 0 0;} to{background-position:0 88px, 0 0;}}

/* 2. إضاءة المسرح — شعاعان يمسحان المشهد ببطء */
.hero-fx-beam{position:absolute; top:-28%; width:min(42vw,560px); height:150%; transform-origin:50% 0%; filter:blur(8px);
  background:linear-gradient(to bottom, rgba(111,203,238,.26) 0%, rgba(111,203,238,.08) 42%, rgba(111,203,238,0) 78%);
  clip-path:polygon(46% 0, 54% 0, 100% 100%, 0 100%);}
.hero-fx-beam.b1{inset-inline-start:6%; animation:heroBeamA 13s ease-in-out infinite;}
.hero-fx-beam.b2{inset-inline-end:14%; background:linear-gradient(to bottom, rgba(255,200,70,.2) 0%, rgba(255,200,70,.06) 42%, rgba(255,200,70,0) 78%); animation:heroBeamB 17s ease-in-out infinite;}
@keyframes heroBeamA{0%,100%{transform:rotate(-13deg); opacity:.5;} 50%{transform:rotate(11deg); opacity:.95;}}
@keyframes heroBeamB{0%,100%{transform:rotate(12deg); opacity:.85;} 50%{transform:rotate(-9deg); opacity:.45;}}

/* 3. ذرات ضوئية تطفو داخل الأشعة */
.hero-fx-dust span{position:absolute; width:3px; height:3px; border-radius:50%; background:rgba(233,247,252,.85); opacity:0; animation:heroDust 11s linear infinite;}
.hero-fx-dust span:nth-child(1){left:12%; bottom:8%;  animation-delay:0s;   animation-duration:12s;}
.hero-fx-dust span:nth-child(2){left:26%; bottom:14%; animation-delay:1.6s; animation-duration:9s;}
.hero-fx-dust span:nth-child(3){left:39%; bottom:5%;  animation-delay:3.1s; animation-duration:13s;}
.hero-fx-dust span:nth-child(4){left:53%; bottom:11%; animation-delay:.8s;  animation-duration:10s;}
.hero-fx-dust span:nth-child(5){left:66%; bottom:7%;  animation-delay:4.4s; animation-duration:14s;}
.hero-fx-dust span:nth-child(6){left:78%; bottom:16%; animation-delay:2.3s; animation-duration:11s;}
.hero-fx-dust span:nth-child(7){left:88%; bottom:9%;  animation-delay:5.7s; animation-duration:12s;}
.hero-fx-dust span:nth-child(8){left:5%;  bottom:18%; animation-delay:6.9s; animation-duration:10s;}
@keyframes heroDust{0%{transform:translateY(0) scale(.6); opacity:0;} 12%{opacity:.9;} 78%{opacity:.55;} 100%{transform:translateY(-62vh) scale(1.15); opacity:0;}}

/* على الشاشات الصغيرة نُبقي الأرضية والأشعة فقط — أخف على الأداء وأوضح للنص */
@media (max-width:860px){
  .hero-fx-dust{display:none;}
  .hero-fx-floor{opacity:.4;}
  .hero-fx-beam{filter:blur(12px); opacity:.7;}
}
.hero-content{position:relative; z-index:2; width:100%; padding:24px;}
.watch-row{display:flex; align-items:center; gap:14px; margin-bottom:30px;}
.play-circle{width:46px;height:46px;border-radius:50%;background:var(--sky);display:flex;align-items:center;justify-content:center; flex-shrink:0; box-shadow:0 8px 20px rgba(28,135,176,.5); transition:.3s;}
.play-circle:hover{transform:scale(1.08);}
.play-circle svg{width:16px;height:16px;}
.watch-row span:last-child{color:#fff; font-size:14px; font-weight:600; text-decoration:underline; text-underline-offset:4px;}
.hero-content .tagline{color:var(--amber-soft); font-size:13px; letter-spacing:2px; font-weight:700; text-transform:uppercase; margin-bottom:16px;}
.hero-content h1{color:#fff; font-weight:900; font-size:clamp(32px,5.4vw,58px); line-height:1.28; max-width:820px; transform:translateY(16px); opacity:0; transition:transform .8s ease .2s, opacity .8s ease .2s;}
.hero-content p{color:var(--gray-200); font-size:15.5px; max-width:540px; margin-top:20px; font-weight:300; transform:translateY(16px); opacity:0; transition:transform .8s ease .35s, opacity .8s ease .35s;}
.hero-slide.active .hero-content h1,.hero-slide.active .hero-content p{transform:translateY(0); opacity:1;}
.hero-actions{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap;}
.btn-primary{background:var(--sky); color:#fff; padding:14px 30px; font-weight:700; font-size:14px; border-radius:var(--radius); transition:.3s; border:1px solid var(--sky); display:inline-block;}
.btn-primary:hover{background:var(--sky-deep); transform:translateY(-2px);}
.btn-ghost{color:#fff; padding:14px 30px; font-weight:700; font-size:14px; border:1px solid rgba(255,255,255,.4); border-radius:var(--radius); transition:.3s; display:inline-block;}
.btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,.06);}
.hero-dots{position:absolute; bottom:34px; left:24px; z-index:3; display:flex; gap:10px;}
.hero-dot{width:8px;height:8px;border-radius:50%; background:rgba(255,255,255,.35); cursor:pointer; transition:.3s;}
.hero-dot.active{background:var(--amber); width:24px; border-radius:5px;}
.hero-nav-arrow{position:absolute; top:36%; transform:translateY(-50%); z-index:3; width:42px;height:42px;border-radius:50%; border:1px solid rgba(255,255,255,.35); display:flex; align-items:center; justify-content:center; color:#fff; cursor:pointer; transition:.3s;}
.hero-nav-arrow:hover{background:rgba(255,255,255,.12); border-color:#fff;}
.hero-nav-arrow.right{right:32px;} .hero-nav-arrow.left{left:32px;}
@media(max-width:760px){.hero-nav-arrow{display:none;}}

/* SIMPLE HERO (inner pages) */
.hero.hero-simple{min-height:92vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:0;}
.hero.hero-simple .hero-slide{justify-content:center; text-align:center;}
.hero.hero-simple .hero-content{max-width:760px; margin:0 auto; padding:0 24px 90px;}
.hero.hero-simple .hero-content p{margin:20px auto 0;}
.hero.hero-simple .hero-actions{justify-content:center;}
.hero.hero-simple .hero-dots{right:0; left:0; justify-content:center; bottom:28px;}
.hero.hero-simple .hero-nav-arrow{top:50%;}

/* HERO OVERLAPPING QUICK PANEL */
.hero-panel-wrap{position:relative; z-index:4; margin-top:-92px;}
.hero-quick-split{display:grid; grid-template-columns:1fr 1.3fr; box-shadow:0 30px 60px -20px rgba(0,0,0,.4); border-radius:4px; overflow:hidden;}
.hero-quick-image{position:relative; min-height:300px; overflow:hidden; background:linear-gradient(160deg, var(--sky), var(--sky-deep));}
.hero-quick-image .texture{position:absolute; inset:0; opacity:.35; mix-blend-mode:overlay;
  background-image:repeating-linear-gradient(115deg, rgba(255,255,255,.18) 0 20px, transparent 20px 44px);}
.hero-quick-image svg{position:absolute; inset:0; width:62%; margin:auto; opacity:.9;}
.hero-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; display:none;}
.hero-quick-body{background:var(--sky-deep); position:relative;}
.hero-quick-tab{
  background:#fff; display:inline-flex; align-items:center; gap:10px; padding:22px 34px;
  font-family:'Cairo'; font-weight:800; color:var(--gray-900); font-size:17px; position:relative;
}
.hero-quick-tab::after{content:''; position:absolute; bottom:-14px; right:36px; width:0; height:0; border-top:14px solid #fff; border-left:14px solid transparent;}
.hero-quick-links{display:grid; grid-template-columns:1fr 1fr; gap:0 40px; padding:38px 34px 72px;}
.hero-quick-links a{display:flex; align-items:center; justify-content:space-between; color:#fff; font-size:14.5px; font-weight:600; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.25); transition:.25s;}
.hero-quick-links a:hover{color:var(--amber-soft); padding-right:8px;}
.hero-quick-links a span{color:#fff; font-size:15px;}
@media(max-width:800px){.hero-quick-split{grid-template-columns:1fr;} .hero-quick-links{grid-template-columns:1fr;}}

/* COUNTDOWN-STYLE DIVIDER */
.counter-band{background:var(--paper); padding-top:70px;}
.counter-band.tight{padding-top:0;}
.counter-card{background:#fff; position:relative; z-index:5; border-radius:4px; box-shadow:0 20px 45px -25px rgba(0,0,0,.25);
  display:grid; grid-template-columns:repeat(5,1fr); padding:34px 10px;}
.counter-band.tight .counter-card{margin-top:-46px; box-shadow:0 30px 60px -25px rgba(0,0,0,.3);}
.counter-item{text-align:center; border-left:1px solid var(--gray-200); padding:0 8px;}
.counter-item:last-child{border-left:none;}
.counter-item b{display:block; font-family:'Cairo'; font-weight:800; font-size:clamp(22px,3vw,32px); color:var(--sky-deep);}
.counter-item span{color:var(--gray-400); font-size:12px;}
@media(max-width:760px){.counter-card{grid-template-columns:repeat(2,1fr); gap:22px 0;} .counter-item{border-left:none;}}

/* SECTION SHELL */
/* إيقاع رأسي مرن: يتدرّج تلقائيًا مع عرض الشاشة بدل قيمة ثابتة + استعلام وسائط منفصل */
section{padding:var(--sec-y) 0;}
.sec-alt{background:var(--gray-100);}      /* بديل منظّم للأنماط المضمّنة inline */
.sec-tight{padding-block:var(--sec-y-sm);} /* للأقسام الكثيفة التي لا تحتاج تنفّسًا كاملًا */
.section-head{max-width:640px;}
.section-head.center{text-align:center; margin:0 auto 54px;}
.tag{display:inline-flex; align-items:center; gap:10px; color:var(--sky-deep); font-weight:700; font-size:13px; letter-spacing:2px; text-transform:uppercase; margin-bottom:16px;}
.tag::before{content:'';width:26px;height:1px;background:var(--amber);}
.section-head.center .tag{justify-content:center;}
.section-head.center .tag::before{display:none;}
.section-head h2{font-size:clamp(24px,3.2vw,36px); font-weight:800; line-height:1.35;}
.section-head p{color:var(--gray-700); margin-top:14px; font-size:15.5px;}

/* ABOUT — animated blueprint-to-3D booth panel */
.blueprint-panel{
  position:relative; aspect-ratio:1/0.92; background:linear-gradient(155deg,#0F2530,#123244 55%,#0A1B22);
  border-radius:6px; overflow:hidden; box-shadow:0 30px 60px -30px rgba(14,30,38,.5);
}
.bp-grid{
  position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(rgba(111,203,238,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(111,203,238,.12) 1px, transparent 1px);
  background-size:28px 28px;
}
.bp-tag{position:absolute; font-family:'Cairo'; font-weight:800; font-size:13px; color:#fff; border:1px solid rgba(255,255,255,.3); border-radius:20px; padding:6px 16px; letter-spacing:1px;}
.bp-tag-2d{top:22px; right:24px; color:#6FCBEE; border-color:rgba(111,203,238,.4);}
.bp-tag-3d{bottom:64px; left:24px; color:#FFC846; border-color:rgba(255,200,70,.5);}
.bp-from-to{position:absolute; bottom:20px; right:24px; left:24px; display:flex; align-items:center; gap:10px; justify-content:center; color:#fff; font-size:12px; font-weight:600;}
.bp-svg{position:absolute; inset:0; width:100%; height:100%;}
.bp-line{fill:none; stroke-dasharray:1400; stroke-dashoffset:1400; transition:stroke-dashoffset 2.2s cubic-bezier(.3,.7,.2,1);}
.blueprint-panel.in .bp-line{stroke-dashoffset:0;}
.bp-nodes circle{opacity:0; transform-origin:center; transition:opacity .5s ease 1.6s;}
.blueprint-panel.in .bp-nodes circle{opacity:1; animation:bpPulse 2.4s ease-in-out 1.8s infinite;}
@keyframes bpPulse{0%,100%{filter:drop-shadow(0 0 0 rgba(255,200,70,.6));} 50%{filter:drop-shadow(0 0 6px rgba(255,200,70,.9));}}
@media(max-width:980px){.blueprint-panel{aspect-ratio:1/0.85;}}

/* ABOUT (collage, checklist, signature, departments) */
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; margin-bottom:110px;}
.about-collage{position:relative; padding-bottom:20px;}
.collage-row{display:flex; gap:18px;}
.collage-a{flex:1.15; aspect-ratio:3/4; border-radius:3px; position:relative; overflow:hidden; background:linear-gradient(150deg, var(--sky), var(--gray-700));}
.collage-b{flex:1; aspect-ratio:3/4.6; border-radius:3px; align-self:flex-end; margin-bottom:-30px; position:relative; overflow:hidden; background:linear-gradient(150deg, var(--gray-900), var(--sky-deep));}
.collage-a .texture,.collage-b .texture{position:absolute; inset:0; opacity:.3; mix-blend-mode:overlay;
  background-image:repeating-linear-gradient(115deg, rgba(255,255,255,.2) 0 20px, transparent 20px 42px);}
.collage-box{
  position:absolute; top:38%; right:-18px; background:var(--sky-deep); color:#fff;
  padding:24px 28px; font-family:'Cairo'; font-weight:700; font-size:16px; max-width:200px;
  display:flex; align-items:center; gap:12px; border-radius:2px; box-shadow:0 20px 40px -18px rgba(14,93,130,.5); z-index:2;
}
.collage-icon{width:32px;height:32px; background:var(--amber); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.collage-icon svg{width:16px;height:16px;}
.check-list{list-style:none; margin-top:22px;}
.check-list li{display:flex; align-items:center; gap:12px; padding:7px 0; font-size:14.5px; font-weight:600;}
.check-mark{width:20px;height:20px; border-radius:50%; background:var(--sky-deep); color:#fff; font-size:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.sign-row{display:flex; align-items:center; justify-content:space-between; margin-top:32px; padding-top:24px; border-top:2px solid var(--sky-deep); max-width:400px;}
.signature{font-family:'Cairo'; font-weight:800; font-size:17px; color:var(--gray-900);}
.sign-row span{font-size:12.5px; color:var(--gray-400);}
.seal{width:68px;height:68px;}
.team-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:44px; flex-wrap:wrap; gap:16px;}
.btn-outline{border:1px solid var(--gray-200); padding:12px 26px; font-size:13.5px; font-weight:700; border-radius:2px; transition:.3s; display:inline-block;}
.btn-outline:hover{background:var(--gray-900); color:#fff; border-color:var(--gray-900);}
.dept-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}

.dept-card-flip{perspective:1200px; outline:none; height:200px;}
.dept-card-flip-inner{position:relative; width:100%; height:100%; min-height:200px; transition:transform .6s cubic-bezier(.4,.2,.2,1); transform-style:preserve-3d;}
.dept-card-flip:hover .dept-card-flip-inner,
.dept-card-flip:focus .dept-card-flip-inner,
.dept-card-flip.flipped .dept-card-flip-inner{transform:rotateY(180deg);}

.dept-card{background:#fff; border:1px solid var(--gray-200); border-radius:6px; padding:26px 22px; transition:.3s; position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; display:flex; flex-direction:column;}
.dept-card-front{z-index:2;}
.dept-card-back{transform:rotateY(180deg); background-color:var(--gray-900); background-size:cover; background-position:center; justify-content:flex-end;}
.dept-card-back h4{color:#fff; font-size:15px; font-weight:800; margin:0;}
.dept-ic{width:44px;height:44px; background:var(--sky-pale); border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
.dept-ic svg{width:20px;height:20px;}
.dept-card h4{font-size:15px; font-weight:700; margin-bottom:8px;}
.dept-card p{font-size:13px; color:var(--gray-700);}
@media(max-width:980px){
  .about-grid{grid-template-columns:1fr; gap:40px;}
  .collage-box{position:static; margin-top:16px; max-width:100%;}
  .collage-b{display:none;}
  .dept-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:560px){.dept-grid{grid-template-columns:1fr;}}

/* WHY US */
.why-grid{display:grid; grid-template-columns:1fr 1.15fr; gap:60px; align-items:stretch;}
.why-copy{display:flex; flex-direction:column; justify-content:center;}
.why-visual{position:relative;}
.why-visual-bg{position:relative; aspect-ratio:4/3.3; border-radius:6px; overflow:hidden;
  background:linear-gradient(155deg,#16323F 0%,#0E86B4 55%,#1D3E48 100%); box-shadow:0 30px 60px -30px rgba(14,93,130,.55);}
.why-texture{position:absolute; inset:0; opacity:.35; mix-blend-mode:overlay;
  background-image:repeating-linear-gradient(112deg, rgba(255,255,255,.15) 0 22px, transparent 22px 46px),
    repeating-linear-gradient(64deg, rgba(255,255,255,.1) 0 30px, transparent 30px 60px);}
.why-glow{position:absolute; top:-10%; right:-10%; width:60%; height:60%; border-radius:50%;
  background:radial-gradient(circle, rgba(245,166,35,.35) 0%, transparent 70%); filter:blur(4px);}
.why-illustration{position:absolute; inset:0; width:100%; height:100%;}
.why-badge{
  position:absolute; top:24px; left:24px; background:rgba(255,255,255,.14); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.25); border-radius:6px; padding:16px 20px; max-width:180px;
}
.why-badge b{display:block; font-family:'Cairo'; font-size:26px; font-weight:800; color:#fff;}
.why-badge span{font-size:12px; color:var(--gray-200); line-height:1.5;}
.why-bar{
  position:absolute; right:6%; left:6%; bottom:-38px; background:#fff; border-radius:10px;
  box-shadow:0 24px 46px -18px rgba(14,30,38,.35); display:grid; grid-template-columns:1fr 1fr 1fr;
  padding:24px 14px; border-top:3px solid var(--sky);
}
.why-bar-item{text-align:center; padding:0 10px; position:relative;}
.why-bar-item + .why-bar-item::before{content:'';position:absolute; top:8px; bottom:8px; right:100%; width:1px; background:var(--gray-200);}
.why-bar-ic{width:38px;height:38px;margin:0 auto 12px; background:var(--sky-pale); border-radius:50%; display:flex; align-items:center; justify-content:center;}
.why-bar-ic svg{width:18px;height:18px;}
.why-bar-item p{font-size:12.5px; font-weight:700; color:var(--gray-900); line-height:1.5;}

.why-features{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:100px;}
.why-feature{background:#fff; border:1px solid var(--gray-200); border-radius:6px; padding:26px 22px; transition:.3s; position:relative; overflow:hidden;}
.why-feature::before{content:'';position:absolute; top:0; right:0; width:0; height:3px; background:var(--sky); transition:width .35s;}
.why-feature:hover{box-shadow:0 20px 40px -25px rgba(14,93,130,.3); transform:translateY(-3px);}
.why-feature:hover::before{width:100%;}
.why-feature-ic{width:42px;height:42px; background:var(--sky-pale); border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
.why-feature-ic svg{width:20px;height:20px;}
.why-feature p{font-size:13.5px; font-weight:600; color:var(--gray-900); line-height:1.6;}
@media(max-width:980px){
  .why-grid{grid-template-columns:1fr;}
  .why-bar{position:static; margin-top:20px; border-radius:6px;}
  .why-features{grid-template-columns:repeat(2,1fr); margin-top:30px;}
  section#why{padding-bottom:64px !important;}
}
@media(max-width:560px){.why-features{grid-template-columns:1fr;}}

/* SERVICES GRID */
.services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--gray-200); border:1px solid var(--gray-200);}
.svc-card{background:var(--paper); padding:40px 32px; transition:.3s; position:relative;}
.svc-card::before{content:'';position:absolute;top:0;right:0;width:0;height:3px;background:var(--sky);transition:width .35s;}
.svc-card:hover::before{width:100%;}
.svc-card:hover{background:var(--sky-pale);}
.svc-ic{width:44px;height:44px;margin-bottom:22px;}
.svc-card h3{font-size:18px;font-weight:700;margin-bottom:10px;}
.svc-card p{color:var(--gray-700);font-size:14px; margin-bottom:16px;}
.svc-more{font-size:13px;font-weight:700;color:var(--sky-deep);}
@media(max-width:900px){.services-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.services-grid{grid-template-columns:1fr;}}

/* CASE STUDY */
.case{background:var(--gray-900); color:#fff; position:relative;}
.case .tag{color:var(--sky-light);}
.case .section-head h2{color:#fff;}
.case .section-head p{color:var(--gray-200);}
.case-panel{display:grid; grid-template-columns:1fr 1fr; border:1px solid rgba(255,255,255,.15); border-radius:4px; overflow:hidden;}
.case-body{padding:50px; border-left:1px solid rgba(255,255,255,.12);}
.case-body .client{font-size:12.5px; letter-spacing:2px; color:var(--sky-light); text-transform:uppercase; font-weight:700;}
.case-body h3{font-size:23px; font-weight:800; margin:12px 0 20px; color:#fff;}
.case-step{padding:14px 0; border-top:1px solid rgba(255,255,255,.12); font-size:14px; color:var(--gray-200);}
.case-step:last-child{border-bottom:1px solid rgba(255,255,255,.12);}
.case-step b{display:block; color:var(--amber-soft); font-family:'Cairo'; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:6px;}
.case-quote{border-right:2px solid var(--amber); padding-right:16px; font-size:14.5px; margin:20px 0; color:#fff;}
.case-media{padding:50px; display:flex; flex-direction:column; justify-content:center; position:relative; background:linear-gradient(160deg,var(--sky-deep),var(--gray-900)) center/cover no-repeat;}
.case-media::before{content:''; position:absolute; inset:0; background:rgba(10,14,16,.3); z-index:0;}
.case-media > *{position:relative; z-index:1;}
.case-media .metric{padding:14px 0; border-top:1px solid rgba(255,255,255,.15);}
.case-media .metric:last-child{border-bottom:1px solid rgba(255,255,255,.15);}
.case-media .metric b{display:block; font-family:'Cairo'; font-size:28px; font-weight:800; color:var(--amber-soft);}
.case-media .metric span{font-size:12.5px; color:var(--gray-200);}
@media(max-width:800px){.case-panel{grid-template-columns:1fr;} .case-body{border-left:none;border-bottom:1px solid rgba(255,255,255,.12);}}

/* FACTORY */
.factory-section{background:var(--gray-900);}
.factory-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
.factory-section .tag{color:var(--sky-light);}
.factory-section h2{color:#fff;}
.factory-steps{display:grid; grid-template-columns:1fr 1fr; gap:16px 26px; margin-top:30px;}
.factory-step{display:flex; align-items:center; gap:12px; padding:14px 0; border-top:1px solid rgba(255,255,255,.12);}
.factory-step b{font-family:'Cairo'; color:var(--amber); font-size:16px; font-weight:800;}
.factory-step span{color:var(--gray-200); font-size:14px; font-weight:600;}
.factory-visual{position:relative; aspect-ratio:1/0.9;}
.factory-visual-bg{position:absolute; inset:0; border-radius:6px; background:linear-gradient(150deg, var(--sky), var(--sky-deep) 60%, var(--gray-900));
  box-shadow:0 30px 60px -30px rgba(0,0,0,.5);}
.factory-visual-bg::before{content:''; position:absolute; inset:0; opacity:.25; mix-blend-mode:overlay;
  background-image:repeating-linear-gradient(115deg, rgba(255,255,255,.2) 0 20px, transparent 20px 42px);}
.factory-badge{position:absolute; bottom:24px; right:24px; left:24px; background:rgba(255,255,255,.12); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.25); border-radius:6px; padding:18px 22px;}
.factory-badge b{display:block; font-family:'Cairo'; font-size:26px; font-weight:800; color:#fff;}
.factory-badge span{font-size:12.5px; color:var(--gray-200);}
@media(max-width:980px){.factory-grid{grid-template-columns:1fr;}}

/* CLIENT LOGOS CAROUSEL */
.logos-section{padding-bottom:80px;}
.logos-track-wrap{overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);}
.logos-track{display:flex; gap:60px; width:max-content; animation:logosScroll 26s linear infinite;}
.logos-track:hover{animation-play-state:paused;}
.logo-chip{display:flex; align-items:center; justify-content:center; height:56px; padding:0 20px; color:var(--gray-400); font-family:'Cairo'; font-weight:800; font-size:16px; white-space:nowrap; border:1px solid var(--gray-200); border-radius:6px; opacity:.8; transition:.3s;}
.logo-chip:hover{opacity:1; border-color:var(--sky-light); color:var(--sky-deep);}
@keyframes logosScroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* STORE (shop v2) */

/* shop category subnav */
.shop-subnav{background:var(--gray-900);}
.shop-subnav-inner{display:flex; align-items:center; gap:2px; overflow-x:auto; scrollbar-width:none;}
.shop-subnav-inner::-webkit-scrollbar{display:none;}
.shop-subnav a{color:#fff; font-size:13px; font-weight:500; padding:0 16px; height:44px; display:flex; align-items:center; white-space:nowrap; transition:background .2s, color .2s; flex-shrink:0;}
.shop-subnav a:hover{background:rgba(255,255,255,.08); color:var(--sky-light);}
.shop-subnav a.active{background:var(--sky-deep); color:#fff; font-weight:700;}

.shop-cat-toggle{display:none;}
.shop-cat-accordion{display:none;}
@media(max-width:900px){
  .shop-subnav-inner{display:none;}
  .shop-cat-toggle{display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; background:var(--sky-deep); color:#fff; font-weight:700; font-size:13.5px; padding:13px 20px;}
  .shop-cat-toggle .chev{transition:transform .3s ease;}
  .shop-cat-toggle.open .chev{transform:rotate(180deg);}
  .shop-cat-accordion{display:block; max-height:0; overflow:hidden; background:var(--gray-900); transition:max-height .4s cubic-bezier(.22,1,.36,1);}
  .shop-cat-accordion.open{max-height:560px;}
  .shop-cat-accordion a{display:block; color:#fff; font-size:13px; font-weight:500; padding:13px 20px; border-top:1px solid rgba(255,255,255,.08);}
  .shop-cat-accordion a.active{color:var(--sky-light);}
}

/* hero tiles */
.shop-hero-section{padding:20px 0; background:var(--gray-100); border-bottom:1px solid var(--gray-200);}
.shop-hero-tiles{display:grid; grid-template-columns:1fr 2.3fr; grid-template-rows:1fr 1fr; gap:6px; height:320px;}
.shop-hero-tile{position:relative; overflow:hidden; background:linear-gradient(135deg, var(--sky-deep), var(--gray-900)); background-size:cover; background-position:center; display:flex; align-items:flex-end;}
.shop-hero-tile::after{content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(11,20,27,.8) 0%, rgba(11,20,27,.1) 65%);}
.shop-hero-tile-big{grid-row:span 2;}
.shop-hero-tile-content{position:relative; z-index:2; padding:20px; color:#fff;}
.shop-hero-tile-big .shop-hero-tile-content{padding:36px; max-width:480px;}
.shop-hero-tile .eyebrow{color:var(--sky-light); font-size:12px; font-weight:700; letter-spacing:1px;}
.shop-hero-tile-big h2{font-family:var(--font-cairo,'Cairo'); font-size:27px; font-weight:900; line-height:1.35; margin:10px 0 14px;}
.shop-hero-tile-big p{font-size:13px; color:#c3d3dd; margin-bottom:18px; max-width:380px;}
.shop-hero-cta{display:inline-flex; align-items:center; gap:8px; background:var(--sky); color:var(--gray-900); padding:11px 20px; font-size:13px; font-weight:800; border-radius:2px;}
.shop-hero-tile-small h4{font-size:14px; font-weight:700;}
.shop-hero-tile-small span.label{font-size:11px; color:#c3d3dd;}
@media(max-width:900px){
  .shop-hero-tiles{grid-template-columns:1fr; grid-template-rows:auto; height:auto;}
  .shop-hero-tile-big{grid-row:auto; height:200px;}
  .shop-hero-tile-small{height:100px;}
  .shop-hero-tile-big .shop-hero-tile-content{padding:22px;}
  .shop-hero-tile-big h2{font-size:20px;}
}

/* page title band */
.shop-title-band{background:var(--gray-100); padding:24px 0; border-bottom:1px solid var(--gray-200);}
.shop-title-band h1{font-size:22px; font-weight:900;}
.shop-title-band span{font-size:12.5px; color:var(--gray-400);}

/* layout: sidebar + products */
.shop-layout{display:grid; grid-template-columns:260px 1fr; gap:32px; padding:32px 0 60px;}
@media(max-width:900px){.shop-layout{grid-template-columns:1fr;}}

/* sidebar filters */
.shop-filter-block{border-bottom:1px solid var(--gray-200); padding-bottom:18px; margin-bottom:18px;}
.shop-filter-block:last-of-type{border-bottom:none;}
.shop-filter-toggle{width:100%; display:flex; justify-content:space-between; align-items:center; font-size:13.5px; font-weight:800; padding:2px 0 14px; cursor:pointer; background:none; border:none; font-family:inherit;}
.shop-filter-toggle .chev{transition:transform .3s cubic-bezier(.22,1,.36,1); color:var(--gray-400);}
.shop-filter-toggle.open .chev{transform:rotate(180deg);}
.shop-filter-collapse{max-height:0; overflow:hidden; transition:max-height .4s cubic-bezier(.22,1,.36,1);}
.shop-filter-collapse.open{max-height:520px;}
.shop-filter-block ul li{margin-bottom:10px;}
.shop-filter-block ul li a{display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--gray-900); transition:.2s;}
.shop-filter-block ul li a:hover, .shop-filter-block ul li a.active{color:var(--sky-deep); font-weight:700;}
.shop-filter-block ul li a .n{color:var(--gray-400); font-size:11px; margin-inline-start:auto;}

.shop-price-form{display:flex; flex-direction:column; gap:10px;}
.shop-price-inputs{display:flex; align-items:center; gap:8px;}
.shop-price-inputs input{width:100%; border:1px solid var(--gray-200); padding:8px 10px; font-size:12px; text-align:center; font-family:inherit; border-radius:2px;}
.shop-price-inputs span{color:var(--gray-400); font-size:12px;}
.shop-filter-apply{width:100%; background:var(--gray-900); color:#fff; padding:11px; font-size:12.5px; font-weight:700; border:none; border-radius:2px; cursor:pointer; transition:.25s;}
.shop-filter-apply:hover{background:var(--sky-deep);}

.shop-promo-side{background:var(--gray-900); color:#fff; padding:22px 20px; text-align:center; margin-top:6px; border-radius:2px;}
.shop-promo-side .eyebrow{font-size:11px; color:var(--sky-light); letter-spacing:1.5px; margin-bottom:8px; font-weight:700;}
.shop-promo-side h5{font-size:14.5px; font-weight:800; margin-bottom:10px; line-height:1.4;}
.shop-promo-side a{font-size:11.5px; font-weight:700; color:#fff; border-bottom:1px solid #fff; padding-bottom:2px;}

/* toolbar */
.shop-toolbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; flex-wrap:wrap; gap:12px;}
.shop-results-count{font-size:12.5px; color:var(--gray-400);}
.shop-toolbar-right{display:flex; align-items:center; gap:12px;}
.shop-sort-select{border:1px solid var(--gray-200); font-size:12.5px; padding:8px 12px; border-radius:2px; font-family:inherit; color:var(--gray-700); background:var(--paper); cursor:pointer;}
.shop-view-toggle{display:flex; border:1px solid var(--gray-200); border-radius:2px; overflow:hidden;}
.shop-view-toggle button{width:34px; height:34px; display:flex; align-items:center; justify-content:center; color:var(--gray-400); border:none; background:none; cursor:pointer;}
.shop-view-toggle button.active{background:var(--gray-900); color:#fff;}

/* active filter chips */
.shop-active-filters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; align-items:center;}
.shop-chip{display:flex; align-items:center; gap:8px; border:1px solid var(--gray-200); padding:6px 12px; font-size:11.5px; border-radius:2px;}
.shop-chip a{color:var(--gray-400); font-size:13px; line-height:1;}
.shop-chip a:hover{color:var(--sky-deep);}
.shop-clear-all{font-size:11.5px; color:var(--sky-deep); font-weight:700;}

/* product grid */
.store-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.store-grid.list-view{grid-template-columns:1fr; gap:14px;}
.store-grid.list-view .product-card{flex-direction:row; align-items:stretch;}
.store-grid.list-view .product-thumb{width:180px; flex-shrink:0; aspect-ratio:auto;}
.store-grid.list-view .product-info{flex:1;}
@media(max-width:1000px){.store-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.store-grid{grid-template-columns:1fr;} .store-grid.list-view .product-thumb{width:120px;}}

.product-card{background:var(--paper); display:flex; flex-direction:column; border-radius:6px; overflow:visible; transition:transform .3s cubic-bezier(.22,1,.36,1);}
.product-card:hover{transform:translateY(-5px);}
.product-thumb{position:relative; aspect-ratio:1/1; background:linear-gradient(135deg, var(--sky-pale), var(--gray-200)); border-radius:6px; box-shadow:0 1px 3px rgba(11,36,54,.08); transition:box-shadow .35s; overflow:hidden;}
.product-card:hover .product-thumb{box-shadow:0 26px 42px -14px rgba(11,36,54,.22);}
.product-thumb-bg{position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .6s cubic-bezier(.22,1,.36,1);}
.product-card:hover .product-thumb-bg{transform:scale(1.07);}
.product-thumb-icon{width:48px;height:48px;color:var(--sky-deep); position:relative; z-index:1; margin:auto;}
.product-tag{position:absolute; top:10px; inset-inline-start:10px; font-size:10px; font-weight:900; letter-spacing:.5px; background:var(--gray-900); color:#fff; padding:4px 10px; border-radius:20px; z-index:2;}
.product-tag.featured-tag{background:var(--sky-deep);}
.catalog-badge{position:absolute; bottom:10px; inset-inline-end:10px; background:rgba(32,39,43,.88); color:#fff; font-size:10px; font-weight:800; padding:4px 9px; border-radius:2px; letter-spacing:.5px; z-index:2;}

.wishlist-btn{position:absolute; top:10px; inset-inline-end:10px; width:32px; height:32px; background:rgba(255,255,255,.95); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--gray-900); opacity:0; transform:translateY(-6px) scale(.9); transition:.25s; backdrop-filter:blur(4px); z-index:3; border:none; cursor:pointer; box-shadow:0 4px 10px rgba(11,36,54,.12);}
.product-card:hover .wishlist-btn{opacity:1; transform:translateY(0) scale(1);}
.wishlist-btn:hover{color:#c0392b; transform:scale(1.1);}
.wishlist-btn.active{color:#c0392b; opacity:1; transform:none;}
.wishlist-btn.active svg{fill:#c0392b;}

/* floating add-to-cart button, morphs into a quantity stepper before confirming */
.fab-add{position:absolute; bottom:-19px; inset-inline-start:14px; width:46px; height:46px; border-radius:50%; background:var(--gray-900); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 20px -4px rgba(11,36,54,.35); z-index:3; transition:background .25s, transform .25s, box-shadow .25s; border:none; cursor:pointer;}
.fab-add:hover{background:var(--sky-deep); transform:scale(1.08); box-shadow:0 12px 24px -4px rgba(14,134,180,.4);}
.fab-add.added{background:#1a9e5c;}
.fab-add.loading{opacity:.6; pointer-events:none;}

.qty-stepper{position:absolute; bottom:-19px; inset-inline-start:14px; height:46px; background:var(--gray-900); border-radius:23px; display:none; align-items:center; gap:0; padding:0 4px; z-index:4; box-shadow:0 10px 20px -4px rgba(11,36,54,.35);}
.qty-stepper.show{display:flex; animation:qtyPop .2s ease;}
.qty-stepper button{width:26px; height:26px; border-radius:50%; color:#fff; font-size:16px; font-weight:700; display:flex; align-items:center; justify-content:center; border:none; background:none; cursor:pointer; transition:background .2s;}
.qty-stepper button:hover{background:rgba(255,255,255,.15);}
.qty-stepper span.qty-val{color:#fff; font-size:13px; font-weight:800; width:20px; text-align:center;}
.qty-stepper .qty-confirm{width:28px; height:28px; border-radius:50%; background:var(--sky); margin-inline-start:2px;}
.qty-stepper .qty-confirm:hover{background:#1a9e5c;}
@keyframes qtyPop{from{transform:scale(.85); opacity:0;} to{transform:scale(1); opacity:1;}}

.product-info{padding:28px 6px 0; flex:1; display:flex; flex-direction:column;}
.product-info .cat{font-size:10px; color:var(--sky-deep); font-weight:800; letter-spacing:.6px; margin-bottom:6px; text-transform:uppercase;}
.product-info h4{font-size:13.5px; font-weight:700; margin-bottom:9px; line-height:1.45; color:var(--gray-900);}
.product-avail{display:flex; align-items:center; gap:6px; font-size:10.5px; margin-bottom:11px; color:var(--gray-400); font-weight:600;}
.product-avail .dot{width:6px; height:6px; border-radius:50%; background:var(--gray-400); flex-shrink:0;}
.product-avail.avail-buy .dot{background:#1a9e5c;}
.product-avail.avail-rent .dot{background:var(--amber);}
.product-avail.avail-both .dot{background:var(--sky-deep);}
.product-price{margin-top:auto; padding-top:8px; border-top:1px solid var(--gray-200); display:flex; align-items:baseline; gap:8px;}
.product-price b{font-family:var(--font-cairo,'Cairo'); font-size:17px; font-weight:900; color:var(--gray-900);}
.product-price b small{font-size:11px; font-weight:600; color:var(--gray-400);}

.store-empty{display:flex; flex-direction:column; align-items:center; gap:18px; padding:80px 20px; color:var(--gray-400); text-align:center; grid-column:1/-1;}
.store-empty svg{width:56px;height:56px; color:var(--gray-200);}
.store-empty p{font-size:15px; font-weight:600;}

/* pagination */
.store-pagination{display:flex; align-items:center; justify-content:center; gap:6px; margin-top:44px; flex-wrap:wrap;}
.pg-btn{min-width:36px; height:36px; padding:0 6px; border-radius:2px; border:1px solid var(--gray-200); display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:700; color:var(--gray-400); transition:.25s;}
.pg-btn:hover{border-color:var(--gray-900); color:var(--gray-900);}
.pg-btn.pg-active{background:var(--gray-900); border-color:var(--gray-900); color:#fff;}
.pg-btn.pg-disabled{opacity:.35; pointer-events:none;}
.pg-dots{color:var(--gray-400); font-weight:700; padding:0 4px;}

/* store perks strip (footer add-on) */
.shop-perks{border-bottom:1px solid var(--gray-200); background:var(--gray-100);}
.shop-perks-grid{display:grid; grid-template-columns:repeat(4,1fr);}
.shop-perk{display:flex; align-items:center; gap:12px; padding:22px 20px; border-inline-end:1px solid var(--gray-200);}
.shop-perk:last-child{border-inline-end:none;}
.shop-perk svg{color:var(--sky-deep); flex-shrink:0;}
.shop-perk b{display:block; font-size:12.5px;}
.shop-perk span{font-size:10.5px; color:var(--gray-400);}
@media(max-width:900px){.shop-perks-grid{grid-template-columns:repeat(2,1fr);} .shop-perk{border-inline-end:none; border-bottom:1px solid var(--gray-200);}}

/* ARTICLES */
.articles-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.article-card{background:#fff; border:1px solid var(--gray-200); border-radius:6px; overflow:hidden; transition:.3s;}
.article-card:hover{transform:translateY(-4px); box-shadow:0 20px 40px -25px rgba(14,93,130,.3); border-color:var(--sky-light);}
.article-thumb{aspect-ratio:16/10; background:linear-gradient(150deg, var(--sky), var(--gray-700));}
.article-card:nth-child(2) .article-thumb{background:linear-gradient(150deg, var(--gray-900), var(--sky-deep));}
.article-card:nth-child(3) .article-thumb{background:linear-gradient(150deg, var(--sky-light), var(--sky));}
.article-body{padding:22px;}
.article-meta{display:flex; gap:14px; margin-bottom:12px; font-size:12px; color:var(--gray-400);}
.article-body h4{font-size:16.5px; font-weight:700; margin-bottom:10px; line-height:1.5;}
.article-body p{font-size:13.5px; color:var(--gray-700); margin-bottom:14px;}
.article-link{font-size:13px; font-weight:700; color:var(--sky-deep);}
@media(max-width:900px){.articles-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.articles-grid{grid-template-columns:1fr;}}

/* INNOVATION TEASER */
.innovation-grid{background:#fff; border-radius:4px; box-shadow:0 20px 45px -25px rgba(0,0,0,.15); display:grid; grid-template-columns:repeat(4,1fr); padding:30px 10px;}
.innovation-card{background:none; border:none; border-right:1px solid var(--gray-200); padding:0 18px; text-align:center; transition:.3s;}
.innovation-card:last-child{border-right:none;}
.innovation-card:hover{transform:translateY(-3px);}
.innovation-ic{width:46px;height:46px; background:var(--sky-pale); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 16px;}
.innovation-card h4{font-size:14px; font-weight:700;}
@media(max-width:900px){.innovation-grid{grid-template-columns:repeat(2,1fr); gap:26px 0;} .innovation-card{border-right:none; border-bottom:1px solid var(--gray-200); padding-bottom:20px;} .innovation-card:nth-child(2n){border-right:1px solid var(--gray-200);}}
@media(max-width:560px){.innovation-grid{grid-template-columns:1fr;} .innovation-card{border-right:none !important;}}

/* PROJECTS */
.proj-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.proj-card{position:relative; display:block; aspect-ratio:4/5; border-radius:6px; overflow:hidden; background:linear-gradient(150deg,var(--sky),var(--gray-700)); box-shadow:0 20px 40px -28px rgba(14,30,38,.5); transition:.35s;}
.proj-card:nth-child(2){background:linear-gradient(150deg,var(--gray-900),var(--sky-deep));}
.proj-card:nth-child(3){background:linear-gradient(150deg,var(--sky-light),var(--sky));}
.proj-card:nth-child(4){background:linear-gradient(150deg,var(--amber),var(--gray-900));}
.proj-card:nth-child(5){background:linear-gradient(150deg,var(--gray-700),var(--sky));}
.proj-card:nth-child(6){background:linear-gradient(150deg,var(--sky-deep),var(--gray-900));}
.proj-card:hover{transform:translateY(-4px); box-shadow:0 30px 55px -25px rgba(14,30,38,.6);}
.proj-card:hover .proj-photo{transform:scale(1.08);}
.proj-photo{position:absolute; inset:0; transition:transform .6s; background-size:cover; background-position:center;}
.proj-overlay{position:absolute; inset:0; background:linear-gradient(0deg,rgba(10,14,16,.94) 0%, rgba(10,14,16,.15) 60%); display:flex; flex-direction:column; justify-content:flex-end; padding:24px; color:#fff;}
.proj-overlay .cat{font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--sky-light); font-weight:700; margin-bottom:8px;}
.proj-overlay h4{font-size:17px; font-weight:700; line-height:1.4;}
.proj-cta{display:flex; align-items:center; gap:6px; margin-top:12px; font-size:12.5px; font-weight:700; color:var(--amber-soft); opacity:0; transform:translateY(6px); transition:.3s;}
.proj-card:hover .proj-cta{opacity:1; transform:translateY(0);}
.proj-gallery-badge{position:absolute; top:16px; left:16px; background:rgba(10,14,16,.55); backdrop-filter:blur(4px); color:#fff; font-size:11px; font-weight:700; padding:5px 11px; border-radius:20px; display:flex; align-items:center; gap:5px;}
@media(max-width:900px){.proj-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.proj-grid{grid-template-columns:1fr;}}

/* PROJECT / CASE STUDY DETAIL PAGE */
.detail-gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:30px;}
.detail-gallery-item{aspect-ratio:4/3; border-radius:6px; overflow:hidden; background-size:cover; background-position:center; background-color:var(--gray-100);}
@media(max-width:760px){.detail-gallery{grid-template-columns:repeat(2,1fr);}}

/* DOWNLOAD PROFILE STRIP */
.download-strip{background:linear-gradient(120deg,var(--sky-deep),var(--sky)); padding:64px 0; position:relative; overflow:hidden;}
.download-strip::before{content:'';position:absolute;inset:0;opacity:.15;background-image:radial-gradient(circle,#fff 1.5px,transparent 1.5px);background-size:26px 26px;}
.download-inner{position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px;}
.download-inner h3{color:#fff; font-size:22px; font-weight:800;}
.download-inner p{color:var(--sky-pale); font-size:14px; margin-top:6px;}
.download-btn{background:#fff; color:var(--sky-deep); padding:14px 28px; border-radius:var(--radius); font-weight:800; font-size:14px; display:inline-flex; align-items:center; gap:10px; transition:.3s;}
.download-btn:hover{background:var(--gray-900); color:#fff;}

/* FINAL CTA */
.cta-strip{background:var(--gray-900); padding:90px 0; text-align:center;}
.cta-strip h2{color:#fff; font-size:clamp(24px,3.2vw,36px); font-weight:800;}
.cta-strip p{color:var(--gray-400); margin:14px auto 32px; max-width:500px;}

/* FOOTER */
footer{background:var(--gray-900); color:var(--gray-200); padding:70px 0 26px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:44px; padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,.1);}
.footer-grid h5{color:#fff; font-size:13.5px; font-weight:700; margin-bottom:20px; letter-spacing:1px;}
.footer-grid ul{list-style:none;}
.footer-grid li{margin-bottom:11px; font-size:14px;}
.footer-grid a:hover{color:var(--sky-light);}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:24px; font-size:12.5px; color:var(--gray-400); flex-wrap:wrap; gap:12px;}
.social{display:flex; gap:12px;}
.social a{width:34px;height:34px;border:1px solid rgba(255,255,255,.15); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:.3s; font-size:13px;}
.social a:hover{background:var(--sky); border-color:var(--sky);}
@media(max-width:760px){.footer-grid{grid-template-columns:1fr 1fr;}}

/* ===== نظام الظهور المتتابع (التوقيع البصري للصفحة) =====
   العناصر لا تظهر دفعة واحدة، بل تتجمّع بالتتابع بترتيب القراءة — كأن الجناح يُبنى قطعةً قطعة.
   التأخير يأتي من --rd التي يضبطها site.js لكل عنصر داخل حاوية [data-stagger]. */
/* الإخفاء مشروط بـ .js-reveal التي يضيفها site.js على <html> كأول سطر.
   بهذا: إن تعطّل الجافاسكربت أو فشل تحميله، يظهر المحتوى كاملًا بشكل طبيعي
   بدل أن يبقى شفافًا للأبد — شبكة أمان ضرورية مع 48 عنصرًا يعتمد ظهورها على JS. */
.js-reveal [data-reveal]{
  opacity:0;
  transform:translate3d(0,26px,0);
  transition:opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
  transition-delay:var(--rd,0ms);
}
.js-reveal [data-reveal].in{opacity:1; transform:none;}
/* تنويعات: للبطاقات داخل الشبكات (أقرب وأخف) وللوسائط الكبيرة (تكبير لطيف) */
.js-reveal [data-reveal="card"]{transform:translate3d(0,18px,0) scale(.985);}
.js-reveal [data-reveal="media"]{transform:translate3d(0,14px,0) scale(.97);}
.js-reveal [data-reveal="fade"]{transform:none;}

/* SERVICE / GENERIC DETAIL PAGE */
.svc-hero{background:var(--gray-900); padding:170px 0 70px; position:relative; overflow:hidden;}
.svc-hero .base{position:absolute;inset:0;background:linear-gradient(155deg,#16323F,#0E86B4 60%,#1D3E48);}
.svc-hero-inner{position:relative;z-index:2;}
.svc-hero .crumb{color:var(--sky-light); font-size:13px; margin-bottom:14px;}
.svc-hero h1{color:#fff; font-size:clamp(28px,4vw,42px); font-weight:900;}
.svc-hero p{color:var(--gray-200); margin-top:14px; max-width:600px;}
.svc-detail-grid{display:grid; grid-template-columns:1fr 1.4fr; gap:60px;}
.svc-detail-side{background:var(--gray-100); padding:30px; border-radius:4px; align-self:start; position:sticky; top:110px;}
.svc-detail-side h4{font-size:14px; font-weight:800; margin-bottom:16px;}
.svc-detail-side ul{list-style:none;}
.svc-detail-side li{padding:9px 0; border-top:1px solid var(--gray-200); font-size:13.5px; color:var(--gray-700);}
.svc-points{display:grid; grid-template-columns:1fr 1fr; gap:16px 26px; margin-top:30px;}
.svc-point{display:flex; gap:12px; align-items:flex-start; font-size:14.5px;}
.svc-point .dot{width:8px;height:8px;border-radius:50%; background:var(--amber); margin-top:8px; flex-shrink:0;}
.chip-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px;}
.chip{background:var(--sky-pale); color:var(--sky-deep); font-size:12.5px; font-weight:700; padding:7px 14px; border-radius:16px;}
@media(max-width:800px){.svc-detail-grid{grid-template-columns:1fr;} .svc-points{grid-template-columns:1fr;} .svc-detail-side{position:static;}}

.page-prose{font-size:15.5px; color:var(--gray-700); line-height:2;}
.page-prose p{margin-bottom:18px;}

/* FACTORY / INNOVATION-TECH LANDING PAGES */
.factory-hero{background:var(--gray-900); padding:170px 0 90px; position:relative; overflow:hidden;}
.factory-hero .base{position:absolute;inset:0;background:radial-gradient(circle at 70% 30%, #23B0E6 0%, #0E86B4 38%, #16323F 78%);}
.factory-hero-inner{position:relative; z-index:2;}
.factory-hero .crumb{color:var(--sky-light); font-size:13px; margin-bottom:14px;}
.factory-hero h1{color:#fff; font-size:clamp(28px,4vw,44px); font-weight:900;}
.factory-hero p{color:var(--gray-200); margin-top:14px; max-width:640px; font-size:15.5px;}
.factory-hero-stats{display:flex; gap:40px; margin-top:40px; flex-wrap:wrap;}
.factory-hero-stats div b{display:block; font-family:'Cairo'; font-size:28px; font-weight:800; color:var(--amber);}
.factory-hero-stats div span{font-size:12.5px; color:var(--gray-200);}

.process-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--gray-200); border:1px solid var(--gray-200);}
.process-card{background:#fff; padding:32px 24px; position:relative;}
.process-card::before{content:''; position:absolute; top:0; right:0; width:0; height:3px; background:var(--sky); transition:width .35s;}
.process-card:hover::before{width:100%;}
.process-num{font-family:'Cairo'; font-weight:900; font-size:32px; color:var(--sky-pale); -webkit-text-stroke:1.5px var(--sky); margin-bottom:16px;}
.process-card h4{font-size:15px; font-weight:700; margin-bottom:10px;}
.process-card p{font-size:12.5px; color:var(--gray-700);}
@media(max-width:980px){.process-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.process-grid{grid-template-columns:1fr;}}

.capability-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.capability-card{border:1px solid var(--gray-200); border-radius:6px; padding:30px 26px; transition:.3s;}
.capability-card:hover{box-shadow:0 20px 40px -25px rgba(14,93,130,.3); transform:translateY(-3px); border-color:var(--sky-light);}
.capability-ic{width:46px;height:46px; background:var(--sky-pale); border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:18px;}
.capability-card h4{font-size:16.5px; font-weight:700; margin-bottom:10px;}
.capability-card p{font-size:13.5px; color:var(--gray-700);}
@media(max-width:900px){.capability-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.capability-grid{grid-template-columns:1fr;}}

.gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.gallery-item{aspect-ratio:1/1; border-radius:4px; background:linear-gradient(150deg, var(--sky), var(--gray-700));}
.gallery-item:nth-child(4n+2){background:linear-gradient(150deg, var(--gray-900), var(--sky-deep));}
.gallery-item:nth-child(4n+3){background:linear-gradient(150deg, var(--sky-light), var(--sky));}
.gallery-item:nth-child(4n+4){background:linear-gradient(150deg, var(--amber), var(--gray-900));}
@media(max-width:900px){.gallery-grid{grid-template-columns:repeat(2,1fr);}}

@media(max-width:980px){
  nav ul,.nav-actions{display:none;}
  .menu-toggle{display:flex; position:relative; width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.4); background:none; align-items:center; justify-content:center; z-index:201;}
  header.solid .menu-toggle{border-color:var(--gray-200);}
  .menu-toggle .bar-wrap{position:relative; width:18px; height:13px;}
  .menu-toggle span{position:absolute; right:0; left:0; height:2px; border-radius:2px; background:#fff; transition:transform .35s cubic-bezier(.5,0,.2,1), opacity .25s ease, top .35s cubic-bezier(.5,0,.2,1);}
  .menu-toggle span:nth-child(1){top:0;}
  .menu-toggle span:nth-child(2){top:5.5px;}
  .menu-toggle span:nth-child(3){top:11px;}
  header.solid .menu-toggle span{background:var(--gray-900);}
  .menu-toggle.active span:nth-child(1){top:5.5px; transform:rotate(45deg);}
  .menu-toggle.active span:nth-child(2){opacity:0;}
  .menu-toggle.active span:nth-child(3){top:5.5px; transform:rotate(-45deg);}

  .mobile-menu{
    position:fixed; inset:0; z-index:190; overflow-y:auto;
    background:rgba(20,27,31,.55); backdrop-filter:blur(2px);
    opacity:0; visibility:hidden; transition:opacity .35s ease, visibility 0s linear .35s;
  }
  .mobile-menu.open{opacity:1; visibility:visible; transition:opacity .35s ease;}
  .mobile-menu-sheet{
    position:absolute; inset:0 0 0 auto; width:min(86vw,380px); height:100%;
    background:var(--paper); padding:100px 28px 40px; box-shadow:-30px 0 60px -20px rgba(0,0,0,.35);
    transform:translateX(100%); transition:transform .45s cubic-bezier(.16,1,.3,1);
    display:flex; flex-direction:column;
  }
  .mobile-menu.open .mobile-menu-sheet{transform:translateX(0);}
  .mobile-menu ul{list-style:none; display:flex; flex-direction:column; gap:2px;}
  .mobile-menu li{opacity:0; transform:translateX(18px); transition:opacity .4s ease, transform .4s cubic-bezier(.16,1,.3,1);}
  .mobile-menu.open li{opacity:1; transform:translateX(0);}
  .mobile-menu.open li:nth-child(1){transition-delay:.08s;}
  .mobile-menu.open li:nth-child(2){transition-delay:.13s;}
  .mobile-menu.open li:nth-child(3){transition-delay:.18s;}
  .mobile-menu.open li:nth-child(4){transition-delay:.23s;}
  .mobile-menu.open li:nth-child(5){transition-delay:.28s;}
  .mobile-menu.open li:nth-child(6){transition-delay:.33s;}
  .mobile-menu.open li:nth-child(7){transition-delay:.38s;}
  .mobile-menu a{display:flex; align-items:center; justify-content:space-between; padding:18px 4px; font-size:18px; font-weight:800; font-family:'Cairo'; border-bottom:1px solid var(--gray-200); -webkit-tap-highlight-color:transparent;}
  .mobile-menu a::after{content:'‹'; color:var(--sky); font-size:16px; opacity:.6;}
  .mobile-menu a:active{background:var(--sky-pale);}
  .mobile-menu .cta-btn{display:block; text-align:center; margin-top:28px;}
  .mobile-menu-handle{width:40px; height:4px; border-radius:3px; background:var(--gray-200); margin:0 auto 20px;}
  .sheet-drag-zone{touch-action:pan-y;}
}
@media(min-width:981px){.mobile-menu{display:none;}}
body.menu-open{overflow:hidden;}

/* ===================== EVENTS / TICKETS ===================== */
.events-teaser-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}

.event-card{position:relative; display:flex; background:#fff; border:1px solid var(--gray-200); border-radius:6px; overflow:hidden; transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s;}
.event-card:hover{transform:translateY(-4px); box-shadow:0 22px 40px -24px rgba(14,93,130,.32); border-color:var(--sky-light);}
.event-card-cover-link{position:absolute; inset:0; z-index:1;}

.event-card-main{flex:1; min-width:0; padding:20px 22px; display:flex; flex-direction:column;}
.event-card-eyebrow{font-size:11px; font-weight:800; color:var(--gray-400); text-transform:uppercase; letter-spacing:1px; margin-bottom:8px;}
.event-card-title{font-family:'Cairo'; font-size:16.5px; font-weight:800; line-height:1.4; margin-bottom:10px;}
.event-card-location{font-size:12.5px; color:var(--gray-700); margin-top:auto; display:flex; align-items:center; gap:6px;}
.event-card-location svg{flex-shrink:0; opacity:.6;}
.event-card-cta{margin-top:14px; font-size:12.5px; font-weight:800; color:var(--sky-deep);}

.event-card-actions{position:relative; z-index:2; margin-top:14px; display:flex; align-items:center; gap:8px;}
.event-card-book-link{color:var(--sky-deep); font-weight:800; font-size:12.5px; text-decoration:none; flex:1;}
.event-icon-btn{
  position:relative; z-index:2; flex-shrink:0; width:30px; height:30px; border-radius:50%;
  border:1px solid var(--gray-200); background:#fff; color:var(--gray-700);
  display:flex; align-items:center; justify-content:center; transition:.2s; cursor:pointer;
}
.event-icon-btn:hover{background:var(--sky-pale); border-color:var(--sky-light); color:var(--sky-deep);}
.event-icon-btn.copied::after{
  content:'تم النسخ'; position:absolute; bottom:calc(100% + 6px); right:50%; transform:translateX(50%);
  background:var(--gray-900); color:#fff; font-size:10.5px; font-weight:700; padding:4px 9px; border-radius:4px; white-space:nowrap;
}

.event-card-stub{
  position:relative; flex-shrink:0; width:96px; color:#fff; text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--sky-deep); background-size:cover; background-position:center;
}
.event-card-stub::before{
  content:''; position:absolute; top:0; bottom:0; inset-inline-start:-5px; width:10px;
  background-image:radial-gradient(circle, var(--paper) 3.5px, transparent 4px);
  background-size:10px 16px; background-repeat:repeat-y; background-position:center;
}
.event-card-stub .stub-day{font-family:'Cairo'; font-size:26px; font-weight:900; line-height:1;}
.event-card-stub .stub-month{font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:1px; margin-top:5px; opacity:.9;}
.event-card-stub .stub-soldout{position:absolute; top:8px; inset-inline-end:8px; inset-inline-start:8px; background:rgba(0,0,0,.45); font-size:8.5px; font-weight:800; padding:2px 4px; border-radius:3px;}

.event-spotlight{
  position:relative; display:flex; align-items:flex-end; overflow:hidden; border-radius:8px;
  min-height:280px; background:linear-gradient(135deg, var(--sky-deep), var(--gray-900)); background-size:cover; background-position:center;
  text-decoration:none; color:#fff;
}
.event-spotlight::after{content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(11,20,27,.85) 0%, rgba(11,20,27,.15) 60%); pointer-events:none;}
.event-spotlight-cover-link{position:absolute; inset:0; z-index:1;}
.event-spotlight-content{position:relative; z-index:2; padding:38px; max-width:600px; pointer-events:none;}
.event-spotlight-content a, .event-spotlight-content button{pointer-events:auto;}
.event-spotlight-eyebrow{display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.14); backdrop-filter:blur(4px); padding:6px 14px; border-radius:20px; font-size:12px; font-weight:800; letter-spacing:.5px; margin-bottom:16px;}
.event-spotlight-eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--amber);}
.event-spotlight h2{font-family:'Cairo'; font-size:clamp(24px,3.4vw,34px); font-weight:900; line-height:1.3; margin-bottom:12px;}
.event-spotlight-meta{display:flex; flex-wrap:wrap; gap:18px; font-size:13.5px; color:#dce7ec; margin-bottom:22px;}
.event-spotlight-meta span{display:flex; align-items:center; gap:6px;}
.event-spotlight-actions{position:relative; z-index:2; display:flex; align-items:center; flex-wrap:wrap; gap:10px;}
.event-spotlight-actions .event-icon-btn{background:rgba(255,255,255,.14); backdrop-filter:blur(4px); border-color:rgba(255,255,255,.25); color:#fff;}
.event-spotlight-actions .event-icon-btn:hover{background:rgba(255,255,255,.26);}

.events-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}

@media(max-width:900px){
  .events-teaser-grid, .events-grid{grid-template-columns:1fr;}
}
@media(max-width:520px){
  .event-card{flex-direction:column;}
  .event-card-stub{width:100%; flex-direction:row; gap:8px; padding:10px; justify-content:center;}
  .event-card-stub::before{display:none;}
  .event-card-stub .stub-day{font-size:18px;}
  .event-card-stub .stub-month{margin-top:0;}
  .event-spotlight-content{padding:26px;}
}

@media print{
  header, footer, .mobile-menu, .no-print{display:none !important;}
  body{padding-top:0 !important; background:#fff !important;}
  a{color:inherit !important; text-decoration:none !important;}
}

/* ============ ACCOUNT DASHBOARD ============ */
.acc-shell{max-width:1280px; margin:0 auto; padding:0 24px 100px; display:grid; grid-template-columns:250px 1fr; gap:36px; align-items:start;}
.acc-sidebar{position:sticky; top:104px; background:#fff; border:1px solid var(--gray-200); border-radius:8px; overflow:hidden;}
.acc-sidebar-user{display:flex; align-items:center; gap:12px; padding:20px 18px; border-bottom:1px solid var(--gray-200); background:linear-gradient(155deg,var(--gray-900),#16323F);}
.acc-avatar{width:42px;height:42px;border-radius:50%;background:var(--amber);color:var(--gray-900);display:flex;align-items:center;justify-content:center;font-family:'Cairo';font-weight:800;font-size:16px;flex-shrink:0;}
.acc-sidebar-user b{display:block;color:#fff;font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;}
.acc-sidebar-user span{display:block;color:var(--gray-200);font-size:11.5px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;}
.acc-nav{list-style:none;padding:10px;}
.acc-nav li{margin-bottom:2px;}
.acc-nav a{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:6px;font-size:13.5px;font-weight:600;color:var(--gray-700);transition:.2s;}
.acc-nav a:hover{background:var(--gray-100);color:var(--gray-900);}
.acc-nav a.active{background:var(--sky-pale);color:var(--sky-deep);}
.acc-nav a svg{width:17px;height:17px;flex-shrink:0;}
.acc-nav a .acc-nav-count{margin-inline-start:auto;background:var(--gray-200);color:var(--gray-700);font-size:10.5px;font-weight:800;border-radius:20px;padding:2px 7px;min-width:18px;text-align:center;}
.acc-nav a.active .acc-nav-count{background:var(--sky);color:#fff;}
.acc-sidebar-foot{border-top:1px solid var(--gray-200);padding:10px;}
.acc-sidebar-foot form button{width:100%;display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:6px;font-size:13.5px;font-weight:600;color:var(--coral);background:none;border:none;text-align:right;}
.acc-sidebar-foot form button:hover{background:var(--coral-pale);}
.acc-sidebar-foot form button svg{width:17px;height:17px;}

.acc-main{min-width:0;}
.acc-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:28px;}
.acc-topbar h1{font-size:clamp(20px,2.4vw,26px);font-weight:800;}
.acc-topbar p{color:var(--gray-400);font-size:13px;margin-top:4px;}
.acc-actions{display:flex;gap:10px;flex-wrap:wrap;}

.acc-flash{background:var(--emerald-pale);border:1px solid var(--emerald);color:#0f7a54;padding:14px 18px;border-radius:6px;font-size:13.5px;font-weight:600;margin-bottom:24px;display:flex;align-items:center;gap:10px;}

/* SIGNATURE: welcome ring banner */
.acc-welcome{background:linear-gradient(120deg,var(--gray-900) 0%,#123B49 60%,var(--sky-deep) 130%);border-radius:12px;padding:30px 34px;margin-bottom:28px;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;position:relative;overflow:hidden;}
.acc-welcome::before{content:'';position:absolute;inset:0;opacity:.15;mix-blend-mode:overlay;background-image:repeating-linear-gradient(115deg, rgba(255,255,255,.25) 0 20px, transparent 20px 44px);}
.acc-welcome-text{position:relative;z-index:1;}
.acc-welcome-text .eyebrow{color:var(--amber-soft);font-size:12px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:8px;}
.acc-welcome-text h2{color:#fff;font-size:clamp(19px,2.6vw,25px);font-weight:800;margin-bottom:10px;}
.acc-welcome-text p{color:var(--gray-200);font-size:13.5px;max-width:420px;}
.acc-ring-wrap{position:relative;z-index:1;display:flex;align-items:center;gap:18px;flex-shrink:0;}
.acc-ring{position:relative;width:96px;height:96px;flex-shrink:0;}
.acc-ring svg{width:100%;height:100%;transform:rotate(-90deg);}
.acc-ring-track{fill:none;stroke:rgba(255,255,255,.18);stroke-width:8;}
.acc-ring-fill{fill:none;stroke:var(--amber);stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset 1s cubic-bezier(.4,.1,.2,1);}
.acc-ring-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#fff;}
.acc-ring-num b{font-family:'Cairo';font-size:20px;font-weight:800;line-height:1;}
.acc-ring-num span{font-size:9px;opacity:.75;margin-top:2px;}
.acc-ring-legend{color:var(--gray-200);font-size:12.5px;line-height:1.7;}
.acc-ring-legend b{color:#fff;display:block;font-size:13.5px;margin-bottom:2px;}

.acc-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:32px;}
.acc-stat-card{background:#fff;border:1px solid var(--gray-200);border-radius:10px;padding:20px;display:flex;align-items:flex-start;gap:14px;transition:.25s;}
.acc-stat-card:hover{transform:translateY(-2px);box-shadow:0 16px 30px -20px rgba(14,30,38,.25);}
.acc-stat-ic{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.acc-stat-ic svg{width:20px;height:20px;}
.acc-stat-ic.sky{background:var(--sky-pale);color:var(--sky-deep);}
.acc-stat-ic.amber{background:var(--amber-soft);color:#8a6400;}
.acc-stat-ic.violet{background:var(--violet-pale);color:var(--violet);}
.acc-stat-ic.emerald{background:var(--emerald-pale);color:var(--emerald);}
.acc-stat-ic.coral{background:var(--coral-pale);color:var(--coral);}
.acc-stat-body b{display:block;font-family:'Cairo';font-size:22px;font-weight:800;line-height:1.2;}
.acc-stat-body span{display:block;font-size:12px;color:var(--gray-400);margin-top:3px;}

.acc-section{background:#fff;border:1px solid var(--gray-200);border-radius:10px;margin-bottom:24px;overflow:hidden;}
.acc-section-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--gray-200);}
.acc-section-head h3{font-size:15px;font-weight:800;}
.acc-section-head a{font-size:12.5px;font-weight:700;color:var(--sky-deep);}

.acc-row{display:flex;align-items:center;gap:14px;padding:16px 22px;border-bottom:1px solid var(--gray-100);transition:.2s;}
.acc-row:last-child{border-bottom:none;}
a.acc-row:hover{background:var(--gray-100);}
.acc-row-ic{width:38px;height:38px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.acc-row-ic svg{width:17px;height:17px;}
.acc-row-body{flex:1;min-width:0;}
.acc-row-body b{display:block;font-size:13.5px;font-weight:700;color:var(--gray-900);}
.acc-row-body span{display:block;font-size:12px;color:var(--gray-400);margin-top:2px;}
.acc-row-end{text-align:left;flex-shrink:0;}
.acc-row-end b{display:block;font-size:13.5px;font-weight:800;}
.acc-row-end .acc-badge{margin-top:4px;}

.acc-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:800;}
.acc-badge.gray{background:var(--gray-100);color:var(--gray-700);}
.acc-badge.info{background:var(--sky-pale);color:var(--sky-deep);}
.acc-badge.warn{background:var(--amber-soft);color:#8a6400;}
.acc-badge.success{background:var(--emerald-pale);color:var(--emerald);}
.acc-badge.danger{background:var(--coral-pale);color:var(--coral);}
.acc-badge.violet{background:var(--violet-pale);color:var(--violet);}

.acc-empty{padding:48px 24px;text-align:center;color:var(--gray-400);}
.acc-empty svg{width:40px;height:40px;margin:0 auto 14px;opacity:.4;}
.acc-empty p{font-size:13.5px;margin-bottom:16px;}

.acc-cards-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.acc-project-card{background:#fff;border:1px solid var(--gray-200);border-radius:10px;padding:22px;transition:.25s;display:block;}
.acc-project-card:hover{box-shadow:0 16px 30px -20px rgba(14,30,38,.25);transform:translateY(-2px);}
.acc-project-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px;}
.acc-project-card h4{font-size:15.5px;font-weight:800;}
.acc-project-card .num{font-size:11.5px;color:var(--sky-deep);font-weight:700;margin-bottom:6px;display:block;}
.acc-project-card p{font-size:12.5px;color:var(--gray-400);}
.acc-project-card-meta{display:flex;gap:14px;margin-top:14px;padding-top:14px;border-top:1px solid var(--gray-100);font-size:12px;color:var(--gray-700);flex-wrap:wrap;}
.acc-project-card-meta span{display:flex;align-items:center;gap:5px;}
.acc-project-card-meta svg{width:14px;height:14px;color:var(--gray-400);}

.acc-form{background:#fff;border:1px solid var(--gray-200);border-radius:10px;padding:30px;max-width:680px;}
.acc-field{margin-bottom:20px;}
.acc-field label{display:block;font-size:13px;font-weight:700;margin-bottom:7px;color:var(--gray-900);}
.acc-field input,.acc-field textarea{width:100%;border:1px solid var(--gray-200);border-radius:6px;padding:11px 14px;font-family:inherit;font-size:13.5px;background:var(--gray-100);transition:.2s;}
.acc-field input:focus,.acc-field textarea:focus{outline:none;border-color:var(--sky);background:#fff;}
.acc-field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.acc-field .hint{font-size:11.5px;color:var(--gray-400);margin-top:5px;}
.acc-field .error{font-size:11.5px;color:var(--coral);margin-top:5px;font-weight:600;}

.btn-sm{padding:9px 18px;font-size:12.5px;}
.btn-danger-outline{border:1px solid var(--coral);color:var(--coral);padding:12px 26px;font-size:13.5px;font-weight:700;border-radius:2px;transition:.3s;display:inline-block;background:none;}
.btn-danger-outline:hover{background:var(--coral);color:#fff;}

.acc-detail-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:24px;align-items:start;}
.acc-info-list{list-style:none;}
.acc-info-list li{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--gray-100);font-size:13px;}
.acc-info-list li:last-child{border-bottom:none;}
.acc-info-list li span:first-child{color:var(--gray-400);}
.acc-info-list li span:last-child{font-weight:700;color:var(--gray-900);}

.acc-mobile-tabs{display:none;}

@media(max-width:980px){
  .acc-shell{grid-template-columns:1fr;padding:0 16px 70px;}
  .acc-sidebar{display:none;}
  .acc-mobile-tabs{display:flex;gap:8px;overflow-x:auto;padding:4px 0 14px;margin-bottom:6px;-webkit-overflow-scrolling:touch;}
  .acc-mobile-tabs a{flex-shrink:0;padding:9px 16px;border-radius:20px;font-size:12.5px;font-weight:700;background:var(--gray-100);color:var(--gray-700);white-space:nowrap;}
  .acc-mobile-tabs a.active{background:var(--sky-deep);color:#fff;}
  .acc-stat-grid{grid-template-columns:1fr 1fr;}
  .acc-cards-grid{grid-template-columns:1fr;}
  .acc-detail-grid{grid-template-columns:1fr;}
  .acc-welcome{flex-direction:column;align-items:flex-start;}
  .acc-field-row{grid-template-columns:1fr;}
}
@media(max-width:560px){
  .acc-stat-grid{grid-template-columns:1fr;}
}

/* ==========================================================================
   نظام الحركة والإيقاع الموحّد
   قبل هذا: 10 مُدد انتقال مختلفة و6 منحنيات تسارع متفرقة عبر الملف، بلا حالة تركيز
   ظاهرة للوحة المفاتيح. هذه الكتلة توحّد المفردات الحركية وتسدّ فجوة الإتاحة.
   ========================================================================== */
:root{
  --ease-out:cubic-bezier(.16,1,.3,1);   /* المنحنى الأساسي — خروج أسّي يمنح إحساسًا مصقولًا */
  --ease-soft:cubic-bezier(.22,1,.36,1); /* للحركات الأطول والوسائط */
  --dur-1:.22s;   /* تفاعلات دقيقة: تغيّر لون، تسطير */
  --dur-2:.34s;   /* بطاقات وأزرار */
  --dur-3:.62s;   /* ظهور عند التمرير */
  --sec-y:clamp(68px, 7.5vw, 116px);     /* إيقاع رأسي مرن */
  --sec-y-sm:clamp(48px, 5vw, 76px);
  --lift:-6px;    /* ارتفاع البطاقة عند المرور */
}

/* حالة تركيز ظاهرة لمستخدمي لوحة المفاتيح — :where تُبقي الأولوية صفرًا فلا تتعارض مع الأنماط القائمة */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{
  outline:2px solid var(--sky);
  outline-offset:3px;
  border-radius:4px;
}
/* على الخلفيات الداكنة نرفع التباين */
:where(.hero, .cta-strip, .case, .factory-section, .download-strip) :where(a, button):focus-visible{
  outline-color:var(--amber);
}

/* ارتفاع موحّد للبطاقات عند المرور — بدل ثلاث مُدد مختلفة كانت مستخدمة */
.svc-card, .product-card, .logo-chip{
  transition:transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
@media (hover:hover){
  .svc-card:hover, .product-card:hover{transform:translateY(var(--lift));}
}

/* القاعدة العامة أعلى الملف تُبطل مدد الحركة، لكنها لا تشمل التمرير الناعم */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .js-reveal [data-reveal]{opacity:1; transform:none;} /* لا إخفاء أصلًا عند تفضيل تقليل الحركة */
}