/* ==========================================================================
   Catenix: cinematic-premium enhancement layer (additive, CSP-safe)
   Namespaced under .fx-* so it never collides with brand.css / the .reveal system.
   All motion is gated behind (prefers-reduced-motion: no-preference) and the
   .fx-on class that enhance.js adds only when it is safe to animate.
   ========================================================================== */

/* Scroll-reveal: elements rise + fade + de-blur as they enter the viewport.
   Hidden state applies ONLY when JS is active and motion is allowed, so with
   JS off or reduced-motion the content is always fully visible. */
.fx-on .fx-reveal{
  opacity:0;
  transform:translate3d(0,22px,0);
  filter:blur(6px);
  will-change:opacity,transform,filter;
  transition:opacity .9s cubic-bezier(.16,1,.3,1),
             transform .9s cubic-bezier(.16,1,.3,1),
             filter .9s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--fx-d,0ms);
}
.fx-on .fx-reveal.is-in{opacity:1;transform:none;filter:none;}

/* Parallax targets: JS writes --fx-y; we translate on the compositor only. */
.fx-on .fx-parallax{will-change:transform;transform:translate3d(0,var(--fx-y,0),0);}

/* Pointer tilt for premium cards; JS writes --fx-rx / --fx-ry. */
.fx-on .fx-tilt{
  transform:perspective(900px) rotateX(var(--fx-rx,0deg)) rotateY(var(--fx-ry,0deg));
  transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease;
  transform-style:preserve-3d;
}

/* Hero atmosphere: a slow-breathing luminous aura sitting behind hero content. */
.fx-hero-aura{
  position:absolute;inset:-10% -5% auto -5%;height:120%;
  pointer-events:none;z-index:0;
  background:
    radial-gradient(42% 55% at 72% 30%, rgba(90,170,255,.20), transparent 62%),
    radial-gradient(38% 48% at 22% 68%, rgba(87,168,162,.16), transparent 60%);
  filter:blur(8px);opacity:.9;
}
.fx-on .fx-hero-aura{animation:fxAura 14s ease-in-out infinite alternate;}
@keyframes fxAura{
  0%{transform:translate3d(0,0,0) scale(1);opacity:.75;}
  100%{transform:translate3d(0,-2.2%,0) scale(1.06);opacity:1;}
}

/* Cinematic 3D hero art: a realistic render layered as depth, with a scrim so
   copy stays legible. Sits above the aura, below the text/product shot. */
