/* =============================================
   UNIQUE UNION — Pixel High-Contrast Design
   Fonts: Press Start 2P (EN) / Cairo (AR)
   ============================================= */

:root {
  --bg:     #000000;
  --bg2:    #0C0C0C;
  --bg3:    #111111;
  --fg:     #FFFFFF;
  --yellow: #FFE600;
  --cyan:   #00FFFF;
  --pink:   #FF2D78;
  --muted:  #555555;
  --border: #222222;

  /* Theme-aware tokens (overridden in light mode) */
  --text-soft:   #888888;                 /* secondary paragraph text */
  --on-accent:   #000000;                 /* text/icons on bright fills */
  --overlay:     rgba(0,0,0,0.65);        /* vignette */
  --scanline:    rgba(0,0,0,0.07);        /* global scanlines */
  --scanline2:   rgba(0,0,0,0.13);        /* trusted-by CRT lines */
  --nav-bg:      rgba(0,0,0,0.96);        /* scrolled nav background */
  --nav-overlay: rgba(0,0,0,0.97);        /* mobile menu overlay */
  --watermark:   rgba(255,255,255,0.03);  /* big ghost numbers */
  --faint-line:  rgba(255,255,255,0.06);  /* NDA bars */
  --faint-text:  rgba(255,255,255,0.08);  /* NDA ids */
  --dot:         rgba(255,255,255,0.05);  /* dot-matrix bg */
  --tb-sep:      #282828;                 /* partner separators */
  --logo-base:   brightness(0) invert(1); /* partner logo recolor */

  --font-en-h:    'Press Start 2P', monospace;
  --font-en-body: 'Share Tech Mono', monospace;
  --font-ar:      'Cairo', sans-serif;
}

/* === Light theme === */
:root[data-theme="light"] {
  --bg:     #F4F3EE;
  --bg2:    #E8E7DE;
  --bg3:    #FFFFFF;
  --fg:     #14140F;
  --yellow: #B88A00;   /* gold accent that stays legible on light */
  --cyan:   #0C8FA3;
  --pink:   #D6176A;
  --muted:  #6B6A5E;
  --border: #D4D3C8;

  --text-soft:   #5B5A50;
  --on-accent:   #000000;
  --overlay:     rgba(0,0,0,0.05);
  --scanline:    rgba(0,0,0,0.035);
  --scanline2:   rgba(0,0,0,0.05);
  --nav-bg:      rgba(244,243,238,0.92);
  --nav-overlay: rgba(244,243,238,0.98);
  --watermark:   rgba(0,0,0,0.05);
  --faint-line:  rgba(0,0,0,0.13);
  --faint-text:  rgba(0,0,0,0.22);
  --dot:         rgba(0,0,0,0.06);
  --tb-sep:      #C7C6BB;
  --logo-base:   brightness(0) invert(0);
}

/* === Reset === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-en-body);
  font-size: 14px;
  line-height: 1.8;
  overflow-x: hidden;
  max-width: 100%;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.35s ease, color 0.35s ease;
}
@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
}
body.lang-ar { font-family: var(--font-ar); font-size: 16px; }
body.loading { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { border: none; background: none; cursor: pointer; color: inherit; font-family: inherit; }

/* === Arabic font overrides === */
.lang-ar .section__title,
.lang-ar .section__desc,
.lang-ar .section__label,
.lang-ar .hero__badge,
.lang-ar .hero__sub,
.lang-ar .glitch span,
.lang-ar .hero__title-accent span,
.lang-ar .scard__title,
.lang-ar .scard__desc,
.lang-ar .about__text,
.lang-ar .about__val span:last-child,
.lang-ar .stat-box__l,
.lang-ar .hstat__l,
.lang-ar .pcard__title,
.lang-ar .pcard__desc,
.lang-ar .tcard__name,
.lang-ar .tcard__role,
.lang-ar .tcard__bio,
.lang-ar .testi__quote,
.lang-ar .testi__name,
.lang-ar .testi__company,
.lang-ar .contact__text,
.lang-ar .form-group label,
.lang-ar .form-group input,
.lang-ar .form-group textarea,
.lang-ar .cdetail a,
.lang-ar .cdetail span,
.lang-ar .footer__desc,
.lang-ar .footer__col h4,
.lang-ar .footer__col a,
.lang-ar .footer__bottom,
.lang-ar .nav__link,
.lang-ar .btn,
.lang-ar .ctrl-btn,
.lang-ar .lang-btn,
.lang-ar .form-success { font-family: var(--font-ar); letter-spacing: 0; }

/* Always keep pixel font for code/logo/numbers */
.nav__logo, .footer__logo, .terminal, .terminal *,
.stat-box__n, .stat-box__suf, .loader__logo,
.glitch, .hero__title-accent { font-family: var(--font-en-h) !important; }

/* Arabic overrides for those */
.lang-ar .glitch span,
.lang-ar .hero__title-accent span { font-family: var(--font-ar) !important; font-size: clamp(28px,5vw,56px); font-weight: 800; letter-spacing: 0; }
.lang-ar .hero__badge { font-family: var(--font-ar); font-size: 15px; font-weight: 700; }

/* === Container === */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* === Effects === */
.scanlines {
  position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, var(--scanline) 2px, var(--scanline) 4px);
}
.vignette {
  position: fixed; inset: 0; z-index: 9997; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, var(--overlay) 100%);
}

