/* WellNest landing page. Original work in the WellNest theme.
   Ideas borrowed as techniques, not code: a nav pill that tightens on scroll, one
   product card with tabs along its top edge and a backdrop that shifts hue with
   the tab, a slider whose whole section changes colour, a washed-out marquee.
   Everything below is ours. */

.lp {
  --ink: #0f172a;
  --ink-2: #334155;
  --mute: #64748b;
  --line: #e4e9f1;
  --ground: #f7f8fb;
  --card: #ffffff;
  --blue: var(--wellnest-blue, #1a7bdd);
  --blue-2: #3b8ff0;
  --blue-deep: #0b3b73;
  --teal: #14b8a6;
  --amber: #f59e0b;
  --violet: #7c3aed;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 22px;
  color: var(--ink);
  font-family: var(--sans);
  overflow-x: clip;
  background: var(--ground);
}
[data-bs-theme="dark"] .lp {
  --ink: #dee2e6; --ink-2: #aab8c5; --mute: #8391a2; --line: #2f3944; --ground: #22282e; --card: #282f36;
}
.lp * { box-sizing: border-box; }
.lp img { max-width: 100%; }
.lp h1, .lp h2, .lp h3 { margin: 0; text-wrap: balance; }
.lp-serif { font-family: var(--serif); font-weight: 500; letter-spacing: -0.015em; }

/* ── buttons ─────────────────────────────────────────────────────────── */
.lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; padding: 10px 18px;
  font-weight: 600; font-size: .92rem; text-decoration: none; border: 1px solid transparent; transition: transform .15s ease, background .15s ease, box-shadow .2s ease; white-space: nowrap; }
