/* =========================================================
   WELLSTAR v2 — visual enhancements (icons / motion / mini charts)
   Loaded by every page after ws.css (index.html too).
   ========================================================= */

/* scroll progress */
.fx-progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:70;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,#5a8fc4,#1d3368);pointer-events:none}

/* line icons */
.fx-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#e7f0f8;color:#1d3368;flex:0 0 52px}
.fx-ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.fx-ic svg *{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s cubic-bezier(.3,.6,.2,1)}
.fx-ic.on svg *{stroke-dashoffset:0}
.stp{position:relative}
.stp>.fx-ic{position:absolute;top:26px;right:24px;transition:background .35s,color .35s,transform .35s}
.stp:hover>.fx-ic{background:#1d3368;color:#fff;transform:rotate(-6deg)}
.cd{position:relative}
.cd>.fx-ic{position:absolute;top:24px;right:22px;width:46px;height:46px;flex-basis:46px;transition:background .35s,color .35s}
.cd>.fx-ic svg{width:22px;height:22px}
.cd:hover>.fx-ic{background:#1d3368;color:#fff}
.sub{position:relative}
.sub>.fx-ic{margin-bottom:18px;width:46px;height:46px;flex-basis:46px}
.sub>.fx-ic svg{width:22px;height:22px}
.sub:hover>.fx-ic{background:#1d3368;color:#fff}
.sec.alt .stp>.fx-ic,.alt .cd>.fx-ic,.svc .sub>.fx-ic{background:#e7f0f8}

/* client voice avatars */
.voice .q.fx-av{display:block;width:68px;height:68px;border-radius:50%;overflow:hidden;font-size:0;line-height:0;background:none;box-shadow:0 6px 18px rgba(28,36,48,.08);transform:scale(.85);opacity:0;transition:transform .8s cubic-bezier(.2,.9,.2,1.2),opacity .6s}
.voice .q.fx-av svg{width:100%;height:100%;display:block}
.voice.on .q.fx-av{transform:none;opacity:1}
.voice h3{margin-top:20px}

/* flow: connecting dots between steps + scroll bar */
.track{position:relative}
.stp::after{content:"";position:absolute;right:-17px;top:50px;width:16px;height:1px;background:#cfd8e3}
.stp:last-child::after{display:none}
.trackbar{max-width:var(--max,1360px);margin:26px auto 0;padding:0 var(--gut,40px)}
.trackbar>div{height:2px;background:#dfe6ee;border-radius:2px;overflow:hidden}
.trackbar i{display:block;height:100%;width:30%;background:#1d3368;border-radius:2px;transform-origin:left;transition:transform .2s}

/* section title letter rise */
.st .e .ch{display:inline-block;opacity:0;transform:translateY(60%);transition:opacity .7s cubic-bezier(.2,.7,.1,1),transform .9s cubic-bezier(.2,.7,.1,1)}
.st .e .sp{display:inline-block;width:.28em}
.st.on .e .ch,.st.fx-in .e .ch{opacity:1;transform:none}

/* image reveal (clip only, no transform: safe with parallax) */
.fx-imr img{clip-path:inset(0 0 100% 0);transition:clip-path 1.3s cubic-bezier(.7,0,.2,1)}
.fx-imr.fx-in img{clip-path:inset(0 0 0 0)}

/* FAQ open motion */
.faq details[open] .a{animation:fxDown .45s cubic-bezier(.2,.7,.1,1)}
@keyframes fxDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* index: metric mini charts */
.m .fx-mini{display:block;width:100%;height:58px;margin-top:18px;overflow:visible}
.m .fx-mini *{vector-effect:non-scaling-stroke}
.fx-mini .grow{transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);transition:transform .9s cubic-bezier(.2,.7,.1,1)}
.fx-mini .draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s cubic-bezier(.3,.6,.2,1)}
.fx-mini .pop{opacity:0;transition:opacity .4s 1.1s}
.fx-mini .needle{transform-origin:50px 50px;transform:rotate(-80deg);transition:transform 1.6s cubic-bezier(.2,.9,.2,1.1)}
.m.on .fx-mini .grow{transform:scaleY(1)}
.m.on .fx-mini .draw{stroke-dashoffset:0}
.m.on .fx-mini .pop{opacity:1}
.m.on .fx-mini .needle{transform:rotate(38deg)}

/* index: area route card */
.fx-route{position:absolute;left:clamp(16px,3vw,40px);top:clamp(16px,3vw,40px);z-index:2;width:min(420px,calc(100% - 32px));background:rgba(255,255,255,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:22px;padding:18px 22px 14px;box-shadow:0 14px 40px rgba(28,36,48,.12)}
.fx-route .cap{display:flex;justify-content:space-between;font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.12em;color:#4a5566}
.fx-route svg{width:100%;height:auto;display:block;margin-top:8px;overflow:visible}
.fx-route .rt{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2s cubic-bezier(.3,.6,.2,1)}
.fx-route.fx-in .rt{stroke-dashoffset:0}
.fx-route .hub{opacity:0;transition:opacity .5s}
.fx-route.fx-in .hub{opacity:1}
.fx-route.fx-in .hub.h2{transition-delay:.8s}.fx-route.fx-in .hub.h3{transition-delay:1.5s}
.fx-route .pulse{transform-box:fill-box;transform-origin:center;animation:fxPulse 2.4s ease-out infinite}
@keyframes fxPulse{0%{transform:scale(.6);opacity:.55}100%{transform:scale(2.6);opacity:0}}

/* numbers: underline bar fill */
.num .it,.nums .it{position:relative}
.num .it .fx-bar,.nums .it .fx-bar{display:block;height:2px;background:rgba(45,95,154,.14);margin-top:18px;max-width:180px;overflow:hidden;border-radius:2px}
.fx-bar i{display:block;height:100%;width:100%;background:#5a8fc4;transform:scaleX(0);transform-origin:left;transition:transform 1.4s .3s cubic-bezier(.2,.7,.1,1)}
.on .fx-bar i{transform:scaleX(1)}

@media (max-width:640px){
  .stp>.fx-ic{top:22px;right:20px;width:46px;height:46px}
  .fx-route{left:10px;top:10px;width:calc(100% - 20px);padding:10px 14px 6px;border-radius:16px}
  .fx-route .cap{font-size:10px}
}
@media (prefers-reduced-motion:reduce){
  .fx-ic svg *,.fx-mini .draw{stroke-dashoffset:0}
  .fx-mini .grow{transform:none}.fx-mini .pop{opacity:1}.fx-mini .needle{transform:rotate(38deg)}
  .st .e .ch{opacity:1;transform:none}
  .fx-imr img{clip-path:none}
  .fx-route .rt{stroke-dashoffset:0}.fx-route .hub{opacity:1}.fx-route .pulse{animation:none}
  .fx-bar i{transform:none}
  .fx-progress{display:none}
}

/* ---------- carried-over illustrations ---------- */
.ill{border-radius:18px;overflow:hidden;background:#eef3f8}
.ill img{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .9s ease,transform 1.2s cubic-bezier(.2,.7,.1,1)}
.ill.on img{opacity:1;transform:none}
.stp.has-ill{padding-top:18px}
.stp.has-ill>.ill{aspect-ratio:4/3;margin:0 -8px 18px}
.stp.has-ill .n{font-size:44px}
.cd.has-ill>.ill{aspect-ratio:4/3;margin:-8px -6px 20px}
.sub.has-ill>.ill{aspect-ratio:4/3;margin:-8px -6px 18px;border-radius:16px}
.sub.has-ill{padding-top:22px}
.faq summary .ill-q{width:52px;height:52px;border-radius:50%;overflow:hidden;background:#eef3f8;display:block;font-size:0}
.faq summary .ill-q img{width:100%;height:100%;object-fit:cover;transform:scale(1.35)}
.faq summary:has(.ill-q){grid-template-columns:52px 1fr 36px;gap:18px}
.ill-checks{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px}
.concerns .ill-checks{grid-template-columns:repeat(4,minmax(0,1fr))!important}
@media (max-width:1000px){.concerns .ill-checks{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
.ill-checks li{background:#f3f6f9;padding:0 0 22px;border-radius:20px;overflow:hidden;box-shadow:0 1px 0 #e2e7ee}
.ill-checks li::before,.ill-checks li::after{display:none}
.ill-checks li .ill{border-radius:0;aspect-ratio:4/3;margin-bottom:16px}
.ill-checks li>.phrase{display:block;padding:0 20px;font-size:14.5px}
.split .ph.ill-ph{background:#eef3f8;aspect-ratio:4/3;border-radius:28px}
.split .ph.ill-ph img{object-fit:contain}
.ai-ill{max-width:460px;margin:28px auto 0;border-radius:22px;background:#fff}
.ai-ill img{object-fit:contain}
.shindan-ill{max-width:560px;margin:0 auto 10px;border-radius:24px;aspect-ratio:16/9;background:#fff}
.shindan-ill img{object-fit:contain}
.voice .q.fx-av.photo{background:#fff;box-shadow:0 6px 18px rgba(28,36,48,.08)}
.voice .q.fx-av.photo img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}
@media (max-width:640px){
  .ill-checks{grid-template-columns:minmax(0,1fr)!important}
  .faq summary:has(.ill-q){grid-template-columns:44px 1fr 32px;gap:12px}
  .faq summary .ill-q{width:44px;height:44px}
  .shindan-ill{aspect-ratio:16/9;padding:0}
}