/* ==========================================================================
   NAFIX GLOBAL LLC — Premium Corporate Design System v3
   Palette extracted EXACTLY from the official logo:
   Navy #050E1E (deepest) · Gold ring #FFD375 · Main gold #CCA145
   Deep gold shadow #5C3A10 · Gold text #DFAE4E · White #FFFFFF
   Uses CSS logical properties so RTL/LTR flip automatically with [dir]
   ========================================================================== */

/* ---------- Design Tokens (exact logo extraction) ---------- */
:root {
  /* Navy — deepest circle background of the logo */
  --navy-950: #050E1E;
  --navy-900: #081428;
  --navy-800: #0F2340;
  --navy-700: #16304F;
  --navy-600: #1E3E63;
  --navy: #0F2340;

  /* Gold — from the "NG" monogram + outer ring gradient */
  --gold-100: #FFF6E4;
  --gold-200: #FFE9BE;
  --gold-300: #FFD375;
  --gold: #DFAE4E;
  --gold-deep: #CCA145;
  --gold-shadow: #5C3A10;

  /* Neutrals — luxury light backgrounds (never plain flat white) */
  --white: #FFFFFF;
  --soft-white: #FBFBFC;
  --light-gray: #F1F3F7;
  --light-gray-2: #E9EBF1;
  --light-navy: #E9EDF6;
  --light-navy-2: #DDE3EF;

  --border: #E4E7EF;
  --border-navy: rgba(15, 35, 64, 0.12);
  --text-body: #57616F;
  --text-heading: #0A1424;
  --success: #1C8A5C;
  --error: #C23B3B;

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 12px rgba(5, 14, 30, 0.06);
  --shadow-md: 0 12px 32px rgba(5, 14, 30, 0.10);
  --shadow-lg: 0 28px 64px rgba(5, 14, 30, 0.16);
  --shadow-gold: 0 10px 28px rgba(204, 161, 69, 0.35);
  --shadow-gold-lg: 0 20px 48px rgba(204, 161, 69, 0.42);
  --shadow-navy: 0 24px 60px rgba(5, 14, 30, 0.45);

  --container-max: 1220px;
  --header-h: 92px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition: 0.3s var(--ease);

  --font-en: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-ar: 'Alexandria', 'IBM Plex Sans Arabic', sans-serif;

  --gold-gradient: linear-gradient(135deg, var(--gold-300) 0%, var(--gold-deep) 55%, var(--gold-shadow) 100%);
  --gold-gradient-text: linear-gradient(120deg, var(--gold-300) 0%, var(--gold-deep) 100%);
  --gold-gradient-soft: linear-gradient(135deg, rgba(255,211,117,0.20) 0%, rgba(204,161,69,0.12) 100%);
  --navy-gradient: linear-gradient(160deg, var(--navy-800) 0%, var(--navy-950) 100%);
  --navy-gradient-soft: linear-gradient(180deg, var(--light-navy) 0%, var(--light-navy-2) 100%);
}

/* ---------- Reset ---------- */
* , *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

html[lang="ar"] body { font-family: var(--font-ar); }
html[lang="en"] body { font-family: var(--font-en); font-weight: 400; }
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3, html[lang="en"] h4 { font-weight: 700; letter-spacing: -0.02em; }

body {
  background: var(--soft-white);
  color: var(--text-body);
  line-height: 1.75;
  font-size: 16px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; background: none; border: none; }
input, textarea, select { font: inherit; }

h1, h2, h3, h4 {
  color: var(--text-heading);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

section { padding-block: clamp(64px, 9vw, 128px); position: relative; scroll-margin-top: var(--header-h); }

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 40px);
  position: relative;
}

/* Focus visibility (Accessibility) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  inset-inline-start: -999px;
  top: 0;
  background: var(--navy-950);
  color: var(--white);
  padding: 12px 20px;
  z-index: 999;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.skip-link:focus { inset-inline-start: 0; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Section Backgrounds — alternating luxury tones ---------- */
.bg-soft-white { background: var(--soft-white); }

.bg-light-gray {
  background: linear-gradient(180deg, var(--light-gray) 0%, var(--light-gray-2) 100%);
  position: relative;
}

.bg-light-navy {
  background: var(--navy-gradient-soft);
  position: relative;
}

.bg-navy {
  background: var(--navy-gradient);
  color: rgba(255,255,255,0.82);
  position: relative;
  overflow: hidden;
}
.bg-navy::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 800px 550px at 88% 0%, rgba(255,211,117,0.14), transparent 60%),
    radial-gradient(ellipse 700px 550px at 5% 100%, rgba(204,161,69,0.10), transparent 60%);
  pointer-events: none;
}
.bg-navy h2, .bg-navy h3, .bg-navy h4 { color: var(--white); }

/* Subtle noise overlay for the whole page — luxury texture, never flat */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.025;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Section Heading Kit ---------- */
.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold-shadow);
  background: var(--gold-gradient-soft);
  border: 1px solid rgba(204,161,69,0.35);
  padding: 8px 20px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(204,161,69,0.12);
}
.bg-navy .section-kicker {
  color: var(--gold-200);
  background: rgba(255,211,117,0.12);
  border-color: rgba(255,211,117,0.30);
}

.section-head {
  max-width: 740px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: clamp(44px, 6vw, 68px);
}

.section-head h2 {
  font-size: clamp(30px, 4.2vw, 46px);
  margin-bottom: 18px;
}

.section-head p {
  font-size: 17.5px;
  color: var(--text-body);
}
.bg-navy .section-head p { color: rgba(255,255,255,0.68); }

.section-head.align-start {
  text-align: start;
  margin-inline: 0;
}

/* Decorative floating gold orb — reusable accent */
.deco-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}
.deco-orb.gold { background: radial-gradient(circle, rgba(255,211,117,0.5), transparent 70%); }
.deco-orb.navy { background: radial-gradient(circle, rgba(15,35,64,0.16), transparent 70%); }

/* ==========================================================================
   Buttons — premium micro-interactions: shine sweep, ripple, lift, glow
   ========================================================================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 600;
  font-size: 15px;
  padding: 15px 32px;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  white-space: nowrap;
  transition: transform 0.4s var(--ease-spring), box-shadow var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.5) 48%, rgba(255,255,255,0.5) 52%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.75s var(--ease);
  z-index: 1;
  pointer-events: none;
}
.btn:hover::before { transform: translateX(120%); }
.btn:active { transform: translateY(1px) scale(0.98); }
.btn i, .btn svg, .btn span { position: relative; z-index: 2; flex-shrink: 0; }

.btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  transform: scale(0);
  animation: btn-ripple-anim 0.65s var(--ease) forwards;
  pointer-events: none;
  z-index: 1;
}
@keyframes btn-ripple-anim { to { transform: scale(2.6); opacity: 0; } }

.btn-lg { padding: 19px 40px; font-size: 16.5px; }
.btn-sm { padding: 11px 24px; font-size: 14px; }

.btn-primary {
  background: var(--navy-gradient);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { box-shadow: var(--shadow-md), 0 0 0 3px rgba(255,211,117,0.20); transform: translateY(-3px) scale(1.01); }

.btn-gold {
  background: var(--gold-gradient);
  color: var(--navy-950);
  box-shadow: var(--shadow-gold);
  font-weight: 700;
}
.btn-gold:hover { box-shadow: var(--shadow-gold-lg); transform: translateY(-4px) scale(1.015); }

.btn-outline {
  background: rgba(255,255,255,0.55);
  color: var(--navy);
  border-color: var(--border-navy);
  backdrop-filter: blur(8px);
}
.btn-outline:hover { border-color: var(--gold-300); background: rgba(255,255,255,0.9); box-shadow: var(--shadow-sm); transform: translateY(-3px) scale(1.01); }

.btn-outline-light {
  background: rgba(255,255,255,0.06);
  color: var(--white);
  border-color: rgba(255,255,255,0.32);
  backdrop-filter: blur(8px);
}
.btn-outline-light:hover { background: rgba(255,255,255,0.14); border-color: var(--gold-200); transform: translateY(-3px) scale(1.01); }

.btn-whatsapp {
  background: linear-gradient(135deg, #1EA36B, #16855B);
  color: var(--white);
  box-shadow: 0 10px 28px rgba(28,138,92,0.30);
}
.btn-whatsapp:hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 16px 38px rgba(28,138,92,0.38); }
.btn-whatsapp:focus-visible { outline-color: #1EA36B; }

.btn-block { width: 100%; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none !important; }

/* ==========================================================================
   Header / Navigation
   ========================================================================== */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 500;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background var(--transition), box-shadow var(--transition), height var(--transition), border-color var(--transition);
  border-bottom: 1px solid transparent;
}

.site-header.is-scrolled {
  background: rgba(5, 14, 30, 0.72);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  box-shadow: var(--shadow-navy);
  border-color: rgba(255,255,255,0.08);
  height: 76px;
}
.site-header.is-scrolled .main-nav a { color: rgba(255,255,255,0.85); }
.site-header.is-scrolled .main-nav a:hover { background: rgba(255,211,117,0.12); color: var(--gold-200); }
.site-header.is-scrolled .lang-switch { color: var(--white); border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.06); }
.site-header.is-scrolled .menu-toggle span { background: var(--white); }

.nav-inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  font-size: 18px;
  color: var(--navy);
}
.brand img { height: 50px; width: auto; transition: height var(--transition); filter: drop-shadow(0 6px 14px rgba(5,14,30,0.25)); }
.site-header.is-scrolled .brand img { height: 42px; }

