:root {

  --c-ink-950:#131011; --c-ink-900:#1A1617; --c-ink-800:#231F20; --c-ink-700:#342F30; --c-ink-600:#4B4546;
  --c-ink-500:#6B6465; --c-ink-400:#8F8889; --c-ink-300:#B5AFB0; --c-ink-200:#D6D1D2; --c-ink-100:#EAE6E6;
  --c-paper:#F6F3F2; --c-white:#FFFFFF;
  --c-cream:#F2ECE4; --c-cream-card:#FAF7F2;
  --c-red-400:#FA5159; --c-red-500:#ED1C24; --c-red-600:#C9151C; --c-red-700:#A41C21;

  --ink: #131011;
  --ink-2: #231F20;
  --muted-on-dark: #B5AFB0;
  --text-on-dark: #F6F3F2;
  --line-on-dark: rgba(246, 243, 242, .14);
  --red-on-dark: #FA5159;

  --gutter: clamp(20px, 5.5vw, 96px);
  --header-h: 88px;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .1, 1);
}

:root, :root[data-theme="light"] {
  --bg:#F6F3F2; --bg-alt:#EAE6E6; --surface:#FFFFFF;
  --text:#1A1617; --muted:#6B6465;
  --line:rgba(35,31,32,.14); --line-strong:rgba(35,31,32,.38);
  --accent:#ED1C24; --accent-hover:#C9151C; --accent-text:#C9151C; --on-accent:#FFFFFF; --focus:#C9151C;
  --tint:rgba(35,31,32,.045); --shadow:0 18px 50px rgba(35,31,32,.10);
  --glass-tint:rgba(246,243,242,.55); --glass-line:rgba(255,255,255,.7);
  color-scheme: light;
}
html[lang="ar"] { --font: 'IBM Plex Sans Arabic', 'Inter', system-ui, Arial, sans-serif; }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  transition: background-color .4s var(--ease-ui, ease), color .4s var(--ease-ui, ease);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
img, svg, canvas { display: block; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
#app { outline: none; min-height: 100vh; }

.code, [data-ltr] { direction: ltr; unicode-bidi: isolate; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 24px; border-radius: 4px;
  font-size: 15px; font-weight: 500; white-space: nowrap;
  transition: background-color .25s, border-color .25s, color .25s;
}
.btn-sm { height: 40px; padding: 0 18px; font-size: 14px; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { border: 1px solid var(--line-strong); color: var(--text); }
.btn-ghost:hover { border-color: var(--text); }
.btn .arr { display: inline-block; transition: transform .25s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }
[dir="rtl"] .btn .arr { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .arr { transform: scaleX(-1) translateX(3px); }

.eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent-text); margin: 0 0 clamp(22px, 3.5vh, 36px);
}
html[lang="ar"] .eyebrow { letter-spacing: 0; font-size: 15px; }

.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
html[lang="ar"] .w { padding-top: .18em; margin-top: -.18em; }
.wi { display: inline-block; will-change: transform; }

.page-stub {
  min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--header-h) + 56px) var(--gutter) 80px;
}
.page-stub h1 { margin: 0; font-weight: 300; font-size: clamp(40px, 6vw, 96px); letter-spacing: -.03em; }
html[lang="ar"] .page-stub h1 { letter-spacing: 0; font-weight: 400; }
.page-stub p { color: var(--muted); font-size: 18px; margin: 20px 0 0; }

.xp-failsafe [data-reveal], .xp-failsafe .wi { opacity: 1 !important; transform: none !important; }

