/* ==========================================================================
   Deqa UI 2026 — global refinements (loaded after theme/style/ltr/responsive)
   Findings: #1 on-primary token · #4 announcement bar · #5 glass sticky nav
             #6/#7 footer · #8 motion · #9 tokens · #10 RTL/Arabic type
   Backup of the previous state: child/backup/ui-backup-2026-08-30/
   ========================================================================== */

/* ---------- #9  Design tokens ------------------------------------------- */
:root {
  --on-primary: #FFFFFF;
  --tint: rgba(79, 70, 229, 0.08);
  --tint-strong: rgba(79, 70, 229, 0.16);
  --glass: rgba(255, 255, 255, 0.78);
  --hairline: rgba(31, 36, 46, 0.08);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
  --shadow-md: 0 8px 30px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 24px 60px rgba(16, 24, 40, 0.14);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-pill: 100px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 250ms;
  --text_secondary: #4B5565;          /* light-mode value was undefined in theme.css */
}
body.dark_theme {
  --on-primary: #0B0C10;
  --tint: rgba(129, 140, 248, 0.14);
  --tint-strong: rgba(129, 140, 248, 0.24);
  --glass: rgba(16, 17, 20, 0.72);
  --hairline: rgba(255, 255, 255, 0.08);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6);
}

/* ---------- #1  Filled buttons keep readable text in both themes -------- */
.btn_primary,
.btn_primary:hover,
.btn_primary:focus,
.newsletter_signup .btn_primary,
.btn.btn-primary,
.btn.btn-primary:hover {
  color: var(--on-primary) !important;
}
.btn_primary:hover { background: var(--primary); filter: brightness(1.08); }
/* final CTA band: heading and buttons on the indigo gradient */
section[style*="linear-gradient(135deg, #6366f1"] h2,
section[style*="linear-gradient(135deg, #4F46E5"] h2,
.bg_primary h2 { color: #fff !important; }
section[style*="linear-gradient(135deg, #6366f1"] p,
section[style*="linear-gradient(135deg, #4F46E5"] p,
.bg_primary p { color: rgba(255, 255, 255, .92) !important; opacity: 1 !important; }
body.dark_theme .btn-light { background: #F7F8FA; color: #1F242E; }

/* ---------- Hero / global CTAs: icon spacing + size --------------------- */
.btn_primary,
.btn_secondary,
.btn.btn-primary,
.btn.btn-light,
.btn.btn-outline-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
}
.btn_primary > i,
.btn_secondary > i,
.btn.btn-primary > i,
.btn.btn-light > i,
.btn.btn-outline-light > i {
  margin: 0 !important;          /* neutralise me-2/ms-2 (wrong side in RTL) */
  font-size: 1.2em;
  line-height: 1;
  transition: transform var(--dur) var(--ease);
}
.btn_primary.btn-lg, .btn_secondary.btn-lg { gap: .7rem; padding-inline: 1.4rem; }
.btn_primary:hover > i.fa-arrow-right,
.btn_primary:hover > i.fa-play-circle { transform: translateX(3px); }
[dir="rtl"] .btn_primary:hover > i.fa-arrow-right,
[dir="rtl"] .btn_primary:hover > i.fa-play-circle { transform: translateX(-3px); }

/* ---------- #4  Announcement bar ---------------------------------------- */
.promo_bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  padding: .55rem 3rem;
  background: var(--tint);
  color: var(--secondary);
  font-size: .85rem;
  font-weight: 500;
  border-bottom: 1px solid var(--hairline);
}
.promo_bar[hidden] { display: none; }
.promo_bar .promo_dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--primary); flex: none;
}
.promo_bar .promo_text { display: inline-flex; align-items: center; gap: .5rem; }
.promo_bar .promo_text i { color: var(--primary); }
.promo_bar .promo_cta {
  display: inline-flex; align-items: center; gap: .35rem;
  color: var(--primary); font-weight: 700; text-decoration: none; white-space: nowrap;
}
.promo_bar .promo_cta i { transition: transform var(--dur) var(--ease); }
.promo_bar .promo_cta:hover i { transform: translateX(3px); }
[dir="rtl"] .promo_bar .promo_cta:hover i { transform: translateX(-3px); }
.promo_bar .promo_close {
  position: absolute; inset-inline-end: 1rem; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent;
  color: var(--text_secondary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.promo_bar .promo_close:hover { background: var(--tint-strong); color: var(--secondary); }
@media (max-width: 767px) {
  .promo_bar { flex-wrap: wrap; gap: .25rem .6rem; font-size: .78rem; padding: .5rem 2.4rem .5rem 1rem; text-align: center; line-height: 1.35; }
  .promo_bar .promo_dot { display: none; }
  .promo_bar .promo_text { display: inline; }
  .promo_bar .promo_text i { display: none; }
  .promo_bar .promo_close { inset-inline-end: .5rem; }
}

/* ---------- #5  Sticky navigation: glass, hairline, smooth --------------- */
#navbar {
  transition: padding var(--dur) var(--ease), background-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}
/* The glass layer lives on a pseudo-element: a backdrop-filter on #navbar itself
   would make it the containing block for the fixed-position offcanvas menu inside it. */
#navbar.nav_sticky {
  background: transparent !important;
  border-bottom-color: var(--hairline);
  box-shadow: var(--shadow-md);
}
#navbar.nav_sticky::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  pointer-events: none;
}
@supports not (backdrop-filter: blur(1px)) {
  #navbar.nav_sticky::before { background: var(--bs-white); }
}
.site_logo img { transition: width var(--dur) var(--ease); }
#navbar.nav_sticky .site_logo img { width: 96px; }
/* nav link underline slides in from the start edge */
.nav_ul li a { padding-bottom: .35rem; }
.nav_ul li a::after {
  content: ''; position: absolute; inset-inline-start: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--primary); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease);
}
[dir="rtl"] .nav_ul li a::after { transform-origin: right; }
.nav_ul li a:hover::after, .nav_ul li a.active::after { transform: scaleX(1); }
.btn_dark_light_mode { border-radius: 50%; transition: background-color var(--dur) var(--ease); }
.btn_dark_light_mode:hover { background: var(--tint); }

