/* ===========================================================================
   Lucentive — a single visual world, committed on purpose.

   They sell cloud ERP, so the page background IS a live cloud sky. A theme
   toggle would destroy the one idea the page has, so this design does not
   offer one: every colour is painted explicitly and the page holds on any
   host ground.

   Every colour below is a MEASURED Lucentive token or a mathematical
   tint/shade of one. Nothing is invented. Source: design/tokens.css,
   re-measured 2026-08-21 across 1,054,367 bytes of linked CSS plus 183,238
   bytes of inline Movedo theme-option <style>.
   =========================================================================== */
:root{
  /* measured */
  --lx-brand:      #0652fd;   /* x37, inline theme options — the brand blue   */
  --lx-cta:        #491178;   /* x16, movedo-child/style.css — real CTA purple */
  --lx-white:      #ffffff;   /* x120                                         */

  /* --lx-brand mixed toward white */
  --lx-lift:       #7EA5FE;   /* brand 52% + white                            */
  --lx-sky-bottom: #8FB1FE;   /* brand 45% + white                            */

  /* --lx-brand multiplied toward black: the panel scale */
  --lx-p900:       #010F2E;   /* brand x18%                                   */
  --lx-p800:       #01143D;   /* brand x24%                                   */
  --lx-p700:       #02194C;   /* brand x30%                                   */
  --lx-p600:       #021F60;   /* brand x38%                                   */

  /* type over sky */
  --lx-ink:        #ffffff;
  --lx-ink-2:      rgba(255,255,255,.86);
  --lx-ink-3:      rgba(255,255,255,.68);
  --lx-hair:       rgba(255,255,255,.18);
  --lx-hair-2:     rgba(255,255,255,.30);

  /* a shadow tuned to the sky, not neutral black */
  --lx-shade:      4,14,44;

  --lx-display: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
  --lx-body:    'Poppins', ui-sans-serif, system-ui, sans-serif;


  /* Spacing scale — Malewicz: every value a multiple of 4. UI-PLAN Phase 1
     called for exactly this and design/tokens.css never got one, so it is
     established here and applied throughout. */
  --s1:4px;   --s2:8px;   --s3:12px;  --s4:16px;  --s5:20px;
  --s6:24px;  --s7:32px;  --s8:40px;  --s9:48px;  --s10:64px;
  --s11:80px; --s12:96px; --s13:120px;

  /* One rhythm for every content section. */
  --section-y:clamp(48px,6vw,72px);

  --lx-max: 1180px;
  --lx-r:   18px;
}

*{margin:0;padding:0;box-sizing:border-box}

html{
  scroll-behavior:smooth;
  overflow-x:clip;
  /* If WebGL is unavailable the shader draws nothing, so the page still
     resolves to a brand-blue sky rather than a white void. */
  background:linear-gradient(180deg,var(--lx-brand) 0%,var(--lx-sky-bottom) 100%);
  background-attachment:fixed;
}
body{
  font-family:var(--lx-body);
  color:var(--lx-ink);
  background:transparent;      /* the fixed canvas below is the ground */
  line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

#lx-sky{
  position:fixed; inset:0;
  width:100%; height:100%;
  z-index:-1; pointer-events:none;
  opacity:0; transition:opacity .8s ease;
}

/* --- type ---------------------------------------------------------------- */
h1,h2,h3,h4{font-family:var(--lx-display);font-weight:800;line-height:1.1;text-wrap:balance}
h1{font-size:clamp(34px,6vw,72px);letter-spacing:-.02em}
h2{font-size:clamp(27px,4vw,46px);letter-spacing:-.015em}
h3{font-size:clamp(18px,2vw,21px);font-weight:700;letter-spacing:-.005em}
h4{font-size:14px;font-weight:600}

/* White type over drifting WHITE clouds is the one real legibility risk in
   this design. A text-shadow is not a WCAG contrast mechanism, so every
   passage of body copy sits on a panel or inside a scrim; the shadow is
   belt-and-braces for the display type only. */
/* A tight rim on the glyph edge rather than a slab behind it: keeps white type
   readable when a cloud drifts under it without darkening the sky. */
.lx-sky-type{
  text-shadow:
    0 1px 1px rgba(var(--lx-shade),.55),
    0 1px 5px rgba(var(--lx-shade),.40);
}
.lx-eyebrow{
  font-family:var(--lx-display);
  font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lx-ink-2);
}
.lx-lede{font-size:clamp(16px,1.6vw,19px);color:var(--lx-ink);max-width:62ch}
.lx-muted{color:var(--lx-ink-3);font-size:14.5px}



/* --- layout -------------------------------------------------------------- */
.lx-wrap{max-width:var(--lx-max);margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.lx-section{padding-block:var(--section-y)}
.lx-head{display:flex;flex-direction:column;gap:16px;max-width:64ch}
.lx-head.is-centre{margin-inline:auto;text-align:center;align-items:center}

/* Deep-cobalt glass. Same hue as the sky, so panels read as depth in the
   weather rather than holes punched through it. */
.lx-panel{
  background:linear-gradient(180deg,rgba(2,25,76,.62) 0%,rgba(1,15,46,.74) 100%);
  border:1px solid var(--lx-hair);
  border-radius:var(--lx-r);
  backdrop-filter:blur(14px) saturate(1.25);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);
}

/* --- chrome -------------------------------------------------------------- */
.lx-header{position:fixed;top:14px;left:0;right:0;z-index:60;pointer-events:none}
.lx-nav{
  pointer-events:auto;
  display:flex;align-items:center;gap:16px;
  width:min(1140px,calc(100% - 32px));margin-inline:auto;
  padding:8px 8px 8px 20px;border-radius:999px;
  background:linear-gradient(180deg,rgba(2,25,76,.86) 0%,rgba(1,15,46,.92) 100%);
  border:1px solid var(--lx-hair);
  box-shadow:0 8px 40px rgba(var(--lx-shade),.34);
  backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  transition:width .32s cubic-bezier(.22,1,.36,1),padding .32s;
}
.lx-header[data-shrunk="true"] .lx-nav{width:min(900px,calc(100% - 32px))}
.lx-brand{display:flex;align-items:center;flex:0 0 auto;border-radius:8px}
.lx-brand img{height:25px;width:auto;display:block;filter:brightness(0) invert(1)}
.lx-navlinks{display:flex;gap:4px;list-style:none;margin-inline:auto;flex-wrap:nowrap}
.lx-navlinks a{
  color:var(--lx-ink-2);text-decoration:none;font-size:13.5px;font-weight:500;
  white-space:nowrap;padding:8px 12px;border-radius:999px;
  transition:background .16s,color .16s;
}
.lx-navlinks a:hover{color:var(--lx-white);background:rgba(255,255,255,.12)}
.lx-navlinks a[aria-current="page"]{color:var(--lx-white);background:rgba(255,255,255,.14)}
.lx-burger{display:none;background:none;border:0;color:var(--lx-white);padding:8px;cursor:pointer;border-radius:8px}


.lx-navlinks li{position:relative}








.lx-navtel{
  color:var(--lx-ink-2);text-decoration:none;font-size:13px;white-space:nowrap;
  padding:8px 4px;
}
.lx-navtel:hover{color:var(--lx-white)}
@media(max-width:1180px){ .lx-navtel{display:none} }
@media(max-width:900px){
  .lx-navlinks{
    display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;
    gap:4px;padding:16px;border-radius:20px;align-items:stretch;
    background:rgba(1,15,46,.96);border:1px solid var(--lx-hair);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  }
  .lx-nav[data-open="true"] .lx-navlinks{display:flex}
  
  
}

/* --- buttons ------------------------------------------------------------- */
.lx-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;
  font-family:var(--lx-display);font-weight:700;font-size:14px;
  padding:12px 24px;border-radius:999px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;transition:transform .16s,background .16s,box-shadow .16s;
  min-height:44px;
}
.lx-btn:hover{transform:translateY(-2px)}
/* primary: the brand-navy metal from the build, re-tinted off black */
.lx-btn-primary{
  color:var(--lx-white);
  border-color:rgba(255,255,255,.22);
  background:
    linear-gradient(180deg,rgba(255,255,255,.42) 0%,rgba(2,25,76,0) 46%),
    linear-gradient(0deg,var(--lx-p700),var(--lx-p700));
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,.34), 0 6px 24px rgba(var(--lx-shade),.35);
}
.lx-btn-primary:hover{box-shadow:inset 0 1px 0 0 rgba(255,255,255,.45),0 10px 30px rgba(var(--lx-shade),.42)}
/* glass: legible over open sky, where the dark metal reads as a hole */
.lx-btn-glass{
  color:var(--lx-white);
  border-color:rgba(255,255,255,.62);
  background:rgba(2,25,76,.65);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,.28);
}
.lx-btn-glass:hover{background:rgba(2,25,76,.78)}

