*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Tokens: dark (default) ── */
:root {
  color-scheme: dark;
  --bg: #070B0A;
  --bg-2: #0B1210;
  --bg-3: #0F1815;
  --surface: rgba(255,255,255,0.03);
  --surface-2: rgba(255,255,255,0.055);
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.15);
  --text: #F2F5F3;
  --muted: #9AA5A0;
  --dim: #5F6A65;
  --accent: #1DB47A;
  --accent-bright: #3DD598;
  --accent-deep: #128A5C;
  --accent-dim: rgba(29,180,122,0.12);
  --accent-faint: rgba(29,180,122,0.05);
  --accent-border: rgba(29,180,122,0.35);
  --on-accent: #04110B;
  --gold: #E8C57A;
  --gold-dim: rgba(232,197,122,0.12);
  --gold-deep: #A8873F;
  --red: #F27272;
  --nav-bg: rgba(7,11,10,0.72);
  --grid-line: rgba(255,255,255,0.035);
  --track: rgba(255,255,255,0.07);
  --input-bg: rgba(255,255,255,0.04);
  --card-grad: linear-gradient(180deg, rgba(20,28,25,0.92), rgba(11,18,16,0.96));
  --shadow-lg: 0 40px 90px rgba(0,0,0,0.55);
  --shadow-card: 0 30px 80px rgba(0,0,0,0.5);
  --orb-opacity: 0.45;
  --radius: 14px;
  --radius-lg: 22px;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
  --arabic: 'IBM Plex Sans Arabic', 'Inter', sans-serif;
  --arabic-display: 'Noto Naskh Arabic', 'IBM Plex Sans Arabic', serif;
}

/* ── Tokens: light ── */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F6F8F7;
  --bg-2: #EEF2F0;
  --bg-3: #E4EAE7;
  --surface: rgba(10,25,20,0.03);
  --surface-2: rgba(10,25,20,0.055);
  --border: rgba(10,25,20,0.09);
  --border-strong: rgba(10,25,20,0.16);
  --text: #0E1513;
  --muted: #4F5D58;
  --dim: #7E8A85;
  --accent: #0F9D69;
  --accent-bright: #0B8A5C;
  --accent-deep: #0A6E49;
  --accent-dim: rgba(15,157,105,0.10);
  --accent-faint: rgba(15,157,105,0.06);
  --accent-border: rgba(15,157,105,0.35);
  --on-accent: #FFFFFF;
  --gold: #8F6F23;
  --gold-dim: rgba(143,111,35,0.12);
  --gold-deep: #C9A65A;
  --red: #C94B4B;
  --nav-bg: rgba(246,248,247,0.8);
  --grid-line: rgba(10,25,20,0.05);
  --track: rgba(10,25,20,0.08);
  --input-bg: #FFFFFF;
  --card-grad: linear-gradient(180deg, #FFFFFF, #F3F6F5);
  --shadow-lg: 0 30px 70px rgba(20,40,32,0.14);
  --shadow-card: 0 24px 60px rgba(20,40,32,0.12);
  --orb-opacity: 0.3;
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background 0.3s, color 0.3s;
}
body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0.03;
  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.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { text-decoration: none; color: inherit; }
.container { max-width: 1160px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.ar { font-family: var(--arabic); direction: rtl; unicode-bidi: isolate; }
.latin { font-family: var(--sans); direction: ltr; unicode-bidi: isolate; }
.accent { color: var(--accent-bright); }
.gold { color: var(--gold); }

svg.icon { width: 100%; height: 100%; display: block; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.orb { position: absolute; border-radius: 50%; filter: blur(100px); pointer-events: none; z-index: 0; opacity: var(--orb-opacity); }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; gap: 8px; font-family: inherit; font-weight: 700; font-size: 14px; padding: 13px 22px; border-radius: 11px; cursor: pointer; border: 1px solid transparent; transition: transform 0.18s, box-shadow 0.18s, background 0.2s, border-color 0.2s; white-space: nowrap; }
.btn svg { width: 16px; height: 16px; stroke-width: 2.2; }
.btn-primary { background: linear-gradient(135deg, var(--accent-bright), var(--accent-deep)); color: var(--on-accent); box-shadow: 0 8px 26px rgba(29,180,122,0.28); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(29,180,122,0.4); }
.btn-outline { background: var(--surface); color: var(--text); border-color: var(--border-strong); font-weight: 600; }
.btn-outline:hover { border-color: var(--accent-border); background: var(--surface-2); transform: translateY(-2px); }
.btn-lg { font-size: 15px; padding: 16px 28px; border-radius: 13px; }

/* ── Nav ── */
nav { position: sticky; top: 0; z-index: 100; background: var(--nav-bg); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); border-bottom: 1px solid var(--border); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 70px; gap: 16px; }
.logo { display: flex; align-items: center; color: var(--text); }
.logo-svg { height: 28px; width: auto; display: block; }
.foot-brand .logo-svg { height: 26px; }
.nav-links { display: flex; gap: 32px; list-style: none; }
.nav-links a { font-size: 14px; font-weight: 500; color: var(--muted); transition: color 0.2s; }
.nav-links a:hover { color: var(--text); }
.nav-right { display: flex; align-items: center; gap: 10px; }
.nav-right .btn { padding: 11px 20px; font-size: 13px; }
.lang-toggle { font-size: 13px; font-weight: 600; color: var(--muted); padding: 9px 13px; border: 1px solid var(--border); border-radius: 9px; transition: border-color 0.2s, color 0.2s; white-space: nowrap; line-height: 1.2; }
.lang-toggle:hover { color: var(--text); border-color: var(--accent-border); }
.theme-toggle { width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); display: grid; place-items: center; cursor: pointer; transition: border-color 0.2s, color 0.2s; flex-shrink: 0; }
.theme-toggle:hover { color: var(--text); border-color: var(--accent-border); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: none; }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 6px; background: none; border: none; }
.hamburger span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; }
.mobile-menu { display: none; flex-direction: column; gap: 4px; padding: 12px 24px 20px; border-top: 1px solid var(--border); }
.mobile-menu a { padding: 12px 4px; font-size: 15px; font-weight: 500; color: var(--muted); }
.mobile-menu.open { display: flex; }

