/* =========================================================
   حقوق — Premium Legal / IP Brand
   Design system: deep emerald + charcoal + warm ivory + restrained metallic gold
   Type: Tajawal (Arabic) + Cormorant Garamond (editorial serif) + Inter (UI)
   ========================================================= */

:root {
  /* greens */
  --g-950:#051A10;
  --g-900:#0A2418;
  --g-850:#124a32;
  --g-800:#143D2A;
  --g-700:#1B5138;
  --g-600:#2E7A54;
  --g-50:#EEF3EE;

  /* neutrals */
  --ink:#0B0E0C;
  --ink-2:#2B332E;
  --ink-3:#5B6660;
  --ink-4:#8A938D;
  --line:#E3DFD3;
  --line-2:#D8D2C2;
  --paper:#F6F2E8;            /* warm ivory */
  --paper-2:#EFEADB;
  --paper-3:#E7E1D0;

  /* metallic */
  --gold:#03b28d;
  --gold-2:#028f71;
  --gold-soft:#7fd4be;

  /* shadow + glass */
  --sh-sm: 0 1px 2px rgba(10,20,12,0.04), 0 1px 1px rgba(10,20,12,0.03);
  --sh-md: 0 8px 24px -12px rgba(8,30,18,0.18), 0 2px 6px rgba(8,30,18,0.06);
  --sh-lg: 0 30px 80px -30px rgba(8,30,18,0.35), 0 8px 24px -12px rgba(8,30,18,0.18);
  --sh-xl: 0 60px 140px -40px rgba(0,0,0,0.5);

  --maxw: 1320px;
  --radius-sm: 2px;
  --radius: 4px;
  --radius-lg: 8px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-slow: cubic-bezier(0.65, 0, 0.35, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; background: var(--paper); }
body {
  font-family: 'Almarai', 'Tajawal', 'Segoe UI', system-ui, sans-serif;
  color: var(--ink);
  direction: rtl;
  text-align: right;
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 40px; }

h1, h2, h3, h4, h5 { margin: 0; font-weight: 700; letter-spacing: -0.015em; line-height: 1.1; }
p { margin: 0; }

.serif { font-family: 'Almarai', 'Cormorant Garamond', 'Playfair Display', serif; font-weight: 400; letter-spacing: -0.02em; }
.mono  { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* ============ EYEBROW ============ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Almarai', 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--g-700);
}
.eyebrow::before {
  content: '';
  width: 36px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--g-700));
}
.eyebrow.light { color: var(--gold); }
.eyebrow.light::before { background: linear-gradient(90deg, transparent, var(--gold)); }
.eyebrow.center::before { display: none; }

.micro-label {
  font-family: 'Almarai', 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ============ BUTTONS ============ */
.btn {
  --b: var(--g-800);
  --c:#fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 26px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), background .3s ease, color .3s ease;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  background: var(--b);
  color: var(--c);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, var(--sh-sm);
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.14) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .9s var(--ease-slow);
  z-index: -1;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.btn:hover::after { transform: translateX(120%); }
.btn svg { transition: transform .4s var(--ease); }
.btn:hover svg { transform: translateX(-3px); }

.btn-primary { --b: var(--g-800); --c:#fff; }
.btn-primary:hover { --b: var(--g-700); }

.nav-right .btn {
  padding: 9px 16px;
  font-size: 13px;
  gap: 8px;
  border-radius: 6px;
}
.nav-right .btn svg { width: 13px; height: 13px; }

.btn-gold { --b: var(--gold); --c:#fff; border: 1px solid var(--gold-2); }
.btn-gold:hover { --b: var(--gold-soft); }

.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); box-shadow: none; }
.btn-ghost:hover { background: var(--ink); color: #fff; }

.btn-ghost-light { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.35); box-shadow: none; }
.btn-ghost-light:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.7); }