:where(a,button,input,select,summary,[tabindex]):focus-visible{
  outline:3px solid var(--lx-white);
  outline-offset:3px;
  border-radius:6px;
}

/* --- hero ---------------------------------------------------------------- */
.lx-hero{
  position:relative;
  min-height:min(100svh,860px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:120px 20px 72px;
}

.lx-hero h1{max-width:16ch;margin-block:16px 0}
.lx-hero .lx-lede{margin-top:20px;margin-inline:auto;max-width:54ch;color:var(--lx-white)}
.lx-hero-actions{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:32px}
.lx-trust{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:32px;font-size:13.5px;color:var(--lx-ink-2)}
.lx-trust span{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;border-radius:999px;
  background:rgba(1,15,46,.42);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.lx-trust span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lx-lift);flex:0 0 auto}
.lx-trust a{color:inherit}

/* --- pillars (the mouse-tracking reveal) --------------------------------- */
.lx-pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px}
.lx-pillar{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:18rem;padding:24px 24px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  border-radius:var(--lx-r);border:1px solid var(--lx-hair);
  background:rgba(2,25,76,.42);
  backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2);
  transition:border-color .3s,transform .3s;
}
.lx-pillar:hover,.lx-pillar:focus-within{border-color:var(--lx-hair-2);transform:translateY(-3px)}
.lx-pillar canvas{
  position:absolute;inset:0;width:100%;height:100%;z-index:0;
  opacity:0;transition:opacity .35s ease;pointer-events:none;
  background:var(--lx-p900);
}
.lx-pillar[data-live="true"] canvas{opacity:1}
/* Content is always present — the canvas is atmosphere, never the only way
   to read the card. Hover-only content would be unreachable by keyboard. */
.lx-pillar-body{position:relative;z-index:1;display:flex;flex-direction:column;gap:12px}
.lx-pillar p{font-size:14.5px;color:var(--lx-ink-2);transition:color .3s}
.lx-pillar:hover p{color:var(--lx-white)}
.lx-tick{position:absolute;z-index:2;width:15px;height:15px;color:rgba(255,255,255,.42)}
.lx-tick.tl{top:9px;left:9px} .lx-tick.tr{top:9px;right:9px}
.lx-tick.bl{bottom:9px;left:9px} .lx-tick.br{bottom:9px;right:9px}


/* --- marquee ------------------------------------------------------------- */
/* Same mechanic as components/ui/infinite-moving-cards.tsx: the track holds
   exactly two copies of the list and translates -50%, so the loop is seamless.
   The gap correction keeps the seam from drifting. */
@keyframes lx-scroll{ to{ transform:translateX(calc(-50% - var(--lx-gap)/2)); } }
.lx-scroller{
  position:relative;z-index:20;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 18%,#000 82%,transparent);
}
.lx-track{
  display:flex;width:max-content;min-width:100%;flex-shrink:0;flex-wrap:nowrap;
  list-style:none;gap:var(--lx-gap);padding-block:16px;
  animation:lx-scroll var(--lx-speed,80s) var(--lx-dir,forwards) linear infinite;
}
.lx-scroller:hover .lx-track{animation-play-state:paused}
.lx-qcard{
  position:relative;flex-shrink:0;width:min(430px,82vw);
  padding:28px 32px;display:flex;flex-direction:column;
}
.lx-qcard blockquote{font-size:15px;line-height:1.65;color:var(--lx-ink-2);flex:1}
.lx-logotrack{--lx-gap:56px;align-items:center}
.lx-logotrack li{flex-shrink:0;display:flex;align-items:center;justify-content:center}
/* Four of the five client logos are greyscale PNGs with NO alpha channel, so
   the usual brightness(0) invert(1) silhouette trick turns each one into a
   solid white rectangle. Show them as they are, on a light chip. */
.lx-logotrack li{
  background:rgba(255,255,255,.92);
  border-radius:12px;
  padding:16px 20px;
  box-shadow:0 6px 22px rgba(var(--lx-shade),.18);
}
.lx-logotrack img{
  width:132px;height:auto;object-fit:contain;display:block;
  opacity:.9;transition:opacity .2s;
}
.lx-logotrack li:hover img{opacity:1}
@media (prefers-reduced-motion:reduce){
  .lx-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto}
}


/* --- animated skeletons -------------------------------------------------
   The techniques from the Aceternity bento demos rebuilt in CSS: floating
   containers that bob on a stagger, travelling beams, a masked grid plane and
   a labelled cursor. No stock screenshots — the content is Lucentive's.
   ------------------------------------------------------------------------ */

/* masked grid plane, from GridPattern */
.lx-gridpat{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.10) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(to top,#000,transparent);
  mask-image:linear-gradient(to top,#000,transparent);
}

/* floating chips, from the deploy demo's three containers */
.lx-floats{
  position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);
  gap:8px;width:100%;perspective:1000px;
}
.lx-float{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;
  min-height:84px;padding:12px 12px;border-radius:11px;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(1,15,46,.5));
  border:1px solid var(--lx-hair-2);
  box-shadow:0 10px 26px rgba(var(--lx-shade),.34);
  animation:lx-bob 2.4s ease-in-out infinite;
}
.lx-float:nth-child(2){animation-delay:.5s}
.lx-float:nth-child(3){animation-delay:1s}
.lx-float b{font-size:17px;font-weight:800;color:var(--lx-white);line-height:1}
.lx-float span{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--lx-ink-3)}
@keyframes lx-bob{
  0%,100%{transform:translateY(0) rotateX(0)}
  50%{transform:translateY(-9px) rotateX(9deg)}
}

/* travelling beams, from SkeletonThree */
.lx-beams{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.lx-beam{
  position:absolute;left:-40%;width:40%;height:1px;
  background:linear-gradient(90deg,transparent,var(--lx-lift),transparent);
  animation:lx-sweep 2.6s linear infinite;
}
@keyframes lx-sweep{to{left:100%}}

/* labelled cursor, from SkeletonTwo */
.lx-cursor{position:absolute;z-index:3;color:var(--lx-white);animation:lx-drift 4.5s ease-in-out infinite}
.lx-cursor small{
  position:absolute;top:14px;left:14px;white-space:nowrap;
  font-size:10px;padding:4px 8px;border-radius:5px;
  background:rgba(1,15,46,.86);border:1px solid var(--lx-hair-2);color:var(--lx-ink-2);
}
@keyframes lx-drift{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(48px,-14px)}
}

/* stacked rails, from the ATS progress skeleton */
.lx-rails{position:absolute;inset:0;display:flex;justify-content:center;gap:16px;pointer-events:none}
.lx-rails i{
  width:1px;height:100%;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.22),transparent);
}
.lx-chip{
  position:relative;z-index:2;width:fit-content;
  padding:8px 12px;border-radius:9px;font-size:12px;color:var(--lx-ink-2);
  background:rgba(1,15,46,.66);border:1px solid var(--lx-hair-2);
  box-shadow:0 8px 22px rgba(var(--lx-shade),.3);
  transition:border-color .2s,transform .2s;
}
.lx-bcard:hover .lx-chip{border-color:rgba(255,255,255,.44);transform:translateX(4px)}

@media (prefers-reduced-motion:reduce){
  .lx-float,.lx-beam,.lx-cursor{animation:none}
}


/* --- pricing ------------------------------------------------------------ */





.lx-price{display:flex;align-items:baseline;gap:8px;margin-top:16px;flex-wrap:wrap}
.lx-price b{font-family:var(--lx-display);font-size:clamp(26px,3.2vw,38px);font-weight:800;color:var(--lx-white);line-height:1}
.lx-price span{font-size:13px;color:var(--lx-ink-3)}
.lx-tier-tag{
  display:inline-block;width:fit-content;
  font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--lx-p900);background:var(--lx-lift);
  padding:4px 8px;border-radius:999px;margin-bottom:16px;
}
.lx-ticks{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:8px}
.lx-ticks li{position:relative;padding-left:24px;font-size:14px;color:var(--lx-ink-2);line-height:1.5}
.lx-ticks li::before{
  content:"";position:absolute;left:0;top:6px;width:13px;height:7px;
  border-left:2px solid var(--lx-lift);border-bottom:2px solid var(--lx-lift);
  transform:rotate(-45deg);
}
.lx-subnote{margin-top:16px;font-size:12.5px;color:var(--lx-ink-3);line-height:1.55}
.lx-bcard .lx-price,.lx-bcard .lx-ticks,.lx-bcard .lx-subnote,.lx-bcard .lx-tier-tag{transition:none}
.lx-bcard:hover .lx-price,.lx-bcard:hover .lx-ticks,.lx-bcard:hover .lx-subnote{transform:none}

