/* === Wajih Theme — Root Variables & Reset === */
:root {
  --ink: #12111f;
  --ink-2: #1d1b2e;
  --paper: #f7f7f3;
  --white: #ffffff;
  --line: #dedee5;
  --muted: #747383;
  --purple: #7657ff;
  --purple-dark: #5a38ec;
  --lavender: #c9bcff;
  --mint: #c8ffd8;
  --lime: #deff6f;
  --orange: #ffb46a;
  --radius-lg: 34px;
  --radius-md: 24px;
  --radius-sm: 16px;
  --shadow: 0 30px 80px rgba(24, 19, 61, .12);
  --container: 1220px;
}

/* Hard reset — override any WP injected margins */
html, body {
  margin: 0 !important;
  padding: 0 !important;
}
/* WP admin bar offset fix (shown only to admins) */
html.admin-bar .site-header { top: 32px !important; }
@media screen and (max-width: 782px) {
  html.admin-bar .site-header { top: 46px !important; }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "IBM Plex Sans Arabic", Tahoma, Arial, sans-serif;
  font-weight: 400;
  font-synthesis: none;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
img, svg { max-width: 100%; }

.skip-link { position: fixed; inset: 10px auto auto 10px; z-index: 9999; padding: 10px 16px; background: #fff; transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.noise { pointer-events: none; position: fixed; inset: 0; z-index: 999; opacity: .025; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.container { width: min(calc(100% - 44px), var(--container)); margin-inline: auto; }
.section { padding: 120px 0; }
.section-dark { color: white; background: var(--ink); }

.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; color: white; border-bottom: 1px solid rgba(255,255,255,.12); transition: background .3s ease, box-shadow .3s ease, color .3s ease; }
.site-header.scrolled { background: rgba(247,247,243,.93); backdrop-filter: blur(18px); color: var(--ink); box-shadow: 0 8px 30px rgba(19,17,31,.08); border-color: rgba(20,18,32,.08); }
.nav-wrap { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 700; }
.brand-mark { width: 39px; height: 39px; color: var(--purple); }
.brand-word { font-size: 26px; line-height: 1; letter-spacing: normal; }
.desktop-nav { display: flex; align-items: center; gap: 31px; font-size: 14px; }
.desktop-nav a, .text-link { opacity: .78; transition: opacity .2s ease; }
.desktop-nav a:hover, .text-link:hover { opacity: 1; }
.nav-actions { display: flex; align-items: center; gap: 20px; }
.button { min-height: 54px; padding: 0 24px; border: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 13px; cursor: pointer; font-weight: 600; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }
.button:hover { transform: translateY(-2px); }
.button svg { width: 20px; height: 20px; }
.button-sm { min-height: 44px; padding: 0 19px; font-size: 13px; }
.button-dark { background: white; color: var(--ink); }
.site-header.scrolled .button-dark { background: var(--ink); color: white; }
.button-primary { background: var(--purple); color: white; box-shadow: 0 14px 36px rgba(118,87,255,.27); }
.button-primary:hover { background: var(--purple-dark); box-shadow: 0 18px 42px rgba(118,87,255,.35); }
.button-ghost { color: white; border: 1px solid rgba(255,255,255,.26); background: rgba(255,255,255,.04); }
.menu-toggle { display: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
.menu-toggle span { width: 18px; height: 1.5px; background: currentColor; }
.mobile-menu { display: none; }

.hero { position: relative; overflow: hidden; padding: 174px 0 0; min-height: 900px; background-image: radial-gradient(circle at 8% 18%, rgba(118,87,255,.13), transparent 28%), linear-gradient(180deg, #12111f, #151326); }
.hero-glow { position: absolute; border-radius: 50%; filter: blur(1px); opacity: .65; pointer-events: none; }
.glow-one { width: 530px; height: 530px; left: -280px; top: 80px; background: radial-gradient(circle, rgba(118,87,255,.27), transparent 68%); }
.glow-two { width: 430px; height: 430px; right: 30%; bottom: -300px; background: radial-gradient(circle, rgba(201,188,255,.14), transparent 68%); }
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 74px; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 20px; font-size: 13px; font-weight: 600; color: var(--purple-dark); }
.eyebrow.light { color: var(--lavender); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 6px rgba(200,255,216,.1); }
.hero h1 { margin: 0; font-size: clamp(56px, 6vw, 92px); line-height: 1.03; letter-spacing: normal; max-width: 720px; }
.hero h1 span { color: var(--lavender); }
.hero-lead { margin: 30px 0 0; max-width: 660px; font-size: 19px; color: rgba(255,255,255,.7); line-height: 1.9; }
.hero-audience { margin: 18px 0 0; max-width: 700px; font-size: 15px; font-weight: 500; color: rgba(255,255,255,.82); line-height: 1.85; padding-inline-start: 16px; border-inline-start: 2px solid var(--lavender); }
.hero-actions { display: flex; gap: 13px; margin-top: 38px; }
.hero-trust { margin-top: 38px; display: flex; align-items: center; gap: 15px; color: rgba(255,255,255,.52); font-size: 12px; }
.hero-trust i { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.28); }
.hero-system { direction: rtl; }
.system-shell { position: relative; padding: 22px; border-radius: 32px; background: linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.055)); border: 1px solid rgba(255,255,255,.15); box-shadow: 0 44px 120px rgba(0,0,0,.36); backdrop-filter: blur(18px); transform: perspective(1000px) rotateY(-4deg) rotateX(2deg); }
.system-shell::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: linear-gradient(135deg, rgba(201,188,255,.5), transparent 28%, transparent 65%, rgba(200,255,216,.25)); padding: 1px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.system-topbar { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.1); }
.system-title { display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(255,255,255,.74); }
.mini-mark { width: 25px; height: 25px; border-radius: 8px; background: var(--purple); position: relative; }
.mini-mark::after { content:""; position:absolute; inset:7px; border:2px solid white; border-radius:3px; }
.live-pill, .priority { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 0 11px; border-radius: 999px; font-size: 10px; }
.live-pill { color: var(--mint); background: rgba(200,255,216,.08); border: 1px solid rgba(200,255,216,.15); }
.live-pill span { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); }
.system-focus { margin-top: 18px; padding: 18px 19px; border-radius: 20px; background: rgba(12,11,28,.48); display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.system-focus small { display: block; font-size: 10px; color: rgba(255,255,255,.42); margin-bottom: 4px; }
.system-focus strong { font-size: 13px; font-weight: 500; }
.priority { color: #ffd0a5; background: rgba(255,180,106,.1); white-space: nowrap; }
.system-path { display: grid; grid-template-columns: 1fr .42fr 1fr .42fr 1fr .42fr 1fr; align-items: center; gap: 5px; margin: 34px 2px 28px; }
.node { text-align: center; opacity: .45; }
.node b { margin-inline: auto; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); font-size: 11px; }
.node span { margin-top: 8px; display: block; font-size: 10px; }
.node-active { opacity: 1; color: var(--lavender); }
.node-active b { background: var(--purple); color: white; border-color: transparent; box-shadow: 0 12px 28px rgba(118,87,255,.35); }
.path-line { height: 1px; background: rgba(255,255,255,.12); overflow: hidden; }
.path-line i { display: block; width: 45%; height: 100%; background: var(--purple); animation: pulse-line 2.7s ease-in-out infinite; }
@keyframes pulse-line { 0%,100% { transform: translateX(150%); } 50% { transform: translateX(-150%); } }
.system-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.metric-card { min-height: 122px; padding: 16px; border-radius: 18px; background: rgba(255,255,255,.065); border: 1px solid rgba(255,255,255,.08); }
.metric-card span { font-size: 10px; color: rgba(255,255,255,.45); }
.metric-card strong { display: block; margin-top: 10px; font-size: 29px; line-height: 1; }
.metric-card small { display: block; color: rgba(255,255,255,.4); font-size: 9px; margin-top: 12px; }
.meter { margin-top: 22px; height: 4px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--purple), var(--mint)); }
.system-footer { margin-top: 12px; padding: 14px 15px; border-radius: 17px; background: rgba(255,255,255,.04); display: flex; align-items: center; gap: 12px; }
.avatar-stack { direction: ltr; display: flex; }
.avatar-stack span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; margin-right: -7px; border: 2px solid #242137; background: #6250b8; font-size: 9px; }
.avatar-stack span:nth-child(2) { background: #31745a; }
.avatar-stack span:nth-child(3) { background: #925832; }
.system-footer p { margin: 0; font-size: 10px; color: rgba(255,255,255,.48); }
.hero-rail { position: relative; z-index: 2; margin-top: 88px; min-height: 104px; display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid rgba(255,255,255,.12); }
.hero-rail div { padding: 27px 23px; display: flex; align-items: center; gap: 12px; border-left: 1px solid rgba(255,255,255,.12); }
.hero-rail div:first-child { border-right: 1px solid rgba(255,255,255,.12); }
.hero-rail span { color: var(--lavender); font-size: 11px; }
.hero-rail b { font-size: 12px; font-weight: 500; color: rgba(255,255,255,.72); }

.intro-section { padding-top: 145px; padding-bottom: 110px; }
.intro-grid { display: grid; grid-template-columns: .34fr 1.66fr; gap: 50px; }
.section-label { font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 14px; }
.intro-copy h2, .section-head h2, .control-copy h2, .faq-intro h2 { margin: 0; font-size: clamp(42px, 5vw, 70px); line-height: 1.16; letter-spacing: normal; }
.intro-copy h2 span { color: #8b8996; font-weight: 500; }
.intro-copy p { max-width: 760px; margin: 32px 0 0; font-size: 19px; color: var(--muted); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 60px; }
.section-head h2 { font-size: clamp(42px,4.5vw,64px); }
.section-head > p { max-width: 400px; color: var(--muted); font-size: 16px; margin: 0 0 8px; }

.problems-section { padding-top: 95px; background: #fff; border-radius: 54px 54px 0 0; }
.problem-layout { display: grid; grid-template-columns: 1.06fr .94fr; gap: 20px; }
.problem-list { border-top: 1px solid var(--line); }
.problem-tab { width: 100%; min-height: 108px; padding: 22px 8px; border: 0; border-bottom: 1px solid var(--line); background: transparent; display: grid; grid-template-columns: 44px 1fr 30px; align-items: center; gap: 18px; text-align: right; cursor: pointer; transition: padding .25s ease, color .25s ease; }
.problem-tab:hover, .problem-tab.active { padding-right: 20px; color: var(--purple-dark); }
.tab-number { font-size: 12px; color: #a3a1ab; }
.problem-tab b { display: block; font-size: 20px; margin-bottom: 4px; }
.problem-tab small { color: var(--muted); font-size: 13px; }
.problem-tab i { font-style: normal; width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); opacity: 0; transform: scale(.7); transition: opacity .2s ease, transform .2s ease; }
.problem-tab.active i, .problem-tab:hover i { opacity: 1; transform: scale(1); }
.problem-answer { min-height: 610px; position: sticky; top: 110px; padding: 38px; border-radius: var(--radius-lg); background: var(--ink); color: white; overflow: hidden; box-shadow: var(--shadow); }
.problem-answer::after { content:""; position:absolute; width:340px; height:340px; left:-180px; bottom:-170px; border-radius:50%; background:radial-gradient(circle,rgba(118,87,255,.34),transparent 67%); }
.answer-top { position: relative; z-index: 2; display: flex; justify-content: space-between; font-size: 10px; color: rgba(255,255,255,.5); }
.answer-badge { min-height: 30px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 999px; background: rgba(255,255,255,.08); }
.answer-icon { width: 84px; height: 84px; margin-top: 54px; color: var(--lavender); }
.problem-answer h3 { position: relative; z-index: 2; margin: 29px 0 0; font-size: 32px; line-height: 1.45; max-width: 480px; }
.problem-answer p { position: relative; z-index: 2; color: rgba(255,255,255,.58); max-width: 500px; }
.problem-answer ul { position: relative; z-index: 2; list-style: none; padding: 0; margin: 24px 0 34px; display: grid; gap: 9px; font-size: 13px; color: rgba(255,255,255,.78); }
.problem-answer li::before { content:""; display:inline-block; width:6px; height:6px; margin-left:9px; border-radius:50%; background:var(--mint); }
.inline-link { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 15px; font-weight: 600; padding-bottom: 6px; border-bottom: 1px solid currentColor; }

.services-section { background: white; padding-top: 55px; }
.services-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.service-card { min-height: 530px; padding: 33px; border-radius: var(--radius-lg); background: #f1f1ed; border: 1px solid transparent; display: flex; flex-direction: column; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: rgba(118,87,255,.2); }
.service-card.featured { background: var(--purple); color: white; }
.service-card.ai-card { background: var(--ink); color: white; }
.service-meta { display: flex; justify-content: space-between; align-items: center; font-size: 11px; }
.service-meta span { opacity: .5; }
.service-meta b { font-weight: 500; opacity: .7; }
.service-icon { width: 104px; height: 104px; margin-top: 55px; position: relative; }
.scan-icon span { position:absolute; border:1px solid rgba(255,255,255,.45); border-radius:22px; }
.scan-icon span:nth-child(1) { inset:0; }
.scan-icon span:nth-child(2) { inset:15px; }
.scan-icon span:nth-child(3) { inset:31px; background:white; border:0; box-shadow:0 0 38px rgba(255,255,255,.35); }
.sprint-icon { border: 1px solid #b9b7c1; border-radius: 50%; }
.sprint-icon::before, .sprint-icon::after { content:""; position:absolute; background:var(--purple); border-radius:999px; }
.sprint-icon::before { width:70px; height:1px; top:51px; right:17px; transform:rotate(-34deg); }
.sprint-icon::after { width:18px; height:18px; top:23px; right:22px; }
.office-icon { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.office-icon span { border-radius:14px; background:#dedde1; }
.office-icon span:nth-child(2), .office-icon span:nth-child(3) { background:var(--purple); }
.ai-icon { width:104px; height:104px; display:grid; place-items:center; border-radius:32px; background:linear-gradient(135deg,var(--purple),#9d88ff); font-size:45px; color:white; box-shadow:0 20px 60px rgba(118,87,255,.35); }
.service-card h3 { margin: 24px 0 7px; font-size: 34px; }
.service-card p { color: var(--muted); max-width: 500px; margin: 0; }
.service-card.featured p, .service-card.ai-card p { color: rgba(255,255,255,.62); }
.service-card ul { list-style:none; padding:0; margin:25px 0 30px; display:grid; gap:8px; font-size:13px; }
.service-card li::before { content:"↗"; display:inline-block; margin-left:8px; color:var(--purple); }
.service-card.featured li::before, .service-card.ai-card li::before { color:var(--mint); }
.service-card a { margin-top:auto; display:flex; justify-content:space-between; align-items:center; padding-top:20px; border-top:1px solid rgba(18,17,31,.13); font-weight:600; }
.service-card.featured a, .service-card.ai-card a { border-color:rgba(255,255,255,.15); }

.method-section { overflow:hidden; }
.method-heading { max-width: 850px; margin-bottom: 84px; }
.method-heading h2 { margin:0; font-size:clamp(48px,5.7vw,76px); line-height:1.1; letter-spacing: normal; }
.method-heading p { color:rgba(255,255,255,.55); font-size:18px; }
.method-flow { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.method-flow::before { content:""; position:absolute; top:47px; right:0; left:0; height:1px; background:rgba(255,255,255,.18); }
.flow-step { position:relative; padding-left:28px; }
.flow-step > span { font-size:10px; color:rgba(255,255,255,.4); }
.flow-dot { position:relative; z-index:2; width:18px; height:18px; margin:26px 0 28px; border-radius:50%; background:#2e2b3e; border:5px solid var(--ink); box-shadow:0 0 0 1px rgba(255,255,255,.28); }
.flow-step.active .flow-dot { background:var(--mint); box-shadow:0 0 0 1px var(--mint),0 0 26px rgba(200,255,216,.4); }
.flow-step h3 { font-size:25px; margin:0 0 6px; }
.flow-step p { margin:0; color:rgba(255,255,255,.48); font-size:13px; max-width:210px; }
.operating-model { margin-top:105px; padding:48px; border-radius:var(--radius-lg); background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.1); display:grid; grid-template-columns:.8fr 1.2fr; align-items:center; gap:60px; }
.model-copy h3 { margin:0; font-size:38px; line-height:1.35; }
.model-copy p { color:rgba(255,255,255,.5); }
.model-map { direction:rtl; display:grid; grid-template-columns:1fr 70px 1.15fr 70px 1fr; align-items:center; gap:8px; }
.map-card { min-height:130px; padding:18px; border-radius:21px; display:flex; flex-direction:column; justify-content:center; text-align:center; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); }
.map-card small { color:rgba(255,255,255,.38); font-size:9px; }
.map-card b { font-size:22px; margin:5px 0; }
.map-card span { font-size:10px; color:rgba(255,255,255,.45); }
.wajih-card { background:var(--purple); box-shadow:0 20px 55px rgba(118,87,255,.25); }
.wajih-card small,.wajih-card span { color:rgba(255,255,255,.72); }
.map-link { height:1px; background:rgba(255,255,255,.23); position:relative; }
.map-link i { position:absolute; width:5px; height:5px; border-radius:50%; background:var(--lavender); top:-2px; animation:travel 2.3s linear infinite; }
.map-link i:nth-child(2){animation-delay:.7s}.map-link i:nth-child(3){animation-delay:1.4s}
@keyframes travel { from{right:0}to{right:100%} }
.expert-stack { display:grid; gap:7px; }
.expert-stack div { min-height:42px; padding:8px 10px; border-radius:12px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.08); display:flex; align-items:center; gap:8px; }
.expert-stack span { width:36px; font-size:8px; color:var(--lavender); }
.expert-stack b { font-size:10px; font-weight:500; }

.control-section { background:#ecece7; }
.control-grid { display:grid; grid-template-columns:.76fr 1.24fr; gap:70px; align-items:center; }
.control-copy h2 { font-size:clamp(42px,4.7vw,65px); }
.control-copy > p { color:var(--muted); font-size:17px; }
.control-points { display:grid; gap:0; margin-top:40px; border-top:1px solid #d0d0ca; }
.control-points div { min-height:62px; border-bottom:1px solid #d0d0ca; display:flex; align-items:center; gap:20px; }
.control-points span { font-size:10px; color:var(--purple-dark); }
.control-points b { font-size:14px; }
.dashboard { min-height:550px; display:grid; grid-template-columns:72px 1fr; border-radius:32px; overflow:hidden; background:#fff; box-shadow:0 34px 90px rgba(21,19,34,.12); transform:perspective(1200px) rotateY(2deg); }
.dash-sidebar { background:var(--ink); display:flex; flex-direction:column; align-items:center; padding:22px 0; gap:24px; }
.dash-logo { width:36px;height:36px;border-radius:12px;background:var(--purple);display:grid;place-items:center;color:white;font-weight:700;margin-bottom:15px; }
.dash-sidebar span { width:20px;height:20px;border-radius:7px;border:1px solid rgba(255,255,255,.25); }
.dash-sidebar span.active { background:var(--purple);border-color:var(--purple);box-shadow:0 0 0 6px rgba(118,87,255,.09); }
.dash-sidebar i { margin-top:auto; width:30px;height:1px;background:rgba(255,255,255,.1); }
.dash-main { padding:34px; min-width:0; }
.dash-head { display:flex;justify-content:space-between;align-items:center; }
.dash-head small { display:block;color:#97959f;font-size:10px; }
.dash-head strong { font-size:20px; }
.dash-head button { width:34px;height:34px;border-radius:50%;border:1px solid #e2e1e6;background:white; }
.dash-metrics { display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px; }
.dash-metrics > div { min-height:126px;padding:17px;border-radius:18px;background:#f6f6f3;border:1px solid #ededeb; }
.dash-metrics span { display:block;color:#8b8992;font-size:9px; }
.dash-metrics strong { display:block;font-size:31px;margin-top:8px; }
.dash-metrics small { display:block;color:#aaa8b1;font-size:8px;margin-top:8px; }
.dash-bottom { display:grid;grid-template-columns:1.15fr .85fr;gap:12px;margin-top:12px; }
.project-list,.activity-card { min-height:250px;padding:18px;border-radius:18px;border:1px solid #e9e8ec; }
.mini-title { display:flex;justify-content:space-between;align-items:center;margin-bottom:20px; }
.mini-title b { font-size:12px; }.mini-title span { font-size:8px;color:var(--purple-dark); }
.project-row { min-height:55px;display:grid;grid-template-columns:8px 1fr 34px;align-items:center;gap:10px;border-top:1px solid #efeff1; }
.project-row i { width:7px;height:26px;border-radius:99px; }.p-purple{background:var(--purple)}.p-green{background:#65cf92}.p-orange{background:var(--orange)}
.project-row b { display:block;font-size:10px; }.project-row small{display:block;font-size:8px;color:#9997a0}.project-row em{font-size:9px;font-style:normal;color:#7a7881;direction:ltr}
.bars { height:137px;display:flex;align-items:end;gap:8px;border-bottom:1px solid #ecebf0;padding:0 4px; }
.bars i { flex:1;min-width:5px;border-radius:6px 6px 0 0;background:linear-gradient(180deg,var(--purple),#c9bcff); }
.days { display:flex;justify-content:space-between;padding-top:8px;color:#aaa8b1;font-size:7px; }

.proof-section { background:#fff; }
.principles-grid { display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-right:1px solid var(--line); }
.principle { min-height:360px;padding:28px;border-left:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column; }
.principle > span { font-size:10px;color:#aaa8b2; }
.principle-symbol { width:72px;height:72px;margin-top:55px;border-radius:23px;border:1px solid var(--line);display:grid;place-items:center;font-size:29px;color:var(--purple-dark); }
.principle h3 { margin:30px 0 7px;font-size:23px; }.principle p{margin:0;color:var(--muted);font-size:13px; }

.faq-section { background:#fff;padding-top:40px; }
.faq-grid { display:grid;grid-template-columns:.7fr 1.3fr;gap:90px; }
.faq-intro h2 { font-size:clamp(43px,4.4vw,63px); }
.faq-intro p { color:var(--muted);max-width:390px;margin:24px 0 30px; }
.accordion { border-top:1px solid var(--line); }
.faq-item { border-bottom:1px solid var(--line); }
.faq-item button { width:100%;min-height:88px;padding:0;border:0;background:transparent;display:flex;align-items:center;justify-content:space-between;text-align:right;cursor:pointer;font-size:18px;font-weight:600; }
.faq-item button i { width:30px;height:30px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-style:normal;font-weight:400; }
.faq-answer { display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease; }
.faq-answer p { overflow:hidden;margin:0;color:var(--muted);max-width:650px; }
.faq-item.open .faq-answer { grid-template-rows:1fr; }
.faq-item.open .faq-answer p { padding-bottom:26px; }

.contact-section { padding:115px 0;position:relative;overflow:hidden; }
.contact-section::before { content:"";position:absolute;width:650px;height:650px;right:-350px;bottom:-400px;border-radius:50%;background:radial-gradient(circle,rgba(118,87,255,.28),transparent 65%); }
.contact-grid { position:relative;z-index:2;display:grid;grid-template-columns:.8fr 1.2fr;gap:90px;align-items:start; }
.contact-copy h2 { margin:0;font-size:clamp(46px,5vw,70px);line-height:1.2;letter-spacing: normal; }
.contact-copy > p { color:rgba(255,255,255,.58);font-size:17px;max-width:510px; }
.contact-details { margin-top:56px;display:grid;grid-template-columns:1fr 1fr;gap:12px; }
.contact-details a { padding:17px;border-radius:17px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09); }
.contact-details small { display:block;color:rgba(255,255,255,.4);font-size:9px; }.contact-details b{font-size:13px;}
.contact-form { padding:38px;border-radius:var(--radius-lg);background:#fff;color:var(--ink);box-shadow:0 40px 90px rgba(0,0,0,.22); }
.form-top { display:flex;justify-content:flex-start;padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:24px;font-size:12px; }
.contact-form label { display:block;font-size:11px;font-weight:600;margin-bottom:18px; }
.contact-form input,.contact-form select,.contact-form textarea { width:100%;margin-top:8px;border:1px solid #dfdee5;border-radius:14px;background:#f8f8f6;padding:13px 14px;outline:none;transition:border-color .2s ease,box-shadow .2s ease; }
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus { border-color:var(--purple);box-shadow:0 0 0 4px rgba(118,87,255,.1); }
.contact-form textarea { resize:vertical; }
.form-row { display:grid;grid-template-columns:1fr 1fr;gap:14px; }
.form-submit { width:100%;margin-top:3px; }
.form-note { display:block;text-align:center;color:#9997a1;margin-top:12px;font-size:9px; }

.site-footer { background:#0b0a13;color:white;padding:70px 0 26px; }
.footer-main { display:flex;justify-content:space-between;gap:50px;padding-bottom:60px; }
.footer-brand .brand-mark { color:var(--purple); }.footer-main > div:first-child p{color:rgba(255,255,255,.45);font-size:13px;}
.footer-links { display:grid;grid-template-columns:repeat(2,170px);gap:50px; }
.footer-links div { display:grid;align-content:start;gap:10px; }.footer-links b{font-size:12px;margin-bottom:8px}.footer-links a{font-size:12px;color:rgba(255,255,255,.48)}.footer-links a:hover{color:white}
.footer-bottom { padding-top:20px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;color:rgba(255,255,255,.35);font-size:10px; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .75s ease, transform .75s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1050px) {
  .desktop-nav,.text-link { display:none; }
  .menu-toggle { display:flex; }
  .mobile-menu { display:flex;position:fixed;inset:78px 0 auto 0;height:calc(100vh - 78px);padding:40px 24px;background:rgba(18,17,31,.98);color:white;flex-direction:column;gap:24px;font-size:24px;transform:translateY(-115%);transition:transform .35s ease;z-index:99; }
  .mobile-menu.open { transform:translateY(0); }.mobile-menu a:last-child{color:var(--lavender)}
  .hero { padding-top:145px; }.hero-grid{grid-template-columns:1fr;gap:65px}.hero-copy{text-align:center}.hero h1,.hero-lead,.hero-audience{margin-inline:auto}.hero-audience{text-align:start}.hero-actions,.hero-trust{justify-content:center}.hero-system{max-width:660px;margin:auto;width:100%}.system-shell{transform:none}
  .hero-rail { grid-template-columns:1fr 1fr; }.hero-rail div:nth-child(3){border-right:1px solid rgba(255,255,255,.12)}
  .intro-grid{grid-template-columns:1fr}.section-label{max-width:180px}
  .control-grid,.contact-grid{grid-template-columns:1fr;}.control-copy{max-width:720px}.dashboard{max-width:820px;width:100%;margin:auto}.contact-copy{max-width:720px}
  .operating-model{grid-template-columns:1fr}.model-map{max-width:720px;width:100%;margin:auto}
  .principles-grid{grid-template-columns:1fr 1fr}.faq-grid{grid-template-columns:1fr;gap:55px}
}

@media (max-width: 760px) {
  .section-kicker-lg { font-size: 14px; }
  .social-title.section-kicker-lg { font-size: 14px; }
  .container{width:min(calc(100% - 28px),var(--container))}.section{padding:82px 0}.nav-wrap{min-height:70px}.brand-word{font-size:22px}.brand-mark{width:34px;height:34px}.nav-actions .button-sm{display:none}.mobile-menu{top:70px}
  .hero{min-height:auto;padding-top:125px}.hero h1{font-size:51px;letter-spacing:normal}.hero-lead{font-size:16px}.hero-audience{font-size:14px;text-align:start}.hero-actions{flex-direction:column}.hero-actions .button{width:100%}.hero-trust{flex-wrap:wrap}.hero-system{margin-top:10px}.system-shell{padding:15px;border-radius:24px}.system-focus{align-items:flex-start;flex-direction:column}.system-path{grid-template-columns:1fr .22fr 1fr .22fr 1fr .22fr 1fr}.node b{width:34px;height:34px;border-radius:11px}.node span{font-size:8px}.system-cards{grid-template-columns:1fr 1fr}.hero-rail{margin-top:65px;grid-template-columns:1fr}.hero-rail div{border-right:1px solid rgba(255,255,255,.12)}
  .intro-section{padding-top:90px}.intro-copy h2,.section-head h2,.control-copy h2,.faq-intro h2{font-size:39px;letter-spacing:normal}.intro-copy p{font-size:16px}.section-head{display:block;margin-bottom:42px}.section-head>p{margin-top:18px}
  .problems-section{border-radius:34px 34px 0 0;padding-top:75px}.problem-layout{grid-template-columns:1fr}.problem-tab{min-height:94px;grid-template-columns:34px 1fr 25px}.problem-tab b{font-size:17px}.problem-tab small{font-size:11px}.problem-answer{position:relative;top:auto;min-height:540px;padding:28px}.problem-answer h3{font-size:27px}.answer-icon{margin-top:40px}
  .services-grid{grid-template-columns:1fr}.service-card{min-height:495px;padding:27px}.service-icon{margin-top:40px}.service-card h3{font-size:30px}
  .method-heading h2{font-size:44px}.method-flow{grid-template-columns:1fr 1fr;gap:45px 20px}.method-flow::before{display:none}.flow-dot{margin:15px 0 18px}.operating-model{padding:28px;margin-top:75px}.model-copy h3{font-size:30px}.model-map{grid-template-columns:1fr;gap:12px}.map-link{height:40px;width:1px;margin:auto}.map-link i{animation:travel-vertical 2.3s linear infinite}@keyframes travel-vertical{from{top:0;right:-2px}to{top:100%;right:-2px}}.expert-stack{grid-template-columns:repeat(3,1fr)}.expert-stack div{display:block;text-align:center}.expert-stack span{display:block;width:auto}.expert-stack b{font-size:8px}
  .control-grid{gap:45px}.dashboard{min-height:430px;grid-template-columns:50px 1fr}.dash-sidebar{padding:15px 0;gap:18px}.dash-main{padding:20px}.dash-head strong{font-size:15px}.dash-metrics{grid-template-columns:1fr 1fr}.dash-metrics>div:nth-child(3){display:none}.dash-bottom{grid-template-columns:1fr}.activity-card{display:none}
  .principles-grid{grid-template-columns:1fr}.principle{min-height:300px}.principle-symbol{margin-top:35px}
  .faq-item button{font-size:16px;min-height:78px}
  .contact-grid{gap:48px}.contact-copy h2{font-size:42px}.contact-details{grid-template-columns:1fr}.contact-form{padding:25px}.form-row{grid-template-columns:1fr}.footer-main{display:block}.footer-links{margin-top:42px;grid-template-columns:1fr 1fr}.footer-bottom{gap:15px;flex-direction:column}
}

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


/* Arabic typography safeguards */
:lang(ar) { letter-spacing: normal; }
.brand-word, h1, h2, h3, h4, strong, b { font-family: "IBM Plex Sans Arabic", Tahoma, Arial, sans-serif; }
.hero h1, .intro-copy h2, .section-head h2, .control-copy h2, .faq-intro h2, .method-heading h2, .contact-copy h2 { font-weight: 600; }
.brand-word { font-weight: 700; }



/* Bilingual navigation and typography */
html[lang="en"] body {
  font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", Arial, sans-serif;
  line-height: 1.65;
}
html[lang="en"] .brand-word,
html[lang="en"] h1,
html[lang="en"] h2,
html[lang="en"] h3,
html[lang="en"] h4,
html[lang="en"] strong,
html[lang="en"] b {
  font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", Arial, sans-serif;
}
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

.language-toggle {
  min-width: 62px;
  height: 40px;
  padding: 0 13px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.language-toggle:hover { transform: translateY(-1px); background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.34); }
.language-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.site-header.scrolled .language-toggle { border-color: rgba(18,17,31,.15); background: rgba(18,17,31,.04); }
.site-header.scrolled .language-toggle:hover { background: rgba(18,17,31,.08); }
.mobile-language-toggle { margin-top: auto; min-width: 132px; height: 46px; align-self: flex-start; }

/* Contact cards and communication icons */
.contact-details { margin-top: 46px; gap: 14px; }
.contact-details a.contact-detail-card {
  min-height: 86px;
  padding: 16px 17px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.1);
  transition: transform .22s ease, background .22s ease, border-color .22s ease;
}
.contact-details a.contact-detail-card:hover { transform: translateY(-2px); background: rgba(255,255,255,.085); border-color: rgba(255,255,255,.18); }
.contact-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.11);
}
.contact-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.contact-detail-copy { min-width: 0; display: grid; gap: 3px; }
.contact-details .contact-detail-copy small { display: block; color: rgba(255,255,255,.45); font-size: 10px; line-height: 1.35; }
.contact-details .contact-detail-copy b { display: block; color: #fff; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }

.submit-icon { width: 22px; height: 22px; display: inline-grid; place-items: center; }
.submit-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.footer-contact-link { display: inline-flex !important; align-items: center; gap: 9px !important; width: max-content; }
.footer-mini-icon { width: 18px; height: 18px; display: inline-grid; place-items: center; color: rgba(255,255,255,.78); flex: 0 0 18px; }
.footer-mini-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }


/* Header brand subtitle */
.brand-copy { display: grid; gap: 4px; line-height: 1; }
.brand-tagline { font-size: 9px; font-weight: 500; line-height: 1.15; opacity: .68; white-space: nowrap; }
.site-header.scrolled .brand-tagline { opacity: .62; }
html[lang="en"] .brand-tagline { font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", Arial, sans-serif; font-size: 8px; letter-spacing: .01em; }

/* Wajih social media links */
.social-block { margin-top: 22px; }
.social-title { margin: 0 0 11px; color: rgba(255,255,255,.62); font-size: 11px; font-weight: 600; }
.section-kicker-lg {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.55;
}
.social-title.section-kicker-lg {
  font-size: 14px;
}

.social-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.social-link {
  min-height: 50px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 15px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.82);
  font-size: 11px;
  font-weight: 600;
  transition: transform .22s ease, background .22s ease, border-color .22s ease, color .22s ease;
}
.social-link:hover { transform: translateY(-2px); background: rgba(118,87,255,.2); border-color: rgba(201,188,255,.35); color: #fff; }
.social-link svg { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.social-link svg.brand-fill { fill: currentColor; stroke: none; }

/* Contact form actions and live status */
.contact-details { grid-template-columns: 1fr; }
.contact-input { direction: auto; }
.form-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 3px; }
.form-actions .form-submit { margin-top: 0; }
.button-whatsapp {
  background: linear-gradient(135deg, var(--ink-2), var(--purple-dark));
  color: #fff;
  box-shadow: 0 14px 34px rgba(90,56,236,.24);
}
.button-whatsapp:hover {
  background: linear-gradient(135deg, var(--purple-dark), var(--purple));
  box-shadow: 0 18px 42px rgba(118,87,255,.32);
}
.form-status { min-height: 24px; margin-top: 13px; padding: 0 4px; font-size: 11px; line-height: 1.6; text-align: center; }
.form-status.success { color: #16784c; }
.form-status.error { color: #b03030; }
.form-status.loading { color: var(--purple-dark); }
.honeypot { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; }

@media (max-width: 760px) {
  .brand-tagline { font-size: 8px; }
  .form-actions { grid-template-columns: 1fr; }
  .social-link { min-height: 46px; padding: 0 8px; font-size: 10px; gap: 6px; }
  .social-link svg { width: 16px; height: 16px; flex-basis: 16px; }
}

/* Safe vertical and inline spacing */
.nav-actions { gap: 14px; }
.desktop-nav { gap: 28px; }
.eyebrow { margin-bottom: 18px; line-height: 1.45; }
.hero-lead { margin-top: 28px; line-height: 1.9; }
.hero-audience { line-height: 1.85; }
.intro-copy p { line-height: 1.9; }
.section-head > p,
.control-copy > p,
.faq-intro p,
.contact-copy > p,
.method-heading p,
.model-copy p,
.service-card p,
.problem-answer p { line-height: 1.85; }
.problem-answer p { margin: 14px 0 0; }
.service-card h3 { margin: 26px 0 10px; line-height: 1.28; }
.method-heading p { margin: 20px 0 0; }
.model-copy p { margin: 18px 0 0; }
.control-copy > p { margin: 20px 0 0; }
.faq-intro p { margin: 22px 0 30px; }
.contact-copy > p { margin: 20px 0 0; }
.form-top { margin-bottom: 28px; }
.contact-form label { margin-bottom: 20px; line-height: 1.55; }
.contact-form input,
.contact-form select,
.contact-form textarea { margin-top: 10px; line-height: 1.55; }
.form-row { gap: 18px; }
.form-note { margin-top: 14px; line-height: 1.65; }

/* Direction-aware refinements */
html[dir="ltr"] .problem-tab,
html[dir="ltr"] .faq-item button { text-align: left; }
html[dir="ltr"] .problem-tab:hover,
html[dir="ltr"] .problem-tab.active { padding-right: 8px; padding-left: 20px; }
html[dir="ltr"] .problem-answer li::before,
html[dir="ltr"] .service-card li::before { margin-left: 0; margin-right: 9px; }
html[dir="ltr"] .service-card li::before { margin-right: 8px; }
html[dir="ltr"] .contact-section::before { right: auto; left: -350px; }
html[dir="ltr"] .model-map { direction: ltr; }
html[dir="ltr"] .button > svg { transform: rotate(180deg); }
html[dir="ltr"] .hero h1 { font-size: clamp(52px,5.4vw,84px); line-height: 1.06; }
html[lang="en"] .service-card { min-height: 555px; }
html[lang="en"] .hero-lead { max-width: 690px; }
html[lang="en"] .problem-tab b { line-height: 1.35; }
html[lang="en"] .problem-tab small { display: block; margin-top: 5px; line-height: 1.5; }

@media (max-width: 1050px) {
  .nav-actions { gap: 11px; }
}
@media (max-width: 760px) {
  .language-toggle:not(.mobile-language-toggle) { min-width: 54px; padding: 0 10px; }
  .language-toggle:not(.mobile-language-toggle) svg { display: none; }
  .contact-details a.contact-detail-card { min-height: 78px; }
  html[dir="ltr"] .hero h1 { font-size: 47px; }
  html[lang="en"] .service-card { min-height: 510px; }
}