/* =====================================================================
   LeadsNimble Industries Hero — the opening band of the /industries/ page.

   QUIET, for the same reason lnew-feat-hero.css and lnew-price-hero.css are
   quiet: the homepage hero (lnew_hero2) is the loud one. Somebody who clicked
   "Industries" is asking one question — "do you do MY thing?" — so this band
   answers it in a sentence and then hands over nine one-tap answers.

   WHY A PICKER RAIL AND NOT A SPEC PANEL OR TRUST BADGES. The features hero
   closes on one bounded panel of figure cells; the pricing hero closes on
   four glass trust badges. Both are things to READ. This page's visitor has
   something to DO first — find their vertical — so the band closes on nine
   interactive chips that jump straight to the matching card in
   lnew-ind-grid.css. Same chip geometry as the family (100px radius, 1px
   line, hue-cycled icon), different job: these are navigation, not proof.

   THE SECTION GRADIENT CHAIN. This band opens on the same #d7e0ef -> #f0f4fb
   the features and pricing pages open on, and lnew-ind-grid.css sits on the
   flat #f0f4fb the gradient lands on — so the two meet with no visible seam.
   lnew-ind-close.css then ramps #f0f4fb -> #dde2f4 to land on the FAQ's own
   #dde2f4. Change one end of that chain and you must change its neighbour.

   Built from the aurora-nightfall tokens resolved to literals and re-scoped
   under --lnih-*, LIGHT the default mode, [data-mode="dark"] flipping the
   palette, and the dark palette control section emitted at
   [data-mode="dark"] {{WRAPPER}} .lnew-ind-hero so it outranks the light
   controls on SPECIFICITY, not source order.

   CONTROLS WRITE TOKENS; MEDIA QUERIES WRITE PROPERTIES. See
   [[elementor-control-css-beats-media-queries]].
   ===================================================================== */

/* Local reset, :where()-wrapped so it carries ZERO specificity. */
.lnew-ind-hero, .lnew-ind-hero *, .lnew-ind-hero *::before, .lnew-ind-hero *::after { box-sizing: border-box; }

/* THE `hidden` GUARD. A UA's `[hidden] { display: none }` carries ZERO
   specificity, so any `display: flex` / `inline-flex` / `grid` in this file
   out-ranks it and an element hidden by attribute stays visible. */
.lnew-ind-hero [hidden] { display: none !important; }

:where(.lnew-ind-hero) :where(a) { color: inherit; text-decoration: none; }
:where(.lnew-ind-hero) :where(p) { margin: 0; }
:where(.lnew-ind-hero) :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
:where(.lnew-ind-hero) :where(li) { margin: 0; }
:where(.lnew-ind-hero) :where(svg) { display: block; }
:where(.lnew-ind-hero) :where(h1, h2, h3, h4, h5) { margin: 0; }
:where(.lnew-ind-hero) :where(b, strong) { font-weight: 700; }
:where(.lnew-ind-hero) :where(i, em) { font-style: normal; }

