/* =========================================================================
   Noto Sans Arabic — self-hosted variable font

   One variable file per script covers the whole 100–900 axis, so every weight
   the site uses (including the 81 `font-black` headings) is a real drawn
   weight rather than a browser-synthesised fake bold.

   Served locally: no Google Fonts round trip, and no @import stalling the
   stylesheet. The two subsets are split by unicode-range so a page of Arabic
   never downloads the Latin file until a Latin glyph actually appears — which
   it does here, in terms like "WhatsApp Cloud API".
   ========================================================================= */

@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/NotoSansArabic-var-arabic.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;
}

/* The language switcher's Latin glyph uses the English brand typeface. */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/Poppins-800-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/NotoSansArabic-var-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;
}

:root {
  --neon-yellow: #D4FB0A;
  --neon-yellow-bright: #D6FF00;
  --neon-yellow-hover: #C2EB00;
  --neon-glow: 0 0 35px rgba(212, 251, 10, 0.35);
  
  --dark-bg: #090B0E;
  --dark-surface: #0E121A;
  --dark-surface-2: #121722;
  --dark-border: rgba(255, 255, 255, 0.08);
  
  --font-ping: 'Noto Sans Arabic', system-ui, -apple-system, sans-serif;
}

* {
  box-sizing: border-box;
}

/* Arabic font + micro-transitions apply to the RTL document only.
   The LTR auth page inherits its own font stack from <body>. */
html[dir="rtl"] * {
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  font-family: var(--font-ping);
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.2s ease, box-shadow 0.25s ease;
}

html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

html[dir="rtl"] {
  direction: rtl;
  font-family: var(--font-ping);
}

html[dir="ltr"] {
  direction: ltr;
}

body {
  background-color: #090B0E;
  color: #0F172A;
  overflow-x: hidden;
  font-family: var(--font-ping);
}

/* Keep selected text clearly visible over the brand's lime sections. */
body:not(.dark-mode) .theme-yellow-section::selection,
body:not(.dark-mode) .theme-yellow-section *::selection {
  background-color: #090B0E;
  color: #D4FB0A;
}

body:not(.dark-mode) .theme-yellow-section::-moz-selection,
body:not(.dark-mode) .theme-yellow-section *::-moz-selection {
  background-color: #090B0E;
  color: #D4FB0A;
}

h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: var(--font-ping);
}

.language-glyph {
  display: inline-block;
  font-weight: 800;
  line-height: 1;
}

html[lang='ar'] .language-glyph-en {
  font-family: 'Poppins', system-ui, sans-serif;
}

html[lang='en'] .language-glyph-ar {
  font-family: 'Noto Sans Arabic', system-ui, sans-serif;
}

/* Branded scrollbars */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--neon-yellow) #090b0e;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #090B0E;
}
::-webkit-scrollbar-thumb {
  min-height: 42px;
  border: 2px solid #090b0e;
  border-radius: 999px;
  background: var(--neon-yellow);
}
::-webkit-scrollbar-thumb:hover {
  background: #e3ff4d;
}
::-webkit-scrollbar-corner { background: #090b0e; }

/* Base Pattern Overlays */
.yellow-dot-pattern {
  background-image: none;
}

.dark-dot-pattern {
  background-image: none;
}

.light-dot-pattern {
  background-image: none;
}

/* Glow Utilities */
.glow-yellow {
  box-shadow: 0 0 40px -10px rgba(214, 255, 0, 0.35);
}

.glow-yellow-sm {
  box-shadow: 0 0 20px -5px rgba(214, 255, 0, 0.3);
}

.glow-yellow-lg {
  box-shadow: 0 0 60px -10px rgba(214, 255, 0, 0.45);
}

/* Glass & Card styles */
.glass-card-dark {
  background: rgba(18, 23, 34, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.card-light-clean {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.04);
}

.card-light-clean:hover {
  transform: translateY(-4px);
  border-color: #CBD5E1;
  box-shadow: 0 12px 30px -4px rgba(0, 0, 0, 0.08);
}

.card-dark-hover:hover {
  transform: translateY(-4px);
  border-color: rgba(214, 255, 0, 0.5) !important;
  box-shadow: 0 12px 30px -4px rgba(214, 255, 0, 0.15);
}

/* KPI Stat Cards */
.kpi-card {
  background: #0E121A;
  border: 1px solid rgba(214, 255, 0, 0.25);
  border-radius: 1.5rem;
  padding: 1.75rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.kpi-card:hover {
  border-color: #D4FB0A;
  box-shadow: 0 0 30px rgba(212, 251, 10, 0.2);
  transform: translateY(-3px);
}

/* Audio Player Waveform Simulation */
.waveform-bar {
  width: 4px;
  background-color: #D4FB0A;
  border-radius: 9999px;
  animation: waveMotion 1.2s ease-in-out infinite alternate;
}

@keyframes waveMotion {
  0% { height: 6px; }
  100% { height: 28px; }
}

/* Buttons */
.btn-neon-pill {
  background-color: #D4FB0A;
  color: #000000;
  font-weight: 700;
}

.btn-neon-pill:hover {
  background-color: #E2FF38;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(212, 251, 10, 0.5);
}

.btn-dark-pill {
  background-color: #000000;
  color: #FFFFFF;
  font-weight: 700;
}

.btn-dark-pill:hover {
  background-color: #1A202C;
  color: #D4FB0A;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
}

body.dark-mode .btn-dark-pill {
  background-color: #D4FB0A !important;
  color: #090B0E !important;
  border-color: #D4FB0A !important;
  box-shadow: 0 10px 28px -8px rgba(212, 251, 10, 0.42);
}

body.dark-mode .btn-dark-pill:hover {
  background-color: #E3FF4D !important;
  color: #090B0E !important;
  box-shadow: 0 12px 30px -8px rgba(212, 251, 10, 0.58);
}

body.dark-mode .btn-dark-pill svg,
body.dark-mode .btn-dark-pill i {
  color: #090B0E !important;
}

/* Badge Pill */
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.9rem;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 700;
}

/* Theme Switcher Button */
.theme-switch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background-color: #000000;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #D4FB0A;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  outline: none;
}

.theme-switch-btn:hover {
  transform: scale(1.08);
  border-color: #D4FB0A;
  box-shadow: 0 0 15px rgba(212, 251, 10, 0.5);
}

/* Channel Tabs in Workspace Simulator */
.channel-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  transition: all 0.2s ease;
  background: transparent;
  color: #94A3B8 !important;
  border: none;
  cursor: pointer;
}

.channel-tab i,
.channel-tab svg {
  color: inherit !important;
  stroke: currentColor !important;
}

.channel-tab:hover {
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, 0.08);
}

.channel-tab.active {
  background-color: #D4FB0A !important;
  color: #000000 !important;
  box-shadow: 0 2px 8px rgba(212, 251, 10, 0.3);
}

.channel-tab.active span,
.channel-tab.active i,
.channel-tab.active svg {
  color: #000000 !important;
  stroke: #000000 !important;
  font-weight: 800 !important;
}

/* Chatbot Flow Visualizer Node Styles */
.flow-node {
  background: #121722;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  padding: 1rem;
  position: relative;
  transition: all 0.3s ease;
}

.flow-node:hover {
  border-color: #D4FB0A;
  box-shadow: 0 10px 25px -5px rgba(212, 251, 10, 0.2);
  transform: translateY(-2px);
}

.flow-node-active {
  border-color: #D4FB0A !important;
  box-shadow: 0 0 20px rgba(212, 251, 10, 0.25);
}

.flow-line {
  height: 2px;
  background: linear-gradient(90deg, #D4FB0A, rgba(212, 251, 10, 0.2));
}

/* Comparison Table Styling */
.comparison-table th,
.comparison-table td {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

body.dark-mode .comparison-table th,
body.dark-mode .comparison-table td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Pricing Category Switcher Tabs */
.pricing-cat-tab {
  padding: 0.75rem 1.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #64748B;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
  cursor: pointer;
}

.pricing-cat-tab:hover {
  color: #000000;
}

.pricing-cat-tab.active {
  color: #4F46E5 !important;
  border-bottom-color: #4F46E5 !important;
}

body.dark-mode .pricing-cat-tab {
  color: #94A3B8;
}

body.dark-mode .pricing-cat-tab:hover {
  color: #FFFFFF;
}

body.dark-mode .pricing-cat-tab.active {
  color: #D4FB0A !important;
  border-bottom-color: #D4FB0A !important;
}

/* Modern Pricing 3-Card Layout */
.pricing-card-clean {
  background: #FFFFFF;
  border-radius: 2rem;
  padding: 1.75rem;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05);
  border: 1px solid #E2E8F0;
  transition: all 0.3s ease;
}

.pricing-card-clean:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
}

.pricing-card-featured {
  background: #090B0E;
  color: #FFFFFF;
  border-radius: 2rem;
  padding: 1.75rem;
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.4);
  border: 2px solid #000000;
  transition: all 0.3s ease;
}