.t-display { font-size: var(--fs-display); font-weight: var(--fw-light); line-height: var(--lh-tight); letter-spacing: var(--ls-display); margin: 0; }
.t-h1 { font-size: var(--fs-h1); font-weight: var(--fw-light); line-height: var(--lh-head); letter-spacing: var(--ls-head); margin: 0; }
.t-h2 { font-size: var(--fs-h2); font-weight: var(--fw-light); line-height: var(--lh-head); letter-spacing: var(--ls-head); margin: 0; }
.t-h3 { font-size: var(--fs-h3); font-weight: var(--fw-regular); line-height: 1.25; letter-spacing: -.01em; margin: 0; }
.t-lead { font-size: var(--fs-lead); font-weight: var(--fw-light); line-height: var(--lh-body); max-width: var(--measure); margin: 0; }
.t-body { font-size: var(--fs-body); line-height: var(--lh-body); max-width: var(--measure); margin: 0; }
.t-small { font-size: var(--fs-small); line-height: 1.5; margin: 0; }
.t-label { font-size: var(--fs-micro); font-weight: var(--fw-medium); letter-spacing: var(--ls-label); text-transform: uppercase; }
.t-muted { color: var(--muted); }

.section { padding: var(--section-y) var(--gutter); }
.wrap { width: 100%; max-width: var(--max-w); margin-inline: auto; }

.card {
  background: var(--surface-1); border: 1px solid var(--rim); border-radius: var(--r-lg);
  padding: var(--sp-6); transition: border-color var(--dur-ui) var(--ease-ui), background-color var(--dur-ui) var(--ease-ui);
}
.card:hover { border-color: var(--rim-strong); background: var(--surface-2); }
.chip {
  display: inline-flex; align-items: center; gap: var(--sp-2); height: 30px; padding: 0 var(--sp-4);
  border: 1px solid var(--rim); border-radius: var(--r-pill); font-size: var(--fs-micro); letter-spacing: .04em; color: var(--muted);
}
.glass {
  background: var(--glass-bg); border: 1px solid var(--rim); border-radius: var(--r-lg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow);
}
@supports not (backdrop-filter: blur(1px)) { .glass { background: rgba(35, 31, 32, .92); } }
.rule { width: 72px; height: 2px; background: var(--accent); border: 0; margin: 0; }

[dir="rtl"] .site-bg, [dir="rtl"] .site-fg { transform: scaleX(-1); }

#lang-veil { position: fixed; inset: 0; z-index: 70; display: none; overflow: hidden; pointer-events: none; }
#lang-veil i { display: block; background: var(--lv); opacity: 0; will-change: opacity, transform; }
.site-bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; display: block; }
.site-bg-grain {
  position: fixed; inset: -50%; z-index: -1; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.site-fg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; display: block; }

.btn-ignition {position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;
  min-height:max(54px,min(3vw,5.4vh));padding:0 max(38px,min(2.4vw,4.3vh));border-radius:999px;
  background:radial-gradient(ellipse at 50% 50%,#2a2224 0%,var(--c-ink-950) 70%);color:var(--c-paper);
  border:2px solid #3b3f46;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -2px 4px rgba(0,0,0,.6),0 0 0 1px rgba(15,17,21,.55),0 14px 30px -16px rgba(15,17,21,.65);
  font-size:max(13px,min(.78vw,1.4vh));font-weight:600;letter-spacing:.32em;text-transform:uppercase;text-decoration:none;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease,border-color .45s ease;}
.btn-ignition::before {content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,rgba(255,255,255,.14),transparent 38%,transparent 70%,rgba(255,255,255,.05));}
.btn-ignition .btn-ign-gl {position:absolute;inset:0;width:100%;height:100%;z-index:-1;border-radius:inherit;pointer-events:none;}
.btn-ignition .btn-label {position:relative;z-index:2;padding-inline-start:.32em;text-shadow:0 0 14px rgba(15,17,21,.9),0 0 3px rgba(15,17,21,.8);}
.btn-ignition:hover,.btn-ignition:focus-visible {transform:translateY(-1px);border-color:#4a4f57;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -2px 4px rgba(0,0,0,.6),0 0 0 1px rgba(15,17,21,.55),0 18px 42px -12px color-mix(in srgb,var(--c-red-500) 70%,transparent);}
.btn-ignition:active {transform:scale(.985);}
.btn-ignition:focus-visible {outline:2px solid var(--c-red-600);outline-offset:5px;}
html[lang="ar"] .btn-ignition {letter-spacing:0;font-size:max(14px,min(.85vw,1.5vh));}
html[lang="ar"] .btn-ignition .btn-label {padding-inline-start:0;}