/* ── Hero ── */
.hero { position: relative; padding: 88px 0 72px; overflow: hidden; }
.hero-orb-1 { width: 720px; height: 720px; top: -320px; left: 50%; transform: translateX(-60%); background: radial-gradient(circle, rgba(29,180,122,0.35), transparent 65%); }
.hero-orb-2 { width: 480px; height: 480px; top: 200px; inset-inline-end: -180px; background: radial-gradient(circle, rgba(232,197,122,0.18), transparent 65%); }
.hero-grid { position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, black 30%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, black 30%, transparent 100%); }
.hero-inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 7px; padding-inline-start: 9px; padding-inline-end: 14px; border: 1px solid var(--accent-border); background: var(--accent-dim); border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--accent-bright); margin-bottom: 26px; }
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-bright); box-shadow: 0 0 0 4px rgba(61,213,152,0.2); animation: pulse 2.2s infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 3px rgba(61,213,152,0.25);} 50% { box-shadow: 0 0 0 7px rgba(61,213,152,0.05);} }
.eyebrow .sep { width: 1px; height: 12px; background: var(--accent-border); }
.eyebrow .ar, .eyebrow .latin { color: var(--text); font-size: 13px; }
h1 { font-size: clamp(38px, 4.9vw, 62px); line-height: 1.04; letter-spacing: -0.035em; font-weight: 800; margin-bottom: 22px; }
h1 .serif { font-size: 1.08em; color: var(--accent-bright); white-space: nowrap; }
.hero-sub { font-size: 18px; color: var(--muted); max-width: 540px; line-height: 1.6; margin-bottom: 34px; }
.hero-sub strong { color: var(--text); font-weight: 600; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.hero-micro { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--dim); }
.hero-micro span { display: inline-flex; align-items: center; gap: 6px; }
.hero-micro svg { width: 14px; height: 14px; color: var(--accent); }

/* Dashboard mock */
.mock { position: relative; }
.mock-glow { position: absolute; inset: -40px; background: radial-gradient(circle at 50% 40%, rgba(29,180,122,0.18), transparent 60%); filter: blur(30px); z-index: 0; }
.dash { position: relative; z-index: 1; background: var(--card-grad); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.06); transform: perspective(1400px) rotateY(-6deg) rotateX(2deg); transition: transform 0.6s ease; }
.mock:hover .dash { transform: perspective(1400px) rotateY(-3deg) rotateX(1deg); }
.dash-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.dash-head h4 { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 0.02em; }
.dash-head .tag { font-size: 11px; font-weight: 600; color: var(--accent-bright); background: var(--accent-dim); border: 1px solid var(--accent-border); padding: 4px 9px; border-radius: 6px; display: inline-flex; gap: 6px; align-items: center; }
.dash-head .tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-bright); }
.fw-list { display: grid; gap: 10px; margin-bottom: 14px; }
.fw { display: grid; grid-template-columns: 96px 1fr 44px; gap: 12px; align-items: center; font-size: 12.5px; }
.fw .name { font-weight: 600; color: var(--text); font-family: var(--sans); }
.fw .bar { height: 7px; border-radius: 99px; background: var(--track); overflow: hidden; }
.fw .bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--accent-deep), var(--accent-bright)); transition: width 1.4s cubic-bezier(.2,.8,.2,1); }
.fw .bar.gold i { background: linear-gradient(90deg, var(--gold-deep), var(--gold)); }
.fw .pct { text-align: end; font-weight: 700; font-variant-numeric: tabular-nums; }
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.tile .k { font-size: 11px; color: var(--dim); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
.tile .v { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tile .v small { display: block; font-size: 12px; color: var(--muted); font-weight: 500; margin-top: 2px; line-height: 1.3; }
.tile.clock .v { color: var(--gold); }
.ai-card { background: linear-gradient(135deg, rgba(29,180,122,0.14), rgba(29,180,122,0.04)); border: 1px solid var(--accent-border); border-radius: 12px; padding: 12px 14px; display: grid; grid-template-columns: 28px 1fr; gap: 10px; }
.ai-card .ic { width: 28px; height: 28px; border-radius: 8px; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; }
.ai-card .ic svg { width: 15px; height: 15px; stroke-width: 2.2; }
.ai-card p { font-size: 12.5px; line-height: 1.5; color: var(--text); }
.ai-card p b { color: var(--accent-bright); font-weight: 600; font-family: var(--sans); }
.ai-card .meta { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }
.ai-card .meta span { font-size: 10.5px; color: var(--muted); border: 1px solid var(--border); border-radius: 5px; padding: 2px 7px; }
.ai-card .meta .ok { color: var(--accent-bright); border-color: var(--accent-border); }

/* ── Sector strip ── */
.sectors { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-2); padding: 26px 0; }
.sectors-inner { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; justify-content: center; }
.sectors-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--dim); font-weight: 600; text-align: center; }
.sector-chips { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.chip { font-size: 13px; font-weight: 500; color: var(--muted); padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); display: inline-flex; align-items: center; gap: 7px; }
.chip b { color: var(--text); font-weight: 600; }

