/* ================================================================
   BEVERON — ARABIC (RTL) CORE DESIGN LAYER   ·   /ar/*  (home.css)
   ----------------------------------------------------------------
   A polished, reusable RTL layer that sits ON TOP of the Arabic
   copies of beveron-common.css + product-page.css (css-new/ar/).

   House look = India / Tracing / MLC / how-we-help pages:
     brand blue #0084c8 · ink #111827 · white cards on a light /
     #f1f5f9-alt / navy-gradient rhythm. NO new brand palette.

   What this file owns:
     · RTL direction, alignment & icon/arrow/chevron flips
     · An Arabic-tuned TYPOGRAPHY scale (IBM Plex Sans Arabic reads
       larger than Inter, so headings/body are eased down and given
       more line-height — Latin runs still use Inter)
     · Cohesive spacing, shadows, radii and motion tokens
     · Premium cards, buttons, badges, chips, tabs, hero, product
       strip, sectors, contact form, related-links
     · Tasteful hover / reveal micro-interactions (reduced-motion safe)
     · The preserved functional fixes (dark navy gradient, footer
       reset, translucent contact card, single select arrow, etc.)

   Everything is scoped under .bv-page except the nav corrections
   (#nav-placeholder) and the WhatsApp float, which live outside it.
   ================================================================ */


/* ================================================================
   0. TOKENS  (additive — new custom props only, nothing overridden)
   ================================================================ */
.bv-page {
  /* Motion — sanctioned strong curves (no weak built-ins, no transition:all) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --t-fast: 0.18s;
  --t-base: 0.28s;

  /* Brand-tinted shadow scale (never pure-black on light) */
  --sh-soft: 0 1px 3px rgba(16, 54, 94, 0.06);
  --sh-card: 0 6px 20px -12px rgba(16, 54, 94, 0.20);
  --sh-card-hover: 0 22px 46px -20px rgba(0, 132, 200, 0.30);
  --sh-float: 0 24px 60px -26px rgba(0, 0, 0, 0.45);

  /* Hairlines that read cleaner than the default grey on Arabic UI */
  --line-hair: rgba(15, 23, 42, 0.08);
}


/* ================================================================
   1. RTL BASE
   ================================================================ */
html[dir="rtl"] { scroll-behavior: smooth; }
.bv-page { direction: rtl; text-align: right; }

.bv-page .body-text,
.bv-page .sec-heading,
.bv-page .hdsc,
.bv-page h1, .bv-page h2, .bv-page h3, .bv-page h4, .bv-page p { text-align: right; }

.bv-page .text-center,
.bv-page .text-center .sec-heading,
.bv-page .text-center .body-text { text-align: center; }

.bv-page .mx-auto-md, .bv-page .mx-auto-sm { margin-inline: auto; }

/* FA icons that sit before text — neutralise LTR margins */
.bv-page .badge-label i { margin-inline-end: 2px; }
.bv-page .why-icon, .bv-page .fi-icon, .bv-page .tc-icon, .bv-page .sol-icon { margin-inline: 0; }


/* ================================================================
   2. NAV CORRECTIONS (legacy Arabic bootstrap nav in #nav-placeholder)
   Minimal corrective sizing/alignment only — structure untouched.
   Latin runs (phone number / "English") stay in Inter.
   ================================================================ */
#nav-placeholder .navbar-nav { align-items: center; }
#nav-placeholder .navbar-nav .nav-link {
  font-family: "Inter", "Tajawal", -apple-system, "Segoe UI", Tahoma, sans-serif;
  font-size: 1rem; font-weight: 600; display: flex; align-items: center; gap: 6px;
}
#nav-placeholder .navbar-nav .nav-item { display: flex; align-items: center; }
#nav-placeholder .navbar-nav .nav-link b {
  font-family: "Inter", "Tajawal", -apple-system, "Segoe UI", Tahoma, sans-serif !important;
  font-size: 1rem !important; font-weight: 700;
}
#nav-placeholder a[href^="tel:"] b,
#nav-placeholder a[href="https://www.beveron.com/"] b {
  font-family: "Inter", -apple-system, "Segoe UI", Tahoma, sans-serif !important; letter-spacing: .2px;
}
#nav-placeholder .navbar-nav .nav-link i.fa-search { font-size: 1.05rem; }


/* ================================================================
   3. ARABIC TYPOGRAPHY SCALE
   IBM Plex Sans Arabic sits visually larger and taller than Inter,
   so the shared Inter-tuned sizes feel oversized in Arabic. Ease the
   sizes down, open the line-height (Arabic needs room for marks), and
   drop the tight negative tracking (it crowds joined Arabic letters).
   ================================================================ */
.bv-page .sec-heading {
  font-size: clamp(1.7rem, 1.05rem + 2.4vw, 2.5rem);
  line-height: 1.32;
  letter-spacing: 0;                 /* was -0.025em — bad for Arabic */
  margin-bottom: 18px;
}
.bv-page .sec-heading-sm {
  font-size: clamp(1.3rem, 1rem + 1.6vw, 1.85rem);
  line-height: 1.4;
  letter-spacing: 0;
}
.bv-page .body-text {
  font-size: 1.02rem;                /* was 1.1rem */
  line-height: 1.9;                  /* airier for Arabic readability */
}
.bv-page .body-text + .body-text { margin-top: 0.9rem; }

/* Hero headline + lead */
.bv-page .hero-v5 h1 {
  font-size: clamp(1.75rem, 1.1rem + 2.8vw, 2.7rem);
  line-height: 1.34;
  letter-spacing: 0;                 /* was -0.03em */
  margin-bottom: 18px;
}
.bv-page .hero-v5 .hdsc {
  font-size: 1.02rem;
  line-height: 1.95;
  max-width: 560px;
}