.main-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
.main-nav a {
  position: relative;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 500;
  color: var(--navy);
  transition: background var(--transition), color var(--transition);
}
.main-nav a:hover { background: rgba(204,161,69,0.12); color: var(--gold-shadow); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid var(--border-navy);
  border-radius: var(--radius-pill);
  padding: 9px 18px;
  font-weight: 700;
  font-size: 14px;
  color: var(--navy);
  background: rgba(255,255,255,0.55);
  transition: border-color var(--transition), background var(--transition), transform var(--transition), color var(--transition);
}
.lang-switch:hover { border-color: var(--gold-300); background: var(--gold-gradient-soft); transform: translateY(-2px); }

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  border-radius: var(--radius-sm);
}
.menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--navy);
  transition: transform var(--transition), opacity var(--transition), background var(--transition);
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav { display: none; }

/* ==========================================================================
   Hero — dark navy premium fintech, gold accents
   ========================================================================== */
.hero {
  padding-block-start: calc(var(--header-h) + 64px);
  padding-block-end: 96px;
  position: relative;
  overflow: hidden;
  background: var(--navy-gradient);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 900px 620px at 90% -8%, rgba(255,211,117,0.16), transparent 60%),
    radial-gradient(ellipse 800px 700px at -8% 30%, rgba(255,211,117,0.08), transparent 55%),
    radial-gradient(ellipse 700px 600px at 105% 80%, rgba(204,161,69,0.14), transparent 55%);
  pointer-events: none;
}
.hero .deco-orb.gold { width: 520px; height: 520px; top: -160px; inset-inline-end: -140px; opacity: 0.35; }
.hero .deco-orb.navy { width: 460px; height: 460px; bottom: -180px; inset-inline-start: -120px; opacity: 0.4; background: radial-gradient(circle, rgba(255,255,255,0.05), transparent 70%); }

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.hero-content .section-kicker { color: var(--gold-200); background: rgba(255,211,117,0.12); border-color: rgba(255,211,117,0.32); }

.hero-content h1 {
  font-size: clamp(34px, 5.2vw, 60px);
  margin-bottom: 24px;
  color: var(--white);
}
.hero-content h1 span {
  background: var(--gold-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-content p {
  font-size: 18.5px;
  max-width: 560px;
  margin-bottom: 36px;
  color: rgba(255,255,255,0.72);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 44px;
}

.hero-mini-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.hero-mini-trust li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
}
.hero-mini-trust i { color: var(--gold-300); font-size: 18px; }

.hero-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-media .media-frame {
  position: relative;
  width: 100%;
  max-width: 580px;
  border-radius: var(--radius-lg);
  padding: 16px;
  background: linear-gradient(160deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-navy);
}
.hero-media img {
  width: 100%;
  border-radius: calc(var(--radius-lg) - 8px);
  animation: float-y 6s ease-in-out infinite;
}
.hero-media::before {
  content: "";
  position: absolute;
  inset: 4% 6%;
  background: radial-gradient(circle at 30% 20%, rgba(255,211,117,0.30), transparent 60%);
  z-index: -1;
  filter: blur(14px);
}

@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-16px); }
}

/* ==========================================================================
   Trust Bar
   ========================================================================== */
.trust-bar {
  padding-block: 34px;
  border-block: 1px solid var(--border);
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(12px);
}
.trust-bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--navy);
  font-weight: 600;
  font-size: 14px;
  flex: 1 1 200px;
  justify-content: center;
}
.trust-item i { color: var(--gold-deep); font-size: 22px; }

/* ==========================================================================
   Grid / Cards — premium glass + gold border glow on hover
   ========================================================================== */
.grid {
  display: grid;
  gap: 26px;
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Services grid — exactly 5 cards, asymmetric premium layout: 3 + 2 centered */
.grid-5 {
  grid-template-columns: repeat(6, 1fr);
}
.grid-5 > *:nth-child(1) { grid-column: span 2; }
.grid-5 > *:nth-child(2) { grid-column: span 2; }
.grid-5 > *:nth-child(3) { grid-column: span 2; }
.grid-5 > *:nth-child(4) { grid-column: 2 / span 2; }
.grid-5 > *:nth-child(5) { grid-column: 4 / span 2; }

.card {
  position: relative;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 38px 30px;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.7);
  transition: box-shadow 0.45s var(--ease), transform 0.45s var(--ease), border-color var(--transition);
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: var(--gold-gradient);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.45s var(--ease);
  pointer-events: none;
}
.card:hover {
  box-shadow: var(--shadow-lg), var(--shadow-gold);
  transform: translateY(-8px);
  border-color: transparent;
}
.card:hover::before { opacity: 1; }

.card-icon {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(15,35,64,0.06), rgba(204,161,69,0.16));
  border: 1px solid rgba(204,161,69,0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: var(--navy);
  margin-bottom: 22px;
  transition: transform 0.45s var(--ease-spring), background var(--transition);
}
.card:hover .card-icon {
  transform: scale(1.1) rotate(-4deg);
  background: var(--gold-gradient);
  color: var(--navy-950);
}

.card h3 {
  font-size: 19.5px;
  margin-bottom: 12px;
}
.card p { font-size: 15px; }

.card-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold-shadow);
  background: var(--gold-gradient-soft);
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 16px;
}

/* About section layout */
.about-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.about-media {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 16px;
  background: linear-gradient(160deg, rgba(255,255,255,0.7), rgba(255,255,255,0.25));
  border: 1px solid rgba(255,255,255,0.6);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-lg);
}
.about-media img {
  border-radius: calc(var(--radius-lg) - 8px);
  animation: float-y 7s ease-in-out infinite;
  animation-delay: 0.4s;
}
.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 36px;
}
.about-stats .stat {
  text-align: center;
  padding: 22px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(8px);
  transition: transform var(--transition), box-shadow var(--transition);
}
.about-stats .stat:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.about-stats .stat strong {
  display: block;
  font-size: 28px;
  background: var(--gold-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 4px;
}
.about-stats .stat span { font-size: 13px; color: var(--text-body); }

/* How it works — steps */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  position: relative;
}
.step {
  position: relative;
  padding: 36px 26px;
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
  transition: transform var(--transition), box-shadow var(--transition);
}
.step:hover { transform: translateY(-7px); box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.7); }
.step-number {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gold-gradient);
  color: var(--navy-950);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 17px;
  box-shadow: var(--shadow-gold);
}
.step h3 { font-size: 17.5px; margin-bottom: 8px; }
.step p { font-size: 14px; }

/* Who we help */
.audience-card { text-align: center; }
.audience-card .card-icon { margin-inline: auto; }

/* Documents required */
.doc-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.doc-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
  transition: transform var(--transition), box-shadow var(--transition);
}
.doc-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.7); }
.doc-item i { color: var(--gold-deep); font-size: 23px; margin-top: 2px; }
.doc-item h3 { font-size: 15.5px; margin-bottom: 4px; }
.doc-item p { font-size: 13.5px; }

/* Why choose us */
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.why-media {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 16px;
  background: linear-gradient(160deg, rgba(15,35,64,0.85), rgba(5,14,30,0.9));
  border: 1px solid rgba(255,211,117,0.18);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-navy);
}
.why-media img {
  border-radius: calc(var(--radius-lg) - 8px);
  animation: float-y 6.5s ease-in-out infinite;
  animation-delay: 0.2s;
}
.feature-row {
  display: flex;
  gap: 20px;
  padding-block: 22px;
  border-bottom: 1px solid var(--border-navy);
}
.feature-row:last-child { border-bottom: none; }
.feature-row .card-icon { flex-shrink: 0; margin-bottom: 0; }
.feature-row h3 { font-size: 17.5px; margin-bottom: 6px; }
.feature-row p { font-size: 14.5px; }

/* ==========================================================================
   Pricing — exactly 3 packages
   ========================================================================== */
.pricing-card {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  overflow: visible;
  margin-top: 15px;
}
.pricing-card.is-featured {
  border-color: var(--gold-300);
  box-shadow: var(--shadow-lg), var(--shadow-gold);
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,233,190,0.35));
  transform: scale(1.03);
}
.pricing-card.is-featured:hover { transform: scale(1.03) translateY(-8px); }
.pricing-badge {
  position: absolute;
  top: -15px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  background: var(--gold-gradient);
  color: var(--navy-950);
  font-size: 12px;
  font-weight: 800;
  padding: 8px 20px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-gold);
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.pricing-badge.badge-secondary {
  background: var(--navy-gradient);
  color: var(--white);
  box-shadow: var(--shadow-navy);
}
html[dir="rtl"] .pricing-badge { transform: translateX(50%); }

.pricing-card h3 { font-size: 21px; }
.pricing-card > p { font-size: 14.5px; margin-top: 8px; }

.pricing-price {
  font-size: 40px;
  font-weight: 800;
  color: var(--navy);
  margin-block: 20px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}
.pricing-price .pricing-currency {
  font-size: 20px;
  color: var(--gold-deep);
  font-weight: 700;
}
.pricing-list { margin-block: 24px; text-align: start; flex-grow: 1; }
.pricing-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  margin-bottom: 13px;
}
.pricing-list i { color: var(--success); margin-top: 3px; flex-shrink: 0; }

/* ==========================================================================
   FAQ Accordion
   ========================================================================== */