.lnew-ind-hero {
  /* ---- motion ---- */
  --lnih-ease: cubic-bezier(.22,1,.36,1);
  --lnih-rv-dist: 70px;
  --lnih-rv-dur: 1.2s;
  --lnih-rv-step: 70ms;

  /* ---- geometry ---- */
  --lnih-maxw: 1360px;
  --lnih-gutter: 28px;
  --lnih-inner-maxw: 880px;
  /* both written by the one Alignment control — see the note on __lead */
  --lnih-align: center;
  --lnih-lead-mi: auto;
  --lnih-title-size: clamp(38px, 5vw, 62px);
  --lnih-lead-size: 19px;
  --lnih-lead-maxw: 700px;

  --lnih-cta-top: 34px;
  --lnih-cta-gap: 12px;
  --lnih-btn-size: 15.5px;
  --lnih-btn-pad-y: 14px;
  --lnih-btn-pad-x: 26px;
  --lnih-btn-radius: 13px;

  --lnih-pick-top: 44px;
  --lnih-pick-maxw: 1000px;
  --lnih-pick-gap: 10px;
  --lnih-pick-size: 13.5px;
  --lnih-pick-pad-y: 9px;
  --lnih-pick-pad-x: 14px;
  --lnih-pick-ic: 26px;
  --lnih-pick-ic-radius: 9px;

  /* ---- ambient aurora, the hero2 device ---- */
  --lnih-aurora-op: .42;
  --lnih-aurora-1: rgba(99,102,241,.55);
  --lnih-aurora-2: rgba(168,85,247,.5);
  --lnih-aurora-3: rgba(34,211,238,.4);
  --lnih-aurora-blur: 60px;
  --lnih-aurora-dur: 16s;

  /* ---- type ---- */
  --lnih-font-sans: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --lnih-font-head: 'Parkinsans', 'DM Sans', sans-serif;

  /* ---- palette · LIGHT ---- */
  --lnih-bg-1: #d7e0ef;
  --lnih-bg-2: #f0f4fb;
  --lnih-bg-stop: 60%;
  --lnih-ink: #12122a;
  --lnih-body: #454a63;
  --lnih-muted: #6b7089;
  --lnih-muted-2: #9498b0;
  --lnih-line: #e7e9f4;
  --lnih-surface: #ffffff;

  --lnih-eyebrow-bg: #eef0ff;
  --lnih-eyebrow-ink: #5b46e0;
  --lnih-eyebrow-border: #e0e3ff;

  --lnih-grad-1: #6366f1;
  --lnih-grad-2: #a855f7;
  --lnih-grad-3: #22d3ee;
  --lnih-accent-grad: linear-gradient(100deg, var(--lnih-grad-1) 0%, var(--lnih-grad-2) 52%, var(--lnih-grad-3) 100%);
  --lnih-accent: #6d5cf5;
  --lnih-accent-ink: #ffffff;
  --lnih-accent-halo: rgba(139,124,255,.28);

  --lnih-glass-blur: none;

  /* the four hues, mode-INDEPENDENT literals — the same indigo / teal / rose
     / amber ramp the pricing pills, the add-on cards and the features spec
     panel carry, so a visitor moving between the pages meets one colour
     vocabulary */
  --lnih-hue-1-bg: #e7e4fb; --lnih-hue-1-ink: #6a4ff0;
  --lnih-hue-2-bg: #d8f0f3; --lnih-hue-2-ink: #0e97a8;
  --lnih-hue-3-bg: #fde2e7; --lnih-hue-3-ink: #e5486d;
  --lnih-hue-4-bg: #fceed4; --lnih-hue-4-ink: #cf7d13;

  --lnih-sh-sm-1: rgba(30,30,80,.05);
  --lnih-sh-sm-2: rgba(30,30,80,.05);
  --lnih-sh-md: rgba(30,30,80,.10);
  --lnih-sh-accent: rgba(99,102,241,.28);
  --lnih-sh-accent-hover: rgba(99,102,241,.36);
  --lnih-btn-glow: rgba(139,124,255,.45);
  --lnih-btn-shimmer: rgba(255,255,255,.55);
  --lnih-shadow-sm: 0 1px 2px var(--lnih-sh-sm-1), 0 2px 6px var(--lnih-sh-sm-2);
  --lnih-shadow-md: 0 12px 34px var(--lnih-sh-md);
  --lnih-shadow-accent: 0 16px 40px var(--lnih-sh-accent);
  --lnih-shadow-accent-hover: 0 20px 50px var(--lnih-sh-accent-hover);

  position: relative;
  overflow-x: clip;
  padding-top: 128px;
  padding-bottom: 96px;
  background: linear-gradient(180deg, var(--lnih-bg-1) 0%, var(--lnih-bg-2) var(--lnih-bg-stop));
  font-family: var(--lnih-font-sans);
  color: var(--lnih-body);
  font-size: 17px;
  /* stated, not inherited — see [[wp-theme-inherited-type-leak]] */
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: normal;
  text-wrap: wrap;
  -webkit-font-smoothing: antialiased;
}

