/* =============================================================
   SELF-HOSTED FONTS
   Plus Jakarta Sans (latin + latin-ext) - EN body text
   IBM Plex Sans Arabic (arabic + latin) - AR body text
   Downloaded from Google Fonts (fonts.gstatic.com) as woff2.
   ============================================================= */

/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/plus-jakarta-sans-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/plus-jakarta-sans-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/plus-jakarta-sans-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/plus-jakarta-sans-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/plus-jakarta-sans-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/plus-jakarta-sans-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/plus-jakarta-sans-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/plus-jakarta-sans-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/plus-jakarta-sans-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/plus-jakarta-sans-800.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* arabic */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-arabic-400.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/* latin */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-arabic-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* arabic */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-arabic-500.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/* latin */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-arabic-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* arabic */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-arabic-600.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/* latin */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-arabic-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* arabic */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-arabic-700.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/* latin */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-arabic-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* =============================================================
   NURLY DESIGN SYSTEM · Steady Dawn
   Agent 4 + Agent 6 + Agent 7 + Agent 8 canonical specifications
   ============================================================= */
:root {
  /* Agent 6 — Primary */
  --navy: #1B2E4A;
  --navy-80: #2C4566;
  --navy-40: #7D8FA2;
  --navy-15: #D1D7DE;
  --warm-white: #FAF8F5;
  --teal: #2A9D8F;
  --teal-120: #1E7268;
  --teal-40: #7FC5BB;
  --teal-15: #DBF0EC;

  /* Agent 6 — Supporting */
  --charcoal: #3A3A3C;
  --warm-gray: #B8B2AA;
  --sand: #F0EBE3;
  --sand-50: #F7F4ED;
  --amber: #C47A2A;
  --amber-120: #9A5E1E;
  --amber-20: #F5DFC0;

  /* Agent 8 — Warm shadow system (never gray/blue) */
  --shadow-sm: 0 1px 3px rgba(27,46,74,0.05);
  --shadow-md: 0 2px 8px rgba(27,46,74,0.06);
  --shadow-lg: 0 4px 16px rgba(27,46,74,0.10);

  /* Agent 7 — Typography */
  --font-en: 'Plus Jakarta Sans', 'Segoe UI', 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
  --font-ar: 'IBM Plex Sans Arabic', 'Tajawal', 'Cairo', sans-serif;

  /* Layout */
  --max-w: 1180px;
  --gutter: 24px;
  --radius: 8px;
  --radius-lg: 12px;

  /* Agent 8 — Motion (restrained) */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-fast: 200ms;
  --dur-base: 300ms;
  --dur-slow: 480ms;

  /* Density */
  --section-y: clamp(64px, 9vw, 112px);
  --section-y-tight: clamp(48px, 6vw, 80px);
}

/* ============ RESET ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-en);
  color: var(--charcoal);
  background: var(--warm-white);
  line-height: 1.6;
  font-size: 16px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--teal-120); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--teal); }
button { cursor: pointer; border: none; background: none; font-family: inherit; color: inherit; }
ul { list-style: none; }

/* ============ RTL ============ */
[dir="rtl"] body { font-family: var(--font-ar); }
[dir="rtl"] .en-only { display: none; }
[dir="ltr"] .ar-only { display: none; }

/* ============ FOCUS ============ */
:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 2px;
}
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  background: var(--navy);
  color: var(--warm-white);
  padding: 12px 20px;
  border-radius: var(--radius);
  z-index: 1000;
  font-weight: 600;
  font-size: 14px;
}
.skip-link:focus { top: 16px; color: var(--warm-white); }

/* ============ CONTAINER ============ */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
  width: 100%;
}

/* ============ TYPOGRAPHY ============ */
h1, h2, h3, h4 {
  font-family: var(--font-en);
  color: var(--navy);
  letter-spacing: -0.015em;
  line-height: 1.15;
  font-weight: 700;
}
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 {
  font-family: var(--font-ar);
  letter-spacing: 0;
  line-height: 1.3;
}

h1 { font-size: clamp(32px, 5.2vw, 56px); font-weight: 700; }
h2 { font-size: clamp(26px, 3.6vw, 40px); font-weight: 700; }
h3 { font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; }
h4 { font-size: 15px; font-weight: 600; }

.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 16px;
}
[dir="rtl"] .eyebrow { letter-spacing: 0; text-transform: none; font-size: 13px; }

.section-head {
  max-width: 720px;
  margin: 0 auto 56px;
  text-align: center;
}
.section-head p {
  margin-top: 16px;
  font-size: clamp(15px, 1.3vw, 17px);
  color: var(--navy-80);
  line-height: 1.65;
}
[dir="rtl"] .section-head p { line-height: 1.8; }

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 600;
  transition: all var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.btn-primary {
  background: var(--teal);
  color: #fff;
  box-shadow: var(--shadow-md);
}
.btn-primary:hover {
  background: var(--teal-120);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}
.btn-secondary {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--navy-15);
}
.btn-secondary:hover { border-color: var(--navy); color: var(--navy); background: var(--sand-50); }
.btn-ghost {
  background: transparent;
  color: var(--warm-white);
  border: 1px solid rgba(250,248,245,0.25);
}
.btn-ghost:hover { background: rgba(250,248,245,0.08); color: var(--warm-white); }

.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
[dir="rtl"] .btn svg { transform: scaleX(-1); }
[dir="rtl"] .btn svg.no-mirror { transform: none; }

/* ============ NAVIGATION ============ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250,248,245,0.85);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.nav.scrolled {
  background: rgba(250,248,245,0.96);
  border-bottom-color: var(--navy-15);
}
.nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 16px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.nav-logo svg { width: 38px; height: auto; }
.nav-logo .wordmark {
  font-family: var(--font-en);
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.02em;
}
.nav-logo .wordmark-ar {
  font-family: var(--font-ar);
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
}
[dir="ltr"] .nav-logo .wordmark-ar { display: none; }
[dir="rtl"] .nav-logo .wordmark { display: none; }

.nav-links {
  display: none;
  align-items: center;
  gap: 28px;
}
@media (min-width: 1024px) { .nav-links { display: flex; } }
.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--navy-80);
  position: relative;
  padding: 6px 0;
}
.nav-links a:hover { color: var(--navy); }
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1.5px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav-links a[aria-current="true"]::after,
.nav-links a:hover::after { transform: scaleX(1); }

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

/* Segmented language toggle */
.lang-toggle {
  display: inline-flex;
  background: var(--sand);
  border-radius: 999px;
  padding: 3px;
  font-size: 12px;
  font-weight: 600;
}
.lang-toggle button {
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--navy-80);
  transition: all var(--dur-fast) var(--ease-out);
  letter-spacing: 0.02em;
}
.lang-toggle button[aria-pressed="true"] {
  background: var(--warm-white);
  color: var(--navy);
  box-shadow: var(--shadow-sm);
}
.lang-toggle .ar-label { font-family: var(--font-ar); font-size: 13px; }

.nav-cta { display: none; }
@media (min-width: 640px) { .nav-cta { display: inline-flex; } }

.mobile-menu-btn {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
}
.mobile-menu-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.mobile-menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mobile-menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mobile-menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (min-width: 1024px) { .mobile-menu-btn { display: none; } }

.mobile-nav {
  position: fixed;
  inset: 64px 0 0 0;
  background: var(--warm-white);
  padding: 24px;
  z-index: 99;
  display: none;
}
.mobile-nav.open { display: block; }
.mobile-nav a {
  display: block;
  padding: 16px 0;
  font-size: 18px;
  font-weight: 500;
  color: var(--navy);
  border-bottom: 1px solid var(--sand);
}

