/* =========================================================
   NAWFALPRO — Design System
   Digital Infrastructure • Automation • AI Solutions
   ========================================================= */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { list-style: none; padding: 0; }
img, picture, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; width: 100%; scroll-padding-top: 84px; scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---------- Tokens ---------- */
:root{
  /* premium surface system — a deep-navy canvas is now the site default
     (never plain white), with white reserved for elevated content cards
     (pricing cards, the proposal form) where dark text stays easiest to read. */
  --bg: #0a0f1c;
  --bg-elev: #ffffff;
  --bg-elev-2: #eaeff7;
  --line: rgba(255,255,255,.12);
  --line-strong: rgba(255,255,255,.20);
  --text: #f2f5fb;
  --text-dim: #b7c1d4;
  --text-faint: #7c88a0;

  --gold: #b8863a;
  --gold-soft: #96692a;
  --gold-ink: #171203;
  --teal: #16916f;
  --danger: #c9433a;
  --danger-bg: rgba(201,67,58,.08);

  /* same deep-navy tone, named separately for the hero/security surfaces
     that intentionally stay self-contained regardless of the root theme */
  --navy: #0a0f1c;
  --navy-elev: #131c30;
  --navy-line: rgba(255,255,255,.12);
  --navy-line-strong: rgba(255,255,255,.20);
  --navy-text: #f2f5fb;
  --navy-text-dim: #b7c1d4;
  --navy-text-faint: #7c88a0;
  --blue: #6d9bdb;
  --blue-deep: #2c4977;

  /* the one shared "luxury card" surface — gold sheen, deep navy, a hint of
     wine/plum — used identically by every Package and Solution card so the
     whole pricing system reads as one consistent, richer-than-flat-navy tone */
  --card-bg-featured: linear-gradient(135deg, rgba(228,203,142,.26) 0%, rgba(19,28,48,.96) 45%, rgba(36,25,45,.96) 100%);

  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow-lg: 0 30px 70px -35px rgba(10,16,30,.18);
  --shadow-md: 0 16px 34px -20px rgba(10,16,30,.14);

  --container: 1180px;
  --gutter: clamp(20px, 5vw, 48px);

  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.16,.8,.24,1);
}

html[dir="rtl"]{ --font-body: 'Manrope', 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }

/* The page is dark by default, so tell the browser to draw its own native
   chrome (select dropdown lists, scrollbars, etc.) in dark mode too —
   otherwise selects render a white options list no matter what we style. */
html{ color-scheme: dark; }

body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  transition: background .3s var(--ease), color .3s var(--ease);
}

/* Site-wide photo backdrop — fixed behind every section so it reads as one
   continuous page background, not just a hero banner. */
