/* ============================================================
   MAGEFIXER — style.css
   Font: Nunito + Tajawal (Arabic)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&family=Tajawal:wght@400;500;700;800&display=swap');

/* ── Dark theme (default) ───────────────────────────────────── */
:root,
[data-theme="dark"] {
  --bg:        #050D1E;
  --bg-2:      #081323;
  --card:      #0B1A35;
  --card-2:    #0E2040;
  --border:    rgba(255,255,255,0.07);
  --border-2:  rgba(255,255,255,0.13);
  --shadow:    rgba(0,0,0,0.5);
  --primary:   #F26322;
  --primary-d: #D4511B;
  --primary-l: #FF7A3D;
  --glow-o:    rgba(242,99,34,0.35);
  --glow-b:    rgba(14,165,233,0.25);
  --accent:    #0EA5E9;
  --gold:      #F59E0B;
  --green:     #10B981;
  --red:       #EF4444;
  --text:      #F1F5F9;
  --text-2:    #94A3B8;
  --text-3:    #475569;
  --radius:    16px;
  --radius-sm: 10px;
  --tr:        0.3s cubic-bezier(0.4,0,0.2,1);
  --nav-bg:    rgba(5,13,30,0.92);
  --footer-bg: #030B18;
  --noise:     0.025;
}