/* ============ HERO ============ */
.hero {
  position: relative;
  padding: clamp(80px, 12vw, 140px) 0 clamp(64px, 10vw, 120px);
  background: linear-gradient(180deg, var(--navy) 0%, #213655 70%, var(--warm-white) 100%);
  overflow: hidden;
  color: var(--warm-white);
}
.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
@media (min-width: 960px) {
  .hero-grid {
    grid-template-columns: 1.15fr 1fr;
    gap: 64px;
  }
}

.hero-text { max-width: 580px; }
.hero .eyebrow { color: var(--teal-40); }
.hero h1 {
  color: var(--warm-white);
  margin-bottom: 20px;
  font-weight: 700;
}
[dir="rtl"] .hero h1 { font-weight: 700; }
.hero-sub {
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.55;
  color: rgba(250,248,245,0.85);
  margin-bottom: 32px;
  max-width: 500px;
}
[dir="rtl"] .hero-sub { line-height: 1.75; }

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 32px;
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 13px;
  color: rgba(250,248,245,0.7);
  font-weight: 500;
}
.hero-badges span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.hero-badges span::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--teal-40);
  flex-shrink: 0;
}

/* Hero arc composition */
.hero-visual {
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 959px) {
  .hero-visual { min-height: 280px; max-width: 420px; margin: 0 auto; }
}
.hero-visual svg { width: 100%; height: auto; max-width: 480px; }

/* Background atmospheric arc field — Agent 8 §9.1, 4-7% opacity */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='600' fill='none'%3E%3Cpath d='M 80 540 A 280 280 0 0 1 480 200' stroke='%23FAF8F5' stroke-width='1.2' stroke-linecap='round' opacity='0.05'/%3E%3Cpath d='M 250 580 A 200 200 0 0 1 600 320' stroke='%23FAF8F5' stroke-width='1.2' stroke-linecap='round' opacity='0.04'/%3E%3Cpath d='M 480 520 A 140 140 0 0 1 720 380' stroke='%23FAF8F5' stroke-width='1.2' stroke-linecap='round' opacity='0.06'/%3E%3Cpath d='M 60 320 A 320 320 0 0 1 280 60' stroke='%23FAF8F5' stroke-width='1.2' stroke-linecap='round' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 800px 600px;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  z-index: 1;
}

/* ============ TRUST STRIP ============ */
.trust-strip {
  position: relative;
  z-index: 3;
  margin-top: -32px;
  padding: 0 var(--gutter);
}
.trust-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  background: var(--warm-white);
  border: 1px solid var(--navy-15);
  border-radius: var(--radius-lg);
  padding: 20px 28px;
  box-shadow: var(--shadow-md);
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: center;
}
@media (min-width: 800px) {
  .trust-inner {
    grid-template-columns: auto 1fr auto;
    gap: 32px;
  }
}
.trust-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy-80);
  white-space: nowrap;
}
[dir="rtl"] .trust-label { letter-spacing: 0; text-transform: none; font-size: 13px; font-weight: 600; }

.trust-channels {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  align-items: center;
}
.trust-channel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--charcoal);
}
.trust-channel svg { width: 18px; height: 18px; color: var(--navy-80); }

.trust-meta {
  font-size: 12px;
  font-weight: 500;
  color: var(--navy-80);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.trust-meta span { display: inline-flex; align-items: center; gap: 6px; }
.trust-meta span::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
}

/* ============ SECTION COMMONS ============ */
section { padding: var(--section-y) 0; }
section.tight { padding: var(--section-y-tight) 0; }

/* ============ PROBLEM ============ */
.problem { background: var(--warm-white); }
.problem-text {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.problem-text p {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.6;
  color: var(--navy-80);
  margin-bottom: 20px;
}
[dir="rtl"] .problem-text p { line-height: 1.85; }
.problem-text p:last-child { margin-bottom: 0; color: var(--navy); font-weight: 500; }
.problem-text strong { color: var(--navy); font-weight: 700; }

/* ============ HOW IT WORKS · Process Diagram ============ */
.how-it-works {
  background: var(--sand-50);
  position: relative;
}

.flow-diagram {
  max-width: 980px;
  margin: 0 auto;
  position: relative;
}

.flow-nodes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  position: relative;
  z-index: 2;
}
@media (min-width: 800px) {
  .flow-nodes {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
  }
}

.flow-node {
  background: var(--warm-white);
  border: 1px solid var(--navy-15);
  border-radius: var(--radius-lg);
  padding: 28px 24px 28px;
  position: relative;
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.flow-node:hover { transform: translateY(-2px); border-color: var(--teal-40); }

.flow-node-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--teal-15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--teal-120);
  margin-bottom: 16px;
}
.flow-node-icon svg { width: 22px; height: 22px; }

.flow-node-step {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 10px;
}
[dir="rtl"] .flow-node-step { letter-spacing: 0; text-transform: none; font-size: 13px; }

.flow-node h3 {
  margin-bottom: 10px;
  font-size: 19px;
}
.flow-node p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--navy-80);
}
[dir="rtl"] .flow-node p { line-height: 1.85; font-size: 15px; }

/* Arc connectors between nodes — Agent 8 §2.3 */
.flow-connectors {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
@media (min-width: 800px) {
  .flow-connectors { display: block; }
}
.flow-connectors svg {
  position: absolute;
  top: 32px;
  left: 0;
  width: 100%;
  height: 60px;
}

/* ============ AI + HUMAN ============ */
.ai-human {
  background: var(--warm-white);
}
.ai-human-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 1080px;
  margin: 0 auto;
}
@media (min-width: 880px) {
  .ai-human-grid {
    grid-template-columns: 1fr auto 1fr;
    gap: 32px;
    align-items: stretch;
  }
}

.ai-human-card {
  background: var(--sand-50);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  position: relative;
}
.ai-human-card.human {
  background: var(--navy);
  color: var(--warm-white);
}
.ai-human-card.human h3 { color: var(--warm-white); }

.aihp-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--navy-15);
}
.ai-human-card.human .aihp-header {
  border-bottom-color: rgba(250,248,245,0.15);
}
.aihp-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--teal-15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--teal-120);
  flex-shrink: 0;
}
.ai-human-card.human .aihp-icon {
  background: rgba(42,157,143,0.18);
  color: var(--teal-40);
}
.aihp-icon svg { width: 22px; height: 22px; }
.aihp-meta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 2px;
}
[dir="rtl"] .aihp-meta { letter-spacing: 0; text-transform: none; font-size: 13px; }
.aihp-header h3 { margin: 0; font-size: 21px; }
.aihp-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.aihp-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  font-size: 15px;
  line-height: 1.55;
}
[dir="rtl"] .aihp-list li { line-height: 1.75; }
.aihp-list svg { width: 16px; height: 16px; margin-top: 3px; color: var(--teal); }
.ai-human-card.human .aihp-list svg { color: var(--teal-40); }

/* Center handoff connector */
.handoff {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0;
}
.handoff svg { width: 56px; height: 56px; }
@media (min-width: 880px) {
  .handoff svg { width: 64px; height: auto; }
}

.ai-human-foot {
  margin-top: 40px;
  text-align: center;
  font-size: 15px;
  color: var(--navy-80);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
[dir="rtl"] .ai-human-foot { font-size: 16px; line-height: 1.85; }

/* ============ DIFFERENCE ============ */
.difference {
  background: var(--sand-50);
}
.pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
}
@media (min-width: 720px) { .pillars { grid-template-columns: 1fr 1fr; gap: 24px; } }

.pillar {
  background: var(--warm-white);
  border: 1px solid var(--navy-15);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.pillar:hover { border-color: var(--teal-40); transform: translateY(-2px); }
.pillar-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--teal-15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--teal-120);
  margin-bottom: 18px;
}
.pillar-icon svg { width: 20px; height: 20px; }
.pillar h3 { margin-bottom: 10px; font-size: 19px; }
.pillar p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--navy-80);
}
[dir="rtl"] .pillar p { line-height: 1.85; font-size: 16px; }

/* ============ PRICING ============ */
.pricing { background: var(--warm-white); }

.pricing-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
}
.pricing-toggle {
  display: inline-flex;
  background: var(--sand);
  border-radius: 999px;
  padding: 4px;
}
.pricing-toggle button {
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy-80);
  transition: all var(--dur-fast) var(--ease-out);
}
.pricing-toggle button[aria-pressed="true"] {
  background: var(--warm-white);
  color: var(--navy);
  box-shadow: var(--shadow-sm);
}