.faq-list {
  max-width: 820px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(8px);
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.faq-item:hover { box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.7); }
.faq-item.is-open { border-color: var(--gold-300); box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.7); }
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 26px;
  text-align: start;
  font-weight: 600;
  font-size: 15.5px;
  color: var(--navy);
}
.faq-question i { transition: transform var(--transition); color: var(--gold-deep); flex-shrink: 0; }
.faq-item.is-open .faq-question i { transform: rotate(45deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition), padding var(--transition);
  padding-inline: 26px;
  font-size: 14.5px;
}
.faq-item.is-open .faq-answer { padding-block-end: 24px; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(32px, 5vw, 56px);
}
.contact-info-card {
  position: relative;
  background: var(--navy-gradient);
  border-radius: var(--radius-lg);
  padding: 44px 36px;
  color: rgba(255,255,255,0.85);
  overflow: hidden;
  box-shadow: var(--shadow-navy);
}
.contact-info-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 400px 300px at 90% 0%, rgba(255,211,117,0.22), transparent 60%);
  pointer-events: none;
}
.contact-info-card h3 { color: var(--white); margin-bottom: 20px; }
.contact-info-row { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
.contact-info-row i {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,211,117,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-200);
  flex-shrink: 0;
}
.contact-info-row strong { display: block; color: var(--white); font-size: 14px; margin-bottom: 2px; }
.contact-info-row span, .contact-info-row a { font-size: 14px; }
.contact-info-row a { color: var(--gold-200); font-weight: 600; text-decoration: none; }
.contact-info-row a:hover { color: var(--gold-300); text-decoration: underline; }
.social-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.social-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.14);
  transition: background var(--transition), transform var(--transition), border-color var(--transition);
  color: rgba(255,255,255,0.9);
}
[dir="rtl"] .social-card { padding: 10px 10px 10px 16px; }
.social-card i {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
}
.social-card span { font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.social-card i { transition: transform 0.4s var(--ease-spring), background var(--transition), color var(--transition); }
.social-card:hover, .social-card:focus-visible {
  background: var(--gold-gradient);
  color: var(--navy-950);
  border-color: transparent;
  transform: translateY(-3px);
}
.social-card:hover i, .social-card:focus-visible i { background: rgba(5,14,30,0.14); color: var(--navy-950); transform: rotate(8deg) scale(1.06); }

/* Trust badges — secure/transparent/support indicators under the social links */
.trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.78);
}
.trust-badge i { color: var(--gold-300); font-size: 16px; flex-shrink: 0; }

.contact-form-card {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 44px 36px;
  box-shadow: var(--shadow-md);
}

/* ---------------- Form fields: static labels ABOVE the field (no floating) ---------------- */
.field {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-bottom: 22px;
}
.field-static-label {
  position: static;
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 8px;
  line-height: 1.3;
}
.field-optional-tag { font-weight: 500; color: var(--text-body); font-size: 12.5px; }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.85);
  color: var(--text-heading);
  font-size: 15px;
  line-height: 1.3;
  text-align: start;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2357616F'%3e%3cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.293l3.71-4.06a.75.75 0 111.08 1.04l-4.25 4.65a.75.75 0 01-1.08 0l-4.25-4.65a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: 18px;
  padding-inline-end: 40px;
  cursor: pointer;
}
[dir="rtl"] .field select { background-position: left 14px center; }
[dir="ltr"] .field select { background-position: right 14px center; }
.field select option { text-align: start; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--gold-300); box-shadow: 0 0 0 4px rgba(255,211,117,0.18); outline: none; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field-hint { font-size: 12.5px; color: var(--text-body); margin-top: 6px; }
.field-error {
  display: none;
  align-items: flex-start;
  gap: 6px;
  font-size: 12.5px;
  color: var(--error);
  margin-top: 6px;
  line-height: 1.4;
  font-weight: 600;
}
.field-error i { flex-shrink: 0; margin-top: 1px; }
.field.invalid input, .field.invalid textarea, .field.invalid select,
.field.invalid .phone-field { border-color: var(--error); }
.field.invalid input, .field.invalid textarea, .field.invalid select { box-shadow: 0 0 0 3px rgba(194,59,59,0.12); }
.field.invalid .field-error { display: flex; }
.consent-field.invalid .field-error { display: flex; }

/* Brief highlight when a pricing package auto-fills the service field */
.field.is-preselected select {
  border-color: var(--gold-300);
  box-shadow: 0 0 0 4px rgba(255,211,117,0.22);
  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

/* ---------------- Composite phone field: dial-code select + tel input ---------------- */
.phone-field {
  display: flex;
  align-items: stretch;
  gap: 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.85);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.phone-field:focus-within { border-color: var(--gold-300); box-shadow: 0 0 0 4px rgba(255,211,117,0.18); }
.phone-field select {
  flex: 0 0 auto;
  width: auto;
  min-width: 96px;
  max-width: 128px;
  border: none;
  border-inline-end: 1.5px solid var(--border);
  border-radius: 0;
  background-color: transparent;
  padding-inline-end: 32px;
}
.phone-field select:focus { box-shadow: none; outline: none; }
.phone-field input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}
.phone-field input:focus { box-shadow: none; outline: none; }
.field.invalid .phone-field { box-shadow: 0 0 0 3px rgba(194,59,59,0.12); }

.form-whatsapp-hint { text-align: center; margin-top: 10px; }

.consent-field { margin-bottom: 22px; }
.consent-row { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; }
.consent-row input { margin-top: 3px; flex-shrink: 0; }
.consent-row a { color: var(--gold-shadow); font-weight: 700; text-decoration: underline; }
.consent-row a:hover { color: var(--gold-deep); }

/* ==========================================================================
   CTA Band
   ========================================================================== */
.cta-band {
  background: var(--navy-gradient);
  border-radius: var(--radius-lg);
  padding: clamp(48px, 7vw, 72px);
  text-align: center;
  margin-inline: auto;
  max-width: var(--container-max);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-navy);
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 500px 400px at 15% 0%, rgba(255,211,117,0.22), transparent 60%),
    radial-gradient(ellipse 500px 400px at 90% 100%, rgba(204,161,69,0.16), transparent 60%);
  pointer-events: none;
}
.cta-band h2 { color: var(--white); margin-bottom: 16px; font-size: clamp(26px, 3.8vw, 36px); }
.cta-band p { color: rgba(255,255,255,0.72); max-width: 600px; margin-inline: auto; margin-bottom: 32px; }
.cta-band-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; }

/* ==========================================================================
   Footer — corporate, luxury, minimal
   ========================================================================== */
.site-footer {
  background: var(--navy-950);
  color: rgba(255,255,255,0.62);
  padding-block-start: 80px;
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 700px 450px at 90% 0%, rgba(255,211,117,0.08), transparent 60%);
  pointer-events: none;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 44px;
  padding-block-end: 52px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: relative;
}
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.footer-brand img { height: 44px; }
.footer-brand span { color: var(--white); font-weight: 800; font-size: 17px; }
.footer-about p { font-size: 14px; margin-bottom: 22px; max-width: 320px; }
.footer-col h4 { color: var(--white); font-size: 15px; margin-bottom: 22px; letter-spacing: 0.02em; }
.footer-col ul li { margin-bottom: 13px; }
.footer-col ul a { font-size: 14px; transition: color var(--transition); }
.footer-col ul a:hover { color: var(--gold-200); }
.footer-col address { font-style: normal; font-size: 14px; line-height: 1.9; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-block: 28px;
  font-size: 13px;
  position: relative;
}
.footer-legal-links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition), transform var(--transition);
}
.footer-social a:hover { background: var(--gold-gradient); color: var(--navy-950); transform: translateY(-3px); }

.footer-disclaimer {
  font-size: 12px;
  color: rgba(255,255,255,0.38);
  padding-block: 20px;
  border-top: 1px solid rgba(255,255,255,0.06);
  line-height: 1.8;
  position: relative;
}

/* ==========================================================================
   WhatsApp Floating Button
   ========================================================================== */
.whatsapp-float {
  position: fixed;
  bottom: 26px;
  inset-inline-end: 26px;
  z-index: 400;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1EA36B, #16855B);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: var(--shadow-lg);
  transition: transform 0.4s var(--ease-spring), box-shadow var(--transition);
  animation: pulse-glow 2.8s ease-in-out 6;
}
.whatsapp-float:hover { transform: scale(1.1); box-shadow: var(--shadow-lg), 0 0 0 6px rgba(28,138,92,0.18); }
@keyframes pulse-glow {
  0%, 100% { box-shadow: var(--shadow-lg), 0 0 0 0 rgba(28,138,92,0.4); }
  50% { box-shadow: var(--shadow-lg), 0 0 0 12px rgba(28,138,92,0); }
}

/* ==========================================================================
   Legal Pages
   ========================================================================== */
.legal-hero {
  padding-block-start: calc(var(--header-h) + 48px);
  padding-block-end: 48px;
  background: var(--navy-gradient);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.legal-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 700px 500px at 85% 0%, rgba(255,211,117,0.14), transparent 60%);
  pointer-events: none;
}
.legal-hero h1 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 14px; color: var(--white); }
.legal-hero p { color: rgba(255,255,255,0.65); font-size: 14px; }
.legal-content {
  max-width: 820px;
  margin-inline: auto;
  padding-block: 60px;
}
.legal-content h2 { font-size: 22px; margin-block: 38px 16px; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content p, .legal-content li { margin-bottom: 14px; font-size: 15px; }
.legal-content ul, .legal-content ol { padding-inline-start: 22px; margin-bottom: 14px; }
.legal-content ul li, .legal-content ol li { margin-bottom: 8px; }
.legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 22px;
}
.legal-nav a {
  font-size: 13px;
  font-weight: 600;
  padding: 9px 18px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-pill);
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.06);
  transition: border-color var(--transition), background var(--transition);
}
.legal-nav a.is-active, .legal-nav a:hover { border-color: var(--gold-300); background: rgba(255,211,117,0.14); color: var(--gold-200); }
.legal-placeholder-note {
  background: var(--gold-gradient-soft);
  border: 1px dashed var(--gold-300);
  border-radius: var(--radius-sm);
  padding: 15px 20px;
  font-size: 13px;
  color: var(--navy);
  margin-bottom: 32px;
}

