/* ==========================================================================
   RUNDEMLABS — Design System
   Holographic / cyber aesthetic for an elite AI creative agency
   ========================================================================== */

:root{
  /* --- Color tokens --- */
  --void:        #05060B;
  --void-2:      #090B13;
  --panel:       #0C0F1C;
  --panel-2:     #11142380;
  --line:        rgba(210, 220, 255, 0.10);
  --line-strong: rgba(210, 220, 255, 0.22);

  --cyan:        #00E9FF;
  --violet:      #9B5CFF;
  --magenta:     #FF3EC9;
  --amber:       #FFC15E;

  --ink:         #EAEFFC;
  --ink-dim:     #A7AFCC;
  --ink-faint:   #838CB0;

  --ok:          #3CE6A6;
  --danger:      #FF5C7A;

  --holo: linear-gradient(115deg, var(--cyan) 0%, var(--violet) 52%, var(--magenta) 100%);
  --holo-soft: linear-gradient(115deg, rgba(0,233,255,.35) 0%, rgba(155,92,255,.35) 52%, rgba(255,62,201,.35) 100%);

  /* --- Type ---
     Arabic edition: same color system as the English site (by request),
     but the typefaces are swapped for legible, modern Arabic web fonts.
     Cairo carries display/headings (geometric, confident at large sizes);
     IBM Plex Sans Arabic carries body copy (built for on-screen reading);
     Tajawal stands in for the English site's monospace/label role, since
     Arabic has no monospace tradition and mono metrics would misrender it. */
  --f-display: 'Cairo', 'Segoe UI', system-ui, sans-serif;
  --f-body: 'IBM Plex Sans Arabic', 'Segoe UI', system-ui, sans-serif;
  --f-mono: 'Tajawal', 'Segoe UI', system-ui, sans-serif;

  /* --- Scale --- */
  --container: 1180px;
  --radius: 14px;
  --radius-sm: 8px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
html, body{ margin:0; padding:0; }

/* Arabic script is cursive — letter-spacing (tracking) breaks the connections
   between letters and text-transform:uppercase has no meaning for a script
   with no case. The English design system leans on both for its label/eyebrow
   aesthetic, so both are neutralized site-wide here rather than hunted down
   rule by rule — this must hold for every current and future selector. */
*, *::before, *::after{ letter-spacing: normal !important; text-transform: none !important; }

body{
  background: var(--void);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 2;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Ambient background: fixed grid + vignette, cheap to render */
body::before{
  content:"";
  position: fixed; inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 75%);
  opacity: .35;
  pointer-events: none;
  z-index: 0;
}

::selection{ background: var(--violet); color: #fff; }

a{ color: inherit; text-decoration: none; }
img, svg{ display:block; max-width:100%; }

h1,h2,h3,h4{
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
}

p{ margin: 0; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 33px;
  position: relative;
  z-index: 1;
}

.eyebrow{
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cyan);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before{
  content:"";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--holo);
  box-shadow: 0 0 12px var(--cyan);
}

.holo-text{
  background: var(--holo);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------- */
.btn{
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 28px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid var(--line-strong);
  transition: transform .3s ease-in-out, box-shadow .3s ease-in-out, border-color .3s ease-in-out, background .3s ease-in-out;
  white-space: nowrap;
}
.btn-primary{
  /* Same holo palette as the English site, with a soft top-sheen layered on
     top so the CTA reads as polished/metallic rather than flat neon. */
  background-image: linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 45%), var(--holo);
  color: #04050A;
  font-weight: 700;
  border: none;
  box-shadow: 0 0 0 rgba(0,233,255,0);
}
.btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(155,92,255,.45);
}
.btn-ghost{
  background: rgba(255,255,255,.02);
  color: var(--ink);
}
.btn-ghost:hover{
  border-color: var(--cyan);
  color: var(--cyan);
  box-shadow: 0 0 20px rgba(0,233,255,.15);
}
.btn-block{ width: 100%; justify-content: center; }