.view-toggle {
  display: inline-flex;
  gap: 4px;
  background: var(--sand);
  border-radius: 999px;
  padding: 4px;
}
.view-toggle button {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--navy-80);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.view-toggle button[aria-pressed="true"] {
  background: var(--warm-white);
  color: var(--navy);
  box-shadow: var(--shadow-sm);
}
.view-toggle svg { width: 14px; height: 14px; }

.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 1080px;
  margin: 0 auto;
}
@media (min-width: 720px) { .pricing-grid { grid-template-columns: 1fr 1fr 1fr; gap: 16px; } }

.price-card {
  background: var(--warm-white);
  border: 1px solid var(--navy-15);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.price-card:hover { transform: translateY(-2px); border-color: var(--navy-40); }
.price-card.featured {
  border: 2px solid var(--teal);
  background: linear-gradient(180deg, var(--teal-15) 0%, var(--warm-white) 40%);
}

.popular-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--teal);
  color: #fff;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
[dir="rtl"] .popular-badge { letter-spacing: 0; font-size: 13px; }

.price-card h3 {
  margin-bottom: 8px;
  font-size: 22px;
}
.best-for {
  font-size: 13px;
  color: var(--navy-80);
  margin-bottom: 24px;
  line-height: 1.5;
  min-height: 40px;
}
[dir="rtl"] .best-for { line-height: 1.7; font-size: 14px; }

.price-row { margin-bottom: 24px; }
.price-original {
  font-size: 14px;
  color: var(--navy-80);
  text-decoration: line-through;
  margin-bottom: 4px;
}
.price-launch {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 8px;
}
.price-launch .currency {
  font-size: 18px;
  font-weight: 600;
  color: var(--navy);
}
.price-launch .amount {
  font-size: 44px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.02em;
  line-height: 1;
}
.price-launch .period {
  font-size: 14px;
  color: var(--navy-80);
  font-weight: 500;
}
.price-save {
  display: inline-block;
  background: var(--teal-15);
  color: var(--teal-120);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.price-annual {
  font-size: 12px;
  color: var(--navy-80);
  margin-top: 6px;
  font-weight: 500;
}

.features-list {
  flex-grow: 1;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.features-list li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--charcoal);
}
[dir="rtl"] .features-list li { line-height: 1.7; font-size: 15px; }
.features-list svg {
  width: 14px;
  height: 14px;
  margin-top: 4px;
  color: var(--teal);
}

.price-card .btn { width: 100%; justify-content: center; }
.first-month {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--amber-20);
  color: var(--amber-120);
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 500;
  text-align: center;
}
.vat-line {
  margin-top: 10px;
  text-align: center;
  font-size: 11px;
  color: var(--navy-80);
}

/* Pricing comparison table */
.pricing-table-wrap {
  max-width: 1080px;
  margin: 0 auto;
  display: none;
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--navy-15);
}
.pricing-table-wrap.active { display: block; }
.pricing-grid.hidden { display: none; }
.pricing-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--warm-white);
  font-size: 14px;
  min-width: 640px;
}
.pricing-table th, .pricing-table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--navy-15);
}
[dir="rtl"] .pricing-table th, [dir="rtl"] .pricing-table td { text-align: right; }
.pricing-table thead th {
  background: var(--sand-50);
  font-weight: 700;
  color: var(--navy);
  font-size: 15px;
}
.pricing-table thead th.featured-col {
  background: var(--teal-15);
  color: var(--teal-120);
  position: relative;
}
.pricing-table td {
  color: var(--charcoal);
  vertical-align: top;
}
.pricing-table td:first-child {
  font-weight: 600;
  color: var(--navy);
}
.pricing-table .price-cell {
  font-weight: 700;
  color: var(--navy);
  font-size: 18px;
}
.pricing-table .price-cell small {
  display: block;
  font-size: 12px;
  color: var(--navy-80);
  font-weight: 500;
  margin-top: 2px;
}
.pricing-table tr:last-child td { border-bottom: none; }

/* Launch offers ribbon */
.offers-ribbon {
  max-width: 1080px;
  margin: 32px auto 0;
  background: var(--sand);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
}
.offers-ribbon h3 {
  font-size: 16px;
  margin-bottom: 14px;
  font-weight: 600;
}
.offers-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px 28px;
  font-size: 13px;
  line-height: 1.6;
}
[dir="rtl"] .offers-grid { font-size: 14px; line-height: 1.75; }
@media (min-width: 720px) {
  .offers-grid { grid-template-columns: 1fr 1fr; }
}
.offers-grid p { color: var(--charcoal); }
.offers-grid strong { color: var(--navy); font-weight: 700; }

.founder-banner {
  max-width: 1080px;
  margin: 24px auto 0;
  padding: 18px 24px;
  background: var(--navy);
  color: var(--warm-white);
  border-radius: var(--radius-lg);
  text-align: center;
  font-size: 14px;
  font-weight: 500;
}
[dir="rtl"] .founder-banner { font-size: 15px; line-height: 1.7; }
.founder-banner strong { color: var(--teal-40); font-weight: 700; }

.pricing-fineprint {
  max-width: 1080px;
  margin: 28px auto 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 720px) { .pricing-fineprint { grid-template-columns: 1fr 1fr; } }
.fineprint-card {
  background: var(--warm-white);
  border: 1px solid var(--navy-15);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.fineprint-card h4 { margin-bottom: 6px; font-size: 14px; color: var(--navy); }
.fineprint-card p { font-size: 13px; color: var(--navy-80); line-height: 1.65; }
[dir="rtl"] .fineprint-card p { font-size: 14px; line-height: 1.8; }

/* ============ METRICS ============ */
.metrics {
  background: var(--navy);
  color: var(--warm-white);
  position: relative;
  overflow: hidden;
}
.metrics::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400' fill='none'%3E%3Cpath d='M 60 360 A 240 240 0 0 1 380 100' stroke='%23FAF8F5' stroke-width='1' stroke-linecap='round' opacity='0.04'/%3E%3Cpath d='M 220 380 A 180 180 0 0 1 520 220' stroke='%23FAF8F5' stroke-width='1' stroke-linecap='round' opacity='0.05'/%3E%3C/svg%3E");
  background-size: 600px 400px;
  background-position: right center;
  background-repeat: no-repeat;
  pointer-events: none;
}
.metrics .section-head { position: relative; z-index: 1; }
.metrics .section-head h2 { color: var(--warm-white); }
.metrics .section-head p { color: rgba(250,248,245,0.75); }
.metrics .eyebrow { color: var(--teal-40); }

.metrics-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 920px;
  margin: 0 auto;
}
@media (min-width: 720px) { .metrics-grid { grid-template-columns: 1fr 1fr 1fr; gap: 32px; } }

.metric {
  text-align: center;
  padding: 8px;
}
.metric-qualifier {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-40);
  margin-bottom: 10px;
}
[dir="rtl"] .metric-qualifier { letter-spacing: 0; text-transform: none; font-size: 13px; }
.metric-value {
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 700;
  color: var(--warm-white);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.metric-label {
  font-size: 14px;
  color: rgba(250,248,245,0.85);
  font-weight: 500;
}
[dir="rtl"] .metric-label { font-size: 15px; }

/* ============ GETTING STARTED · Vertical Timeline ============ */
.getting-started {
  background: var(--warm-white);
}

.timeline {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 31px;
  top: 12px;
  bottom: 12px;
  width: 1.5px;
  background: linear-gradient(180deg, var(--teal-40), var(--navy-15) 80%);
  z-index: 0;
}
[dir="rtl"] .timeline::before { left: auto; right: 31px; }

.timeline-step {
  position: relative;
  padding-left: 84px;
  padding-bottom: 36px;
  z-index: 1;
}
[dir="rtl"] .timeline-step { padding-left: 0; padding-right: 84px; }
.timeline-step:last-child { padding-bottom: 0; }

.timeline-marker {
  position: absolute;
  left: 0;
  top: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--warm-white);
  border: 2px solid var(--teal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--teal-120);
  box-shadow: 0 0 0 6px var(--warm-white);
}
[dir="rtl"] .timeline-marker { left: auto; right: 0; }