[data-mode="dark"] .lnew-ind-hero {
  --lnih-bg-1: #0c0c18;
  --lnih-bg-2: #090910;
  --lnih-bg-stop: 100%;
  --lnih-ink: #f5f6ff;
  --lnih-body: #b8bed6;
  --lnih-muted: #949bbb;
  --lnih-muted-2: #6d7398;
  --lnih-line: rgba(255,255,255,.10);

  /* the dark band is nearly black, so the aurora needs real presence */
  --lnih-aurora-op: .8;
  --lnih-surface: rgba(255,255,255,.035);

  --lnih-eyebrow-bg: rgba(255,255,255,.05);
  --lnih-eyebrow-ink: #cdc6ff;
  --lnih-eyebrow-border: rgba(255,255,255,.12);

  --lnih-accent: #8b7cff;

  --lnih-glass-blur: blur(14px) saturate(150%);

  --lnih-sh-sm-1: rgba(0,0,0,.4);
  --lnih-sh-sm-2: transparent;
  --lnih-sh-md: rgba(0,0,0,.5);
  --lnih-sh-accent: rgba(99,102,241,.4);
  --lnih-sh-accent-hover: rgba(99,102,241,.5);
  --lnih-btn-shimmer: rgba(255,255,255,.42);
  --lnih-shadow-sm: 0 1px 2px var(--lnih-sh-sm-1);
  --lnih-shadow-md: 0 12px 34px var(--lnih-sh-md);
  --lnih-shadow-accent: 0 16px 44px var(--lnih-sh-accent);
  --lnih-shadow-accent-hover: 0 22px 54px var(--lnih-sh-accent-hover);
}

/* =====================================================================
   Ambient aurora — the same device the homepage hero opens with, so the
   industries page starts in the same world.
   ===================================================================== */
.lnew-ind-hero__bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden;
}
.lnew-ind-hero__bg::before {
  content: ""; position: absolute; inset: -20%;
  background:
    radial-gradient(38% 42% at 20% 26%, var(--lnih-aurora-1), transparent 60%),
    radial-gradient(34% 38% at 80% 20%, var(--lnih-aurora-2), transparent 60%),
    radial-gradient(40% 44% at 60% 82%, var(--lnih-aurora-3), transparent 62%);
  filter: blur(var(--lnih-aurora-blur));
  opacity: var(--lnih-aurora-op);
  animation: lnih-aurora-drift var(--lnih-aurora-dur) ease-in-out infinite alternate;
}
@keyframes lnih-aurora-drift {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1.05); }
  50%  { transform: translate3d(4%, 3%, 0) scale(1.12); }
  100% { transform: translate3d(-2%, 4%, 0) scale(1.06); }
}

/* =====================================================================
   Shell
   ===================================================================== */
.lnew-ind-hero__wrap {
  position: relative; z-index: 1;
  width: 100%;
  max-width: var(--lnih-maxw);
  margin-inline: auto;
  padding-inline: var(--lnih-gutter);
}
.lnew-ind-hero__inner {
  max-width: var(--lnih-inner-maxw);
  margin-inline: auto;
  text-align: var(--lnih-align);
}