/* ============ NAV ============ */
.nav {
  position: fixed;
  top: 12px; left: 24px; right: 24px;
  z-index: 100;
  padding: 12px 24px;
  background: #00000000;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
  transition: padding .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
.nav.scrolled {
  padding: 10px 24px;
  background: #00000000;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: none;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.logo {
  display: flex; align-items: center; gap: 12px;
  font-weight: 800; font-size: 22px;
  color: var(--ink); text-decoration: none;
  letter-spacing: -0.02em;
}
.logo-mark {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--g-700), var(--g-900));
  color: #fff;
  display: grid; place-items: center;
  font-size: 18px; font-weight: 700;
  box-shadow: 0 0 0 1px rgba(3,178,141,0.35), inset 0 1px 0 rgba(255,255,255,0.15);
  position: relative;
}
.logo-mark::after {
  content: '';
  position: absolute; inset: 3px;
  border: 1px solid rgba(3,178,141,0.35);
  border-radius: 50%;
}
.nav.hero-mode:not(.scrolled) .logo { color: #fff; }
.nav.hero-mode:not(.scrolled) .logo-mark {
  background: radial-gradient(circle at 30% 30%, #fff, #e6ddc5);
  color: var(--g-900);
}

.nav-links { display: flex; gap: 34px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  color: var(--ink-2); text-decoration: none;
  font-size: 14.5px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 4px;
  position: relative;
  padding: 6px 0;
  transition: color .3s ease;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width .4s var(--ease);
}
.nav-links a:hover { color: var(--g-800); }
.nav-links a:hover::after { width: 100%; }
.nav.hero-mode:not(.scrolled) .nav-links a { color: rgba(255,255,255,0.82); }
.nav.hero-mode:not(.scrolled) .nav-links a:hover { color: #fff; }

.nav-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.lang-switch {
  display: flex;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  overflow: hidden;
  padding: 2px;
}
.nav.hero-mode:not(.scrolled) .lang-switch { border-color: rgba(255,255,255,0.25); }
.lang-btn {
  padding: 5px 8px;
  background: transparent; border: none;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 0;
  font-family: inherit; font-size: 12.5px; font-weight: 500;
  color: var(--ink-3);
  cursor: pointer;
  border-radius: 999px;
  transition: all .3s ease;
}
.nav.hero-mode:not(.scrolled) .lang-btn { color: rgba(255,255,255,0.65); }
.lang-btn.active { background: var(--g-800); color: #fff; }
.nav.hero-mode:not(.scrolled) .lang-btn.active { background: #fff; color: var(--g-900); }

.flag { display: inline-flex; border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,0.08); }
.flag svg { display: block; }

.has-dropdown { position: relative; }
.dropdown {
  position: absolute;
  top: calc(100% + 14px); right: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--sh-lg);
  min-width: 300px;
  padding: 10px;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all .3s var(--ease);
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.dropdown a {
  display: block;
  padding: 11px 16px;
  color: var(--ink) !important;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
}
.dropdown a::after { display: none; }
.dropdown a:hover { background: var(--paper-2); color: var(--g-800) !important; }

/* WhatsApp float */
.wa-float {
  position: fixed;
  bottom: 28px; right: 28px;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 12px 36px rgba(37,211,102,0.35), 0 0 0 0 rgba(37,211,102,0.4);
  z-index: 99;
  transition: transform .3s var(--ease);
  animation: waPulse 3s ease-in-out infinite;
}
.wa-float:hover { transform: scale(1.1) rotate(-8deg); }
@keyframes waPulse {
  0%, 100% { box-shadow: 0 12px 36px rgba(37,211,102,0.35), 0 0 0 0 rgba(37,211,102,0.35); }
  50% { box-shadow: 0 12px 36px rgba(37,211,102,0.35), 0 0 0 18px rgba(37,211,102,0); }
}

/* ============ HERO (compact, single-screen, premium) ============ */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 680px;
  color: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 100px 0 60px;
}
.hero h1 { font-family: 'Almarai', 'Readex Pro', 'IBM Plex Sans Arabic', 'Noto Kufi Arabic', system-ui, sans-serif; font-feature-settings: 'ss01','liga','calt'; }
.hero-scene {
  position: absolute; inset: 0;
  overflow: hidden;
}
.hero-atmosphere {
  position: absolute; inset: -5%;
  background:
    radial-gradient(ellipse 60% 40% at 22% 75%, rgba(3,178,141,0.22) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 70% 30%, rgba(28,80,55,0.35) 0%, transparent 60%),
    radial-gradient(ellipse 100% 80% at 50% 100%, rgba(5,18,12,0.7) 0%, transparent 70%),
    linear-gradient(180deg, #020b07 0%, #051a10 30%, #0a2418 60%, #143d2a 100%);
}

/* Slow drifting aurora washes */
.hero-auroras {
  position: absolute; inset: 0;
  overflow: hidden;
  mix-blend-mode: screen;
  opacity: 0.55;
  pointer-events: none;
}
.aurora {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  will-change: auto;
}
.aurora-1 {
  width: 680px; height: 680px;
  left: -10%; top: 20%;
  background: radial-gradient(circle, rgba(3,178,141,0.28), transparent 70%);
  animation: none;
}
.aurora-2 {
  width: 560px; height: 560px;
  right: -6%; top: 10%;
  background: radial-gradient(circle, rgba(46,122,84,0.35), transparent 70%);
  animation: none;
}
.aurora-3 {
  width: 720px; height: 720px;
  left: 35%; bottom: -20%;
  background: radial-gradient(circle, rgba(232,215,168,0.08), transparent 70%);
  animation: none;
}
@keyframes aurora1 {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(120px,-60px) scale(1.1); }
}
@keyframes aurora2 {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(-100px,80px) scale(0.95); }
}
@keyframes aurora3 {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(60px,-80px) scale(1.05); }
}

/* Engraved perspective floor */
.hero-floor {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 55%;
  pointer-events: none;
  opacity: 0.55;
}
.hero-floor svg { width: 100%; height: 100%; display: block; }

/* Reflective floor wash */
.hero-reflect {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 34%;
  background:
    linear-gradient(180deg, transparent 0%, rgba(3,178,141,0.05) 40%, rgba(5,18,12,0.85) 100%),
    radial-gradient(ellipse 55% 100% at 50% 100%, rgba(3,178,141,0.08) 0%, transparent 70%);
  pointer-events: none;
}

/* Skylines */
.hero-skyline {
  position: absolute;
  left: -8%; right: -8%;
  bottom: 0;
  pointer-events: none;
  will-change: transform;
}
.hero-skyline svg { width: 100%; height: 100%; display: block; }
.hero-skyline-far {
  height: 58%;
  opacity: 0.75;
  animation: none;
  filter: blur(0.6px);
}
.hero-skyline-near {
  height: 68%;
  opacity: 1;
  animation: none;
}
@keyframes skylineDriftFar {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-5%); }
}
@keyframes skylineDriftNear {
  0%   { transform: translateX(0); }
  100% { transform: translateX(3%); }
}
/* window glow pulse */
.hero-skyline-near svg g:nth-of-type(3) rect {
  animation: winPulse 8s ease-in-out infinite;
}
@keyframes winPulse {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.55; }
}

/* Trademark seal rings (3D-ish concentric tilted rings) */
.hero-rings {
  position: absolute;
  inset: 0;
  pointer-events: none;
  perspective: 1400px;
  perspective-origin: 30% 40%;
}
.ring-stage {
  position: absolute;
  left: 58%;
  top: 50%;
  width: 880px;
  height: 880px;
  transform: translate(-50%, -50%) rotateX(62deg) rotateZ(0);
  transform-style: preserve-3d;
  animation: stageSpin 220s linear infinite;
  will-change: auto;
}
.ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(3,178,141,0.22);
  box-shadow:
    inset 0 0 40px rgba(3,178,141,0.04),
    0 0 60px rgba(3,178,141,0.04);
}
.ring::before,
.ring::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  inset: 0;
  border: 1px dashed rgba(3,178,141,0.14);
}
.ring-a { inset: 0; animation: ringRot 180s linear infinite; }
.ring-b { inset: 12%; border-color: rgba(232,215,168,0.16); animation: ringRot 140s linear infinite reverse; }
.ring-c { inset: 24%; border-style: dashed; border-color: rgba(3,178,141,0.18); animation: ringRot 100s linear infinite; }
.ring-d { inset: 36%; border-color: rgba(232,215,168,0.22); animation: ringRot 80s linear infinite reverse; }
.ring-e { inset: 46%; border-color: rgba(3,178,141,0.3); animation: ringRot 60s linear infinite; }
/* tick dots on rings */
.ring-a::before { border: 1px solid rgba(232,215,168,0.1); inset: -2%; }
.ring-c::before { border: 1px dotted rgba(232,215,168,0.25); inset: -2%; }

@keyframes ringRot { to { transform: rotateZ(360deg); } }
@keyframes stageSpin {
  0%   { transform: translate(-50%,-50%) rotateX(62deg) rotateZ(0); }
  100% { transform: translate(-50%,-50%) rotateX(62deg) rotateZ(360deg); }
}