.timeline-step h3 {
  margin-bottom: 8px;
  font-size: 20px;
}
.timeline-meta {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 10px;
}
[dir="rtl"] .timeline-meta { letter-spacing: 0; text-transform: none; font-size: 13px; }
.timeline-step p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--navy-80);
}
[dir="rtl"] .timeline-step p { line-height: 1.85; font-size: 16px; }

.timeline-cta {
  margin-top: 12px;
  text-align: center;
  padding-top: 24px;
  border-top: 1px solid var(--navy-15);
}
.timeline-cta p {
  margin-top: 16px;
  font-size: 13px;
  color: var(--navy-80);
}

/* ============ FAQ ============ */
.faq {
  background: var(--sand-50);
}
.faq-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-item {
  background: var(--warm-white);
  border: 1px solid var(--navy-15);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-out);
}
.faq-item.open { border-color: var(--teal-40); }
.faq-question {
  width: 100%;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  gap: 16px;
  line-height: 1.45;
}
[dir="rtl"] .faq-question { text-align: right; font-size: 16px; line-height: 1.65; }
.faq-question:hover { background: var(--sand-50); }
.faq-question svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--teal);
  transition: transform var(--dur-base) var(--ease-out);
}
/* v5.2 — FAQ +/× rule retired; arc-rotate lives in the v5 override block */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-slow) var(--ease-out);
}
.faq-answer-inner {
  padding: 0 22px 20px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--navy-80);
}
[dir="rtl"] .faq-answer-inner { font-size: 15px; line-height: 1.9; }
.faq-item.open .faq-answer { max-height: 600px; }

/* ============ FINAL CTA ============ */
.final-cta {
  background: var(--navy);
  color: var(--warm-white);
  position: relative;
  overflow: hidden;
}
.final-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='400' fill='none'%3E%3Cpath d='M 80 380 A 300 300 0 0 1 540 60' stroke='%232A9D8F' stroke-width='1.5' stroke-linecap='round' opacity='0.18'/%3E%3Cpath d='M 280 400 A 200 200 0 0 1 620 200' stroke='%23FAF8F5' stroke-width='1' stroke-linecap='round' opacity='0.06'/%3E%3C/svg%3E");
  background-size: 800px 400px;
  background-position: right center;
  background-repeat: no-repeat;
  pointer-events: none;
}
.final-cta-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.final-cta h2 {
  color: var(--warm-white);
  margin-bottom: 16px;
}
.final-cta p {
  font-size: 17px;
  color: rgba(250,248,245,0.85);
  margin-bottom: 32px;
  line-height: 1.6;
}
[dir="rtl"] .final-cta p { line-height: 1.8; font-size: 18px; }
.final-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* ============ FOOTER ============ */
.footer {
  background: var(--navy);
  color: rgba(250,248,245,0.75);
  padding: 64px 0 24px;
  border-top: 1px solid rgba(250,248,245,0.08);
}
.footer-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(250,248,245,0.1);
}
@media (min-width: 720px) {
  .footer-top { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; }
}

.footer-brand .footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.footer-brand .footer-logo svg { width: 38px; height: auto; }
.footer-brand .footer-logo span {
  font-family: var(--font-en);
  font-size: 22px;
  font-weight: 700;
  color: var(--warm-white);
  letter-spacing: -0.02em;
}
[dir="rtl"] .footer-brand .footer-logo span { font-family: var(--font-ar); letter-spacing: 0; }
.footer-promise {
  color: var(--warm-white);
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 8px;
  line-height: 1.5;
}
.footer-soft {
  color: rgba(250,248,245,0.65);
  font-size: 14px;
}

.footer-col h4 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-40);
  margin-bottom: 16px;
}
[dir="rtl"] .footer-col h4 { letter-spacing: 0; text-transform: none; font-size: 14px; }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a {
  color: rgba(250,248,245,0.75);
  font-size: 14px;
  transition: color var(--dur-fast) var(--ease-out);
}
.footer-col a:hover { color: var(--warm-white); }

.footer-bottom {
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 18px; }

/* ============ STICKY MOBILE CTA ============ */
.sticky-mobile-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--warm-white);
  border-top: 1px solid var(--navy-15);
  padding: 12px 16px;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transform: translateY(100%);
  transition: transform var(--dur-base) var(--ease-out);
  box-shadow: 0 -4px 16px rgba(27,46,74,0.08);
}
.sticky-mobile-cta.visible { transform: translateY(0); }
.sticky-mobile-cta .meta {
  font-size: 12px;
  color: var(--navy-80);
  line-height: 1.3;
}
.sticky-mobile-cta .meta strong { color: var(--navy); display: block; font-size: 13px; }
.sticky-mobile-cta .btn { padding: 10px 18px; font-size: 14px; }
@media (min-width: 1024px) { .sticky-mobile-cta { display: none !important; } }

/* ============ v8.1 MOBILE FIXES ============ */
/* Hero diagram on small screens: hide entirely.
   At <640px the diagram labels overflow horizontally regardless of
   font size — the long English phrases don't fit. The hero headline
   ("Customer experience that grows with you") plus the sub paragraph
   ("We answer the routine instantly; our team steps in when something
   needs judgment") already communicate the dual-rail model in prose,
   so the diagram is decorative at this size. Returns at >640px. */
@media (max-width: 640px) {
  .hero-diagram { display: none; }
}

/* ============ SCROLL REVEAL ============ */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal.d-1 { transition-delay: 80ms; }
.reveal.d-2 { transition-delay: 160ms; }
.reveal.d-3 { transition-delay: 240ms; }

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

/* =============================================================
   NURLY v4 · VISUAL DENSITY LAYER
   Paper grain · chat mockups · report preview · refined motion
   All within Agent 4 §10 + Agent 8 vocabulary constraints
   ============================================================= */

/* --- Paper grain (Agent 8 — depth without decoration, 3-5% opacity) --- */
.has-grain { position: relative; }
.has-grain::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 0.106 0 0 0 0 0.180 0 0 0 0 0.290 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  opacity: 0.035;
  pointer-events: none;
  mix-blend-mode: multiply;
  z-index: 0;
}
.has-grain > * { position: relative; z-index: 1; }

/* --- CHAT MOCKUPS · AI+Human section --- */
.chat-mockups {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  max-width: 920px;
  margin: 56px auto 0;
  align-items: stretch;
}
@media (min-width: 760px) {
  .chat-mockups { grid-template-columns: 1fr 1fr; gap: 32px; }
}

.phone-frame {
  background: var(--warm-white);
  border: 1px solid var(--navy-15);
  border-radius: 28px;
  padding: 14px;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.phone-frame:hover { transform: translateY(-3px); }

.phone-notch {
  width: 80px;
  height: 5px;
  background: var(--navy-15);
  border-radius: 999px;
  margin: 0 auto 14px;
}

.phone-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 14px;
  border-bottom: 1px solid var(--sand);
  margin-bottom: 14px;
}
.phone-header .avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--teal-15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--teal-120);
  flex-shrink: 0;
  font-weight: 700;
  font-size: 13px;
}
.phone-header .who {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.2;
}
.phone-header .when {
  font-size: 11px;
  color: var(--navy-80);
  margin-top: 2px;
}

.phone-body {
  padding: 4px 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 320px;
  flex: 1;
}

