/* ============================================================================
   fx.css — Shattuck Software additive motion layer (merged + hardened)
   Loaded on top of the existing page. Decorative only.

   Included modules:
     1. mesh          (fx3-mesh-*)        global animated aurora mesh field
     2. constellation (fx3-canvas-*)      hero particle constellation (canvas)
     3. livedash      (ld-*)              hero-art floating micro-widgets
     4. sectionbg     (sectionbg-*)       per-section background motifs
     5. cardfx        (cardfx-*)          card hover spotlight + tilt + bracket
     6. logoticker    (lt-*)              replaced-SaaS marquee
     7. textfx        (fx3-word/eyebrow)  heading word-rise + sheen + shimmer
     8. scrollscene   (fx3-ss-*)          scroll meter + back-to-top + parallax
     9. cursor        (fxc-*)             custom cursor dot + ring (pointer:fine)
    10. footerscene   (fx3-fs-*)          footer grid floor + particles + border

   Hardening: every animated decorative element has a reduced-motion guard;
   all decorative layers are pointer-events:none, behind text, low-opacity.
   Heavy effects (constellation, cursor, tilt, canvas) are disabled on
   (pointer:coarse) / (max-width:760px). Prefix collisions resolved by
   re-namespacing scrollscene -> fx3-ss-, footerscene -> fx3-fs-.
   ============================================================================ */


/* ============================================================
   1. mesh — global animated aurora mesh field
   ============================================================ */
.fx3-mesh-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  will-change: opacity;
  background:
    radial-gradient(ellipse 60% 55% at 18% 22%, rgba(79, 70, 229, 0.13) 0%, rgba(67, 56, 202, 0.06) 45%, transparent 70%),
    radial-gradient(ellipse 55% 50% at 82% 78%, rgba(5, 150, 105, 0.11) 0%, rgba(4, 120, 87, 0.05) 45%, transparent 70%),
    radial-gradient(ellipse 40% 38% at 78% 14%, rgba(79, 70, 229, 0.08) 0%, transparent 65%),
    radial-gradient(ellipse 38% 42% at 12% 68%, rgba(5, 150, 105, 0.07) 0%, transparent 65%),
    transparent;
  background-size: 200% 200%, 200% 200%, 180% 180%, 180% 180%;
  background-position: 0% 0%, 100% 100%, 100% 0%, 0% 100%;
  animation:
    fx3-bloom-a 28s ease-in-out infinite,
    fx3-bloom-b 34s ease-in-out infinite reverse,
    fx3-fade-in 1.2s var(--ease, cubic-bezier(.22,1,.36,1)) both;
  opacity: 1;
}

.fx3-mesh-layer::before {
  content: '';
  position: absolute;
  inset: -15%;
  background:
    radial-gradient(ellipse 50% 60% at 55% 30%, rgba(79, 70, 229, 0.07) 0%, transparent 60%),
    radial-gradient(ellipse 45% 55% at 30% 72%, rgba(5, 150, 105, 0.06) 0%, transparent 60%);
  background-size: 220% 220%, 200% 200%;
  background-position: 50% 20%, 30% 80%;
  animation: fx3-bloom-c 38s ease-in-out infinite;
  opacity: 0.9;
}

.fx3-mesh-layer::after {
  content: '';
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse 70% 50% at 65% 55%, rgba(67, 56, 202, 0.05) 0%, transparent 55%),
    radial-gradient(ellipse 60% 65% at 25% 40%, rgba(4, 120, 87, 0.05) 0%, transparent 55%);
  background-size: 250% 250%, 230% 230%;
  background-position: 60% 50%, 20% 45%;
  animation: fx3-bloom-d 52s ease-in-out infinite reverse;
  opacity: 0.7;
}

@keyframes fx3-bloom-a {
  0%   { background-position: 0%   0%,   100% 100%, 100% 0%,   0%   100%; }
  25%  { background-position: 20%  15%,   80%  88%, 88%  12%,  12%  88%; }
  50%  { background-position: 35%  30%,   68%  72%, 72%  28%,  28%  72%; }
  75%  { background-position: 18%  22%,   84%  90%, 90%  8%,   8%   90%; }
  100% { background-position: 0%   0%,   100% 100%, 100% 0%,   0%   100%; }
}
@keyframes fx3-bloom-b {
  0%   { background-position: 100% 100%, 0%   0%,   0%   100%, 100% 0%; }
  33%  { background-position: 75%  82%,  22%  18%,  20%  78%,  78%  22%; }
  66%  { background-position: 55%  60%,  40%  38%,  38%  58%,  58%  40%; }
  100% { background-position: 100% 100%, 0%   0%,   0%   100%, 100% 0%; }
}
@keyframes fx3-bloom-c {
  0%   { background-position: 50% 20%, 30% 80%; }
  30%  { background-position: 62% 38%, 20% 65%; }
  60%  { background-position: 40% 55%, 45% 82%; }
  100% { background-position: 50% 20%, 30% 80%; }
}
@keyframes fx3-bloom-d {
  0%   { background-position: 60% 50%, 20% 45%; }
  40%  { background-position: 42% 65%, 38% 28%; }
  80%  { background-position: 68% 35%, 15% 60%; }
  100% { background-position: 60% 50%, 20% 45%; }
}
@keyframes fx3-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hero > .fx3-mesh-hero {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 65% 70% at 15% 50%, rgba(79, 70, 229, 0.09) 0%, transparent 60%),
    radial-gradient(ellipse 50% 55% at 85% 45%, rgba(5, 150, 105, 0.07) 0%, transparent 60%);
  background-size: 180% 180%, 180% 180%;
  background-position: 0% 50%, 100% 50%;
  animation: fx3-mesh-hero-breathe 22s ease-in-out infinite;
}