/* the multiple comparison — bars draw in when the card reveals, competitors
   first, Lucentive last so the tighter range is the thing you land on. */
.lx-cmp{display:flex;flex-direction:column;gap:12px;width:100%}
.lx-cmp div{display:flex;align-items:center;gap:12px}
.lx-cmp small{flex:0 0 120px;font-size:11.5px;color:var(--lx-ink-3);text-align:right}
.lx-cmp i{
  height:24px;border-radius:4px;flex:0 0 auto;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.2);
  transform:scaleX(0);transform-origin:left;
}
.lx-cmp .ours{
  background:linear-gradient(90deg,var(--lx-brand),var(--lx-lift));border:0;
  box-shadow:0 8px 24px rgba(6,82,253,.4);
}
.lx-cmp b{
  font-size:12.5px;color:var(--lx-white);font-family:var(--lx-display);
  white-space:nowrap;opacity:0;transform:translateX(-8px);
}

/* loops continuously, same as the console bars — empty to full, then again */
.lx-cmp i{animation:lx-cmpbar 5s cubic-bezier(.22,1,.36,1) infinite}
.lx-cmp b{animation:lx-cmplab 5s ease-out infinite}
.lx-cmp div:nth-child(1) i,.lx-cmp div:nth-child(1) b{animation-delay:0s}
.lx-cmp div:nth-child(2) i,.lx-cmp div:nth-child(2) b{animation-delay:.35s}
.lx-cmp div:nth-child(3) i,.lx-cmp div:nth-child(3) b{animation-delay:.7s}
.lx-cmp .ours{box-shadow:0 8px 24px rgba(6,82,253,.45)}
@keyframes lx-cmpbar{
  0%       {transform:scaleX(0)}
  30%,86%  {transform:scaleX(1)}
  100%     {transform:scaleX(0)}
}
@keyframes lx-cmplab{
  0%,18%   {opacity:0;transform:translateX(-8px)}
  34%,86%  {opacity:1;transform:none}
  100%     {opacity:0;transform:translateX(-8px)}
}
@media (prefers-reduced-motion:reduce){
  .lx-cmp i{transform:scaleX(1);animation:none}
  .lx-cmp b{opacity:1;transform:none;animation:none}
}

/* --- shuffling deck ------------------------------------------------------
   One card, cycling. Replaces the four separate signal panels. */
.lx-deck{position:relative;width:100%;height:206px;perspective:900px}
.lx-deck article{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:8px;
  padding:20px 24px;border-radius:14px;
  background:linear-gradient(180deg,#0B1C46 0%,#03102E 100%);
  border:1px solid var(--lx-hair-2);
  box-shadow:0 14px 34px rgba(var(--lx-shade),.5);
  animation:lx-deck 16s cubic-bezier(.4,0,.2,1) infinite;
  will-change:transform,opacity;
}
.lx-deck article:nth-child(1){animation-delay:0s}
.lx-deck article:nth-child(2){animation-delay:-12s}
.lx-deck article:nth-child(3){animation-delay:-8s}
.lx-deck article:nth-child(4){animation-delay:-4s}
.lx-deck h5{font-family:var(--lx-display);font-size:15.5px;font-weight:700;color:var(--lx-white)}
.lx-deck p{font-size:13.5px;color:var(--lx-ink-2);line-height:1.55;max-width:none;margin:0}
.lx-deck em{
  font-style:normal;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--lx-lift);
}
@keyframes lx-deck{
  0%,  20% { transform:translateY(0) scale(1) rotate(0deg);        opacity:1;   z-index:40 }
  24%      { transform:translateY(-40px) scale(.95) rotate(-5deg);  opacity:0;   z-index:40 }
  25%      { transform:translateY(26px) scale(.88) rotate(0deg);    opacity:0;   z-index:10 }
  33%      { transform:translateY(22px) scale(.89);                 opacity:1;   z-index:10 }
  50%      { transform:translateY(16px) scale(.92);                 opacity:1;   z-index:20 }
  75%      { transform:translateY(8px)  scale(.96);                 opacity:1;   z-index:30 }
  100%     { transform:translateY(0) scale(1);                      opacity:1;   z-index:40 }
}
@media (prefers-reduced-motion:reduce){
  .lx-deck{height:auto}
  .lx-deck article{position:relative;inset:auto;animation:none;opacity:1;transform:none;margin-bottom:8px}
}


/* --- hero dashboard ------------------------------------------------------
   A drawn console, not a screenshot. Lucentive implements finance systems and
   does not sell one, so nothing here may look like "our product".

   The words are real: these are genuine month-end close steps (bank rec,
   AP/AR cutoff, accruals and prepaids, intercompany eliminations,
   depreciation, consolidation and FX translation) and real accounting
   dimensions (location, department, program). That is also where the SEO
   comes from — every label is DOM text.

   No currency figures, no percentages. Invented financials would be a claim.
   ------------------------------------------------------------------------ */
.lx-console{
  position:relative;width:min(1000px,100%);margin:48px auto 0;
  border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,rgba(2,25,76,.84) 0%,rgba(1,15,46,.92) 100%);
  border:1px solid var(--lx-hair-2);
  box-shadow:0 32px 80px rgba(var(--lx-shade),.5),inset 0 1px 0 0 rgba(255,255,255,.14);
  backdrop-filter:blur(16px) saturate(1.25);-webkit-backdrop-filter:blur(16px) saturate(1.25);
  text-align:left;
}
/* a beam that sweeps the chrome, so the console reads as live */
.lx-console::after{
  content:"";position:absolute;top:0;left:-30%;width:30%;height:1px;z-index:3;
  background:linear-gradient(90deg,transparent,var(--lx-lift),transparent);
  animation:lx-sweep 4s linear infinite;
}
.lx-cbar{
  display:flex;align-items:center;gap:8px;
  padding:12px 16px;border-bottom:1px solid var(--lx-hair);
  background:rgba(1,15,46,.5);
}
.lx-cbar u{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.26);display:block}
.lx-cbar span{margin-left:8px;font-size:11.5px;letter-spacing:.06em;color:var(--lx-ink-3);font-family:var(--lx-display)}
.lx-cpill{
  margin-left:auto;display:inline-flex;align-items:center;gap:8px;
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--lx-lift);padding:4px 12px;border-radius:999px;
  background:rgba(126,165,254,.14);border:1px solid rgba(126,165,254,.3);
}
.lx-cpill i{width:6px;height:6px;border-radius:50%;background:var(--lx-lift);animation:lx-pulse 1.8s ease-in-out infinite}
@keyframes lx-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

.lx-cgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:20px}
.lx-cpanel{padding:16px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.lx-cpanel h4{
  font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--lx-lift);margin-bottom:12px;
}