/* Floating gold particles */
.hero-particles {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-particles .p {
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: var(--gold-soft);
  box-shadow: none;
  opacity: 0.55;
  animation: floatUp 18s linear infinite;
}
.hero-particles .p1  { left: 8%;  bottom: -2%; animation-delay: 0s;   animation-duration: 22s; }
.hero-particles .p2  { left: 15%; bottom: -2%; animation-delay: 3s;   animation-duration: 28s; }
.hero-particles .p3  { left: 22%; bottom: -2%; animation-delay: 7s;   animation-duration: 24s; }
.hero-particles .p4  { left: 30%; bottom: -2%; animation-delay: 11s;  animation-duration: 30s; width: 3px; height: 3px; }
.hero-particles .p5  { left: 38%; bottom: -2%; animation-delay: 2s;   animation-duration: 26s; }
.hero-particles .p6  { left: 46%; bottom: -2%; animation-delay: 14s;  animation-duration: 32s; }
.hero-particles .p7  { left: 54%; bottom: -2%; animation-delay: 6s;   animation-duration: 20s; }
.hero-particles .p8  { left: 62%; bottom: -2%; animation-delay: 9s;   animation-duration: 28s; width: 3px; height: 3px; }
.hero-particles .p9  { left: 70%; bottom: -2%; animation-delay: 13s;  animation-duration: 24s; }
.hero-particles .p10 { left: 78%; bottom: -2%; animation-delay: 5s;   animation-duration: 30s; }
.hero-particles .p11 { left: 86%; bottom: -2%; animation-delay: 10s;  animation-duration: 22s; }
.hero-particles .p12 { left: 93%; bottom: -2%; animation-delay: 1s;   animation-duration: 26s; }
@keyframes floatUp {
  0%   { transform: translate(0, 0); opacity: 0; }
  10%  { opacity: 0.5; }
  50%  { transform: translate(20px, -50vh); opacity: 0.7; }
  90%  { opacity: 0.4; }
  100% { transform: translate(-10px, -100vh); opacity: 0; }
}

/* Vignette behind headline — keeps text readable */
.hero-veil-text {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 45% 55% at 30% 50%, rgba(2,16,10,0.75) 0%, transparent 65%),
    linear-gradient(180deg, rgba(2,16,10,0.5) 0%, transparent 30%, transparent 70%, rgba(2,16,10,0.8) 100%);
  pointer-events: none;
}

/* Film grain */
.hero-grain {
  position: absolute; inset: 0;
  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.9' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0.9  0 0 0 0 0.85  0 0 0 0 0.7  0 0 0 0.35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
  opacity: 0.06;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Slow camera drift on the whole scene */
.hero-scene {
  position: absolute; inset: 0;
  overflow: hidden;
  animation: cameraDrift 30s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes cameraDrift {
  0%   { transform: scale(1.02) translate(0, 0); }
  100% { transform: scale(1.05) translate(-12px, -8px); }
}

@media (prefers-reduced-motion: reduce) {
  .aurora, .ring, .ring-stage, .hero-skyline-far, .hero-skyline-near,
  .hero-particles .p, .hero-scene { animation: none !important; }
}
.hero-architecture {
  position: absolute; inset: 0;
  pointer-events: none;
}
.hero-architecture svg { width: 100%; height: 100%; display: block; }
.hero-architecture::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 55%, rgba(2,16,10,0.65) 100%);
}

/* 3D seal */
.hero-seal-3d {
  position: absolute;
  top: 50%; left: -12%; right: auto;
  width: 440px; height: 440px;
  transform: translateY(-50%);
  pointer-events: none;
  filter: drop-shadow(0 0 60px rgba(3,178,141,0.08));
  opacity: 0.85;
}
.seal-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(3,178,141,0.22);
}
.seal-ring-1 { inset: 0; animation: sealRot 80s linear infinite; }
.seal-ring-2 { border-style: dashed; border-color: rgba(3,178,141,0.15); animation: sealRot 60s linear infinite reverse; }
.seal-ring-3 { border-color: rgba(3,178,141,0.28); animation: sealRot 100s linear infinite; }
.seal-ring-1::before, .seal-ring-1::after,
.seal-ring-3::before, .seal-ring-3::after {
  content: '';
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px var(--gold);
}
.seal-ring-1::before { top: -3px; left: 50%; transform: translateX(-50%); }
.seal-ring-1::after { bottom: -3px; left: 50%; transform: translateX(-50%); }
.seal-ring-3::before { left: -3px; top: 50%; transform: translateY(-50%); }
.seal-ring-3::after { right: -3px; top: 50%; transform: translateY(-50%); }
.seal-core {
  position: absolute;
  inset: 120px;
  display: grid;
  place-items: center;
}
.seal-ring-2 { inset: 38px; }
.seal-ring-3 { inset: 76px; }
.seal-core svg { width: 100%; height: 100%; }
.seal-legend { transform-origin: 100px 100px; animation: sealRot 40s linear infinite; }
@keyframes sealRot { to { transform: rotate(360deg); } }

/* corner registration marks */
.hero-grid-marks {
  position: absolute; inset: 100px 40px 40px;
  pointer-events: none;
}
.grid-mark {
  position: absolute;
  width: 28px; height: 28px;
  border: 1px solid rgba(3,178,141,0.35);
}
.grid-mark.tl { top: 0; left: 0; border-right: none; border-bottom: none; }
.grid-mark.tr { top: 0; right: 0; border-left: none; border-bottom: none; }
.grid-mark.bl { bottom: 0; left: 0; border-right: none; border-top: none; }
.grid-mark.br { bottom: 0; right: 0; border-left: none; border-top: none; }

