/* ===========================================================
   AUDEXA · NOCTURNE — Dark fintech, kinetic, premium
   Bricolage Grotesque (display) · Geist (body) · Geist Mono · IBM Plex Arabic
   =========================================================== */

:root {
  /* Deep dark palette */
  --void: #060A14;
  --night: #0B1322;
  --ink: #0F1A2E;
  --mist: #131F35;
  --silver: #6E7E94;
  --pearl: #B8C4D9;
  --frost: #E8EDF7;
  --pure: #FFFFFF;

  /* Brand glow */
  --azure: #00B4F0;       /* logo blue */
  --cobalt: #0096D6;
  --cyan: #4FE0FF;        /* glow accent */
  --neon: #00E0FF;

  /* Surfaces */
  --surf: rgba(255,255,255,0.025);
  --surf-2: rgba(255,255,255,0.05);
  --surf-3: rgba(255,255,255,0.08);
  --line: rgba(255,255,255,0.08);
  --line-2: rgba(255,255,255,0.14);
  --glow-line: rgba(79,224,255,0.35);

  /* Typography */
  --f-display: "Bricolage Grotesque", -apple-system, sans-serif;
  --f-body: "Geist", -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "Courier New", monospace;
  --f-arabic: "IBM Plex Sans Arabic", "Segoe UI Arabic", sans-serif;

  /* Layout */
  --container: 1320px;
  --pad: clamp(20px, 4vw, 56px);
  --section-y: clamp(80px, 11vw, 160px);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

html[lang="ar"] {
  --f-display: "IBM Plex Sans Arabic", sans-serif;
  --f-body: "IBM Plex Sans Arabic", sans-serif;
}

/* -------- RESET -------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--frost);
  background: var(--void);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
em { font-style: italic; }
.mono { font-family: var(--f-mono); }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* -------- ATMOSPHERIC LAYERS -------- */
.grain {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9000;
  opacity: 0.10;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Custom cursor removed — using native cursor for better visibility */

/* =============================================================
   HEADER — glassmorphic
   ============================================================= */
.hdr {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 16px 0;
  transition: background .35s, backdrop-filter .35s, border-color .35s, padding .35s;
  border-bottom: 1px solid transparent;
}
.hdr.is-scrolled {
  padding: 12px 0;
  background: rgba(11, 19, 34, 0.72);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border-bottom-color: var(--line);
}
.hdr-inner {
  display: flex;
  align-items: center;
  gap: 32px;
}
.brand img {
  height: 36px;
  width: auto;
  transition: transform .3s;
}
.brand:hover img { transform: scale(0.96); }

.nav {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 32px;
}
.nav a {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--pearl);
  position: relative;
  padding: 6px 0;
  transition: color .25s;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease);
}
.nav a:hover { color: var(--frost); }
.nav a:hover::after { transform: scaleX(1); }

.hdr-right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.lang {
  display: flex;
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
}
.lang button {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 6px 11px;
  border-radius: 999px;
  color: var(--silver);
  transition: all .25s var(--ease);
  font-family: var(--f-mono);
}
.lang button.active {
  background: var(--frost);
  color: var(--void);
}

.cta-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  padding: 11px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--cyan) 0%, var(--azure) 100%);
  color: var(--void);
  position: relative;
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s;
  box-shadow: 0 0 24px rgba(0, 180, 240, 0.35), inset 0 1px 0 rgba(255,255,255,0.4);
}
.cta-pill svg { transition: transform .3s var(--ease); }
.cta-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 180, 240, 0.55), inset 0 1px 0 rgba(255,255,255,0.5);
}
.cta-pill:hover svg { transform: translateX(4px); }

.burger {
  display: none;
  width: 36px; height: 36px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  align-items: flex-end;
}
.burger span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--frost);
  transition: transform .3s var(--ease), opacity .2s;
}
.burger span:nth-child(2) { width: 14px; }
.burger.is-open span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); width: 22px; }
.burger.is-open span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); width: 22px; }

/* =============================================================
   HERO — JAW DROP
   ============================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  padding: 100px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
}

/* Animated mesh background */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.55;
  will-change: transform;
}
.orb-1 {
  width: 70vw; height: 70vw; max-width: 900px; max-height: 900px;
  background: radial-gradient(circle, var(--cobalt) 0%, transparent 65%);
  top: -20%; left: -15%;
  animation: orb1 26s ease-in-out infinite;
}
.orb-2 {
  width: 60vw; height: 60vw; max-width: 800px; max-height: 800px;
  background: radial-gradient(circle, var(--cyan) 0%, transparent 60%);
  top: 30%; right: -20%;
  animation: orb2 32s ease-in-out infinite;
  opacity: 0.4;
}
.orb-3 {
  width: 50vw; height: 50vw; max-width: 700px; max-height: 700px;
  background: radial-gradient(circle, #1F4A8E 0%, transparent 65%);
  bottom: -25%; left: 30%;
  animation: orb3 38s ease-in-out infinite;
  opacity: 0.5;
}
@keyframes orb1 {
  0%, 100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(8vw, 4vh) scale(1.08); }
  66% { transform: translate(-4vw, 8vh) scale(0.95); }
}
@keyframes orb2 {
  0%, 100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(-10vw, -6vh) scale(1.12); }
}
@keyframes orb3 {
  0%, 100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(6vw, -8vh) scale(1.15); }
}

.grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 75%);
}

#particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Top live status bar */
.hero-status {
  border-bottom: 1px solid var(--line);
  background: rgba(6, 10, 20, 0.4);
  backdrop-filter: blur(8px);
}
.hero-status-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 0;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  flex-wrap: wrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.hero-status-inner::-webkit-scrollbar { display: none; }
.stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  color: var(--pearl);
}
.stat-chip .lbl { color: var(--silver); }
.stat-chip .val { color: var(--frost); font-weight: 500; }
.dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--silver);
}
.dot.live {
  background: #4ADE80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
  animation: pulse-dot 1.6s ease-out infinite;
}
@keyframes pulse-dot {
  0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7); }
  100% { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); }
}
.trend.up { color: #4ADE80; }
.trend.down { color: #F87171; }
@media (max-width: 720px) {
  .hide-md { display: none !important; }
}

/* Main hero content */
.hero-main {
  flex: 1;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 60px 0;
  position: relative;
}

.hero-left { position: relative; z-index: 2; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pearl);
  margin-bottom: 32px;
  animation: fadeUp 1s var(--ease-out) both;
}
.eyebrow-bar {
  width: 32px; height: 1px;
  background: linear-gradient(to right, var(--cyan), transparent);
}

.hero-title {
  font-family: var(--f-display);
  font-weight: 300;
  font-variation-settings: "wdth" 100, "opsz" 96;
  font-size: clamp(56px, 9vw, 132px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--frost);
}
.hero-title .ln {
  display: block;
  overflow: hidden;
  /* Add internal padding so italic descenders (s, p, g) aren't clipped at the bottom */
  padding-bottom: 0.10em;
  margin-bottom: -0.10em;
}
.hero-title .ln > * {
  display: inline-block;
  /* Inner span also pads downward, since its own descenders need room before the parent clip */
  padding-bottom: 0.08em;
  animation: revealUp 1.1s var(--ease-out) both;
}
.hero-title .ln:nth-child(1) > * { animation-delay: 0.18s; }
.hero-title .ln:nth-child(2) > * { animation-delay: 0.36s; }
.hero-title .ln:nth-child(3) > * { animation-delay: 0.54s; }
.hero-title em {
  font-style: italic;
  font-weight: 200;
  font-variation-settings: "wdth" 110, "opsz" 96;
  background: linear-gradient(105deg, var(--cyan) 0%, var(--azure) 60%, var(--frost) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-title .glow {
  position: relative;
}
.hero-title .glow > span {
  background: linear-gradient(180deg, var(--frost) 0%, var(--pearl) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 80px rgba(79, 224, 255, 0.25);
}

@keyframes revealUp {
  from { transform: translateY(110%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes fadeUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.hero-lede {
  max-width: 540px;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.55;
  color: var(--pearl);
  margin-top: 28px;
  animation: fadeUp 1s var(--ease-out) 0.7s both;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
  animation: fadeUp 1s var(--ease-out) 0.85s both;
}

.btn-glow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 26px;
  background: linear-gradient(135deg, var(--cyan) 0%, var(--azure) 100%);
  color: var(--void);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.005em;
  position: relative;
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .35s;
  box-shadow: 0 0 30px rgba(79, 224, 255, 0.30), inset 0 1px 0 rgba(255,255,255,0.4);
}
.btn-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--frost) 0%, var(--cyan) 100%);
  opacity: 0;
  transition: opacity .3s;
}
.btn-glow > * { position: relative; z-index: 1; }
.btn-glow svg { transition: transform .3s var(--ease); }
.btn-glow:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(79, 224, 255, 0.5), inset 0 1px 0 rgba(255,255,255,0.5);
}
.btn-glow:hover::before { opacity: 1; }
.btn-glow:hover svg { transform: translateX(5px); }
.btn-glow.lg { padding: 20px 36px; font-size: 16px; }

.btn-outline {
  display: inline-flex;
  align-items: center;
  padding: 16px 26px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--frost);
  background: var(--surf);
  backdrop-filter: blur(8px);
  transition: all .3s var(--ease);
}
.btn-outline:hover {
  border-color: var(--cyan);
  background: rgba(79, 224, 255, 0.06);
  color: var(--cyan);
}
.btn-outline.lg { padding: 20px 32px; font-size: 16px; }

.hero-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  max-width: 540px;
  animation: fadeUp 1s var(--ease-out) 1s both;
}
.meta-num {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1;
  color: var(--frost);
  letter-spacing: -0.03em;
  font-variation-settings: "wdth" 100, "opsz" 96;
}
.meta-num span {
  font-size: 0.5em;
  color: var(--cyan);
  font-style: italic;
  margin-left: 1px;
}
.meta-lbl {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--silver);
  text-transform: lowercase;
  margin-top: 6px;
}

/* Right side: radar + floating badges */
.hero-right {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: fadeUp 1.2s var(--ease-out) 0.4s both;
}
.radar {
  width: 100%;
  max-width: 540px;
  height: auto;
  filter: drop-shadow(0 0 60px rgba(79, 224, 255, 0.25));
}
.ring-outer { animation: spin 32s linear infinite; }
.ring-mid { animation: spin-rev 22s linear infinite; }
@keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes spin-rev { from { transform: rotate(360deg); } to { transform: rotate(0); } }

.sweep { animation: sweep 5s linear infinite; transform-origin: 250px 250px; }
@keyframes sweep { from { transform: rotate(0); } to { transform: rotate(360deg); } }