/* close checklist — steps tick through in sequence */
.lx-cklist{display:flex;flex-direction:column;gap:8px}
.lx-cklist div{
  display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--lx-ink-2);
  padding:4px 8px;border-radius:6px;margin-left:-8px;
  animation:lx-step 12s linear infinite;
}
.lx-cklist div:nth-child(1){animation-delay:0s}
.lx-cklist div:nth-child(2){animation-delay:2s}
.lx-cklist div:nth-child(3){animation-delay:4s}
.lx-cklist div:nth-child(4){animation-delay:6s}
.lx-cklist div:nth-child(5){animation-delay:8s}
.lx-cklist div:nth-child(6){animation-delay:10s}
@keyframes lx-step{
  0%,4%   {background:rgba(126,165,254,.16);color:#fff}
  16%,100%{background:transparent;color:rgba(255,255,255,.86)}
}
.lx-cklist i{
  width:15px;height:15px;border-radius:4px;flex:0 0 auto;position:relative;
  background:var(--lx-lift);
}
.lx-cklist i::after{
  content:"";position:absolute;left:4px;top:3px;width:5px;height:8px;
  border-right:2px solid var(--lx-p900);border-bottom:2px solid var(--lx-p900);
  transform:rotate(45deg);
}
.lx-cklist div.pending i{background:rgba(255,255,255,.18)}
.lx-cklist div.pending i::after{opacity:.35}

/* trial balance by entity, rolling into one consolidated line */
.lx-ctb{display:flex;flex-direction:column;gap:8px}
.lx-ctb div{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--lx-ink-2);overflow:hidden}
.lx-ctb small{flex:0 0 104px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lx-ctb b{
  height:14px;border-radius:4px;flex:0 0 auto;
  background:linear-gradient(90deg,rgba(126,165,254,.85),rgba(6,82,253,.55));
  transform-origin:left;animation:lx-fill 3.2s cubic-bezier(.22,1,.36,1) infinite alternate;
}
.lx-ctb div:nth-child(2) b{animation-delay:.2s}
.lx-ctb div:nth-child(3) b{animation-delay:.4s}
.lx-ctb div:nth-child(4) b{animation-delay:.6s}
@keyframes lx-fill{from{transform:scaleX(.72)}to{transform:scaleX(1)}}
.lx-ctb hr{border:0;border-top:1px dashed rgba(255,255,255,.2);margin:4px 0}
.lx-ctb .total small{color:#fff;font-weight:700;font-family:var(--lx-display)}
.lx-ctb .total b{
  background:linear-gradient(90deg,var(--lx-brand),var(--lx-lift));height:18px;
  box-shadow:0 6px 20px rgba(6,82,253,.4);animation-delay:.8s;
}

/* dimensional P&L */
.lx-cbars{display:flex;align-items:flex-end;gap:8px;height:88px}
.lx-cbars i{
  flex:1;border-radius:4px 4px 0 0;transform-origin:bottom;
  background:linear-gradient(180deg,var(--lx-lift),rgba(6,82,253,.4));
  animation:lx-grow 2.8s cubic-bezier(.22,1,.36,1) infinite alternate;
}
.lx-cbars i:nth-child(2){animation-delay:.15s} .lx-cbars i:nth-child(3){animation-delay:.3s}
.lx-cbars i:nth-child(4){animation-delay:.45s} .lx-cbars i:nth-child(5){animation-delay:.6s}
.lx-cbars i:nth-child(6){animation-delay:.75s} .lx-cbars i:nth-child(7){animation-delay:.9s}
@keyframes lx-grow{from{transform:scaleY(.78)}to{transform:scaleY(1)}}
.lx-clabels{display:flex;gap:8px;margin-top:8px}
.lx-clabels span{flex:1;text-align:center;font-size:9px;color:var(--lx-ink-3);letter-spacing:.03em}

/* days-to-close trend — the line draws itself */
.lx-cspark{width:100%;height:88px;display:block;overflow:visible}
.lx-cspark path.line{
  fill:none;stroke:var(--lx-lift);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:420;stroke-dashoffset:420;
  animation:lx-draw 4.5s ease-in-out infinite;
}
.lx-cspark path.area{fill:url(#lxgrad);opacity:0;animation:lx-fade 4.5s ease-in-out infinite}
.lx-cspark circle{fill:#fff;opacity:0;animation:lx-fade 4.5s ease-in-out infinite}
@keyframes lx-draw{0%{stroke-dashoffset:420}45%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:420}}
@keyframes lx-fade{0%,20%{opacity:0}55%,85%{opacity:1}100%{opacity:0}}
.lx-ctrend{margin-top:8px;font-size:10px;color:var(--lx-ink-3);letter-spacing:.04em}

.lx-ctiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 20px 20px}
.lx-ctile{padding:12px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.lx-ctile b{display:block;font-size:11px;color:var(--lx-white);font-family:var(--lx-display);font-weight:700}
.lx-ctile span{display:block;margin-top:4px;font-size:10.5px;color:var(--lx-ink-3);line-height:1.4}
.lx-ccap{padding:0 20px 16px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.4)}

@media(max-width:820px){
  .lx-cgrid{grid-template-columns:1fr}
  .lx-ctiles{grid-template-columns:1fr}
  .lx-console{margin-top:32px}
}
@media (prefers-reduced-motion:reduce){
  .lx-console::after,.lx-cpill i,.lx-cklist div,.lx-ctb b,.lx-cbars i,
  .lx-cspark path,.lx-cspark circle{animation:none}
  .lx-cspark path.line{stroke-dashoffset:0}
  .lx-cspark path.area,.lx-cspark circle{opacity:1}
}


/* A pointer that works the console — moves between panels, pauses, clicks.
   Same idea as the Aceternity skeleton cursor, but on a scripted route so it
   reads as someone actually closing the books. */
.lx-ccursor{
  position:absolute;z-index:6;pointer-events:none;width:18px;height:18px;
  animation:lx-route 16s cubic-bezier(.45,0,.2,1) infinite;
}
.lx-ccursor svg{display:block;filter:drop-shadow(0 2px 6px rgba(4,14,44,.7))}

/* the click ring fires at each pause */
.lx-ccursor::after{
  content:"";position:absolute;left:-11px;top:-11px;width:40px;height:40px;
  border-radius:50%;border:2px solid var(--lx-lift);opacity:0;
  animation:lx-click 16s linear infinite;
}
@keyframes lx-route{
  0%,  10% { left:16%;  top:30%  }
  18%, 28% { left:18%;  top:41%  }
  36%, 46% { left:60%;  top:29%  }
  54%, 64% { left:66%;  top:47%  }
  72%, 82% { left:22%;  top:70%  }
  90%,100% { left:16%;  top:30%  }
}
@keyframes lx-click{
  0%,7%   {opacity:0;transform:scale(.35)}
  10%     {opacity:.85;transform:scale(.5)}
  15%     {opacity:0;transform:scale(1)}
  16%,25% {opacity:0;transform:scale(.35)}
  28%     {opacity:.85;transform:scale(.5)}
  33%     {opacity:0;transform:scale(1)}
  34%,43% {opacity:0;transform:scale(.35)}
  46%     {opacity:.85;transform:scale(.5)}
  51%     {opacity:0;transform:scale(1)}
  52%,61% {opacity:0;transform:scale(.35)}
  64%     {opacity:.85;transform:scale(.5)}
  69%     {opacity:0;transform:scale(1)}
  70%,79% {opacity:0;transform:scale(.35)}
  82%     {opacity:.85;transform:scale(.5)}
  87%     {opacity:0;transform:scale(1)}
  88%,100%{opacity:0;transform:scale(.35)}
}

/* --- scroll ------------------------------------------------------------- */
.lx-progress{
  position:fixed;top:0;left:0;height:2px;z-index:80;
  width:100%;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--lx-brand),var(--lx-lift));
  pointer-events:none;
}
/* reveals get scale and a touch of blur so scrolling has some depth */
.lx-rv{
  opacity:0;transform:translate3d(0,28px,0) scale(.985);filter:blur(4px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),
             transform .8s cubic-bezier(.16,1,.3,1),
             filter .8s cubic-bezier(.16,1,.3,1);
}
.lx-rv.is-in{opacity:1;transform:none;filter:none}

@media (prefers-reduced-motion:reduce){
  .lx-ccursor{animation:none;display:none}
  .lx-progress{display:none}
  .lx-rv{opacity:1;transform:none;filter:none}
}

/* --- clients ------------------------------------------------------------- */
.lx-logos{display:grid;grid-template-columns:repeat(5,1fr);gap:32px;align-items:center;margin-top:32px}
.lx-logo{display:flex;align-items:center;justify-content:center}
.lx-logo img{
  width:100%;max-width:150px;height:auto;object-fit:contain;
  filter:brightness(0) invert(1);opacity:.82;transition:opacity .2s;
}
.lx-logo img:hover{opacity:1}


/* --- bento -------------------------------------------------------------- */
/* Card shell, grid and hover motion taken from the Aceternity bento demos.
   Every image in those demos is a stock screenshot or a stock headshot, so
   none of them are used: the panels below are drawn, and the team photos are
   Lucentive's own. */
.lx-bento{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);margin-top:44px}
.lx-bento-5{grid-template-columns:repeat(5,1fr)}
.lx-bcard{
  position:relative;isolation:isolate;display:flex;flex-direction:column;
  overflow:hidden;border-radius:18px;min-height:23rem;
  background:linear-gradient(180deg,rgba(2,25,76,.62) 0%,rgba(1,15,46,.76) 100%);
  border:1px solid var(--lx-hair);
  backdrop-filter:blur(14px) saturate(1.25);-webkit-backdrop-filter:blur(14px) saturate(1.25);
  transition:border-color .3s,transform .3s;
}
.lx-bcard:hover{border-color:var(--lx-hair-2);transform:translateY(-3px)}
.lx-bcard-body{padding:24px 24px 8px}
.lx-bcard h3{
  font-size:17px;font-weight:700;color:var(--lx-white);
  transition:transform .2s cubic-bezier(.22,1,.36,1);
}
.lx-bcard:hover h3{transform:translateX(9px)}
.lx-bcard h4{font-size:13.5px;font-weight:600;color:var(--lx-lift);margin-top:4px;
  transition:transform .2s cubic-bezier(.22,1,.36,1)}
.lx-bcard:hover h4{transform:translateX(13px)}
.lx-bcard p{margin-top:12px;font-size:14.5px;line-height:1.6;color:var(--lx-ink-2);max-width:38ch;
  transition:transform .2s cubic-bezier(.22,1,.36,1)}