body::before{
  content:""; position: fixed; inset: -24px; z-index: -1;
  background-image:
    linear-gradient(180deg, rgba(5,8,14,.50) 0%, rgba(5,8,14,.62) 55%, rgba(5,8,14,.76) 100%),
    url('/pic/pic9.jpg');
  background-position: center, center 42%;
  background-size: auto, cover;
  background-repeat: no-repeat;
  filter: blur(2.5px) saturate(.9);
}
/* glass layer: a faint sheen + tiny water beads scattered over the picture (static, sharp, not blurred) */
body::after{
  content:""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(115deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,.04) 58%, rgba(255,255,255,0) 100%),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27640%27%20height%3D%27640%27%20viewBox%3D%270%200%20640%20640%27%3E%0A%3Cdefs%3E%0A%3CradialGradient%20id%3D%27g%27%20cx%3D%2738%25%27%20cy%3D%2732%25%27%20r%3D%2775%25%27%3E%0A%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23fff%27%20stop-opacity%3D%27.42%27%2F%3E%0A%3Cstop%20offset%3D%27.45%27%20stop-color%3D%27%23cfe6ff%27%20stop-opacity%3D%27.10%27%2F%3E%0A%3Cstop%20offset%3D%27.85%27%20stop-color%3D%27%239cc4ee%27%20stop-opacity%3D%27.07%27%2F%3E%0A%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23fff%27%20stop-opacity%3D%27.30%27%2F%3E%0A%3C%2FradialGradient%3E%0A%3C%2Fdefs%3E%3Cellipse%20cx%3D%278.1%27%20cy%3D%2740.6%27%20rx%3D%273.22%27%20ry%3D%273.00%27%20fill%3D%27%23000%27%20opacity%3D%27.16%27%2F%3E%3Ccircle%20cx%3D%277.5%27%20cy%3D%2739.7%27%20r%3D%273.16%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%270.40%27%2F%3E%3Ccircle%20cx%3D%276.4%27%20cy%3D%2738.5%27%20r%3D%270.63%27%20fill%3D%27%23fff%27%20opacity%3D%27.85%27%2F%3E%3Cellipse%20cx%3D%27447.8%27%20cy%3D%27334.4%27%20rx%3D%272.17%27%20ry%3D%272.02%27%20fill%3D%27%23000%27%20opacity%3D%27.16%27%2F%3E%3Ccircle%20cx%3D%27447.4%27%20cy%3D%27333.7%27%20r%3D%272.13%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%270.40%27%2F%3E%3Ccircle%20cx%3D%27446.7%27%20cy%3D%27332.9%27%20r%3D%270.50%27%20fill%3D%27%23fff%27%20opacity%3D%27.85%27%2F%3E%3Cellipse%20cx%3D%27298.8%27%20cy%3D%27154.3%27%20rx%3D%272.44%27%20ry%3D%272.28%27%20fill%3D%27%23000%27%20opacity%3D%27.16%27%2F%3E%3Ccircle%20cx%3D%27298.4%27%20cy%3D%27153.6%27%20r%3D%272.40%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%270.40%27%2F%3E%3Ccircle%20cx%3D%27297.6%27%20cy%3D%27152.6%27%20r%3D%270.50%27%20fill%3D%27%23fff%27%20opacity%3D%27.85%27%2F%3E%3Cellipse%20cx%3D%27467.4%27%20cy%3D%27165.5%27%20rx%3D%271.71%27%20ry%3D%271.60%27%20fill%3D%27%23000%27%20opacity%3D%27.16%27%2F%3E%3Ccircle%20cx%3D%27467.1%27%20cy%3D%27165.0%27%20r%3D%271.68%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%270.40%27%2F%3E%3Ccircle%20cx%3D%27466.5%27%20cy%3D%27164.4%27%20r%3D%270.50%27%20fill%3D%27%23fff%27%20opacity%3D%27.85%27%2F%3E%3Cellipse%20cx%3D%27489.3%27%20cy%3D%27332.3%27%20rx%3D%271.79%27%20ry%3D%271.67%27%20fill%3D%27%23000%27%20opacity%3D%27.16%27%2F%3E%3Ccircle%20cx%3D%27489.0%27%20cy%3D%27331.8%27%20r%3D%271.75%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%270.40%27%2F%3E%3Ccircle%20cx%3D%27488.4%27%20cy%3D%27331.1%27%20r%3D%270.50%27%20fill%3D%27%23fff%27%20opacity%3D%27.85%27%2F%3E%3Cellipse%20cx%3D%27235.9%27%20cy%3D%27188.4%27%20rx%3D%272.41%27%20ry%3D%272.24%27%20fill%3D%27%23000%27%20opacity%3D%27.16%27%2F%3E%3Ccircle%20cx%3D%27235.5%27%20cy%3D%27187.7%27%20r%3D%272.36%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%270.40%27%2F%3E%3Ccircle%20cx%3D%27234.7%27%20cy%3D%27186.8%27%20r%3D%270.50%27%20fill%3D%27%23fff%27%20opacity%3D%27.85%27%2F%3E%3Cellipse%20cx%3D%27190.0%27%20cy%3D%27626.4%27%20rx%3D%271.88%27%20ry%3D%271.75%27%20fill%3D%27%23000%27%20opacity%3D%27.16%27%2F%3E%3Ccircle%20cx%3D%27189.7%27%20cy%3D%27625.9%27%20r%3D%271.85%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%270.40%27%2F%3E%3Ccircle%20cx%3D%27189.0%27%20cy%3D%27625.2%27%20r%3D%270.50%27%20fill%3D%27%23fff%27%20opacity%3D%27.85%27%2F%3E%3Cellipse%20cx%3D%27562.1%27%20cy%3D%27122.6%27%20rx%3D%271.69%27%20ry%3D%271.58%27%20fill%3D%27%23000%27%20opacity%3D%27.16%27%2F%3E%3Ccircle%20cx%3D%27561.8%27%20cy%3D%27122.1%27%20r%3D%271.66%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%270.40%27%2F%3E%3Ccircle%20cx%3D%27561.2%27%20cy%3D%27121.5%27%20r%3D%270.50%27%20fill%3D%27%23fff%27%20opacity%3D%27.85%27%2F%3E%3Cellipse%20cx%3D%2799.4%27%20cy%3D%27186.9%27%20rx%3D%272.43%27%20ry%3D%272.27%27%20fill%3D%27%23000%27%20opacity%3D%27.16%27%2F%3E%3Ccircle%20cx%3D%2799.0%27%20cy%3D%27186.2%27%20r%3D%272.39%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%270.40%27%2F%3E%3Ccircle%20cx%3D%2798.2%27%20cy%3D%27185.3%27%20r%3D%270.50%27%20fill%3D%27%23fff%27%20opacity%3D%27.85%27%2F%3E%3Cellipse%20cx%3D%27488.1%27%20cy%3D%2748.6%27%20rx%3D%273.10%27%20ry%3D%272.89%27%20fill%3D%27%23000%27%20opacity%3D%27.16%27%2F%3E%3Ccircle%20cx%3D%27487.6%27%20cy%3D%2747.7%27%20r%3D%273.04%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%270.40%27%2F%3E%3Ccircle%20cx%3D%27486.6%27%20cy%3D%2746.5%27%20r%3D%270.61%27%20fill%3D%27%23fff%27%20opacity%3D%27.85%27%2F%3E%3Cellipse%20cx%3D%27354.8%27%20cy%3D%27398.6%27%20rx%3D%272.68%27%20ry%3D%272.49%27%20fill%3D%27%23000%27%20opacity%3D%27.16%27%2F%3E%3Ccircle%20cx%3D%27354.4%27%20cy%3D%27397.8%27%20r%3D%272.62%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%270.40%27%2F%3E%3Ccircle%20cx%3D%27353.5%27%20cy%3D%27396.8%27%20r%3D%270.52%27%20fill%3D%27%23fff%27%20opacity%3D%27.85%27%2F%3E%3Cellipse%20cx%3D%27618.8%27%20cy%3D%27400.5%27%20rx%3D%273.12%27%20ry%3D%272.91%27%20fill%3D%27%23000%27%20opacity%3D%27.16%27%2F%3E%3Ccircle%20cx%3D%27618.2%27%20cy%3D%27399.6%27%20r%3D%273.06%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%270.40%27%2F%3E%3Ccircle%20cx%3D%27617.2%27%20cy%3D%27398.4%27%20r%3D%270.61%27%20fill%3D%27%23fff%27%20opacity%3D%27.85%27%2F%3E%3Cellipse%20cx%3D%27530.0%27%20cy%3D%2726.1%27%20rx%3D%271.75%27%20ry%3D%271.63%27%20fill%3D%27%23000%27%20opacity%3D%27.16%27%2F%3E%3Ccircle%20cx%3D%27529.7%27%20cy%3D%2725.6%27%20r%3D%271.71%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%270.40%27%2F%3E%3Ccircle%20cx%3D%27529.1%27%20cy%3D%2724.9%27%20r%3D%270.50%27%20fill%3D%27%23fff%27%20opacity%3D%27.85%27%2F%3E%3Cellipse%20cx%3D%27228.7%27%20cy%3D%27272.6%27%20rx%3D%271.47%27%20ry%3D%271.36%27%20fill%3D%27%23000%27%20opacity%3D%27.16%27%2F%3E%3Ccircle%20cx%3D%27228.5%27%20cy%3D%27272.2%27%20r%3D%271.44%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%270.40%27%2F%3E%3Ccircle%20cx%3D%27228.0%27%20cy%3D%27271.7%27%20r%3D%270.50%27%20fill%3D%27%23fff%27%20opacity%3D%27.85%27%2F%3E%3Cellipse%20cx%3D%2756.8%27%20cy%3D%27492.1%27%20rx%3D%272.11%27%20ry%3D%271.96%27%20fill%3D%27%23000%27%20opacity%3D%27.16%27%2F%3E%3Ccircle%20cx%3D%2756.4%27%20cy%3D%27491.5%27%20r%3D%272.06%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%270.40%27%2F%3E%3Ccircle%20cx%3D%2755.7%27%20cy%3D%27490.7%27%20r%3D%270.50%27%20fill%3D%27%23fff%27%20opacity%3D%27.85%27%2F%3E%3Cellipse%20cx%3D%27273.7%27%20cy%3D%27300.9%27%20rx%3D%273.17%27%20ry%3D%272.95%27%20fill%3D%27%23000%27%20opacity%3D%27.16%27%2F%3E%3Ccircle%20cx%3D%27273.1%27%20cy%3D%27299.9%27%20r%3D%273.10%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%270.40%27%2F%3E%3Ccircle%20cx%3D%27272.0%27%20cy%3D%27298.8%27%20r%3D%270.62%27%20fill%3D%27%23fff%27%20opacity%3D%27.85%27%2F%3E%3Cellipse%20cx%3D%27450.5%27%20cy%3D%27441.1%27%20rx%3D%272.04%27%20ry%3D%271.90%27%20fill%3D%27%23000%27%20opacity%3D%27.16%27%2F%3E%3Ccircle%20cx%3D%27450.1%27%20cy%3D%27440.5%27%20r%3D%272.00%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%270.40%27%2F%3E%3Ccircle%20cx%3D%27449.4%27%20cy%3D%27439.8%27%20r%3D%270.50%27%20fill%3D%27%23fff%27%20opacity%3D%27.85%27%2F%3E%3Cellipse%20cx%3D%27228.3%27%20cy%3D%2789.3%27%20rx%3D%271.67%27%20ry%3D%271.56%27%20fill%3D%27%23000%27%20opacity%3D%27.16%27%2F%3E%3Ccircle%20cx%3D%27228.1%27%20cy%3D%2788.8%27%20r%3D%271.64%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%270.40%27%2F%3E%3Ccircle%20cx%3D%27227.5%27%20cy%3D%2788.2%27%20r%3D%270.50%27%20fill%3D%27%23fff%27%20opacity%3D%27.85%27%2F%3E%3Cellipse%20cx%3D%27584.7%27%20cy%3D%27206.9%27%20rx%3D%271.78%27%20ry%3D%271.66%27%20fill%3D%27%23000%27%20opacity%3D%27.16%27%2F%3E%3Ccircle%20cx%3D%27584.3%27%20cy%3D%27206.4%27%20r%3D%271.74%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%270.40%27%2F%3E%3Ccircle%20cx%3D%27583.7%27%20cy%3D%27205.7%27%20r%3D%270.50%27%20fill%3D%27%23fff%27%20opacity%3D%27.85%27%2F%3E%3Cellipse%20cx%3D%27404.9%27%20cy%3D%27216.0%27%20rx%3D%271.51%27%20ry%3D%271.40%27%20fill%3D%27%23000%27%20opacity%3D%27.16%27%2F%3E%3Ccircle%20cx%3D%27404.6%27%20cy%3D%27215.5%27%20r%3D%271.48%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%270.40%27%2F%3E%3Ccircle%20cx%3D%27404.1%27%20cy%3D%27215.0%27%20r%3D%270.50%27%20fill%3D%27%23fff%27%20opacity%3D%27.85%27%2F%3E%3Cellipse%20cx%3D%27438.4%27%20cy%3D%27590.4%27%20rx%3D%272.43%27%20ry%3D%272.27%27%20fill%3D%27%23000%27%20opacity%3D%27.16%27%2F%3E%3Ccircle%20cx%3D%27437.9%27%20cy%3D%27589.7%27%20r%3D%272.39%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%270.40%27%2F%3E%3Ccircle%20cx%3D%27437.1%27%20cy%3D%27588.8%27%20r%3D%270.50%27%20fill%3D%27%23fff%27%20opacity%3D%27.85%27%2F%3E%3Cellipse%20cx%3D%27529.6%27%20cy%3D%27420.3%27%20rx%3D%273.12%27%20ry%3D%272.90%27%20fill%3D%27%23000%27%20opacity%3D%27.16%27%2F%3E%3Ccircle%20cx%3D%27529.0%27%20cy%3D%27419.4%27%20r%3D%273.06%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%270.40%27%2F%3E%3Ccircle%20cx%3D%27528.0%27%20cy%3D%27418.2%27%20r%3D%270.61%27%20fill%3D%27%23fff%27%20opacity%3D%27.85%27%2F%3E%3Cellipse%20cx%3D%2775.4%27%20cy%3D%27339.9%27%20rx%3D%272.62%27%20ry%3D%272.44%27%20fill%3D%27%23000%27%20opacity%3D%27.16%27%2F%3E%3Ccircle%20cx%3D%2774.9%27%20cy%3D%27339.2%27%20r%3D%272.57%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%270.40%27%2F%3E%3Ccircle%20cx%3D%2774.0%27%20cy%3D%27338.2%27%20r%3D%270.51%27%20fill%3D%27%23fff%27%20opacity%3D%27.85%27%2F%3E%3Cellipse%20cx%3D%27570.8%27%20cy%3D%27615.6%27%20rx%3D%272.97%27%20ry%3D%272.76%27%20fill%3D%27%23000%27%20opacity%3D%27.16%27%2F%3E%3Ccircle%20cx%3D%27570.3%27%20cy%3D%27614.7%27%20r%3D%272.91%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%270.40%27%2F%3E%3Ccircle%20cx%3D%27569.3%27%20cy%3D%27613.6%27%20r%3D%270.58%27%20fill%3D%27%23fff%27%20opacity%3D%27.85%27%2F%3E%3Cellipse%20cx%3D%27380.9%27%20cy%3D%27617.8%27%20rx%3D%273.20%27%20ry%3D%272.98%27%20fill%3D%27%23000%27%20opacity%3D%27.16%27%2F%3E%3Ccircle%20cx%3D%27380.3%27%20cy%3D%27616.9%27%20r%3D%273.14%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%270.40%27%2F%3E%3Ccircle%20cx%3D%27379.2%27%20cy%3D%27615.7%27%20r%3D%270.63%27%20fill%3D%27%23fff%27%20opacity%3D%27.85%27%2F%3E%3Cellipse%20cx%3D%27351.3%27%20cy%3D%27524.3%27%20rx%3D%271.44%27%20ry%3D%271.34%27%20fill%3D%27%23000%27%20opacity%3D%27.16%27%2F%3E%3Ccircle%20cx%3D%27351.1%27%20cy%3D%27523.9%27%20r%3D%271.41%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%270.40%27%2F%3E%3Ccircle%20cx%3D%27350.6%27%20cy%3D%27523.3%27%20r%3D%270.50%27%20fill%3D%27%23fff%27%20opacity%3D%27.85%27%2F%3E%3Cellipse%20cx%3D%27331.2%27%20cy%3D%27211.5%27%20rx%3D%275.33%27%20ry%3D%274.97%27%20fill%3D%27%23000%27%20opacity%3D%27.16%27%2F%3E%3Ccircle%20cx%3D%27330.3%27%20cy%3D%27210.0%27%20r%3D%275.23%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%270.40%27%2F%3E%3Ccircle%20cx%3D%27328.5%27%20cy%3D%27208.0%27%20r%3D%271.05%27%20fill%3D%27%23fff%27%20opacity%3D%27.85%27%2F%3E%3Cellipse%20cx%3D%27352.7%27%20cy%3D%27485.2%27%20rx%3D%276.05%27%20ry%3D%275.64%27%20fill%3D%27%23000%27%20opacity%3D%27.16%27%2F%3E%3Ccircle%20cx%3D%27351.7%27%20cy%3D%27483.5%27%20r%3D%275.94%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%270.40%27%2F%3E%3Ccircle%20cx%3D%27349.7%27%20cy%3D%27481.2%27%20r%3D%271.19%27%20fill%3D%27%23fff%27%20opacity%3D%27.85%27%2F%3E%3Cellipse%20cx%3D%27357.6%27%20cy%3D%27528.1%27%20rx%3D%274.49%27%20ry%3D%274.18%27%20fill%3D%27%23000%27%20opacity%3D%27.16%27%2F%3E%3Ccircle%20cx%3D%27356.8%27%20cy%3D%27526.8%27%20r%3D%274.40%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%270.40%27%2F%3E%3Ccircle%20cx%3D%27355.3%27%20cy%3D%27525.1%27%20r%3D%270.88%27%20fill%3D%27%23fff%27%20opacity%3D%27.85%27%2F%3E%3Cellipse%20cx%3D%27412.0%27%20cy%3D%27474.1%27%20rx%3D%274.84%27%20ry%3D%274.51%27%20fill%3D%27%23000%27%20opacity%3D%27.16%27%2F%3E%3Ccircle%20cx%3D%27411.1%27%20cy%3D%27472.7%27%20r%3D%274.74%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%270.40%27%2F%3E%3Ccircle%20cx%3D%27409.5%27%20cy%3D%27470.9%27%20r%3D%270.95%27%20fill%3D%27%23fff%27%20opacity%3D%27.85%27%2F%3E%3Cellipse%20cx%3D%27200.5%27%20cy%3D%27152.5%27%20rx%3D%273.29%27%20ry%3D%273.06%27%20fill%3D%27%23000%27%20opacity%3D%27.16%27%2F%3E%3Ccircle%20cx%3D%27199.9%27%20cy%3D%27151.6%27%20r%3D%273.23%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%270.40%27%2F%3E%3Ccircle%20cx%3D%27198.8%27%20cy%3D%27150.3%27%20r%3D%270.65%27%20fill%3D%27%23fff%27%20opacity%3D%27.85%27%2F%3E%3Cellipse%20cx%3D%2716.4%27%20cy%3D%27605.4%27%20rx%3D%275.64%27%20ry%3D%275.26%27%20fill%3D%27%23000%27%20opacity%3D%27.16%27%2F%3E%3Ccircle%20cx%3D%2715.4%27%20cy%3D%27603.8%27%20r%3D%275.53%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%270.40%27%2F%3E%3Ccircle%20cx%3D%2713.5%27%20cy%3D%27601.7%27%20r%3D%271.11%27%20fill%3D%27%23fff%27%20opacity%3D%27.85%27%2F%3E%3Cellipse%20cx%3D%27404.5%27%20cy%3D%2710.7%27%20rx%3D%275.03%27%20ry%3D%274.69%27%20fill%3D%27%23000%27%20opacity%3D%27.16%27%2F%3E%3Ccircle%20cx%3D%27403.6%27%20cy%3D%279.2%27%20r%3D%274.93%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%270.40%27%2F%3E%3Ccircle%20cx%3D%27401.9%27%20cy%3D%277.3%27%20r%3D%270.99%27%20fill%3D%27%23fff%27%20opacity%3D%27.85%27%2F%3E%3Cellipse%20cx%3D%27381.8%27%20cy%3D%27460.6%27%20rx%3D%276.11%27%20ry%3D%275.69%27%20fill%3D%27%23000%27%20opacity%3D%27.16%27%2F%3E%3Ccircle%20cx%3D%27380.7%27%20cy%3D%27458.8%27%20r%3D%275.99%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%270.40%27%2F%3E%3Ccircle%20cx%3D%27378.7%27%20cy%3D%27456.5%27%20r%3D%271.20%27%20fill%3D%27%23fff%27%20opacity%3D%27.85%27%2F%3E%3Cellipse%20cx%3D%27178.8%27%20cy%3D%27632.7%27%20rx%3D%275.12%27%20ry%3D%274.77%27%20fill%3D%27%23000%27%20opacity%3D%27.16%27%2F%3E%3Ccircle%20cx%3D%27177.9%27%20cy%3D%27631.2%27%20r%3D%275.02%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%270.40%27%2F%3E%3Ccircle%20cx%3D%27176.2%27%20cy%3D%27629.3%27%20r%3D%271.00%27%20fill%3D%27%23fff%27%20opacity%3D%27.85%27%2F%3E%3Cellipse%20cx%3D%27516.1%27%20cy%3D%27401.3%27%20rx%3D%275.63%27%20ry%3D%275.25%27%20fill%3D%27%23000%27%20opacity%3D%27.16%27%2F%3E%3Ccircle%20cx%3D%27515.1%27%20cy%3D%27399.6%27%20r%3D%275.52%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%270.40%27%2F%3E%3Ccircle%20cx%3D%27513.3%27%20cy%3D%27397.5%27%20r%3D%271.10%27%20fill%3D%27%23fff%27%20opacity%3D%27.85%27%2F%3E%3Cellipse%20cx%3D%2789.8%27%20cy%3D%27637.7%27%20rx%3D%274.71%27%20ry%3D%274.39%27%20fill%3D%27%23000%27%20opacity%3D%27.16%27%2F%3E%3Ccircle%20cx%3D%2789.0%27%20cy%3D%27636.3%27%20r%3D%274.62%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%270.40%27%2F%3E%3Ccircle%20cx%3D%2787.4%27%20cy%3D%27634.5%27%20r%3D%270.92%27%20fill%3D%27%23fff%27%20opacity%3D%27.85%27%2F%3E%3Cellipse%20cx%3D%27363.6%27%20cy%3D%27104.3%27%20rx%3D%274.40%27%20ry%3D%274.09%27%20fill%3D%27%23000%27%20opacity%3D%27.16%27%2F%3E%3Ccircle%20cx%3D%27362.8%27%20cy%3D%27103.0%27%20r%3D%274.31%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%270.40%27%2F%3E%3Ccircle%20cx%3D%27361.3%27%20cy%3D%27101.3%27%20r%3D%270.86%27%20fill%3D%27%23fff%27%20opacity%3D%27.85%27%2F%3E%3Cellipse%20cx%3D%27135.8%27%20cy%3D%27522.4%27%20rx%3D%275.72%27%20ry%3D%275.33%27%20fill%3D%27%23000%27%20opacity%3D%27.16%27%2F%3E%3Ccircle%20cx%3D%27134.8%27%20cy%3D%27520.7%27%20r%3D%275.61%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%270.40%27%2F%3E%3Ccircle%20cx%3D%27132.9%27%20cy%3D%27518.5%27%20r%3D%271.12%27%20fill%3D%27%23fff%27%20opacity%3D%27.85%27%2F%3E%3Cellipse%20cx%3D%27472.1%27%20cy%3D%27423.2%27%20rx%3D%276.09%27%20ry%3D%275.67%27%20fill%3D%27%23000%27%20opacity%3D%27.16%27%2F%3E%3Ccircle%20cx%3D%27471.0%27%20cy%3D%27421.4%27%20r%3D%275.97%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%270.40%27%2F%3E%3Ccircle%20cx%3D%27469.0%27%20cy%3D%27419.1%27%20r%3D%271.19%27%20fill%3D%27%23fff%27%20opacity%3D%27.85%27%2F%3E%3Cellipse%20cx%3D%27391.0%27%20cy%3D%27473.1%27%20rx%3D%275.99%27%20ry%3D%275.58%27%20fill%3D%27%23000%27%20opacity%3D%27.16%27%2F%3E%3Ccircle%20cx%3D%27390.0%27%20cy%3D%27471.3%27%20r%3D%275.88%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%270.40%27%2F%3E%3Ccircle%20cx%3D%27388.0%27%20cy%3D%27469.1%27%20r%3D%271.18%27%20fill%3D%27%23fff%27%20opacity%3D%27.85%27%2F%3E%3Cellipse%20cx%3D%27314.0%27%20cy%3D%27148.5%27%20rx%3D%274.93%27%20ry%3D%274.59%27%20fill%3D%27%23000%27%20opacity%3D%27.16%27%2F%3E%3Ccircle%20cx%3D%27313.1%27%20cy%3D%27147.1%27%20r%3D%274.84%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%270.40%27%2F%3E%3Ccircle%20cx%3D%27311.5%27%20cy%3D%27145.2%27%20r%3D%270.97%27%20fill%3D%27%23fff%27%20opacity%3D%27.85%27%2F%3E%3Cellipse%20cx%3D%27510.4%27%20cy%3D%27548.5%27%20rx%3D%276.80%27%20ry%3D%276.33%27%20fill%3D%27%23000%27%20opacity%3D%27.16%27%2F%3E%3Ccircle%20cx%3D%27509.2%27%20cy%3D%27546.5%27%20r%3D%276.66%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%270.40%27%2F%3E%3Ccircle%20cx%3D%27507.0%27%20cy%3D%27544.0%27%20r%3D%271.33%27%20fill%3D%27%23fff%27%20opacity%3D%27.85%27%2F%3E%3Cellipse%20cx%3D%27356.5%27%20cy%3D%27308.1%27%20rx%3D%278.00%27%20ry%3D%277.45%27%20fill%3D%27%23000%27%20opacity%3D%27.16%27%2F%3E%3Ccircle%20cx%3D%27355.1%27%20cy%3D%27305.7%27%20r%3D%277.84%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%270.47%27%2F%3E%3Ccircle%20cx%3D%27352.5%27%20cy%3D%27302.8%27%20r%3D%271.57%27%20fill%3D%27%23fff%27%20opacity%3D%27.85%27%2F%3E%3Cellipse%20cx%3D%27116.7%27%20cy%3D%27162.7%27%20rx%3D%277.69%27%20ry%3D%277.16%27%20fill%3D%27%23000%27%20opacity%3D%27.16%27%2F%3E%3Ccircle%20cx%3D%27115.3%27%20cy%3D%27160.4%27%20r%3D%277.54%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%270.45%27%2F%3E%3Ccircle%20cx%3D%27112.8%27%20cy%3D%27157.5%27%20r%3D%271.51%27%20fill%3D%27%23fff%27%20opacity%3D%27.85%27%2F%3E%3Cellipse%20cx%3D%27306.7%27%20cy%3D%27111.1%27%20rx%3D%276.13%27%20ry%3D%275.71%27%20fill%3D%27%23000%27%20opacity%3D%27.16%27%2F%3E%3Ccircle%20cx%3D%27305.6%27%20cy%3D%27109.3%27%20r%3D%276.01%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%270.40%27%2F%3E%3Ccircle%20cx%3D%27303.6%27%20cy%3D%27107.1%27%20r%3D%271.20%27%20fill%3D%27%23fff%27%20opacity%3D%27.85%27%2F%3E%3Cellipse%20cx%3D%27112.0%27%20cy%3D%2717.3%27%20rx%3D%276.50%27%20ry%3D%276.06%27%20fill%3D%27%23000%27%20opacity%3D%27.16%27%2F%3E%3Ccircle%20cx%3D%27110.8%27%20cy%3D%2715.4%27%20r%3D%276.38%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%270.40%27%2F%3E%3Ccircle%20cx%3D%27108.7%27%20cy%3D%2713.0%27%20r%3D%271.28%27%20fill%3D%27%23fff%27%20opacity%3D%27.85%27%2F%3E%3Cellipse%20cx%3D%27562.0%27%20cy%3D%27630.9%27%20rx%3D%276.33%27%20ry%3D%275.90%27%20fill%3D%27%23000%27%20opacity%3D%27.16%27%2F%3E%3Ccircle%20cx%3D%27560.8%27%20cy%3D%27629.0%27%20r%3D%276.21%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%270.40%27%2F%3E%3Ccircle%20cx%3D%27558.7%27%20cy%3D%27626.6%27%20r%3D%271.24%27%20fill%3D%27%23fff%27%20opacity%3D%27.85%27%2F%3E%3Cellipse%20cx%3D%27113.0%27%20cy%3D%27261.5%27%20rx%3D%277.90%27%20ry%3D%277.36%27%20fill%3D%27%23000%27%20opacity%3D%27.16%27%2F%3E%3Ccircle%20cx%3D%27111.7%27%20cy%3D%27259.2%27%20r%3D%277.75%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%270.46%27%2F%3E%3Ccircle%20cx%3D%27109.0%27%20cy%3D%27256.3%27%20r%3D%271.55%27%20fill%3D%27%23fff%27%20opacity%3D%27.85%27%2F%3E%3Cellipse%20cx%3D%27470.8%27%20cy%3D%27239.1%27%20rx%3D%2711.67%27%20ry%3D%2710.87%27%20fill%3D%27%23000%27%20opacity%3D%27.16%27%2F%3E%3Ccircle%20cx%3D%27468.7%27%20cy%3D%27235.7%27%20r%3D%2711.44%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%270.69%27%2F%3E%3Ccircle%20cx%3D%27464.8%27%20cy%3D%27231.3%27%20r%3D%272.29%27%20fill%3D%27%23fff%27%20opacity%3D%27.85%27%2F%3E%3Cellipse%20cx%3D%27509.0%27%20cy%3D%27458.8%27%20rx%3D%2713.46%27%20ry%3D%2712.54%27%20fill%3D%27%23000%27%20opacity%3D%27.16%27%2F%3E%3Ccircle%20cx%3D%27506.6%27%20cy%3D%27454.9%27%20r%3D%2713.20%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%270.79%27%2F%3E%3Ccircle%20cx%3D%27502.1%27%20cy%3D%27449.9%27%20r%3D%272.64%27%20fill%3D%27%23fff%27%20opacity%3D%27.85%27%2F%3E%3Cellipse%20cx%3D%27341.3%27%20cy%3D%27514.4%27%20rx%3D%2711.88%27%20ry%3D%2711.07%27%20fill%3D%27%23000%27%20opacity%3D%27.16%27%2F%3E%3Ccircle%20cx%3D%27339.2%27%20cy%3D%27510.9%27%20r%3D%2711.65%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%270.70%27%2F%3E%3Ccircle%20cx%3D%27335.2%27%20cy%3D%27506.5%27%20r%3D%272.33%27%20fill%3D%27%23fff%27%20opacity%3D%27.85%27%2F%3E%3C%2Fsvg%3E");
  background-size: auto, 640px 640px;
  background-repeat: no-repeat, repeat;
}