.ping, .ping-2, .ping-3, .ping-4 {
  transform-origin: center;
  animation: ping 3s ease-out infinite;
}
.ping-2 { animation-delay: 0.7s; }
.ping-3 { animation-delay: 1.4s; }
.ping-4 { animation-delay: 2.1s; }
@keyframes ping {
  0% { transform: scale(0.4); opacity: 0.8; }
  100% { transform: scale(1.8); opacity: 0; }
}
.pulse-1 { animation: pulse 2s ease-out infinite; transform-origin: 250px 250px; }
.pulse-2 { animation: pulse 2s ease-out 1s infinite; transform-origin: 250px 250px; }
@keyframes pulse {
  0% { transform: scale(0.5); opacity: 0.8; }
  100% { transform: scale(2.2); opacity: 0; }
}

.float-badge {
  position: absolute;
  background: rgba(15, 26, 46, 0.7);
  backdrop-filter: blur(16px);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 14px 18px;
  font-family: var(--f-mono);
  min-width: 140px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
  animation: float-bg 6s ease-in-out infinite;
}
.fb-1 {
  top: 8%;
  left: -8%;
  animation-delay: 0s;
}
.fb-2 {
  bottom: 12%;
  right: -4%;
  animation-delay: 1.5s;
}
@keyframes float-bg {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.fb-label {
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--silver);
  margin-bottom: 4px;
}
.fb-val {
  font-family: var(--f-display);
  font-size: 30px;
  font-weight: 400;
  color: var(--frost);
  line-height: 1;
  letter-spacing: -0.02em;
}
.fb-val .pct {
  font-size: 14px;
  color: var(--cyan);
}
.fb-trend {
  font-size: 10px;
  color: var(--cyan);
  margin-top: 4px;
  letter-spacing: 0.05em;
}
.fb-trend.ok { color: #4ADE80; }

/* Bottom hero marquee */
.hero-marquee {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
  background: rgba(6, 10, 20, 0.5);
  backdrop-filter: blur(8px);
  overflow: hidden;
  position: relative;
}
.hero-marquee::before, .hero-marquee::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.hero-marquee::before { left: 0; background: linear-gradient(to right, var(--void), transparent); }
.hero-marquee::after { right: 0; background: linear-gradient(to left, var(--void), transparent); }
.marq-track {
  display: inline-flex;
  align-items: center;
  gap: 32px;
  white-space: nowrap;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--frost);
  animation: marq 35s linear infinite;
}
.marq-track .bullet {
  color: var(--cyan);
  font-size: 10px;
}
@keyframes marq {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Scroll indicator */
.scroll-down {
  position: absolute;
  bottom: 96px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--pearl);
  z-index: 3;
  animation: fadeUp 1s var(--ease-out) 1.2s both;
}
.sd-line {
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, var(--silver), transparent);
  position: relative;
  overflow: hidden;
}
.sd-line::after {
  content: "";
  position: absolute;
  top: -40px; left: 0;
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, transparent, var(--cyan));
  animation: scroll-arrow 1.8s var(--ease-out) infinite;
}
@keyframes scroll-arrow {
  0% { top: -40px; }
  100% { top: 40px; }
}

/* =============================================================
   SECTION COMMON
   ============================================================= */
.sec-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pearl);
  margin-bottom: 24px;
}
.tag-dot {
  width: 6px; height: 6px;
  background: var(--cyan);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--cyan);
}

.big-h2 {
  font-family: var(--f-display);
  font-weight: 300;
  font-variation-settings: "wdth" 100, "opsz" 96;
  font-size: clamp(36px, 5.4vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--frost);
}
.big-h2 em {
  font-style: italic;
  font-weight: 200;
  font-variation-settings: "wdth" 110, "opsz" 96;
  background: linear-gradient(105deg, var(--cyan) 0%, var(--azure) 70%, var(--frost) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.big-h2 > * { display: block; }
.big-h2.center { text-align: center; }

.sec-head { margin-bottom: 64px; max-width: 900px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head.center .sec-tag { justify-content: center; }
.sec-sub {
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.6;
  color: var(--pearl);
  margin-top: 20px;
  max-width: 580px;
}
.sec-sub.center { margin-left: auto; margin-right: auto; }

/* =============================================================
   STATS WALL
   ============================================================= */
.stats {
  padding: var(--section-y) 0 calc(var(--section-y) - 40px);
  border-top: 1px solid var(--line);
}
.stats-head {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 64px;
}
.stats-h2 {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--frost);
  font-variation-settings: "wdth" 100, "opsz" 96;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--surf) 0%, transparent 100%);
}
.stat-card {
  padding: 40px 32px;
  border-right: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.stat-card:last-child { border-right: none; }
.stat-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--cyan), transparent);
  opacity: 0;
  transition: opacity .4s, transform .4s;
  transform: scaleX(0.3);
}
.stat-card:hover::before { opacity: 1; transform: scaleX(1); }
.stat-num {
  font-family: var(--f-display);
  font-weight: 200;
  font-size: clamp(54px, 7vw, 100px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--frost);
  font-variation-settings: "wdth" 100, "opsz" 96;
  display: inline-block;
}
.stat-suffix {
  display: inline-block;
  font-family: var(--f-display);
  font-weight: 200;
  font-style: italic;
  font-size: clamp(28px, 3.6vw, 48px);
  color: var(--cyan);
  vertical-align: top;
  margin-top: 0.3em;
}
.stat-lbl {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--pearl);
  margin-top: 16px;
  font-family: var(--f-mono);
}

/* =============================================================
   BIG MARQUEE (kinetic strip)
   ============================================================= */
.big-marq {
  padding: 22px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent, rgba(79, 224, 255, 0.04), transparent);
}
.big-marq-track {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  white-space: nowrap;
  font-family: var(--f-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(22px, 3.4vw, 44px);
  letter-spacing: -0.02em;
  color: var(--frost);
  font-variation-settings: "wdth" 105, "opsz" 96;
  animation: marq-big 32s linear infinite;
}
.big-marq-track em {
  color: var(--cyan);
  font-style: normal;
}
@keyframes marq-big {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* =============================================================
   APPROACH (sticky storytelling)
   ============================================================= */
.approach { padding: var(--section-y) 0; }
.approach-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: start;
}
.approach-sticky {
  position: sticky;
  top: 120px;
  align-self: start;
}
.approach-sub {
  font-size: 17px;
  color: var(--pearl);
  line-height: 1.55;
  margin-top: 28px;
  max-width: 420px;
}
.approach-blocks {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ap-block {
  padding: 48px 0;
  border-top: 1px solid var(--line);
  position: relative;
  transition: padding .3s;
}
.ap-block:last-child { border-bottom: 1px solid var(--line); }
.ap-block::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 0;
  height: 1px;
  background: linear-gradient(to right, var(--cyan), transparent);
  transition: width .6s var(--ease);
}
.ap-block:hover::before { width: 100%; }
.ap-block:hover { padding-left: 8px; }
[dir="rtl"] .ap-block:hover { padding-left: 0; padding-right: 8px; }
.ap-year {
  font-family: var(--f-display);
  font-weight: 200;
  font-size: clamp(48px, 6vw, 88px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--frost);
  margin-bottom: 16px;
  font-variation-settings: "wdth" 100, "opsz" 96;
}
.ap-block.is-now .ap-year {
  background: linear-gradient(105deg, var(--cyan) 0%, var(--azure) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ap-block h3 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--frost);
  margin-bottom: 12px;
}
.ap-block p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--pearl);
  max-width: 540px;
}

/* =============================================================
   SERVICES — IMMERSIVE GRID
   ============================================================= */
.services {
  padding: var(--section-y) 0;
  background: linear-gradient(180deg, transparent 0%, rgba(11, 19, 34, 0.8) 50%, transparent 100%);
}
.svc-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 16px;
}
.svc-tile {
  position: relative;
  padding: 32px;
  background: linear-gradient(180deg, var(--surf-2) 0%, var(--surf) 100%);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  transition: transform .4s var(--ease), border-color .4s, background .4s;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 280px;
}
.svc-tile.featured {
  grid-row: 1 / 3;
  background: linear-gradient(135deg, rgba(0, 180, 240, 0.12) 0%, var(--surf-2) 60%);
  border-color: rgba(79, 224, 255, 0.25);
}
.svc-tile::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: linear-gradient(135deg, var(--cyan), transparent 50%);
  border-radius: 16px;
  opacity: 0;
  z-index: -1;
  transition: opacity .4s;
}
.svc-tile:hover {
  transform: translateY(-4px);
  border-color: rgba(79, 224, 255, 0.4);
  background: linear-gradient(180deg, rgba(79, 224, 255, 0.08) 0%, var(--surf) 100%);
}
.svc-tile-num {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--cyan);
}
.svc-tile h3 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--frost);
}
.svc-tile.featured h3 { font-size: 36px; }
.svc-tile p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--pearl);
  flex: 1;
}
.svc-tile.featured p { font-size: 16px; }
.svc-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.svc-list li {
  font-size: 13px;
  color: var(--silver);
  padding: 6px 0;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
}
.svc-list li::before {
  content: "";
  width: 4px; height: 4px;
  background: var(--cyan);
  border-radius: 50%;
  flex-shrink: 0;
}
.svc-tile-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cyan);
  align-self: flex-start;
  transition: gap .3s;
}
.svc-tile:hover .svc-tile-cta { gap: 14px; }
.svc-tile-cta svg { width: 14px; height: 14px; }

/* =============================================================
   PROCESS — 4 STEPS
   ============================================================= */
.process { padding: var(--section-y) 0; }
.process-rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
  margin-top: 80px;
}
.proc-line {
  position: absolute;
  top: 36px;
  left: 12.5%;
  right: 12.5%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--line-2) 20%, var(--line-2) 80%, transparent);
}
.proc-line::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 30%;
  height: 1px;
  background: linear-gradient(to right, var(--cyan), transparent);
  animation: line-flow 3s linear infinite;
}
@keyframes line-flow {
  0% { left: -30%; }
  100% { left: 100%; }
}
.proc-step {
  position: relative;
  padding: 0 8px;
  text-align: center;
}
.proc-num {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--cyan);
  margin-bottom: 18px;
}
.proc-dot {
  width: 16px; height: 16px;
  background: var(--void);
  border: 1px solid var(--cyan);
  border-radius: 50%;
  margin: 0 auto 32px;
  position: relative;
}
.proc-dot::before {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--cyan);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--cyan);
}
.proc-step h4 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 22px;
  color: var(--frost);
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.proc-step p {
  font-size: 13px;
  color: var(--pearl);
  line-height: 1.55;
}