.pricing-card-featured:hover {
  transform: translateY(-6px);
  box-shadow: 0 25px 60px -10px rgba(212, 251, 10, 0.25);
}

.pricing-card-inner-box {
  background: #F1F5F9;
  border-radius: 1.25rem;
  padding: 1.5rem;
}

body.dark-mode .pricing-card-clean {
  background: #121722;
  border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .pricing-card-inner-box {
  background: #090B0E;
}

/* =========================================================================
   LIGHT MODE RULES (DEFAULT)
   ========================================================================= */
body:not(.dark-mode) .theme-yellow-section {
  background-color: #D4FB0A !important;
  color: #000000 !important;
}
body:not(.dark-mode) .theme-yellow-section .theme-title {
  color: #000000 !important;
}
body:not(.dark-mode) .theme-yellow-section .theme-desc {
  color: #0F172A !important;
}
body:not(.dark-mode) .theme-yellow-section .theme-badge {
  background-color: #000000 !important;
  color: #D4FB0A !important;
  border-color: #000000 !important;
}
body:not(.dark-mode) .theme-yellow-section .theme-guarantee {
  color: #000000 !important;
}
body:not(.dark-mode) .theme-yellow-section .theme-guarantee svg,
body:not(.dark-mode) .theme-yellow-section .theme-guarantee i {
  color: #000000 !important;
}
body:not(.dark-mode) .theme-yellow-section .theme-partner-text {
  color: #000000 !important;
}
body:not(.dark-mode) .theme-yellow-section .theme-partner-logo {
  color: #000000 !important;
}

body:not(.dark-mode) .theme-light-section {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
  border-color: #E2E8F0 !important;
}
body:not(.dark-mode) .theme-light-section .theme-title {
  color: #0F172A !important;
}
body:not(.dark-mode) .theme-light-section .theme-desc {
  color: #475569 !important;
}

body:not(.dark-mode) .theme-soft-section {
  background-color: #F8FAFC !important;
  color: #0F172A !important;
  border-color: #E2E8F0 !important;
}
body:not(.dark-mode) .theme-soft-section .theme-title {
  color: #0F172A !important;
}
body:not(.dark-mode) .theme-soft-section .theme-desc {
  color: #475569 !important;
}

body:not(.dark-mode) .theme-dark-section {
  background-color: #090B0E !important;
  color: #FFFFFF !important;
}

/* Light Mode Pricing Switcher */
body:not(.dark-mode) .theme-pricing-switch {
  background-color: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
}
body:not(.dark-mode) .pricing-btn-active {
  background-color: #D4FB0A !important;
  color: #000000 !important;
  box-shadow: 0 4px 12px rgba(212, 251, 10, 0.4) !important;
}
body:not(.dark-mode) .pricing-btn-inactive {
  background-color: transparent !important;
  color: #64748B !important;
}
body:not(.dark-mode) .pricing-btn-inactive:hover {
  color: #000000 !important;
}
body:not(.dark-mode) .pricing-btn-active .badge-discount {
  background-color: #000000 !important;
  color: #D4FB0A !important;
}
body:not(.dark-mode) .pricing-btn-inactive .badge-discount {
  background-color: #E2E8F0 !important;
  color: #475569 !important;
}


/* =========================================================================
   DARK MODE RULES (.dark-mode) - FULL LUXURY GRADIENT & NEON ACCENTS
   ========================================================================= */
body.dark-mode {
  background-color: #06080A !important;
  color: #F1F5F9 !important;
}

/* Hero Section in Dark Mode */
body.dark-mode .hero-section-wrapper {
  background: #090B0E !important;
  color: #FFFFFF !important;
  border-bottom-color: transparent !important;
}

/* Workflow Section in Dark Mode */
body.dark-mode #workflow {
  background: #090B0E !important;
  color: #FFFFFF !important;
  border-bottom-color: transparent !important;
}

/* Chatbot Service Section in Dark Mode */
body.dark-mode #chatbot-service {
  background: #090B0E !important;
  color: #FFFFFF !important;
  border-bottom-color: transparent !important;
}

/* Always Present Section in Dark Mode */
body.dark-mode #always-present {
  background: #090B0E !important;
  color: #FFFFFF !important;
  border-bottom-color: transparent !important;
}

/* Connected Ecosystem Section in Dark Mode */
body.dark-mode .theme-ecosystem-section {
  background: #090B0E !important;
  color: #FFFFFF !important;
  border-bottom-color: transparent !important;
}

/* Bottom Lead Capture Form Section in Dark Mode */
body.dark-mode #lead-form {
  background: #090B0E !important;
  color: #FFFFFF !important;
}

/* Generic Yellow Sections in Dark Mode */
body.dark-mode .theme-yellow-section {
  background: #090B0E !important;
  color: #FFFFFF !important;
  border-bottom-color: transparent !important;
}

body.dark-mode .theme-dark-section {
  background: #090B0E !important;
  border-bottom-color: transparent !important;
}
body.dark-mode .theme-yellow-section .theme-title,
body.dark-mode .hero-section-wrapper .theme-title,
body.dark-mode #workflow .theme-title,
body.dark-mode #always-present .theme-title,
body.dark-mode .theme-ecosystem-section .theme-title,
body.dark-mode #lead-form .theme-title,
body.dark-mode #chatbot-service .theme-title {
  color: #FFFFFF !important;
}
body.dark-mode .theme-yellow-section .theme-desc,
body.dark-mode .hero-section-wrapper .theme-desc,
body.dark-mode #workflow .theme-desc,
body.dark-mode #always-present .theme-desc,
body.dark-mode .theme-ecosystem-section .theme-desc,
body.dark-mode #lead-form .theme-desc,
body.dark-mode #chatbot-service .theme-desc {
  color: #94A3B8 !important;
}
body.dark-mode .theme-yellow-section .theme-badge,
body.dark-mode .hero-section-wrapper .theme-badge,
body.dark-mode #workflow .theme-badge,
body.dark-mode #always-present .theme-badge,
body.dark-mode .theme-ecosystem-section .theme-badge,
body.dark-mode #lead-form .theme-badge,
body.dark-mode #chatbot-service .theme-badge {
  background-color: rgba(212, 251, 10, 0.12) !important;
  color: #D4FB0A !important;
  border-color: rgba(212, 251, 10, 0.35) !important;
}
body.dark-mode .theme-guarantee {
  color: #CBD5E1 !important;
}
body.dark-mode .theme-guarantee svg,
body.dark-mode .theme-guarantee i {
  color: #D4FB0A !important;
}
body.dark-mode .theme-partner-text {
  color: #94A3B8 !important;
}
body.dark-mode .theme-partner-logo {
  color: #F1F5F9 !important;
  opacity: 0.9 !important;
}

/* Secondary Button in Hero in Dark Mode */
body.dark-mode .theme-hero-secondary-btn {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}
body.dark-mode .theme-hero-secondary-btn:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
  border-color: #D4FB0A !important;
  color: #D4FB0A !important;
}
body.dark-mode .theme-hero-secondary-btn svg,
body.dark-mode .theme-hero-secondary-btn i {
  color: #D4FB0A !important;
}