/* ── Sections ── */
section { position: relative; padding: 104px 0; }
.section-head { max-width: 720px; margin-bottom: 56px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-bright); font-weight: 700; margin-bottom: 16px; display: inline-flex; align-items: center; gap: 10px; }
.label::before { content: ''; width: 20px; height: 1px; background: var(--accent); }
.center .label::before { display: none; }
h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; letter-spacing: -0.03em; font-weight: 800; margin-bottom: 18px; }
h2 .serif { color: var(--accent-bright); font-size: 1.06em; }
.section-head p { font-size: 17px; color: var(--muted); line-height: 1.65; }

/* Problem */
.pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pain { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 30px 28px; position: relative; overflow: hidden; transition: border-color 0.25s, transform 0.25s; }
.pain:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.pain .num { font-family: var(--serif); font-style: italic; font-size: 44px; color: var(--dim); line-height: 1; margin-bottom: 18px; }
.pain h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 10px; }
.pain p { font-size: 15px; color: var(--muted); line-height: 1.6; }
.pain .cost { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--border); font-size: 13px; color: var(--red); font-weight: 600; display: flex; gap: 8px; align-items: center; }
.pain .cost svg { width: 14px; height: 14px; flex-shrink: 0; }

.pivot { margin-top: 64px; text-align: center; }
.pivot p { font-size: clamp(22px, 2.6vw, 32px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; max-width: 820px; margin: 0 auto; }
.pivot p .serif { color: var(--accent-bright); }

/* How it works */
.how { background: var(--bg-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; position: relative; }
.steps::before { content: ''; position: absolute; top: 34px; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-border), var(--accent-border), transparent); }
.step { padding: 0 28px; position: relative; }
.step .badge { width: 68px; height: 68px; border-radius: 50%; background: var(--bg-3); border: 1px solid var(--accent-border); display: grid; place-items: center; font-weight: 800; font-size: 18px; color: var(--accent-bright); margin-bottom: 26px; position: relative; z-index: 1; box-shadow: 0 0 0 10px var(--bg-2); font-family: var(--sans); }
.step h3 { font-size: 21px; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 12px; }
.step p { font-size: 15px; color: var(--muted); line-height: 1.65; }
.step ul { list-style: none; margin-top: 16px; display: grid; gap: 8px; }
.step li { font-size: 13.5px; color: var(--text); display: flex; gap: 9px; align-items: flex-start; }
.step li svg { width: 15px; height: 15px; color: var(--accent-bright); flex-shrink: 0; margin-top: 3px; stroke-width: 2.4; }
.fw-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.fw-tags span { font-size: 11.5px; font-weight: 600; color: var(--muted); border: 1px solid var(--border); border-radius: 6px; padding: 3px 8px; background: var(--surface); }
.fw-tags span.hi { color: var(--accent-bright); border-color: var(--accent-border); background: var(--accent-dim); }