/* --------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------- */
.site-nav{
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(16px) saturate(140%);
  background: rgba(5,6,11,.72);
  border-bottom: 1px solid var(--line);
}
.nav-inner{
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 33px;
  max-width: var(--container);
  margin: 0 auto;
}
.logo{
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -.01em;
  display: flex; align-items: center; gap: 10px;
}
.logo-mark{
  width: 26px; height: 26px;
  border-radius: 7px;
  background: var(--holo);
  position: relative;
  flex-shrink: 0;
}
.logo-mark::after{
  content:"";
  position:absolute; inset: 5px;
  border-radius: 3px;
  background: var(--void);
}
.logo small{
  display:block;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .18em;
  color: var(--ink-faint);
  font-weight: 500;
  margin-top: 1px;
}
.nav-links{
  display: flex; align-items: center; gap: 30px;
  font-size: 14px;
  color: var(--ink-dim);
}
.nav-links a{ transition: color .2s ease; position: relative; }
.nav-links a:hover, .nav-links a.active{ color: var(--ink); }
.nav-links a.active::after{
  content:"";
  position: absolute; left: 0; right: 0; bottom: -18px;
  height: 2px; background: var(--holo);
}
.nav-cta{ display:flex; align-items:center; gap: 14px; }

.nav-toggle{
  display:none; background:none; border:1px solid var(--line-strong);
  border-radius: 8px; padding: 10px; cursor:pointer;
  flex-direction: column; justify-content:center; gap: 5px;
  width: 44px; height: 44px;
}
.nav-toggle-bar{
  display:block; width: 18px; height: 2px; background: var(--ink);
  border-radius: 2px; transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.nav-backdrop{
  display:none; position: fixed; inset: 0; z-index: 90;
  background: rgba(3,4,8,.6); backdrop-filter: blur(2px);
}
.nav-backdrop.is-open{ display:block; }

@media (max-width: 880px){
  .nav-links{
    /* .site-nav has backdrop-filter, which makes it the containing block for
       fixed descendants — so top+bottom can't be trusted to size this against
       the viewport. Set height explicitly instead (dvh handles mobile browser
       chrome; vh is the fallback for browsers without dvh support). */
    display:none; flex-direction:column; position:fixed; top:66px; left:0; right:0;
    height: calc(100vh - 66px); height: calc(100dvh - 66px);
    background: rgba(6,7,14,.98); padding: 28px; gap: 26px; z-index: 95;
    border-top: 1px solid var(--line); overflow-y:auto;
  }
  .nav-links.is-open{ display:flex; }
  .nav-toggle{ display:flex; }
  .nav-cta .btn{ display:none; }
  .logo small{ display:none; }
  .logo{ min-width:0; }
  .lang-switch{ padding:6px 10px; font-size:12px; white-space:nowrap; }
  .nav-cta{ gap:8px; }
}

/* Skip link — visually hidden until focused */
.skip-link{
  position:fixed; top:-60px; inset-inline-start:12px; z-index: 999;
  background: var(--holo); color:#04050A; font-weight:700;
  font-family: var(--f-mono); font-size: 13px; padding: 12px 18px;
  border-radius: 8px; transition: top .2s ease;
}
.skip-link:focus{ top: 12px; }

/* Honeypot field — hidden from real users, visible to bots */
.hp-field{ position:absolute; inset-inline-start:-9999px; top:-9999px; opacity:0; height:0; width:0; overflow:hidden; }


/* --------------------------------------------------------------------
   Sections / layout
   -------------------------------------------------------------------- */
section{ position: relative; z-index: 1; padding: 108px 0; }
.section-tight{ padding: 72px 0; }
.section-border-top{ border-top: 1px solid var(--line); }

.grid-2{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 57px; }
.grid-3{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px; }
.grid-4{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; }

@media (max-width: 940px){
  .grid-2{ grid-template-columns: minmax(0,1fr); gap: 32px; }
  .grid-3{ grid-template-columns: minmax(0,1fr); }
  .grid-4{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* --------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------- */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
  position: relative;
  transition: border-color .3s ease, transform .3s ease;
}
.card:hover{ border-color: var(--line-strong); transform: translateY(-3px); }

.card-holo{
  position: relative;
  border-radius: var(--radius);
  padding: 1px;
  background: var(--holo-soft);
}
.card-holo:hover{ background: var(--holo); }
.card-holo > .card-inner{
  background: var(--panel);
  border-radius: calc(var(--radius) - 1px);
  padding: 30px;
  height: 100%;
}

.service-code{
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: .12em;
}

/* --------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------- */
.hero{
  padding: 96px 0 80px;
  position: relative;
  overflow: hidden;
}
#hero-canvas{
  position: absolute; inset: 0;
  z-index: 0;
  opacity: .55;
}
.hero-inner{ position: relative; z-index: 2; max-width: 880px; }
.hero h1{
  font-size: clamp(38px, 6vw, 74px);
  margin: 22px 0 26px;
}
.hero-sub{
  font-size: 19px;
  color: var(--ink-dim);
  max-width: 620px;
  margin-bottom: 40px;
}
.hero-actions{ display:flex; gap: 16px; flex-wrap: wrap; align-items:center; }
.hero-meta{
  display:flex; gap: 34px; margin-top: 68px; flex-wrap: wrap;
  font-family: var(--f-mono);
}
.hero-meta div strong{
  display:block; font-family: var(--f-display); font-size: 26px; color: var(--ink);
}
.hero-meta div span{ font-size: 11px; color: var(--ink-faint); letter-spacing: .1em; text-transform: uppercase; }

/* --------------------------------------------------------------------
   Signal line (signature motif) — a vertical holographic spine
   used to mark transitions between sections on long pages
   -------------------------------------------------------------------- */
.signal{
  display:flex; align-items:center; gap: 18px;
  margin: 0 0 40px;
}
.signal-line{ flex:1; height:1px; background: var(--line); position: relative; }
.signal-line::after{
  content:"";
  position:absolute; top:-1px; inset-inline-start:0; width: 64px; height:2px;
  background: var(--holo);
}
.signal-node{
  width:8px; height:8px; transform: rotate(45deg);
  background: var(--holo); flex-shrink:0;
}

/* --------------------------------------------------------------------
   Marquee strip
   -------------------------------------------------------------------- */
.marquee{
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 22px 0; overflow: hidden; white-space: nowrap;
}
.marquee-track{
  display: inline-flex; gap: 48px;
  animation: scroll-left 32s linear infinite;
  font-family: var(--f-mono); font-size: 13px; letter-spacing: .1em;
  color: var(--ink-faint); text-transform: uppercase;
}
.marquee-track span{ display:flex; align-items:center; gap:48px; }
@keyframes scroll-left{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }

/* --------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------- */
footer{
  border-top: 1px solid var(--line);
  padding: 70px 0 34px;
  position: relative; z-index: 1;
}
.footer-grid{
  display:grid; grid-template-columns: 1.4fr repeat(3, minmax(0,1fr)); gap: 40px;
  margin-bottom: 56px;
}
.footer-col h4{
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 18px; font-weight: 500;
}
.footer-col a, .footer-col p{
  display:block; color: var(--ink-dim); font-size: 14px; margin-bottom: 12px; transition: color .2s ease;
}
.footer-col a:hover{ color: var(--cyan); }
.footer-bottom{
  display:flex; justify-content: space-between; align-items:center;
  padding-top: 28px; border-top: 1px solid var(--line);
  font-family: var(--f-mono); font-size: 12px; color: var(--ink-faint); flex-wrap: wrap; gap: 12px;
}
@media (max-width: 880px){
  .footer-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* --------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------- */
.field{ margin-bottom: 20px; }
.field label{
  display:block; font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 9px;
}
.field input, .field select, .field textarea{
  width:100%; background: rgba(255,255,255,.02); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); padding: 17px 18px; color: var(--ink);
  font-family: var(--f-body); font-size: 15px; transition: border-color .2s ease, box-shadow .2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,233,255,.12);
}
.field select{
  background-color: var(--panel);
  color: var(--ink);
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-dim) 50%), linear-gradient(135deg, var(--ink-dim) 50%, transparent 50%);
  /* Arabic (RTL) select: the field reads right-to-left, so the caret icon
     moves to the inline-end (left) side and the reserved padding follows it. */
  background-position: calc(0% + 22px) center, calc(0% + 16px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-inline-end: 42px;
  cursor: pointer;
}
/* Native dropdown popup: force readable colors on the option list itself,
   since options render outside our CSS cascade in most browsers */
