/* ============================================================================
   Cyno.gg — Luxury landing scroll sections
   Cinematic scroll-revealed sections below the hero: custom-protection
   before/after code slider, gameplay + ESP reveal slider, isometric product
   grid, live stats counters, final CTA. Built on the existing .reveal* /
   .parallax-layer system in scroll-animations.js, plus landing-luxury.js for
   the sliders, counters, tilt and magnetic micro-interactions.

   Motion is bold but every animation is gated behind prefers-reduced-motion.
   ============================================================================ */

/* The wrapper stays a flex column so the hero (.landing-shell, flex:1) still
   fills the first viewport and centers exactly as before; the .lx-sections then
   flow naturally beneath it. We only stop the shell from greedily eating extra
   height once scroll content exists. */
.landing-page-wrapper.has-scroll-sections { min-height: 100vh; }
.landing-page-wrapper.has-scroll-sections .landing-shell { flex: 0 0 auto; min-height: 100vh; }

.lx-sections {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: clamp(80px, 12vh, 160px);
  width: min(1200px, calc(100% - 48px));
  margin: clamp(60px, 14vh, 180px) auto 0;
  padding-bottom: clamp(80px, 12vh, 160px);
}

/* ── Section scaffold ──────────────────────────────────────────────────── */
.lx-section { position: relative; }
.lx-section-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto clamp(28px, 4vh, 48px);
}
.lx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border-radius: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(123, 220, 255, 0.9);
  background: none;
  border: none;
}
.lx-eyebrow::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 70%, transparent);
}
.lx-title {
  font-family: var(--font-display, "Sora"), sans-serif;
  font-size: clamp(28px, 4.4vw, 46px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 16px 0 12px;
  background: linear-gradient(135deg, var(--text) 30%, var(--accent) 75%, var(--accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lx-sub {
  font-size: clamp(14px, 1.4vw, 17px);
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

/* ── Reveal helpers (extend scroll-animations.js .reveal) ──────────────── */
.lx-stagger > * { transition-delay: calc(var(--lx-i, 0) * 80ms); }

/* ── Generic luxury glass card with spatial depth ──────────────────────── */
.lx-card {
  position: relative;
  border-radius: var(--radius-lg, 24px);
  border: 1px solid color-mix(in srgb, var(--glass-border) 70%, transparent);
  background:
    radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%),
    linear-gradient(160deg, color-mix(in srgb, var(--glass-bg-strong) 90%, transparent), color-mix(in srgb, var(--glass-bg) 70%, transparent));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 30px 70px rgba(2, 6, 12, 0.5);
  backdrop-filter: blur(var(--blur-lg, 28px)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--blur-lg, 28px)) saturate(160%);
  overflow: hidden;
}

/* ===========================================================================
   1. Custom protection — before/after code slider
   =========================================================================== */
/* ── PolyEngine window chrome ──────────────────────────────────────────── */
/* Rebranded to read as one of the site's glass panels (same tokens as .lx-card
   / .glass-panel) — not a separate dark code editor. */
.lx-protect-window {
  position: relative;
  border-radius: var(--radius-lg, 24px);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--glass-border) 75%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 30px 70px rgba(2, 6, 12, 0.5),
    0 0 60px color-mix(in srgb, var(--accent) 8%, transparent);
  background:
    radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%),
    linear-gradient(160deg, color-mix(in srgb, var(--glass-bg-strong) 90%, transparent), color-mix(in srgb, var(--glass-bg) 70%, transparent));
  backdrop-filter: blur(var(--blur-lg, 28px)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--blur-lg, 28px)) saturate(160%);
}
/* liquid-glass caustic highlight, matching .glass-panel::before. No z-index so
   it sits behind the header/code content (which are the positioned children). */
.lx-protect-window > * { position: relative; z-index: 1; }
.lx-protect-window::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--liquid-highlight), var(--liquid-caustic);
  opacity: 0.45;
  mix-blend-mode: screen;
  pointer-events: none;
}
/* Panel header — accent rail + soft glass wash, the site's header language. */
.lx-win-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 22px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, transparent), transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--glass-border) 45%, transparent);
}
/* accent left-rail on the header, like admin/section headers */
.lx-win-bar::before {
  content: "";
  position: absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 0 999px 999px 0;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 55%, transparent);
}
/* Reframe the three "dots" as a single accent status indicator (no terminal
   traffic-lights — that read as a generic code editor, off-brand). */