/* ==========================================================================
   Premium Page Loader
   ========================================================================== */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--navy-gradient);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  transition: opacity 0.6s var(--ease), visibility 0.6s var(--ease);
}
.page-loader-logo {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  animation: loader-pulse 1.6s var(--ease) infinite;
  filter: drop-shadow(0 0 24px rgba(255,211,117,0.45));
}
@keyframes loader-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.8; }
}
.page-loader-bar {
  width: 160px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.12);
  overflow: hidden;
  display: block;
}
.page-loader-bar-fill {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: var(--radius-pill);
  background: var(--gold-gradient-text);
  animation: loader-bar-slide 1.1s ease-in-out infinite;
}
@keyframes loader-bar-slide {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(360%); }
}
.page-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

/* ==========================================================================
   Animations — entrance variants
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.reveal-left { opacity: 0; transform: translateX(-34px); transition: opacity 0.75s var(--ease), transform 0.75s var(--ease); }
html[dir="rtl"] .reveal-left { transform: translateX(34px); }
.reveal-left.is-visible { opacity: 1; transform: translateX(0); }

.reveal-right { opacity: 0; transform: translateX(34px); transition: opacity 0.75s var(--ease), transform 0.75s var(--ease); }
html[dir="rtl"] .reveal-right { transform: translateX(-34px); }
.reveal-right.is-visible { opacity: 1; transform: translateX(0); }

.reveal-scale { opacity: 0; transform: scale(0.9); transition: opacity 0.65s var(--ease), transform 0.65s var(--ease-spring); }
.reveal-scale.is-visible { opacity: 1; transform: scale(1); }

/* Stagger children of a grid when revealed */
.grid.reveal-stagger > * {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
}
.grid.reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); }
.grid.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.05s; }
.grid.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.14s; }
.grid.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.23s; }
.grid.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.32s; }
.grid.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.41s; }

/* Page load fade-in for the whole document */
body.is-loaded .page-fade { animation: page-fade-in 0.9s var(--ease) both; }
@keyframes page-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-5 { grid-template-columns: repeat(2, 1fr); }
  .grid-5 > *:nth-child(1),
  .grid-5 > *:nth-child(2),
  .grid-5 > *:nth-child(3),
  .grid-5 > *:nth-child(4),
  .grid-5 > *:nth-child(5) { grid-column: auto; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .pricing-card.is-featured { transform: none; }
  .pricing-card.is-featured:hover { transform: translateY(-8px); }
}

@media (max-width: 960px) {
  .main-nav { display: none; }
  .menu-toggle { display: flex; }
  .hero-grid, .about-grid, .contact-grid, .why-grid { grid-template-columns: 1fr; }
  .hero-media, .why-media { order: -1; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }

  .mobile-nav {
    position: fixed;
    inset-inline: 0;
    top: var(--header-h);
    background: rgba(5,14,30,0.97);
    backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255,255,255,0.08);
    box-shadow: var(--shadow-navy);
    padding: 26px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--transition), opacity var(--transition), visibility var(--transition);
    z-index: 450;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  .mobile-nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
  .mobile-nav a {
    padding: 15px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    font-size: 15.5px;
  }
  .mobile-nav .btn { margin-top: 14px; }
}