/* legacy hero layers (kept for compat) */
.hero-sky {
  position: absolute; inset: -6% -4%;
  background:
    radial-gradient(ellipse 90% 60% at 50% 100%, rgba(3,178,141,0.22) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 20% 80%, rgba(28,80,55,0.5) 0%, transparent 65%),
    linear-gradient(180deg, #061812 0%, #0a2418 30%, #0e2e20 60%, #1a3a25 100%);
  will-change: transform;
}
.hero-city {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 62%;
  background:
    linear-gradient(180deg, transparent 0%, rgba(5,20,12,0.4) 60%, rgba(5,20,12,0.9) 100%),
    repeating-linear-gradient(92deg,
      transparent 0px, transparent 42px,
      rgba(0,0,0,0.4) 42px, rgba(0,0,0,0.4) 44px,
      transparent 44px, transparent 80px,
      rgba(0,0,0,0.5) 80px, rgba(0,0,0,0.5) 83px,
      transparent 83px, transparent 130px,
      rgba(0,0,0,0.35) 130px, rgba(0,0,0,0.35) 132px,
      transparent 132px, transparent 180px),
    linear-gradient(0deg, #02110a 0%, #0a2418 50%, transparent 100%);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 600' preserveAspectRatio='none'><path fill='black' d='M0,600 L0,380 L30,380 L30,300 L80,300 L80,340 L130,340 L130,260 L160,260 L160,200 L200,200 L200,300 L260,300 L260,220 L310,220 L310,280 L360,280 L360,180 L400,180 L400,100 L440,100 L440,180 L490,180 L490,240 L540,240 L540,160 L600,160 L600,220 L660,220 L660,140 L710,140 L710,90 L760,90 L760,200 L810,200 L810,250 L860,250 L860,160 L910,160 L910,220 L970,220 L970,130 L1020,130 L1020,60 L1060,60 L1060,140 L1110,140 L1110,210 L1160,210 L1160,150 L1220,150 L1220,220 L1270,220 L1270,160 L1320,160 L1320,240 L1380,240 L1380,180 L1430,180 L1430,260 L1490,260 L1490,200 L1550,200 L1550,290 L1600,290 L1600,600 Z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 600' preserveAspectRatio='none'><path fill='black' d='M0,600 L0,380 L30,380 L30,300 L80,300 L80,340 L130,340 L130,260 L160,260 L160,200 L200,200 L200,300 L260,300 L260,220 L310,220 L310,280 L360,280 L360,180 L400,180 L400,100 L440,100 L440,180 L490,180 L490,240 L540,240 L540,160 L600,160 L600,220 L660,220 L660,140 L710,140 L710,90 L760,90 L760,200 L810,200 L810,250 L860,250 L860,160 L910,160 L910,220 L970,220 L970,130 L1020,130 L1020,60 L1060,60 L1060,140 L1110,140 L1110,210 L1160,210 L1160,150 L1220,150 L1220,220 L1270,220 L1270,160 L1320,160 L1320,240 L1380,240 L1380,180 L1430,180 L1430,260 L1490,260 L1490,200 L1550,200 L1550,290 L1600,290 L1600,600 Z'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  will-change: transform;
}
.hero-city-front {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 38%;
  background:
    linear-gradient(0deg, #010806 0%, #051a10 60%, transparent 100%);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 400' preserveAspectRatio='none'><path fill='black' d='M0,400 L0,260 L80,260 L80,200 L140,200 L140,280 L220,280 L220,180 L280,180 L280,220 L340,220 L340,140 L420,140 L420,240 L500,240 L500,160 L580,160 L580,220 L660,220 L660,120 L740,120 L740,200 L820,200 L820,140 L900,140 L900,240 L980,240 L980,180 L1060,180 L1060,100 L1140,100 L1140,220 L1220,220 L1220,160 L1300,160 L1300,240 L1380,240 L1380,180 L1460,180 L1460,260 L1540,260 L1540,200 L1600,200 L1600,400 Z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 400' preserveAspectRatio='none'><path fill='black' d='M0,400 L0,260 L80,260 L80,200 L140,200 L140,280 L220,280 L220,180 L280,180 L280,220 L340,220 L340,140 L420,140 L420,240 L500,240 L500,160 L580,160 L580,220 L660,220 L660,120 L740,120 L740,200 L820,200 L820,140 L900,140 L900,240 L980,240 L980,180 L1060,180 L1060,100 L1140,100 L1140,220 L1220,220 L1220,160 L1300,160 L1300,240 L1380,240 L1380,180 L1460,180 L1460,260 L1540,260 L1540,200 L1600,200 L1600,400 Z'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  will-change: transform;
}

/* lights blinking in skyline */
.hero-lights {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 68%, rgba(232,215,168,0.9), transparent 50%),
    radial-gradient(1px 1px at 24% 75%, rgba(232,215,168,0.7), transparent 50%),
    radial-gradient(1px 1px at 36% 62%, rgba(232,215,168,0.8), transparent 50%),
    radial-gradient(1px 1px at 48% 80%, rgba(232,215,168,0.6), transparent 50%),
    radial-gradient(1px 1px at 62% 70%, rgba(232,215,168,0.85), transparent 50%),
    radial-gradient(1px 1px at 74% 76%, rgba(232,215,168,0.5), transparent 50%),
    radial-gradient(1px 1px at 86% 68%, rgba(232,215,168,0.7), transparent 50%),
    radial-gradient(1.5px 1.5px at 18% 82%, rgba(232,215,168,0.8), transparent 50%),
    radial-gradient(1.5px 1.5px at 56% 88%, rgba(232,215,168,0.7), transparent 50%),
    radial-gradient(1.5px 1.5px at 90% 84%, rgba(232,215,168,0.6), transparent 50%);
  opacity: 0.9;
  animation: cityTwinkle 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes cityTwinkle {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

/* floating dust */
.hero-dust {
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 15% 20%, rgba(3,178,141,0.3), transparent),
    radial-gradient(1.5px 1.5px at 75% 35%, rgba(3,178,141,0.35), transparent),
    radial-gradient(1px 1px at 45% 55%, rgba(255,255,255,0.2), transparent),
    radial-gradient(2px 2px at 85% 60%, rgba(3,178,141,0.25), transparent),
    radial-gradient(1.5px 1.5px at 30% 70%, rgba(255,255,255,0.2), transparent),
    radial-gradient(1px 1px at 60% 15%, rgba(3,178,141,0.3), transparent);
  opacity: 0.4;
  animation: dustFloat 20s linear infinite;
}
@keyframes dustFloat {
  0% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-20px) translateX(10px); }
  100% { transform: translateY(0) translateX(0); }
}

/* hero veil */
.hero-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 25% 40%, rgba(0,0,0,0.3) 0%, transparent 70%),
    linear-gradient(180deg, rgba(5,26,16,0.55) 0%, rgba(5,26,16,0.7) 60%, rgba(5,26,16,0.95) 100%);
}

/* hero seal */
.hero-seal {
  position: absolute;
  top: 50%; right: -120px;
  transform: translateY(-50%);
  width: 580px; height: 580px;
  pointer-events: none;
  opacity: 0.38;
  mix-blend-mode: screen;
}
.hero-seal svg { width: 100%; height: 100%; animation: sealSpin 120s linear infinite; }
@keyframes sealSpin { to { transform: rotate(360deg); } }

.hero-inner { position: relative; z-index: 3; width: 100%; }
.hero-meta {
  display: inline-flex; align-items: center; gap: 14px;
  margin-bottom: 22px;
  padding: 8px 16px;
  border: 1px solid rgba(3,178,141,0.25);
  background: rgba(3,178,141,0.05);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  font-family: 'Almarai', 'Inter', sans-serif;
  font-size: 10.5px; letter-spacing: 0.28em;
  color: rgba(255,255,255,0.72);
  text-transform: uppercase;
}
.hero-meta .dot { width: 6px; height: 6px; background: var(--gold); border-radius: 50%; box-shadow: 0 0 10px var(--gold); animation: metaPulse 2s ease-in-out infinite; }
.hero-meta .sep { color: rgba(3,178,141,0.5); }
@keyframes metaPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

.hero-brand-line {
  font-family: 'Almarai', 'Readex Pro', 'IBM Plex Sans Arabic', sans-serif;
  font-size: clamp(13px, 1.1vw, 15px);
  color: var(--gold-soft);
  margin-bottom: 20px;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: none;
  opacity: 0.7;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.hero-brand-line::before {
  content: '';
  width: 32px; height: 1px;
  background: var(--gold);
  opacity: 0.6;
}

.hero h1 {
  font-size: clamp(40px, 5.4vw, 82px);
  font-weight: 600;
  line-height: 1.12;
  max-width: 19ch;
  margin: 0 0 36px;
  letter-spacing: -0.015em;
  text-wrap: balance;
  font-optical-sizing: auto;
  margin: 0 0 12px;
}
.hero-subtitle {
  font-size: clamp(16px, 1.8vw, 22px);
  font-weight: 400;
  line-height: 1.6;
  color: rgba(244, 239, 230, 0.88);
  max-width: 42ch;
  margin: 0 0 36px;
  font-family: 'Almarai', sans-serif;
}
.hero h1 .accent {
  color: var(--gold);
  font-family: inherit;
  font-weight: inherit;
  font-style: normal;
  position: relative;
  padding: 0 0.05em;
}
.hero h1 .accent::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0.08em;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.5;
}

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-bottom: 56px; }

