/* Spike SP — styles for all widgets and for the extra options on Elementor's own widgets.
   Colours and sizes are CSS variables: site-wide values are set under Spike SP in the dashboard,
   per-widget values in the Elementor panel. Breakpoints follow Elementor (1024 / 767). */

:root{--spsp-ink:#0B0D12;--spsp-ink2:#262932;--spsp-mut:#6B707C;--spsp-dim:#A9ADB7;--spsp-line:#E6E7EB;--spsp-soft:#F5F5F3;
--spsp-c1:#10CFC8;--spsp-c2:#8F42EC;--spsp-c3:#D70B6C;--spsp-c4:#FF6D00;--spsp-c5:#1B56E0;
--spsp-r:28px;--spsp-e:cubic-bezier(.2,.7,.2,1);--spsp-hd:76px}

/* ------------------------------------------------------------------ base */
.spsp{font-family:var(--spsp-font,inherit);font-size:17px;line-height:1.6;font-weight:400;color:var(--spsp-ink);text-align:left;letter-spacing:0;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:border-box}
.spsp *,.spsp *::before,.spsp *::after{box-sizing:border-box}
/* "html" in front keeps theme and site-kit heading/link styles out of the widgets */
html .spsp h1,html .spsp h2,html .spsp h3,html .spsp h4,html .spsp h5,html .spsp h6,html .spsp p,html .spsp ul,html .spsp ol,html .spsp li,html .spsp figure,html .spsp figcaption,html .spsp blockquote{margin:0;padding:0;font:inherit;color:inherit;letter-spacing:inherit;text-transform:none;list-style:none;border:0;background:none}
html .spsp a,html .spsp a:hover,html .spsp a:focus,html .spsp a:active{color:var(--spsp-a,inherit);text-decoration:none;box-shadow:none}
.spsp img{display:block;max-width:100%;height:auto;border:0;border-radius:0;box-shadow:none}
.spsp svg{display:block}
.spsp b,.spsp strong{font-weight:500}
.spsp [role=button]{cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none}
.spsp :focus-visible{outline:2px solid var(--spsp-c1);outline-offset:3px}
.spsp-i{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.spsp-mu{color:var(--spsp-dim)}
.spsp-empty{padding:24px;border:1px dashed var(--spsp-line);border-radius:14px;color:var(--spsp-mut);font-size:14px}

/* browser bar (portfolio, marquee cards, browser mockup) */
.spsp-bar{height:28px;display:flex;align-items:center;gap:6px;padding:0 12px;background:var(--spsp-bar,#F4F4F2);border-bottom:1px solid var(--spsp-line)}
.spsp-bar i{width:7px;height:7px;border-radius:50%;background:#D4D6DB;flex:none}
.spsp-bar span{margin:0 auto;font-size:10.5px;line-height:1;color:#6B707C;background:#fff;border-radius:5px;padding:4px 26px;transform:translateX(-14px);white-space:nowrap}

/* buttons used inside Spike SP widgets */
.spsp-btn{display:inline-flex;align-items:center;gap:14px;height:58px;padding:0 9px 0 28px;border-radius:999px;font-size:16px;font-weight:500;line-height:1;white-space:nowrap;border:1px solid transparent;cursor:pointer;transition:background .35s,color .35s,border-color .35s}
.spsp-btn .ar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;transition:transform .5s var(--spsp-e),background .35s,color .35s}
.spsp-btn-ink{background:var(--spsp-btn-bg,var(--spsp-ink));--spsp-a:var(--spsp-btn-ink,#fff)}
.spsp-btn-ink .ar{background:var(--spsp-btn-ar,#fff);color:var(--spsp-btn-bg,var(--spsp-ink))}
.spsp-btn-ink:hover .ar{background:var(--spsp-btn-ar-h,var(--spsp-c1));transform:rotate(45deg)}
.spsp-btn-sm{height:46px;padding:0 6px 0 20px;font-size:15px;gap:10px}
.spsp-btn-sm .ar{width:34px;height:34px}

/* ---------------------------------------------------------------- header */
.spsp-prog{position:fixed;left:0;top:0;height:3px;width:100%;z-index:1002;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);background:var(--spsp-prog,linear-gradient(90deg,var(--spsp-c1),var(--spsp-c5),var(--spsp-c2),var(--spsp-c3),var(--spsp-c4)))}
.spsp-hdw{color:var(--spsp-hd-ink,var(--spsp-ink))}
.spsp-hd{position:relative;z-index:1000;background:var(--spsp-hd-bg0,transparent);transition:transform .5s var(--spsp-e),background .3s,box-shadow .3s}
.spsp-hdw.is-fixed .spsp-hd{position:fixed;left:0;right:0;top:0}
.spsp-hdw.is-fixed .spsp-hd.is-sc{background:var(--spsp-hd-bg,rgba(255,255,255,.88));-webkit-backdrop-filter:saturate(160%) blur(18px);backdrop-filter:saturate(160%) blur(18px);box-shadow:0 1px 0 var(--spsp-line)}
.spsp-hd.is-hide{transform:translateY(-102%)}
.admin-bar .spsp-hdw.is-fixed .spsp-hd,.admin-bar .spsp-prog{top:32px}
.spsp-hd-in{position:relative;display:flex;align-items:center;justify-content:space-between;height:var(--spsp-hd);width:100%;max-width:var(--spsp-maxw,1480px);margin-inline:auto;padding-inline:clamp(20px,4.2vw,64px)}
.spsp-logo{display:inline-flex;align-items:center;line-height:0;flex:none}
.spsp-logo img{height:var(--spsp-logo-h,38px);width:auto;max-width:none}
.spsp-logo-t{font-size:24px;font-weight:500;letter-spacing:-.03em;line-height:1}
.spsp-nav{display:flex;gap:2px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.spsp-nav a{padding:10px 16px;border-radius:999px;font-size:15px;line-height:1;transition:background .25s;white-space:nowrap}
.spsp-nav>a,.spsp-dd>a{display:inline-flex;align-items:center;opacity:.9}
.spsp-nav>a:hover,.spsp-dd>a:hover{background:rgba(11,13,18,.06);opacity:1}
.spsp-nav a.is-cur{background:rgba(11,13,18,.06);opacity:1}
.spsp-nav .ch{width:13px;height:13px;margin:0 -3px 0 5px;opacity:.5;transition:transform .4s var(--spsp-e)}
.spsp-dd{position:relative;display:inline-flex}
.spsp-dd:hover>a .ch,.spsp-dd:focus-within>a .ch{transform:rotate(180deg)}
.spsp-dd-p{position:absolute;left:50%;top:100%;padding-top:12px;transform:translate(-50%,8px);opacity:0;visibility:hidden;transition:opacity .25s,transform .4s var(--spsp-e),visibility .25s}
.spsp-dd:hover .spsp-dd-p,.spsp-dd:focus-within .spsp-dd-p{opacity:1;visibility:visible;transform:translate(-50%,0)}
.spsp-dd-p>span{display:block;width:336px;background:#fff;border-radius:22px;padding:10px;box-shadow:0 30px 70px -24px rgba(11,13,18,.34),0 0 0 1px rgba(11,13,18,.06);--spsp-a:var(--spsp-ink)}
.spsp-nav .spsp-dd-p a{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:14px;font-size:15.5px;line-height:1.2;white-space:normal}
.spsp-nav .spsp-dd-p a:hover{background:rgba(11,13,18,.06)}
.spsp-dd-p a i{width:30px;height:30px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:500;flex:none;transition:transform .45s var(--spsp-e)}
.spsp-dd-p a:hover i{transform:scale(1.12)}
.spsp-nav .spsp-dd-p a.all{justify-content:space-between;margin-top:6px;border-top:1px solid var(--spsp-line);border-radius:0 0 14px 14px;padding:14px 12px 9px;font-size:14.5px;--spsp-a:var(--spsp-mut)}
.spsp-nav .spsp-dd-p a.all:hover{background:none;--spsp-a:var(--spsp-ink)}
.spsp-dd-p a.all .spsp-i{width:14px;height:14px}
.spsp-hd-r{display:flex;align-items:center;gap:22px}
.spsp-login{font-size:15px;position:relative;opacity:.9}
.spsp-login::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .4s var(--spsp-e)}
.spsp-login:hover::after{transform:scaleX(1);transform-origin:0 50%}
.spsp-burger{display:none;width:46px;height:46px;border-radius:50%;background:var(--spsp-btn-bg,var(--spsp-ink));position:relative;flex:none}
.spsp-burger::before,.spsp-burger::after{content:"";position:absolute;left:14px;right:14px;height:2px;background:var(--spsp-btn-ink,#fff);border-radius:2px;transition:transform .4s var(--spsp-e),top .4s var(--spsp-e)}
.spsp-burger::before{top:18px}.spsp-burger::after{top:26px}
.spsp-burger.is-x::before{top:22px;transform:rotate(45deg)}.spsp-burger.is-x::after{top:22px;transform:rotate(-45deg)}
.spsp-menu{position:fixed;inset:0;z-index:999;background:#fff;color:var(--spsp-ink);padding:calc(var(--spsp-hd) + 24px) 24px 28px;display:flex;flex-direction:column;justify-content:space-between;gap:30px;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s;overflow:auto}
.spsp-menu.is-open{opacity:1;visibility:visible}
.spsp-menu nav a{display:flex;align-items:baseline;gap:14px;padding:12px 0;font-size:40px;font-weight:500;letter-spacing:-.035em;line-height:1.1;border-bottom:1px solid var(--spsp-line)}
.spsp-menu nav a small{font-size:13px;font-weight:400;color:var(--spsp-dim);letter-spacing:0;width:22px}
.spsp-menu .ft{display:flex;flex-direction:column;gap:14px;font-size:16px;color:var(--spsp-mut)}
.spsp-menu .ft .spsp-btn{align-self:flex-start}
.spsp-menu .ft .spsp-login{font-size:16px;align-self:flex-start}
/* mobile layout: switched by the script at the width set in the widget */
.spsp-hdw.is-compact .spsp-nav,.spsp-hdw.is-compact .spsp-hd-r .spsp-login,.spsp-hdw.is-compact .spsp-hd-r .spsp-btn{display:none}
.spsp-hdw.is-compact .spsp-burger{display:block}
html.spsp-has-hd{scroll-padding-top:calc(var(--spsp-hd) + 14px)}

/* -------------------------------------------------------------- headline */
html .spsp.spsp-hl{margin:0;padding:0;font-family:var(--spsp-font,inherit);font-size:clamp(40px,7.9vw,132px);font-weight:500;line-height:.97;letter-spacing:-.048em;color:var(--spsp-ink);text-transform:none}
.spsp-hl .l{display:block}
.spsp-hl.is-reveal .l{animation:spspRise 1s var(--spsp-e) both;animation-delay:calc(var(--i,0)*.08s + .05s)}
.spsp-rot{display:inline-grid;vertical-align:top;overflow:hidden;padding:.1em .06em .2em 0;margin:-.1em 0 -.2em}
.spsp-rot b{grid-area:1/1;font-weight:inherit;white-space:nowrap;transform:translateY(125%)}
.spsp-rot b.is-on{transform:none;transition:transform .9s cubic-bezier(.7,0,.2,1)}
.spsp-rot b.is-out{transform:translateY(-135%);transition:transform .9s cubic-bezier(.7,0,.2,1)}

/* --------------------------------------------------------------- marquee */
.elementor-widget.elementor-widget-spsp-marquee{min-width:0;max-width:100%}
.spsp-mq{overflow:hidden;max-width:100%}
.spsp-mq.is-fade{-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.spsp-mq-tr{display:flex;width:max-content;animation:spspMq var(--spsp-mq-t,70s) linear infinite;will-change:transform}
.spsp-mq.is-right .spsp-mq-tr{animation-direction:reverse}
.spsp-mq.is-pause:hover .spsp-mq-tr{animation-play-state:paused}
.spsp-mq-set{display:flex;flex:none;align-items:center}
/* logos */
.spsp-lgo{flex:none;margin-right:var(--spsp-mq-gap,clamp(40px,5vw,76px));height:calc(var(--spsp-mq-h,38px) + 6px);display:flex;align-items:center;transition:opacity .3s}
.spsp-lgo img{height:var(--spsp-mq-h,38px);width:auto;max-width:150px;object-fit:contain}
.spsp-lgo span{font-size:20px;font-weight:500;letter-spacing:-.02em;white-space:nowrap;line-height:1}
.spsp-mq.is-mono .spsp-lgo{opacity:.5}
.spsp-mq.is-mono .spsp-lgo:hover{opacity:1}
.spsp-mq.is-mono .spsp-lgo img{filter:brightness(0)}
.spsp-mq.is-mono .spsp-lgo:hover img{filter:none}
.spsp-mq.is-mono .spsp-lgo:hover img.is-light{filter:brightness(0)}
/* screenshot cards */
.spsp-mq-cards{padding:10px 0}
.spsp-mq-cards .spsp-mq-set{align-items:flex-start}
.spsp-mq-cards .spsp-mq-tr{font-size:14.5px;line-height:1.3}
.spsp-shot{flex:none;display:block;width:var(--spsp-mq-w,clamp(270px,31vw,480px));margin-right:var(--spsp-mq-gap,clamp(16px,2vw,30px))}
.spsp-mq.is-stagger .spsp-shot:nth-child(even){margin-top:clamp(22px,3.4vw,54px)}
.spsp-shot .fr{border-radius:14px;overflow:hidden;border:1px solid var(--spsp-line);background:#fff;transition:transform .6s var(--spsp-e),box-shadow .6s var(--spsp-e)}
.spsp-shot:hover .fr{transform:translateY(-8px);box-shadow:0 30px 60px -28px rgba(11,13,18,.35)}
.spsp-shot .fr img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.spsp-shot .cap{display:flex;justify-content:space-between;gap:12px;margin-top:14px}
.spsp-shot .cap b{font-weight:500}
.spsp-shot .cap span{color:var(--spsp-mut)}
/* big text */
.spsp-mq-text .spsp-mq-tr{font-size:clamp(60px,12.5vw,210px);font-weight:500;letter-spacing:-.05em;line-height:1}
.spsp-big{display:inline-flex;align-items:center;white-space:nowrap;padding-right:.22em}
.spsp-big .spsp-star{width:.44em;height:.44em;margin-left:.22em;fill:var(--spsp-mq-sep,var(--c));animation:spspSpin 10s linear infinite;flex:none}
.spsp-dotsep{width:.16em;height:.16em;border-radius:50%;background:var(--spsp-mq-sep,var(--c));margin-left:.22em;flex:none}

/* ----------------------------------------------------------- scroll text */
html .spsp.spsp-st{margin:0;padding:0;font-family:var(--spsp-font,inherit);font-size:clamp(26px,3.7vw,58px);line-height:1.13;letter-spacing:-.033em;font-weight:400;color:var(--spsp-ink);text-transform:none;max-width:var(--spsp-st-w,21em)}
.spsp-st .w{transition:color .5s,opacity .5s}
.spsp-st.is-split .w{color:var(--spsp-st-off,#C9CCD3)}
.spsp-st.is-split .w.on{color:inherit}
.spsp-st .pic{display:inline-grid;place-items:center;width:1.55em;height:.86em;border-radius:999px;background:var(--c);color:#fff;vertical-align:-.04em;margin:0 .06em;transition:opacity .5s,transform .6s var(--spsp-e)}
.spsp-st .pic .spsp-i{width:.44em;height:.44em;stroke-width:2.4}
.spsp-st.is-split .pic{opacity:.28;transform:scale(.86)}
.spsp-st.is-split .pic.on{opacity:1;transform:none}

/* -------------------------------------------------------- accordion list */
.spsp-sv{border-top:1px solid var(--spsp-line)}
.spsp-sv:last-child{border-bottom:1px solid var(--spsp-line)}
.spsp-sv-h{display:grid;grid-template-columns:84px 1fr auto 56px;align-items:center;gap:clamp(12px,2vw,28px);padding:clamp(22px,2.4vw,34px) 0;outline-offset:-2px}
.spsp-sv-n{width:54px;height:54px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;font-size:16px;font-weight:500;line-height:1;transition:transform .5s var(--spsp-e)}
.spsp-sv-h:hover .spsp-sv-n{transform:scale(1.1)}
.spsp .spsp-sv-t{font-size:clamp(24px,3.3vw,52px);font-weight:500;letter-spacing:-.035em;line-height:1.08;transition:transform .6s var(--spsp-e)}
.spsp-sv-h:hover .spsp-sv-t{transform:translateX(12px)}
.spsp-sv-s{font-size:14.5px;line-height:1.4;color:var(--spsp-mut);text-align:right;max-width:280px;transition:opacity .4s}
.spsp-sv.open .spsp-sv-s{opacity:0}
.spsp-sv-x{width:56px;height:56px;border-radius:50%;border:1px solid #D6D8DE;position:relative;transition:background .4s,border-color .4s,transform .5s var(--spsp-e)}
.spsp-sv-x::before,.spsp-sv-x::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:1.5px;background:var(--spsp-ink);transform:translate(-50%,-50%);transition:transform .5s var(--spsp-e),background .4s}
.spsp-sv-x::after{transform:translate(-50%,-50%) rotate(90deg)}
.spsp-sv.open .spsp-sv-x{background:var(--c);border-color:var(--c)}
.spsp-sv.open .spsp-sv-x::before,.spsp-sv.open .spsp-sv-x::after{background:#fff}
.spsp-sv.open .spsp-sv-x::after{transform:translate(-50%,-50%) rotate(0)}
.spsp-sv-b{display:grid;grid-template-rows:1fr;transition:grid-template-rows .7s var(--spsp-e)}
.spsp-svs.is-js .spsp-sv-b{grid-template-rows:0fr}
.spsp-svs.is-js .spsp-sv.open .spsp-sv-b{grid-template-rows:1fr}
.spsp-sv-b>div{overflow:hidden;min-height:0}
.spsp-sv-c{display:grid;grid-template-columns:84px 1fr 1.25fr auto;gap:clamp(12px,2vw,28px);padding:4px 0 clamp(34px,4vw,56px);align-items:start}
.spsp .spsp-sv-c p{font-size:19px;line-height:1.5;color:var(--spsp-mut);max-width:400px}
.spsp-sv-l{columns:2;column-gap:32px}
.spsp .spsp-sv-l li{break-inside:avoid;padding:6px 0 6px 24px;position:relative;font-size:16.5px;line-height:1.4}
.spsp-sv-l li::before{content:"+";position:absolute;left:0;top:5px;color:var(--c);font-weight:500;font-size:18px;line-height:1.4}
.spsp-det{width:124px;height:124px;border-radius:50%;border:1px solid var(--c);display:flex;align-items:center;justify-content:center;gap:6px;font-size:14.5px;line-height:1;transition:background .45s,color .45s,transform .5s var(--spsp-e);margin-left:clamp(0px,3vw,50px)}
.spsp-det .spsp-i{width:13px;height:13px;transition:transform .45s var(--spsp-e)}
.spsp-det:hover{background:var(--c);--spsp-a:#fff}
.spsp-det:hover .spsp-i{transform:translate(2px,-2px)}

/* -------------------------------------------------------------- portfolio */
.spsp-fl{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:var(--spsp-fl-mb,clamp(28px,3.6vw,56px))}
.spsp-fl span{border:1px solid #D6D8DE;background:#fff;border-radius:999px;padding:12px 20px;font-size:15px;line-height:1;color:var(--spsp-ink);transition:background .3s,color .3s,border-color .3s;display:inline-flex;gap:7px;align-items:baseline}
.spsp-fl span small{font-size:11px;color:var(--spsp-dim);transition:color .3s}
.spsp-fl span:hover{border-color:var(--spsp-ink)}
.spsp-fl span.on{background:var(--spsp-ink);border-color:var(--spsp-ink);color:#fff}
.spsp-fl span.on small{color:rgba(255,255,255,.6)}
.spsp-cases{display:grid;grid-template-columns:1fr 1fr;gap:var(--spsp-pf-y,clamp(44px,5.6vw,90px)) var(--spsp-pf-x,clamp(20px,3vw,48px));transition:opacity .3s}
.spsp-cases.is-fade{opacity:0}
.spsp-case{display:block;min-width:0}
.spsp-case.wide{grid-column:1/-1}
.spsp-case[data-off]{margin-top:clamp(40px,8.5vw,150px)}
.spsp-case.is-hid{display:none}
.spsp-stage{position:relative;border-radius:var(--spsp-r);background:color-mix(in srgb,var(--c) 14%,#fff);background:radial-gradient(130% 120% at 15% 0%,color-mix(in srgb,var(--c) 26%,#fff),color-mix(in srgb,var(--c) 9%,#fff));overflow:hidden;aspect-ratio:1/.8;padding:9.5% 9.5% 0;display:flex}
.spsp-case.wide .spsp-stage{aspect-ratio:16/7.6;padding:5% 16% 0}
.spsp-brw{flex:1;min-width:0;display:flex;flex-direction:column;border-radius:13px 13px 0 0;overflow:hidden;background:#fff;box-shadow:0 34px 80px -24px rgba(11,13,18,.42),0 0 0 1px rgba(11,13,18,.05);transition:transform 1s var(--spsp-e)}
.spsp-case:hover .spsp-brw{transform:translateY(-12px)}
.spsp-brw .spsp-bar{height:32px}
.spsp-brw-v{flex:1;overflow:hidden;position:relative;background:#fff}
.spsp-brw-v img{position:absolute;left:0;top:0;width:100%;height:auto;max-width:none;transition:transform 1.4s var(--spsp-e)}
.spsp-pf.is-scroll .spsp-case:hover .spsp-brw-v img{transform:translateY(var(--ty,-45%));transition:transform var(--td,6s) linear}
.spsp-tag{position:absolute;left:20px;top:20px;z-index:2;display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--spsp-ink);border-radius:999px;padding:8px 14px 8px 11px;font-size:12.5px;font-weight:500;line-height:1}
.spsp-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c)}
.spsp-case-m{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-top:22px}
.spsp .spsp-case-m .t{font-size:clamp(22px,2.1vw,32px);font-weight:500;letter-spacing:-.03em;line-height:1.15}
.spsp-case-m span{font-size:14.5px;color:var(--spsp-mut);white-space:nowrap}
.spsp .spsp-case-d{font-size:16.5px;line-height:1.5;color:var(--spsp-mut);margin-top:6px;max-width:520px}
.spsp-cur{position:fixed;left:0;top:0;width:104px;height:104px;margin:-52px 0 0 -52px;border-radius:50%;background:var(--spsp-ink);color:#fff;display:grid;place-items:center;text-align:center;font-size:14px;font-weight:500;line-height:1.1;pointer-events:none;z-index:9998;opacity:0;transform:translate3d(var(--x,0),var(--y,0),0) scale(.2);transition:opacity .3s,transform .12s linear}
.spsp-cur.on{opacity:1;transform:translate3d(var(--x,0),var(--y,0),0) scale(1)}

/* -------------------------------------------------------------- link list */
.spsp-ll{display:grid;grid-template-columns:minmax(0,1fr);column-gap:var(--spsp-ll-gap,clamp(20px,3vw,48px))}
.spsp-ll.is-closed{border-bottom:1px solid var(--spsp-line)}
.spsp-ll-r{display:flex;align-items:center;gap:12px;padding:var(--spsp-ll-pad,17px) 0;border-top:1px solid var(--spsp-line);font-size:17.5px;line-height:1.2;transition:padding .45s var(--spsp-e)}
.spsp-ll-r small{flex:none;width:var(--spsp-ll-lw,110px);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--spsp-mut);line-height:1.2}
.spsp-ll-r .t{flex:1;min-width:0}
.spsp-ll-r .n{color:var(--spsp-mut);font-size:13.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.spsp-ll-r .spsp-i{width:15px;height:15px;opacity:.25;transition:opacity .3s,transform .45s var(--spsp-e)}
a.spsp-ll-r:hover{padding-left:10px}
a.spsp-ll-r:hover .spsp-i{opacity:1;transform:translate(2px,-2px)}

/* -------------------------------------------------------- browser mockup */
.spsp-bw{position:relative}
.spsp-bw-f{display:block;width:var(--spsp-bw-w,100%);border-radius:var(--spsp-bw-r,14px);overflow:hidden;background:#fff;box-shadow:0 34px 80px -24px var(--spsp-bw-sh,rgba(11,13,18,.42)),0 0 0 1px rgba(128,128,128,.14)}
.spsp-bw-v img{width:100%;height:auto}
.spsp-bw.is-tilt{perspective:1900px}
.spsp-bw.is-tilt .spsp-bw-f{transform:rotateY(var(--spsp-bw-ry,-13deg)) rotateX(var(--spsp-bw-rx,5deg));transform-origin:0 50%;box-shadow:0 70px 130px -30px var(--spsp-bw-sh,rgba(11,13,18,.5)),0 0 0 1px rgba(128,128,128,.14);transition:transform 1.6s var(--spsp-e)}
.spsp-bw.is-tilt.is-js:not(.in) .spsp-bw-f{transform:rotateY(calc(var(--spsp-bw-ry,-13deg)*1.85)) rotateX(calc(var(--spsp-bw-rx,5deg)*1.8)) translateY(50px)}
.spsp-bw.is-tilt:hover .spsp-bw-f{transform:rotateY(calc(var(--spsp-bw-ry,-13deg)*.38)) rotateX(calc(var(--spsp-bw-rx,5deg)*.4))}
.spsp-bw.is-window .spsp-bw-v{position:relative;overflow:hidden;padding-top:var(--spsp-bw-ratio,62%)}
.spsp-bw.is-window .spsp-bw-v img{position:absolute;left:0;top:0;max-width:none;transition:transform 1.4s var(--spsp-e)}
.spsp-bw.is-window:hover .spsp-bw-v img{transform:translateY(var(--ty,-45%));transition:transform var(--td,6s) linear}
.spsp-fchip{position:absolute;z-index:3;padding:11px 18px;border-radius:999px;font-size:14px;font-weight:500;line-height:1;white-space:nowrap;box-shadow:0 18px 40px -10px rgba(11,13,18,.35);animation:spspFloat 6s ease-in-out infinite}

/* ------------------------------------------------------------------ tags */
.spsp-tags{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spsp-tag-gap,8px);font-size:14.5px;line-height:1;color:var(--spsp-tag-ink,var(--spsp-ink))}
.spsp-tg{display:inline-flex;align-items:center;gap:8px;background:var(--spsp-tag-bg,#fff);border:1px solid var(--spsp-tag-bd,transparent);border-radius:999px;padding:10px 16px 10px 12px}
.spsp-tg i{width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}
.spsp-tags.is-plain .spsp-tg{background:none;border:0;padding:0;gap:10px}
.spsp-tags.is-pulse .spsp-tg i{animation:spspPulse 2.2s infinite}
.spsp-tags.is-flow{font-size:13px;letter-spacing:.1em;text-transform:uppercase;gap:8px 10px;color:var(--spsp-tag-ink,var(--spsp-mut))}
.spsp-tags.is-flow i{width:5px;height:5px;border-radius:50%;background:var(--c);flex:none}

/* ----------------------------------------------------------------- clock */
.spsp-clock{font-size:14.5px;line-height:1.3;color:var(--spsp-mut)}
.spsp-clock b{font-weight:500;color:var(--spsp-ink);font-variant-numeric:tabular-nums}
.spsp-clock u{text-decoration:none;animation:spspBlink 1.6s steps(1) infinite}

/* ---------------------------------------------------------- testimonials */
.spsp-qs{display:grid}
.spsp-q{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(24px);transition:opacity .7s var(--spsp-e),transform .7s var(--spsp-e),visibility .7s}
.spsp-q.on{opacity:1;visibility:visible;transform:none}
.spsp .spsp-q blockquote{font-size:clamp(26px,3.6vw,56px);line-height:1.14;letter-spacing:-.033em;font-weight:400;max-width:20em;quotes:none}
.spsp-q blockquote::before{content:"\201C";display:block;font-size:1.6em;line-height:.7;color:var(--c);height:.5em}
.spsp-who{display:flex;align-items:center;gap:14px;margin-top:clamp(28px,3.4vw,48px)}
.spsp-who i,.spsp-who img{width:52px;height:52px;border-radius:50%;flex:none}
.spsp-who i{background:var(--c);color:#fff;display:grid;place-items:center;font-style:normal;font-weight:500;font-size:19px;text-transform:uppercase}
.spsp-who img{object-fit:cover}
.spsp-who b{display:block;font-size:17px;line-height:1.3;color:var(--spsp-ink)}
.spsp-who span{font-size:14.5px;color:var(--spsp-mut);line-height:1.3}
.spsp-qnav{display:flex;align-items:center;gap:18px;margin-top:clamp(34px,4vw,60px)}
.spsp-qnav [role=button]{width:54px;height:54px;border-radius:50%;border:1px solid #D6D8DE;display:grid;place-items:center;transition:background .3s,color .3s,border-color .3s}
.spsp-qnav [role=button]:hover{background:var(--spsp-ink);border-color:var(--spsp-ink);color:#fff}
.spsp-qnav .spsp-i{width:17px;height:17px}
.spsp-qnav .cnt{font-size:14.5px;color:var(--spsp-mut);font-variant-numeric:tabular-nums;margin-left:6px}
.spsp-qnav .bar{flex:1;max-width:240px;height:2px;background:var(--spsp-line);position:relative;overflow:hidden;border-radius:2px}
.spsp-qnav .bar i{position:absolute;inset:0;background:var(--spsp-ink);transform-origin:0 50%;transform:scaleX(0)}
.spsp-qnav .bar i.run{animation:spspBar var(--spsp-q-t,7s) linear forwards}

/* ------------------------------------------------------------ post cards */
.spsp-arts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--spsp-arts-gap,clamp(16px,2vw,28px))}
.spsp-art{display:block}
.spsp-art .cv{aspect-ratio:4/3;border-radius:var(--spsp-art-r,24px);background:#F1F2F4;background:color-mix(in srgb,var(--c) 13%,#fff);position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:26px;transition:transform .7s var(--spsp-e)}
.spsp-art:hover .cv{transform:scale(.975)}
.spsp-art .cv::before{content:"";position:absolute;width:62%;aspect-ratio:1;border-radius:50%;right:-14%;top:-22%;background:var(--c);opacity:.9;transition:transform .9s var(--spsp-e)}
.spsp-art .cv::after{content:"";position:absolute;width:30%;aspect-ratio:1;border-radius:50%;right:30%;top:34%;border:1.5px solid var(--c);transition:transform .9s var(--spsp-e)}
.spsp-art:hover .cv::before{transform:scale(1.12) translate(-4%,4%)}
.spsp-art:hover .cv::after{transform:translate(18%,-18%)}
.spsp-art .cv b{position:relative;font-size:clamp(26px,2.6vw,40px);font-weight:500;letter-spacing:-.035em;line-height:1.02;max-width:9em}
.spsp-art .cv.has-img{padding:0}
.spsp-art .cv.has-img::before,.spsp-art .cv.has-img::after{display:none}
.spsp-art .cv.has-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.spsp-art small{display:block;font-size:13px;letter-spacing:.11em;text-transform:uppercase;color:var(--spsp-mut);margin-top:20px;line-height:1.6}
.spsp .spsp-art .t{font-size:clamp(20px,1.7vw,25px);font-weight:500;letter-spacing:-.025em;line-height:1.22;margin-top:8px;max-width:17em}

/* ======================= extra options on Elementor's own widgets ======================= */

/* Heading: dot before the text (line-height 0 on the wrapper keeps its height equal to the text, whatever the theme's line height) */
.elementor-widget-heading.spsp-dot-yes,.elementor-widget-heading.spsp-dot-yes>.elementor-widget-container{line-height:0}
.spsp-dot-yes .elementor-heading-title{display:inline-flex;align-items:center;gap:10px;vertical-align:top}
.spsp-dot-yes .elementor-heading-title::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--spsp-dot,var(--spsp-c1));flex:none}

/* Button: round arrow badge (drawn with two pseudo-elements, so the button needs no icon) */
.spsp-arrow-yes .elementor-button.elementor-button{display:inline-flex;align-items:center}
.spsp-arrow-yes .elementor-button .elementor-button-content-wrapper{position:relative;align-items:center;gap:14px}
.spsp-arrow-yes .elementor-button-content-wrapper::after{content:"";order:9;flex:none;width:var(--spsp-ar-size,40px);height:var(--spsp-ar-size,40px);border-radius:50%;background:var(--spsp-ar-bg,#fff);transition:background .35s}
.spsp-arrow-yes .elementor-button-content-wrapper::before{content:"";position:absolute;z-index:1;right:calc(var(--spsp-ar-size,40px)/2 - 8px);top:50%;width:16px;height:16px;margin-top:-8px;background:var(--spsp-ar-ink,#0B0D12);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .5s var(--spsp-e),background .35s}
.spsp-arrow-yes .elementor-button:hover .elementor-button-content-wrapper::after{background:var(--spsp-ar-bg-h,var(--spsp-c1))}
.spsp-arrow-yes .elementor-button:hover .elementor-button-content-wrapper::before{transform:rotate(45deg);background:var(--spsp-ar-ink-h,var(--spsp-ar-ink,#0B0D12))}
.spsp-magnetic-yes .elementor-button{transition:transform .35s var(--spsp-e),background .35s,color .35s,border-color .35s}

/* Counter: fills the card it sits in; number at one end, title at the other (use the Counter's own alignment controls) */
.elementor-widget.spsp-spread-yes{--flex-grow:1;flex-grow:1;display:flex;flex-direction:column}
.spsp-spread-yes>.elementor-widget-container{flex:1;display:flex;flex-direction:column}
.spsp-spread-yes .elementor-counter{flex:1;justify-content:space-between}
.spsp-spread-yes .elementor-counter .elementor-counter-number-wrapper,.spsp-spread-yes .elementor-counter .elementor-counter-title{flex:0 0 auto}

/* Accordion: thin lines instead of boxes, icon in a circle on the right */
.spsp-acc-yes .elementor-accordion .elementor-accordion-item{border-left:0!important;border-right:0!important}
.spsp-acc-yes .elementor-accordion .elementor-tab-title{display:flex;align-items:center;justify-content:space-between;gap:20px;border:0!important}
.spsp-acc-yes .elementor-accordion .elementor-accordion-title{flex:1;order:1}
.spsp-acc-yes.spsp-acc-yes .elementor-accordion .elementor-tab-title .elementor-accordion-icon{order:2;float:none;flex:none;width:40px;height:40px;margin:0;border-radius:50%;border:1px solid var(--spsp-acc-ring,#D6D8DE);display:grid;place-items:center;text-align:center;font-size:12px;line-height:1;transition:background .4s,border-color .4s}
.spsp-acc-yes.spsp-acc-yes .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon{background:var(--spsp-acc-on,var(--spsp-ink));border-color:var(--spsp-acc-on,var(--spsp-ink))}
.spsp-acc-yes .elementor-accordion .elementor-tab-content{border:0!important}
.spsp-acc-yes .elementor-accordion .elementor-tab-content>:last-child{margin-bottom:0}

/* Container: stick to the top while scrolling */
.e-con.spsp-sticky-yes{position:sticky;top:var(--spsp-top,90px)}

/* Entrance animations added to Elementor's list */
.animated.spspRise{animation-name:spspRise;animation-duration:1s;animation-timing-function:var(--spsp-e)}
.animated.spspFade{animation-name:spspFade;animation-duration:1s;animation-timing-function:var(--spsp-e)}

@keyframes spspRise{from{opacity:0;transform:translate3d(0,34px,0)}to{opacity:1;transform:none}}
@keyframes spspFade{from{opacity:0}to{opacity:1}}
@keyframes spspMq{to{transform:translateX(-50%)}}
@keyframes spspSpin{to{transform:rotate(360deg)}}
@keyframes spspFloat{50%{translate:0 -10px}}
@keyframes spspBlink{50%{opacity:.25}}
@keyframes spspBar{to{transform:scaleX(1)}}
@keyframes spspPulse{0%{box-shadow:0 0 0 0 rgba(29,191,115,.55);box-shadow:0 0 0 0 color-mix(in srgb,var(--c) 55%,transparent)}70%{box-shadow:0 0 0 9px rgba(29,191,115,0);box-shadow:0 0 0 9px color-mix(in srgb,var(--c) 0%,transparent)}100%{box-shadow:0 0 0 0 rgba(29,191,115,0);box-shadow:0 0 0 0 color-mix(in srgb,var(--c) 0%,transparent)}}

/* ============================== tablet and below (1024) ============================== */
@media(max-width:1024px){
.spsp-hdw:not(.is-js) .spsp-nav,.spsp-hdw:not(.is-js) .spsp-hd-r .spsp-login,.spsp-hdw:not(.is-js) .spsp-hd-r .spsp-btn{display:none}
.spsp-hdw:not(.is-js) .spsp-burger{display:block}
.spsp-sv-h{grid-template-columns:64px 1fr 56px}
.spsp-sv-s{display:none}
.spsp-sv-c{grid-template-columns:64px 1fr}
.spsp-sv-c>*{grid-column:2}
.spsp-sv-c>i{display:none}
.spsp-det{margin:10px 0 0}
}

/* ================================= phones (767) ================================= */
@media(max-width:767px){
:root{--spsp-hd:66px;--spsp-r:22px}
.spsp{font-size:16px}
.spsp-logo img{height:min(var(--spsp-logo-h,38px),32px)}
.admin-bar .spsp-hdw.is-fixed .spsp-hd,.admin-bar .spsp-prog{top:46px}
.spsp-sv-h{grid-template-columns:44px 1fr 44px;gap:14px}
.spsp-sv-n{width:40px;height:40px;font-size:13.5px}
.spsp-sv-x{width:44px;height:44px}
.spsp-sv-c{grid-template-columns:1fr;padding-top:0}
.spsp-sv-c>*{grid-column:1}
.spsp .spsp-sv-c p{font-size:17px}
.spsp-sv-l{columns:1}
.spsp-det{width:104px;height:104px}
.spsp-cases{grid-template-columns:1fr}
.spsp-case[data-off]{margin-top:0}
.spsp-stage,.spsp-case.wide .spsp-stage{aspect-ratio:1/.86;padding:54px 6.5% 0}
.spsp-tag{left:14px;top:14px}
.spsp-case-m{flex-direction:column;gap:4px}
.spsp-fchip{display:none}
.spsp-bw.is-tilt{perspective:none}
.spsp-bw .spsp-bw-f,.spsp-bw.is-tilt .spsp-bw-f,.spsp-bw.is-tilt.is-js:not(.in) .spsp-bw-f,.spsp-bw.is-tilt:hover .spsp-bw-f{width:100%;max-width:100%;transform:none}
.spsp-bw.is-mcrop .spsp-bw-v img{aspect-ratio:4/3.1;object-fit:cover;object-position:0 0}
.spsp-qnav .bar{display:none}
.spsp-btn{height:54px}
.spsp-btn-sm{height:46px}
.spsp-ll-r small{width:min(var(--spsp-ll-lw,110px),80px)}
.e-con.spsp-sticky-yes{position:relative;top:auto}
}

@media(hover:none){.spsp-cur{display:none}}

@media(prefers-reduced-motion:reduce){
.spsp-mq-tr,.spsp-fchip,.spsp-big .spsp-star,.spsp-hl.is-reveal .l{animation:none}
.spsp-rot b,.spsp-rot b.is-on,.spsp-rot b.is-out{transition:none}
.animated.spspRise,.animated.spspFade{animation:none}
}

/* Elementor editor: nothing may hide or cover the page while it is being edited */
.elementor-editor-active .spsp-hdw.is-fixed .spsp-hd{position:absolute}
.elementor-editor-active .spsp-prog{display:none}
.elementor-editor-active .spsp-svs .spsp-sv-b{grid-template-rows:1fr}
.elementor-editor-active .spsp-st.is-split .w{color:inherit}
.elementor-editor-active .spsp-st.is-split .pic{opacity:1;transform:none}

@media print{
.spsp-hd,.spsp-prog,.spsp-cur,.spsp-menu{display:none}
}