/* ── Light theme ────────────────────────────────────────────── */
[data-theme="light"] {
  --bg:       #EFF3F8;
  --bg-2:     #FFFFFF;
  --card:     #FFFFFF;
  --card-2:   #F8FAFC;
  --border:   rgba(15,23,42,0.08);
  --border-2: rgba(15,23,42,0.14);
  --shadow:   rgba(15,23,42,0.12);
  --glow-o:   rgba(242,99,34,0.18);
  --glow-b:   rgba(14,165,233,0.12);
  --text:     #0F172A;
  --text-2:   #475569;
  --text-3:   #94A3B8;
  --nav-bg:   rgba(239,243,248,0.94);
  --footer-bg:#1E293B;
  --noise:    0.015;
}
[data-theme="light"] .hero-grid {
  background-image:
    linear-gradient(rgba(15,23,42,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,0.05) 1px, transparent 1px);
}
[data-theme="light"] .orb-1 { background: radial-gradient(circle, rgba(242,99,34,0.10) 0%, transparent 70%); }
[data-theme="light"] .orb-2 { background: radial-gradient(circle, rgba(14,165,233,0.07) 0%, transparent 70%); }
[data-theme="light"] .orb-3 { background: radial-gradient(circle, rgba(245,158,11,0.05) 0%, transparent 70%); }
[data-theme="light"] .diag-arrow { background: linear-gradient(to bottom, rgba(242,99,34,0.15), var(--primary), rgba(242,99,34,0.15)); }
[data-theme="light"] footer { color: #CBD5E1; }
[data-theme="light"] footer a  { color: #94A3B8; }
[data-theme="light"] .footer-col ul a:hover { color: var(--primary); }
[data-theme="light"] .footer-bottom p { color: #94A3B8; }
[data-theme="light"] .footer-social a { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); color: #94A3B8; }

/* ── Base ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Nunito', system-ui, sans-serif;
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.4s ease, color 0.4s ease;
}
[lang="ar"] body,
[lang="ar"] * { font-family: 'Tajawal', 'Nunito', system-ui, sans-serif; }

::selection { background: var(--primary); color: #fff; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 3px; }

/* Noise texture */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: var(--noise);
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.4s;
}

/* ── Typography utilities ───────────────────────────────────── */
.font-display { font-family: 'Nunito', sans-serif; }
.grad-text {
  background: linear-gradient(135deg, var(--primary-l) 0%, var(--primary) 50%, #FF4500 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.grad-text-blue {
  background: linear-gradient(135deg, #38BDF8 0%, var(--accent) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ── Navigation ─────────────────────────────────────────────── */
#navbar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100; padding: 0 1.5rem;
  transition: var(--tr);
}
#navbar.scrolled {
  background: var(--nav-bg);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 40px var(--shadow);
}
.nav-inner {
  max-width: 1280px; margin: 0 auto; height: 72px;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.logo-wrap {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; flex-shrink: 0;
}
.logo-wrap img { width: 40px; height: 40px; }
.logo-wordmark {
  font-family: 'Nunito', sans-serif; font-size: 1.3rem;
  font-weight: 800; color: var(--text); letter-spacing: -0.5px;
}
.logo-wordmark span { color: var(--primary); }

.nav-links {
  display: flex; align-items: center; gap: 0.2rem; list-style: none;
}
.nav-links a {
  display: inline-block; padding: 0.5rem 0.8rem;
  color: var(--text-2); text-decoration: none;
  font-size: 0.9rem; font-weight: 600; border-radius: 8px; transition: var(--tr);
}
.nav-links a:hover  { color: var(--text); background: rgba(255,255,255,0.06); }
.nav-links a.active { color: var(--primary); }
[data-theme="light"] .nav-links a:hover { background: rgba(15,23,42,0.05); }

/* nav right controls */
.nav-controls { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }

/* theme toggle */
.theme-toggle {
  width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid var(--border-2); background: transparent;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--text-2); transition: var(--tr);
}
.theme-toggle:hover { color: var(--primary); border-color: var(--primary); background: rgba(242,99,34,0.08); }

/* language toggle */
.lang-toggle {
  display: flex; align-items: center;
  border: 1px solid var(--border-2); border-radius: 10px;
  overflow: hidden; background: transparent;
}
.lang-btn {
  padding: 0.4rem 0.75rem; border: none; background: transparent;
  font-family: 'Nunito', sans-serif; font-size: 0.8rem; font-weight: 700;
  color: var(--text-2); cursor: pointer; transition: var(--tr);
}
.lang-btn.active { background: var(--primary); color: white; }
.lang-btn:not(.active):hover { background: rgba(242,99,34,0.08); color: var(--text); }
.lang-sep { width: 1px; height: 18px; background: var(--border-2); flex-shrink: 0; }

.btn-nav {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0.6rem 1.2rem; background: var(--primary); color: white;
  border-radius: 10px; font-size: 0.875rem; font-weight: 700;
  text-decoration: none; transition: var(--tr); white-space: nowrap;
  font-family: 'Nunito', sans-serif;
}
.btn-nav:hover { background: var(--primary-l); transform: translateY(-1px); box-shadow: 0 8px 24px var(--glow-o); }

/* hamburger */
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 6px; }
.hamburger span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: var(--tr); }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* mobile menu */
.mobile-menu {
  display: none; position: fixed; inset: 72px 0 0 0;
  background: var(--nav-bg); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  z-index: 99; padding: 1.5rem; flex-direction: column; gap: 0.5rem; overflow-y: auto;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  display: block; padding: 0.875rem 1.25rem; color: var(--text-2);
  text-decoration: none; font-size: 1rem; font-weight: 600;
  border-radius: 10px; border: 1px solid transparent; transition: var(--tr);
}
.mobile-menu a:hover { color: var(--text); background: var(--card); border-color: var(--border-2); }
.mobile-menu .btn-nav { margin-top: 0.75rem; justify-content: center; }
.mobile-menu-controls { display: flex; gap: 0.75rem; padding: 0.75rem 0 0; border-top: 1px solid var(--border); margin-top: 0.5rem; }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0.875rem 1.75rem; background: var(--primary); color: white;
  border: none; border-radius: var(--radius-sm); font-size: 1rem; font-weight: 700;
  cursor: pointer; text-decoration: none; transition: var(--tr);
  font-family: 'Nunito', sans-serif; position: relative; overflow: hidden;
}
.btn-primary::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  transform: translateX(-100%); transition: transform 0.5s;
}
.btn-primary:hover::after { transform: translateX(100%); }
.btn-primary:hover { background: var(--primary-l); transform: translateY(-2px); box-shadow: 0 12px 32px var(--glow-o); }

.btn-outline {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0.875rem 1.75rem; background: transparent; color: var(--text);
  border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  font-size: 1rem; font-weight: 700; cursor: pointer; text-decoration: none; transition: var(--tr);
  font-family: 'Nunito', sans-serif;
}
.btn-outline:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.25); transform: translateY(-2px); }
[data-theme="light"] .btn-outline:hover { background: rgba(15,23,42,0.05); border-color: rgba(15,23,42,0.25); }