@keyframes fx3-mesh-hero-breathe {
  0%   { background-position: 0%   50%, 100% 50%; opacity: 1; }
  50%  { background-position: 12%  42%,  88%  58%; opacity: 0.75; }
  100% { background-position: 0%   50%, 100% 50%; opacity: 1; }
}

/* Keep hero copy readable above all ambient layers */
.hero-copy {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .fx3-mesh-layer,
  .fx3-mesh-layer::before,
  .fx3-mesh-layer::after,
  .hero > .fx3-mesh-hero {
    animation: none !important;
    background-position: 30% 30%, 70% 70%, 80% 10%, 10% 80% !important;
  }
  .fx3-mesh-layer { opacity: 0.7 !important; }
}


/* ============================================================
   2. constellation — hero particle field (canvas)
   ============================================================ */
.fx3-canvas-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.fx3-canvas-wrap canvas {
  display: block;
  width: 100%;
  height: 100%;
}
@media (pointer: coarse), (max-width: 760px) {
  .fx3-canvas-wrap { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fx3-canvas-wrap { display: none; }
}


/* ============================================================
   3. livedash — hero-art floating micro-widgets
   ============================================================ */
.ld-radar {
  position: absolute;
  top: -32px;
  right: -28px;
  width: 72px;
  height: 72px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.82;
}
.ld-radar-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(79, 70, 229, 0.35);
}
.ld-radar-ring-inner {
  position: absolute;
  inset: 16px;
  border-radius: 50%;
  border: 1px solid rgba(79, 70, 229, 0.22);
}
.ld-radar-crosshair-h,
.ld-radar-crosshair-v {
  position: absolute;
  background: rgba(79, 70, 229, 0.18);
}
.ld-radar-crosshair-h {
  top: 50%; left: 6px; right: 6px; height: 1px;
  transform: translateY(-50%);
}
.ld-radar-crosshair-v {
  left: 50%; top: 6px; bottom: 6px; width: 1px;
  transform: translateX(-50%);
}
.ld-radar-sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(79, 70, 229, 0.28) 40deg, transparent 60deg);
  animation: ld-sweep 3.6s linear infinite;
  transform-origin: center;
}
.ld-radar-blip {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #4f46e5;
  top: 22px; left: 46px;
  animation: ld-blip 3.6s ease-in-out infinite;
}
.ld-radar-blip-2 {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #059669;
  top: 38px; left: 28px;
  animation: ld-blip 3.6s ease-in-out 1.4s infinite;
}
.ld-stream {
  position: absolute;
  bottom: -10px;
  left: -34px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.75;
}
.ld-bar {
  width: 4px;
  border-radius: 2px 2px 0 0;
  background: var(--primary, #4f46e5);
  transform-origin: bottom center;
  animation: ld-bar-rise 2.2s var(--ease, cubic-bezier(.22,1,.36,1)) infinite;
}
.ld-bar:nth-child(1) { height: 14px; animation-delay: 0s;    background: rgba(79,70,229,0.7); }
.ld-bar:nth-child(2) { height: 22px; animation-delay: 0.18s; background: rgba(79,70,229,0.55); }
.ld-bar:nth-child(3) { height: 10px; animation-delay: 0.36s; background: rgba(5,150,105,0.65); }
.ld-bar:nth-child(4) { height: 28px; animation-delay: 0.54s; background: rgba(5,150,105,0.80); }
.ld-bar:nth-child(5) { height: 16px; animation-delay: 0.72s; background: rgba(79,70,229,0.5);  }
.ld-bar:nth-child(6) { height: 20px; animation-delay: 0.90s; background: rgba(5,150,105,0.55); }
.ld-bar:nth-child(7) { height: 12px; animation-delay: 1.08s; background: rgba(79,70,229,0.65); }
.ld-terminal {
  position: absolute;
  top: 50%; left: -52px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 5px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.72;
}
.ld-terminal-prompt {
  font-family: 'Space Mono', 'Fira Code', monospace;
  font-size: 9px;
  color: var(--primary, #4f46e5);
  letter-spacing: 0.04em;
  white-space: nowrap;
  user-select: none;
}
.ld-cursor {
  width: 7px; height: 11px;
  background: var(--primary, #4f46e5);
  border-radius: 1px;
  animation: ld-blink 1.1s step-end infinite;
}
.ld-pill {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 5px;
  border-radius: 20px;
  padding: 4px 10px 4px 7px;
  font-family: var(--font-display, 'Space Grotesk'), sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  pointer-events: none;
  z-index: 0;
  white-space: nowrap;
  user-select: none;
}
.ld-pill-deploy {
  top: 14px; right: -62px;
  background: rgba(5, 150, 105, 0.10);
  border: 1px solid rgba(5, 150, 105, 0.30);
  color: #047857;
  animation: ld-pill-float 5s var(--ease, cubic-bezier(.22,1,.36,1)) 0.4s infinite;
}
.ld-pill-metric {
  bottom: 36px; right: -56px;
  background: rgba(79, 70, 229, 0.09);
  border: 1px solid rgba(79, 70, 229, 0.28);
  color: #4338ca;
  animation: ld-pill-float 5s var(--ease, cubic-bezier(.22,1,.36,1)) 2.1s infinite;
}
.ld-pill-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ld-pill-deploy .ld-pill-dot {
  background: #059669;
  animation: ld-dot-pulse 1.8s ease-in-out infinite;
}
.ld-pill-metric .ld-pill-dot {
  background: #4f46e5;
  animation: ld-dot-pulse 1.8s ease-in-out 0.9s infinite;
}
.ld-scanline {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(79, 70, 229, 0.22) 20%, rgba(79, 70, 229, 0.40) 50%, rgba(79, 70, 229, 0.22) 80%, transparent 100%);
  pointer-events: none;
  z-index: 0;
  animation: ld-scanmove 4.5s linear infinite;
  top: 0;
  opacity: 0;
}

@keyframes ld-sweep {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes ld-blip {
  0%, 48%, 100% { opacity: 0; transform: scale(0.5); }
  50%, 62%      { opacity: 1; transform: scale(1); }
  64%, 99%      { opacity: 0; transform: scale(0.5); }
}
@keyframes ld-bar-rise {
  0%   { transform: scaleY(0.45); opacity: 0.5; }
  35%  { transform: scaleY(1.12); opacity: 1;   }
  60%  { transform: scaleY(0.80); opacity: 0.85; }
  80%  { transform: scaleY(1.05); opacity: 0.95; }
  100% { transform: scaleY(0.45); opacity: 0.5; }
}
@keyframes ld-blink {
  0%, 49%  { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes ld-pill-float {
  0%   { opacity: 0;    transform: translateY(6px); }
  12%  { opacity: 1;    transform: translateY(0px); }
  82%  { opacity: 0.95; transform: translateY(-3px); }
  94%  { opacity: 0;    transform: translateY(-6px); }
  100% { opacity: 0;    transform: translateY(6px); }
}
@keyframes ld-dot-pulse {
  0%, 100% { opacity: 1;   transform: scale(1);   }
  50%      { opacity: 0.4; transform: scale(0.7); }
}
@keyframes ld-scanmove {
  0%   { transform: translateY(0);    opacity: 0; }
  5%   { opacity: 1; }
  90%  { opacity: 0.6; }
  100% { transform: translateY(100%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ld-radar-sweep,
  .ld-radar-blip,
  .ld-radar-blip-2,
  .ld-bar,
  .ld-cursor,
  .ld-pill-deploy,
  .ld-pill-metric,
  .ld-pill-dot,
  .ld-scanline {
    animation: none !important;
  }
  .ld-radar-sweep { opacity: 0.12; }
  .ld-cursor      { opacity: 1; }
  .ld-pill-deploy,
  .ld-pill-metric { opacity: 0.7; transform: none; }
}


/* ============================================================
   4. sectionbg — per-section background motifs
   ============================================================ */
.sectionbg-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  will-change: auto;
}
.section > .wrap { position: relative; z-index: 1; }

.sectionbg-dots {
  background-image: radial-gradient(circle, rgba(79,70,229,0.18) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: 0 0;
  opacity: 0.55;
  animation: sectionbg-dotpan 22s linear infinite;
}
@keyframes sectionbg-dotpan {
  0%   { background-position: 0 0; }
  100% { background-position: 56px 56px; }
}

.sectionbg-lines {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cline x1='0' y1='60' x2='60' y2='0' stroke='%234f46e5' stroke-width='0.6' stroke-opacity='0.12'/%3E%3Cline x1='-30' y1='60' x2='30' y2='0' stroke='%234f46e5' stroke-width='0.6' stroke-opacity='0.08'/%3E%3Cline x1='30' y1='60' x2='90' y2='0' stroke='%234f46e5' stroke-width='0.6' stroke-opacity='0.08'/%3E%3C/svg%3E");
  background-size: 60px 60px;
  background-position: 0 0;
  opacity: 0.7;
  animation: sectionbg-linedrift 28s linear infinite;
}
@keyframes sectionbg-linedrift {
  0%   { background-position: 0 0; }
  100% { background-position: 60px -60px; }
}

.sectionbg-blobs { opacity: 1; }
.sectionbg-blobs canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.55;
}

.sectionbg-wave { opacity: 1; }
.sectionbg-wave canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.45;
}

.sectionbg-cross {
  background-image:
    linear-gradient(rgba(5,150,105,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(5,150,105,0.07) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: 0 0;
  opacity: 0.8;
  animation: sectionbg-crosspan 34s linear infinite;
}
@keyframes sectionbg-crosspan {
  0%   { background-position: 0 0; }
  50%  { background-position: 16px 16px; }
  100% { background-position: 32px 32px; }
}

.sectionbg-scatter {
  background-image:
    radial-gradient(circle, rgba(67,56,202,0.14) 1.2px, transparent 1.2px),
    radial-gradient(circle, rgba(5,150,105,0.10) 1px, transparent 1px);
  background-size: 22px 22px, 37px 37px;
  background-position: 0 0, 11px 11px;
  opacity: 0.6;
  animation: sectionbg-scatterpan 18s linear infinite;
}
@keyframes sectionbg-scatterpan {
  0%   { background-position: 0 0,  11px 11px; }
  100% { background-position: 22px 22px, 48px 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .sectionbg-dots,
  .sectionbg-lines,
  .sectionbg-cross,
  .sectionbg-scatter {
    animation: none !important;
  }
}
@media (pointer: coarse), (max-width: 760px) {
  .sectionbg-blobs canvas,
  .sectionbg-wave canvas { display: none; }
}


/* ============================================================
   5. cardfx — card hover spotlight + tilt + corner bracket
   (hover/pointer triggered only; NO always-on animation)
   ============================================================ */
#work .grid .card,
.svc-card,
.why-card,
.tech-card {
  --cardfx-cx: 0.5;
  --cardfx-cy: 0.5;
  --cardfx-on: 0;
  transform-style: preserve-3d;
  will-change: transform;
  transition:
    transform 0.35s cubic-bezier(.22,1,.36,1),
    box-shadow 0.35s cubic-bezier(.22,1,.36,1);
  isolation: isolate;
  overflow: hidden;
  position: relative;
}
#work .grid .card::before,
.svc-card::before,
.why-card::before,
.tech-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
  opacity: calc(var(--cardfx-on) * 0.85);
  background: radial-gradient(
    circle 200px at calc(var(--cardfx-cx) * 100%) calc(var(--cardfx-cy) * 100%),
    rgba(79, 70, 229, 0.13) 0%,
    rgba(5, 150, 105, 0.06) 45%,
    transparent 70%
  );
  transition: opacity 0.25s ease, background 0.05s linear;
}
#work .grid .card::after,
.svc-card::after,
.why-card::after,
.tech-card::after {
  content: '';
  position: absolute;
  top: 10px; right: 10px;
  width: 18px; height: 18px;
  pointer-events: none;
  z-index: 1;
  border-top: 2px solid var(--primary);
  border-right: 2px solid var(--primary);
  border-radius: 0 3px 0 0;
  opacity: 0;
  transform: translate(4px, -4px) scale(0.7);
  transition:
    opacity 0.22s var(--ease),
    transform 0.28s var(--ease-spring);
}
#work .grid .card.cardfx-active::after,
.svc-card.cardfx-active::after,
.why-card.cardfx-active::after,
.tech-card.cardfx-active::after {
  opacity: 1;
  transform: translate(0, 0) scale(1);
  animation: cardfx-bracket-trace 2.4s ease-in-out infinite;
}
@keyframes cardfx-bracket-trace {
  0%   { border-color: var(--primary); }
  50%  { border-color: var(--win); }
  100% { border-color: var(--primary); }
}

@media (prefers-reduced-motion: reduce) {
  #work .grid .card,
  .svc-card,
  .why-card,
  .tech-card {
    transition: none !important;
    transform: none !important;
  }
  #work .grid .card::before,
  .svc-card::before,
  .why-card::before,
  .tech-card::before { display: none; }
  #work .grid .card::after,
  .svc-card::after,
  .why-card::after,
  .tech-card::after {
    animation: none !important;
    opacity: 0 !important;
  }
}
@media (pointer: coarse) {
  #work .grid .card,
  .svc-card,
  .why-card,
  .tech-card { transform: none !important; }
  #work .grid .card::before,
  .svc-card::before,
  .why-card::before,
  .tech-card::before { display: none; }
}


/* ============================================================
   6. logoticker — replaced-SaaS marquee
   ============================================================ */
.lt-root {
  position: relative;
  margin-top: 32px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.lt-root:hover .lt-track { animation-play-state: paused; }
.lt-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--win-deep, #047857);
  pointer-events: none;
}
.lt-label::before,
.lt-label::after {
  content: '';
  display: block;
  height: 1px;
  flex: 1;
  background: linear-gradient(to right, transparent, var(--win-deep, #047857) 40%, var(--win-deep, #047857) 60%, transparent);
  opacity: 0.35;
}
.lt-label-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--win, #059669);
  animation: lt-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
.lt-row {
  display: flex;
  overflow: hidden;
  margin-bottom: 8px;
}
.lt-row:last-child { margin-bottom: 0; }
.lt-track {
  display: flex;
  align-items: center;
  gap: 0;
  will-change: transform;
}
.lt-track--fwd { animation: lt-scroll-fwd var(--lt-dur, 32s) linear infinite; }
.lt-track--rev { animation: lt-scroll-rev var(--lt-dur-rev, 38s) linear infinite; }
.lt-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px 5px 9px;
  margin-right: 10px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(229, 225, 216, 0.9);
  border-radius: 7px;
  white-space: nowrap;
  flex-shrink: 0;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.lt-chip-name {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink, #0c0d10);
  opacity: 0.78;
}
.lt-chip-cost {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 10px;
  font-weight: 500;
  color: var(--win-deep, #047857);
  opacity: 0.7;
  text-decoration: line-through;
  text-decoration-color: rgba(5, 150, 105, 0.5);
}
.lt-chip img {
  width: 18px; height: 18px;
  object-fit: contain;
  border-radius: 3px;
  flex-shrink: 0;
  opacity: 0.88;
}
.lt-sep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  margin-right: 10px;
  border-radius: 50%;
  background: rgba(5, 150, 105, 0.08);
  color: var(--win, #059669);
  font-size: 11px;
  font-weight: 700;
  opacity: 0.5;
  flex-shrink: 0;
  pointer-events: none;
}
.lt-savings {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 18px;
  pointer-events: none;
}
.lt-savings-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.1) 0%, rgba(5, 150, 105, 0.04) 100%);
  border: 1px solid rgba(5, 150, 105, 0.22);
  border-radius: 100px;
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 11px;
  font-weight: 600;
  color: var(--win-deep, #047857);
  letter-spacing: 0.01em;
}
.lt-savings-arrow {
  font-size: 12px;
  opacity: 0.5;
  color: var(--ink, #0c0d10);
}
@keyframes lt-scroll-fwd {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes lt-scroll-rev {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}
@keyframes lt-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.7); }
}
@media (prefers-reduced-motion: reduce) {
  .lt-track--fwd,
  .lt-track--rev { animation: none !important; }
  .lt-label-dot { animation: none !important; }
  .lt-track .lt-clone { display: none; }
}


/* ============================================================
   7. textfx — heading word-rise + sheen + eyebrow shimmer
   ============================================================ */
.fx3-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  margin-right: 0.25em;
  line-height: inherit;
  position: relative;
}
.fx3-word-inner {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.55em);
  will-change: opacity, transform;
}
.fx3-word-inner.fx3-revealed {
  animation: fx3-rise var(--fx3-dur, 0.65s) var(--ease, cubic-bezier(.22,1,.36,1)) var(--fx3-delay, 0s) both;
}
@keyframes fx3-rise {
  from { opacity: 0; transform: translateY(0.55em); }
  to   { opacity: 1; transform: translateY(0); }
}
.fx3-word::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.0) 35%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0.0) 65%, transparent 100%);
  background-size: 300% 100%;
  background-position: 200% 0;
  opacity: 0;
  z-index: 1;
  border-radius: inherit;
}
.fx3-word.fx3-sheen::after {
  animation: fx3-sheen-sweep 0.8s cubic-bezier(.4,0,.2,1) var(--fx3-sheen-delay, 0s) 1 both;
}
@keyframes fx3-sheen-sweep {
  0%   { background-position: 200% 0; opacity: 0; }
  10%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { background-position: -100% 0; opacity: 0; }
}
.fx3-eyebrow-shimmer {
  position: relative;
  display: inline-block;
}
.fx3-eyebrow-shimmer::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(79, 70, 229, 0.18) 40%, rgba(255, 255, 255, 0.32) 50%, rgba(79, 70, 229, 0.10) 60%, transparent 100%);
  background-size: 250% 100%;
  background-position: 200% 0;
  animation: fx3-eyebrow-shim 3.4s ease-in-out 0.6s infinite;
  border-radius: 2px;
}
@keyframes fx3-eyebrow-shim {
  0%   { background-position: 200% 0; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { background-position: -100% 0; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fx3-word-inner,
  .fx3-word-inner.fx3-revealed {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .fx3-word::after,
  .fx3-word.fx3-sheen::after {
    animation: none !important;
    opacity: 0 !important;
  }
  .fx3-eyebrow-shimmer::before {
    animation: none !important;
    opacity: 0 !important;
  }
}


/* ============================================================
   8. scrollscene — scroll meter + back-to-top + parallax
   (re-namespaced fx3- -> fx3-ss- to avoid collisions)
   ============================================================ */
.fx3-ss-meter {
  position: fixed;
  bottom: 0; left: 0;
  width: 100%;
  height: 3px;
  z-index: 9000;
  pointer-events: none;
  overflow: hidden;
  background: transparent;
}
.fx3-ss-meter-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--primary) 0%, #818cf8 35%, var(--win) 70%, var(--win-deep) 100%);
  transform-origin: left center;
  transform: scaleX(var(--fx3-ss-prog, 0));
  will-change: transform;
  animation: fx3-ss-meter-sheen 3.2s linear infinite;
  opacity: 0.85;
}
@keyframes fx3-ss-meter-sheen {
  0%   { filter: brightness(1); }
  40%  { filter: brightness(1.35) saturate(1.2); }
  70%  { filter: brightness(1); }
  100% { filter: brightness(1); }
}
.fx3-ss-btt {
  position: fixed;
  bottom: 2rem; right: 2rem;
  width: 48px; height: 48px;
  z-index: 8900;
  pointer-events: auto;
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0;
  opacity: 0;
  transform: translateY(12px) scale(0.88);
  transition:
    opacity 0.4s var(--ease, cubic-bezier(.22,1,.36,1)),
    transform 0.4s var(--ease, cubic-bezier(.22,1,.36,1));
}
.fx3-ss-btt[data-visible="true"] {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.fx3-ss-btt:hover .fx3-ss-btt-disc { transform: scale(1.08); }
.fx3-ss-btt:hover .fx3-ss-btt-arrow { transform: translateY(-2px); }
.fx3-ss-btt-disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(247, 246, 243, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border, #e5e1d8);
  transition: transform 0.28s var(--ease-spring, cubic-bezier(.34,1.56,.64,1));
  box-shadow: 0 2px 12px rgba(79,70,229,0.12);
}
.fx3-ss-btt-svg {
  position: absolute;
  inset: 0;
  width: 48px; height: 48px;
  transform: rotate(-90deg);
  pointer-events: none;
}
.fx3-ss-btt-track {
  fill: none;
  stroke: var(--border, #e5e1d8);
  stroke-width: 3;
  opacity: 0.6;
}
.fx3-ss-btt-ring {
  fill: none;
  stroke: url(#fx3-ss-ring-grad);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 125.66;
  stroke-dashoffset: 125.66;
  transition: stroke-dashoffset 0.08s linear;
  will-change: stroke-dashoffset;
}
.fx3-ss-btt-arrow {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary, #4f46e5);
  transition: transform 0.22s var(--ease-spring, cubic-bezier(.34,1.56,.64,1));
  pointer-events: none;
}
.fx3-ss-btt-arrow svg {
  width: 16px; height: 16px;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.fx3-ss-hero-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.fx3-ss-hero-layer::before,
.fx3-ss-hero-layer::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.fx3-ss-hero-layer::before {
  width: 480px; height: 480px;
  top: -60px; right: -80px;
  background: radial-gradient(circle at 50% 50%, rgba(79,70,229,0.07) 0%, transparent 70%);
  transform: translateY(calc(var(--fx3-ss-hy, 0px) * 0.22));
  will-change: transform;
  animation: fx3-ss-hero-breathe 9s ease-in-out infinite alternate;
}
.fx3-ss-hero-layer::after {
  width: 300px; height: 300px;
  bottom: 20px; left: 10%;
  background: radial-gradient(circle at 50% 50%, rgba(5,150,105,0.06) 0%, transparent 68%);
  transform: translateY(calc(var(--fx3-ss-hy, 0px) * 0.38));
  will-change: transform;
  animation: fx3-ss-hero-breathe 12s ease-in-out infinite alternate-reverse;
}
.fx3-ss-hero-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(circle, rgba(79,70,229,0.12) 1px, transparent 1px);
  background-size: 28px 28px;
  transform: translateY(calc(var(--fx3-ss-hy, 0px) * 0.14));
  will-change: transform;
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, transparent 28%, black 75%);
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, transparent 28%, black 75%);
  opacity: 0.55;
}
@keyframes fx3-ss-hero-breathe {
  0%   { opacity: 0.7; }
  100% { opacity: 1;   }
}
.fx3-ss-section-motif {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  opacity: 1;
}
.fx3-ss-section-motif::before {
  content: '';
  position: absolute;
  top: -24px; right: -24px;
  width: 180px; height: 180px;
  border-radius: 50%;
  border: 1.5px solid rgba(79,70,229,0.12);
  transform: translateY(calc(var(--fx3-ss-sy, 0px) * -0.18)) scale(1);
  will-change: transform;
  animation: fx3-ss-motif-spin 28s linear infinite;
}
.fx3-ss-section-motif::after {
  content: '';
  position: absolute;
  top: 4px; right: 4px;
  width: 132px; height: 132px;
  border-radius: 50%;
  border: 1px dashed rgba(79,70,229,0.09);
  transform: translateY(calc(var(--fx3-ss-sy, 0px) * -0.28)) scale(1);
  will-change: transform;
  animation: fx3-ss-motif-spin 20s linear infinite reverse;
}
@keyframes fx3-ss-motif-spin {
  to { transform: translateY(calc(var(--fx3-ss-sy, 0px) * -0.18)) rotate(360deg); }
}
.section.alt .fx3-ss-section-motif::before { border-color: rgba(5,150,105,0.14); }
.section.alt .fx3-ss-section-motif::after  { border-color: rgba(5,150,105,0.09); }
.fx3-ss-section-motif .fx3-ss-sm-cross {
  position: absolute;
  bottom: 32px; left: 32px;
  width: 40px; height: 40px;
  pointer-events: none;
  transform: translateY(calc(var(--fx3-ss-sy, 0px) * 0.10));
  will-change: transform;
  opacity: 0.4;
}
.fx3-ss-sm-cross::before,
.fx3-ss-sm-cross::after {
  content: '';
  position: absolute;
  background: var(--border, #e5e1d8);
  border-radius: 1px;
}
.fx3-ss-sm-cross::before {
  top: 50%; left: 0;
  width: 100%; height: 1px;
  margin-top: -0.5px;
}
.fx3-ss-sm-cross::after {
  left: 50%; top: 0;
  height: 100%; width: 1px;
  margin-left: -0.5px;
}
@media (prefers-reduced-motion: reduce) {
  .fx3-ss-meter-fill { animation: none; }
  .fx3-ss-hero-layer::before,
  .fx3-ss-hero-layer::after { animation: none; transform: none; }
  .fx3-ss-hero-dots { transform: none; }
  .fx3-ss-section-motif::before,
  .fx3-ss-section-motif::after { animation: none; transform: none; }
  .fx3-ss-sm-cross { transform: none; }
  .fx3-ss-btt-ring { transition: none; }
  .fx3-ss-btt { transition: opacity 0.1s linear; }
}


/* ============================================================
   9. cursor — custom cursor (pointer:fine only)
   ============================================================ */
@media (pointer: fine) {
  html.fxc-active,
  html.fxc-active *:not(input):not(textarea):not([contenteditable]) {
    cursor: none !important;
  }
  .fxc-dot {
    position: fixed;
    top: 0; left: 0;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--primary, #4f46e5);
    pointer-events: none;
    z-index: 99999;
    will-change: transform, opacity;
    transform: translate(-50%, -50%);
    transition:
      opacity 0.15s ease,
      background 0.35s var(--ease, cubic-bezier(.22,1,.36,1));
    filter: blur(0px) drop-shadow(0 0 6px rgba(79, 70, 229, 0.85));
  }
  html.fxc-active .fxc-dot.fxc-hover {
    background: var(--win, #059669);
    filter: blur(0px) drop-shadow(0 0 9px rgba(5, 150, 105, 0.9));
  }
  html.fxc-active .fxc-dot.fxc-hidden { opacity: 0; }
  .fxc-ring {
    position: fixed;
    top: 0; left: 0;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1.5px solid rgba(79, 70, 229, 0.55);
    pointer-events: none;
    z-index: 99998;
    will-change: transform, opacity;
    transform: translate(-50%, -50%);
    transition:
      width 0.45s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)),
      height 0.45s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)),
      border-color 0.4s var(--ease, cubic-bezier(.22,1,.36,1)),
      opacity 0.2s ease,
      background 0.4s var(--ease, cubic-bezier(.22,1,.36,1));
    background: transparent;
  }
  .fxc-ring::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    border: 1px solid transparent;
    border-top-color: rgba(79, 70, 229, 0.35);
    animation: fxc-ring-spin 3s linear infinite;
  }
  html.fxc-active .fxc-ring.fxc-hover {
    width: 58px; height: 58px;
    border-color: rgba(5, 150, 105, 0.55);
    background: rgba(5, 150, 105, 0.06);
  }
  html.fxc-active .fxc-ring.fxc-hover::before {
    border-top-color: rgba(5, 150, 105, 0.45);
    animation-duration: 1.6s;
  }
  html.fxc-active .fxc-ring.fxc-hidden { opacity: 0; }
  .fxc-burst {
    position: fixed;
    top: 0; left: 0;
    width: 48px; height: 48px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 99997;
    border: 1.5px solid rgba(79, 70, 229, 0.7);
    transform: translate(-50%, -50%) scale(0.3);
    opacity: 1;
    animation: fxc-burst-out 0.55s var(--ease, cubic-bezier(.22,1,.36,1)) forwards;
  }
  .fxc-burst.fxc-burst-green { border-color: rgba(5, 150, 105, 0.7); }
}
@keyframes fxc-ring-spin {
  to { transform: rotate(360deg); }
}
@keyframes fxc-burst-out {
  0%   { transform: translate(-50%, -50%) scale(0.3); opacity: 0.9; }
  100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fxc-dot,
  .fxc-ring,
  .fxc-ring::before,
  .fxc-burst {
    animation: none !important;
    transition: none !important;
  }
}