/* Platform */
.modules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.module { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px 26px; transition: border-color 0.25s, background 0.25s, transform 0.25s; position: relative; }
.module:hover { border-color: var(--accent-border); background: var(--surface-2); transform: translateY(-3px); }
.module .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--accent-dim); border: 1px solid var(--accent-border); color: var(--accent-bright); display: grid; place-items: center; margin-bottom: 20px; }
.module .ic svg { width: 20px; height: 20px; }
.module h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 9px; }
.module p { font-size: 14.5px; color: var(--muted); line-height: 1.6; }
.module .hl { margin-top: 16px; font-size: 13px; font-weight: 600; color: var(--gold); display: flex; gap: 7px; align-items: center; }
.module .hl svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Sovereign AI */
.sovereign { background: var(--bg-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); overflow: hidden; }
.sov-orb { width: 600px; height: 600px; inset-inline-start: -240px; bottom: -300px; background: radial-gradient(circle, rgba(29,180,122,0.28), transparent 65%); }
.sov-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.sov-copy p { font-size: 16.5px; color: var(--muted); line-height: 1.7; margin-bottom: 18px; }
.sov-copy p strong { color: var(--text); font-weight: 600; }
.sov-copy .btn { margin-top: 8px; }
.sov-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.stat { background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px 26px; position: relative; overflow: hidden; }
.stat::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 100% 0%, rgba(29,180,122,0.12), transparent 55%); pointer-events: none; }
.stat .v { font-size: 44px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--text); margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.stat .v.accent { color: var(--accent-bright); }
.stat .v small { font-size: 18px; font-weight: 700; color: var(--muted); }
.stat .k { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.stat .d { font-size: 13px; color: var(--muted); line-height: 1.5; }

/* Compare */
.compare-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
table.compare { width: 100%; border-collapse: collapse; min-width: 720px; }
.compare th, .compare td { padding: 18px 22px; text-align: start; font-size: 14.5px; border-bottom: 1px solid var(--border); }
.compare th { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--dim); font-weight: 700; background: var(--bg-2); }
.compare th.you { color: var(--accent-bright); background: var(--accent-dim); }
.compare td.you { background: var(--accent-faint); color: var(--text); font-weight: 500; }
.compare tr:last-child td { border-bottom: none; }
.compare td:first-child { color: var(--text); font-weight: 600; }
.compare td { color: var(--muted); }
.yes, .no, .meh { display: inline-flex; align-items: center; gap: 8px; }
.yes::before, .no::before, .meh::before { content: ''; width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; background-position: center; background-repeat: no-repeat; background-size: 11px; }
.yes::before { background-color: var(--accent-dim); border: 1px solid var(--accent-border); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231DB47A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.no::before { background-color: rgba(242,114,114,0.1); border: 1px solid rgba(242,114,114,0.3); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E05C5C' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E"); }
.meh::before { background-color: var(--gold-dim); border: 1px solid rgba(200,160,80,0.35); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B8944A' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); }

/* Security */
.security { background: var(--bg-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.sec-inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; }
.sec-intro { font-size: 16.5px; color: var(--muted); line-height: 1.7; margin-bottom: 8px; }
.sec-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sec-item { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.sec-item .ic { width: 34px; height: 34px; border-radius: 9px; background: var(--accent-dim); color: var(--accent-bright); display: grid; place-items: center; flex-shrink: 0; }
.sec-item .ic svg { width: 16px; height: 16px; }
.sec-item h4 { font-size: 14.5px; font-weight: 700; margin-bottom: 3px; }
.sec-item p { font-size: 13px; color: var(--muted); line-height: 1.5; }
.deploy { margin-top: 26px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.deploy div { padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-3); font-size: 13.5px; font-weight: 600; display: flex; gap: 10px; align-items: center; }
.deploy div i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-bright); flex-shrink: 0; }

/* FAQ */
.faq-inner { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items: start; }
.faq-inner .section-head { margin-bottom: 0; }
.faq-list { display: grid; gap: 10px; }
details { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; transition: border-color 0.2s; }
details[open] { border-color: var(--accent-border); }
summary { list-style: none; cursor: pointer; padding: 20px 22px; font-size: 16px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
summary::-webkit-details-marker { display: none; }
summary .plus { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border-strong); display: grid; place-items: center; flex-shrink: 0; color: var(--muted); transition: transform 0.25s, color 0.2s, border-color 0.2s; }
summary .plus svg { width: 13px; height: 13px; stroke-width: 2.4; }
details[open] summary .plus { transform: rotate(45deg); color: var(--accent-bright); border-color: var(--accent-border); }
details p { padding: 0 22px 22px; font-size: 15px; color: var(--muted); line-height: 1.65; }

/* CTA / Form */
.cta { background: var(--bg-2); border-top: 1px solid var(--border); overflow: hidden; }
.cta-orb { width: 800px; height: 500px; left: 50%; transform: translateX(-50%); top: -200px; background: radial-gradient(ellipse, rgba(29,180,122,0.3), transparent 65%); }
.cta-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.cta-copy h2 { margin-bottom: 18px; }
.cta-copy p { font-size: 17px; color: var(--muted); line-height: 1.65; margin-bottom: 30px; }
.expect { list-style: none; display: grid; gap: 14px; }
.expect li { display: flex; gap: 14px; align-items: flex-start; font-size: 15px; color: var(--text); }
.expect li .n { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-dim); border: 1px solid var(--accent-border); color: var(--accent-bright); font-size: 12px; font-weight: 800; display: grid; place-items: center; flex-shrink: 0; font-family: var(--sans); }
.expect li span small { display: block; color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.form-card { background: var(--card-grad); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: 34px; box-shadow: var(--shadow-card); }
.form-card h3 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 6px; }
.form-card .sub { font-size: 14px; color: var(--muted); margin-bottom: 24px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: grid; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.field label .opt { color: var(--dim); font-weight: 500; }
.field input, .field select, .field textarea { width: 100%; font-family: inherit; font-size: 14.5px; color: var(--text); background: var(--input-bg); border: 1px solid var(--border-strong); border-radius: 10px; padding: 13px 14px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; appearance: none; -webkit-appearance: none; }
.field input::placeholder, .field textarea::placeholder { color: var(--dim); }
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA5A0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; padding-inline-end: 40px; }
.field select option { background: var(--bg-3); color: var(--text); }
.field textarea { min-height: 90px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(29,180,122,0.18); }
.form-card .btn { width: 100%; justify-content: center; margin-top: 8px; }
.form-note { margin-top: 14px; font-size: 12.5px; color: var(--dim); text-align: center; display: flex; gap: 6px; justify-content: center; align-items: center; }
.form-note svg { width: 13px; height: 13px; color: var(--accent); flex-shrink: 0; }
.form-success { display: none; text-align: center; padding: 30px 10px; }
.form-success .ic { width: 56px; height: 56px; border-radius: 50%; background: var(--accent-dim); border: 1px solid var(--accent-border); color: var(--accent-bright); display: grid; place-items: center; margin: 0 auto 18px; }
.form-success .ic svg { width: 24px; height: 24px; stroke-width: 2.4; }
.form-success h3 { margin-bottom: 8px; }
.form-success p { color: var(--muted); font-size: 15px; }
.form-card.sent form { display: none; }
.form-card.sent .form-success { display: block; }

/* Footer */
footer { border-top: 1px solid var(--border); padding: 44px 0 32px; background: var(--bg); }
.foot-inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; flex-wrap: wrap; }
.foot-brand p { font-size: 13.5px; color: var(--muted); margin-top: 10px; max-width: 320px; line-height: 1.6; }
.foot-links { display: flex; gap: 56px; flex-wrap: wrap; }
.foot-col h5 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--dim); margin-bottom: 14px; font-weight: 700; }
.foot-col a { display: block; font-size: 14px; color: var(--muted); margin-bottom: 9px; transition: color 0.2s; }
.foot-col a:hover { color: var(--text); }
.foot-bottom { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--dim); }