/* =============================================================
   TECH SHOWCASE
   ============================================================= */
.tech {
  padding: var(--section-y) 0;
  position: relative;
  overflow: hidden;
}
.tech::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -10%;
  width: 80vw;
  height: 80vw;
  background: radial-gradient(circle, rgba(0, 180, 240, 0.08), transparent 60%);
  filter: blur(80px);
  pointer-events: none;
}
.tech-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 80px;
  align-items: center;
  position: relative;
}
.tech-text > p {
  font-size: 17px;
  color: var(--pearl);
  line-height: 1.6;
  margin: 28px 0 36px;
  max-width: 480px;
}
.tech-features {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 36px;
}
.tech-features li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--frost);
  padding: 12px 16px;
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: 8px;
  transition: all .3s;
}
.tech-features li:hover {
  border-color: var(--cyan);
  background: rgba(79, 224, 255, 0.04);
  transform: translateX(4px);
}
[dir="rtl"] .tech-features li:hover { transform: translateX(-4px); }
.tech-features svg {
  width: 20px; height: 20px;
  color: var(--cyan);
  flex-shrink: 0;
}

/* Mock dashboard */
.tech-mock { perspective: 1400px; }
.mock {
  background: linear-gradient(180deg, rgba(15, 26, 46, 0.9) 0%, var(--ink) 100%);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  overflow: hidden;
  transform: rotateY(-8deg) rotateX(4deg) translateZ(0);
  transition: transform .8s var(--ease);
  box-shadow:
    0 40px 80px rgba(0, 0, 0, 0.5),
    0 0 80px rgba(0, 180, 240, 0.15);
}
.mock:hover { transform: rotateY(-4deg) rotateX(2deg); }
.mock-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  background: rgba(0,0,0,0.3);
  border-bottom: 1px solid var(--line);
}
.mb-d {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
}
.mb-d:first-child { background: #FF5F57; }
.mb-d:nth-child(2) { background: #FEBC2E; }
.mb-d:nth-child(3) { background: #28C840; }
.mock-url {
  flex: 1;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--silver);
  text-align: center;
  padding-right: 60px;
}
[dir="rtl"] .mock-url { padding-left: 60px; padding-right: 0; }
.mock-tag {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  background: rgba(74, 222, 128, 0.15);
  color: #4ADE80;
  padding: 3px 8px;
  border-radius: 3px;
  border: 1px solid rgba(74, 222, 128, 0.3);
}
.mock-body {
  display: grid;
  grid-template-columns: 180px 1fr;
  min-height: 380px;
}
.mock-side {
  border-right: 1px solid var(--line);
  padding: 22px 14px;
  background: rgba(0,0,0,0.15);
}
[dir="rtl"] .mock-side { border-right: none; border-left: 1px solid var(--line); }
.ms-logo {
  display: flex;
  gap: 4px;
  align-items: end;
  height: 16px;
  margin-bottom: 24px;
  padding: 0 10px;
}
.ms-logo span {
  width: 4px;
  background: var(--cyan);
  border-radius: 1px;
}
.ms-logo span:nth-child(1) { height: 60%; }
.ms-logo span:nth-child(2) { height: 100%; }
.ms-logo span:nth-child(3) { height: 80%; }
.ms-item {
  font-size: 12px;
  color: var(--silver);
  padding: 9px 12px;
  border-radius: 4px;
  margin-bottom: 2px;
  font-weight: 500;
}
.ms-item.active {
  background: rgba(79, 224, 255, 0.08);
  color: var(--cyan);
  border-left: 2px solid var(--cyan);
}
[dir="rtl"] .ms-item.active { border-left: none; border-right: 2px solid var(--cyan); }

.mock-content { padding: 22px; }
.mc-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.mc-stat {
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px 14px;
}
.mc-lbl {
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--silver);
  margin-bottom: 6px;
  font-family: var(--f-mono);
}
.mc-val {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 22px;
  color: var(--frost);
  letter-spacing: -0.01em;
  line-height: 1;
}
.mc-val span { font-size: 11px; color: var(--pearl); margin-left: 2px; font-style: italic; }
.mc-trend { font-size: 10px; margin-top: 4px; font-family: var(--f-mono); }
.mc-trend.ok { color: #4ADE80; }
.mc-trend.warn { color: #FEBC2E; }

.mc-chart {
  height: 100px;
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-bottom: 18px;
  overflow: hidden;
  position: relative;
}
.mc-chart svg { width: 100%; height: 100%; }
.chart-line {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  filter: drop-shadow(0 0 4px var(--cyan));
}
.mock.is-visible .chart-line { animation: drawLine 2.4s var(--ease-out) forwards; }
.chart-fill { opacity: 0; transition: opacity 1.2s 1s; }
.mock.is-visible .chart-fill { opacity: 1; }
@keyframes drawLine { to { stroke-dashoffset: 0; } }

.mc-rows { display: flex; flex-direction: column; gap: 6px; }
.mc-doc {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 12px;
}
.mc-doc .dot { width: 6px; height: 6px; }
.mc-doc .dot.ok { background: #4ADE80; }
.mc-doc .dot.warn { background: #FEBC2E; }
.mc-doc .dn { color: var(--frost); }
.mc-doc .dt { color: var(--silver); font-family: var(--f-mono); font-size: 10px; }

/* =============================================================
   TEAM
   ============================================================= */
.team { padding: var(--section-y) 0; }
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto;
  gap: 16px;
  margin-bottom: 32px;
}
.tm-card {
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .35s, transform .35s;
}
.tm-card:hover {
  border-color: var(--line-2);
  transform: translateY(-3px);
}
.tm-feature {
  grid-row: 1 / 3;
  grid-column: 1 / 3;
  display: grid;
  grid-template-columns: 200px 1fr;
}
.tm-photo {
  background: linear-gradient(135deg, var(--ink) 0%, var(--mist) 100%);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.tm-feature .tm-photo {
  aspect-ratio: auto;
  height: 100%;
}
.tm-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(79, 224, 255, 0.20), transparent 50%);
}
.tm-mono {
  font-family: var(--f-display);
  font-weight: 200;
  font-size: 64px;
  letter-spacing: -0.04em;
  color: var(--frost);
  font-variation-settings: "wdth" 100, "opsz" 96;
  position: relative;
}
.tm-feature .tm-mono { font-size: 96px; }
.tm-info { padding: 24px 22px; }
.tm-role {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 8px;
}
.tm-info h3 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--frost);
}
.tm-feature .tm-info h3 { font-size: 32px; margin-bottom: 14px; }
.tm-info p {
  margin-top: 12px;
  font-size: 14px;
  color: var(--pearl);
  line-height: 1.55;
}
.team-note {
  text-align: center;
  font-size: 14px;
  color: var(--silver);
  font-style: italic;
  max-width: 600px;
  margin: 0 auto;
}

/* =============================================================
   TESTIMONIALS
   ============================================================= */
.testi { padding: var(--section-y) 0; }
.testi-head { margin-bottom: 64px; max-width: 800px; }
.testi-rail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.testi-card {
  padding: 36px 32px;
  background: linear-gradient(180deg, var(--surf-2) 0%, var(--surf) 100%);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: all .35s var(--ease);
}
.testi-card:hover {
  border-color: var(--cyan);
  background: linear-gradient(180deg, rgba(79, 224, 255, 0.06) 0%, var(--surf) 100%);
  transform: translateY(-4px);
}
.quote {
  width: 32px; height: 32px;
  color: var(--cyan);
  opacity: 0.5;
}
.testi-card p {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 19px;
  line-height: 1.45;
  color: var(--frost);
  letter-spacing: -0.01em;
  flex: 1;
  font-variation-settings: "wdth" 100, "opsz" 24;
}
.testi-who {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.tw-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--frost);
}
.tw-role {
  font-size: 12px;
  color: var(--silver);
  margin-top: 2px;
}

/* =============================================================
   NEWS
   ============================================================= */
.news { padding: var(--section-y) 0; }
.news-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  flex-wrap: wrap;
  gap: 32px;
  margin-bottom: 64px;
}
.link-arrow {
  font-size: 14px;
  font-weight: 600;
  color: var(--cyan);
  border-bottom: 1px solid var(--cyan);
  padding-bottom: 4px;
  transition: gap .3s;
}
.link-arrow.sm { font-size: 12px; border: none; padding: 0; }
.link-arrow:hover { letter-spacing: 0.02em; }

.news-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 16px;
}
.news-c {
  padding: 28px 26px;
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: all .35s;
  cursor: pointer;
}
.news-c:hover {
  border-color: var(--cyan);
  background: rgba(79, 224, 255, 0.04);
  transform: translateY(-3px);
}
.news-feature {
  grid-row: 1 / 3;
  background: linear-gradient(135deg, rgba(0, 180, 240, 0.08) 0%, var(--surf) 70%);
  border-color: rgba(79, 224, 255, 0.20);
}
.news-feature h3 { font-size: 30px; }
.news-feature p { color: var(--pearl); }
.news-tag {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
  font-weight: 600;
}
.news-c h3 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--frost);
}
.news-c p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--pearl);
  flex: 1;
}
.news-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--silver);
}

/* =============================================================
   FAQ
   ============================================================= */
.faq { padding: var(--section-y) 0; }
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 80px;
  align-items: start;
}
.faq-side {
  position: sticky;
  top: 120px;
}
.faq-list { display: flex; flex-direction: column; gap: 0; }
.faq-item {
  border-top: 1px solid var(--line);
  transition: background .3s;
}
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 28px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 20px;
  color: var(--frost);
  letter-spacing: -0.01em;
  transition: color .3s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--cyan); }
.chev {
  font-family: var(--f-mono);
  font-size: 22px;
  font-weight: 300;
  color: var(--cyan);
  transition: transform .35s var(--ease);
  flex-shrink: 0;
}
.faq-item[open] .chev { transform: rotate(45deg); }
.faq-a {
  padding: 0 0 28px 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--pearl);
  max-width: 720px;
  animation: fadeUp .4s var(--ease-out);
}

/* =============================================================
   MASSIVE CTA
   ============================================================= */