@media (max-width: 767px) {
  .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
  .about-stats { grid-template-columns: 1fr; }
  .doc-list { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .trust-bar-inner { justify-content: center; }
  .steps { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .social-links { justify-content: center; }
  .trust-badges { justify-content: center; }
  .contact-info-card, .contact-form-card { padding: 32px 24px; }
  .card, .step, .doc-item { padding: 30px 22px; }
  .doc-item { padding: 20px; }
}

@media (max-width: 480px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .cta-band-actions { flex-direction: column; }
  .cta-band-actions .btn { width: 100%; }
  .container { padding-inline: 18px; }
  .social-links { gap: 10px; }
  .social-card { padding: 10px 14px 10px 10px; flex: 1 1 auto; justify-content: center; }
  [dir="rtl"] .social-card { padding: 10px 10px 10px 14px; }
  .pricing-badge { font-size: 11px; padding: 7px 16px; white-space: normal; text-align: center; max-width: 90%; }
  .hero-mini-trust { gap: 14px 20px; }
  .btn, a.btn, button.btn { min-height: 46px; }
  .menu-toggle, .lang-switch, .faq-question, .social-card, .doc-item, .whatsapp-float { min-height: 44px; }
  .whatsapp-float { min-height: 62px; }
}

/* ==========================================================================
   Mobile-only safety layer (< 768px)
   Scope: strictly mobile. Does NOT alter desktop or tablet (>=768px) rules
   above. Fixes: horizontal overflow, header overlap, Hero sizing/centering,
   form/phone-field containment, consent row wrapping, WhatsApp CTA sizing.
   ========================================================================== */
@media (max-width: 767px) {

  /* ---- 1/2/3/4/14: Global width & overflow containment ---- */
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  * {
    box-sizing: border-box;
  }

  section,
  .container,
  .wrapper,
  .form-card {
    width: 100%;
    max-width: 100%;
  }

  img,
  video {
    max-width: 100%;
    height: auto;
  }

  /* Clip oversized decorative orbs so they cannot create horizontal
     overflow / phantom whitespace on narrow screens (root cause of the
     "white empty area" and side-scroll on mobile). Only `section` needs
     this — every .deco-orb is a direct child of a <section>, so clipping
     at the section level is enough. Deliberately NOT applied to `.card`
     or `.contact-info-card`: setting overflow-x:hidden on those forces
     overflow-y to compute as `auto` (CSS spec), which was clipping the
     pricing badges that intentionally poke above the card (top:-15px). */
  section {
    overflow-x: hidden;
    padding-block: clamp(40px, 10vw, 64px);
  }

  .deco-orb {
    max-width: 70vw;
    max-height: 70vw;
  }

  /* Belt-and-suspenders width containment for every structural wrapper,
     as requested: 100% width, never exceed the viewport, no intrinsic
     min-width forcing overflow, and self-centered via auto margins. */
  .container,
  .wrapper,
  .hero-grid,
  .hero-content,
  .hero-media,
  .about-grid,
  .about-copy,
  .about-media,
  .why-grid,
  .why-features,
  .contact-grid,
  .contact-info-card,
  .contact-form-card,
  .grid,
  .card,
  .pricing-card,
  .field,
  .field-row,
  .phone-field,
  .consent-row {
    min-width: 0;
  }

  .container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
    padding-inline: 16px;
  }

  /* ---- About section: center illustration, scale it correctly, remove
     excessive empty space, keep copy centered with tighter rhythm ---- */
  .about-grid {
    gap: 26px;
  }
  .about-media {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    padding: 10px;
  }
  .about-media img {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
  }
  .about-copy {
    width: 100%;
    max-width: 100%;
    text-align: center;
  }
  .about-copy .section-kicker {
    margin-inline: auto;
  }
  .about-copy p {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
  }

  /* ---- Statistics cards (about-stats): equal, compact, centered ---- */
  .about-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 26px;
  }
  .about-stats .stat {
    padding: 14px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .about-stats .stat strong {
    font-size: 21px;
    margin-bottom: 3px;
  }
  .about-stats .stat span {
    font-size: 11.5px;
    line-height: 1.35;
  }

  /* ---- 5: RTL alignment safety net on mobile ---- */
  [dir="rtl"] .hero-content,
  [dir="rtl"] .section-head,
  [dir="rtl"] .contact-info-card,
  [dir="rtl"] .contact-form-card {
    text-align: right;
  }
  [dir="ltr"] .hero-content,
  [dir="ltr"] .section-head,
  [dir="ltr"] .contact-info-card,
  [dir="ltr"] .contact-form-card {
    text-align: left;
  }

  /* ---- 6/7/8/9: Hero section — center content & image, fit text ----
     Hardened with !important: the root cause of the left-side clipping
     was the .reveal-right entrance animation (transform: translateX(...))
     applied to .hero-content, combined with overflow:hidden on .hero —
     if the reveal transform is ever still active (or restored by any
     later cascade rule) part of the Arabic paragraph gets pushed outside
     the clipped section and is permanently invisible on narrow screens.
     Forcing transform:none/translate:none/position:static/inset:auto on
     every Hero text node removes that root cause instead of only hiding
     the symptom. */
  .hero,
  .hero-grid,
  .hero-content,
  .hero-actions,
  .hero-mini-trust {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    left: auto !important;
    right: auto !important;
    inset: auto !important;
    transform: none !important;
    translate: none !important;
    box-sizing: border-box !important;
  }

  .hero {
    padding-block-start: calc(var(--header-h) + 28px) !important;
    padding-block-end: 56px !important;
    overflow: hidden !important;
  }

  .hero-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
    text-align: center !important;
    justify-items: center !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .hero-content {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 0 !important;
    overflow: visible !important;
    text-align: center !important;
  }
  .hero-content .section-kicker {
    margin-inline: auto;
  }
  .hero-content h1 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    transform: none !important;
    font-size: clamp(26px, 7vw, 34px);
    line-height: 1.35;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    margin-bottom: 16px;
  }
  .hero-content p {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    transform: none !important;
    font-size: 16px !important;
    line-height: 1.8 !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    margin-bottom: 26px;
  }
  .hero-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    justify-content: center;
    margin-bottom: 28px !important;
  }
  .hero-actions a,
  .hero-actions button {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    white-space: normal !important;
  }
  .hero-mini-trust {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    text-align: start;
  }
  .hero-mini-trust li {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  .hero-media {
    width: 100%;
    max-width: 100%;
  }
  .hero-media .media-frame {
    width: 100%;
    max-width: 100%;
    padding: 10px;
    box-sizing: border-box;
  }
  .hero-media img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  /* ---- 10: Mobile header — logo, lang button, CTA, hamburger all fit ---- */
  .site-header {
    height: auto;
    min-height: 72px;
    padding-block: 10px;
  }
  .nav-inner {
    flex-wrap: nowrap;
    gap: 8px;
    width: 100%;
    max-width: 100%;
  }
  .container.nav-inner {
    padding-inline: 14px;
  }
  .brand {
    flex-shrink: 1;
    min-width: 0;
    gap: 0;
  }
  .brand img {
    height: 36px;
    width: auto;
    max-width: 100%;
  }
  .site-header.is-scrolled .brand img { height: 32px; }

  .header-actions {
    gap: 6px;
    flex-shrink: 0;
  }

  /* Hide the text label of the language switch on mobile, keep the icon
     only, so it never overlaps the logo. Functionality unchanged. */
  .lang-switch {
    padding: 8px;
    gap: 0;
    width: 40px;
    height: 40px;
    justify-content: center;
  }
  .lang-switch-label {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  /* Shrink the header CTA so its Arabic label never pushes past the
     viewport edge; the hamburger opens the full mobile-nav which keeps
     its own full-size CTA button (untouched). */
  .header-actions > a.btn.btn-gold.btn-sm {
    display: none;
  }

  .menu-toggle {
    display: flex;
    flex-shrink: 0;
  }

  /* ---- Why Choose Us: compact, equal, centered cards ---- */
  .why-grid {
    gap: 22px;
  }
  .why-media {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    padding: 10px;
  }
  .why-media img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
  .why-features {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  /* Force vertical stacking (icon above text), never icon-beside-paragraph
     in a cramped horizontal row on narrow screens. Border-bottom removed
     and replaced with a self-contained card background so every card gets
     identical, equal spacing instead of an uneven divider line. */
  .feature-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 18px 16px !important;
    border-bottom: none !important;
    border-radius: var(--radius-md);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    transform: none !important;
    overflow: visible !important;
    text-align: center !important;
  }
  .feature-row .card-icon {
    width: 50px !important;
    height: 50px !important;
    font-size: 21px !important;
    margin-bottom: 10px !important;
    margin-inline: auto !important;
  }
  .feature-row > div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .feature-row h3,
  .feature-row p {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-align: center !important;
  }
  .feature-row h3 {
    font-size: 16.5px;
    margin-bottom: 6px;
  }
  .feature-row p {
    font-size: 13.5px;
    line-height: 1.65;
  }

  /* ---- Contact information card: fit + center on mobile, address/hours
     wrap on their own line instead of being squeezed next to the icon ---- */
  .contact-grid {
    gap: 20px;
  }
  .contact-info-card {
    width: calc(100% - 32px);
    max-width: 100%;
    min-width: 0;
    height: auto;
    margin: 0 auto 24px;
    padding: 22px 16px;
    overflow: visible;
    box-sizing: border-box;
  }
  .contact-info-row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    width: 100%;
    max-width: 100%;
    margin-bottom: 18px;
  }
  .contact-info-row i {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
  .contact-info-row div {
    min-width: 0;
    max-width: 100%;
  }
  .contact-info-row strong,
  .contact-info-row span,
  .contact-info-row a {
    display: block;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Social buttons: stack as full-width rows instead of a wrapping pill
     cluster that can overflow or leave uneven gaps on narrow screens. */
  .social-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    margin-top: 22px;
  }
  .social-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    justify-content: flex-start;
  }
  .social-card span {
    white-space: normal;
  }

  /* Trust badges: stack full-width for readable spacing */
  .trust-badges {
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 100%;
  }
  .trust-badge {
    width: 100%;
    max-width: 100%;
    white-space: normal;
  }
  /* The physical address is Latin/English text; isolate its bidi run so
     the Unicode bidi algorithm never re-orders the leading street number
     when this span sits inside an RTL ancestor (root cause of "127" being
     displaced to the middle/end of the line on mobile). */
  [data-i18n="contact.info.address.value"] {
    direction: ltr;
    unicode-bidi: plaintext;
    text-align: start;
  }

  /* ---- 11: Service request form — full containment, equal spacing ---- */
  .contact-form-card {
    width: calc(100% - 32px);
    max-width: 100%;
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
    padding: 24px 16px;
    box-sizing: border-box;
    overflow: visible;
  }
  .field-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .field {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-bottom: 18px;
  }
  .field-static-label {
    text-align: start;
  }
  .field input,
  .field select,
  .field textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 15px;
    text-align: start;
  }
  .field select {
    padding-inline-end: 36px;
    background-size: 16px;
    text-overflow: ellipsis;
  }

  /* Phone field: keep the dial-code select compact and let the number
     input take the remaining space without overlap. */
  .phone-field {
    width: 100%;
    max-width: 100%;
    flex-wrap: nowrap;
  }
  .phone-field select {
    min-width: 78px;
    max-width: 92px;
    padding-inline-start: 10px;
    padding-inline-end: 26px;
    background-size: 14px;
    font-size: 13.5px;
  }
  .phone-field input {
    min-width: 0;
    width: 100%;
  }

  /* ---- 12: Privacy checkbox row — never collapse into a narrow column ---- */
  .consent-field {
    width: 100%;
  }
  .consent-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
    gap: 8px 10px;
  }
  .consent-row input[type="checkbox"] {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-top: 2px;
  }
  .consent-row label {
    flex: 1 1 240px;
    min-width: 0;
    width: auto;
    max-width: 100%;
    line-height: 1.6;
    font-size: 13.5px;
    text-align: start;
    word-break: break-word;
  }
  .consent-row a {
    display: inline;
    white-space: normal;
  }

  /* ---- 13: WhatsApp submit button ---- */
  #cf-submit,
  .contact-form-card .btn-whatsapp {
    width: 100%;
    max-width: 100%;
    min-height: 56px;
    margin-inline: auto;
    box-sizing: border-box;
    white-space: normal;
    text-align: center;
  }

  /* ---- Pricing cards: single column, no cropping, natural height ---- */
  .pricing-card {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 26px;
    overflow: visible;
    transform: none;
  }
  .pricing-card.is-featured,
  .pricing-card.is-featured:hover {
    transform: none;
  }
  .pricing-badge {
    top: -14px;
    font-size: 11px;
    padding: 7px 16px;
    white-space: normal;
    text-align: center;
    max-width: calc(100% - 32px);
  }

  /* ---- WhatsApp floating button: never cover Hero text/buttons ---- */
  .whatsapp-float {
    width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    font-size: 24px !important;
    inset-inline-end: 14px !important;
    bottom: 18px !important;
  }
  /* Give the Hero and the sections most likely to sit behind the button
     extra breathing room at the bottom so the CTA/final content is never
     obstructed by the fixed floating button. */
  .hero {
    padding-block-end: calc(56px + 70px) !important;
  }
  #contact,
  #pricing {
    padding-block-end: calc(clamp(40px, 10vw, 64px) + 70px);
  }
}

/* ==========================================================================\n   NAFIX GLOBAL — FINAL MOBILE STABILIZATION LAYER\n   Keeps the original desktop design and fixes narrow-screen overflow,\n   oversized typography, stacked sections, contact cards, and floating UI.\n   ========================================================================== */

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}