/* Card / tile / tab headings — nudge Arabic weight-to-size balance */
.bv-page .why-card h3, .bv-page .why-card h4 { font-size: 1.02rem; line-height: 1.45; }
.bv-page .tab-card h3, .bv-page .tab-card h4 { font-size: 1.05rem; line-height: 1.4; }
.bv-page .sector-card h4 { font-size: 1.02rem; line-height: 1.4; }
.bv-page .feature-individual-card h4 { font-size: 0.82rem; line-height: 1.35; }


/* ================================================================
   4. BADGES / EYEBROWS / CHIPS
   Arabic gets no uppercase and no wide tracking (both are Latin-only
   devices that just loosen Arabic word-shapes). Keep the pill.
   ================================================================ */
.bv-page .badge-label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 7px 16px;
  box-shadow: var(--sh-soft);
  transition: border-color var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}
.bv-page .hero-v5 .hbadge {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.76rem;
}


/* ================================================================
   5. HERO (RTL polish)
   ================================================================ */
.bv-page .hbc { justify-content: flex-start; }
.bv-page .hbc .sp i { transform: scaleX(-1); }     /* chevrons point left in RTL */
.bv-page .hctas, .bv-page .hstats { justify-content: flex-start; }
.bv-page .hero-v5 .hl { white-space: normal; }

/* Softer, brand-tinted hero framing for the poster/visual */
.bv-page .hero-v5-visual img {
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px -30px rgba(0, 132, 200, 0.35);
}

/* Arrows / chevrons that must point left in RTL */
.bv-page .pnc-arrow,
.bv-page .overview-cta i, .bv-page .cta-banner-btn i, .bv-page .cta-form-btn i,
.bv-page .blog-view-more a i, .bv-page .pricing-cta i { transform: scaleX(-1); }

/* Pending-image frame while generated .webp posters are produced */
.bv-page .prod-section-img img,
.bv-page .feature-split-img img,
.bv-page .hero-v5-visual img {
  background: linear-gradient(135deg, #eef6fd, #dcebf8);
}
/* Designed .is-pending fallback (shimmer) for any slot awaiting artwork */
.bv-page .is-pending {
  position: relative;
  background: linear-gradient(135deg, #eef6fd, #dcebf8);
  overflow: hidden;
}
.bv-page .is-pending::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.55) 50%, transparent 80%);
  transform: translateX(100%);
  animation: bvShimmer 1.6s var(--ease-in-out) infinite;
}
@keyframes bvShimmer { to { transform: translateX(-100%); } }


/* ================================================================
   6. BUTTONS & CTAs  (kinetic hover, tactile press, RTL-safe)
   Named-property transitions only — never transition:all.
   ================================================================ */
.bv-page .hero-v5 .cp,
.bv-page .hero-v5 .cs,
.bv-page .overview-cta {
  transition: background var(--t-base) var(--ease-out),
              color var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}
.bv-page .hero-v5 .cp:active,
.bv-page .hero-v5 .cs:active,
.bv-page .overview-cta:active { transform: translateY(0) scale(0.98); }

/* CTA arrow glides toward the reading direction (left) on hover */
.bv-page .overview-cta i,
.bv-page .cta-form-btn i { transition: transform var(--t-base) var(--ease-out); }
.bv-page .overview-cta:hover i { transform: scaleX(-1) translateX(4px); }

.bv-page .cta-banner-btn { transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out); }
.bv-page .cta-banner-btn:active { transform: translateY(-1px) scale(0.99); }


/* ================================================================
   7. CARD SYSTEM  (why · tab · sector · feature-individual)
   Soft rest shadow + hairline, brand-tinted lift on hover, cohesive
   radii. Hover motion is pointer-gated so touch taps don't trigger it.
   ================================================================ */
.bv-page .why-card,
.bv-page .tab-card,
.bv-page .sector-card {
  border-color: var(--line-hair);
  box-shadow: var(--sh-card);
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
}

/* Icon plates get a hair more polish + a hover kinetic cue */
.bv-page .why-card .why-icon,
.bv-page .tab-card .tc-icon,
.bv-page .sector-card .sector-ic {
  transition: transform var(--t-base) var(--ease-out),
              background var(--t-base) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .bv-page .why-card:hover,
  .bv-page .tab-card:hover,
  .bv-page .sector-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--sh-card-hover);
    border-color: var(--accent-cyan);
  }
  .bv-page .why-card:hover .why-icon,
  .bv-page .tab-card:hover .tc-icon,
  .bv-page .sector-card:hover .sector-ic { transform: scale(1.08); }

  .bv-page .feature-individual-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent-cyan);
  }
}

/* feature micro-cards: cohesive named transition */
.bv-page .feature-individual-card {
  transition: transform var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}


/* ================================================================
   8. PRODUCT NAV STRIP (dark)  — RTL arrow + kinetic hover
   ================================================================ */
.bv-page .prod-nav-card .pnc-icon { transition: transform var(--t-base) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .bv-page .prod-nav-card:hover .pnc-icon { transform: scale(1.08); }
  /* arrow points left in RTL, so nudge it left on hover */
  .bv-page .prod-nav-card:hover .pnc-arrow { transform: scaleX(-1) translateX(3px); }
}


/* ================================================================
   9. TABS  (track transparent — only buttons carry colour)
   ================================================================ */
.bv-page .tab-nav { background: transparent; padding: 0; gap: 8px; }
.bv-page .tab-card { text-align: center; }
.bv-page .tab-card .tc-icon { margin-inline: auto; }