/* === Loader === */
.loader {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.4s, visibility 0.4s;
}
.loader.hidden { opacity: 0; visibility: hidden; }
.loader__inner { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.loader__logo {
  font-family: var(--font-en-h);
  font-size: 36px; color: var(--yellow);
  text-shadow: 4px 4px 0 rgba(255,230,0,0.2);
  animation: px-flicker 3s infinite;
}
.loader__msg { font-family: var(--font-en-body); font-size: 12px; color: var(--muted); letter-spacing: 3px; }
.loader__bar { width: 220px; height: 14px; border: 2px solid var(--fg); background: var(--bg); }
.loader__fill {
  height: 100%; background: var(--yellow); width: 0%;
  animation: loader-fill 1.5s steps(22) forwards;
}
.loader__pct { font-family: var(--font-en-h); font-size: 10px; color: var(--yellow); }

@keyframes loader-fill { from { width: 0%; } to { width: 100%; } }
@keyframes px-flicker { 0%,96%,100%{opacity:1;} 97%{opacity:0.3;} 98%{opacity:1;} 99%{opacity:0.5;} }

/* === Animations === */
.cursor-blink { animation: blink 1s steps(1) infinite; }
.blink-dot    { animation: blink 1.5s steps(1) infinite; color: var(--yellow); }
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0;} }

/* === Nav === */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 14px 0;
  border-bottom: 2px solid transparent;
  transition: background 0.2s, border-color 0.2s;
}
.nav.scrolled { background: var(--nav-bg); border-bottom-color: var(--border); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.nav__container {
  max-width: 1200px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.nav__logo {
  font-family: var(--font-en-h) !important;
  font-size: 13px; color: var(--yellow); letter-spacing: 2px;
  display: flex; align-items: center; gap: 3px;
}
.nav__logo:hover { text-shadow: 0 0 12px var(--yellow); }
.nav__bracket { color: var(--fg); }
.nav__links { display: flex; align-items: center; gap: 20px; }
.nav__link {
  font-family: var(--font-en-h); font-size: 8px; letter-spacing: 1px;
  color: var(--muted); position: relative;
}
.lang-ar .nav__link { font-size: 14px; font-weight: 700; }
.nav__link::after {
  content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px;
  background: var(--yellow); transition: width 0.15s steps(4);
}
.nav__link:hover, .nav__link.active { color: var(--yellow); }
.nav__link:hover::after, .nav__link.active::after { width: 100%; }

.nav__right { display: flex; align-items: center; gap: 14px; }
.lang-toggle { display: flex; align-items: center; gap: 6px; font-family: var(--font-en-h); font-size: 8px; }
.lang-sep { color: var(--muted); }
.lang-btn { padding: 4px 8px; border: 2px solid var(--border); color: var(--muted); font-family: inherit; font-size: inherit; }
.lang-btn.active, .lang-btn:hover { border-color: var(--yellow); color: var(--yellow); }

/* Theme toggle (segmented: light / dark / system) */
.theme-toggle { display: flex; align-items: center; gap: 4px; }
.theme-btn {
  width: 28px; height: 26px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--border); color: var(--muted);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.theme-btn svg { width: 15px; height: 15px; display: block; }
.theme-btn:hover { color: var(--fg); border-color: var(--muted); }
.theme-btn.active { border-color: var(--yellow); color: var(--yellow); }
.nav__toggle { display: none; flex-direction: column; gap: 5px; z-index: 1001; padding: 4px; }
.nav__toggle span { width: 22px; height: 2px; background: var(--fg); }
.nav__toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.nav__toggle.active span:nth-child(2) { opacity: 0; }
.nav__toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

/* === Buttons === */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-en-h); font-size: 9px; letter-spacing: 1px;
  padding: 12px 22px; border: 2px solid transparent;
  cursor: pointer; white-space: nowrap; position: relative;
}
.lang-ar .btn { font-size: 14px; font-weight: 700; padding: 12px 24px; }
.btn--primary { background: var(--yellow); color: var(--on-accent); border-color: var(--yellow); }
.btn--primary:hover { background: var(--bg); color: var(--yellow); box-shadow: 4px 4px 0 var(--yellow); transform: translate(-2px,-2px); }
.btn--outline { background: transparent; color: var(--fg); border-color: var(--fg); }
.btn--outline:hover { border-color: var(--yellow); color: var(--yellow); box-shadow: 4px 4px 0 var(--yellow); transform: translate(-2px,-2px); }
.btn--lg { padding: 15px 30px; font-size: 10px; }
.lang-ar .btn--lg { font-size: 15px; }
.btn--sm { padding: 8px 14px; font-size: 8px; }
.btn--full { width: 100%; justify-content: center; }
.nav-cta { padding: 8px 14px; font-size: 8px; }
.lang-ar .nav-cta { font-size: 13px; }

/* === Hero === */
.hero {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden; padding: 120px 24px 80px; background: var(--bg);
}
.hero__canvas { position: absolute; inset: 0; z-index: 0; }

.hero__corner {
  position: absolute; width: 28px; height: 28px; z-index: 2;
  border-color: rgba(255,230,0,0.2); border-style: solid; pointer-events: none;
}
.hero__corner--tl { top: 40px; left: 40px; border-width: 3px 0 0 3px; }
.hero__corner--tr { top: 40px; right: 40px; border-width: 3px 3px 0 0; }
.hero__corner--bl { bottom: 40px; left: 40px; border-width: 0 0 3px 3px; }
.hero__corner--br { bottom: 40px; right: 40px; border-width: 0 3px 3px 0; }

