/* LoopSuit — full-bleed cinematic product ad
   Connected topology · Apple-style kinetic type · FSH UI surfaces */

.ls-cinema {
  --ls-ink: #f4f1ea;
  --ls-mute: rgba(244, 241, 234, 0.62);
  --ls-blue: #60a5fa;
  --ls-violet: #a78bfa;
  --ls-ember: #fb923c;
  --ls-green: #34d399;
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  background: #05070e;
  color: var(--ls-ink);
  overflow: hidden;
  isolation: isolate;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ls-cinema::-webkit-scrollbar { width: 0; height: 0; display: none; }
.ls-cinema * { box-sizing: border-box; }

.ls-cinema__stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Soft product atmosphere — shifts per scene, never neon/jarring */
.ls-aura {
  position: absolute;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
  transition: opacity 0.8s ease, background 0.9s ease, filter 0.9s ease;
  background:
    radial-gradient(ellipse 70% 55% at 72% 42%, rgba(96, 165, 250, 0.16) 0%, transparent 58%),
    radial-gradient(ellipse 55% 50% at 18% 68%, rgba(167, 139, 250, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse 90% 70% at 50% 100%, rgba(15, 23, 42, 0.5) 0%, transparent 55%);
  filter: saturate(1.05);
}
.ls-cinema[data-aura="fitness"] .ls-aura {
  background:
    radial-gradient(ellipse 65% 55% at 74% 40%, rgba(163, 230, 53, 0.22) 0%, transparent 58%),
    radial-gradient(ellipse 50% 45% at 20% 70%, rgba(74, 222, 128, 0.12) 0%, transparent 52%),
    radial-gradient(ellipse 80% 60% at 50% 110%, rgba(20, 40, 12, 0.45) 0%, transparent 55%);
}
.ls-cinema[data-aura="fintech"] .ls-aura {
  background:
    radial-gradient(ellipse 68% 55% at 76% 38%, rgba(45, 212, 191, 0.22) 0%, transparent 58%),
    radial-gradient(ellipse 48% 48% at 16% 72%, rgba(20, 184, 166, 0.1) 0%, transparent 52%),
    radial-gradient(ellipse 80% 55% at 40% 100%, rgba(13, 40, 38, 0.5) 0%, transparent 55%);
}
.ls-cinema[data-aura="trading"] .ls-aura {
  background:
    radial-gradient(ellipse 68% 55% at 74% 40%, rgba(96, 165, 250, 0.26) 0%, transparent 58%),
    radial-gradient(ellipse 50% 45% at 18% 68%, rgba(59, 130, 246, 0.12) 0%, transparent 52%),
    radial-gradient(ellipse 80% 55% at 50% 100%, rgba(15, 30, 60, 0.5) 0%, transparent 55%);
}
.ls-cinema[data-aura="agency"] .ls-aura {
  background:
    radial-gradient(ellipse 68% 55% at 74% 42%, rgba(251, 146, 60, 0.2) 0%, transparent 58%),
    radial-gradient(ellipse 52% 48% at 18% 65%, rgba(244, 114, 182, 0.14) 0%, transparent 54%),
    radial-gradient(ellipse 80% 55% at 50% 105%, rgba(50, 18, 36, 0.48) 0%, transparent 55%);
}
.ls-cinema[data-aura="qsr"] .ls-aura {
  background:
    radial-gradient(ellipse 68% 55% at 70% 40%, rgba(251, 146, 60, 0.24) 0%, transparent 58%),
    radial-gradient(ellipse 50% 45% at 22% 70%, rgba(248, 113, 113, 0.1) 0%, transparent 52%),
    radial-gradient(ellipse 80% 55% at 50% 100%, rgba(50, 22, 10, 0.48) 0%, transparent 55%);
}
.ls-cinema[data-aura="studio"] .ls-aura {
  background:
    radial-gradient(ellipse 65% 55% at 60% 35%, rgba(167, 139, 250, 0.2) 0%, transparent 58%),
    radial-gradient(ellipse 55% 50% at 25% 70%, rgba(96, 165, 250, 0.12) 0%, transparent 52%),
    radial-gradient(ellipse 80% 55% at 50% 100%, rgba(30, 20, 55, 0.45) 0%, transparent 55%);
}
.ls-cinema[data-aura="ops"] .ls-aura {
  background:
    radial-gradient(ellipse 65% 55% at 70% 40%, rgba(52, 211, 153, 0.16) 0%, transparent 58%),
    radial-gradient(ellipse 50% 45% at 22% 68%, rgba(251, 113, 133, 0.12) 0%, transparent 52%),
    radial-gradient(ellipse 80% 55% at 50% 100%, rgba(30, 20, 40, 0.45) 0%, transparent 55%);
}
.ls-cinema[data-aura="open"] .ls-aura {
  background:
    radial-gradient(ellipse 60% 50% at 50% 42%, rgba(96, 165, 250, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 70% 55% at 50% 80%, rgba(37, 99, 235, 0.1) 0%, transparent 55%);
  opacity: 0.7;
}
.ls-cinema.is-reading .ls-aura { opacity: 0.28; }

/* Connected topography canvas */
.ls-topo {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.85;
  pointer-events: none;
  mix-blend-mode: screen;
}

.ls-camera {
  position: absolute;
  inset: 0;
  z-index: 2;
  transform-origin: 50% 50%;
  will-change: transform;
  transition: transform 1.05s cubic-bezier(0.65, 0.05, 0.36, 1);
}

.ls-scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s;
  pointer-events: none;
}
.ls-scene.is-on {
  opacity: 1;
  visibility: visible;
}
/* Instant cut when leaving a scene — prevents copy stacking under kinetic type */
.ls-scene.is-snap-out,
.ls-showcase.is-snap-out {
  transition: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Kinetic type */
.ls-kinetic {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: clamp(24px, 6vw, 72px);
  pointer-events: none;
  text-align: center;
}
.ls-kinetic[data-mode="left"] { place-items: center; text-align: center; }
.ls-kinetic[data-mode="bottom"] { place-items: center; text-align: center; padding-bottom: 0; }
.ls-kinetic__stack {
  position: relative;
  max-width: min(920px, 94vw);
  padding: clamp(20px, 3.5vw, 40px) clamp(24px, 4vw, 48px);
  isolation: isolate;
}
/* Soft organic veil — lifts type off busy UI without a hard card */
.ls-kinetic__stack::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -18% -8%;
  border-radius: 48% 52% 46% 54% / 54% 48% 52% 46%;
  background:
    radial-gradient(ellipse 72% 58% at 50% 48%, rgba(5, 7, 14, 0.88) 0%, rgba(5, 7, 14, 0.55) 42%, rgba(5, 7, 14, 0.18) 68%, transparent 78%);
  filter: blur(14px);
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.55s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.ls-kinetic__stack::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 8% 12%;
  border-radius: 40%;
  background: radial-gradient(ellipse at 50% 50%, rgba(15, 23, 42, 0.35), transparent 70%);
  filter: blur(28px);
  opacity: 0;
  transition: opacity 0.55s ease;
  pointer-events: none;
}
.ls-kinetic.is-in .ls-kinetic__stack::before {
  opacity: 1;
  transform: scale(1);
}
.ls-kinetic.is-in .ls-kinetic__stack::after { opacity: 1; }
.ls-kinetic__eyebrow {
  position: relative;
  font-size: clamp(10px, 1.1vw, 12px);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ls-mute);
  margin-bottom: 14px;
  opacity: 0;
  transform: translateY(14px);
  text-shadow: 0 2px 24px rgba(5, 7, 14, 0.9);
}
.ls-kinetic__line {
  position: relative;
  font-family: "SF Pro Display", Inter, ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 6.2vw, 72px);
  /* Was 1.05 — descenders on Scrapers/Pipelines collided with the next wrap + sub */
  line-height: 1.22;
  letter-spacing: -0.035em;
  color: #fff;
  text-wrap: balance;
  opacity: 0;
  transform: translateY(28px) scale(0.97);
  /* text-shadow only — filter:drop-shadow + background-clip:text double-paints a ghost layer */
  text-shadow: 0 4px 28px rgba(5, 7, 14, 0.65);
}
.ls-kinetic__line .ls-word {
  display: inline-block;
  opacity: 0;
  /* Small rise only — large translateY on wrapped lines stacks words mid-enter */
  transform: translateY(0.22em);
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.ls-kinetic.is-in .ls-kinetic__eyebrow {
  opacity: 1;
  transform: none;
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.ls-kinetic.is-in .ls-kinetic__line {
  opacity: 1;
  transform: none;
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.ls-kinetic.is-in .ls-word {
  opacity: 1;
  transform: none;
}
.ls-kinetic.is-out .ls-kinetic__eyebrow,
.ls-kinetic.is-out .ls-kinetic__line,
.ls-kinetic.is-out .ls-word,
.ls-kinetic.is-out .ls-kinetic__sub {
  opacity: 0;
  transform: translateY(-14px);
  /* transition-delay forced to 0 via JS — keep exit short and uniform */
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.ls-kinetic.is-out .ls-word {
  transition-delay: 0s !important;
}
.ls-kinetic:not(.is-in):not(.is-out) .ls-kinetic__eyebrow,
.ls-kinetic:not(.is-in):not(.is-out) .ls-kinetic__line,
.ls-kinetic:not(.is-in):not(.is-out) .ls-word,
.ls-kinetic:not(.is-in):not(.is-out) .ls-kinetic__sub {
  opacity: 0;
  visibility: hidden;
}
.ls-kinetic__sub {
  position: relative;
  margin-top: 26px;
  font-size: clamp(14px, 1.7vw, 18px);
  font-weight: 500;
  color: rgba(244, 241, 234, 0.88);
  line-height: 1.5;
  max-width: 36em;
  margin-left: auto;
  margin-right: auto;
  opacity: 0;
  transform: translateY(16px);
  text-shadow: 0 2px 20px rgba(5, 7, 14, 0.85);
}
.ls-kinetic[data-mode="left"] .ls-kinetic__sub { margin-left: auto; }
/* Sub always after the main title — delay set by JS via --ls-sub-delay */
.ls-kinetic.is-in .ls-kinetic__sub {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.55s ease var(--ls-sub-delay, 0.7s),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1) var(--ls-sub-delay, 0.7s);
}
.ls-kinetic[data-tone="blue"] .ls-kinetic__line,
.ls-kinetic[data-tone="ember"] .ls-kinetic__line,
.ls-kinetic[data-tone="violet"] .ls-kinetic__line,
.ls-kinetic[data-tone="green"] .ls-kinetic__line {
  /* Gradient lives on each .ls-word — clipping the parent while words
     animate opacity/transform double-paints a ghost (jumbled stack). */
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: #fff;
  text-shadow: none;
  filter: none;
}
.ls-kinetic[data-tone="blue"] .ls-word {
  background: linear-gradient(115deg, #e0f2fe 0%, #60a5fa 40%, #2563eb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.ls-kinetic[data-tone="ember"] .ls-word {
  background: linear-gradient(115deg, #ffedd5 0%, #fb923c 45%, #ea580c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.ls-kinetic[data-tone="violet"] .ls-word {
  background: linear-gradient(115deg, #f3e8ff 0%, #c084fc 45%, #7c3aed 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.ls-kinetic[data-tone="green"] .ls-word {
  background: linear-gradient(115deg, #d1fae5 0%, #34d399 45%, #059669 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.ls-kinetic[data-tone="mute"] .ls-word {
  color: rgba(244, 241, 234, 0.5);
  -webkit-text-fill-color: rgba(244, 241, 234, 0.5);
  background: none;
}

.ls-scrim {
  position: absolute;
  inset: 0;
  z-index: 25;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.55s ease;
  background:
    radial-gradient(ellipse 72% 62% at 50% 46%, rgba(5, 7, 14, 0.78) 0%, rgba(5, 7, 14, 0.42) 48%, rgba(5, 7, 14, 0.12) 72%, transparent 86%);
}
.ls-scrim.is-on { opacity: 1; }

/* Soft-dim UI while reading type — keeps product scene, clears competition */
.ls-cinema.is-reading .ls-camera {
  filter: brightness(0.38) saturate(0.8) blur(1.6px);
  transition: filter 0.55s ease;
}
.ls-cinema.is-reading .ls-topo {
  opacity: 0.22;
  transition: opacity 0.55s ease;
}
.ls-cinema.is-reading .ls-open-brand {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.ls-camera,
.ls-topo,
.ls-open-brand {
  transition: filter 0.55s ease, opacity 0.55s ease;
}

/* Cursor — locked to pixel coords, no laggy CSS transition on position */
.ls-cursor {
  position: absolute;
  z-index: 40;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  will-change: transform;
  transform: translate3d(-100px, -100px, 0);
}
.ls-cursor.is-on { opacity: 1; }
.ls-cursor.is-clicking { filter: brightness(1.15); }
.ls-cursor.is-clicking svg { transform: scale(0.86); }
.ls-cursor svg {
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
  transition: transform 0.12s ease;
}
.ls-cursor__you {
  position: absolute;
  left: 18px;
  top: 16px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: #0b1020;
  color: #f8fafc;
  border: 1px solid rgba(255, 255, 255, 0.16);
  white-space: nowrap;
}
.ls-cursor__ring {
  position: absolute;
  left: -12px;
  top: -12px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid rgba(96, 165, 250, 0.9);
  opacity: 0;
  transform: scale(0.35);
}
.ls-cursor__ring.pulse { animation: ls-ring 0.5s ease-out; }
@keyframes ls-ring {
  0% { opacity: 0.95; transform: scale(0.3); }
  100% { opacity: 0; transform: scale(1.4); }
}

.ls-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  z-index: 50;
  background: rgba(255, 255, 255, 0.08);
}
.ls-progress__bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #60a5fa, #a78bfa 50%, #fb923c);
}

/* UI chrome shells */
.ls-ui {
  position: absolute;
  left: 50%;
  top: 52%;
  width: min(92%, 980px);
  transform: translate(-50%, -50%) scale(0.92);
  border-radius: 18px;
  overflow: hidden;
  background: #0f1219;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 40px 100px -28px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.04);
  transition: transform 1s cubic-bezier(0.65, 0.05, 0.36, 1);
}
.ls-scene.is-on .ls-ui { transform: translate(-50%, -50%) scale(1); }
.ls-scene.is-zoom .ls-ui { transform: translate(-50%, -48%) scale(1.16); }
.ls-scene.is-zoom-deep .ls-ui { transform: translate(-46%, -46%) scale(1.38); }

.ls-tb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.ls-tb__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c, #666);
}
.ls-tb__title {
  margin-left: 6px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(244, 241, 234, 0.55);
  font-variant-numeric: tabular-nums;
}
.ls-tb__pill {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(96, 165, 250, 0.18);
  color: #93c5fd;
}

/* Scene: cold open — matches site logo treatment */
.ls-open-brand {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.5vw, 28px);
  text-align: left;
  padding: 24px;
}
.ls-open-name {
  font-family: "SF Pro Display", Inter, ui-sans-serif, system-ui, sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: clamp(42px, 8vw, 92px);
  letter-spacing: -0.06em;
  line-height: 0.95;
  color: #fff;
  opacity: 0;
  transform: translateY(22px) scale(0.96);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  text-shadow: 0 8px 40px rgba(37, 99, 235, 0.35);
}
.ls-open-reg {
  font-size: 0.18em;
  font-style: normal;
  font-weight: 600;
  color: rgba(156, 163, 175, 0.9);
  margin-left: 0.15em;
  vertical-align: super;
}
.ls-open-badge {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding-left: clamp(14px, 2vw, 22px);
  border-left: 2px solid rgba(255, 255, 255, 0.12);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.12s, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.12s;
}
.ls-open-badge__vision {
  font-size: clamp(9px, 1.1vw, 12px);
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(156, 163, 175, 0.95);
  line-height: 1;
}
.ls-open-badge__auto-wrap {
  display: inline-block;
  width: max-content;
  background: #3b82f6;
  padding: 3px 10px 4px;
  transform: skewX(-12deg);
  box-shadow: 0 8px 28px rgba(59, 130, 246, 0.35);
}
.ls-open-badge__auto {
  display: block;
  transform: skewX(12deg);
  font-size: clamp(11px, 1.35vw, 15px);
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.15;
}
.ls-scene--open.is-on .ls-open-name,
.ls-scene--open.is-on.is-tag .ls-open-name {
  opacity: 1;
  transform: none;
}
.ls-scene--open.is-on.is-tag .ls-open-badge {
  opacity: 1;
  transform: none;
}

/* Deferred UI — text first, product surface after */
.ls-ui--deferred {
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -46%) scale(0.94);
  pointer-events: none;
  transition: opacity 0.55s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.55s;
}
.ls-scene.is-ui .ls-ui--deferred {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}
.ls-scene.is-ui.is-zoom .ls-ui--deferred { transform: translate(-50%, -48%) scale(1.12); }
.ls-scene.is-ui.is-zoom-deep .ls-ui--deferred { transform: translate(-46%, -46%) scale(1.28); }

/* Product showcase — real shots in phone/tablet frames */
.ls-showcases {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.ls-showcase {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(280px, 1.1fr);
  align-items: center;
  gap: clamp(20px, 4vw, 48px);
  padding: 6% 7%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(22px) scale(0.96);
  /* Hard cut between proof frames — crossfade stacked "The signal…" / "The flag…" */
  transition: none;
  pointer-events: none;
}
.ls-showcase.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}
.ls-showcase.is-on .ls-showcase__copy {
  animation: ls-copy-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.ls-showcase.is-on .ls-device-stage {
  animation: ls-device-in 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes ls-copy-in {
  from { opacity: 0; transform: translateX(-18px); }
  to { opacity: 1; transform: none; }
}
@keyframes ls-device-in {
  from { opacity: 0; transform: translateX(28px) scale(0.94) rotate(1.2deg); }
  to { opacity: 1; transform: none; }
}
.ls-showcase__copy {
  text-align: left;
  max-width: 22em;
}
.ls-spot__name {
  font-family: "SF Pro Display", Inter, ui-sans-serif, system-ui, sans-serif;
  font-weight: 750;
  font-size: clamp(28px, 5vw, 56px);
  letter-spacing: -0.04em;
  line-height: 1.18;
  color: #fff;
  margin-bottom: 10px;
  text-shadow: 0 8px 40px rgba(0, 0, 0, 0.45);
  background: linear-gradient(120deg, #fff 30%, var(--spot-tint, #bfdbfe) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ls-showcase[data-tone="fitness"] { --spot-tint: #d9f99d; --bloom: 163, 230, 53; }
.ls-showcase[data-tone="fintech"] { --spot-tint: #99f6e4; --bloom: 45, 212, 191; }
.ls-showcase[data-tone="trading"] { --spot-tint: #93c5fd; --bloom: 96, 165, 250; }
.ls-showcase[data-tone="agency"] { --spot-tint: #f9a8d4; --bloom: 251, 146, 60; }
.ls-spot__desc {
  font-size: clamp(14px, 1.7vw, 18px);
  font-weight: 500;
  color: rgba(244, 241, 234, 0.72);
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.ls-device-stage {
  justify-self: end;
  position: relative;
  display: grid;
  place-items: center;
}
.ls-device-bloom {
  position: absolute;
  width: 120%;
  height: 110%;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  border-radius: 40%;
  background:
    radial-gradient(ellipse 60% 55% at 50% 48%, rgba(var(--bloom, 96, 165, 250), 0.38) 0%, transparent 68%),
    radial-gradient(ellipse 80% 70% at 40% 60%, rgba(255, 255, 255, 0.06) 0%, transparent 70%);
  filter: blur(28px);
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
  animation: ls-bloom-breathe 5.5s ease-in-out infinite;
}
@keyframes ls-bloom-breathe {
  0%, 100% { opacity: 0.75; transform: translate(-50%, -50%) scale(0.96); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
}
.ls-device {
  position: relative;
  z-index: 1;
  box-shadow:
    0 28px 60px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 40px rgba(var(--bloom, 96, 165, 250), 0.18);
  animation: ls-device-float 6s ease-in-out infinite;
}
@keyframes ls-device-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .ls-device,
  .ls-device-bloom,
  .ls-showcase.is-on .ls-showcase__copy,
  .ls-showcase.is-on .ls-device-stage { animation: none !important; }
}
.ls-device--phone {
  width: min(42vw, 240px);
  border-radius: 28px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.18);
  background: #0a0a0a;
  aspect-ratio: 9 / 17.5;
}
.ls-device--tablet {
  width: min(58vw, 520px);
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.16);
  background: #0a0a0a;
  aspect-ratio: 16 / 10;
}
.ls-device img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.ls-device--live {
  background: #0f1219;
  aspect-ratio: 16 / 10;
}
.ls-mini-ui {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.ls-mini-ui__tb {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.ls-mini-ui__title {
  margin-left: 4px;
  font-size: 10px;
  color: rgba(244, 241, 234, 0.5);
  letter-spacing: 0.04em;
}
.ls-mini-grain {
  position: relative;
  flex: 1;
  padding: 16px;
  overflow: hidden;
  color: #fdfaf3;
}
.ls-mini-grain::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 85% 70% at 14% 20%, #ea580c 0%, transparent 55%),
    radial-gradient(ellipse 80% 75% at 90% 26%, #db2777 0%, transparent 52%),
    linear-gradient(155deg, #1a1028, #241236 45%, #2a1424);
}
.ls-mini-grain > * { position: relative; z-index: 1; }
.ls-mini-grain__k {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 6px;
}
.ls-mini-grain__t {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
}
.ls-mini-boards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.ls-mini-board {
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 10px;
  font-size: 11px;
  transition: border-color 0.25s, background 0.25s, transform 0.25s;
}
.ls-mini-board.is-hot {
  border-color: rgba(251, 146, 60, 0.55);
  background: rgba(251, 146, 60, 0.14);
  transform: translateY(-2px);
}
.ls-mini-board strong { display: block; color: #fff; margin-bottom: 3px; font-size: 12px; }
.ls-mini-board span { color: rgba(253, 250, 243, 0.65); }

.ls-catalog {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(94%, 980px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 2vw, 22px);
  transform: translate(-50%, -50%) scale(0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.6s;
  z-index: 1;
}
.ls-scene.is-catalog .ls-catalog {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}
.ls-scene.is-catalog .ls-showcases {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0.45s;
}
.ls-cat-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ls-cat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(15, 18, 28, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s;
}
.ls-scene.is-catalog .ls-cat-item {
  opacity: 1;
  transform: none;
}
.ls-scene.is-catalog .ls-cat-col:nth-child(1) .ls-cat-item:nth-child(1) { transition-delay: 0.05s; }
.ls-scene.is-catalog .ls-cat-col:nth-child(1) .ls-cat-item:nth-child(2) { transition-delay: 0.1s; }
.ls-scene.is-catalog .ls-cat-col:nth-child(1) .ls-cat-item:nth-child(3) { transition-delay: 0.15s; }
.ls-scene.is-catalog .ls-cat-col:nth-child(1) .ls-cat-item:nth-child(4) { transition-delay: 0.2s; }
.ls-scene.is-catalog .ls-cat-col:nth-child(2) .ls-cat-item:nth-child(1) { transition-delay: 0.12s; }
.ls-scene.is-catalog .ls-cat-col:nth-child(2) .ls-cat-item:nth-child(2) { transition-delay: 0.18s; }
.ls-scene.is-catalog .ls-cat-col:nth-child(2) .ls-cat-item:nth-child(3) { transition-delay: 0.24s; }
.ls-scene.is-catalog .ls-cat-col:nth-child(2) .ls-cat-item:nth-child(4) { transition-delay: 0.3s; }
.ls-scene.is-catalog .ls-cat-col:nth-child(3) .ls-cat-item:nth-child(1) { transition-delay: 0.2s; }
.ls-scene.is-catalog .ls-cat-col:nth-child(3) .ls-cat-item:nth-child(2) { transition-delay: 0.26s; }
.ls-scene.is-catalog .ls-cat-col:nth-child(3) .ls-cat-item:nth-child(3) { transition-delay: 0.32s; }
.ls-scene.is-catalog .ls-cat-col:nth-child(3) .ls-cat-item:nth-child(4) { transition-delay: 0.38s; }
.ls-cat-item img,
.ls-cat-swatch {
  width: 48px;
  height: 36px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: block;
}
.ls-cat-swatch--fsh {
  background:
    radial-gradient(ellipse 90% 80% at 20% 30%, #ea580c 0%, transparent 55%),
    radial-gradient(ellipse 80% 70% at 85% 40%, #db2777 0%, transparent 50%),
    linear-gradient(145deg, #1a1028, #2a1424);
}
.ls-cat-swatch--hub {
  background:
    radial-gradient(ellipse 70% 80% at 70% 25%, #f97316 0%, transparent 50%),
    radial-gradient(ellipse 80% 70% at 15% 70%, #a21caf 0%, transparent 55%),
    linear-gradient(160deg, #120c1c, #241436);
}
.ls-cat-item strong {
  display: block;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 2px;
}
.ls-cat-item span {
  font-size: 11px;
  color: rgba(244, 241, 234, 0.55);
}

/* Topology product nodes (legacy) */
.ls-nodes,
.ls-spotlight { display: none; }

/* FSH scene */
.ls-fsh-body {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 320px;
}
.ls-fsh-nav {
  background: #0a0c12;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  padding: 14px 12px;
}
.ls-fsh-nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  font-size: 12px;
  color: rgba(244, 241, 234, 0.55);
  margin-bottom: 4px;
  transition: background 0.25s, color 0.25s;
}
.ls-fsh-nav__item.is-hot {
  background: rgba(96, 165, 250, 0.14);
  color: #fff;
}
.ls-fsh-nav__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}
.ls-fsh-main { padding: 16px 18px; position: relative; }
.ls-fsh-main h4 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.ls-fsh-main > p {
  margin: 0 0 14px;
  font-size: 12px;
  color: var(--ls-mute);
}
.ls-grain-tile {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  min-height: 168px;
  padding: 16px;
  color: #fdfaf3;
}
.ls-grain-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 85% 70% at 14% 20%, #ea580c 0%, transparent 55%),
    radial-gradient(ellipse 80% 75% at 90% 26%, #db2777 0%, transparent 52%),
    radial-gradient(ellipse 90% 75% at 30% 90%, #f59e0b 0%, #b45309 38%, transparent 60%),
    linear-gradient(155deg, #1a1028, #241236 45%, #2a1424);
}
.ls-grain-tile::after {
  content: "";
  position: absolute;
  inset: -20%;
  opacity: 0.4;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.35' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 110px;
  pointer-events: none;
}
.ls-grain-tile > * { position: relative; z-index: 1; }
.ls-grain-tile .gt-k {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 8px;
}
.ls-grain-tile .gt-t {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 6px;
}
.ls-grain-tile .gt-s { font-size: 12px; opacity: 0.8; max-width: 28em; }
.ls-board-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.ls-board-card {
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 10px;
  font-size: 11px;
  transition: border-color 0.25s, transform 0.25s, background 0.25s;
}
.ls-board-card.is-hot {
  border-color: rgba(251, 146, 60, 0.55);
  background: rgba(251, 146, 60, 0.12);
  transform: translateY(-2px);
}
.ls-board-card strong { display: block; font-size: 12px; margin-bottom: 4px; color: #fff; }
.ls-board-card span { color: rgba(253, 250, 243, 0.65); }

/* RankRadar — denser fleet console */
.ls-rr-body { padding: 12px 14px 16px; }
.ls-rr-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.ls-rr-chip {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(232, 114, 12, 0.16);
  color: #fdba74;
  border: 1px solid rgba(232, 114, 12, 0.28);
}
.ls-rr-meta {
  font-size: 11px;
  color: rgba(244, 241, 234, 0.45);
  font-variant-numeric: tabular-nums;
}
.ls-rr-fleet {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.ls-rr-outlet {
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px 11px;
  transition: border-color 0.25s, background 0.25s, transform 0.25s, box-shadow 0.25s;
}
.ls-rr-outlet.is-hot {
  border-color: rgba(232, 114, 12, 0.55);
  background: rgba(232, 114, 12, 0.1);
  box-shadow: 0 12px 28px rgba(232, 114, 12, 0.18);
  transform: translateY(-2px);
}
.ls-rr-outlet__city {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.5);
  margin-bottom: 6px;
}
.ls-rr-outlet__rank {
  font-size: 26px;
  font-weight: 750;
  letter-spacing: -0.04em;
  color: #fff;
  line-height: 1;
}
.ls-rr-outlet__delta {
  font-size: 11px;
  font-weight: 700;
  margin-top: 4px;
}
.ls-rr-outlet__delta.is-up { color: #4ade80; }
.ls-rr-outlet__delta.is-down { color: #f87171; }
.ls-rr-outlet__bar {
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  margin: 10px 0 8px;
  overflow: hidden;
}
.ls-rr-outlet__bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #fb923c, #e8720c);
}
.ls-rr-outlet__plat {
  font-size: 10px;
  color: rgba(244, 241, 234, 0.42);
}
.ls-rr-insight {
  border-radius: 12px;
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.32);
  padding: 12px 14px;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.ls-rr-insight.is-hot {
  box-shadow: 0 12px 28px rgba(239, 68, 68, 0.15);
  transform: translateY(-1px);
}
.ls-rr-insight .sev {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: #f87171;
  margin-bottom: 6px;
}
.ls-rr-insight h5 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: #fff;
}
.ls-rr-insight p {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--ls-mute);
  line-height: 1.4;
}
.ls-rr-btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: #e8720c;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border: none;
  box-shadow: 0 8px 22px rgba(232, 114, 12, 0.35);
  transition: transform 0.15s;
}
.ls-rr-btn.is-hit { transform: scale(0.94); }

/* Mobile mockups — appear after compliance copy */
.ls-phones {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3vw, 36px);
  padding: 6% 4%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.96);
  transition: opacity 0.6s ease, transform 0.75s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.6s;
}
.ls-scene.is-phones .ls-phones {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.ls-phone {
  width: min(42%, 280px);
  position: relative;
}
.ls-phone__label {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.ls-phone__bezel {
  border-radius: 28px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.14);
  background: #0a0a0a;
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.5);
  aspect-ratio: 9 / 16;
}
.ls-phone__bezel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ls-scene.is-phones .ls-phone:nth-child(2) {
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.12s;
}

/* Finale */
.ls-finale {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.ls-finale__ring {
  position: absolute;
  width: min(70vw, 520px);
  height: min(70vw, 520px);
  border-radius: 50%;
  border: 1px solid rgba(96, 165, 250, 0.2);
  animation: ls-spin 22s linear infinite;
}
@keyframes ls-spin { to { transform: rotate(360deg); } }
.ls-cta {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 12px 22px;
  border-radius: 999px;
  background: #fff;
  color: #0b1020;
  font-weight: 700;
  font-size: clamp(13px, 1.5vw, 16px);
  letter-spacing: -0.02em;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  text-decoration: none;
}
.ls-scene--finale.is-cta .ls-cta {
  opacity: 1;
  transform: none;
}

.ls-cat-tag {
  position: absolute;
  left: 24px;
  bottom: 18px;
  z-index: 45;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: #fff;
  background: rgba(15, 18, 28, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}
.ls-cat-tag.is-on {
  opacity: 1;
  transform: none;
}
.ls-cat-tag[hidden] { display: none !important; }
.ls-cat-tag__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
}
.ls-cat-tag__text { white-space: nowrap; }
.ls-cat-tag[data-tone="fitness"] {
  color: #d9f99d;
  background: rgba(54, 83, 20, 0.55);
  border-color: rgba(163, 230, 53, 0.35);
}
.ls-cat-tag[data-tone="fintech"] {
  color: #99f6e4;
  background: rgba(19, 78, 74, 0.55);
  border-color: rgba(45, 212, 191, 0.35);
}
.ls-cat-tag[data-tone="trading"] {
  color: #bfdbfe;
  background: rgba(30, 58, 138, 0.55);
  border-color: rgba(96, 165, 250, 0.4);
}
.ls-cat-tag[data-tone="agency"] {
  color: #fbcfe8;
  background: rgba(112, 26, 117, 0.5);
  border-color: rgba(244, 114, 182, 0.35);
}
.ls-cat-tag[data-tone="qsr"] {
  color: #fed7aa;
  background: rgba(124, 45, 18, 0.55);
  border-color: rgba(251, 146, 60, 0.4);
}
.ls-cat-tag[data-tone="studio"] {
  color: #e9d5ff;
  background: rgba(76, 29, 149, 0.5);
  border-color: rgba(167, 139, 250, 0.35);
}
.ls-cat-tag[data-tone="ops"] {
  color: #fecdd3;
  background: rgba(136, 19, 55, 0.5);
  border-color: rgba(251, 113, 133, 0.35);
}

@media (max-width: 800px) {
  .ls-fsh-body { grid-template-columns: 1fr; }
  .ls-fsh-nav { display: none; }
  .ls-rr-fleet { grid-template-columns: repeat(2, 1fr); }
  .ls-catalog { grid-template-columns: 1fr; width: min(88%, 420px); }
  .ls-phones { flex-direction: column; }
  .ls-phone { width: min(70%, 220px); }
  .ls-cursor__you { display: none; }
  .ls-open-brand {
    flex-direction: column;
    gap: 18px;
    text-align: center;
  }
  .ls-open-badge {
    padding-left: 0;
    border-left: none;
    align-items: center;
  }
  .ls-showcase {
    grid-template-columns: 1fr;
    place-items: center;
    text-align: center;
    padding: 10% 5%;
  }
  .ls-showcase__copy { text-align: center; max-width: none; }
  .ls-device-stage { justify-self: center; }
  .ls-device--phone { width: min(48vw, 180px); }
  .ls-device--tablet { width: min(88vw, 360px); }
}
@media (prefers-reduced-motion: reduce) {
  .ls-finale__ring,
  .ls-cursor__ring.pulse { animation: none !important; }
  .ls-camera,
  .ls-ui,
  .ls-scene,
  .ls-kinetic__line,
  .ls-kinetic__eyebrow,
  .ls-kinetic__sub,
  .ls-word { transition: none !important; }
}

/* ============================================================
   OFFER-FIRST CUT — additions only (Scene 2/3 + Scene 7 + Scene 8 + finale sub)
   New components: .ls-thesis (engine + interface diagram, Scene 3),
   .ls-range (the "--range" strip that replaces the catalog wall, Scene 7),
   and .ls-compare (the four-column check-row, Scene 8). Plus a "mute" tone
   and an is-strike variant for the Scene 2 problem lines.
   No rules above this line were modified.
   ============================================================ */

/* Scene 2 — greyed, struck problem lines (the broken status quo) */
.ls-kinetic[data-tone="mute"] .ls-kinetic__line {
  color: rgba(244, 241, 234, 0.5);
  -webkit-text-fill-color: rgba(244, 241, 234, 0.5);
}
/* Per-word strike — crosses every visual line even when the copy wraps */
.ls-kinetic.is-strike .ls-word {
  position: relative;
}
.ls-kinetic.is-strike .ls-word::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0.48em;
  height: 0.08em;
  border-radius: 2px;
  background: rgba(251, 113, 133, 0.9);
  box-shadow: 0 0 12px rgba(251, 113, 133, 0.5);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  z-index: 2;
  pointer-events: none;
}
.ls-kinetic.is-strike.is-in .ls-word::after {
  opacity: 1;
  transform: scaleX(1);
  transition: transform 0.34s cubic-bezier(0.7, 0, 0.3, 1) 0.45s, opacity 0.15s ease 0.45s;
}
/* Left-to-right sweep across words (base delay lets the words land first) */
.ls-kinetic.is-strike.is-in .ls-word:nth-child(1)::after { transition-delay: 0.45s; }
.ls-kinetic.is-strike.is-in .ls-word:nth-child(2)::after { transition-delay: 0.51s; }
.ls-kinetic.is-strike.is-in .ls-word:nth-child(3)::after { transition-delay: 0.57s; }
.ls-kinetic.is-strike.is-in .ls-word:nth-child(4)::after { transition-delay: 0.63s; }
.ls-kinetic.is-strike.is-in .ls-word:nth-child(5)::after { transition-delay: 0.69s; }
.ls-kinetic.is-strike.is-in .ls-word:nth-child(6)::after { transition-delay: 0.75s; }
.ls-kinetic.is-strike.is-in .ls-word:nth-child(7)::after { transition-delay: 0.81s; }
.ls-kinetic.is-strike.is-in .ls-word:nth-child(8)::after { transition-delay: 0.87s; }

/* Scene 3 — the thesis diagram: engine + interface → one system */
.ls-thesis {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(24px, 6vw, 72px);
  z-index: 1;
}
.ls-thesis__pair {
  display: flex;
  align-items: stretch;
  gap: clamp(14px, 3vw, 34px);
  transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s ease;
}
.ls-thesis__panel {
  width: min(38vw, 300px);
  border-radius: 18px;
  padding: clamp(16px, 2.4vw, 24px);
  background: rgba(15, 18, 28, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-align: left;
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.ls-thesis__panel--engine { transform: translateX(-40px) scale(0.94); }
.ls-thesis__panel--product { transform: translateX(40px) scale(0.94); }
.ls-scene.is-on .ls-thesis__panel { opacity: 1; transform: none; }
.ls-thesis__plus {
  display: grid;
  place-items: center;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 300;
  color: var(--ls-mute);
  opacity: 0;
  transition: opacity 0.5s ease 0.3s;
}
.ls-scene.is-on .ls-thesis__plus { opacity: 1; }
.ls-thesis__viz {
  height: clamp(52px, 8vh, 68px);
  border-radius: 12px;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.ls-thesis__viz--engine { background: linear-gradient(160deg, #0a1020, #0d1630); }
.ls-thesis__viz--engine span {
  position: absolute;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.85), transparent);
  background-size: 200% 100%;
  animation: ls-thesis-flow 2.2s linear infinite;
}
.ls-thesis__viz--engine span:nth-child(1) { top: 30%; animation-delay: 0s; }
.ls-thesis__viz--engine span:nth-child(2) { top: 52%; animation-delay: 0.4s; }
.ls-thesis__viz--engine span:nth-child(3) { top: 74%; animation-delay: 0.8s; }
@keyframes ls-thesis-flow {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}
.ls-thesis__viz--product { background: linear-gradient(160deg, #160f24, #241436); }
.ls-thesis__viz--product::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 14px;
  background: rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.ls-thesis__viz--product i {
  position: absolute;
  left: 10%;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.16);
}
.ls-thesis__viz--product i:nth-child(1) { top: 42%; width: 55%; }
.ls-thesis__viz--product i:nth-child(2) { top: 64%; width: 38%; background: rgba(167, 139, 250, 0.55); }
.ls-thesis__k {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ls-mute);
  margin-bottom: 6px;
}
.ls-thesis__t {
  font-family: "SF Pro Display", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: 8px;
}
.ls-thesis__panel--engine .ls-thesis__t {
  background: linear-gradient(115deg, #e0f2fe, #60a5fa 60%, #2563eb);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ls-thesis__panel--product .ls-thesis__t {
  background: linear-gradient(115deg, #f3e8ff, #c084fc 55%, #7c3aed);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ls-thesis__d {
  font-size: clamp(12px, 1.4vw, 14px);
  color: rgba(244, 241, 234, 0.68);
  line-height: 1.4;
}
.ls-thesis__resolve {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  opacity: 0;
  transform: translateY(14px) scale(0.96);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.ls-scene.is-merged .ls-thesis__pair {
  transform: scale(0.86);
  opacity: 0;
  visibility: hidden;
  filter: none;
  /* Instant hide — faint "Scrapers, pipelines…" under "One system." reads as stacked type */
  transition: none;
}
.ls-scene.is-merged .ls-thesis__resolve {
  opacity: 1;
  transform: none;
}
.ls-thesis__eq {
  font-family: "SF Pro Display", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(34px, 6vw, 68px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.18;
  background: linear-gradient(115deg, #e0f2fe 0%, #60a5fa 45%, #2563eb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* No filter:drop-shadow here — it double-paints under background-clip:text */
  text-shadow: none;
}
.ls-thesis__sub {
  margin-top: 10px;
  font-size: clamp(14px, 1.7vw, 18px);
  font-weight: 500;
  color: rgba(244, 241, 234, 0.85);
  text-shadow: 0 2px 20px rgba(5, 7, 14, 0.85);
}

/* Range strip — 4 sequential beats, hard cuts, one word + one thumb each */
.ls-range {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.ls-range__beat {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2.4vh, 20px);
  padding: 6%;
  opacity: 0;
  visibility: hidden;
  /* Hard cut — crossfading two big words reads as stacked/garbled type */
  transition: none;
}
.ls-range__beat.is-on {
  opacity: 1;
  visibility: visible;
}
.ls-range__thumb {
  width: min(52vw, 320px);
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(15, 18, 28, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 28px 70px -24px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.04);
  transform: scale(0.92) translateY(10px);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1) 0.04s;
}
.ls-range__beat.is-on .ls-range__thumb { transform: none; }
.ls-range__thumb img,
.ls-range__swatch {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
/* Products with no shot get a styled swatch. Frontier/Brain = violet/blue. */
.ls-range__swatch {
  background:
    radial-gradient(ellipse 80% 70% at 22% 28%, #7c3aed 0%, transparent 55%),
    radial-gradient(ellipse 70% 65% at 82% 62%, #2563eb 0%, transparent 55%),
    linear-gradient(150deg, #0d1226, #1a1338 55%, #101226);
}
/* AI agents / Cortex = teal node-field, distinct from the Frontier swatch */
.ls-range__swatch--agents {
  background:
    radial-gradient(ellipse 70% 65% at 26% 30%, #2dd4bf 0%, transparent 52%),
    radial-gradient(ellipse 65% 60% at 80% 68%, #14b8a6 0%, transparent 52%),
    radial-gradient(circle at 60% 42%, rgba(226, 232, 240, 0.5) 0 1.5px, transparent 2px),
    radial-gradient(circle at 34% 66%, rgba(226, 232, 240, 0.45) 0 1.5px, transparent 2px),
    radial-gradient(circle at 74% 30%, rgba(226, 232, 240, 0.45) 0 1.5px, transparent 2px),
    linear-gradient(150deg, #071a1a, #0a2422 55%, #06201d);
}
/* Delivery intel / RankRadar = amber field with faint rank-bar lines */
.ls-range__swatch--radar {
  background:
    radial-gradient(ellipse 75% 65% at 24% 28%, #fb923c 0%, transparent 52%),
    radial-gradient(ellipse 64% 58% at 82% 66%, #e8720c 0%, transparent 50%),
    linear-gradient(0deg, transparent 43%, rgba(255, 255, 255, 0.16) 44%, rgba(255, 255, 255, 0.16) 46%, transparent 47%),
    linear-gradient(0deg, transparent 59%, rgba(255, 255, 255, 0.11) 60%, rgba(255, 255, 255, 0.11) 62%, transparent 63%),
    linear-gradient(150deg, #241206, #2a1608 55%, #1c0f06);
}
/* Banking / TD Bank = TD-green field with a card band */
.ls-range__swatch--bank {
  background:
    radial-gradient(ellipse 70% 62% at 26% 30%, #22c55e 0%, transparent 52%),
    radial-gradient(ellipse 62% 56% at 80% 68%, #16a34a 0%, transparent 50%),
    linear-gradient(118deg, transparent 38%, rgba(255, 255, 255, 0.18) 41%, rgba(255, 255, 255, 0.1) 57%, transparent 60%),
    linear-gradient(150deg, #04140a, #06200f 55%, #041a0b);
}
/* Content ops / TurboContent = magenta field with text-line hints */
.ls-range__swatch--content {
  background:
    radial-gradient(ellipse 72% 64% at 24% 28%, #db2777 0%, transparent 52%),
    radial-gradient(ellipse 62% 56% at 82% 66%, #a21caf 0%, transparent 52%),
    linear-gradient(0deg, transparent 40%, rgba(255, 255, 255, 0.15) 41%, rgba(255, 255, 255, 0.15) 43%, transparent 44%),
    linear-gradient(0deg, transparent 53%, rgba(255, 255, 255, 0.1) 54%, rgba(255, 255, 255, 0.1) 56%, transparent 57%),
    linear-gradient(150deg, #1a0716, #240a20 55%, #16060f);
}
/* Compliance / VeritasGuard = rose field, matches the ops aura */
.ls-range__swatch--compliance {
  background:
    radial-gradient(ellipse 72% 64% at 24% 28%, #fb7185 0%, transparent 52%),
    radial-gradient(ellipse 62% 56% at 82% 66%, #e11d48 0%, transparent 52%),
    linear-gradient(150deg, #240509, #2a0810 55%, #1a0407);
}

/* Icon-plate treatment — a bold centered glyph + glossy sheen, sized to read
   in well under a second. Layered on top of the existing brand-color swatch
   backgrounds above; matches the dimensional-card feel of the Agency ops
   plate mark without a floating-plate illustration, which needs more time
   to parse than these fast beats allow. */
.ls-range__swatch--icon {
  display: grid;
  place-items: center;
  position: relative;
}
.ls-range__swatch--icon::before {
  content: "";
  position: absolute;
  inset: -35% -15%;
  background: linear-gradient(122deg, rgba(255, 255, 255, 0.24) 0%, transparent 32%, transparent 100%);
  transform: rotate(-5deg);
  pointer-events: none;
}
.ls-range__swatch--icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -18px 30px -20px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}
.ls-range__mark {
  position: relative;
  z-index: 1;
  width: 34%;
  height: 34%;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4));
}
.ls-range__mark path,
.ls-range__mark circle,
.ls-range__mark rect {
  stroke: #fff;
}
.ls-range__word {
  font-family: "SF Pro Display", Inter, ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(34px, 6.4vw, 76px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: #fff;
  filter: drop-shadow(0 4px 28px rgba(5, 7, 14, 0.65));
  opacity: 0;
  transform: translateY(0.35em) scale(0.9);
  transition: opacity 0.2s ease, transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
.ls-range__beat.is-on .ls-range__word {
  opacity: 1;
  transform: none;
}
.ls-range__credit {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ls-mute);
  opacity: 0;
  transition: opacity 0.3s ease 0.12s;
}
.ls-range__beat.is-on .ls-range__credit { opacity: 1; }

/* Comparison check-row — dark glass, same tokens as .ls-cat-item */
.ls-compare {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(94%, 860px);
  transform: translate(-50%, -46%) scale(0.96);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.55s ease, transform 0.75s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.55s;
  z-index: 1;
}
.ls-scene.is-on .ls-compare {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}
.ls-compare__eyebrow {
  font-size: clamp(10px, 1.1vw, 12px);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ls-mute);
  margin-bottom: 16px;
  text-shadow: 0 2px 24px rgba(5, 7, 14, 0.9);
}
.ls-compare__table {
  border-radius: 16px;
  overflow: hidden;
  background: rgba(15, 18, 28, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.ls-compare__row {
  display: grid;
  grid-template-columns: 1.35fr repeat(4, 1fr);
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.ls-compare__row--head {
  border-top: none;
  background: rgba(255, 255, 255, 0.03);
}
.ls-compare__cell {
  padding: 12px 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: rgba(244, 241, 234, 0.72);
}
.ls-compare__row--head .ls-compare__cell {
  font-size: 12px;
  font-weight: 650;
  color: rgba(244, 241, 234, 0.85);
}
.ls-compare__cell--label {
  text-align: left;
  padding-left: 16px;
  color: var(--ls-mute);
}
.ls-compare__cell--ls {
  background: rgba(96, 165, 250, 0.08);
  color: #fff;
}
.ls-compare__mark {
  color: rgba(244, 241, 234, 0.38);
  font-weight: 600;
}
.ls-compare__check {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(52, 211, 153, 0.16);
  border: 1px solid rgba(52, 211, 153, 0.45);
  color: #34d399;
  font-size: 12px;
  font-weight: 700;
  opacity: 0;
  transform: scale(0.3);
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.ls-scene.is-on .ls-compare__check {
  opacity: 1;
  transform: none;
}
/* Checks snap in on beat — same stagger pattern as .ls-catalog .ls-cat-item */
.ls-scene.is-on .ls-compare__row:nth-child(2) .ls-compare__check { transition-delay: 0.9s; }
.ls-scene.is-on .ls-compare__row:nth-child(3) .ls-compare__check { transition-delay: 1.15s; }
.ls-scene.is-on .ls-compare__row:nth-child(4) .ls-compare__check { transition-delay: 1.4s; }
.ls-scene.is-on .ls-compare__row:nth-child(5) .ls-compare__check { transition-delay: 1.65s; }
.ls-compare__stamp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(15, 18, 28, 0.72);
  border: 1px solid rgba(167, 139, 250, 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #e9d5ff;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: -0.01em;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.ls-scene.is-stamp .ls-compare__stamp {
  opacity: 1;
  transform: none;
}

/* Finale CTA subline */
.ls-cta-sub {
  position: relative;
  z-index: 2;
  margin-top: 12px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ls-mute);
  letter-spacing: 0.01em;
  text-shadow: 0 2px 20px rgba(5, 7, 14, 0.85);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease 0.18s, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.18s;
}
.ls-scene--finale.is-cta .ls-cta-sub {
  opacity: 1;
  transform: none;
}

@media (max-width: 800px) {
  .ls-thesis__pair { flex-direction: column; align-items: center; gap: 12px; }
  .ls-thesis__panel { width: min(80vw, 320px); }
  .ls-thesis__plus { transform: rotate(0); font-size: 26px; }
  .ls-thesis__resolve { position: static; margin-top: 18px; }
  .ls-scene.is-merged .ls-thesis__pair {
    transform: scale(0.9);
    opacity: 0;
    visibility: hidden;
  }
  .ls-range__thumb { width: min(64vw, 260px); }
  .ls-compare { width: 94%; }
  .ls-compare__cell { padding: 8px 4px; font-size: 10px; }
  .ls-compare__row--head .ls-compare__cell { font-size: 10px; }
  .ls-compare__cell--label { padding-left: 10px; }
  .ls-compare__check { width: 18px; height: 18px; font-size: 10px; }
  .ls-compare__stamp { font-size: 11px; padding: 8px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ls-thesis__viz--engine span { animation: none !important; }
  .ls-thesis__pair,
  .ls-thesis__panel,
  .ls-thesis__plus,
  .ls-thesis__resolve,
  .ls-kinetic.is-strike .ls-word::after,
  .ls-range__beat,
  .ls-range__thumb,
  .ls-range__word,
  .ls-range__credit,
  .ls-compare,
  .ls-compare__check,
  .ls-compare__stamp,
  .ls-cta-sub { transition: none !important; }
}