.lx-win-dots { display: inline-flex; align-items: center; gap: 6px; }
.lx-win-dots i {
  width: 7px; height: 7px; border-radius: 50%; display: block;
  background: color-mix(in srgb, var(--accent) 40%, transparent);
}
.lx-win-dots i:nth-child(1) {
  background: var(--accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 70%, transparent);
}
.lx-win-dots i:nth-child(2) { background: color-mix(in srgb, var(--accent) 55%, transparent); }
.lx-win-dots i:nth-child(3) { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.lx-win-status {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--accent) 85%, var(--text));
}
.lx-win-led {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}
@media (prefers-reduced-motion: no-preference) {
  .lx-win-led { animation: lxLedBlink 1.4s ease-in-out infinite; }
}
@keyframes lxLedBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.lx-protect-stage {
  position: relative;
  overflow: hidden;
  user-select: none;
  background-color: #080d1a;
  background-image:
    radial-gradient(80% 90% at 88% 12%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%),
    radial-gradient(70% 80% at 12% 95%, color-mix(in srgb, var(--accent-2) 8%, transparent), transparent 62%),
    linear-gradient(color-mix(in srgb, var(--accent) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 6%, transparent) 1px, transparent 1px),
    linear-gradient(160deg, color-mix(in srgb, var(--glass-bg-strong) 96%, #060912), #070c18 70%);
  background-size: 100% 100%, 100% 100%, 30px 30px, 30px 30px, 100% 100%;
}
/* Ambient "engine life" so the panel never looks half-empty: faint vertical
   data-ticks drifting down the surface behind the code. Sits below the panes. */
.lx-protect-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 7%, transparent) 0 1px,
    transparent 1px 26px
  );
  background-size: 100% 130px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 60%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 60%, #000 100%);
  opacity: 0.6;
}
@media (prefers-reduced-motion: no-preference) {
  .lx-protect-stage::before { animation: lxDataDrift 9s linear infinite; }
}
@keyframes lxDataDrift {
  from { background-position: 0 0; }
  to   { background-position: 0 130px; }
}
.lx-code-pane {
  margin: 0;
  padding: 28px 28px;
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  line-height: 1.8;
  white-space: pre;
  overflow: hidden;
  tab-size: 2;
  position: relative;
  z-index: 1;
}
.lx-code-pane--morph {
  color: #c8d5f2;
  background:
    radial-gradient(85% 110% at 0% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%),
    linear-gradient(160deg, color-mix(in srgb, var(--glass-bg-strong) 97%, #060912), #08101e 72%);
}
/* Scanline wash over the morph pane */
.lx-code-pane--morph::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 9%, transparent) 50%, transparent);
  background-size: 100% 220%;
}
@media (prefers-reduced-motion: no-preference) {
  .lx-code-pane--morph::before { animation: lxFeedScan 6s linear infinite; }
}
@keyframes lxFeedScan { from { background-position: 0 -120%; } to { background-position: 0 120%; } }