/* Sticky mobile CTA */
.sticky-cta { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--nav-bg); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-top: 1px solid var(--border); }
.sticky-cta .btn { width: 100%; justify-content: center; }

/* Reveal */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.8,.2,1); }
.js .reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.1s; }
.reveal[data-delay="2"] { transition-delay: 0.2s; }
.reveal[data-delay="3"] { transition-delay: 0.3s; }

/* ── RTL / Arabic ── */
[dir="rtl"] body, body[dir="rtl"], html[lang="ar"] body { font-family: var(--arabic); }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4,
html[lang="ar"] .label, html[lang="ar"] .sectors-label, html[lang="ar"] .tile .k, html[lang="ar"] .compare th,
html[lang="ar"] .foot-col h5, html[lang="ar"] .dash-head h4, html[lang="ar"] .stat .v, html[lang="ar"] .pivot p,
html[lang="ar"] .form-card h3, html[lang="ar"] .tile .v { letter-spacing: 0; }
html[lang="ar"] h1 { line-height: 1.22; font-size: clamp(34px, 4.3vw, 54px); }
html[lang="ar"] h2 { line-height: 1.28; }
html[lang="ar"] .pivot p { line-height: 1.5; }
html[lang="ar"] .serif { font-family: var(--arabic-display); font-style: normal; font-weight: 500; }
html[lang="ar"] h1 .serif { font-size: 1.02em; }
html[lang="ar"] h2 .serif { font-size: 1.0em; }
html[lang="ar"] .pain .num { font-family: var(--serif); }
html[lang="ar"] .label, html[lang="ar"] .sectors-label, html[lang="ar"] .tile .k, html[lang="ar"] .compare th, html[lang="ar"] .foot-col h5 { text-transform: none; }
html[lang="ar"] .btn > svg, html[lang="ar"] .sov-copy .btn svg { transform: scaleX(-1); }
html[lang="ar"] .dash { transform: perspective(1400px) rotateY(6deg) rotateX(2deg); }
html[lang="ar"] .mock:hover .dash { transform: perspective(1400px) rotateY(3deg) rotateX(1deg); }
html[lang="ar"] .field select { background-position: left 14px center; }
html[lang="ar"] .hero-sub, html[lang="ar"] .section-head p, html[lang="ar"] .step p, html[lang="ar"] .module p, html[lang="ar"] .pain p, html[lang="ar"] details p, html[lang="ar"] .sov-copy p { line-height: 1.85; }
html[lang="ar"] .stat .v small { font-size: 20px; }

/* Responsive */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; gap: 48px; }
  .dash, .mock:hover .dash, html[lang="ar"] .dash, html[lang="ar"] .mock:hover .dash { transform: none; }
  .pain-grid, .modules, .steps { grid-template-columns: 1fr 1fr; }
  .steps::before { display: none; }
  .step { padding: 0; }
  .step .badge { box-shadow: none; }
  .sov-inner, .sec-inner, .faq-inner, .cta-inner { grid-template-columns: 1fr; gap: 44px; }
}
@media (max-width: 720px) {
  .nav-links, .nav-right .btn-outline, .nav-right .btn-primary { display: none; }
  .hamburger { display: flex; }
  .eyebrow { font-size: 11.5px; padding: 6px 12px 6px 8px; }
  .eyebrow .sep, .eyebrow .ar, .eyebrow .latin { display: none; }
  .tile .v { font-size: 20px; }
  .hero { padding: 56px 0 56px; }
  .hero-sub { font-size: 16.5px; }
  .pain-grid, .modules, .steps, .sov-stats, .sec-list, .deploy, .form-grid { grid-template-columns: 1fr; }
  .steps { gap: 36px; }
  section { padding: 72px 0; }
  .section-head { margin-bottom: 36px; }
  .form-card { padding: 24px; }
  .sticky-cta { display: block; }
  footer { padding-bottom: 96px; }
  .hero-ctas .btn { width: 100%; justify-content: center; }
}