.hero__content { position: relative; z-index: 10; text-align: center; max-width: 900px; }

.hero__badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-en-h); font-size: 8px; letter-spacing: 2px;
  color: var(--yellow); border: 2px solid rgba(255,230,0,0.3);
  padding: 8px 18px; margin-bottom: 36px;
}

/* Glitch */
.glitch {
  font-family: var(--font-en-h) !important;
  font-size: clamp(20px,3.5vw,40px); letter-spacing: 2px;
  color: var(--fg); position: relative; display: inline-block;
  animation: glitch-move 6s steps(1) infinite;
}
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  font-family: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit;
}
.glitch::before {
  color: var(--pink);
  clip-path: polygon(0 0, 100% 0, 100% 40%, 0 40%);
  animation: g1 6s steps(1) infinite;
}
.glitch::after {
  color: var(--cyan);
  clip-path: polygon(0 58%, 100% 58%, 100% 100%, 0 100%);
  animation: g2 6s steps(1) infinite;
}

@keyframes glitch-move {
  0%,88%,100%{transform:translate(0);}
  89%{transform:translate(-3px,1px);}
  90%{transform:translate(3px,-1px);}
  91%{transform:translate(0);}
  92%{transform:translate(2px,0);}
  93%{transform:translate(-1px,2px);}
  94%{transform:translate(0);}
}
@keyframes g1 {
  0%,88%,100%{transform:translate(0);opacity:0;}
  89%{transform:translate(-5px,2px);opacity:1;}
  90%{transform:translate(5px,-2px);opacity:1;}
  91%{transform:translate(0);opacity:0;}
  92%{transform:translate(-4px,0);opacity:0.7;}
  93%{transform:translate(0);opacity:0;}
}
@keyframes g2 {
  0%,88%,100%{transform:translate(0);opacity:0;}
  89%{transform:translate(5px,-2px);opacity:1;}
  90%{transform:translate(-5px,2px);opacity:1;}
  91%{transform:translate(0);opacity:0;}
  93%{transform:translate(3px,0);opacity:0.6;}
  94%{transform:translate(0);opacity:0;}
}

.hero__title { display: block; font-weight: inherit; font-size: inherit; }
.hero__title-accent {
  display: block;
  font-family: var(--font-en-h) !important;
  font-size: clamp(20px,3.5vw,40px); letter-spacing: 2px;
  color: var(--yellow);
  text-shadow: 0 0 16px rgba(255,230,0,0.5), 4px 4px 0 rgba(255,230,0,0.2);
  animation: glow-p 2.5s steps(4) infinite;
  margin-top: 10px;
}
@keyframes glow-p {
  0%,100%{text-shadow: 0 0 16px rgba(255,230,0,0.5), 4px 4px 0 rgba(255,230,0,0.2);}
  50%{text-shadow: 0 0 30px rgba(255,230,0,0.7), 4px 4px 0 rgba(255,230,0,0.3);}
}

.hero__sub {
  font-size: 13px; color: var(--text-soft); max-width: 560px;
  margin: 20px auto 32px; line-height: 1.9;
}
.lang-ar .hero__sub { font-size: 17px; line-height: 2; }
.lang-ar .hero { padding-bottom: 140px; }

.hero__actions { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; margin-bottom: 44px; }

.hero__stats {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap;
  border: 2px solid var(--border); padding: 14px 28px;
  width: fit-content; max-width: 100%; margin: 0 auto;
  box-sizing: border-box;
}
.hstat { display: flex; flex-direction: column; align-items: center; }
.hstat__n { font-family: var(--font-en-h); font-size: 16px; }
.hstat__n em { color: var(--yellow); font-style: normal; }
.hstat__l { font-size: 8px; color: var(--muted); letter-spacing: 2px; margin-top: 4px; }
.lang-ar .hstat__l { font-size: 11px; }
.hstat__sep { color: var(--border); font-size: 20px; padding: 0 4px; }

.hero__scroll-ind {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 10;
}
.hero__scroll-ind span { font-size: 8px; letter-spacing: 4px; color: var(--muted); }
.scroll-pipe { width: 2px; height: 44px; background: var(--border); position: relative; overflow: hidden; }
.scroll-pipe::after {
  content: ''; position: absolute; top: -100%; left: 0; width: 100%; height: 100%;
  background: var(--yellow); animation: spipe 2s steps(12) infinite;
}
@keyframes spipe { from{top:-100%;} to{top:100%;} }