/* Morph line elements */
.lx-morph-line {
  position: relative;
  white-space: pre;
  border-radius: 4px;
  transition: background 0.5s ease, box-shadow 0.5s ease, color 0.4s ease;
}
/* clean (unmutated) line coloring */
.lx-morph-line .tok-key { color: #7bdcff; }
.lx-morph-line .tok-fn  { color: #8de6d6; }
.lx-morph-line .tok-str { color: #d9b77a; }
.lx-morph-line .tok-com { color: #5a6b8c; font-style: italic; }
/* protected (mutated) line coloring */
.lx-morph-line .tok-mut  { color: #f09cb0; }
.lx-morph-line .tok-vm   { color: #d9b77a; }
.lx-morph-line .tok-poly { color: #8de6d6; }
/* flash when a line gets mutated */
.lx-morph-line.is-morphing {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  box-shadow: inset 2px 0 0 var(--accent), 0 0 14px color-mix(in srgb, var(--accent) 22%, transparent);
  animation: lxMorphFlash 0.6s ease-out;
}
@keyframes lxMorphFlash {
  0%   { background: color-mix(in srgb, var(--accent) 40%, transparent); }
  100% { background: color-mix(in srgb, var(--accent) 10%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .lx-morph-line.is-morphing { animation: none; background: none; box-shadow: none; }
}

/* ===========================================================================
   1b. Community care + real-time monitoring cards
   =========================================================================== */
.lx-care-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.lx-care-grid--3 { grid-template-columns: repeat(3, 1fr); }
.lx-care-card {
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lx-care-icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: grid; place-items: center;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--glass-border));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 22px color-mix(in srgb, var(--accent) 18%, transparent);
}
.lx-care-icon svg { width: 24px; height: 24px; }
.lx-care-title2 {
  margin: 0;
  font-family: var(--font-display, "Sora"), sans-serif;
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 700;
  color: var(--text);
}
.lx-care-text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-muted);
}

/* ===========================================================================
   2. Stream-proof ESP reveal slider
   =========================================================================== */
.lx-esp-window {
  position: relative;
  border-radius: var(--radius-lg, 24px);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--glass-border) 75%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 30px 70px rgba(2, 6, 12, 0.5),
    0 0 60px color-mix(in srgb, var(--accent) 8%, transparent);
  background:
    radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%),
    linear-gradient(160deg, color-mix(in srgb, var(--glass-bg-strong) 90%, transparent), color-mix(in srgb, var(--glass-bg) 70%, transparent));
  backdrop-filter: blur(var(--blur-lg, 28px)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--blur-lg, 28px)) saturate(160%);
}
.lx-esp-window > * { position: relative; z-index: 1; }
.lx-esp-window::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--liquid-highlight), var(--liquid-caustic);
  opacity: 0.45;
  mix-blend-mode: screen;
  pointer-events: none;
}
.lx-esp-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  contain: paint;
  background: #05070d;
  user-select: none;
}
.lx-esp-poster {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.lx-esp-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  clip-path: polygon(
    calc(var(--lx-split, 50%) - 3%) 0%,
    100% 0%,
    100% 100%,
    calc(var(--lx-split, 50%) + 3%) 100%
  );
}
.lx-esp-overlay--photo {
  background-size: cover;
  background-position: center;
}
.lx-esp-overlay::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 8%, transparent), transparent);
  mix-blend-mode: screen;
}
.lx-esp-badge {
  position: absolute;
  bottom: 16px; z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 10px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.lx-esp-badge svg { width: 16px; height: 16px; flex-shrink: 0; }
.lx-esp-badge--on {
  left: 16px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, rgba(6, 10, 20, 0.7));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 20%, transparent);
}
.lx-esp-badge--off {
  right: 16px;
  color: var(--text-muted);
  background: rgba(6, 10, 20, 0.7);
  border: 1px solid var(--glass-border);
}
/* Slider handle — diagonal rail + knob, matched to the clip-path diagonal.
   The clip-path shifts ±3% so the rail spans from (split-3%) at top to
   (split+3%) at bottom. We achieve this by placing the rail as a thin
   rotated element whose endpoints hit those coordinates. */
.lx-slider-handle {
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  cursor: ew-resize;
  z-index: 5;
  touch-action: none;
  pointer-events: none;
}
.lx-slider-rail {
  position: absolute;
  inset: 0;
  pointer-events: none;
  clip-path: polygon(
    calc(var(--lx-split, 50%) - 3% - 1px) 0%,
    calc(var(--lx-split, 50%) - 3% + 1px) 0%,
    calc(var(--lx-split, 50%) + 3% + 1px) 100%,
    calc(var(--lx-split, 50%) + 3% - 1px) 100%
  );
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 50%, transparent));
}
.lx-slider-knob {
  position: absolute;
  top: 50%;
  left: var(--lx-split, 50%);
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #04111c;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border: 2px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    0 6px 24px rgba(2, 6, 12, 0.5),
    0 0 30px color-mix(in srgb, var(--accent) 50%, transparent);
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: auto;
  cursor: ew-resize;
}
.lx-slider-handle:hover .lx-slider-knob,
.lx-slider-handle:active .lx-slider-knob { transform: translate(-50%, -50%) scale(1.12); }
.lx-slider-knob svg { width: 20px; height: 20px; }