/* ---------- #6 / #7  Footer --------------------------------------------- */
.footer_2026 { padding-block: 3.5rem 2rem; }
.footer_2026 .footer_wrap { padding: 2rem !important; }
.footer_wrap::after { display: none; }                      /* remove the 250px blur glow */
.footer_2026 .newsletter_card {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  padding: 1.6rem 2rem; border-radius: var(--radius-lg);
  background: var(--secondary_alt); border: 1px solid var(--secondary_border);
  margin-bottom: 2.75rem;
}
.footer_2026 .newsletter_card h3 { font-size: 1.15rem; margin: 0 0 .25rem; }
.footer_2026 .newsletter_card p { margin: 0; color: var(--text_secondary); font-size: .9rem; }
.footer_2026 .newsletter_signup {
  display: flex; gap: .5rem; padding: 5px; width: 100%; max-width: 440px; margin: 0;
  border-radius: var(--radius-pill); background: var(--bs-white); border: 1px solid var(--secondary_border);
}
.footer_2026 .newsletter_signup input {
  flex: 1; min-width: 0; border: 0; background: transparent; padding: .6rem 1rem; color: var(--secondary);
  font-family: inherit; font-weight: 500; outline: none;
}
.footer_2026 .newsletter_signup input::placeholder { color: var(--text_secondary); font-weight: 400; }
.footer_2026 .newsletter_signup .btn_primary { border-radius: var(--radius-pill); padding: .6rem 1.3rem; }
.footer_2026 .brand_col { display: flex; flex-direction: column; gap: 1rem; max-width: 320px; }
.footer_2026 .brand_col .site_logo img { width: 120px; }
.footer_2026 .brand_col p { color: var(--text_secondary); line-height: 1.6; margin: 0; }
.footer_2026 .f_col_title {
  font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--secondary); margin-bottom: .9rem;
}
.footer_2026 .f_links { gap: .7rem !important; padding: 0; margin: 0; }
.footer_2026 .f_links a { font-size: .92rem; }
.footer_2026 .f_social_links { gap: .5rem !important; padding: 0; margin: 0; }
.footer_2026 .f_social_links a {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--secondary_border);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text_secondary); font-size: 1rem; filter: none !important;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.footer_2026 .f_social_links a:hover { color: var(--primary); border-color: var(--primary); background: var(--tint); transform: translateY(-1px); filter: none !important; }
body.dark_theme .footer_2026 .f_social_links a { filter: none !important; }  /* was invert(1) */
.footer_2026 .f_location { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--text_secondary); }
.footer_2026 .f_location .dot { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 4px rgba(34,197,94,.18); }
.footer_2026 .footer_bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  padding-top: 1.4rem; margin-top: 2.5rem; border-top: 1px solid var(--secondary_border);
  font-size: .85rem; color: var(--text_secondary);
}
.footer_2026 .footer_bottom .legal { display: flex; align-items: center; gap: 1.3rem; }
.footer_2026 .footer_bottom .legal a { color: var(--text_secondary); text-decoration: none; }
.footer_2026 .footer_bottom .legal a:hover { color: var(--primary); }
.lang_pill {
  display: inline-flex; align-items: center; padding: 3px; border-radius: var(--radius-pill);
  border: 1px solid var(--secondary_border); font-size: .75rem; font-weight: 700; text-decoration: none; line-height: 1;
}
.lang_pill span { padding: 5px 10px; border-radius: var(--radius-pill); color: var(--text_secondary); }
.lang_pill span.on { background: var(--secondary); color: var(--bs-white); }
@media (max-width: 991px) {
  .footer_2026 .newsletter_card { flex-direction: column; align-items: stretch; text-align: center; }
  .footer_2026 .newsletter_signup { max-width: none; }
  .footer_2026 .footer_bottom { justify-content: center; text-align: center; }
}

/* ---------- #9  Public view must not show editor placeholders ----------- */
.media-placeholder { border: 1px solid var(--secondary_border) !important; background: var(--secondary_alt); }
.media-placeholder.video { border-color: var(--secondary_border) !important; }
.bundle_box { border: 1px solid var(--secondary_border) !important; }
body.dark_theme .media-placeholder { background: var(--bg_primary_alt); }