.cta-banner {
  padding: var(--section-y) 0;
  position: relative;
  text-align: center;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cta-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.cta-orb {
  position: absolute;
  top: 50%; left: 50%;
  width: 100vw;
  height: 100vw;
  max-width: 1000px;
  max-height: 1000px;
  background: radial-gradient(circle, rgba(0, 180, 240, 0.18) 0%, transparent 60%);
  filter: blur(60px);
  transform: translate(-50%, -50%);
  animation: cta-pulse 6s ease-in-out infinite;
}
@keyframes cta-pulse {
  0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
}
.cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--pearl);
  margin-bottom: 24px;
}
.cta-title {
  font-family: var(--f-display);
  font-weight: 200;
  font-size: clamp(56px, 11vw, 180px);
  line-height: 0.94;
  letter-spacing: -0.05em;
  color: var(--frost);
  font-variation-settings: "wdth" 100, "opsz" 96;
  margin-bottom: 24px;
}
.cta-title em {
  font-style: italic;
  font-weight: 200;
  background: linear-gradient(105deg, var(--cyan) 0%, var(--azure) 70%, var(--frost) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variation-settings: "wdth" 110, "opsz" 96;
}
.cta-title > * { display: block; }
.cta-banner > .container > p {
  font-size: 17px;
  color: var(--pearl);
  margin-bottom: 36px;
}
.cta-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* =============================================================
   CONTACT
   ============================================================= */
.contact { padding: var(--section-y) 0; }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
}
.contact-side > p { margin: 28px 0 40px; max-width: 460px; color: var(--pearl); }
.contact-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.contact-list li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.cl-lbl {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--silver);
  text-transform: uppercase;
}
.cl-val {
  font-family: var(--f-display);
  font-size: 19px;
  font-weight: 400;
  color: var(--frost);
  letter-spacing: -0.005em;
}
.cl-val.mono { font-family: var(--f-mono); font-size: 16px; }

/* Form */
.form { display: flex; flex-direction: column; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form label > span {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--silver);
}
.form input, .form select, .form textarea {
  font-family: var(--f-body);
  font-size: 15px;
  color: var(--frost);
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 14px 16px;
  outline: none;
  transition: all .3s;
  width: 100%;
}
.form input:focus, .form select:focus, .form textarea:focus {
  border-color: var(--cyan);
  background: rgba(79, 224, 255, 0.04);
}
.form textarea { resize: vertical; min-height: 120px; }
.form select {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%234FE0FF' stroke-width='1.5' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
}
/* Fix native dropdown options (white-on-white bug) */
.form select option {
  background-color: #0F1A2E;
  color: #E8EDF7;
  padding: 12px;
}
[dir="rtl"] .form select { background-position: left 16px center; padding-left: 44px; padding-right: 16px; }
.form .btn-glow { align-self: flex-start; margin-top: 8px; }
.form-note { font-size: 12px; color: var(--silver); margin-top: 8px; }

/* =============================================================
   FOOTER
   ============================================================= */
.ftr {
  padding: 80px 0 32px;
  border-top: 1px solid var(--line);
  background: rgba(6, 10, 20, 0.6);
}
.ftr-top {
  display: grid;
  grid-template-columns: 1.4fr 2fr;
  gap: 64px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 32px;
}
.ftr-brand img {
  height: 44px;
  width: auto;
  margin-bottom: 18px;
}
.ftr-brand p {
  font-size: 14px;
  color: var(--pearl);
  line-height: 1.55;
  max-width: 360px;
  margin-bottom: 20px;
}
.ftr-social { display: flex; gap: 10px; }
.ftr-social a {
  width: 36px; height: 36px;
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--pearl);
  transition: all .3s;
}
.ftr-social a:hover { border-color: var(--cyan); color: var(--cyan); }
.ftr-social svg { width: 16px; height: 16px; }

.ftr-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.ftr-cols h5 {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--frost);
  margin-bottom: 16px;
  font-weight: 600;
}
.ftr-cols a {
  display: block;
  font-size: 14px;
  color: var(--pearl);
  padding: 5px 0;
  transition: color .3s, padding .3s;
}
.ftr-cols a:hover { color: var(--cyan); padding-left: 4px; }
[dir="rtl"] .ftr-cols a:hover { padding-left: 0; padding-right: 4px; }
.ftr-cols p { font-size: 13px; color: var(--pearl); margin-bottom: 14px; }

.ftr-news {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  background: var(--surf);
  transition: border-color .3s;
}
.ftr-news:focus-within { border-color: var(--cyan); }
.ftr-news input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 12px 18px;
  font-size: 13px;
  font-family: var(--f-body);
  color: var(--frost);
  outline: none;
}
.ftr-news button {
  padding: 0 18px;
  background: linear-gradient(135deg, var(--cyan), var(--azure));
  color: var(--void);
  font-size: 16px;
  font-weight: 700;
  transition: filter .3s;
}
.ftr-news button:hover { filter: brightness(1.15); }

.ftr-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12px;
  color: var(--silver);
  font-family: var(--f-mono);
  letter-spacing: 0.04em;
}
.ftr-legal { display: flex; gap: 24px; }
.ftr-legal a { color: var(--silver); transition: color .3s; }
.ftr-legal a:hover { color: var(--cyan); }

/* =============================================================
   REVEAL ANIMATIONS
   ============================================================= */