/* === Marquee === */
.marquee {
  overflow: hidden; background: var(--yellow);
  border-top: 3px solid var(--fg); border-bottom: 3px solid var(--fg); padding: 12px 0;
}
.marquee__track {
  display: flex; align-items: center;
  animation: mq 24s linear infinite; width: max-content;
}
.marquee__track span {
  font-family: var(--font-en-h); font-size: 9px; font-weight: 900;
  letter-spacing: 3px; text-transform: uppercase; color: var(--on-accent); padding: 0 12px; white-space: nowrap;
}
.lang-ar .marquee { direction: ltr; }
.lang-ar .marquee__track span { font-family: var(--font-ar); font-size: 13px; font-weight: 800; }
.msep { color: rgba(0,0,0,0.25) !important; }
@keyframes mq { from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* === Sections === */
.section { padding: 100px 0; overflow-x: hidden; }
.section--alt { background: var(--bg2); border-top: 2px solid var(--border); border-bottom: 2px solid var(--border); }
.section__header { text-align: center; margin-bottom: 56px; }
.section__label {
  display: block; font-family: var(--font-en-h); font-size: 9px;
  letter-spacing: 3px; color: var(--yellow); margin-bottom: 14px;
}
.lang-ar .section__label { font-size: 14px; font-weight: 700; }
.section__title {
  font-family: var(--font-en-h); font-size: clamp(16px,2.8vw,26px);
  letter-spacing: 1px; line-height: 1.5; margin-bottom: 14px;
}
.lang-ar .section__title { font-size: clamp(24px,4vw,38px); font-weight: 800; letter-spacing: 0; }
.section__desc { font-size: 13px; color: var(--text-soft); max-width: 480px; margin: 0 auto; }
.lang-ar .section__desc { font-size: 16px; }

/* === Services === */
.services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; border: 2px solid var(--border); }
.scard {
  background: var(--bg3); padding: 30px; border: 1px solid var(--border); position: relative;
}
.scard:hover { background: var(--bg); border-color: var(--yellow); transform: translate(-3px,-3px); box-shadow: 6px 6px 0 var(--yellow); }
.scard__num { font-family: var(--font-en-h); font-size: 8px; color: var(--muted); margin-bottom: 18px; }
.scard__icon { color: var(--yellow); margin-bottom: 14px; }
.scard__title { font-family: var(--font-en-h); font-size: 10px; letter-spacing: 1px; margin-bottom: 10px; line-height: 1.6; }
.lang-ar .scard__title { font-size: 16px; font-weight: 700; letter-spacing: 0; }
.scard__desc { font-size: 12px; color: var(--text-soft); line-height: 1.8; }
.lang-ar .scard__desc { font-size: 14px; }

/* === About === */
.about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.about__grid > * { min-width: 0; }
.about__left .section__label, .about__left .section__title { text-align: start; }
.about__text { color: var(--text-soft); line-height: 1.9; margin-bottom: 28px; font-size: 13px; }
.lang-ar .about__text { font-size: 16px; }
.about__values { display: flex; flex-direction: column; gap: 12px; }
.about__val { font-family: var(--font-en-h); font-size: 9px; letter-spacing: 1px; display: flex; align-items: center; gap: 10px; }
.lang-ar .about__val { font-size: 15px; font-weight: 700; letter-spacing: 0; }
.accent-y { color: var(--yellow); }