/* ===========================================================================
   2c. Humanized aimbot — path visualization panel + clean video
   =========================================================================== */

/* ── Standalone aim-path visualization (above the video) ───────────────── */
/* No card/grid background — just the line + boxes floating on the site's
   transparent blue background. */
.lx-aim-viz {
  padding: 0;
  margin-bottom: 22px;
  background: none;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible;
}
.lx-aim-viz .lx-aim-paths {
  display: block;
  width: 100%;
  height: clamp(260px, 32vw, 380px);
  background: none;
}
.lx-aim-viz .lx-aim-chips {
  justify-content: center;
  margin-top: 18px;
}

/* Path + target styling */
.lx-aim-paths { pointer-events: none; }
.lx-aim-box {
  fill: none;
  stroke: color-mix(in srgb, var(--accent) 60%, transparent);
  stroke-width: 1.6;
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--accent) 55%, transparent));
}
.lx-aim-path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.6;
  stroke-linecap: round;
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--accent) 70%, transparent));
  stroke-dasharray: 1600;
  stroke-dashoffset: 1600;
}
.lx-aim-cross { stroke: #fff; stroke-width: 2; opacity: 0.85; }
@media (prefers-reduced-motion: no-preference) {
  .lx-aim-path { animation: lxAimDraw 4.5s cubic-bezier(0.5, 0, 0.1, 1) infinite; }
  .lx-aim-path--2 { animation-delay: 0.45s; }
  /* the tracking dot rides the full humanized curve with easing + overshoot */
  .lx-aim-dot {
    offset-path: path("M640 430 C 600 340, 470 300, 400 170 S 392 140, 398 132 C 520 130, 760 180, 910 196");
    animation: lxAimRide 4.5s cubic-bezier(0.45, 0, 0.15, 1) infinite;
    filter: drop-shadow(0 0 9px color-mix(in srgb, var(--accent) 90%, transparent));
  }
}
@media (prefers-reduced-motion: reduce) {
  .lx-aim-path { stroke-dashoffset: 0; }
}
@keyframes lxAimDraw {
  0%   { stroke-dashoffset: 1600; opacity: 0; }
  10%  { opacity: 1; }
  60%  { stroke-dashoffset: 0; opacity: 1; }
  85%  { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes lxAimRide {
  0%   { offset-distance: 0%;   opacity: 0; }
  8%   { opacity: 1; }
  46%  { offset-distance: 52%; }   /* arrive at head 1 */
  52%  { offset-distance: 49%; }   /* overshoot correction (humanized) */
  58%  { offset-distance: 53%; }
  92%  { offset-distance: 100%; opacity: 1; }  /* glide to head 2 */
  100% { offset-distance: 100%; opacity: 0; }
}

.lx-aim-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.lx-aim-chip {
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: color-mix(in srgb, var(--accent) 85%, var(--text));
  background: color-mix(in srgb, var(--accent) 10%, rgba(8, 13, 24, 0.5));
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--glass-border));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ── Gameplay video — transparent stage ────────────────────────────────── */
/* No panel chrome or background: the video plays directly over the site's
   luxury blue background. (Use a video with an alpha channel / chroma-keyed
   clip for true see-through; otherwise it simply plays edge-to-edge.) */
.lx-aim-stage {
  position: relative;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  /* Collapsed by default so an empty/missing video doesn't reserve a big blank
     16:9 box (that was the huge gap). landing-luxury.js adds .has-video once a
     real clip loads, which restores the 16:9 stage. */
  height: 0;
  margin: 0;
}
.lx-aim-stage.has-video {
  aspect-ratio: 16 / 9;
  height: auto;
  margin-top: 22px;
}
.lx-aim-video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  z-index: 1;
  background: none;
}
.lx-aim-stage:not(.has-video) .lx-aim-video { display: none; }

/* ===========================================================================
   3. Isometric product grid
   =========================================================================== */
.lx-iso-wrap {
  perspective: 1800px;
  perspective-origin: 50% 30%;
  /* breathing room so the tilted + floating tiles never ride up over the
     section heading above, and don't clip the rotated row edges. */
  padding: 60px 40px 80px;
  margin-top: 8px;
}
.lx-iso-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  transform-style: preserve-3d;
  /* the signature isometric tilt; landing-luxury.js eases it toward flat on hover */
  transform: rotateX(34deg) rotateZ(-32deg);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.lx-iso-wrap:hover .lx-iso-grid { transform: rotateX(12deg) rotateZ(-8deg); }

.lx-iso-tile {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--glass-border) 70%, transparent);
  background-size: cover;
  background-position: center;
  transform: translateZ(0);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease;
  box-shadow: 0 18px 36px rgba(2, 6, 12, 0.5);
  cursor: pointer;
  text-decoration: none;
}
/* antigravity float — each tile drifts on its own offset */
@media (prefers-reduced-motion: no-preference) {
  .lx-iso-tile { animation: lxFloat var(--lx-dur, 7s) ease-in-out infinite; animation-delay: var(--lx-del, 0s); }
}
@keyframes lxFloat {
  0%, 100% { transform: translateZ(0); }
  50%      { transform: translateZ(40px); }
}
.lx-iso-tile::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(4, 7, 13, 0.85));
}
.lx-iso-tile:hover {
  transform: translateZ(70px) scale(1.04);
  box-shadow: 0 40px 80px rgba(2, 6, 12, 0.65), 0 0 50px color-mix(in srgb, var(--accent) 25%, transparent);
  z-index: 5;
}
.lx-iso-name {
  position: absolute;
  left: 14px; bottom: 12px;
  z-index: 2;
  font-family: var(--font-display, "Sora"), sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
.lx-iso-status {
  position: absolute;
  right: 12px; top: 12px;
  z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #9bf0dd;
  background: rgba(110, 227, 178, 0.16);
  border: 1px solid rgba(110, 227, 178, 0.4);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.lx-iso-status::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: #6ee3b2; box-shadow: 0 0 6px #6ee3b2;
}
.lx-iso-status--monitoring {
  color: #ffd97a;
  background: rgba(255, 200, 60, 0.16);
  border-color: rgba(255, 200, 60, 0.4);
}
.lx-iso-status--monitoring::before { background: #ffc83c; box-shadow: 0 0 6px #ffc83c; }
.lx-iso-status--updating {
  color: #7bc4ff;
  background: rgba(100, 170, 255, 0.16);
  border-color: rgba(100, 170, 255, 0.4);
}
.lx-iso-status--updating::before { background: #64aaff; box-shadow: 0 0 6px #64aaff; }
.lx-iso-status--offline {
  color: #ff8a8a;
  background: rgba(255, 100, 100, 0.16);
  border-color: rgba(255, 100, 100, 0.4);
}
.lx-iso-status--offline::before { background: #ff6464; box-shadow: 0 0 6px #ff6464; }

/* ===========================================================================
   4. Live stats / trust band
   =========================================================================== */
.lx-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.lx-stat {
  padding: 28px 22px;
  border-radius: var(--radius-lg, 20px);
  text-align: center;
}
.lx-stat-num {
  font-family: var(--font-display, "Sora"), sans-serif;
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, var(--text) 30%, var(--accent) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.lx-stat-label {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ===========================================================================
   4b. Founder's note
   =========================================================================== */
.lx-founder {
  position: relative;
  padding: clamp(36px, 5vw, 56px);
  text-align: center;
  max-width: 860px;
  margin: 0 auto;
}
.lx-founder::before {
  content: "\201C";
  position: absolute;
  top: clamp(8px, 2vw, 18px);
  left: clamp(18px, 3vw, 34px);
  font-family: var(--font-display, "Sora"), serif;
  font-size: clamp(90px, 12vw, 150px);
  line-height: 1;
  color: color-mix(in srgb, var(--accent) 16%, transparent);
  pointer-events: none;
}
.lx-founder .lx-eyebrow { position: relative; }
.lx-founder .lx-title { margin-top: 14px; }
.lx-founder-quote {
  position: relative;
  font-size: clamp(16px, 1.7vw, 20px);
  line-height: 1.7;
  color: var(--text-soft, #c8d5f2);
  max-width: 660px;
  margin: 0 auto 16px;
}
.lx-founder-quote strong { color: var(--accent); font-weight: 700; }
.lx-founder-quote--soft { color: var(--text-muted); font-size: clamp(14px, 1.4vw, 16px); }
.lx-founder-sign {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  text-align: left;
}
.lx-founder-mark {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display, "Sora"), sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: #04111c;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 6px 18px rgba(2, 6, 12, 0.45), 0 0 22px color-mix(in srgb, var(--accent) 40%, transparent);
}
.lx-founder-name { font-weight: 700; color: var(--text); font-size: 14px; }
.lx-founder-role { font-size: 12px; color: var(--text-muted); }

/* ===========================================================================
   5. Final CTA
   =========================================================================== */
.lx-cta {
  position: relative;
  text-align: center;
  padding: clamp(48px, 8vh, 90px) 32px;
  border-radius: var(--radius-lg, 28px);
  overflow: hidden;
}
.lx-cta::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(80% 120% at 50% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
    radial-gradient(70% 100% at 50% 100%, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 60%);
  pointer-events: none;
}
.lx-cta .lx-title { margin-top: 0; }
.lx-cta-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 26px;
  position: relative;
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .lx-iso-grid {
    grid-template-columns: repeat(2, 1fr);
    transform: rotateX(14deg) rotateZ(-10deg);
    transform-style: flat;
    will-change: auto;
  }
  .lx-iso-wrap { padding: 40px 24px 60px; }
  .lx-iso-tile { animation-duration: 0s !important; animation: none !important; }
  .lx-stats { grid-template-columns: repeat(2, 1fr); }
  .lx-care-grid, .lx-care-grid--3 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .lx-iso-grid { transform: none; will-change: auto; }
  .lx-iso-wrap { perspective: none; padding: 20px 12px 40px; }
  .lx-iso-tile { box-shadow: 0 8px 20px rgba(2, 6, 12, 0.4); }
  .lx-code-pane { font-size: 10px; padding: 16px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .lx-iso-grid, .lx-iso-wrap:hover .lx-iso-grid { transform: rotateX(18deg) rotateZ(-12deg); transition: none; }
  .lx-iso-tile { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   Mobile / tablet performance — strip costly animations on
   phones and low-power devices while keeping the visual feel.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  /* Kill infinite background animations in the code protection panel */
  .lx-protect-stage::before { animation: none; }
  .lx-code-pane--morph::before { animation: none; }
  .lx-win-led { animation: none; opacity: 1; }

  /* Reduce backdrop-filter blur (expensive on mobile GPUs) */
  .lx-card,
  .lx-protect-window,
  .lx-esp-window {
    backdrop-filter: blur(12px) saturate(130%);
    -webkit-backdrop-filter: blur(12px) saturate(130%);
  }

  /* Remove caustic/liquid pseudo-element overlays */
  .lx-protect-window::before,
  .lx-esp-window::before {
    display: none;
  }

  /* Simplify ESP slider — static badges, no glow/shadow */
  .lx-esp-badge {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .lx-slider-rail {
    filter: none;
  }
  .lx-slider-knob {
    box-shadow: 0 4px 12px rgba(2, 6, 12, 0.4);
  }

  /* Aim path: show static path, no infinite redraw animation */
  .lx-aim-path {
    stroke-dashoffset: 0;
    animation: none !important;
  }
  .lx-aim-dot {
    animation: none !important;
    display: none;
  }

  /* Aim chips: no backdrop-filter */
  .lx-aim-chip {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Stats section on phones */
  .lx-stats {
    gap: 12px;
  }
  .lx-stat {
    padding: 20px 16px;
  }

  /* Founder section padding */
  .lx-founder {
    padding: clamp(24px, 4vw, 36px);
  }

  /* Reduce section gap on mobile */
  .lx-sections {
    gap: clamp(48px, 8vh, 80px);
    width: min(1200px, calc(100% - 32px));
    margin-top: clamp(40px, 8vh, 80px);
  }
}

/* Tablets: moderate reduction */
@media (min-width: 821px) and (max-width: 1100px) {
  .lx-card,
  .lx-protect-window,
  .lx-esp-window {
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
  }
}