[data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
[data-reveal-stagger].is-visible > * { opacity: 1; transform: translateY(0); }
[data-reveal-stagger].is-visible > *:nth-child(1) { transition-delay: 0s; }
[data-reveal-stagger].is-visible > *:nth-child(2) { transition-delay: .07s; }
[data-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: .14s; }
[data-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: .21s; }
[data-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: .28s; }
[data-reveal-stagger].is-visible > *:nth-child(6) { transition-delay: .35s; }

/* =============================================================
   RTL
   ============================================================= */
[dir="rtl"] body { letter-spacing: 0; }

/* CRITICAL: Arabic typography fixes — IBM Plex Sans Arabic isn't a variable
   font with wdth/opsz axes, and Arabic must NOT have negative letter-spacing
   (it breaks character connections). Headings also need more vertical room. */
html[lang="ar"] .hero-title,
html[lang="ar"] .big-h2,
html[lang="ar"] .stats-h2,
html[lang="ar"] .cta-title,
html[lang="ar"] .ap-year,
html[lang="ar"] .meta-num,
html[lang="ar"] .stat-num,
html[lang="ar"] .stat-suffix,
html[lang="ar"] .tm-mono,
html[lang="ar"] .fb-val,
html[lang="ar"] .mc-val,
html[lang="ar"] .cl-val,
html[lang="ar"] .display-h2,
html[lang="ar"] .display-h3,
html[lang="ar"] .marq-track,
html[lang="ar"] .big-marq-track,
html[lang="ar"] .testi-card p,
html[lang="ar"] .ap-block h3,
html[lang="ar"] .news-c h3,
html[lang="ar"] .svc-tile h3,
html[lang="ar"] .proc-step h4,
html[lang="ar"] .tm-info h3,
html[lang="ar"] .faq-item summary {
  letter-spacing: 0 !important;
  font-variation-settings: normal !important;
  font-style: normal;
}
html[lang="ar"] .hero-title,
html[lang="ar"] .big-h2,
html[lang="ar"] .stats-h2,
html[lang="ar"] .cta-title {
  line-height: 1.3;
  font-weight: 500;
}
html[lang="ar"] .hero-title em,
html[lang="ar"] .big-h2 em,
html[lang="ar"] .cta-title em {
  font-weight: 700;
}
html[lang="ar"] .marq-track,
html[lang="ar"] .big-marq-track {
  font-style: normal;
  font-weight: 500;
}
html[lang="ar"] .ap-year,
html[lang="ar"] .meta-num,
html[lang="ar"] .stat-num,
html[lang="ar"] .fb-val,
html[lang="ar"] .mc-val,
html[lang="ar"] .tm-mono {
  font-weight: 600;
  line-height: 1.1;
}
html[lang="ar"] .testi-card p {
  line-height: 1.7;
  font-weight: 400;
}
[dir="rtl"] .eyebrow,
[dir="rtl"] .sec-tag,
[dir="rtl"] .meta-lbl,
[dir="rtl"] .stat-lbl,
[dir="rtl"] .stat-chip,
[dir="rtl"] .ms-item,
[dir="rtl"] .mc-lbl,
[dir="rtl"] .news-tag,
[dir="rtl"] .tm-role,
[dir="rtl"] .cl-lbl,
[dir="rtl"] .form label > span,
[dir="rtl"] .ftr-cols h5,
[dir="rtl"] .ftr-bottom,
[dir="rtl"] .news-meta,
[dir="rtl"] .proc-num {
  letter-spacing: 0;
}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 1100px) {
  .nav { display: none; }
  .nav.is-open {
    display: flex;
    position: fixed;
    inset: 70px 0 0 0;
    background: rgba(6, 10, 20, 0.96);
    backdrop-filter: blur(24px);
    flex-direction: column;
    padding: 40px var(--pad);
    gap: 4px;
    z-index: 99;
  }
  .nav.is-open a {
    font-family: var(--f-display);
    font-size: 28px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
  }
  .burger { display: flex; }
  .cta-pill span { display: none; }
  .cta-pill { padding: 11px; }

  .hero-main {
    grid-template-columns: 1fr;
    gap: 60px;
    text-align: left;
  }
  .hero-right {
    max-width: 460px;
    margin: 0 auto;
  }
  .stats-head { grid-template-columns: 1fr; gap: 24px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-card:nth-child(2) { border-right: none; }
  .stat-card:nth-child(3) { border-top: 1px solid var(--line); }
  .stat-card:nth-child(4) { border-top: 1px solid var(--line); }
  .approach-grid, .tech-grid, .contact-grid, .faq-grid, .ftr-top {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .approach-sticky, .faq-side { position: relative; top: 0; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-tile.featured { grid-row: auto; grid-column: 1 / 3; }
  .news-grid { grid-template-columns: 1fr 1fr; }
  .news-feature { grid-row: auto; grid-column: 1 / 3; }
  .testi-rail { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .tm-feature { grid-row: auto; grid-column: 1 / 3; }
  .process-rail { grid-template-columns: repeat(2, 1fr); gap: 48px 24px; }
  .proc-line { display: none; }
  .ftr-cols { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .hero-main { padding: 32px 0; }
  .hero-meta-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .stats-grid { grid-template-columns: 1fr; }
  .stat-card { border-right: none; border-top: 1px solid var(--line); }
  .stat-card:first-child { border-top: none; }
  .svc-grid, .team-grid, .news-grid { grid-template-columns: 1fr; }
  .svc-tile.featured, .news-feature, .tm-feature { grid-column: auto; }
  .tm-feature { grid-template-columns: 1fr; }
  .tm-feature .tm-photo { aspect-ratio: 16/9; }
  .process-rail { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .ftr-cols { grid-template-columns: 1fr; }
  .float-badge { display: none; }
  .ftr-bottom { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =============================================================
   THEME TOGGLE BUTTON
   ============================================================= */
.theme-toggle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--surf);
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--frost);
  transition: all .3s var(--ease);
  position: relative;
}
.theme-toggle:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  transform: rotate(20deg);
}
.theme-toggle svg {
  width: 18px;
  height: 18px;
  position: absolute;
  transition: opacity .3s, transform .4s var(--ease);
}
.theme-toggle .ti-sun { opacity: 0; transform: rotate(-90deg) scale(0.5); }
.theme-toggle .ti-moon { opacity: 1; transform: rotate(0) scale(1); }
[data-theme="light"] .theme-toggle .ti-sun { opacity: 1; transform: rotate(0) scale(1); }
[data-theme="light"] .theme-toggle .ti-moon { opacity: 0; transform: rotate(90deg) scale(0.5); }

/* =============================================================
   LIGHT THEME (overrides)
   ============================================================= */
[data-theme="light"] {
  --void: #F5F2EB;
  --night: #FBF8F1;
  --ink: #FFFFFF;
  --mist: #F0EAD8;
  --silver: #5A6470;
  --pearl: #2A323D;
  --frost: #0F1A2E;
  --pure: #0F1A2E;

  --azure: #0096D6;
  --cobalt: #006FA8;
  --cyan: #006FA8;
  --neon: #0080C0;

  --surf: rgba(15, 26, 46, 0.025);
  --surf-2: rgba(15, 26, 46, 0.05);
  --surf-3: rgba(15, 26, 46, 0.08);
  --line: rgba(15, 26, 46, 0.10);
  --line-2: rgba(15, 26, 46, 0.18);
  --glow-line: rgba(0, 111, 168, 0.30);
}
[data-theme="light"] body {
  background: var(--void);
  color: var(--frost);
}
[data-theme="light"] .grain { opacity: 0.06; mix-blend-mode: multiply; }
[data-theme="light"] .hdr.is-scrolled {
  background: rgba(245, 242, 235, 0.85);
}
[data-theme="light"] .brand img,
[data-theme="light"] .ftr-brand img {
  filter: none;
}
/* Dark logo only used in dark theme */
.brand img.is-dark-logo { display: none; }
.brand img.is-light-logo { display: inline-block; }
[data-theme="dark"] .brand img.is-light-logo,
:root:not([data-theme="light"]) .brand img.is-light-logo { display: none; }
[data-theme="dark"] .brand img.is-dark-logo,
:root:not([data-theme="light"]) .brand img.is-dark-logo { display: inline-block; }
.ftr-brand img.is-dark-logo { display: none; }
.ftr-brand img.is-light-logo { display: inline-block; }
[data-theme="dark"] .ftr-brand img.is-light-logo,
:root:not([data-theme="light"]) .ftr-brand img.is-light-logo { display: none; }
[data-theme="dark"] .ftr-brand img.is-dark-logo,
:root:not([data-theme="light"]) .ftr-brand img.is-dark-logo { display: inline-block; }

[data-theme="light"] .orb { opacity: 0.20; filter: blur(140px); }
[data-theme="light"] .orb-1 { background: radial-gradient(circle, rgba(0, 150, 214, 0.6) 0%, transparent 65%); }
[data-theme="light"] .orb-2 { background: radial-gradient(circle, rgba(79, 224, 255, 0.5) 0%, transparent 60%); }
[data-theme="light"] .orb-3 { background: radial-gradient(circle, rgba(0, 100, 180, 0.4) 0%, transparent 65%); }
[data-theme="light"] .grid-overlay {
  background-image:
    linear-gradient(to right, rgba(15,26,46,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,26,46,0.04) 1px, transparent 1px);
}
[data-theme="light"] .hero-status {
  background: rgba(255, 255, 255, 0.6);
}
[data-theme="light"] .hero-marquee {
  background: rgba(255, 255, 255, 0.4);
}
[data-theme="light"] .hero-marquee::before { background: linear-gradient(to right, var(--void), transparent); }
[data-theme="light"] .hero-marquee::after { background: linear-gradient(to left, var(--void), transparent); }
[data-theme="light"] .hero-title em,
[data-theme="light"] .big-h2 em,
[data-theme="light"] .cta-title em {
  background: linear-gradient(105deg, #006FA8 0%, #0096D6 60%, #1A2238 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-theme="light"] .ap-block.is-now .ap-year {
  background: linear-gradient(105deg, #006FA8 0%, #0096D6 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-theme="light"] .stats-grid {
  background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, transparent 100%);
}
[data-theme="light"] .svc-tile {
  background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.4) 100%);
}
[data-theme="light"] .svc-tile.featured {
  background: linear-gradient(135deg, rgba(0, 150, 214, 0.08) 0%, rgba(255,255,255,0.6) 60%);
  border-color: rgba(0, 150, 214, 0.25);
}
[data-theme="light"] .svc-tile:hover {
  background: linear-gradient(180deg, rgba(0, 150, 214, 0.05) 0%, rgba(255,255,255,0.6) 100%);
}
[data-theme="light"] .testi-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.4) 100%);
}
[data-theme="light"] .testi-card:hover {
  background: linear-gradient(180deg, rgba(0, 150, 214, 0.05) 0%, rgba(255,255,255,0.5) 100%);
}
[data-theme="light"] .news-c { background: rgba(255,255,255,0.6); }
[data-theme="light"] .news-feature {
  background: linear-gradient(135deg, rgba(0, 150, 214, 0.06) 0%, rgba(255,255,255,0.5) 70%);
  border-color: rgba(0, 150, 214, 0.20);
}
[data-theme="light"] .news-c:hover { background: rgba(0, 150, 214, 0.04); }
[data-theme="light"] .tm-card { background: rgba(255,255,255,0.6); }
[data-theme="light"] .tm-photo {
  background: linear-gradient(135deg, #E8EDF7 0%, #DCE5F0 100%);
}
[data-theme="light"] .tm-mono {
  background: linear-gradient(135deg, var(--cobalt), var(--azure));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-theme="light"] .float-badge {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(15, 26, 46, 0.15);
  box-shadow: 0 12px 30px rgba(15, 26, 46, 0.12);
}
[data-theme="light"] .mock {
  background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, #F5F2EB 100%);
  border-color: var(--line-2);
  box-shadow:
    0 30px 60px rgba(15, 26, 46, 0.18),
    0 0 60px rgba(0, 150, 214, 0.10);
}
[data-theme="light"] .mock-bar { background: rgba(15, 26, 46, 0.05); }
[data-theme="light"] .mock-side { background: rgba(15, 26, 46, 0.02); }
[data-theme="light"] .mock-url, [data-theme="light"] .ms-item { color: var(--silver); }
[data-theme="light"] .ms-item.active { background: rgba(0, 150, 214, 0.10); color: var(--cobalt); border-left-color: var(--cobalt); }
[data-theme="light"] .mc-stat, [data-theme="light"] .mc-doc, [data-theme="light"] .mc-chart { background: rgba(255,255,255,0.5); border-color: var(--line); }
[data-theme="light"] .mc-doc .dn { color: var(--frost); }
[data-theme="light"] .form input,
[data-theme="light"] .form select,
[data-theme="light"] .form textarea {
  background: rgba(255,255,255,0.8);
  border-color: var(--line);
  color: var(--frost);
}
[data-theme="light"] .form select { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23006FA8' stroke-width='1.5' fill='none'/></svg>"); background-repeat: no-repeat; background-position: right 16px center; }
[data-theme="light"] .form select option { background-color: #FFFFFF; color: var(--frost); }
[data-theme="light"] .btn-outline { color: var(--frost); border-color: var(--line-2); }
[data-theme="light"] .btn-outline:hover { background: rgba(0, 150, 214, 0.06); color: var(--cobalt); border-color: var(--cobalt); }
[data-theme="light"] .lang { background: rgba(255,255,255,0.6); }
[data-theme="light"] .lang button.active { background: var(--frost); color: #FFFFFF; }
[data-theme="light"] .theme-toggle { background: rgba(255,255,255,0.6); border-color: var(--line); }
[data-theme="light"] .ftr { background: rgba(255,255,255,0.4); }
[data-theme="light"] .ftr-social a { background: rgba(255,255,255,0.6); }
[data-theme="light"] .ftr-news { background: rgba(255,255,255,0.7); border-color: var(--line); }
[data-theme="light"] .ftr-news input { color: var(--frost); }
[data-theme="light"] .ftr-news input::placeholder { color: var(--silver); }
[data-theme="light"] .stat-suffix { color: var(--cobalt); }
[data-theme="light"] .meta-num span { color: var(--cobalt); }
[data-theme="light"] .fb-val .pct { color: var(--cobalt); }
[data-theme="light"] .news-tag, [data-theme="light"] .tm-role,
[data-theme="light"] .svc-tile-num, [data-theme="light"] .proc-num,
[data-theme="light"] .ci-label, [data-theme="light"] .kicker { color: var(--cobalt); }
[data-theme="light"] .mark, [data-theme="light"] .tag-dot { background: var(--cobalt); box-shadow: 0 0 10px var(--cobalt); }
[data-theme="light"] .news-feature .news-tag,
[data-theme="light"] .news-feature .news-link { color: var(--cobalt); }
[data-theme="light"] .quote { color: var(--cobalt); }
[data-theme="light"] .scroll-down,
[data-theme="light"] .stat-chip,
[data-theme="light"] .stat-chip .lbl,
[data-theme="light"] .meta-lbl,
[data-theme="light"] .stat-lbl { color: var(--silver); }
[data-theme="light"] .marq-track .bullet { color: var(--cobalt); }

/* Smooth theme transition */
body, .hdr, .svc-tile, .tm-card, .news-c, .testi-card, .stat-card,
.mock, .float-badge, .mc-stat, .mc-doc, .form input, .form select, .form textarea,
.lang, .theme-toggle, .btn-outline {
  transition: background-color .35s ease, border-color .35s ease, color .35s ease, box-shadow .35s ease;
}

/* =============================================================
   MARKETS — VERSION SOBRE (bandeau d'indicateurs économiques)
   ============================================================= */
.markets-lite {
  padding: 60px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, transparent 0%, var(--surf) 100%);
}
.mkl-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 28px;
}
.mkl-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--frost);
  margin-top: 14px;
  font-variation-settings: "wdth" 100, "opsz" 96;
}
.mkl-title em {
  font-style: italic;
  color: var(--silver);
  font-weight: 300;
}
.mkl-sep {
  color: var(--line-2);
  margin: 0 6px;
  font-style: normal;
}
.mkl-clock {
  font-size: 12px;
  color: var(--silver);
  letter-spacing: 0.14em;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surf);
}
.mkl-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 22px 28px;
  background: var(--surf-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  flex-wrap: wrap;
}
.mkl-cell {
  flex: 1;
  min-width: 130px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 18px;
}
.mkl-feature {
  flex: 1.4;
  padding-left: 0;
}
[dir="rtl"] .mkl-feature { padding-left: 18px; padding-right: 0; }
.mkl-divider {
  width: 1px;
  background: var(--line);
  margin: 4px 0;
}
.mkl-label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--silver);
  font-weight: 500;
}
.mkl-val {
  font-family: var(--f-mono);
  font-size: 18px;
  font-weight: 500;
  color: var(--frost);
  letter-spacing: -0.005em;
  line-height: 1.1;
  transition: color .3s, transform .3s;
}
.mkl-feature .mkl-val { font-size: 22px; }
.mkl-val.flash-up { color: #4ADE80; }
.mkl-val.flash-down { color: #F87171; }
[data-theme="light"] .mkl-val.flash-up { color: #1F8B4D; }
[data-theme="light"] .mkl-val.flash-down { color: #C63838; }
.mkl-trend {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.mkl-trend.up { color: #4ADE80; }
.mkl-trend.down { color: #F87171; }
[data-theme="light"] .mkl-trend.up { color: #1F8B4D; }
[data-theme="light"] .mkl-trend.down { color: #C63838; }
.mkl-disclaimer {
  font-size: 11px;
  color: var(--silver);
  font-style: italic;
  margin-top: 14px;
  text-align: center;
  letter-spacing: 0.02em;
}
[data-theme="light"] .mkl-row { background: rgba(255,255,255,0.5); }

/* Markets responsive */
@media (max-width: 880px) {
  .mkl-row { padding: 16px 18px; }
  .mkl-cell { min-width: 110px; padding: 8px 12px; flex: 0 0 calc(50% - 24px); }
  .mkl-feature { flex: 0 0 100%; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 8px; padding-left: 12px; }
  .mkl-divider { display: none; }
}
@media (max-width: 720px) {
  .modal-card { padding: 36px 24px 28px; max-height: 92vh; border-radius: 14px; }
  .modal-title { font-size: 22px; }
  .back-top { bottom: 16px; right: 16px; width: 44px; height: 44px; }
}

/* =============================================================
   NEWS TAGS — bigger as requested
   ============================================================= */
.news-tag {
  font-size: 12px !important;
  letter-spacing: 0.16em !important;
  padding: 5px 10px;
  background: rgba(79, 224, 255, 0.08);
  border: 1px solid rgba(79, 224, 255, 0.20);
  border-radius: 999px;
  align-self: flex-start;
}
[data-theme="light"] .news-tag {
  background: rgba(0, 150, 214, 0.08);
  border-color: rgba(0, 150, 214, 0.25);
}
.news-feature .news-tag {
  background: rgba(79, 224, 255, 0.14);
  border-color: rgba(79, 224, 255, 0.30);
}

/* News cards now interactive — show hint on hover */
.news-c { cursor: pointer; }
.news-c::after {
  content: "+";
  position: absolute;
  top: 24px; right: 24px;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--cyan);
  font-weight: 300;
  opacity: 0;
  transition: all .35s var(--ease);
}
[dir="rtl"] .news-c::after { right: auto; left: 24px; }
.news-c { position: relative; }
.news-c:hover::after { opacity: 1; transform: rotate(45deg); }

/* Section tag now clickable for popup */
.sec-tag {
  cursor: help;
  user-select: none;
  transition: color .25s;
}
.sec-tag:hover { color: var(--frost); }
[data-theme="light"] .sec-tag:hover { color: var(--cobalt); }

/* =============================================================
   MODAL — news article detail
   ============================================================= */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--ease);
}
.modal.is-open { opacity: 1; pointer-events: auto; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 10, 20, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
[data-theme="light"] .modal-backdrop { background: rgba(15, 26, 46, 0.4); }
.modal-card {
  position: relative;
  width: min(720px, 100%);
  max-height: 88vh;
  background: linear-gradient(180deg, var(--ink) 0%, var(--night) 100%);
  border: 1px solid var(--line-2);
  border-radius: 18px;
  padding: 48px 48px 40px;
  overflow-y: auto;
  transform: translateY(30px) scale(0.96);
  transition: transform .45s var(--ease);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
[data-theme="light"] .modal-card {
  background: linear-gradient(180deg, #FFFFFF 0%, #FBF8F1 100%);
  box-shadow: 0 30px 80px rgba(15, 26, 46, 0.25);
}
.modal.is-open .modal-card { transform: translateY(0) scale(1); }
.modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surf);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--frost);
  transition: all .25s;
}
.modal-close:hover { background: var(--surf-2); transform: rotate(90deg); }
.modal-close svg { width: 16px; height: 16px; }
[dir="rtl"] .modal-close { right: auto; left: 18px; }
.modal-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
  background: rgba(79, 224, 255, 0.10);
  border: 1px solid rgba(79, 224, 255, 0.25);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 20px;
}
[data-theme="light"] .modal-tag {
  color: var(--cobalt);
  background: rgba(0, 150, 214, 0.08);
  border-color: rgba(0, 150, 214, 0.25);
}
.modal-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--frost);
  margin-bottom: 14px;
  font-variation-settings: "wdth" 100, "opsz" 96;
}
.modal-date {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--silver);
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.modal-body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--pearl);
}
.modal-body p { margin-bottom: 16px; }
.modal-body strong { color: var(--frost); font-weight: 600; }
.modal-body ul { padding-left: 24px; margin: 16px 0; }
[dir="rtl"] .modal-body ul { padding-left: 0; padding-right: 24px; }
.modal-body li {
  list-style: disc;
  margin-bottom: 8px;
  color: var(--pearl);
}
.modal-body li::marker { color: var(--cyan); }
[data-theme="light"] .modal-body li::marker { color: var(--cobalt); }

/* Apply Arabic typography fixes inside modal */
html[lang="ar"] .modal-title {
  letter-spacing: 0;
  font-variation-settings: normal;
  font-weight: 600;
  line-height: 1.4;
}

/* =============================================================
   SECTION INFO POPUP
   ============================================================= */
.info-pop {
  position: absolute;
  z-index: 50;
  width: 280px;
  background: linear-gradient(180deg, var(--ink) 0%, var(--night) 100%);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.4);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .25s, transform .25s var(--ease);
}
[data-theme="light"] .info-pop {
  background: #FFFFFF;
  box-shadow: 0 16px 40px rgba(15, 26, 46, 0.18);
}
.info-pop.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.info-pop-arrow {
  position: absolute;
  top: -7px;
  left: 24px;
  width: 12px;
  height: 12px;
  background: var(--ink);
  border-top: 1px solid var(--line-2);
  border-left: 1px solid var(--line-2);
  transform: rotate(45deg);
}
[data-theme="light"] .info-pop-arrow { background: #FFFFFF; }
.info-pop-tag {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--cyan);
  text-transform: uppercase;
  margin-bottom: 8px;
}
[data-theme="light"] .info-pop-tag { color: var(--cobalt); }
.info-pop p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--pearl);
}