/* Terminal */
.terminal { background: #0D1117; border: 2px solid var(--border); margin-bottom: 20px; font-family: var(--font-en-h) !important; direction: ltr; text-align: left; width: 100%; max-width: 100%; }
.terminal__bar {
  background: #161B22; padding: 10px 14px;
  display: flex; align-items: center; gap: 8px;
  border-bottom: 2px solid var(--border);
}
.terminal__dots { display: flex; gap: 6px; }
.terminal__dots span { width: 10px; height: 10px; display: block; }
.terminal__dots span:nth-child(1) { background: #FF5F57; }
.terminal__dots span:nth-child(2) { background: #FEBC2E; }
.terminal__dots span:nth-child(3) { background: #28C840; }
.terminal__title { font-size: 9px; color: var(--muted); margin-left: 8px; }
.terminal__body { padding: 18px 20px; overflow-x: auto; }
.terminal__body pre { font-size: 11px; line-height: 1.9; }
.terminal__body code { font-family: inherit; }
.ck{color:#FF7B72;} .cv{color:#79C0FF;} .ck2{color:#D2A8FF;} .cs{color:var(--yellow);} .cn{color:#FFA657;} .cf{color:#D2A8FF;} .cc{color:var(--muted);}

/* Stats */
.about__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; border: 2px solid var(--border); }
.stat-box {
  background: var(--bg3); padding: 22px; display: flex; flex-direction: column;
  align-items: center; border: 1px solid var(--border); text-align: center;
}
.stat-box:hover { background: rgba(255,230,0,0.03); border-color: var(--yellow); }
.stat-box__n { font-family: var(--font-en-h); font-size: 28px; line-height: 1; }
.stat-box__suf { font-family: var(--font-en-h); font-size: 18px; }
.stat-box__l { font-size: 8px; color: var(--muted); letter-spacing: 2px; margin-top: 8px; }
.lang-ar .stat-box__l { font-size: 13px; }

/* === Portfolio === */
.portfolio__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; border: 2px solid var(--border); }
.pcard {
  background: var(--bg3); border: 1px solid var(--border);
  position: relative; overflow: hidden;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.pcard::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  opacity: 0.6; transition: opacity 0.2s;
}
.pcard::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent, transparent 3px, rgba(0,0,0,0.03) 3px, rgba(0,0,0,0.03) 4px);
}
.pcard--1::before { background: linear-gradient(90deg, #003366, #0066cc); }
.pcard--2::before { background: linear-gradient(90deg, #330066, #6600cc); }
.pcard--3::before { background: linear-gradient(90deg, #003333, #006666); }
.pcard--4::before { background: linear-gradient(90deg, #333300, #666600); }
.pcard:hover { border-color: var(--yellow); }
.pcard:hover::before { opacity: 1; }
.pcard__num {
  font-family: var(--font-en-h); font-size: 64px; color: var(--watermark);
  position: absolute; top: 10px; right: 16px; line-height: 1; z-index: 0;
  transition: color 0.2s;
}
[dir="rtl"] .pcard__num { right: auto; left: 16px; }
.pcard:hover .pcard__num { color: rgba(255,230,0,0.06); }
.pcard__body { padding: 28px 22px; position: relative; z-index: 1; }
.pcard__title { font-family: var(--font-en-h); font-size: 11px; margin-bottom: 8px; letter-spacing: 1px; }
.pcard__desc { font-size: 12px; color: var(--text-soft); margin-bottom: 12px; line-height: 1.7; }
.lang-ar .pcard__desc { font-size: 14px; }
.pcard__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pcard__tags span { font-family: var(--font-en-body); font-size: 10px; padding: 3px 8px; border: 1px solid var(--border); color: var(--muted); }
.pcard:hover .pcard__tags span { border-color: rgba(255,230,0,0.3); color: var(--yellow); }
/* NDA row */
.pcard--nda {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; gap: 20px;
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}
.pcard--nda::before {
  display: block; height: 100%; width: 3px; top: 0; left: 0; right: auto;
  background: var(--pink); opacity: 0; transition: opacity 0.3s;
}
.pcard--nda::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, transparent, transparent 3px, rgba(0,0,0,0.03) 3px, rgba(0,0,0,0.03) 4px),
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,45,120,0.01) 2px, rgba(255,45,120,0.01) 3px);
}
[dir="rtl"] .pcard--nda::before { left: auto; right: 0; }
.pcard--nda:hover {
  border-color: rgba(255,45,120,0.4);
  background: rgba(255,45,120,0.03);
  box-shadow: inset 0 0 30px rgba(255,45,120,0.03);
  animation: nda-deny 0.4s ease;
}
.pcard--nda:hover::before { opacity: 1; }
@keyframes nda-deny {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-3px); }
  30% { transform: translateX(3px); }
  45% { transform: translateX(-2px); }
  60% { transform: translateX(1px); }
  75% { transform: translateX(-1px); }
}
.nda__rows { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.nda__entry {
  display: flex; align-items: center; gap: 10px;
  transition: opacity 0.3s;
}
.pcard--nda:hover .nda__entry:nth-child(1) { animation: nda-flicker 1.5s infinite 0s; }
.pcard--nda:hover .nda__entry:nth-child(2) { animation: nda-flicker 1.5s infinite 0.3s; }
.pcard--nda:hover .nda__entry:nth-child(3) { animation: nda-flicker 1.5s infinite 0.6s; }
@keyframes nda-flicker {
  0%, 100% { opacity: 1; }
  4% { opacity: 0.3; }
  6% { opacity: 1; }
  48% { opacity: 1; }
  50% { opacity: 0.4; }
  52% { opacity: 1; }
}
.nda__id {
  font-family: var(--font-en-h); font-size: 8px;
  color: var(--faint-text); min-width: 20px;
  transition: color 0.3s;
}
.nda__bar {
  height: 6px; border-radius: 1px;
  background: repeating-linear-gradient(90deg, var(--faint-line) 0px, var(--faint-line) 4px, transparent 4px, transparent 6px);
  width: 120px; transition: background 0.3s, box-shadow 0.3s;
}
.nda__bar--med { width: 80px; }
.nda__bar--short { width: 50px; }
.pcard--nda:hover .nda__bar {
  background: repeating-linear-gradient(90deg, rgba(255,45,120,0.18) 0px, rgba(255,45,120,0.18) 4px, transparent 4px, transparent 6px);
  box-shadow: 0 0 6px rgba(255,45,120,0.1);
}
.pcard--nda:hover .nda__id { color: rgba(255,45,120,0.3); }
.nda__badge {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-en-h); font-size: 7px; letter-spacing: 2px;
  color: var(--muted); white-space: nowrap;
  border: 1px solid var(--border); padding: 8px 14px;
  transition: border-color 0.3s, color 0.3s, box-shadow 0.3s;
}
.nda__lock { color: var(--muted); flex-shrink: 0; transition: color 0.3s; }
.pcard--nda:hover .nda__badge {
  border-color: rgba(255,45,120,0.5); color: var(--pink);
  box-shadow: 0 0 12px rgba(255,45,120,0.15), inset 0 0 8px rgba(255,45,120,0.05);
}
.pcard--nda:hover .nda__lock { color: var(--pink); }
.lang-ar .nda__badge { font-size: 11px; letter-spacing: 0; }
[dir="rtl"] .pcard--nda { flex-direction: row-reverse; }

/* === Team === */
.team__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; border: 2px solid var(--border); }
.tcard {
  background: var(--bg3); padding: 28px 18px;
  border: 1px solid var(--border); text-align: center;
}
.tcard:hover { border-color: var(--yellow); transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--yellow); }
.tcard__avatar {
  width: 68px; height: 68px; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px; font-family: var(--font-en-h); font-size: 16px;
  color: var(--on-accent); border: 3px solid var(--fg);
}
.tcard:hover .tcard__avatar { border-color: var(--yellow); }
.tcard__avatar--1 { background: var(--yellow); }
.tcard__avatar--2 { background: var(--cyan); }
.tcard__avatar--3 { background: var(--pink); }
.tcard__avatar--4 { background: #00FF9F; }
.tcard__name { font-family: var(--font-en-h); font-size: 9px; letter-spacing: 1px; margin-bottom: 6px; line-height: 1.6; }
.lang-ar .tcard__name { font-size: 15px; font-weight: 800; letter-spacing: 0; }
.tcard__role { font-size: 9px; color: var(--yellow); display: block; margin-bottom: 10px; }
.lang-ar .tcard__role { font-size: 12px; }
.tcard__bio { font-size: 11px; color: var(--text-soft); line-height: 1.7; margin-bottom: 14px; }
.lang-ar .tcard__bio { font-size: 13px; }
.tcard__social { display: flex; justify-content: center; gap: 8px; }
.tcard__social a { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); color: var(--muted); }
.tcard__social a:hover { border-color: var(--yellow); color: var(--yellow); }
.tcard--more {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: center;
  gap: 18px; color: var(--muted); flex-wrap: wrap;
}
.tcard--more:hover { transform: none; box-shadow: none; border-color: var(--border); }
.tmore__avatars { display: flex; }
.tmore__av {
  width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-en-h); font-size: 13px; color: var(--on-accent);
  border: 2px solid var(--bg3); margin-inline-start: -12px;
}
.tmore__av:first-child { margin-inline-start: 0; }
.tmore__av--count { background: var(--yellow); }
.tcard__more-text { font-size: 13px; letter-spacing: 1px; }
.lang-ar .tcard__more-text { font-size: 15px; letter-spacing: 0; }