.field select option{
  background-color: #0C0F1C;
  color: #EAEFFC;
}
.field select option:checked,
.field select option:hover,
.field select option:focus{
  background-color: #1A1F33;
  color: #00E9FF;
}
.field textarea{ resize: vertical; min-height: 110px; }
.field-row{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
@media (max-width:640px){ .field-row{ grid-template-columns: minmax(0,1fr); } }

/* --------------------------------------------------------------------
   Misc utility
   -------------------------------------------------------------------- */
.tag{
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--line-strong); border-radius: 999px; padding: 6px 13px; color: var(--ink-dim);
  display: inline-block;
}
.mt-8{ margin-top: 8px; } .mt-16{ margin-top:16px; } .mt-24{ margin-top:24px; } .mt-40{ margin-top:40px; } .mt-64{ margin-top:64px;}
.mb-16{ margin-bottom:16px; } .mb-24{ margin-bottom: 24px; }
.text-dim{ color: var(--ink-dim); }
.text-faint{ color: var(--ink-faint); }
.center{ text-align:center; margin-left:auto; margin-right:auto; }
.max-w-680{ max-width:680px; }
.max-w-760{ max-width:760px; }

.section-head{ max-width: 640px; margin-bottom: 56px; }
.section-head h2{ font-size: clamp(28px, 4vw, 42px); margin-top: 16px; }

