/* ============================================================
   VOLT — motion layer
   Attaches to the existing VOLT Sections markup. No widget was
   rewritten: volt-motion.js tags the DOM on load and this file
   styles those tags. Remove both files and the site renders
   exactly as before.
   ============================================================ */

/* ---------- 1. LOADER ---------- */
#volt-loader{position:fixed;inset:0;z-index:99999;background:var(--violet-deep);color:#fff;display:flex;align-items:flex-end;justify-content:space-between;padding:44px 36px}
#volt-loader.done{transform:translateY(-100%);transition:transform .9s cubic-bezier(.76,0,.24,1)}
#volt-loader .vl-mark,#volt-loader .vl-num{font-family:var(--disp);font-size:clamp(34px,7vw,92px);font-weight:700;letter-spacing:-3.5px;line-height:.85}
#volt-loader .vl-mark em{font-style:normal;color:var(--lime)}
#volt-loader .vl-num{font-variant-numeric:tabular-nums}
#volt-loader .vl-meta{position:absolute;top:40px;left:36px;font-size:11px;letter-spacing:2.4px;text-transform:uppercase;color:#86b8a1}
#volt-loader .vl-bar{position:absolute;left:0;bottom:0;height:5px;width:0;background:var(--lime)}
html.volt-loading{overflow:hidden}

/* ---------- 2. CURSOR ----------
   No mix-blend-mode: blending an element transformed every frame smears
   across backdrop-filter layers. Colour is switched explicitly instead. */
#volt-dot,#volt-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:9000;border-radius:50%;
  will-change:transform;backface-visibility:hidden;contain:layout style size}