/* === Testimonials === */
.testimonials__wrap { max-width: 700px; margin: 0 auto; }
.testimonials__slider { position: relative; min-height: 230px; }
.testi {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  transition: opacity 0.3s steps(4);
  background: var(--bg3); border: 2px solid var(--border); padding: 32px;
}
.testi.active { opacity: 1; pointer-events: auto; }
.testi__mark { font-family: var(--font-en-h); font-size: 40px; color: var(--yellow); line-height: 1; margin-bottom: 8px; }
.testi__quote { font-size: 13px; line-height: 1.9; color: var(--fg); margin-bottom: 22px; }
.lang-ar .testi__quote { font-size: 16px; }
.testi__author { display: flex; align-items: center; gap: 12px; }
.testi__avatar { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-en-h); font-size: 11px; background: var(--yellow); color: var(--on-accent); border: 2px solid var(--fg); }
.testi__info { flex: 1; }
.testi__name { display: block; font-size: 11px; font-weight: 700; }
.lang-ar .testi__name { font-size: 15px; }
.testi__company { display: block; font-size: 10px; color: var(--muted); }
.lang-ar .testi__company { font-size: 12px; }
.testi__stars { color: var(--yellow); font-size: 13px; letter-spacing: 2px; margin-left: auto; }
[dir="rtl"] .testi__stars { margin-left: 0; margin-right: auto; }
.testimonials__ctrl { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 20px; }
.ctrl-btn { font-family: var(--font-en-h); font-size: 9px; letter-spacing: 1px; color: var(--muted); padding: 8px 12px; border: 1px solid var(--border); }
.ctrl-btn:hover { border-color: var(--yellow); color: var(--yellow); }
.lang-ar .ctrl-btn { font-size: 12px; }
.testimonials__dots { display: flex; gap: 8px; }
.dot { width: 12px; height: 12px; background: var(--border); padding: 0; }
.dot.active { background: var(--yellow); }

/* === Trusted By === */
.trusted-by {
  position: relative;
  overflow: hidden;
  background: var(--bg2);
  border-top: 2px solid var(--border);
  border-bottom: 2px solid var(--border);
}
/* Accent glow lines on top/bottom edges */
.trusted-by::before,
.trusted-by::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent 0%, var(--yellow) 30%, var(--cyan) 70%, transparent 100%);
  opacity: 0.35;
  z-index: 1;
}
.trusted-by::before { top: 0; }
.trusted-by::after  { bottom: 0; }
.trusted-by__inner {
  position: relative;
  padding: 30px 0 26px;
}
/* Dot matrix background */
.trusted-by__inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--dot) 1px, transparent 1px);
  background-size: 18px 18px;
  pointer-events: none;
  z-index: 0;
}
/* CRT scanlines */
.trusted-by__scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    var(--scanline2) 3px,
    var(--scanline2) 4px
  );
  pointer-events: none;
  z-index: 4;
}
/* Corner brackets */
.tb-corner {
  position: absolute;
  font-family: var(--font-en-h);
  font-size: 11px;
  color: var(--yellow);
  line-height: 1;
  z-index: 5;
  opacity: 0.55;
}
.tb-corner--tl { top: 8px;    left: 18px; }
.tb-corner--tr { top: 8px;    right: 18px; }
.tb-corner--bl { bottom: 8px; left: 18px; }
.tb-corner--br { bottom: 8px; right: 18px; }
/* Header row */
.trusted-by__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-bottom: 18px;
  position: relative;
  z-index: 3;
}
/* Live indicator */
.tb-live {
  font-family: var(--font-en-h);
  font-size: 6px;
  letter-spacing: 2px;
  color: #00ff88;
  display: flex;
  align-items: center;
  gap: 7px;
}
.tb-live__dot {
  width: 6px;
  height: 6px;
  background: #00ff88;
  flex-shrink: 0;
  animation: tb-blink 1.1s steps(1) infinite;
  box-shadow: 0 0 8px #00ff88, 0 0 18px rgba(0,255,136,0.25);
}
@keyframes tb-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
/* Section label */
.trusted-by__label {
  font-family: var(--font-en-h);
  font-size: 8px;
  letter-spacing: 3px;
  color: var(--fg);
}
.lang-ar .trusted-by__label { font-size: 13px; letter-spacing: 1px; }
.lang-ar .tb-live { font-family: var(--font-ar); font-size: 11px; letter-spacing: 0; }
.lang-ar .tb-count { font-family: var(--font-ar); font-size: 11px; letter-spacing: 0; }
/* Partner count */
.tb-count {
  font-family: var(--font-en-h);
  font-size: 6px;
  letter-spacing: 1px;
  color: var(--muted);
}
/* Dual tracks */
.trusted-by__tracks {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  z-index: 3;
  direction: ltr;
}
.trusted-by__track-wrap {
  overflow: hidden;
  direction: ltr;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}