/* ---------- #8  Motion --------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
  }
  [data-reveal].is-in { opacity: 1; transform: none; }
  .btn_primary, .btn_secondary, .btn.btn-primary, .btn.btn-light, .btn.btn-outline-light {
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
                background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .btn_primary:hover, .btn.btn-primary:hover, .btn.btn-light:hover { transform: translateY(-1px); box-shadow: 0 10px 24px var(--tint-strong); }
  .btn_secondary:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
  .shadow_sm, .card { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
  .shadow_sm:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
  .whatsapp-fixed { transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
  .whatsapp-fixed:hover { transform: scale(1.06); }
}

/* ---------- #10  RTL / Arabic typography -------------------------------- */
html[dir="rtl"] body { font-size: 16px; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] .display-4 {
  line-height: 1.35; letter-spacing: 0;
}
html[dir="rtl"] .display-4 { font-size: calc(1.475rem + 2.4vw); }
html[dir="rtl"] p, html[dir="rtl"] li { line-height: 1.75; }
/* keep KPI numerals western and tabular in both scripts */
.txt_secondary, .footer_bottom, .promo_bar {
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
/* logical-property fixes for the language link + WhatsApp button */
html[dir="rtl"] .whatsapp-fixed { right: auto; left: 40px; }
@media (max-width: 800px) { html[dir="rtl"] .whatsapp-fixed { left: 5px; } }

/* ---------- logo light/dark swap (header + footer) ---------------------- */
.site_logo .img_dark { display: none; }
body.dark_theme .site_logo .img_light { display: none; }
body.dark_theme .site_logo .img_dark { display: inline-block; }

/* ---------- Theme toggle: one source of truth (body.dark_theme), currentColor icons ---- */
.btn_dark_light_mode { width: 36px; height: 36px; padding: 0; color: var(--text_secondary); display: inline-flex; align-items: center; justify-content: center; }
.btn_dark_light_mode:hover { color: var(--primary); }
.btn_dark_light_mode i { position: absolute; font-size: 1.05rem; line-height: 1; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.btn_dark_light_mode .icon_moon { opacity: 1; transform: rotate(0); }
.btn_dark_light_mode .icon_sun  { opacity: 0; transform: rotate(-60deg); }
body.dark_theme .btn_dark_light_mode .icon_moon { opacity: 0; transform: rotate(60deg); }
body.dark_theme .btn_dark_light_mode .icon_sun  { opacity: 1; transform: rotate(0); }

/* ---------- Header language pill (same component as footer) ------------ */
.nav_btn { align-items: center; }
.nav_btn .lang_pill { flex: none; }
#offcanvas .nav_btn .lang_pill { width: auto !important; align-self: center; }
.nav_ul li a, .nav_btn a, .nav_btn .btn_primary { white-space: nowrap; }
.nav_btn .lang_pill span { padding: 4px 8px; }
@media (min-width: 1200px) and (max-width: 1500px) {
  .nav_ul li { margin-right: 14px; }
  .nav_btn { gap: .75rem !important; }
  .nav_ul li a { font-size: .95rem; }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .nav_ul li { margin-right: 8px; }
  .nav_ul li a { font-size: .9rem; }
  .nav_btn { gap: .6rem !important; }
  .nav_btn .btn_primary { padding-inline: 1rem; font-size: .9rem; }
  .site_logo img { width: 96px; }
  .site_logo { margin-right: 0 !important; }
}

/* ---------- Header utility row: consistent vertical rhythm -------------- */
.nav_btn { align-items: center; }
.nav_btn .nav-link { padding: 0; line-height: 1; transform: none !important; }
.nav_btn .btn_primary {
  min-width: 0; padding: 9px 18px; line-height: 1.25; border-radius: var(--radius-pill);
}
html[dir="rtl"] .btn_primary, html[dir="rtl"] .btn_secondary { padding-top: 8px; padding-bottom: 8px; line-height: 1.5; }
html[dir="rtl"] .nav_btn .btn_primary { padding: 8px 16px; }

/* ---------- Hero headline scale ----------------------------------------- */
.banner h1.display-4 {
  font-size: clamp(1.9rem, 1.15rem + 1.9vw, 2.9rem) !important;
  line-height: 1.15 !important;
  letter-spacing: -.015em;
  text-wrap: balance;
}
html[dir="rtl"] .banner h1.display-4 { font-size: clamp(1.8rem, 1.1rem + 1.8vw, 2.7rem) !important; line-height: 1.35 !important; letter-spacing: 0; }
.banner p.fs-5 { font-size: 1.1rem !important; }

/* ---------- Bootstrap .btn-primary → brand indigo (mobile floating CTA etc.) ---- */
.btn.btn-primary {
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: #6761df;
  --bs-btn-hover-border-color: #6761df;
  --bs-btn-active-bg: #4338CA;
  --bs-btn-active-border-color: #4338CA;
  --bs-btn-color: var(--on-primary);
  --bs-btn-hover-color: var(--on-primary);
  --bs-btn-active-color: var(--on-primary);
  --bs-btn-focus-shadow-rgb: 79, 70, 229;
  border-radius: var(--radius-pill);
  font-weight: 700;
}
.fixed-bottom.bg-white {
  background: var(--glass) !important;
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-top-color: var(--hairline) !important;
  box-shadow: 0 -8px 30px rgba(16, 24, 40, .08) !important;
}
body.dark_theme .fixed-bottom.bg-white { box-shadow: 0 -8px 30px rgba(0, 0, 0, .45) !important; }

/* ---------- Mobile menu (offcanvas): centred utility buttons ------------ */
@media (max-width: 1199px) {
  #offcanvas .nav_btn { align-items: center; gap: .9rem !important; }
  #offcanvas .nav_btn > a { width: 100%; display: flex; justify-content: center; align-items: center; text-align: center; }
  #offcanvas .nav_btn .nav-link { padding: .7rem 1rem; font-size: 1rem !important; border: 1px solid var(--secondary_border); border-radius: var(--radius-pill); }
  #offcanvas .nav_btn .btn_primary { padding: .75rem 1rem; }
  #offcanvas .nav_btn .lang_pill { width: auto !important; }
}

/* ---------- Reserve space under the mobile floating CTA ----------------- */
@media (max-width: 767.98px) {
  body:has(> .fixed-bottom.d-md-none, .fixed-bottom.d-md-none) .footer_2026,
  body.has-floating-cta .footer_2026 { padding-bottom: calc(var(--floating-cta-h, 84px) + 1rem); }
}

/* ==========================================================================
   Round 2 — #12 product accents · #16 card recipe · #17 accessibility · #18 perf
   ========================================================================== */

/* ---------- #12  Product accent tokens (harmonised with the indigo brand) --- */
:root {
  --p-performance: #4F46E5;
  --p-experience:  #0E8A7D;   /* teal, AA on white */
  --p-ads:         #B4530A;   /* deep amber, AA on white */
  --p-performance-tint: rgba(79, 70, 229, .10);
  --p-experience-tint:  rgba(14, 138, 125, .10);
  --p-ads-tint:         rgba(180, 83, 10, .10);
}
body.dark_theme {
  --p-performance: #A5B4FC;
  --p-experience:  #5EEAD4;
  --p-ads:         #FCD34D;
  --p-performance-tint: rgba(165, 180, 252, .14);
  --p-experience-tint:  rgba(94, 234, 212, .14);
  --p-ads-tint:         rgba(252, 211, 77, .14);
}
.accent-performance { --accent: var(--p-performance); --accent-tint: var(--p-performance-tint); }
.accent-experience  { --accent: var(--p-experience);  --accent-tint: var(--p-experience-tint); }
.accent-ads         { --accent: var(--p-ads);         --accent-tint: var(--p-ads-tint); }
.accent-brand       { --accent: var(--primary);       --accent-tint: var(--tint); }
.accent_text { color: var(--accent, var(--primary)); }
.accent_chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .35rem .8rem; border-radius: var(--radius-pill);
  background: var(--accent-tint, var(--tint)); color: var(--accent, var(--primary));
  font-size: .8rem; font-weight: 700; letter-spacing: .02em;
}
.accent_icon {
  width: 44px; height: 44px; border-radius: 12px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-tint, var(--tint)); color: var(--accent, var(--primary)); font-size: 1.05rem;
}
.accent_rule { border-top: 2px solid var(--accent, var(--primary)); }