.hero-footline {
  display: flex;
  align-items: center;
  gap: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.1);
  max-width: 520px;
  width: fit-content;
}
.hf-num {
  font-family: 'Almarai', 'Readex Pro', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  font-size: 40px;
  font-weight: 500;
  color: var(--gold-soft);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum','lnum','ss01';
  direction: ltr;
  display: inline-block;
}
.hf-lbl {
  font-family: 'Almarai', 'Readex Pro', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.52);
  font-weight: 400;
}
.hf-col { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.hf-divider { width: 1px; height: 44px; background: linear-gradient(180deg, transparent, rgba(255,255,255,0.18), transparent); }

@media (max-width: 900px) {
  .hero { padding: 90px 0 40px; min-height: 640px; }
  .hero-seal-3d { width: 420px; height: 420px; right: -30%; opacity: 0.45; }
  .hero-footline { gap: 20px; flex-wrap: wrap; }
  .hf-num { font-size: 26px; }
}

/* ============ SECTIONS ============ */
section { padding: 140px 0; position: relative; }
section.tight { padding: 100px 0; }

.section-head {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 80px;
  margin-bottom: 90px;
  align-items: end;
}
.section-head h2 {
  font-size: clamp(36px, 4.6vw, 72px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.section-head h2 .serif { font-weight: 400; font-style: italic; color: var(--g-800); display: block; }
.section-head p { color: var(--ink-2); font-size: 17px; max-width: 56ch; line-height: 1.85; }

/* ============ INTRO ============ */
.intro { background: var(--paper); overflow: hidden; }
.intro::before {
  content: '';
  position: absolute;
  top: -10%; left: -10%;
  width: 540px; height: 540px;
  background: radial-gradient(circle, rgba(20,61,42,0.06), transparent 65%);
  pointer-events: none;
}
.intro-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.3fr;
  gap: 100px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.intro-title {
  font-family: 'Almarai', 'Cormorant Garamond', serif;
  font-size: clamp(72px, 11vw, 180px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  background: linear-gradient(160deg, var(--g-800) 0%, var(--g-700) 40%, var(--gold-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 32px;
  padding: 0.1em 0.05em;
  overflow: visible;
}
.intro-title-sub {
  font-family: 'Almarai', 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.intro-title-sub .bar { width: 50px; height: 1px; background: var(--gold); }

.intro-body p {
  font-size: 19px;
  color: var(--ink-2);
  line-height: 1.95;
  margin-bottom: 40px;
  text-wrap: pretty;
}
.intro-body p::first-letter {
  font-family: 'Almarai', 'Cormorant Garamond', serif;
  font-size: 1.4em;
  color: var(--g-800);
  font-weight: 500;
}

/* ============ BANNER ============ */
.banner {
  position: relative;
  padding: 180px 0;
  color: #fff;
  overflow: hidden;
  text-align: center;
}
.banner-scene { position: absolute; inset: 0; }
.banner-sky {
  position: absolute; inset: -5%;
  background:
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(3,178,141,0.15) 0%, transparent 60%),
    linear-gradient(180deg, #0a2418 0%, #143d2a 50%, #0a2418 100%);
  will-change: transform;
}
.banner-sky.violet {
  background:
    radial-gradient(ellipse 70% 40% at 50% 100%, rgba(232,167,119,0.25) 0%, transparent 60%),
    linear-gradient(180deg, #1a0f2e 0%, #3a1f4a 45%, #1a0f2e 100%);
}
.banner-city {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 50%;
  background: linear-gradient(0deg, #020a06 0%, transparent 100%);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 400' preserveAspectRatio='none'><path fill='black' d='M0,400 L0,200 L60,200 L60,140 L120,140 L120,220 L200,220 L200,120 L260,120 L260,180 L340,180 L340,100 L420,100 L420,200 L500,200 L500,140 L580,140 L580,80 L660,80 L660,200 L740,200 L740,140 L820,140 L820,60 L900,60 L900,180 L980,180 L980,120 L1060,120 L1060,200 L1140,200 L1140,140 L1220,140 L1220,80 L1300,80 L1300,200 L1380,200 L1380,140 L1460,140 L1460,220 L1540,220 L1540,160 L1600,160 L1600,400 Z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 400' preserveAspectRatio='none'><path fill='black' d='M0,400 L0,200 L60,200 L60,140 L120,140 L120,220 L200,220 L200,120 L260,120 L260,180 L340,180 L340,100 L420,100 L420,200 L500,200 L500,140 L580,140 L580,80 L660,80 L660,200 L740,200 L740,140 L820,140 L820,60 L900,60 L900,180 L980,180 L980,120 L1060,120 L1060,200 L1140,200 L1140,140 L1220,140 L1220,80 L1300,80 L1300,200 L1380,200 L1380,140 L1460,140 L1460,220 L1540,220 L1540,160 L1600,160 L1600,400 Z'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  will-change: transform;
}
.banner-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,26,16,0.4) 0%, rgba(5,26,16,0.75) 100%);
}
.banner-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 32px;
}
.banner h2 {
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 600;
  max-width: 18ch;
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.banner p {
  max-width: 56ch;
  color: rgba(255,255,255,0.78);
  font-size: 17px;
  line-height: 1.85;
}

/* ============ STATS ============ */
.stats { background: var(--paper-2); padding: 120px 0; }
.stats-wrap {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--sh-md);
  overflow: hidden;
  position: relative;
}
.stats-wrap::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.stats-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stat {
  padding: 60px 40px;
  border-left: 1px solid var(--line);
  position: relative;
  transition: background .4s var(--ease);
}
.stat:last-child { border-left: none; }
.stat:hover { background: var(--paper); }
.stat-num {
  font-family: 'Almarai', 'Cormorant Garamond', serif;
  font-size: clamp(56px, 6vw, 88px);
  font-weight: 500;
  color: var(--g-800);
  line-height: 1;
  margin-bottom: 20px;
  letter-spacing: -0.03em;
  direction: ltr;
  text-align: right;
  background: linear-gradient(180deg, var(--g-700), var(--g-900));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-label {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 22ch;
  font-weight: 500;
}
.stat-mark {
  position: absolute;
  top: 24px; left: 24px;
  font-family: 'Almarai', 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--ink-4);
  font-weight: 500;
}

/* ============ SERVICES ============ */
.services { background: var(--paper); }
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--sh-md);
}
.service-card {
  background: var(--paper);
  padding: 48px 40px;
  cursor: pointer;
  position: relative;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: background .4s var(--ease), transform .5s var(--ease);
  overflow: hidden;
  isolation: isolate;
}
.service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, var(--g-900) 0%, var(--g-800) 100%);
  transform: translateY(100%);
  transition: transform .5s var(--ease);
  z-index: -1;
}
.service-card:hover::before { transform: translateY(0); }
.service-card:hover { color: #fff; }
.service-card:hover .service-body p { color: rgba(255,255,255,0.75); }
.service-card:hover .service-num { color: var(--gold); }
.service-card:hover .service-arrow {
  background: var(--gold); color: var(--g-900); border-color: var(--gold);
  transform: rotate(-45deg);
}

.service-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 40px;
}
.service-num {
  font-family: 'Almarai', 'Cormorant Garamond', serif;
  font-size: 16px;
  color: var(--g-700);
  letter-spacing: 0.1em;
  transition: color .4s;
}
.service-icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  color: var(--g-800);
  border: 1px solid var(--line-2);
  border-radius: 50%;
  transition: all .4s var(--ease);
  background: rgba(255,255,255,0.5);
}
.service-card:hover .service-icon {
  color: var(--gold); border-color: rgba(3,178,141,0.4);
  background: rgba(255,255,255,0.06);
}
.service-body h3 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 14px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.service-body p { color: var(--ink-2); font-size: 15px; line-height: 1.75; transition: color .4s; }
.service-arrow {
  margin-top: 36px;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  display: grid; place-items: center;
  color: var(--g-800);
  transition: all .5s var(--ease);
}