@media (max-width: 767px) {
  :root {
    --header-h: 72px;
  }

  html {
    scroll-padding-top: 84px;
  }

  body {
    min-width: 0;
  }

  .container {
    width: 100%;
    max-width: 100%;
    padding-inline: 18px;
  }

  section {
    min-width: 0;
    overflow: hidden;
    padding-block: 58px;
  }

  .deco-orb {
    opacity: .28;
    pointer-events: none;
  }

  /* Header */
  .site-header {
    height: 72px;
  }

  .nav-inner {
    min-height: 72px;
    padding-inline: 16px;
  }

  .brand img {
    width: 48px;
    max-height: 48px;
    object-fit: contain;
  }

  .header-actions {
    gap: 9px;
  }

  .header-actions > .btn,
  .main-nav {
    display: none !important;
  }

  .lang-switch {
    min-width: 42px;
    min-height: 42px;
    padding: 0;
    justify-content: center;
  }

  .lang-switch-label {
    display: none;
  }

  .menu-toggle {
    display: inline-flex;
    width: 44px;
    height: 44px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
  }

  .mobile-nav {
    position: fixed;
    top: 72px;
    inset-inline: 0;
    width: 100%;
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 18px;
    border-radius: 0 0 20px 20px;
  }

  /* Shared headings */
  .section-head {
    width: 100%;
    max-width: 100%;
    margin-bottom: 32px;
  }

  .section-kicker {
    font-size: 12px;
    line-height: 1.3;
    padding: 8px 14px;
  }

  .section-head h2,
  .about-copy h2,
  .cta-band h2 {
    font-size: clamp(27px, 8vw, 34px) !important;
    line-height: 1.3 !important;
    letter-spacing: -.02em;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }

  .section-head p,
  .about-copy p,
  .cta-band p {
    font-size: 15px !important;
    line-height: 1.9 !important;
    overflow-wrap: anywhere;
  }

  /* Hero */
  .hero {
    min-height: auto;
    padding-top: 94px !important;
    padding-bottom: 58px !important;
  }

  .hero-grid {
    display: flex !important;
    flex-direction: column-reverse;
    gap: 28px;
    align-items: stretch;
  }

  .hero-content,
  .hero-media {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    transform: none !important;
  }

  .hero-media {
    max-width: 560px;
    margin-inline: auto;
  }

  .media-frame {
    width: 100%;
    border-radius: 22px;
    overflow: hidden;
  }

  .media-frame img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 11;
    object-fit: cover;
  }

  .hero h1 {
    max-width: 100%;
    font-size: clamp(34px, 10.5vw, 46px) !important;
    line-height: 1.18 !important;
    letter-spacing: -.03em;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }

  .hero-content > p {
    max-width: 100%;
    font-size: 15.5px !important;
    line-height: 1.9 !important;
  }

  .hero-actions,
  .cta-band-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
  }

  .hero-actions .btn,
  .cta-band-actions .btn {
    width: 100%;
    min-height: 54px;
    white-space: normal;
  }

  .hero-mini-trust {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
  }

  .hero-mini-trust li {
    min-width: 0;
    font-size: 13px;
    line-height: 1.6;
  }

  /* Trust strip */
  .trust-bar-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .trust-item {
    min-width: 0;
    padding: 14px 10px;
    font-size: 12px;
    text-align: center;
  }

  /* About section — screenshot-specific correction */
  .about-grid {
    display: flex !important;
    flex-direction: column;
    gap: 30px;
    align-items: stretch;
  }

  .about-media,
  .about-copy {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    transform: none !important;
  }

  .about-media {
    max-width: 560px;
    margin-inline: auto;
  }

  .about-media img {
    display: block;
    width: 100%;
    max-height: 330px;
    object-fit: cover;
    border-radius: 22px;
  }

  .about-copy {
    padding-inline: 0;
  }

  .about-copy h2 {
    margin-top: 16px;
    margin-bottom: 16px;
    max-width: 100%;
    font-size: clamp(28px, 8.2vw, 36px) !important;
    line-height: 1.28 !important;
  }

  .about-copy p {
    margin-bottom: 14px;
    color: var(--text-body);
    font-size: 15px !important;
    line-height: 1.95 !important;
    text-align: start;
  }

  .about-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 24px;
  }

  .stat {
    width: 100%;
    min-width: 0;
    padding: 18px;
  }

  /* Generic grids/cards */
  .grid,
  .grid-3,
  .grid-4,
  .grid-5,
  .steps,
  .doc-list,
  .why-grid,
  .contact-grid,
  .footer-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
  }

  .card,
  .step,
  .doc-item,
  .feature-row,
  .pricing-card,
  .contact-info-card,
  .contact-form-card,
  .cta-band {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    transform: none !important;
    overflow: visible;
  }

  .card,
  .pricing-card,
  .contact-info-card,
  .contact-form-card {
    padding: 22px 18px !important;
    border-radius: 20px;
  }

  .card h3,
  .step h3,
  .doc-item h3,
  .feature-row h3,
  .pricing-card h3 {
    font-size: 19px !important;
    line-height: 1.5 !important;
    overflow-wrap: anywhere;
  }

  .card p,
  .step p,
  .doc-item p,
  .feature-row p,
  .pricing-card p,
  .pricing-list li {
    font-size: 14px !important;
    line-height: 1.8 !important;
  }

  /* Why us */
  .why-media {
    max-width: 560px;
    margin-inline: auto;
  }

  .why-media img {
    display: block;
    width: 100%;
    max-height: 330px;
    object-fit: cover;
    border-radius: 22px;
  }

  .why-features {
    display: grid;
    gap: 14px;
  }

  .feature-row {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 18px 16px;
  }

  .feature-row .card-icon {
    width: 46px;
    height: 46px;
  }

  /* Pricing */
  .pricing-card {
    margin-top: 12px !important;
  }

  .pricing-card.is-featured {
    margin-top: 24px !important;
  }

  .pricing-price {
    font-size: 42px !important;
  }

  .pricing-badge {
    max-width: calc(100% - 28px);
    white-space: normal;
    line-height: 1.35;
  }

  /* FAQ */
  .faq-question {
    min-height: 64px;
    padding: 17px 16px;
    gap: 12px;
    font-size: 15px;
    line-height: 1.6;
    text-align: start;
  }

  .faq-question span {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .faq-answer p {
    padding: 0 16px 18px;
    font-size: 14px;
    line-height: 1.9;
  }

  /* CTA */
  .cta-band {
    padding: 32px 18px !important;
    text-align: center;
  }

  /* Contact */
  .contact-grid {
    align-items: start;
  }

  .contact-info-card,
  .contact-form-card {
    margin-inline: 0 !important;
  }

  .contact-info-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
  }

  .contact-info-row > div,
  .contact-info-row a,
  .contact-info-row span {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .social-links,
  .trust-badges {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .social-card,
  .trust-badge {
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
  }

  .field-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .field,
  .phone-field,
  .consent-field,
  .consent-row {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .field input,
  .field select,
  .field textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    font-size: 16px; /* prevents iOS input zoom */
  }

  .phone-field {
    display: grid;
    grid-template-columns: minmax(84px, 105px) minmax(0, 1fr);
    gap: 10px;
  }

  .phone-field select,
  .phone-field input {
    width: 100%;
    min-width: 0;
  }

  .consent-row {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
  }

  .consent-row label {
    min-width: 0;
    font-size: 13px;
    line-height: 1.75;
  }

  /* Footer */
  .footer-grid {
    gap: 28px !important;
  }

  .footer-col,
  .footer-about {
    min-width: 0;
    max-width: 100%;
  }

  .footer-bottom {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
  }

  .footer-legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
  }

  /* Floating WhatsApp button: avoid covering readable content */
  .whatsapp-float {
    width: 50px !important;
    height: 50px !important;
    inset-inline-end: 14px !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
    font-size: 23px !important;
    z-index: 80;
  }

  #about,
  #pricing,
  #contact {
    padding-bottom: 92px;
  }

  /* Animation fallback: mobile elements must never remain shifted/hidden */
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .reveal-stagger {
    transform: none !important;
  }
}

@media (max-width: 420px) {
  .container {
    padding-inline: 15px;
  }

  .hero h1 {
    font-size: clamp(31px, 10vw, 39px) !important;
  }

  .about-copy h2,
  .section-head h2,
  .cta-band h2 {
    font-size: clamp(25px, 7.8vw, 31px) !important;
  }

  .trust-bar-inner {
    grid-template-columns: 1fr;
  }

  .phone-field {
    grid-template-columns: 92px minmax(0, 1fr);
  }
}

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

/* ==========================================================================
   NAFIX — FINAL PREMIUM BUTTON SHINE OVERRIDE
   Continuous sweep across each button, independently.
   ========================================================================== */

.btn,
a.btn,
button.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transform: translateZ(0);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* Replace the former hover-only shine with a true automatic sweep. */
.btn::before,
a.btn::before,
button.btn::before {
  content: "";
  position: absolute;
  top: -70%;
  left: -72%;
  width: 42%;
  height: 240%;
  z-index: 1;
  display: block;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.04) 22%,
    rgba(255, 255, 255, 0.32) 40%,
    rgba(255, 255, 255, 0.92) 50%,
    rgba(255, 255, 255, 0.32) 60%,
    rgba(255, 255, 255, 0.04) 78%,
    transparent 100%
  );
  filter: blur(1.2px);
  transform: translate3d(0, 0, 0) skewX(-20deg);
  transition: none;
  animation: nafix-button-shine-sweep 3.4s cubic-bezier(.45, 0, .55, 1) infinite;
  will-change: transform, opacity;
}

/* Each button shines inside itself; no stagger between upper/lower buttons. */
.btn:nth-of-type(n)::before,
a.btn:nth-of-type(n)::before,
button.btn:nth-of-type(n)::before {
  animation-delay: 0s !important;
}

@keyframes nafix-button-shine-sweep {
  0%, 18% {
    opacity: 0;
    transform: translate3d(0, 0, 0) skewX(-20deg);
  }
  22% {
    opacity: 0.95;
  }
  48% {
    opacity: 0.95;
    transform: translate3d(430%, 0, 0) skewX(-20deg);
  }
  54%, 100% {
    opacity: 0;
    transform: translate3d(430%, 0, 0) skewX(-20deg);
  }
}

/* Text and icons stay crisp above the moving reflection. */
.btn > span,
.btn > i,
.btn > svg,
.btn > strong,
.btn > b {
  position: relative;
  z-index: 2;
}

/* Premium lift and glow. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    transform: translateY(-3px) scale(1.01);
  }

  .btn-gold:hover,
  .btn-primary:hover {
    box-shadow:
      0 16px 38px rgba(196, 139, 32, 0.28),
      0 0 0 1px rgba(255, 220, 145, 0.34),
      0 0 24px rgba(255, 205, 86, 0.20);
  }

  .btn-outline:hover,
  .btn-outline-light:hover {
    box-shadow:
      0 14px 30px rgba(4, 18, 39, 0.16),
      0 0 0 1px rgba(255, 255, 255, 0.12);
  }
}

.btn:active {
  transform: translateY(1px) scale(.975) !important;
  transition-duration: 90ms;
}

.btn:disabled::before {
  display: none !important;
  animation: none !important;
}

/* Slightly softer reflection on transparent buttons. */
.btn-outline::before,
.btn-outline-light::before {
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255,255,255,.02) 22%,
    rgba(255,255,255,.18) 40%,
    rgba(255,255,255,.62) 50%,
    rgba(255,255,255,.18) 60%,
    rgba(255,255,255,.02) 78%,
    transparent 100%
  );
}

