/* Forex VPS: latency ticker, MT flow, 24h uptime bars, Windows VPS alternative */
:root{--mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace}

/* ticker */
.fx-tick{margin:0;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);padding:22px 24px 18px}
.fx-tick__head{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center;margin-bottom:6px}
.fx-live{display:inline-flex;align-items:center;gap:8px;font:600 14px var(--body);color:#fff}
.fx-live i{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 4px rgba(74,222,128,.18)}
.hp-mo .fx-live i{animation:fx-pulse 1.6s ease-in-out infinite}
@keyframes fx-pulse{50%{opacity:.35}}
.fx-tick__head em{font-style:normal;font-size:12px;color:var(--on-dark-mute);padding:3px 9px;border:1px solid rgba(255,255,255,.2);border-radius:999px}
.fx-tick__rows{display:grid}
.fx-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto;gap:18px;align-items:center;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.fx-row:last-child{border-bottom:0}
.fx-row__id b{display:inline-block;font:700 15px var(--mono);color:var(--gold);margin-right:8px}
.fx-row__id span{font:600 16px var(--head);color:#fff}
.fx-row__id small{display:block;font-size:12px;color:var(--on-dark-mute);margin-top:2px}
.fx-spark{width:100%;height:36px}
.fx-spark polyline{fill:none;stroke:var(--brand-l);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.fx-row__ms{text-align:right;min-width:86px}
.fx-row__ms b{font:700 28px/1 var(--mono);color:#fff;display:inline-block;transition:color .3s}
.fx-row__ms b.is-up{color:var(--brand-l)}
.fx-row__ms b.is-dn{color:#4ade80}
.fx-row__ms small{margin-left:4px;font-size:13px;color:var(--on-dark-mute)}
.fx-tick figcaption{margin-top:10px;font-size:12px;line-height:1.5;color:var(--on-dark-mute)}

/* flow */
.fx-flow{display:grid;grid-template-columns:1fr auto 1.2fr auto 1fr;gap:0;align-items:center}
.fx-node{padding:28px 24px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;height:100%}
.fx-node.is-main{background:var(--deep);border-color:var(--deep);color:var(--on-dark);box-shadow:var(--shadow)}
.fx-node__ico{display:grid;place-items:center;width:48px;height:54px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--brand-tint);color:var(--brand-d);margin-bottom:16px}
.fx-node.is-main .fx-node__ico{background:var(--gold);color:var(--deep)}
.fx-node h3{font-size:19px}
.fx-node.is-main h3{color:#fff}
.fx-node p{margin-top:8px;color:var(--muted);font-size:15px}
.fx-node.is-main p{color:var(--on-dark-mute)}
.fx-node__apps{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.fx-node__apps li{padding:5px 10px;border:1px solid rgba(255,255,255,.18);border-radius:999px;font:600 12.5px var(--body);color:#fff}
.fx-link{position:relative;width:64px;height:2px;margin:0 6px;background:repeating-linear-gradient(90deg,var(--line-2) 0 6px,transparent 6px 10px)}
.fx-link .hp-ico{position:absolute;right:-8px;top:-9px;color:var(--brand)}
.fx-pkt{position:absolute;left:0;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--brand);opacity:0}
.hp-mo .fx-flow.in .fx-pkt{animation:fx-pkt 1.8s linear var(--d,0s) infinite}
.fx-flow.is-paused .fx-pkt{animation-play-state:paused}
@keyframes fx-pkt{0%{transform:translateX(0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateX(56px);opacity:0}}

/* uptime */
.fx-up{margin:0;position:relative;padding-top:30px}
.fx-up__axis{position:relative;height:20px;margin-left:220px;font:500 12px var(--mono);color:var(--on-dark-mute)}
.fx-up__axis span{position:absolute;top:0;transform:translateX(-50%)}
.fx-up__axis span:first-child{transform:none}
.fx-up__axis span:last-child{transform:translateX(-100%)}
.fx-up__row{display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:center;margin-top:18px}
.fx-up__lbl b{display:block;font:700 17px var(--head);color:#fff}
.fx-up__lbl span{font-size:13px;color:var(--on-dark-mute)}
.fx-up__bar{position:relative;height:56px;border-radius:10px;background:rgba(255,255,255,.05);overflow:visible}
.fx-up__fill{position:absolute;inset:0;border-radius:10px;background:linear-gradient(90deg,rgba(74,222,128,.28),rgba(74,222,128,.18));transform-origin:0 50%}
.fx-up__gap{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(135deg,rgba(225,76,127,.55) 0 6px,rgba(225,76,127,.25) 6px 12px);border-left:1px solid var(--brand-l);border-right:1px solid var(--brand-l)}
.fx-up__gap em{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);font:600 11.5px var(--body);font-style:normal;color:var(--brand-l);white-space:nowrap}
.fx-sig{position:absolute;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;display:grid;place-items:center;border-radius:50%;background:#16212b;border:2px solid #4ade80;color:#4ade80}
.fx-sig .hp-ico{width:14px;height:14px;stroke-width:2.6}
.fx-sig.is-miss{border-color:var(--brand-l);color:var(--brand-l)}
.hp-mo .fx-up .fx-up__fill{transform:scaleX(0);transition:transform 1.6s var(--ease-o) .2s}
.hp-mo .fx-up .is-vps .fx-up__fill{transition-delay:.45s}
.hp-mo .fx-up .fx-sig,.hp-mo .fx-up .fx-up__gap{opacity:0;transition:opacity .4s ease;transition-delay:calc(.9s + var(--i,0) * .18s)}
.hp-mo .fx-up .fx-up__gap{transition-delay:1.1s}
.hp-mo .fx-up.in .fx-up__fill{transform:none}
.hp-mo .fx-up.in .fx-sig,.hp-mo .fx-up.in .fx-up__gap{opacity:1}
.fx-up figcaption{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;margin-top:26px;margin-left:220px;font-size:13px;color:var(--on-dark-mute)}
.fx-key{display:inline-flex;align-items:center;gap:8px}
.fx-key i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;border:2px solid #4ade80;color:#4ade80}
.fx-key i.is-miss{border-color:var(--brand-l);color:var(--brand-l)}
.fx-key .hp-ico{width:11px;height:11px;stroke-width:3}

/* plans */
.fx-alt{margin-top:56px;padding-top:44px;border-top:1px solid var(--line-2)}
.fx-alt>h3{font-size:24px;letter-spacing:-.02em}
.fx-alt>p{margin:10px 0 28px;color:var(--muted);max-width:68ch}
.fx-faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}

@media (max-width:1023px){
  .fx-flow{grid-template-columns:1fr;gap:0;max-width:560px;margin:0 auto}
  .fx-link{width:2px;height:44px;margin:6px auto;background:repeating-linear-gradient(180deg,var(--line-2) 0 6px,transparent 6px 10px)}
  .fx-link .hp-ico{right:auto;left:-9px;top:auto;bottom:-8px;transform:rotate(90deg)}
  .fx-pkt{left:-3px;top:0}
  @keyframes fx-pkt{0%{transform:translateY(0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateY(36px);opacity:0}}
  .fx-faq{grid-template-columns:1fr;gap:8px}
}
@media (max-width:767px){
  .fx-up__axis,.fx-up figcaption{margin-left:0}
  .fx-up__row{grid-template-columns:1fr;gap:8px;margin-top:28px}
  .fx-up__gap em{font-size:10.5px}
  .fx-up__gap:nth-of-type(3) em{transform:translateX(-80%)}
  .fx-sig{width:22px;height:22px;margin:-11px 0 0 -11px}
}
@media (max-width:640px){
  .fx-tick{padding:18px 16px 14px}
  .fx-row{grid-template-columns:1fr auto;gap:6px 12px}
  .fx-spark{grid-column:1/-1;grid-row:2;height:28px}
  .fx-row__ms b{font-size:24px}
}