.lnew-ind-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--lnih-font-sans);
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
  color: var(--lnih-eyebrow-ink);
  background: var(--lnih-eyebrow-bg);
  border: 1px solid var(--lnih-eyebrow-border);
  padding: 7px 14px; border-radius: 100px;
}
.lnew-ind-hero__eyebrow-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--lnih-accent);
  box-shadow: 0 0 0 4px var(--lnih-accent-halo);
  opacity: .45;
  animation: lnih-dot-lamp 5.2s ease-in-out infinite;
}
@keyframes lnih-dot-lamp {
  0%        { opacity: .35; box-shadow: 0 0 0 4px var(--lnih-accent-halo), 0 0 0 0 transparent; }
  8%        { opacity: 1;   box-shadow: 0 0 0 4px var(--lnih-accent-halo), 0 0 7px 1px var(--lnih-accent); }
  22%       { opacity: 1;   box-shadow: 0 0 0 4px var(--lnih-accent-halo), 0 0 7px 1px var(--lnih-accent); }
  40%, 100% { opacity: .35; box-shadow: 0 0 0 4px var(--lnih-accent-halo), 0 0 0 0 transparent; }
}

.lnew-ind-hero__title {
  font-family: var(--lnih-font-head);
  font-weight: 500;
  font-size: var(--lnih-title-size);
  margin-top: 20px;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--lnih-ink);
  text-wrap: balance;
}
.lnew-ind-hero__accent {
  background: var(--lnih-accent-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
/* The lead is the one element narrower than its parent, so it is the one that
   has to be centred as a BLOCK as well as having its text centred — and CSS
   has no conditional inside a value. So the alignment control writes TWO
   tokens: --lnih-align for the text and --lnih-lead-mi for this margin. It
   cannot be done by reading the control back in PHP and adding a modifier
   class: on the front end Elementor 4.x treats any selectors-carrying control
   as a STYLE control and drops it from get_settings_for_display(). */
.lnew-ind-hero__lead {
  max-width: var(--lnih-lead-maxw);
  margin: 20px 0 0;
  margin-inline: var(--lnih-lead-mi);
  font-size: var(--lnih-lead-size);
  color: var(--lnih-muted);
  line-height: 1.65;
  text-wrap: balance;
}

/* =====================================================================
   Buttons — the design system's .btn, scoped to this widget
   ===================================================================== */
.lnew-ind-hero__ctas {
  display: flex; flex-wrap: wrap;
  gap: var(--lnih-cta-gap);
  margin-top: var(--lnih-cta-top);
  justify-content: var(--lnih-align);
}
.lnew-ind-hero__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--lnih-font-sans);
  font-size: var(--lnih-btn-size); font-weight: 600; letter-spacing: -0.01em;
  line-height: 1.6;
  padding: var(--lnih-btn-pad-y) var(--lnih-btn-pad-x);
  border-radius: var(--lnih-btn-radius);
  white-space: nowrap;
  transition: transform .22s var(--lnih-ease), box-shadow .3s var(--lnih-ease),
              background .22s ease, border-color .22s ease, color .22s ease;
  position: relative; overflow: hidden; isolation: isolate;
}
.lnew-ind-hero__btn svg { width: 15px; height: 15px; transition: transform .4s var(--lnih-ease); }
.lnew-ind-hero__btn:hover svg { transform: translateX(4px); }
.lnew-ind-hero__btn:focus-visible { outline: 2px solid var(--lnih-accent); outline-offset: 3px; }

.lnew-ind-hero__btn--ghost {
  background: var(--lnih-surface);
  color: var(--lnih-ink);
  border: 1px solid var(--lnih-line);
  box-shadow: var(--lnih-shadow-sm);
  -webkit-backdrop-filter: var(--lnih-glass-blur);
  backdrop-filter: var(--lnih-glass-blur);
}
.lnew-ind-hero__btn--ghost:hover {
  transform: translateY(-2px);
  border-color: var(--lnih-accent);
  box-shadow: var(--lnih-shadow-md);
}

/* box-shadow, NOT a blurred ::after with z-index:-1 — the :hover transform
   creates a stacking context, and inside it a negative-z pseudo paints ABOVE
   the element's background, yielding a hover-only flicker. */