/* ============================================================
   10. footerscene — footer grid floor + particles + border
   (re-namespaced fx3- -> fx3-fs- to avoid collisions)
   ============================================================ */
.cta-band {
  position: relative;
  isolation: isolate;
}
.cta-band::before {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: conic-gradient(from var(--fx3-fs-angle, 0deg), #4f46e5 0%, #059669 22%, #a78bfa 44%, #34d399 66%, #4f46e5 100%);
  opacity: 0.55;
  animation: fx3-fs-border-spin 8s linear infinite;
}
.cta-band::after {
  content: '';
  position: absolute;
  inset: 2px;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: inherit;
}
.cta-band > * { position: relative; z-index: 1; }
@keyframes fx3-fs-border-spin {
  to { --fx3-fs-angle: 360deg; }
}
@property --fx3-fs-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.fx3-fs-cta-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(ellipse 60% 55% at 50% 100%, rgba(79, 70, 229, 0.18) 0%, transparent 70%);
  animation: fx3-fs-glow-breathe 6s var(--ease, ease) infinite alternate;
}
@keyframes fx3-fs-glow-breathe {
  0%   { opacity: 0.4; transform: scaleX(0.92); }
  100% { opacity: 1;   transform: scaleX(1.06); }
}
.site-footer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.fx3-fs-grid-floor {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.fx3-fs-grid-plane {
  position: absolute;
  bottom: 0; left: 50%;
  width: 260%; height: 200%;
  transform-origin: 50% 100%;
  transform: translateX(-50%) perspective(480px) rotateX(72deg);
  background-image:
    linear-gradient(to right, rgba(79,70,229,0.14) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(79,70,229,0.14) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: fx3-fs-grid-scroll 12s linear infinite;
  -webkit-mask-image:
    linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 72%),
    linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
  -webkit-mask-composite: intersect;
  mask-image:
    linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 72%),
    linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
  mask-composite: intersect;
}
@keyframes fx3-fs-grid-scroll {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 60px, 0 60px; }
}
.fx3-fs-grid-plane::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right, rgba(5,150,105,0.10) 1px, transparent 1px);
  background-size: 180px 60px;
  animation: fx3-fs-grid-scroll-slow 24s linear infinite;
}
@keyframes fx3-fs-grid-scroll-slow {
  from { background-position: 0 0; }
  to   { background-position: 0 60px; }
}
.fx3-fs-wave-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 40% at 20% 110%, rgba(79,70,229,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 80% 95%,  rgba(5,150,105,0.09) 0%, transparent 60%);
  animation: fx3-fs-wave-drift 18s var(--ease, ease) infinite alternate;
}
@keyframes fx3-fs-wave-drift {
  0%   { opacity: 0.5; transform: translateX(-4%) scaleY(1); }
  50%  { opacity: 0.9; transform: translateX(2%)  scaleY(1.08); }
  100% { opacity: 0.6; transform: translateX(4%)  scaleY(0.96); }
}
.fx3-fs-particle-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.7;
}
.site-footer .wrap,
.site-footer nav,
.site-footer p,
.site-footer a,
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer .logo {
  position: relative;
  z-index: 1;
}
.fx3-fs-scanline {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to right, transparent 0%, rgba(79,70,229,0.5) 30%, rgba(5,150,105,0.5) 70%, transparent 100%);
  animation: fx3-fs-scanline-move 14s linear infinite;
  top: 0;
  opacity: 0;
}
@keyframes fx3-fs-scanline-move {
  0%   { transform: translateY(0);    opacity: 0; }
  5%   { opacity: 0.7; }
  95%  { opacity: 0.5; }
  100% { transform: translateY(100%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cta-band::before,
  .fx3-fs-cta-glow,
  .fx3-fs-grid-plane,
  .fx3-fs-grid-plane::after,
  .fx3-fs-wave-layer,
  .fx3-fs-scanline {
    animation: none !important;
  }
  .cta-band::before { opacity: 0.25; }
  .fx3-fs-grid-plane { background-position: 0 0; }
  .fx3-fs-wave-layer { opacity: 0.5; }
  .fx3-fs-scanline   { display: none; }
}