@media (max-width: 768px) {
  .btn::before,
  a.btn::before,
  button.btn::before {
    width: 46%;
    animation-duration: 3s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn::before,
  a.btn::before,
  button.btn::before {
    display: none !important;
    animation: none !important;
  }
}


/* ==========================================================================
   NAFIX — FULL-WIDTH BUTTON SHINE (FINAL)
   ========================================================================== */

.btn,
a.btn,
button.btn {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
  transform: translateZ(0);
  transition:
    transform 280ms cubic-bezier(.2,.8,.2,1),
    box-shadow 280ms ease,
    border-color 220ms ease,
    background-color 220ms ease !important;
}

/* Remove any older fixed-light overlay. */
.btn::after,
a.btn::after,
button.btn::after {
  opacity: 0 !important;
  background: none !important;
  animation: none !important;
}

/*
  The reflection layer is as wide as the button itself.
  Its bright center travels completely from outside the first edge
  to outside the opposite edge.
*/
.btn::before,
a.btn::before,
button.btn::before {
  content: "" !important;
  position: absolute !important;
  top: -35% !important;
  left: -125% !important;
  width: 100% !important;
  height: 170% !important;
  z-index: 1 !important;
  display: block !important;
  pointer-events: none !important;
  opacity: 0;

  background: linear-gradient(
    110deg,
    transparent 0%,
    transparent 32%,
    rgba(255,255,255,.14) 40%,
    rgba(255,255,255,.48) 46%,
    rgba(255,255,255,.98) 50%,
    rgba(255,255,255,.48) 54%,
    rgba(255,255,255,.14) 60%,
    transparent 68%,
    transparent 100%
  ) !important;

  filter: blur(.6px);
  transform: translate3d(0,0,0) skewX(-16deg);
  transform-origin: center;
  animation: nafix-full-button-shine 3.2s ease-in-out infinite !important;
  animation-delay: 0s !important;
  will-change: transform, opacity;
}

/* The complete sweep. */
@keyframes nafix-full-button-shine {
  0%,
  24% {
    opacity: 0;
    transform: translate3d(0,0,0) skewX(-16deg);
  }

  28% {
    opacity: 1;
  }

  62% {
    opacity: 1;
    transform: translate3d(250%,0,0) skewX(-16deg);
  }

  66%,
  100% {
    opacity: 0;
    transform: translate3d(250%,0,0) skewX(-16deg);
  }
}

/* Keep button content above the reflection. */
.btn > *,
a.btn > *,
button.btn > * {
  position: relative;
  z-index: 2;
}

/* Premium interaction. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover,
  a.btn:hover,
  button.btn:hover {
    transform: translateY(-3px) scale(1.01);
  }

  .btn-gold:hover,
  .btn-primary:hover {
    box-shadow:
      0 16px 38px rgba(196,139,32,.30),
      0 0 0 1px rgba(255,220,145,.36),
      0 0 26px rgba(255,205,86,.22);
  }

  .btn-outline:hover,
  .btn-outline-light:hover {
    box-shadow:
      0 14px 30px rgba(4,18,39,.16),
      0 0 0 1px rgba(255,255,255,.14);
  }
}

.btn:active,
a.btn:active,
button.btn:active {
  transform: translateY(1px) scale(.975) !important;
  transition-duration: 90ms !important;
}

/* Slightly softer shine for transparent buttons. */
.btn-outline::before,
.btn-outline-light::before {
  background: linear-gradient(
    110deg,
    transparent 0%,
    transparent 32%,
    rgba(255,255,255,.08) 40%,
    rgba(255,255,255,.30) 46%,
    rgba(255,255,255,.72) 50%,
    rgba(255,255,255,.30) 54%,
    rgba(255,255,255,.08) 60%,
    transparent 68%,
    transparent 100%
  ) !important;
}

.btn:disabled::before,
a.btn:disabled::before,
button.btn:disabled::before {
  display: none !important;
  animation: none !important;
}

/* Same full sweep on phones. */
@media (max-width: 768px), (hover: none), (pointer: coarse) {
  .btn::before,
  a.btn::before,
  button.btn::before {
    display: block !important;
    width: 100% !important;
    animation-duration: 3s !important;
  }
}

/* Accessibility. */
@media (prefers-reduced-motion: reduce) {
  .btn::before,
  a.btn::before,
  button.btn::before {
    display: none !important;
    animation: none !important;
  }
}



/* ==========================================================================
   NAFIX GLOBAL — PREMIUM POLISH LAYER
   Typography, spacing, cards, media, buttons, icons and footer refinement.
   ========================================================================== */

/* ---------- Typography refinement ---------- */
html[lang="ar"] body {
  font-family: "IBM Plex Sans Arabic", "Alexandria", sans-serif;
  font-weight: 400;
}

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] .btn,
html[lang="ar"] .section-kicker {
  font-family: "Alexandria", "IBM Plex Sans Arabic", sans-serif;
}

body {
  font-size: 16px;
  line-height: 1.85;
}

h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

.hero-content h1 {
  font-size: clamp(38px, 5.4vw, 64px);
  line-height: 1.23;
  font-weight: 800;
  letter-spacing: -0.028em;
  margin-bottom: 30px;
}

.hero-content p {
  font-size: clamp(17px, 1.55vw, 19px);
  line-height: 1.95;
  font-weight: 400;
  max-width: 620px;
  margin-bottom: 40px;
}

.section-head h2 {
  font-size: clamp(32px, 4.4vw, 50px);
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -0.024em;
  margin-bottom: 20px;
}

.section-head p {
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.85;
  max-width: 700px;
  margin-inline: auto;
}

.card h3,
.step h3,
.feature-row h3,
.pricing-card h3 {
  font-weight: 700;
  line-height: 1.45;
}

.card p,
.step p,
.feature-row p,
.doc-item p,
.pricing-card > p,
.about-copy p {
  line-height: 1.9;
  font-weight: 400;
}

/* ---------- Section rhythm ---------- */
section {
  padding-block: clamp(84px, 9vw, 128px);
}

.section-head {
  margin-bottom: clamp(48px, 6vw, 72px);
}

.about-copy p + p {
  margin-top: 18px;
}

/* ---------- Premium cards ---------- */
.card,
.step,
.doc-item,
.contact-form-card,
.contact-info-card,
.about-media,
.why-media,
.hero-media .media-frame {
  border-radius: 26px;
}

.card {
  padding: 32px 28px;
  box-shadow:
    0 16px 40px rgba(5, 14, 30, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
  transition:
    transform 360ms cubic-bezier(.2,.8,.2,1),
    box-shadow 360ms ease,
    border-color 300ms ease;
}

.card:hover {
  transform: translateY(-7px);
  box-shadow:
    0 24px 58px rgba(5, 14, 30, 0.14),
    0 10px 28px rgba(204, 161, 69, 0.16);
}

.card-icon {
  width: 64px;
  height: 64px;
  font-size: 28px;
  margin-bottom: 20px;
  border-radius: 18px;
}

.card:hover .card-icon {
  transform: translateY(-2px) rotate(-5deg) scale(1.08);
}

.pricing-card {
  padding: 36px 30px;
}

.pricing-price {
  font-size: clamp(42px, 5vw, 52px);
  line-height: 1;
}

/* ---------- Statistics ---------- */
.about-stats .stat {
  min-height: 132px;
  padding: 24px 12px;
}

.about-stats .stat strong {
  font-size: clamp(38px, 4vw, 50px);
  line-height: 1.1;
  font-weight: 800;
  margin-bottom: 8px;
}

/* ---------- Media refinement ---------- */
.hero-media .media-frame,
.about-media,
.why-media {
  box-shadow:
    0 24px 60px rgba(5, 14, 30, 0.16),
    0 0 0 1px rgba(255, 211, 117, 0.10);
}

.hero-media img,
.about-media img,
.why-media img {
  transition: transform 700ms cubic-bezier(.2,.8,.2,1);
}

@media (hover: hover) and (pointer: fine) {
  .hero-media:hover img,
  .about-media:hover img,
  .why-media:hover img {
    transform: scale(1.025);
  }
}

/* ---------- Premium buttons ---------- */
.btn {
  min-height: 50px;
  font-weight: 650;
  letter-spacing: 0;
}

.btn-lg {
  min-height: 58px;
  padding: 18px 38px;
  font-size: 16px;
}

.btn-outline-light {
  font-weight: 600;
}

.btn-gold {
  background:
    linear-gradient(135deg, #FFE7A6 0%, #FFD375 30%, #DFAE4E 68%, #B77B22 100%);
  box-shadow:
    0 14px 32px rgba(204, 161, 69, 0.28),
    inset 0 1px 0 rgba(255,255,255,0.55);
}

.btn::before {
  content: "";
  position: absolute;
  top: -45%;
  left: -130%;
  width: 100%;
  height: 190%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    110deg,
    transparent 0%,
    transparent 34%,
    rgba(255,255,255,.12) 41%,
    rgba(255,255,255,.72) 48%,
    rgba(255,255,255,.96) 50%,
    rgba(255,255,255,.72) 52%,
    rgba(255,255,255,.12) 59%,
    transparent 66%,
    transparent 100%
  );
  transform: skewX(-16deg);
  animation: nafix-premium-shine 3.8s ease-in-out infinite;
}

@keyframes nafix-premium-shine {
  0%, 26% {
    opacity: 0;
    transform: translateX(0) skewX(-16deg);
  }
  30% {
    opacity: 1;
  }
  62% {
    opacity: 1;
    transform: translateX(250%) skewX(-16deg);
  }
  66%, 100% {
    opacity: 0;
    transform: translateX(250%) skewX(-16deg);
  }
}

.btn > *,
.btn i,
.btn span,
.btn svg {
  position: relative;
  z-index: 2;
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    transform: translateY(-3px) scale(1.01);
  }

  .btn-gold:hover {
    box-shadow:
      0 20px 44px rgba(204, 161, 69, 0.36),
      0 0 0 1px rgba(255, 224, 153, 0.35);
  }
}

/* ---------- Footer refinement ---------- */
.site-footer {
  padding-block-start: 92px;
}