.lnew-ind-hero__btn--primary {
  background: var(--lnih-accent-grad);
  color: var(--lnih-accent-ink);
  border: none;
  background-size: 130% 70%;
  background-position: 0% 50%;
  animation: lnih-gradient-loop 7s ease-in-out infinite;
  box-shadow: var(--lnih-shadow-accent), 0 0 0 0 rgba(139,124,255,0);
  transition: box-shadow .4s var(--lnih-ease), transform .22s var(--lnih-ease);
}
.lnew-ind-hero__btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--lnih-shadow-accent-hover), 0 0 34px 3px var(--lnih-btn-glow);
}
@keyframes lnih-gradient-loop {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
/* STACKING NOTE: isolation:isolate on the button plus a POSITIVE z-index
   here. Do not "simplify" this back to a negative z-index. */
.lnew-ind-hero__btn--primary::before {
  content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; left: -45%; width: 45%;
  background: linear-gradient(100deg, transparent, var(--lnih-btn-shimmer), transparent);
  transform: skewX(-18deg); opacity: 0; pointer-events: none;
}
.lnew-ind-hero__btn--primary:hover::before { opacity: 1; animation: lnih-btn-melt .85s var(--lnih-ease); }
@keyframes lnih-btn-melt { from { left: -45%; } to { left: 120%; } }
.lnew-ind-hero__btn > * { position: relative; z-index: 2; }

/* =====================================================================
   The picker rail — nine one-tap answers to "do you do my thing?".

   These are LINKS, not buttons: each one is an in-page jump to the matching
   card in lnew-ind-grid.css, so they must be right-clickable, openable in a
   new tab and readable in the status bar. The script only adds the smooth
   scroll and the target's brief focus ring on top of behaviour the browser
   already has without it.

   Sized deliberately smaller than the two CTAs above (13.5px vs 15.5px, a
   hairline instead of a fill) so the thing you should click FIRST still reads
   as the loudest object in the band.
   ===================================================================== */
.lnew-ind-hero__picker {
  max-width: var(--lnih-pick-maxw);
  margin: var(--lnih-pick-top) auto 0;
  text-align: center;
}
.lnew-ind-hero__picker-l {
  display: block;
  font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--lnih-muted-2);
  margin-bottom: 16px;
}
.lnew-ind-hero__rail {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--lnih-pick-gap);
}
.lnew-ind-hero__pick {
  display: inline-flex; align-items: center; gap: 9px;
  padding: var(--lnih-pick-pad-y) var(--lnih-pick-pad-x);
  border-radius: 100px;
  font-size: var(--lnih-pick-size); font-weight: 600;
  line-height: 1.4;
  color: var(--lnih-ink);
  background: var(--lnih-surface);
  border: 1px solid var(--lnih-line);
  box-shadow: var(--lnih-shadow-sm);
  -webkit-backdrop-filter: var(--lnih-glass-blur);
  backdrop-filter: var(--lnih-glass-blur);
  transition: transform .25s var(--lnih-ease), border-color .25s var(--lnih-ease),
              box-shadow .3s var(--lnih-ease), color .25s var(--lnih-ease);
}
.lnew-ind-hero__pick:hover {
  transform: translateY(-3px);
  border-color: var(--lnih-accent);
  box-shadow: var(--lnih-shadow-md);
}
.lnew-ind-hero__pick:focus-visible { outline: 2px solid var(--lnih-accent); outline-offset: 3px; }