/* =============================================================
   BACK TO TOP BUTTON
   ============================================================= */
.back-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan) 0%, var(--azure) 100%);
  color: var(--void);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), box-shadow .3s;
  box-shadow: 0 8px 24px rgba(0, 180, 240, 0.30);
}
.back-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.back-top:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0, 180, 240, 0.50);
}
.back-top svg { width: 20px; height: 20px; }
[dir="rtl"] .back-top { right: auto; left: 24px; }

/* =============================================================
   TEAM ACCORDION (interactive feature card)
   ============================================================= */
.team-grid {
  position: relative;
}
.tm-card {
  cursor: pointer;
  position: relative;
}
.tm-card .tm-info p {
  display: none;
}
.tm-card.is-active .tm-info p {
  display: block;
}
.tm-card.is-active {
  grid-row: 1 / 3;
  grid-column: 1 / 3;
  display: grid;
  grid-template-columns: 240px 1fr;
  background: linear-gradient(135deg, rgba(0, 180, 240, 0.06) 0%, var(--surf-2) 60%);
  border-color: rgba(79, 224, 255, 0.25);
}
[data-theme="light"] .tm-card.is-active {
  background: linear-gradient(135deg, rgba(0, 150, 214, 0.06) 0%, rgba(255,255,255,0.6) 60%);
  border-color: rgba(0, 150, 214, 0.25);
}
.tm-card.is-active .tm-photo {
  aspect-ratio: auto;
  height: 100%;
}
.tm-card.is-active .tm-mono { font-size: 96px; }
.tm-card.is-active .tm-info h3 { font-size: 32px; margin-bottom: 14px; }
/* Smooth grid transition */
.tm-card { transition: background .4s, border-color .4s, transform .4s var(--ease); }
.tm-card .tm-mono,
.tm-card .tm-info h3,
.tm-card .tm-photo {
  transition: font-size .4s var(--ease), height .4s var(--ease);
}
.tm-card:not(.is-active):hover {
  border-color: var(--line-2);
  transform: translateY(-3px);
}
.tm-card .tm-info {
  position: relative;
}
/* Accordion indicator */
.tm-card:not(.is-active) .tm-info::after {
  content: "+";
  position: absolute;
  top: 18px;
  right: 18px;
  width: 24px; height: 24px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--cyan);
  font-weight: 300;
  transition: all .3s;
}
[dir="rtl"] .tm-card:not(.is-active) .tm-info::after { right: auto; left: 18px; }
.tm-card:not(.is-active):hover .tm-info::after {
  background: var(--cyan);
  color: var(--void);
  border-color: var(--cyan);
}



/* =============================================================
   TEAM — heritage badge for founder
   ============================================================= */
.tm-legacy {
  position: absolute;
  bottom: 14px;
  left: 14px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
  background: rgba(6, 10, 20, 0.7);
  border: 1px solid rgba(79, 224, 255, 0.30);
  padding: 6px 10px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
[dir="rtl"] .tm-legacy { left: auto; right: 14px; }
[data-theme="light"] .tm-legacy {
  color: var(--cobalt);
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 150, 214, 0.30);
}
.tm-card .tm-photo { position: relative; }
/* Hide legacy badge on non-active cards (compact view) */
.tm-card:not(.is-active) .tm-legacy { display: none; }

/* =============================================================
   TEAM RESPONSIVE — adjust for 5 members
   ============================================================= */