.btn-whatsapp {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 0.875rem 1.75rem; background: #25D366; color: white;
  border: none; border-radius: var(--radius-sm); font-size: 1rem; font-weight: 700;
  cursor: pointer; text-decoration: none; transition: var(--tr); font-family: 'Nunito', sans-serif;
}
.btn-whatsapp:hover { background: #20B858; transform: translateY(-2px); box-shadow: 0 12px 32px rgba(37,211,102,0.35); }

/* ── Layout helpers ─────────────────────────────────────────── */
.section    { position: relative; z-index: 1; padding: 3rem 1.5rem 6rem; }
.section-sm { position: relative; z-index: 1; padding: 4rem 1.5rem; }
.container  { max-width: 1280px; margin: 0 auto; }

.section-label {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0.375rem 1rem; background: rgba(242,99,34,0.1);
  border: 1px solid rgba(242,99,34,0.25); border-radius: 100px;
  font-size: 0.78rem; font-weight: 700; color: var(--primary);
  letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 1.25rem;
}
.section-title {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 800;
  line-height: 1.15; margin-bottom: 1rem;
}
.section-subtitle { font-size: 1.05rem; color: var(--text-2); max-width: 600px; line-height: 1.8; }

/* ── Hero ───────────────────────────────────────────────────── */
#home {
  min-height: 100vh; display: flex; align-items: center;
  position: relative; overflow: hidden; padding: 6rem 1.5rem 4rem;
}
.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
  transition: background-image 0.4s;
}
.orb { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; }
.orb-1 { width: 600px; height: 600px; background: radial-gradient(circle, rgba(242,99,34,0.18) 0%, transparent 70%); top: -100px; right: -100px; animation: float1 8s ease-in-out infinite; }
.orb-2 { width: 400px; height: 400px; background: radial-gradient(circle, rgba(14,165,233,0.12) 0%, transparent 70%); bottom: 0; left: 10%; animation: float2 10s ease-in-out infinite; }
.orb-3 { width: 300px; height: 300px; background: radial-gradient(circle, rgba(245,158,11,0.08) 0%, transparent 70%); top: 40%; left: 50%; animation: float3 12s ease-in-out infinite; }

@keyframes float1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-40px,30px)} }
@keyframes float2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(30px,-40px)} }
@keyframes float3 { 0%,100%{transform:translate(0,0)} 33%{transform:translate(20px,15px)} 66%{transform:translate(-15px,25px)} }