.bubble {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 13px;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.phone-frame[dir="rtl"] .bubble { font-size: 14px; line-height: 1.65; }
.chat-mockups.in .bubble { opacity: 1; transform: translateY(0); }
.bubble-in {
  background: var(--sand);
  color: var(--charcoal);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.bubble-out {
  background: var(--teal);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.phone-frame[dir="rtl"] .bubble-in {
  align-self: flex-end;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 4px;
}
.phone-frame[dir="rtl"] .bubble-out {
  align-self: flex-start;
  border-bottom-right-radius: 16px;
  border-bottom-left-radius: 4px;
}
.bubble-meta {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.phone-frame[dir="rtl"] .bubble-meta { letter-spacing: 0; text-transform: none; font-size: 12px; }
.bubble-meta svg { width: 11px; height: 11px; }

.chat-mockups.in .bubble:nth-of-type(1) { transition-delay: 100ms; }
.chat-mockups.in .bubble:nth-of-type(2) { transition-delay: 400ms; }
.chat-mockups.in .bubble:nth-of-type(3) { transition-delay: 800ms; }
.chat-mockups.in .bubble:nth-of-type(4) { transition-delay: 1100ms; }
.chat-mockups.in .bubble:nth-of-type(5) { transition-delay: 1500ms; }

.handoff-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--teal);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
[dir="rtl"] .handoff-marker { letter-spacing: 0; text-transform: none; font-size: 13px; }
.chat-mockups.in .handoff-marker { opacity: 1; transition-delay: 1100ms; }
.handoff-marker::before,
.handoff-marker::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--teal);
  opacity: 0.3;
  max-width: 36px;
}
.handoff-marker svg { width: 14px; height: 14px; }

.phone-label {
  text-align: center;
  margin-top: 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--navy-80);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.phone-frame[dir="rtl"] .phone-label { letter-spacing: 0; text-transform: none; font-size: 14px; }

/* --- REPORT PREVIEW · attached to "You see everything" node --- */
.report-preview {
  max-width: 880px;
  margin: 48px auto 0;
  background: var(--warm-white);
  border: 1px solid var(--navy-15);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  box-shadow: var(--shadow-md);
}
.report-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--sand);
  margin-bottom: 18px;
  gap: 12px;
  flex-wrap: wrap;
}
.report-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.report-title-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--teal-15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--teal-120);
}
.report-title-icon svg { width: 14px; height: 14px; }
.report-title-text {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
}
.report-title-meta {
  font-size: 11px;
  color: var(--navy-80);
  margin-top: 2px;
}
[dir="rtl"] .report-title-meta { font-size: 12px; }
.report-period {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy-80);
}
[dir="rtl"] .report-period { letter-spacing: 0; text-transform: none; font-size: 13px; }

.report-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 22px;
}
@media (max-width: 540px) {
  .report-stats { grid-template-columns: 1fr; }
}
.report-stat {
  background: var(--sand-50);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.report-stat-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy-80);
  margin-bottom: 6px;
}
[dir="rtl"] .report-stat-label { letter-spacing: 0; text-transform: none; font-size: 12px; }
.report-stat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
  letter-spacing: -0.02em;
}
.report-stat-delta {
  font-size: 11px;
  margin-top: 4px;
  font-weight: 500;
  color: var(--teal-120);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.report-stat-delta svg { width: 10px; height: 10px; }

.report-chart {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) {
  .report-chart { grid-template-columns: 2fr 1fr; gap: 20px; align-items: stretch; }
}
.report-chart-main {
  background: var(--sand-50);
  border-radius: var(--radius);
  padding: 16px 18px 14px;
}
.report-chart-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--navy-80);
  margin-bottom: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
[dir="rtl"] .report-chart-label { letter-spacing: 0; text-transform: none; font-size: 13px; }
.report-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 76px;
}
.report-bar {
  flex: 1;
  background: var(--teal-15);
  border-radius: 3px 3px 0 0;
  transition: background var(--dur-fast) var(--ease-out);
  position: relative;
  min-height: 0;
}
.report-bar.tall { background: var(--teal); }
.report-bar-day {
  position: absolute;
  bottom: -16px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 9px;
  color: var(--navy-80);
  font-weight: 500;
}

.report-chart-side {
  background: var(--navy);
  color: var(--warm-white);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
}
.report-chart-side .label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-40);
}
[dir="rtl"] .report-chart-side .label { letter-spacing: 0; text-transform: none; font-size: 13px; }
.report-chart-side .value {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.report-chart-side .sub {
  font-size: 11px;
  color: rgba(250,248,245,0.7);
  line-height: 1.4;
}
[dir="rtl"] .report-chart-side .sub { font-size: 13px; }

/* --- COUNT-UP NUMBERS (Metrics section) --- */
.count-up { opacity: 1; }
.count-up.counted { opacity: 1; }

/* --- REFINED HOVER POLISH --- */
.flow-node, .pillar, .price-card, .ai-human-card, .phone-frame, .fineprint-card {
  will-change: transform;
}
.flow-node:hover .flow-node-icon,
.pillar:hover .pillar-icon {
  background: var(--teal);
  color: var(--warm-white);
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.flow-node-icon,
.pillar-icon {
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.btn:active { transform: translateY(0); }

/* --- HERO ARC HALO INTENSIFIER --- */
.hero-visual .glow-pulse {
  animation: glowPulse 3.2s ease-in-out infinite;
  transform-origin: center;
}
@keyframes glowPulse {
  0%, 100% { opacity: 0.95; }
  50% { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-visual .glow-pulse { animation: none; }
}

/* --- BUBBLE TAIL POLISH --- */
.typing-dots {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  padding: 12px 14px;
  background: var(--sand);
  border-radius: 16px;
  border-bottom-left-radius: 4px;
  align-self: flex-start;
}
[dir="rtl"] .typing-dots { align-self: flex-end; border-bottom-left-radius: 16px; border-bottom-right-radius: 4px; }
.typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--navy-40);
  animation: typing 1.4s infinite ease-in-out;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .typing-dots span { animation: none; opacity: 0.7; }
}

/* =============================================================
   NURLY v5 · ENHANCEMENT LAYER
   Hero-as-diagram · Arabic-not-translated · calendar · arc-FAQ
   ============================================================= */

/* ---------- v5 · FULL-BLEED HERO COMPOSITION ---------- */
.hero-v5 {
  position: relative;
  padding: clamp(72px, 11vw, 128px) 0 clamp(96px, 12vw, 144px);
  background: linear-gradient(180deg, var(--navy) 0%, #1f3556 65%, #213655 100%);
  color: var(--warm-white);
  overflow: hidden;
}
.hero-v5::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='800' fill='none'%3E%3Cpath d='M -40 720 A 480 480 0 0 1 760 100' stroke='%23FAF8F5' stroke-width='1' stroke-linecap='round' opacity='0.04'/%3E%3Cpath d='M 200 780 A 360 360 0 0 1 820 320' stroke='%23FAF8F5' stroke-width='1' stroke-linecap='round' opacity='0.05'/%3E%3Cpath d='M 540 740 A 240 240 0 0 1 980 460' stroke='%23FAF8F5' stroke-width='1' stroke-linecap='round' opacity='0.06'/%3E%3C/svg%3E");
  background-size: 1400px 900px;
  background-position: center top;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}
.hero-v5-inner {
  position: relative;
  z-index: 2;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 64px);
}
.hero-v5 .eyebrow { color: var(--teal-40); }
.hero-v5 h1 {
  color: var(--warm-white);
  font-size: clamp(34px, 5.6vw, 64px);
  letter-spacing: -0.02em;
  line-height: 1.08;
  max-width: 920px;
  margin-bottom: 22px;
}
[dir="rtl"] .hero-v5 h1 { line-height: 1.25; letter-spacing: 0; }
.hero-v5 h1 .accent {
  color: var(--teal-40);
  font-weight: 700;
  white-space: nowrap;
}
.hero-v5-sub {
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.55;
  color: rgba(250,248,245,0.85);
  max-width: 640px;
  margin-bottom: 32px;
}
[dir="rtl"] .hero-v5-sub { line-height: 1.8; }

.hero-v5-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
}
.hero-v5-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 13px;
  color: rgba(250,248,245,0.7);
  font-weight: 500;
}
.hero-v5-badges span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.hero-v5-badges span::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--teal-40);
  flex-shrink: 0;
}