/* ============ PROCESS ============ */
.process {
  background: var(--g-950);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.process::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 80% 30%, rgba(3,178,141,0.06), transparent 60%),
    radial-gradient(ellipse 50% 40% at 15% 70%, rgba(28,80,55,0.2), transparent 60%);
  pointer-events: none;
}
.process .container { position: relative; z-index: 2; }
.process .section-head h2 { color: #fff; }
.process .section-head p { color: rgba(255,255,255,0.7); }

.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(3,178,141,0.15);
}
.process-step {
  padding: 56px 36px 64px;
  border-left: 1px solid rgba(255,255,255,0.08);
  transition: all .5s var(--ease);
  position: relative;
  cursor: default;
}
.process-step:last-child { border-left: none; }
.process-step::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 0; height: 2px;
  background: var(--gold);
  transition: width .6s var(--ease);
}
.process-step.active::before { width: 100%; }
.process-step.active { background: linear-gradient(180deg, rgba(3,178,141,0.04), transparent); }
.process-num {
  font-family: 'Almarai', 'Cormorant Garamond', serif;
  font-size: 96px;
  font-weight: 400;
  color: rgba(255,255,255,0.1);
  line-height: 1.2;
  margin-bottom: 28px;
  letter-spacing: -0.05em;
  transition: color .5s var(--ease);
}
.process-step.active .process-num {
  background: linear-gradient(180deg, var(--gold-soft), var(--gold-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.process-step h3 { font-size: 22px; font-weight: 700; margin-bottom: 16px; letter-spacing: -0.01em; }
.process-step p { color: rgba(255,255,255,0.68); font-size: 15px; line-height: 1.8; }

/* ============ TESTIMONIALS ============ */
.testimonials {
  background: linear-gradient(180deg, var(--g-800) 0%, var(--g-900) 100%);
  color: #fff;
  padding: 140px 0;
  position: relative;
  overflow: hidden;
}
.testimonials::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 40% at 10% 30%, rgba(3,178,141,0.08), transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 70%, rgba(3,178,141,0.05), transparent 60%);
}
.testimonials .container { position: relative; }
.testimonials .section-head h2 { color: #fff; }

.testimonial-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.testimonial {
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.1);
  padding: 40px 32px;
  border-radius: var(--radius-lg);
  backdrop-filter: blur(12px);
  transition: all .5s var(--ease);
  position: relative;
  overflow: hidden;
}
.testimonial::before {
  content: '';
  position: absolute;
  top: 0; right: 0; left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(3,178,141,0.5), transparent);
  opacity: 0; transition: opacity .4s;
}
.testimonial:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
  transform: translateY(-6px);
  border-color: rgba(3,178,141,0.25);
}
.testimonial:hover::before { opacity: 1; }
.quote-mark {
  font-family: 'Almarai', 'Cormorant Garamond', serif;
  font-size: 84px;
  line-height: 0.4;
  color: var(--gold);
  margin-bottom: 32px;
  display: block;
  font-weight: 500;
}
.testimonial p {
  font-size: 14px;
  line-height: 1.85;
  color: rgba(255,255,255,0.92);
  margin-bottom: 32px;
  direction: ltr;
  text-align: left;
  font-style: italic;
  font-family: 'Almarai', 'Cormorant Garamond', serif;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.005em;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.12);
  direction: ltr;
}
.avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold-2));
  display: grid; place-items: center;
  font-weight: 700;
  color: var(--g-900);
  font-size: 15px;
  font-family: 'Almarai', 'Inter', sans-serif;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.1), 0 4px 12px rgba(0,0,0,0.25);
}
.testimonial-author strong {
  display: block;
  font-weight: 600;
  font-family: 'Almarai', 'Inter', sans-serif;
  font-size: 14px;
  letter-spacing: -0.005em;
}
.testimonial-author span {
  color: rgba(255,255,255,0.55);
  font-size: 12px;
  font-family: 'Almarai', 'Inter', sans-serif;
  letter-spacing: 0.02em;
}

/* ============ TEAM ============ */
.team { background: var(--paper-2); position: relative; }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.team-card {
  background: var(--paper);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: all .5s var(--ease);
  border-radius: var(--radius-lg);
  position: relative;
}
.team-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s var(--ease);
}
.team-card:hover { transform: translateY(-8px); box-shadow: var(--sh-lg); }
.team-card:hover::after { transform: scaleX(1); }