#volt-dot{width:7px;height:7px;margin:-3.5px 0 0 -3.5px;background:var(--ink)}
#volt-ring{width:36px;height:36px;margin:-18px 0 0 -18px;border:1.5px solid var(--ink);transition:opacity .25s,border-color .25s}
#volt-ring>b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-size:10px;font-weight:700;letter-spacing:1.4px;color:var(--ink);opacity:0;transition:opacity .2s}
#volt-ring.label>b{opacity:1}
body.vcur-lite #volt-dot{background:var(--lime)}
body.vcur-lite #volt-ring{border-color:var(--lime)}
body.vcur-lite #volt-ring>b{color:var(--lime)}
body.vcur-on,body.vcur-on a,body.vcur-on button{cursor:none}
@media(hover:none),(pointer:coarse){#volt-dot,#volt-ring{display:none}}

/* ---------- 3. HERO ----------
   The stock hero is LIGHT with ink-coloured type. The WebGL canvas is
   dark, so the moment it is inserted the JS also adds .volt-hero-dark
   and every text colour flips to the light palette. Without this pairing
   you get black type on a dark violet grid — unreadable. */
.hero{position:relative;overflow:hidden}
#volt-gl{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.hero>.wrap{position:relative;z-index:2}

.hero.volt-hero-dark{background:var(--violet-deep);border-bottom-color:var(--ink)}
.hero.volt-hero-dark h1{color:#fff}
.hero.volt-hero-dark h1 .vi{color:var(--violet);-webkit-text-stroke:1.5px rgba(255,255,255,.5)}
.hero.volt-hero-dark h1 .out{-webkit-text-stroke:2px var(--lime);color:transparent}
.hero.volt-hero-dark .hero-left>p,.hero.volt-hero-dark p{color:#cbeede}
.hero.volt-hero-dark .hero-flag{background:rgba(198,242,78,.12);border-color:rgba(198,242,78,.42);color:var(--lime)}
.hero.volt-hero-dark .hero-flag .dot{background:var(--lime)}
.hero.volt-hero-dark .btn-out{color:#fff;border-color:rgba(255,255,255,.5)}
.hero.volt-hero-dark .btn-out::before{background:#fff}
.hero.volt-hero-dark .btn-out:hover{color:var(--ink);border-color:#fff}
/* chips and browser mock keep their light cards — they read as UI on top */
.hero.volt-hero-dark .hv-browser{box-shadow:10px 10px 0 rgba(0,0,0,.45)}
.hero.volt-hero-dark .hv-chip{box-shadow:5px 5px 0 var(--lime)}
.hero.volt-hero-dark .hero-strip{border-top-color:rgba(255,255,255,.18)}
.hero.volt-hero-dark .hero-strip .cell{border-right-color:rgba(255,255,255,.18);color:#cbeede}
.hero.volt-hero-dark .hero-strip .cell strong,.hero.volt-hero-dark .hero-strip .cell b{color:#fff}
/* masked line reveal on the headline */
.hero h1 .vline{display:block;overflow:hidden}
.hero h1 .vline>span{display:block;transform:translateY(106%);transition:transform 1s cubic-bezier(.76,0,.24,1)}
.volt-ready .hero h1 .vline>span{transform:translateY(0)}
.volt-ready .hero h1 .vline:nth-child(2)>span{transition-delay:.09s}
.volt-ready .hero h1 .vline:nth-child(3)>span{transition-delay:.18s}
.hero .hero-flag,.hero>.wrap p,.hero .hero-btns,.hero .hero-visual{opacity:0;transform:translateY(22px);transition:opacity .9s .35s,transform .9s .35s}
.volt-ready .hero .hero-flag,.volt-ready .hero>.wrap p,.volt-ready .hero .hero-btns,.volt-ready .hero .hero-visual{opacity:1;transform:none}
.volt-ready .hero>.wrap p{transition-delay:.48s}
.volt-ready .hero .hero-btns{transition-delay:.6s}
.volt-ready .hero .hero-visual{transition-delay:.72s}
/* chips drift at different depths while the hero is on screen */
.hero .hv-chip,.hero .hv-browser{will-change:transform}

/* ---------- 4. TRUST STRIP → marquee ---------- */
.trust-strip.volt-marquee{overflow:hidden;white-space:nowrap}
.trust-strip.volt-marquee>.wrap{max-width:none;padding:0;display:block}
.trust-strip.volt-marquee .vm-run{display:inline-flex;align-items:center;gap:44px;animation:volt-run 34s linear infinite;will-change:transform}
.trust-strip.volt-marquee:hover .vm-run{animation-play-state:paused}
@keyframes volt-run{to{transform:translateX(-50%)}}
.trust-strip.volt-marquee .ts{display:inline-flex;align-items:center;gap:44px;white-space:nowrap}
.trust-strip.volt-marquee .divi{display:none}

/* ---------- 5. REVEALS + STAGGER ---------- */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .85s cubic-bezier(.33,1,.68,1),transform .85s cubic-bezier(.33,1,.68,1)}
.reveal.in{opacity:1;transform:none}
/* children of a revealed grid come in one at a time */
[data-vstagger]>*{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.33,1,.68,1),transform .7s cubic-bezier(.33,1,.68,1)}
[data-vstagger].in>*{opacity:1;transform:none}
[data-vstagger].in>*:nth-child(1){transition-delay:.05s}
[data-vstagger].in>*:nth-child(2){transition-delay:.14s}
[data-vstagger].in>*:nth-child(3){transition-delay:.23s}
[data-vstagger].in>*:nth-child(4){transition-delay:.32s}
[data-vstagger].in>*:nth-child(5){transition-delay:.41s}
[data-vstagger].in>*:nth-child(6){transition-delay:.5s}

/* ---------- 6. SHOWCASE — clip wipe ---------- */
.work-card .work-thumb{clip-path:inset(0 0 100% 0);transition:clip-path 1s cubic-bezier(.76,0,.24,1)}
.work-grid.in .work-card:nth-child(1) .work-thumb{clip-path:inset(0 0 0 0);transition-delay:.05s}
.work-grid.in .work-card:nth-child(2) .work-thumb{clip-path:inset(0 0 0 0);transition-delay:.16s}
.work-grid.in .work-card:nth-child(3) .work-thumb{clip-path:inset(0 0 0 0);transition-delay:.27s}
.work-grid.in .work-card:nth-child(4) .work-thumb{clip-path:inset(0 0 0 0);transition-delay:.38s}
.work-card .work-thumb img{transition:transform .8s cubic-bezier(.33,1,.68,1)}
.work-card:hover .work-thumb img{transform:scale(1.07)}

/* ---------- 7. FEATURE ROWS — alternating slide ---------- */
.frow .frow-media{opacity:0;transform:translateX(46px);transition:opacity .9s cubic-bezier(.33,1,.68,1),transform .9s cubic-bezier(.33,1,.68,1)}
.frow>*:not(.frow-media){opacity:0;transform:translateX(-46px);transition:opacity .9s cubic-bezier(.33,1,.68,1),transform .9s cubic-bezier(.33,1,.68,1)}
.frow.flip .frow-media{transform:translateX(-46px)}
.frow.flip>*:not(.frow-media){transform:translateX(46px)}
.frow.in .frow-media,.frow.in>*:not(.frow-media){opacity:1;transform:none}
.frow-list li{opacity:0;transform:translateX(-12px);transition:opacity .5s,transform .5s}
.frow.in .frow-list li{opacity:1;transform:none}
.frow.in .frow-list li:nth-child(1){transition-delay:.22s}
.frow.in .frow-list li:nth-child(2){transition-delay:.34s}
.frow.in .frow-list li:nth-child(3){transition-delay:.46s}

/* ---------- 8. PROCESS — drawn connector ---------- */
.lp-steps{position:relative}
.lp-steps .volt-track{position:absolute;top:38px;left:9%;right:9%;height:2px;background:var(--line-2);z-index:0}
.lp-steps .volt-track i{display:block;height:100%;width:0;background:var(--violet);transition:width 1.7s cubic-bezier(.33,1,.68,1)}
.lp-steps.in .volt-track i{width:100%}
.lp-steps .st{position:relative;z-index:1}
.lp-steps .n{transition:background .45s,color .45s}
.lp-steps.in .st:nth-child(2) .n{transition-delay:.35s}
.lp-steps.in .st:nth-child(3) .n{transition-delay:.85s}
.lp-steps.in .st:nth-child(4) .n{transition-delay:1.35s}
@media(max-width:820px){.lp-steps .volt-track{display:none}}

/* ---------- 9. PORTAL — bar fills, milestones tick in ---------- */
.pc-bar>i,.pc-bar>span{width:0;transition:width 1.8s .35s cubic-bezier(.33,1,.68,1)}
.portal-card.in .pc-bar>i,.portal-card.in .pc-bar>span{width:var(--vpct,64%)}
.pcs{opacity:0;transform:translateX(-14px);transition:opacity .55s,transform .55s}
.portal-card.in .pcs{opacity:1;transform:none}
.portal-card.in .pcs:nth-child(1){transition-delay:.1s}
.portal-card.in .pcs:nth-child(2){transition-delay:.2s}
.portal-card.in .pcs:nth-child(3){transition-delay:.3s}
.portal-card.in .pcs:nth-child(4){transition-delay:.4s}
.portal-card.in .pcs:nth-child(5){transition-delay:.5s}

/* ---------- 10. COUNTERS ---------- */
[data-vcount]{font-variant-numeric:tabular-nums}

/* ---------- 11. PARALLAX GHOST TYPE ---------- */
.volt-ghost{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--disp);font-weight:700;letter-spacing:-11px;white-space:nowrap;pointer-events:none;z-index:0;will-change:transform;
  font-size:clamp(90px,20vw,240px);color:rgba(16,25,20,.06)}
.cta-band{position:relative;overflow:hidden}
.cta-band>.wrap{position:relative;z-index:2}
.cta-band .volt-ghost{color:rgba(255,255,255,.045)}
.promo{position:relative;overflow:hidden}
.promo>.wrap,.promo .pz-cta{position:relative;z-index:2}

/* ---------- 12. MAGNETIC BUTTONS + LINK WIPE ---------- */
.btn{will-change:transform}
.volt-nlink{position:relative}
.volt-nlink::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .38s cubic-bezier(.76,0,.24,1)}
.volt-nlink:hover::after{transform:scaleX(1);transform-origin:left}

/* ---------- 13. TESTIMONIALS — drift ---------- */
.testi-grid.volt-drift{display:flex!important;gap:22px;width:max-content;grid-template-columns:none!important;animation:volt-run 46s linear infinite}
.testi.volt-driftwrap{overflow:hidden}
.testi.volt-driftwrap:hover .testi-grid.volt-drift{animation-play-state:paused}
.testi-grid.volt-drift .testi-card{width:380px;flex:none}

/* ---------- 14. SERVICE CARD SWEEP ---------- */
.svc{position:relative;overflow:hidden;transition:transform .4s cubic-bezier(.33,1,.68,1),box-shadow .4s cubic-bezier(.33,1,.68,1)}
.svc::after{content:"";position:absolute;left:0;right:0;bottom:0;height:0;background:var(--lime);transition:height .45s cubic-bezier(.76,0,.24,1);z-index:0}
.svc:hover::after{height:100%}
.svc>*{position:relative;z-index:1}
.svc:hover{transform:translate(-5px,-5px);box-shadow:10px 10px 0 var(--ink)}

/* ---------- 15. REDUCED MOTION — unwind everything ---------- */
@media(prefers-reduced-motion:reduce){
  #volt-loader,#volt-dot,#volt-ring{display:none!important}
  html.volt-loading{overflow:auto}
  body.vcur-on,body.vcur-on a,body.vcur-on button{cursor:auto}
  .hero h1 .vline>span,.hero .hero-flag,.hero>.wrap p,.hero .hero-btns,.hero .hero-visual,
  .reveal,[data-vstagger]>*,.frow .frow-media,.frow>*:not(.frow-media),.frow-list li,.pcs{
    opacity:1!important;transform:none!important;transition:none!important}
  .work-card .work-thumb{clip-path:none!important}
  .trust-strip.volt-marquee .vm-run,.testi-grid.volt-drift{animation:none!important}
  .testi-grid.volt-drift{flex-wrap:wrap;width:auto;justify-content:center}
  .lp-steps .volt-track i,.pc-bar>i,.pc-bar>span{transition:none!important}
  .volt-ghost{display:none}
  .hero .hv-chip,.hero .hv-browser{transform:none!important}
}


/* ============================================================
   EDITOR / STATIC MODE
   Elementor's canvas loads this stylesheet so the editor matches the
   live site, but volt-motion.js runs in static mode there: no loader,
   no cursor, no WebGL, everything already revealed.
   ============================================================ */
body.volt-static #volt-loader,body.volt-static #volt-dot,body.volt-static #volt-ring{display:none!important}
body.volt-static .reveal,
body.volt-static [data-vstagger]>*,
body.volt-static .frow .frow-media,
body.volt-static .frow>*:not(.frow-media),
body.volt-static .frow-list li,
body.volt-static .pcs,
body.volt-static .hero h1 .vline>span,
body.volt-static .hero .hero-flag,
body.volt-static .hero>.wrap p,
body.volt-static .hero .hero-btns,
body.volt-static .hero .hero-visual{opacity:1!important;transform:none!important;transition:none!important}
body.volt-static .work-card .work-thumb{clip-path:none!important}
body.volt-static .lp-steps .volt-track i{width:100%}
body.volt-static .trust-strip.volt-marquee .vm-run,body.volt-static .testi-grid.volt-drift{animation:none!important}
body.volt-static.vcur-on,body.volt-static.vcur-on a,body.volt-static.vcur-on button{cursor:auto}