/* =========================================================
   Optima Prints — Design System
   Colors, fonts and shapes follow the Optima Prints brand
   guideline (vivid blue hero color, rounded-only shapes).
   ========================================================= */

/* ---------- Fonts ---------- */
@font-face{
  font-family:"Baflion Sans";
  src:url("../fonts/BaflionSans-Black.woff2") format("woff2");
  font-weight:900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Myriad Pro";
  src:url("../fonts/MyriadPro-Light.woff2") format("woff2");
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Myriad Pro";
  src:url("../fonts/MyriadPro-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Myriad Pro";
  src:url("../fonts/MyriadPro-SemiBold.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Myriad Pro";
  src:url("../fonts/MyriadPro-Bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Markazi Text";
  src:url("../fonts/MarkaziText-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Markazi Text";
  src:url("../fonts/MarkaziText-Medium.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Markazi Text";
  src:url("../fonts/MarkaziText-Bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  --vivid-blue:#002dff;
  --blue-ocean:#1579ff;
  --midnight-blue:#190055;
  --turquoise:#3ffff6;
  --blue-sky:#aaeaff;
  --dark-blue:#0b0024;
  --white:#ffffff;
  --ink:#0b0024;
  --grey-100:#f4f7ff;
  --grey-200:#e7edfb;
  --grey-400:#9aa4c7;
  --grey-600:#5b6489;

  --grad-primary:linear-gradient(135deg, var(--vivid-blue), var(--blue-ocean));
  --grad-dark:linear-gradient(160deg, var(--dark-blue), var(--midnight-blue) 60%, var(--vivid-blue) 130%);
  --grad-accent:linear-gradient(120deg, var(--turquoise), var(--blue-sky));

  --font-display:"Baflion Sans", "Myriad Pro", sans-serif;
  --font-body-latin:"Myriad Pro", "Segoe UI", sans-serif;
  --font-body-arabic:"Markazi Text", "Segoe UI", sans-serif;
  --font-body: var(--font-body-latin);

  --radius-sm:14px;
  --radius-md:24px;
  --radius-lg:40px;
  --radius-pill:999px;

  --shadow-sm:0 6px 20px rgba(11,0,36,0.08);
  --shadow-md:0 18px 46px rgba(11,0,36,0.14);
  --shadow-blue:0 18px 40px rgba(0,45,255,0.25);

  --container:1240px;
  --gutter:24px;
  --header-h:84px;
}

[dir="rtl"]{ --font-body: var(--font-body-arabic); }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
[dir="rtl"] body{ font-size:1.05em; }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
input,textarea,select{ font-family:inherit; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:900;
  line-height:1.05;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{
  font-family:var(--font-body-arabic);
  font-weight:700;
  letter-spacing:0;
}
p{ margin:0 0 1em; line-height:1.7; color:var(--grey-600); }

h1{ font-size:clamp(2.4rem, 5vw, 4.4rem); }
h2{ font-size:clamp(2rem, 3.6vw, 3rem); }
h3{ font-size:clamp(1.3rem, 2vw, 1.7rem); }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display);
  font-size:.8rem; font-weight:900;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--vivid-blue);
  margin-bottom:14px;
}
[dir="rtl"] .eyebrow{ font-family:var(--font-body-arabic); font-weight:700; letter-spacing:0; text-transform:none; font-size:1rem;}
.eyebrow::before{
  content:""; width:26px; height:8px; border-radius:var(--radius-pill);
  background:var(--grad-primary); display:inline-block;
}

.container{ max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding:96px 0; position:relative; }
.section--tight{ padding:64px 0; }
.section--dark{ background:var(--grad-dark); color:var(--white); }
.section--dark p{ color:rgba(255,255,255,.72); }
.section--dark h2, .section--dark h3{ color:var(--white); }
.section--grey{ background:var(--grey-100); }

.text-center{ text-align:center; }
.lede{ font-size:1.15rem; max-width:640px; }
.mx-auto{ margin-inline:auto; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 32px;
  border-radius:var(--radius-pill);
  font-family:var(--font-display);
  font-weight:900;
  font-size:.95rem;
  border:2px solid transparent;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  white-space:nowrap;
}
[dir="rtl"] .btn{ font-family:var(--font-body-arabic); font-weight:700; font-size:1.05rem; }
.btn:hover{ transform:translateY(-3px); }
.btn--primary{ background:var(--grad-primary); color:var(--white); box-shadow:var(--shadow-blue); }
.btn--primary:hover{ box-shadow:0 22px 50px rgba(0,45,255,.35); }
.btn--ghost{ background:transparent; border-color:rgba(255,255,255,.4); color:var(--white); }
.btn--ghost:hover{ background:rgba(255,255,255,.12); }
.btn--dark{ background:var(--ink); color:var(--white); }
.btn--outline{ background:transparent; border-color:var(--vivid-blue); color:var(--vivid-blue); }
.btn--outline:hover{ background:var(--vivid-blue); color:var(--white); }
.btn--sm{ padding:11px 22px; font-size:.82rem; }
.btn--wa{ background:#25D366; color:#06210f; box-shadow:0 14px 30px rgba(37,211,102,.35); }

/* ---------- Header ---------- */
.site-header{
  position:fixed; inset-inline:0; top:0; z-index:100;
  height:var(--header-h);
  display:flex; align-items:center;
  transition:background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:24px; width:100%; }
.site-header.is-solid{
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px);
  box-shadow:0 8px 30px rgba(11,0,36,.08);
}
.brand{ display:flex; align-items:center; }
.brand img{ height:38px; width:auto; }
.brand .logo-dark{ display:block; }
.brand .logo-light{ display:none; }
.site-header.is-solid .brand .logo-dark{ display:block; }
.site-header.is-solid .brand .logo-light{ display:none; }
.site-header:not(.is-solid) .brand .logo-dark{ display:none; }
.site-header:not(.is-solid) .brand .logo-light{ display:block; }

.nav-desktop{ display:flex; align-items:center; gap:36px; }
.nav-desktop a{
  font-family:var(--font-display); font-weight:900; font-size:.92rem;
  letter-spacing:.02em;
  color:var(--white);
  position:relative; padding:6px 0;
}
[dir="rtl"] .nav-desktop a{ font-family:var(--font-body-arabic); font-weight:700; font-size:1.05rem; }
.site-header.is-solid .nav-desktop a{ color:var(--ink); }
.nav-desktop a.active{ color:var(--vivid-blue); }
.nav-desktop a::after{
  content:""; position:absolute; inset-inline-start:0; bottom:-2px; height:3px; width:0;
  background:var(--grad-primary); border-radius:var(--radius-pill);
  transition:width .25s ease;
}
.nav-desktop a:hover::after, .nav-desktop a.active::after{ width:100%; }

.header-actions{ display:flex; align-items:center; gap:14px; }
.lang-switch{ display:flex; align-items:center; gap:2px; background:rgba(255,255,255,.14); border-radius:var(--radius-pill); padding:4px; }
.site-header.is-solid .lang-switch{ background:var(--grey-100); }
.lang-switch a{
  font-family:var(--font-display); font-weight:900; font-size:.72rem; letter-spacing:.05em;
  padding:7px 12px; border-radius:var(--radius-pill); color:var(--white);
}
.site-header.is-solid .lang-switch a{ color:var(--grey-600); }
.lang-switch a.active{ background:var(--white); color:var(--vivid-blue); }
.site-header.is-solid .lang-switch a.active{ background:var(--grad-primary); color:var(--white); }

.nav-toggle{
  display:none; width:46px; height:46px; border-radius:50%;
  border:none; background:rgba(255,255,255,.16);
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
}
.site-header.is-solid .nav-toggle{ background:var(--grey-100); }
.nav-toggle span{ width:20px; height:2px; background:var(--white); border-radius:2px; transition:.25s; }
.site-header.is-solid .nav-toggle span{ background:var(--ink); }

.mobile-menu{
  position:fixed; inset:0; z-index:101;
  background:var(--grad-dark);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px;
  opacity:0; visibility:hidden; transform:translateY(-16px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s;
}
.mobile-menu.is-open{ opacity:1; visibility:visible; transform:translateY(0); }
.mobile-menu a{ font-family:var(--font-display); font-weight:900; font-size:1.6rem; color:var(--white); }
[dir="rtl"] .mobile-menu a{ font-family:var(--font-body-arabic); font-weight:700; }
.mobile-menu .lang-switch{ background:rgba(255,255,255,.12); }
.mobile-menu-close{
  position:absolute; top:26px; inset-inline-end:26px;
  width:46px; height:46px; border-radius:50%; border:none;
  background:rgba(255,255,255,.14); color:var(--white); font-size:1.4rem;
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; flex-direction:column;
  background:var(--grad-dark);
  color:var(--white);
  overflow:hidden;
  padding-top:var(--header-h);
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:url("../img/patterns/pattern-pills-dark.jpg") center/cover no-repeat;
  opacity:.14; mix-blend-mode:screen;
}
.hero-grid{ position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; align-content:center; width:100%; flex:1 1 auto; }
.hero-copy .eyebrow{ color:var(--turquoise); }
.hero-copy .eyebrow::before{ background:var(--grad-accent); }
.hero-headline{ color:var(--white); }
.hero-headline em{ font-style:normal; background:var(--grad-accent); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-sub{ color:rgba(255,255,255,.78); font-size:1.15rem; max-width:520px; }
.hero-cta{ display:flex; gap:16px; margin-top:36px; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:36px; margin-top:56px; flex-wrap:wrap; }
.hero-stat b{ display:block; font-family:var(--font-display); font-size:2rem; color:var(--turquoise); }
[dir="rtl"] .hero-stat b{ font-family:var(--font-body-arabic); }
.hero-stat span{ font-size:.85rem; color:rgba(255,255,255,.65); }

.hero-visual{ position:relative; height:520px; }
.hero-video{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; transition:transform 1.1s cubic-bezier(.16,.9,.3,1); }
.hero-video::before{
  content:""; position:absolute; width:440px; height:440px; max-width:85%; max-height:85%;
  background:radial-gradient(circle, rgba(63,255,246,.35), rgba(0,45,255,0) 70%);
  filter:blur(14px); z-index:0;
}
.hero-video__el{
  position:relative; z-index:1;
  width:auto; height:620px; max-height:88vh; max-width:100%;
  object-fit:contain;
}
.hero.is-split .hero-video{ transform:translateY(-10px) scale(1.02); }

.hero-badge{
  position:absolute; bottom:18px; inset-inline-start:50%; transform:translateX(-50%);
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25);
  padding:10px 20px; border-radius:var(--radius-pill);
  font-size:.8rem; color:rgba(255,255,255,.85); backdrop-filter:blur(6px);
}

.marquee{
  position:relative; z-index:2;
  border-top:1px solid rgba(255,255,255,.14);
  overflow:hidden; padding:20px 0; margin-top:64px;
}
.marquee-track{ display:flex; gap:48px; width:max-content; animation:marquee 22s linear infinite; }
.marquee-track span{
  font-family:var(--font-display); font-weight:900; font-size:1rem;
  letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.55);
  display:flex; align-items:center; gap:14px; white-space:nowrap;
}
[dir="rtl"] .marquee-track span{ font-family:var(--font-body-arabic); font-weight:700; text-transform:none; letter-spacing:0; font-size:1.2rem; }
.marquee-track span::after{ content:"●"; color:var(--turquoise); font-size:.5rem; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
[dir="rtl"] .marquee-track{ animation-name:marquee-rtl; }
@keyframes marquee-rtl{ from{ transform:translateX(0);} to{ transform:translateX(50%);} }

/* ---------- Icon boxes / cards ---------- */
.grid{ display:grid; gap:28px; }
.grid--4{ grid-template-columns:repeat(4,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--2{ grid-template-columns:repeat(2,1fr); }

.icon-box{
  background:var(--white); border-radius:var(--radius-md); padding:34px 28px;
  box-shadow:var(--shadow-sm); border:1px solid var(--grey-200);
  transition:transform .3s ease, box-shadow .3s ease;
}
.icon-box:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.icon-box__icon{
  width:60px; height:60px; border-radius:var(--radius-pill);
  background:var(--grad-primary); display:flex; align-items:center; justify-content:center;
  margin-bottom:20px; color:var(--white);
}
.icon-box__icon svg{ width:28px; height:28px; }
.icon-box h3{ margin-bottom:10px; }
.icon-box p{ margin:0; font-size:.95rem; }

.value-card{
  border-radius:var(--radius-lg); padding:36px 30px; color:var(--white);
  background:var(--grad-dark); position:relative; overflow:hidden;
}
.value-card::after{
  content:""; position:absolute; inset:0; opacity:.16; mix-blend-mode:screen;
  background:url("../img/patterns/pattern-pills-blue.jpg") center/cover;
}
.value-card > *{ position:relative; z-index:1; }
.value-card .num{ font-family:var(--font-display); font-size:.85rem; color:var(--turquoise); letter-spacing:.1em; }
.value-card h3{ color:var(--white); margin-top:10px; }
.value-card p{ color:rgba(255,255,255,.78); margin:0; }

/* ---------- Services showpiece (tabs) ---------- */
.service-explorer{ display:grid; grid-template-columns:.85fr 1.15fr; gap:0; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); }
.service-tabs{ background:var(--grad-dark); padding:16px; display:flex; flex-direction:column; position:relative; }
.service-tab{
  display:flex; align-items:center; gap:16px;
  padding:20px 22px; border-radius:var(--radius-md);
  color:rgba(255,255,255,.6);
  background:transparent; border:none; text-align:start;
  position:relative; z-index:1; width:100%;
}
.service-tab .tag{
  width:44px; height:44px; border-radius:50%; flex:none;
  background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:900;
}
.service-tab strong{ display:block; font-family:var(--font-display); font-weight:900; font-size:1.02rem; color:inherit; }
[dir="rtl"] .service-tab strong{ font-family:var(--font-body-arabic); font-weight:700; font-size:1.15rem; }
.service-tab small{ font-size:.82rem; opacity:.7; }
.service-tab.is-active{ color:var(--white); }
.service-tab.is-active .tag{ background:var(--grad-accent); color:var(--dark-blue); }
.service-indicator{
  position:absolute; inset-inline:16px; height:82px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius-md);
  transition:transform .45s cubic-bezier(.16,.9,.3,1);
  z-index:0;
}
.service-panels{ background:var(--white); padding:52px; position:relative; min-height:420px; }
.service-panel{ display:none; animation:fadeUp .5s ease; }
.service-panel.is-active{ display:block; }
.service-panel img{ border-radius:var(--radius-md); margin-top:24px; box-shadow:var(--shadow-sm); }
.service-panel ul{ margin-top:20px; display:flex; flex-direction:column; gap:12px; }
.service-panel ul li{ display:flex; gap:12px; align-items:flex-start; color:var(--grey-600); }
.service-panel ul li::before{
  content:""; width:8px; height:8px; margin-top:7px; border-radius:50%; background:var(--vivid-blue); flex:none;
}
@keyframes fadeUp{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }

/* ---------- Process ---------- */
.process-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; counter-reset:step; list-style:none; margin:0; padding:0; }
.process-step{ position:relative; padding:32px 24px; border-radius:var(--radius-md); background:var(--white); border:1px solid var(--grey-200); list-style:none; margin:0; }
.process-step .step-no{
  width:52px; height:52px; border-radius:50%; background:var(--grad-primary); color:var(--white);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:900; margin-bottom:18px;
}

/* ---------- Gallery ---------- */
.filter-row{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-bottom:44px; }
.filter-btn{
  padding:10px 22px; border-radius:var(--radius-pill); border:2px solid var(--grey-200);
  background:var(--white); font-family:var(--font-display); font-weight:900; font-size:.82rem; color:var(--grey-600);
}
[dir="rtl"] .filter-btn{ font-family:var(--font-body-arabic); font-weight:700; font-size:1rem; }
.filter-btn.is-active{ background:var(--grad-primary); border-color:transparent; color:var(--white); }

.gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.gallery-item{ position:relative; border-radius:var(--radius-md); overflow:hidden; cursor:pointer; aspect-ratio:4/5; background:var(--grey-100); }
.gallery-item.is-hidden{ display:none; }
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.gallery-item.tile{ display:flex; align-items:center; justify-content:center; }
.gallery-item.tile img{ object-fit:cover; }
.gallery-item:hover img{ transform:scale(1.06); }
.gallery-caption{
  position:absolute; inset-inline:0; bottom:0; padding:18px 20px;
  background:linear-gradient(0deg, rgba(11,0,36,.82), transparent);
  color:var(--white); font-family:var(--font-display); font-weight:900; font-size:.85rem;
  opacity:0; transform:translateY(10px); transition:.3s ease;
}
[dir="rtl"] .gallery-caption{ font-family:var(--font-body-arabic); font-weight:700; font-size:1rem; }
.gallery-item:hover .gallery-caption{ opacity:1; transform:translateY(0); }

.lightbox{
  position:fixed; inset:0; z-index:200; background:rgba(11,0,36,.92);
  display:flex; align-items:center; justify-content:center; padding:40px;
  opacity:0; visibility:hidden; transition:.3s ease;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox img{ max-width:min(900px,92vw); max-height:82vh; border-radius:var(--radius-md); box-shadow:var(--shadow-md); }
.lightbox-close{ position:absolute; top:26px; inset-inline-end:26px; width:48px; height:48px; border-radius:50%; border:none; background:rgba(255,255,255,.12); color:var(--white); font-size:1.4rem; }

/* ---------- Testimonials ---------- */
.testimonial{ background:var(--white); border-radius:var(--radius-lg); padding:36px 32px; box-shadow:var(--shadow-sm); border:1px solid var(--grey-200); }
.stars{ display:flex; gap:4px; margin-bottom:16px; color:#ffb547; }
.stars svg{ width:18px; height:18px; }
.testimonial-person{ display:flex; align-items:center; gap:14px; margin-top:20px; }
.testimonial-avatar{ width:48px; height:48px; border-radius:50%; background:var(--grad-primary); display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--font-display); font-weight:900; }

/* ---------- Brand story / logo transformation (About showpiece) ---------- */
.story-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.logo-build{ position:relative; height:340px; display:flex; align-items:center; justify-content:center; }
.logo-build svg{ width:260px; height:260px; }
.logo-build .lb-ring{ opacity:0; transform:scale(.6) translateY(30px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.9,.3,1.1); }
.logo-build.is-visible .lb-ring{ opacity:1; transform:scale(1) translateY(0); }
.logo-build.is-visible .lb-ring:nth-child(1){ transition-delay:.05s; }
.logo-build.is-visible .lb-ring:nth-child(2){ transition-delay:.22s; }
.logo-build.is-visible .lb-ring:nth-child(3){ transition-delay:.4s; }
.logo-build-caption{ text-align:center; margin-top:18px; color:var(--grey-600); font-size:.9rem; }

.value-grid-alt{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }

/* ---------- CTA band ---------- */
.cta-band{
  border-radius:var(--radius-lg); background:var(--grad-primary); color:var(--white);
  padding:56px 60px; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
  position:relative; overflow:hidden;
}
.cta-band::after{ content:""; position:absolute; inset:0; background:url("../img/patterns/bg-rings-radial.jpg") center/cover; opacity:.22; mix-blend-mode:overlay; }
.cta-band > *{ position:relative; z-index:1; }
.cta-band h2{ color:var(--white); margin:0; }
.cta-actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--dark-blue); color:rgba(255,255,255,.7); padding:80px 0 28px; }
.footer-top{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1.1fr; gap:40px; padding-bottom:56px; }
.footer-brand img{ height:36px; margin-bottom:18px; }
.footer-brand p{ color:rgba(255,255,255,.55); max-width:280px; }
.footer-col h4{ color:var(--white); font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:18px; font-family:var(--font-display); }
[dir="rtl"] .footer-col h4{ font-family:var(--font-body-arabic); text-transform:none; letter-spacing:0; font-size:1.05rem; }
.footer-col ul{ display:flex; flex-direction:column; gap:12px; }
.footer-col a:hover{ color:var(--white); }
.footer-contact li{ display:flex; gap:10px; align-items:flex-start; }
.footer-contact svg{ width:18px; height:18px; flex:none; margin-top:3px; color:var(--turquoise); }
.social-row{ display:flex; gap:10px; margin-top:20px; }
.social-row a{ width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; transition:.25s; }
.social-row a:hover{ background:var(--grad-primary); }
.social-row svg{ width:18px; height:18px; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding-top:26px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.82rem; }
.tagline-strip{ font-family:var(--font-display); font-weight:900; color:var(--white); font-size:.95rem; letter-spacing:.03em; }
[dir="rtl"] .tagline-strip{ font-family:var(--font-body-arabic); font-weight:700; letter-spacing:0; font-size:1.1rem; }
.placeholder-tag{ font-size:.68rem; background:rgba(255,181,71,.18); color:#ffb547; padding:2px 8px; border-radius:6px; margin-inline-start:6px; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero{
  padding:calc(var(--header-h) + 70px) 0 70px;
  background:var(--grad-dark); color:var(--white); position:relative; overflow:hidden;
}
.page-hero::before{ content:""; position:absolute; inset:0; background:url("../img/patterns/bg-stack-fade.jpg") center right/cover no-repeat; opacity:.35; }
.page-hero .container{ position:relative; z-index:1; }
.breadcrumb{ display:flex; gap:8px; font-size:.85rem; color:rgba(255,255,255,.6); margin-bottom:18px; }
.page-hero h1{ color:var(--white); max-width:720px; }
.page-hero p{ color:rgba(255,255,255,.75); max-width:560px; }

/* ---------- Forms ---------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-field{ display:flex; flex-direction:column; gap:8px; grid-column:span 1; }
.form-field.full{ grid-column:1 / -1; }
.form-field label{ font-size:.85rem; font-weight:700; color:var(--ink); }
.form-field input, .form-field textarea{
  padding:16px 18px; border-radius:var(--radius-sm); border:1.5px solid var(--grey-200);
  background:var(--grey-100); font-size:.95rem; resize:vertical;
}
.form-field input:focus, .form-field textarea:focus{ outline:none; border-color:var(--vivid-blue); background:var(--white); }
.contact-card{ display:flex; gap:18px; padding:26px; border-radius:var(--radius-md); background:var(--white); border:1px solid var(--grey-200); box-shadow:var(--shadow-sm); }
.contact-card .icon-box__icon{ margin-bottom:0; flex:none; }
.map-frame{ border-radius:var(--radius-lg); overflow:hidden; height:360px; background:var(--grey-200); position:relative; }
.map-frame img{ width:100%; height:100%; object-fit:cover; }
.map-frame .map-note{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(11,0,36,.55); color:#fff; font-family:var(--font-display); font-weight:900; text-align:center; padding:20px; }

/* ---------- Accordion (FAQ use) ---------- */
.accordion-item{ border-bottom:1px solid var(--grey-200); }
.accordion-trigger{
  width:100%; background:none; border:none; padding:22px 4px; display:flex; justify-content:space-between; align-items:center;
  font-family:var(--font-display); font-weight:900; font-size:1.02rem; color:var(--ink); text-align:start;
}
[dir="rtl"] .accordion-trigger{ font-family:var(--font-body-arabic); font-weight:700; font-size:1.15rem; }
.accordion-trigger .plus{ width:26px; height:26px; border-radius:50%; border:1.5px solid var(--grey-400); display:flex; align-items:center; justify-content:center; flex:none; transition:.3s; }
.accordion-item.is-open .plus{ background:var(--grad-primary); border-color:transparent; transform:rotate(45deg); color:#fff; }
.accordion-panel{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.accordion-panel p{ padding:0 4px 22px; }

/* ---------- Reveal utility ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.stagger .reveal:nth-child(1){transition-delay:.05s;} .stagger .reveal:nth-child(2){transition-delay:.15s;}
.stagger .reveal:nth-child(3){transition-delay:.25s;} .stagger .reveal:nth-child(4){transition-delay:.35s;}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .grid--4{ grid-template-columns:repeat(2,1fr); }
  .process-row{ grid-template-columns:repeat(2,1fr); }
  .hero-grid{ grid-template-columns:1fr; text-align:center; }
  .hero-copy{ order:1; } .hero-visual{ order:0; height:400px; }
  .hero-video__el{ height:380px; }
  .hero-cta{ justify-content:center; } .hero-stats{ justify-content:center; }
  .story-grid{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr 1fr; }
  .service-explorer{ grid-template-columns:1fr; }
}
@media (max-width:820px){
  .nav-desktop, .header-actions .lang-switch{ display:none; }
  .nav-toggle{ display:flex; }
  .grid--3{ grid-template-columns:1fr 1fr; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-top{ grid-template-columns:1fr; }
  .cta-band{ flex-direction:column; text-align:center; }
  .form-grid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .grid--3,.grid--4,.value-grid-alt{ grid-template-columns:1fr; }
  .gallery-grid{ grid-template-columns:1fr 1fr; }
  .section{ padding:64px 0; }
  .service-panels{ padding:30px 22px; }
  .cta-band{ padding:40px 26px; }
}