.fx-hero-art{
  position:absolute;top:0;right:0;width:min(66%,1000px);height:100%;
  pointer-events:none;z-index:1;
  -webkit-mask-image:linear-gradient(to left, #000 50%, transparent 100%);
          mask-image:linear-gradient(to left, #000 50%, transparent 100%);
  opacity:.96;
}
.fx-hero-art img{width:100%;height:100%;object-fit:cover;object-position:center right;display:block;}
@media (max-width:1180px){.fx-hero-art{opacity:.6;width:52%;}}
@media (max-width:900px){.fx-hero-art{display:none;}}

/* Make the hero render feel alive: a slow premium light-sweep crossing it,
   as if data is catching the light. Independent of the parallax transform. */
.fx-hero-art::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(115deg,
    transparent 34%, rgba(255,255,255,.30) 47%,
    rgba(150,205,255,.22) 52%, transparent 66%);
  transform:translateX(-130%);
  mix-blend-mode:screen;opacity:0;
}
.fx-on .fx-hero-art::after{animation:fxSweep 9s cubic-bezier(.4,0,.2,1) 2s infinite;}
@keyframes fxSweep{
  0%{transform:translateX(-130%);opacity:0;}
  8%{opacity:1;}
  26%{transform:translateX(130%);opacity:1;}
  27%,100%{transform:translateX(130%);opacity:0;}
}
@media (prefers-reduced-motion: reduce){.fx-on .fx-hero-art::after{animation:none !important;opacity:0 !important;}}

/* Section photo-scene retired: it read as a busy background, not animation. */
.fx-scene{display:none !important;}
.section--dark{position:relative;}
.section--dark > .container{position:relative;z-index:2;}
@media (prefers-reduced-motion: reduce){.fx-on .fx-scene img{animation:none !important;}}

/* Keep hero copy above the atmospheric layers. */
.hero,.page-hero{position:relative;}
.hero > .container,.page-hero > .container{position:relative;z-index:2;}

/* Animated "data thread": a hairline that draws itself, echoing the product. */
.fx-thread{position:relative;}
.fx-on .fx-thread path{
  stroke-dasharray:var(--fx-len,600);
  stroke-dashoffset:var(--fx-len,600);
  animation:fxDraw 2.6s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes fxDraw{to{stroke-dashoffset:0;}}

/* Soft lift + luminous ring on interactive cards when tilt is active. */
.fx-on .fx-tilt:hover{box-shadow:0 26px 60px -28px rgba(0,16,70,.55);}

/* ==========================================================================
   Solution animation: analyser -> Catenix -> patient record data-flow.
   CSS-only (no inline JS), namespaced .fx-flow*, static + legible with
   motion off. This is the "universal translator" pitch, animated.
   ========================================================================== */
.fx-flow-band{padding:92px 40px;background:linear-gradient(180deg,#f7f9fc 0%,#eaf0f8 100%);border-top:1px solid #e4ebf5;}
.fx-flow-band .fx-flow-head{max-width:620px;}
.fx-flow{--wire:#cdd9ec;--glow:#2f6bff;--teal:#57a8a2;
  display:grid;grid-template-columns:1fr 1.15fr 1fr 1.15fr 1fr;align-items:center;
  max-width:1000px;margin:52px auto 0;}
.fx-flow-stage{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;}
.fx-node{position:relative;width:118px;height:118px;border-radius:24px;background:#fff;
  border:1px solid var(--wire);box-shadow:0 18px 44px -26px rgba(0,16,70,.45);
  display:flex;align-items:center;justify-content:center;color:#001046;}
.fx-node svg{width:50px;height:50px;color:#2f6bff;}
.fx-node-hub{width:138px;height:138px;border:none;color:#fff;
  background:radial-gradient(120% 120% at 30% 20%,#0a2170 0%,#001046 70%);
  box-shadow:0 24px 54px -22px rgba(0,16,70,.7);font-weight:800;letter-spacing:.02em;font-size:15px;}
.fx-node-record{flex-direction:column;gap:7px;padding:16px;align-items:stretch;}
.fx-row{height:9px;border-radius:3px;background:linear-gradient(90deg,#e3ebf7,#cdd9ec);}
.fx-proto{font-family:var(--sans,'Inter',sans-serif);font-size:11px;letter-spacing:.07em;
  text-transform:uppercase;color:#5a6478;font-weight:600;}
.fx-flow-wire{position:relative;height:3px;width:100%;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--wire) 20%,var(--wire) 80%,transparent);}
.fx-packet{position:absolute;top:50%;left:8%;width:13px;height:13px;border-radius:50%;
  background:radial-gradient(circle,#fff 20%,var(--glow) 75%);
  box-shadow:0 0 16px 4px rgba(47,107,255,.75);transform:translate(-50%,-50%);}

/* motion (only when .fx-on and motion allowed) */
.fx-on .fx-packet{animation:fxPacket 2.8s cubic-bezier(.55,0,.45,1) infinite;}
.fx-on .fx-packet.fx-packet-2{animation-delay:1.4s;}
@keyframes fxPacket{0%{left:6%;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:94%;opacity:0}}
.fx-on .fx-node-hub{animation:fxHub 2.8s ease-in-out infinite;}
@keyframes fxHub{0%,100%{box-shadow:0 0 0 0 rgba(47,107,255,0),0 24px 54px -22px rgba(0,16,70,.7)}
  50%{box-shadow:0 0 0 12px rgba(47,107,255,.12),0 24px 54px -22px rgba(0,16,70,.7)}}
.fx-on .fx-node-record .fx-row{animation:fxRow 2.8s ease-in-out infinite;}
.fx-on .fx-node-record .fx-row:nth-child(2){animation-delay:.16s;}
.fx-on .fx-node-record .fx-row:nth-child(3){animation-delay:.32s;}
@keyframes fxRow{0%,42%{opacity:.4;transform:translateX(5px)}
  58%{opacity:1;background:linear-gradient(90deg,var(--teal),#8fd3cd);transform:none}
  100%{opacity:.4;transform:translateX(5px)}}

/* Interactive controls: device switcher + running time-saved counter. */
.fx-chip{display:inline-block;margin-top:3px;font-family:var(--sans,'Inter',sans-serif);
  font-size:10.5px;font-weight:700;letter-spacing:.05em;padding:3px 10px;border-radius:999px;
  background:#e7eefb;color:#2f6bff;}
.fx-node-hub + .fx-proto,#fx-xlate{font-variant-numeric:tabular-nums;}
.fx-flow-controls{display:flex;align-items:center;justify-content:center;gap:20px;
  margin:36px auto 0;flex-wrap:wrap;text-align:center;}
.fx-switch{font-family:var(--sans,'Inter',sans-serif);font-size:14px;font-weight:600;
  color:#001046;background:#fff;border:1px solid #cdd9ec;border-radius:999px;padding:11px 24px;
  cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;}
.fx-switch:hover{border-color:#2f6bff;box-shadow:0 10px 24px -12px rgba(47,107,255,.6);transform:translateY(-1px);}
.fx-switch:focus-visible{outline:2px solid #2f6bff;outline-offset:2px;}
.fx-saved{font-family:var(--sans,'Inter',sans-serif);font-size:13.5px;color:#5a6478;}
.fx-saved b{color:#57a8a2;font-size:18px;font-weight:800;font-variant-numeric:tabular-nums;}
.fx-node-record.fx-pop{animation:fxPop .5s ease;}
@keyframes fxPop{0%{transform:scale(1)}42%{transform:scale(1.05)}100%{transform:scale(1)}}

/* ===== Pricing tier cards + reassurance triplet ===== */
.fx-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1040px;margin:0 auto;}
.fx-tier{position:relative;background:#fff;border:1px solid var(--hairline,#e4ebf5);border-radius:20px;
  padding:32px 26px;display:flex;flex-direction:column;box-shadow:0 18px 44px -30px rgba(0,16,70,.4);
  transition:transform .25s ease,box-shadow .25s ease;}
.fx-tier:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(0,16,70,.5);}
.fx-tier h3{font-family:var(--sans,'Inter',sans-serif);font-size:20px;margin:0 0 5px;color:#001046;font-weight:700;}
.fx-tier .fx-tier-for{font-size:13px;color:#5a6478;margin:0 0 20px;min-height:36px;line-height:1.45;}
.fx-tier ul{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:10px;flex:1;}
.fx-tier li{font-size:13.5px;color:#2a2f3a;padding-left:26px;position:relative;line-height:1.45;}
.fx-tier li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#57a8a2 0 38%,transparent 40%),#eaf5f3;}
.fx-tier .btn{width:100%;justify-content:center;}
.fx-tier-featured{border-color:#2f6bff;box-shadow:0 26px 62px -26px rgba(47,107,255,.55);}
.fx-tier-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:#001046;color:#fff;
  font-family:var(--sans,'Inter',sans-serif);font-size:10.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;padding:5px 15px;border-radius:999px;white-space:nowrap;}
.fx-reassure{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:940px;margin:48px auto 0;}
.fx-reassure div{text-align:center;padding:8px;}
.fx-reassure h4{font-family:var(--sans,'Inter',sans-serif);font-size:15.5px;color:#001046;margin:0 0 7px;font-weight:700;}
.fx-reassure p{font-size:13px;color:#5a6478;margin:0;line-height:1.55;}
@media (max-width:820px){.fx-tiers,.fx-reassure{grid-template-columns:1fr;}}

/* ===== Integrations logo grid ===== */
.fx-integrations-band{padding:82px 40px;background:#fff;border-top:1px solid #eef2f8;}
.fx-logos{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;max-width:1040px;margin:0 auto;}
.fx-logo{display:flex;align-items:center;justify-content:center;min-height:76px;padding:14px;border-radius:14px;
  border:1px solid var(--hairline,#e4ebf5);background:#fbfcfe;color:#1f2a44;text-decoration:none;
  font-family:var(--sans,'Inter',sans-serif);font-weight:700;font-size:15px;text-align:center;line-height:1.2;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;}
.fx-logo:hover{border-color:#2f6bff;box-shadow:0 14px 30px -18px rgba(47,107,255,.5);transform:translateY(-2px);color:#001046;}
.fx-logos-note{text-align:center;margin:28px auto 0;font-size:14px;color:#5a6478;max-width:640px;line-height:1.6;}
.fx-logos-note a{color:#2f6bff;font-weight:600;}
@media (max-width:820px){.fx-logos{grid-template-columns:repeat(2,1fr);}}
@media (min-width:821px) and (max-width:1100px){.fx-logos{grid-template-columns:repeat(3,1fr);}}

/* ===== Pricing ROI / cost-of-manual-entry estimator ===== */
/* the stage gives the panel somewhere to tilt into */
.fx-roi-stage{perspective:1500px;perspective-origin:50% 45%;}
.fx-roi{color:#fff;border-radius:24px;padding:46px;max-width:1000px;margin:0 auto;position:relative;
  background:radial-gradient(120% 140% at 15% 10%,rgba(12,38,120,.80) 0%,rgba(0,16,70,.93) 68%),
    url('/assets/roi-panel-bg.webp') center/cover no-repeat,#001046;
  box-shadow:0 44px 96px -38px rgba(0,8,40,.9),0 12px 28px -18px rgba(0,8,40,.7);
  transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.22,.61,.36,1),box-shadow .5s cubic-bezier(.22,.61,.36,1);}
/* rim light: a lit top edge and a hairline all round, so it reads as a solid object */
.fx-roi::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.07);}
/* a soft highlight that follows the cursor, set by fx-roi.js */
.fx-roi::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .4s ease;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(143,211,205,.13),transparent 70%);}
.fx-roi.is-live::after{opacity:1;}
.fx-roi.is-live{box-shadow:0 56px 110px -38px rgba(0,8,40,.95),0 14px 30px -18px rgba(0,8,40,.75);}
/* layered depth: the answer floats furthest forward */
.fx-roi-top{transform:translateZ(22px);}
.fx-roi-inputs{transform:translateZ(12px);}
.fx-roi-out{transform:translateZ(40px);}
@media (prefers-reduced-motion:reduce){
  .fx-roi,.fx-roi-top,.fx-roi-inputs,.fx-roi-out{transform:none;transition:none;}
}
.fx-roi .eyebrow{color:#8fd3cd;}
.fx-roi h2{color:#fff;margin:6px 0 10px;}
.fx-roi-head{max-width:600px;}
.fx-roi-head p{color:#b9c4dd;font-size:15px;line-height:1.6;margin:0;}
.fx-roi-top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;}

/* currency switcher: locale then IP sets it, a click overrides and is remembered */
.fx-roi-cur{display:flex;gap:6px;flex-shrink:0;padding:4px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);}
.fx-roi-cur button{font-family:var(--sans,'Inter',sans-serif);font-size:15px;line-height:1;
  color:#b9c4dd;background:none;border:0;border-radius:999px;width:38px;height:34px;cursor:pointer;
  transition:background .15s ease,color .15s ease;}
.fx-roi-cur button:hover{color:#fff;background:rgba(255,255,255,.08);}
.fx-roi-cur button[aria-pressed="true"]{background:#57a8a2;color:#04122e;font-weight:700;}
.fx-roi-cur button:focus-visible{outline:2px solid #8fd3cd;outline-offset:2px;}

.fx-roi-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:30px;align-items:start;}
.fx-roi-inputs{display:flex;flex-direction:column;gap:22px;}

.fx-roi-presets{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.fx-roi-presets-lbl{font-family:var(--sans,'Inter',sans-serif);font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:#8092b8;}
.fx-roi-presets button{font-family:var(--sans,'Inter',sans-serif);font-size:12.5px;color:#b9c4dd;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:999px;
  padding:6px 13px;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease;}
.fx-roi-presets button:hover{border-color:#57a8a2;color:#fff;}
.fx-roi-presets button[aria-pressed="true"]{background:rgba(87,168,162,.22);border-color:#57a8a2;color:#fff;}
.fx-roi-presets button:focus-visible{outline:2px solid #8fd3cd;outline-offset:2px;}

.fx-roi-field{display:flex;flex-direction:column;gap:10px;}
.fx-roi-row{display:flex;justify-content:space-between;align-items:center;gap:14px;}
.fx-roi-row label{font-family:var(--sans,'Inter',sans-serif);font-size:14px;color:#cdd9ec;}
.fx-roi-row input[type="number"]{width:92px;padding:9px 11px;border-radius:10px;border:1px solid #2a3d6b;
  background:#08163a;color:#fff;font-size:15px;font-family:var(--sans,'Inter',sans-serif);
  text-align:right;font-variant-numeric:tabular-nums;}
.fx-roi-row input[type="number"]:focus{outline:none;border-color:#57a8a2;box-shadow:0 0 0 3px rgba(87,168,162,.2);}

/* slider: --fill is set by fx-roi.js so the track shows progress */
.fx-roi-field input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:5px;
  border-radius:999px;cursor:pointer;background:linear-gradient(to right,#57a8a2 0 var(--fill,50%),
  rgba(255,255,255,.13) var(--fill,50%) 100%);}
.fx-roi-field input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:17px;height:17px;border-radius:50%;background:#fff;border:3px solid #57a8a2;cursor:grab;
  box-shadow:0 2px 6px rgba(0,0,0,.35);}
.fx-roi-field input[type="range"]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;
  background:#fff;border:3px solid #57a8a2;cursor:grab;box-shadow:0 2px 6px rgba(0,0,0,.35);}
.fx-roi-field input[type="range"]::-moz-range-track{background:transparent;}
.fx-roi-field input[type="range"]:active::-webkit-slider-thumb{cursor:grabbing;transform:scale(1.1);}

.fx-roi-out{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);border-radius:18px;
  padding:30px 28px;display:flex;flex-direction:column;gap:20px;text-align:center;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 26px 54px -26px rgba(0,6,32,.85),inset 0 1px 0 rgba(255,255,255,.16);}
.fx-roi-hero{display:flex;flex-direction:column;}
.fx-roi-num{font-family:var(--serif,'Fraunces',Georgia,serif);font-size:clamp(38px,5vw,52px);font-weight:700;
  color:#fff;line-height:1;font-variant-numeric:tabular-nums;}
.fx-roi-year{color:#8fd3cd;}
.fx-roi-split{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding-top:18px;
  border-top:1px solid rgba(255,255,255,.11);}
.fx-roi-split > div{display:flex;flex-direction:column;}
.fx-roi-sub{font-family:var(--serif,'Fraunces',Georgia,serif);font-size:25px;font-weight:700;color:#fff;
  line-height:1;font-variant-numeric:tabular-nums;}
.fx-roi-lbl{font-family:var(--sans,'Inter',sans-serif);font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:#9bb1d3;margin-top:7px;}
.fx-roi-days{font-family:var(--sans,'Inter',sans-serif);font-size:13.5px;color:#b9c4dd;margin:0;line-height:1.5;}
.fx-roi-days strong{color:#fff;font-weight:600;}

/* optional factors: collapsed by default, all zero so nothing is assumed */
.fx-roi-more{border-top:1px solid rgba(255,255,255,.11);padding-top:16px;}
.fx-roi-more summary{font-family:var(--sans,'Inter',sans-serif);font-size:13.5px;color:#8fd3cd;
  cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;}
.fx-roi-more summary::-webkit-details-marker{display:none;}
.fx-roi-more summary::before{content:"+";font-size:16px;line-height:1;width:18px;height:18px;flex:0 0 18px;
  border:1px solid rgba(143,211,205,.5);border-radius:50%;display:flex;align-items:center;justify-content:center;}
.fx-roi-more[open] summary::before{content:"\2212";}
.fx-roi-more summary:hover{color:#fff;}
.fx-roi-more summary:focus-visible{outline:2px solid #8fd3cd;outline-offset:3px;border-radius:4px;}
.fx-roi-more-body{display:flex;flex-direction:column;gap:12px;margin-top:16px;}
.fx-roi-more-note{font-family:var(--sans,'Inter',sans-serif);font-size:12.5px;color:#8092b8;margin:0;line-height:1.55;}
.fx-roi-more-note button{font:inherit;color:#8fd3cd;background:none;border:0;padding:0;cursor:pointer;
  text-decoration:underline;text-underline-offset:2px;}
.fx-roi-more-note button:hover{color:#fff;}
.fx-roi-check{display:flex;align-items:center;gap:9px;font-family:var(--sans,'Inter',sans-serif);
  font-size:13.5px;color:#cdd9ec;cursor:pointer;margin-top:2px;}
.fx-roi-check input{width:16px;height:16px;accent-color:#57a8a2;cursor:pointer;}

/* where the money goes, shown only once an optional factor is in play */
.fx-roi-break-wrap{padding-top:16px;border-top:1px solid rgba(255,255,255,.11);}
.fx-roi-break-wrap .fx-roi-lbl{margin:0 0 12px;display:block;}
.fx-roi-break{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.fx-roi-break li{display:flex;justify-content:space-between;gap:12px;
  font-family:var(--sans,'Inter',sans-serif);font-size:13px;color:#9bb1d3;}
.fx-roi-break li span:last-child{color:#fff;font-variant-numeric:tabular-nums;}

/* announced to screen readers once the numbers settle, so the animation
   does not fire an update on every frame */
.fx-roi-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap;}
/* base .btn is a dark navy gradient, which disappears against this dark panel */
.fx-roi-out .btn{margin-top:2px;width:100%;justify-content:center;font-weight:600;
  background:var(--teal-bright,#8fd3cd);color:var(--ink-deep,#001046);
  box-shadow:0 12px 28px -12px rgba(143,211,205,.55),inset 0 1px 0 rgba(255,255,255,.3);}
.fx-roi-out .btn:hover{background:#fff;color:var(--ink-deep,#001046);}
.fx-roi-note{font-size:12px;color:#93a0c0;text-align:center;margin:26px auto 0;max-width:660px;line-height:1.55;}

@media (max-width:760px){
  .fx-roi{padding:30px 22px;}
  .fx-roi-top{flex-direction:column;align-items:stretch;gap:18px;}
  .fx-roi-cur{align-self:flex-start;}
  .fx-roi-grid{grid-template-columns:1fr;gap:28px;}
}

@media (max-width:760px){
  .fx-flow{grid-template-columns:1fr;justify-items:center;gap:8px;max-width:220px;}
  .fx-flow-wire{width:3px;height:38px;
    background:linear-gradient(180deg,transparent,var(--wire) 20%,var(--wire) 80%,transparent);}
  .fx-on .fx-packet{animation:fxPacketV 2.8s cubic-bezier(.55,0,.45,1) infinite;}
  @keyframes fxPacketV{0%{top:6%;left:50%;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:94%;left:50%;opacity:0}}
}
@media (prefers-reduced-motion: reduce){
  .fx-on .fx-packet{animation:none !important;left:50%;opacity:.9;}
  .fx-on .fx-node-hub,.fx-on .fx-node-record .fx-row{animation:none !important;}
  .fx-on .fx-node-record .fx-row:nth-child(2){opacity:1;background:linear-gradient(90deg,var(--teal),#8fd3cd);}
}

/* Full accessibility + no-JS safety: never hide or move anything. */
@media (prefers-reduced-motion: reduce){
  .fx-on .fx-reveal,
  .fx-on .fx-reveal.is-in{opacity:1 !important;transform:none !important;filter:none !important;transition:none !important;}
  .fx-on .fx-parallax{transform:none !important;}
  .fx-on .fx-tilt{transform:none !important;}
  .fx-on .fx-hero-aura{animation:none !important;}
  .fx-on .fx-thread path{animation:none !important;stroke-dashoffset:0 !important;}
}