/* ==========================================================================
   Landing Experience v2 ("lx") — Home page visual system
   Scoped under .lx so the other public pages keep their current look.
   Light / Dark aware (data-bs-theme) and RTL / LTR safe (logical properties).
   ========================================================================== */

.lx {
  --lx-primary: #696cff;
  --lx-primary-rgb: 105, 108, 255;
  --lx-violet: #8b5cf6;
  --lx-cyan: #03c3ec;
  --lx-green: #22c55e;
  --lx-amber: #ffab00;
  --lx-rose: #ff4d6d;
  --lx-ink: #111827;
  --lx-text: #384151;
  --lx-muted: #6b7280;
  --lx-surface: #ffffff;
  --lx-surface-2: #f7f7fd;
  --lx-line: rgba(17, 24, 39, 0.08);
  --lx-line-strong: rgba(105, 108, 255, 0.22);
  --lx-glass: rgba(255, 255, 255, 0.72);
  --lx-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.06);
  --lx-shadow: 0 12px 32px -12px rgba(30, 27, 75, 0.18);
  --lx-shadow-lg: 0 40px 80px -24px rgba(30, 27, 75, 0.35);
  --lx-grad: linear-gradient(135deg, #696cff 0%, #8b5cf6 45%, #03c3ec 100%);
  --lx-grad-soft: linear-gradient(135deg, rgba(105, 108, 255, 0.12), rgba(3, 195, 236, 0.10));
  --lx-radius: 20px;
  --lx-radius-sm: 12px;
  --lx-ease: cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--lx-text);
  overflow-x: clip;
}

[data-bs-theme="dark"] .lx {
  --lx-ink: #f3f4f6;
  --lx-text: #c9cbe0;
  --lx-muted: #9496b3;
  --lx-surface: #1d1e30;
  --lx-surface-2: #17182a;
  --lx-line: rgba(255, 255, 255, 0.08);
  --lx-line-strong: rgba(139, 141, 255, 0.35);
  --lx-glass: rgba(29, 30, 48, 0.72);
  --lx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --lx-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.55);
  --lx-shadow-lg: 0 40px 90px -20px rgba(0, 0, 0, 0.7);
  --lx-grad-soft: linear-gradient(135deg, rgba(105, 108, 255, 0.18), rgba(3, 195, 236, 0.12));
  background: #131425;
}

.lx h1, .lx h2, .lx h3, .lx h4, .lx h5, .lx h6 { color: var(--lx-ink); }
.lx .text-muted { color: var(--lx-muted) !important; }