.legal h2{ font-size: 22px; margin-top: 44px; margin-bottom: 14px; font-family: var(--f-display); }
.legal h3{ font-size: 16px; margin-top: 26px; margin-bottom: 10px; color: var(--ink); }
.legal p, .legal li{ color: var(--ink-dim); font-size: 15px; margin-bottom: 14px; }
.legal ul, .legal ol{ padding-left: 22px; }
.legal-updated{ font-family: var(--f-mono); font-size: 12px; color: var(--ink-faint); }

/* reveal-on-scroll */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Responsive video embed */
.video-wrap{
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); background: var(--panel);
}
.video-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* Portfolio entry — concept / philosophy / client need / etc. fact list */
.pf-card{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 30px;
}
.pf-note{
  display:inline-block; font-family: var(--f-mono); font-size: 11px; letter-spacing:.06em;
  color: var(--amber); border:1px solid rgba(255,193,94,.35); background: rgba(255,193,94,.08);
  border-radius: 999px; padding: 5px 12px; margin-top: 14px;
}
.pf-meta{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px 28px; margin: 0; margin-top: 22px;
  padding-top: 22px; border-top: 1px solid var(--line);
}
.pf-meta div dt{
  font-family: var(--f-mono); font-size: 10px; letter-spacing:.1em; text-transform:uppercase;
  color: var(--ink-faint);
}
.pf-meta div dd{
  margin: 5px 0 0; font-size: 15px; line-height:1.9; color: var(--ink-dim);
}
@media (max-width: 640px){ .pf-meta{ grid-template-columns: minmax(0,1fr); } }

/* Trusted-by client wordmark strip */
.logo-strip{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap: 20px 40px; padding-top: 8px;
}
.logo-strip span{
  font-family: var(--f-display); font-weight:600; font-size: 16px;
  color: var(--ink-faint); letter-spacing: .01em; white-space:nowrap;
  opacity: .85; transition: color .2s ease, opacity .2s ease;
}
.logo-strip span:hover{ color: var(--ink); opacity:1; }

/* FAQ accordion */
details summary{ user-select: none; }
details summary::-webkit-details-marker{ display: none; }
details summary::marker{ content: ""; }
details[open] summary span{ transform: rotate(45deg); transition: transform .2s ease; }
details summary span{ transition: transform .2s ease; }

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--cyan); outline-offset: 2px;
}

/* page hero (inner pages) */
.page-hero{ padding: 64px 0 40px; }
.page-hero h1{ font-size: clamp(32px, 5vw, 52px); margin-top: 18px; }

/* --------------------------------------------------------------------
   AI Video Ads page — hero visual grid + category filter chips
   -------------------------------------------------------------------- */
.hero-grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap: 66px; align-items:center; }
@media (max-width: 980px){ .hero-grid{ grid-template-columns: minmax(0,1fr); gap: 36px; } }