.team-photo {
  aspect-ratio: 3/4;
  background:
    linear-gradient(135deg, rgba(20,61,42,0.12) 0%, rgba(3,178,141,0.15) 100%),
    repeating-linear-gradient(45deg, rgba(20,61,42,0.05) 0 1px, transparent 1px 18px),
    linear-gradient(180deg, #ebe5d2, #d8d0ba);
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.team-photo::before {
  content: '';
  position: absolute;
  inset: 15% 25%;
  background: radial-gradient(ellipse, rgba(20,61,42,0.15), transparent 70%);
  border-radius: 50% 50% 45% 45%;
}
.team-photo::after {
  content: 'PORTRAIT';
  position: absolute;
  bottom: 16px;
  font-family: 'Almarai', 'Inter', sans-serif;
  font-size: 9px;
  letter-spacing: 0.35em;
  color: rgba(0,0,0,0.35);
  font-weight: 500;
}
.team-info { padding: 28px; }
.team-info h4 {
  font-size: 19px;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
  font-weight: 700;
}
.team-info .role {
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.65;
  font-family: 'Almarai', 'Inter', sans-serif;
  direction: ltr;
  text-align: left;
}

/* ============ FAQ ============ */
.faq { background: var(--paper); position: relative; }
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 100px;
  align-items: start;
}
.faq-aside h2 {
  font-size: clamp(36px, 4.6vw, 64px);
  font-weight: 600;
  margin-bottom: 28px;
  letter-spacing: -0.025em;
  line-height: 1.05;
}
.faq-aside h2 .serif { display: block; font-style: italic; font-weight: 400; color: var(--g-800); }
.faq-aside p { color: var(--ink-2); font-size: 17px; margin-bottom: 40px; line-height: 1.85; max-width: 40ch; }

.faq-list { border-top: 1px solid var(--line); }
.faq-item {
  border-bottom: 1px solid var(--line);
  transition: background .4s var(--ease);
}
.faq-item.open { background: rgba(20,61,42,0.02); }
.faq-q {
  width: 100%;
  text-align: right;
  background: none;
  border: none;
  padding: 32px 0;
  font-family: inherit;
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  transition: color .3s;
  letter-spacing: -0.01em;
}
.faq-q:hover { color: var(--g-800); }
.faq-icon {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  display: grid; place-items: center;
  transition: all .5s var(--ease);
  color: var(--g-800);
  position: relative;
}
.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  background: currentColor;
  transition: transform .4s var(--ease);
}
.faq-icon::before { width: 12px; height: 1.5px; }
.faq-icon::after { width: 1.5px; height: 12px; }
.faq-item.open .faq-icon {
  background: var(--g-800);
  color: #fff;
  border-color: var(--g-800);
}
.faq-item.open .faq-icon::after { transform: rotate(90deg); opacity: 0; }
.faq-item.open .faq-icon::before { transform: rotate(180deg); }

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s var(--ease-slow);
  color: var(--ink-2);
  line-height: 1.9;
}
.faq-item.open .faq-a { max-height: 600px; }
.faq-a-inner { padding: 0 0 32px; max-width: 60ch; font-size: 16px; }

/* ============ CASES ============ */
.cases {
  background: var(--g-950);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.cases::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 40% at 90% 20%, rgba(3,178,141,0.07), transparent 60%),
    radial-gradient(ellipse 60% 50% at 10% 80%, rgba(20,61,42,0.3), transparent 60%);
}
.cases .container { position: relative; }
.cases .section-head h2 { color: #fff; }

.cases-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.case-card {
  background: var(--g-950);
  padding: 32px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all .5s var(--ease);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.case-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top right, rgba(3,178,141,0.08), transparent 60%);
  opacity: 0;
  transition: opacity .4s;
}
.case-card:hover { background: #0a3423; }
.case-card:hover::before { opacity: 1; }
.case-num {
  font-family: 'Almarai', 'Cormorant Garamond', serif;
  font-size: 14px;
  color: var(--gold);
  letter-spacing: 0.15em;
  margin-bottom: 20px;
  font-weight: 500;
  position: relative;
}
.case-card h4 {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  flex: 1;
  position: relative;
  letter-spacing: -0.005em;
}
.case-arrow {
  margin-top: 28px;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  display: grid; place-items: center;
  color: var(--gold);
  transition: all .4s var(--ease);
  position: relative;
}
.case-card:hover .case-arrow {
  background: var(--gold);
  color: var(--g-900);
  border-color: var(--gold);
  transform: rotate(-45deg);
}

/* ============ BLOG ============ */
.blog { background: var(--paper); position: relative; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.blog-card { cursor: pointer; }
.blog-img-wrap {
  aspect-ratio: 4/3;
  overflow: hidden;
  margin-bottom: 28px;
  border-radius: var(--radius-lg);
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--line);
}
.blog-img {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(160deg, rgba(20,61,42,0.1), rgba(3,178,141,0.15)),
    repeating-linear-gradient(45deg, rgba(20,61,42,0.08) 0 1px, transparent 1px 20px),
    linear-gradient(180deg, #ede7d5, #d8d0ba);
  transition: transform .8s var(--ease-slow), filter .6s;
}
.blog-card:hover .blog-img { transform: scale(1.06); filter: brightness(1.05); }
.blog-img::after {
  content: 'EDITORIAL IMAGE';
  position: absolute;
  bottom: 16px; right: 16px;
  font-family: 'Almarai', 'Inter', sans-serif;
  font-size: 9px;
  letter-spacing: 0.3em;
  color: rgba(0,0,0,0.4);
  background: rgba(255,255,255,0.75);
  padding: 5px 10px;
  backdrop-filter: blur(4px);
  border-radius: 2px;
}
.blog-meta {
  display: flex;
  gap: 14px;
  font-family: 'Almarai', 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.blog-meta .pill {
  padding: 4px 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
}
.blog-card h4 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.45;
  font-family: 'Almarai', 'Inter', sans-serif;
  direction: ltr;
  text-align: left;
  transition: color .3s;
  letter-spacing: -0.015em;
}
.blog-card:hover h4 { color: var(--g-800); }

/* ============ FOOTER ============ */
.footer {
  background: var(--ink);
  color: rgba(255,255,255,0.65);
  padding: 0 0 32px;
  font-size: 14px;
  position: relative;
  overflow: hidden;
}
.footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.footer-cta {
  background:
    radial-gradient(ellipse 60% 80% at 80% 20%, rgba(3,178,141,0.12), transparent 60%),
    linear-gradient(135deg, var(--g-800) 0%, var(--g-900) 100%);
  margin: 0;
  padding: 100px 48px;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.footer-cta::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.footer-cta h3 {
  font-size: clamp(28px, 3.6vw, 44px);
  margin-bottom: 40px;
  max-width: 28ch;
  margin-inline: auto;
  line-height: 1.3;
  color: #fff;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.footer-form {
  display: flex;
  gap: 12px;
  max-width: 560px;
  margin: 0 auto;
}
.footer-form input {
  flex: 1;
  padding: 16px 20px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  transition: all .3s;
}
.footer-form input::placeholder { color: rgba(255,255,255,0.5); }
.footer-form input:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(255,255,255,0.12);
  box-shadow: 0 0 0 3px rgba(3,178,141,0.15);
}
.form-msg { margin-top: 18px; font-size: 14px; min-height: 20px; font-family: 'Almarai', 'Inter', sans-serif; letter-spacing: 0.02em; }
.form-msg.success { color: var(--gold-soft); }
.form-msg.error { color: #e8b4a8; }

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 60px;
  padding: 80px 40px 60px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 36px;
  max-width: var(--maxw);
  margin-inline: auto;
}
.footer-brand .logo { color: #fff; margin-bottom: 28px; }
.footer-brand .logo-mark {
  background: radial-gradient(circle at 30% 30%, var(--gold-soft), var(--gold-2));
  color: var(--g-900);
}
.footer-tagline {
  color: rgba(255,255,255,0.5);
  font-size: 14px;
  margin-bottom: 28px;
  max-width: 36ch;
  line-height: 1.75;
}
.footer-contact { display: flex; flex-direction: column; gap: 6px; }
.footer-contact a { color: rgba(255,255,255,0.75); font-weight: 500; }
.footer h5 {
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin-bottom: 24px;
  font-family: 'Almarai', 'Inter', sans-serif;
}
.footer a {
  display: block;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  padding: 7px 0;
  transition: color .3s, transform .3s;
  position: relative;
}
.footer a:hover { color: var(--gold-soft); transform: translateX(-4px); }
.footer-bottom {
  padding: 0 40px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.35);
  text-align: center;
  max-width: var(--maxw);
  margin-inline: auto;
  letter-spacing: 0.02em;
}

/* ============ REVEAL ============ */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-stagger > * { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal-stagger.in > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: 0.12s; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 0.19s; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: 0.26s; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: 0.33s; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: 0.40s; }
.reveal-stagger.in > *:nth-child(7) { transition-delay: 0.47s; }
.reveal-stagger.in > *:nth-child(8) { transition-delay: 0.54s; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1100px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .cases-grid { grid-template-columns: repeat(3, 1fr); }
  .testimonial-track { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 780px) {
  .container { padding: 0 24px; }
  .section-head, .intro-grid, .faq-grid { grid-template-columns: 1fr; gap: 36px; }
  .stats-band { grid-template-columns: 1fr 1fr; }
  .stat { border-bottom: 1px solid var(--line); padding: 40px 28px; }
  .stat:nth-child(2) { border-left: none; }
  .services-grid, .blog-grid, .testimonial-track, .team-grid, .cases-grid, .process-grid { grid-template-columns: 1fr; }
  .process-step, .process-step:last-child { border-left: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .footer-grid { grid-template-columns: 1fr; gap: 40px; }
  section { padding: 80px 0; }
  .footer-form { flex-direction: column; }
  .hero { padding: 140px 0 80px; }
  .hero-seal { width: 340px; height: 340px; right: -80px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; }
}

/* ── Additional mobile fixes for right-new-website ──
   Nav curved style + services grid ── */
@media (max-width: 780px) {
  /* Services grid: 1 col */
  .services-grid {
    grid-template-columns: 1fr !important;
  }

  /* Blog grid 1 col */
  .blog-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  /* Cases grid 1 col */
  .cases-grid {
    grid-template-columns: 1fr !important;
  }
  /* Footer fix */
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}
@media (max-width: 480px) {
  .hero h1 { font-size: clamp(32px, 9vw, 56px) !important; }
  .stats-band { grid-template-columns: 1fr !important; }
}

/* ============ Phase 1 additions: CTA actions + clickable cards ============ */
.footer-cta-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 8px;
}
.footer-cta-actions .btn {
  min-width: 220px;
  justify-content: center;
}
@media (max-width: 480px) {
  .footer-cta-actions .btn { min-width: 0; width: 100%; }
}

/* cards now wrapped in <a> — reset link defaults */
a.service-card,
a.case-card,
a.blog-card,
a.team-card {
  text-decoration: none;
  color: inherit;
  display: block;
  cursor: pointer;
}
a.service-card:focus-visible,
a.case-card:focus-visible,
a.blog-card:focus-visible,
a.team-card:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  border-radius: 4px;
}

/* lang-btn is now <a> instead of <button> */
a.lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}


/* Team cards without photos */
.team-card--text .team-info {
  padding: 44px 32px 36px;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.team-card--text .team-num {
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--gold);
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 4px;
}
.team-card--text .team-info h4 {
  font-size: 22px;
  line-height: 1.3;
  margin: 0;
}
.team-card--text .team-info .role {
  flex-grow: 1;
  font-size: 14px;
  line-height: 1.75;
  margin-top: 4px;
  text-align: start;
  direction: inherit;
  font-family: 'Almarai', 'Inter', sans-serif;
}
.team-card--text .team-arrow {
  align-self: flex-start;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--paper-2);
  display: grid;
  place-items: center;
  transition: all .35s var(--ease);
  margin-top: 12px;
}
.team-card--text:hover .team-arrow {
  background: var(--gold);
  color: var(--g-900);
  transform: translate(-4px, 0);
}
[dir="ltr"] .team-card--text:hover .team-arrow {
  transform: translate(4px, 0);
}