@media (max-width: 1100px) {
  .tm-card.is-active {
    grid-row: 1 / 2;
    grid-column: 1 / 3;
    grid-template-columns: 200px 1fr;
  }
}
@media (max-width: 720px) {
  .tm-card.is-active {
    grid-row: auto;
    grid-column: auto;
    grid-template-columns: 1fr;
    display: block;
  }
  .tm-card.is-active .tm-photo {
    aspect-ratio: 16/9;
    height: auto;
  }
  .tm-card.is-active .tm-mono { font-size: 64px; }
  .tm-card.is-active .tm-info h3 { font-size: 24px; }
  .tm-legacy { font-size: 9px; padding: 5px 8px; }
}

/* =============================================================
   SERVICE TILE 6 — wide (full-row horizontal layout)
   ============================================================= */
.svc-tile.svc-wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: start;
  background: linear-gradient(135deg, rgba(0, 180, 240, 0.04) 0%, var(--surf) 70%);
}
.svc-tile.svc-wide .svc-wide-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.svc-tile.svc-wide h3 {
  font-size: 28px;
}
.svc-tile.svc-wide p {
  max-width: 480px;
}
.svc-tile.svc-wide .svc-tile-cta {
  margin-top: 8px;
}
.svc-wide-list {
  border-left: 1px solid var(--line);
  padding-left: 36px !important;
  margin-top: 36px !important;
}
[dir="rtl"] .svc-wide-list {
  border-left: none;
  border-right: 1px solid var(--line);
  padding-left: 0 !important;
  padding-right: 36px !important;
}
[data-theme="light"] .svc-tile.svc-wide {
  background: linear-gradient(135deg, rgba(0, 150, 214, 0.05) 0%, rgba(255,255,255,0.5) 70%);
}

/* =============================================================
   TEAM — 4 members layout
   Featured (2x2) + Walid (col 3, row 1) + Collab (col 4, row 1) + wide collab (cols 3-4, row 2)
   ============================================================= */
.tm-card.tm-wide {
  grid-column: span 2;
}
.tm-placeholder .tm-mono {
  opacity: 0.4;
  font-size: 64px !important;
}
.tm-placeholder .tm-info h3 {
  opacity: 0.55;
  font-style: italic;
  font-weight: 400;
}
.tm-placeholder {
  background: linear-gradient(180deg, var(--surf) 0%, transparent 100%);
}
.tm-placeholder::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  pointer-events: none;
  opacity: 0.5;
}
.tm-placeholder { position: relative; }

/* On smaller screens, drop the wide span */
@media (max-width: 1100px) {
  .tm-card.tm-wide { grid-column: auto; }
}

/* =============================================================
   LEGAL LIBRARY (downloadable laws + auto-update)
   ============================================================= */
.library {
  padding: var(--section-y) 0;
  border-top: 1px solid var(--line);
}
.lib-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: end;
  margin-bottom: 48px;
}
.lib-head-text {
  max-width: 720px;
}
.lib-intro {
  margin-top: 18px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--silver);
  max-width: 560px;
}
.lib-stats {
  display: flex;
  gap: 36px;
  align-items: center;
  border-left: 1px solid var(--line);
  padding-left: 36px;
}
[dir="rtl"] .lib-stats {
  border-left: none;
  border-right: 1px solid var(--line);
  padding-left: 0;
  padding-right: 36px;
}
.lib-stat-num {
  font-size: 28px;
  font-weight: 500;
  color: var(--frost);
  letter-spacing: -0.01em;
  line-height: 1;
}
.lib-stat-lbl {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--silver);
  margin-top: 6px;
}

/* Controls: search + filters */
.lib-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 36px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}
.lib-search {
  position: relative;
  flex: 1;
  min-width: 280px;
  max-width: 420px;
}
.lib-search-ico {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--silver);
  pointer-events: none;
}
[dir="rtl"] .lib-search-ico { left: auto; right: 16px; }
.lib-search input {
  width: 100%;
  padding: 12px 16px 12px 44px;
  font-family: var(--f-body);
  font-size: 14px;
  color: var(--frost);
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: 999px;
  outline: none;
  transition: all .25s;
}
[dir="rtl"] .lib-search input { padding: 12px 44px 12px 16px; }
.lib-search input::placeholder { color: var(--silver); }
.lib-search input:focus {
  border-color: var(--cyan);
  background: rgba(79, 224, 255, 0.04);
}
[data-theme="light"] .lib-search input { background: rgba(255,255,255,0.6); }
[data-theme="light"] .lib-search input:focus {
  border-color: var(--cobalt);
  background: rgba(0, 150, 214, 0.04);
}
.lib-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.lib-pill {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--silver);
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  transition: all .25s;
}
.lib-pill:hover {
  color: var(--frost);
  border-color: var(--line-2);
}
.lib-pill.is-active {
  background: var(--cyan);
  color: var(--void);
  border-color: var(--cyan);
}
[data-theme="light"] .lib-pill.is-active {
  background: var(--cobalt);
  color: #FFFFFF;
  border-color: var(--cobalt);
}

/* Cards grid */
.lib-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.lib-card {
  position: relative;
  padding: 26px 28px 22px;
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all .3s var(--ease);
}
.lib-card:hover {
  border-color: rgba(79, 224, 255, 0.30);
  transform: translateY(-2px);
  background: linear-gradient(180deg, rgba(79, 224, 255, 0.03), var(--surf));
}
[data-theme="light"] .lib-card { background: rgba(255,255,255,0.5); }
[data-theme="light"] .lib-card:hover {
  border-color: rgba(0, 150, 214, 0.30);
  background: linear-gradient(180deg, rgba(0, 150, 214, 0.03), rgba(255,255,255,0.6));
}
.lib-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.lib-card-cat {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
  background: rgba(79, 224, 255, 0.08);
  border: 1px solid rgba(79, 224, 255, 0.20);
  padding: 4px 10px;
  border-radius: 999px;
}
[data-theme="light"] .lib-card-cat {
  color: var(--cobalt);
  background: rgba(0, 150, 214, 0.08);
  border-color: rgba(0, 150, 214, 0.25);
}
.lib-card-new {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--void);
  background: linear-gradient(135deg, var(--cyan), var(--azure));
  padding: 4px 10px;
  border-radius: 999px;
  animation: lib-pulse 2.4s ease-in-out infinite;
}
@keyframes lib-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(79, 224, 255, 0.5); }
  50% { box-shadow: 0 0 0 6px rgba(79, 224, 255, 0); }
}
.lib-card h3 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--frost);
  margin-top: 4px;
  font-variation-settings: "wdth" 100, "opsz" 96;
}
.lib-card p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--pearl);
  flex: 1;
}
.lib-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 14px;
  margin-top: 6px;
  border-top: 1px solid var(--line);
}
.lib-card-meta {
  font-size: 11px;
  color: var(--silver);
  letter-spacing: 0.04em;
}
.lib-dl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--cyan);
  padding: 6px 12px;
  border: 1px solid rgba(79, 224, 255, 0.30);
  border-radius: 999px;
  background: rgba(79, 224, 255, 0.05);
  transition: all .25s;
}
.lib-dl:hover {
  background: rgba(79, 224, 255, 0.15);
  border-color: var(--cyan);
  transform: translateY(-1px);
}
.lib-dl svg { width: 14px; height: 14px; }
[data-theme="light"] .lib-dl {
  color: var(--cobalt);
  border-color: rgba(0, 150, 214, 0.30);
  background: rgba(0, 150, 214, 0.05);
}
[data-theme="light"] .lib-dl:hover {
  background: rgba(0, 150, 214, 0.12);
  border-color: var(--cobalt);
}

.lib-empty {
  text-align: center;
  padding: 60px 0;
  color: var(--silver);
  font-style: italic;
}
.lib-foot {
  text-align: center;
  margin-top: 36px;
  font-size: 13px;
  color: var(--silver);
  font-style: italic;
}

/* Arabic typography fixes for library */
html[lang="ar"] .lib-card h3,
html[lang="ar"] .lib-stat-num {
  letter-spacing: 0 !important;
  font-variation-settings: normal !important;
  font-style: normal;
  line-height: 1.4;
  font-weight: 600;
}

/* Library responsive */
@media (max-width: 980px) {
  .lib-head {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .lib-stats {
    border-left: none;
    border-right: none;
    padding-left: 0;
    padding-right: 0;
    border-top: 1px solid var(--line);
    padding-top: 24px;
  }
  [dir="rtl"] .lib-stats { padding-left: 0; padding-right: 0; }
}
@media (max-width: 720px) {
  .lib-grid { grid-template-columns: 1fr; }
  .lib-controls { flex-direction: column; align-items: stretch; }
  .lib-search { max-width: none; }
  .svc-tile.svc-wide { grid-column: auto; grid-template-columns: 1fr; gap: 18px; }
  .svc-wide-list { border-left: none !important; padding-left: 0 !important; padding-top: 24px; border-top: 1px solid var(--line); margin-top: 0 !important; }
  [dir="rtl"] .svc-wide-list { border-right: none !important; padding-right: 0 !important; }
}

/* =============================================================
   END LOGO — animated finale
   ============================================================= */
.end-logo {
  position: relative;
  padding: 140px 0 100px;
  overflow: hidden;
  border-top: 1px solid var(--line);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(79, 224, 255, 0.04), transparent 70%),
    linear-gradient(180deg, transparent 0%, var(--surf) 100%);
}
[data-theme="light"] .end-logo {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0, 150, 214, 0.05), transparent 70%),
    linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.4) 100%);
}

.end-stage {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  text-align: center;
}

/* Top "Depuis 1991" mark */
.end-mark {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--silver);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  transition-delay: 0.2s;
}
.end-logo.is-revealed .end-mark {
  opacity: 1;
  transform: translateY(0);
}
.end-mark-line {
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: 0.7;
}
.end-mark-text {
  color: var(--cyan);
  font-weight: 500;
}
[data-theme="light"] .end-mark-text { color: var(--cobalt); }
[data-theme="light"] .end-mark-line { background: linear-gradient(90deg, transparent, var(--cobalt), transparent); }

/* Logo wrapper with reveal + breathing */
.end-logo-wrap {
  position: relative;
  width: min(560px, 70vw);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transform: translateY(40px) scale(0.92);
  transition: opacity 1.4s var(--ease), transform 1.4s var(--ease);
  transition-delay: 0.5s;
}
.end-logo.is-revealed .end-logo-wrap {
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: end-float 7s ease-in-out infinite;
  animation-delay: 1.9s;
}
.end-logo-img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 24px rgba(79, 224, 255, 0.20));
}
[data-theme="light"] .end-logo-img {
  filter: drop-shadow(0 4px 16px rgba(15, 26, 46, 0.10));
}
@keyframes end-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-6px) scale(1.005); }
}