.hero-inner {
  max-width: 1280px; margin: 0 auto; width: 100%;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem;
  align-items: center; position: relative; z-index: 2;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0.4rem 1rem 0.4rem 0.6rem;
  background: rgba(242,99,34,0.08); border: 1px solid rgba(242,99,34,0.2);
  border-radius: 100px; font-size: 0.8rem; font-weight: 700; color: var(--primary-l);
  margin-bottom: 1.75rem;
}
.hero-badge .dot {
  width: 8px; height: 8px; background: var(--primary); border-radius: 50%;
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot { 0%,100%{box-shadow:0 0 0 0 rgba(242,99,34,0.6)} 50%{box-shadow:0 0 0 6px rgba(242,99,34,0)} }

.hero-title {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(2.4rem, 5vw, 3.75rem); font-weight: 800;
  line-height: 1.1; letter-spacing: -1px; margin-bottom: 1.5rem;
}
.hero-sub { font-size: 1.05rem; color: var(--text-2); line-height: 1.8; margin-bottom: 2rem; max-width: 520px; }
.hero-ctas { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.hero-trust { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.trust-badge { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 700; color: var(--text-2); }
.trust-badge svg { flex-shrink: 0; }
.trust-divider { width: 1px; height: 20px; background: var(--border-2); }

/* ── Transformation Diagram ─────────────────────────────────── */
.diagram-wrap { position: relative; }
.diagram {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 1rem; background: var(--card); border: 1px solid var(--border-2);
  border-radius: 24px; overflow: hidden; padding: 1.75rem 1.25rem;
  transition: background-color 0.4s, border-color 0.4s;
}
.diag-panel { display: flex; flex-direction: column; gap: 0.65rem; }
.diag-panel-title { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.4rem; }
.diag-panel.before .diag-panel-title { color: #EF4444; }
.diag-panel.after  .diag-panel-title { color: var(--green); }

.diag-item { display: flex; align-items: center; gap: 8px; padding: 0.55rem 0.75rem; border-radius: 9px; font-size: 0.8rem; font-weight: 600; }
.diag-item.bad  { background: rgba(239,68,68,0.08);  border: 1px solid rgba(239,68,68,0.15);  color: #FCA5A5; }
.diag-item.good { background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.15); color: #6EE7B7; }
.diag-item svg  { flex-shrink: 0; }

.diag-center { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 0 0.5rem; }
.diag-mf-logo {
  width: 60px; height: 60px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-d) 100%);
  border-radius: 16px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 30px var(--glow-o); animation: logo-pulse 3s ease-in-out infinite;
}
@keyframes logo-pulse { 0%,100%{box-shadow:0 0 20px var(--glow-o)} 50%{box-shadow:0 0 40px var(--glow-o),0 0 60px rgba(242,99,34,0.12)} }

.diag-arrow { width: 2px; height: 36px; background: linear-gradient(to bottom, rgba(242,99,34,0.2), var(--primary), rgba(242,99,34,0.2)); position: relative; overflow: hidden; }
.diag-arrow::after { content: ''; position: absolute; top: -100%; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, transparent, white, transparent); animation: arrow-flow 1.5s linear infinite; }
@keyframes arrow-flow { to { top: 100%; } }

.diag-label { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--primary); text-align: center; white-space: nowrap; }

.perf-bar-wrap { grid-column: 1 / -1; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.perf-bar-label { display: flex; justify-content: space-between; font-size: 0.78rem; font-weight: 700; color: var(--text-2); margin-bottom: 0.5rem; }
.perf-bar-track { height: 8px; background: rgba(239,68,68,0.15); border-radius: 100px; overflow: hidden; }
.perf-bar-fill { height: 100%; border-radius: 100px; background: linear-gradient(90deg, #EF4444 0%, var(--gold) 40%, var(--green) 100%); width: 0%; transition: width 2s cubic-bezier(0.34,1.56,0.64,1); }

.diag-float { position: absolute; border-radius: 12px; padding: 0.55rem 0.9rem; font-size: 0.78rem; font-weight: 700; border: 1px solid; backdrop-filter: blur(12px); white-space: nowrap; }
.diag-float-speed { top: -16px; right: 20px; background: rgba(16,185,129,0.12); border-color: rgba(16,185,129,0.3); color: #6EE7B7; animation: float-card 3s ease-in-out infinite; }
.diag-float-audit { bottom: -12px; left: 20px; background: rgba(14,165,233,0.12); border-color: rgba(14,165,233,0.3); color: #7DD3FC; animation: float-card 3.5s ease-in-out infinite 0.5s; }
@keyframes float-card { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }

/* ── Pain points ────────────────────────────────────────────── */
.pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 3rem; }
.pain-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.75rem; transition: var(--tr); position: relative; overflow: hidden; }
.pain-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, #EF4444, #F97316); opacity: 0; transition: var(--tr); }
.pain-card:hover { border-color: rgba(239,68,68,0.2); transform: translateY(-4px); box-shadow: 0 16px 40px var(--shadow); }
.pain-card:hover::before { opacity: 1; }
.pain-icon { width: 44px; height: 44px; background: rgba(239,68,68,0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; color: #EF4444; }
.pain-card h3 { font-size: 1rem; font-weight: 800; margin-bottom: 0.5rem; }
.pain-card p  { font-size: 0.875rem; color: var(--text-2); line-height: 1.7; }

/* ── Services ────────────────────────────────────────────────── */
#services { background: var(--bg-2); }
.services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: 3rem; }
.service-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.75rem; transition: var(--tr); position: relative; overflow: hidden;
}
.service-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(242,99,34,0.04) 0%, transparent 60%); opacity: 0; transition: var(--tr); }
.service-card:hover { border-color: rgba(242,99,34,0.25); transform: translateY(-6px); box-shadow: 0 20px 48px var(--shadow); }
.service-card:hover::after { opacity: 1; }
.service-icon { width: 52px; height: 52px; background: linear-gradient(135deg, rgba(242,99,34,0.15), rgba(242,99,34,0.05)); border: 1px solid rgba(242,99,34,0.2); border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; color: var(--primary); transition: var(--tr); }
.service-card:hover .service-icon { box-shadow: 0 0 20px var(--glow-o); }
.service-card h3 { font-size: 1rem; font-weight: 800; margin-bottom: 0.625rem; }
.service-card p  { font-size: 0.85rem; color: var(--text-2); line-height: 1.7; }

/* ── Process ─────────────────────────────────────────────────── */
.process-steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 1rem; align-items: start; margin-top: 3.5rem; }
.process-connector { display: flex; align-items: center; margin-top: 28px; }
.process-connector-line { flex: 1; height: 2px; background: linear-gradient(90deg, var(--primary), rgba(242,99,34,0.2)); position: relative; overflow: hidden; }
.process-connector-line::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent); animation: line-shine 2s linear infinite; }
@keyframes line-shine { to { left: 100%; } }