.lx-bcard:hover p{transform:translateX(13px)}
.lx-bcard .lx-more{margin:16px 24px 24px}
.lx-skel{position:relative;flex:1;overflow:hidden;min-height:9rem}
.lx-span2{grid-column:span 2}
.lx-span3{grid-column:span 3}


/* ---- drawn panels: no stock screenshots, nothing claims to be a product ---- */
.lx-ill{position:absolute;inset:0;padding:16px 24px 40px;display:flex;align-items:flex-end}
.lx-ill-note{
  position:absolute;left:26px;bottom:10px;font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:rgba(255,255,255,.42);
}
/* close-calendar */
.lx-cal{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;width:100%}
.lx-cal span{aspect-ratio:1;border-radius:3px;background:rgba(255,255,255,.13)}
.lx-cal span.on{background:var(--lx-lift)}
.lx-cal span.now{background:var(--lx-white);box-shadow:0 0 0 2px rgba(255,255,255,.28)}
/* entity tiles converging */
.lx-ent{display:flex;flex-direction:column;gap:8px;width:100%}
.lx-ent b{display:flex;gap:8px}
.lx-ent i{
  flex:1;height:22px;border-radius:5px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.16);
}
.lx-ent .roll{height:30px;border-radius:6px;background:linear-gradient(90deg,var(--lx-brand),var(--lx-lift));
  border:0;box-shadow:0 6px 20px rgba(6,82,253,.35)}
/* dimensional bars */
.lx-bars{display:flex;align-items:flex-end;gap:8px;width:100%;height:118px}
.lx-bars i{flex:1;border-radius:4px 4px 0 0;background:linear-gradient(180deg,var(--lx-lift),rgba(6,82,253,.45))}
/* spreadsheet rows */
.lx-rows{display:flex;flex-direction:column;gap:8px;width:100%}
.lx-rows i{height:13px;border-radius:3px;background:rgba(255,255,255,.11)}
.lx-rows i:nth-child(odd){background:rgba(255,255,255,.16)}
/* integration nodes */
.lx-net{position:relative;width:100%;height:130px}
.lx-net i{
  position:absolute;width:34px;height:34px;border-radius:9px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
}
.lx-net i.core{width:46px;height:46px;border-radius:12px;
  background:linear-gradient(180deg,var(--lx-brand),var(--lx-p600));border-color:rgba(255,255,255,.4)}

@media(max-width:1000px){
  .lx-bento,.lx-bento-5{grid-template-columns:repeat(2,1fr)}
  .lx-span2,.lx-span3{grid-column:span 2}
}
@media(max-width:640px){
  .lx-bento,.lx-bento-5{grid-template-columns:1fr}
  .lx-span2,.lx-span3{grid-column:span 1}
  .lx-bcard{min-height:20rem}
}

/* --- services ------------------------------------------------------------ */
.lx-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.lx-card{padding:28px 24px;display:flex;flex-direction:column;gap:8px;transition:border-color .2s,transform .2s}
.lx-card:hover{border-color:var(--lx-hair-2);transform:translateY(-3px)}
.lx-card h4{color:var(--lx-lift);letter-spacing:.02em}
.lx-card p{font-size:15px;color:var(--lx-ink-2);flex:1}
.lx-more{
  margin-top:8px;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--lx-display);font-weight:700;font-size:14px;
  color:var(--lx-white);text-decoration:none;
}
.lx-more span{transition:transform .2s}
.lx-more:hover span{transform:translateX(4px)}

/* --- quotes -------------------------------------------------------------- */
.lx-quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.lx-quote{padding:28px 24px;display:flex;flex-direction:column}
.lx-quote blockquote{font-size:15.5px;color:var(--lx-ink-2);flex:1}
.lx-quote blockquote::before{
  content:"\201C";display:block;font-family:var(--lx-display);font-size:44px;line-height:.8;
  color:var(--lx-lift);margin-bottom:8px;
}
.lx-cite{margin-top:20px;padding-top:16px;border-top:1px solid var(--lx-hair);font-style:normal}
.lx-cite b{display:block;font-family:var(--lx-display);font-size:14.5px;color:var(--lx-white)}
.lx-cite span{font-size:13px;color:var(--lx-ink-3)}

/* --- faq (native disclosure: keyboard-operable without script) ----------- */
.lx-faq{max-width:800px;margin:40px auto 0}
.lx-faq details{border-bottom:1px solid var(--lx-hair)}
.lx-faq summary{
  list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative;
  font-family:var(--lx-display);font-weight:600;font-size:16.5px;color:var(--lx-white);
}
.lx-faq summary::-webkit-details-marker{display:none}
.lx-faq summary::after{
  content:"";position:absolute;right:12px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--lx-lift);border-bottom:2px solid var(--lx-lift);
  transform:translateY(-70%) rotate(45deg);transition:transform .22s;
}
.lx-faq details[open] summary::after{transform:translateY(-25%) rotate(225deg)}
.lx-faq p{padding:0 12px 24px 0;color:var(--lx-ink-2);font-size:15px}

/* --- enquiry ------------------------------------------------------------- */













/* --- closing ------------------------------------------------------------- */
.lx-close{text-align:center;padding-block:clamp(64px,10vw,120px)}

.lx-close h2{max-width:18ch;margin-inline:auto}
.lx-close p{margin:16px auto 32px;max-width:46ch;color:var(--lx-ink-2)}

/* --- footer -------------------------------------------------------------- */
.lx-footer{padding-block:0 32px}
.lx-footer .lx-panel{padding:40px clamp(24px,4vw,44px) 24px}
.lx-foot-top{display:flex;flex-wrap:wrap;gap:36px;justify-content:space-between}
.lx-foot-brand img{height:27px;width:auto;filter:brightness(0) invert(1)}
.lx-li{
  display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;margin-top:16px;
  border-radius:999px;border:1px solid var(--lx-hair);color:var(--lx-ink-3);
  background:rgba(255,255,255,.06);transition:color .16s,background .16s;
}
.lx-li:hover{color:var(--lx-white);background:rgba(255,255,255,.14)}
.lx-foot-cols{display:grid;grid-template-columns:repeat(3,minmax(130px,1fr));gap:32px}
.lx-foot-cols p{font-family:var(--lx-display);font-weight:700;font-size:13.5px;color:var(--lx-white);margin-bottom:12px}
.lx-foot-cols ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.lx-foot-cols a{color:var(--lx-ink-3);text-decoration:none;font-size:13.5px}
.lx-foot-cols a:hover{color:var(--lx-white)}
.lx-legal{margin-top:32px;padding-top:20px;border-top:1px solid var(--lx-hair);font-size:12.5px;color:var(--lx-ink-3);
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;align-items:center}
.lx-legal a{color:var(--lx-ink-2)}
.lx-legal-links{display:flex;flex-wrap:wrap;gap:8px 18px}
.lx-legal-links a{text-decoration:none}
.lx-legal-links a:hover{color:var(--lx-white)}

/* --- reveal on scroll ---------------------------------------------------- */




/* --- team --------------------------------------------------------------- */
.lx-tcard{min-height:0}
.lx-tphoto{position:relative;aspect-ratio:3/4;overflow:hidden;background:rgba(1,15,46,.5)}
.lx-tphoto img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;
  transition:transform .5s cubic-bezier(.22,1,.36,1)}