/* Founder Partner scarcity marker · dignified, no countdown */
.founder-marker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  padding: 10px 16px 10px 14px;
  background: rgba(196,122,42,0.10);
  border: 1px solid rgba(196,122,42,0.32);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--amber-20);
  letter-spacing: 0.04em;
}
[dir="rtl"] .founder-marker { letter-spacing: 0; font-size: 13px; }
.founder-marker svg {
  width: 14px;
  height: 14px;
  color: var(--amber-20);
  flex-shrink: 0;
}
.founder-marker .sep {
  width: 1px;
  height: 12px;
  background: rgba(245,223,192,0.35);
}
.founder-marker .lead {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(245,223,192,0.9);
}
[dir="rtl"] .founder-marker .lead { text-transform: none; letter-spacing: 0; }

/* The two-rail diagram itself */
.hero-diagram {
  position: relative;
  width: 100%;
  margin-top: 8px;
}
.hero-diagram svg {
  width: 100%;
  height: auto;
  display: block;
  max-height: 380px;
}
.hero-diagram-labels {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(250,248,245,0.7);
}
[dir="rtl"] .hero-diagram-labels { letter-spacing: 0; text-transform: none; font-size: 13px; font-weight: 500; }
.hero-diagram-labels .col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hero-diagram-labels .col-1 { align-items: flex-start; }
.hero-diagram-labels .col-2 { align-items: center; }
.hero-diagram-labels .col-3 { align-items: flex-end; }
[dir="rtl"] .hero-diagram-labels .col-1 { align-items: flex-end; }
[dir="rtl"] .hero-diagram-labels .col-3 { align-items: flex-start; }
.hero-diagram-labels .lab {
  color: var(--warm-white);
}
.hero-diagram-labels .lab.ai { color: var(--teal-40); }
.hero-diagram-labels .lab.human { color: var(--amber-20); }
.hero-diagram-labels .sub {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: rgba(250,248,245,0.55);
  font-weight: 500;
}
[dir="rtl"] .hero-diagram-labels .sub { font-size: 13px; letter-spacing: 0; }

/* Vertical stack rhythm */
.hero-v5-inner {
  text-align: left;
  gap: clamp(32px, 4.5vw, 48px);
}
[dir="rtl"] .hero-v5-inner { text-align: right; }
.hero-v5 .hero-headline-block { max-width: 1080px; }
.hero-v5 .hero-bottom { max-width: 760px; }

/* Desktop: H1 a touch larger, diagram allowed full width */
@media (min-width: 880px) {
  .hero-v5 h1 { font-size: clamp(44px, 5.2vw, 68px); }
  .hero-diagram svg { max-height: 360px; }
}

/* Mobile: tighten spacing, scale diagram down, drop secondary SVG labels */
@media (max-width: 879px) {
  .hero-v5 { padding: clamp(56px, 14vw, 96px) 0 clamp(72px, 14vw, 112px); }
  .hero-v5-inner { gap: 28px; }
  .hero-diagram svg { max-height: 220px; }
  .hero-diagram .lbl-secondary { display: none; }
  .hero-diagram .lbl-rail { font-size: 12px; }
  .hero-v5-sub { margin-bottom: 22px; }
  .hero-v5-ctas .btn { flex: 1 1 auto; justify-content: center; }
  .founder-marker { width: 100%; justify-content: center; }
}

/* ---------- v5 · TRUST STRIP positioning ---------- */
.trust-strip-v5 {
  position: relative;
  z-index: 3;
  margin-top: clamp(-72px, -7vw, -56px);
  margin-bottom: clamp(48px, 6vw, 72px);
  padding: 0 var(--gutter);
}

/* ---------- v5 · PROBLEM display lead ---------- */
.problem-lead {
  display: block;
  margin: clamp(28px, 4vw, 40px) auto 8px;
  max-width: 880px;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: clamp(22px, 6vw, 28px);
  line-height: 1.18;
  color: var(--navy);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
[dir="rtl"] .problem-lead {
  font-family: var(--font-ar);
  letter-spacing: 0;
  line-height: 1.4;
}
.problem-text p.problem-lead-trail {
  margin-top: 12px;
  font-size: clamp(15px, 1.4vw, 18px);
  color: var(--navy-80);
  font-weight: 500;
}

/* ---------- v5 · HOW-IT-WORKS · Step 03 hosts the report ---------- */
.flow-node-payoff {
  grid-column: 1 / -1;
  background: transparent;
  border: none;
  padding: 0;
  margin-top: clamp(20px, 3vw, 32px);
}
.flow-node-payoff:hover { transform: none; border: none; }
.flow-node-payoff .payoff-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  margin-bottom: 18px;
}
.flow-node-payoff .payoff-head .flow-node-icon { margin-bottom: 0; }
.flow-node-payoff .payoff-head .step-stack { display: flex; flex-direction: column; gap: 2px; }
.flow-node-payoff .payoff-head h3 { margin-bottom: 0; font-size: clamp(20px, 2.2vw, 26px); }
.flow-node-payoff .payoff-head p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--navy-80);
  margin-top: 4px;
  max-width: 640px;
}
[dir="rtl"] .flow-node-payoff .payoff-head p { font-size: 15px; line-height: 1.85; }
.flow-nodes.v5 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 800px) {
  .flow-nodes.v5 {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}
.flow-nodes.v5 > .flow-node-payoff { grid-column: 1 / -1; }

/* ---------- v5 · ARABIC-NOT-TRANSLATED section ---------- */
.arabic-proof {
  background: var(--warm-white);
  position: relative;
}
.arabic-proof .section-head { margin-bottom: clamp(40px, 5vw, 56px); }
.ap-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 1080px;
  margin: 0 auto;
  align-items: stretch;
}
@media (min-width: 880px) {
  .ap-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
.ap-card {
  background: var(--sand-50);
  border: 1px solid var(--navy-15);
  border-radius: var(--radius-lg);
  padding: 28px 28px 30px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.ap-card.ap-en { }
.ap-card.ap-ar {
  background: var(--warm-white);
  border-color: var(--teal-40);
}
.ap-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--navy-15);
}
.ap-card.ap-ar .ap-head { border-bottom-color: rgba(42,157,143,0.30); }
.ap-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-80);
  background: var(--warm-white);
  border: 1px solid var(--navy-15);
  padding: 4px 10px;
  border-radius: 999px;
}
.ap-card.ap-ar .ap-tag { color: var(--teal-120); border-color: var(--teal-40); background: var(--teal-15); }
.ap-channel {
  font-size: 12px;
  color: var(--navy-80);
  font-weight: 500;
}
.ap-body {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 220px;
}
.ap-msg {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ap-msg .who {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy-80);
}
[dir="rtl"] .ap-msg .who { letter-spacing: 0; text-transform: none; font-size: 12px; }
.ap-msg.you .who { color: var(--teal-120); }
.ap-msg .text {
  font-size: 15px;
  line-height: 1.55;
  color: var(--charcoal);
  background: var(--warm-white);
  border: 1px solid var(--navy-15);
  border-radius: 12px;
  padding: 10px 14px;
  max-width: 92%;
}
.ap-card.ap-ar .ap-msg .text { font-family: var(--font-ar); font-size: 16px; line-height: 1.7; }
.ap-msg.you .text {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
  align-self: flex-end;
}
.ap-card.ap-ar .ap-msg.you .text { background: var(--teal-120); border-color: var(--teal-120); }
.ap-card.ap-ar .ap-body .ap-msg .text {
  align-self: flex-end;
}
.ap-card.ap-ar .ap-body .ap-msg.you .text {
  align-self: flex-start;
}
/* Annotation pulling out one Arabic phrase */
.ap-anno {
  margin-top: 22px;
  padding: 18px 20px;
  background: var(--sand);
  border-radius: var(--radius);
  border-left: 3px solid var(--amber);
}
[dir="rtl"] .ap-anno { border-left: none; border-right: 3px solid var(--amber); }
.ap-anno .label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber-120);
  margin-bottom: 8px;
}
[dir="rtl"] .ap-anno .label { letter-spacing: 0; text-transform: none; font-size: 12px; }
.ap-anno .arabic-term {
  font-family: var(--font-ar);
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
  display: block;
}
.ap-anno .literal {
  font-size: 12px;
  color: var(--navy-80);
  margin-bottom: 4px;
  font-style: italic;
}
.ap-anno .meaning {
  font-size: 14px;
  line-height: 1.6;
  color: var(--charcoal);
}
[dir="rtl"] .ap-anno .meaning { font-size: 15px; line-height: 1.8; }

