/* A lightweight presentation layer. Content stays visible without this script. */
.motion-toggle{color:var(--muted)}
.motion-toggle[aria-pressed="true"]{color:var(--teal);border-color:color-mix(in srgb,var(--teal) 40%,var(--line))}
.motion-toggle:disabled{cursor:default;opacity:.55}
.cro-hero .hero-visual{height:610px}
.cro-hero .visual-grid{overflow:hidden}
.cro-hero .demo-window{width:360px;min-height:565px;padding:22px;transform:rotate(-2deg);transition:transform .35s cubic-bezier(.2,.7,.2,1);isolation:isolate}
.demo-window:focus-within,.demo-window:hover{transform:rotate(0deg)}
.demo-window .demo-top{padding-bottom:15px;gap:10px}
.demo-window .demo-caption{font-size:7px;white-space:nowrap}
.demo-window .demo-welcome>b{font-size:26px}
.demo-window .demo-tabs{margin:10px 0 13px;gap:20px}
.demo-window .demo-tabs button{font-size:11px;min-height:44px;transition:color .2s,border-color .2s}
.demo-window .demo-panel{min-height:358px}
.demo-window .demo-sub{padding:14px 16px;overflow:hidden}
.demo-window .demo-sub strong{font-size:18px;margin:10px 0}
.demo-orbit{position:absolute;right:-20px;bottom:-35px;width:130px;height:130px;border:1px solid #d4ed9a12;border-radius:50%;pointer-events:none}
.demo-orbit:after{content:"";position:absolute;inset:16px;border:1px solid #d4ed9a12;border-radius:50%}
.motion-server{margin-top:13px}
.motion-server b{font-size:11px}
.motion-server small{font-size:9px}
.demo-server-options{display:flex;gap:6px;margin:9px 0 13px}
.demo-server-options button{min-height:44px;flex:1;border:1px solid #ffffff20;background:#ffffff06;color:#bfcfc1;border-radius:8px;padding:6px 8px;font-size:10px;transition:color .2s,background .2s,border-color .2s}
.demo-server-options button span[aria-hidden]{font-size:16px;vertical-align:-1px;margin-right:3px}
.demo-server-options button[aria-pressed="true"]{color:#ddf4b1;border-color:#d4ed9a88;background:#cbef7b14}
.demo-window button:focus-visible{outline-color:#cbef7b;outline-offset:3px}
.demo-progress{display:flex;align-items:center;gap:6px;color:#bdcbbf;margin:0 0 11px;font-size:8px}
.demo-progress>span{display:flex;align-items:center;gap:4px;white-space:nowrap}
.demo-progress i{width:17px;height:17px;border:1px solid #ffffff32;border-radius:50%;display:grid;place-items:center;font-size:8px;font-style:normal;transition:background .2s,color .2s}
.demo-progress>b{flex:1;height:1px;background:#ffffff25;position:relative}
.demo-progress>b:after{content:"";position:absolute;inset:0;background:#cbef7b;transform:scaleX(0);transform-origin:left;transition:transform .35s}
.demo-progress .done{color:#d4ed9a}
.demo-progress .done i{background:#cbef7b;color:#182923;border-color:#cbef7b}
.demo-progress .done+b:after{transform:scaleX(1)}
.motion-connect{width:100%;margin-top:0;border:0;text-align:left;font-family:inherit;min-height:44px;font-size:11px}
.motion-connect svg{width:18px;height:18px}
.motion-connect:disabled{opacity:.8;cursor:progress}
.demo-feedback{font-size:9px;color:#c4d2c6;line-height:1.6;margin:8px 0 0;min-height:29px}
.demo-real-start{padding-top:10px;margin-top:6px;border-top:1px solid #ffffff18}
.demo-real-start p{font-size:8px;color:#aebfb2;line-height:1.5;margin:0}
.demo-real-start a{display:flex;align-items:center;justify-content:space-between;gap:6px;color:#d9f59c;font-size:10px;font-weight:550;min-height:44px}
.demo-real-start svg{width:16px;height:16px}
.demo-real-start a:focus-visible{outline-color:#cbef7b}
.cro-hero .float-tag{display:none}
.cro-hero .tag-one{top:78px;right:-4px}
.cro-hero .tag-two{bottom:70px;left:-16px}
.cro-hero .visual-asterisk{bottom:14px;right:24px;width:1em;height:1em;display:grid;place-items:center}
.plan-guide{border:1px solid var(--line);border-radius:20px;background:var(--tint);padding:25px 28px;margin-bottom:26px}
.plan-guide-head{display:flex;align-items:center;gap:16px;margin-bottom:19px}
.plan-guide-icon{width:42px;height:42px;border-radius:50%;background:var(--lime);color:#182923;display:grid;place-items:center;font-size:23px;flex-shrink:0}
.plan-guide h3{font-size:21px;letter-spacing:-.03em;margin:0 0 6px}
.plan-guide-head p{font-size:11px;color:var(--muted);line-height:1.6;margin:0}
.plan-scenarios{display:flex;gap:8px;flex-wrap:wrap}
.plan-scenarios button{min-height:44px;border-radius:30px;border:1px solid var(--line);background:var(--surface);padding:10px 18px;font-size:11px;transition:background .2s,border-color .2s,transform .2s}
.plan-scenarios button[aria-pressed="true"]{background:var(--text);border-color:var(--text);color:var(--bg)}
.plan-guide-result{display:flex;align-items:center;gap:25px;justify-content:space-between;min-height:65px;padding-top:16px}
.plan-guide-result p{font-size:12px;line-height:1.65;color:var(--muted);margin:0;max-width:790px}
.plan-guide-result a{font-size:11px;font-weight:650;min-height:44px;display:flex;align-items:center;gap:12px;flex-shrink:0;color:var(--teal);text-decoration:underline;text-underline-offset:4px}
.plan[data-scenario-selected="true"]{border-color:var(--teal);box-shadow:0 0 0 2px var(--teal),0 12px 30px #183a2612}
.plan{scroll-margin-top:115px;transition:border-color .25s,box-shadow .25s,transform .25s}
.route-path i{position:relative}
.route-path i:after{content:"";width:7px;height:7px;position:absolute;left:0;top:-4px;border-radius:50%;background:var(--teal);opacity:0;box-shadow:0 0 0 4px color-mix(in srgb,var(--teal) 10%,transparent)}
html[data-hg-motion="on"] .route-path.is-travelling i:after{animation:hg-packet .75s ease-in-out both}
html[data-hg-motion="on"] .route-path.is-travelling i:nth-of-type(2):after{animation-delay:.6s}
.route-path.is-travelling .path-server svg{border-color:var(--teal)}
.quick-start-bar:not([hidden]){animation:hg-bar-in .3s ease-out}
@media(hover:hover) and (pointer:fine){
 html[data-hg-motion="on"] .bento-card,html[data-hg-motion="on"] .app-row,html[data-hg-motion="on"] .country-card{transition:transform .25s cubic-bezier(.2,.7,.2,1),border-color .25s}
 html[data-hg-motion="on"] .bento-card:hover,html[data-hg-motion="on"] .app-row:hover{transform:translateY(-4px)}
 html[data-hg-motion="on"] .plan:hover{transform:translateY(-5px)}
 html[data-hg-motion="on"] .country-card:hover{transform:translateY(-3px);border-color:var(--teal)}
 html[data-hg-motion="on"] .btn svg,html[data-hg-motion="on"] .text-link svg{transition:transform .2s}
 html[data-hg-motion="on"] .btn:hover svg,html[data-hg-motion="on"] .text-link:hover svg{transform:translateX(3px)}
}
html[data-hg-motion="on"] .hero-visual.is-in-view .visual-grid:after{animation:hg-grid-turn 2.5s cubic-bezier(.2,.7,.2,1) 1}
html[data-hg-motion="on"] .hero-visual.is-in-view .visual-asterisk{animation:hg-asterisk 3.6s cubic-bezier(.2,.7,.2,1) 1}
@keyframes hg-grid-turn{from{transform:rotate(-65deg);opacity:.2}to{transform:rotate(-30deg);opacity:1}}
@keyframes hg-asterisk{from{rotate:-80deg}to{rotate:0deg}}
@keyframes hg-packet{0%{left:0;opacity:0}12%,85%{opacity:1}100%{left:calc(100% - 7px);opacity:0}}
@keyframes hg-bar-in{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}
html[data-hg-motion="off"]{scroll-behavior:auto}
html[data-hg-motion="off"] *,html[data-hg-motion="off"] *:before,html[data-hg-motion="off"] *:after{animation:none!important;transition:none!important}
html[data-hg-motion="off"] .demo-window{transform:none}
@media(max-width:1100px){.cro-hero .demo-window{width:320px}.cro-hero{gap:35px}.cro-hero .float-tag{font-size:8px;padding:11px}.cro-hero .tag-one{right:-4px;top:70px}.cro-hero .tag-two{left:-10px}}
@media(max-width:1000px){.cro-hero .hero-visual{height:615px}.header-actions{gap:8px}.header-inner{gap:16px}.cro-hero .demo-window{width:300px;padding:19px}.demo-server-options button{font-size:9px}.demo-progress{gap:4px}}
@media(max-width:600px){
 .header-actions{gap:7px}.header-inner{gap:8px}.motion-toggle{width:44px;height:44px}
 .cro-hero .hero-visual{height:auto;min-height:615px;margin-top:23px;padding:12px 0 23px}
 .cro-hero .demo-window{width:calc(100% - 16px);max-width:360px;padding:21px;transform:none}
 .cro-hero .tag-one{right:-3px;top:58px;font-size:8px;padding:10px;transform:rotate(5deg)}
 .cro-hero .tag-two{left:-1px;bottom:26px;font-size:8px;padding:10px}
 .cro-hero .visual-asterisk{right:14px;bottom:3px;font-size:58px}
 .demo-window .demo-panel{min-height:354px}
 .plan-guide{padding:20px 17px;margin-bottom:23px;border-radius:16px}
 .plan-guide-head{gap:12px;align-items:flex-start}.plan-guide h3{font-size:19px}.plan-guide-head p{font-size:10px}
 .plan-guide-icon{width:34px;height:34px;font-size:21px}
 .plan-scenarios{gap:7px}.plan-scenarios button{font-size:10px;padding:9px 13px;min-height:44px}
 .plan-guide-result{display:block;min-height:115px;padding-top:17px}.plan-guide-result p{font-size:11px}
 .plan-guide-result a{font-size:10px;width:fit-content;margin-top:5px}
}
@media(max-width:360px){.header-actions{gap:4px}.header-inner{gap:5px}.cro-hero .demo-window{padding:17px;width:calc(100% - 4px)}.demo-window .demo-tabs{gap:17px}.demo-window .demo-tabs button{font-size:10px}.demo-window .demo-caption{font-size:6px}.demo-window .demo-brand{font-size:8px}.cro-hero .tag-one{top:56px;font-size:7px}.demo-real-start a{font-size:9px}.demo-window .demo-panel{min-height:350px}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.cro-hero .demo-window{transform:none}}