section{ background: transparent; color: var(--text); }

h1,h2,h3,h4{ font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }
h1{ font-size: clamp(2.2rem, 5.2vw, 3.9rem); }
h2{ font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
h3{ font-size: clamp(1.15rem, 2vw, 1.4rem); }
p{ color: var(--text-dim); }

.container{ max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

.eyebrow{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 14px;
}
.eyebrow::before{ content:""; width: 22px; height: 1px; background: var(--gold); }
html[dir="rtl"] .eyebrow::before{ order: 2; }

.section-head{ max-width: 660px; margin-bottom: 48px; }
.section-head.center{ margin-inline: auto; text-align: center; }
.section-head p{ margin-top: 14px; font-size: 1.05rem; }

.section-pad{ padding-block: clamp(64px, 9vw, 116px); }
.section-pad-sm{ padding-block: clamp(44px, 6vw, 72px); }

/* ---------- Buttons (layered 3D) ----------
   Each button is a face + a solid "edge" (box-shadow stack) so it reads as a
   physical key: hover lifts it, press pushes it down into its edge.
   --edge = edge colour, --edge-h = edge depth, --glow = ambient shadow.   */
.btn{
  --edge: rgba(0,0,0,.45); --edge-h: 4px; --glow: rgba(0,0,0,.4);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 26px; border-radius: 999px; font-weight: 700; font-size: .95rem;
  border: 1px solid transparent; white-space: nowrap;
  transform: translateY(0);
  box-shadow:
    0 var(--edge-h) 0 0 var(--edge),
    0 calc(var(--edge-h) + 10px) 22px -8px var(--glow),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(0,0,0,.18);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), filter .25s var(--ease);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn svg{ width: 18px; height: 18px; flex-shrink: 0; }
.btn:hover{ transform: translateY(-2px); --edge-h: 6px; }
.btn:active{ transform: translateY(calc(var(--edge-h) - 1px)); --edge-h: 1px; transition-duration: .06s; }
.btn:focus-visible{ outline: 2px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 5px rgba(201,162,77,.55), 0 var(--edge-h) 0 0 var(--edge); }

/* Every gold CTA site-wide shares this one metallic treatment, built on
   the brand accent rgb(201,162,77). */
.btn-primary{
  --edge: #7d5a1c; --glow: rgba(201,162,77,.55);
  background: linear-gradient(180deg, #ecd79c 0%, rgb(201,162,77) 48%, #b28733 100%);
  color: var(--gold-ink);
  border-color: rgba(236,215,156,.65);
}
.btn-primary:hover{ filter: brightness(1.05); }
.btn-outline{
  --edge: rgba(0,0,0,.5); --glow: rgba(0,0,0,.35);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  border-color: rgba(255,255,255,.28); color: var(--text);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.btn-outline:hover{ border-color: rgb(201,162,77); color: #ecd79c; }
.btn-whatsapp{
  --edge: #128a45; --glow: rgba(37,211,102,.45);
  background: linear-gradient(180deg, #45e383, #25d366 55%, #1fb955); color: #fff; border-color: rgba(255,255,255,.22);
}
.btn-whatsapp:hover{ filter: brightness(1.05); }
.btn-instagram{
  --edge: #6a1f78; --glow: rgba(193,53,132,.45);
  background: linear-gradient(45deg, #405de6, #833ab4 30%, #c13584 50%, #e1306c 65%, #fd8d32 90%);
  color: #fff; border-color: rgba(255,255,255,.22);
}
.btn-instagram:hover{ filter: brightness(1.08); }
.btn-gmail{
  --edge: #8f1712; --glow: rgba(234,67,53,.45);
  background: linear-gradient(180deg, #f2604f, #ea4335 55%, #c5221f); color: #fff; border-color: rgba(255,255,255,.22);
}
.btn-gmail:hover{ filter: brightness(1.06); }
.btn-block{ width: 100%; }
.btn-sm{ min-height: 42px; padding: 9px 18px; font-size: .85rem; --edge-h: 3px; }
@media (prefers-reduced-motion: reduce){
  .btn:hover, .btn:active{ transform: none; }
}

/* ---------- Header ---------- */
/* Floating, bar-less header: no background, border or reserved height — the
   hero runs to the very top. Once scrolled, only a soft fade keeps the brand
   and controls legible over content. */
.site-header{
  position: fixed; inset-inline: 0; top: 0; z-index: 100;
  background: transparent; border: 0;
  padding-top: env(safe-area-inset-top);
  transition: background .3s var(--ease);
}
/* no bar / shadow band when scrolled: the header stays fully transparent; a soft text-shadow keeps it legible */
.site-header .brand, .site-header .lang-switch{ text-shadow: 0 1px 10px rgba(0,0,0,.65); }
.header-inner{ display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 16px; }
.brand{ display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.28rem; letter-spacing: -.02em; color: var(--text); }
.brand .mark{ width: 34px; height: 34px; border-radius: 9px; object-fit: cover; flex-shrink: 0; }
.brand small{ display:block; font-size:.62rem; font-weight:700; letter-spacing:.1em; color: var(--text-faint); text-transform: uppercase; margin-top: 1px; }
.brand-dot{ color: var(--gold); font-size: .6em; margin-inline: 2px; vertical-align: middle; }
.brand-pro{ color: var(--gold); }

.main-nav{ display: none; }
.main-nav ul{
  display: flex; align-items: center; gap: 30px;
  /* same glass recipe as the footer card */
  background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.03) 45%, rgba(10,15,28,.45));
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 10px 24px;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.14);
}
.main-nav a{ white-space: nowrap; font-size: .92rem; font-weight: 600; color: #c3ccdc; position: relative; padding-block: 4px; transition: color .2s var(--ease); }
.main-nav a:hover{ color: rgb(201,162,77); }
.main-nav a::after{ content:""; position:absolute; inset-inline:0; bottom:-2px; height:2px; background: rgb(201,162,77); transform: scaleX(0); transform-origin: center; transition: transform .25s var(--ease); }
.main-nav a:hover::after{ transform: scaleX(1); }

.header-actions{ display: flex; align-items: center; gap: 10px; }
.lang-switch{ display: flex; align-items: center; gap: 2px; border: 1px solid var(--line-strong); border-radius: 999px; padding: 3px; font-size: .78rem; font-weight: 700; }
.lang-switch a{ padding: 6px 11px; border-radius: 999px; color: var(--text-faint); }
.lang-switch a.active{ background: var(--bg-elev-2); color: var(--gold-ink); }

.nav-toggle{ display: inline-flex; background: rgba(5,7,12,.45); border: 1px solid var(--line-strong); border-radius: 10px; width: 44px; height: 44px; align-items: center; justify-content: center; }
.nav-toggle svg{ width: 20px; height: 20px; }
.nav-toggle .icon-close{ display: none; }
.nav-toggle[aria-expanded="true"] .icon-open{ display: none; }
.nav-toggle[aria-expanded="true"] .icon-close{ display: block; }

.header-actions .btn-primary{ display: none; }

.mobile-panel{
  position: fixed; inset: 0; top: 0;
  background: var(--bg);
  z-index: 99;
  padding: calc(100px + env(safe-area-inset-top)) 24px calc(40px + env(safe-area-inset-bottom));
  transform: translateY(-8px); opacity: 0; pointer-events: none;
  transition: opacity .28s var(--ease), transform .28s var(--ease);
  overflow-y: auto;
}
.mobile-panel.is-open{ opacity: 1; transform: translateY(0); pointer-events: auto; }
.mobile-panel ul{ display: flex; flex-direction: column; gap: 6px; margin-bottom: 32px; }
.mobile-panel a{ display: block; padding: 14px 6px; font-size: 1.2rem; font-weight: 700; border-bottom: 1px solid var(--line); }
.mobile-panel .mp-actions{ display: flex; flex-direction: column; gap: 12px; }

@media (min-width: 1120px){ /* single-line nav needs room, esp. in Arabic */
  .main-nav{ display: block; }
  .header-actions .btn-primary{ display: inline-flex; }
  .nav-toggle{ display: none; }
  .mobile-panel{ display: none; }
}

/* ---------- Hero ---------- */
/* Centered cinematic hero: a Particle Drift canvas (over a pure-CSS gradient
   fallback) behind the copy. The hero keeps its own dark token overrides. */
.hero{
  position: relative; overflow: hidden; background: transparent; isolation: isolate;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
  padding-block: clamp(112px, 16vh, 168px) clamp(72px, 10vh, 112px);
  --text: var(--navy-text);
  --text-dim: var(--navy-text-dim);
  --text-faint: var(--navy-text-faint);
  --line: var(--navy-line);
  --line-strong: var(--navy-line-strong);
  --bg-elev-2: rgba(255,255,255,.10);
  --gold-soft: #e4cb8e;
  --intro-delay: 2.15s; /* hero content enters as the intro lifts */
}
/* Base backdrop (under the particle layer): brand-colour glows. */
.hero::before{
  content:""; position:absolute; inset: 0; z-index: -2;
  background-image:
    radial-gradient(900px 560px at 50% -6%, rgba(201,162,77,.24), transparent 62%),
    radial-gradient(700px 520px at 88% 78%, rgba(43,214,173,.10), transparent 60%),
    radial-gradient(640px 480px at 8% 84%, rgba(120,70,150,.14), transparent 60%);
}
/* readability veil between the particle layer and the copy */
.hero-veil{
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 75% 60% at 50% 50%, rgba(5,7,12,.32), transparent 78%),
    linear-gradient(180deg, rgba(5,7,12,.35), transparent 30%);
}
.hero-center{
  position: relative; z-index: 1; width: 100%;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.hero-center > *{ animation: heroIn .9s var(--ease) both; animation-delay: calc(var(--intro-delay) + var(--i, 0) * .09s); }
@keyframes heroIn{ from{ opacity: 0; transform: translateY(22px); } to{ opacity: 1; transform: none; } }

.hero-badge{
  --i: 0;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 18px; margin-bottom: 26px; border-radius: 999px;
  font-size: .82rem; font-weight: 700; letter-spacing: .02em; color: #ecd79c;
  background: rgba(201,162,77,.10); border: 1px solid rgba(201,162,77,.35);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.hero-badge-dot{ width: 8px; height: 8px; border-radius: 50%; background: rgb(201,162,77); box-shadow: 0 0 0 0 rgba(201,162,77,.6); animation: badgePulse 2.4s ease-out infinite; flex-shrink: 0; }
@keyframes badgePulse{ 0%{ box-shadow: 0 0 0 0 rgba(201,162,77,.55); } 100%{ box-shadow: 0 0 0 10px rgba(201,162,77,0); } }

.hero-center h1{
  --i: 1;
  font-size: clamp(2.4rem, 8.4vw, 5.6rem); line-height: 1.04; letter-spacing: -.03em; margin-bottom: 22px; max-width: 16ch;
}
html[dir="rtl"] .hero-center h1{ letter-spacing: 0; line-height: 1.3; max-width: none; white-space: nowrap; font-size: clamp(1.45rem, 7.4vw, 5rem); } /* Arabic headline stays on ONE line */
html[dir="rtl"] .hero-center h1 .h1-accent{ display: inline-block; padding-bottom: .16em; } /* keeps Arabic descenders from clipping under background-clip */
.hero-center h1 .h1-line{ display: block; }
.hero-center h1 .h1-accent{
  background: linear-gradient(100deg, #f4e3b0 0%, rgb(201,162,77) 45%, #e8c777 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: .08em; /* keeps descenders from clipping under background-clip */
}
.hero-center .lead{ --i: 2; font-size: clamp(1.02rem, 2.4vw, 1.22rem); color: var(--text-dim); max-width: 46rem; margin-bottom: 14px; }
.hero-center .sub{ --i: 3; font-size: clamp(.95rem, 2.1vw, 1.02rem); color: #a4b0c6; max-width: 40rem; margin-bottom: 34px; }
.hero-cta{ --i: 4; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-bottom: 44px; }
.hero-meta{ --i: 5; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px; }
.hero-meta div{ display: flex; flex-direction: column; align-items: center; }
.hero-meta strong{ font-size: 1.5rem; font-weight: 800; color: var(--gold-soft); }
.hero-meta span{ font-size: .8rem; color: var(--text-faint); }
@media (max-width: 520px){
  .hero{ align-items: flex-start; }
  .hero-cta{ flex-direction: column; align-items: stretch; width: 100%; max-width: 340px; }
  .hero-cta .btn{ width: 100%; white-space: normal; }
}

/* ---------- Cinematic intro ----------
   Pure-CSS timeline (so it always ends, even if JS fails); main.js only
   removes it from the DOM afterwards and lets a click/key skip it. It never
   locks scroll. Total ≈ 2.9s.                                            */
.np-intro{
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  background: linear-gradient(165deg, #0f2438 0%, #1a4058 52%, #10293d 100%); /* arctic: cool deep-glacier blue, not near-black */
  overflow: hidden; cursor: pointer;
  animation: npIntroOut .75s cubic-bezier(.7,0,.2,1) 2.15s forwards;
}
.np-intro.is-done{ display: none; }
.np-intro-bg{
  position: absolute; inset: 0; overflow: hidden;
  background: radial-gradient(640px 460px at 50% 48%, rgba(214,238,255,.34), transparent 66%);
  animation: npGlow 2.4s ease-out both;
}
/* slow arctic-aurora drift: icy cyan, cool teal and a touch of brand gold */
.np-intro-bg::before, .np-intro-bg::after{
  content:""; position: absolute; width: 90vmax; height: 46vmax; left: 50%; top: 50%; border-radius: 50%;
  filter: blur(60px); opacity: .75;
}
.np-intro-bg::before{
  background: radial-gradient(closest-side, rgba(120,214,255,.5), rgba(90,230,200,.22) 55%, transparent 75%);
  transform: translate(-70%,-90%) rotate(-14deg); animation: npAuroraA 3s ease-in-out infinite alternate;
}
.np-intro-bg::after{
  background: radial-gradient(closest-side, rgba(201,162,77,.34), rgba(190,225,255,.16) 60%, transparent 78%);
  transform: translate(-30%,-10%) rotate(10deg); animation: npAuroraB 3.4s ease-in-out infinite alternate;
}
@keyframes npAuroraA{ to{ transform: translate(-58%,-78%) rotate(-6deg); } }
@keyframes npAuroraB{ to{ transform: translate(-42%,-24%) rotate(18deg); } }
/* frost sparkles */
.np-intro::after{
  content:""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 24%, rgba(255,255,255,.95), transparent 60%),
    radial-gradient(1.2px 1.2px at 28% 72%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1.8px 1.8px at 44% 14%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1.2px 1.2px at 63% 82%, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(1.6px 1.6px at 78% 30%, rgba(255,255,255,.95), transparent 60%),
    radial-gradient(1.2px 1.2px at 88% 66%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1.4px 1.4px at 6% 58%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1.4px 1.4px at 54% 46%, rgba(255,255,255,.7), transparent 60%);
  animation: npTwinkle 1.6s ease-in-out infinite alternate;
}
@keyframes npTwinkle{ from{ opacity: .35; } to{ opacity: 1; } }
.np-intro-ring{
  position: absolute; left: 50%; top: 50%; width: 30vmin; height: 30vmin; border-radius: 50%;
  border: 1px solid rgba(201,162,77,.6); transform: translate(-50%,-50%) scale(.2); opacity: 0;
  animation: npRing 2.2s cubic-bezier(.2,.7,.2,1) both;
}
.np-intro-ring:nth-of-type(2){ animation-delay: .25s; border-color: rgba(214,238,255,.55); }
.np-intro-ring:nth-of-type(3){ animation-delay: .5s; }
.np-intro-line{
  position: absolute; left: 50%; top: 50%; width: 1px; height: 42vmin; transform: translate(-50%,-50%) scaleY(0);
  background: linear-gradient(180deg, transparent, rgb(228,203,142), transparent);
  animation: npLine 1.1s cubic-bezier(.2,.7,.2,1) .1s both;
}
.np-intro-inner{ position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; direction: ltr; }
/* polished-silver wordmark with a gold dot */
.np-intro-title{
  font-size: clamp(2.4rem, 11vw, 5.4rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.05;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: linear-gradient(180deg, #ffffff 0%, #e6f3fc 45%, #a9cde3 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: .06em;
  animation: npTitle 1.2s cubic-bezier(.2,.7,.2,1) .35s both;
}
.np-intro-title .np-dot{ color: transparent; background: linear-gradient(180deg, #f4e3b0, rgb(201,162,77)); -webkit-background-clip: text; background-clip: text; }
.np-intro-tag{
  font-size: clamp(.85rem, 3.2vw, 1.15rem); font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: #ecd79c;
  text-shadow: 0 1px 14px rgba(8,24,40,.6);
  animation: npTag 1s ease-out 1.05s both;
}
html[dir="rtl"] .np-intro-tag{ letter-spacing: .04em; text-transform: none; font-size: clamp(1.15rem, 4.2vw, 1.7rem); direction: rtl; font-family: 'Manrope', 'Tajawal', sans-serif; }
@keyframes npGlow{ from{ opacity: 0; transform: scale(.85); } to{ opacity: 1; transform: scale(1); } }
@keyframes npRing{ 0%{ opacity: 0; transform: translate(-50%,-50%) scale(.2); } 25%{ opacity: .9; } 100%{ opacity: 0; transform: translate(-50%,-50%) scale(3.4); } }
@keyframes npLine{ to{ transform: translate(-50%,-50%) scaleY(1); opacity: 0; } }
@keyframes npTitle{ from{ opacity: 0; transform: translateY(18px) scale(.94); filter: blur(14px); letter-spacing: .08em; } to{ opacity: 1; transform: none; filter: blur(0); letter-spacing: -.03em; } }
@keyframes npTag{ from{ opacity: 0; transform: translateY(10px); } to{ opacity: 1; transform: none; } }
@keyframes npIntroOut{ to{ opacity: 0; transform: scale(1.08); visibility: hidden; } }

/* Reduced motion: static text, opacity-only, shorter. (!important beats the
   global reduced-motion clamp so the intro still shows briefly.)           */
@media (prefers-reduced-motion: reduce){
  .np-intro{ animation: npIntroOutRM .4s linear 1.2s forwards !important; }
  .np-intro-ring, .np-intro-line{ display: none; }
  .np-intro-bg::before, .np-intro-bg::after, .np-intro::after{ animation: none !important; }
  .np-intro-title, .np-intro-tag{ animation: npFadeRM .4s linear both !important; }
  .np-intro-tag{ animation-delay: .15s !important; }
  .hero{ --intro-delay: 1.3s; }
  .hero-center > *{ animation: npFadeRM .4s linear both !important; animation-delay: 1.3s !important; }
  .hero-badge-dot{ animation: none !important; }
}
@keyframes npFadeRM{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes npIntroOutRM{ to{ opacity: 0; visibility: hidden; } }

/* ---------- Trust strip ---------- */
.trust-strip{ border: 0; }
.trust-strip .container{ padding-block: clamp(36px, 5vw, 56px); }

.trust-strip h2{ font-size: clamp(1.5rem, 3.2vw, 2.3rem); font-weight: 800; line-height: 1.3; letter-spacing: 0; color: #fff; text-align: center; margin-bottom: 34px; text-shadow: 0 2px 16px rgba(0,0,0,.75); }
.trust-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.trust-item{ display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 16px 8px; border-radius: var(--radius-md); transition: background .25s var(--ease); }
.trust-item:hover{ background: rgba(255,255,255,.06); }
.trust-item .ic{ width: 32px; height: 32px; color: rgb(201,162,77); filter: drop-shadow(0 2px 8px rgba(0,0,0,.6)); }
.trust-item span{ font-size: clamp(.95rem, 1.5vw, 1.1rem); font-weight: 800; letter-spacing: 0; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.8); }
@media (min-width: 640px){ .trust-grid{ grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 960px){ .trust-grid{ grid-template-columns: repeat(7, 1fr); } }

/* ---------- Our Work gallery ---------- */
/* ---------- Our Work: 3D coverflow ----------
   Cards share one grid cell and are positioned by --o (-1 / 0 / 1, set by JS).
   --dir flips the composition in RTL so "next" sits on the left there. */
.cf{
  --dir: 1; position: relative; overflow-x: clip; padding-block: 12px 4px;
  /* soft fade where the side card runs off the container */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
html[dir="rtl"] .cf{ --dir: -1; }
.cf-stage{ display: grid; perspective: 1500px; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.cf-card{
  grid-area: 1 / 1; justify-self: center; align-self: center;
  width: min(760px, 76%); border-radius: 22px; overflow: hidden;
  position: relative; background: #0a0f1c; border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 34px 70px -34px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.1);
  transform: translateX(calc(var(--o, 0) * var(--dir) * 60%)) rotateY(calc(var(--o, 0) * var(--dir) * -30deg)) scale(.84);
  opacity: .82; filter: saturate(.95); z-index: 1; cursor: pointer;
  transition: transform .7s var(--ease), opacity .5s var(--ease), filter .5s var(--ease), border-color .3s var(--ease);
  will-change: transform;
}
.cf-card.is-far{ opacity: 0; pointer-events: none; }
.cf-card.is-active{ transform: none; opacity: 1; filter: none; z-index: 3; cursor: default; border-color: rgba(201,162,77,.4); }
.cf-shot{ aspect-ratio: 2.1 / 1; background: #0a0f1c; overflow: hidden; }
.cf-shot img{ width: 100%; height: 100%; object-fit: cover; object-position: top center; pointer-events: none; }
/* Caption with no frame: centred text straight on the artwork, kept legible
   over any colours by a seamless dark fade at the bottom edge + text shadow. */
.cf-info{
  position: absolute; inset-inline: 0; bottom: 0; text-align: center;
  padding: 96px 28px 22px;
  background: linear-gradient(180deg, transparent 0%, rgba(5,7,12,.55) 32%, rgba(5,7,12,.9) 62%, rgba(5,7,12,.96) 100%);
  text-shadow: 0 2px 16px rgba(0,0,0,.95), 0 1px 3px rgba(0,0,0,.8);
}
.cf-tag{
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-size: .68rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: rgb(201,162,77); margin-bottom: 6px;
}
.cf-tag::before, .cf-tag::after{ content:""; width: 26px; height: 1px; background: linear-gradient(90deg, transparent, rgba(201,162,77,.8)); }
.cf-tag::after{ transform: scaleX(-1); }
html[dir="rtl"] .cf-tag{ letter-spacing: .04em; font-size: .8rem; text-transform: none; }
.cf-info h3{ font-size: clamp(1.02rem, 2vw, 1.25rem); color: #fff; letter-spacing: 0; }
.cf-info p{ margin: 6px auto 0; max-width: 46ch; font-size: .88rem; line-height: 1.6; color: #cfd6e4; }
.cf-card:not(.is-active) .cf-info{ visibility: hidden; }
.cf-controls{ display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 22px; }
.cf-btn{
  width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #f4e3b0, #c9a24d); border: 1px solid rgba(244,227,176,.7); color: #171203;
  box-shadow: 0 6px 18px -6px rgba(201,162,77,.6);
  transition: filter .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.cf-btn svg{ width: 18px; height: 18px; }
.cf-btn[data-cf-prev] svg{ transform: scaleX(-1); }
html[dir="rtl"] .cf-btn[data-cf-prev] svg{ transform: none; }
html[dir="rtl"] .cf-btn[data-cf-next] svg{ transform: scaleX(-1); }
.cf-btn:hover{ filter: brightness(1.08); box-shadow: 0 8px 24px -6px rgba(201,162,77,.85); }
.cf-btn:active{ transform: scale(.94); }
.cf-btn:focus-visible, .cf-dot:focus-visible{ outline: 2px solid rgb(201,162,77); outline-offset: 3px; }
.cf-dots{ display: flex; align-items: center; gap: 4px; }
.cf-dot{ width: 24px; height: 24px; padding: 0; background: none; border: 0; display: inline-flex; align-items: center; justify-content: center; }
.cf-dot::before{ content:""; width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,.3); transition: width .3s var(--ease), background .3s var(--ease); }
.cf-dot[aria-current="true"]::before{ width: 24px; background: rgb(201,162,77); }
@media (max-width: 640px){
  .cf-card{ width: 84%; border-radius: 18px; transform: translateX(calc(var(--o, 0) * var(--dir) * 58%)) rotateY(calc(var(--o, 0) * var(--dir) * -24deg)) scale(.88); }
  .cf-shot{ aspect-ratio: 1 / 1; }
  .cf-info{ padding: 84px 16px 16px; }
  .cf-info p{ font-size: .8rem; line-height: 1.5; }
  .cf-tag{ font-size: .62rem; gap: 8px; }
  .cf-tag::before, .cf-tag::after{ width: 16px; }
}
@media (prefers-reduced-motion: reduce){
  .cf-card{ transition: opacity .2s linear; transform: none !important; }
  .cf-card:not(.is-active){ display: none; }
}

/* directional icons inside buttons (arrow, send) should point the correct reading direction in RTL */
html[dir="rtl"] .btn svg{ transform: scaleX(-1); }

/* ---------- Contact ---------- */
.contact-actions{ display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.contact-info-list{ display: flex; flex-direction: column; gap: 14px; margin-top: 28px; }
.contact-info-list li{ display: flex; gap: 12px; align-items: flex-start; font-size: .9rem; color: var(--text-dim); }
.contact-info-list svg{ width: 18px; height: 18px; color: var(--gold); margin-top: 2px; flex-shrink: 0; }
.contact-info-list-center{ align-items: center; }
.contact-info-list-center li{ justify-content: center; }

/* ---------- Proposal modal ---------- */
.modal-overlay{
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(10,16,24,.55);
}
.modal-overlay[hidden]{ display: none; }
.modal-dialog{
  width: 100%; max-width: 640px; max-height: 90vh; overflow-y: auto;
  background: var(--navy-elev); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  color: var(--navy-text);
  --text: var(--navy-text);
  --text-dim: var(--navy-text-dim);
  --text-faint: var(--navy-text-faint);
  --line: var(--navy-line);
  --line-strong: var(--navy-line-strong);
  --bg-elev-2: rgba(255,255,255,.07);
  --gold-soft: #e4cb8e;
}
.modal-dialog{ scrollbar-width: none; -ms-overflow-style: none; }
.modal-dialog::-webkit-scrollbar{ display: none; width: 0; height: 0; }
.modal-head{
  position: sticky; top: 0; z-index: 1; background: var(--navy-elev);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px; border-bottom: 1px solid var(--line);
}
.modal-head h3{ margin: 0; }
.modal-close{ width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; border: 1px solid var(--line-strong); background: none; color: var(--text); display: flex; align-items: center; justify-content: center; transition: border-color .2s var(--ease), color .2s var(--ease); }
.modal-close svg{ width: 18px; height: 18px; }
.modal-close:hover{ border-color: var(--gold); color: var(--gold); }
.modal-body{ padding: clamp(20px, 4vw, 32px); }

.form-row{ display: grid; gap: 18px; grid-template-columns: 1fr; margin-bottom: 18px; }
@media (min-width: 560px){ .form-row.two{ grid-template-columns: 1fr 1fr; } }
.field label{ display: block; font-size: .82rem; font-weight: 700; margin-bottom: 8px; color: var(--text-dim); }
.field input, .field select, .field textarea{
  width: 100%; padding: 13px 15px; background: var(--bg-elev-2); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  color: var(--text); font-size: .92rem; transition: border-color .2s var(--ease), background .2s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{ outline: none; border-color: var(--gold); background: rgba(255,255,255,.11); }
.field select option{ background: var(--navy-elev); color: var(--navy-text); }
.field textarea{ resize: vertical; min-height: 110px; }
.field .err-msg{ display: none; color: var(--danger); font-size: .78rem; margin-top: 6px; font-weight: 600; }
.field.has-error input, .field.has-error select, .field.has-error textarea{ border-color: var(--danger); background: var(--danger-bg); }
.field.has-error .err-msg{ display: block; }
.form-note{ font-size: .78rem; color: var(--text-faint); margin-top: 16px; text-align: center; }
.form-success{ display: none; text-align: center; padding: 30px 10px; }
.form-success.is-visible{ display: block; }
.form-success svg{ width: 46px; height: 46px; color: var(--teal); margin-inline: auto 14px; }
.form-success h3{ margin-bottom: 8px; }

/* ---------- Free-trial modal: luxury glass ---------- */
.trial-overlay{
  background: radial-gradient(60% 50% at 20% 20%, rgba(124,92,255,.28), transparent 70%),
              radial-gradient(55% 50% at 85% 80%, rgba(201,162,77,.26), transparent 70%),
              rgba(6,9,18,.72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.trial-dialog{
  position: relative; max-width: 620px; border: 1px solid rgba(228,203,142,.4); overflow-x: hidden;
  background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.05) 45%, rgba(201,162,77,.10));
  -webkit-backdrop-filter: blur(26px) saturate(150%); backdrop-filter: blur(26px) saturate(150%);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.28), 0 0 60px -20px rgba(201,162,77,.45);
  animation: trialIn .45s var(--ease) both;
}
/* the drifting gold beams behind the page were showing through the see-through fields as a thin vertical line; pause them while a pop-up is open */
body:has(.trial-overlay:not([hidden])) .page-particles{ visibility: hidden; }
.trial-dialog .field textarea{ background: rgba(20,26,42,.72); }
@keyframes trialIn{ from{ opacity: 0; transform: translateY(18px) scale(.97); } to{ opacity: 1; transform: none; } }
.trial-close{ position: absolute; top: 14px; inset-inline-end: 14px; z-index: 2; background: rgba(255,255,255,.06); }
.trial-head{ text-align: center; padding: 34px clamp(20px, 4vw, 34px) 4px; }
.trial-badge{
  display: inline-block; padding: 6px 16px; border-radius: 999px; font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: #f4e3b0; background: linear-gradient(135deg, rgba(201,162,77,.28), rgba(124,92,255,.22)); border: 1px solid rgba(244,227,176,.4);
}
.trial-head h3{
  margin: 16px 0 10px; font-size: clamp(1.6rem, 4.4vw, 2.2rem); line-height: 1.15;
  background: linear-gradient(90deg, #ffffff, #f4e3b0 55%, #c9a24d); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.trial-sub{ color: var(--text-dim); font-size: .95rem; max-width: 46ch; margin-inline: auto; }
.trial-body{ padding-top: 22px; }
.trial-dialog .field input, .trial-dialog .field select, .trial-dialog .field textarea{ background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); }
.trial-dialog .field input:focus, .trial-dialog .field select:focus, .trial-dialog .field textarea:focus{ border-color: #e4cb8e; box-shadow: 0 0 0 3px rgba(201,162,77,.2); background: rgba(255,255,255,.12); }
.trial-check{ display: flex; align-items: center; gap: 12px; margin: 4px 0 20px; padding: 12px 14px; border-radius: var(--radius-md); font-size: .9rem; font-weight: 700; color: #f4e3b0; background: rgba(201,162,77,.10); border: 1px solid rgba(244,227,176,.28); cursor: default; }
.trial-check input{ position: absolute; opacity: 0; pointer-events: none; }
.trial-check-box{ width: 24px; height: 24px; flex-shrink: 0; border-radius: 7px; display: grid; place-items: center; color: #171203; background: linear-gradient(135deg, #f4e3b0, #c9a24d); box-shadow: 0 0 14px rgba(201,162,77,.5); }
.trial-check-box svg{ width: 14px; height: 14px; }
.trial-dialog .form-success{ color: var(--text); }
@media (prefers-reduced-motion: reduce){ .trial-dialog{ animation: none; } }

/* ---------- Footer: one wide, short glass card ----------
   Same glass recipe as the header nav pill (translucent navy, white hairline
   border, backdrop blur) at a larger radius; the page photo shows through. */
.site-footer{
  position: relative; isolation: isolate; background: transparent; border: 0;
  padding: clamp(28px, 4vw, 48px) 0 calc(clamp(24px, 3vw, 36px) + env(safe-area-inset-bottom));
  color: var(--navy-text);
  --text: var(--navy-text);
  --text-dim: #c3ccdc;
  --text-faint: #9aa6bd;
  --line: rgba(255,255,255,.12);
  --line-strong: rgba(255,255,255,.2);
}
.site-footer::before{
  content:""; position: absolute; z-index: -1; inset: 0 8%; pointer-events: none;
  background: radial-gradient(60% 80% at 50% 50%, rgba(201,162,77,.14), transparent 70%);
  filter: blur(30px);
}
.site-footer .container.footer-card{
  padding: clamp(20px, 2.6vw, 30px) clamp(22px, 4vw, 48px) 16px;
  width: calc(100% - 2 * var(--gutter)); max-width: 1180px;
  border-radius: clamp(22px, 3vw, 28px);
  background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.03) 45%, rgba(10,15,28,.45));
  border: 1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.14);
}
.footer-main{ display: grid; grid-template-columns: 1fr; gap: 20px; align-items: center; }
.footer-brand .brand{ font-size: 1.3rem; }
.footer-brand .brand .mark{ width: 44px; height: 44px; border-radius: 11px; }
.footer-desc{ margin-top: 8px; font-size: .82rem; color: var(--text-faint); max-width: 320px; }
.footer-lead{ font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-weight: 800; line-height: 1.25; color: #f2f5fb; }
.footer-sub{ margin-top: 4px; font-size: .9rem; line-height: 1.55; color: var(--text-dim); }
.footer-note{ margin-top: 6px; font-size: .82rem; line-height: 1.5; color: rgb(201,162,77); }
.footer-meta{ display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 14px 18px; flex-wrap: wrap; }
.footer-country{ font-size: .84rem; color: var(--text-dim); }
.footer-social{ display: flex; gap: 10px; }
.footer-social a{
  width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: var(--text-dim);
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.footer-social svg{ width: 18px; height: 18px; }
.footer-social a:hover{ border-color: rgb(201,162,77); color: rgb(201,162,77); background: rgba(201,162,77,.10); transform: translateY(-2px); }
.site-footer a:focus-visible{ outline: 2px solid rgb(201,162,77); outline-offset: 3px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce){ .footer-social a:hover{ transform: none; } }
@media (min-width: 900px){
  .footer-main{ grid-template-columns: minmax(0,1fr) minmax(0,1.25fr) auto; gap: 40px; }
  .footer-meta{ flex-direction: column; align-items: flex-end; justify-content: center; gap: 12px; }
  html[dir="rtl"] .footer-meta{ align-items: flex-start; }
}
.footer-bottom{ display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: center; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); font-size: .76rem; color: var(--text-faint); }

/* ---------- Reveal animation ---------- */
.reveal{ opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity: 1; transform: translateY(0); }
.reveal-stagger > *{ opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal-stagger.is-visible > *{ opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(1){ transition-delay: .03s; }
.reveal-stagger.is-visible > *:nth-child(2){ transition-delay: .09s; }
.reveal-stagger.is-visible > *:nth-child(3){ transition-delay: .15s; }
.reveal-stagger.is-visible > *:nth-child(4){ transition-delay: .21s; }
.reveal-stagger.is-visible > *:nth-child(5){ transition-delay: .27s; }
.reveal-stagger.is-visible > *:nth-child(6){ transition-delay: .33s; }
.reveal-stagger.is-visible > *:nth-child(7){ transition-delay: .39s; }

/* ---------- Floating WhatsApp ---------- */
.wa-float{
  position: fixed; right: 16px; bottom: 16px; z-index: 90;
  display: inline-flex; align-items: center; gap: 8px;
  background: #22c15e; color: #fff; font-weight: 700; font-size: .82rem;
  padding: 12px 17px; border-radius: 999px;
  box-shadow: 0 10px 22px -10px rgba(10,16,30,.4);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  bottom: calc(16px + env(safe-area-inset-bottom));
}
.wa-float:hover{ transform: translateY(-2px); box-shadow: 0 14px 26px -10px rgba(10,16,30,.45); }
.wa-float svg{ width: 19px; height: 19px; flex-shrink: 0; }
@media (max-width: 380px){
  .wa-float span{ display: none; }
  .wa-float{ padding: 13px; }
}

/* ---------- Utilities ---------- */
.text-center{ text-align: center; }
.mt-0{ margin-top: 0; }
.skip-link{ position: absolute; inset-inline-start: 0; top: -60px; background: var(--gold); color: var(--gold-ink); padding: 12px 18px; font-weight: 700; z-index: 200; border-radius: 0 0 10px 0; transition: top .2s var(--ease); }
.skip-link:focus{ top: 0; }
.visually-hidden{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
::selection{ background: var(--gold); color: var(--gold-ink); }
:focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px; }

/* Arabic hero: the golden pill (with its dot) carries the subheadline under the headline — one line from tablet up; on phones it wraps to stay legible */
.hero-badge-line{ max-width: 100%; text-align: center; line-height: 1.55; border-radius: 22px; }
@media (min-width: 700px){ .hero-badge-line{ white-space: nowrap; border-radius: 999px; } }

/* ---------- Packages: the restaurant offer (3 cards) ----------
   Card 1 (offer) is the loud one; card 2 (what you get) and card 3 (why) are calm glass. */
.ofr-card{
  position: relative; display: flex; flex-direction: column; min-width: 0;
  border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 34px);
  background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02) 55%, rgba(10,15,28,.4));
  border: 1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px -34px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.08);
}
.ofr-card h2, .ofr-card h3{ letter-spacing: 0; }
.ofr-card h3{ font-size: clamp(1.2rem, 1.6vw, 1.4rem); line-height: 1.3; margin-bottom: 18px; }

/* card 1 */
.ofr-primary{
  padding: clamp(26px, 3.4vw, 40px);
  background: var(--card-bg-featured); border-color: rgba(201,162,77,.55);
  box-shadow: 0 40px 90px -40px rgba(201,162,77,.32), 0 30px 70px -30px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.12);
}
.ofr-primary .ofr-title{ font-size: clamp(1.7rem, 2vw + .9rem, 2.2rem); line-height: 1.2; margin-bottom: 12px; }
.ofr-value{ font-size: 1rem; line-height: 1.65; font-weight: 600; color: #dfe5f0; margin-bottom: 26px; }
.ofr-label{
  align-self: flex-start; display: inline-block; margin-bottom: 8px;
  padding: 5px 14px; border-radius: 999px; background: rgb(201,162,77); color: var(--gold-ink);
  font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
html[dir="rtl"] .ofr-label{ letter-spacing: 0; font-size: .8rem; text-transform: none; }
.ofr-offer{ display: flex; flex-direction: column; }
.ofr-big{ display: flex; align-items: baseline; gap: 10px; flex-wrap: nowrap; }
.ofr-num{ font-size: clamp(3.4rem, 9vw, 4.9rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; color: #ecd79c; white-space: nowrap; }
.ofr-cur{ font-size: 1.15rem; font-weight: 700; color: var(--text-dim); white-space: nowrap; }
.ofr-per{ margin-top: 6px; font-size: 1.05rem; font-weight: 700; color: #e4cb8e; }
.ofr-regular{ margin-top: 6px; font-size: .82rem; color: var(--text-faint); }
.ofr-yearbox{ margin-top: 18px; padding-top: 16px; border-top: 1px dashed rgba(255,255,255,.18); }
.ofr-year{ display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.ofr-ynum{ font-size: clamp(2rem, 4.6vw, 2.5rem); font-weight: 800; line-height: 1; letter-spacing: -.02em; color: #ecd79c; white-space: nowrap; }
.ofr-ycur{ font-size: .95rem; font-weight: 700; color: var(--text-dim); }
.ofr-yper{ font-size: .95rem; font-weight: 700; color: #e4cb8e; }
.ofr-yearbox .ofr-regular{ margin-top: 8px; }
.ofr-note{ margin: 18px 0 24px; font-size: .92rem; line-height: 1.6; color: var(--text-dim); }
.ofr-offer .btn{ margin-top: auto; }

/* card 2 */
.ofr-blocks{ display: flex; flex-direction: column; }
.ofr-blocks li{ display: grid; grid-template-columns: 30px 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.09); }
.ofr-blocks li:first-child{ border-top: 0; padding-top: 0; }
.ofr-n{ padding-top: 3px; font-size: .78rem; font-weight: 800; letter-spacing: .08em; color: rgb(201,162,77); }
.ofr-blocks h4{ font-size: 1rem; font-weight: 700; line-height: 1.3; color: #fff; }
.ofr-blocks p{ margin-top: 3px; font-size: .86rem; line-height: 1.6; color: var(--text-dim); }
.ofr-soon{ margin-top: auto; padding-top: 14px; font-size: .78rem; color: var(--text-faint); }

/* card 3 */
.ofr-statement{ font-size: .98rem; line-height: 1.7; color: var(--text-dim); margin-bottom: 20px; }
.ofr-points{ display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }
.ofr-points li{ display: flex; align-items: flex-start; gap: 10px; font-size: .92rem; line-height: 1.5; color: #dfe5f0; }
.ofr-points svg{ width: 17px; height: 17px; flex-shrink: 0; margin-top: 3px; color: rgb(201,162,77); }
.ofr-closing{ margin-top: auto; padding: 16px 0 20px; border-top: 1px solid rgba(255,255,255,.09); font-size: .95rem; font-weight: 700; line-height: 1.6; color: #ecd79c; }

@media (max-width: 420px){
  .ofr-card{ padding: 22px 18px; }
  .ofr-primary{ padding: 24px 20px; }
  .ofr-blocks li{ grid-template-columns: 26px 1fr; gap: 10px; }
}

/* long CTA labels (esp. English in the narrow third column) must wrap inside the pill, not spill out */
.ofr-card .btn{ white-space: normal; text-align: center; line-height: 1.3; padding-block: 12px; padding-inline: 20px; }

/* Offers as a coverflow: the offer card (index 1) starts centred, the other two flank it.
   .cf-offer is only the 3D positioner — the visuals come from the inner .ofr-card. */
.cf-offer{ align-self: stretch; width: min(520px, 86%); background: none; border: 0; border-radius: var(--radius-lg); overflow: visible; box-shadow: none; }
.cf-offer.is-active{ border-color: transparent; }
.cf-offer > .ofr-card{ height: 100%; background-color: #0c1220; } /* opaque base: neighbouring cards must not show through */
@media (max-width: 640px){ .cf-offer{ width: 88%; } }

/* offers heading */
.ofr-head{ margin-bottom: 26px; }

/* Squarer cards: from 720px up the cards are wider and their content sits in two columns,
   so they read ~4:3 instead of tall. Below 720px they stay a single stacked column. */
@media (min-width: 720px){
  .cf-offer{ width: min(720px, 90%); }
  .cf-offer > .ofr-card{ padding: clamp(24px, 3vw, 34px); }
  /* card 1: copy | price */
  .ofr-primary{ display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 4vw, 44px); align-items: center; }
  .ofr-primary .ofr-value{ margin-bottom: 0; }
  .ofr-primary .ofr-num{ font-size: clamp(3.2rem, 6vw, 4.4rem); }
  /* card 2: blocks in two columns */
  .ofr-what{ justify-content: center; }
  .ofr-blocks{ display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
  .ofr-blocks li:nth-child(-n+2){ border-top: 0; padding-top: 0; }
  .ofr-blocks li:first-child{ padding-top: 0; }
  .ofr-soon{ margin-top: 6px; }
  /* card 3: statement | points, closing | CTA */
  .ofr-why{
    display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 4vw, 44px); row-gap: 16px; align-content: center;
    grid-template-areas: "t t" "s p" "c b";
  }
  .ofr-why > h3{ grid-area: t; margin-bottom: 0; }
  .ofr-why > .ofr-statement{ grid-area: s; margin-bottom: 0; }
  .ofr-why > .ofr-points{ grid-area: p; margin-bottom: 0; }
  .ofr-why > .ofr-closing{ grid-area: c; margin: 0; padding: 0; border-top: 0; align-self: end; }
  .ofr-why > .btn{ grid-area: b; align-self: end; }
}

/* "Our Offers" heading: gold eyebrow look (like the "Our Work" label) with a line on both sides */
.ofr-eyebrow{
  display: flex; align-items: center; justify-content: center; gap: 16px;
  font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); line-height: 1.3; margin: 0 0 14px; text-shadow: 0 2px 14px rgba(0,0,0,.7);
}
.ofr-eyebrow::before, .ofr-eyebrow::after{ content: ""; width: clamp(36px, 8vw, 88px); height: 1px; background: var(--gold); }
html[dir="rtl"] .ofr-eyebrow{ letter-spacing: 0; font-size: clamp(1.7rem, 3.4vw, 2.4rem); }

/* bigger "first N restaurants" line on the offer card */
.ofr-primary .eyebrow{ font-size: 1.05rem; margin-bottom: 16px; }
html[dir="rtl"] .ofr-primary .eyebrow{ font-size: 1.15rem; }

/* side tag hanging off the card's inline-end edge */
.ofr-primary{ padding-top: clamp(58px, 6vw, 64px); }
.ofr-tag{
  position: absolute; top: 18px; inset-inline-end: -1px; z-index: 2;
  padding: 6px 16px 6px 14px; background: rgb(201,162,77); color: var(--gold-ink);
  font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1.2;
  border-start-start-radius: 999px; border-end-start-radius: 999px; border-start-end-radius: 0; border-end-end-radius: 0;
  box-shadow: 0 8px 18px -8px rgba(201,162,77,.7);
}
html[dir="rtl"] .ofr-tag{ letter-spacing: 0; font-size: .9rem; text-transform: none; padding: 6px 14px 6px 16px; }
.cf-offer > .ofr-primary{ padding-top: clamp(58px, 6vw, 64px); } /* room for the side tag; beats the generic card padding */

/* ---------- Client reviews card (replaces About) ---------- */
.rv-card{
  display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center;
  border-radius: 22px; padding: clamp(22px, 3.4vw, 40px);
  background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.025) 50%, rgba(10,15,28,.5));
  border: 1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 30px 70px -34px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.1);
}
.rv-copy h2{ font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.2; letter-spacing: 0; margin-bottom: 12px; }
.rv-lead{ font-size: 1rem; line-height: 1.7; color: var(--text-dim); max-width: 46ch; }
.rv-stars{ display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: 22px 0 18px; }
.rv-stars-row{ display: flex; gap: 5px; }
.rv-stars-row svg{ width: 24px; height: 24px; fill: rgb(201,162,77); stroke: #ecd79c; stroke-width: 1; stroke-linejoin: round; filter: drop-shadow(0 2px 6px rgba(201,162,77,.35)); }
.rv-rate{ font-size: .85rem; font-weight: 700; color: var(--text-dim); }
.rv-empty{ padding: 14px 18px; margin-bottom: 22px; border-radius: 14px; border: 1px dashed rgba(201,162,77,.45); background: rgba(201,162,77,.06); }
.rv-empty h3{ font-size: 1.05rem; letter-spacing: 0; color: #ecd79c; margin-bottom: 4px; }
.rv-empty p{ font-size: .9rem; line-height: 1.6; color: var(--text-dim); }
.rv-cta{ white-space: normal; text-align: center; }
/* posted reviews, shown beside the picture in place of the "coming soon" note */
.rv-list{ display: grid; gap: 12px; max-height: 300px; overflow-y: auto; margin-bottom: 22px; scrollbar-width: none; -ms-overflow-style: none; }
.rv-list[hidden]{ display: none; }
.rv-list::-webkit-scrollbar{ display: none; }
.rv-item{
  margin: 0; padding: 14px 18px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(201,162,77,.14), rgba(124,92,255,.08) 60%, rgba(255,255,255,.03));
  border: 1px solid rgba(228,203,142,.32); box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.rv-item-stars{ display: flex; gap: 3px; margin-bottom: 8px; }
.rv-item-stars svg{ width: 16px; height: 16px; fill: rgb(201,162,77); stroke: #ecd79c; stroke-width: 1; stroke-linejoin: round; }
.rv-item-stars svg.is-off{ fill: rgba(255,255,255,.12); stroke: rgba(255,255,255,.25); }
.rv-item blockquote{ margin: 0 0 8px; font-size: .92rem; line-height: 1.65; color: #e6ebf5; overflow-wrap: anywhere; }
.rv-item figcaption{ font-size: .82rem; font-weight: 800; color: #ecd79c; }
/* review thank-you pop-up */
.thanks-dialog{ max-width: 460px; text-align: center; padding: 38px clamp(22px, 5vw, 40px) 34px; }
.thanks-icon{ width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; color: #171203; background: linear-gradient(135deg, #f4e3b0, #c9a24d); box-shadow: 0 0 34px rgba(201,162,77,.55), inset 0 1px 0 rgba(255,255,255,.5); }
.thanks-icon svg{ width: 30px; height: 30px; }
.thanks-dialog h3{ margin: 0 0 10px; font-size: clamp(1.4rem, 4vw, 1.8rem); background: linear-gradient(90deg, #ffffff, #f4e3b0 55%, #c9a24d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.thanks-dialog .trial-sub{ margin-bottom: 24px; }
.thanks-dialog .btn{ min-width: 160px; }
/* star picker in the review pop-up */
.star-input{ display: flex; gap: 6px; direction: ltr; justify-content: flex-start; }
html[dir="rtl"] .star-input{ justify-content: flex-end; }
.star-input button{ width: 42px; height: 42px; padding: 0; display: grid; place-items: center; background: none; border: 0; border-radius: 10px; transition: transform .15s var(--ease); }
.star-input button:hover{ transform: scale(1.12); }
.star-input button:focus-visible{ outline: 2px solid #e4cb8e; outline-offset: 2px; }
.star-input svg{ width: 30px; height: 30px; fill: rgba(255,255,255,.1); stroke: rgba(255,255,255,.4); stroke-width: 1.2; stroke-linejoin: round; transition: fill .15s ease, stroke .15s ease, filter .15s ease; }
.star-input button.is-on svg{ fill: rgb(201,162,77); stroke: #f4e3b0; filter: drop-shadow(0 2px 8px rgba(201,162,77,.55)); }
.field.has-error .star-input svg{ stroke: var(--danger); }
.rv-media{
  position: relative; margin: 0; overflow: hidden; border-radius: 18px; aspect-ratio: 16 / 10;
  border: 1px solid rgba(255,255,255,.14); background: #0a0f1c;
  box-shadow: 0 24px 50px -28px rgba(0,0,0,.75);
}
.rv-media img{ width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.rv-media figcaption{
  position: absolute; inset-inline: 0; bottom: 0; padding: 44px 18px 16px; text-align: center;
  font-size: .95rem; font-weight: 700; color: #ecd79c;
  background: linear-gradient(180deg, transparent, rgba(5,7,12,.82));
  text-shadow: 0 2px 10px rgba(0,0,0,.8);
}
@media (min-width: 720px){
  .rv-card{ grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 60px); }
  .rv-media{ aspect-ratio: 4 / 3; }
}

/* Particle Drift: fixed full-page motion layer. Same z-level as the site backdrop but later in the DOM, so it draws over
   the picture and under every section; never intercepts input. Final opacity comes from data-opacity (set by main.js). */
.page-particles{ position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1.4s ease .4s; }

/* section-head p would shrink the heading labels: pin size/spacing for all four */
.section-head .ofr-eyebrow{ font-size: clamp(1.5rem, 3vw, 2.1rem); margin-top: 0; }
html[dir="rtl"] .section-head .ofr-eyebrow{ font-size: clamp(1.7rem, 3.4vw, 2.4rem); }

/* offer card (299 / month · 2,500 / year): included list + LTR price block, scoped to this card only */
.ofr-inc-title{ margin: 18px 0 10px; font-size: .95rem; font-weight: 800; letter-spacing: 0; color: #ecd79c; }
.ofr-incl{ display: grid; gap: 8px; }
.ofr-incl li{ display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; line-height: 1.45; color: #dfe5f0; }
.ofr-incl svg{ width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; color: rgb(201,162,77); }
.ofr-primary .ofr-big, .ofr-primary .ofr-year{ direction: ltr; }
html[dir="rtl"] .ofr-primary .ofr-big, html[dir="rtl"] .ofr-primary .ofr-year{ justify-content: flex-end; }
.ofr-primary .ofr-per{ direction: ltr; }
html[dir="rtl"] .ofr-primary .ofr-per{ text-align: right; }
.ofr-primary .ofr-yearbox{ margin: 14px 0 22px; }
.ofr-primary .ofr-yper{ font-weight: 600; color: var(--text-dim); }
@media (min-width: 720px){ .ofr-primary{ align-items: stretch; } .ofr-primary .ofr-offer{ justify-content: center; } }

/* ---------- Start Plan: single SaaS-style pricing card (scoped to .ofr-plan) ---------- */
.ofr-primary.ofr-plan, .cf-offer > .ofr-primary.ofr-plan{
  display: flex; flex-direction: column; align-items: stretch; text-align: center;
  padding: clamp(28px, 4vw, 40px) clamp(22px, 5vw, 56px);
}
.ofr-plan .plan-name{ align-self: center; margin-bottom: 12px; padding: 5px 16px; border-radius: 999px; background: rgba(201,162,77,.14); border: 1px solid rgba(201,162,77,.5); color: #ecd79c; font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
html[dir="rtl"] .ofr-plan .plan-name, html[dir="rtl"] .ofr-plan .plan-features h4{ letter-spacing: 0; text-transform: none; } /* Arabic letters must stay joined */
.ofr-plan .plan-desc{ font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.3; letter-spacing: 0; margin-bottom: 22px; }
.ofr-plan .plan-price{ display: flex; justify-content: center; min-height: 6.2rem; }
.ofr-plan .plan-amount{ direction: ltr; display: flex; align-items: baseline; justify-content: center; gap: 8px; flex-wrap: nowrap; margin: 0; color: inherit; transition: opacity .18s ease, transform .18s ease; }
.ofr-plan .plan-amount.is-swap{ opacity: 0; transform: translateY(8px); }
.ofr-plan .plan-num{ font-size: clamp(3.6rem, 9vw, 5.2rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; color: #ecd79c; white-space: nowrap; }
.ofr-plan .plan-cur{ font-size: 1.2rem; font-weight: 800; color: var(--text); }
.ofr-plan .plan-per{ font-size: 1rem; font-weight: 600; color: var(--text-dim); white-space: nowrap; }
.ofr-plan .plan-toggle{ display: flex; align-items: center; justify-content: center; gap: 14px; margin: 6px 0 24px; direction: ltr; }
.ofr-plan .plan-opt{ min-height: 44px; padding: 0 4px; background: none; border: 0; font-size: .95rem; font-weight: 700; color: var(--text-faint); transition: color .2s ease; }
.ofr-plan .plan-opt.is-on{ color: #fff; }
.ofr-plan .plan-switch{ position: relative; width: 52px; height: 30px; padding: 0; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); transition: background .25s ease, border-color .25s ease; }
.ofr-plan .plan-switch span{ position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.4); transition: transform .25s var(--ease), background .25s ease; }
.ofr-plan .plan-switch[aria-checked="true"]{ background: rgba(201,162,77,.35); border-color: rgb(201,162,77); }
.ofr-plan .plan-switch[aria-checked="true"] span{ transform: translateX(22px); background: #ecd79c; }
.ofr-plan .plan-opt:focus-visible, .ofr-plan .plan-switch:focus-visible{ outline: 2px solid rgb(201,162,77); outline-offset: 3px; border-radius: 8px; }
/* luxury glass promise strip under the billing toggle */
.ofr-plan .plan-promise{
  position: relative; width: 100%; max-width: 460px; margin: 0 auto 22px; padding: 18px 20px 16px; text-align: center;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(201,162,77,.16), rgba(124,92,255,.10) 55%, rgba(255,255,255,.04));
  border: 1px solid rgba(228,203,142,.38);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 14px 34px -22px rgba(201,162,77,.6);
}
.ofr-plan .plan-promise::before{
  content:""; position: absolute; top: -1px; left: 50%; width: 46%; height: 2px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, #f4e3b0, transparent);
}
.ofr-plan .plan-promise-title{
  margin: 0 0 6px; font-size: 1.2rem; font-weight: 800; line-height: 1.3;
  background: linear-gradient(90deg, #ffffff, #f4e3b0 55%, #c9a24d); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ofr-plan .plan-promise-sub{ margin: 0; font-size: .88rem; line-height: 1.6; color: #cfd6e4; }
.ofr-plan .plan-features{ text-align: start; padding: 22px 0 24px; border-top: 1px solid rgba(255,255,255,.12); width: 100%; max-width: 460px; margin-inline: auto; }
.ofr-plan .plan-features h4{ margin: 0 0 14px; font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgb(201,162,77); }
.ofr-plan .plan-features ul{ display: grid; gap: 11px; }
.ofr-plan .plan-features li{ display: flex; align-items: flex-start; gap: 10px; font-size: .95rem; line-height: 1.45; color: #dfe5f0; }
.ofr-plan .plan-features svg{ width: 17px; height: 17px; flex-shrink: 0; margin-top: 3px; color: rgb(201,162,77); }
.ofr-plan > .btn{ margin-top: auto; align-self: center; width: 100%; max-width: 460px; }
@media (min-width: 720px){ .ofr-plan .plan-features ul{ grid-template-columns: 1fr 1fr; gap: 12px 24px; } .ofr-plan .plan-features{ max-width: 560px; } .ofr-plan > .btn{ max-width: 560px; } }


/* Offers cards share the Client Experiences card look (.rv-card): same glass gradient, hairline border, radius, blur and shadow */
.cf-offer > .ofr-card, .cf-offer > .ofr-primary, .cf-offer > .ofr-primary.ofr-plan{
  background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.025) 50%, rgba(10,15,28,.5));
  background-color: rgba(10,15,28,.55);
  border: 1px solid rgba(255,255,255,.12); border-radius: 22px;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 30px 70px -34px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.1);
}.cf-offer.is-active > .ofr-card{ background-color: rgba(10,15,28,.82); } /* keeps neighbouring cards from ghosting through the active one */
.cf-offer:not(.is-active) > .ofr-card > *{ opacity: .82; }
/* "What you get" + "Why" cards: gold centred title pill (like Start Plan) and check-mark details (like Features) */
.ofr-what > h3, .ofr-why > h3{
  align-self: center; text-align: center; max-width: 100%; margin: 0 0 20px; padding: 8px 22px; border-radius: 22px;
  background: rgba(201,162,77,.14); border: 1px solid rgba(201,162,77,.5); color: #ecd79c;
  font-size: clamp(.95rem, 1.6vw, 1.1rem); font-weight: 800; line-height: 1.45; letter-spacing: 0;
}
.ofr-blocks li{ grid-template-columns: 22px 1fr; gap: 12px; }
.ofr-blocks li > svg{ width: 17px; height: 17px; margin-top: 4px; color: rgb(201,162,77); }
.ofr-why .ofr-statement{ text-align: center; }
@media (min-width: 720px){ .ofr-why > h3{ grid-column: 1 / -1; justify-self: center; } }

/* ---------- Sectors: picture-art cards with a cursor-driven 3D tilt + spotlight ---------- */
.sec-title{ font-size: clamp(1.15rem, 2.2vw, 1.6rem); font-weight: 700; line-height: 1.5; letter-spacing: 0; max-width: 760px; margin: 0 auto; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.7); }
.sec-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; perspective: 1200px; }
@media (min-width: 900px){ .sec-grid{ grid-template-columns: repeat(3, 1fr); gap: 22px; } }
.sec-card{ min-width: 0; }
.sec-in{
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%;
  position: relative; overflow: hidden; height: 100%; border-radius: 22px; text-align: center;
  padding: clamp(18px, 3vw, 30px) 14px clamp(16px, 2.4vw, 24px);
  background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.025) 50%, rgba(10,15,28,.5));
  border: 1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 30px 70px -34px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.1);
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .25s ease-out, border-color .3s ease, box-shadow .3s ease;
  transform-style: preserve-3d; will-change: transform;
}
/* gold spotlight that follows the pointer + a diagonal shine sweep */
.sec-in::before{ content:""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(201,162,77,.28), transparent 62%); }
.sec-in::after{ content:""; position: absolute; top: 0; bottom: 0; width: 45%; left: -60%; pointer-events: none; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(236,215,156,.22), transparent); }
.sec-in h3{ position: relative; margin: 0; font-size: clamp(1rem, 1.8vw, 1.2rem); font-weight: 800; letter-spacing: 0; color: #fff; transform: translateZ(28px); transition: color .3s ease; }
.sec-in h3::after{ content:""; display: block; width: 28px; height: 2px; margin: 10px auto 0; border-radius: 2px; background: rgb(201,162,77); transition: width .35s var(--ease); }
@media (hover: hover){
  .sec-in:hover{ border-color: rgba(201,162,77,.6); box-shadow: 0 36px 80px -30px rgba(201,162,77,.32), 0 30px 70px -34px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.14); }
  .sec-in:hover::before{ opacity: 1; }
  .sec-in:hover::after{ left: 130%; transition: left .9s ease; }
  .sec-in:hover h3{ color: #ecd79c; }
  .sec-in:hover h3::after{ width: 56px; }
}
.sec-in:focus-within{ border-color: rgba(201,162,77,.6); }
@media (prefers-reduced-motion: reduce){ .sec-in{ transform: none !important; } .sec-in:hover::after{ transition: none; } }

/* photo cards: the sector picture fills the card; title sits on a dark fade at the bottom */
.sec-in{ padding: 0; aspect-ratio: 4 / 3; display: flex; align-items: flex-end; justify-content: center; background: #0a0f1c; }
.sec-img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease), filter .4s ease; filter: saturate(.95) brightness(.9); }
.sec-in > h3{ z-index: 1; width: 100%; padding: 46px 14px 16px; background: linear-gradient(180deg, transparent, rgba(5,7,12,.86)); text-shadow: 0 2px 12px rgba(0,0,0,.8); transform: none; }
.sec-in > h3::after{ margin-top: 8px; }
.sec-in::before, .sec-in::after{ z-index: 2; }
@media (hover: hover){ .sec-in:hover .sec-img{ transform: scale(1.09); filter: saturate(1.08) brightness(1); } }
@media (max-width: 520px){ .sec-in{ aspect-ratio: 1 / 1; } .sec-in > h3{ padding: 36px 8px 12px; font-size: .95rem; } }