.lx-tcard:hover .lx-tphoto img{transform:scale(1.04)}
.lx-tphoto::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(1,15,46,0) 46%,rgba(1,15,46,.72) 100%);
}
.lx-tbody{padding:16px 20px 20px}
.lx-tcard h3{font-size:16px}
.lx-tcard h4{font-size:12.5px;margin-top:4px}
.lx-tcard p{font-size:13px;margin-top:8px;color:var(--lx-ink-3);max-width:none}
.lx-tcard:hover h3,.lx-tcard:hover h4,.lx-tcard:hover p{transform:none}
.lx-tli{
  display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;margin-top:16px;
  border-radius:999px;border:1px solid var(--lx-hair);color:var(--lx-ink-3);
  background:rgba(255,255,255,.06);transition:color .16s,background .16s;
}
.lx-tli:hover{color:var(--lx-white);background:rgba(255,255,255,.14)}
.lx-team{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.lx-team{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.lx-team{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.lx-team{grid-template-columns:1fr}}


/* --- contact ------------------------------------------------------------ */
.lx-contact{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.lx-cdetails{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:24px}
.lx-cdetails a,.lx-cdetails span{font-size:14px;color:var(--lx-ink-2);text-decoration:none}
.lx-cdetails a:hover{color:var(--lx-white)}
.lx-cdot{width:4px;height:4px;border-radius:50%;background:var(--lx-ink-3);flex:0 0 auto}

/* "We are here" — a drawn ground plane, not a world map. Lucentive is one
   office in Frisco; a globe would say something untrue about the footprint. */
.lx-plane{position:relative;margin-top:56px;height:250px;perspective:800px}
.lx-plane-grid{
  position:absolute;inset-inline:-10%;top:40px;height:230px;
  transform:rotateX(58deg);transform-origin:50% 0;
  background-image:
    linear-gradient(rgba(255,255,255,.42) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.42) 1px,transparent 1px);
  background-size:38px 38px;
  -webkit-mask-image:radial-gradient(ellipse 60% 70% at 50% 30%,#000,transparent 72%);
  mask-image:radial-gradient(ellipse 60% 70% at 50% 30%,#000,transparent 72%);
}
.lx-pin{position:absolute;left:50%;top:64px;transform:translateX(-50%);z-index:2}
.lx-pin-tag{
  position:relative;transform:translateX(-50%);
  padding:4px 12px;border-radius:8px;font-size:12px;white-space:nowrap;
  background:rgba(1,15,46,.86);border:1px solid var(--lx-hair-2);color:var(--lx-white);
}
.lx-pin-tag::after{
  content:"";position:absolute;left:14%;bottom:-1px;width:72%;height:1px;
  background:linear-gradient(90deg,transparent,var(--lx-lift),transparent);
}
.lx-pin-beam{
  position:absolute;left:0;top:26px;width:2px;height:64px;transform:translateX(-50%);
  background:linear-gradient(180deg,transparent,var(--lx-white));
  box-shadow:0 0 8px rgba(126,165,254,.8);
}
.lx-pin-dot{
  position:absolute;left:0;top:88px;width:7px;height:7px;border-radius:50%;
  transform:translateX(-50%);background:var(--lx-white);
  box-shadow:0 0 12px 3px rgba(126,165,254,1),0 0 0 2px rgba(6,82,253,.7);
}
.lx-ring{
  position:absolute;left:0;top:90px;width:132px;height:132px;margin-left:-64px;margin-top:-64px;
  border-radius:50%;background:rgba(126,165,254,.34);
  transform:rotateX(70deg);opacity:0;
  animation:lx-ping 6s linear infinite;
}
.lx-ring:nth-of-type(2){animation-delay:2s}
.lx-ring:nth-of-type(3){animation-delay:4s}
@keyframes lx-ping{
  0%{opacity:0;transform:rotateX(70deg) scale(.2)}
  25%{opacity:1}
  60%{opacity:.4}
  100%{opacity:0;transform:rotateX(70deg) scale(1)}
}
.lx-cform{position:relative;overflow:hidden;padding:32px clamp(20px,3vw,36px)}
.lx-cform::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:20px 20px;
  -webkit-mask-image:linear-gradient(#000,transparent);
  mask-image:linear-gradient(#000,transparent);
}
.lx-cform > *{position:relative;z-index:1}
.lx-cfield{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.lx-cfield label{font-size:13.5px;font-weight:500;color:var(--lx-ink-2)}
.lx-cfield input,.lx-cfield textarea{
  width:100%;padding:12px 16px;border-radius:10px;font:inherit;font-size:15px;
  border:1px solid var(--lx-hair-2);background:rgba(255,255,255,.10);color:var(--lx-white);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:border-color .16s,background .16s;
}
.lx-cfield textarea{resize:vertical;min-height:128px}
.lx-cfield input::placeholder,.lx-cfield textarea::placeholder{color:rgba(255,255,255,.38)}
.lx-cfield input:focus,.lx-cfield textarea:focus{
  border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.16);outline:none;
}
.lx-cnote{margin-top:16px;font-size:13px;color:var(--lx-ink-3)}
@media(max-width:900px){
  .lx-contact{grid-template-columns:1fr;gap:32px}
  .lx-plane{display:none}
}

/* --- views --------------------------------------------------------------- */

/* --- responsive ---------------------------------------------------------- */
@media(max-width:1000px){
  .lx-pillars{grid-template-columns:repeat(2,1fr)}
  .lx-cards,.lx-quotes{grid-template-columns:1fr}
  .lx-logos{grid-template-columns:repeat(3,1fr);gap:24px}
}
@media(max-width:760px){
  .lx-navlinks{
    display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;gap:4px;
    padding:16px;border-radius:20px;
    background:rgba(1,15,46,.94);border:1px solid var(--lx-hair);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  }
  .lx-nav[data-open="true"] .lx-navlinks{display:flex}
  .lx-nav{position:relative;justify-content:space-between;padding:8px 8px 8px 16px;gap:8px}
  .lx-burger{display:inline-flex}
  .lx-nav > .lx-btn{padding:8px 16px;font-size:12.5px}
  .lx-brand img{height:22px}
  .lx-foot-cols{grid-template-columns:repeat(2,1fr)}
  .lx-hero{padding-top:104px}
}
@media(max-width:460px){
  .lx-pillars{grid-template-columns:1fr}
  .lx-logos{grid-template-columns:repeat(2,1fr)}
  .lx-hero-actions .lx-btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .lx-rv{opacity:1;transform:none}
  .lx-btn:hover,.lx-pillar:hover,.lx-card:hover{transform:none}
}

/* ===========================================================================
   The assessment. Lifted verbatim from the tested quiz and scoped to
   #view-quiz so its generic class names cannot reach the marketing view.
   =========================================================================== */
/* Assessment styles — measured Lucentive values, scoped to #view-quiz. */
:root{--brand:#0652fd; --brand-deep:#02194C; --brand-soft:#ebf1ff;
  --cta:#491178; --cta-border:#49127a;
  --ink:#191919; --ink-2:#4f4f4f; --body:#4f4f4f; --muted:#777777;
  --paper:#fafafa; --surface:#ffffff; --surface-2:#eef1f6; --rule:#e2e2e2;
  --good:#0652fd; --warn:#021F60; --edge:#02194C;
  --font-display:'Montserrat',ui-sans-serif,system-ui,sans-serif;
  --font-body:'Poppins',ui-sans-serif,system-ui,sans-serif;}
#view-quiz *{margin:0;padding:0;box-sizing:border-box}
#view-quiz{font-family:var(--font-body);color:var(--body);line-height:1.65;font-size:16px;}
#view-quiz h1, #view-quiz h2, #view-quiz h3, #view-quiz legend{font-family:var(--font-display);color:var(--ink);line-height:1.25}
#view-quiz .wrap{max-width:760px;margin:0 auto;padding:0 clamp(18px,4vw,44px)}
#view-quiz .logo{font-family:var(--font-display);font-weight:700;font-size:20px;color:var(--ink);text-decoration:none}
#view-quiz .logo span{color:var(--brand)}
#view-quiz .head-phone{font-size:14px;color:var(--ink-2);text-decoration:none;font-weight:600}
#view-quiz .head-phone:hover{color:var(--brand)}
#view-quiz .hero{background:transparent;padding:clamp(48px,8vw,86px) 0 clamp(34px,6vw,58px);border-bottom:0;text-align:center}
#view-quiz .hero .wrap{max-width:820px}
#view-quiz .hero .kicker{color:rgba(255,255,255,.85);text-shadow:0 1px 10px rgba(4,14,44,.5)}
#view-quiz .hero h1{color:#fff;text-shadow:0 1px 2px rgba(4,14,44,.45),0 2px 18px rgba(4,14,44,.55),0 8px 48px rgba(4,14,44,.35)}
#view-quiz .hero p.lede{margin-left:auto;margin-right:auto;color:#fff;text-shadow:0 1px 2px rgba(4,14,44,.5),0 2px 16px rgba(4,14,44,.5)}
#view-quiz .hero p.honest{color:rgba(255,255,255,.8);text-shadow:0 1px 10px rgba(4,14,44,.5)}
#view-quiz .hero p.honest strong{color:#fff}
#view-quiz .kicker{display:inline-block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--brand);margin-bottom:14px}
#view-quiz h1{font-size:clamp(28px,5vw,42px);font-weight:800;margin-bottom:14px}
#view-quiz .hero p.lede{font-size:clamp(16px,2.4vw,19px);color:var(--ink-2);max-width:56ch}
#view-quiz .hero p.honest{margin-top:14px;font-size:14.5px;color:var(--muted)}
#view-quiz .hero p.honest strong{color:var(--ink-2)}
#view-quiz .progress{position:sticky;top:0;z-index:5;background:rgba(255,255,255,.9);border-bottom:1px solid var(--rule)}
#view-quiz .progress .wrap{display:flex;align-items:center;gap:14px;padding-top:10px;padding-bottom:10px}
#view-quiz .bar{flex:1;height:6px;background:var(--surface-2);border-radius:3px;overflow:hidden}
#view-quiz .bar i{display:block;height:100%;width:0;background:var(--brand);border-radius:3px;transition:width .35s ease}
@media (prefers-reduced-motion: reduce){#view-quiz .bar i{transition:none}}
#view-quiz .count{font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap}
#view-quiz .quiz{padding:clamp(28px,5vw,48px) 0 64px}
#view-quiz fieldset{border:0;background:rgba(255,255,255,.93);border:1px solid var(--rule);border-radius:10px;padding:clamp(20px,3.5vw,30px);margin-bottom:18px}
#view-quiz legend{float:left;width:100%;font-size:clamp(17px,2.6vw,20px);font-weight:700;margin-bottom:6px}
#view-quiz .why{font-size:13.5px;color:var(--muted);margin-bottom:16px;clear:both}
#view-quiz .opt{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--rule);border-radius:8px;margin-bottom:10px;cursor:pointer;background:var(--surface);transition:border-color .15s, background .15s}
#view-quiz .opt:hover{border-color:var(--brand)}
#view-quiz .opt input{margin-top:4px;accent-color:var(--brand);width:17px;height:17px;flex:none}
#view-quiz .opt span{font-size:15px;color:var(--ink-2)}
#view-quiz .opt.sel{border-color:var(--brand);background:var(--brand-soft)}
#view-quiz .btn{display:inline-block;font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.02em;padding:15px 34px;border-radius:4px;border:2px solid var(--cta-border);background:var(--cta);color:#fff;cursor:pointer;text-decoration:none;text-align:center}
#view-quiz .btn:hover{background:#3a0d60}
#view-quiz .btn.ghost{background:transparent;color:var(--cta);border-color:var(--cta-border)}
#view-quiz .btn.ghost:hover{background:var(--brand-soft)}
#view-quiz .btn[disabled]{opacity:.45;cursor:not-allowed}
#view-quiz .actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}
#view-quiz .verdict{display:none;padding:clamp(28px,5vw,48px) 0 72px}
#view-quiz .verdict.show{display:block}
#view-quiz .v-band{border-radius:10px;padding:clamp(22px,4vw,34px);color:#fff;margin-bottom:26px}
#view-quiz .v-band .v-label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;opacity:.85;margin-bottom:8px}
#view-quiz .v-band h2{color:#fff;font-size:clamp(24px,4.4vw,34px);margin-bottom:10px}
#view-quiz .v-band p{font-size:16px;max-width:60ch;opacity:.96}
#view-quiz .v-stay .v-band{background:var(--good)}
#view-quiz .v-edge .v-band{background:var(--edge)}
#view-quiz .v-grown .v-band{background:var(--cta)}
#view-quiz .v-detail h3{font-size:19px;margin:26px 0 10px}
#view-quiz .v-detail ul{margin:0 0 8px 20px}
#view-quiz .v-detail li{margin-bottom:8px;font-size:15px}
#view-quiz .v-detail li strong{color:var(--ink-2)}
#view-quiz .scorecard{width:100%;border-collapse:collapse;margin:14px 0 6px;font-size:14px}
#view-quiz .scorecard th, #view-quiz .scorecard td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--rule)}
#view-quiz .scorecard th{font-family:var(--font-display);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
#view-quiz .pill{display:inline-block;font-size:12px;font-weight:700;padding:2px 10px;border-radius:20px}
#view-quiz .pill.p0{background:var(--surface-2);color:var(--muted)}
#view-quiz .pill.p1{background:var(--brand-soft);color:var(--brand-deep)}
#view-quiz .pill.p2{background:#D2E0FF;color:var(--warn)}
#view-quiz .pill.p3{background:#f3ecfa;color:var(--cta)}
#view-quiz .book{background:rgba(255,255,255,.93);border:1px solid var(--rule);border-radius:10px;padding:clamp(20px,3.5vw,30px);margin-top:30px}
#view-quiz .book h3{margin:0 0 8px}
#view-quiz .book p{font-size:15px;margin-bottom:16px}
#view-quiz .book .small{font-size:13px;color:var(--muted);margin-top:12px;margin-bottom:0}
#view-quiz .retake{margin-top:26px;font-size:14px}
#view-quiz .retake a{color:var(--brand)}
@media print{#view-quiz .site-head, #view-quiz .progress, #view-quiz .actions, #view-quiz .book, #view-quiz .retake, #view-quiz .verdict{display:block}}
#view-quiz .np-links a:hover, #view-quiz @media(max-width:820px){}
@media(max-width:640px){}
#view-quiz .hero .kicker{color:rgba(255,255,255,.88)!important;text-shadow:0 1px 10px rgba(4,14,44,.5)}
#view-quiz .hero h1{color:#fff!important}
#view-quiz .hero p.lede{color:#fff!important;text-shadow:0 1px 2px rgba(4,14,44,.5),0 2px 16px rgba(4,14,44,.5)}
#view-quiz .hero p.honest{color:rgba(255,255,255,.85)!important;text-shadow:0 1px 10px rgba(4,14,44,.55)}
#view-quiz .hero p.honest strong{color:#fff!important}
#view-quiz{padding-top:96px}
#view-quiz .hero{background:transparent;border-bottom:0;text-align:center;padding:clamp(40px,6vw,64px) 0 clamp(24px,4vw,40px)}
#view-quiz .hero .wrap{max-width:820px}
#view-quiz .hero .kicker{color:var(--lx-ink-2)}
#view-quiz .hero h1{color:var(--lx-white);font-size:clamp(30px,5vw,52px)}
#view-quiz .hero p.lede{color:var(--lx-white);margin-inline:auto;
  text-shadow:0 1px 2px rgba(var(--lx-shade),.5),0 2px 16px rgba(var(--lx-shade),.5)}
#view-quiz .hero p.honest{color:var(--lx-ink-2)}
#view-quiz .hero p.honest strong{color:var(--lx-white)}

/* The verdict block keeps the quiz's own dark-on-light treatment — it is a
   result people read closely and sometimes print. Give it the same near-white
   card the questions use, rather than recolouring fourteen elements to white
   and hoping each one clears contrast against a moving sky. */
#view-quiz .verdict{
  background:rgba(255,255,255,.94);
  border:1px solid rgba(255,255,255,.5);
  border-radius:16px;
  padding:clamp(24px,3.5vw,32px);
  margin-top:24px;
}
#view-quiz .verdict .v-band{margin-inline:0}
#view-quiz .hero .kicker,#view-quiz .hero h1,#view-quiz .hero p.lede{
  text-shadow:0 1px 2px rgba(var(--lx-shade),.5),0 2px 16px rgba(var(--lx-shade),.5)}

/* ===========================================================================
   WordPress additions — classes the single-file preview never needed:
   long-form post body, the post grid, pagination, and a skip link.
   Same tokens, same 4-grid spacing.
   =========================================================================== */
.lx-skip{
  position:absolute;left:-9999px;top:8px;z-index:200;
  padding:12px 20px;border-radius:8px;
  background:var(--lx-p900);color:#fff;text-decoration:none;
}
.lx-skip:focus{left:16px}

/* --- long-form post / page body ----------------------------------------- */
.lx-prose{
  max-width:760px;margin:32px auto 0;padding:40px clamp(24px,4vw,48px);
  color:var(--lx-ink-2);font-size:16.5px;line-height:1.75;
}
.lx-prose > * + *{margin-top:20px}
.lx-prose h2{font-size:clamp(22px,3vw,30px);color:#fff;margin-top:40px}
.lx-prose h3{font-size:clamp(18px,2.2vw,22px);color:#fff;margin-top:32px}
.lx-prose h4{font-size:16px;color:var(--lx-lift);margin-top:24px}
.lx-prose p{color:var(--lx-ink-2)}
.lx-prose strong{color:#fff}
.lx-prose a{color:var(--lx-lift);text-decoration:underline;text-underline-offset:3px}
.lx-prose a:hover{color:#fff}
.lx-prose ul,.lx-prose ol{padding-left:24px;display:flex;flex-direction:column;gap:8px}
.lx-prose li{color:var(--lx-ink-2)}
.lx-prose blockquote{
  margin-left:0;padding:16px 24px;border-left:3px solid var(--lx-lift);
  background:rgba(255,255,255,.06);border-radius:0 12px 12px 0;color:#fff;
}
.lx-prose img,.lx-prose figure img{max-width:100%;height:auto;border-radius:12px;display:block}
.lx-prose figcaption{font-size:13px;color:var(--lx-ink-3);margin-top:8px}
.lx-prose code{
  background:rgba(255,255,255,.1);padding:2px 6px;border-radius:4px;
  font-size:14px;color:#fff;
}
.lx-prose pre{
  background:rgba(1,15,46,.7);padding:20px;border-radius:12px;overflow-x:auto;
  border:1px solid var(--lx-hair);
}
.lx-prose table{width:100%;border-collapse:collapse;display:block;overflow-x:auto}
.lx-prose th,.lx-prose td{
  padding:12px;text-align:left;border-bottom:1px solid var(--lx-hair);font-size:15px;
}
.lx-prose th{color:#fff;font-family:var(--lx-display);font-size:13px;
  text-transform:uppercase;letter-spacing:.08em}
.lx-prose hr{border:0;border-top:1px solid var(--lx-hair);margin:32px 0}

/* --- post grid ----------------------------------------------------------- */
.lx-postgrid{grid-template-columns:repeat(3,1fr)}
.lx-postcard{min-height:0}
.lx-postcard h3{margin-top:8px}
.lx-postcard h3 a{color:#fff;text-decoration:none}
.lx-postcard h3 a:hover{color:var(--lx-lift)}
.lx-postcard p{font-size:14.5px}
@media(max-width:1000px){.lx-postgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.lx-postgrid{grid-template-columns:1fr}}

/* --- post nav + pagination ---------------------------------------------- */
.lx-postnav{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  max-width:760px;margin:32px auto 0;
}
.lx-postnav a{
  display:inline-block;padding:12px 20px;border-radius:999px;
  border:1px solid var(--lx-hair);background:rgba(2,25,76,.5);
  color:var(--lx-ink-2);text-decoration:none;font-size:14px;
}
.lx-postnav a:hover{color:#fff;border-color:var(--lx-hair-2)}
.lx-pagination{margin-top:40px;text-align:center}
.lx-pagination .page-numbers{
  display:inline-block;min-width:44px;padding:12px;margin:0 4px;border-radius:8px;
  color:var(--lx-ink-2);text-decoration:none;border:1px solid var(--lx-hair);
}
.lx-pagination .page-numbers.current,
.lx-pagination .page-numbers:hover{background:var(--lx-p700);color:#fff}
.lx-pagination .screen-reader-text{position:absolute;left:-9999px}

/* WordPress core alignment classes */
.alignwide{max-width:1100px;margin-inline:auto}
.alignfull{max-width:none}
.aligncenter{margin-inline:auto;display:block}
.screen-reader-text{position:absolute;left:-9999px}

/* ===========================================================================
   BLOCK EDITOR / KADENCE COMPATIBILITY
   The migrated pages were authored in the block editor, with Kadence Blocks,
   and the older service pages in WPBakery. Without these rules that content
   renders at prose width with no wide/full alignment and unstyled tables.
   =========================================================================== */

/* Let wide/full blocks escape the prose column instead of being clamped by it. */
.lx-prose > .alignwide{
  width:min(1100px, calc(100vw - 48px));
  max-width:none;
  margin-inline:auto;
  margin-left:50%;transform:translateX(-50%);
}
.lx-prose > .alignfull{
  width:100vw;max-width:none;
  margin-left:50%;transform:translateX(-50%);
}
.lx-prose > .alignfull > img{width:100%}

.lx-prose .alignleft{float:left;margin:8px 24px 16px 0;max-width:50%}
.lx-prose .alignright{float:right;margin:8px 0 16px 24px;max-width:50%}
.lx-prose .aligncenter{margin-inline:auto;display:block}
.lx-prose::after{content:"";display:table;clear:both}

/* Media */
.lx-prose img,.lx-prose video,.lx-prose iframe{max-width:100%;height:auto;border-radius:10px}
.lx-prose figure{margin:24px 0}
.lx-prose figcaption,.lx-prose .wp-element-caption{
  font-size:13.5px;color:var(--lx-ink-3,#c8d4f5);margin-top:8px;text-align:center;
}
.wp-block-embed__wrapper{position:relative}
.wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper{aspect-ratio:16/9}
.wp-block-embed.wp-has-aspect-ratio iframe{position:absolute;inset:0;width:100%;height:100%}

/* Tables — the Sage pages lean on these heavily. */
.lx-prose table,.wp-block-table table{
  width:100%;border-collapse:collapse;font-size:15px;
  background:rgba(var(--lx-shade),.55);border-radius:10px;overflow:hidden;
}
.lx-prose th,.lx-prose td{
  padding:12px 16px;text-align:left;
  border-bottom:1px solid rgba(255,255,255,.10);color:var(--lx-ink-2);
}
.lx-prose th{color:#fff;font-weight:600;background:rgba(255,255,255,.06)}
.lx-prose tr:last-child td{border-bottom:0}
.wp-block-table{overflow-x:auto}          /* never let a wide table scroll the page */

/* Quotes, separators, code */
.lx-prose blockquote,.wp-block-quote{
  margin:28px 0;padding:16px 24px;
  border-left:3px solid var(--lx-lift);
  background:rgba(var(--lx-shade),.45);border-radius:0 10px 10px 0;
}
.lx-prose blockquote p{color:#fff}
.lx-prose cite,.wp-block-quote cite{display:block;margin-top:8px;font-size:14px;color:var(--lx-ink-3,#c8d4f5);font-style:normal}
.lx-prose hr,.wp-block-separator{border:0;border-top:1px solid rgba(255,255,255,.14);margin:40px 0}
.lx-prose code,.lx-prose kbd{background:rgba(0,0,0,.35);padding:2px 6px;border-radius:4px;font-size:.92em}
.lx-prose pre,.wp-block-code{
  background:rgba(0,0,0,.40);padding:16px 20px;border-radius:10px;
  overflow-x:auto;font-size:14px;line-height:1.6;
}
.lx-prose pre code{background:none;padding:0}

/* Buttons — map the block button onto the site's own button. */
.wp-block-button__link{
  display:inline-block;padding:12px 22px;border-radius:999px;
  background:var(--lx-cta);color:#fff;text-decoration:none;font-weight:600;
  min-height:44px;line-height:1.5;
}
.wp-block-button__link:hover{filter:brightness(1.12)}
.wp-block-button.is-style-outline .wp-block-button__link{
  background:transparent;border:1px solid rgba(255,255,255,.55);
}

/* Columns / groups keep their spacing inside prose. */
.wp-block-columns{display:flex;gap:24px;flex-wrap:wrap}
.wp-block-column{flex:1 1 260px;min-width:0}
.wp-block-group.has-background{padding:24px;border-radius:12px}

/* Kadence Blocks and WPBakery rows must not force horizontal page scroll. */
.kt-row-layout-inner,.wp-block-kadence-rowlayout,
.vc_row,.wpb_row,.vc_column-inner{max-width:100%}
.lx-prose .vc_row{margin-left:0;margin-right:0}

/* ===========================================================================
   BLOG MARQUEE — three rows, middle one travelling the other way.
   Same mechanic as the logo and testimonial scrollers above: each track holds
   two copies of its row and translates -50%, so direction is just --lx-dir.
   =========================================================================== */
.lx-bmarquee{display:flex;flex-direction:column;gap:16px;margin-top:32px}
.lx-bmarquee .lx-scroller{
  /* rows sit closer than the logo strip, and the fade is narrower so more
     of each card stays readable while it moves */
  -webkit-mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent);
}
.lx-bmarquee .lx-track{--lx-gap:16px;padding-block:8px;align-items:stretch}

.lx-bcardm{
  position:relative;flex-shrink:0;width:min(340px,78vw);
  display:flex;flex-direction:column;gap:8px;
  padding:20px 22px;
  background:linear-gradient(180deg,rgba(2,25,76,.92),rgba(1,15,46,.92));
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  box-shadow:0 10px 30px rgba(var(--lx-shade),.30);
  transition:transform .25s cubic-bezier(.16,1,.3,1),border-color .25s,box-shadow .25s;
}
.lx-bcardm:hover{
  transform:translateY(-4px);
  border-color:rgba(126,165,254,.55);
  box-shadow:0 16px 40px rgba(var(--lx-shade),.42);
}
.lx-bcardm .lx-bdate{
  font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--lx-lift);font-weight:600;
}
.lx-bcardm h3{
  font-family:var(--lx-display);font-size:16px;line-height:1.35;
  color:#fff;margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.lx-bcardm p{
  font-size:13.5px;line-height:1.55;color:var(--lx-ink-2);margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* Whole card is the link target; the heading keeps the accessible name. */
.lx-bcardm a.lx-bfull{position:absolute;inset:0;border-radius:14px}
.lx-bcardm a.lx-bfull:focus-visible{outline:2px solid var(--lx-lift);outline-offset:2px}

@media (max-width:640px){
  .lx-bmarquee .lx-track{--lx-gap:12px}
  .lx-bcardm{padding:16px 18px}
}
/* Reduced motion: the parent rule already stops the animation and wraps the
   track, so the three rows become a plain readable grid. */
@media (prefers-reduced-motion:reduce){
  .lx-bmarquee .lx-scroller{-webkit-mask-image:none;mask-image:none}
  .lx-bmarquee .lx-track{gap:16px}
}