/* ---------- #16  Card recipe ------------------------------------------------ */
.card_2026 {
  background: var(--bs-white); border: 1px solid var(--secondary_border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
a.card_2026 { text-decoration: none; color: inherit; display: block; }
.card_2026.is-hover:hover, a.card_2026:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--accent, var(--primary)); }
.card_2026--tinted { background: var(--accent-tint, var(--tint)); border-color: transparent; box-shadow: none; }
.card_2026--flat { box-shadow: none; }
.card_2026 .card_media { border-radius: calc(var(--radius-md) - 4px); overflow: hidden; background: var(--secondary_alt); aspect-ratio: 16 / 10; }
.card_2026 .card_media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card_2026 h3, .card_2026 h4, .card_2026 h5 { color: var(--secondary); }
.card_2026 p { color: var(--text_secondary); }
/* legacy card classes inherit the recipe */
.shadow_sm.rounded-3.border_silver, .bg_white_d.rounded-4.border_silver, .border.rounded-4.p-4 {
  box-shadow: var(--shadow-sm); border: 1px solid var(--secondary_border) !important; border-radius: var(--radius-md) !important;
}
.media-placeholder { border-radius: calc(var(--radius-md) - 4px) !important; min-height: 0 !important; background: var(--secondary_alt) !important; }
.media-placeholder img.media-placeholder-id { display: block; width: 100%; height: auto; }

/* section rhythm */
.section_head { max-width: 720px; margin-bottom: 2.5rem; }
.section_head .eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); margin-bottom: .75rem; }
.section_head .eyebrow::before { content: ''; width: 18px; height: 2px; background: var(--primary); border-radius: 2px; }
.section_head h2 { font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.25rem); line-height: 1.2; letter-spacing: -.015em; margin-bottom: .75rem; }
.section_head p { color: var(--text_secondary); font-size: 1.05rem; margin: 0; }
.section_head.text-center { margin-inline: auto; }
.section_head.text-center .eyebrow::before { display: none; }
html[dir="rtl"] .section_head h2 { letter-spacing: 0; line-height: 1.35; }

/* ---------- #17  Accessibility ------------------------------------------- */
.skip_link {
  position: absolute; inset-inline-start: 1rem; top: -100px; z-index: 10000;
  padding: .6rem 1rem; border-radius: var(--radius-pill);
  background: var(--secondary); color: var(--bs-white); font-weight: 700; text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip_link:focus { top: 1rem; outline: none; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--primary) !important; outline-offset: 2px; border-radius: 6px;
}
.btn_primary:focus-visible, .btn_secondary:focus-visible, .btn:focus-visible, .lang_pill:focus-visible,
.btn_dark_light_mode:focus-visible, .whatsapp-fixed:focus-visible { border-radius: var(--radius-pill); box-shadow: none; }
.nav_ul li a:focus-visible { border-radius: 4px; }
.visually-hidden, .sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.rating_stars { display: inline-flex; gap: 2px; color: #F59E0B; }
.rating_stars i { font-size: .85rem; }
@media (forced-colors: active) { .btn_primary, .btn_secondary { border: 2px solid ButtonText; } }

/* ---------- #18  Perf helpers -------------------------------------------- */
img { max-width: 100%; height: auto; }
.banner img[fetchpriority="high"] { content-visibility: auto; }
[data-lazy-section] { content-visibility: auto; contain-intrinsic-size: auto 600px; }

/* ---------- Home: product tabs ------------------------------------------ */
.product_tabs { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 2rem; padding: 5px; border-radius: var(--radius-pill); background: var(--secondary_alt); border: 1px solid var(--secondary_border); width: fit-content; max-width: 100%; }
.product_tab { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.1rem; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text_secondary); font-weight: 700; font-size: .95rem; cursor: pointer; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); white-space: nowrap; }
.product_tab:hover { color: var(--accent, var(--primary)); }
.product_tab.active { background: var(--accent, var(--primary)); color: var(--on-primary); box-shadow: var(--shadow-sm); }
body.dark_theme .product_tab.active { color: #0B0C10; }
.product_panel { position: relative; }
.product_panel[hidden] { display: none; }
.product_panel.active { animation: panel_in .35s var(--ease); }
@keyframes panel_in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .product_panel.active { animation: none; } }
.anchor_target { position: absolute; top: -120px; }
.feature_tile { display: flex; gap: .85rem; align-items: flex-start; padding: .9rem; border-radius: var(--radius-md); background: var(--bs-white); border: 1px solid var(--secondary_border); height: 100%; }
.feature_tile h6, .feature_tile .h6 { color: var(--secondary); font-size: .95rem; margin-bottom: .25rem; }
.feature_tile p { color: var(--text_secondary); }
.feature_thumb { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; flex: none; background: var(--secondary_alt); }
.btn_arrow2.accent_text { color: var(--accent, var(--primary)) !important; font-weight: 700; }

/* ---------- Home: sectors ------------------------------------------------ */
.sector_tile { display: flex; gap: .9rem; align-items: flex-start; }
.sector_thumb { width: 72px; height: 72px; border-radius: 14px; object-fit: cover; flex: none; background: var(--secondary_alt); }
.sector_tile h5 { font-size: 1.02rem; }
.sector_tile p { color: var(--text_secondary); }