.trusted-by__track {
  display: flex;
}
.tb-track--fwd { animation: tb-fwd 26s linear infinite; }
.tb-track--rev { animation: tb-rev 26s linear infinite; }
.trusted-by__track.is-paused { animation-play-state: paused; }
.trusted-by__items {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  min-width: 100vw;
  flex-shrink: 0;
}
/* Partner name pills */
.tb-item {
  font-family: var(--font-en-h);
  font-size: 8px;
  letter-spacing: 2px;
  padding: 7px 30px;
  white-space: nowrap;
  cursor: default;
  position: relative;
}
.tb-item--yellow { color: var(--yellow); text-shadow: 0 0 10px rgba(255,230,0,0.45); }
.tb-item--cyan   { color: var(--cyan);   text-shadow: 0 0 10px rgba(0,255,255,0.45); }
.tb-item--pink   { color: var(--pink);   text-shadow: 0 0 10px rgba(255,45,120,0.45); }
/* RGB glitch on hover / tap */
.tb-item:hover, .tb-item.is-active { animation: tb-glitch 0.22s steps(1) infinite; }
@keyframes tb-glitch {
  0%   { transform: none;          text-shadow:  2px 0 var(--cyan),   -2px 0 var(--pink); }
  25%  { transform: skewX(-4deg);  text-shadow: -2px 0 var(--yellow),  2px 0 var(--cyan); }
  50%  { transform: skewX(3deg);   text-shadow:  2px 0 var(--pink),   -2px 0 var(--yellow); }
  75%  { transform: skewX(-1deg);  text-shadow: -2px 0 var(--cyan),    2px 0 var(--yellow); }
  100% { transform: none;          text-shadow:  2px 0 var(--yellow), -2px 0 var(--pink); }
}
.tb-logo {
  height: 44px;
  width: auto;
  object-fit: contain;
  padding: 0 30px;
  flex-shrink: 0;
  filter: var(--logo-base);
  opacity: 0.65;
  transition: opacity 0.25s, filter 0.25s;
}
.tb-logo:hover, .tb-logo.is-active {
  opacity: 1;
  animation: img-glitch 0.22s steps(1) infinite;
}
@keyframes img-glitch {
  0%   { filter: var(--logo-base) drop-shadow( 2px 0 0 var(--cyan))   drop-shadow(-2px 0 0 var(--pink));   transform: none; }
  25%  { filter: var(--logo-base) drop-shadow(-3px 0 0 var(--yellow)) drop-shadow( 3px 0 0 var(--cyan));   transform: skewX(-4deg) translateX(2px); }
  50%  { filter: var(--logo-base) drop-shadow( 3px 0 0 var(--pink))   drop-shadow(-3px 0 0 var(--yellow)); transform: skewX(3deg)  translateX(-1px); }
  75%  { filter: var(--logo-base) drop-shadow(-2px 0 0 var(--cyan))   drop-shadow( 2px 0 0 var(--yellow)); transform: skewX(-1deg); }
  100% { filter: var(--logo-base) drop-shadow( 2px 0 0 var(--yellow)) drop-shadow(-2px 0 0 var(--pink));   transform: none; }
}
.tb-sep { color: var(--tb-sep); font-size: 7px; flex-shrink: 0; }
@keyframes tb-fwd {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes tb-rev {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* === Contact === */
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.contact__info .section__label, .contact__info .section__title { text-align: start; }
.contact__text { color: var(--text-soft); line-height: 1.9; margin-bottom: 28px; font-size: 13px; }
.lang-ar .contact__text { font-size: 16px; }
.contact__details { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.cdetail { display: flex; align-items: center; gap: 12px; }
.cdetail__icon { font-size: 16px; color: var(--yellow); width: 24px; flex-shrink: 0; }
.cdetail a, .cdetail span { font-size: 12px; color: var(--text-soft); }
.lang-ar .cdetail a, .lang-ar .cdetail span { font-size: 15px; }
.cdetail a:hover { color: var(--yellow); }
.contact__social { display: flex; gap: 8px; flex-wrap: wrap; }
.social-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-en-body); font-size: 11px; letter-spacing: 1px;
  padding: 8px 12px; border: 1px solid var(--border); color: var(--muted);
}
.social-pill:hover { border-color: var(--yellow); color: var(--yellow); }

.contact__form { background: var(--bg3); border: 2px solid var(--border); padding: 32px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.form-group label { font-family: var(--font-en-h); font-size: 8px; letter-spacing: 2px; color: var(--muted); }
.lang-ar .form-group label { font-size: 13px; font-weight: 700; letter-spacing: 0; }
.form-group input, .form-group textarea {
  background: var(--bg); border: 2px solid var(--border); padding: 11px 13px;
  font-family: var(--font-en-body); font-size: 13px; color: var(--fg); outline: none; resize: vertical;
}
.lang-ar .form-group input, .lang-ar .form-group textarea { font-size: 15px; }
.form-group input:focus, .form-group textarea:focus { border-color: var(--yellow); box-shadow: 0 0 0 2px rgba(255,230,0,0.08); }
.form-group textarea { min-height: 110px; }
.contact__form .btn { margin-top: 4px; }
.form-success {
  display: none; align-items: center; gap: 10px; margin-top: 14px; padding: 12px;
  border: 2px solid var(--yellow); background: rgba(255,230,0,0.04);
  font-family: var(--font-en-h); font-size: 8px; letter-spacing: 1px; color: var(--yellow);
  animation: slide-in 0.2s steps(3);
}
.lang-ar .form-success { font-size: 14px; letter-spacing: 0; }
.form-success.show { display: flex; }
@keyframes slide-in { from{transform:translateX(-8px);opacity:0;} to{transform:translateX(0);opacity:1;} }

/* === Footer === */
.footer { background: var(--bg2); border-top: 3px solid var(--border); padding: 60px 0 0; }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; }
.footer__logo { font-family: var(--font-en-h) !important; font-size: 11px; color: var(--yellow); margin-bottom: 14px; display: block; }
.footer__desc { font-size: 12px; color: var(--muted); line-height: 1.8; max-width: 240px; }
.lang-ar .footer__desc { font-size: 14px; }
.footer__social { display: flex; gap: 8px; margin-top: 18px; }
.footer__social a { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); color: var(--muted); }
.footer__social a:hover { border-color: var(--yellow); color: var(--yellow); }
.footer__col h4 { font-family: var(--font-en-h); font-size: 8px; letter-spacing: 2px; color: var(--fg); margin-bottom: 18px; }
.lang-ar .footer__col h4 { font-size: 15px; font-weight: 800; letter-spacing: 0; }
.footer__col a { display: block; font-size: 11px; color: var(--muted); margin-bottom: 10px; }
.lang-ar .footer__col a { font-size: 13px; }
.footer__col a:hover { color: var(--yellow); }
.footer__bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0; border-top: 2px solid var(--border);
  font-family: var(--font-en-h); font-size: 7px; letter-spacing: 1px; color: var(--muted);
}
.lang-ar .footer__bottom { font-size: 12px; }