/* ── Chat widget ── */
.wc-root { position: fixed; z-index: 200; inset-inline-end: 24px; bottom: 24px; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }

.wc-bubble { position: relative; width: 58px; height: 58px; border-radius: 50%; border: none; cursor: pointer; background: linear-gradient(135deg, var(--accent-bright), var(--accent-deep)); color: var(--on-accent); display: grid; place-items: center; box-shadow: 0 10px 30px rgba(29,180,122,0.36); transition: transform 0.2s, box-shadow 0.2s; flex-shrink: 0; }
.wc-bubble:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 14px 38px rgba(29,180,122,0.46); }
.wc-bubble svg { width: 24px; height: 24px; stroke-width: 2; position: absolute; transition: opacity 0.15s, transform 0.15s; }
.wc-ic-close { opacity: 0; transform: scale(0.6) rotate(-45deg); }
.wc-ic-chat { opacity: 1; transform: none; }
.wc-open .wc-bubble .wc-ic-chat { opacity: 0; transform: scale(0.6) rotate(45deg); }
.wc-open .wc-bubble .wc-ic-close { opacity: 1; transform: none; }
.wc-dot { position: absolute; top: 3px; inset-inline-end: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); border: 2px solid var(--bg); opacity: 0; transform: scale(0.5); transition: opacity 0.2s, transform 0.2s; }
.wc-nudge .wc-bubble { animation: wc-pulse 1.8s ease-in-out 2; }
.wc-nudge .wc-dot { opacity: 1; transform: scale(1); }
@keyframes wc-pulse { 0%,100% { box-shadow: 0 10px 30px rgba(29,180,122,0.36); } 50% { box-shadow: 0 10px 30px rgba(29,180,122,0.36), 0 0 0 10px rgba(29,180,122,0.14); } }

.wc-panel { width: 372px; max-width: calc(100vw - 32px); height: min(560px, 74vh); display: flex; flex-direction: column; background: var(--card-grad); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.wc-panel[hidden] { display: none; }
.wc-panel { background-color: var(--bg-2); }
body.wc-panel-open .sticky-cta { display: none; }

.wc-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.wc-head-mark { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--accent-bright), var(--accent-deep)); color: var(--on-accent); display: grid; place-items: center; font-weight: 800; font-size: 15px; flex-shrink: 0; }
.wc-head-txt { flex: 1; min-width: 0; }
.wc-head-txt h3 { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 2px; }
.wc-head-txt p { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.wc-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-bright); box-shadow: 0 0 0 3px rgba(61,213,152,0.18); flex-shrink: 0; }
.wc-close { width: 30px; height: 30px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; transition: background 0.15s, color 0.15s; }
.wc-close:hover { background: var(--surface-2); color: var(--text); }
.wc-close svg { width: 15px; height: 15px; }

.wc-body { flex: 1; overflow-y: auto; padding: 16px 16px 6px; display: flex; flex-direction: column; gap: 10px; }
.wc-msg { display: flex; }
.wc-msg-bot { justify-content: flex-start; }
.wc-msg-user { justify-content: flex-end; }
.wc-bubble-text { max-width: 84%; padding: 10px 13px; border-radius: 13px; font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; }
.wc-msg-bot .wc-bubble-text { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-end-start-radius: 3px; }
.wc-msg-user .wc-bubble-text { background: linear-gradient(135deg, var(--accent-bright), var(--accent-deep)); color: var(--on-accent); border-end-end-radius: 3px; }
.wc-typing { display: flex; align-items: center; gap: 4px; padding: 13px; }
.wc-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--dim); display: block; animation: wc-blink 1.1s infinite ease-in-out; }
.wc-typing i:nth-child(2) { animation-delay: 0.15s; }
.wc-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes wc-blink { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }

.wc-quick { display: flex; flex-wrap: wrap; gap: 7px; margin-inline-start: 2px; }
.wc-chip { font-size: 12.5px; font-weight: 600; color: var(--accent-bright); background: var(--accent-dim); border: 1px solid var(--accent-border); border-radius: 999px; padding: 7px 13px; cursor: pointer; transition: background 0.15s, transform 0.15s; font-family: inherit; }
.wc-chip:hover { background: var(--accent-border); transform: translateY(-1px); }

.wc-lead-card { max-width: 92%; background: var(--surface-2); border: 1px solid var(--border); border-radius: 13px; border-end-start-radius: 3px; padding: 14px; display: grid; gap: 9px; }
.wc-lead-card h4 { font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.wc-field input { width: 100%; font-family: inherit; font-size: 13px; color: var(--text); background: var(--input-bg); border: 1px solid var(--border-strong); border-radius: 9px; padding: 10px 12px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; }
.wc-field input::placeholder { color: var(--dim); }
.wc-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(29,180,122,0.18); }
.wc-lead-actions { display: flex; gap: 8px; margin-top: 2px; }
.wc-lead-actions button { flex: 1; font-family: inherit; font-size: 12.5px; font-weight: 700; padding: 9px 10px; border-radius: 9px; cursor: pointer; border: 1px solid transparent; transition: transform 0.15s, background 0.15s; }
.wc-lead-cancel { background: var(--surface); color: var(--muted); border-color: var(--border-strong); }
.wc-lead-cancel:hover { background: var(--surface-2); color: var(--text); }
.wc-lead-submit { background: linear-gradient(135deg, var(--accent-bright), var(--accent-deep)); color: var(--on-accent); }
.wc-lead-submit:hover { transform: translateY(-1px); }