/* Pill-styled tab buttons for a cleaner Arabic bar */
.bv-page .tab-btn {
  border: 1px solid var(--line-hair);
  border-radius: 100px;
  background: var(--bg-surface);
  transition: color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}
.bv-page .tab-btn:hover { color: var(--accent-cyan); border-color: var(--accent-cyan); }
.bv-page .tab-btn.active {
  background: var(--accent-cyan);
  color: #fff;
  border-color: var(--accent-cyan);
  box-shadow: 0 8px 20px -8px rgba(0, 132, 200, 0.5);
}


/* ================================================================
   10. FAQ (RTL chevron already flips visually; open-state polish)
   ================================================================ */
.bv-page .faq-item summary .faq-chevron { margin-inline: 0 0 0 12px; margin-left: 0; margin-right: 12px; }


/* ================================================================
   11. CTA BANNER (centered)
   ================================================================ */
.bv-page .cta-banner,
.bv-page .cta-banner h2,
.bv-page .cta-banner p { text-align: center; }


/* ================================================================
   12. SECTORS (من نخدم)
   ================================================================ */
.bv-page .sectors-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  margin-top: 40px;
}
.bv-page .sector-card {
  background: var(--bg-surface);
  border: 1px solid var(--line-hair);
  border-radius: var(--radius-lg);
  padding: 26px 20px;
  text-align: center;
}
.bv-page .sector-ic {
  width: 56px; height: 56px;
  margin: 0 auto 14px;
  border-radius: 14px;
  background: var(--accent-cyan-light);
  color: var(--accent-cyan-dark);
  display: grid; place-items: center;
  font-size: 1.4rem;
}
.bv-page .sector-card h4 { margin: 0 0 6px; color: var(--text-primary); text-align: center; }
.bv-page .sector-card p { margin: 0; color: var(--text-secondary); font-size: .9rem; text-align: center; }


/* ================================================================
   13. DARK SECTION  — ambient animated artefact (reduced-motion safe)
   The navy band gets slowly drifting glow orbs for depth. GPU-only
   (transform), gated off for prefers-reduced-motion below.
   ================================================================ */
.bv-page .dark-deco { will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  .bv-page .dark-deco--1 { animation: bvDecoDrift 16s var(--ease-in-out) infinite; }
  .bv-page .dark-deco--2 { animation: bvDecoDrift 20s var(--ease-in-out) infinite; animation-delay: -7s; }
}
@keyframes bvDecoDrift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -22px, 0); }
}

/* dark bands: readable light house text, not dull grey.
   !important is required — the markup sets these via inline
   style="color:var(--text-on-dark-muted)" (dull grey), and an inline
   style beats a class selector without it. */
