/* ===== VARIABLES ===== */
:root {
  --navy: #0d1526;
  --blue: #2563eb;
  --violet: #7c3aed;
  --sky: #06b6d4;
  --soft: #e8f0ff;
  --muted: #6b7a99;
  --line: rgba(37,99,235,0.10);
  --shadow: 0 8px 32px rgba(37,99,235,0.08);
  --shadow-lg: 0 20px 60px rgba(37,99,235,0.14);
  --grad: linear-gradient(135deg,#2563eb,#7c3aed);
  --grad-text: linear-gradient(90deg,#2563eb,#06b6d4);
  --card: rgba(255,255,255,0.96);
  --radius: 20px;
  --radius-lg: 28px;
}

/* ===== RESET ===== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; overflow-x:hidden; }
a { text-decoration:none; color:inherit; }
img { display:block; max-width:100%; }

/* ===== BASE ===== */
body {
  font-family:'Inter','Tajawal',sans-serif;
  background: linear-gradient(160deg,#f7f9ff 0%,#eef4ff 45%,#f3efff 100%);
  color:var(--navy);
  overflow-x:hidden;
  min-height:100vh;
  font-size:15px;
  -webkit-font-smoothing:antialiased;
}

/* Arabic font override */
[dir="rtl"] body,
[dir="rtl"] { font-family:'Tajawal','Inter',sans-serif; }
[dir="rtl"] .hero { text-align:right; }
[dir="rtl"] .hero-actions { flex-direction:row-reverse; }
[dir="rtl"] .eyebrow { text-align:right; }
[dir="rtl"] .nav-wrap { flex-direction:row-reverse; }
[dir="rtl"] .nav-links { flex-direction:row-reverse; }
[dir="rtl"] .nav-actions { flex-direction:row-reverse; }
[dir="rtl"] .hero p { margin-right:0; }

.container { width:min(1260px,92%); margin:auto; }

/* ===== BACKGROUND ORBS ===== */
#webgl { position:fixed; inset:0; z-index:-1; opacity:0.32; }

.bg-orb {
  position:fixed;
  border-radius:50%;
  pointer-events:none;
  z-index:-1;
  filter:blur(80px);
  max-width:100vw;
  overflow:hidden;
}
.orb-1 {
  width:600px; height:600px;
  background:radial-gradient(circle,rgba(37,99,235,0.14) 0%,transparent 70%);
  top:-150px; right:-100px;
  animation:orbFloat 12s ease-in-out infinite;
}
.orb-2 {
  width:450px; height:450px;
  background:radial-gradient(circle,rgba(124,58,237,0.12) 0%,transparent 70%);
  top:40%; left:-80px;
  animation:orbFloat 16s ease-in-out infinite reverse;
}
.orb-3 {
  width:380px; height:380px;
  background:radial-gradient(circle,rgba(6,182,212,0.1) 0%,transparent 70%);
  top:60%; left:50%;
  animation:orbFloat 20s ease-in-out infinite;
}
@keyframes orbFloat {
  0%,100% { transform:translateY(0) scale(1); }
  50% { transform:translateY(-40px) scale(1.06); }
}

/* ===== HEADER ===== */
.site-header {
  position:fixed; width:100%; top:0; z-index:100;
  background:rgba(248,251,255,0.84);
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  border-bottom:1px solid rgba(37,99,235,0.08);
  box-shadow:0 2px 30px rgba(37,99,235,0.05);
  transition:background 0.3s;
}
.nav-wrap {
  height:90px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.brand {
  font-size:22px; font-weight:900; letter-spacing:-0.8px;
  display:flex; align-items:center; gap:2px;
}
.brand span {
  background:var(--grad);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.nav-logo {
  height:62px;
  width:auto;
  max-width:220px;
  display:block;
  object-fit:contain;
  flex-shrink:0;
}
.nav-links {
  display:flex; gap:26px;
  font-weight:600; font-size:13.5px; color:var(--muted);
}
.nav-links a { position:relative; transition:color 0.2s; padding-bottom:3px; }
.nav-links a::after {
  content:'';
  position:absolute;
  bottom:0; left:0; width:100%; height:2px;
  background:var(--grad);
  border-radius:2px;
  transform:scaleX(0); transform-origin:left;
  transition:transform 0.25s;
}
.nav-links a:hover { color:var(--blue); }
.nav-links a:hover::after { transform:scaleX(1); }

.nav-actions { display:flex; align-items:center; gap:12px; }

/* ===== HAMBURGER ===== */
.hamburger {
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:40px; height:40px;
  background:none; border:none;
  cursor:pointer;
  padding:6px;
  border-radius:10px;
  transition:background 0.2s;
}
.hamburger:hover { background:rgba(37,99,235,0.07); }
.hamburger span {
  display:block;
  width:22px; height:2.5px;
  background:var(--navy);
  border-radius:3px;
  transition:transform 0.3s, opacity 0.3s;
}
.hamburger.open span:nth-child(1) { transform:translateY(7.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-7.5px) rotate(-45deg); }

/* ===== MOBILE OVERLAY ===== */
.mobile-overlay {
  position:fixed; inset:0;
  background:rgba(10,20,60,0.45);
  z-index:199;
  opacity:0; visibility:hidden;
  transition:opacity 0.3s, visibility 0.3s;
}
.mobile-overlay.open { opacity:1; visibility:visible; }

/* ===== MOBILE SIDEBAR ===== */
.mobile-nav {
  position:fixed;
  top:0; right:0;
  width:min(300px, 85vw);
  height:100%;
  background:#fff;
  z-index:200;
  padding:80px 28px 40px;
  display:flex;
  flex-direction:column;
  gap:2px;
  transform:translateX(100%);
  transition:transform 0.35s cubic-bezier(0.4,0,0.2,1);
  box-shadow:-6px 0 50px rgba(37,99,235,0.13);
  overflow-y:auto;
}
[dir="rtl"] .mobile-nav {
  right:auto; left:0;
  transform:translateX(-100%);
  box-shadow:6px 0 50px rgba(37,99,235,0.13);
}
.mobile-nav.open { transform:translateX(0); }
[dir="rtl"] .mobile-nav.open { transform:translateX(0); }

.mobile-nav a {
  font-size:17px; font-weight:600;
  color:var(--navy);
  padding:15px 0;
  border-bottom:1px solid rgba(37,99,235,0.07);
  text-decoration:none;
  transition:color 0.2s;
}
.mobile-nav a:hover { color:var(--blue); }
.mobile-nav-cta {
  margin-top:20px;
  text-align:center;
  padding:14px 20px !important;
  border-radius:12px !important;
  border-bottom:none !important;
}

.mobile-nav-close {
  position:absolute;
  top:20px; right:18px;
  background:none; border:none;
  font-size:20px; cursor:pointer;
  color:var(--muted);
  width:36px; height:36px;
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  transition:color 0.2s, background 0.2s;
}
[dir="rtl"] .mobile-nav-close { right:auto; left:18px; }
.mobile-nav-close:hover { color:var(--navy); background:rgba(37,99,235,0.07); }

.lang-toggle {
  display:flex; align-items:center; gap:7px;
  padding:9px 17px;
  border-radius:999px;
  background:rgba(37,99,235,0.06);
  border:1.5px solid rgba(37,99,235,0.15);
  color:var(--blue);
  font-weight:700; font-size:13.5px;
  cursor:pointer;
  transition:all 0.25s;
  font-family:inherit;
  white-space:nowrap;
}
.lang-toggle:hover {
  background:var(--grad);
  color:white;
  border-color:transparent;
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(37,99,235,0.28);
}
.lang-icon { font-size:15px; }

.nav-cta {
  padding:9px 20px;
  border-radius:999px;
  background:var(--grad);
  color:white;
  font-weight:700; font-size:13px;
  box-shadow:0 6px 20px rgba(37,99,235,0.25);
  transition:all 0.3s;
  white-space:nowrap;
}
.nav-cta:hover {
  transform:translateY(-3px);
  box-shadow:0 14px 38px rgba(37,99,235,0.42);
}

/* ===== SECTIONS ===== */
.section-pad { padding:110px 0; }
.compact { padding-top:24px; }
.tinted {
  background:linear-gradient(180deg,rgba(240,246,255,0.65),rgba(232,241,255,0.88));
}

/* ===== HERO ===== */
.hero {
  min-height:100vh;
  display:flex; align-items:center;
  padding-top:120px;
  position:relative;
}
.hero-grid {
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:72px;
  align-items:center;
}
.eyebrow {
  display:inline-flex;
  padding:7px 15px;
  border-radius:999px;
  background:rgba(37,99,235,0.06);
  border:1.5px solid rgba(37,99,235,0.14);
  color:var(--blue);
  font-weight:700; font-size:11.5px;
  margin-bottom:22px;
  letter-spacing:0.3px;
  text-transform:uppercase;
}
.hero h1 {
  font-size:clamp(30px,3.8vw,54px);
  line-height:1.08;
  letter-spacing:-1.8px;
  font-weight:800;
  margin-bottom:22px;
}
.hero h1 span {
  background:var(--grad-text);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero p {
  color:var(--muted);
  line-height:1.85; font-size:15px;
  margin-bottom:36px;
  max-width:500px;
}
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; }
.centered { justify-content:center; }

/* ===== BUTTONS ===== */
.btn {
  padding:12px 26px;
  border-radius:14px;
  font-weight:700; font-size:13.5px;
  transition:all 0.28s;
  cursor:pointer; border:none;
  display:inline-flex; align-items:center; gap:7px;
  white-space:nowrap;
  letter-spacing:0.1px;
}
.btn-primary {
  background:var(--grad);
  color:white;
  box-shadow:0 14px 42px rgba(37,99,235,0.28);
}
.btn-primary:hover {
  transform:translateY(-5px);
  box-shadow:0 22px 55px rgba(37,99,235,0.42);
}
.btn-soft {
  background:white;
  border:1.5px solid rgba(37,99,235,0.18);
  color:var(--navy);
  box-shadow:0 4px 18px rgba(37,99,235,0.06);
}
.btn-soft:hover {
  transform:translateY(-5px);
  border-color:var(--blue);
  color:var(--blue);
  box-shadow:0 14px 35px rgba(37,99,235,0.14);
}
.btn-ghost {
  background:rgba(255,255,255,0.1);
  border:1.5px solid rgba(255,255,255,0.2);
  color:white;
  backdrop-filter:blur(8px);
}
.btn-ghost:hover {
  background:rgba(255,255,255,0.18);
  border-color:rgba(255,255,255,0.35);
  transform:translateY(-4px);
  box-shadow:0 14px 35px rgba(0,0,0,0.2);
}

/* ===== HERO MOCKUP IMAGE ===== */
.hero-mockup-img {
  width:100%;
  max-width:780px;
  border-radius:var(--radius-lg);
  display:block;
  filter:drop-shadow(0 30px 60px rgba(37,99,235,0.25));
}
/* ===== GLASS DEVICE ===== */
.hero-visual { animation:floatDevice 6s ease-in-out infinite; }
@keyframes floatDevice {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-16px); }
}
.glass-device {
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.85);
  box-shadow:0 30px 90px rgba(37,99,235,0.2), inset 0 1px 0 rgba(255,255,255,0.7);
  position:relative;
}
.glass-device::before {
  content:'';
  position:absolute;
  width:320px; height:320px;
  background:radial-gradient(circle,rgba(56,189,248,0.22) 0%,transparent 70%);
  top:-100px; right:-100px;
  pointer-events:none;
}
.device-top {
  height:48px;
  background:linear-gradient(90deg,#111c34,#0d1829);
  display:flex; align-items:center; gap:8px; padding:0 18px;
}
.device-top span {
  width:12px; height:12px;
  border-radius:50%; background:#ef4444;
}
.device-top span:nth-child(2) { background:#f59e0b; }
.device-top span:nth-child(3) { background:#22c55e; }
.device-body {
  background:linear-gradient(145deg,#0f172a 0%,#1a2744 100%);
  color:white;
  min-height:420px;
  padding:36px;
  position:relative;
}
.system-chip {
  display:inline-flex;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(56,189,248,0.12);
  border:1px solid rgba(56,189,248,0.22);
  color:#7dd3fc;
  font-weight:700; font-size:13px;
  margin-bottom:22px;
}
.device-body h2 {
  font-size:28px; line-height:1.2;
  margin-bottom:14px;
  letter-spacing:-1px; font-weight:800;
}
.device-body p { color:#94a3b8; line-height:1.8; font-size:15px; }
.mini-metrics {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px; margin-top:28px;
}
.mini-metrics div {
  padding:18px;
  border-radius:18px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
  transition:background 0.25s;
}
.mini-metrics div:hover { background:rgba(255,255,255,0.1); }
.mini-metrics strong {
  display:block;
  color:#38bdf8;
  font-size:26px; font-weight:900;
  margin-bottom:4px;
}
.mini-metrics small { color:#94a3b8; font-size:13px; }

/* ===== SECTION TITLE ===== */
.section-title {
  text-align:center;
  max-width:820px;
  margin:0 auto 64px;
}
.section-title small {
  color:var(--blue);
  font-weight:800; font-size:12px;
  letter-spacing:3.5px;
  text-transform:uppercase;
  display:inline-flex; align-items:center; gap:10px;
}
.section-title small::before,
.section-title small::after {
  content:'';
  display:inline-block;
  width:28px; height:2px;
  background:var(--grad);
  border-radius:2px;
}
.section-title h2 {
  font-size:clamp(26px,3vw,40px);
  margin:12px 0 16px;
  letter-spacing:-1px; font-weight:800;
  line-height:1.1;
}
.section-title p { color:var(--muted); font-size:15px; line-height:1.85; }

/* ===== METRICS ===== */
.metrics {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;
}
.metric-card {
  background:white;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:30px 24px;
  text-align:center;
  box-shadow:var(--shadow);
  transition:all 0.35s;
  position:relative;
  overflow:hidden;
}
.metric-icon {
  font-size:28px;
  margin-bottom:16px;
  display:block;
}
.metric-card::before {
  content:'';
  position:absolute; inset:0;
  background:var(--grad);
  opacity:0; transition:opacity 0.35s;
}
.metric-card:hover { transform:translateY(-10px); box-shadow:var(--shadow-lg); }
.metric-card:hover::before { opacity:1; }
.metric-card:hover strong,
.metric-card:hover span,
.metric-card:hover .metric-icon { color:white; background:none; -webkit-text-fill-color:white; position:relative; }
.metric-card strong {
  display:block;
  font-size:36px; font-weight:900;
  background:var(--grad);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  margin-bottom:8px;
  position:relative;
  transition:all 0.35s;
  line-height:1;
}
.metric-card span { color:var(--muted); font-size:13.5px; position:relative; transition:color 0.35s; }

/* ===== CAPABILITIES ===== */
.capability-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:24px;
}
.cap-card {
  padding:28px;
  border-radius:var(--radius);
  background:white;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  transition:all 0.35s;
  position:relative;
  overflow:hidden;
}
.cap-card::after {
  content:'';
  position:absolute;
  bottom:0; left:0; right:0;
  height:3px;
  background:var(--grad);
  transform:scaleX(0);
  transition:transform 0.35s;
  border-radius:0 0 3px 3px;
}
.cap-card:hover {
  transform:translateY(-10px);
  box-shadow:var(--shadow-lg);
  border-color:rgba(37,99,235,0.2);
}
.cap-card:hover::after { transform:scaleX(1); }
.cap-icon {
  width:52px; height:52px;
  border-radius:16px;
  display:grid; place-items:center;
  background:linear-gradient(135deg,rgba(37,99,235,0.07),rgba(124,58,237,0.07));
  font-size:22px;
  margin-bottom:18px;
  border:1px solid rgba(37,99,235,0.09);
}
.cap-card h3 { font-size:17px; margin-bottom:10px; letter-spacing:-0.2px; font-weight:700; }
.cap-card p { color:var(--muted); line-height:1.78; font-size:13.5px; }

/* ===== CAPABILITIES V2 ===== */
.cap-v2 { background: transparent; }

.cap-badge-pill {
  display:inline-flex;
  align-items:center;
  padding:8px 18px;
  border-radius:999px;
  background:rgba(37,99,235,0.07);
  border:1.5px solid rgba(37,99,235,0.15);
  color:var(--blue);
  font-weight:700; font-size:12px;
  letter-spacing:0.5px;
  margin-bottom:18px;
}

.cap-v2 .section-title h2 span {
  background:var(--grad-text);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* Hero row: two large featured cards */
.cap-hero-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-bottom:20px;
}
.cap-hero-card {
  background:linear-gradient(135deg,#eef3ff 0%,#f0ecff 100%);
  border:1px solid rgba(37,99,235,0.1);
  border-radius:var(--radius-lg);
  padding:36px;
  display:flex;
  align-items:center;
  gap:24px;
  position:relative;
  overflow:hidden;
  transition:all 0.35s;
}
.cap-hero-card:hover {
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
  border-color:rgba(37,99,235,0.2);
}
.cap-num {
  position:absolute;
  top:18px; left:24px;
  font-size:13px; font-weight:800;
  color:rgba(37,99,235,0.25);
  letter-spacing:1px;
}
[dir="rtl"] .cap-num { left:auto; right:24px; }

.cap-hero-body { flex:1; }
.cap-hero-body h3 {
  font-size:20px; font-weight:800;
  letter-spacing:-0.4px;
  margin-bottom:12px; margin-top:20px;
  color:var(--navy);
}
.cap-hero-body p {
  color:var(--muted);
  font-size:13.5px;
  line-height:1.78;
  margin-bottom:20px;
}
.cap-detail-btn {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:10px 20px;
  background:var(--grad);
  color:white;
  font-weight:700; font-size:13px;
  border-radius:999px;
  transition:all 0.25s;
  text-decoration:none;
  white-space:nowrap;
}
.cap-detail-btn:hover {
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(37,99,235,0.3);
}
.cap-hero-img {
  width:160px;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}
.cap-hero-img img {
  width:100%;
  height:120px;
  object-fit:contain;
  filter:drop-shadow(0 8px 20px rgba(37,99,235,0.15));
}
.cap-pay-logos {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
}
.pay-logo-stripe, .pay-logo-urway {
  padding:4px 10px;
  border-radius:6px;
  background:white;
  font-weight:800; font-size:11px;
  color:#635bff;
  box-shadow:0 2px 8px rgba(0,0,0,0.08);
}
.pay-logo-urway { color:#0057a8; }

/* Four smaller cards */
.cap-four-row {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-bottom:16px;
}
.cap-sm-card {
  background:linear-gradient(135deg,#eef3ff 0%,#f0ecff 100%);
  border:1px solid rgba(37,99,235,0.1);
  border-radius:var(--radius);
  padding:24px 20px;
  position:relative;
  transition:all 0.35s;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.cap-sm-card:hover {
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
  border-color:rgba(37,99,235,0.2);
}
.cap-sm-icon {
  font-size:26px;
  margin-top:14px;
  margin-bottom:4px;
  width:48px; height:48px;
  display:flex; align-items:center; justify-content:center;
}
.cap-sm-icon img {
  width:48px; height:48px;
  object-fit:contain;
}
.cap-sm-card h4 {
  font-size:15px; font-weight:800;
  letter-spacing:-0.2px;
  color:var(--navy);
  line-height:1.3;
}
.cap-sm-card p {
  color:var(--muted);
  font-size:12.5px;
  line-height:1.72;
  flex:1;
}

/* Three bottom cards */
.cap-three-row {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-bottom:32px;
}
.cap-bot-card {
  background:linear-gradient(135deg,#eef3ff 0%,#f0ecff 100%);
  border:1px solid rgba(37,99,235,0.1);
  border-radius:var(--radius);
  padding:24px 20px;
  position:relative;
  transition:all 0.35s;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.cap-bot-card:hover {
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
  border-color:rgba(37,99,235,0.2);
}
.cap-bot-card h4 {
  font-size:15px; font-weight:800;
  letter-spacing:-0.2px;
  color:var(--navy);
  line-height:1.3;
}
.cap-bot-card p {
  color:var(--muted);
  font-size:12.5px;
  line-height:1.72;
  flex:1;
}
.cap-n8n-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px; height:48px;
  border-radius:12px;
  background:linear-gradient(135deg,#ea4b71,#ff6d00);
  color:white;
  font-weight:900; font-size:14px;
  margin-top:14px; margin-bottom:4px;
  letter-spacing:-0.5px;
}

/* Quality badges bar */
.cap-quality-bar {
  display:flex;
  justify-content:center;
  gap:32px;
  flex-wrap:wrap;
  padding:24px 0 8px;
  border-top:1px solid var(--line);
}
.cap-qual-item {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px; font-weight:700;
  color:var(--muted);
}
.cap-qual-item span:first-child {
  color:var(--blue);
  font-size:15px;
}

/* ===== PROJECTS ===== */

/* Category badge */
.pcat {
  display:inline-block;
  padding:4px 11px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.3px;
  text-transform:uppercase;
}
.pcat.erp        { background:rgba(37,99,235,0.1);  color:#2563eb; }
.pcat.payments   { background:rgba(124,58,237,0.1); color:#7c3aed; }
.pcat.healthcare { background:rgba(17,116,166,0.1); color:#1174a6; }
.pcat.events     { background:rgba(234,88,12,0.1);  color:#ea580c; }
.pcat.crm        { background:rgba(79,70,229,0.1);  color:#4f46e5; }
.pcat.automation { background:rgba(8,145,178,0.1);  color:#0891b2; }
.pcat.automotive { background:rgba(71,85,105,0.1);  color:#475569; }
.pcat.realestate  { background:rgba(180,120,0,0.12);  color:#92600a; }
.pcat.ai          { background:rgba(16,185,129,0.1);   color:#059669; }
.pcat.recruitment { background:rgba(27,62,122,0.1);   color:#1b3e7a; }
.pcat.b2b         { background:rgba(212,168,0,0.12);  color:#8a6a00; }
.pcat.enterprise  { background:rgba(253,71,13,0.1);   color:#c43500; }
.pcat.mery        { background:rgba(22,163,74,0.1);   color:#15803d; }
.pcat.education   { background:rgba(20,100,180,0.12); color:#1464b4; }
.pcat.food        { background:rgba(220,38,38,0.1);   color:#dc2626; }
.pcat.ecommerce   { background:rgba(13,148,136,0.1);  color:#0d9488; }
.pcat.delivery    { background:rgba(217,119,6,0.12);  color:#b45309; }
.pcat.websites    { background:rgba(60,75,150,0.1);   color:#3c4b96; }
.pcat.automotive  { background:rgba(249,115,22,0.12); color:#c2410c; }

/* ── Numbered project cards (pv2) ── */
.pv2-row {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-bottom:20px;
}
.pv2-card {
  background:white;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:var(--shadow);
  transition:all 0.35s;
  position:relative;
}
.pv2-card:hover {
  transform:translateY(-7px);
  box-shadow:var(--shadow-lg);
  border-color:rgba(37,99,235,0.22);
}
.pv2-top {
  padding:22px 22px 16px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.pv2-num-wrap {
  display:flex;
  align-items:center;
  gap:10px;
}
.pv2-num {
  width:36px; height:36px;
  border-radius:10px;
  background:var(--grad);
  color:white;
  font-size:13px;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.pv2-top h3 {
  font-size:16px;
  font-weight:800;
  color:var(--navy);
  margin:0;
  letter-spacing:-0.3px;
  line-height:1.3;
}
.pv2-top > p {
  font-size:12.5px;
  color:var(--muted);
  line-height:1.65;
  margin:0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.pv2-link {
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:12.5px;
  font-weight:700;
  color:var(--blue);
  text-decoration:none;
  margin-top:2px;
  transition:gap 0.2s;
}
.pv2-link:hover { gap:9px; text-decoration:underline; }

/* Screenshot area */
.pv2-screen {
  flex:1;
  min-height:210px;
  background:linear-gradient(135deg,#f0f5ff 0%,#e8eeff 100%);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.pv2-screen img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 0.5s;
}
.pv2-card:hover .pv2-screen img { transform:scale(1.04); }

/* Footer */
.pv2-foot {
  padding:13px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
}
.pv2-country {
  font-size:11.5px;
  color:var(--muted);
  font-weight:600;
  white-space:nowrap;
}

.pv2-card.reveal { transition:opacity 0.7s ease, transform 0.7s ease; }
.pv2-card.reveal:nth-child(2) { transition-delay:0.12s; }
.pv2-card.reveal:nth-child(3) { transition-delay:0.24s; }

/* CTA row (reused) */
.proj-cta {
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
  padding-top:8px;
}
.btn-outline {
  padding:12px 26px;
  border-radius:14px;
  border:1.5px solid var(--blue);
  color:var(--blue);
  font-size:13.5px;
  font-weight:700;
  text-decoration:none;
  transition:all 0.22s;
}
.btn-outline:hover { background:var(--blue); color:white; }

/* Preserve .tags used across cards */
.tags { display:flex; gap:8px; flex-wrap:wrap; }
.tags span {
  padding:5px 11px;
  border-radius:999px;
  background:rgba(37,99,235,0.07);
  color:var(--blue);
  font-size:11.5px; font-weight:700;
}

/* Filter tabs (used on projects.html) */
.proj-filters { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:32px; }
.pf-btn {
  padding:8px 20px;
  border-radius:999px;
  border:1.5px solid var(--line);
  background:white;
  color:var(--muted);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:all 0.22s;
}
.pf-btn:hover { border-color:var(--blue); color:var(--blue); }
.pf-btn.active { background:var(--blue); border-color:var(--blue); color:white; }




/* ===== COUNTRIES SLIDER ===== */
#countries { background: #f0f6ff; }
.country-slider-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  isolation: isolate;
}
.country-slider-viewport {
  flex: 1;
  overflow: hidden;
  border-radius: 26px;
  background: transparent;
  position: relative;
  z-index: 1;
}
.country-slider-track {
  display: flex;
  direction: ltr; /* always LTR so cards flow left-to-right regardless of page dir */
  gap: 20px;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.country-card {
  flex: 0 0 200px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 32px 18px 24px;
  text-align: center;
  box-shadow: var(--shadow);
  transition: all 0.35s;
  cursor: default;
}
.country-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(37,99,235,0.22);
}
.country-card img {
  width: 80px; height: 54px;
  object-fit: cover;
  border-radius: 10px;
  margin: 0 auto 16px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.13);
  display: block;
}
.country-card span { display:block; font-weight:800; font-size:14px; color:var(--navy); }

/* Slider Buttons */
.slider-btn {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: white;
  color: var(--blue);
  font-size: 20px;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: all 0.25s;
  display: flex; align-items: center; justify-content: center;
}
.slider-btn:hover {
  background: var(--grad);
  color: white;
  border-color: transparent;
  box-shadow: var(--shadow-lg);
  transform: scale(1.1);
}
.slider-btn:disabled { opacity: 0.35; cursor: default; transform: none; }

/* Dots */
.slider-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}
.slider-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--line);
  border: none;
  cursor: pointer;
  transition: all 0.25s;
  padding: 0;
}
.slider-dot.active {
  background: var(--blue);
  width: 24px;
  border-radius: 4px;
}

/* RTL flip arrows */
[dir="rtl"] .slider-prev { order: 1; transform: scaleX(-1); }
[dir="rtl"] .slider-next { order: -1; transform: scaleX(-1); }
[dir="rtl"] .slider-prev:hover { transform: scaleX(-1) scale(1.1); }
[dir="rtl"] .slider-next:hover { transform: scaleX(-1) scale(1.1); }

/* ===== TECH CLOUD ===== */
.tech-cloud { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.tech-pill {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 20px;
  border-radius:999px;
  background:white;
  border:1px solid var(--line);
  box-shadow:0 4px 16px rgba(37,99,235,0.07);
  font-weight:700; font-size:13.5px;
  transition:all 0.25s;
  cursor:default;
  color:var(--navy);
}
.tech-pill:hover {
  background:var(--grad);
  color:white;
  border-color:transparent;
  transform:translateY(-5px) scale(1.04);
  box-shadow:0 14px 32px rgba(37,99,235,0.28);
}
.tech-pill:hover .tech-icon { filter:brightness(0) invert(1); }
.tech-icon {
  width:20px; height:20px;
  object-fit:contain;
  flex-shrink:0;
  transition:filter 0.25s;
}
.tech-emoji { font-size:16px; line-height:1; }

/* ===== CLIENTS MARQUEE ===== */
.logo-marquee {
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,black 100px,black calc(100% - 100px),transparent);
  mask-image:linear-gradient(to right,transparent,black 100px,black calc(100% - 100px),transparent);
  padding:12px 0 8px;
}
.marquee-inner {
  display:flex;
  gap:18px;
  width:max-content;
  animation:logoScroll 44s linear infinite;
}
.logo-marquee:hover .marquee-inner { animation-play-state:paused; }
@keyframes logoScroll {
  from { transform:translateX(0); }
  to   { transform:translateX(-25%); }
}
/* Client tile — pure CSS, no images needed */
.client-tile {
  flex-shrink:0;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:20px 20px 16px;
  border-radius:20px;
  background:#fff;
  border:1.5px solid rgba(37,99,235,0.1);
  box-shadow:0 4px 24px rgba(13,21,38,0.07);
  transition:transform 0.3s,box-shadow 0.3s,border-color 0.3s;
  min-width:148px;
}
.client-tile:hover {
  transform:translateY(-7px);
  box-shadow:0 18px 44px rgba(37,99,235,0.16);
  border-color:rgba(37,99,235,0.28);
}
.client-icon {
  width:56px; height:56px;
  border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; font-weight:900;
  color:#fff;
  font-family:Inter,Arial,sans-serif;
  letter-spacing:-0.5px;
  box-shadow:0 6px 18px rgba(0,0,0,0.18);
  flex-shrink:0;
}
.client-name {
  font-size:13px; font-weight:700;
  color:var(--navy); text-align:center; line-height:1.35;
}
.client-tag {
  font-size:10.5px; font-weight:500;
  color:var(--muted); text-align:center;
  line-height:1.3;
}

/* ===== CTA SECTION ===== */
.cta-section {
  text-align:center;
  background:linear-gradient(145deg,#0a1020,#101b3a,#16103a);
  position:relative;
  overflow:hidden;
}
.cta-glow {
  position:absolute;
  width:800px; height:800px;
  background:radial-gradient(circle,rgba(37,99,235,0.22) 0%,rgba(124,58,237,0.15) 40%,transparent 70%);
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  animation:ctaPulse 5s ease-in-out infinite;
}
@keyframes ctaPulse {
  0%,100% { opacity:0.8; transform:translate(-50%,-50%) scale(1); }
  50% { opacity:1; transform:translate(-50%,-50%) scale(1.08); }
}
.cta-inner { position:relative; z-index:1; }
.cta-badge {
  display:inline-flex;
  align-items:center; gap:8px;
  padding:9px 18px;
  border-radius:999px;
  background:rgba(37,220,120,0.12);
  border:1.5px solid rgba(37,220,120,0.25);
  color:#4ade80;
  font-weight:700; font-size:13px;
  margin-bottom:28px;
}
.cta-badge::before {
  content:'';
  width:8px; height:8px;
  border-radius:50%;
  background:#4ade80;
  animation:blink 1.8s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0.3;} }
.cta-section h2 {
  font-size:clamp(38px,5.5vw,72px);
  letter-spacing:-3px;
  margin-bottom:20px;
  color:white; font-weight:900;
}
.cta-section p {
  color:#94a3b8;
  max-width:700px;
  margin:0 auto 40px;
  line-height:1.9; font-size:17.5px;
}

/* ===== FOOTER ===== */
footer {
  padding:28px 0;
  background:#f8fbff;
  border-top:1px solid var(--line);
}
.footer-inner {
  width:min(1260px,92%);
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px;
}
.footer-brand {
  font-size:16px; font-weight:700;
  color:var(--navy);
}
.footer-brand strong {
  background:var(--grad);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.footer-copy { color:var(--muted); font-size:14px; }
.footer-links { display:flex; gap:20px; }
.footer-links a {
  color:var(--muted); font-size:14px; font-weight:600;
  transition:color 0.2s;
}
.footer-links a:hover { color:var(--blue); }

/* ===== COUNTRY SKELETON ===== */
.country-skeleton {
  flex: 0 0 200px;
  border-radius: 26px;
  height: 172px;
  background: linear-gradient(90deg, #e8f0ff 25%, #f4f8ff 50%, #e8f0ff 75%);
  background-size: 300% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
  border: 1px solid var(--line);
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ===== REVEAL ANIMATION ===== */
.reveal {
  opacity:0;
  transform:translateY(44px);
  transition:opacity 0.85s ease, transform 0.85s ease;
}
.reveal.active { opacity:1; transform:translateY(0); }

/* ===== RESPONSIVE ===== */
@media (max-width:960px) {
  .hero-grid { grid-template-columns:1fr; }
  .nav-links,.nav-cta { display:none; }
  .hamburger { display:flex; }
  .nav-wrap { height:64px; gap:0; }
  .nav-logo { height:40px; max-width:150px; }
  .brand { flex-shrink:0; }
  .lang-toggle { padding:7px 12px; font-size:12.5px; gap:5px; }
  .hero { text-align:center; }
  .hero-actions { justify-content:center; }
  .hero h1 { letter-spacing:-2px; }
  .hero p { max-width:100%; }
  .eyebrow { font-size:11.5px; }
  .mini-metrics { grid-template-columns:1fr 1fr; }
  .project-grid { grid-template-columns:1fr; }
  .footer-inner { justify-content:center; text-align:center; }
  [dir="rtl"] .hero { text-align:center; }
  [dir="rtl"] .hero-actions { flex-direction:row; justify-content:center; }
  .pv2-row { grid-template-columns:1fr 1fr; gap:14px; }
  .pv2-screen { min-height:160px; }
  .pv2-top h3 { font-size:14px; }
}
@media (max-width:680px) {
  .pv2-row { grid-template-columns:1fr; }
  .pv2-card.reveal:nth-child(2), .pv2-card.reveal:nth-child(3) { transition-delay:0s; }
  .pv2-screen { min-height:200px; }
}
@media (max-width:560px) {
  .section-pad { padding:72px 0; }
  .mini-metrics { grid-template-columns:1fr; }
  .metric-card strong { font-size:38px; }
  .hero h1 { letter-spacing:-1.5px; }
  .pv2-top { padding:16px 16px 12px; }
  .pv2-foot { padding:10px 16px; }
  .pv2-top h3 { font-size:14px; }
}