.footer-grid {
  gap: 52px;
}

.footer-col h4 {
  font-size: 16px;
  margin-bottom: 24px;
}

.footer-col ul a,
.footer-col address,
.footer-about p {
  line-height: 1.9;
}

.site-footer::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 211, 117, 0.65),
    transparent
  );
}

/* ---------- Mobile refinements ---------- */
@media (max-width: 767px) {
  body {
    font-size: 15px;
    line-height: 1.8;
  }

  section {
    padding-block: 72px;
  }

  .hero {
    padding-block-start: calc(var(--header-h) + 34px) !important;
    padding-block-end: 64px !important;
  }

  .hero-content h1 {
    font-size: clamp(30px, 8.4vw, 38px);
    line-height: 1.34;
    margin-bottom: 20px;
  }

  .hero-content p {
    font-size: 16px;
    line-height: 1.9;
    margin-bottom: 30px;
  }

  .section-head {
    margin-bottom: 42px;
  }

  .section-head h2 {
    font-size: clamp(29px, 8vw, 38px);
    line-height: 1.35;
    margin-bottom: 16px;
  }

  .section-head p {
    font-size: 15.5px;
    line-height: 1.85;
  }

  .card,
  .pricing-card,
  .step,
  .doc-item {
    padding: 26px 20px;
    border-radius: 22px;
  }

  .card-icon {
    width: 58px;
    height: 58px;
    font-size: 26px;
    margin-bottom: 18px;
  }

  .card h3,
  .pricing-card h3 {
    font-size: 20px;
    line-height: 1.5;
  }

  .card p,
  .pricing-card > p {
    font-size: 14.5px;
    line-height: 1.85;
  }

  .about-copy p {
    font-size: 15.5px;
    line-height: 1.95;
  }

  .about-stats {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .about-stats .stat {
    min-height: 110px;
  }

  .about-stats .stat strong {
    font-size: 38px;
  }

  .btn,
  .btn-lg {
    width: 100%;
    min-height: 54px;
    font-size: 15.5px;
  }

  .hero-actions,
  .cta-band-actions {
    width: 100%;
  }

  .site-footer {
    padding-block-start: 72px;
  }

  .footer-grid {
    gap: 38px;
  }
}

/* ---------- Motion accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn::before {
    animation: none !important;
    display: none !important;
  }

  .hero-media img,
  .about-media img,
  .why-media img {
    animation: none !important;
    transition: none !important;
  }
}
/* ==========================================================================
   NAFIX — STRIPE PAYMENT + WHATSAPP BUTTONS
   ========================================================================== */

.pricing-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-top: auto;
  padding-top: 10px;
}

.pricing-actions .btn {
  width: 100%;
  min-height: 52px;
  padding: 14px 20px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
}

.pricing-pay-btn {
  background: linear-gradient(
    135deg,
    #ffe7a6 0%,
    #ffd375 28%,
    #dfae4e 64%,
    #b77b22 100%
  );
  color: #050e1e;
  border: 1px solid rgba(255, 211, 117, 0.75);
  box-shadow:
    0 14px 30px rgba(204, 161, 69, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.pricing-pay-btn:hover {
  color: #050e1e;
  transform: translateY(-3px);
  box-shadow:
    0 20px 42px rgba(204, 161, 69, 0.40),
    0 0 0 1px rgba(255, 224, 153, 0.32);
}

.pricing-pay-btn i {
  font-size: 20px;
}

.pricing-whatsapp-btn {
  background: rgba(255, 255, 255, 0.78);
  color: #147a50;
  border: 1.5px solid rgba(28, 138, 92, 0.34);
  box-shadow: 0 7px 18px rgba(5, 14, 30, 0.06);
}

.pricing-whatsapp-btn:hover {
  color: #ffffff;
  background: linear-gradient(135deg, #1ea36b, #16855b);
  border-color: transparent;
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(28, 138, 92, 0.28);
}

.pricing-whatsapp-btn i {
  font-size: 21px;
}

/* Stripe security note beneath both buttons */
.pricing-actions::after {
  content: "دفع آمن ومشفّر عبر Stripe";
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  color: #6b7280;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.5;
}

html[lang="en"] .pricing-actions::after {
  content: "Secure encrypted payment via Stripe";
}

/* Keep the buttons aligned at the bottom of all pricing cards */
.pricing-card {
  height: 100%;
}

.pricing-list {
  flex-grow: 1;
}

/* Mobile */
@media (max-width: 767px) {
  .pricing-actions {
    gap: 10px;
    padding-top: 8px;
  }

  .pricing-actions .btn {
    min-height: 54px;
    padding: 15px 18px;
    white-space: normal;
    text-align: center;
  }

  .pricing-pay-btn i,
  .pricing-whatsapp-btn i {
    font-size: 20px;
  }
}
/* ===== Order Funnel ===== */
.order-funnel{padding:80px 0}.order-layout{max-width:900px;margin:0 auto}.order-card{background:#fff;border:1px solid rgba(18,39,65,.1);border-radius:24px;padding:28px;box-shadow:0 18px 50px rgba(18,39,65,.08)}
.selected-package-box{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#f8f5ed;border:1px solid rgba(196,150,52,.3);border-radius:16px;padding:16px 18px;margin-bottom:24px}.selected-package-box strong{font-size:1.1rem;color:#122741}.selected-package-box #selectedPackagePrice{margin-inline-start:auto;font-weight:800;color:#b78927;font-size:1.2rem}.selected-label{font-size:.85rem;color:#667085;width:100%}
.order-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.order-card label{display:flex;flex-direction:column;gap:8px;font-weight:700;color:#122741}.order-card input,.order-card select,.order-card textarea{width:100%;border:1px solid #d9dee6;border-radius:13px;padding:13px 14px;font:inherit;background:#fff;color:#122741;outline:none}.order-card input:focus,.order-card select:focus,.order-card textarea:focus{border-color:#c49634;box-shadow:0 0 0 3px rgba(196,150,52,.12)}.order-notes{margin:18px 0 22px}.order-review h3{font-size:1.6rem;margin:10px 0 20px;color:#122741}.review-details{display:grid;gap:0;border:1px solid #e8ebef;border-radius:16px;overflow:hidden;margin-bottom:22px}.review-row{display:flex;justify-content:space-between;gap:20px;padding:13px 16px;border-bottom:1px solid #eef0f3}.review-row:last-child{border-bottom:0}.review-row span{color:#667085}.review-row strong{text-align:end;color:#122741}.review-actions{display:grid;gap:10px}.order-edit-btn{border:0;background:transparent;color:#667085;text-decoration:underline;cursor:pointer;padding:8px}.order-security{text-align:center;color:#667085;font-size:.9rem;margin:16px 0 0}.order-security i{color:#c49634}.pricing-order-btn{border:0;cursor:pointer;font:inherit}
@media(max-width:700px){.order-funnel{padding:56px 0}.order-card{padding:20px;border-radius:20px}.order-grid{grid-template-columns:1fr}.selected-package-box #selectedPackagePrice{margin-inline-start:0;width:100%}.review-row{flex-direction:column;gap:4px}.review-row strong{text-align:start}}

/* ===== NAFIX order funnel — lead delivery states ===== */
.order-business-other{grid-column:1/-1}
.order-consent{display:flex!important;flex-direction:row!important;align-items:flex-start;gap:10px!important;margin:18px 0;color:#57616f!important;font-weight:500!important;line-height:1.65}
.order-consent input{width:18px!important;height:18px!important;min-width:18px;margin-top:4px;accent-color:#c49634}
.order-submit-status{min-height:24px;margin:0 0 12px;font-size:.92rem;font-weight:600}
.order-submit-status.is-sending{color:#667085}
.order-submit-status.is-success{color:#1c8a5c}
.order-submit-status.is-error{color:#c23b3b}
#orderSubmitBtn:disabled{opacity:.68;cursor:not-allowed;transform:none!important}
#orderSubmitBtn.is-loading i{animation:nafix-order-spin .9s linear infinite}
@keyframes nafix-order-spin{to{transform:rotate(360deg)}}
@media(max-width:700px){.order-business-other{grid-column:auto}.order-consent{font-size:.9rem}}


/* ==========================================================================
   NAFIX GLOBAL — SAFE UI PATCH
   Keeps pricing WhatsApp buttons, premium automatic gold shine, order funnel,
   Stripe links and Web3Forms behavior intact.
   ========================================================================== */

/* Header logo: use the existing official file, crop only the baked square corners. */
.site-header .brand {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
}

.site-header .brand img,
.site-header.is-scrolled .brand img {
  display: block !important;
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 50% !important;
  clip-path: circle(49% at 50% 50%) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Contact consent: keep checkbox + sentence as a normal horizontal row. */
.contact-form-card .consent-field {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  grid-column: 1 / -1 !important;
}

.contact-form-card .consent-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.contact-form-card .consent-row input[type="checkbox"] {
  flex: 0 0 18px !important;
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  margin: 3px 0 0 0 !important;
}

.contact-form-card .consent-row label {
  display: block !important;
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  line-height: 1.7 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  text-align: start !important;
}

.contact-form-card .consent-row label span,
.contact-form-card .consent-row label a {
  display: inline !important;
  width: auto !important;
  white-space: normal !important;
  word-break: normal !important;
}

html[dir="rtl"] .contact-form-card .consent-row { direction: rtl !important; }
html[dir="ltr"] .contact-form-card .consent-row { direction: ltr !important; }

@media (max-width: 767px) {
  .site-header .brand img,
  .site-header.is-scrolled .brand img {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
  }

  .contact-form-card .consent-row label {
    font-size: 13.5px !important;
    line-height: 1.65 !important;
  }
}