.bv-page .dark-section .body-text,
.bv-page .cta-form-copy .body-text { color: #cfe0ef !important; }
.bv-page .dark-section .sec-heading,
.bv-page .cta-form-copy .sec-heading { color: #ffffff !important; }


/* ================================================================
   14. CONTACT FORM
   PRESERVED: translucent card on navy, dark translucent inputs, LIGHT
   text, single (non-tiling) select arrow on the LEFT. Do not switch
   the select background to a shorthand (that re-tiled the arrow).
   ================================================================ */
.bv-page .cta-form-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 48px;
  align-items: center;
}
.bv-page .cta-form-copy .sec-heading { color: #fff; }
.bv-page .cta-form-copy .body-text { color: var(--text-on-dark-muted); }

.bv-page .cta-form-chips { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 20px; }
.bv-page .cta-form-chips span { display: flex; align-items: center; gap: 8px; color: #dbeafe; font-size: .95rem; }
.bv-page .cta-form-chips i { color: var(--accent-warm); }

/* enriched left copy: checklist + direct contact row */
.bv-page .cta-form-list-wrap { margin-top: 22px; }
.bv-page .cta-form-list-title { color: #fff; font-size: 1.02rem; font-weight: 700; margin: 0 0 10px; }
.bv-page .cta-form-list { list-style: none; padding: 0; margin: 0; }
.bv-page .cta-form-list li { display: flex; align-items: flex-start; gap: 10px; color: #dbe7f4; margin: 8px 0; font-size: .96rem; }
.bv-page .cta-form-list li i { color: var(--accent-cyan); margin-top: 4px; }
.bv-page .cta-form-contact { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14); }
.bv-page .cta-form-contact a { display: inline-flex; align-items: center; gap: 8px; color: #eaf2fb; text-decoration: none; font-size: .95rem; font-weight: 600; transition: color var(--t-fast) var(--ease-out); }
.bv-page .cta-form-contact a i { color: var(--accent-cyan); }
.bv-page .cta-form-contact a:hover { color: #fff; }

/* the form card — translucent glass on navy */
.bv-page .cta-form {
  background: rgba(0, 132, 200, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--sh-float);
}
.bv-page .cta-form h3 { margin: 0 0 3px; color: #ffffff; font-size: 1.2rem; }
.bv-page .cta-form .form-sub { color: rgba(241, 245, 249, .72); margin: 0 0 16px; font-size: .9rem; }
.bv-page .cta-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bv-page .cta-form .fg { margin-bottom: 10px; }

.bv-page .cta-form .form-ctrl {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-sm);
  font: inherit;
  font-family: inherit;
  font-size: .92rem;
  color: #f1f5f9;
  background: rgba(255, 255, 255, 0.06);
  text-align: right;
  transition: border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
}
.bv-page .cta-form .form-ctrl::placeholder { color: rgba(241, 245, 249, .6); }
.bv-page .cta-form .form-ctrl:focus {
  outline: none;
  border-color: var(--accent-cyan);
  box-shadow: 0 0 0 3px rgba(0, 132, 200, .25);
  background: rgba(255, 255, 255, .09);
}
.bv-page .cta-form textarea.form-ctrl { min-height: 82px; resize: vertical; }
.bv-page .cta-form .err-label { display: block; color: #fda4af; font-size: .78rem; margin-top: 3px; min-height: 1em; }

.bv-page .cta-form-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  background: var(--accent-cyan);
  color: #fff;
  border: 0;
  padding: 13px;
  border-radius: var(--radius-sm);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  margin-top: 6px;
  box-shadow: 0 10px 26px -10px rgba(0, 132, 200, 0.6);
  transition: background var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}
.bv-page .cta-form-btn:hover { background: var(--accent-cyan-dark); transform: translateY(-2px); box-shadow: 0 14px 32px -10px rgba(0, 132, 200, 0.7); }
.bv-page .cta-form-btn:active { transform: translateY(0) scale(0.99); }
.bv-page .cta-form-btn:disabled { opacity: .7; cursor: not-allowed; transform: none; }
.bv-page .cta-form-btn:hover i { transform: scaleX(-1) translateX(4px); }

.bv-page .cta-form .legal { color: rgba(241, 245, 249, .5); font-size: 11px; line-height: 1.6; margin: 10px 0 0; text-align: center; }
.bv-page .cta-form .legal a { color: rgba(241, 245, 249, .65); }

/* SELECT — single arrow on the LEFT (RTL). Every background longhand is
   set explicitly; NEVER collapse to a `background:` shorthand (that reset
   background-repeat and tiled the arrow into a zig-zag). */
.bv-page .cta-form select.form-ctrl {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-color: rgba(255, 255, 255, 0.06);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23cbd5e1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 12px center;
  background-size: 12px 8px;
  padding-left: 34px;
  cursor: pointer;
}
.bv-page .cta-form select.form-ctrl:focus {
  background-color: rgba(255, 255, 255, 0.09);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%230084c8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 12px center;
  background-size: 12px 8px;
}
.bv-page .cta-form select.form-ctrl option { color: #111827; background: #ffffff; padding: 10px 12px; }
.bv-page .cta-form select.form-ctrl option:disabled { color: #6b7280; }
.bv-page .cta-form select.form-ctrl:invalid { color: rgba(241, 245, 249, .6); }
.bv-page .cta-form select.form-ctrl::-ms-expand { display: none; }

/* Contact section spacing so the card never overlaps the footer */
.bv-page .cta-form-section { overflow: visible; padding-top: 88px; padding-bottom: 92px; }

/* ================================================================
   CUSTOM SEARCHABLE DROPDOWN (#cinterest) — dark translucent, RTL.
   Re-skins the light .bk-dd-* base component (beveron-common.css) to
   match the translucent .form-ctrl fields on the dark contact card.
   The native <select> was replaced because its popup is unstyleable.
   ================================================================ */
.bv-page .cta-form .bk-dd-wrap { direction: rtl; }
.bv-page .cta-form .bk-dd-toggle {
  padding: 11px 14px 11px 40px;        /* reserve chevron space on the LEFT (RTL) */
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.06);
  color: #f1f5f9;
  font-size: .92rem;
  min-height: 44px;
  text-align: right;
  transition: border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
}
.bv-page .cta-form .bk-dd-toggle:hover { border-color: rgba(255, 255, 255, 0.35); }
.bv-page .cta-form .bk-dd-toggle:focus,
.bv-page .cta-form .bk-dd-toggle.bk-dd-open {
  outline: none;
  border-color: var(--accent-cyan);
  box-shadow: 0 0 0 3px rgba(0, 132, 200, 0.25);
  background: rgba(255, 255, 255, 0.09);
}
.bv-page .cta-form .bk-dd-toggle .bk-dd-text { text-align: right; }
.bv-page .cta-form .bk-dd-toggle .bk-dd-placeholder { color: rgba(241, 245, 249, 0.6); }
.bv-page .cta-form .bk-dd-toggle .bk-dd-chev { right: auto; left: 14px; color: #cbd5e1; }
.bv-page .cta-form .bk-dd-toggle.bk-dd-open .bk-dd-chev { color: var(--accent-cyan); }

.bv-page .cta-form .bk-dd-panel {
  background: #0f2333;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  box-shadow: 0 18px 46px -14px rgba(0, 0, 0, 0.6);
}

.bv-page .cta-form .bk-dd-search {
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.bv-page .cta-form .bk-dd-search input {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #f1f5f9;
  padding: 9px 34px 9px 12px;          /* search icon on the RIGHT (RTL) */
  text-align: right;
  direction: rtl;
}
.bv-page .cta-form .bk-dd-search input::placeholder { color: rgba(241, 245, 249, 0.55); }
.bv-page .cta-form .bk-dd-search input:focus {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 0 3px rgba(0, 132, 200, 0.2);
}
.bv-page .cta-form .bk-dd-search::before { left: auto; right: 22px; color: rgba(241, 245, 249, 0.55); }

.bv-page .cta-form .bk-dd-list { padding: 6px; }
.bv-page .cta-form .bk-dd-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.25); }
.bv-page .cta-form .bk-dd-list { scrollbar-color: rgba(255, 255, 255, 0.25) transparent; }
.bv-page .cta-form .bk-dd-opt {
  color: #e6eef7;
  border-radius: 8px;
  padding: 10px 12px;
  text-align: right;
  direction: rtl;
}
.bv-page .cta-form .bk-dd-opt:hover,
.bv-page .cta-form .bk-dd-opt.bk-dd-active {
  background: rgba(0, 132, 200, 0.22);
  color: #ffffff;
}
.bv-page .cta-form .bk-dd-opt.bk-dd-selected {
  background: rgba(0, 132, 200, 0.30);
  color: #ffffff;
  font-weight: 600;
}
.bv-page .cta-form .bk-dd-empty { color: rgba(241, 245, 249, 0.55); }


/* ================================================================
   15. SOLUTIONS (#solutions) — text stays RIGHT-aligned; centre the
   cards so the incomplete last row (Smart Legal Contract + Smart IP)
   is balanced in the grid.
   ================================================================ */
.bv-page #solutions .why-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 20px; }
.bv-page #solutions .why-card { flex: 0 1 calc(33.333% - 20px); min-width: 260px; text-align: right; display: flex; flex-direction: column; }
/* Pin every CTA to the card bottom so they line up uniformly regardless of text length (beats inline margin-top) */
.bv-page #solutions .why-card .overview-cta { margin-top: auto !important; align-self: flex-start; }


/* ================================================================
   16. RELATED LINKS / GEO CHIPS  (link chips + kinetic hover)
   ================================================================ */
.bv-page .geo-chip {
  border-color: var(--line-hair);
  transition: color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .bv-page .geo-chip:hover {
    transform: translateY(-2px);
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
    box-shadow: 0 8px 18px -10px rgba(0, 132, 200, 0.4);
  }
}


/* ================================================================
   17. WHATSAPP FLOAT  (left side in RTL)
   ================================================================ */
.ar-wa {
  position: fixed;
  inset-inline-start: 20px;
  inset-block-end: 20px;
  z-index: 90;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: grid; place-items: center;
  font-size: 1.6rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .ar-wa:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 14px 30px rgba(0, 0, 0, .32); }
}
/* Keep the WhatsApp float WhatsApp-green in every state — a generic link-hover
   rule was tinting the icon brand-blue on hover. */
.ar-wa, .ar-wa:hover, .ar-wa:focus, .ar-wa:active { background: #25d366 !important; color: #fff !important; }
.ar-wa:hover { background: #20bd5a !important; }
.ar-wa i, .ar-wa:hover i, .ar-wa:focus i { color: #fff !important; }

/* The dark "رؤية موحدة" section holds a header + 8 pills + the full dashboard
   image, so sec-pad-lg's 120px padding makes it feel over-long. Trim it. */
.bv-page .dark-section.sec-pad-lg { padding-top: 68px !important; padding-bottom: 68px !important; }


/* ================================================================
   18. FOOTER RESET
   product-page.css (Arabic copy) ships `footer { margin-top:-140px }`
   for pages whose last section overlaps the footer on purpose. Our
   contact section is self-contained, so cancel the pull-up.
   ================================================================ */
#master-footer-placeholder { margin-top: 0 !important; }


/* ================================================================
   19. REDUCED MOTION  — fewer/gentler, not dead
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  .bv-page .dark-deco--1,
  .bv-page .dark-deco--2 { animation: none; }
  .bv-page .is-pending::after { animation: none; }
  .bv-page .why-card,
  .bv-page .tab-card,
  .bv-page .sector-card,
  .bv-page .feature-individual-card,
  .bv-page .geo-chip,
  .bv-page .hero-v5 .cp,
  .bv-page .hero-v5 .cs,
  .bv-page .overview-cta,
  .bv-page .cta-form-btn,
  .ar-wa { transition-duration: 0.001ms; }
  .bv-page .why-card:hover,
  .bv-page .tab-card:hover,
  .bv-page .sector-card:hover,
  .bv-page .geo-chip:hover { transform: none; }
}


/* ================================================================
   20. RESPONSIVE  (mobile-first RTL — verified at ~360 / 768 / 1024)
   ================================================================ */
@media (max-width: 1024px) {
  .bv-page .sectors-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 992px) {
  .bv-page .sectors-grid { grid-template-columns: repeat(3, 1fr); }
  .bv-page .cta-form-grid { grid-template-columns: 1fr; gap: 32px; }
  .bv-page #solutions .why-card { flex: 0 1 calc(50% - 20px); }
}
@media (max-width: 640px) {
  .bv-page .sectors-grid,
  .bv-page .cta-form-row { grid-template-columns: 1fr; }
  .bv-page #solutions .why-card { flex: 1 1 100%; min-width: 0; }
  .bv-page .cta-form-section { padding-top: 60px; padding-bottom: 64px; }
  .bv-page .cta-form-chips { gap: 10px 16px; }
}
@media (max-width: 360px) {
  .bv-page .cta-form { padding: 18px; }
  .bv-page .tab-btn { padding: 9px 14px; }
}


/* ================================================================
   20b. CONTACT FORM — BREATHING ROOM
   (field/row gaps + internal padding; select longhands untouched)
   ================================================================ */
.bv-page .cta-form .fg { margin-bottom: 16px; }
.bv-page .cta-form-row { gap: 14px; }
.bv-page .cta-form .form-ctrl { padding: 13px 15px; }
/* keep the select's extra left padding for the single arrow */
.bv-page .cta-form select.form-ctrl { padding-left: 34px; }


/* ================================================================
   22. INLINE HTML/CSS VECTOR ILLUSTRATIONS  (.arviz-*)
   Self-contained UI-mockup artefacts in the vector-hero aesthetic:
   rounded glass panels, soft brand-tinted shadows, small FA icons,
   NO hard outer border, tasteful looping micro-animations (all gated
   behind prefers-reduced-motion: no-preference). Brand palette only:
   blue #0084c8 / navy #0b1a2b–#122a44 / a green status accent.
   ================================================================ */
.bv-page .arviz {
  --az-blue: var(--accent-cyan);
  --az-blue-d: var(--accent-cyan-dark);
  --az-blue-l: #eaf5fc;
  --az-navy: #0b1a2b;
  --az-green: #16a34a;
  --az-green-l: #dcfce7;
  --az-ink: #1e293b;
  --az-mut: #64748b;
  --az-line: #e6eef5;
  --az-panel-sh: 0 18px 40px -20px rgba(16, 54, 94, 0.35), 0 4px 12px -6px rgba(16, 54, 94, 0.12);
  position: relative;
  width: 100%;
  font-family: "Inter", "Tajawal", sans-serif;
  direction: rtl;
  -webkit-font-smoothing: antialiased;
}
.bv-page .arviz b { font-weight: 700; }
.bv-page .arviz i { font-style: normal; }

/* Neutralise the hero wrapper chrome so the artefact has NO hard
   outer border and provides its own soft depth instead. */
.bv-page .hero-v5-visual:has(.arviz) {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ---- HERO artefact : legal-operations dashboard (flagship) ---- */
.bv-page .arviz-hero { padding: 16px 10px 22px; }
.bv-page .arviz-win {
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--az-panel-sh);
  overflow: hidden;
}
.bv-page .arviz-win-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 14px;
  background: linear-gradient(180deg, #0e2033, #12283f);
}
.bv-page .arviz-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.bv-page .arviz-dot--r { background: #f87171; }
.bv-page .arviz-dot--y { background: #fbbf24; }
.bv-page .arviz-dot--g { background: #34d399; }
.bv-page .arviz-win-title {
  color: #dbe7f4; font-size: .74rem; font-weight: 600;
  margin-inline-start: 8px;
}
.bv-page .arviz-live {
  margin-inline-start: auto; display: inline-flex; align-items: center; gap: 5px;
  color: #9fe6c4; font-size: .66rem; font-weight: 700;
}
.bv-page .arviz-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #34d399; }
.bv-page .arviz-win-body { padding: 14px; display: grid; gap: 12px; }

.bv-page .arviz-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.bv-page .arviz-kpi {
  background: linear-gradient(160deg, #fff, #f5f9fd);
  border: 1px solid var(--az-line);
  border-radius: 12px;
  padding: 11px 10px;
  display: flex; flex-direction: column; gap: 3px;
}
.bv-page .arviz-kpi-ic {
  width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center; margin-bottom: 3px;
  background: var(--az-blue-l); color: var(--az-blue); font-size: .82rem;
}
.bv-page .arviz-kpi-ic--g { background: var(--az-green-l); color: var(--az-green); }
.bv-page .arviz-kpi-ic--w { background: #fef7d6; color: #b7860b; }
.bv-page .arviz-kpi-num { font-size: 1.35rem; font-weight: 800; color: var(--az-ink); line-height: 1; }
.bv-page .arviz-kpi-lbl { font-size: .64rem; color: var(--az-mut); font-weight: 600; }

.bv-page .arviz-chart {
  background: linear-gradient(160deg, #fff, #f7fafd);
  border: 1px solid var(--az-line);
  border-radius: 12px; padding: 12px 12px 10px;
}
.bv-page .arviz-chart-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .68rem; color: var(--az-mut); font-weight: 700; margin-bottom: 10px;
}
.bv-page .arviz-trend { color: var(--az-green); }
.bv-page .arviz-bars { display: flex; align-items: flex-end; gap: 8px; height: 66px; }
.bv-page .arviz-bars span {
  flex: 1; height: var(--h);
  background: linear-gradient(180deg, var(--az-blue), #4fb3e0);
  border-radius: 5px 5px 3px 3px;
  transform-origin: bottom;
}

.bv-page .arviz-rows { display: grid; gap: 7px; }
.bv-page .arviz-rw {
  display: flex; align-items: center; gap: 9px;
  background: #f7fafd; border: 1px solid var(--az-line);
  border-radius: 9px; padding: 8px 11px;
}
.bv-page .arviz-rw-d { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.bv-page .arviz-rw-d--g { background: var(--az-green); }
.bv-page .arviz-rw-d--b { background: var(--az-blue); }
.bv-page .arviz-rw-t { font-size: .74rem; color: var(--az-ink); font-weight: 600; }
.bv-page .arviz-rw-b { margin-inline-start: auto; font-size: .62rem; font-weight: 700; padding: 3px 8px; border-radius: 20px; }
.bv-page .arviz-rw-b--g { background: var(--az-green-l); color: #15803d; }
.bv-page .arviz-rw-b--b { background: var(--az-blue-l); color: var(--az-blue-d); }

/* floating chips — anchored INSIDE the artefact box (no page overflow) */
.bv-page .arviz-float {
  position: absolute; z-index: 3;
  display: flex; align-items: center; gap: 9px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(6px);
  border-radius: 13px;
  padding: 9px 12px;
  box-shadow: 0 14px 30px -14px rgba(16, 54, 94, 0.5);
}
.bv-page .arviz-float--top { top: 4px; inset-inline-start: 0; }
.bv-page .arviz-float--bot { bottom: 6px; inset-inline-end: 0; }
.bv-page .arviz-float-ic {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--az-blue), #38a3d6); color: #fff; font-size: .82rem;
}
.bv-page .arviz-float-tx { display: flex; flex-direction: column; line-height: 1.25; }
.bv-page .arviz-float-tx b { font-size: .72rem; color: var(--az-ink); }
.bv-page .arviz-float-tx small { font-size: .6rem; color: var(--az-mut); }
.bv-page .arviz-ring {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: conic-gradient(var(--az-green) 0 94%, #e6eef5 94% 100%);
}
.bv-page .arviz-ring b {
  width: 24px; height: 24px; border-radius: 50%; background: #fff;
  display: grid; place-items: center; font-size: .58rem; color: #15803d; font-weight: 800;
}

/* ---- HERO enrichment : gauge · workflow strip · overdue row ---- */
.bv-page .arviz-mid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 10px; }
.bv-page .arviz-gauge {
  background: linear-gradient(160deg, #fff, #f7fafd);
  border: 1px solid var(--az-line); border-radius: 12px;
  padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; justify-content: center;
}
.bv-page .arviz-gauge-ring {
  width: 62px; height: 62px; border-radius: 50%; position: relative;
  background: conic-gradient(var(--az-blue) 0 48%, var(--az-green) 48% 76%, #e6eef5 76% 100%);
  display: grid; place-items: center;
}
.bv-page .arviz-gauge-ring::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #fff; }
.bv-page .arviz-gauge-ring b { position: relative; font-size: .82rem; font-weight: 800; color: var(--az-ink); line-height: 1; }
.bv-page .arviz-gauge-ring small { position: relative; font-size: .5rem; color: var(--az-mut); font-weight: 600; }
.bv-page .arviz-gauge-leg { display: grid; gap: 3px; width: 100%; }
.bv-page .arviz-gauge-leg span { display: flex; align-items: center; gap: 6px; font-size: .58rem; color: var(--az-mut); font-weight: 600; }
.bv-page .arviz-lg2 { width: 8px; height: 8px; border-radius: 2px; display: inline-block; flex: none; }
.bv-page .arviz-lg2--b { background: var(--az-blue); }
.bv-page .arviz-lg2--g { background: var(--az-green); }
.bv-page .arviz-lg2--m { background: #cbd8e6; }

/* workflow / automation strip */
.bv-page .arviz-wf {
  background: linear-gradient(160deg, #f4fafe, #eaf4fb);
  border: 1px solid var(--az-line); border-radius: 12px;
  padding: 11px 12px; display: flex; flex-direction: column; gap: 9px; align-items: center;
}
.bv-page .arviz-wf-track { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; }
.bv-page .arviz-wf-node { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 0 auto; }
.bv-page .arviz-wf-node i {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: #fff; border: 1px solid var(--az-line); color: var(--az-mut); font-size: .78rem;
}
.bv-page .arviz-wf-node em { font-style: normal; font-size: .58rem; font-weight: 700; color: var(--az-mut); }
.bv-page .arviz-wf-node--done i { background: var(--az-green-l); border-color: transparent; color: #15803d; }
.bv-page .arviz-wf-node--done em { color: #15803d; }
.bv-page .arviz-wf-node--active i { background: var(--az-blue); border-color: transparent; color: #fff; }
.bv-page .arviz-wf-node--active em { color: var(--az-blue-d); }
.bv-page .arviz-wf-arr {
  flex: 1 1 auto; max-width: 26px; height: 2px; margin-bottom: 16px;
  background: repeating-linear-gradient(90deg, var(--az-blue) 0 4px, transparent 4px 8px);
  opacity: .55;
}
.bv-page .arviz-wf-ai {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .6rem; font-weight: 700; color: var(--az-blue-d);
  background: var(--az-blue-l); padding: 4px 12px; border-radius: 20px;
}
.bv-page .arviz-wf-ai i { color: var(--az-blue); }

/* overdue task row */
.bv-page .arviz-rw-d--o { background: #f97316; }
.bv-page .arviz-rw-b--o { background: #fee2d6; color: #c2410c; }

/* ---- LOOPING MICRO-ANIMATIONS (hero only, motion-safe) ---- */
@media (prefers-reduced-motion: no-preference) {
  .bv-page .arviz-bars span { animation: azBarRise 3.4s var(--ease-in-out) infinite; }
  .bv-page .arviz-bars span:nth-child(2) { animation-delay: .2s; }
  .bv-page .arviz-bars span:nth-child(3) { animation-delay: .4s; }
  .bv-page .arviz-bars span:nth-child(4) { animation-delay: .6s; }
  .bv-page .arviz-bars span:nth-child(5) { animation-delay: .8s; }
  .bv-page .arviz-bars span:nth-child(6) { animation-delay: 1s; }
  .bv-page .arviz-bars span:nth-child(7) { animation-delay: 1.2s; }
  .bv-page .arviz-live-dot { animation: azPing 1.8s ease-in-out infinite; }
  .bv-page .arviz-float { animation: azBob 5s var(--ease-in-out) infinite; }
  .bv-page .arviz-float--bot { animation-delay: -2.5s; }
  .bv-page .arviz-wf-node--active i { animation: azPulse 2.4s var(--ease-in-out) infinite; }
  .bv-page .arviz-wf-ai { animation: azGlow 2.8s var(--ease-in-out) infinite; }
}
@keyframes azBarRise { 0%, 100% { transform: scaleY(0.72); } 50% { transform: scaleY(1); } }
@keyframes azPing { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(1.5); } }
@keyframes azBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes azPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 132, 200, 0.4); } 50% { box-shadow: 0 0 0 7px rgba(0, 132, 200, 0); } }
@keyframes azGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 132, 200, 0.3); } 50% { box-shadow: 0 0 0 6px rgba(0, 132, 200, 0); } }

/* ---- HERO ILLUSTRATION RESPONSIVE ---- */
@media (max-width: 480px) {
  .bv-page .arviz-mid { grid-template-columns: 1fr; }
  .bv-page .arviz-float-tx small { display: none; }
  .bv-page .arviz-wf-node em { font-size: .52rem; }
}


/* ================================================================
   21. DARK NAVY GRADIENT  (match how-we-help-legal-sector reference)
   All dark bands + the dark product strip use this navy gradient.
   Kept LAST with !important so it wins over the shared flat --bg-dark.
   ================================================================ */
.bv-page .dark-section,
.bv-page .cta-form-section {
  background: linear-gradient(180deg, #0b1a2b 0%, #122a44 100%) !important;
}
/* Product strip: flat navy to match the English product pages (not the deep gradient) */
.bv-page .prod-nav-strip {
  background: #1e2a3a !important;
}
/* Current product highlighted (as on the English strip): cyan border + subtle blue tint */
.bv-page .prod-nav-card.is-current {
  border-color: var(--accent-cyan) !important;
  background: linear-gradient(180deg, rgba(0,132,200,0.16), rgba(0,132,200,0.05)) !important;
  box-shadow: 0 0 0 1px var(--accent-cyan) inset !important;
}


/* ================================================================
   23. SPECIALIZED vs GENERIC COMPARISON  (.cmp-*)
   Answer-first, high AI-citation two-column compare. Inherits page
   font (Tajawal) — no hardcoded Arabic font here.
   ================================================================ */
.bv-page .cmp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 40px;
}
.bv-page .cmp-col {
  background: var(--bg-surface);
  border: 1px solid var(--line-hair);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  box-shadow: var(--sh-card);
}
.bv-page .cmp-col--win { border-color: var(--accent-cyan); box-shadow: var(--sh-card-hover); }
.bv-page .cmp-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.bv-page .cmp-ic {
  width: 46px; height: 46px; border-radius: 12px; flex: none;
  display: grid; place-items: center; font-size: 1.2rem;
}
.bv-page .cmp-col--win .cmp-ic { background: var(--accent-cyan-light); color: var(--accent-cyan-dark); }
.bv-page .cmp-col--gen .cmp-ic { background: #eef2f6; color: #64748b; }
.bv-page .cmp-head h3 { margin: 0; font-size: 1.12rem; color: var(--text-primary); }
.bv-page .cmp-list { list-style: none; padding: 0; margin: 0; }
.bv-page .cmp-list li { display: flex; align-items: flex-start; gap: 10px; margin: 11px 0; color: var(--text-secondary); font-size: .96rem; line-height: 1.7; }
.bv-page .cmp-col--win .cmp-list li i { color: var(--accent-cyan); margin-top: 5px; }
.bv-page .cmp-col--gen .cmp-list li i { color: #94a3b8; margin-top: 5px; }

/* ---- capability pills (dark unified-view section) ---- */
.bv-page .cap-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.bv-page .cap-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border-radius: 100px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #dbe7f4; font-size: .9rem; font-weight: 600;
  transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.bv-page .cap-pill i { color: var(--accent-cyan); }
@media (hover: hover) and (pointer: fine) {
  .bv-page .cap-pill:hover { border-color: var(--accent-cyan); background: rgba(0, 132, 200, 0.14); }
}

/* ---- geo-authority band ---- */
.bv-page .geo-auth-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 40px;
}
.bv-page .geo-auth-card {
  background: var(--bg-surface);
  border: 1px solid var(--line-hair);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  text-align: center;
  box-shadow: var(--sh-card);
}
.bv-page .geo-auth-num { font-size: 1.9rem; font-weight: 800; color: var(--accent-cyan-dark); line-height: 1.1; }
.bv-page .geo-auth-lbl { margin: 6px 0 0; color: var(--text-secondary); font-size: .92rem; text-align: center; }

@media (max-width: 992px) {
  .bv-page .cmp-grid { grid-template-columns: 1fr; }
  .bv-page .geo-auth-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .bv-page .geo-auth-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   HERO illustration: use page Arabic font (Tajawal), smaller cards
   ================================================================ */
.bv-page .arviz { font-family: "Inter", "Tajawal", sans-serif; max-width: 468px; margin-inline: auto; }
.bv-page .arviz-win-body { padding: 11px; gap: 9px; }
.bv-page .arviz-kpis { gap: 8px; }
.bv-page .arviz-kpi { padding: 10px 9px; }
.bv-page .arviz-kpi-num { font-size: 1.08rem; }
.bv-page .arviz-kpi-lbl { font-size: .58rem; }
.bv-page .arviz-bars { height: 52px; }
.bv-page .arviz-rw { padding: 6px 9px; }
.bv-page .arviz-rw-t { font-size: .68rem; }
.bv-page .arviz-win-title { font-size: .82rem; }

/* Widen section description / answer-summary paragraphs (global — Arabic reads wide) */
.bv-page .mx-auto-md { max-width: 900px !important; }
.bv-page .mx-auto-sm { max-width: 760px !important; }
@media (max-width: 992px) {
  .bv-page .mx-auto-md { max-width: 720px !important; }
  .bv-page .mx-auto-sm { max-width: 640px !important; }
}

/* Section illustration SVGs are 1200x760 (native). Pin the containers to that
   aspect ratio so the diagram fills edge-to-edge: no cropped headers/nodes
   (object-fit:cover was clipping the RTL header at the right edge) and no
   letterbox blank space. */
.bv-page .prod-section-img--tall,
.bv-page .feature-split-img {
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: 1200 / 760;
}
.bv-page .prod-section-img--tall img,
.bv-page .feature-split-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center;
}
/* Card treatment for the DARK dashboard SVG: rounded corners + a soft card
   shadow give it the same floating-card feel as the other section images —
   but NO light border (a light stroke reads as a white line on the dark frame;
   the other images are light so their border is invisible). Arabic-only. */
.bv-page .video-embed-wrap {
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 10px 30px -6px rgba(15, 43, 70, 0.18) !important;
  overflow: hidden;
}