.process-step { text-align: center; padding: 1.5rem 1rem; }
.process-num { width: 56px; height: 56px; margin: 0 auto 1.25rem; background: linear-gradient(135deg, var(--primary), var(--primary-d)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Nunito', sans-serif; font-size: 1.25rem; font-weight: 800; color: white; box-shadow: 0 0 24px var(--glow-o); }
.process-step h3 { font-size: 1.1rem; font-weight: 800; margin-bottom: 0.5rem; }
.process-step p  { font-size: 0.875rem; color: var(--text-2); line-height: 1.7; }
.process-step ul { list-style: none; margin-top: 0.75rem; text-align: left; display: inline-block; }
.process-step ul li { font-size: 0.82rem; color: var(--text-2); padding: 0.2rem 0; display: flex; align-items: center; gap: 6px; }
.process-step ul li::before { content: ''; width: 5px; height: 5px; background: var(--primary); border-radius: 50%; flex-shrink: 0; }

/* ── Tech stack ──────────────────────────────────────────────── */
#techstack { background: var(--bg-2); }
.tech-grid { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.5rem; justify-content: center; }
.tech-pill { display: inline-flex; align-items: center; gap: 8px; padding: 0.5rem 1.1rem; background: var(--card); border: 1px solid var(--border-2); border-radius: 100px; font-size: 0.875rem; font-weight: 700; color: var(--text-2); transition: var(--tr); }
.tech-pill:hover { border-color: var(--primary); color: var(--text); background: rgba(242,99,34,0.06); transform: translateY(-2px); }
.tech-pill .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ── AI Tools ────────────────────────────────────────────────── */
#aitools { background: var(--bg); }
.ai-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; }
.ai-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 2rem 1.75rem; transition: var(--tr); position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 0;
}
.ai-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; opacity: 0; transition: var(--tr); border-radius: 3px 3px 0 0; }
.ai-card:hover { transform: translateY(-6px); box-shadow: 0 20px 48px var(--shadow); border-color: var(--border-2); }
.ai-card:hover::before { opacity: 1; }
.ai-icon-wrap { width: 60px; height: 60px; border-radius: 18px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; font-size: 1.5rem; font-weight: 900; flex-shrink: 0; }