.lx-container {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.lx-section { padding-block: clamp(4rem, 9vw, 7.5rem); position: relative; }
.lx-section--tight { padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.lx-section--alt { background: var(--lx-surface-2); }
[data-bs-theme="dark"] .lx-section--alt { background: #17182a; }

/* ---------- Section heading ---------- */
.lx-head { max-width: 760px; margin-inline: auto; text-align: center; margin-bottom: clamp(2.25rem, 5vw, 3.5rem); }
.lx-head--start { text-align: start; margin-inline: 0; }
.lx-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .38rem .9rem .38rem .45rem;
  border-radius: 999px;
  font-size: .8rem; font-weight: 700;
  color: var(--lx-primary);
  background: var(--lx-surface);
  border: 1px solid var(--lx-line-strong);
  box-shadow: var(--lx-shadow-sm);
  margin-bottom: 1rem;
}
.lx-eyebrow i {
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: var(--lx-grad); color: #fff; font-size: .85rem;
}
.lx-title {
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  font-weight: 800; line-height: 1.25; letter-spacing: -0.02em;
  margin-bottom: .85rem;
}
html[lang="ar"] .lx-title, html[lang="ar"] .lx-hero__title { letter-spacing: 0; }
.lx-lead { font-size: clamp(1rem, 1.4vw, 1.125rem); color: var(--lx-muted); line-height: 1.85; margin: 0; }
.lx-gradient-text {
  background: var(--lx-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- Buttons ---------- */
.lx-btn {
  --b-bg: var(--lx-surface); --b-fg: var(--lx-ink); --b-bd: var(--lx-line);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.5rem; border-radius: 14px;
  font-weight: 700; font-size: .98rem; line-height: 1.2;
  background: var(--b-bg); color: var(--b-fg) !important; border: 1px solid var(--b-bd);
  text-decoration: none; cursor: pointer;
  transition: transform .25s var(--lx-ease), box-shadow .25s var(--lx-ease), background .25s ease, border-color .25s ease;
  white-space: nowrap;
}
.lx-btn:hover { transform: translateY(-2px); box-shadow: var(--lx-shadow); border-color: var(--lx-line-strong); }
.lx-btn:focus-visible { outline: 3px solid rgba(var(--lx-primary-rgb), .45); outline-offset: 2px; }
.lx-btn--primary {
  --b-bg: var(--lx-grad); --b-fg: #fff; --b-bd: transparent;
  background-size: 160% 160%; background-position: 0% 50%;
  box-shadow: 0 10px 30px -8px rgba(var(--lx-primary-rgb), .65), inset 0 1px 0 rgba(255,255,255,.25);
}
.lx-btn--primary:hover { background-position: 100% 50%; box-shadow: 0 16px 40px -10px rgba(var(--lx-primary-rgb), .8), inset 0 1px 0 rgba(255,255,255,.25); }
.lx-btn--ghost { --b-bg: transparent; --b-bd: var(--lx-line-strong); --b-fg: var(--lx-primary); }
.lx-btn--ghost:hover { --b-bg: rgba(var(--lx-primary-rgb), .07); }
.lx-btn--sm { padding: .55rem 1rem; font-size: .85rem; border-radius: 11px; }
.lx-btn--lg { padding: 1rem 1.85rem; font-size: 1.05rem; border-radius: 16px; }
.lx-btn--block { width: 100%; }
.lx-btn--light { --b-bg: #fff; --b-fg: #1e1b4b; --b-bd: transparent; }
.lx-btn--outline-light { --b-bg: rgba(255,255,255,.08); --b-fg: #fff; --b-bd: rgba(255,255,255,.35); }

.lx-link { color: var(--lx-primary); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; }
.lx-link i { transition: transform .25s var(--lx-ease); }
.lx-link:hover i { transform: translateX(-4px); }
html[dir="ltr"] .lx-link:hover i { transform: translateX(4px); }

/* ---------- Cards ---------- */
.lx-card {
  position: relative; height: 100%;
  background: var(--lx-surface);
  border: 1px solid var(--lx-line);
  border-radius: var(--lx-radius);
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
  box-shadow: var(--lx-shadow-sm);
  transition: transform .35s var(--lx-ease), box-shadow .35s var(--lx-ease), border-color .35s ease;
  isolation: isolate; overflow: hidden;
}
.lx-card:hover { transform: translateY(-6px); box-shadow: var(--lx-shadow); border-color: var(--lx-line-strong); }
/* Mouse-follow spotlight (set by JS through --mx / --my) */
.lx-spot::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--lx-primary-rgb), .10), transparent 45%);
  transition: opacity .3s ease;
}
.lx-spot:hover::before { opacity: 1; }

.lx-icon {
  --i-c: var(--lx-primary);
  width: 52px; height: 52px; flex-shrink: 0;
  display: inline-grid; place-items: center;
  border-radius: 15px; font-size: 1.55rem;
  color: var(--i-c);
  background: color-mix(in srgb, var(--i-c) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--i-c) 22%, transparent);
}
.lx-icon--sm { width: 40px; height: 40px; border-radius: 12px; font-size: 1.2rem; }
.lx-icon--solid { color: #fff; background: var(--lx-grad); border: 0; box-shadow: 0 10px 22px -8px rgba(var(--lx-primary-rgb), .7); }
.lx-c-primary { --i-c: #696cff; } .lx-c-info { --i-c: #03c3ec; } .lx-c-success { --i-c: #22c55e; }
.lx-c-warning { --i-c: #f59e0b; } .lx-c-danger { --i-c: #ff4d6d; } .lx-c-secondary { --i-c: #8592a3; } .lx-c-dark { --i-c: #475569; }

.lx-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .28rem .7rem; border-radius: 999px;
  font-size: .76rem; font-weight: 700;
  color: var(--i-c, var(--lx-primary));
  background: color-mix(in srgb, var(--i-c, #696cff) 11%, transparent);
}
.lx-check { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.lx-check li { display: flex; align-items: flex-start; gap: .6rem; font-size: .92rem; line-height: 1.7; }
.lx-check li i { color: var(--lx-green); font-size: 1.1rem; margin-top: .2rem; flex-shrink: 0; }

/* ==========================================================================
   HERO
   ========================================================================== */
.lx-hero {
  position: relative; isolation: isolate;
  padding-top: clamp(7.5rem, 12vw, 9.5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  overflow: hidden;
}
.lx-hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.lx-hero__bg::before { /* fine grid */
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(var(--lx-primary-rgb), .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--lx-primary-rgb), .07) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 65% at 50% 30%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 65% at 50% 30%, #000 30%, transparent 75%);
}
.lx-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; animation: lxFloat 18s ease-in-out infinite; }
.lx-blob--1 { width: 520px; height: 520px; background: #8b8dff; top: -160px; inset-inline-start: -120px; }
.lx-blob--2 { width: 460px; height: 460px; background: #5ee0ff; top: 60px; inset-inline-end: -140px; animation-delay: -6s; opacity: .45; }
.lx-blob--3 { width: 380px; height: 380px; background: #c4b5fd; bottom: -180px; inset-inline-start: 35%; animation-delay: -12s; opacity: .4; }
[data-bs-theme="dark"] .lx-blob { opacity: .28; }
@keyframes lxFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(40px, -30px) scale(1.08); }
  66% { transform: translate(-30px, 25px) scale(.95); }
}

.lx-hero__grid { display: grid; grid-template-columns: 1.02fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.lx-hero__badge {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .35rem .95rem .35rem .4rem; border-radius: 999px;
  background: var(--lx-glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--lx-line-strong);
  font-weight: 700; font-size: .85rem; color: var(--lx-ink);
  box-shadow: var(--lx-shadow-sm); margin-bottom: 1.5rem;
}
.lx-hero__badge .lx-new { background: var(--lx-grad); color: #fff; padding: .18rem .6rem; border-radius: 999px; font-size: .72rem; }
.lx-hero__title {
  font-size: clamp(2rem, 3.8vw, 3.15rem);
  font-weight: 900; line-height: 1.18; letter-spacing: -0.03em;
  margin-bottom: 1.25rem;
}
.lx-hero__title span { display: block; }
.lx-hero__subtitle {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-weight: 800; color: var(--lx-ink);
  margin-bottom: 1.1rem;
}
.lx-hero__subtitle i { color: var(--lx-green); font-size: 1.45rem; }
.lx-hero__desc { font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.95; color: var(--lx-muted); max-width: 600px; margin-bottom: 2rem; }
.lx-hero__ctas { display: flex; flex-wrap: wrap; gap: .85rem; margin-bottom: 2rem; }
.lx-play {
  display: inline-flex; align-items: center; gap: .65rem; background: none; border: 0; padding: .4rem;
  font-weight: 700; color: var(--lx-ink); cursor: pointer;
}
.lx-play__icon {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--lx-surface); color: var(--lx-primary); font-size: 1.6rem;
  box-shadow: 0 0 0 6px rgba(var(--lx-primary-rgb), .12), var(--lx-shadow-sm);
  animation: lxPulse 2.4s ease-out infinite;
}
@keyframes lxPulse {
  0% { box-shadow: 0 0 0 0 rgba(var(--lx-primary-rgb), .35), var(--lx-shadow-sm); }
  70% { box-shadow: 0 0 0 14px rgba(var(--lx-primary-rgb), 0), var(--lx-shadow-sm); }
  100% { box-shadow: 0 0 0 0 rgba(var(--lx-primary-rgb), 0), var(--lx-shadow-sm); }
}

.lx-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.lx-avatars { display: flex; }
.lx-avatars span {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: .85rem; color: #fff;
  border: 3px solid var(--lx-surface); margin-inline-start: -10px;
}
.lx-avatars span:first-child { margin-inline-start: 0; }
.lx-proof__stars { color: #f59e0b; font-size: .95rem; line-height: 1; }
.lx-proof__text { font-size: .85rem; color: var(--lx-muted); }
.lx-proof__text strong { color: var(--lx-ink); }
.lx-compliance { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.lx-compliance span {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .8rem; border-radius: 10px; font-size: .8rem; font-weight: 700;
  background: var(--lx-glass); border: 1px solid var(--lx-line); color: var(--lx-ink);
}
.lx-compliance i { font-size: 1.05rem; }

/* Product window */
.lx-stage { position: relative; perspective: 1800px; }
.lx-window {
  position: relative; border-radius: 22px; overflow: hidden;
  background: var(--lx-surface);
  border: 1px solid var(--lx-line-strong);
  box-shadow: var(--lx-shadow-lg), 0 0 0 8px rgba(var(--lx-primary-rgb), .06);
  transform: rotateY(-7deg) rotateX(4deg);
  transform-style: preserve-3d;
  transition: transform .8s var(--lx-ease);
}
html[dir="ltr"] .lx-window { transform: rotateY(7deg) rotateX(4deg); }
.lx-stage:hover .lx-window { transform: rotateY(0) rotateX(0); }
.lx-window__bar {
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem 1rem; border-bottom: 1px solid var(--lx-line);
  background: linear-gradient(180deg, rgba(var(--lx-primary-rgb), .06), transparent);
}
.lx-dots { display: inline-flex; gap: 6px; direction: ltr; }
.lx-dots i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.lx-url {
  flex: 1; display: flex; align-items: center; gap: .35rem; min-width: 0;
  padding: .3rem .8rem; border-radius: 9px; font-size: .74rem;
  background: var(--lx-surface-2); border: 1px solid var(--lx-line); color: var(--lx-muted);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.lx-url strong { color: var(--lx-primary); }
.lx-zoom { background: none; border: 0; color: var(--lx-muted); font-size: 1.2rem; padding: 0 .2rem; cursor: pointer; }
.lx-zoom:hover { color: var(--lx-primary); }
.lx-tabs {
  display: flex; gap: .3rem; padding: .5rem; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--lx-line);
}
.lx-tabs::-webkit-scrollbar { display: none; }
.lx-tab {
  display: inline-flex; align-items: center; gap: .35rem; flex-shrink: 0;
  padding: .45rem .8rem; border-radius: 10px; border: 0; background: transparent;
  font-size: .8rem; font-weight: 700; color: var(--lx-muted); cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.lx-tab:hover { color: var(--lx-ink); background: var(--lx-surface-2); }
.lx-tab.active { color: #fff; background: var(--lx-grad); box-shadow: 0 6px 16px -6px rgba(var(--lx-primary-rgb), .7); }
.lx-window__body { padding: .85rem; }
.lx-shot { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--lx-line); cursor: zoom-in; }
.lx-shot img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; transition: transform .8s var(--lx-ease); }
.lx-shot:hover img { transform: scale(1.03); }
.lx-shot__cap {
  position: absolute; inset-inline: 0; bottom: 0;
  display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  padding: 1.5rem .9rem .7rem; font-size: .78rem; font-weight: 700; color: #fff;
  background: linear-gradient(180deg, transparent, rgba(15, 23, 42, .85));
}
.lx-mini-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: .6rem; }
.lx-mini-kpis div { padding: .55rem .7rem; border-radius: 11px; border: 1px solid var(--lx-line); font-size: .76rem; color: var(--lx-muted); display: flex; justify-content: space-between; align-items: center; }
.lx-mini-kpis strong { color: var(--lx-ink); font-size: .9rem; }
.lx-pane-box { padding: 1rem; border-radius: 14px; border: 1px solid var(--lx-line); background: var(--lx-surface-2); }
.lx-branch { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .65rem .85rem; border-radius: 12px; border: 1px solid var(--lx-line); background: var(--lx-surface); font-size: .85rem; }
.lx-branch.is-main { border-color: var(--lx-line-strong); box-shadow: 0 0 0 3px rgba(var(--lx-primary-rgb), .08); }
.lx-bar { height: 6px; border-radius: 99px; background: var(--lx-line); overflow: hidden; width: 90px; }
.lx-bar i { display: block; height: 100%; border-radius: inherit; background: var(--lx-grad); }

/* Floating glass cards around the product window */
.lx-float {
  position: absolute; z-index: 3;
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem .95rem; border-radius: 16px;
  background: var(--lx-glass); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--lx-line-strong);
  box-shadow: var(--lx-shadow);
  font-size: .8rem; color: var(--lx-muted);
  animation: lxBob 6s ease-in-out infinite;
}
.lx-float strong { display: block; color: var(--lx-ink); font-size: 1rem; line-height: 1.2; }
.lx-float--a { top: 12%; inset-inline-end: -28px; }
.lx-float--b { bottom: 16%; inset-inline-start: -34px; animation-delay: -2s; }
.lx-float--c { bottom: -22px; inset-inline-end: 12%; animation-delay: -4s; }
@keyframes lxBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.lx-live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--lx-green); box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: lxLive 1.8s infinite; flex-shrink: 0; }
@keyframes lxLive { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); } 70% { box-shadow: 0 0 0 9px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }

/* Stats band */
.lx-stats {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-radius: 24px; overflow: hidden;
  background: var(--lx-glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--lx-line-strong); box-shadow: var(--lx-shadow);
}
.lx-stat { padding: clamp(1.1rem, 1.6vw, 1.5rem) clamp(1rem, 1.4vw, 1.4rem); display: flex; align-items: center; gap: .9rem; position: relative; min-width: 0; }
.lx-stat + .lx-stat::before { content: ""; position: absolute; inset-block: 22%; inset-inline-start: 0; width: 1px; background: var(--lx-line); }
.lx-stat__val { font-size: clamp(.98rem, .62rem + .55vw, 1.18rem); font-weight: 800; line-height: 1.55; color: var(--lx-ink); text-wrap: balance; }
.lx-stat__num { font-size: 1.22em; font-weight: 900; font-variant-numeric: tabular-nums; background: var(--lx-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; unicode-bidi: isolate; }
.lx-stat__lbl { font-size: clamp(.76rem, .7rem + .15vw, .84rem); color: var(--lx-muted); margin-top: .25rem; line-height: 1.6; }

/* ==========================================================================
   TRUST MARQUEE
   ========================================================================== */
.lx-trust { padding-block: 2.25rem; border-block: 1px solid var(--lx-line); background: var(--lx-surface); }
.lx-trust__label { text-align: center; font-size: .82rem; font-weight: 700; color: var(--lx-muted); margin-bottom: 1.25rem; text-transform: uppercase; letter-spacing: .08em; }
html[lang="ar"] .lx-trust__label { letter-spacing: 0; }
.lx-marquee {
  display: flex; overflow: hidden; user-select: none; gap: 1rem;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.lx-marquee__track { display: flex; gap: 1rem; flex-shrink: 0; min-width: 100%; justify-content: space-around; animation: lxMarquee 40s linear infinite; }
html[dir="rtl"] .lx-marquee__track { animation-name: lxMarqueeRtl; }
.lx-marquee:hover .lx-marquee__track { animation-play-state: paused; }
@keyframes lxMarquee { from { transform: translateX(0); } to { transform: translateX(calc(-100% - 1rem)); } }
@keyframes lxMarqueeRtl { from { transform: translateX(0); } to { transform: translateX(calc(100% + 1rem)); } }
.lx-logo {
  display: inline-flex; align-items: center; gap: .6rem; flex-shrink: 0;
  padding: .7rem 1.2rem; border-radius: 14px;
  border: 1px solid var(--lx-line); background: var(--lx-surface-2);
  font-weight: 800; font-size: .92rem; color: var(--lx-ink); white-space: nowrap;
  filter: grayscale(.4); opacity: .85; transition: filter .3s ease, opacity .3s ease, border-color .3s ease;
}
.lx-logo:hover { filter: none; opacity: 1; border-color: var(--lx-line-strong); }
.lx-logo i { font-size: 1.35rem; color: var(--lx-primary); }

/* ==========================================================================
   SEGMENTED CONTROL / FILTER CHIPS
   ========================================================================== */
.lx-seg {
  display: inline-flex; flex-wrap: wrap; justify-content: center; gap: .35rem; padding: .4rem;
  border-radius: 18px; background: var(--lx-surface); border: 1px solid var(--lx-line); box-shadow: var(--lx-shadow-sm);
}
.lx-seg button {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1.15rem; border-radius: 13px; border: 0; background: transparent;
  font-weight: 700; font-size: .9rem; color: var(--lx-muted); cursor: pointer;
  transition: all .25s var(--lx-ease);
}
.lx-seg button:hover { color: var(--lx-ink); background: var(--lx-surface-2); }
.lx-seg button.active { color: #fff; background: var(--lx-grad); box-shadow: 0 8px 20px -8px rgba(var(--lx-primary-rgb), .75); }
.lx-seg .lx-count { min-width: 22px; height: 22px; padding-inline: .4rem; border-radius: 99px; display: inline-grid; place-items: center; font-size: .72rem; background: rgba(var(--lx-primary-rgb), .12); color: var(--lx-primary); }
.lx-seg button.active .lx-count { background: rgba(255,255,255,.25); color: #fff; }

.lx-pane { display: none; animation: lxFadeUp .5s var(--lx-ease); }
.lx-pane.active { display: block; }
@keyframes lxFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   GRID HELPERS
   ========================================================================== */
.lx-grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.lx-grid--3 { grid-template-columns: repeat(3, 1fr); }
.lx-grid--4 { grid-template-columns: repeat(4, 1fr); }
.lx-grid--2 { grid-template-columns: repeat(2, 1fr); }
.lx-card__foot { margin-top: auto; padding-top: 1.1rem; border-top: 1px dashed var(--lx-line); display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; }
.lx-card--flex { display: flex; flex-direction: column; }
.lx-card__title { font-size: 1.15rem; font-weight: 800; margin: 1rem 0 .4rem; line-height: 1.5; }
.lx-card__text { font-size: .92rem; color: var(--lx-muted); line-height: 1.85; margin-bottom: 1rem; }
.lx-num { position: absolute; top: 1.1rem; inset-inline-end: 1.3rem; font-size: 2.6rem; font-weight: 900; line-height: 1; background: var(--lx-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; opacity: .22; font-family: 'Public Sans', sans-serif; }

/* ==========================================================================
   BENTO (Why us)
   ========================================================================== */
.lx-bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
.lx-bento > .is-large { grid-column: span 7; }
.lx-bento > .is-standard { grid-column: span 5; }
.lx-bento .lx-card { padding: clamp(1.5rem, 2.6vw, 2.25rem); }
.lx-bento .is-large .lx-card { background: radial-gradient(120% 120% at 100% 0%, rgba(var(--lx-primary-rgb), .09), transparent 55%), var(--lx-surface); }
.lx-bento .lx-card__title { font-size: 1.35rem; }
.lx-glow-ring { position: absolute; width: 260px; height: 260px; border-radius: 50%; inset-inline-end: -90px; bottom: -110px; background: var(--lx-grad); opacity: .08; filter: blur(4px); z-index: -1; }

/* ==========================================================================
   PRICING
   ========================================================================== */
.lx-cycle { display: inline-flex; padding: .3rem; border-radius: 999px; background: var(--lx-surface); border: 1px solid var(--lx-line); box-shadow: var(--lx-shadow-sm); }
.lx-cycle button { border: 0; background: none; padding: .6rem 1.2rem; border-radius: 999px; font-weight: 700; font-size: .88rem; color: var(--lx-muted); cursor: pointer; transition: all .25s var(--lx-ease); display: inline-flex; gap: .4rem; align-items: center; }
.lx-cycle button.active { background: var(--lx-ink); color: var(--lx-surface); }
[data-bs-theme="dark"] .lx-cycle button.active { background: #fff; color: #1e1b4b; }
.lx-save { font-size: .7rem; padding: .12rem .5rem; border-radius: 99px; background: rgba(34,197,94,.15); color: #16a34a; }

.lx-calc {
  display: grid; grid-template-columns: 1.3fr 1fr auto; gap: 1.5rem 2rem; align-items: center;
  padding: clamp(1.25rem, 2.4vw, 1.75rem); border-radius: 22px; margin-bottom: 2rem;
  background: var(--lx-surface); border: 1px solid var(--lx-line-strong); box-shadow: var(--lx-shadow);
}
.lx-calc label { font-weight: 800; font-size: .9rem; color: var(--lx-ink); display: flex; align-items: center; gap: .4rem; margin-bottom: .6rem; }
.lx-range { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--lx-primary) var(--p, 10%), var(--lx-line) var(--p, 10%)); outline: none; }
html[dir="rtl"] .lx-range { background: linear-gradient(-90deg, var(--lx-primary) var(--p, 10%), var(--lx-line) var(--p, 10%)); }
.lx-range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 5px solid var(--lx-primary); box-shadow: 0 4px 12px rgba(var(--lx-primary-rgb), .45); cursor: grab; }
.lx-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 5px solid var(--lx-primary); cursor: grab; }
.lx-units-badge { font-weight: 900; font-size: 1.05rem; color: var(--lx-primary); }
.lx-stepper { display: inline-flex; align-items: center; border: 1px solid var(--lx-line); border-radius: 13px; overflow: hidden; background: var(--lx-surface-2); }
.lx-stepper button { width: 42px; height: 42px; border: 0; background: none; font-size: 1.2rem; color: var(--lx-ink); cursor: pointer; }
.lx-stepper button:hover { background: rgba(var(--lx-primary-rgb), .1); color: var(--lx-primary); }
.lx-stepper input { width: 56px; border: 0; background: none; text-align: center; font-weight: 800; color: var(--lx-ink); -moz-appearance: textfield; }
.lx-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.lx-rec { padding: 1rem 1.25rem; border-radius: 16px; background: var(--lx-grad-soft); border: 1px solid var(--lx-line-strong); min-width: 210px; }
.lx-rec small { color: var(--lx-muted); font-weight: 700; display: block; }
.lx-rec strong { font-size: 1.1rem; color: var(--lx-ink); }

.lx-plan { display: flex; flex-direction: column; padding: clamp(1.5rem, 2.4vw, 2rem); }
.lx-plan.is-featured {
  border: 0; background: linear-gradient(var(--lx-surface), var(--lx-surface)) padding-box, var(--lx-grad) border-box;
  border: 2px solid transparent; box-shadow: 0 30px 60px -20px rgba(var(--lx-primary-rgb), .45);
}
@media (min-width: 992px) { .lx-plan.is-featured { transform: translateY(-12px); } .lx-plan.is-featured:hover { transform: translateY(-18px); } }
.lx-ribbon { position: absolute; top: 1.1rem; inset-inline-end: 1.1rem; background: var(--lx-grad); color: #fff; font-size: .72rem; font-weight: 800; padding: .3rem .75rem; border-radius: 99px; box-shadow: 0 6px 16px -6px rgba(var(--lx-primary-rgb), .8); }
.lx-plan__name { font-size: 1.4rem; font-weight: 900; margin: .75rem 0 .3rem; }
.lx-price { display: flex; align-items: baseline; gap: .4rem; margin: 1.25rem 0 .25rem; flex-wrap: wrap; }
.lx-price__val { font-size: clamp(2.2rem, 3.4vw, 2.8rem); font-weight: 900; line-height: 1; color: var(--lx-ink); font-variant-numeric: tabular-nums; }
.lx-price__unit { font-size: .85rem; color: var(--lx-muted); font-weight: 600; }
.lx-quota { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: 1.25rem 0; }
.lx-quota div { text-align: center; padding: .65rem .3rem; border-radius: 12px; background: var(--lx-surface-2); border: 1px solid var(--lx-line); }
.lx-quota strong { display: block; font-size: 1.05rem; color: var(--lx-ink); }
.lx-quota span { font-size: .72rem; color: var(--lx-muted); }

/* ==========================================================================
   GROWTH TIMELINE
   ========================================================================== */
.lx-timeline { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.lx-timeline::before { content: ""; position: absolute; top: 27px; inset-inline: 6%; height: 3px; border-radius: 99px; background: var(--lx-grad); opacity: .35; }
.lx-milestone { position: relative; padding-top: 4.25rem; }
.lx-milestone__node {
  position: absolute; top: 0; inset-inline-start: 50%; transform: translateX(50%);
  min-width: 58px; height: 58px; padding-inline: .75rem; border-radius: 18px;
  display: grid; place-items: center; font-weight: 900; color: #fff; font-size: .95rem;
  background: var(--lx-grad); box-shadow: 0 0 0 6px var(--lx-surface-2), 0 12px 24px -8px rgba(var(--lx-primary-rgb), .7);
}
html[dir="ltr"] .lx-milestone__node { transform: translateX(-50%); }
.lx-section:not(.lx-section--alt) .lx-milestone__node { box-shadow: 0 0 0 6px var(--lx-surface), 0 12px 24px -8px rgba(var(--lx-primary-rgb), .7); }
[data-bs-theme="dark"] .lx-section:not(.lx-section--alt) .lx-milestone__node { box-shadow: 0 0 0 6px #131425, 0 12px 24px -8px rgba(0,0,0,.6); }
.lx-mini-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: auto; }
.lx-mini-stats div { padding: .55rem .65rem; border-radius: 11px; background: var(--lx-surface-2); border: 1px solid var(--lx-line); }
.lx-mini-stats strong { display: block; color: var(--lx-ink); font-size: .98rem; }
.lx-mini-stats span { font-size: .7rem; color: var(--lx-muted); }

/* ==========================================================================
   REVIEWS
   ========================================================================== */
.lx-review { display: flex; flex-direction: column; }
.lx-review__quote { font-size: 1rem; line-height: 1.95; color: var(--lx-ink); margin: 1rem 0 1.5rem; }
.lx-review__mark { position: absolute; top: .4rem; inset-inline-end: 1.1rem; font-size: 4.5rem; line-height: 1; color: var(--lx-primary); opacity: .08; }
.lx-person { display: flex; align-items: center; gap: .8rem; margin-top: auto; padding-top: 1.1rem; border-top: 1px dashed var(--lx-line); }
.lx-person__avatar { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 1.1rem; flex-shrink: 0; }
.lx-person strong { display: block; color: var(--lx-ink); font-size: .95rem; }
.lx-person small { color: var(--lx-muted); font-size: .8rem; }
.lx-rating-summary { display: inline-flex; align-items: center; gap: .75rem; padding: .6rem 1.1rem; border-radius: 16px; background: var(--lx-surface); border: 1px solid var(--lx-line); box-shadow: var(--lx-shadow-sm); margin-top: 1.25rem; }
.lx-rating-summary strong { font-size: 1.6rem; font-weight: 900; color: var(--lx-ink); }

/* ==========================================================================
   NEWS
   ========================================================================== */
.lx-post__cover {
  height: 150px; border-radius: 14px; margin: -.25rem -.25rem 1.1rem; position: relative; overflow: hidden;
  display: grid; place-items: center; color: #fff; font-size: 3rem;
}
.lx-post__cover::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px); background-size: 14px 14px; }
.lx-post__cover i { position: relative; z-index: 1; filter: drop-shadow(0 8px 16px rgba(0,0,0,.25)); transition: transform .5s var(--lx-ease); }
.lx-card:hover .lx-post__cover i { transform: scale(1.12) rotate(-4deg); }
.lx-post__title a { color: var(--lx-ink); text-decoration: none; }
.lx-post__title a:hover { color: var(--lx-primary); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.lx-faq { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.lx-faq__aside { position: sticky; top: 100px; }
.lx-search { position: relative; margin: 1.5rem 0; }
.lx-search i { position: absolute; top: 50%; transform: translateY(-50%); inset-inline-start: 1rem; font-size: 1.2rem; color: var(--lx-muted); }
.lx-search input {
  width: 100%; padding: .95rem 1rem; padding-inline-start: 2.8rem; border-radius: 14px;
  border: 1px solid var(--lx-line); background: var(--lx-surface); color: var(--lx-ink); font-size: .95rem;
  box-shadow: var(--lx-shadow-sm); transition: border-color .2s ease, box-shadow .2s ease;
}
.lx-search input:focus { outline: 0; border-color: var(--lx-primary); box-shadow: 0 0 0 4px rgba(var(--lx-primary-rgb), .15); }
.lx-help-card { padding: 1.4rem; border-radius: 18px; background: var(--lx-grad); color: #fff; position: relative; overflow: hidden; }
.lx-help-card h5 { color: #fff; font-weight: 800; }
.lx-help-card p { color: rgba(255,255,255,.85); font-size: .9rem; }
.lx-acc { display: grid; gap: .75rem; }
.lx-acc details {
  border-radius: 16px; border: 1px solid var(--lx-line); background: var(--lx-surface);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.lx-acc details[open] { border-color: var(--lx-line-strong); box-shadow: var(--lx-shadow); }
.lx-acc summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.25rem; font-weight: 800; color: var(--lx-ink); font-size: .98rem; line-height: 1.6;
}
.lx-acc summary::-webkit-details-marker { display: none; }
.lx-acc summary .lx-plus { width: 30px; height: 30px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; background: rgba(var(--lx-primary-rgb), .1); color: var(--lx-primary); transition: transform .3s var(--lx-ease), background .3s ease, color .3s ease; }
.lx-acc details[open] .lx-plus { transform: rotate(45deg); background: var(--lx-primary); color: #fff; }
.lx-acc .lx-acc__body { padding: 0 1.25rem 1.2rem; color: var(--lx-muted); line-height: 1.95; font-size: .93rem; }
.lx-empty { text-align: center; padding: 2rem; color: var(--lx-muted); border: 1px dashed var(--lx-line); border-radius: 16px; }

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.lx-cta {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 32px; padding: clamp(2.5rem, 6vw, 4.5rem);
  background: linear-gradient(135deg, #312e81 0%, #5b21b6 45%, #0e7490 100%);
  color: #fff; text-align: center;
  box-shadow: 0 40px 80px -30px rgba(49, 46, 129, .6);
}
.lx-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%); }
.lx-cta::after { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; background: #22d3ee; filter: blur(110px); opacity: .35; top: -260px; inset-inline-end: -120px; z-index: -1; }
.lx-cta h2 { color: #fff; font-size: clamp(1.8rem, 3.8vw, 2.9rem); font-weight: 900; line-height: 1.3; margin-bottom: 1rem; }
.lx-cta p { color: rgba(255,255,255,.82); max-width: 640px; margin: 0 auto 2rem; font-size: 1.08rem; line-height: 1.9; }
.lx-cta__ticks { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.5rem; margin-top: 1.75rem; font-size: .88rem; color: rgba(255,255,255,.85); }
.lx-cta__ticks i { color: #4ade80; }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.lx-contact { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.lx-channel { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.1rem; border-radius: 16px; background: var(--lx-surface); border: 1px solid var(--lx-line); text-decoration: none; transition: all .3s var(--lx-ease); }
.lx-channel:hover { transform: translateX(-4px); border-color: var(--lx-line-strong); box-shadow: var(--lx-shadow); }
html[dir="ltr"] .lx-channel:hover { transform: translateX(4px); }
.lx-channel small { color: var(--lx-muted); display: block; font-size: .8rem; }
.lx-channel strong { color: var(--lx-ink); font-size: 1.02rem; }
.lx-channel .bx-chevron-left, .lx-channel .lx-go { margin-inline-start: auto; color: var(--lx-muted); font-size: 1.3rem; }
.lx-form { padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: 26px; background: var(--lx-surface); border: 1px solid var(--lx-line-strong); box-shadow: var(--lx-shadow-lg); position: relative; }
.lx-form .form-label { font-weight: 700; font-size: .85rem; color: var(--lx-ink); }
.lx-form .form-control, .lx-form .form-select { border-radius: 12px; padding: .72rem .95rem; border-color: var(--lx-line); background-color: var(--lx-surface-2); }
.lx-form .form-control:focus, .lx-form .form-select:focus { border-color: var(--lx-primary); background-color: var(--lx-surface); box-shadow: 0 0 0 4px rgba(var(--lx-primary-rgb), .14); }
.lx-type-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.lx-type-pills input { position: absolute; opacity: 0; pointer-events: none; }
.lx-type-pills label {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  padding: .6rem 1rem; border-radius: 12px; border: 1px solid var(--lx-line); background: var(--lx-surface-2);
  font-size: .85rem; font-weight: 700; color: var(--lx-muted); transition: all .2s ease; margin: 0;
}
.lx-type-pills input:checked + label { border-color: var(--lx-primary); color: var(--lx-primary); background: rgba(var(--lx-primary-rgb), .08); box-shadow: 0 0 0 3px rgba(var(--lx-primary-rgb), .12); }
.lx-type-pills input:focus-visible + label { outline: 3px solid rgba(var(--lx-primary-rgb), .4); }

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
.lx [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--lx-ease), transform .9s var(--lx-ease); transition-delay: var(--d, 0s); }
.lx [data-reveal].is-in { opacity: 1; transform: none; }
.lx.no-js [data-reveal] { opacity: 1; transform: none; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1199.98px) {
  .lx-float--a { inset-inline-end: -8px; }
  .lx-float--b { inset-inline-start: -8px; }
}
@media (max-width: 991.98px) {
  .lx-hero__grid, .lx-faq, .lx-contact { grid-template-columns: 1fr; }
  .lx-hero__copy { text-align: center; }
  .lx-hero__desc { margin-inline: auto; }
  .lx-hero__ctas, .lx-proof, .lx-compliance { justify-content: center; }
  .lx-window, html[dir="ltr"] .lx-window { transform: none; }
  .lx-stats { grid-template-columns: repeat(2, 1fr); }
  .lx-stat:nth-child(3)::before { display: none; }
  .lx-stat:nth-child(n+3) { border-top: 1px solid var(--lx-line); }
  .lx-grid--3, .lx-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .lx-bento > .is-large, .lx-bento > .is-standard { grid-column: span 12; }
  .lx-calc { grid-template-columns: 1fr 1fr; }
  .lx-calc .lx-rec { grid-column: span 2; }
  .lx-timeline { grid-template-columns: repeat(2, 1fr); row-gap: 2.5rem; }
  .lx-timeline::before { display: none; }
  .lx-faq__aside { position: static; }
}
@media (max-width: 767.98px) {
  .lx-grid--2, .lx-grid--3, .lx-grid--4 { grid-template-columns: 1fr; }
  .lx-float { display: none; }
  .lx-stat { padding: 1.1rem .9rem; gap: .65rem; }
  .lx-stat .lx-icon { width: 40px; height: 40px; font-size: 1.2rem; border-radius: 12px; }
  .lx-calc { grid-template-columns: 1fr; }
  .lx-calc .lx-rec { grid-column: auto; }
  .lx-timeline { grid-template-columns: 1fr; }
  .lx-seg { width: 100%; }
  .lx-seg button { flex: 1 1 auto; justify-content: center; padding: .6rem .8rem; font-size: .82rem; }
  .lx-hero__ctas .lx-btn { flex: 1 1 100%; }
  .lx-cta { border-radius: 24px; }
  .lx-mini-kpis { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .lx-stats { grid-template-columns: 1fr; }
  .lx-stat::before { display: none !important; }
  .lx-stat + .lx-stat { border-top: 1px solid var(--lx-line); }
}

@media (prefers-reduced-motion: reduce) {
  .lx *, .lx *::before, .lx *::after { animation: none !important; transition: none !important; }
  .lx [data-reveal] { opacity: 1; transform: none; }
  .lx-window { transform: none !important; }
}

/* Grid children must be allowed to shrink below their content width (product window toolbar) */
.lx-hero__grid > *, .lx-faq > *, .lx-contact > *, .lx-grid > *, .lx-bento > * { min-width: 0; }
.lx-hero__badge { max-width: 100%; }
.lx-hero__badge > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 767.98px) {
  .lx-stat__val { font-size: 1rem; }
  .lx-hero__title { font-size: 1.95rem; }
}

/* Hero only: span the full page width (aligned with the full-width navbar); other sections keep the 1320px container */
.lx-hero > .lx-container { max-width: none; padding-inline: clamp(1rem, 3.2vw, 4.5rem); }
@media (min-width: 1200px) {
  .lx-hero__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .lx-float--a { inset-inline-end: 10px; }
  .lx-float--b { inset-inline-start: -20px; }
}

/* ==========================================================================
   HOME TYPE SCALE
   The shared promo-design-system.css forces every p = 17px, h2 = 36px, h3 = 24px
   (with !important) for all public pages. The home page needs a clear hierarchy,
   so it gets its own fluid scale here — scoped to .lx and specific enough to win,
   leaving the other pages untouched.
     Display  52 → 32px   hero headline
     H2       36 → 26px   section titles
     H3       19 → 17px   card titles   (featured: plans 24px, bento 21px)
     Lead     18 → 16px   section intros
     Body     15 → 14.5px card copy, answers, quotes (Arabic-friendly 1.85 leading)
     Caption  13 → 12px   meta, notes
   ========================================================================== */

/* Display — hero headline */
html body #landingHero h1.lx-hero__title {
  font-size: clamp(2rem, 1.25rem + 2.3vw, 3.25rem) !important;
  font-weight: 900 !important;
  line-height: 1.22 !important;
}
html body #landingHero .lx-hero__subtitle { font-size: clamp(1rem, .9rem + .4vw, 1.2rem); }
html body #landingHero p.lx-hero__desc {
  font-size: clamp(1rem, .95rem + .2vw, 1.0625rem) !important;
  line-height: 1.9 !important;
}

/* H2 — section titles (incl. CTA band) */
html body .lx h2.lx-title,
html body .lx .lx-cta h2 {
  font-size: clamp(1.625rem, 1.2rem + 1.35vw, 2.25rem) !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}

/* Lead — section intros */
html body .lx p.lx-lead,
html body .lx .lx-cta p {
  font-size: clamp(1rem, .96rem + .2vw, 1.125rem) !important;
  line-height: 1.85 !important;
}

/* H3 — card titles */
html body .lx h3,
html body .lx h3.lx-card__title {
  font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem) !important;
  font-weight: 800 !important;
  line-height: 1.55 !important;
}
html body .lx .lx-bento h3.lx-card__title { font-size: clamp(1.15rem, 1.05rem + .35vw, 1.3125rem) !important; }
html body .lx h3.lx-plan__name { font-size: clamp(1.3rem, 1.15rem + .45vw, 1.5rem) !important; font-weight: 900 !important; line-height: 1.35 !important; }
html body .lx .lx-milestone h3 { font-size: 1rem !important; }
html body .lx .lx-form h3 { font-size: clamp(1.2rem, 1.1rem + .35vw, 1.375rem) !important; }

/* Body — card copy, answers, quotes */
html body .lx p.lx-card__text,
html body .lx .lx-acc__body {
  font-size: .9375rem !important;
  line-height: 1.85 !important;
}
html body .lx p.lx-review__quote { font-size: 1rem !important; line-height: 1.9 !important; }
html body .lx .lx-check li { font-size: .9rem; line-height: 1.75; }
html body .lx .lx-acc summary { font-size: clamp(.95rem, .92rem + .12vw, 1rem); line-height: 1.65; }

/* Caption — meta, notes, small paragraphs */
html body .lx p.small,
html body .lx p.lx-card__text.small,
html body .lx .lx-help-card p,
html body .lx .lx-form > p {
  font-size: .875rem !important;
  line-height: 1.75 !important;
}
html body .lx .lx-milestone p.lx-card__text { font-size: .85rem !important; }

/* Mobile fine-tuning */
@media (max-width: 575.98px) {
  html body .lx p.lx-card__text, html body .lx .lx-acc__body { font-size: .9rem !important; }
  html body .lx .lx-price__val { font-size: 2.1rem; }
  html body .lx .lx-num { font-size: 2rem; }
}