/* Hero .hx animation (shared, from homepage) */
/* ===== Hero: Dokument-zu-Workflow-Transformation ===== */
      .hx-wrap{display:flex;flex-direction:column;align-items:center;width:100%;max-width:530px;margin:0 auto}
.hx{position:relative;display:flex;align-items:center;gap:0;width:100%}
.hx__doc{position:relative;flex:0 0 148px;height:238px;background:#fff;border-radius:12px;box-shadow:0 22px 50px rgba(0,0,0,.32);padding:18px 16px;overflow:hidden}
.hx__tag{display:inline-block;font-family:monospace;font-weight:700;font-size:11px;color:#C25A12;background:#fdf0e3;border-radius:5px;padding:4px 7px;margin-bottom:15px}
.hx__line{display:block;height:8px;border-radius:4px;background:#e6e8ef;margin-bottom:12px}
.hx__line.l1{width:82%}
.hx__line.l2{width:63%}
.hx__line.l3{width:74%}
.hx__line.l4{width:55%}
.hx__line.l5{width:68%}
.hx__beam{position:absolute;left:0;right:0;top:-30px;height:30px;background:linear-gradient(180deg,rgba(238,123,27,0),rgba(238,123,27,.4),rgba(238,123,27,0));box-shadow:0 0 20px rgba(238,123,27,.55);animation:hxbeam 7s ease-in-out infinite}
@keyframes hxbeam{0%{top:-30px;opacity:0}4%{opacity:1}40%{top:238px;opacity:1}48%{opacity:0}100%{opacity:0}}
.hx__arrow{position:relative;flex:0 0 66px;display:flex;align-items:center;justify-content:center;padding:0 6px;align-self:center}
.hx__arrow svg{width:100%;filter:drop-shadow(0 0 6px rgba(238,123,27,.45));animation:hxarrow 1.8s ease-in-out infinite}
@keyframes hxarrow{0%,100%{transform:translateX(-3px);opacity:.6}50%{transform:translateX(3px);opacity:1}}
.hx__win{flex:1;min-width:0;height:238px;background:#fff;border-radius:12px;box-shadow:0 22px 50px rgba(0,0,0,.32);overflow:hidden;display:flex;flex-direction:column}
.hx__wbar{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid #eef0f5;background:#f7f8fb}
.hx__wdot{width:8px;height:8px;border-radius:50%;background:#d7dae4}
.hx__wdot.r{background:#f0a49f}
.hx__wdot.y{background:#f2ce8b}
.hx__wdot.g{background:#a6d8b9}
.hx__wurl{margin-left:8px;flex:1;background:#fff;border:1px solid #e6e8ef;border-radius:6px;font-family:monospace;font-size:10.5px;color:#9096a6;padding:3px 9px}
.hx__wbody{padding:13px 15px;display:flex;flex-direction:column;gap:9px}
.hx__wtitle{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;color:var(--flq-navy-900);font-size:13px}
.hx__wlive{width:8px;height:8px;border-radius:50%;background:#3eb87f;animation:hxlive 2s ease infinite}
@keyframes hxlive{0%,100%{box-shadow:0 0 0 0 rgba(62,184,127,.4)}50%{box-shadow:0 0 0 5px rgba(62,184,127,0)}}
.hx__wsteps{display:flex;align-items:center;gap:5px}
.hx__wsteps i{height:4px;flex:1;border-radius:2px;background:#e6e8ef}
.hx__wsteps i.s1{animation:hxstep 7s ease infinite;animation-delay:1.3s}
.hx__wsteps i.s2{animation:hxstep 7s ease infinite;animation-delay:2.1s}
.hx__wsteps i.s3{animation:hxstep 7s ease infinite;animation-delay:2.9s}
@keyframes hxstep{0%,15%{background:#e6e8ef}26%{background:var(--accent)}90%{background:var(--accent)}97%,100%{background:#e6e8ef}}
.hx__field{display:flex;flex-direction:column;gap:5px;background:#f4f6fa;border:1px solid #eceef4;border-radius:8px;padding:7px 11px;opacity:0;animation:hxfield 7s ease infinite}
.hx__field.f1{animation-delay:1.7s}
.hx__field.f2{animation-delay:2.3s}
.hx__field.f3{animation-delay:2.9s}
.hx__fl{height:6px;width:38%;border-radius:3px;background:#c6cbd8}
.hx__fv{height:9px;width:70%;border-radius:4px;background:var(--flq-navy-900)}
@keyframes hxfield{0%,20%{opacity:0;transform:translateX(12px)}32%{opacity:1;transform:none}90%{opacity:1}97%,100%{opacity:0}}
.hx__wbtn{align-self:flex-start;background:var(--accent);color:#fff;font-size:11px;font-weight:700;border-radius:6px;padding:6px 15px;opacity:0;animation:hxbtn 7s ease infinite;animation-delay:3.5s}
@keyframes hxbtn{0%,22%{opacity:0;transform:translateY(6px)}36%{opacity:1;transform:none}90%{opacity:1}97%,100%{opacity:0}}
.hx__cap{display:block;text-align:center;color:rgba(255,255,255,.72);font-size:13px;margin-top:16px}

/* responsive + thematic variants for solution heroes */
@media (max-width:900px){ .hx-wrap{max-width:440px} }
.hx__sign{position:relative;height:46px;border:1px dashed #c9cee0;border-radius:8px;background:#f9fafd;display:flex;align-items:center;justify-content:center;overflow:hidden;opacity:0;animation:hxfield 7s ease infinite;animation-delay:2.3s}
.hx__sign svg{width:72%;height:auto}
.hx__sigpath{fill:none;stroke:var(--flq-navy-900);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:520;stroke-dashoffset:520;animation:hxsign 7s ease infinite}
@keyframes hxsign{0%,32%{stroke-dashoffset:520}58%,90%{stroke-dashoffset:0}97%,100%{stroke-dashoffset:520}}
.hx__rowlist{display:flex;flex-direction:column;gap:7px}
.hx__row{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#f4f6fa;border:1px solid #eceef4;border-radius:8px;padding:8px 10px;opacity:0;animation:hxfield 7s ease infinite}
.hx__row.r2{animation-delay:1.4s}
.hx__row.r3{animation-delay:2.6s}
.hx__rname{height:6px;width:46%;border-radius:3px;background:#c6cbd8}
.hx__pill{font-size:9px;font-weight:700;padding:2px 8px;border-radius:20px;background:#e7f7ef;color:#2f9e6a;white-space:nowrap}
.hx__pill--p{background:#fdecd9;color:#c25a12}