/* AI brand colours */
.ai-card.claude  { } .ai-card.claude::before  { background: linear-gradient(90deg, #6C47FF, #9B59B6); }
.ai-card.chatgpt { } .ai-card.chatgpt::before { background: linear-gradient(90deg, #10A37F, #1ABC9C); }
.ai-card.gemini  { } .ai-card.gemini::before  { background: linear-gradient(90deg, #4285F4, #EA4335, #FBBC05, #34A853); }
.ai-card.cursor  { } .ai-card.cursor::before  { background: linear-gradient(90deg, #1A1A2E, #16213E); }
.ai-card.copilot { } .ai-card.copilot::before { background: linear-gradient(90deg, #24292F, #586069); }
.ai-card.windsurf{ } .ai-card.windsurf::before{ background: linear-gradient(90deg, #0EA5E9, #38BDF8); }

.ai-icon-wrap.claude   { background: linear-gradient(135deg, rgba(108,71,255,0.15), rgba(108,71,255,0.05)); color: #8B5CF6; }
.ai-icon-wrap.chatgpt  { background: linear-gradient(135deg, rgba(16,163,127,0.15), rgba(16,163,127,0.05)); color: #10A37F; }
.ai-icon-wrap.gemini   { background: linear-gradient(135deg, rgba(66,133,244,0.15), rgba(66,133,244,0.05)); color: #4285F4; }
.ai-icon-wrap.cursor   { background: linear-gradient(135deg, rgba(100,100,100,0.15), rgba(50,50,50,0.05)); color: var(--text-2); }
.ai-icon-wrap.copilot  { background: linear-gradient(135deg, rgba(36,41,47,0.2), rgba(36,41,47,0.05)); color: var(--text-2); }
.ai-icon-wrap.windsurf { background: linear-gradient(135deg, rgba(14,165,233,0.15), rgba(14,165,233,0.05)); color: var(--accent); }

.ai-card h3 { font-size: 1.05rem; font-weight: 800; margin-bottom: 0.5rem; }
.ai-card p  { font-size: 0.875rem; color: var(--text-2); line-height: 1.75; }

/* ── Certifications ──────────────────────────────────────────── */
.cert-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; }
.cert-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem 1.5rem; text-align: center; transition: var(--tr); text-decoration: none; color: inherit; display: block; }
.cert-card:hover { border-color: var(--border-2); transform: translateY(-4px); box-shadow: 0 16px 40px var(--shadow); }
.cert-badge { width: 72px; height: 72px; margin: 0 auto 1.25rem; border-radius: 20px; display: flex; align-items: center; justify-content: center; }
.cert-badge.adobe { background: linear-gradient(135deg, rgba(250,0,0,0.15), rgba(250,0,0,0.05)); color: #FF4444; }
.cert-badge.php   { background: linear-gradient(135deg, rgba(119,123,180,0.2), rgba(119,123,180,0.08)); color: #9B9EDB; }
.cert-badge.so    { background: linear-gradient(135deg, rgba(245,130,32,0.15), rgba(245,130,32,0.05)); color: #F58220; }
.cert-badge.years { background: linear-gradient(135deg, rgba(245,158,11,0.15), rgba(245,158,11,0.05)); color: var(--gold); }
.cert-badge.dubai { background: linear-gradient(135deg, rgba(14,165,233,0.15), rgba(14,165,233,0.05)); color: var(--accent); }
.cert-card h3 { font-size: 1rem; font-weight: 800; margin-bottom: 0.375rem; }
.cert-card p  { font-size: 0.82rem; color: var(--text-2); line-height: 1.6; }

/* ── Stats ───────────────────────────────────────────────────── */
#stats { background: var(--bg-2); }
.stats-grid-main { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.stats-grid-extra { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: 1.25rem; }
.stat-block { background: var(--card); padding: 2.5rem 1.5rem; text-align: center; }
.stat-block-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.75rem; text-align: center; transition: var(--tr); }
.stat-block-card:hover { border-color: var(--border-2); transform: translateY(-3px); }
.stat-num { font-family: 'Nunito', sans-serif; font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; line-height: 1; margin-bottom: 0.5rem; }
.stat-label { font-size: 0.875rem; color: var(--text-2); font-weight: 600; }

/* ── Platform row ────────────────────────────────────────────── */
.platform-row { display: flex; align-items: center; justify-content: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 3rem; }
.platform-link { display: flex; align-items: center; gap: 8px; color: var(--text-2); text-decoration: none; font-size: 0.875rem; font-weight: 700; padding: 0.625rem 1.1rem; border: 1px solid var(--border); border-radius: 10px; background: var(--card); transition: var(--tr); }
.platform-link:hover { color: var(--text); border-color: var(--border-2); transform: translateY(-2px); }

/* ── Contact ─────────────────────────────────────────────────── */
#contact { background: var(--bg); }
.contact-inner { display: grid; grid-template-columns: 1fr 1.4fr; gap: 4rem; align-items: start; }
.contact-methods { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; }
.contact-method { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--text-2); font-size: 0.95rem; transition: var(--tr); }
.contact-method:hover { color: var(--text); }
.contact-method-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-method-icon.wa { background: rgba(37,211,102,0.1);  color: #25D366; }
.contact-method-icon.em { background: rgba(14,165,233,0.1);  color: var(--accent); }
.contact-method-icon.li { background: rgba(10,102,194,0.12); color: #0A66C2; }
.contact-method-icon.gh { background: rgba(255,255,255,0.06); color: var(--text); }
[data-theme="light"] .contact-method-icon.gh { background: rgba(0,0,0,0.06); }

/* Form */
.contact-form-wrap { background: var(--card); border: 1px solid var(--border-2); border-radius: 24px; padding: 2.5rem; transition: background-color 0.4s, border-color 0.4s; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 1.125rem; }
.form-group label { font-size: 0.85rem; font-weight: 700; color: var(--text-2); }
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%; background: rgba(255,255,255,0.04); border: 1px solid var(--border-2);
  border-radius: 10px; padding: 0.75rem 1rem; color: var(--text);
  font-family: 'Nunito', 'Tajawal', sans-serif; font-size: 0.925rem;
  transition: var(--tr); outline: none; -webkit-appearance: none; appearance: none;
}
[data-theme="light"] .form-group input,
[data-theme="light"] .form-group select,
[data-theme="light"] .form-group textarea { background: rgba(15,23,42,0.03); }
.form-group select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 2.5rem; }
.form-group select option { background: var(--card); color: var(--text); }
.form-group textarea { resize: vertical; min-height: 130px; }
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-3); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--primary); background: rgba(242,99,34,0.04); box-shadow: 0 0 0 3px rgba(242,99,34,0.1); }
.form-group input.err, .form-group select.err, .form-group textarea.err { border-color: var(--red); box-shadow: 0 0 0 3px rgba(239,68,68,0.1); }
.field-error { font-size: 0.78rem; color: #FCA5A5; display: flex; align-items: center; gap: 4px; }

.form-submit-btn {
  width: 100%; padding: 1rem; background: var(--primary); color: white;
  border: none; border-radius: 12px; font-size: 1rem; font-weight: 800;
  cursor: pointer; transition: var(--tr); display: flex; align-items: center;
  justify-content: center; gap: 8px; margin-top: 0.5rem;
  font-family: 'Nunito', 'Tajawal', sans-serif; min-height: 52px;
}
.form-submit-btn:hover:not(:disabled) { background: var(--primary-l); transform: translateY(-2px); box-shadow: 0 12px 32px var(--glow-o); }
.form-submit-btn:disabled { opacity: 0.7; cursor: not-allowed; }

.form-notice { padding: 1rem 1.25rem; border-radius: 10px; font-size: 0.875rem; display: flex; align-items: flex-start; gap: 10px; margin-top: 1rem; }
.form-notice.success { background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.2); color: #6EE7B7; }
.form-notice.error   { background: rgba(239,68,68,0.08);  border: 1px solid rgba(239,68,68,0.2);  color: #FCA5A5; }

/* ── WhatsApp FAB ────────────────────────────────────────────── */
.whatsapp-fab { position: fixed; bottom: 2rem; right: 2rem; width: 60px; height: 60px; background: #25D366; border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 200; box-shadow: 0 8px 32px rgba(37,211,102,0.4); transition: var(--tr); text-decoration: none; color: white; }
.whatsapp-fab:hover { background: #20B858; transform: scale(1.1); box-shadow: 0 12px 40px rgba(37,211,102,0.5); }
.whatsapp-fab-ring { position: absolute; inset: -6px; border: 2px solid rgba(37,211,102,0.4); border-radius: 50%; animation: ring-pulse 2s ease-in-out infinite; }
@keyframes ring-pulse { 0%,100%{transform:scale(1);opacity:0.8} 50%{transform:scale(1.15);opacity:0} }
.whatsapp-tooltip { position: absolute; right: 72px; background: #0F172A; color: white; padding: 0.5rem 0.875rem; border-radius: 8px; font-size: 0.82rem; font-weight: 700; white-space: nowrap; pointer-events: none; opacity: 0; transform: translateX(8px); transition: var(--tr); box-shadow: 0 4px 16px rgba(0,0,0,0.4); }
.whatsapp-fab:hover .whatsapp-tooltip { opacity: 1; transform: translateX(0); }
.whatsapp-tooltip::after { content: ''; position: absolute; right: -6px; top: 50%; transform: translateY(-50%); border: 6px solid transparent; border-right: none; border-left-color: #0F172A; }

/* ── Footer ──────────────────────────────────────────────────── */
footer { background: var(--footer-bg); border-top: 1px solid var(--border); padding: 3.5rem 1.5rem 2rem; transition: background-color 0.4s; }
.footer-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 3rem; }
.footer-brand p { font-size: 0.875rem; color: var(--text-2); line-height: 1.8; margin-top: 1rem; max-width: 280px; }
.footer-col h4 { font-size: 0.875rem; font-weight: 800; margin-bottom: 1.25rem; color: var(--text); }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.625rem; }
.footer-col ul a { color: var(--text-2); text-decoration: none; font-size: 0.875rem; font-weight: 600; transition: var(--tr); }
.footer-col ul a:hover { color: var(--primary); }
.footer-bottom { max-width: 1280px; margin: 0 auto; padding-top: 2rem; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.footer-bottom p { font-size: 0.82rem; color: var(--text-3); }
.footer-social { display: flex; gap: 0.75rem; }
.footer-social a { width: 36px; height: 36px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--text-2); text-decoration: none; transition: var(--tr); }
.footer-social a:hover { border-color: var(--primary); color: var(--primary); }

/* ── Scroll reveal ───────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.65s cubic-bezier(0.16,1,0.3,1), transform 0.65s cubic-bezier(0.16,1,0.3,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }
.reveal-delay-5 { transition-delay: 0.40s; }

/* ── RTL overrides ───────────────────────────────────────────── */
[dir="rtl"] .process-connector-line { background: linear-gradient(to left, var(--primary), rgba(242,99,34,0.2)); }
[dir="rtl"] .process-step ul { text-align: right; }
[dir="rtl"] .process-step ul li { flex-direction: row-reverse; }
[dir="rtl"] .form-group select { background-position: left 12px center; padding-right: 1rem; padding-left: 2.5rem; }
[dir="rtl"] .whatsapp-tooltip { right: auto; left: 72px; transform: translateX(-8px); }
[dir="rtl"] .whatsapp-fab:hover .whatsapp-tooltip { transform: translateX(0); }
[dir="rtl"] .whatsapp-tooltip::after { right: auto; left: -6px; border-left: none; border-right-color: #0F172A; }
[dir="rtl"] .hero-sub { max-width: none; }
[dir="rtl"] .diag-float-speed { right: auto; left: 20px; }
[dir="rtl"] .diag-float-audit { left: auto; right: 20px; }
[dir="rtl"] .section-subtitle { max-width: none; }

/* ── Spinner ─────────────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
.spin-anim { animation: spin 1s linear infinite; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-inner  { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .ai-grid       { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .hero-inner    { grid-template-columns: 1fr; }
  .diagram-wrap  { display: none; }
  .pain-grid     { grid-template-columns: repeat(2, 1fr); }
  .cert-grid     { grid-template-columns: repeat(2, 1fr); }
  .stats-grid-main  { grid-template-columns: repeat(2, 1fr); }
  .stats-grid-extra { grid-template-columns: repeat(2, 1fr); }
  .contact-inner { grid-template-columns: 1fr; }
  .process-steps { grid-template-columns: 1fr; gap: 2rem; }
  .process-connector { display: none; }
  .nav-links, .btn-nav { display: none; }
  .hamburger { display: flex; }
  .nav-controls .btn-nav { display: none; }
}
@media (max-width: 640px) {
  .pain-grid        { grid-template-columns: 1fr; }
  .services-grid    { grid-template-columns: 1fr; }
  .cert-grid        { grid-template-columns: 1fr; }
  .ai-grid          { grid-template-columns: 1fr; }
  .stats-grid-main  { grid-template-columns: 1fr 1fr; }
  .stats-grid-extra { grid-template-columns: 1fr 1fr; }
  .form-row         { grid-template-columns: 1fr; }
  .footer-inner     { grid-template-columns: 1fr; }
  .hero-ctas        { flex-direction: column; align-items: flex-start; }
  .section          { padding: 4rem 1rem; }
  .section-sm       { padding: 3rem 1rem; }
  .faq-grid         { max-width: 100%; }
}

/* ── FAQ ────────────────────────────────────────────────────── */
.faq-grid {
  max-width: 860px;
  margin: 3rem auto 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.faq-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.faq-item.active,
.faq-item:hover {
  border-color: var(--border-2);
  box-shadow: 0 4px 24px var(--shadow);
}
.faq-item.active { border-color: rgba(242,99,34,0.35); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: 'Nunito', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.5;
  transition: color 0.2s;
}
.faq-item.active .faq-q { color: var(--primary); }
.faq-chevron {
  flex-shrink: 0;
  transition: transform 0.3s ease;
  color: var(--text-3);
}
.faq-item.active .faq-chevron { transform: rotate(180deg); color: var(--primary); }
.faq-a {
  padding: 0 1.5rem 1.25rem;
  font-size: 0.9375rem;
  color: var(--text-2);
  line-height: 1.8;
  border-top: 1px solid var(--border);
  margin-top: -1px;
}
.faq-a p { margin: 0.75rem 0 0; }
.faq-a strong { color: var(--text); font-weight: 700; }
[dir="rtl"] .faq-q { text-align: right; }