.ap-footnote {
  max-width: 720px;
  margin: 32px auto 0;
  text-align: center;
  font-size: 14px;
  color: var(--navy-80);
  line-height: 1.65;
}
[dir="rtl"] .ap-footnote { font-size: 15px; line-height: 1.85; }

/* ---------- v5 · GETTING STARTED as 3-day calendar ---------- */
.calendar {
  max-width: 1000px;
  margin: 0 auto;
}
.calendar-days {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 880px) {
  .calendar-days { grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
}
.cal-day {
  background: var(--warm-white);
  border: 1px solid var(--navy-15);
  border-radius: var(--radius-lg);
  padding: 24px 24px 26px;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.cal-day:hover { border-color: var(--teal-40); transform: translateY(-2px); }
.cal-day-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--navy-15);
  margin-bottom: 18px;
}
.cal-day-num {
  font-family: var(--font-en);
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 700;
  color: var(--navy);
  line-height: 0.9;
  letter-spacing: -0.03em;
}
[dir="rtl"] .cal-day-num { font-family: var(--font-en); }
.cal-day-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  text-align: right;
}
[dir="rtl"] .cal-day-label { letter-spacing: 0; text-transform: none; font-size: 13px; text-align: left; }
.cal-day-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}
[dir="rtl"] .cal-day-title { letter-spacing: 0; }

.cal-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  flex-grow: 1;
}
@media (min-width: 540px) and (max-width: 879px) {
  .cal-cols { grid-template-columns: 1fr 1fr; gap: 18px; }
}
.cal-col-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-80);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
[dir="rtl"] .cal-col-label { letter-spacing: 0; text-transform: none; font-size: 12px; }
.cal-col-label::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--navy-40);
  flex-shrink: 0;
}
.cal-col.nurly .cal-col-label::before { background: var(--teal); }
.cal-col p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--charcoal);
}
[dir="rtl"] .cal-col p { font-size: 15px; line-height: 1.75; }
.cal-col.nurly p { color: var(--charcoal); }

.cal-foot {
  margin-top: 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.cal-foot .promise {
  font-size: 13px;
  color: var(--navy-80);
}
[dir="rtl"] .cal-foot .promise { font-size: 14px; }

/* ---------- v5 · FAQ ARC INDICATOR ---------- */
.faq-arc {
  position: relative;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--teal);
  transition: transform var(--dur-base) var(--ease-out);
}
.faq-arc svg {
  width: 100%;
  height: 100%;
}
.faq-arc .arc-path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.faq-arc .arc-dot {
  fill: currentColor;
}
.faq-item.open .faq-arc { transform: rotate(180deg); color: var(--teal-120); }

/* ---------- v5 · STICKY MOBILE CTA scarcity ---------- */
.sticky-mobile-cta .scarcity {
  display: inline-block;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--amber-120);
}
[dir="rtl"] .sticky-mobile-cta .scarcity { letter-spacing: 0; text-transform: none; font-size: 12px; }

/* ---------- v5 · ARABIC-NOT-TRANSLATED SECTION ---------- */
.arabic-proof {
  background: var(--sand);
  padding: clamp(72px, 10vw, 120px) 0;
  position: relative;
  overflow: hidden;
}
.arabic-proof::before {
  content: "";
  position: absolute;
  top: -200px; right: -200px;
  width: 600px; height: 600px;
  border-radius: 50%;
  border: 1px solid var(--navy);
  opacity: 0.04;
  pointer-events: none;
}
.arabic-proof::after {
  content: "";
  position: absolute;
  bottom: -260px; left: -180px;
  width: 540px; height: 540px;
  border-radius: 50%;
  border: 1px solid var(--navy);
  opacity: 0.05;
  pointer-events: none;
}
.arabic-proof .container { position: relative; z-index: 1; }
.arabic-proof .section-head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
.arabic-proof .section-head h2 { color: var(--navy); }
.arabic-proof .section-head .sub {
  color: var(--charcoal);
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.6;
  margin-top: 16px;
  max-width: 640px;
}

.proof-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 32px);
  align-items: stretch;
}
@media (max-width: 860px) {
  .proof-grid { grid-template-columns: 1fr; }
}

.proof-channel {
  background: var(--warm-white);
  border: 1px solid rgba(27,46,74,0.10);
  border-radius: 14px;
  padding: clamp(24px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
}
.proof-channel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(27,46,74,0.08);
}
.proof-channel-label {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--navy-80);
}
.proof-channel-customer {
  font-size: 13px;
  color: var(--charcoal);
  opacity: 0.7;
}
[dir="rtl"] .proof-channel-label { letter-spacing: 0; text-transform: none; font-size: 13px; }

.proof-bubbles { display: flex; flex-direction: column; gap: 12px; }
.proof-bubble {
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.55;
  max-width: 88%;
}
.proof-bubble.from-customer {
  background: var(--sand);
  color: var(--charcoal);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.proof-bubble.from-nurly {
  background: var(--navy);
  color: var(--warm-white);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
[dir="rtl"] .proof-channel[data-lang="en"] .proof-bubble.from-customer { align-self: flex-start; border-bottom-left-radius: 4px; border-bottom-right-radius: 12px; }
[dir="rtl"] .proof-channel[data-lang="en"] .proof-bubble.from-nurly { align-self: flex-end; border-bottom-right-radius: 4px; border-bottom-left-radius: 12px; }

/* The AR channel always shows its bubbles in RTL flow regardless of page lang */
.proof-channel[data-lang="ar"] .proof-bubbles { direction: rtl; }
.proof-channel[data-lang="ar"] .proof-bubble {
  font-family: "IBM Plex Sans Arabic", "Plus Jakarta Sans", sans-serif;
  line-height: 1.85;
}
.proof-channel[data-lang="ar"] .proof-bubble.from-customer { align-self: flex-end; border-bottom-right-radius: 4px; border-bottom-left-radius: 12px; }
.proof-channel[data-lang="ar"] .proof-bubble.from-nurly { align-self: flex-start; border-bottom-left-radius: 4px; border-bottom-right-radius: 12px; }

/* Annotation pinning a specific phrase */
.proof-annotation {
  margin-top: 4px;
  padding: 14px 16px;
  background: var(--warm-white);
  border-left: 2px solid var(--amber);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
[dir="rtl"] .proof-annotation,
.proof-channel[data-lang="ar"] .proof-annotation {
  border-left: none;
  border-right: 2px solid var(--amber);
  text-align: right;
}
.proof-annotation-phrase {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--amber-120);
}
.proof-channel[data-lang="ar"] .proof-annotation-phrase {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  letter-spacing: 0;
  text-transform: none;
  font-size: 14px;
  font-weight: 700;
}
.proof-annotation-note {
  font-size: 14px;
  line-height: 1.5;
  color: var(--charcoal);
}

.proof-foot {
  margin-top: clamp(32px, 4vw, 48px);
  max-width: 760px;
  font-size: clamp(15px, 1.5vw, 17px);
  color: var(--navy-80);
  line-height: 1.65;
}
.proof-foot strong { color: var(--navy); font-weight: 700; }

/* ---------- v5 · FAQ arc-rotate indicator ---------- */
.faq-item .faq-question svg {
  transition: transform 300ms ease;
}
.faq-item.open .faq-question svg {
  transform: rotate(180deg);
}

/* v5.2 — mirror hero diagram in RTL; counter-flip text labels so they stay readable */
[dir="rtl"] .hero-diagram svg { transform: scaleX(-1); }
[dir="rtl"] .hero-diagram svg text {
  transform: scaleX(-1);
  transform-origin: center;
  transform-box: fill-box;
}

/* ---------- v5 · sticky CTA founder line ---------- */
.sticky-mobile-cta .founder-line {
  display: block;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 10.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--amber-120);
  margin-top: 3px;
}
[dir="rtl"] .sticky-mobile-cta .founder-line {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  letter-spacing: 0;
  text-transform: none;
  font-size: 12px;
}

/* ---------- v5 · PROBLEM pulled-out display line ---------- */
.problem-text p:last-child {
  margin-top: clamp(20px, 3vw, 32px);
  padding-top: clamp(20px, 3vw, 28px);
  border-top: 1px solid rgba(27,46,74,0.10);
}
.problem-text p:last-child strong {
  display: block;
  font-family: var(--font-en);
  font-size: clamp(22px, 6vw, 28px);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin-bottom: 10px;
  text-wrap: balance;
}
[dir="rtl"] .problem-text p:last-child strong {
  font-family: var(--font-ar);
  line-height: 1.45;
  letter-spacing: 0;
}

/* Hide retired pieces if any straggle */
.v5-retired { display: none !important; }

/* ---------- v6 · STEP 3 PAYOFF CONNECTOR ---------- */
/* Ties the report-preview to Step 03 "You see everything" as its visual payoff */
.step3-payoff {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: clamp(40px, 5vw, 56px) auto clamp(18px, 2vw, 24px);
  text-align: center;
}
.step3-payoff svg {
  width: 72px;
  height: 48px;
  opacity: 0.55;
}
.step3-payoff-label {
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-120);
  max-width: 420px;
  line-height: 1.4;
}
[dir="rtl"] .step3-payoff-label {
  font-family: var(--font-ar);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 600;
}
/* Pull the report-preview up a touch since it now has a connector above */
.how-it-works .step3-payoff + .report-preview {
  margin-top: 0;
}
/* Mirror the connector arc in RTL so it reads with the language flow */
[dir="rtl"] .step3-payoff svg { transform: scaleX(-1); }