.lnew-ind-hero__pick-ic {
  flex: none;
  width: var(--lnih-pick-ic); height: var(--lnih-pick-ic);
  border-radius: var(--lnih-pick-ic-radius);
  display: grid; place-items: center;
  /* the fourth hue is the FALLBACK, so a tenth chip inherits it rather than
     falling back to an untinted glyph — same rule as the pricing pills */
  background: var(--lnih-hue-4-bg); color: var(--lnih-hue-4-ink);
  transition: transform .3s var(--lnih-ease);
}
.lnew-ind-hero__pick:nth-child(4n+1) .lnew-ind-hero__pick-ic { background: var(--lnih-hue-1-bg); color: var(--lnih-hue-1-ink); }
.lnew-ind-hero__pick:nth-child(4n+2) .lnew-ind-hero__pick-ic { background: var(--lnih-hue-2-bg); color: var(--lnih-hue-2-ink); }
.lnew-ind-hero__pick:nth-child(4n+3) .lnew-ind-hero__pick-ic { background: var(--lnih-hue-3-bg); color: var(--lnih-hue-3-ink); }
.lnew-ind-hero__pick:hover .lnew-ind-hero__pick-ic { transform: translateY(-2px) rotate(-6deg); }
.lnew-ind-hero__pick-ic svg { width: 14px; height: 14px; }

/* =====================================================================
   Scroll reveal
   ===================================================================== */
.lnew-ind-hero .lnew-reveal {
  opacity: 0;
  transform: translate3d(0, var(--lnih-rv-dist), 0);
  transition: opacity var(--lnih-rv-dur) var(--lnih-ease),
              transform var(--lnih-rv-dur) var(--lnih-ease);
  transition-delay: calc(var(--i, 0) * var(--lnih-rv-step));
}
.lnew-ind-hero .lnew-reveal.is-in { opacity: 1; transform: none; }
.elementor-editor-active .lnew-ind-hero .lnew-reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .lnew-ind-hero .lnew-reveal { opacity: 1; transform: none; transition: none; }
  .lnew-ind-hero__eyebrow-dot { animation: none !important; opacity: 1; }
  .lnew-ind-hero__btn--primary { animation: none !important; }
  .lnew-ind-hero__btn--primary::before { animation: none !important; display: none; }
  .lnew-ind-hero__btn svg { transition: none; }
  /* the aurora stays — it is a static wash without its drift, which is the
     point of the field. Only the movement goes. */
  .lnew-ind-hero__bg::before { animation: none !important; }
  .lnew-ind-hero__pick,
  .lnew-ind-hero__pick-ic { transition: none; }
}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 1040px) {
  .lnew-ind-hero {
    --lnih-gutter: 24px;
    padding-top: 104px; padding-bottom: 72px;
  }
}

@media (max-width: 760px) {
  .lnew-ind-hero {
    --lnih-gutter: 20px;
    --lnih-lead-size: 17px;
    --lnih-pick-top: 36px;
    --lnih-pick-size: 13px;
    --lnih-pick-pad-x: 12px;
    --lnih-pick-gap: 8px;
    padding-top: 88px; padding-bottom: 56px;
  }
}

@media (max-width: 460px) {
  .lnew-ind-hero {
    --lnih-gutter: 16px;
    --lnih-btn-pad-x: 20px;
    padding-top: 76px; padding-bottom: 48px;
  }
  /* on a small phone two side-by-side buttons each get ~140px, which truncates
     any label longer than "Start free" — stack them instead */
  .lnew-ind-hero__ctas { flex-direction: column; align-items: stretch; }
  .lnew-ind-hero__btn { width: 100%; }
  /* nine wrapped chips at three per row eat most of a phone screen, so below
     460px the rail becomes a two-row swipeable strip instead, bled to the
     screen edge so the last chip does not look clipped by the gutter */
  .lnew-ind-hero__rail {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x proximity;
    margin-inline: calc(var(--lnih-gutter) * -1);
    padding-inline: var(--lnih-gutter);
    /* setting overflow-x here silently forces overflow-y to `auto` too (per
       spec, one axis can't be visible while the other scrolls), which clips
       the pick's hover lift (translateY(-3px)) at the top of the strip.
       Pad the top and pull it back with an equal negative margin so the
       chips sit in the same spot but the lift has room above them. */
    padding-top: 8px;
    margin-top: -8px;
  }
  .lnew-ind-hero__rail::-webkit-scrollbar { display: none; }
  .lnew-ind-hero__pick { flex: none; scroll-snap-align: start; }
}