.hero-visual{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.hero-tile{
  position:relative; display:block; aspect-ratio: 16/9; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: var(--panel); overflow:hidden;
  transition: border-color .25s ease, transform .25s ease;
}
.hero-tile:hover{ border-color: var(--cyan); transform: translateY(-2px); }
.hero-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero-tile::before{
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(200deg, rgba(0,233,255,.30), transparent 62%);
  mix-blend-mode: screen; pointer-events:none;
}
.hero-tile:nth-child(2)::before{ background: linear-gradient(200deg, rgba(155,92,255,.34), transparent 62%); }
.hero-tile:nth-child(3)::before{ background: linear-gradient(200deg, rgba(255,62,201,.30), transparent 62%); }
.hero-tile:nth-child(4)::before{ background: linear-gradient(200deg, rgba(0,233,255,.24), transparent 62%); }
.hero-tile::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(180deg, rgba(5,6,11,0) 52%, rgba(5,6,11,.62) 100%);
}
.hero-tile-label{
  position:absolute; left:10px; bottom:8px; z-index:2; right:10px;
  font-family: var(--f-mono); font-size:10.5px; letter-spacing:.03em; color: var(--ink);
  text-shadow: 0 1px 6px rgba(0,0,0,.7); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hero-tile-play{ position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; }
.hero-tile-play span{
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: rgba(5,6,11,.55); border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(4px);
  transition: transform .2s ease;
}
.hero-tile:hover .hero-tile-play span{ transform: scale(1.1); }
@media (max-width: 640px){ .hero-visual{ max-width: 420px; margin: 0 auto; } }

.filters{ display:flex; flex-wrap:wrap; gap:10px; margin: 28px 0 36px; }
.chip{
  font-family: var(--f-mono); font-size: 12.5px; letter-spacing:.03em;
  padding: 12px 20px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: transparent; color: var(--ink-dim); cursor:pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.chip:hover{ border-color: var(--cyan); color: var(--ink); }
.chip[aria-pressed="true"]{
  border-color: transparent; color: #04050A; background: var(--holo); font-weight:600;
}
.pf-card[hidden]{ display:none; }

/* WhatsApp floating button */
.wa-float{
  position: fixed; bottom: 26px; inset-inline-end: 26px; z-index: 200;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--holo); display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 30px rgba(155,92,255,.5);
  transition: transform .25s ease;
}
.wa-float:hover{ transform: scale(1.08); }
.wa-float.hide{ transform: scale(0); pointer-events:none; }

/* --------------------------------------------------------------------
   Nav — Services dropdown
   -------------------------------------------------------------------- */
.nav-item-dropdown{ position:relative; display:flex; align-items:center; gap:4px; }
/* Invisible hover bridge across the visual gap between the nav item and the
   dropdown panel below it — without this, moving the mouse straight down
   from the label into the gap leaves both elements un-hovered and the menu
   closes before the cursor ever reaches it. */
.nav-item-dropdown::before{
  content:"";
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  width:560px; height:20px; z-index:119;
}
.nav-drop-caret-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; padding:0; margin:0; background:none; border:none;
  color:var(--ink-faint); cursor:pointer;
}
.nav-drop-caret{ font-size:10px; display:inline-block; transition: transform .2s ease; }
.nav-item-dropdown:hover .nav-drop-caret,
.nav-item-dropdown.is-open .nav-drop-caret,
.nav-item-dropdown:focus-within .nav-drop-caret{ transform: rotate(180deg); color: var(--cyan); }

.nav-dropdown{
  position:absolute; top:calc(100% + 20px); left:50%; transform:translateX(-50%) translateY(6px);
  width:300px; padding:10px; border-radius: var(--radius); border:1px solid var(--line-strong);
  background: rgba(9,11,19,.98); backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
  display:grid; grid-template-columns:1fr; gap:1px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index:120;
}
/* Grouped variant — two labeled columns for a longer service list */
.nav-dropdown.nav-dropdown-grouped{
  width:560px; grid-template-columns:1fr 1fr; column-gap:18px; row-gap:0;
}
.nav-dropdown-col{ display:flex; flex-direction:column; }
.nav-dropdown-heading{
  display:block; font-family:var(--f-mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-faint); padding:8px 14px 6px;
}
.nav-dropdown-grouped .nav-dropdown-all{ grid-column: 1 / -1; }
.nav-item-dropdown:hover .nav-dropdown,
.nav-item-dropdown:focus-within .nav-dropdown,
.nav-item-dropdown.is-open .nav-dropdown{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
}
.nav-dropdown a{
  display:block; padding:11px 14px; border-radius: var(--radius-sm);
  font-size:13.5px; color: var(--ink-dim); transition: background .15s ease, color .15s ease;
}
.nav-dropdown a:hover, .nav-dropdown a:focus-visible{ background: rgba(255,255,255,.05); color: var(--ink); }
.nav-dropdown-all{
  margin-top:5px; padding-top:14px !important; border-top:1px solid var(--line);
  font-family: var(--f-mono); font-size:11.5px !important; text-transform:uppercase;
  letter-spacing:.06em; color: var(--cyan) !important;
}