.lp-btn:hover { transform: translateY(-1px); }
.lp-btn-lg { padding: 14px 26px; font-size: 1rem; }
.lp-btn-dark { background: var(--blue); color: #fff; box-shadow: 0 8px 22px rgba(26,123,221,.28); }
.lp-btn-dark:hover { background: var(--wellnest-blue-dark, #145fb0); color: #fff; }
[data-bs-theme="dark"] .lp-btn-dark { background: var(--blue); }
.lp-btn-light { background: var(--card); color: var(--ink); box-shadow: 0 4px 14px rgba(15,23,42,.08); }
.lp-btn-light:hover { background: var(--card); color: var(--ink); box-shadow: 0 8px 20px rgba(15,23,42,.12); }
.lp-btn-ghost { background: transparent; color: var(--ink); }
.lp-btn-ghost:hover { background: rgba(15,23,42,.06); color: var(--ink); }

/* ── nav ─────────────────────────────────────────────────────────────── */
.lp-navwrap { position: sticky; top: 0; z-index: 50; padding: 14px 16px 0; pointer-events: none; }
.lp-nav { pointer-events: auto; margin: 0 auto; max-width: 1180px; display: flex; align-items: center; gap: 22px; padding: 12px 14px 12px 18px;
  background: #fff;
  border: 0; border-radius: 999px;
  box-shadow: 0 6px 24px rgba(15,23,42,.10);
  transition: padding .25s ease, max-width .35s ease, box-shadow .25s ease; }
[data-bs-theme="dark"] .lp-nav { background: var(--card); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
/* Behind the hero: a photographed gradient texture (1920 / 960 px WebP cut from
   the 6400 px originals, never served raw), full width, held back, and faded
   out on every side so it has no edge. */
.lp-hero { position: relative; isolation: isolate; }
.lp-hero::before { content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: -110px; bottom: -40px; left: calc(50% - 50vw); right: calc(50% - 50vw);
  background: url(../images/landing/grad-a-1920.webp) center 40% / cover no-repeat; opacity: .58;
  -webkit-mask-image: radial-gradient(ellipse 62% 78% at 50% 42%, #000 22%, rgba(0,0,0,.55) 55%, transparent 80%);
          mask-image: radial-gradient(ellipse 62% 78% at 50% 42%, #000 22%, rgba(0,0,0,.55) 55%, transparent 80%); }
[data-bs-theme="dark"] .lp-hero::before { opacity: .38; }
/* A soft haze behind the words, blurred and feathered, so the type settles into
   the texture instead of sitting on top of it. */
.lp-hero::after { content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 34px; width: min(104%, 960px); height: 68%; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.62) 0%, rgba(255,255,255,.34) 45%, transparent 72%);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 72%);
          mask-image: radial-gradient(ellipse at center, #000 40%, transparent 72%); }
[data-bs-theme="dark"] .lp-hero::after { background: radial-gradient(ellipse at center, rgba(10,16,28,.50) 0%, rgba(10,16,28,.28) 45%, transparent 72%); }
@media (max-width: 720px) { .lp-hero::before { background-image: url(../images/landing/grad-a-960.webp); top: -80px;
  -webkit-mask-image: radial-gradient(ellipse 90% 72% at 50% 42%, #000 25%, rgba(0,0,0,.5) 58%, transparent 82%);
          mask-image: radial-gradient(ellipse 90% 72% at 50% 42%, #000 25%, rgba(0,0,0,.5) 58%, transparent 82%); } }
/* A hint of the second texture under the steps, faded the same way. */
.lp-steps { position: relative; isolation: isolate; }
.lp-steps::before { content: ""; position: absolute; z-index: -1; pointer-events: none; inset: -80px calc(50% - 50vw) -60px;
  background: url(../images/landing/grad-b-1920.webp) center / cover no-repeat; opacity: .28;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 15%, transparent 78%);
          mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 15%, transparent 78%); }
[data-bs-theme="dark"] .lp-steps::before { opacity: .2; }
@media (max-width: 720px) { .lp-steps::before { background-image: url(../images/landing/grad-b-960.webp); } }
.lp-nav.is-tight { padding: 7px 10px 7px 14px; max-width: 980px; box-shadow: 0 12px 34px rgba(15,23,42,.14); }
.lp-brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); font-weight: 700; font-size: 1.02rem; }
.lp-brand em { font-style: normal; font-weight: 400; }
.lp-brand img { transition: width .25s ease, height .25s ease; }
.lp-nav.is-tight .lp-brand img { width: 28px; height: 28px; }
.lp-links { display: flex; gap: 4px; margin-left: 8px; }
.lp-links a { color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: .92rem; padding: 8px 12px; border-radius: 999px; }
.lp-links a:hover { background: rgba(26,123,221,.08); color: var(--blue); }
.lp-actions { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.lp-burger { display: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--ink); align-items: center; justify-content: center; cursor: pointer; }
.lp-burger svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.lp-burger:hover { background: rgba(26,123,221,.08); }
.lp-menu { display: none; position: absolute; left: 16px; right: 16px; top: calc(100% + 8px); background: var(--card); border-radius: 18px;
  box-shadow: 0 18px 44px rgba(15,23,42,.16); padding: 8px; flex-direction: column; }
.lp-menu.is-open { display: flex; }
.lp-menu a { padding: 12px 14px; border-radius: 12px; color: var(--ink); text-decoration: none; font-weight: 500; }
.lp-menu a:hover { background: rgba(26,123,221,.08); color: var(--blue); }
.lp-menu .lp-menu-sep { height: 1px; background: var(--line); margin: 6px 8px; }
.lp-navwrap { pointer-events: none; } .lp-navwrap > * { pointer-events: auto; }
@media (max-width: 860px) { .lp-links { display: none; } .lp-burger { display: inline-flex; } .lp-actions .lp-btn-ghost, .lp-actions .lp-btn-dark { display: none; } }
@media (max-width: 520px) { .lp-brand { font-size: .96rem; } }

/* ── hero ────────────────────────────────────────────────────────────── */
.lp-hero { max-width: 900px; margin: 0 auto; padding: 72px 20px 36px; text-align: center; }
@media (max-width: 900px) { .lp-hero { padding: 64px 16px 30px; } }
.lp-hero h1 { font-family: var(--sans); font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; font-size: clamp(2.6rem, 7vw, 5.4rem); }
.lp-lead { max-width: 640px; margin: 22px auto 30px; font-size: clamp(1.02rem, 1.6vw, 1.22rem); line-height: 1.55; color: var(--ink); }
.lp-cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.lp-fine { margin-top: 22px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.lp-fine span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; background: var(--card); box-shadow: 0 2px 10px rgba(15,23,42,.06); font-size: .8rem; color: var(--ink-2); }
.lp-fine svg { width: 14px; height: 14px; fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── showcase: tabs on the top edge of one card ──────────────────────── */
.lp-showcase { position: relative; max-width: 1180px; margin: 28px auto 0; padding: 64px 72px 64px; }
@media (max-width: 900px) { .lp-showcase { padding: 56px 24px 40px; } }
.lp-stagebg { position: absolute; inset: 0; border-radius: 34px; z-index: 0; overflow: hidden; transition: background 1.2s ease;
  --c1: rgba(59,143,240,.55); --c2: rgba(20,184,166,.40); --c3: rgba(255,255,255,.55); --c4: rgba(124,58,237,.22);
  background: radial-gradient(900px 480px at 30% 20%, rgba(59,143,240,.55), transparent 60%),
              radial-gradient(700px 420px at 80% 80%, rgba(20,184,166,.35), transparent 60%),
              linear-gradient(135deg, #d9e8fb, #a7c8f3 55%, #c2d7f4); }
.lp-stagebg[data-hue="documents"] { --c1: rgba(20,184,166,.5); --c2: rgba(59,143,240,.38); --c4: rgba(245,158,11,.16); background: radial-gradient(900px 480px at 30% 20%, rgba(20,184,166,.45), transparent 60%), radial-gradient(700px 420px at 80% 80%, rgba(59,143,240,.35), transparent 60%), linear-gradient(135deg, #dcf1ee, #a9dcd3 55%, #c6e7e1); }
.lp-stagebg[data-hue="frontdesk"] { --c1: rgba(59,143,240,.45); --c2: rgba(245,158,11,.3); --c4: rgba(20,184,166,.18); background: radial-gradient(900px 480px at 30% 20%, rgba(59,143,240,.4), transparent 60%), radial-gradient(700px 420px at 80% 80%, rgba(245,158,11,.28), transparent 60%), linear-gradient(135deg, #e6ecf6, #c3d1e6 55%, #d3dfef); }
.lp-stagebg[data-hue="history"] { --c1: rgba(124,58,237,.42); --c2: rgba(59,143,240,.38); --c4: rgba(20,184,166,.16); background: radial-gradient(900px 480px at 30% 20%, rgba(124,58,237,.32), transparent 60%), radial-gradient(700px 420px at 80% 80%, rgba(59,143,240,.35), transparent 60%), linear-gradient(135deg, #e6e0f8, #bfb0ee 55%, #d2c8f3); }
/* Soft discs behind the card, each on its own slow loop with its own period,
   so the colour breathes instead of sitting. They take the tab's colours. */
/* The photographed texture laid over the stage in luminosity blend: only its
   light and dark waves come through, so each tab keeps its own hue. */
.lp-stagebg::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: url(../images/landing/grad-a-1920.webp) center / cover no-repeat; filter: grayscale(1); mix-blend-mode: luminosity; opacity: .55; }
[data-bs-theme="dark"] .lp-stagebg::after { opacity: .28; }
@media (max-width: 720px) { .lp-stagebg::after { background-image: url(../images/landing/grad-a-960.webp); } }
.lp-blob { position: absolute; width: 44vw; max-width: 600px; aspect-ratio: 1; border-radius: 50%; filter: blur(52px); pointer-events: none; will-change: transform;
  background: radial-gradient(circle at 45% 50%, var(--c, transparent) 0%, transparent 68%); transition: background 1.2s ease; }
.lp-blob.b1 { --c: var(--c1); left: -6%; top: -18%; animation: lpDrift1 12s ease-in-out infinite; }
.lp-blob.b2 { --c: var(--c2); right: -8%; bottom: -22%; animation: lpDrift2 15s ease-in-out infinite; }
.lp-blob.b3 { --c: var(--c3); left: 38%; top: 28%; width: 30vw; animation: lpDrift3 18s ease-in-out infinite; }
.lp-blob.b4 { --c: var(--c4); left: 62%; top: -26%; width: 28vw; animation: lpDrift2 20s ease-in-out infinite reverse; }
@keyframes lpDrift1 { 0%, 100% { transform: translate(0, 0) scale(1); } 30% { transform: translate(120px, -60px) scale(1.12); } 60% { transform: translate(-80px, 50px) scale(1.05); } }
@keyframes lpDrift2 { 0%, 100% { transform: translate(0, 0) scale(1); } 35% { transform: translate(-110px, 80px) scale(1.08); } 70% { transform: translate(70px, -50px) scale(1.16); } }
@keyframes lpDrift3 { 0%, 100% { transform: translate(0, 0) scale(1); } 40% { transform: translate(-90px, -70px) scale(1.14); } 75% { transform: translate(100px, 40px) scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .lp-blob { animation: none !important; } }
.lp-tabs { position: relative; z-index: 2; display: flex; justify-content: center; align-items: flex-end; gap: 14px; margin: 0 0 -14px; padding-top: 22px; height: 86px; }
/* The join: one white flare that sits behind the active pill and rises from the
   card top around its lower half, so the pill reads as set into the card. It
   slides to whichever pill is active. */
.lp-neck { position: absolute; bottom: 14px; left: 50%; width: 52px; height: 14px; transform: translateX(-50%); z-index: 0; pointer-events: none;
  background: #fff; transition: opacity .16s ease; }
/* The fillets: a quarter circle carved out of each shoulder, so the white sweeps
   from the pill's side down into the card top with a concave curve. */
.lp-neck::before, .lp-neck::after { content: ""; position: absolute; bottom: 0; width: 16px; height: 16px; background: #fff; }
.lp-neck::before { right: 100%; -webkit-mask: radial-gradient(circle at 0 0, transparent 16px, #000 16.5px); mask: radial-gradient(circle at 0 0, transparent 16px, #000 16.5px); }
.lp-neck::after { left: 100%; -webkit-mask: radial-gradient(circle at 100% 0, transparent 16px, #000 16.5px); mask: radial-gradient(circle at 100% 0, transparent 16px, #000 16.5px); }
.lp-neck.is-hidden { opacity: 0; }
.lp-tab { z-index: 1; }
.lp-tab { width: 60px; height: 60px; border-radius: 50%; border: 4px solid #fff; background: #e9eef6; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; position: relative;
  box-shadow: 0 8px 22px rgba(15,23,42,.18); transition: transform .45s cubic-bezier(.22,1,.36,1), background .35s ease; }
.lp-tab img { width: 26px; height: 26px; opacity: .55; transition: opacity .2s ease; }
.lp-tab span { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); font-size: .72rem; font-weight: 600; color: #fff; opacity: 0; transition: opacity .2s ease; white-space: nowrap; text-shadow: 0 1px 6px rgba(0,0,0,.35); }
.lp-tab:hover { transform: translateY(-3px); }
.lp-tab.is-on { background: var(--blue); transform: none; }
.lp-tab.is-on img { opacity: 1; filter: brightness(0) invert(1); }
.lp-tab.is-on span, .lp-tab:hover span { opacity: 1; }

.lp-tab.is-on span, .lp-tab:hover span { top: auto; bottom: calc(100% + 8px); color: #fff; }
.lp-stage { position: relative; z-index: 1; background: #fff; color: #0f172a; border-radius: 28px; box-shadow: 0 30px 70px rgba(15,23,42,.22); overflow: hidden; margin-top: 0; }
.lp-stage .lp-pane h2 { color: #0f172a; }
.lp-stage .lp-pane p, .lp-stage .lp-checks li, .lp-stage .lp-eyebrow { color: #334155; }
.lp-stage .lp-shot { border-color: #e4e9f1; }
.lp-pane { padding-top: 64px; }
.lp-track { display: flex; transition: transform .6s cubic-bezier(.5,0,.5,1); will-change: transform; }
.lp-pane { flex: 0 0 100%; display: grid; grid-template-columns: 1fr 1.15fr; gap: 36px; padding: 52px 52px 48px; align-items: start; min-height: 460px; }
.lp-pane-copy { padding-top: 8px; }
.lp-pane > * { transition: opacity .45s ease .15s, transform .55s cubic-bezier(.22,1,.36,1) .1s; }
.lp-pane:not(.is-live) > * { opacity: .35; transform: translateY(6px); }
@media (max-width: 900px) { .lp-pane { grid-template-columns: 1fr; padding: 28px 22px; } }
.lp-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .86rem; color: var(--ink-2); margin-bottom: 14px; }
.lp-pane h2 { font-family: var(--sans); font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
.lp-pane p { margin: 16px 0 14px; color: var(--ink-2); line-height: 1.6; max-width: 46ch; }
.lp-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.lp-checks li { position: relative; padding-left: 26px; color: var(--ink-2); font-size: .95rem; }
.lp-checks li::before { content: "\2713"; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background: rgba(26,123,221,.12); color: var(--blue); font-size: .72rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.lp-pane-art { position: relative; }
.lp-shot { position: relative; border-radius: 18px; overflow: hidden; box-shadow: 0 20px 50px rgba(15,23,42,.18); }
.lp-shot img { display: block; width: 100%; height: auto; }
.lp-shot { overflow: visible; }
.lp-shot img { border-radius: 18px; }
.lp-chip { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; background: #fff; color: #0f172a;
  border-radius: 14px; padding: 10px 14px 10px 10px; box-shadow: 0 14px 34px rgba(15,23,42,.16); }
.lp-chip .star { grid-row: 1 / span 2; width: 30px; height: 30px; border-radius: 9px; background: rgba(26,123,221,.1); color: var(--blue); display: grid; place-items: center; }
.lp-chip .star svg { width: 16px; height: 16px; fill: currentColor; }
.lp-chip b { font-size: .88rem; line-height: 1.15; } .lp-chip small { color: #64748b; font-size: .76rem; line-height: 1.2; }
.lp-chip-float { position: absolute; right: -14px; bottom: -14px; }
@media (max-width: 900px) { .lp-chip-float { right: 8px; bottom: 8px; } }

/* mock UIs inside panes */
.lp-mock { border-radius: 18px; background: linear-gradient(180deg, #f2f6fc, #e8eff9); padding: 22px; min-height: 300px; }

.lp-mock-search { display: flex; align-items: center; gap: 10px; background: #fff; color: #141c26; border-radius: 12px; padding: 10px 14px; font-weight: 600; box-shadow: 0 3px 10px rgba(15,23,42,.06); }
.lp-mock-search .ico { color: #64748b; } .lp-mock-search em { margin-left: auto; font-style: normal; color: #64748b; font-weight: 500; font-size: .82rem; }
.lp-mock-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
.lp-mock-tiles .tile { text-align: center; }
.lp-mock-tiles .pg { background: #fff; border-radius: 8px; padding: 12px 10px; aspect-ratio: 3/4; display: grid; align-content: start; gap: 7px; box-shadow: 0 6px 16px rgba(15,23,42,.12); position: relative; }
.lp-mock-tiles .stack .pg::before { content: ""; position: absolute; inset: -4px 4px 4px -4px; background: #fff; border-radius: 8px; z-index: -1; transform: rotate(-2deg); box-shadow: 0 6px 16px rgba(15,23,42,.08); }
.lp-mock-tiles i { display: block; height: 6px; border-radius: 4px; background: #d7dfea; }
.lp-mock-tiles i.hit { background: #ffc400; box-shadow: 0 0 0 3px rgba(255,196,0,.35); }
.lp-mock-tiles b { display: block; margin-top: 8px; font-size: .82rem; color: #141c26; } .lp-mock-tiles small { color: #64748b; font-size: .74rem; }
.lp-mock-queue { display: grid; gap: 10px; }
.qcard { background: #fff; color: #0f172a; border-radius: 14px; padding: 12px 14px; box-shadow: 0 6px 16px rgba(15,23,42,.08); }
.qcard.dim { opacity: .65; }
.qcard .who { display: flex; justify-content: space-between; align-items: baseline; } .qcard .who span { color: #64748b; font-size: .78rem; }
.qcard .vit { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.qcard .vit i { font-style: normal; font-size: .76rem; background: rgba(26,123,221,.08); color: #334155; padding: 2px 8px; border-radius: 999px; }
.qcard .vit .warn { color: #b42318; }
.qcard .cc { margin-top: 8px; font-size: .86rem; }
.lp-mock-book { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: #d9e3f2; }
.lp-mock-book .leaf { background: #fffef9; border-radius: 6px; padding: 14px; min-height: 260px; box-shadow: 0 8px 20px rgba(15,23,42,.12); color: #141c26; }
.lp-mock-book .hd { display: flex; justify-content: space-between; font-size: .78rem; border-bottom: 1px solid #eceadf; padding-bottom: 6px; margin-bottom: 8px; }
.lp-mock-book .hd b { color: var(--blue); }
.lp-mock-book .sec { display: block; font-style: normal; font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #27538a; background: #eef3f9; padding: 2px 6px; border-radius: 3px; margin: 8px 0 6px; }
.lp-mock-book u { display: block; height: 6px; width: 92%; background: #d7dfea; border-radius: 4px; margin: 5px 0; text-decoration: none; }
.lp-mock-book u.key { background: rgba(255,196,0,.55); }
.lp-mock-book .trend { margin-top: 14px; } .lp-mock-book .trend svg { width: 100%; height: 40px; display: block; } .lp-mock-book .trend span { font-size: .68rem; color: #8a97a8; }

/* ── steps ───────────────────────────────────────────────────────────── */
.lp-steps { max-width: 1180px; margin: 0 auto; padding: 80px 20px 30px; }
.lp-section-head { text-align: center; max-width: 720px; margin: 0 auto 34px; }
.lp-section-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1.12; }
.lp-section-head p { color: var(--ink-2); margin: 12px 0 0; }
.lp-section-head.light h2, .lp-section-head.light p { color: #fff; }
.lp-stepgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1000px) { .lp-stepgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .lp-stepgrid { grid-template-columns: 1fr; } }
.lp-step { background: var(--card); border-radius: 26px; padding: 26px 24px 0; min-height: 360px; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 2px 6px rgba(15,23,42,.04), 0 12px 32px rgba(15,23,42,.06); transition: transform .25s ease, box-shadow .25s ease; }
.lp-step:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(15,23,42,.12); }
.lp-step h3 { font-family: var(--serif); font-weight: 500; font-size: 1.8rem; letter-spacing: -0.01em; }
.lp-step p { color: var(--ink-2); font-size: .94rem; line-height: 1.55; margin: 10px 0 18px; }
.lp-step-art { margin-top: auto; height: 150px; border-radius: 18px 18px 0 0; background: linear-gradient(180deg, rgba(26,123,221,.06), rgba(20,184,166,.12)); position: relative; padding: 18px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.lp-step-art .mic { width: 48px; height: 48px; border-radius: 50%; background: var(--blue); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 8px rgba(26,123,221,.18); animation: lpPulse 1.6s ease-out infinite; }
.lp-step-art .mic svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes lpPulse { 0% { box-shadow: 0 0 0 0 rgba(26,123,221,.35); } 100% { box-shadow: 0 0 0 16px rgba(26,123,221,0); } }
.lp-step-art .wave { display: flex; gap: 4px; align-items: center; height: 26px; }
.lp-step-art .wave i { width: 4px; border-radius: 2px; background: var(--blue); height: 40%; animation: lpWave 1.1s ease-in-out infinite; }
.lp-step-art .wave i:nth-child(2n) { animation-delay: .15s; } .lp-step-art .wave i:nth-child(3n) { animation-delay: .3s; }
@keyframes lpWave { 50% { height: 100%; } }
.lp-step-art .note { background: #fff; border-radius: 10px; padding: 10px 12px; width: 100%; box-shadow: 0 6px 16px rgba(15,23,42,.1); color: #141c26; }
.lp-step-art .note b { display: block; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: #27538a; }
.lp-step-art .note u { display: block; height: 5px; width: 90%; background: #d7dfea; border-radius: 3px; margin: 5px 0; text-decoration: none; }
.lp-step-art .note em { display: inline-block; font-style: normal; font-size: .66rem; background: #fff3cd; color: #7a4b00; padding: 1px 6px; border-radius: 4px; margin-top: 4px; }
.lp-step-art .done { background: #22c55e; color: #fff; font-weight: 600; font-size: .86rem; padding: 8px 14px; border-radius: 999px; display: inline-flex; gap: 8px; align-items: center; }
.lp-step-art .pill { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: .78rem; color: var(--ink-2); }
.lp-step-art .search { background: #fff; border-radius: 10px; padding: 9px 12px; font-size: .84rem; width: 100%; color: #141c26; border: 1px solid var(--line); }
.lp-step-art .row3 { display: flex; gap: 8px; width: 100%; } .lp-step-art .row3 i { flex: 1; height: 44px; background: #fff; border-radius: 8px; box-shadow: 0 4px 10px rgba(15,23,42,.08); }

/* ── facts slider: the section is the colour ────────────────────────── */
.lp-facts { position: relative; margin: 60px auto 0; max-width: 1180px; padding: 70px 20px 60px; border-radius: 34px; overflow: hidden; }
.lp-facts-bg { position: absolute; inset: 0; z-index: 0; background: linear-gradient(160deg, #eef4fc, #dfe9f8 60%, #e6eef9); }
[data-bs-theme="dark"] .lp-facts-bg { background: linear-gradient(160deg, #141c2b, #182236 60%, #161f30); }
.lp-facts .lp-section-head h2 { color: var(--ink); text-shadow: none; }
.lp-facts .lp-section-head p { color: var(--ink-2); text-shadow: none; }
.lp-facts .lp-slide { box-shadow: 0 18px 44px rgba(15,23,42,.10); }
.lp-facts .lp-arrow { border-color: var(--line); background: var(--card); color: var(--ink); backdrop-filter: none; }
.lp-facts .lp-arrow:hover { background: #fff; }
.lp-facts .lp-dots button { background: rgba(26,123,221,.25); }
.lp-facts .lp-dots button.is-on { background: var(--blue); }
.lp-facts > :not(.lp-facts-bg) { position: relative; z-index: 1; }

.lp-slider { max-width: 900px; margin: 0 auto; }
.lp-slides { position: relative; min-height: 250px; }
.lp-slide { position: absolute; inset: 0; background: var(--card); border-radius: var(--radius); padding: 36px 40px; opacity: 0; transform: translateX(40px) scale(.98);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22,1,.36,1); pointer-events: none; box-shadow: 0 24px 60px rgba(0,0,0,.18); }
.lp-slide.is-on { opacity: 1; transform: none; pointer-events: auto; position: relative; }
.lp-slide.is-out { transform: translateX(-40px) scale(.98); }
.lp-slide-num { font-family: var(--serif); font-weight: 600; font-size: clamp(3rem, 7vw, 4.6rem); line-height: 1; letter-spacing: -0.02em; }
.lp-slide-num small { font-family: var(--sans); font-weight: 600; font-size: 1rem; color: var(--mute); margin-left: 6px; letter-spacing: 0; }
.lp-slide-text { font-size: clamp(1.05rem, 1.8vw, 1.35rem); line-height: 1.45; margin: 14px 0 10px; max-width: 34ch; }
.lp-slide-note { color: var(--mute); font-size: .92rem; }
.lp-slider-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 22px; }
.lp-arrow { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); background: rgba(255,255,255,.18); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; backdrop-filter: blur(6px); }
.lp-arrow:hover { background: rgba(255,255,255,.3); }
.lp-dots { display: flex; gap: 6px; }
.lp-dots button { width: 8px; height: 8px; border-radius: 999px; border: 0; background: rgba(255,255,255,.45); cursor: pointer; padding: 0; transition: width .3s ease, background .3s ease; }
.lp-dots button.is-on { width: 34px; background: #fff; }

/* ── marquee ─────────────────────────────────────────────────────────── */
.lp-marquee { max-width: 1180px; margin: 46px auto 0; padding: 0 20px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.lp-marquee-track { display: flex; width: max-content; animation: lpMarquee 38s linear infinite; }
.lp-marquee:hover .lp-marquee-track { animation-play-state: paused; }
.lp-marquee-set { display: flex; gap: 44px; padding-right: 44px; }
.lp-marquee-set span { font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; color: var(--mute); opacity: .55; white-space: nowrap; }
/* As the strip comes into view, each name rises in after the last. */
.lp.js-reveal .lp-marquee:not(.in) .lp-marquee-set:first-child span { opacity: 0; transform: translateY(14px); }
.lp.js-reveal .lp-marquee.in .lp-marquee-set:first-child span { animation: lpRise .55s cubic-bezier(.22,1,.36,1) both; }
.lp-marquee-set:first-child span:nth-child(1) { animation-delay: 0s; } .lp-marquee-set:first-child span:nth-child(2) { animation-delay: .06s; }
.lp-marquee-set:first-child span:nth-child(3) { animation-delay: .12s; } .lp-marquee-set:first-child span:nth-child(4) { animation-delay: .18s; }
.lp-marquee-set:first-child span:nth-child(5) { animation-delay: .24s; } .lp-marquee-set:first-child span:nth-child(6) { animation-delay: .30s; }
.lp-marquee-set:first-child span:nth-child(7) { animation-delay: .36s; } .lp-marquee-set:first-child span:nth-child(8) { animation-delay: .42s; }
.lp-marquee-set:first-child span:nth-child(9) { animation-delay: .48s; }
@keyframes lpRise { from { opacity: 0; transform: translateY(14px); } to { opacity: .55; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lp.js-reveal .lp-marquee .lp-marquee-set span { opacity: .55; transform: none; animation: none; } }
@keyframes lpMarquee { to { transform: translateX(-50%); } }

/* ── band ────────────────────────────────────────────────────────────── */
.lp-band { max-width: 1180px; margin: 70px auto 0; padding: 0 20px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 900px) { .lp-band { grid-template-columns: 1fr; } }
.lp-band-photo img { width: 100%; height: 440px; object-fit: cover; border-radius: 28px; box-shadow: 0 24px 60px rgba(15,23,42,.18); }
.lp-band-copy h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.12; }
.lp-truths { list-style: none; padding: 0; margin: 22px 0 26px; display: grid; gap: 14px; }
.lp-truths li { color: var(--ink-2); line-height: 1.5; padding-left: 18px; border-left: 3px solid rgba(26,123,221,.35); }
.lp-truths b { color: var(--ink); }

/* ── faq ─────────────────────────────────────────────────────────────── */
.lp-faq { max-width: 820px; margin: 80px auto 0; padding: 0 20px; }
.lp-faqlist details { background: var(--card); border-radius: 18px; padding: 4px 20px; margin-bottom: 10px; box-shadow: 0 2px 6px rgba(15,23,42,.04), 0 10px 26px rgba(15,23,42,.05); }
.lp-faqlist summary { cursor: pointer; list-style: none; padding: 14px 0; font-weight: 600; display: flex; align-items: center; }
.lp-faqlist summary::-webkit-details-marker { display: none; }
.lp-faqlist summary::after { content: "+"; margin-left: auto; color: var(--mute); font-size: 1.3rem; transition: transform .25s ease; }
.lp-faqlist details[open] summary::after { transform: rotate(45deg); }
.lp-faqlist p { margin: 0 0 16px; color: var(--ink-2); line-height: 1.6; }

/* ── close ───────────────────────────────────────────────────────────── */
.lp-close { max-width: 1180px; margin: 80px auto 0; padding: 0 20px; }
.lp-close-card { text-align: center; padding: 64px 24px; border-radius: 34px; position: relative; overflow: hidden;
  background: radial-gradient(700px 320px at 20% 0%, rgba(59,143,240,.25), transparent 60%), radial-gradient(600px 300px at 90% 100%, rgba(20,184,166,.22), transparent 60%), var(--card);
  box-shadow: 0 12px 40px rgba(15,23,42,.08); }
.lp-close-card h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.lp-close-card p { color: var(--ink-2); margin: 12px 0 24px; }

/* ── footer ──────────────────────────────────────────────────────────── */
.lp-footer { max-width: 1180px; margin: 50px auto 0; padding: 26px 20px 40px; }
.lp-footer-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.lp-footer-links { margin-left: auto; display: flex; gap: 18px; flex-wrap: wrap; }
.lp-footer-links a { color: var(--ink-2); text-decoration: none; font-size: .9rem; } .lp-footer-links a:hover { color: var(--blue); }
.lp-footer-fine { margin-top: 14px; color: var(--mute); font-size: .8rem; }

/* ── reveals ─────────────────────────────────────────────────────────── */
.lp [data-reveal] { opacity: 1; }
.lp.js-reveal [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.lp.js-reveal [data-reveal].in { opacity: 1; transform: none; }
.lp-step { transition-delay: calc(var(--i, 0) * 70ms); }
@media (prefers-reduced-motion: reduce) {
  .lp * { animation: none !important; transition: none !important; }
  .lp.js-reveal [data-reveal] { opacity: 1; transform: none; }
}

/* ── hero headline: each word rises into place, then the key word underlines itself ── */
.lp-hero h1 .w { display: inline-block; opacity: 0; transform: translateY(.55em); filter: blur(4px);
  animation: lpWord .8s cubic-bezier(.22,1,.36,1) forwards; animation-delay: calc(var(--k, 0) * 90ms + 120ms); }
@keyframes lpWord { to { opacity: 1; transform: none; filter: blur(0); } }
@media (prefers-reduced-motion: reduce) { .lp-hero h1 .w { opacity: 1; transform: none; filter: none; animation: none; } }

/* The same texture family closes the page: behind the facts slider and the last
   card, so the top and the bottom of the page rhyme. */
.lp-facts-bg { background: url(../images/landing/grad-b-1920.webp) center 30% / cover no-repeat; }
.lp-facts-bg::after { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.42); }
[data-bs-theme="dark"] .lp-facts-bg { background: url(../images/landing/grad-b-1920.webp) center 30% / cover no-repeat; }
[data-bs-theme="dark"] .lp-facts-bg::after { background: rgba(10,16,28,.62); }
.lp-close-card { background: url(../images/landing/grad-b-1920.webp) center 70% / cover no-repeat; }
.lp-close-card > * { position: relative; z-index: 1; }
.lp-close-card::before { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.28); }
[data-bs-theme="dark"] .lp-close-card { background: url(../images/landing/grad-b-1920.webp) center 70% / cover no-repeat; }
[data-bs-theme="dark"] .lp-close-card::before { background: rgba(10,16,28,.55); }
[data-bs-theme="dark"] .lp-close-card h2, [data-bs-theme="dark"] .lp-close-card p { color: #eef2f8; }
@media (max-width: 720px) {
  .lp-facts-bg, [data-bs-theme="dark"] .lp-facts-bg { background-image: url(../images/landing/grad-b-960.webp); }
  .lp-close-card, [data-bs-theme="dark"] .lp-close-card { background-image: url(../images/landing/grad-b-960.webp); }
}