/* Clickel "hx" premium layer — homepage + service pages.
   Tokens come from nx.css (--p, --ink, --bg). Dark surfaces use --hxd. Motion is class-driven (IntersectionObserver) so content is never stuck hidden. */
:root{--hxd:#080a1c;--hxd2:#10132b;--hxd3:#181c3d;--hx-line:rgba(255,255,255,.1);--hx-g:linear-gradient(90deg,#8a7cff,#46c3ff);--hx-ease:cubic-bezier(.2,.8,.2,1);--hx-r:28px}
.hx a:focus-visible,.hx button:focus-visible{outline:2px solid #8a7cff;outline-offset:3px}

/* ---------- shared bits ---------- */
.hx-label,.hx-pill{display:inline-flex;align-items:center;gap:9px;font:600 .78rem var(--fh);letter-spacing:.09em;text-transform:uppercase;color:var(--p);padding:8px 16px;border-radius:40px;background:rgba(98,84,231,.09);border:1px solid rgba(98,84,231,.18);margin-bottom:22px}
.hx-label:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--p);box-shadow:0 0 0 4px rgba(98,84,231,.18)}
.hx-label.light{color:#fff;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}.hx-label.light:before{background:#8a7cff;box-shadow:0 0 0 4px rgba(138,124,255,.25)}
.hx-h2{font-size:clamp(2.1rem,4.6vw,3.7rem);font-weight:600;line-height:1.06;letter-spacing:-.03em;margin:0 0 .5em;color:var(--ink)}
.hx-h2.inv{color:#fff}
.hx-p{font-size:1.08rem;line-height:1.7;color:var(--mut)}
.hx-head{margin-bottom:60px;max-width:860px}.hx-head.center{text-align:center;margin-left:auto;margin-right:auto}
.hx-head.split{max-width:none;display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:end}.hx-head.split .hx-p{margin:0 0 24px}
.hx-two{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}.hx-two.single{grid-template-columns:minmax(0,880px)}
.hx-btn-line{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px)}.hx-btn-line .arr{background:rgba(255,255,255,.14);color:#fff}.hx-btn-line:hover{background:rgba(255,255,255,.16)}
.hx-btn-glow{box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 14px 44px rgba(98,84,231,.55)}.hx-btn-glow:hover{box-shadow:0 0 0 1px rgba(255,255,255,.2) inset,0 18px 60px rgba(98,84,231,.75)}
.hx-orb{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;will-change:transform}

/* reveal system: hidden only while JS is alive (failsafe in <head> removes .js after 4s if hx.js never ran) */
html.js .hx [data-hx-in],html.js .hx [data-hx]{opacity:0;transform:translateY(34px);transition:opacity .9s var(--hx-ease),transform .9s var(--hx-ease);transition-delay:var(--d,0ms)}
html.js .hx [data-hx-in].in,html.js .hx [data-hx].in{opacity:1;transform:none}
html.js .hx [data-hx-split]{visibility:hidden}
.hx [data-hx-split] .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em .12em;margin-bottom:-.12em}
.hx [data-hx-split] .w>span{display:inline-block;transform:translateY(112%) rotate(4deg);transition:transform 1.05s var(--hx-ease);transition-delay:calc(var(--i) * 55ms + var(--b,0ms))}
.hx [data-hx-split].in .w>span{transform:none}
@media (prefers-reduced-motion:reduce){html.js .hx [data-hx-in],html.js .hx [data-hx]{opacity:1!important;transform:none!important;transition:none}html.js .hx [data-hx-split]{visibility:visible!important}.hx [data-hx-split] .w>span{transform:none!important;transition:none}}

/* ---------- hero ---------- */
.hx-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--hxd);color:#b9bfd6;padding:150px 0 0;min-height:min(100vh,940px);display:flex;flex-direction:column;justify-content:space-between}
.hx-bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hx-bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hx-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,10,28,calc(var(--o) + .25)),rgba(8,10,28,var(--o)) 60%,rgba(8,10,28,calc(var(--o) * .6)))}
.hx-hero .o1{width:640px;height:640px;left:-180px;top:-200px;background:#6254e7;opacity:.55;animation:hxA 16s ease-in-out infinite}
.hx-hero .o2{width:560px;height:560px;right:-160px;top:10%;background:#1b8fd6;opacity:.42;animation:hxB 19s ease-in-out infinite}
.hx-hero .o3{width:380px;height:380px;left:38%;bottom:-160px;background:#a855f7;opacity:.32;animation:hxA 22s ease-in-out infinite reverse}
@keyframes hxA{50%{transform:translate(70px,50px) scale(1.14)}}@keyframes hxB{50%{transform:translate(-80px,-40px) scale(1.1)}}
.hx-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse at 40% 35%,#000 20%,transparent 72%);mask-image:radial-gradient(ellipse at 40% 35%,#000 20%,transparent 72%)}
.hx-hero-in{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:50px;align-items:center;padding-top:20px;padding-bottom:70px;flex:1}
.hx-pill{color:#d5d0ff;background:rgba(138,124,255,.14);border-color:rgba(138,124,255,.35);margin-bottom:26px;backdrop-filter:blur(8px)}
.hx-pill i{width:8px;height:8px;border-radius:50%;background:#34e0a1;box-shadow:0 0 0 0 rgba(52,224,161,.7);animation:hxPulse 2s infinite}
@keyframes hxPulse{70%{box-shadow:0 0 0 10px rgba(52,224,161,0)}100%{box-shadow:0 0 0 0 rgba(52,224,161,0)}}
.hx-h1{font-size:clamp(2.7rem,5.8vw,5.5rem);font-weight:600;line-height:1.02;letter-spacing:-.04em;color:#fff;margin:0 0 22px}
.hx-h1 em{font-style:normal;background:var(--hx-g);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-right:.05em}
.hx-rot{font:500 clamp(1.15rem,2vw,1.55rem) var(--fh);color:#fff;margin:0 0 20px;display:flex;flex-wrap:wrap;gap:.4em;align-items:baseline}
.hx-rot span{color:#8f97b8}.hx-rot b{font-weight:600;background:var(--hx-g);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.hx-caret{width:2px;height:1.1em;background:#8a7cff;align-self:center;animation:hxBlink 1s steps(2) infinite}@keyframes hxBlink{50%{opacity:0}}
.hx-sub{font-size:1.1rem;line-height:1.7;max-width:600px;color:#aeb5cf;margin-bottom:34px}
.hx-btns{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:38px}
.hx-proof{display:flex;align-items:center;gap:16px}
.hx-faces{display:flex}.hx-faces img{width:42px;height:42px;border-radius:50%;object-fit:contain;background:#fff;padding:6px;border:2px solid var(--hxd);margin-left:-12px}.hx-faces img:first-child{margin-left:0}
.hx-stars{color:#ffbd2e;letter-spacing:3px;font-size:.95rem}.hx-proof p{margin:2px 0 0;font-size:.92rem;color:#c9cee2}.hx-proof b{color:#fff}

/* hero visual */
.hx-visual{position:relative;min-height:440px;perspective:1100px}
.hx-dash{position:relative;border-radius:26px;background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.16);box-shadow:0 40px 100px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.18);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);overflow:hidden;transform-style:preserve-3d;will-change:transform}
.hx-dash-top{display:flex;align-items:center;gap:7px;padding:14px 18px;border-bottom:1px solid var(--hx-line)}.hx-dash-top i{width:10px;height:10px;border-radius:50%;background:#ff5f57}.hx-dash-top i:nth-child(2){background:#febc2e}.hx-dash-top i:nth-child(3){background:#28c840}.hx-dash-top span{margin-left:10px;font:500 .78rem var(--fh);color:#8f97b8}
.hx-dash-body{padding:22px 22px 24px}
.hx-dash-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}.hx-dash-head small{display:block;color:#8f97b8;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}.hx-dash-head b{color:#fff;font:600 1.25rem var(--fh);letter-spacing:-.02em}
.hx-chip{font:600 .72rem var(--fh);padding:5px 11px;border-radius:30px;background:rgba(52,224,161,.14);color:#34e0a1;border:1px solid rgba(52,224,161,.3)}
.hx-chart{width:100%;height:170px;display:block;overflow:visible}
.hx-line{stroke-dasharray:1;stroke-dashoffset:1}.hx-area{opacity:0}.hx-dot{opacity:0;filter:drop-shadow(0 0 8px #8a7cff)}
.hx-loaded .hx-line{animation:hxDraw 2.2s .6s var(--hx-ease) forwards}.hx-loaded .hx-area{animation:hxFade 1.4s 1.5s forwards}.hx-loaded .hx-dot{animation:hxFade .6s 2.6s forwards,hxPing 2s 2.8s infinite}
@keyframes hxDraw{to{stroke-dashoffset:0}}@keyframes hxFade{to{opacity:1}}@keyframes hxPing{50%{r:9}}
.hx-bars{display:flex;align-items:flex-end;gap:9px;height:70px;margin-top:16px}.hx-bars i{flex:1;height:var(--h);border-radius:7px 7px 3px 3px;background:linear-gradient(180deg,#8a7cff,rgba(70,195,255,.35));transform:scaleY(0);transform-origin:bottom;opacity:.9}
.hx-loaded .hx-bars i{animation:hxBar .9s calc(1s + var(--i) * 90ms) var(--hx-ease) forwards}@keyframes hxBar{to{transform:none}}
.hx-float{position:absolute;background:rgba(255,255,255,.96);color:var(--ink);border-radius:20px;padding:14px 18px;box-shadow:0 24px 60px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:2px;opacity:0;animation:hxIn .9s var(--hx-ease) forwards}
.hx-float b{font:600 1.7rem var(--fh);letter-spacing:-.03em;line-height:1.1;color:var(--ink)}.hx-float b small{font-size:.9rem;color:var(--mut)}.hx-float>small{font-size:.78rem;color:var(--mut)}
.hx-float.f1{left:-34px;bottom:34px;animation:hxIn .9s 1.4s var(--hx-ease) forwards,hxBob 6s 2.3s ease-in-out infinite}
.hx-float.f2{right:-14px;top:-22px;animation:hxIn .9s 1.7s var(--hx-ease) forwards,hxBob 7s 2.6s ease-in-out infinite reverse}
.hx-float.f3{right:6%;bottom:-26px;flex-direction:row;align-items:center;gap:12px;animation:hxIn .9s 2s var(--hx-ease) forwards,hxBob 8s 2.9s ease-in-out infinite}
.hx-float.f3 div{display:flex;flex-direction:column}.hx-float.f3 b{font-size:.98rem}.hx-float.f3 .dot{width:12px;height:12px;border-radius:50%;background:#34e0a1;box-shadow:0 0 0 5px rgba(52,224,161,.2)}
@keyframes hxIn{from{opacity:0;transform:translateY(24px) scale(.94)}to{opacity:1;transform:none}}@keyframes hxBob{50%{transform:translateY(-12px)}}

.hx-logos{border-top:1px solid var(--hx-line);padding:26px 0;background:rgba(8,10,28,.55);backdrop-filter:blur(8px)}
.hx-logos img{height:32px;width:auto;filter:grayscale(1) brightness(0) invert(1);opacity:.55;transition:.3s}.hx-logos img:hover{opacity:1}
.hx-scroll{position:absolute;left:50%;bottom:88px;width:26px;height:42px;border:2px solid rgba(255,255,255,.35);border-radius:20px;transform:translateX(-50%)}.hx-scroll i{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;animation:hxScroll 1.8s infinite}@keyframes hxScroll{0%{opacity:1;transform:none}100%{opacity:0;transform:translateY(16px)}}

/* ticker */
.hx-ticker{padding:46px 0 10px;overflow:hidden;background:var(--bg)}
.hx-ticker .track{animation-duration:55s}

/* ---------- about ---------- */
.hx-about{padding-top:110px}
.hx-media{position:relative;padding:0 30px 30px 0}
.hx-frame{position:relative;border-radius:36px;overflow:hidden;background:linear-gradient(145deg,#e6e2ff,#d6eefc);aspect-ratio:4/4.4;box-shadow:0 40px 90px rgba(98,84,231,.2)}
.hx-frame img{position:absolute;left:0;top:-6%;width:100%;height:112%;object-fit:cover}
.hx-frame.art{display:grid;place-content:center;text-align:center;background:linear-gradient(145deg,#0f1233,#2a2470)}.hx-frame.art b{font:600 clamp(3rem,7vw,5.4rem) var(--fh);color:#fff;letter-spacing:-.04em;line-height:1;position:relative;z-index:1}.hx-frame.art small{color:#aeb5cf;position:relative;z-index:1}
.hx-frame .ring{position:absolute;left:50%;top:50%;border:1px solid rgba(255,255,255,.14);border-radius:50%;transform:translate(-50%,-50%)}.ring.r1{width:46%;aspect-ratio:1}.ring.r2{width:74%;aspect-ratio:1}.ring.r3{width:102%;aspect-ratio:1}
.hx-badge{position:absolute;background:#fff;border-radius:22px;padding:16px 22px;box-shadow:0 24px 60px rgba(13,13,18,.16);display:flex;flex-direction:column}
.hx-badge b{font:600 2rem var(--fh);color:var(--ink);line-height:1;letter-spacing:-.03em}.hx-badge b small{font-size:1rem;color:var(--mut)}.hx-badge span{font-size:.82rem;color:var(--mut);margin-top:4px}
.hx-badge.b1{right:0;top:12%;animation:hxBob 7s ease-in-out infinite}.hx-badge.b2{left:-22px;bottom:0;background:var(--p);animation:hxBob 8s ease-in-out infinite reverse}.hx-badge.b2 b,.hx-badge.b2 span{color:#fff}
.hx-ticks{list-style:none;margin:26px 0 34px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}
.hx-ticks li{display:flex;align-items:center;gap:12px;font-weight:600;color:var(--ink);font-size:.98rem}
.hx-ticks i{flex:none;width:26px;height:26px;border-radius:50%;background:var(--p);color:#fff;display:grid;place-items:center}.hx-ticks svg{width:14px;height:14px}

/* ---------- what we do ---------- */
.hx-fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.hx-feat{padding-top:40px}
.hx-fcard{position:relative;border-radius:var(--hx-r);padding:32px 28px 36px;background:#fff;border:1px solid #e6eaf4;overflow:hidden;transition:transform .5s var(--hx-ease),box-shadow .5s,border-color .4s}
.hx-fcard:before,.hx-bcard:before{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(98,84,231,.14),transparent 45%);opacity:0;transition:opacity .4s;pointer-events:none}
.hx-fcard:hover:before,.hx-bcard:hover:before{opacity:1}
.hx-fcard:hover{transform:translateY(-10px);border-color:rgba(98,84,231,.35);box-shadow:0 34px 70px rgba(98,84,231,.18)}
.hx-fcard .no{font:700 .82rem var(--fh);color:var(--p);letter-spacing:.1em}
.hx-fcard .im{height:104px;display:flex;align-items:center;margin:20px 0}.hx-fcard img{height:96px;width:auto;object-fit:contain;transition:transform .6s var(--hx-ease)}.hx-fcard:hover img{transform:scale(1.1) rotate(-3deg)}
.hx-fcard h3{font-size:1.28rem;line-height:1.25;margin-bottom:10px}.hx-fcard p{margin:0;font-size:.95rem;line-height:1.65;color:var(--mut)}
.hx-fcard .go,.hx-bcard .go svg{transition:.4s}.hx-fcard .go{position:absolute;right:22px;top:22px;width:40px;height:40px;border-radius:50%;background:var(--bg);display:grid;place-items:center;color:var(--ink)}.hx-fcard:hover .go{background:var(--p);color:#fff;transform:rotate(45deg)}

/* ---------- services bento ---------- */
.hx-svc{background:linear-gradient(180deg,var(--bg),#e9edf8 60%,var(--bg))}
.hx-bento{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(250px,auto);gap:20px}
.hx-bcard{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:18px;border-radius:var(--hx-r);padding:28px;background:#fff;border:1px solid #e3e8f3;overflow:hidden;transition:transform .5s var(--hx-ease),box-shadow .5s,border-color .4s,background .4s}
.hx-bcard:hover{transform:translateY(-8px);border-color:rgba(98,84,231,.4);box-shadow:0 36px 80px rgba(98,84,231,.18)}
.hx-bcard .n{position:absolute;right:24px;top:18px;font:700 3.4rem var(--fh);letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px #d5dbec;line-height:1;transition:.4s}.hx-bcard:hover .n{-webkit-text-stroke-color:var(--p)}
.hx-bcard .ic{width:92px;height:92px;border-radius:24px;background:linear-gradient(145deg,#f1f3ff,#e4f3fc);display:grid;place-items:center;padding:14px;transition:transform .5s var(--hx-ease)}.hx-bcard .ic img{max-height:100%;width:auto;object-fit:contain}.hx-bcard:hover .ic{transform:rotate(-6deg) scale(1.08)}
.hx-bcard h3{font-size:1.5rem;line-height:1.15;margin-bottom:8px}.hx-bcard p{margin:0;color:var(--mut);font-size:.96rem;line-height:1.6}
.hx-bcard .go{display:inline-flex;align-items:center;gap:8px;font:600 .9rem var(--fh);color:var(--p)}.hx-bcard:hover .go svg{transform:translate(3px,-3px)}
.b1{grid-column:span 6;grid-row:span 2;background:linear-gradient(150deg,#0e1130,#2b2475 70%,#4636c6);border-color:transparent;color:#c3c8e2}
.b1 h3{color:#fff;font-size:clamp(1.9rem,3vw,2.7rem)}.b1 p{color:#b6bcd8;font-size:1.06rem}.b1 .go{color:#fff}.b1 .n{-webkit-text-stroke-color:rgba(255,255,255,.2)}.b1 .ic{background:rgba(255,255,255,.1);width:120px;height:120px;border:1px solid rgba(255,255,255,.15)}
.b1:before{background:radial-gradient(500px circle at var(--mx,50%) var(--my,0%),rgba(138,124,255,.4),transparent 45%)}.b1:hover{border-color:transparent}
.b2,.b3,.b4,.b5{grid-column:span 3}.b6,.b7{grid-column:span 6}
.b2,.b3,.b4,.b5,.b6,.b7{min-height:250px}.b7{background:linear-gradient(150deg,var(--p),#2fa3e6);border-color:transparent;color:#eef}.b7 h3,.b7 .go{color:#fff}.b7 p{color:rgba(255,255,255,.85)}.b7 .n{-webkit-text-stroke-color:rgba(255,255,255,.35)}.b7 .ic{background:rgba(255,255,255,.2)}

/* ---------- process: pinned horizontal story ---------- */
.hx-process{background:var(--hxd);color:#aeb5cf;position:relative;overflow:hidden}
.hx-process:before{content:"";position:absolute;width:700px;height:700px;right:-200px;top:-260px;background:#6254e7;opacity:.3;filter:blur(120px);border-radius:50%}
.hx-pin{position:relative;padding:110px 0 100px;background:var(--hxd)}
.hx-pintop{display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:end;margin-bottom:60px}.hx-pintxt p{margin:0 0 24px;font-size:1.06rem;line-height:1.7}
.hx-track-wrap{position:relative;padding:0 0 10px}
.hx-rail{position:absolute;left:24px;right:24px;top:22px;height:2px;background:var(--hx-line);z-index:0}.hx-rail-fill{display:block;height:100%;width:100%;background:var(--hx-g);transform-origin:0 50%;transform:scaleX(.08);box-shadow:0 0 14px rgba(138,124,255,.8)}
.hx-track{display:flex;gap:24px;padding:0 24px;width:max-content;will-change:transform}
.hx-step{position:relative;isolation:isolate;flex:none;width:min(380px,78vw);padding-top:56px}
.hx-step .dot{position:absolute;left:0;top:14px;width:18px;height:18px;border-radius:50%;background:var(--hxd);border:3px solid #8a7cff;box-shadow:0 0 0 6px rgba(138,124,255,.18);z-index:1}
.hx-step .num{display:block;font:600 4.4rem var(--fh);letter-spacing:-.05em;line-height:1;background:var(--hx-g);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;margin-bottom:6px}
.hx-step h3,.hx-step p{margin:0}
.hx-step{background:none}
.hx-step>h3{color:#fff;font-size:1.5rem;line-height:1.2;margin:10px 0 12px}.hx-step>p{font-size:1rem;line-height:1.65;padding-right:12px}
.hx-step:after{content:"";position:absolute;inset:44px 0 -10px -10px;border-radius:24px;background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.01));border:1px solid var(--hx-line);z-index:-1}
.hx-step{padding:56px 24px 28px 24px}.hx-step .dot{left:24px}
/* below desktop: native swipe with snap */
@media (max-width:991px){.hx-track-wrap{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:20px}.hx-track{padding:0 20px}.hx-step{scroll-snap-align:start}.hx-rail{display:none}.hx-pintop{grid-template-columns:1fr;gap:24px}.hx-pin{padding:80px 0 60px}}

/* ---------- case studies ---------- */
.hx-cgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:22px}
.hx-case{position:relative;grid-column:span 4;aspect-ratio:4/4.6;border-radius:var(--hx-r);overflow:hidden;display:block;background:linear-gradient(135deg,var(--g));isolation:isolate}
.hx-case.lg{grid-column:span 8;aspect-ratio:auto;min-height:100%}
.hx-case:nth-child(2){grid-column:span 4}
.hx-case .im,.hx-case .im img{position:absolute;inset:0;width:100%;height:100%}.hx-case .im img{object-fit:cover;transition:transform 1.1s var(--hx-ease)}.hx-case:hover .im img{transform:scale(1.08)}
.hx-case .ph{position:absolute;inset:0;display:grid;place-items:center;font:700 clamp(2rem,5vw,3.6rem) var(--fh);color:rgba(255,255,255,.9);letter-spacing:-.04em;transition:transform .8s var(--hx-ease)}.hx-case:hover .ph{transform:scale(1.1) rotate(-2deg)}
.hx-case:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,10,28,0) 35%,rgba(8,10,28,.88));z-index:0;transition:opacity .4s}
.hx-case .ov{position:absolute;left:0;right:0;bottom:0;padding:26px 28px;z-index:1;color:#fff}
.hx-case .tag{display:inline-block;font:600 .72rem var(--fh);letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border-radius:30px;background:rgba(255,255,255,.16);backdrop-filter:blur(8px);margin-bottom:12px}
.hx-case h3{color:#fff;font-size:1.45rem;line-height:1.2;margin:0 0 6px;padding-right:60px}.hx-case.lg h3{font-size:clamp(1.7rem,3vw,2.5rem)}.hx-case p{margin:0;font-size:.92rem;color:rgba(255,255,255,.78);padding-right:60px;max-height:0;opacity:0;overflow:hidden;transition:max-height .5s var(--hx-ease),opacity .5s}
.hx-case:hover p,.hx-case.lg p{max-height:80px;opacity:1}
.hx-case .go{position:absolute;right:24px;bottom:26px;width:50px;height:50px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;transition:.4s}.hx-case:hover .go{background:var(--p);color:#fff;transform:rotate(45deg)}
@media (hover:none){.hx-case p{max-height:80px;opacity:1}}

/* ---------- facts ---------- */
.hx-facts{position:relative;overflow:hidden;background:linear-gradient(135deg,#080a1c,#1a1744 60%,#3a2fa0);padding:110px 0;color:#b9bfd2;border-radius:48px;margin:0 16px}
.hx-facts .o1{width:520px;height:520px;left:-160px;top:-200px;background:#6254e7;opacity:.4}.hx-facts .o2{width:420px;height:420px;right:-120px;bottom:-180px;background:#1b8fd6;opacity:.3}
.hx-facts .nx-wrap{position:relative}.hx-facts h2{max-width:780px}
.hx-fa{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:56px;border-top:1px solid var(--hx-line)}
.hx-fa>div{padding:36px 34px 8px 0;border-right:1px solid var(--hx-line);margin-right:34px}.hx-fa>div:last-child{border-right:0;margin-right:0}
.hx-fa b{font:600 clamp(3.4rem,7vw,6rem) var(--fh);letter-spacing:-.05em;line-height:1;color:#fff;display:block}.hx-fa sup{font-size:.5em;vertical-align:top;background:var(--hx-g);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;margin-left:2px}
.hx-fa h4{color:#9fdcff;font-size:.95rem;text-transform:uppercase;letter-spacing:.12em;margin:16px 0 10px}.hx-fa p{margin:0;font-size:.96rem;line-height:1.65}

/* ---------- skills ---------- */
.hx-bars{margin-top:30px;display:grid;gap:22px}.hx-bar .top{display:flex;justify-content:space-between;font-weight:600;color:var(--ink);margin-bottom:9px}.hx-bar .trk{height:10px;border-radius:10px;background:#dde3f0;overflow:hidden}
.hx-bar .trk i{display:block;height:100%;width:0;border-radius:10px;background:var(--hx-g);transition:width 1.6s var(--hx-ease);box-shadow:0 0 18px rgba(98,84,231,.4)}
.hx-aboutcard{position:relative}.hx-aboutcard img{width:100%;border-radius:32px;background:linear-gradient(140deg,#e8e5ff,#dff1fb);display:block}
.hx-aboutcard .card{position:relative;background:#fff;border-radius:28px;padding:34px;margin:-80px 26px 0;box-shadow:0 30px 80px rgba(13,13,18,.14);border:1px solid #eceff7}.hx-aboutcard .card.flat{margin:0}.hx-aboutcard h3{font-size:1.5rem;margin-bottom:10px}.hx-aboutcard p{color:var(--mut)}
.hx-aboutcard .hx-label{margin-bottom:14px}

/* ---------- testimonials/clients/faq/blog ---------- */
.hx-testi{background:linear-gradient(180deg,var(--bg),#eaeefa)}
.hx-testi .testi{border-radius:32px;padding:56px;background:#fff;border:1px solid #e6eaf4;box-shadow:0 30px 80px rgba(13,13,18,.07);position:relative}
.hx-testi .testi:before{content:"“";position:absolute;right:40px;top:6px;font:700 9rem/1 Georgia,serif;color:rgba(98,84,231,.1)}
.hx-testi .testi blockquote{font:500 clamp(1.15rem,2vw,1.45rem)/1.6 var(--fh);letter-spacing:-.01em;color:var(--ink);position:relative}
.hx-clients .client{border-radius:20px;background:#fff;border:1px solid #e6eaf4;transition:.4s var(--hx-ease)}.hx-clients .client:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(98,84,231,.14)}
.hx-faq .faq-item{border:1px solid #e6eaf4;border-radius:22px;background:#fff;transition:.4s}.hx-faq .faq-item.open{border-color:rgba(98,84,231,.4);box-shadow:0 22px 60px rgba(98,84,231,.14)}

/* ---------- CTA + contact ---------- */
.hx-cta{padding:30px 0 0}
.hx-ctabox{position:relative;overflow:hidden;isolation:isolate;border-radius:48px;padding:100px 40px 90px;text-align:center;background:linear-gradient(125deg,#4f43c9,#6254e7 45%,#2fa3e6);color:#eef}
.hx-ctabox .o1{width:420px;height:420px;left:-120px;top:-180px;background:#fff;opacity:.18}.hx-ctabox .o2{width:420px;height:420px;right:-120px;bottom:-200px;background:#0a1230;opacity:.35}
.hx-ctamq{position:absolute;left:0;right:0;top:26px;z-index:-1;opacity:.22}.hx-ctamq .track{gap:36px;animation-duration:30s}.hx-ctamq span{font:700 clamp(2.4rem,6vw,4.6rem) var(--fh);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px #fff;white-space:nowrap}.hx-ctamq i{font-style:normal;color:#fff;font-size:2rem}
.hx-ctabox h2{color:#fff;font-size:clamp(2.2rem,5.2vw,4.2rem);font-weight:600;line-height:1.05;letter-spacing:-.03em;max-width:860px;margin:46px auto 16px}.hx-ctabox p{max-width:580px;margin:0 auto 32px;font-size:1.08rem}
.hx-contact-list{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:14px}
.hx-contact-list li{display:flex;align-items:center;gap:16px;padding:16px 20px;border-radius:20px;background:#fff;border:1px solid #e6eaf4}
.hx-contact-list i{flex:none;width:46px;height:46px;border-radius:14px;background:rgba(98,84,231,.1);color:var(--p);display:grid;place-items:center;font-style:normal;font-size:1.15rem}
.hx-contact-list small{display:block;color:var(--mut);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}.hx-contact-list a,.hx-contact-list span{font-weight:600;color:var(--ink)}.hx-contact-list a:hover{color:var(--p)}
.hx-contact .cform{border-radius:32px;border:1px solid #e6eaf4;box-shadow:0 30px 80px rgba(13,13,18,.08)}

/* ---------- responsive ---------- */
@media (max-width:1100px){.hx-fgrid{grid-template-columns:repeat(2,1fr)}.hx-hero-in{grid-template-columns:1fr;gap:70px}.hx-visual{max-width:560px;margin:0 20px}.hx-scroll{display:none}.hx-bento{grid-template-columns:repeat(6,1fr)}.b1{grid-column:span 6;grid-row:auto}.b2,.b3,.b4,.b5{grid-column:span 3}.b6,.b7{grid-column:span 3}}
@media (max-width:991px){.hx-two,.hx-head.split,.hx-pintop{grid-template-columns:1fr;gap:40px}.hx-two{gap:56px}.hx-cgrid{grid-template-columns:1fr 1fr}.hx-case,.hx-case.lg,.hx-case:nth-child(2){grid-column:span 1;aspect-ratio:4/4.4}.hx-case.lg{grid-column:span 2;aspect-ratio:16/10}.hx-fa{grid-template-columns:1fr}.hx-fa>div{border-right:0;margin-right:0;border-bottom:1px solid var(--hx-line);padding:30px 0}.hx-facts{border-radius:30px;margin:0 8px;padding:80px 0}.hx-hero{padding-top:120px}.hx-media{padding:0 14px 26px 0}}
@media (max-width:640px){.hx-fgrid,.hx-cgrid{grid-template-columns:1fr}.hx-case.lg{grid-column:span 1;aspect-ratio:4/4.4}.hx-bento{grid-template-columns:1fr}.b1,.b2,.b3,.b4,.b5,.b6,.b7{grid-column:span 1}.hx-ticks{grid-template-columns:1fr}.hx-float.f1{left:-6px}.hx-float.f2{right:-6px}.hx-visual{margin:0 8px;min-height:380px}.hx-testi .testi{padding:34px 24px}.hx-ctabox{border-radius:30px;padding:80px 22px 64px}.hx-hero-in{padding-bottom:50px}.hx-btns .nx-btn{flex:1 1 auto}}
@media (prefers-reduced-motion:reduce){.hx-hero .hx-orb,.hx-float,.hx-badge,.hx-scroll i,.hx-caret,.hx-pill i{animation:none!important}.hx-float{opacity:1}.hx-line{stroke-dashoffset:0}.hx-area,.hx-dot{opacity:1}.hx-bars i{transform:none}}

/* ---------- service pages: premium layer ---------- */
.hx-sx{background:var(--bg);font-family:var(--fb);color:var(--mut)}
.hx-sx *{box-sizing:border-box}
.hx-sx-facts{margin:0;border-radius:0;padding:100px 0}
.hx-sx-why{padding-top:110px}
.hx-tl-sec{background:linear-gradient(180deg,var(--bg),#e9edf8)}
.hx-tl-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:start}
.hx-tl-intro{position:sticky;top:120px}
.hx-tl{list-style:none;margin:0;padding:0 0 0 38px;position:relative}
.hx-tl:before{content:"";position:absolute;left:11px;top:14px;bottom:14px;width:2px;background:linear-gradient(180deg,var(--p),#46c3ff 70%,transparent);opacity:.35;border-radius:2px}
.hx-tl li{position:relative;display:flex;gap:22px;align-items:flex-start;background:#fff;border:1px solid #e6eaf4;border-radius:24px;padding:26px 28px;margin-bottom:18px;transition:transform .5s var(--hx-ease),box-shadow .5s,border-color .4s}
.hx-tl li:before{content:"";position:absolute;left:-35px;top:34px;width:18px;height:18px;border-radius:50%;background:var(--bg);border:3px solid var(--p);box-shadow:0 0 0 6px rgba(98,84,231,.14)}
.hx-tl li:hover{transform:translateX(8px);border-color:rgba(98,84,231,.4);box-shadow:0 26px 60px rgba(98,84,231,.14)}
.hx-tl .no{flex:none;font:600 2.6rem var(--fh);letter-spacing:-.05em;line-height:1;background:var(--hx-g);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;min-width:62px}
.hx-tl h3{font-size:1.25rem;margin:2px 0 6px}.hx-tl p{margin:0;color:var(--mut);line-height:1.6}
.hx-relgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.hx-relcard{position:relative;display:flex;flex-direction:column;gap:10px;min-height:230px;padding:28px;border-radius:var(--hx-r);background:#fff;border:1px solid #e3e8f3;overflow:hidden;transition:transform .5s var(--hx-ease),box-shadow .5s,border-color .4s}
.hx-relcard:before{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(98,84,231,.14),transparent 45%);opacity:0;transition:opacity .4s;pointer-events:none}.hx-relcard:hover:before{opacity:1}
.hx-relcard:hover{transform:translateY(-8px);border-color:rgba(98,84,231,.4);box-shadow:0 34px 70px rgba(98,84,231,.16)}
.hx-relcard .n{font:700 .85rem var(--fh);color:var(--p);letter-spacing:.1em}.hx-relcard h3{font-size:1.4rem;line-height:1.2;margin:6px 0 0;padding-right:48px}.hx-relcard p{margin:0;color:var(--mut);font-size:.95rem;line-height:1.6}
.hx-relcard .go{position:absolute;right:22px;top:22px;width:44px;height:44px;border-radius:50%;background:var(--bg);display:grid;place-items:center;color:var(--ink);transition:.4s}.hx-relcard:hover .go{background:var(--p);color:#fff;transform:rotate(45deg)}
.hx-ctarow{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
@media (max-width:991px){.hx-tl-grid{grid-template-columns:1fr;gap:40px}.hx-tl-intro{position:static}.hx-relgrid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.hx-relgrid{grid-template-columns:1fr}.hx-tl li{padding:22px 18px;gap:14px}.hx-tl .no{font-size:2rem;min-width:46px}}

/* ---------- services hub ---------- */
.hx-phero{position:relative;isolation:isolate;overflow:hidden;background:var(--hxd);color:#b9bfd6;padding:170px 0 90px;text-align:center}
.hx-phero .hx-orb.o1{width:560px;height:560px;left:-160px;top:-200px;background:#6254e7;opacity:.5;animation:hxA 16s ease-in-out infinite}.hx-phero .hx-orb.o2{width:480px;height:480px;right:-140px;bottom:-200px;background:#1b8fd6;opacity:.4;animation:hxB 19s ease-in-out infinite}
.hx-phero .hx-grid{position:absolute;inset:0;z-index:-1}
.hx-phero h1{font-size:clamp(2.6rem,6vw,5rem);font-weight:600;line-height:1.04;letter-spacing:-.04em;color:#fff;max-width:980px;margin:0 auto 20px}.hx-phero h1 em{font-style:normal;background:var(--hx-g);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.hx-phero p.sub{max-width:660px;margin:0 auto 32px;font-size:1.12rem;line-height:1.7;color:#aeb5cf}
.hx-phero .hx-btns{justify-content:center;margin-bottom:0}
.hx-phero .crumbs{display:inline-flex;gap:8px;margin-top:34px;padding:9px 18px;border-radius:40px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-size:.88rem}.hx-phero .crumbs a{color:#fff}.hx-phero .crumbs span{opacity:.6}
.hx-hub{padding:100px 0 60px}
.hx-hubgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.hx-hubcard{position:relative;display:flex;flex-direction:column;gap:12px;min-height:300px;padding:32px;border-radius:var(--hx-r);background:#fff;border:1px solid #e3e8f3;overflow:hidden;transition:transform .5s var(--hx-ease),box-shadow .5s,border-color .4s}
.hx-hubcard:before{content:"";position:absolute;inset:0;background:radial-gradient(460px circle at var(--mx,50%) var(--my,0%),rgba(98,84,231,.16),transparent 45%);opacity:0;transition:opacity .4s;pointer-events:none}.hx-hubcard:hover:before{opacity:1}
.hx-hubcard:hover{transform:translateY(-10px);border-color:rgba(98,84,231,.45);box-shadow:0 40px 80px rgba(98,84,231,.2)}
.hx-hubcard .n{font:700 4.6rem var(--fh);letter-spacing:-.06em;line-height:1;color:transparent;-webkit-text-stroke:1.5px #d5dbec;transition:.4s}.hx-hubcard:hover .n{-webkit-text-stroke-color:var(--p)}
.hx-hubcard h2{font-size:1.5rem;line-height:1.2;margin:auto 0 0;padding-right:10px;color:var(--ink)}.hx-hubcard p{margin:0;color:var(--mut);line-height:1.6;font-size:.96rem}
.hx-hubcard .go{display:inline-flex;align-items:center;gap:8px;margin-top:6px;font:600 .9rem var(--fh);color:var(--p)}.hx-hubcard:hover .go svg{transform:translate(3px,-3px)}.hx-hubcard .go svg{transition:.4s}
.hx-quick{padding:30px 0 100px}
.hx-qgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.hx-qcard{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:24px 14px;border-radius:24px;background:#fff;border:1px solid #e3e8f3;transition:.45s var(--hx-ease)}
.hx-qcard:hover{transform:translateY(-8px);border-color:rgba(98,84,231,.4);box-shadow:0 26px 60px rgba(98,84,231,.16)}
.hx-qcard .ic{width:76px;height:76px;border-radius:20px;background:linear-gradient(145deg,#f1f3ff,#e4f3fc);display:grid;place-items:center;padding:12px}.hx-qcard img{max-height:100%;width:auto;object-fit:contain}
.hx-qcard b{font:600 .95rem/1.25 var(--fh);color:var(--ink)}
@media (max-width:1100px){.hx-qgrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:991px){.hx-hubgrid{grid-template-columns:1fr 1fr}.hx-phero{padding:140px 0 70px}}
@media (max-width:640px){.hx-hubgrid{grid-template-columns:1fr}.hx-qgrid{grid-template-columns:repeat(2,1fr)}.hx-hubcard{min-height:240px}}

/* ---------- contact page ---------- */
.hx-cpage{background:var(--bg)}
.hx-cgrid2{display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:start}
.hx-cinfo{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:30px 0 24px}
.hx-ccard{display:flex;align-items:center;gap:14px;padding:18px;border-radius:22px;background:#fff;border:1px solid #e3e8f3;transition:.45s var(--hx-ease);min-width:0}
a.hx-ccard:hover{transform:translateY(-6px);border-color:rgba(98,84,231,.4);box-shadow:0 24px 50px rgba(98,84,231,.15)}
.hx-ccard i{flex:none;width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:rgba(98,84,231,.1);color:var(--p)}
.hx-ccard small{display:block;color:var(--mut);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase}.hx-ccard b{display:block;color:var(--ink);font:600 .95rem/1.35 var(--fh);overflow-wrap:anywhere}
.hx-promises{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px}.hx-promises li{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--ink);font-size:.92rem}.hx-promises svg{color:#fff;background:var(--p);border-radius:50%;padding:4px;width:22px;height:22px}
.hx-formcard{position:sticky;top:110px;background:#fff;border:1px solid #e3e8f3;border-radius:32px;padding:38px;box-shadow:0 40px 90px rgba(98,84,231,.14)}
.hx-formcard h3{font-size:1.6rem;margin:0 0 4px}.hx-formcard>p{margin:0 0 18px;color:var(--mut);font-size:.92rem}
.hx-formcard .cform{border:0;box-shadow:none;padding:0;background:none}
@media (max-width:991px){.hx-cgrid2{grid-template-columns:1fr;gap:44px}.hx-formcard{position:static;padding:26px 20px;border-radius:26px}}
@media (max-width:560px){.hx-cinfo{grid-template-columns:1fr}}