/* Light/dark logo swap (matches header pattern) */
.end-logo-img.is-dark-logo { display: none; }
.end-logo-img.is-light-logo { display: block; }
[data-theme="dark"] .end-logo-img.is-light-logo,
:root:not([data-theme="light"]) .end-logo-img.is-light-logo { display: none; }
[data-theme="dark"] .end-logo-img.is-dark-logo,
:root:not([data-theme="light"]) .end-logo-img.is-dark-logo { display: block; }

/* Tagline */
.end-tagline {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(20px, 2.4vw, 28px);
  color: var(--silver);
  letter-spacing: -0.01em;
  margin-top: 8px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  transition-delay: 1.1s;
  font-variation-settings: "wdth" 100, "opsz" 96;
}
html[lang="ar"] .end-tagline {
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.4;
}
.end-logo.is-revealed .end-tagline {
  opacity: 1;
  transform: translateY(0);
}

/* Meta line at the very bottom */
.end-meta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  font-size: 10.5px;
  letter-spacing: 0.20em;
  color: var(--silver);
  opacity: 0;
  transition: opacity 1s ease;
  transition-delay: 1.5s;
}
.end-logo.is-revealed .end-meta { opacity: 0.8; }
.end-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--cyan);
  opacity: 0.6;
}
[data-theme="light"] .end-dot { background: var(--cobalt); }

/* Animated radial glow behind the logo */
.end-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79, 224, 255, 0.18) 0%, transparent 65%);
  filter: blur(40px);
  transform: translate(-50%, -50%);
  z-index: 1;
  opacity: 0;
  transition: opacity 2s ease;
  transition-delay: 0.8s;
  animation: end-glow-pulse 6s ease-in-out infinite;
}
.end-glow-2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(0, 180, 240, 0.25) 0%, transparent 70%);
  animation: end-glow-pulse 4.5s ease-in-out infinite reverse;
  animation-delay: 1s;
}
.end-logo.is-revealed .end-glow { opacity: 1; }
[data-theme="light"] .end-glow {
  background: radial-gradient(circle, rgba(0, 150, 214, 0.10) 0%, transparent 65%);
}
[data-theme="light"] .end-glow-2 {
  background: radial-gradient(circle, rgba(0, 111, 168, 0.12) 0%, transparent 70%);
}
@keyframes end-glow-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.18); }
}

/* Concentric rings emanating outward — radar-like */
.end-rings {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 900px;
  height: 900px;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease;
  transition-delay: 0.8s;
}
.end-logo.is-revealed .end-rings { opacity: 1; }
.end-rings circle {
  fill: none;
  stroke: rgba(79, 224, 255, 0.45);
  stroke-width: 1;
  transform-origin: center;
  animation: end-ring-out 5s linear infinite;
}
[data-theme="light"] .end-rings circle {
  stroke: rgba(0, 150, 214, 0.40);
}
.end-rings circle:nth-child(1) { animation-delay: 0s; }
.end-rings circle:nth-child(2) { animation-delay: 1.25s; }
.end-rings circle:nth-child(3) { animation-delay: 2.5s; }
.end-rings circle:nth-child(4) { animation-delay: 3.75s; }
@keyframes end-ring-out {
  0%   { transform: scale(0.3); opacity: 0; stroke-width: 1.6; }
  10%  { opacity: 0.7; }
  100% { transform: scale(2.8); opacity: 0; stroke-width: 0.4; }
}

/* Floating dust particles around the logo */
.end-dust {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2s ease;
  transition-delay: 1s;
}
.end-logo.is-revealed .end-dust { opacity: 1; }
.end-dust span {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--cyan);
  opacity: 0.5;
  animation: end-dust-drift 12s ease-in-out infinite;
}
[data-theme="light"] .end-dust span { background: var(--cobalt); opacity: 0.4; }
.end-dust span:nth-child(1)  { top: 18%; left: 12%; animation-delay: 0s;   animation-duration: 11s; }
.end-dust span:nth-child(2)  { top: 28%; left: 84%; animation-delay: 1.2s; animation-duration: 13s; }
.end-dust span:nth-child(3)  { top: 70%; left: 16%; animation-delay: 2.4s; animation-duration: 10s; }
.end-dust span:nth-child(4)  { top: 80%; left: 78%; animation-delay: 3.6s; animation-duration: 14s; }
.end-dust span:nth-child(5)  { top: 42%; left: 7%;  animation-delay: 0.6s; animation-duration: 12s; width: 2px; height: 2px; }
.end-dust span:nth-child(6)  { top: 55%; left: 92%; animation-delay: 4.5s; animation-duration: 11s; width: 2px; height: 2px; }
.end-dust span:nth-child(7)  { top: 12%; left: 48%; animation-delay: 5.5s; animation-duration: 13s; width: 2px; height: 2px; }
.end-dust span:nth-child(8)  { top: 88%; left: 50%; animation-delay: 6.5s; animation-duration: 10s; width: 2px; height: 2px; }
.end-dust span:nth-child(9)  { top: 32%; left: 28%; animation-delay: 7.5s; animation-duration: 15s; width: 1.5px; height: 1.5px; }
.end-dust span:nth-child(10) { top: 60%; left: 70%; animation-delay: 8.5s; animation-duration: 12s; width: 1.5px; height: 1.5px; }
@keyframes end-dust-drift {
  0%, 100% { transform: translate(0, 0); opacity: 0.4; }
  25%      { transform: translate(8px, -12px); opacity: 0.7; }
  50%      { transform: translate(-4px, -20px); opacity: 0.4; }
  75%      { transform: translate(-10px, -8px); opacity: 0.65; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .end-logo.is-revealed .end-logo-wrap { animation: none; }
  .end-glow, .end-rings circle, .end-dust span { animation: none; }
}

@media (max-width: 720px) {
  .end-logo { padding: 90px 0 70px; }
  .end-mark { gap: 10px; font-size: 10px; }
  .end-mark-line { width: 32px; }
  .end-glow { width: 460px; height: 460px; }
  .end-glow-2 { width: 280px; height: 280px; }
  .end-rings { width: 600px; height: 600px; }
  .end-meta { font-size: 9.5px; gap: 10px; flex-wrap: wrap; justify-content: center; }
}

/* =============================================================
   FOOTER CONTACT BLOCK + CONTACT LINKS
   ============================================================= */
.ftr-contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 18px 0 4px;
  font-style: normal;
}
.ftr-contact-line {
  font-size: 13px;
  color: var(--silver);
  line-height: 1.55;
  transition: color .25s;
}
a.ftr-contact-line {
  color: var(--frost);
  font-size: 12.5px;
}
a.ftr-contact-line:hover { color: var(--cyan); }
[data-theme="light"] a.ftr-contact-line:hover { color: var(--cobalt); }

/* Contact section: links should look like values (not blue text) */
.cl-link {
  color: var(--frost);
  text-decoration: none;
  transition: color .25s;
  cursor: pointer;
}
.cl-link:hover { color: var(--cyan); }
[data-theme="light"] .cl-link:hover { color: var(--cobalt); }

/* Multi-line address keeps proper line-height */
.contact-list .cl-val {
  line-height: 1.55;
}

/* RTL: address still left-to-right for Latin chars but flow stays RTL */
html[lang="ar"] .ftr-contact-line { line-height: 1.7; }

/* =============================================================
   SERVICE MODAL CTA + interactive tile-cta hover
   ============================================================= */
.svc-tile-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 0;
  transition: gap .25s var(--ease), color .25s;
  align-self: flex-start;
  position: relative;
}
.svc-tile-cta::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
[dir="rtl"] .svc-tile-cta::after { transform-origin: right; }
.svc-tile-cta:hover { gap: 14px; }
.svc-tile-cta:hover::after { transform: scaleX(1); }

/* Modal CTA inside service detail */
.modal-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.modal-cta-row .btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--void);
  background: linear-gradient(135deg, var(--cyan) 0%, var(--azure) 100%);
  border-radius: 999px;
  text-decoration: none;
  transition: transform .25s, box-shadow .25s;
  box-shadow: 0 6px 20px rgba(0, 180, 240, 0.25);
}
.modal-cta-row .btn-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 180, 240, 0.40);
}
.modal-cta-row .btn-cta svg {
  width: 14px;
  height: 14px;
  transition: transform .25s;
}
.modal-cta-row .btn-cta:hover svg { transform: translateX(3px); }
[dir="rtl"] .modal-cta-row .btn-cta:hover svg { transform: translateX(-3px) rotate(180deg); }
[dir="rtl"] .modal-cta-row .btn-cta svg { transform: rotate(180deg); }
[data-theme="light"] .modal-cta-row .btn-cta {
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--cobalt) 0%, var(--azure) 100%);
  box-shadow: 0 6px 20px rgba(0, 111, 168, 0.25);
}
.modal-cta-sub {
  font-size: 12px;
  color: var(--silver);
  font-style: italic;
}

/* Make modal title bigger for service details and add subtitle styling */
.modal-date:not(:empty) {
  font-style: italic;
  font-family: var(--f-display);
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--silver);
  font-weight: 300;
  font-variation-settings: "wdth" 100, "opsz" 96;
}
html[lang="ar"] .modal-date:not(:empty) {
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.5;
}

/* Hero status bar — currency chip trend + responsive hiding */
.hero-status .stat-chip .trend {
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.02em;
  margin-left: 4px;
}
.hero-status .stat-chip .trend.up {
  color: #4ADE80;
  background: rgba(74, 222, 128, 0.08);
}
.hero-status .stat-chip .trend.down {
  color: #F87171;
  background: rgba(248, 113, 113, 0.08);
}
[data-theme="light"] .hero-status .stat-chip .trend.up { color: #1F8B4D; background: rgba(34, 160, 90, 0.08); }
[data-theme="light"] .hero-status .stat-chip .trend.down { color: #C63838; background: rgba(220, 60, 60, 0.08); }
.hero-status .stat-chip .val.flash-up { color: #4ADE80; transition: color .3s; }
.hero-status .stat-chip .val.flash-down { color: #F87171; transition: color .3s; }

/* Hide additional USD/GBP chips on mobile */
@media (max-width: 880px) {
  .hero-status .stat-chip.hide-sm { display: none; }
}

/* =============================================================
   LIBRARY LOADING STATE
   ============================================================= */
.lib-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 60px 0;
  color: var(--silver);
  font-style: italic;
  font-size: 14px;
}
.lib-spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--line);
  border-top-color: var(--cyan);
  animation: lib-spin 0.8s linear infinite;
}
[data-theme="light"] .lib-spinner { border-top-color: var(--cobalt); }
@keyframes lib-spin {
  to { transform: rotate(360deg); }
}
.lib-loading[style*="display: none"] + .lib-foot,
.lib-loading[hidden] + .lib-foot { /* placeholder */ }