/* Mobile-only flat category links (AI Videos / AI Marketing) that replace the
   nested Services dropdown inside the slide-out menu on small screens — see
   the max-width:880px block below. Hidden on desktop. */
.nav-mobile-cat{ display:none; }

@media (max-width: 880px){
  /* The hover/caret-toggle dropdown pattern that works well on desktop is
     fragile inside a full-screen slide-out menu across mobile browsers
     (notably iOS Safari). Rather than patch that interaction, the whole
     Services dropdown cluster is hidden on mobile and replaced by two plain,
     always-tappable links (.nav-mobile-cat below) that need no JS at all. */
  .nav-item-dropdown{ display:none; }
  .nav-mobile-cat{ display:block; }
}

/* --------------------------------------------------------------------
   Lead form — inline success / error notices
   -------------------------------------------------------------------- */
.form-notice{
  display:none; margin-top:18px; padding:16px 18px; border-radius: var(--radius-sm);
  font-size:14.5px; line-height:2;
}
.form-notice.show{ display:block; }
.form-notice p{ margin:0; }
.form-notice-ok{ background: rgba(60,230,166,.08); border:1px solid rgba(60,230,166,.3); color: var(--ok); }
.form-notice-error{ background: rgba(255,92,122,.08); border:1px solid rgba(255,92,122,.3); color: var(--danger); }
.form-notice-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.form-notice-actions .btn{ padding:10px 18px; font-size:11.5px; }
.field.invalid input, .field.invalid select, .field.invalid textarea{ border-color: var(--danger); }
.field-error{ display:none; font-size:12px; color: var(--danger); margin-top:7px; }
.field.invalid .field-error{ display:block; }

/* --------------------------------------------------------------------
   Sticky mobile CTA bar
   -------------------------------------------------------------------- */
.sticky-cta{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:190;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
  background: rgba(6,7,14,.96); backdrop-filter: blur(16px) saturate(140%);
  border-top:1px solid var(--line-strong);
  gap:10px;
  transform: translateY(100%); transition: transform .25s ease;
}
.sticky-cta.show{ transform: translateY(0); }
.sticky-cta .btn{ flex:1; justify-content:center; padding:13px 14px; font-size:12px; }
@media (max-width: 640px){
  .sticky-cta{ display:flex; }
  .wa-float{ bottom: 88px; }
}

/* --------------------------------------------------------------------
   Arabic-edition additions — geometric pattern, page illustration,
   language switch, flags, and bidi helpers for embedded numerals.
   -------------------------------------------------------------------- */

/* Minimalist 8-point geometric star weave, drawn once as an inline SVG tile
   and repeated at very low opacity — a modern, corporate-appropriate nod to
   Islamic geometric pattern tradition without leaning on heavy ornamentation. */
.geo-pattern{
  position: relative;
  overflow: hidden;
}
.geo-pattern::before{
  content:"";
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%2300E9FF' stroke-width='1'%3E%3Cpath d='M60 4 L96 30 L96 90 L60 116 L24 90 L24 30 Z'/%3E%3Cpath d='M60 24 L80 38 L80 82 L60 96 L40 82 L40 38 Z'/%3E%3Cpath d='M0 60 L60 4 L120 60 L60 116 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 120px 120px;
  opacity: .04;
}
.geo-pattern > *{ position:relative; z-index:1; }

/* Per-page vector illustration — one placed on every page, depicting Gulf
   business/skyline motifs. SVGs are authored inline in each page (so they
   inherit currentColor / the holo palette) and just need a frame here. */
.page-illustration{
  display:flex; align-items:center; justify-content:center;
  margin: 0 auto;
}
.page-illustration svg{ width:100%; height:auto; max-width:100%; }