.wc-input-row { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--border); flex-shrink: 0; }
.wc-input { flex: 1; min-width: 0; font-family: inherit; font-size: 13.5px; color: var(--text); background: var(--input-bg); border: 1px solid var(--border-strong); border-radius: 10px; padding: 11px 13px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; }
.wc-input::placeholder { color: var(--dim); }
.wc-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(29,180,122,0.18); }
.wc-send { width: 40px; height: 40px; border-radius: 10px; border: none; background: linear-gradient(135deg, var(--accent-bright), var(--accent-deep)); color: var(--on-accent); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; transition: transform 0.15s; }
.wc-send:hover { transform: translateY(-1px); }
.wc-send svg { width: 17px; height: 17px; }
html[lang="ar"] .wc-send svg { transform: scaleX(-1); }

.wc-full-form-hint { display: block; text-align: center; font-size: 11.5px; color: var(--dim); padding: 0 14px 12px; transition: color 0.15s; flex-shrink: 0; }
.wc-full-form-hint:hover { color: var(--accent-bright); }

@media (max-width: 720px) {
  .wc-root { bottom: 86px; }
}
@media (max-width: 480px) {
  .wc-root { inset-inline-end: 16px; }
  body.wc-panel-open .sticky-cta { display: none; }
  .wc-open .wc-bubble { opacity: 0; pointer-events: none; }
  .wc-panel { position: fixed; inset: 12px 12px calc(80px + env(safe-area-inset-bottom)) 12px; width: auto; max-width: none; height: auto; z-index: 1; }
}

/* ── Form error + WhatsApp CTA ── */
.form-error { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--red); background: rgba(242,114,114,0.08); border: 1px solid rgba(242,114,114,0.3); border-radius: 10px; padding: 10px 12px; }
.form-error[hidden] { display: none; }
.form-error a { text-decoration: underline; font-weight: 600; }
.wa-cta { margin-top: 22px; }
.wa-cta[hidden] { display: none; }
.btn:disabled { opacity: 0.7; cursor: progress; transform: none; }

/* ── Consent banner ── */
.consent { position: fixed; z-index: 210; inset-inline-start: 24px; bottom: 24px; max-width: 440px; background: var(--bg-2); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 18px 20px; display: grid; gap: 14px; }
.consent[hidden] { display: none; }
.consent p { font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.consent p a { color: var(--accent-bright); text-decoration: underline; font-weight: 600; }
.consent-actions { display: flex; gap: 10px; }
.consent-actions .btn { flex: 1; justify-content: center; padding: 11px 16px; font-size: 13px; }
@media (max-width: 900px) {
  .consent { inset-inline: 12px; max-width: none; bottom: 12px; }
  body.has-consent .wc-root { bottom: calc(24px + var(--consent-h, 0px) + 12px); }
}
@media (max-width: 720px) {
  .consent { bottom: calc(84px + env(safe-area-inset-bottom)); }
  body.has-consent .wc-root { bottom: calc(86px + var(--consent-h, 0px) + 12px); }
}

/* ── Contact row, footer company line, chat privacy note ── */
.cta-alt { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.cta-alt .btn[hidden] { display: none; }
.foot-company { font-size: 12.5px; color: var(--dim); margin-top: 10px; line-height: 1.6; }
.foot-company[hidden] { display: none; }
.foot-col a[hidden] { display: none; }
.form-note a, .wc-lead-note a { text-decoration: underline; font-weight: 600; }
.form-note { flex-wrap: wrap; }
.wc-lead-note { font-size: 11.5px; color: var(--dim); line-height: 1.5; }

/* ── Legal pages ── */
.legal { max-width: 820px; padding-top: 72px; padding-bottom: 96px; }
.legal h1 { font-size: clamp(32px, 4vw, 46px); margin-bottom: 10px; }
.legal-meta { font-size: 14px; color: var(--dim); margin-bottom: 14px; }
.legal-note { font-size: 14px; color: var(--muted); border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); padding: 14px 16px; margin: 22px 0 8px; line-height: 1.65; }
.legal h2 { font-size: 22px; letter-spacing: -0.02em; margin: 40px 0 12px; line-height: 1.3; }
.legal p, .legal li { font-size: 16px; color: var(--muted); line-height: 1.8; }
.legal p { margin-bottom: 14px; }
.legal ul { margin: 0 0 14px; padding-inline-start: 22px; display: grid; gap: 8px; }
.legal li::marker { color: var(--accent); }
.legal strong { color: var(--text); font-weight: 600; }
.legal a { color: var(--accent-bright); text-decoration: underline; }
.legal table { width: 100%; border-collapse: collapse; margin: 6px 0 18px; font-size: 14.5px; }
.legal th, .legal td { text-align: start; padding: 11px 12px; border-bottom: 1px solid var(--border); color: var(--muted); vertical-align: top; }
.legal th { color: var(--text); font-weight: 600; background: var(--surface); }
.todo { background: rgba(232,197,122,0.22); color: var(--gold); border-radius: 4px; padding: 0 4px; font-weight: 600; }
.legal-nav-back { font-size: 13px; padding: 10px 16px; }
@media (max-width: 720px) { .legal { padding-top: 48px; } .legal-table-wrap { overflow-x: auto; } }

/* ── Client logos ── */
.clients { padding: 6px 0 56px; text-align: center; }
.clients-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--dim); font-weight: 600; margin-bottom: 26px; }
html[lang="ar"] .clients-label { text-transform: none; letter-spacing: 0; font-size: 13px; }
.clients-row { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 28px 44px; }
.clients-row img { height: var(--h, 32px); width: auto; display: block; max-width: 100%; filter: brightness(0) invert(1); opacity: 0.6; transition: opacity 0.2s; }
:root[data-theme="light"] .clients-row img { filter: brightness(0); opacity: 0.55; }
.clients-row img:hover { opacity: 1; }
@media (max-width: 720px) {
  .clients { padding-bottom: 44px; }
  .clients-row { gap: 22px 32px; }
  .clients-row img { height: calc(var(--h, 32px) * 0.78); }
}