/* ---------- Home: testimonials ------------------------------------------- */
.testimonials_slider { padding: .5rem .25rem 0; }
.testimonials_slider .swiper-slide { height: auto; }
.testimonial_card { position: relative; display: flex; flex-direction: column; }
.testimonial_card .quote_mark { position: absolute; top: 1.25rem; inset-inline-end: 1.5rem; font-size: 2rem; color: var(--tint-strong); }
.testimonial_card blockquote p { font-size: 1.08rem; line-height: 1.65; color: var(--secondary); text-wrap: pretty; }
html[dir="rtl"] .testimonial_card blockquote p { line-height: 1.85; }
.slider_btn { position: static !important; width: 44px !important; height: 44px !important; margin: 0 !important; border-radius: 50%; border: 1px solid var(--secondary_border); background: var(--bs-white); color: var(--secondary); display: inline-flex; align-items: center; justify-content: center; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.slider_btn::after { display: none !important; }
.slider_btn:hover { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.slider_btn.swiper-button-disabled { opacity: .35; }

/* ---------- Home: logo strip --------------------------------------------- */
.logo_strip_title { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text_secondary); margin-bottom: 1rem; }
.logo_strip { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.logo_item { display: inline-flex; align-items: center; justify-content: center; height: 72px; padding: 0 1.25rem; border-radius: var(--radius-md); background: var(--bs-white); border: 1px solid var(--secondary_border); color: var(--secondary); font-weight: 700; }
.logo_item img { height: 36px; width: auto; max-width: 160px; object-fit: contain; filter: grayscale(1); opacity: .8; transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.logo_item:hover img { filter: none; opacity: 1; }
body.dark_theme .logo_item img { filter: grayscale(1) brightness(1.6); }
body.dark_theme .logo_item:hover img { filter: brightness(1.2); }

/* ---------- Home: pricing teaser ----------------------------------------- */
.pricing_teaser { background: linear-gradient(135deg, var(--tint), transparent 60%), var(--bs-white); }
.section_eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); margin-bottom: .75rem; }
.pricing_teaser h2 { font-size: clamp(1.4rem, 1rem + 1.2vw, 1.9rem); }
.teaser_points li { display: flex; align-items: center; gap: .6rem; padding: .3rem 0; color: var(--secondary); }
.teaser_points li i { color: var(--primary); width: 18px; text-align: center; }

/* ---------- Home legacy image sections: keep large media, brand accents ---- */
.smart_solution_sec h4[style*="--p-"], #performance h4[style*="--p-"] { font-weight: 700; }
.media-placeholder.small, .media-placeholder.video { min-height: 0 !important; }
.media-placeholder img.media-placeholder-id { border-radius: calc(var(--radius-md) - 4px); }
.btn_arrow2 { font-weight: 700; }

/* ---------- Pricing page ------------------------------------------------- */
.billing_toggle { display: inline-flex; padding: 4px; border-radius: var(--radius-pill); background: var(--secondary_alt); border: 1px solid var(--secondary_border); }
.billing_btn { border: 0; background: transparent; padding: .5rem 1rem; border-radius: var(--radius-pill); font-weight: 700; font-size: .9rem; color: var(--text_secondary); cursor: pointer; display: inline-flex; align-items: center; gap: .5rem; }
.billing_btn.active { background: var(--bs-white); color: var(--secondary); box-shadow: var(--shadow-sm); }
.billing_save { font-size: .7rem; padding: .15rem .5rem; border-radius: var(--radius-pill); background: rgba(34, 197, 94, .15); color: #15803D; }
body.dark_theme .billing_save { color: #4ADE80; }
.pricing-content[hidden] { display: none; }
.plan_card { position: relative; }
.plan_card--featured { border: 2px solid var(--accent, var(--primary)); box-shadow: var(--shadow-md); }
.plan_badge { position: absolute; top: -12px; inset-inline-start: 50%; transform: translateX(-50%); padding: .3rem .9rem; border-radius: var(--radius-pill); background: var(--accent, var(--primary)); color: var(--on-primary); font-size: .75rem; font-weight: 700; white-space: nowrap; }
html[dir="rtl"] .plan_badge { transform: translateX(50%); }
body.dark_theme .plan_badge { color: #0B0C10; }
.plan_price { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-bottom: .25rem; }
.plan_amount { font-size: 2.4rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--secondary); font-variant-numeric: tabular-nums; }
.plan_amount--custom { font-size: 1.6rem; }
.plan_unit { color: var(--text_secondary); font-size: .95rem; }
.plan_feats li { display: flex; gap: .6rem; align-items: flex-start; padding: .35rem 0; color: var(--secondary); font-size: .95rem; }
.plan_feats li i { color: var(--accent, var(--primary)); margin-top: .3rem; font-size: .8rem; }
.plan_card .btn_primary { background: var(--accent, var(--primary)); border-color: var(--accent, var(--primary)); }
.bundle_box { background: linear-gradient(135deg, var(--tint), transparent 70%), var(--bs-white); }

/* ---------- Contact page ------------------------------------------------- */
.contact_card { align-items: center; }
.contact_icon { width: 56px; height: 56px; border-radius: 16px; font-size: 1.25rem; }
.contact_link { color: var(--primary); text-decoration: none; font-weight: 700; }
.contact_link:hover { text-decoration: underline; }
.contactus_form .contactus_input { margin-bottom: 0; }
.contactus_form input, .contactus_form textarea { width: 100%; padding: .7rem .9rem; border: 1px solid var(--secondary_border); border-radius: var(--radius-sm); background: var(--bs-white); color: var(--secondary); font-family: inherit; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.contactus_form input:focus, .contactus_form textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--tint); }
.contactus_form input.is-invalid, .contactus_form textarea.is-invalid { border-color: #DC2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, .12); }
.field_error { color: #DC2626; font-size: .8rem; margin: .3rem 0 0; min-height: 0; }
.field_error:empty { display: none; }
.hp_field { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; opacity: 0; pointer-events: none; }
.form_status { padding: .9rem 1rem; border-radius: var(--radius-sm); font-weight: 600; }
.form_status--ok { background: rgba(34, 197, 94, .12); color: #15803D; }
.form_status--err { background: rgba(220, 38, 38, .12); color: #B91C1C; }
body.dark_theme .form_status--ok { color: #4ADE80; } body.dark_theme .form_status--err { color: #FCA5A5; }
.feature_thumb { width: 96px; height: 96px; border-radius: 14px; }
.feature_tile { padding: .75rem; }

/* ---------- Home: trust logos (large, full colour) ------------------------ */
.logo_strip_title { font-size: .8rem; letter-spacing: .16em; margin-bottom: 1.25rem; }
.logo_grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; }
.logo_card { width: 260px; max-width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.logo_card_media {
  width: 100%; height: 150px; display: flex; align-items: center; justify-content: center; padding: 1.25rem 1.5rem;
  background: var(--bs-white); border: 1px solid var(--secondary_border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.logo_card:hover .logo_card_media { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--primary); }
.logo_card_media img { max-height: 84px; max-width: 200px; width: auto; height: auto; object-fit: contain; filter: none; opacity: 1; }
body.dark_theme .logo_card_media { background: #F7F8FA; }   /* keep brand logos on a light plate in dark mode */
.logo_fallback { font-size: 1.35rem; font-weight: 800; color: var(--secondary); letter-spacing: -.01em; }
body.dark_theme .logo_fallback { color: #1F242E; }
.logo_card_name { font-weight: 700; color: var(--secondary); font-size: .95rem; }
.logo_card_desc { font-size: .82rem; color: var(--text_secondary); line-height: 1.45; }
@media (max-width: 575px) { .logo_card { width: calc(50% - .625rem); } .logo_card_media { height: 120px; padding: 1rem; } .logo_card_media img { max-height: 64px; } }
.sector_cta { margin-top: .5rem; }

/* ---------- Media: never crop the main image ------------------------------ */
.card_2026 .card_media { aspect-ratio: auto; height: auto; }
.card_2026 .card_media img { width: 100%; height: auto; object-fit: contain; }
.product_panel .card_media, .solution_block .card_media { aspect-ratio: auto !important; }
.media-placeholder img.media-placeholder-id { object-fit: contain; }

/* ---------- Image peek (hover on desktop, tap on touch) ----------------- */
.feature_thumb, .sector_thumb, [data-peek] { cursor: zoom-in; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.feature_thumb:hover, .sector_thumb:hover, .feature_thumb.is-peeking, .sector_thumb.is-peeking, [data-peek]:hover, [data-peek].is-peeking { transform: scale(1.02); box-shadow: 0 0 0 3px var(--tint-strong); }
.img_peek_backdrop { position: fixed; inset: 0; z-index: 10990; background: rgba(16, 17, 20, .6); opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease); }
.img_peek_backdrop.is-open { opacity: 1; pointer-events: auto; }
.img_peek {
  position: fixed; z-index: 11000; max-width: min(560px, calc(100vw - 32px)); padding: 8px;
  background: var(--bs-white); border: 1px solid var(--secondary_border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(6px) scale(.96); pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.img_peek.is-open { opacity: 1; transform: none; pointer-events: auto; }
.img_peek img { display: block; width: 100%; height: auto; max-height: min(70vh, 560px); object-fit: contain; border-radius: calc(var(--radius-lg) - 6px); }
.img_peek_cap { padding: .5rem .5rem .25rem; font-size: .85rem; font-weight: 700; color: var(--secondary); text-align: center; }
.img_peek_cap:empty { display: none; }
.img_peek.is-modal { inset-inline-start: 50% !important; top: 50% !important; transform: translate(-50%, -50%) scale(.96); }
html[dir="rtl"] .img_peek.is-modal { transform: translate(50%, -50%) scale(.96); }
.img_peek.is-modal.is-open { transform: translate(-50%, -50%); }
html[dir="rtl"] .img_peek.is-modal.is-open { transform: translate(50%, -50%); }
.img_peek_close { position: absolute; top: -14px; inset-inline-end: -14px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--secondary_border); background: var(--bs-white); color: var(--secondary); display: none; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-sm); }
.img_peek.is-modal .img_peek_close { display: inline-flex; }
@media (prefers-reduced-motion: reduce) { .img_peek, .img_peek_backdrop { transition: none; } }
.img_peek.is-modal { width: min(560px, calc(100vw - 32px)); }
.img_peek.is-modal img { width: 100%; max-height: 70vh; }
.logo_card_media img { max-height: 96px; max-width: 210px; }
.logo_card--fill .logo_card_media { padding: 0; overflow: hidden; }
.logo_card--fill .logo_card_media img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }

.media-placeholder img[data-peek] { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.media-placeholder:has(img[data-peek]) { overflow: visible; }

/* ---------- Product pages ------------------------------------------------ */
.product_hero { background: linear-gradient(180deg, var(--accent-tint, var(--tint)) 0%, transparent 100%); }
.product_page h1 { color: var(--accent, var(--primary)); }
.kpi_row .kpi_value { font-size: 1.6rem; font-weight: 800; color: var(--accent, var(--primary)); line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi_row .kpi_label { font-size: .8rem; color: var(--text_secondary); }
.product_page .feature_tile { background: var(--bs-white); }
.screen_list li { display: flex; align-items: center; gap: .6rem; padding: .45rem .5rem; font-size: .9rem; color: var(--secondary); border-top: 1px solid var(--secondary_border); }
.screen_list li strong { margin-inline-start: auto; font-variant-numeric: tabular-nums; }
.screen_list .dot { width: 8px; height: 8px; border-radius: 50%; }
.screen_list .dot--ok { background: #22C55E; } .screen_list .dot--off { background: #DC2626; }

/* ---------- Mobile fixes: newsletter form · logo cards · product tabs ---- */
@media (max-width: 767.98px) {
  /* newsletter: stack input and button inside a soft card, no pill row */
  .footer_2026 .newsletter_card { padding: 1.25rem; }
  .footer_2026 .newsletter_signup {
    flex-direction: column; gap: .6rem; padding: .6rem;
    border-radius: var(--radius-lg); max-width: none;
  }
  .footer_2026 .newsletter_signup input {
    width: 100%; padding: .8rem 1rem; text-align: center;
    border: 1px solid var(--secondary_border); border-radius: var(--radius-md); background: var(--secondary_alt);
  }
  .footer_2026 .newsletter_signup .btn_primary { width: 100%; padding: .8rem 1rem; }
}
@media (max-width: 575.98px) {
  /* logo cards: images can never exceed their card */
  .logo_card { width: calc(50% - .625rem); }
  .logo_card_media { height: 110px; padding: .8rem; }
  .logo_card_media img { max-width: 100%; max-height: 100%; }
  .logo_fallback { font-size: 1rem; }
  .logo_card_name { font-size: .85rem; }
  .logo_card_desc { font-size: .75rem; }
}
.tab_short { display: none; }
@media (max-width: 767.98px) {
  /* product tabs: three fixed equal segments, short labels, no scrolling */
  .product_tabs {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px;
    width: 100%; max-width: 100%; border-radius: var(--radius-lg);
  }
  .product_tab { justify-content: center; padding: .55rem .3rem; font-size: .82rem; gap: .35rem; min-height: 44px; white-space: nowrap; }
  .product_tab i { font-size: .85rem; }
  .tab_full { display: none; }
  .tab_short { display: inline; }
}
@media (max-width: 359.98px) { .product_tab i { display: none; } }

/* ==========================================================================
   Liquid glass system (per ui-ux-pro-max: navigation & controls ONLY —
   content stays opaque; opaque fallbacks for no-support / reduced transparency)
   ========================================================================== */
:root { --glass-blur: 14px; --glass-border: rgba(255, 255, 255, .22); }
body.dark_theme { --glass-border: rgba(255, 255, 255, .08); }

/* mobile menu */
#offcanvas.offcanvas {
  background: var(--glass) !important;
  -webkit-backdrop-filter: saturate(160%) blur(var(--glass-blur));
  backdrop-filter: saturate(160%) blur(var(--glass-blur));
  border-inline-end: 1px solid var(--hairline);
}
/* tab bars + billing toggle */
.product_tabs, .billing_toggle {
  background: var(--glass);
  -webkit-backdrop-filter: saturate(160%) blur(var(--glass-blur));
  backdrop-filter: saturate(160%) blur(var(--glass-blur));
  border-color: var(--glass-border);
  box-shadow: var(--shadow-sm);
}
/* image-peek chrome */
.img_peek {
  background: var(--glass);
  -webkit-backdrop-filter: saturate(160%) blur(var(--glass-blur));
  backdrop-filter: saturate(160%) blur(var(--glass-blur));
  border-color: var(--glass-border);
}
.img_peek img { background: var(--bs-white); }   /* the image itself stays on an opaque plate */
/* opaque fallbacks */
@supports not (backdrop-filter: blur(1px)) {
  #offcanvas.offcanvas, .product_tabs, .billing_toggle, .img_peek { background: var(--bs-white) !important; }
}
@media (prefers-reduced-transparency: reduce) {
  #offcanvas.offcanvas, .product_tabs, .billing_toggle, .img_peek,
  #navbar.nav_sticky::before, .fixed-bottom.bg-white { background: var(--bs-white) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ==========================================================================
   Audit fixes: base type · touch targets · promo single-line · carousel controls
   ========================================================================== */
/* #5 EN base font to 16px (AR already 16px) */
html[lang="en"] body { font-size: 16px; }

/* #2 touch targets — enlarge hit areas, keep visuals */
.btn_dark_light_mode { width: 44px; height: 44px; }
.navbar-toggler { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
#offcanvas button[data-bs-dismiss="offcanvas"] { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.promo_bar .promo_close { width: 32px; height: 32px; }
.promo_bar .promo_close::before { content: ''; position: absolute; inset: -8px; border-radius: 50%; }
.lang_pill { position: relative; }
.lang_pill::before { content: ''; position: absolute; inset: -7px; }
.footer_2026 .f_social_links a { width: 44px; height: 44px; }
.footer_2026 .f_links a { display: inline-block; padding-block: .2rem; }
.footer_2026 .footer_bottom .legal a:not(.lang_pill) { display: inline-block; padding-block: .6rem; }
.promo_bar .promo_cta { position: relative; padding-block: .4rem; }
.slider_btn { position: relative; }

/* #8 promo bar: one line on mobile */
@media (max-width: 767.98px) {
  .promo_bar { flex-wrap: nowrap; text-align: start; padding-inline: 1rem 2.6rem; }
  .promo_bar .promo_text { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto; }
  .promo_bar .promo_cta { flex: none; }
}
/* #8 floating CTA appears only after the hero */
.fixed-bottom.d-md-none { transition: transform .35s var(--ease); }
.fixed-bottom.d-md-none.cta_hidden { transform: translateY(130%); }
@media (prefers-reduced-motion: reduce) { .fixed-bottom.d-md-none { transition: none; } }

/* #9 carousel dots */
.testimonials_slider .testi_dots { position: static; margin-top: 1.25rem; display: flex; justify-content: center; gap: 6px; }
.testimonials_slider .testi_dots .swiper-pagination-bullet { width: 8px; height: 8px; background: var(--text_secondary); opacity: .4; transition: opacity var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.testimonials_slider .testi_dots .swiper-pagination-bullet-active { background: var(--primary); opacity: 1; }

/* ---------- Bootstrap modals: liquid glass surface ----------------------- */
.modal-content {
  background: var(--glass);
  -webkit-backdrop-filter: saturate(160%) blur(var(--glass-blur));
  backdrop-filter: saturate(160%) blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  color: var(--secondary);
}
.modal-header, .modal-footer { border-color: var(--hairline); }
/* full-screen backdrops must never carry backdrop-filter: fading one re-blurs
   the whole viewport per frame and stutters. Plain tint fades are always smooth. */
.modal-backdrop.show { opacity: .55; }
.modal-backdrop { background: rgba(16, 17, 20, .55); }
/* keep fields readable on the translucent surface */
.modal-content .form-control, .modal-content input, .modal-content textarea { background: var(--bs-white); }
body.dark_theme .modal-content .btn-close { filter: invert(1); }
@supports not (backdrop-filter: blur(1px)) { .modal-content { background: var(--bs-white); } }
@media (prefers-reduced-transparency: reduce) {
  .modal-content { background: var(--bs-white) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .modal-backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- LEAP 2026 entry prompt --------------------------------------- */
.leap_modal .modal-content { overflow: hidden; }
.leap_modal .leap_close { position: absolute; top: 14px; inset-inline-end: 14px; width: 20px; height: 20px; padding: 12px; z-index: 2; }
.leap_orb {
  width: 72px; height: 72px; margin: 0 auto 1rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.5rem;
  background: conic-gradient(from 210deg, #4F46E5, #818CF8, #22D3EE, #4F46E5);
  box-shadow: 0 10px 30px var(--tint-strong), inset 0 0 0 3px rgba(255, 255, 255, .25);
}
.leap_modal .accent_chip { width: fit-content; }
@media (prefers-reduced-motion: no-preference) {
  .leap_orb { animation: leap_float 5s var(--ease) infinite alternate; }
  @keyframes leap_float { from { transform: translateY(2px) rotate(-2deg); } to { transform: translateY(-4px) rotate(2deg); } }
}
body.dark_theme .leap_orb { box-shadow: 0 10px 30px rgba(129, 140, 248, .3), inset 0 0 0 3px rgba(255, 255, 255, .18); }
.leap_modal .modal-content::before {
  content: ''; position: absolute; top: -60px; inset-inline: -10%; height: 160px; max-height: 30%; z-index: 0; pointer-events: none; opacity: .4;
  background: radial-gradient(closest-side, var(--tint-strong), transparent 72%);
}
.leap_modal .modal-content > :not(.leap_close) { position: relative; z-index: 1; }
/* leap modal: thicker glass so page shapes diffuse behind body text */
.leap_modal .modal-content {
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: saturate(150%) blur(26px);
  backdrop-filter: saturate(150%) blur(26px);
}
body.dark_theme .leap_modal .modal-content { background: rgba(16, 17, 20, .84); }

/* ==========================================================================
   Brand gradient CTAs · desktop offcanvas transparency · desktop logo size
   ========================================================================== */
/* 1. indigo CTAs carry a hidden logo gradient (7E22CE -> 0284C7), revealed on hover.
   The hover is an opacity crossfade on an overlay layer — composited, never janky. */
.btn_primary, .btn.btn-primary {
  position: relative; z-index: 0; overflow: hidden;
  background-color: #4F46E5;
  background-image: linear-gradient(115deg, #4F46E5 0%, #6D28D9 60%, #7E22CE 100%);
  border-color: transparent;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn_primary::before, .btn.btn-primary::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background-image: linear-gradient(115deg, #7E22CE 0%, #4F46E5 45%, #0284C7 100%);
  opacity: 0; transition: opacity .35s var(--ease); will-change: opacity;
}
.btn_primary:hover::before, .btn_primary:focus-visible::before,
.btn.btn-primary:hover::before, .btn.btn-primary:focus-visible::before { opacity: 1; }
.btn_primary:hover, .btn.btn-primary:hover { background-color: #4F46E5; filter: none; }
@media (prefers-reduced-motion: reduce) { .btn_primary::before, .btn.btn-primary::before { transition: none; } }
/* gradient buttons always carry light text, both themes */
.btn_primary, .btn.btn-primary, body.dark_theme .btn_primary, body.dark_theme .btn.btn-primary { --on-primary: #FFFFFF; }
/* product-accent buttons (teal/amber) keep their own colour */
.accent-experience .btn_primary, .accent-ads .btn_primary { background-image: none; background-color: var(--accent); border-color: var(--accent); }
.accent-experience .btn_primary::before, .accent-ads .btn_primary::before { display: none; }
body.dark_theme .accent-experience .btn_primary, body.dark_theme .accent-ads .btn_primary { --on-primary: #0B0C10; }

/* 2. the nav collection keeps Bootstrap's offcanvas white slab on desktop — remove it */
@media (min-width: 1200px) {
  #offcanvas.offcanvas {
    background: transparent !important;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    border: 0; box-shadow: none;
  }
}

/* 3. desktop logo presence */
@media (min-width: 1400px) {
  .site_logo img { width: 150px; }
  #navbar.nav_sticky .site_logo img { width: 128px; }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .site_logo img { width: 118px; }
  #navbar.nav_sticky .site_logo img { width: 104px; }
}
.navbar .site_logo { flex: none; }
/* absorb the larger logo: slightly tighter nav rhythm on desktop */
@media (min-width: 1400px) {
  .nav_ul li { margin-right: 11px; }
  .nav_btn { gap: .6rem !important; }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .nav_ul li { margin-right: 6px; }
  .nav_btn .lang_pill span { padding: 4px 6px; }
  .nav_btn .btn_primary { padding-inline: .85rem; }
}
/* leap footnote link + sector CTAs join the gradient family */
.leap_modal .leap_link { color: var(--primary); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.leap_modal .leap_link:hover { color: #0284C7; }
.accent-experience .btn_primary.sector_cta, .accent-ads .btn_primary.sector_cta {
  background-color: #4F46E5;
  background-image: linear-gradient(115deg, #4F46E5 0%, #6D28D9 60%, #7E22CE 100%);
  border-color: transparent;
  --on-primary: #FFFFFF;
}
.accent-experience .btn_primary.sector_cta::before, .accent-ads .btn_primary.sector_cta::before { display: block; }