body{margin:0;background:#060A12}
a{color:#6FDCF7}a:hover{color:#B5EEFB}
@keyframes kl-dash{to{stroke-dashoffset:-560}}
@keyframes kl-march{to{stroke-dashoffset:-24}}
@keyframes kl-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes kl-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes kl-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes kl-ring{0%{transform:scale(1);opacity:.6}100%{transform:scale(2.2);opacity:0}}
@keyframes kl-hub{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.3);opacity:0}}
@keyframes kl-ticker{to{transform:translateX(-50%)}}
@keyframes kl-tile{0%,100%{transform:translateY(0) rotate(var(--r))}50%{transform:translateY(-12px) rotate(calc(var(--r) + 4deg))}}
@keyframes kl-glow{0%,100%{opacity:.85}50%{opacity:1}}
@keyframes kl-dot{0%,80%,100%{opacity:.25}40%{opacity:1}}
.kl-flow{stroke-dasharray:14 546;animation:kl-dash 3.6s cubic-bezier(.45,0,.55,1) infinite}
.kl-march{stroke-dasharray:4 8;animation:kl-march 1.2s linear infinite}
.kl-up{animation:kl-up .7s cubic-bezier(.2,.7,.2,1) both}
.kl-in{animation:kl-in .4s cubic-bezier(.2,.7,.2,1) both}
.kl-card{transition:transform .25s ease,border-color .25s ease}.kl-card:hover{transform:translateY(-4px);border-color:#2A3A56}
.kl-bob{animation:kl-bob 5s ease-in-out infinite}
.kl-ring{animation:kl-ring 2.4s ease-out infinite}
.kl-hub{animation:kl-hub 2.4s ease-out infinite}
.kl-track{animation:kl-ticker 38s linear infinite}
.kl-ticker:hover .kl-track{animation-play-state:paused}
.kl-tile{animation:kl-tile 7s ease-in-out infinite}
.kl-glow{animation:kl-glow 4s ease-in-out infinite}
.kl-typing span{animation:kl-dot 1.2s infinite}
.kl-typing span:nth-child(2){animation-delay:.15s}
.kl-typing span:nth-child(3){animation-delay:.3s}
.kl-diagram{display:block}
.kl-list{display:none}
/* ---- mobile ---- */
@media (max-width:760px){
html{scroll-padding-top:72px}
.kl-header{padding:8px 12px 6px !important}
.kl-nav{flex-wrap:nowrap !important;gap:8px !important;padding:6px 6px 6px 12px !important}
.kl-logo{height:24px !important}
.kl-navlinks{display:none !important}
.kl-navright{gap:6px !important}
.kl-lang{padding:2px !important}
.kl-lang button{min-width:36px !important;min-height:32px !important;font-size:12px !important}
.kl-navcta{min-height:36px !important;padding:0 14px !important;font-size:13px !important;white-space:nowrap}
.kl-pad{padding-left:20px !important;padding-right:20px !important;padding-top:64px !important;padding-bottom:64px !important}
.kl-hero{padding-top:40px !important;padding-bottom:56px !important;gap:40px !important}
.kl-hero h1{font-size:38px !important}
.kl-hero p{font-size:17px !important}
.kl-diagram{display:none !important}.kl-list{display:flex !important}
.kl-chip,.kl-tilewrap,.kl-glabel,.kl-board{display:none !important}
.kl-art{aspect-ratio:auto !important;max-width:340px;margin:0 auto;contain:layout}
.kl-art>svg{display:none}
.kl-phone{position:relative !important;left:auto !important;top:auto !important;width:100% !important;height:330px !important;contain:layout size}
.kl-phone>div:last-child{overflow:hidden}
.kl-logos{max-width:100% !important}
.kl-geo-head{padding:64px 20px 0 !important}
.kl-geo-fig{margin-top:28px !important;padding:0 20px !important}
.kl-geo-cols{margin-top:36px !important}
.kl-col{padding:28px 20px !important;border-right:0 !important;border-bottom:1px dashed #1B2840}
.kl-col-last{border-bottom:0}
.kl-svc{padding:22px !important}
article[style*="padding: 40px"]{padding:24px !important}
div[style*="padding: 32px 40px 40px"]{padding:24px !important}
.kl-step>div[style*="padding: 32px 32px 0"]{padding:24px 22px 0 !important}
.kl-steps{margin-top:36px !important}
.kl-contact{padding:12px 12px 12px !important}
.kl-contact-in{padding:56px 20px 44px !important}
.kl-contact-in h2{font-size:32px !important}
footer.kl-pad{padding-top:48px !important;padding-bottom:32px !important}
}
@media (max-width:360px){.kl-lang button{min-width:32px !important}.kl-navcta{padding:0 11px !important}.kl-hero h1{font-size:34px !important}}
@media (prefers-reduced-motion:reduce){.kl-flow,.kl-march,.kl-ring,.kl-hub,.kl-bob,.kl-tile,.kl-glow,.kl-typing span{animation:none}.kl-flow{stroke-dasharray:none;opacity:.45}.kl-up,.kl-in{animation:none}.kl-track{animation:none;flex-wrap:wrap}}
input:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid #6FDCF7;outline-offset:2px}
*{box-sizing:border-box}
img{max-width:100%}
[hidden]{display:none !important}
x-if[hidden]{display:none !important}
html{scroll-behavior:smooth;scroll-padding-top:90px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---- layout: full width ---- */
.kl-wrap{max-width:1360px;margin-left:auto;margin-right:auto}
.kl-sticky{position:sticky;top:110px}
@media (max-width:900px){.kl-sticky{position:static}.kl-svc-grid{grid-template-columns:1fr !important}.kl-steps{grid-template-columns:1fr !important}}

/* ---- client logo marquee ---- */
.kl-logos{position:relative;display:flex;overflow:hidden;width:100%;min-width:0;max-width:620px;contain:inline-size;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.kl-logos-track{display:flex;align-items:center;gap:44px;padding-right:44px;flex:none;animation:kl-marquee 48s linear infinite}
.kl-logos-track img{height:30px;width:auto;max-width:150px;object-fit:contain;opacity:.78;filter:none}
.kl-logos:hover .kl-logos-track{animation-play-state:paused}
@keyframes kl-marquee{to{transform:translateX(-100%)}}

/* ---- flow scene ---- */
.kl-scene{border-radius:18px;background:radial-gradient(60% 80% at 50% 50%,#0C1A2E 0%,#08101C 70%);border:1px solid #16233A;overflow:visible}
.kl-node{box-sizing:border-box;display:flex;align-items:center;gap:10px;padding:0 14px;border-radius:12px;background:linear-gradient(180deg,#101B2E,#0B1424);border:1px solid #223455;box-shadow:0 10px 30px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.04);font-size:14px;font-weight:600;line-height:1.25;transition:border-color .3s,transform .3s}
.kl-node:hover{border-color:#56DCF8;transform:translateY(-2px)}
.kl-node-ic{flex:none;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;background:#0E2A3B}
.kl-node-t{min-width:0}
.kl-orbit{animation:kl-spin 14s linear infinite}
.kl-orbit-rev{animation:kl-spin 22s linear infinite reverse}
.kl-core-pulse{animation:kl-corepulse 2.6s ease-out infinite}
@keyframes kl-spin{to{transform:rotate(360deg)}}
@keyframes kl-corepulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.9);opacity:0}}

/* ---- steps (cal.com style) ---- */
.kl-step{transition:transform .3s,border-color .3s}
.kl-step:hover{transform:translateY(-4px);border-color:#2A3A56}
.kl-msg{opacity:0;transform:translateY(8px);animation:kl-msgin 8s ease-in-out infinite}
.kl-msg-a{animation-delay:.2s}.kl-msg-b{animation-delay:1.6s}.kl-msg-c{animation-delay:3s}.kl-msg-d{animation-delay:4.4s}
@keyframes kl-msgin{0%{opacity:0;transform:translateY(8px)}6%,82%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(-4px)}}
.kl-tog{position:relative;flex:none;width:36px;height:20px;border-radius:999px;background:#2A3A56;transition:background .3s}
.kl-tog>span{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#EAF1F8;transition:transform .3s}
.kl-bar{flex:1;height:8px;border-radius:999px;background:#1A2740;overflow:hidden}
.kl-bar>span{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#00C8F1,#7FE8FF)}
.kl-pct{width:40px;text-align:right;font-variant-numeric:tabular-nums;color:#8593A8;font-size:12.5px;opacity:0}
.kl-row .kl-tog{animation:kl-togon 9s ease-in-out infinite}
.kl-row .kl-tog>span{animation:kl-knob 9s ease-in-out infinite}
.kl-row .kl-bar>span{animation:kl-fill 9s ease-in-out infinite}
.kl-row .kl-pct{animation:kl-pctin 9s ease-in-out infinite}
.kl-row-2 .kl-tog,.kl-row-2 .kl-tog>span,.kl-row-2 .kl-bar>span,.kl-row-2 .kl-pct{animation-delay:1.4s}
.kl-row-3 .kl-tog,.kl-row-3 .kl-tog>span,.kl-row-3 .kl-bar>span,.kl-row-3 .kl-pct{animation-delay:2.8s}
@keyframes kl-togon{0%,8%{background:#2A3A56}14%,84%{background:#00C8F1}92%,100%{background:#2A3A56}}
@keyframes kl-knob{0%,8%{transform:none}14%,84%{transform:translateX(16px)}92%,100%{transform:none}}
@keyframes kl-fill{0%,14%{width:0}44%,84%{width:100%}92%,100%{width:0}}
@keyframes kl-pctin{0%,42%{opacity:0}46%,84%{opacity:1}92%,100%{opacity:0}}
.kl-box{flex:none;width:18px;height:18px;border-radius:5px;border:1.5px solid #2A3A56;background:#0B1424;position:relative;animation:kl-boxon 8s ease-in-out infinite}
.kl-box::after{content:"";position:absolute;left:5px;top:1.5px;width:5px;height:9px;border:solid #051D3A;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .2s;animation:kl-tick 8s ease-in-out infinite}
.kl-chk-2 .kl-box,.kl-chk-2 .kl-box::after{animation-delay:1s}.kl-chk-3 .kl-box,.kl-chk-3 .kl-box::after{animation-delay:2s}.kl-chk-4 .kl-box,.kl-chk-4 .kl-box::after{animation-delay:3s}
@keyframes kl-boxon{0%,10%{background:#0B1424;border-color:#2A3A56}16%,86%{background:#00C8F1;border-color:#00C8F1}94%,100%{background:#0B1424;border-color:#2A3A56}}
@keyframes kl-tick{0%,10%{transform:rotate(45deg) scale(0)}16%,86%{transform:rotate(45deg) scale(1)}94%,100%{transform:rotate(45deg) scale(0)}}
.kl-cta-primary:hover{filter:brightness(1.08)}
@media (prefers-reduced-motion:reduce){.kl-logos-track,.kl-orbit,.kl-orbit-rev,.kl-core-pulse,.kl-msg,.kl-row .kl-tog,.kl-row .kl-tog>span,.kl-row .kl-bar>span,.kl-row .kl-pct,.kl-box,.kl-box::after{animation:none !important}.kl-msg,.kl-pct{opacity:1;transform:none}.kl-bar>span{width:100%}.kl-tog{background:#00C8F1}.kl-tog>span{transform:translateX(16px)}.kl-box{background:#00C8F1;border-color:#00C8F1}.kl-box::after{transform:rotate(45deg) scale(1)}}