/* Light & Soft Sections in Dark Mode */
body.dark-mode .theme-light-section {
  background-color: #0E121A !important;
  color: #F8FAFC !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
body.dark-mode .theme-light-section .theme-title {
  color: #FFFFFF !important;
}
body.dark-mode .theme-light-section .theme-desc {
  color: #94A3B8 !important;
}

body.dark-mode .theme-soft-section {
  background-color: #080A0E !important;
  color: #F8FAFC !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
body.dark-mode .theme-soft-section .theme-title {
  color: #FFFFFF !important;
}
body.dark-mode .theme-soft-section .theme-desc {
  color: #94A3B8 !important;
}

/* Light Cards in Dark Mode */
body.dark-mode .card-light-clean {
  background-color: #121722 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #F1F5F9 !important;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.5) !important;
}
body.dark-mode .card-light-clean:hover {
  border-color: rgba(214, 255, 0, 0.5) !important;
  box-shadow: 0 12px 30px -4px rgba(214, 255, 0, 0.18) !important;
}
body.dark-mode .card-light-clean h3,
body.dark-mode .card-light-clean h4,
body.dark-mode .card-light-clean .theme-card-title {
  color: #FFFFFF !important;
}
body.dark-mode .card-light-clean p,
body.dark-mode .card-light-clean .theme-card-desc {
  color: #94A3B8 !important;
}
body.dark-mode .card-light-clean span {
  color: #CBD5E1;
}

/* Problem Solution Pill in Dark Mode */
body.dark-mode .theme-solution-pill {
  background-color: rgba(214, 255, 0, 0.1) !important;
  color: #D4FB0A !important;
  border: 1px solid rgba(214, 255, 0, 0.25) !important;
}

/* Pricing Switcher in Dark Mode */
body.dark-mode .theme-pricing-switch {
  background-color: #121722 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}
body.dark-mode .pricing-btn-active {
  background-color: #D4FB0A !important;
  color: #000000 !important;
  box-shadow: 0 4px 15px rgba(212, 251, 10, 0.4) !important;
}
body.dark-mode .pricing-btn-inactive {
  background-color: transparent !important;
  color: #94A3B8 !important;
}
body.dark-mode .pricing-btn-inactive:hover {
  color: #FFFFFF !important;
}
body.dark-mode .pricing-btn-active .badge-discount {
  background-color: #000000 !important;
  color: #D4FB0A !important;
}
body.dark-mode .pricing-btn-inactive .badge-discount {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #94A3B8 !important;
}

body.dark-mode .theme-pricing-pro-card {
  box-shadow: 0 0 50px -10px rgba(214, 255, 0, 0.4) !important;
  border-color: #D4FB0A !important;
}

body.dark-mode .theme-switch-btn {
  background-color: #121722 !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: #D4FB0A !important;
}

/* ==========================================
   WhatsApp Official section (#whatsapp)
   ========================================== */

/* --- copy column --- */

.wa-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  color: #047857;
  font-size: 0.75rem;
  font-weight: 800;
}

.wa-badge svg { width: 1rem; height: 1rem; flex: none; color: #00A884; }

body.dark-mode .wa-badge {
  background: rgba(0, 168, 132, 0.12);
  border-color: rgba(37, 211, 102, 0.35);
  color: #6EE7B7;
}

.wa-title {
  margin-bottom: 1.25rem;
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  line-height: 1.3;
}

.wa-accent { color: #00A884; }
body.dark-mode .wa-accent { color: #25D366; }

.wa-lead {
  max-width: 36rem;
  margin-bottom: 2rem;
  font-size: 0.875rem;
  line-height: 2;
  color: #475569;
}

body.dark-mode .wa-lead { color: #CBD5E1; }

/* --- the three benefit rows --- */

.wa-points { margin-bottom: 2rem; }

.wa-point {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-block: 1rem;
}

/* hairline between rows only, so the list does not look boxed in */
.wa-point + .wa-point { border-top: 1px solid rgba(15, 23, 42, 0.08); }
body.dark-mode .wa-point + .wa-point { border-top-color: rgba(255, 255, 255, 0.08); }

.wa-point-icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex: none;
  border-radius: 999px;
  background: #ECFDF5;
  color: #00A884;
}

body.dark-mode .wa-point-icon { background: rgba(0, 168, 132, 0.14); color: #25D366; }

.wa-point-icon svg { width: 1.35rem; height: 1.35rem; }

.wa-point-body { flex: 1; min-width: 0; }

.wa-point-title {
  display: block;
  font-size: 0.9375rem;
  font-weight: 900;
  line-height: 1.6;
  color: #0F172A;
}

body.dark-mode .wa-point-title { color: #FFFFFF; }

.wa-point-desc {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  line-height: 1.8;
  color: #64748B;
}

body.dark-mode .wa-point-desc { color: #94A3B8; }

.wa-point-check {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  border-radius: 999px;
  background: #16A34A;
  color: #FFFFFF;
  box-shadow: 0 6px 14px -6px rgba(22, 163, 74, 0.9);
}

.wa-point-check svg { width: 1rem; height: 1rem; stroke-width: 3; }

/* --- call to action --- */

.wa-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  padding: 1.15rem 1.5rem;
  border-radius: 999px;
  background: #06090E;
  color: #FFFFFF;
  font-size: 1rem;
  font-weight: 900;
  box-shadow: 0 20px 40px -22px rgba(0, 0, 0, 0.9);
  transition: transform 0.25s ease, background-color 0.25s ease;
}

.wa-cta:hover { background: #111827; transform: translateY(-2px); }
.wa-cta svg { width: 1.1rem; height: 1.1rem; flex: none; color: #25D366; }
.wa-cta-accent { color: #25D366; }

body.dark-mode .wa-cta { background: #0E121A; border: 1px solid rgba(255, 255, 255, 0.12); }

.wa-cta-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 0.9rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #64748B;
}

.wa-cta-note svg { width: 0.85rem; height: 0.85rem; }
body.dark-mode .wa-cta-note { color: #94A3B8; }

/* --- the device --- */

.wa-stage { position: relative; perspective: 1400px; padding-block: 1rem 2rem; }

.wa-window {
  position: relative;
  z-index: 10;
  display: flex;
  /* rail first in the DOM for tab order; row-reverse lands it on the left edge
     in RTL, which is where the design puts it */
  flex-direction: row-reverse;
  overflow: hidden;
  border-radius: 1.5rem;
  background: #0B1119;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 40px 80px -40px rgba(2, 8, 20, 0.75), 0 0 0 1px rgba(0, 168, 132, 0.12);
  transform: rotateY(-2deg) rotateX(1.5deg);
  transform-style: preserve-3d;
  transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1);
}

.wa-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  flex: none;
  width: 3.5rem;
  padding: 0.9rem 0;
  background: #070C12;
  border-inline-end: 1px solid rgba(255, 255, 255, 0.06);
}

.wa-rail-logo {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  margin-bottom: 0.4rem;
  border-radius: 0.7rem;
  background: rgba(37, 211, 102, 0.14);
  color: #25D366;
}

.wa-rail-logo svg { width: 1.15rem; height: 1.15rem; }

.wa-nav-btn {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.7rem;
  color: #64748B;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.wa-nav-btn svg { width: 1.1rem; height: 1.1rem; }
.wa-nav-btn:hover { background-color: rgba(30, 41, 59, 0.9); color: #25D366; }
.wa-nav-btn.active { background-color: rgba(0, 168, 132, 0.22); color: #25D366; }

.wa-screen { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 0.9rem; }

.wa-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.wa-avatar {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  flex: none;
  border-radius: 0.85rem;
  background: #FFFFFF;
  color: #0F172A;
}

.wa-avatar svg { width: 1.15rem; height: 1.15rem; }

.wa-head-id { flex: 1; min-width: 0; }

.wa-head-name {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8125rem;
  font-weight: 800;
  color: #FFFFFF;
}

.wa-head-name svg { width: 0.85rem; height: 0.85rem; color: #25D366; }

.wa-head-sub { display: block; margin-top: 0.1rem; font-size: 0.625rem; color: #94A3B8; }

.wa-head-menu { width: 1rem; height: 1rem; flex: none; color: #64748B; }

/* min-height so switching rail tabs does not resize the whole window and
   shove the section below it up and down */
.wa-body {
  flex: 1;
  min-height: 20rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 0.9rem;
}

.wa-screen-view { display: flex; flex-direction: column; gap: 0.5rem; }
.wa-screen-view.hidden { display: none; }

.wa-msgs { display: flex; flex-direction: column; gap: 0.5rem; }

/* --- chat bubbles (they double as the demo's buttons) --- */

.wa-bubble {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 100%;
  padding: 0.75rem 0.85rem;
  border-radius: 0.9rem;
  text-align: start;
  cursor: pointer;
}

.wa-bubble--track { background: #0A2019; border: 1px solid rgba(0, 168, 132, 0.55); }
.wa-bubble--support { background: #111827; border: 1px solid rgba(255, 255, 255, 0.08); }

.wa-bubble-head {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 800;
  color: #6EE7B7;
}

.wa-bubble--support .wa-bubble-head { color: #E2E8F0; }
.wa-bubble-head svg { width: 0.85rem; height: 0.85rem; color: #25D366; flex: none; }

.wa-bubble-sub { font-size: 0.6875rem; color: #94A3B8; }

.wa-kv {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.6875rem;
  color: #CBD5E1;
}

.wa-kv b { font-weight: 700; color: #94A3B8; }
.wa-kv svg { width: 0.75rem; height: 0.75rem; flex: none; color: #25D366; }

.wa-bubble-cta {
  margin-top: 0.35rem;
  padding: 0.45rem;
  border-radius: 0.55rem;
  background: rgba(0, 168, 132, 0.18);
  border: 1px solid rgba(0, 168, 132, 0.45);
  font-size: 0.6875rem;
  font-weight: 800;
  color: #6EE7B7;
  text-align: center;
}

.wa-time {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.2rem;
  font-size: 0.5625rem;
  color: #64748B;
}

.wa-time svg { width: 0.7rem; height: 0.7rem; color: #38BDF8; }

.wa-interactive-btn { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.wa-interactive-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(0, 168, 132, 0.9); }
.wa-interactive-btn:active { transform: translateY(0); }

/* --- the other three rail views --- */

.wa-view-title {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.6875rem;
  font-weight: 800;
  color: #34D399;
}

.wa-view-title svg { width: 0.85rem; height: 0.85rem; }

.wa-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.6rem;
  border-radius: 0.7rem;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.wa-chip {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 800;
  color: #FFFFFF;
}

.wa-chip--a { background: #059669; }
.wa-chip--b { background: #2563EB; }
.wa-chip--c { background: #7C3AED; }

.wa-row-name { flex: 1; min-width: 0; font-size: 0.6875rem; font-weight: 700; color: #FFFFFF; }
.wa-row-meta { font-size: 0.5625rem; color: #94A3B8; }
.wa-row-meta--live { color: #34D399; font-weight: 700; }

.wa-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }

.wa-stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem;
  border-radius: 0.7rem;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.06);
  text-align: center;
  font-size: 0.5625rem;
  color: #94A3B8;
}

.wa-stat b { font-size: 0.9375rem; font-weight: 900; color: #34D399; }

.wa-ok {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 1rem;
  border-radius: 0.9rem;
  background: rgba(0, 168, 132, 0.1);
  border: 1px solid rgba(0, 168, 132, 0.4);
  text-align: center;
}

.wa-ok svg { width: 1.5rem; height: 1.5rem; color: #34D399; }
.wa-ok b { font-size: 0.75rem; font-weight: 800; color: #FFFFFF; }
.wa-ok > span { font-size: 0.5625rem; color: rgba(52, 211, 153, 0.85); }

/* --- composer + footer --- */

.wa-composer {
  display: flex;
  /* the mock-up puts the send key on the right and the emoji/clip pair on the
     left, which is the mirror of what RTL flow gives by itself */
  flex-direction: row-reverse;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.55rem;
  border-radius: 999px;
  background: #111827;
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.wa-composer > svg { width: 1rem; height: 1rem; flex: none; color: #64748B; }
.wa-composer-input { flex: 1; min-width: 0; font-size: 0.6875rem; color: #64748B; }

.wa-send {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  flex: none;
  border-radius: 999px;
  background: #00A884;
  color: #FFFFFF;
}

.wa-send svg { width: 0.9rem; height: 0.9rem; }

.wa-screen-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 0.5625rem;
  color: #94A3B8;
}

.wa-screen-foot > span { display: flex; align-items: center; gap: 0.3rem; }
.wa-screen-foot svg { width: 0.7rem; height: 0.7rem; color: #25D366; }
.wa-reset { font-size: 0.5625rem; font-weight: 800; color: #34D399; cursor: pointer; }
.wa-reset:hover { text-decoration: underline; }

/* --- the floating "why" card --- */

.wa-why {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1rem;
  padding: 0.9rem;
  border-radius: 1.1rem;
  background: #0B1119;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 26px 50px -30px rgba(2, 8, 20, 0.9);
}

/* on wide screens it overlaps the window's left edge, the way the design has it */
@media (min-width: 1024px) {
  /* narrower than its column so the floating card has room beside it;
     margin-inline-start is the RIGHT margin in RTL, so auto pushes it left */
  .wa-window { max-width: 24rem; margin-inline-start: auto; }

  .wa-why {
    position: absolute;
    z-index: 20;
    top: 27%;
    right: 0;
    width: 13rem;
    margin-top: 0;
  }

  .whatsapp-3d-badge { left: -1.25rem; }
}

.wa-why-title { font-size: 0.75rem; font-weight: 800; color: #FFFFFF; }

.wa-why-row { display: flex; flex-direction: row-reverse; align-items: center; gap: 0.55rem; }

.wa-why-row > span:last-child { flex: 1; min-width: 0; }
.wa-why-row b { display: block; font-size: 0.6875rem; font-weight: 800; color: #E2E8F0; }
.wa-why-row b + span { display: block; margin-top: 0.1rem; font-size: 0.5625rem; color: #94A3B8; }

.wa-why-icon {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  flex: none;
  border-radius: 0.6rem;
  background: rgba(0, 168, 132, 0.16);
  color: #25D366;
}

.wa-why-icon svg { width: 0.95rem; height: 0.95rem; }

/* --- floating WhatsApp tile --- */

.whatsapp-3d-badge {
  position: absolute;
  bottom: 3.5rem;
  /* physical side on purpose: this is a fixed composition, not text flow, so it
     must not mirror with the direction */
  left: 0.5rem;
  z-index: 25;
  filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.35)) drop-shadow(0 0 18px rgba(37, 211, 102, 0.35));
  animation: floatWhatsApp 4s ease-in-out infinite;
}

.wa-badge-tile {
  display: grid;
  place-items: center;
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 1.35rem;
  background: linear-gradient(160deg, #25D366 0%, #128C7E 100%);
  border: 3px solid rgba(255, 255, 255, 0.75);
  color: #FFFFFF;
}

.wa-badge-tile svg { width: 2.1rem; height: 2.1rem; }

@keyframes floatWhatsApp {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-7px) rotate(1deg); }
}

/* --- trust strip under the device --- */

.wa-host {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 1.25rem;
  padding: 0.5rem 1rem;
  width: fit-content;
  margin-inline: auto;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 10px 24px -18px rgba(0, 0, 0, 0.5);
  font-size: 0.6875rem;
  font-weight: 700;
  color: #475569;
}

.wa-host svg { width: 0.8rem; height: 0.8rem; color: #0F172A; }

body.dark-mode .wa-host { background: #0E121A; border-color: rgba(255, 255, 255, 0.1); color: #CBD5E1; }
body.dark-mode .wa-host svg { color: #25D366; }

.wa-trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 0.85rem;
  padding: 0.85rem 0.5rem;
  border-radius: 1.1rem;
  background: #FFFFFF;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 14px 30px -24px rgba(0, 0, 0, 0.55);
}

body.dark-mode .wa-trust { background: #0E121A; border-color: rgba(255, 255, 255, 0.1); }

.wa-trust li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding-inline: 0.5rem;
  font-size: 0.75rem;
  font-weight: 800;
  color: #0F172A;
  text-align: center;
}

body.dark-mode .wa-trust li { color: #E2E8F0; }

.wa-trust li + li { border-inline-start: 1px solid rgba(15, 23, 42, 0.1); }
body.dark-mode .wa-trust li + li { border-inline-start-color: rgba(255, 255, 255, 0.1); }

.wa-trust svg { width: 0.95rem; height: 0.95rem; flex: none; color: #00A884; }

@media (max-width: 480px) {
  .wa-trust { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
  .wa-trust li + li { border-inline-start: 0; border-top: 1px solid rgba(15, 23, 42, 0.1); padding-top: 0.6rem; }
  body.dark-mode .wa-trust li + li { border-top-color: rgba(255, 255, 255, 0.1); }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-3d-badge { animation: none; }
  .wa-window { transition: none; }
}

/* ==========================================
   Cosmic Auth Page Styles (media_1787244084743.jpg)
   ========================================== */
.auth-cosmic-canvas {
  background-color: #06090e;
  background-image: 
    radial-gradient(circle at 10% 85%, rgba(212, 251, 10, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 90% 15%, rgba(132, 204, 22, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(15, 23, 42, 0.6) 0%, transparent 70%);
  position: relative;
  overflow-x: hidden;
}

.auth-cosmic-canvas::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 36px 36px;
  pointer-events: none;
  opacity: 0.6;
}

/* Clipping layer: keeps the oversized decorative rings from widening the page
   (they used to push the document 240px past the viewport on mobile). */
.auth-ring-layer {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.auth-cosmic-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(212, 251, 10, 0.15);
  pointer-events: none;
}

.auth-card-wrapper {
  background: linear-gradient(160deg, #0d121c 0%, #080c14 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 32px;
  box-shadow: 
    0 25px 80px -20px rgba(0, 0, 0, 0.9),
    0 0 50px -15px rgba(212, 251, 10, 0.08);
  position: relative;
}

/* Custom Auth Inputs */
.auth-input-field {
  background-color: #0b0f17;
  border: 1px solid #1e293b;
  color: #ffffff;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13px;
  transition: all 0.2s ease;
  width: 100%;
}

.auth-input-field:focus {
  outline: none;
  border-color: #D4FB0A;
  box-shadow: 0 0 0 1px #D4FB0A, 0 0 15px rgba(212, 251, 10, 0.15);
  background-color: #0d131e;
}

.auth-input-field::placeholder {
  color: #475569;
}

/* Password Requirements Box */
.auth-req-box {
  background: #091213;
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 14px;
  padding: 14px;
}

.auth-req-circle {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-inline-end: 6px;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.auth-req-circle.valid {
  border-color: #D4FB0A;
  background-color: #D4FB0A;
  color: #000000;
  box-shadow: 0 0 8px rgba(212, 251, 10, 0.4);
}

.auth-req-circle.valid::after {
  content: '✓';
  font-size: 9px;
  font-weight: 900;
}

/* ==========================================
   Logo Sizing & Switcher for Dark/Light Mode
   ========================================== */
.brand-header-logo {
  height: 3rem;
  width: auto;
  max-width: 260px;
  object-fit: contain;
  transition: all 0.3s ease;
}

@media (min-width: 640px) {
  .brand-header-logo,
  .sm\:h-12 {
    height: 4.3rem !important;
  }
}

/* Dark Mode: Yellow Logo visible, Black Logo hidden */
html.dark .crm-logo-dark-mode,
body.dark-mode .crm-logo-dark-mode,
html.dark .logo-dark-variant,
body.dark-mode .logo-dark-variant {
  display: block !important;
}

html.dark .crm-logo-light-mode,
body.dark-mode .crm-logo-light-mode,
html.dark .logo-light-variant,
body.dark-mode .logo-light-variant {
  display: none !important;
}

/* Light Mode: Black Logo visible, Yellow Logo hidden */
html:not(.dark) body:not(.dark-mode) .crm-logo-dark-mode,
html:not(.dark) body:not(.dark-mode) .logo-dark-variant {
  display: none !important;
}

html:not(.dark) body:not(.dark-mode) .crm-logo-light-mode,
html:not(.dark) body:not(.dark-mode) .logo-light-variant {
  display: block !important;
}

/* Permanently dark sections keep the yellow logo in BOTH themes.

   The swap above follows the page theme, but the footer paints its own
   near-black background (#050709) whatever the theme is. In light mode that
   put the black logo on a black background, so the footer mark was invisible.
   These selectors carry more specificity than the theme rules above, so the
   dark-section logo wins inside them. */
html:not(.dark) body:not(.dark-mode) footer .crm-logo-dark-mode,
html:not(.dark) body:not(.dark-mode) .theme-dark-section .crm-logo-dark-mode,
html:not(.dark) body:not(.dark-mode) footer .logo-dark-variant,
html:not(.dark) body:not(.dark-mode) .theme-dark-section .logo-dark-variant {
  display: block !important;
}

html:not(.dark) body:not(.dark-mode) footer .crm-logo-light-mode,
html:not(.dark) body:not(.dark-mode) .theme-dark-section .crm-logo-light-mode,
html:not(.dark) body:not(.dark-mode) footer .logo-light-variant,
html:not(.dark) body:not(.dark-mode) .theme-dark-section .logo-light-variant {
  display: none !important;
}

.site-footer { font-family: var(--font-ping); }
/* ==========================================
   Footer Logo, Social Icons & Badges Alignment (200px Match)
   ========================================== */
.site-footer-logo {
  display: block !important;
  width: 130px !important;
  max-width: 130px !important;
  max-height: 42px !important;
  height: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
}

.footer-social-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: fit-content !important;
  max-width: none !important;
}

.footer-social-row a {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  flex-shrink: 0 !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.footer-badges-wrap {
  display: block !important;
  width: 250px !important;
  max-width: 250px !important;
  margin-top: 1rem !important;
}

.footer-badges-wrap .badges-row {
  display: flex !important;
  gap: 8px !important;
  width: 100% !important;
}

.footer-badges-wrap .badges-row a,
.footer-badges-wrap .badges-row .store-badge {
  display: block !important;
  flex: 1 !important;
  width: calc(50% - 4px) !important;
}

.footer-badges-wrap img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: 48px !important;
  object-fit: contain !important;
  border-radius: 6px !important;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.footer-badges-wrap .meta-badge img {
  max-height: 48px !important;
  margin-top: 8px !important;
}

.store-badge img {
  max-height: 48px !important;
}

#mobileMenuDrawer img[alt="CRM+ Business Client Center"] { width: 165px !important; height: auto !important; max-width: none; flex-shrink: 0; object-fit: contain; }


/* ==========================================
   Light Mode Overrides for Auth Page
   ========================================== */
html:not(.dark) body.auth-cosmic-canvas,
body:not(.dark-mode).auth-cosmic-canvas {
  background-color: #f8fafc !important;
  background-image: 
    radial-gradient(circle at 10% 85%, rgba(212, 251, 10, 0.2) 0%, transparent 45%),
    radial-gradient(circle at 90% 15%, rgba(132, 204, 22, 0.12) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(241, 245, 249, 0.9) 0%, transparent 70%) !important;
  color: #0f172a !important;
}

html:not(.dark) .auth-cosmic-canvas::before,
body:not(.dark-mode) .auth-cosmic-canvas::before {
  background-image: radial-gradient(rgba(0, 0, 0, 0.07) 1px, transparent 1px);
  opacity: 0.7;
}

html:not(.dark) .auth-cosmic-ring,
body:not(.dark-mode) .auth-cosmic-ring {
  border-color: rgba(132, 204, 22, 0.3);
}

html:not(.dark) .auth-card-wrapper,
body:not(.dark-mode) .auth-card-wrapper {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 
    0 25px 70px -15px rgba(0, 0, 0, 0.08),
    0 0 35px -10px rgba(212, 251, 10, 0.15) !important;
}

html:not(.dark) .auth-card-wrapper h1,
html:not(.dark) .auth-card-wrapper h2,
body:not(.dark-mode) .auth-card-wrapper h1,
body:not(.dark-mode) .auth-card-wrapper h2 {
  color: #0f172a !important;
}

html:not(.dark) .auth-card-wrapper p,
body:not(.dark-mode) .auth-card-wrapper p {
  color: #475569 !important;
}

html:not(.dark) .auth-card-wrapper label,
body:not(.dark-mode) .auth-card-wrapper label {
  color: #1e293b !important;
  font-weight: 700;
}

html:not(.dark) .auth-input-field,
body:not(.dark-mode) .auth-input-field {
  background-color: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  font-weight: 600;
}

html:not(.dark) .auth-input-field:focus,
body:not(.dark-mode) .auth-input-field:focus {
  background-color: #ffffff !important;
  border-color: #84cc16 !important;
  box-shadow: 0 0 0 2px rgba(132, 204, 22, 0.25) !important;
}

html:not(.dark) .auth-input-field::placeholder,
body:not(.dark-mode) .auth-input-field::placeholder {
  color: #94a3b8 !important;
}

html:not(.dark) .auth-req-box,
body:not(.dark-mode) .auth-req-box {
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
}

html:not(.dark) .auth-req-box .text-emerald-400,
body:not(.dark-mode) .auth-req-box .text-emerald-400 {
  color: #15803d !important;
}

html:not(.dark) .auth-req-box .text-slate-400,
body:not(.dark-mode) .auth-req-box .text-slate-400 {
  color: #334155 !important;
  font-weight: 500;
}

html:not(.dark) .auth-req-circle,
body:not(.dark-mode) .auth-req-circle {
  border-color: #94a3b8 !important;
}

html:not(.dark) .auth-req-circle.valid,
body:not(.dark-mode) .auth-req-circle.valid {
  background-color: #84cc16 !important;
  border-color: #84cc16 !important;
  color: #000000 !important;
}

html:not(.dark) #switchToLoginBtn,
html:not(.dark) #switchToSignupBtn,
body:not(.dark-mode) #switchToLoginBtn,
body:not(.dark-mode) #switchToSignupBtn {
  color: #15803d !important;
}

html:not(.dark) #switchToLoginBtn:hover,
html:not(.dark) #switchToSignupBtn:hover,
body:not(.dark-mode) #switchToLoginBtn:hover,
body:not(.dark-mode) #switchToSignupBtn:hover {
  color: #000000 !important;
}

html:not(.dark) .auth-cosmic-canvas footer,
body:not(.dark-mode) .auth-cosmic-canvas footer {
  color: #64748b !important;
}


/* ==========================================
   Scroll-Adaptive Floating Chatbot Widget
   ========================================== */
#floatingChatWidget {
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

#chatbotWidgetBtn {
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.45);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease;
  backdrop-filter: blur(8px);
}

#chatbotWidgetBtn.widget-mode-dark {
  border-color: #000000 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 20px rgba(212, 251, 10, 0.35);
}

#chatbotWidgetBtn.widget-mode-yellow {
  border-color: rgba(212, 251, 10, 0.7) !important;
  box-shadow: 0 10px 35px rgba(212, 251, 10, 0.35), 0 0 25px rgba(0, 0, 0, 0.5);
}

#widgetImgYellow, #widgetImgDark {
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}

/* =========================================================================
   Reduced motion

   This page carries 22 infinite animations (pulsing glows, marquees, floating
   cards). Visitors who ask their OS for reduced motion get the layout without
   the movement — animations stop at their final frame instead of looping, and
   smooth scrolling is turned off so anchor jumps are instant.
   ========================================================================= */
.home-pricing-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

@media (max-width: 900px) {
  .home-pricing-preview-grid { grid-template-columns: 1fr; }
}

/* Three plans on the home preview; stacked and centred below 1024px so the
   third card never sits alone on a second row. */
.home-pricing-preview-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1024px) {
  .home-pricing-preview-grid--3 { grid-template-columns: 1fr; max-width: 36rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* AOS reveals otherwise leave elements stuck at opacity 0. */
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =========================================================================
   Typography polish
   ========================================================================= */

/* Keeps the Arabic h1 from breaking into a lopsided 4-line stack on phones. */
h1, h2 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

/* =========================================================================
   Tap targets

   Footer and nav links are set in small type, which leaves them roughly 16px
   tall — well under the 24px minimum WCAG 2.2 asks for and far under the 44px
   Apple and Google both recommend. Padding the anchor grows the hit area
   without changing the type size or the visual rhythm of the list.
   ========================================================================= */
footer nav a,
footer ul a {
  display: inline-block;
  padding-block: 0.375rem;
}

/* Social icon buttons: nudge from 32px to a comfortable 40px. */
footer .w-8.h-8 {
  width: 2.5rem;
  height: 2.5rem;
}

@media (pointer: coarse) {
  footer a,
  header nav a {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
  }
}

/* =========================================================================
   Animations referenced but never defined

   `animate-fadeIn` is used in index.html and in six places in main.js, and
   `typing-dot` on the hero demo's typing indicator — but neither had a
   definition in any stylesheet, and Tailwind ships no fadeIn utility, so both
   were silently inert under the CDN too. Defining them here keeps them
   independent of the Tailwind build. The reduced-motion block above still
   neutralises them for visitors who ask for less movement.
   ========================================================================= */
@keyframes crmFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.animate-fadeIn {
  animation: crmFadeIn 0.35s ease-out both;
}

@keyframes crmTypingDot {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30%           { opacity: 1;    transform: translateY(-3px); }
}

.typing-dot {
  animation: crmTypingDot 1.2s ease-in-out infinite;
}

.typing-dot:nth-child(2) { animation-delay: 0.15s; }
.typing-dot:nth-child(3) { animation-delay: 0.3s; }

/* Keep the full desktop navigation from crowding or clipping at intermediate
   widths. The original mobile drawer takes over until the header has room. */
@media (min-width: 1024px) and (max-width: 1279px) {
  /* .mm-root is the mega-menu wrapper; the bar now sits one level deeper than
     the old flat <nav>, so it needs naming here too or it survives the cut. */
  #mainHeader > div > nav,
  #mainHeader .mm-root { display: none; }
  #mainHeader #mobileMenuBtn { display: block; }
}

/* =========================================================================
   INTEGRATIONS WEB  (#integrations)

   Two columns of platform pills flanking the CRM+ mark, joined by curves that
   are drawn in JS from the pills' real positions (see initIntegrations in
   main.js) — a hand-authored SVG would drift the moment a pill changed width
   or the viewport resized.
   ========================================================================= */

.int-sparkle {
  display: inline-block;
  vertical-align: 0.35em;
  width: 1.35rem;
  height: 1.35rem;
  margin-inline-end: 0.35rem;
}

.int-web {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(5.5rem, 24vw, 7rem) minmax(0, 1fr);
  gap: clamp(0.3rem, 1.5vw, 0.75rem);
  align-items: center;
}

@media (min-width: 1024px) {
  /* fixed side columns rather than 1fr: the pills keep the reference's
     proportions and everything left over becomes room for the curves */
  .int-web {
    grid-template-columns: 15rem 1fr 15rem;
    gap: clamp(1rem, 3vw, 2.5rem);
  }
}

/* --- the curves --- */

.int-wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
  color: #0B0F0A;
}

body.dark-mode .int-wires { color: rgba(212, 251, 10, 0.55); }

.int-wire {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* A real, observer-triggered draw. Every pair of wires advances toward the
   same circular boundary point with a calm stagger instead of appearing in a
   single composited frame. */
.int-wires.is-drawing .int-wire {
  animation: int-wire-draw 2.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--wire-delay, 0ms);
}

@keyframes int-wire-draw {
  from { stroke-dashoffset: var(--wire-length); }
  to { stroke-dashoffset: 0; }
}

@media (max-width: 639px) {
  .int-wire { stroke-width: 1.6; }
}

.int-dot { fill: currentColor; opacity: 0; transition: opacity 0.35s ease; }

.int-wires.is-live .int-dot { opacity: 1; }

/* --- the pills --- */

.int-col {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(0.35rem, 1.5vw, 0.6rem);
  min-width: 0;
}

.int-col--a { grid-column: 1; grid-row: 1; }
.int-col--b { grid-column: 3; grid-row: 1; }

@media (min-width: 1024px) {
  /* the artwork carries ~7px of transparent margin of its own, so a small gap
     here reads as the ~22px the reference shows between plates */
  .int-col { display: flex; flex-direction: column; gap: 0.5rem; }
}

/* The twelve column files are complete cream pills — plate and mark in one
   SVG. Drawing a background here too would double-plate them, the same way the
   store badges did. So the <li> is a bare box and the shadow goes on the
   artwork itself. */
.int-pill { display: block; }

.int-pill .int-logo {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.14));
}

/* only ever seen if a logo file goes missing */
.int-name {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  background: #FFFDF3;
  border: 1px solid rgba(15, 23, 42, 0.08);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  color: #0F172A;
  white-space: nowrap;
}

@media (max-width: 639px) {
  .int-col--a { align-items: start; }
  .int-col--b { align-items: end; }
  .int-col .int-pill { width: 82%; }
  .int-hub { padding: 0; }

  .int-name {
    min-height: 2.35rem;
    padding: 0.45rem 0.3rem;
    font-size: 0.65rem;
  }
}

/* --- the hub --- */

.int-hub {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  grid-column: 2;
  grid-row: 1;
  padding: clamp(0.25rem, 1vw, 0.65rem);
}

@media (max-width: 639px) {
  .int-hub { padding: 0; }
}

.int-hub-logo {
  position: relative;
  z-index: 1;
  display: block;
  width: clamp(4rem, 18vw, 4.75rem);
  height: auto;
}

@media (min-width: 1024px) {
  .int-hub-logo { width: clamp(7.5rem, 10vw, 8.75rem); }
}

/* the black-plate lockup vanishes into the dark background, so dark mode gets
   the transparent lime one instead */
.int-hub-logo--dark { display: none; }
body.dark-mode .int-hub-logo--light { display: none; }
body.dark-mode .int-hub-logo--dark { display: block; }

.int-hub-glow {
  position: absolute;
  width: clamp(10rem, 25vw, 17rem);
  height: clamp(10rem, 25vw, 17rem);
  max-width: 120%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 62%);
  pointer-events: none;
}

body.dark-mode .int-hub-glow {
  background: radial-gradient(circle, rgba(212, 251, 10, 0.16) 0%, rgba(212, 251, 10, 0) 62%);
}

/* --- the secondary strip --- */

/* These seven files are bare marks on transparency, several with near-black
   wordmarks, so the panel stays light in dark mode too — inverting it would
   swallow Shopify, Twilio and WooCommerce entirely. */
.int-strip-viewport {
  margin-top: 3rem;
  padding: 0.9rem 1.1rem;
  border-radius: 1.5rem;
  background: rgba(255, 253, 243, 0.6);
  border: 1px solid rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

body.dark-mode .int-strip-viewport {
  background: rgba(255, 253, 243, 0.94);
  border-color: rgba(255, 253, 243, 0.2);
}

.int-strip-track { display: block; }

.int-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.int-strip--clone { display: none; }

@media (min-width: 640px) { .int-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .int-strip { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; } }

.int-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1.25rem;
}

/* smaller than the cell on purpose — filling it edge to edge swallows the
   hairline dividers and makes the strip compete with the pills above it */
.int-chip .int-logo { display: block; width: 100%; max-width: 6.75rem; height: auto; }

.int-chip .int-name {
  min-height: 0;
  padding: 0.4rem 0.6rem;
  border: 0;
  background: transparent;
  font-size: 0.85rem;
  opacity: 0.85;
}

@media (max-width: 639px) {
  .int-strip-viewport {
    height: 4.35rem;
    padding: 0.3rem 0;
    direction: ltr;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  }

  .int-strip-track {
    display: flex;
    flex-direction: row;
    width: max-content;
    will-change: transform;
    animation: int-horizontal-loop 34s linear infinite;
  }

  .int-strip,
  .int-strip--clone {
    display: flex;
    flex: 0 0 auto;
    flex-direction: row;
    gap: 0;
  }

  .int-chip {
    flex: 0 0 7rem;
    width: 7rem;
    min-height: 3.75rem;
    padding: 0.45rem 0.85rem;
  }

  .int-chip .int-logo { max-width: 5.25rem; max-height: 2rem; width: auto; }

  @keyframes int-horizontal-loop {
    to { transform: translateX(-50%); }
  }
}

/* hairlines between the strip items, on the inline-start edge so the first
   item in a row never gets a leading rule */
@media (min-width: 1024px) {
  .int-chip + .int-chip { border-inline-start: 1px solid rgba(15, 23, 42, 0.12); }
  body.dark-mode .int-chip + .int-chip { border-inline-start-color: rgba(15, 23, 42, 0.14); }
}

/* ==========================================
   Client proof — continuous logo marquee
   ========================================== */
.client-proof {
  position: relative;
  overflow: hidden;
}

.client-proof-title {
  margin: 0 0 1.35rem;
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  letter-spacing: 0;
}

.client-marquee {
  position: relative;
  overflow: hidden;
  direction: ltr;
  padding-block: 0.2rem 1rem;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}

/* requested bottom fade: deliberately subtle so it never hides the brands */
.client-marquee::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: auto 0 0;
  height: 1.6rem;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(212, 251, 10, 0.2));
}

body.dark-mode .client-marquee::after {
  background: linear-gradient(to bottom, transparent, rgba(8, 12, 10, 0.62));
}

.client-marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: client-logo-loop 34s linear infinite;
}

.client-marquee-group {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: clamp(0.7rem, 1.6vw, 1.15rem);
  margin: 0;
  padding: 0 clamp(0.7rem, 1.6vw, 1.15rem) 0 0;
  list-style: none;
}

.client-logo {
  flex: 0 0 clamp(7.25rem, 11vw, 9.5rem);
  width: clamp(7.25rem, 11vw, 9.5rem);
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 1.35rem;
  background: #fff;
  box-shadow: 0 0.65rem 1.6rem rgba(15, 23, 42, 0.09);
}

.client-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(0.92);
  opacity: 0.74;
  transition: filter 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
}

.client-logo:hover img,
.client-logo:focus-within img {
  filter: grayscale(0) contrast(1);
  opacity: 1;
  transform: scale(1.035);
}

.client-marquee:hover .client-marquee-track { animation-play-state: paused; }

@keyframes client-logo-loop {
  to { transform: translateX(-50%); }
}

@media (max-width: 639px) {
  .client-proof { margin-top: 2.25rem; padding-top: 1.35rem; }
  .client-proof-title { margin-bottom: 1rem; }
  .client-logo {
    flex-basis: 6.5rem;
    width: 6.5rem;
    border-radius: 1.1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* JS already skips the draw; this covers the dots, which fade via CSS */
  .int-dot { transition: none; }
  .int-strip-track { animation: none; }
  .client-marquee-track { animation: none; }
}

/* ==========================================
   Home pricing preview (#pricing)

   The section flips to #090B0E in dark mode, but several pieces here were
   pinned to black or near-black and disappeared into it. Measured before the
   fix: the h2 was #000 on #090B0E, the Enterprise card's background was
   *identical* to the section, and both the top badge and the compare button
   were solid black pills on it.
   ========================================== */

/* the two lime pills the brand asks for, in both themes */
.home-plan-pill {
  background: #D4FB0A !important;
  color: #06090E !important;
}

.home-start-btn {
  background: #D4FB0A !important;
  color: #06090E !important;
  border: 2px solid #D4FB0A !important;
}

.home-start-btn:hover { background: #E2FF38 !important; border-color: #E2FF38 !important; }

body.dark-mode #pricing .home-price-badge {
  background: rgba(212, 251, 10, 0.12) !important;
  border: 1px solid rgba(212, 251, 10, 0.35) !important;
  box-shadow: none !important;
}

/* lift the dark card off an identical background */
body.dark-mode #pricing .home-plan-card--dark {
  background: #11161F !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

/* the white card keeps its own light surface, so its text must not inherit the
   section's white */
body.dark-mode #pricing .home-plan-card--light { color: #0F172A !important; }

body.dark-mode #pricing .home-compare-btn {
  background: #11161F !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
}

body.dark-mode #pricing .home-compare-btn:hover { background: #171E29 !important; }

/* In light mode this section's own background IS the lime, so the lime button
   would vanish into it. Keeps the requested fill, outlines it to stay legible. */
body:not(.dark-mode) #pricing .home-start-btn { border-color: #06090E !important; }
body:not(.dark-mode) #pricing .home-start-btn:hover { border-color: #06090E !important; }

/* =========================================================================
   ARABIC HEADING LEADING

   Tailwind's text-4xl/5xl/6xl each ship `line-height: 1`, and the responsive
   variants (sm:text-5xl, md:text-6xl) sit in media queries that come after the
   plain `.leading-tight` rule — so every large heading on the site computed to
   a ratio of exactly 1.00 no matter what leading class it carried. That is
   already tight for Latin; for Arabic, where ascenders, descenders and
   diacritics (شدّة / تنوين) reach well past the em box, consecutive lines
   collide outright.

   Measured before this rule: 8 of 11 headings on index.html were at 1.00.

   !important is required because the compiled Tailwind sheet loads after this
   file on purpose (see build/README.md).
   ========================================================================= */

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] .font-heading {
  line-height: 1.4 !important;
}

html[dir="rtl"] h3,
html[dir="rtl"] h4 {
  line-height: 1.55 !important;
}

/* A padded inline-block inside a heading grows past its line box, so the two
   headings built around a black "chip" need extra room or the chip laps the
   line above it. */
html[dir="rtl"] h1:has(> span.inline-block),
html[dir="rtl"] h2:has(> span.inline-block) {
  line-height: 1.6 !important;
}

html[dir="rtl"] h1 > span.inline-block,
html[dir="rtl"] h2 > span.inline-block {
  line-height: 1.25 !important;
}

/* =========================================================================
   MEGA MENU  (desktop panels + mobile accordion)

   The bar keeps the original floating black pill exactly as it was
   (bg-black/90 + backdrop blur + white/10 border + rounded-full); only the
   items inside it changed from plain links to dropdown triggers.

   Everything here is hand-written CSS on purpose: the Tailwind sheet is
   compiled (build/README.md), so new utility classes would need a rebuild.
   ========================================================================= */

.mm-root { display: none; position: relative; }

@media (min-width: 1024px) {
  .mm-root { display: block; }
}

.mm-bar {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

/* ---- top-level items ---- */
.mm-trigger,
.mm-link-top {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: #E2E8F0;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s, background-color 0.2s;
}

.mm-trigger:hover,
.mm-link-top:hover,
.mm-trigger:focus-visible,
.mm-link-top:focus-visible,
.mm-trigger[aria-expanded="true"] {
  color: #D4FB0A;
  background: rgba(212, 251, 10, 0.08);
}

.mm-chev {
  width: 0.8125rem;
  height: 0.8125rem;
  color: #64748B;
  transition: transform 0.2s, color 0.2s;
}

.mm-trigger:hover .mm-chev,
.mm-trigger[aria-expanded="true"] .mm-chev { color: #D4FB0A; }
.mm-trigger[aria-expanded="true"] .mm-chev { transform: rotate(180deg); }

.mm-link-top--accent { color: #D4FB0A; font-weight: 700; }
.mm-link-top--accent:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.08); }

.mm-ping {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background: #D4FB0A;
  animation: mm-ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes mm-ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}

/* ---- panel stage ----------------------------------------------------------
   Fixed and viewport-centred rather than anchored to the pill: the pill is not
   at the page centre (logo on one side, buttons on the other), so anchoring to
   it pushes every panel off-centre. --mm-top is set from JS to the live header
   height, which changes when the header shrinks on scroll.
   Panels share one grid cell so they stack instead of pushing each other.     */
.mm-panels {
  position: fixed;
  top: var(--mm-top, 5.25rem);
  left: 50%;
  transform: translateX(-50%);
  width: calc(100vw - 2rem);
  max-width: 78rem;
  display: grid;
  z-index: 60;
  pointer-events: none;
}

.mm-panel {
  grid-area: 1 / 1;
  align-self: start;
  justify-self: center;
  width: 100%;
  max-width: var(--mm-w, 62rem);
  position: relative;
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 1.5rem;
  background: rgba(11, 14, 19, 0.97);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 30px 80px -24px rgba(0, 0, 0, 0.85);
  color: #E2E8F0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-0.5rem) scale(0.985);
  transform-origin: top center;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.mm-panel[data-open="true"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

/* Invisible bridge so the pointer can cross the gap from pill to panel
   without the panel closing underneath it. */
.mm-panel::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -1.125rem;
  height: 1.125rem;
}

/* ---- panel layouts ---- */
.mm-inner { display: grid; gap: 1.25rem; }
.mm-inner--3 { grid-template-columns: repeat(3, minmax(0, 1fr)) 16.5rem; }
.mm-inner--2 { grid-template-columns: repeat(2, minmax(0, 1fr)) 17.5rem; }
.mm-inner--split { grid-template-columns: minmax(0, 1fr) 17rem; }

.mm-col-title {
  margin: 0 0 0.625rem;
  padding-inline-start: 0.625rem;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #7C8798;
}

/* ---- link rows ---- */
.mm-item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border-radius: 0.75rem;
  transition: background-color 0.18s;
}

.mm-item:hover { background: rgba(255, 255, 255, 0.055); }

.mm-ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.875rem;
  height: 1.875rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 0.625rem;
  background: rgba(255, 255, 255, 0.06);
  color: #D4FB0A;
  transition: background-color 0.18s, border-color 0.18s;
}

.mm-ico i,
.mm-ico svg { width: 0.875rem; height: 0.875rem; }
.mm-item:hover .mm-ico { background: rgba(212, 251, 10, 0.12); border-color: rgba(212, 251, 10, 0.3); }

.mm-item-title {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.5;
  color: #E9EEF5;
  transition: color 0.18s;
}

.mm-item:hover .mm-item-title { color: #D4FB0A; }

.mm-item-desc {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.6875rem;
  line-height: 1.65;
  color: #7C8798;
}

/* Items whose destination does not exist yet are spans, not dead links. */
.mm-item--soon { cursor: default; opacity: 0.7; }
.mm-item--soon:hover { background: transparent; }
.mm-item--soon:hover .mm-item-title { color: #E9EEF5; }
.mm-item--soon:hover .mm-ico { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.07); }

.mm-soon {
  display: inline-block;
  margin-inline-start: 0.375rem;
  padding: 0.0625rem 0.375rem;
  border-radius: 0.375rem;
  background: rgba(212, 251, 10, 0.16);
  color: #D4FB0A;
  font-size: 0.5625rem;
  font-weight: 800;
  vertical-align: middle;
}

/* ---- sector cards ---- */
.mm-sector-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.mm-sector {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 0.875rem;
  background: rgba(255, 255, 255, 0.025);
  font-size: 0.8125rem;
  font-weight: 700;
  color: #E9EEF5;
  transition: border-color 0.18s, background-color 0.18s, color 0.18s;
}

.mm-sector:hover {
  border-color: rgba(212, 251, 10, 0.35);
  background: rgba(212, 251, 10, 0.06);
  color: #D4FB0A;
}

/* ---- promo / story cards ---- */
.mm-promo,
.mm-story {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.125rem;
  border-radius: 1rem;
}

.mm-promo {
  border: 1px solid rgba(212, 251, 10, 0.22);
  background: linear-gradient(160deg, rgba(212, 251, 10, 0.15), rgba(212, 251, 10, 0.03) 60%, transparent);
}

.mm-story {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
}

.mm-card-kicker {
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #D4FB0A;
}

.mm-card-title {
  font-size: 0.9375rem;
  font-weight: 800;
  line-height: 1.5;
  color: #FFFFFF;
}

.mm-card-desc {
  font-size: 0.6875rem;
  line-height: 1.7;
  color: #94A3B8;
}

.mm-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: auto;
  padding: 0.5rem 0.875rem;
  border-radius: 9999px;
  background: #D4FB0A;
  color: #0B0E13;
  font-size: 0.75rem;
  font-weight: 800;
  align-self: flex-start;
  transition: transform 0.18s, box-shadow 0.18s;
}

.mm-card-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(212, 251, 10, 0.7); }
.mm-card-cta i, .mm-card-cta svg { width: 0.8125rem; height: 0.8125rem; }

.mm-story .mm-card-cta {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #E2E8F0;
  padding-inline: 0;
  border: 0;
}

.mm-story .mm-card-cta:hover { color: #D4FB0A; box-shadow: none; }

.mm-stat {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  color: #D4FB0A;
  font-size: 1.5rem;
  font-weight: 900;
}

.mm-stat span {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #94A3B8;
}

/* ---- panel footer row ---- */
.mm-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  margin-top: 1.25rem;
  padding-top: 0.875rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.mm-foot a {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #94A3B8;
  transition: color 0.18s, background-color 0.18s;
}

.mm-foot a:hover { color: #D4FB0A; background: rgba(255, 255, 255, 0.05); }
.mm-foot i, .mm-foot svg { width: 0.8125rem; height: 0.8125rem; }

/* ---- scrim behind an open panel ---- */
.mm-scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(4, 6, 9, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  pointer-events: none;
}

.mm-scrim[data-open="true"] { opacity: 1; visibility: visible; }

/* =========================================================================
   MOBILE — the same four groups as an accordion inside the existing drawer
   ========================================================================= */

.mm-m-nav {
  display: flex;
  flex-direction: column;
  margin-top: 1.5rem;
}

.mm-m-solo,
.mm-m-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 0;
  border: 0;
  border-bottom: 1px solid rgba(30, 41, 59, 0.5);
  background: transparent;
  color: #CBD5E1;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-align: start;
  cursor: pointer;
  transition: color 0.18s;
}

.mm-m-solo:hover,
.mm-m-trigger:hover { color: #D4FB0A; }

.mm-m-solo--accent { color: #D4FB0A; font-weight: 700; }

.mm-m-chev {
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  color: #64748B;
  transition: transform 0.2s, color 0.2s;
}

.mm-m-group.is-open > .mm-m-trigger { color: #D4FB0A; border-bottom-color: transparent; }
.mm-m-group.is-open .mm-m-chev { transform: rotate(180deg); color: #D4FB0A; }

.mm-m-panel {
  display: none;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(30, 41, 59, 0.5);
}

.mm-m-group.is-open > .mm-m-panel { display: block; }

.mm-m-title {
  margin: 0.625rem 0 0.125rem;
  padding-inline-start: 0.5rem;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #64748B;
}

.mm-m-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #94A3B8;
  transition: color 0.18s, background-color 0.18s;
}

.mm-m-link:hover { color: #D4FB0A; background: rgba(255, 255, 255, 0.04); }
.mm-m-link i, .mm-m-link svg { width: 0.875rem; height: 0.875rem; flex: 0 0 auto; color: #64748B; }
.mm-m-link:hover i, .mm-m-link:hover svg { color: #D4FB0A; }
.mm-m-link--soon { opacity: 0.65; cursor: default; }
.mm-m-link--soon:hover { color: #94A3B8; background: transparent; }

.mm-m-badge {
  margin-inline-start: auto;
  padding: 0.0625rem 0.375rem;
  border-radius: 0.375rem;
  background: #D4FB0A;
  color: #000000;
  font-size: 0.5625rem;
  font-weight: 900;
}

@media (prefers-reduced-motion: reduce) {
  .mm-panel,
  .mm-chev,
  .mm-m-chev,
  .mm-card-cta { transition: none; }
  .mm-panel { transform: none; }
  .mm-ping { animation: none; }
}

/* The "coming soon" badge rides at the far edge of its row instead of wrapping
   under a long Arabic label. */
.mm-item--soon .mm-soon {
  margin-inline-start: auto;
  align-self: center;
}

/* With four expandable groups the drawer content now outgrows the viewport, so
   the upper half scrolls and the sign-in buttons stay pinned to the bottom. */
#mobileMenuDrawer > div:first-child {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
}

#mobileMenuDrawer > div:first-child::-webkit-scrollbar { width: 4px; }
#mobileMenuDrawer > div:first-child::-webkit-scrollbar-thumb {
  border-radius: 9999px;
  background: rgba(148, 163, 184, 0.35);
}

/* =========================================================================
   EXPLORE BAND  (#explore on the homepage)

   Replaces four full sections that now live on their own pages. Four cards,
   one per destination, so the homepage still names everything it used to show.
   ========================================================================= */

.explore-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.explore-card {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 1.5rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, 0.03);
  transition: transform 0.22s, border-color 0.22s, background-color 0.22s;
}

.explore-card:hover {
  transform: translateY(-4px);
  border-color: rgba(212, 251, 10, 0.45);
  background: rgba(212, 251, 10, 0.05);
}

.explore-ico {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.375rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.06);
  color: #D4FB0A;
  transition: background-color 0.22s, border-color 0.22s;
}

.explore-ico i, .explore-ico svg { width: 1.375rem; height: 1.375rem; }

.explore-card:hover .explore-ico {
  background: #D4FB0A;
  border-color: #D4FB0A;
  color: #06080A;
}

.explore-title {
  color: #FFFFFF;
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.5;
}

.explore-desc {
  flex: 1 1 auto;
  color: #94A3B8;
  font-size: 0.8125rem;
  line-height: 1.9;
}

.explore-go {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.375rem;
  color: #D4FB0A;
  font-size: 0.8125rem;
  font-weight: 800;
}

.explore-go i, .explore-go svg { width: 0.875rem; height: 0.875rem; transition: transform 0.22s; }
.explore-card:hover .explore-go i, .explore-card:hover .explore-go svg { transform: translateX(-4px); }

.explore-card--accent {
  border-color: rgba(212, 251, 10, 0.3);
  background: linear-gradient(160deg, rgba(212, 251, 10, 0.1), rgba(212, 251, 10, 0.02) 60%, transparent);
}

@media (max-width: 1023px) {
  .explore-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 599px) {
  .explore-grid { grid-template-columns: minmax(0, 1fr); }
  .explore-card { padding: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .explore-card, .explore-ico, .explore-go i, .explore-go svg { transition: none; }
  .explore-card:hover { transform: none; }
}

/* Currently unused — all eight sectors have a bot. Kept for the next sector
   added to the menu before its simulator exists: mark it --soon and it renders
   as a dimmed non-link, rather than dropping the visitor into the wrong bot. */
.mm-sector--soon {
  cursor: default;
  opacity: 0.6;
}

.mm-sector--soon:hover {
  border-color: rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.025);
  color: #E9EEF5;
}

.mm-sector .mm-soon { margin-inline-start: auto; }

/* The header is fixed, so an anchor jump parks its target underneath it.
   :target covers every fragment link on the site — the menu's per-card
   anchors, the FAQ, the moved-section redirects — without listing ids. */
:target {
  scroll-margin-top: 7rem;
}

@media (max-width: 1023px) {
  :target { scroll-margin-top: 5.5rem; }
}

/* Three equal columns with no promo card beside them (المصادر). */
.mm-inner--cols3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* The header sits on a dark background — real dark mode, or a light-mode page
   whose hero is .sp-hero--dark (integrations, the calculator). The theme rules
   above are !important, so this needs more specificity, not more !important.
   Set from updateNavbarTheme() in main.js. */
body.header-on-dark #mainHeader .crm-logo-dark-mode { display: block !important; }
body.header-on-dark #mainHeader .crm-logo-light-mode { display: none !important; }