/* Language switch pill in the nav — links back to the English page */
.lang-switch{
  display:inline-flex; align-items:center; gap:8px;
  padding: 9px 16px; border-radius:999px; border:1px solid var(--line-strong);
  font-family: var(--f-mono); font-size:13px; color: var(--ink-dim);
  transition: all .3s ease-in-out;
}
.lang-switch:hover{ border-color: var(--cyan); color: var(--cyan); }

/* Flags used as inline glyphs beside country/region names */
.flag{ margin-inline-end:6px; font-size:1em; }

/* Numerals, phone numbers, and prices must stay LTR even inside an RTL
   sentence, or digit grouping and punctuation reorder incorrectly. */
.ltr-embed{ direction:ltr; unicode-bidi:plaintext; display:inline-block; }

/* Icon badge (Sharjah page style, reused site-wide) */
.rd-icon{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:14px;border:1px solid var(--line-strong);background:rgba(0,233,255,.06);color:var(--cyan);margin-bottom:16px;flex:0 0 auto}
.rd-icon svg{width:26px;height:26px}


.lang-switch{
  display:inline-flex; align-items:center; gap:8px;
  padding: 9px 16px; border-radius:999px; border:1px solid var(--line-strong);
  font-family: var(--f-mono); font-size:13px; color: var(--ink-dim);
  transition: all .3s ease-in-out;
}
.lang-switch:hover{ border-color: var(--cyan); color: var(--cyan); }
/* Phones and small tablets: keep the header on one line next to the menu button */
@media (max-width: 880px){
  .lang-switch{ padding:6px 10px; font-size:12px; white-space:nowrap; }
  .nav-cta{ gap:8px; }
  .logo small{ display:none; }
  .logo{ min-width:0; }
}

/* Client-name strip: long names wrap inside the strip instead of pushing the page wider on small phones */
.logo-strip span{ white-space: normal; max-width: 100%; text-align: center; }

/* Animated ticker: contain its paint so the moving text never adds scrollable width to the page */
.marquee{ contain: paint; }

/* Clip any stray horizontal overflow (e.g. the ticker) at page level without creating a scroll container */
html, body{ overflow-x: clip; }

/* Desktop header: keep every link on one line and make room for the EN/AR switch */
.site-nav .nav-links a{ white-space: nowrap; }
.site-nav .nav-inner{ gap: 16px; }
@media (min-width: 881px){
  .site-nav .nav-links{ gap: 22px; }
  .site-nav .nav-links > a, .site-nav .nav-item-dropdown > a{ font-size: 14px; }
  .site-nav .nav-cta{ gap: 10px; }
  .site-nav .lang-switch{ padding: 8px 12px; font-size: 12px; }
}
@media (min-width: 881px) and (max-width: 1240px){
  .site-nav .logo small{ display: none; }
  .site-nav .nav-links{ gap: 16px; }
  .site-nav .nav-links > a, .site-nav .nav-item-dropdown > a{ font-size: 13px; }
  .site-nav .nav-cta .btn{ padding: 12px 16px; font-size: 12px; }
}

/* Up to 1100px the full menu does not fit beside the logo and CTA, so use the same menu button as phones */
@media (max-width: 1100px){
  .site-nav .nav-links{
    display:none; flex-direction:column; position:fixed; top:66px; left:0; right:0;
    height: calc(100vh - 66px); height: calc(100dvh - 66px);
    background: rgba(6,7,14,.98); padding: 28px; gap: 26px; z-index: 95;
    border-top: 1px solid var(--line); overflow-y:auto;
  }
  .site-nav .nav-links.is-open{ display:flex; }
  .site-nav .nav-toggle{ display:flex; }
  .site-nav .nav-cta .btn{ display:none; }
  .site-nav .nav-links > a, .site-nav .nav-links > .nav-item-dropdown > a{ font-size: 16px; }
}

/* Desktop header CTA: keep the label on one line (Arabic and English) */
@media (min-width: 1101px){
  .site-nav .nav-cta .btn{ white-space: nowrap; padding: 12px 18px; }
}


/* Client logo wall (shared by homepage, clients and Sharjah pages) */
.logo-wall{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; }
.logo-wall .logo-tile{ background:#FFFFFF; border:1px solid rgba(0,0,0,.08); border-radius:10px; min-height:104px; padding:16px; display:flex; align-items:center; justify-content:center; }
.logo-wall .logo-tile img{ max-width:100%; max-height:76px; width:auto; height:auto; object-fit:contain; }