/* === Back to top === */
.back-to-top {
  position: fixed; bottom: 24px; right: 24px;
  font-family: var(--font-en-h); font-size: 9px; letter-spacing: 1px;
  padding: 10px 14px; border: 2px solid var(--border); color: var(--yellow);
  background: var(--bg); z-index: 900;
  opacity: 0; visibility: hidden; transform: translateY(12px);
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { border-color: var(--yellow); box-shadow: 3px 3px 0 var(--yellow); transform: translate(-2px,-2px); }

/* === Scroll animations === */
[data-animate] { opacity: 0; transition: opacity 0.6s ease, transform 0.6s ease; }
[data-animate="fade-up"]   { transform: translateY(20px); }
[data-animate="fade-left"] { transform: translateX(20px); clip-path: inset(0 -1px 0 0); }
[data-animate="fade-right"]{ transform: translateX(-20px); clip-path: inset(0 0 0 -1px); }
[data-animate="scale-up"]  { transform: scale(0.95); }
[data-animate].visible     { opacity: 1; transform: none; clip-path: none; }

/* === Responsive === */
@media (max-width: 1024px) {
  .services__grid { grid-template-columns: repeat(2, 1fr); }
  .team__grid { grid-template-columns: repeat(2, 1fr); }
  .about__grid { grid-template-columns: 1fr; gap: 40px; }
  .contact__grid { grid-template-columns: 1fr; gap: 40px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 768px) {
  .nav__links {
    position: fixed; inset: 0; background: var(--nav-overlay);
    flex-direction: column; align-items: center; justify-content: center;
    gap: 28px; opacity: 0; visibility: hidden;
  }
  .nav__links.active { opacity: 1; visibility: visible; }
  .nav__links .nav__link { font-size: 11px; }
  .lang-ar .nav__links .nav__link { font-size: 18px; }
  .nav__toggle { display: flex; }
  .nav-cta { display: none; }
  .nav__right { gap: 8px; }
  .theme-toggle { gap: 3px; }
  .theme-btn { width: 26px; height: 24px; }
  .theme-btn svg { width: 13px; height: 13px; }
  .hero { padding: 100px 20px 60px; }
  .hero__corner { display: none; }
  .hero__scroll-ind { display: none; }
  .services__grid { grid-template-columns: 1fr; }
  .portfolio__grid { grid-template-columns: 1fr; }
  .pcard--nda { flex-direction: column; align-items: stretch; gap: 14px; }
  [dir="rtl"] .pcard--nda { flex-direction: column; }
  .nda__badge { align-self: flex-end; }
  [dir="rtl"] .nda__badge { align-self: flex-start; }
  .nda__bar { width: min(120px, 40%); }
  .nda__bar--med { width: min(80px, 28%); }
  .nda__bar--short { width: min(50px, 18%); }
  .team__grid { grid-template-columns: 1fr 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; gap: 8px; }
  .testimonials__slider { min-height: unset; }
  .testi { position: relative; inset: unset; display: none; padding: 22px 16px; }
  .testi.active { display: block; }
}
@media (max-width: 480px) {
  .team__grid { grid-template-columns: 1fr; }
  .hero__actions { flex-direction: column; width: 100%; }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .contact__form { padding: 20px 14px; }
  .hstat__sep { display: none; }
}