/* ── Nav: never wrap, collapse to the menu before it gets cramped ── */
.nav-links a { white-space: nowrap; }
@media (max-width: 1080px) { .nav-links { gap: 22px; } }
@media (max-width: 1000px) { .nav-links { display: none; } .hamburger { display: flex; } }

/* ── Product screenshots ── */
.product { padding-top: 80px; }
.shot-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto 28px; }
.shot-tabs button { font-family: inherit; font-size: 14px; font-weight: 600; color: var(--muted); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 999px; padding: 9px 18px; cursor: pointer; transition: color 0.15s, background 0.15s, border-color 0.15s; }
.shot-tabs button:hover { color: var(--text); border-color: var(--accent-border); }
.shot-tabs button[aria-selected="true"] { color: var(--on-accent); background: linear-gradient(135deg, var(--accent-bright), var(--accent-deep)); border-color: transparent; }
.shot-tabs button:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }
.shot-panel[hidden] { display: none; }
.shot-panel + .shot-panel { margin-top: 40px; }
.js .shot-panel + .shot-panel { margin-top: 0; }
.shot { max-width: 1080px; margin: 0 auto; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); overflow: hidden; background: #0A0F0D; box-shadow: var(--shadow-lg); }
.shot-bar { display: flex; align-items: center; gap: 7px; padding: 11px 16px; background: #131B18; border-bottom: 1px solid rgba(255,255,255,0.08); }
.shot-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.16); }
.shot-bar span { margin-inline-start: 10px; font-size: 12px; color: #8A958F; letter-spacing: 0.02em; }
.shot img { display: block; width: 100%; height: auto; aspect-ratio: 1917 / 1024; object-fit: cover; object-position: top; }
.shot figcaption { padding: 9px 16px; font-size: 11.5px; color: #7B867F; background: #0F1513; border-top: 1px solid rgba(255,255,255,0.06); text-align: end; }
.shot-desc { max-width: 720px; margin: 30px auto 0; text-align: center; }
.shot-desc h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 8px; }
.shot-desc p { font-size: 16px; color: var(--muted); line-height: 1.65; }
@media (max-width: 720px) { .product { padding-top: 56px; } .shot-tabs { gap: 6px; } .shot-tabs button { font-size: 13px; padding: 8px 14px; } .shot-bar span { font-size: 11px; } .shot-desc h3 { font-size: 18px; } .shot-desc p { font-size: 15px; } }

/* ── WhatsApp card (demo section) ── */
.wa-card { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 420px; padding: 14px 18px 14px 14px; border-radius: 16px; background: linear-gradient(135deg, rgba(37,211,102,0.14), rgba(37,211,102,0.05)); border: 1px solid rgba(37,211,102,0.4); color: var(--text); transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; }
.wa-card[hidden] { display: none; }
.wa-card:hover { transform: translateY(-2px); border-color: #25D366; box-shadow: 0 12px 30px rgba(37,211,102,0.22); }
.wa-card:focus-visible { outline: 2px solid #25D366; outline-offset: 3px; }
.wa-card-ic { width: 46px; height: 46px; border-radius: 50%; background: #25D366; color: #fff; display: grid; place-items: center; flex-shrink: 0; box-shadow: 0 6px 16px rgba(37,211,102,0.4); }
.wa-card-ic svg { width: 26px; height: 26px; fill: currentColor; }
.wa-card-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.wa-card-txt strong { font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; }
.wa-card-txt small { font-size: 13px; color: var(--muted); line-height: 1.4; }
.wa-card svg.wa-card-arrow { width: 18px; height: 18px; color: #25D366; flex-shrink: 0; transition: transform 0.2s; }
.wa-card:hover svg.wa-card-arrow { transform: translateX(3px); }
html[lang="ar"] .wa-card svg.wa-card-arrow { transform: scaleX(-1); }
html[lang="ar"] .wa-card:hover svg.wa-card-arrow { transform: scaleX(-1) translateX(3px); }
@media (max-width: 720px) { .wa-card { max-width: none; } }