/* ---------- v7 · REPORT DASHBOARD — per-channel breakdown ---------- */
.report-bar { position: relative; }
.report-bar-week {
  position: absolute;
  bottom: -18px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 10px;
  color: var(--navy-80);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.report-bars { margin-bottom: 20px; }
.report-channels {
  background: var(--navy);
  color: var(--warm-white);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.report-channels .report-chart-label {
  color: var(--teal-40);
  margin-bottom: 12px;
}
.channel-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.channel-row {
  display: grid;
  grid-template-columns: 10px 1fr auto auto;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  line-height: 1.2;
  padding: 6px 0;
  border-bottom: 1px solid rgba(250,248,245,0.08);
}
[dir="rtl"] .channel-row { font-size: 13px; }
.channel-row:last-child { border-bottom: none; }
.channel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.channel-name {
  color: var(--warm-white);
  font-weight: 500;
}
.channel-count {
  color: var(--warm-white);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
}
.channel-time {
  color: rgba(250,248,245,0.65);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
[dir="rtl"] .channel-time { font-size: 13px; }
.report-footnote {
  margin-top: 18px;
  font-size: 11px;
  color: var(--navy-80);
  text-align: center;
  line-height: 1.5;
  font-style: italic;
}
[dir="rtl"] .report-footnote { font-size: 13px; font-style: normal; line-height: 1.7; }

/* ---------- v7 · DIFFERENCE three-column layout (was 2x2 with empty slot) ---------- */
.pillars-v7 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 1080px;
  margin: 0 auto;
}
@media (min-width: 880px) {
  .pillars-v7 { grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
}

/* ---------- v7 · "WHAT IF AI GETS IT WRONG" objection section ---------- */
.reassurance {
  background: var(--warm-white);
  padding: var(--section-y-tight) 0;
}
.reassurance-inner {
  max-width: 880px;
  margin: 0 auto;
  background: var(--sand-50);
  border-radius: var(--radius-lg);
  padding: clamp(32px, 4vw, 48px) clamp(28px, 4vw, 56px);
  position: relative;
  overflow: hidden;
}
.reassurance-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='240' fill='none'%3E%3Cpath d='M 40 200 A 180 180 0 0 1 340 60' stroke='%232A9D8F' stroke-width='1' stroke-linecap='round' opacity='0.08'/%3E%3C/svg%3E");
  background-position: right -40px top -20px;
  background-repeat: no-repeat;
  pointer-events: none;
}
[dir="rtl"] .reassurance-inner::before { background-position: left -40px top -20px; transform: scaleX(-1); }
.reassurance-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 720px) {
  .reassurance-grid { grid-template-columns: 1fr 1.4fr; gap: 48px; align-items: start; }
}
.reassurance-head .eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 14px;
  display: inline-block;
}
[dir="rtl"] .reassurance-head .eyebrow { letter-spacing: 0; text-transform: none; font-size: 13px; }
.reassurance-head h2 {
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.2;
  margin-bottom: 14px;
  color: var(--navy);
}
.reassurance-head p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--navy-80);
}
[dir="rtl"] .reassurance-head p { font-size: 16px; line-height: 1.85; }
.reassurance-points {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.reassurance-point {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  align-items: start;
}
.reassurance-point-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--warm-white);
  border: 1.5px solid var(--teal);
  color: var(--teal-120);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.reassurance-point h4 {
  font-size: 15px;
  color: var(--navy);
  margin-bottom: 4px;
  font-weight: 600;
}
[dir="rtl"] .reassurance-point h4 { font-size: 16px; }
.reassurance-point p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--navy-80);
  margin: 0;
}
[dir="rtl"] .reassurance-point p { font-size: 15px; line-height: 1.8; }

/* ============ CONTACT FORM (v8.8) ============ */
.final-cta .eyebrow { color: var(--teal-40); }
.contact-card {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin: 36px auto 0;
  background: var(--warm-white);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 40px);
  box-shadow: var(--shadow-lg);
  text-align: left;
}
[dir="rtl"] .contact-card { text-align: right; }
.contact-form { display: flex; flex-direction: column; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 520px) { .form-row { grid-template-columns: 1fr; } }
.form-field { display: flex; flex-direction: column; gap: 7px; }
.form-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: 0.01em;
}
[dir="rtl"] .form-label { font-size: 14px; letter-spacing: 0; }
.form-label .req { color: var(--amber); margin-left: 3px; font-weight: 700; }
[dir="rtl"] .form-label .req { margin-left: 0; margin-right: 3px; }
.form-input, .form-textarea {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  color: var(--charcoal);
  background: var(--sand-50);
  border: 1px solid var(--navy-15);
  border-radius: var(--radius);
  padding: 12px 14px;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
[dir="rtl"] .form-input, [dir="rtl"] .form-textarea { font-family: var(--font-ar); }
.form-textarea { resize: vertical; min-height: 116px; line-height: 1.65; }
.form-input::placeholder, .form-textarea::placeholder { color: var(--warm-gray); }
.form-input:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--teal);
  background: #fff;
  box-shadow: 0 0 0 3px var(--teal-15);
}
.contact-submit { margin-top: 4px; width: 100%; justify-content: center; }
.contact-submit[disabled] { opacity: 0.6; cursor: progress; transform: none; }
.form-status {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  border-radius: var(--radius);
  padding: 12px 14px;
}
.form-status.sending { background: var(--sand); color: var(--navy-80); }
.form-status.success { background: var(--teal-15); color: var(--teal-120); }
.form-status.error   { background: var(--amber-20); color: var(--amber-120); }
.form-consent {
  font-size: 12px;
  line-height: 1.55;
  color: var(--navy-40);
}
[dir="rtl"] .form-consent { font-size: 12.5px; }
/* Honeypot — visually removed, kept for bots */
.hp-field { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }

/* ── Report card: bar heights (Phase H · inline-style → class) ── */
.bar-h38 { height: 38%; }
.bar-h52 { height: 52%; }
.bar-h68 { height: 68%; }
.bar-h74 { height: 74%; }
.bar-h90 { height: 90%; }

/* ── Report card: channel dot colours ── */
.dot-teal  { background: var(--teal);  }
.dot-amber { background: var(--amber); }
.dot-navy  { background: var(--navy);  }

/* ── Stat unit superscript (e.g. "/5" in CSAT) ── */
.stat-unit {
  font-size: 0.5em;
  font-weight: 500;
  color: var(--navy-80);
}