/* Micro-label converted to link */
a.micro-link {
  text-decoration: none;
  color: var(--ink-3);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-family: 'JetBrains Mono','Almarai',monospace;
  transition: color .25s var(--ease);
  cursor: pointer;
}
a.micro-link:hover { color: var(--gold); }



/* ── Mobile: hamburger-driven nav ── */
.nav-burger {
  display: none;
  background: transparent;
  border: none;
  padding: 6px;
  cursor: pointer;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  flex-direction: column;
  gap: 5px;
  justify-content: center;
  align-items: center;
}
.nav-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 820px) {
  /* Keep curved nav look */
  .nav {
    top: 10px !important;
    left: 14px !important;
    right: 14px !important;
    padding: 10px 14px !important;
    border-radius: 14px !important;
  }
  .nav.scrolled { padding: 9px 14px !important; }

  .nav-inner {
    flex-wrap: nowrap;
    gap: 10px;
    align-items: center;
  }

  /* Show hamburger */
  .nav-burger { display: flex; order: 2; }

  /* Hide nav links inline; show as dropdown panel when open */
  .nav-links {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #2f3066;
    border-radius: 14px;
    padding: 12px 8px;
    flex-direction: column;
    gap: 0 !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.35);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height .35s var(--ease), opacity .25s var(--ease), visibility .25s;
    display: flex !important;
    align-items: stretch !important;
  }
  .nav-links.open {
    max-height: 400px;
    opacity: 1;
    visibility: visible;
  }
  .nav-links li { width: 100%; }
  .nav-links a {
    display: block;
    padding: 14px 18px;
    font-size: 15px !important;
    color: #fff !important;
    letter-spacing: 0;
    border-radius: 8px;
    transition: background .15s;
  }
  .nav-links a:hover { background: rgba(255,255,255,0.08); color: var(--gold) !important; }
  .nav-links .has-dropdown .dropdown { display: none !important; }
  .nav-links .has-dropdown > a svg { display: none; }

  /* Logo compact */
  .logo { order: 1; }
  .logo img { height: 32px !important; }

  /* Language switcher always visible */
  .nav-right { order: 3; gap: 6px !important; }
  .lang-switch { padding: 3px !important; gap: 3px !important; }
  .lang-btn { padding: 4px !important; }
  .lang-btn .flag img, .lang-btn .flag svg { width: 22px !important; height: 22px !important; }

  /* Hide contact (email) button on mobile — hamburger menu already has it */
  .nav-right .btn {
    display: none !important;
  }
}

@media (max-width: 400px) {
  .logo img { height: 28px !important; }
  .nav-right .btn { padding: 8px 9px !important; }
  .lang-btn { padding: 3px !important; }
}