:root{
  /* surfaces */
  --pit:#03050a;
  --void:#05070c;
  --slab:#0a0e17;
  --slab-2:#0e1420;
  --slab-3:#131b2b;

  /* lines */
  --line:rgba(144,172,235,.10);
  --line-2:rgba(144,172,235,.20);
  --line-3:rgba(144,172,235,.34);

  /* brand */
  --bolt:#004BFD;
  --bolt-2:#3d7bff;
  --bolt-3:#8fb6ff;
  --bolt-glow:rgba(0,75,253,.42);
  --amber:#ffb020;

  /* ink */
  --paper:#eef2f9;
  --paper-2:#c3ccdd;
  --dust:#8b95ac;
  --dust-2:#666f84;

  /* type */
  --display:'Poppins',system-ui,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',monospace;

  /* metrics */
  --nav-h:76px;
  --gut:clamp(18px,4vw,44px);
  --wrap:1400px;
  --r-s:10px;
  --r-m:16px;
  --r-l:24px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
html:focus-within{scroll-behavior:smooth}

body{
  background:var(--void);
  color:var(--paper);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.is-locked{overflow:hidden}

img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
::selection{background:var(--bolt);color:#fff}

:focus-visible{
  outline:2px solid var(--bolt-2);
  outline-offset:3px;
  border-radius:4px;
}

/* --------------------------------------------------------------------------
   1. STAGE — the living background (fixed, GPU only, never blocks input)
   -------------------------------------------------------------------------- */
.stage{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% -10%,#0c1526 0%,transparent 60%),
    linear-gradient(180deg,#05070c 0%,#04060b 40%,#03050a 100%);
}
/* blueprint grid — the studio's drafting table */
.stage-grid{
  position:absolute;
  inset:-20%;
  background-image:
    linear-gradient(rgba(120,160,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(120,160,255,.055) 1px,transparent 1px);
  background-size:76px 76px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 35%,#000 5%,transparent 78%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 35%,#000 5%,transparent 78%);
  transform:translate3d(0,0,0);
}
.stage-grid::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(120,160,255,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(120,160,255,.10) 1px,transparent 1px);
  background-size:380px 380px;
  -webkit-mask-image:radial-gradient(ellipse 60% 55% at 50% 40%,#000 5%,transparent 72%);
  mask-image:radial-gradient(ellipse 60% 55% at 50% 40%,#000 5%,transparent 72%);
}
.bloom{
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  will-change:transform;
  mix-blend-mode:screen;
}
.bloom-a{
  width:60vw;height:60vw;max-width:900px;max-height:900px;
  left:-10vw;top:-22vw;
  background:radial-gradient(circle,rgba(0,75,253,.34) 0%,transparent 66%);
  animation:driftA 22s var(--ease) infinite alternate;
  animation-delay:0s;
}
.bloom-b{
  width:52vw;height:52vw;max-width:820px;max-height:820px;
  right:-14vw;top:26%;
  background:radial-gradient(circle,rgba(0,60,200,.26) 0%,transparent 66%);
  animation:driftB 27s var(--ease) infinite alternate;
  animation-delay:-9s;
}
.bloom-c{
  width:46vw;height:46vw;max-width:720px;max-height:720px;
  left:22%;bottom:-24vw;
  background:radial-gradient(circle,rgba(30,90,255,.18) 0%,transparent 68%);
  animation:driftC 30s var(--ease) infinite alternate-reverse;
  animation-delay:-17s;
}
@keyframes driftA{
  0%{transform:translate3d(0,0,0) scale(.88);opacity:.75}
  50%{transform:translate3d(3vw,3.5vh,0) scale(1.28);opacity:1}
  100%{transform:translate3d(6vw,7vh,0) scale(1.4);opacity:.92}
}
@keyframes driftB{
  0%{transform:translate3d(0,0,0) scale(.9);opacity:.7}
  50%{transform:translate3d(-3.5vw,-3vh,0) scale(1.25);opacity:1}
  100%{transform:translate3d(-7vw,-6vh,0) scale(1.35);opacity:.9}
}
@keyframes driftC{
  0%{transform:translate3d(0,0,0) scale(.85);opacity:.65}
  50%{transform:translate3d(-2vw,-3vh,0) scale(1.3);opacity:.95}
  100%{transform:translate3d(-4vw,-6vh,0) scale(1.45);opacity:.85}
}

/* scroll-reactive halo — follows how far down the page you are */
.stage-halo{
  position:absolute;
  left:50%;
  top:var(--halo-y,40%);
  width:140vw;height:70vh;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center,rgba(0,75,253,.15) 0%,transparent 62%);
  transition:top .9s var(--ease-out);
  will-change:top,transform;
  animation:haloGrow 12s ease-in-out infinite;
  animation-delay:-5s;
}
@keyframes haloGrow{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%{transform:translate(-50%,-50%) scale(1.18)}
}
.stage-grain{
  position:absolute;
  inset:0;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.stage-vig{
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 90% 80% at 50% 40%,transparent 40%,rgba(0,0,0,.55) 100%);
}

/* cursor spotlight (desktop pointers only) */
.spot{
  position:fixed;
  z-index:1;
  width:520px;height:520px;
  margin:-260px 0 0 -260px;
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle,rgba(0,75,253,.16) 0%,transparent 62%);
  transition:opacity .5s ease;
  will-change:transform;
}
body.pointer-fine .spot{opacity:1}

/* --------------------------------------------------------------------------
   2. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.page{position:relative;z-index:2}
.wrap{
  width:100%;
  min-width:0;
  max-width:var(--wrap);
  margin-inline:auto;
}
.new-sect{
  padding-inline: clamp(18px,4vw,29px);
}
.new-sty{
  width:100%;
  min-width:0;
  max-width: 1450px;
  margin-inline:auto;
}
.new-foot{
  width:100%;
  min-width:0;
  max-width: 1200px;
  margin-inline:auto;
}
	
.sec{
  position:relative;
  padding-block:clamp(72px,9vw,136px);
}
.sec-tight{padding-block:clamp(56px,6vw,92px)}
.sec-line::before{
  content:"";
  position:absolute;
  inset-inline:0;
  top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--line-2) 18%,var(--line-3) 50%,var(--line-2) 82%,transparent);
}

/* --------------------------------------------------------------------------
   3. TYPE SCALE
   -------------------------------------------------------------------------- */
.display{
  font-family:var(--display);
  font-weight:800;
  font-stretch:112%;
  line-height:.94;
  letter-spacing:-.025em;
  text-transform:uppercase;
}
h1.display{font-size:clamp(2.05rem,7.6vw,5.6rem)}
h2.display{font-size:clamp(1.65rem,4.6vw,3.5rem)}
h3.display{font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.05}

.lede{
  font-size:clamp(1rem,1.25vw,1.125rem);
  color:var(--paper);
  max-width:56ch;
  line-height:1.68;
}
.blue{color:var(--bolt-2)}
.grad{
  background:linear-gradient(96deg,#fff 8%,var(--bolt-3) 52%,var(--bolt-2) 96%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* eyebrow — braces are the logo's own device, so labels wear them */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--mono);
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#fff;
}
.eyebrow::before{content:"{";color:#fff;font-weight:700}
.eyebrow::after{content:"}";color:#fff;font-weight:700}
.eyebrow-dot{
  width:5px;height:5px;
  border-radius:50%;
  background:var(--bolt-2);
  box-shadow:0 0 0 3px rgba(0,75,253,.22);
  animation:pulseDot 2.6s ease-in-out infinite;
}
@keyframes pulseDot{50%{box-shadow:0 0 0 7px rgba(0,75,253,0)}}

.mono-label{
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--paper);
}

.sec-head{max-width:760px}
.sec-head h2{margin:18px 0 0}
.sec-head .lede{margin-top:20px}
.sec-head-center{margin-inline:auto;text-align:center}
.sec-head-center .lede{margin-inline:auto}

/* --------------------------------------------------------------------------
   4. LOGO — the mark is the identity, so it gets its own component
   -------------------------------------------------------------------------- */
.mark{
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
}
.mark .mk-brace{fill:var(--paper);transition:fill .45s var(--ease)}
.mark .mk-arm{
  fill:var(--bolt);
  transform-origin:62% 60%;
  transition:transform .5s var(--ease-out),filter .5s var(--ease);
}
/* the flex — a bicep that tightens when you touch it */
.flex-on-hover:hover .mk-arm,
.flex-on-hover:focus-visible .mk-arm{
  transform:scale(1.09) rotate(-5deg);
  filter:drop-shadow(0 0 14px var(--bolt-glow));
}
.flex-on-hover:hover .mk-brace,
.flex-on-hover:focus-visible .mk-brace{fill:#fff}

.wordmark .wm-blue{fill:var(--bolt)}
.wordmark .wm-white{fill:var(--paper)}

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn{
  --btn-bg:transparent;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:15px 26px;
  border-radius:999px;
  font-family:var(--body);
  font-size:.9rem;
  font-weight:600;
  letter-spacing:.01em;
  white-space:nowrap;
  isolation:isolate;
  overflow:hidden;
  transition:transform .4s var(--ease-out),box-shadow .4s var(--ease),border-color .4s var(--ease),color .3s var(--ease);
}
.btn i{font-style:normal;transition:transform .4s var(--ease-out)}
.btn:hover{transform:translateY(-2px)}
.btn:hover i{transform:translate(3px,-3px)}
.btn:active{transform:translateY(0)}

.btn-primary{
  background:linear-gradient(180deg,var(--bolt-2),var(--bolt));
  color:#fff;
  border:1px solid rgba(120,160,255,.5);
  box-shadow:0 10px 30px -12px var(--bolt-glow),inset 0 1px 0 rgba(255,255,255,.28);
}
/* sheen sweep */
.btn-primary::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.32) 48%,transparent 62%);
  transform:translateX(-120%);
  transition:transform .75s var(--ease-out);
}
.btn-primary:hover::after{transform:translateX(120%)}
.btn-primary:hover{box-shadow:0 18px 44px -14px var(--bolt-glow),inset 0 1px 0 rgba(255,255,255,.34)}

.btn-ghost{
  background:rgba(255,255,255,.03);
  border:1px solid var(--line-2);
  color:var(--paper-2);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.btn-ghost:hover{
  border-color:var(--bolt);
  color:#fff;
  box-shadow:0 12px 34px -18px var(--bolt-glow);
}

.btn-lg{padding:17px 32px;font-size:.95rem}
.btn-sm{padding:11px 18px;font-size:.82rem}

/* text link with a rule that grows */
.link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.86rem;
  font-weight:600;
  color:var(--bolt-3);
}
.link i{font-style:normal;transition:transform .35s var(--ease-out)}
.link:hover i{transform:translateX(4px)}
.link::before{
  content:"";
  width:0;
  height:1px;
  background:var(--bolt-2);
  transition:width .4s var(--ease-out);
}
.link:hover::before{width:18px}

/* --------------------------------------------------------------------------
   6. PANELS / CARDS — one shared surface language
   -------------------------------------------------------------------------- */
.panel{
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--r-l);
  background:
    linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012)),
    rgba(10,14,23,.62);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 30px 60px -40px rgba(0,0,0,.9);
  overflow:hidden;
}
/* a hairline of brand light along the top edge */
.panel::before{
  content:"";
  position:absolute;
  inset-inline:12%;
  top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--line-3),transparent);
  opacity:.7;
  transition:opacity .5s var(--ease),inset-inline .5s var(--ease);
}
.panel-hover{transition:transform .5s var(--ease-out),border-color .5s var(--ease),box-shadow .5s var(--ease)}
.panel-hover:hover{
  transform:translateY(-6px);
  border-color:var(--line-2);
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 44px 80px -46px rgba(0,0,0,1),0 0 0 1px rgba(0,75,253,.12);
}
.panel-hover:hover::before{inset-inline:0}

/* pointer-tracked glow used on grid cards */
.glow-card{position:relative}
.glow-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  transition:opacity .45s var(--ease);
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(0,75,253,.16),transparent 62%);
}
.glow-card:hover::after{opacity:1}

.tag{
  display:inline-flex;
  align-items:center;
  padding:6px 11px;
  border:1px solid var(--bolt-glow);
  border-radius:999px;
  background:rgba(255,255,255,.03);
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.06em;
  color:var(--paper);
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.panel-hover:hover .tag{border-color:var(--line-2);color:var(--paper-2)}

/* --------------------------------------------------------------------------
   7. SCROLL REVEAL — one system, IntersectionObserver driven
   -------------------------------------------------------------------------- */
.rv{
  opacity:0;
  transform:translate3d(0,26px,0);
  filter:blur(6px);
  transition:opacity .85s var(--ease-out),transform .85s var(--ease-out),filter .85s var(--ease-out);
  transition-delay:var(--d,0ms);
  will-change:opacity,transform;
}
.rv-in{opacity:1;transform:none;filter:blur(0)}
.rv-left{transform:translate3d(-28px,0,0)}
.rv-right{transform:translate3d(28px,0,0)}
.rv-scale{transform:scale(.965)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .rv{opacity:1;transform:none;filter:none}
}

/* ==========================================================================
   8. PRELOADER — the mark draws itself, then flexes, then lifts away
   ========================================================================== */
#loader{
  position:fixed;
  inset:0;
  z-index:120;
  display:grid;
  place-items:center;
  background:
    radial-gradient(70% 50% at 50% 50%,#0a1120 0%,#04060b 62%,#03050a 100%);
  transition:opacity .6s var(--ease),visibility .6s;
}
#loader.done{opacity:0;visibility:hidden}
.ld-inner{
  display:grid;
  justify-items:center;
  gap:26px;
  transform:translateY(-2vh);
}
.ld-mark{
  position:relative;
  width:clamp(92px,13vw,132px);
  aspect-ratio:100/72.65;
}
.ld-mark .ld-outline{
  position:absolute;
  inset:0;
}
.ld-outline path{
  fill:none;
  stroke:var(--bolt-2);
  stroke-width:.7;
  stroke-dasharray:var(--len,900);
  stroke-dashoffset:var(--len,900);
  animation:draw 1s var(--ease-out) forwards;
}
.ld-outline path:nth-child(2){animation-delay:.16s}
@keyframes draw{to{stroke-dashoffset:0}}

.ld-mark .ld-fill{
  position:absolute;
  inset:0;
  opacity:0;
  animation:fillIn .5s var(--ease-out) .82s forwards;
}
@keyframes fillIn{
  0%{opacity:0;transform:scale(.96)}
  100%{opacity:1;transform:scale(1)}
}
.ld-fill .mk-arm{animation:flexPop .55s var(--ease-out) 1.12s both}
@keyframes flexPop{
  0%{transform:scale(1) rotate(0)}
  45%{transform:scale(1.14) rotate(-7deg)}
  100%{transform:scale(1) rotate(0)}
}
.ld-halo{
  position:absolute;
  inset:-70%;
  border-radius:50%;
  background:radial-gradient(circle,var(--bolt-glow),transparent 62%);
  opacity:0;
  filter:blur(30px);
  animation:halo 1.1s var(--ease) 1.05s both;
}
@keyframes halo{
  0%{opacity:0;transform:scale(.6)}
  40%{opacity:.9}
  100%{opacity:.25;transform:scale(1)}
}
.ld-word{
  width:clamp(150px,20vw,210px);
  opacity:0;
  animation:riseIn .7s var(--ease-out) 1.15s forwards;
}
@keyframes riseIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ld-bar{
  position:relative;
  width:clamp(150px,20vw,210px);
  height:2px;
  border-radius:2px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
}
.ld-bar i{
  position:absolute;
  inset:0;
  transform-origin:left;
  transform:scaleX(0);
  background:linear-gradient(90deg,var(--bolt),var(--bolt-3));
  animation:load 1.55s var(--ease-out) forwards;
}
@keyframes load{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
.ld-status{
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--dust-2);
}

/* ==========================================================================
   9. HEADER — glass rail, magnetic mark, live section indicator
   ========================================================================== */
.hdr{
  position:fixed;
  inset-inline:0;
  top:0;
  z-index:60;
  padding:14px var(--gut) 0;
  transition:padding .45s var(--ease);
}
.hdr-inner{
  display:flex;
  align-items:center;
  gap:20px;
  max-width:var(--wrap);
  margin-inline:auto;
  height:var(--nav-h);
  padding:0 12px 0 20px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(6,9,16,.55);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  transition:height .45s var(--ease),background .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease);
}
.hdr.stuck{padding-top:8px}
.hdr.stuck .hdr-inner{
  height:62px;
  background:rgba(5,7,12,.82);
  border-color:var(--line-2);
  box-shadow:0 18px 50px -30px rgba(0,0,0,1),0 0 0 1px rgba(0,75,253,.07);
}

.brand{
  display:flex;
  align-items:center;
  gap:11px;
  flex:0 0 auto;
  will-change:transform;
  transition:transform .35s var(--ease-out);
}
.brand-mark{
  width:34px;
  aspect-ratio:100/72.65;
  filter:drop-shadow(0 0 12px rgba(0,75,253,.35));
}
.brand-word{width:112px;transition:opacity .3s var(--ease)}

.nav{
  display:flex;
  align-items:center;
  gap:2px;
  margin-inline:auto;
}
.nav a{
  position:relative;
  padding:10px 14px;
  border-radius:999px;
  font-family:var(--mono);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--dust);
  transition:color .3s var(--ease),background .3s var(--ease);
}
.nav a::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:4px;
  width:0;
  height:2px;
  border-radius:2px;
  background:var(--bolt-2);
  transform:translateX(-50%);
  box-shadow:0 0 10px var(--bolt-glow);
  transition:width .35s var(--ease-out);
}
.nav a:hover{color:var(--paper);background:rgba(255,255,255,.035)}
.nav a:hover::after{width:14px}
.nav a.on{color:#fff}
.nav a.on::after{width:20px}

.hdr-cta{flex:0 0 auto}
.hdr-burger{
  display:none;
  width:44px;height:44px;
  margin-left:auto;
  border:1px solid var(--line);
  border-radius:50%;
  background:rgba(255,255,255,.03);
  place-items:center;
  align-content:center;
}
.hdr-burger span{
  display:block;
  width:16px;height:1.5px;
  border-radius:2px;
  background:var(--paper);
  transition:transform .4s var(--ease-out),opacity .3s var(--ease);
}
.hdr-burger span+span{margin-top:4px}
body.menu-open .hdr-burger span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
body.menu-open .hdr-burger span:nth-child(2){opacity:0}
body.menu-open .hdr-burger span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* scroll progress hairline under the rail */
.hdr-progress{
  position:absolute;
  left:var(--gut);
  right:var(--gut);
  bottom:-1px;
  height:1px;
  max-width:var(--wrap);
  margin-inline:auto;
  background:transparent;
  overflow:hidden;
}
.hdr-progress i{
  display:block;
  height:100%;
  width:100%;
  transform-origin:left;
  transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,var(--bolt),var(--bolt-3));
  box-shadow:0 0 12px var(--bolt-glow);
}

/* mobile drawer */
.drawer{
  position:fixed;
  inset:0;
  z-index:55;
  display:grid;
  align-content:start;
  gap:4px;
  padding:calc(var(--nav-h) + 46px) var(--gut) 40px;
  background:rgba(3,5,10,.96);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px);
  transition:opacity .4s var(--ease),transform .4s var(--ease-out),visibility .4s;
}
body.menu-open .drawer{opacity:1;visibility:visible;transform:none}
.drawer a{
  display:flex;
  align-items:baseline;
  gap:14px;
  padding:16px 0;
  border-bottom:1px solid var(--line);
  font-family:var(--display);
  font-weight:800;
  font-stretch:110%;
  font-size:1.65rem;
  text-transform:uppercase;
  letter-spacing:-.01em;
}
.drawer a em{
  font:500 .68rem/1 var(--mono);
  font-style:normal;
  color:var(--bolt-2);
  letter-spacing:.1em;
}
.drawer .btn{
  margin-top:26px;
  justify-content:center;
  border-bottom:0;
  font-family:var(--body);
  font-weight:600;
  font-stretch:100%;
  font-size:.95rem;
  letter-spacing:.01em;
  text-transform:none;
}

/* ==========================================================================
   10. HERO
   ========================================================================== */
.hero{
  position:relative;
  min-height:min(100svh,900px);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:center;
  padding-top:calc(var(--nav-h) + 68px);
  padding-bottom:clamp(60px,8vw,110px);
  overflow:hidden;
}
/* the mark, blown up as a watermark behind the statement */
.hero-mark{
  position:absolute;
  right:-6%;
  top:46%;
  width:min(58vw,760px);
  aspect-ratio:100/72.65;
  transform:translateY(-50%);
  opacity:.07;
  pointer-events:none;
  will-change:transform;
}
.hero-mark .mk-brace{fill:#5f7db8}
.hero-mark .mk-arm{fill:var(--bolt-2)}

.hero-inner{position:relative;z-index:2;min-width:0;max-width:1000px}
.hero h1{margin:22px 0 0}
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .line>span{
  display:block;
  transform:translateY(102%);
  animation:lineUp 1s var(--ease-out) forwards;
}
.hero h1 .line:nth-child(2)>span{animation-delay:.1s}
.hero h1 .line:nth-child(3)>span{animation-delay:.2s}
@keyframes lineUp{to{transform:none}}

.hero-proof{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:26px;
}
.avatars{display:flex}
.avatars img{
  width:34px;height:34px;
  border-radius:50%;
  border:2px solid #0a0e17;
  object-fit:cover;
  margin-left:-10px;
  transition:transform .4s var(--ease-out);
}
.avatars img:first-child{margin-left:0}
.avatars:hover img{transform:translateY(-3px)}
.stars{color:var(--bolt-3);font-size:.8rem;letter-spacing:.14em}
.proof-txt{font-size:.82rem;color:var(--dust)}

.hero .lede{margin-top:28px;font-size:clamp(1.02rem,1.35vw,1.2rem);max-width:60ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}

/* marquee of what we build */
.hero-strip{
  position:relative;
  margin-top:clamp(48px,7vw,86px);
  padding-top:26px;
  border-top:1px solid var(--line);
}
.strip-label{margin-bottom:18px}
.marquee{
  position:relative;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{
  display:flex;
  gap:56px;
  width:max-content;
  animation:slide 34s linear infinite;
}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.marquee-item{
  display:flex;
  align-items:center;
  gap:11px;
  font-family:var(--display);
  font-weight:700;
  font-stretch:108%;
  font-size:1.05rem;
  text-transform:uppercase;
  letter-spacing:.01em;
  color:var(--paper);
  white-space:nowrap;
  transition:color .3s var(--ease);
}
.marquee-item:hover{color:var(--dust-2)}
.marquee-item b{color:var(--bolt);font-size:1.2rem;line-height:0}

/* ==========================================================================
   11. PLATFORM GRID
   ========================================================================== */
.plat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));
  gap:20px;
  margin-top:clamp(44px,5vw,64px);
}
.plat{
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:30px;
}
.plat-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.plat-icon{
  display:grid;
  place-items:center;
  width:52px;height:52px;
  border:1px solid var(--line-2);
  border-radius:15px;
  background:linear-gradient(160deg,rgba(0,75,253,.18),rgba(255,255,255,.02));
  transition:transform .5s var(--ease-out),border-color .4s var(--ease),box-shadow .4s var(--ease);
}
.plat-icon img{width:24px;height:24px;opacity:.92}
.plat-icon span{font-family:var(--mono);font-weight:700;color:var(--bolt-3)}
.panel-hover:hover .plat-icon{
  transform:translateY(-2px) rotate(-4deg);
  border-color:var(--bolt);
  box-shadow:0 12px 30px -16px var(--bolt-glow);
}
.plat-name{
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.2em;
  color:var(--dust-2);
}
.plat h3{margin:0;font-size:1.22rem;font-weight:600;font-family:var(--body);letter-spacing:-.01em;line-height:1.3}
.plat p{font-size:.92rem;color:var(--paper);line-height:1.65}
.plat-tags{display:flex;flex-wrap:wrap;gap:7px;padding-top:6px}
.plat .link{margin-top:14px;align-self:flex-start}
.plat-featured{
  border-color:rgba(0,75,253,.28);
  background:
    radial-gradient(120% 90% at 100% 0%,rgba(0,75,253,.14),transparent 58%),
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012)),
    rgba(10,14,23,.66);
}

/* ==========================================================================
   12. RESCUE / DIAGNOSTICS TERMINAL
   ========================================================================== */
.rescue-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(28px,4vw,60px);
  align-items:center;
}
.rescue-copy .btn{margin-top:32px}
.rescue-list{display:grid;gap:10px;margin-top:26px}
.rescue-list li{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:.9rem;
  color: #fff;
  list-style:none;
}
.rescue-list li::before{
  content:"";
  width:5px;height:5px;
  border-radius:50%;
  background:var(--bolt);
  box-shadow:0 0 8px var(--bolt-glow);
  flex:0 0 auto;
}

.term{
  border-radius:var(--r-l);
  border:1px solid var(--line-2);
  background:linear-gradient(180deg,#080c14,#05080e);
  box-shadow:0 50px 90px -50px rgba(0,0,0,1),0 0 0 1px rgba(0,75,253,.08);
  overflow:hidden;
}
.term-bar{
  display:flex;
  align-items:center;
  gap:9px;
  padding:13px 18px;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.02);
}
.term-dot{width:9px;height:9px;border-radius:50%;background:#22293a}
.term-dot:nth-child(3){background:#232a3b}
.term-bar span{
  margin-left:8px;
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.08em;
  color: #fff;
}
.term-body{
  padding:22px 20px 26px;
  font-family:var(--mono);
  font-size:.78rem;
  line-height:2.1;
}
.term-body .ln{opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease),transform .4s var(--ease-out)}
.term.run .ln{opacity:1;transform:none}
.term-body .cmd{color:var(--paper)}
.term-body .cmd b{color:var(--bolt-2);margin-right:8px;font-weight:700}
.term-body .ok{color:#7fd6a3}
.term-body .warn{color:var(--amber)}
.term-body .dim{color:var(--dust-2)}
.term-status{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:14px;
  padding-top:16px;
  border-top:1px solid var(--line);
  font-size:.72rem;
  letter-spacing:.14em;
  color: #fff;
}
.term-status b{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:5px 12px;
  border-radius:999px;
  border:1px solid rgba(0,75,253,.4);
  background:rgba(0,75,253,.12);
  color:var(--bolt-3);
  font-weight:500;
}
.term-status b::before{
  content:"";
  width:6px;height:6px;
  border-radius:50%;
  background:var(--bolt-2);
  box-shadow:0 0 8px var(--bolt-2);
  animation:pulseDot 1.8s ease-in-out infinite;
}

/* ==========================================================================
   13. WORDPRESS JOURNEY — a real sequence, so numbering is earned here
   ========================================================================== */
.journey{
  display:grid;
  grid-template-columns:266px 1fr;
  gap:clamp(24px,3.5vw,52px);
  margin-top:clamp(40px,5vw,64px);
  align-items:start;
}
.jn-rail{
  position:sticky;
  top:calc(var(--nav-h) + 40px);
  padding:24px 20px;
  border:1px solid var(--line);
  border-radius:var(--r-l);
  background:rgba(8,12,20,.62);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.jn-rail-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-bottom:16px;
  margin-bottom:8px;
  border-bottom:1px solid var(--line);
}
.jn-count{
  font-family:var(--mono);
  font-size:.66rem;
  padding:4px 9px;
  border-radius:999px;
  border:1px solid rgba(0,75,253,.35);
  background:rgba(0,75,253,.12);
  color:var(--bolt-3);
}
.jn-track{position:relative;padding-left:4px}
.jn-track::before{
  content:"";
  position:absolute;
  left:18px;
  top:14px;
  bottom:14px;
  width:1px;
  background:var(--line);
}
.jn-track::after{
  content:"";
  position:absolute;
  left:18px;
  top:14px;
  width:1px;
  height:var(--progress,0%);
  background:linear-gradient(180deg,var(--bolt),var(--bolt-3));
  box-shadow:0 0 10px var(--bolt-glow);
  transition:height .5s var(--ease-out);
}
.jn-step{
  position:relative;
  display:flex;
  align-items:center;
  gap:13px;
  width:100%;
  padding:9px 10px 9px 0;
  border-radius:10px;
  text-align:left;
  transition:background .3s var(--ease);
}
.jn-step:hover{background:rgba(255,255,255,.03)}
.jn-dot{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  width:30px;height:30px;
  flex:0 0 auto;
  border:1px solid var(--line-2);
  border-radius:50%;
  background:var(--slab);
  font-family:var(--mono);
  font-size:.64rem;
  color:var(--dust-2);
  transition:all .4s var(--ease);
}
.jn-label{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--dust-2);
  transition:color .3s var(--ease);
}
.jn-step.on .jn-dot{
  border-color:var(--bolt);
  background:linear-gradient(180deg,var(--bolt-2),var(--bolt));
  color:#fff;
  box-shadow:0 0 0 4px rgba(0,75,253,.16),0 0 18px var(--bolt-glow);
}
.jn-step.on .jn-label{color:var(--paper)}

.jn-cards{display:grid;gap:20px}
.jn-card{padding:clamp(26px,3vw,40px)}
.jn-card-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:20px;
}
.jn-num{
  font-family:var(--mono);
  font-size:.7rem;
  padding:5px 10px;
  border-radius:8px;
  border:1px solid var(--line-2);
  background:rgba(0,75,253,.1);
  color:var(--bolt-3);
}
.jn-card h3{
  font-family:var(--body);
  font-weight:600;
  font-size:clamp(1.2rem,2vw,1.55rem);
  line-height:1.32;
  letter-spacing:-.015em;
  margin-bottom:14px;
}
.jn-card p{color:var(--dust);font-size:.94rem;line-height:1.72}
.jn-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.jn-note{
  display:flex;
  gap:14px;
  margin-top:24px;
  padding:18px 20px;
  border:1px solid var(--line);
  border-left:2px solid var(--bolt);
  border-radius:0 var(--r-m) var(--r-m) 0;
  background:linear-gradient(90deg,rgba(0,75,253,.09),transparent 70%);
}
.jn-note-icon{
  width:34px;height:34px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:10px;
  border:1px solid var(--line-2);
  background:rgba(0,75,253,.14);
}
.jn-note-icon svg{width:17px;height:17px;stroke:var(--bolt-3);fill:none;stroke-width:1.7}
.jn-note h4{font-size:.92rem;font-weight:600;margin-bottom:4px}
.jn-note p{font-size:.86rem;color:var(--dust);margin:0}

.jn-final{
  border-color:rgba(0,75,253,.3);
  background:
    radial-gradient(110% 80% at 0% 0%,rgba(0,75,253,.16),transparent 56%),
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012)),
    rgba(10,14,23,.7);
}
.jn-feats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));
  gap:14px;
  margin-top:26px;
}
.jn-feat{
  padding:20px;
  border:1px solid var(--line);
  border-radius:var(--r-m);
  background:rgba(255,255,255,.025);
  transition:border-color .4s var(--ease),transform .4s var(--ease-out);
}
.jn-feat:hover{border-color:var(--line-2);transform:translateY(-3px)}
.jn-feat-icon{
  display:grid;
  place-items:center;
  width:36px;height:36px;
  margin-bottom:13px;
  border-radius:10px;
  background:rgba(0,75,253,.16);
  border:1px solid rgba(0,75,253,.28);
}
.jn-feat-icon svg{width:17px;height:17px;stroke:var(--bolt-3);fill:none;stroke-width:1.7}
.jn-feat h4{font-size:.94rem;font-weight:600;margin-bottom:6px}
.jn-feat p{font-size:.84rem;color:var(--dust);line-height:1.6;margin:0}

/* ==========================================================================
   14. WORK GRID
   ========================================================================== */
.work-bar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  margin-bottom:30px;
}
.filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:clamp(28px,4vw,44px) 0 26px;
}
.filter{
  padding:9px 15px;
  border:2px solid var(--bolt-glow);
  border-radius:999px;
  background:rgba(255,255,255,.02);
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--paper);
  transition:all .35s var(--ease);
}
.filter:hover{color:var(--dust-2);border-color:var(--line-2)}
.filter.on{
  color:#fff;
  border-color:var(--bolt);
  background:linear-gradient(180deg,rgba(0,75,253,.9),rgba(0,60,210,.9));
}

.work-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,400px),1fr));
  gap:20px;
}
.work{
  position:relative;
  border-radius:var(--r-l);
  border:1px solid var(--line);
  background:var(--slab);
  overflow:hidden;
  aspect-ratio:16/11;
  transition:transform .55s var(--ease-out),border-color .45s var(--ease),box-shadow .45s var(--ease),opacity .35s var(--ease);
}
.work.hide{display:none}
.work img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:top center;
  transition:transform 1s var(--ease-out),filter .6s var(--ease);
  filter:saturate(.65) brightness(.72);
}
.work:hover{
  transform:translateY(-6px);
  border-color:rgba(0,75,253,.4);
  box-shadow:0 50px 80px -46px rgba(0,0,0,1),0 0 0 1px rgba(0,75,253,.16);
}
.work:hover img{transform:scale(1.05);filter:saturate(1) brightness(.95)}
.work-veil{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,rgba(3,5,10,.5) 0%,rgba(3,5,10,.74) 100%);
  opacity:0;
  transition:opacity .45s var(--ease);
}
.work:hover .work-veil,.work:focus-within .work-veil{opacity:1}
.work-veil-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  transform:scale(.8);
  opacity:0;
  transition:transform .45s var(--ease-out) .05s,opacity .35s var(--ease) .05s;
}
.work:hover .work-veil-inner,.work:focus-within .work-veil-inner{transform:scale(1);opacity:1}
.work-cat{
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--bolt-3);
}
.work-view-btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:14px 30px;
  border-radius:999px;
  font-family:var(--display);
  font-weight:800;
  font-stretch:108%;
  font-size:.9rem;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:#fff;
  background:linear-gradient(180deg,var(--bolt-2),var(--bolt));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 18px 36px -16px var(--bolt-glow),0 0 0 1px rgba(0,75,253,.12);
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease);
}
.work-view-btn svg{display:block;flex:none}
.work:hover .work-view-btn{transform:translateY(-2px)}
.work-view-btn:hover{box-shadow:0 22px 44px -16px var(--bolt-glow),0 0 0 1px rgba(0,75,253,.2)}

/* touch/coarse-pointer devices: no hover state exists, so keep the CTA
   discoverable without requiring a hover-then-tap sequence */
@media (hover:none){
  .work-veil{opacity:1;background:linear-gradient(180deg,rgba(3,5,10,0) 40%,rgba(3,5,10,.8) 100%);align-items:flex-end;padding-bottom:22px}
  .work-veil-inner{opacity:1;transform:none}
  .work-view-btn{padding:11px 24px;font-size:.8rem}
}
.see-more-wrap{display:flex;justify-content:center;margin-top:40px}
.btn-see-more{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 36px;
  font-family:var(--body);font-weight:600;font-size:.95rem;
  color:#fff;text-decoration:none;
  border:1px solid var(--bolt);
  border-radius:14px;
  background:linear-gradient(180deg,var(--bolt-2),var(--bolt));
  box-shadow:0 10px 24px -14px var(--bolt-glow);
  transition:all .35s var(--ease);
}
.btn-see-more:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 32px -12px var(--bolt-glow);
}
.btn-see-more i{font-style:normal;transition:transform .3s var(--ease)}
.btn-see-more:hover i{transform:translate(2px,-2px)}

/* ==========================================================================
   15. PLANS
   ========================================================================== */
.plans{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
  gap:20px;
  margin-top:clamp(40px,5vw,60px);
  align-items:flex-end;
}
.plan{padding:32px 28px;display:flex;flex-direction:column;gap:18px;height:100%}
.plan-tier{
  display:inline-flex;
  align-self:flex-start;
  padding:5px 12px;
  border-radius:999px;
  border:1px solid var(--bolt-glow);
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.18em;
  color:var(--paper);
}
.plan-tier:hover{
	color:var(--dust-2);
	border:1px solid var(--line-2);
}
.plan-pop{
  border-color:rgba(0,75,253,.45);
  background:rgba(0,75,253,.16);
  color:var(--bolt-3);
}
.plan h3{font-family:var(--body);font-weight:600;font-size:1.35rem;letter-spacing:-.015em}
.plan p{font-size:.9rem;color:var(--paper);line-height:1.65}
.plan ul{display:grid;gap:11px;margin-top:4px}
.plan li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:.88rem;
  color:var(--paper-2);
  list-style:none;
}
.plan li svg{
  width:15px;height:15px;
  margin-top:4px;
  flex:0 0 auto;
  stroke:var(--bolt-2);
  fill:none;
  stroke-width:2.4;
}
.plan .link{margin-top:auto;padding-top:10px}
.plan-featured{
  border-color:rgba(0,75,253,.32);
  background:
    radial-gradient(120% 80% at 50% 0%,rgba(0,75,253,.18),transparent 58%),
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012)),
    rgba(10,14,23,.7);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 40px 80px -46px rgba(0,0,0,1),0 0 0 1px rgba(0,75,253,.14);
}

/* ==========================================================================
   16. PROCESS — a genuine four-step sequence
   ========================================================================== */
.process-grid{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:clamp(28px,4vw,64px);
  align-items:center;
}
.steps{position:relative;display:grid;gap:2px}
.step{
  position:relative;
  display:grid;
  grid-template-columns:56px 1fr;
  gap:18px;
  padding:22px 20px;
  border:1px solid transparent;
  border-radius:var(--r-m);
  transition:background .45s var(--ease),border-color .45s var(--ease),transform .45s var(--ease-out);
}
.step:hover{
  background:rgba(255,255,255,.03);
  border-color:var(--line);
  transform:translateX(4px);
}
.step-n{
  display:grid;
  place-items:center;
  width:46px;height:46px;
  border:1px solid var(--line-2);
  border-radius:14px;
  background:rgba(0,75,253,.1);
  font-family:var(--mono);
  font-size:.78rem;
  color:var(--paper);
  transition:all .45s var(--ease);
}
.step:hover .step-n{
  border-color:var(--bolt);
  background:linear-gradient(180deg,var(--bolt-2),var(--bolt));
  color:#fff;
  box-shadow:0 0 20px -4px var(--bolt-glow);
}
.step h4{font-size:1.02rem;font-weight:600;margin-bottom:5px}
.step p{font-size:.88rem;color:var(--paper);margin:0}

/* ==========================================================================
   17. SERVICES LIST — big rows that open on hover
   ========================================================================== */
.svc-list{margin-top:clamp(40px,5vw,60px);border-top:1px solid var(--line)}
.svc{
  position:relative;
  display:grid;
  grid-template-columns:78px 1fr auto;
  align-items:center;
  gap:clamp(16px,3vw,40px);
  padding:clamp(24px,3.2vw,40px) clamp(10px,2vw,26px);
  border-bottom:1px solid var(--line);
  overflow:hidden;
  transition:background .5s var(--ease),padding-left .5s var(--ease-out);
}
.svc::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(0,75,253,.14),transparent 55%);
  opacity:0;
  transition:opacity .5s var(--ease);
}
.svc:hover{padding-left:clamp(18px,3vw,40px)}
.svc:hover::before{opacity:1}
.svc>*{position:relative}
.svc-n{
  font-family:var(--mono);
  font-size:.85rem;
  color:var(--paper);
  transition:color .4s var(--ease)
}
.svc:hover .svc-n{color:var(--bolt-2)}
.svc-body h3{
  font-family:var(--display);
  font-weight:800;
  font-stretch:110%;
  font-size:clamp(1.5rem,3.4vw,2.4rem);
  line-height:1;
  text-transform:uppercase;
  letter-spacing:-.02em;
  color:var(--paper);
  transition:color .4s var(--ease),transform .5s var(--ease-out);
}
.svc:hover .svc-body h3{color:#fff;transform:translateX(4px)}
.svc-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 16px;
  margin-top:12px;
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--paper);
}
.svc-desc{
  max-width:46ch;
  margin-top:12px;
  font-size:.92rem;
  color:var(--paper);
  max-height:0;
  opacity:0;
  overflow:hidden;
  transition:max-height .55s var(--ease-out),opacity .45s var(--ease),margin-top .5s var(--ease);
}
.svc:hover .svc-desc,.svc:focus-within .svc-desc{max-height:120px;opacity:1}
.svc-go{
  display:grid;
  place-items:center;
  width:52px;height:52px;
  border:1px solid var(--paper);
  border-radius:50%;
  color:var(--paper);
  font-size:1.05rem;
  transition:all .45s var(--ease-out);
}
.svc:hover .svc-go{
  border-color:var(--bolt);
  background:linear-gradient(180deg,var(--bolt-2),var(--bolt));
  color:#fff;
  transform:rotate(45deg);
  box-shadow:0 14px 34px -16px var(--bolt-glow);
}

/* ==========================================================================
   18. TECH STACK
   ========================================================================== */
.stack{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:14px;
  margin-top:clamp(40px,5vw,60px);
}
.tech{
  display:flex;
  align-items:center;
  gap:13px;
  padding:17px 18px;
  border:1px solid var(--line);
  border-radius:var(--r-m);
  background:rgba(255,255,255,.022);
  transition:all .45s var(--ease-out);
}
.tech img{
  width:26px;height:26px;
  filter:grayscale(1) brightness(1.7) opacity(.62);
  transition:filter .45s var(--ease),transform .45s var(--ease-out);
}
.tech span{font-size:.86rem;font-weight:500;color:var(--dust)}
.tech:hover{
  transform:translateY(-4px);
  border-color:var(--line-2);
  background:rgba(255,255,255,.045);
  box-shadow:0 24px 44px -30px rgba(0,0,0,1);
}
.tech:hover img{filter:none;transform:scale(1.1)}
.tech:hover span{color:var(--paper)}
.stack-foot{
  display:flex;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  margin-top:26px;
  padding-top:20px;
  border-top:1px solid var(--line);
}

/* ==========================================================================
   19. SELECTED WORK BAND — figures, not another gallery
   ========================================================================== */
.band{
  position:relative;
  border:1px solid var(--line);
  border-radius:clamp(20px,3vw,32px);
  background:
    radial-gradient(100% 120% at 100% 0%,rgba(0,75,253,.16),transparent 60%),
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01)),
    rgba(8,12,20,.7);
  overflow:hidden;
}
.band-inner{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(30px,4vw,64px);
  padding:clamp(32px,4.5vw,64px);
  align-items:center;
}
.figures{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r-l);
  overflow:hidden;
}
.figure{
  padding:26px 24px;
  background:rgba(8,12,20,.88);
  transition:background .45s var(--ease);
}
.figure:hover{background:rgba(0,75,253,.09)}
.figure b{
  display:block;
  font-family:var(--display);
  font-weight:800;
  font-stretch:115%;
  font-size:clamp(2rem,4vw,2.9rem);
  line-height:1;
  letter-spacing:-.03em;
  background:linear-gradient(180deg,#fff,var(--bolt-3));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.figure span{
  display:block;
  margin-top:9px;
  font-family:var(--mono);
  font-size:.64rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dust-2);
}
.triad{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.triad-item{
  display:flex;
  align-items:center;
  gap:9px;
  padding:9px 15px;
  border:1px solid var(--bolt);
  border-radius:999px;
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--paper);
  transition:all .4s var(--ease);
}
.triad-item i{font-style:normal;color:var(--paper);font-size:.6rem}
.triad-item:hover{border-color:var(--line-2);background:rgba(0,75,253,.12)}

/* ==========================================================================
   20. ENGAGEMENT
   ========================================================================== */
.engage{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:18px;
  margin-top:clamp(40px,5vw,60px);
}
.engage-card{
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:32px 28px;
  height:100%;
}
.engage-card h3{font-family:var(--body);font-weight:600;font-size:1.28rem;letter-spacing:-.015em}
.engage-card p{font-size:.9rem;color:var(--paper);line-height:1.65}
.engage-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:6px}
.engage-card .link{margin-top:14px;align-self:flex-start}

/* ==========================================================================
   21. TESTIMONIALS
   ========================================================================== */
.trust-grid{
  display:grid;
  grid-template-columns:330px 1fr;
  gap:clamp(24px,3vw,44px);
  margin-top:clamp(40px,5vw,60px);
  align-items:stretch;
}
.rating{
  display:flex;
  flex-direction:column;
  gap:18px;
  padding:32px 28px;
}
.rating-top{display:flex;align-items:center;gap:12px}
.rating-badge{
  display:grid;
  place-items:center;
  width:44px;height:44px;
  border-radius:12px;
  border:1px solid var(--line-2);
  background:rgba(255,255,255,.05);
  font-family:var(--display);
  font-weight:800;
  color:#fff;
}
.rating-score{
  font-family:var(--display);
  font-weight:800;
  font-stretch:112%;
  font-size:3.2rem;
  line-height:1;
  letter-spacing:-.03em;
}
.rating .stars{font-size:1rem}
.rating p{font-size:.88rem;color:var(--paper);line-height:1.65}
.rating-foot{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:auto;
  padding-top:18px;
  border-top:1px solid var(--line);
}

.quotes{position:relative;overflow:hidden}
.quotes-view{overflow:hidden}
.quotes-track{
  display:flex;
  transition:transform .7s var(--ease-out);
  will-change:transform;
}
.quote{
  flex:0 0 100%;
  padding:clamp(28px,3.4vw,44px);
  display:flex;
  flex-direction:column;
  gap:20px;
}
.quote-mark{
  font-family:var(--display);
  font-weight:900;
  font-size:3.4rem;
  line-height:.6;
  color:var(--paper);
}
.quote p{
  font-size:clamp(1rem,1.5vw,1.18rem);
  line-height:1.62;
  color:var(--paper);
}
.quote-by{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:auto;
  padding-top:20px;
  border-top:1px solid var(--line);
}
.quote-by img{width:46px;height:46px;border-radius:50%;object-fit:cover;border:1px solid var(--line-2)}
.quote-by b{display:block;font-size:.94rem;font-weight:600}
.quote-by span{font-size:.78rem;color:var(--paper)}
.quote-nav{display:flex;align-items:center;gap:10px;margin-top:22px}
.qbtn{
  display:grid;
  place-items:center;
  width:44px;height:44px;
  border:1px solid var(--paper);
  border-radius:50%;
  color:var(--paper);
  transition:all .4s var(--ease);
}
.qbtn:hover{border-color:var(--bolt);color:#fff;background:rgba(0,75,253,.16)}
.qdots{display:flex;gap:6px;margin-left:auto}
.qdot{
  width:7px;height:7px;
  border-radius:50%;
  background:var(--paper);
  transition:all .4s var(--ease);
}
.qdot.on{width:22px;border-radius:4px;background:var(--bolt-2);box-shadow:0 0 10px var(--bolt-glow)}

/* ==========================================================================
   22. CONTACT
   ========================================================================== */
.contact-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:clamp(26px,3.5vw,54px);
  margin-top:clamp(40px,5vw,60px);
  align-items:start;
}
.contact-cards{display:grid;gap:14px}
.ccard{
  display:flex;
  align-items:center;
  gap:16px;
  padding:22px;
  border:1px solid var(--line);
  border-radius:var(--r-m);
  background:rgba(255,255,255,.022);
  transition:all .45s var(--ease-out);
}
.ccard:hover{
  transform:translateY(-3px);
  border-color:rgba(0,75,253,.35);
  background:rgba(0,75,253,.07);
}
.ccard-icon{
  display:grid;
  place-items:center;
  width:44px;height:44px;
  flex:0 0 auto;
  border-radius:13px;
  border:1px solid var(--line-2);
  background:rgba(0,75,253,.14);
}
.ccard-icon svg{width:19px;height:19px;stroke:var(--bolt-3);fill:none;stroke-width:1.7}
.ccard-label{
  font-family:var(--body);
  font-size:.62rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--paper);
}
.ccard-val{font-size:.98rem;font-weight:500;margin-top:3px}
.ccard-go{margin-left:auto;color:var(--paper); font-size: 14px; transition:transform .4s var(--ease-out),color .3s var(--ease)}
.ccard:hover .ccard-go{transform:translate(3px,-3px);color:var(--bolt-3)}

.form{padding:clamp(26px,3.2vw,40px)}
.form-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding-bottom:20px;
  margin-bottom:24px;
  border-bottom:1px solid var(--line);
}
.form-head h3{font-family:var(--body);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:grid;gap:8px}
.field-full{grid-column:1/-1}
.field label{
  font-family:var(--body);
  font-size: 14px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--paper);
}
.field input,.field select,.field textarea{
  width:100%;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.03);
  font-family:var(--body);
  text-transform: capitalize;
  color:var(--paper);
  font-size: 13px;
  transition:border-color .35s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease);
}
.field textarea{min-height:132px;resize:vertical}
.field select{appearance:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--dust) 50%),linear-gradient(135deg,var(--dust) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.field select option{background:#0a0e17;color:var(--paper)}
.field input::placeholder,.field textarea::placeholder{color:var(--paper)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;
  border-color:var(--bolt);
  background:rgba(0,75,253,.06);
  box-shadow:0 0 0 3px rgba(0,75,253,.14);
}
.field .invalid{border-color:var(--amber)}
.field input.invalid,.field select.invalid,.field textarea.invalid{
  border-color:var(--amber);
  background:rgba(255,176,32,.06);
}
.form-foot{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:26px}
.form-note{font-size:.8rem;color:var(--paper); font-family:var(--body); max-width:32ch}

/* ==========================================================================
   23. CTA BAND
   ========================================================================== */
.cta-band{
  position:relative;
  padding:clamp(44px,6vw,84px) clamp(26px,4vw,64px);
  border:1px solid rgba(0,75,253,.3);
  border-radius:clamp(20px,3vw,32px);
  background:
    radial-gradient(90% 130% at 50% 0%,rgba(0,75,253,.24),transparent 62%),
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.008)),
    rgba(6,10,18,.8);
  text-align:center;
  overflow:hidden;
}
.cta-band .eyebrow{position:relative}
.cta-band h2{position:relative;margin:20px auto 0;max-width:20ch}
.cta-band .btn{position:relative;margin-top:34px}
.cta-mark{
  position:absolute;
  left:50%;
  bottom:-32%;
  width:min(52vw,520px);
  aspect-ratio:100/72.65;
  transform:translateX(-50%);
  opacity:.06;
  pointer-events:none;
}
.cta-mark .mk-brace{fill:#6d8ac4}
.cta-mark .mk-arm{fill:var(--bolt-2)}

/* ==========================================================================
   24. FOOTER
   ========================================================================== */
.foot{
  position:relative;
  z-index:2;
  margin-top:clamp(60px,8vw,110px);
  border-top:1px solid var(--line-2);
  background:linear-gradient(180deg,rgba(6,9,16,.5),rgba(3,5,10,.96));
  overflow:hidden;
}
.foot::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:min(1100px,120%);
  height:340px;
  transform:translate(-50%,-52%);
  background:radial-gradient(ellipse at center,rgba(0,75,253,.28),transparent 66%);
  filter:blur(40px);
  pointer-events:none;
}
.foot-top{
  position:relative;
  display:grid;
  grid-template-columns:1.25fr 1fr 1fr 1fr;
  gap:clamp(28px,3.5vw,56px);
  padding-block:clamp(52px,6vw,80px);
}
.foot-brand{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.foot-mark{width:40px;aspect-ratio:100/72.65;filter:drop-shadow(0 0 16px rgba(0,75,253,.4))}
.foot-word{width:132px}
.foot-about{font-size:.9rem;color:var(--paper);line-height:1.68;max-width:38ch}
.foot-meta{display:grid;gap:9px;margin-top:22px}
.foot-meta li{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:.84rem;
  color:var(--paper);
  list-style:none;
}
.foot-meta li::before{
  content:"";
  width:5px;height:5px;
  border-radius:50%;
  background:var(--bolt);
  box-shadow:0 0 8px var(--bolt-glow);
}
.socials{display:flex;gap:9px;margin-top:24px}
.social{
  display:grid;
  place-items:center;
  width:40px;height:40px;
  border:1px solid var(--bolt);
  border-radius:12px;
  background:rgba(0,75,253,.16);
  color:var(--paper);
  font-size:.8rem;
  font-weight:600;
  box-shadow:0 12px 26px -14px var(--bolt-glow);
  transform:translateY(-3px);
}
.social:hover{
  border-color:var(--line);
  background:rgba(255,255,255,.025);
  color:var(--dust);
  transition:all .4s var(--ease-out);
}
.foot-col h4{
  font-family:var(--body);
  font-size:14px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--bolt-3);
  margin-bottom:18px;
}
.foot-col ul{display:grid;gap:11px}
.foot-col li{list-style:none}
.foot-col a{
  position:relative;
  display:inline-block;
  font-size:.89rem;
  color:var(--paper);
  transition:color .3s var(--ease),transform .35s var(--ease-out);
}
.foot-col a:hover{color:var(--dust);transform:translateX(4px)}
.foot-mail{
  display:inline-block;
  font-size:.95rem;
  font-weight:500;
  color:var(--paper);
  margin-bottom:16px;
}
.foot-mail:hover{color:var(--bolt-3)}
.foot-reply{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:16px;
  font-size:.78rem;
  color:var(--paper);
}
.foot-reply::before{
  content:"";
  width:6px;height:6px;
  border-radius:50%;
  background:#4ade80;
  box-shadow:0 0 8px #4ade80;
  animation:pulseDot 2.4s ease-in-out infinite;
}

/* the wordmark, oversized, bleeding off the bottom edge */
.foot-giant{
  position:relative;
  padding-top:clamp(20px,3vw,34px);
  border-top:1px solid var(--line);
  -webkit-mask-image:linear-gradient(180deg,#000 30%,transparent 96%);
  mask-image:linear-gradient(180deg,#000 30%,transparent 96%);
}
.foot-giant svg{width:100%;opacity:.16}
.foot-giant .wm-blue{fill:var(--bolt-2)}
.foot-giant .wm-white{fill:#8fa3c8}

.foot-bar{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  padding-block:24px;
  border-top:1px solid var(--line);
}
.foot-bar p{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:var(--paper)}
.foot-legal{display:flex;flex-wrap:wrap;gap:20px}
.foot-legal a{font-size:.8rem;color:var(--paper);transition:color .3s var(--ease)}
.foot-legal a:hover{color:var(--dust-2)}
.to-top{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:9px 16px;
  border:1px solid var(--bolt);
  border-radius:999px;
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#fff;
  transition:all .4s var(--ease-out);
}
.to-top:hover{border-color:var(--line-2);color:var(--dust);background:rgba(0,75,253,.14)}
.to-top i{font-style:normal;transition:transform .4s var(--ease-out)}
.to-top:hover i{transform:translateY(-3px)}

/* ==========================================================================
   25. RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .journey{grid-template-columns:1fr}
  .jn-rail{
    position:relative;
    top:0;
    display:flex;
    align-items:center;
    gap:14px;
    overflow-x:auto;
    padding:16px;
    scrollbar-width:none;
  }
  .jn-rail::-webkit-scrollbar{display:none}
  .jn-rail-head{display:none}
  .jn-track{display:flex;gap:10px;padding:0}
  .jn-track::before,.jn-track::after{display:none}
  .jn-step{width:auto;white-space:nowrap;padding:8px 14px 8px 8px;border:1px solid var(--line);border-radius:999px}
  .trust-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .band-inner{grid-template-columns:1fr}
  .process-grid{grid-template-columns:1fr}
}

@media (max-width:900px){
  /* sideways reveals would push the viewport on narrow screens */
  .rv-left,.rv-right{transform:translate3d(0,24px,0)}
  .nav,.hdr-cta{display:none}
  .hdr-burger{display:grid}
  .rescue-grid{grid-template-columns:1fr}
  .hero-mark{right:-22%;width:min(88vw,560px);opacity:.05}
  .foot-top{grid-template-columns:1fr 1fr}
  .foot-col:first-child{grid-column:1/-1}
}

@media (max-width:640px){
  :root{--nav-h:62px}
  .display{font-stretch:100%;letter-spacing:-.02em}
  .hdr-inner{padding-inline:16px 16px}
  .brand-word{width:96px}
  .hero{min-height:auto;padding-top:calc(var(--nav-h) + 54px)}
  .fields{grid-template-columns:1fr}
  .work-grid{grid-template-columns:1fr}
  .figures{grid-template-columns:1fr 1fr}
  .foot-top{grid-template-columns:1fr;gap:34px}
  .svc{grid-template-columns:1fr auto;gap:14px}
  .svc-n{display:none}
  .svc-go{width:44px;height:44px}
  .stack-foot{flex-direction:column;gap:10px}
  .form-foot{flex-direction:column;align-items:stretch}
  .form-foot .btn{width:100%}
  .quote-nav{flex-wrap:wrap}
  #site-footer .foot-top{padding-left: 10px; padding-right: 10px}
  #site-footer .foot-bar{padding-left: 10px; padding-right: 10px}
}

@media (max-width:420px){
  .plat,.plan,.engage-card{padding:24px 20px}
  .figure{padding:20px 16px}
}

/* ==========================================================================
   25b. ENHANCED RESPONSIVE — comprehensive fixes across all pages
   ========================================================================== */

/* ---- GLOBAL OVERFLOW PREVENTION ---- */
html,body{overflow-x:hidden;max-width:100vw}
.sec,.wrap,.page{max-width:100%;overflow-x:clip}
img,video,iframe,embed,object{max-width:100%;height:auto}
/* Decorative sections with large absolute children */
.lux-trust,.lux-proof,.lux-services,.up-sec,.tech-sec{overflow:hidden;position:relative}

/* ---- 1200px: wide layouts start collapsing ---- */
@media (max-width:1200px){
  /* Service/Contact page: split layouts */
  .mv-inner-split{grid-template-columns:1fr !important;gap:40px}
  .bn-layout{grid-template-columns:1fr !important;gap:36px}
  .bn-site-hero{grid-template-columns:1fr !important}
  /* Pricing columns */
  .lux-trust-logos{grid-template-columns:repeat(2,1fr) !important}
}

/* ---- 1080px: mid-width tablets ---- */
@media (max-width:1080px){
  /* Grids that use auto-fit with large minimums */
  .plat-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)) !important}
  .feat-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)) !important}
  .work-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)) !important}
  .post-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr)) !important}
  .values-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)) !important}
  .team-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)) !important}

  /* Footer bar stacks on narrower screens */
  .foot-bar{flex-direction:column;align-items:center;text-align:center;gap:14px}
}

/* ---- 900px: tablet portrait / mobile landscape ---- */
@media (max-width:900px){
  /* Page-specific hero sections */
  .page-hero{padding-inline:var(--gut)}
  .wrap-ab{padding-inline:var(--gut)}
  .legal-hero{padding-inline:var(--gut)}

  /* Split grids to single column */
  .ml-products{grid-template-columns:repeat(2,1fr) !important}
  .ml-stats{grid-template-columns:1fr !important}
  .mock-cal{grid-template-columns:repeat(3,1fr) !important}
  .bn-showcase{max-width:100% !important;margin-inline:auto}

  /* Portfolio banner */
  .bn-layout,.bn-site-hero{gap:28px}

  /* Footer fixes */
  .foot-bar{flex-direction:column;align-items:center;text-align:center}
  .foot-legal{justify-content:center}

  /* Form layouts */
  .contact-grid{gap:40px}

  /* Hero adjustments */
  .hero-inner{padding-inline:0}
  .hero-cta{flex-direction:column;align-items:flex-start}
  .hero-cta .btn{width:100%}

  /* Testimonials */
  .quote-card{padding:28px 24px}
  .quote-text{font-size:1rem}
}

/* ---- 768px: standard tablet ---- */
@media (max-width:768px){
  /* Heading sizes */
  h1.display{font-size:clamp(1.8rem,6vw,3.2rem)}
  h2.display{font-size:clamp(1.5rem,4vw,2.4rem)}

  /* Section padding */
  .sec{padding-block:clamp(48px,7vw,80px)}
  .sec-tight{padding-block:clamp(36px,5vw,60px)}

  /* Grid and card adjustments */
  .plat-grid{grid-template-columns:1fr !important}
  .feat-grid-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)) !important}

  /* Service list items */
  .svc{grid-template-columns:1fr auto !important;gap:12px}
  .svc-n{display:none !important}

  /* Footer */
  .foot-top{grid-template-columns:1fr 1fr !important;gap:32px}
  .foot-col:first-child{grid-column:1/-1}
  .foot-giant svg{width:160%; opacity:.2 !important;}

  /* Figures grid */
  .figures{grid-template-columns:1fr 1fr !important}

  /* Engage cards */
  .engage{grid-template-columns:1fr !important}
}

/* ---- 640px: large phones ---- */
@media (max-width:640px){
  /* Hero */
  .hero-cta .btn{font-size:.88rem;padding:14px 22px}

  /* All multi-column grids to single */
  .rescue-grid{grid-template-columns:1fr !important}
  .process-grid{grid-template-columns:1fr !important}
  .band-inner{grid-template-columns:1fr !important}
  .trust-grid{grid-template-columns:1fr !important}
  .contact-grid{grid-template-columns:1fr !important}
  .ml-products{grid-template-columns:1fr !important}
  .mock-cal{grid-template-columns:repeat(2,1fr) !important}
  .lux-trust-logos{grid-template-columns:1fr !important}
  .post-grid{grid-template-columns:1fr !important}
  .values-grid{grid-template-columns:1fr !important}
  .team-grid{grid-template-columns:1fr !important}

  /* Footer */
  .foot-top{grid-template-columns:1fr !important;gap:30px}
  .foot-col{max-width:none !important}
  .foot-bar p{text-align:center}
  .foot-legal{gap:12px}
  .to-top{margin-top:8px}

  /* Eyebrow labels */
  .eyebrow{font-size:.6rem;gap:7px}

  /* Buttons */
  .btn-lg{padding:14px 26px;font-size:.88rem}
  .btn{padding:13px 22px;font-size:.85rem}

  /* Sections */
  .sec-head h2{margin-top:14px}
  .sec-head .lede{margin-top:14px}

  /* Cards and panels */
  .panel{border-radius:var(--r-m)}

  /* Drawer adjustments */
  .drawer a{font-size:1.35rem;padding:14px 0}
  .drawer .btn{margin-top:20px;padding:10px 10px}

  /* Step items */
  .step{grid-template-columns:40px 1fr !important}
  .step-n{width:40px;height:40px;font-size:.75rem}

  /* Legal pages */
  .legal-hero{padding-inline:16px}
  .legal-body{padding-inline:16px}
  .legal-body h2{font-size:1.15rem}

  /* Lux portfolio cards */
  .lux-camera{width:280px !important;height:200px !important}
  .lux-card{width:180px !important;height:130px !important;border-radius:8px !important}
  .lux-stage{height:300px !important}
  .lux-heading h2{font-size:28px !important;letter-spacing:-1px !important}
}

/* ---- 480px: small phones ---- */
@media (max-width:480px){
  :root{--gut:16px;--nav-h:58px}

  /* Type */
  h1.display{font-size:clamp(1.55rem,7vw,2.2rem)}
  h2.display{font-size:clamp(1.3rem,5vw,1.85rem)}
  h3.display{font-size:clamp(1.05rem,3.5vw,1.3rem)}
  .lede{font-size:.92rem}

  /* Header */
  .hdr-inner{padding-inline:12px;gap:10px;height:56px}
  .hdr.stuck .hdr-inner{height:52px}
  .brand-mark{width:28px}
  .brand-word{width:82px}

  /* Hero */
  .hero{padding-top:calc(var(--nav-h) + 36px);padding-bottom:40px}
  .hero .lede{font-size:.92rem}
  .hero-strip{margin-top:36px}

  /* Cards */
  .plat,.plan,.engage-card{padding:20px 16px}
  .figure{padding:16px 12px}
  .glow-card::after{display:none}

  /* Forms */
  .fields{grid-template-columns:1fr !important}
  .form-foot{flex-direction:column;align-items:stretch}
  .form-foot .btn{width:100%}

  /* Figures */
  .figures{grid-template-columns:1fr !important}

  /* Marquee */
  .marquee-item{font-size:.88rem;gap:8px}
  .marquee-track{gap:36px}

  /* Drawer */
  .drawer{padding-top:calc(var(--nav-h) + 30px)}
  .drawer a{font-size:1.15rem;padding:12px 0}

  /* Footer */
  .foot-mark{width:32px}
  .foot-word{width:110px}
  .foot-about{font-size:.84rem}
  .foot-bar p{font-size:.62rem}

  /* Spacing */
  .sec{padding-block:clamp(36px,6vw,60px)}

  /* Journey */
  .jn-rail{padding:12px}
  .jn-step{padding:6px 10px 6px 6px;font-size:.72rem}

  /* Testimonials */
  .quote-card{padding:22px 18px}
  .quote-text{font-size:.92rem}
  .quote-by img{width:32px;height:32px}

  /* Lux */
  .lux-camera{width:220px !important;height:160px !important}
  .lux-card{width:150px !important;height:110px !important}
  .lux-stage{height:240px !important;margin-top:20px !important}
  .lux-heading h2{font-size:22px !important}
  .lux-heading p{font-size:11px !important}
  .lux-hud{transform:scale(.65) !important}

  /* Mock calendar */
  .mock-cal{grid-template-columns:1fr !important}

  /* Stack */
  .stack-foot{flex-direction:column;gap:8px}
}

/* ---- 360px: very small phones ---- */
@media (max-width:360px){
  :root{--gut:12px}
  h1.display{font-size:1.4rem}
  h2.display{font-size:1.2rem}
  .brand-word{width:72px}
  .brand-mark{width:24px}
  .hdr-inner{height:50px;padding-inline:10px}
  .drawer a{font-size:1rem}
  .btn{padding:11px 18px;font-size:.8rem}
  .btn-lg{padding:12px 22px;font-size:.84rem}
  .lux-camera{width:180px !important;height:130px !important}
  .lux-card{width:120px !important;height:90px !important}
  .lux-stage{height:200px !important}
}

/* ---- Additional page-specific responsive fixes ---- */

/* Lux service list: 4-column grid → stacked on tablet */
@media (max-width:900px){
  .lux-service{
    grid-template-columns:1fr !important;
    gap:12px !important;
    min-height:auto !important;
    padding:20px 16px !important;
  }
  .lux-service-n{text-align:left}
  .bn-layout{grid-template-columns:1fr !important}
  .bn-site-hero{grid-template-columns:1fr !important}
}

/* Legal layout sidebar collapses */
@media (max-width:768px){
  .legal-layout{grid-template-columns:1fr !important;gap:20px}
  .legal-toc{position:static !important;top:auto !important}
  /* Contact page FAQ grid */
  .ct-faq-grid{grid-template-columns:1fr !important}
  /* Contact location cards */
  .ct-location-cards{grid-template-columns:1fr !important}
  .ct-map-frame{height:250px !important}
  /* Booking page slots */
  .slot-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,90px),1fr)) !important}
  .date-strip{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap}
  .chip-row{flex-wrap:wrap !important;gap:6px !important}
  /* Blog newsletter */
  .newsletter-form{flex-direction:column !important;gap:10px}
  .newsletter-form input,.newsletter-form .btn{width:100% !important}
  /* About message slider */
  .msg-slides{overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* Portfolio banner cards */
  .bn-site-cards{grid-template-columns:1fr !important}
  .bn-chrome{max-width:100% !important;overflow:hidden}
  .bn-track{overflow-x:auto;-webkit-overflow-scrolling:touch}
}

@media (max-width:480px){
  .lux-service{padding:16px 12px !important}
  .lux-services-list{gap:0 !important}
  /* Ensure hero actions stack */
  .hero-actions{flex-direction:column !important;align-items:stretch !important;gap:10px}
  .hero-actions .btn{width:100% !important}
  /* Team social links */
  .team-social,.team-soc{gap:6px !important}
  /* About values */
  .value-icon{width:40px !important;height:40px !important}
  /* Contact cards */
  .contact-cards{grid-template-columns:1fr !important}
  /* Booking calendar buttons */
  .cal-buttons{flex-direction:column !important;gap:8px}
  .cal-buttons .btn{width:100% !important}
  /* Blog post cards */
  .post-card{padding:16px !important}
  .post-meta{flex-wrap:wrap !important;gap:6px}
  .fp-body{padding:16px !important}
  .fp-meta{flex-wrap:wrap;gap:6px}
}

/* --------------------------------------------------------------------------
   26. RESILIENCE — a failed remote image should read as an empty tile,
   not as raw alt text sitting in the middle of the layout.
   -------------------------------------------------------------------------- */
.work img,.avatars img,.tech img,.plat-icon img,.quote-by img{
  font-size:0;
  color:transparent;
}
.work img{background:linear-gradient(160deg,#0c1220,#080b13)}
.avatars img,.quote-by img{background:#111826}

/* keep long headings from colliding with the button beside them */
.work-bar .sec-head{max-width:34ch;flex:1 1 420px}
.work-bar .btn{flex:0 0 auto}

/* print-safe fallback so nothing is invisible without JS */
.no-js .rv{opacity:1;transform:none;filter:none}


/* ===================================================================
   ADDED HOVER-EFFECT SECTIONS CSS — sourced from CodeHulk_Combined_Without_WordPress_High_Performing_Section.html
   =================================================================== */


/* ===== keyframes ===== */



@keyframes luxRing{

  to{

    transform:
      rotate(360deg);

  }

}



@keyframes ambientOrbOne{
  to{transform:translate(180px,-55px) scale(1.25)}
}




@keyframes luxPulse{

  50%{
    transform:scale(.35);
    opacity:.35;
  }

}




@keyframes luxShine{

  to{
    left:150%;
  }

}




@keyframes luxStatus{

  0%,100%{
    opacity:.45;
    transform:scale(.8);
  }

  50%{
    opacity:1;
    transform:scale(1.2);
  }

}




@keyframes centerPulse {

    from {
        opacity: .45;
        transform:
            translate(-50%,-50%)
            scale(.88);
    }

    to {
        opacity: .9;
        transform:
            translate(-50%,-50%)
            scale(1.14);
    }
}




@keyframes gridMove {

  from {
    background-position:
      0 0;
  }

  to {
    background-position:
      0 70px;
  }

}




@keyframes beamB {

  to {
    transform:
      rotate(-20deg)
      translateX(-180px);

    opacity:.55;
  }

}




@keyframes beamA {

  to {
    transform:
      rotate(20deg)
      translateX(200px);

    opacity:.6;
  }

}




@keyframes textFlow {

  to {
    background-position:
      250% center;
  }

}



@keyframes beamMoveOne{
  to{transform:translate(180px,90px) rotate(-13deg)}
}




@keyframes luxA3{

  to{
    transform:
      translate(140px,-100px)
      scale(1.2);
  }

}




@keyframes luxAurora{

  0%{

    transform:
      translate3d(0,0,0)
      scale(1);

  }

  50%{

    transform:
      translate3d(120px,-80px,100px)
      scale(1.2);

  }

  100%{

    transform:
      translate3d(-100px,100px,-80px)
      scale(.92);

  }

}




@keyframes gridDrift {

    from {
        transform: translate3d(0,0,0);
    }

    to {
        transform: translate3d(0,75px,0);
    }
}




@keyframes avatarMove {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}




@keyframes luxA1{

  to{
    transform:
      translate(170px,160px)
      scale(1.25);
  }

}




@keyframes particle {

  from {
    transform:
      translateY(0)
      scale(.6);
  }

  to {
    transform:
      translateY(-30px)
      scale(1.5);
  }

}




@keyframes luxHeading {

    from {

        opacity: 0;

        transform:
            translateY(45px)
            scale(.95);

        filter:
            blur(13px);
    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

        filter:
            blur(0);
    }
}



@keyframes progressTravel{
  0%{top:-35%}
  100%{top:100%}
}




@keyframes luxOrb{

  0%,100%{

    transform:
      translate3d(0,0,0)
      scale(1);

  }

  50%{

    transform:
      translate3d(80px,-70px,100px)
      scale(1.15);

  }

}


@keyframes luxScan{to{top:110%}}




@keyframes orbA {

  to {
    transform:
      translate(230px,140px)
      scale(1.3);
  }

}




@keyframes luxText{

  0%{
    background-position:0 center;
  }

  50%{
    background-position:100% center;
  }

  100%{
    background-position:0 center;
  }

}




@keyframes luxTag1{

  to{
    transform:translateY(-8px);
  }

}




@keyframes luxTag2{

  to{
    transform:translateY(7px);
  }

}




@keyframes orbC {

  to {
    transform:
      translateX(-50%)
      scale(1.3);
  }

}


@keyframes smokeFloat3{to{transform:translate(-90px,70px) scale(1.2)}}




@keyframes upScrollRight {

  from {
    transform:
      translate3d(
        calc(-50% - 9px),
        0,
        0
      )
      rotateX(0deg);
  }

  to {
    transform:
      translate3d(0,0,0)
      rotateX(0deg);
  }

}




@keyframes luxHudLeft{

  to{

    transform:
      translateY(calc(-50% - 10px))
      translateZ(120px)
      rotate(-2deg);

  }

}


@keyframes smokeFloat1{to{transform:translate(80px,40px) scale(1.18) rotate(8deg)}}



@keyframes cardShine{
  from{left:-80%}
  to{left:150%}
}


@keyframes smokeFloat2{to{transform:translate(140px,-25px) scale(1.2) rotate(-7deg)}}



@keyframes premiumLogoSweep{
  0%{left:-75%}
  100%{left:145%}
}


@keyframes v7Shine{
  from{left:-75%}
  to{left:150%}
}




@keyframes upScrollLeft {

  from {
    transform:
      translate3d(0,0,0)
      rotateX(0deg);
  }

  to {
    transform:
      translate3d(
        calc(-50% - 9px),
        0,
        0
      )
      rotateX(0deg);
  }

}




@keyframes livePulse {

  50% {
    opacity:.3;
    transform:scale(.6);
  }

}


@keyframes luxOuterRing{to{transform:translate(-50%,-50%) rotate(360deg)}}




@keyframes luxScroll{

  0%{
    top:5px;
    opacity:1;
  }

  80%{
    top:17px;
    opacity:0;
  }

  100%{
    top:5px;
    opacity:0;
  }

}




@keyframes borderRotate {

  to {
    transform:
      rotate(360deg);
  }

}




@keyframes luxPurple {

    0% {
        transform:
            translate3d(0,0,0)
            scale(1);
    }

    100% {
        transform:
            translate3d(-130px,110px,0)
            scale(1.2);
    }
}




@keyframes orbB {

  to {
    transform:
      translate(-180px,-90px)
      scale(1.3);
  }

}


@keyframes starsMove{to{background-position:145px 145px}}


@keyframes smokeFloat4{to{transform:translate(-100px,-70px) scale(1.3)}}




@keyframes orbFloat {

    from {
        transform:
            translate3d(0,0,0)
            scale(.7);
    }

    to {
        transform:
            translate3d(var(--moveX),var(--moveY),0)
            scale(1.4);
    }
}




@keyframes luxGrid{

  to{

    background-position:
      0 80px,
      80px 0;

  }

}




@keyframes luxTag3{

  to{
    transform:translateY(-6px);
  }

}


@keyframes luxHudSweep{
  0%,55%{background-position:180% 0}78%,100%{background-position:-20% 0}
}


@keyframes ambientOrbTwo{
  to{transform:translate(-130px,-80px) scale(1.3)}
}


@keyframes gridScan{
  0%,15%{left:-10%;opacity:0}
  25%{opacity:1}
  70%{opacity:1}
  90%,100%{left:110%;opacity:0}
}




@keyframes luxOrbit{

  to{

    transform:
      translate(-50%,-50%)
      rotateX(68deg)
      rotateZ(360deg);

  }

}




@keyframes luxA2{

  to{
    transform:
      translate(-130px,-110px)
      scale(1.3);
  }

}






@keyframes luxReveal {

    from {

        opacity:
            0;

        transform:
            translateY(20px);
    }

    to {

        opacity:
            1;

        transform:
            translateY(0);
    }
}




@keyframes luxHudRight{

  to{

    transform:
      translateY(calc(-50% - 9px))
      translateZ(140px)
      rotate(2deg);

  }

}




@keyframes luxBlue {

    0% {
        transform:
            translate3d(0,0,0)
            scale(1);
    }

    100% {
        transform:
            translate3d(150px,120px,0)
            scale(1.22);
    }
}




@keyframes luxShimmer {

    0% {
        left: -110px;
    }

    42%,100% {
        left: 130%;
    }
}




@keyframes dotPulse {

  50% {
    opacity:.25;
    transform:scale(.6);
  }

}




@keyframes luxParticle{

  0%{
    transform:translateY(60px);
    opacity:0;
  }

  30%{
    opacity:.2;
  }

  70%{
    opacity:.12;
  }

  100%{
    transform:translateY(-130px);
    opacity:0;
  }

}




@keyframes luxProgress{

  to{
    width:94%;
  }

}


@keyframes beamMoveTwo{
  to{transform:translate(-160px,-70px) rotate(18deg)}
}


@keyframes luxSpotFloat{
  0%{transform:translate(-52%,-48%) scale(.92)}
  100%{transform:translate(-47%,-53%) scale(1.08)}
}

/* ===== base rules ===== */


.stagebg .glow{
  position:absolute;
  border-radius:50%;
  filter:blur(100px);
  opacity:.38;
  mix-blend-mode:screen;
  will-change:transform;
}


.menu a:hover::after,.menu a.active::after{transform:scaleX(1);transform-origin:left}


.menu a.active{color:#fff}

.lux-portfolio,
.lux-portfolio *{
  box-sizing:border-box;
}

.lux-portfolio{

  --blue:#4d8dff;
  --blue2:#79a6ff;
  --violet:#987cff;

  position:relative;

  width:100vw;

  margin-left:calc(50% - 50vw);

  min-height:100vh;

  overflow:hidden;

  background:#02050f;

  color:#fff;

  isolation:isolate;

  padding:
    90px 0 40px;

}






.lux-bg{

  position:absolute;

  inset:0;

  z-index:-5;

  overflow:hidden;

}






.lux-aurora{

  position:absolute;

  border-radius:50%;

  filter:blur(120px);

  pointer-events:none;

}




.lux-a1{

  width:650px;
  height:650px;

  left:28%;
  top:-500px;

  background:
    rgba(22,130,160,.20);

  animation:
    luxA1
    14s
    ease-in-out
    infinite
    alternate;

}




.lux-a2{

  width:500px;
  height:500px;

  right:-280px;
  top:35%;

  background:
    rgba(60,75,210,.14);

  animation:
    luxA2
    18s
    ease-in-out
    infinite
    alternate;

}




.lux-a3{

  width:450px;
  height:450px;

  left:-300px;
  bottom:-250px;

  background:
    rgba(25,100,180,.12);

  animation:
    luxA3
    20s
    ease-in-out
    infinite
    alternate;

}






.lux-grid{

  position:absolute;

  inset:0;

  opacity:.13;

  background-image:

    linear-gradient(
      rgba(90,130,190,.13) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(90,130,190,.13) 1px,
      transparent 1px
    );

  background-size:70px 70px;

  mask-image:
    radial-gradient(
      ellipse at center,
      black 15%,
      transparent 75%
    );

  -webkit-mask-image:
    radial-gradient(
      ellipse at center,
      black 15%,
      transparent 75%
    );

  animation:
    luxGrid
    45s
    linear
    infinite;

}






.lux-noise{

  position:absolute;

  inset:0;

  opacity:.025;

  pointer-events:none;

  background-image:

    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

}






.lux-orbit{

  position:absolute;

  left:50%;
  top:53%;

  border:
    1px solid rgba(75,130,255,.07);

  border-radius:50%;

  transform:
    translate(-50%,-50%)
    rotateX(68deg);

  pointer-events:none;

}




.lux-orbit-1{

  width:900px;
  height:900px;

  animation:
    luxOrbit
    28s
    linear
    infinite;

}




.lux-orbit-2{

  width:1300px;
  height:1300px;

  animation:
    luxOrbit
    40s
    linear
    infinite
    reverse;

}






.lux-particles i{

  position:absolute;

  width:2px;
  height:2px;

  border-radius:50%;

  background:#fff;

  opacity:.15;

  box-shadow:
    0 0 10px rgba(70,150,255,.8);

  animation:
    luxParticle
    var(--speed)
    linear
    infinite;

}




.lux-particles i:nth-child(1){
  left:7%;top:25%;--speed:11s;
}



.lux-particles i:nth-child(2){
  left:16%;top:70%;--speed:16s;
}



.lux-particles i:nth-child(3){
  left:27%;top:18%;--speed:13s;
}



.lux-particles i:nth-child(4){
  left:39%;top:78%;--speed:18s;
}



.lux-particles i:nth-child(5){
  left:51%;top:24%;--speed:12s;
}



.lux-particles i:nth-child(6){
  left:62%;top:73%;--speed:15s;
}



.lux-particles i:nth-child(7){
  left:73%;top:21%;--speed:17s;
}



.lux-particles i:nth-child(8){
  left:83%;top:66%;--speed:14s;
}



.lux-particles i:nth-child(9){
  left:92%;top:31%;--speed:19s;
}



.lux-particles i:nth-child(10){
  left:95%;top:80%;--speed:13s;
}



.lux-particles i:nth-child(11){
  left:44%;top:35%;--speed:16s;
}



.lux-particles i:nth-child(12){
  left:4%;top:50%;--speed:12s;
}






.lux-cursor{

  position:fixed;

  width:360px;
  height:360px;

  border-radius:50%;

  pointer-events:none;

  z-index:100;

  transform:
    translate(-50%,-50%);

  background:
    radial-gradient(
      circle,
      rgba(55,130,255,.09),
      transparent 68%
    );

  filter:blur(12px);

  opacity:0;

}




.lux-cursor-dot{

  position:fixed;

  width:5px;
  height:5px;

  border-radius:50%;

  background:#fff;

  box-shadow:
    0 0 15px #4d8dff;

  pointer-events:none;

  z-index:101;

  transform:
    translate(-50%,-50%);

  opacity:0;

}

.lux-wrap{

  width:
    min(1280px,92vw);

  margin:auto;

}

.lux-top{

  display:flex;

  justify-content:space-between;

  align-items:center;

}

.lux-kicker{

  display:flex;

  align-items:center;

  gap:9px;

  color:#5895ff;

  font:
    600 9px Arial;

  letter-spacing:2.8px;

}




.lux-kicker span{

  width:6px;
  height:6px;

  border-radius:50%;

  background:#5895ff;

  box-shadow:
    0 0 15px #5895ff;

  animation:
    luxPulse
    2s
    ease-in-out
    infinite;

}




.lux-counter{

  display:flex;

  align-items:center;

  gap:7px;

  color:
    rgba(255,255,255,.3);

  font:
    9px Arial;

}




.lux-counter strong{

  color:#fff;

  font-weight:400;

}






.lux-heading{

  text-align:center;

  max-width:1000px;

  margin:24px auto 0;

}




.lux-heading h2{

  margin:0;

  font:
    400 clamp(48px,6.1vw,84px)/.96
    Arial,
    Helvetica,
    sans-serif;

  letter-spacing:-5px;

  color:#f6f8ff;

}




.lux-heading h2 span{

  font:
    italic 400 1.05em
    Georgia,
    "Times New Roman",
    serif;

  letter-spacing:-5px;

  background:
    linear-gradient(
      90deg,
      #fff,
      #7fa7ff,
      #aa85ff,
      #fff
    );

  background-size:250% auto;

  -webkit-background-clip:text;

  background-clip:text;

  -webkit-text-fill-color:transparent;

  animation:
    luxText
    5s
    ease
    infinite;

}




.lux-heading p{

  max-width:590px;

  margin:25px auto 0;

  color:
    rgba(220,230,255,.52);

  font:
    14px/1.7 Arial;

}






.lux-stage{

  position:relative;

  height:560px;

  max-width:1180px;

  margin:42px auto 0;

  perspective:2000px;

}






.lux-camera{

  position:absolute;

  left:50%;
  top:50%;

  width:720px;
  height:450px;

  transform:
    translate(-50%,-50%)
    rotateX(8deg)
    rotateY(-3deg);

  transform-style:preserve-3d;

  transition:
    transform .9s
    cubic-bezier(.16,1,.3,1);

}






.lux-card{

  position:absolute;

  left:50%;
  top:50%;

  width:390px;
  height:270px;

  overflow:hidden;

  border:
    1px solid rgba(255,255,255,.15);

  border-radius:14px;

  background:#0a1022;

  box-shadow:

    0 35px 90px rgba(0,0,0,.5),

    inset 0 1px 0 rgba(255,255,255,.08);

  transform-style:preserve-3d;

  transition:
    transform 1s
    cubic-bezier(.16,1,.3,1),
    opacity .8s ease,
    filter .8s ease;

}




.lux-card img{

  width:100%;
  height:100%;

  object-fit:cover;

  display:block;

  transition:
    transform 1.2s
    cubic-bezier(.16,1,.3,1);

}




.lux-card::after{

  content:"";

  position:absolute;

  inset:0;

  background:
    linear-gradient(
      180deg,
      transparent 50%,
      rgba(2,5,18,.6)
    );

}






.lux-card-10{

  transform:
    translate(-50%,-50%)
    translateZ(-280px)
    translate(185px,-100px)
    rotate(12deg)
    scale(.69);

  opacity:.14;

  filter:
    blur(4px)
    brightness(.55);

}




.lux-card-9{

  transform:
    translate(-50%,-50%)
    translateZ(-230px)
    translate(165px,-85px)
    rotate(10deg)
    scale(.75);

  opacity:.22;

  filter:
    blur(3px)
    brightness(.58);

}




.lux-card-8{

  transform:
    translate(-50%,-50%)
    translateZ(-170px)
    translate(135px,-65px)
    rotate(8deg)
    scale(.81);

  opacity:.38;

  filter:
    blur(2px)
    brightness(.62);

}




.lux-card-7{

  transform:
    translate(-50%,-50%)
    translateZ(-110px)
    translate(100px,-45px)
    rotate(6deg)
    scale(.87);

  opacity:.55;

  filter:
    blur(1.5px)
    brightness(.67);

}




.lux-card-6{

  transform:
    translate(-50%,-50%)
    translateZ(-65px)
    translate(65px,-27px)
    rotate(4deg)
    scale(.92);

  opacity:.72;

  filter:
    blur(1px)
    brightness(.72);

}




.lux-card-5{

  transform:
    translate(-50%,-50%)
    translateZ(-25px)
    translate(32px,-12px)
    rotate(2deg)
    scale(.96);

  opacity:.86;

  filter:
    brightness(.78);

}




.lux-card-4{

  transform:
    translate(-50%,-50%)
    translateZ(10px)
    translate(12px,-3px)
    rotate(1deg)
    scale(.985);

  opacity:.95;

}




.lux-card-3{

  transform:
    translate(-50%,-50%)
    translateZ(-45px)
    translate(-45px,18px)
    rotate(-3deg)
    scale(.93);

  opacity:.72;

  filter:
    blur(1px)
    brightness(.68);

}




.lux-card-2{

  transform:
    translate(-50%,-50%)
    translateZ(-105px)
    translate(-90px,40px)
    rotate(-5deg)
    scale(.86);

  opacity:.48;

  filter:
    blur(2px)
    brightness(.60);

}




.lux-card-1{

  transform:
    translate(-50%,-50%)
    translateZ(75px)
    translate(0,0)
    rotate(0deg)
    scale(1.04);

  z-index:20;

  opacity:1;

  filter:none;

}






.lux-card-1 .lux-card-shine{

  position:absolute;

  top:-100%;
  left:-60%;

  width:45%;
  height:300%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.12),
      transparent
    );

  transform:
    rotate(18deg);

  animation:
    luxShine
    6s
    ease-in-out
    infinite;

  z-index:5;

}






.lux-project-info{

  position:absolute;

  left:20px;
  right:20px;
  bottom:18px;

  z-index:10;

  display:flex;

  align-items:flex-end;

  justify-content:space-between;

}




.lux-project-info small{

  display:block;

  margin-bottom:5px;

  color:
    rgba(255,255,255,.45);

  font:
    7px Arial;

  letter-spacing:2px;

}




.lux-project-info strong{

  font:
    400 15px Arial;

  color:#fff;

}




.lux-project-info > span{

  width:36px;
  height:36px;

  display:flex;

  align-items:center;
  justify-content:center;

  border:
    1px solid rgba(255,255,255,.2);

  border-radius:50%;

  background:
    rgba(0,0,0,.22);

  backdrop-filter:
    blur(10px);

  transition:.5s ease;

}




.lux-card-1:hover
.lux-project-info > span{

  background:#fff;

  color:#000;

  transform:rotate(45deg);

}






.lux-center{

  position:absolute;

  left:50%;
  top:50%;

  width:150px;
  height:150px;

  z-index:30;

  transform:
    translate(-50%,-50%)
    translateZ(150px);

  pointer-events:none;

}




.lux-center-core{

  position:absolute;

  left:50%;
  top:50%;

  width:105px;
  height:105px;

  transform:
    translate(-50%,-50%);

  display:flex;

  flex-direction:column;

  align-items:center;
  justify-content:center;

  border:
    1px solid rgba(255,255,255,.18);

  border-radius:50%;

  background:
    rgba(3,8,24,.58);

  backdrop-filter:
    blur(20px);

  box-shadow:
    0 25px 70px rgba(0,0,0,.4);

}




.lux-center-core small{

  color:
    rgba(255,255,255,.35);

  font:
    7px Arial;

  letter-spacing:2px;

}




.lux-center-core strong{

  margin:
    5px 0;

  font:
    600 17px Arial;

}




.lux-center-core span{

  color:#679dff;

  font:
    7px Arial;

  letter-spacing:2px;

}




.lux-center-ring{

  position:absolute;

  inset:-24px;

  animation:
    luxRing
    24s
    linear
    infinite;

}




.lux-center-ring svg{

  width:100%;
  height:100%;

}




.lux-center-ring text{

  fill:
    rgba(115,160,255,.65);

  font:
    8px Arial;

  letter-spacing:3px;

}






.lux-hud{

  position:absolute;

  z-index:60;

  border:
    1px solid rgba(130,165,255,.18);

  border-radius:14px;

  background:
    linear-gradient(
      145deg,
      rgba(20,32,68,.72),
      rgba(6,14,37,.66)
    );

  backdrop-filter:
    blur(22px);

  box-shadow:

    0 25px 70px rgba(0,0,0,.35),

    inset 0 1px 0 rgba(255,255,255,.05);

}






.lux-hud-left{

  left:0;
  top:50%;

  width:160px;

  padding:18px;

  transform:
    translateY(-50%)
    translateZ(100px)
    rotate(-3deg);

  animation:
    luxHudLeft
    6s
    ease-in-out
    infinite
    alternate;

}




.lux-hud-icon{

  display:flex;

  align-items:flex-end;

  gap:3px;

  height:25px;

  margin-bottom:13px;

}




.lux-hud-icon span{

  width:5px;

  border-radius:3px;

  background:
    linear-gradient(
      #69a2ff,
      rgba(80,130,255,.2)
    );

}




.lux-hud-icon span:nth-child(1){
  height:35%;
}



.lux-hud-icon span:nth-child(2){
  height:65%;
}



.lux-hud-icon span:nth-child(3){
  height:100%;
}




.lux-hud-left small{

  color:
    rgba(255,255,255,.32);

  font:
    7px Arial;

  letter-spacing:1.5px;

}




.lux-hud-left strong{

  display:block;

  margin-top:5px;

  font:
    600 28px Arial;

  letter-spacing:-1px;

}




.lux-hud-left p{

  margin:3px 0 13px;

  color:#629aff;

  font:
    8px Arial;

}




.lux-mini-chart{

  display:flex;

  align-items:flex-end;

  gap:4px;

  height:25px;

}




.lux-mini-chart i{

  width:8px;

  border-radius:4px;

  background:
    linear-gradient(
      #5f9aff,
      rgba(70,110,220,.1)
    );

}




.lux-mini-chart i:nth-child(1){
  height:30%;
}



.lux-mini-chart i:nth-child(2){
  height:45%;
}



.lux-mini-chart i:nth-child(3){
  height:40%;
}



.lux-mini-chart i:nth-child(4){
  height:65%;
}



.lux-mini-chart i:nth-child(5){
  height:55%;
}



.lux-mini-chart i:nth-child(6){
  height:80%;
}



.lux-mini-chart i:nth-child(7){
  height:100%;
}






.lux-hud-right{

  right:0;
  top:53%;

  width:175px;

  padding:18px;

  transform:
    translateY(-50%)
    translateZ(120px)
    rotate(3deg);

  animation:
    luxHudRight
    7s
    ease-in-out
    infinite
    alternate;

}




.lux-hud-top{

  display:flex;

  justify-content:space-between;

  align-items:center;

}




.lux-hud-top small{

  color:
    rgba(255,255,255,.3);

  font:
    7px Arial;

  letter-spacing:1.5px;

}




.lux-hud-top span{

  width:24px;
  height:24px;

  display:flex;

  align-items:center;
  justify-content:center;

  border:
    1px solid rgba(255,255,255,.12);

  border-radius:50%;

  font-size:11px;

}




.lux-hud-right > strong{

  display:block;

  margin-top:15px;

  font:
    600 32px Arial;

  letter-spacing:-2px;

}




.lux-hud-right > strong span{

  color:#639cff;

}




.lux-hud-right p{

  margin:5px 0 15px;

  color:
    rgba(255,255,255,.42);

  font:
    9px/1.5 Arial;

}




.lux-progress{

  height:2px;

  overflow:hidden;

  background:
    rgba(255,255,255,.08);

}




.lux-progress span{

  display:block;

  width:78%;

  height:100%;

  background:
    linear-gradient(
      90deg,
      #397fff,
      #8b78ff
    );

  animation:
    luxProgress
    3s
    ease-in-out
    infinite
    alternate;

}






.lux-floating-tag{

  position:absolute;

  z-index:70;

  display:flex;

  align-items:center;

  gap:8px;

  padding:
    7px 11px;

  border:
    1px solid rgba(100,145,255,.18);

  border-radius:50px;

  background:
    rgba(8,18,45,.58);

  backdrop-filter:
    blur(15px);

  color:
    rgba(255,255,255,.55);

  font:
    7px Arial;

  letter-spacing:1.4px;

  box-shadow:
    0 15px 40px rgba(0,0,0,.2);

}




.lux-floating-tag span{

  color:#619aff;

}




.lux-tag-1{

  left:22%;
  top:9%;

  animation:
    luxTag1
    5s
    ease-in-out
    infinite
    alternate;

}




.lux-tag-2{

  right:22%;
  top:14%;

  animation:
    luxTag2
    6s
    ease-in-out
    infinite
    alternate;

}




.lux-tag-3{

  left:29%;
  bottom:5%;

  animation:
    luxTag3
    7s
    ease-in-out
    infinite
    alternate;

}






.lux-bottom{

  display:grid;

  grid-template-columns:
    1fr auto 1fr;

  align-items:center;

  margin-top:
    25px;

}




.lux-scroll{

  display:flex;

  align-items:center;

  gap:9px;

  color:
    rgba(255,255,255,.30);

  font:
    8px Arial;

  letter-spacing:2px;

}




.lux-scroll span{

  width:18px;
  height:30px;

  border:
    1px solid rgba(255,255,255,.18);

  border-radius:12px;

  position:relative;

}




.lux-scroll span::after{

  content:"";

  position:absolute;

  left:50%;
  top:6px;

  width:3px;
  height:6px;

  border-radius:3px;

  background:#659cff;

  transform:
    translateX(-50%);

  animation:
    luxScroll
    1.8s
    ease-in-out
    infinite;

}




.lux-dots{

  display:flex;

  align-items:center;

  gap:6px;

}




.lux-dots button{

  width:5px;
  height:5px;

  padding:0;

  border:0;

  border-radius:50%;

  background:
    rgba(255,255,255,.20);

  cursor:pointer;

  transition:.4s ease;

}




.lux-dots button.active{

  width:20px;

  border-radius:5px;

  background:#619aff;

  box-shadow:
    0 0 12px rgba(70,140,255,.4);

}




.lux-next{

  justify-self:end;

  display:flex;

  align-items:center;

  gap:12px;

  color:
    rgba(255,255,255,.30);

  font:
    8px Arial;

  letter-spacing:2px;

}




.lux-next b{

  width:30px;
  height:30px;

  display:flex;

  align-items:center;
  justify-content:center;

  border:
    1px solid rgba(255,255,255,.15);

  border-radius:50%;

  color:#fff;

  font-weight:400;

}







.lux-spotlight{
  position:absolute;width:780px;height:780px;left:50%;top:45%;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(73,142,255,.12),rgba(73,142,255,.035) 30%,transparent 68%);
  filter:blur(10px);mix-blend-mode:screen;pointer-events:none;
  animation:luxSpotFloat 12s ease-in-out infinite alternate;
}


.lux-scanline{
  position:absolute;left:0;right:0;top:-20%;height:20%;
  background:linear-gradient(to bottom,transparent,rgba(115,170,255,.05),transparent);
  filter:blur(8px);pointer-events:none;animation:luxScan 9s linear infinite;
}


.lux-vignette{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 42%,rgba(0,0,0,.16) 72%,rgba(0,0,0,.52) 100%);
}


.lux-grid{
  opacity:.095;
  transform:perspective(900px) rotateX(58deg) scale(1.5);
  transform-origin:center 78%;
  mask-image:linear-gradient(to bottom,transparent,black 35%,black 70%,transparent);
}


.lux-camera-frame{
  position:absolute;inset:-34px -44px;z-index:80;pointer-events:none;
  border:1px solid rgba(130,165,255,.065);border-radius:24px;
  box-shadow:inset 0 0 90px rgba(65,125,255,.035),0 0 70px rgba(65,125,255,.035);
  transform:translateZ(25px);
}


.frame-corner{position:absolute;width:26px;height:26px;border-color:rgba(145,184,255,.45);border-style:solid}


.fc-tl{left:-1px;top:-1px;border-width:1px 0 0 1px}


.fc-tr{right:-1px;top:-1px;border-width:1px 1px 0 0}


.fc-bl{left:-1px;bottom:-1px;border-width:0 0 1px 1px}


.fc-br{right:-1px;bottom:-1px;border-width:0 1px 1px 0}


.frame-line{
  position:absolute;left:7%;right:7%;top:50%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(115,165,255,.12),transparent);
}


.lux-camera-meta{
  position:absolute;z-index:85;top:-22px;display:flex;align-items:center;gap:8px;
  color:rgba(210,225,255,.36);font:600 7px/1 Arial,sans-serif;
  letter-spacing:1.8px;white-space:nowrap;transform:translateZ(55px);
}


.meta-top-left{left:-20px}

.meta-top-right{right:-20px}


.meta-top-left i{
  width:5px;height:5px;border-radius:50%;background:#6aa3ff;
  box-shadow:0 0 12px #6aa3ff;animation:luxPulse 1.7s ease-in-out infinite;
}


.meta-top-right b{font-size:10px;color:rgba(255,255,255,.65);font-weight:400}


.lux-depth-label{
  position:absolute;z-index:84;right:-43px;top:48%;
  writing-mode:vertical-rl;transform:translateZ(55px);
  color:rgba(185,205,240,.22);font:600 6px/1 Arial,sans-serif;letter-spacing:3px;
}


.lux-card-1{
  border-color:rgba(205,225,255,.25);
  box-shadow:0 55px 120px rgba(0,0,0,.64),0 0 55px rgba(57,123,255,.10),
    inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.025);
}


.lux-card-1::before{
  content:"";position:absolute;inset:0;z-index:6;pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.09),transparent 18%,transparent 72%,rgba(120,165,255,.06));
  mix-blend-mode:screen;
}


.lux-card-1 img{transform:scale(1.012)}


.lux-card-1:hover img{transform:scale(1.045)}


.lux-card-1::after{
  background:linear-gradient(180deg,transparent 42%,rgba(2,5,18,.78) 100%);
}


.lux-hud{
  background:linear-gradient(135deg,rgba(23,36,74,.62),rgba(4,10,26,.56));
  border-color:rgba(170,198,255,.15);
  box-shadow:0 35px 90px rgba(0,0,0,.42),0 0 35px rgba(65,125,255,.045),
    inset 0 1px 0 rgba(255,255,255,.085),inset 0 -1px 0 rgba(255,255,255,.025);
}


.lux-hud::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.045) 48%,transparent 65%);
  background-size:220% 100%;animation:luxHudSweep 8s ease-in-out infinite;
}


.lux-floating-tag{
  border-color:rgba(145,180,255,.14);
  background:linear-gradient(135deg,rgba(25,42,82,.48),rgba(5,12,29,.45));
  box-shadow:0 20px 55px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.065);
}


.lux-center::before,.lux-center::after{
  content:"";position:absolute;left:50%;top:50%;width:185px;height:185px;
  transform:translate(-50%,-50%);border-radius:50%;
  border:1px solid rgba(100,150,255,.055);pointer-events:none;
}


.lux-center::after{
  width:220px;height:220px;border-style:dashed;opacity:.5;
  animation:luxOuterRing 30s linear infinite reverse;
}


.lux-dots button{position:relative}


.lux-dots button:not(.active)::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1px solid transparent;transition:.35s ease;
}


.lux-dots button:hover::after{border-color:rgba(110,160,255,.22)}


.lux-cursor{
  background:radial-gradient(circle,rgba(74,145,255,.13),rgba(74,145,255,.045) 28%,transparent 70%);
  mix-blend-mode:screen;
}





.tech-stack-premium{
  --bg:#01070d;
  --ink:#f5f7fb;
  --muted:rgba(225,232,242,.62);
  --line:rgba(145,166,190,.20);
  --blue:#66a8ff;
  --violet:#a64dff;
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  min-height:780px;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(ellipse at 24% 52%,rgba(0,73,145,.18),transparent 38%),
    radial-gradient(ellipse at 76% 65%,rgba(17,54,115,.10),transparent 42%),
    #010407;
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
}



.tech-bg{position:absolute;inset:0;z-index:-1;overflow:hidden}


.tech-bg:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.18),transparent 25%,transparent 75%,rgba(0,0,0,.35));
  pointer-events:none;
}


.smoke{
  position:absolute;border-radius:50%;filter:blur(55px);opacity:.5;
  mix-blend-mode:screen;pointer-events:none;
}


.smoke-1{
  width:330px;height:170px;left:-80px;top:55px;
  background:radial-gradient(ellipse,#6b008e 0%,#24003e 45%,transparent 72%);
  animation:smokeFloat1 13s ease-in-out infinite alternate;
}


.smoke-2{
  width:470px;height:190px;left:-110px;bottom:55px;
  background:radial-gradient(ellipse,#7600b6 0%,#20004e 43%,transparent 72%);
  animation:smokeFloat2 16s ease-in-out infinite alternate;
}


.smoke-3{
  width:360px;height:170px;right:-130px;top:25%;
  background:radial-gradient(ellipse,#004e96 0%,#071a45 45%,transparent 72%);
  opacity:.22;animation:smokeFloat3 18s ease-in-out infinite alternate;
}


.smoke-4{
  width:270px;height:120px;right:10%;bottom:-70px;
  background:radial-gradient(ellipse,#6d00a4 0%,transparent 70%);
  opacity:.24;animation:smokeFloat4 12s ease-in-out infinite alternate;
}


.glow{position:absolute;border-radius:50%;filter:blur(100px);pointer-events:none}


.glow-a{width:420px;height:420px;left:34%;top:35%;background:rgba(0,73,170,.08)}


.glow-b{width:300px;height:300px;right:4%;bottom:10%;background:rgba(110,30,220,.06)}


.tech-stars{
  position:absolute;inset:0;opacity:.22;
  background-image:radial-gradient(circle,rgba(255,255,255,.7) 1px,transparent 1.2px);
  background-size:145px 145px;
  animation:starsMove 28s linear infinite;
}



.tech-container{width:min(1118px,90vw);margin:0 auto;padding:112px 0 42px}


.tech-heading{text-align:center}


.tech-eyebrow{
  display:flex;align-items:center;justify-content:center;gap:12px;
  margin-bottom:17px;color:#6ea7ff;font-size:8px;font-weight:700;
  letter-spacing:3.2px;opacity:.72;
}


.tech-eyebrow i{display:block;width:34px;height:1px;background:linear-gradient(90deg,transparent,#578dff)}


.tech-eyebrow i:last-child{background:linear-gradient(90deg,#578dff,transparent)}


.tech-heading h2{
  margin:0;font-size:54px;line-height:1.05;letter-spacing:-2.5px;font-weight:700;
}


.tech-heading p{
  width:min(690px,100%);margin:30px auto 0;
  color:var(--muted);font-size:14px;line-height:1.65;
}



.tech-grid{
  position:relative;
  display:grid;grid-template-columns:repeat(4,1fr);
  margin:78px auto 0;
  border-top:1px solid var(--line);
  border-left:0;
  perspective:1000px;
}


.tech-item{
  position:relative;height:209px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  cursor:pointer;
  transform-style:preserve-3d;
  transition:background .55s ease,transform .55s cubic-bezier(.16,1,.3,1),box-shadow .55s ease;
}


.tech-item:nth-child(4n){border-right:0}


.tech-item:nth-last-child(-n+4){border-bottom:0}


.tech-item:before{
  content:"";position:absolute;inset:14px;opacity:0;border-radius:8px;
  background:radial-gradient(circle at 50% 40%,rgba(83,139,255,.12),transparent 62%);
  transition:opacity .5s ease;
}


.tech-item:after{
  content:"";position:absolute;left:12%;right:12%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(116,165,255,.35),transparent);
  transform:scaleX(0);transition:transform .6s cubic-bezier(.16,1,.3,1);
}


.tech-item:hover{
  z-index:3;
  background:rgba(15,30,54,.28);
  box-shadow:inset 0 0 50px rgba(38,105,190,.045);
}


.tech-item:hover:before{opacity:1}


.tech-item:hover:after{transform:scaleX(1)}


.tech-item:hover .tech-icon{
  transform:translateZ(55px) rotateX(-3deg) rotateY(5deg) scale(1.08);
  color:#fff;
  filter:drop-shadow(0 0 18px rgba(91,153,255,.18));
}


.tech-item>span{
  position:relative;z-index:2;margin-top:24px;color:rgba(235,240,248,.62);
  font-size:11px;font-weight:600;letter-spacing:.1px;
  transform:translateZ(16px);transition:color .4s ease,transform .5s ease;
}


.tech-item:hover>span{color:#fff;transform:translateZ(30px)}


.tech-footer{
  display:flex;justify-content:center;align-items:center;gap:18px;
  margin-top:30px;color:rgba(211,224,242,.24);
  font-size:7px;font-weight:700;letter-spacing:2.4px;
}


.footer-line{width:65px;height:1px;background:rgba(120,160,220,.16)}





.tech-stack-premium{
  --premium-blue:#6ba8ff;
  --premium-violet:#a76bff;
  --premium-cyan:#55d7ff;
  --premium-border:rgba(151,181,220,.16);
  --premium-ease:cubic-bezier(.16,1,.3,1);
  position:relative;
}





.tech-bg{
  background:
    radial-gradient(circle at 50% 48%,rgba(14,54,105,.09),transparent 33%),
    radial-gradient(circle at 20% 70%,rgba(24,84,150,.08),transparent 34%);
}



.tech-cursor-glow{
  position:absolute;
  left:50%;
  top:50%;
  width:560px;
  height:560px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,
    rgba(72,146,255,.10) 0%,
    rgba(98,80,255,.045) 28%,
    transparent 68%);
  filter:blur(18px);
  opacity:.8;
  pointer-events:none;
  transition:transform 1.2s var(--premium-ease);
}



.tech-ambient-orb{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  filter:blur(80px);
  mix-blend-mode:screen;
}



.orb-one{
  width:360px;height:360px;
  left:-180px;top:35%;
  background:rgba(71,0,142,.18);
  animation:ambientOrbOne 15s ease-in-out infinite alternate;
}



.orb-two{
  width:300px;height:300px;
  right:-140px;bottom:8%;
  background:rgba(0,81,173,.13);
  animation:ambientOrbTwo 18s ease-in-out infinite alternate;
}



.tech-beam{
  position:absolute;
  width:900px;
  height:1px;
  background:linear-gradient(90deg,
    transparent,
    rgba(96,160,255,.10),
    rgba(173,104,255,.13),
    transparent);
  filter:blur(2px);
  opacity:.7;
  transform-origin:center;
  pointer-events:none;
}



.beam-one{
  left:-15%;top:22%;
  transform:rotate(-17deg);
  animation:beamMoveOne 13s ease-in-out infinite alternate;
}


.beam-two{
  right:-15%;bottom:25%;
  transform:rotate(14deg);
  animation:beamMoveTwo 16s ease-in-out infinite alternate;
}





.tech-progress{
  position:absolute;
  right:34px;
  top:50%;
  z-index:20;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  color:rgba(210,225,245,.25);
  font:600 7px/1 Arial,sans-serif;
  letter-spacing:1.5px;
}



.progress-track{
  position:relative;
  width:1px;
  height:75px;
  overflow:hidden;
  background:rgba(150,180,220,.13);
}



.progress-track i{
  position:absolute;
  left:0;
  top:-35%;
  width:1px;
  height:35%;
  background:linear-gradient(
    to bottom,
    transparent,
    #72aaff,
    transparent
  );
  animation:progressTravel 2.8s ease-in-out infinite;
}





.tech-heading h2{
  position:relative;
  text-shadow:
    0 0 40px rgba(90,145,255,.04);
}



.tech-heading h2::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-15px;
  width:95px;
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(
    90deg,
    transparent,
    rgba(107,168,255,.5),
    rgba(167,107,255,.5),
    transparent
  );
}



.tech-heading p{
  opacity:.86;
}





.tech-grid{
  border-top-color:rgba(151,181,220,.17);
  transform:translateZ(0);
}



.tech-item{
  overflow:hidden;
  isolation:isolate;
  background:
    linear-gradient(
      135deg,
      rgba(10,21,37,.06),
      rgba(8,18,34,.01)
    );
  transition:
    transform .75s var(--premium-ease),
    background .7s ease,
    box-shadow .7s ease,
    border-color .7s ease;
  will-change:transform;
}



.tech-item:nth-child(1){--card-accent:#8c75ff}


.tech-item:nth-child(2){--card-accent:#61a5ff}


.tech-item:nth-child(3){--card-accent:#70a7ff}


.tech-item:nth-child(4){--card-accent:#c5d6ee}


.tech-item:nth-child(5){--card-accent:#7dafff}


.tech-item:nth-child(6){--card-accent:#9c75ff}


.tech-item:nth-child(7){--card-accent:#7c9dff}


.tech-item:nth-child(8){--card-accent:#78b8ff}


.tech-item:nth-child(9){--card-accent:#b05eff}


.tech-item:nth-child(10){--card-accent:#7db5ff}


.tech-item:nth-child(11){--card-accent:#b17aff}


.tech-item:nth-child(12){--card-accent:#70a8ff}



.tech-item:hover{
  transform:
    perspective(1100px)
    translateZ(12px)
    scale(1.025);
  background:
    radial-gradient(
      circle at var(--mx,50%) var(--my,50%),
      color-mix(in srgb,var(--card-accent) 12%,transparent),
      transparent 52%
    ),
    rgba(13,28,49,.42);
  border-color:rgba(140,177,230,.28);
  box-shadow:
    inset 0 0 70px rgba(67,126,220,.045),
    0 20px 70px rgba(0,0,0,.14);
}



.tech-item::before{
  z-index:-1;
  transition:opacity .7s ease,transform .9s var(--premium-ease);
}



.tech-item:hover::before{
  transform:scale(1.12);
}




.tech-item::after{
  z-index:10;
  height:1px;
  background:
    linear-gradient(
      90deg,
      transparent,
      var(--card-accent),
      transparent
    );
  box-shadow:0 0 14px var(--card-accent);
}





.tech-card-shine{
  position:absolute;
  z-index:8;
  width:45%;
  height:180%;
  left:-80%;
  top:-40%;
  pointer-events:none;
  transform:rotate(22deg);
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.07),
    rgba(122,171,255,.10),
    transparent
  );
  filter:blur(3px);
  opacity:0;
}



.tech-item:hover .tech-card-shine{
  opacity:1;
  animation:cardShine 1.15s var(--premium-ease);
}





.tech-card-corner{
  position:absolute;
  z-index:9;
  width:10px;
  height:10px;
  opacity:0;
  transition:opacity .45s ease,transform .6s var(--premium-ease);
  border-color:var(--card-accent);
  border-style:solid;
}



.corner-tl{
  left:15px;top:15px;
  border-width:1px 0 0 1px;
}


.corner-br{
  right:15px;bottom:15px;
  border-width:0 1px 1px 0;
}



.tech-item:hover .tech-card-corner{
  opacity:.8;
}



.tech-item:hover .corner-tl{
  transform:translate(3px,3px);
}


.tech-item:hover .corner-br{
  transform:translate(-3px,-3px);
}





.tech-card-index{
  position:absolute;
  right:15px;
  top:14px;
  z-index:10;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--card-accent);
  opacity:.15;
  box-shadow:0 0 12px var(--card-accent);
  transition:opacity .4s ease,transform .5s var(--premium-ease);
}



.tech-item:hover .tech-card-index{
  opacity:.9;
  transform:scale(1.7);
}



.tech-item:hover .tech-icon{
  transform:
    translateZ(70px)
    rotateX(-5deg)
    rotateY(7deg)
    scale(1.10);
  filter:
    drop-shadow(0 14px 24px rgba(0,0,0,.22))
    drop-shadow(0 0 18px color-mix(in srgb,var(--card-accent) 25%,transparent));
}



.tech-item>span{
  transition:
    color .55s ease,
    transform .7s var(--premium-ease),
    letter-spacing .55s ease;
}



.tech-item:hover>span{
  letter-spacing:.35px;
}





.tech-item{
  opacity:0;
  transform:translateY(28px);
}



.tech-item.tech-visible{
  opacity:1;
  transform:translateY(0);
}



.tech-item.tech-visible:hover{
  transform:
    perspective(1100px)
    translateZ(12px)
    scale(1.025);
}



.tech-item:nth-child(1){transition-delay:.03s}


.tech-item:nth-child(2){transition-delay:.07s}


.tech-item:nth-child(3){transition-delay:.11s}


.tech-item:nth-child(4){transition-delay:.15s}


.tech-item:nth-child(5){transition-delay:.19s}


.tech-item:nth-child(6){transition-delay:.23s}


.tech-item:nth-child(7){transition-delay:.27s}


.tech-item:nth-child(8){transition-delay:.31s}


.tech-item:nth-child(9){transition-delay:.35s}


.tech-item:nth-child(10){transition-delay:.39s}


.tech-item:nth-child(11){transition-delay:.43s}


.tech-item:nth-child(12){transition-delay:.47s}





.tech-footer{
  opacity:.7;
  transition:opacity .5s ease;
}



.tech-stack-premium:hover .tech-footer{
  opacity:1;
}






.tech-live-badge{
  width:max-content;
  margin:0 auto 22px;
  padding:8px 13px;
  border:1px solid rgba(116,164,230,.16);
  border-radius:999px;
  background:rgba(7,15,27,.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 10px 35px rgba(0,0,0,.18);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  color:rgba(218,229,244,.45);
  font:700 7px/1 Arial,sans-serif;
  letter-spacing:2.2px;
}


.live-dot{
  display:inline-block;
  width:5px;height:5px;
  margin-right:7px;
  border-radius:50%;
  background:#65a5ff;
  box-shadow:0 0 0 0 rgba(101,165,255,.55);
  animation:livePulse 1.8s infinite;
}


.tech-live-badge b{
  margin-left:7px;
  color:rgba(120,174,255,.55);
  font-size:5px;
}




.tech-live-logo{
  position:absolute;
  z-index:5;
  width:54px;
  height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:translateZ(52px) scale(.78);
  opacity:0;
  pointer-events:none;
  transition:
    opacity .55s ease,
    transform .85s cubic-bezier(.16,1,.3,1),
    filter .55s ease;
}


.tech-live-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  filter:
    drop-shadow(0 10px 18px rgba(0,0,0,.3))
    drop-shadow(0 0 15px rgba(93,154,255,.08));
}


.tech-item:hover .tech-live-logo{
  opacity:1;
  transform:
    translateZ(82px)
    translateY(-7px)
    scale(1.04)
    rotateX(-4deg)
    rotateY(6deg);
  filter:drop-shadow(0 15px 28px rgba(0,0,0,.3));
}


.tech-item:hover .tech-icon{
  opacity:.09;
  transform:translateZ(22px) scale(.8);
}




.tech-grid{
  transform-style:preserve-3d;
  box-shadow:
    0 -25px 100px rgba(20,76,145,.035),
    0 35px 100px rgba(0,0,0,.15);
}


.tech-grid:before{
  content:"";
  position:absolute;
  z-index:0;
  inset:-35px -20px;
  border-radius:22px;
  border:1px solid rgba(129,166,216,.045);
  background:
    linear-gradient(135deg,rgba(255,255,255,.012),transparent 40%),
    rgba(5,13,24,.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 40px 100px rgba(0,0,0,.16);
  pointer-events:none;
}




.tech-grid:after{
  content:"";
  position:absolute;
  z-index:20;
  left:-10%;
  top:-30%;
  width:4%;
  height:160%;
  pointer-events:none;
  transform:rotate(14deg);
  background:linear-gradient(
    90deg,
    transparent,
    rgba(110,170,255,.07),
    rgba(185,120,255,.07),
    transparent
  );
  filter:blur(8px);
  animation:gridScan 9s ease-in-out infinite;
}




.tech-item{
  transform-style:preserve-3d;
  backface-visibility:hidden;
}


.tech-item:before{
  transform:translateZ(-1px);
}


.tech-item>span{
  z-index:12;
}


.tech-card-index{
  transform:translateZ(35px);
}




.tech-item .tech-live-logo:before{
  content:"";
  position:absolute;
  inset:-15px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(91,157,255,.09),transparent 65%);
  filter:blur(12px);
  z-index:-1;
}




.tech-item:hover{
  box-shadow:
    inset 0 0 70px rgba(67,126,220,.055),
    0 25px 90px rgba(0,0,0,.20),
    0 0 35px rgba(80,140,255,.035);
}




.tech-container{
  transform-style:preserve-3d;
}





.tech-stack-premium .tech-grid{
  position:relative;
  z-index:5;
}


.tech-stack-premium .tech-item{
  position:relative;
  z-index:2;
  opacity:1 !important;
  visibility:visible !important;
  transform:translateY(0) !important;
}


.tech-stack-premium .tech-item.tech-visible{
  opacity:1 !important;
  visibility:visible !important;
}


.tech-stack-premium .tech-grid:after{
  z-index:1 !important;
  pointer-events:none;
}


.tech-stack-premium .tech-grid:before{
  z-index:-1 !important;
}







.tech-stack-premium .fallback-icon{
  opacity:.04 !important;
  transform:translateZ(5px) scale(.55) !important;
  pointer-events:none;
}



.tech-stack-premium .tech-live-logo{
  position:relative;
  z-index:30;
  width:82px;
  height:82px;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:1;
  transform:translateZ(45px);
  pointer-events:none;
  transition:
    transform .8s cubic-bezier(.16,1,.3,1),
    filter .65s ease;
}



.tech-stack-premium .tech-live-logo img{
  position:relative;
  z-index:3;
  display:block;
  width:64px;
  height:64px;
  object-fit:contain;
  filter:
    drop-shadow(0 13px 22px rgba(0,0,0,.38))
    drop-shadow(0 0 14px rgba(94,158,255,.08));
  transition:
    transform .75s cubic-bezier(.16,1,.3,1),
    filter .65s ease;
}



.tech-stack-premium .logo-halo{
  position:absolute;
  z-index:1;
  width:76px;
  height:76px;
  border-radius:50%;
  background:
    radial-gradient(circle,
      rgba(85,150,255,.12) 0%,
      rgba(111,91,255,.05) 36%,
      transparent 70%);
  filter:blur(10px);
  opacity:.55;
  transform:scale(.82);
  transition:
    transform .8s cubic-bezier(.16,1,.3,1),
    opacity .55s ease;
}



.tech-stack-premium .tech-item:hover .tech-live-logo{
  transform:
    translateZ(88px)
    translateY(-8px)
    rotateX(-5deg)
    rotateY(7deg)
    scale(1.06);
  filter:drop-shadow(0 25px 35px rgba(0,0,0,.22));
}



.tech-stack-premium .tech-item:hover .tech-live-logo img{
  transform:scale(1.12);
  filter:
    drop-shadow(0 16px 25px rgba(0,0,0,.35))
    drop-shadow(0 0 26px rgba(91,155,255,.18));
}



.tech-stack-premium .tech-item:hover .logo-halo{
  opacity:1;
  transform:scale(1.22);
}




.tech-stack-premium .tech-item{
  background:
    linear-gradient(145deg,
      rgba(20,34,55,.12),
      rgba(4,10,20,.08));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.018);
}



.tech-stack-premium .tech-item:hover{
  background:
    radial-gradient(
      circle at var(--mx,50%) var(--my,50%),
      rgba(81,145,255,.11),
      transparent 48%
    ),
    linear-gradient(145deg,
      rgba(24,43,70,.34),
      rgba(5,12,23,.22));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.075),
    inset 0 0 55px rgba(77,138,240,.035),
    0 25px 80px rgba(0,0,0,.24);
}




.tech-stack-premium .tech-item>span{
  margin-top:18px;
  color:rgba(240,245,252,.72);
  font-size:11px;
  letter-spacing:.15px;
  transform:translateZ(34px);
}



.tech-stack-premium .tech-item:hover>span{
  color:#fff;
  transform:translateZ(48px);
}




.tech-stack-premium .tech-item .tech-card-shine{
  z-index:20;
  opacity:0;
  width:35%;
  height:170%;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.06),
      rgba(110,175,255,.09),
      transparent
    );
  transform:rotate(20deg);
}



.tech-stack-premium .tech-item:hover .tech-card-shine{
  animation:premiumLogoSweep 1.15s cubic-bezier(.16,1,.3,1);
  opacity:1;
}




.tech-stack-premium .tech-card-index{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#6faaff;
  box-shadow:0 0 16px rgba(111,170,255,.7);
  opacity:.24;
}



.tech-stack-premium .tech-item:hover .tech-card-index{
  opacity:1;
  transform:translateZ(50px) scale(1.6);
}




.tech-stack-premium .tech-grid{
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(135,169,211,.10);
  background:
    linear-gradient(135deg,
      rgba(255,255,255,.012),
      rgba(20,46,80,.018));
  box-shadow:
    0 40px 120px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.025);
}



.tech-stack-premium .tech-grid:before{
  inset:12px;
  border-radius:15px;
  border:1px solid rgba(135,169,211,.035);
}






.tech-stack-premium .tech-item{
  position:relative;
  overflow:hidden;
  transform-style:preserve-3d;
}



.tech-stack-premium .tech-live-logo{
  position:relative;
  z-index:30;
  width:92px;
  height:92px;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:1 !important;
  visibility:visible !important;
  transform:translateZ(48px);
  pointer-events:none;
  transition:
    transform .75s cubic-bezier(.16,1,.3,1),
    filter .6s ease;
}



.tech-stack-premium .tech-live-logo img{
  position:relative;
  z-index:3;
  width:70px;
  height:70px;
  display:block;
  object-fit:contain;
  opacity:1 !important;
  visibility:visible !important;
  filter:
    drop-shadow(0 12px 22px rgba(0,0,0,.35))
    drop-shadow(0 0 18px rgba(94,158,255,.08));
  transition:
    transform .75s cubic-bezier(.16,1,.3,1),
    filter .6s ease;
}



.tech-stack-premium .logo-halo{
  position:absolute;
  z-index:1;
  width:88px;
  height:88px;
  border-radius:50%;
  background:
    radial-gradient(circle,
      rgba(92,156,255,.13) 0%,
      rgba(124,89,255,.055) 35%,
      transparent 70%);
  filter:blur(12px);
  opacity:.8;
  transition:transform .75s cubic-bezier(.16,1,.3,1);
}




.tech-stack-premium .fallback-icon,
.tech-stack-premium .tech-icon,
.tech-stack-premium .text-icon,
.tech-stack-premium .php-icon,
.tech-stack-premium .slack-icon{
  display:none !important;
}




.tech-stack-premium .tech-item::before{
  z-index:0;
}


.tech-stack-premium .tech-card-shine{
  z-index:20;
}


.tech-stack-premium .tech-card-corner{
  z-index:25;
}



.tech-stack-premium .tech-item>span:not(.tech-card-shine):not(.tech-card-corner):not(.tech-card-index){
  position:relative;
  z-index:40;
}




.tech-stack-premium .tech-item{
  background:
    radial-gradient(
      circle at 50% 40%,
      rgba(40,80,135,.045),
      transparent 45%
    ),
    rgba(4,12,22,.16);
}



.tech-stack-premium .tech-item:hover{
  background:
    radial-gradient(
      circle at var(--mx,50%) var(--my,50%),
      rgba(83,145,255,.12),
      transparent 48%
    ),
    linear-gradient(
      145deg,
      rgba(22,42,68,.34),
      rgba(4,11,21,.18)
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 0 70px rgba(80,145,255,.04),
    0 24px 80px rgba(0,0,0,.25);
}



.tech-stack-premium .tech-item:hover .tech-live-logo{
  transform:
    translateZ(88px)
    translateY(-8px)
    rotateX(-4deg)
    rotateY(7deg)
    scale(1.06);
}



.tech-stack-premium .tech-item:hover .tech-live-logo img{
  transform:scale(1.10);
  filter:
    drop-shadow(0 17px 28px rgba(0,0,0,.4))
    drop-shadow(0 0 26px rgba(92,157,255,.16));
}



.tech-stack-premium .tech-item:hover .logo-halo{
  transform:scale(1.25);
}




.tech-stack-premium .tech-item>span{
  margin-top:10px !important;
  color:rgba(238,244,252,.72);
  font-size:11px;
  font-weight:600;
  letter-spacing:.15px;
  transform:translateZ(38px);
}




.tech-stack-premium .tech-live-logo img[src=""]{
  display:none;
}






.tech-stack-premium{
  --v7-blue:#69a9ff;
  --v7-cyan:#57dcff;
  --v7-purple:#a36bff;
  --v7-white:#f5f8ff;
  background:
    radial-gradient(circle at 50% 42%,rgba(27,76,137,.10),transparent 32%),
    radial-gradient(circle at 10% 80%,rgba(88,0,156,.12),transparent 30%),
    #02070d;
}



.tech-stack-premium .tech-container{
  position:relative;
  z-index:5;
}




.tech-stack-premium .tech-heading h2{
  font-size:clamp(44px,4.2vw,64px);
  letter-spacing:-3px;
  text-shadow:0 0 45px rgba(90,155,255,.08);
}


.tech-stack-premium .tech-heading p{
  max-width:720px;
  color:rgba(229,237,247,.62);
}




.tech-stack-premium .tech-grid{
  position:relative;
  margin-top:72px;
  border:1px solid rgba(144,179,224,.14);
  border-radius:24px;
  overflow:hidden;
  background:
    linear-gradient(145deg,rgba(17,34,55,.18),rgba(2,9,17,.18));
  box-shadow:
    0 50px 140px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.035),
    0 0 0 1px rgba(74,133,211,.025);
}




.tech-stack-premium .tech-grid:before{
  content:"";
  position:absolute;
  z-index:0;
  inset:13px;
  border:1px solid rgba(151,184,225,.045);
  border-radius:15px;
  pointer-events:none;
}




.tech-stack-premium .tech-item{
  min-height:218px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  opacity:1!important;
  visibility:visible!important;
  transform-style:preserve-3d;
  background:
    radial-gradient(circle at 50% 40%,rgba(55,104,165,.055),transparent 48%),
    rgba(3,11,20,.14);
  transition:
    transform .75s cubic-bezier(.16,1,.3,1),
    background .6s ease,
    box-shadow .6s ease,
    border-color .6s ease;
}




.tech-stack-premium .tech-live-logo{
  position:relative;
  z-index:20;
  width:94px;
  height:94px;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:translateZ(50px);
  transition:transform .8s cubic-bezier(.16,1,.3,1);
}



.tech-stack-premium .tech-live-logo img{
  position:relative;
  z-index:3;
  display:block;
  width:72px;
  height:72px;
  object-fit:contain;
  opacity:1!important;
  visibility:visible!important;
  filter:
    drop-shadow(0 15px 24px rgba(0,0,0,.32));
  transition:
    transform .8s cubic-bezier(.16,1,.3,1),
    filter .6s ease;
}




.tech-stack-premium .inline-brand-logo{
  position:relative;
  z-index:3;
  width:72px;
  height:72px;
  display:block;
}


.tech-stack-premium .inline-brand-logo svg{
  width:100%;
  height:100%;
  display:block;
  filter:drop-shadow(0 15px 24px rgba(0,0,0,.32));
}




.tech-stack-premium .logo-aura{
  position:absolute;
  z-index:0;
  width:92px;
  height:92px;
  border-radius:50%;
  background:
    radial-gradient(circle,
      rgba(78,151,255,.15) 0%,
      rgba(122,77,255,.055) 38%,
      transparent 70%);
  filter:blur(14px);
  opacity:.75;
  transform:scale(.75);
  transition:transform .8s cubic-bezier(.16,1,.3,1),opacity .6s ease;
}




.tech-stack-premium .tech-icon,
.tech-stack-premium .text-icon,
.tech-stack-premium .php-icon,
.tech-stack-premium .slack-icon{
  display:none!important;
}




.tech-stack-premium .tech-item>span:not(.tech-card-shine):not(.tech-card-corner):not(.tech-card-index){
  position:relative;
  z-index:30;
  margin-top:13px!important;
  color:rgba(235,242,251,.70);
  font:600 11px/1.2 Arial,sans-serif;
  letter-spacing:.2px;
  transform:translateZ(35px);
  transition:color .45s ease,transform .7s cubic-bezier(.16,1,.3,1);
}




.tech-stack-premium .tech-item:hover{
  z-index:4;
  background:
    radial-gradient(circle at var(--mx,50%) var(--my,50%),
      rgba(85,151,255,.13),transparent 47%),
    linear-gradient(145deg,rgba(20,42,68,.36),rgba(3,11,20,.22));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.075),
    inset 0 0 80px rgba(69,139,235,.04),
    0 30px 90px rgba(0,0,0,.28);
}



.tech-stack-premium .tech-item:hover .tech-live-logo{
  transform:
    translateZ(100px)
    translateY(-8px)
    rotateX(-5deg)
    rotateY(7deg)
    scale(1.07);
}



.tech-stack-premium .tech-item:hover .tech-live-logo img,
.tech-stack-premium .tech-item:hover .inline-brand-logo svg{
  transform:scale(1.10);
  filter:
    drop-shadow(0 20px 30px rgba(0,0,0,.38))
    drop-shadow(0 0 25px rgba(91,157,255,.18));
}



.tech-stack-premium .tech-item:hover .logo-aura{
  transform:scale(1.35);
  opacity:1;
}



.tech-stack-premium .tech-item:hover>span:not(.tech-card-shine):not(.tech-card-corner):not(.tech-card-index){
  color:#fff;
  transform:translateZ(50px);
}




.tech-stack-premium .tech-card-shine{
  position:absolute;
  z-index:25;
  width:30%;
  height:180%;
  top:-40%;
  left:-75%;
  transform:rotate(20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),rgba(102,171,255,.08),transparent);
  opacity:0;
  pointer-events:none;
}


.tech-stack-premium .tech-item:hover .tech-card-shine{
  opacity:1;
  animation:v7Shine 1.15s cubic-bezier(.16,1,.3,1);
}




.tech-stack-premium .tech-item:after{
  content:"";
  position:absolute;
  z-index:18;
  top:0;
  left:12%;
  width:76%;
  height:1px;
  background:linear-gradient(90deg,transparent,#6ca9ff,#a46cff,transparent);
  box-shadow:0 0 16px rgba(95,160,255,.35);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .7s cubic-bezier(.16,1,.3,1);
}


.tech-stack-premium .tech-item:hover:after{
  transform:scaleX(1);
}




.tech-stack-premium .tech-card-corner{
  position:absolute;
  z-index:26;
  width:9px;
  height:9px;
  opacity:0;
  border-color:rgba(108,169,255,.75);
  border-style:solid;
  transition:opacity .4s ease,transform .5s ease;
}


.tech-stack-premium .corner-tl{left:15px;top:15px;border-width:1px 0 0 1px}


.tech-stack-premium .corner-br{right:15px;bottom:15px;border-width:0 1px 1px 0}


.tech-stack-premium .tech-item:hover .tech-card-corner{opacity:1}






.lux-bg{

  position:absolute;

  inset:0;

  overflow:hidden;

  pointer-events:none;

}






.lux-aurora{

  position:absolute;

  width:800px;

  height:800px;

  border-radius:50%;

  filter:blur(150px);

  opacity:.08;

  animation:
    luxAurora
    20s
    ease-in-out
    infinite
    alternate;

}




.lux-aurora-1{

  left:-500px;

  top:-100px;

  background:
    radial-gradient(
      circle,
      #0077ff,
      transparent 70%
    );

}




.lux-aurora-2{

  right:-500px;

  top:20%;

  background:
    radial-gradient(
      circle,
      #006eff,
      transparent 70%
    );

  animation-delay:-8s;

}




.lux-aurora-3{

  left:25%;

  bottom:-700px;

  background:
    radial-gradient(
      circle,
      #00a2ff,
      transparent 70%
    );

  opacity:.035;

  animation-delay:-13s;

}






.lux-orb{

  position:absolute;

  border-radius:50%;

  animation:
    luxOrb
    12s
    ease-in-out
    infinite;

}




.lux-orb-1{

  width:130px;

  height:130px;

  left:7%;

  top:35%;

  background:
    radial-gradient(
      circle at 35% 30%,
      rgba(100,190,255,.65),
      rgba(20,120,255,.1) 55%,
      transparent 72%
    );

  box-shadow:
    0 0 120px
    rgba(20,130,255,.18);

}




.lux-orb-2{

  width:55px;

  height:55px;

  right:7%;

  top:18%;

  background:
    radial-gradient(
      circle at 35% 30%,
      rgba(150,210,255,.7),
      transparent 70%
    );

  box-shadow:
    0 0 60px
    rgba(20,130,255,.25);

  animation-delay:-6s;

}

.lux-grid{

  position:absolute;

  left:-15%;

  width:130%;

  height:100%;

  bottom:-70%;

  background-image:

    linear-gradient(
      rgba(30,130,255,.045) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(30,130,255,.045) 1px,
      transparent 1px
    );

  background-size:
    80px 80px;

  transform:
    perspective(700px)
    rotateX(66deg);

  transform-origin:
    center bottom;

  mask-image:
    linear-gradient(
      to top,
      black,
      transparent 72%
    );

  opacity:.5;

  animation:
    luxGrid
    20s
    linear
    infinite;

}






.lux-cursor-light{

  position:absolute;

  width:750px;

  height:750px;

  left:
    var(--lux-x,50%);

  top:
    var(--lux-y,40%);

  transform:
    translate(-50%,-50%);

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(20,130,255,.075),
      rgba(20,130,255,.018) 35%,
      transparent 70%
    );

  filter:blur(12px);

  transition:
    left .4s ease-out,
    top .4s ease-out;

}






.lux-noise{

  position:absolute;

  inset:0;

  opacity:.025;

  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");

}






.lux-container{

  position:relative;

  z-index:5;

  width:
    min(
      1240px,
      calc(100% - 70px)
    );

  margin:auto;

}






.lux-header{

  margin-bottom:65px;

  opacity:0;

  transform:
    translateY(35px);

  animation:
    luxReveal
    1s
    .1s
    forwards;

}






.lux-eyebrow{

  display:flex;

  align-items:center;

  gap:9px;

  margin-bottom:20px;

  color:
    rgba(75,160,255,.8);

  font-size:9px;

  font-weight:600;

  letter-spacing:.32em;

}




.lux-eyebrow span{

  width:25px;

  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--blue)
    );

}




.lux-eyebrow i{

  width:3px;

  height:3px;

  border-radius:50%;

  background:var(--blue);

  box-shadow:
    0 0 10px
    var(--blue);

}






.lux-heading-row{

  display:flex;

  align-items:flex-end;

  justify-content:space-between;

  gap:70px;

}




.lux-heading-row h2{

  margin:0;

  max-width:820px;

  font-size:
    clamp(
      50px,
      5.8vw,
      84px
    );

  line-height:.93;

  letter-spacing:-.07em;

  font-weight:600;

}




.lux-heading-row h2 span{

  background:
    linear-gradient(
      100deg,
      #1687ff,
      #4caaff 50%,
      #8acbff
    );

  -webkit-background-clip:text;

  -webkit-text-fill-color:transparent;

  background-clip:text;

}




.lux-intro{

  display:flex;

  gap:14px;

  max-width:350px;

  margin-bottom:5px;

}




.lux-intro-line{

  width:20px;

  min-width:20px;

  height:1px;

  margin-top:8px;

  background:
    #247fff;

  box-shadow:
    0 0 12px
    rgba(20,130,255,.6);

}




.lux-intro p{

  margin:0;

  color:#626975;

  font-size:11px;

  line-height:1.75;

}






.lux-services-list{

  border-top:
    1px solid
    rgba(255,255,255,.075);

}






.lux-service{

  position:relative;

  min-height:150px;

  display:grid;

  grid-template-columns:
    75px
    minmax(min(100%,350px),1fr)
    260px
    60px;

  align-items:center;

  gap:25px;

  border-bottom:
    1px solid
    rgba(255,255,255,.075);

  cursor:pointer;

  transition:
    min-height .7s
      cubic-bezier(.2,.8,.2,1),
    background .5s;

}




.lux-service:hover,
.lux-service.active{

  min-height:220px;

  background:
    radial-gradient(
      ellipse 55% 120% at 35% 50%,
      rgba(15,105,220,.07),
      transparent 70%
    );

}






.lux-top-light{

  position:absolute;

  left:0;

  top:0;

  width:0;

  height:1px;

  background:
    linear-gradient(
      90deg,
      var(--blue),
      rgba(30,140,255,.2),
      transparent
    );

  box-shadow:
    0 0 18px
    rgba(20,130,255,.55);

  transition:
    width .8s
      cubic-bezier(.2,.8,.2,1);

}




.lux-service:hover
.lux-top-light,
.lux-service.active
.lux-top-light{

  width:75%;

}






.lux-number{

  color:#3b414b;

  font-size:9px;

  letter-spacing:.18em;

  transition:
    color .4s,
    text-shadow .4s;

}




.lux-service:hover
.lux-number,
.lux-service.active
.lux-number{

  color:#4ba8ff;

  text-shadow:
    0 0 18px
    rgba(20,130,255,.7);

}






.lux-service-title{

  position:relative;

  z-index:5;

}




.lux-service-title h3{

  margin:0;

  color:#f3f5f8;

  font-size:
    clamp(
      30px,
      3vw,
      45px
    );

  line-height:1;

  letter-spacing:-.06em;

  font-weight:500;

  transition:
    transform .65s
      cubic-bezier(.2,.8,.2,1),
    letter-spacing .5s;

}




.lux-service-title h3 span{

  color:#858b95;

  transition:
    color .4s;

}




.lux-service:hover
.lux-service-title h3{

  transform:
    translateX(13px);

  letter-spacing:-.065em;

}




.lux-service:hover
.lux-service-title h3 span{

  color:#d9dde4;

}






.lux-service-title p{

  max-width:430px;

  margin:
    13px 0 0;

  color:#555b65;

  font-size:10px;

  line-height:1.7;

  opacity:0;

  transform:
    translateY(8px);

  transition:
    opacity .45s,
    transform .55s;

}




.lux-service:hover
.lux-service-title p,
.lux-service.active
.lux-service-title p{

  opacity:1;

  transform:
    translateY(0);

}






.lux-service-meta{

  position:relative;

  z-index:5;

}




.lux-service-meta span{

  display:block;

  margin-bottom:8px;

  color:#737985;

  font-size:8px;

  font-weight:600;

  letter-spacing:.16em;

  transition:
    color .4s;

}




.lux-service-meta small{

  display:block;

  color:#464c56;

  font-size:9px;

  transition:
    color .4s;

}




.lux-service:hover
.lux-service-meta span{

  color:#8ec9ff;

}




.lux-service:hover
.lux-service-meta small{

  color:#777e89;

}






.lux-arrow{

  position:relative;

  z-index:15;

  width:48px;

  height:48px;

  display:grid;

  place-items:center;

  border:
    1px solid
    rgba(255,255,255,.1);

  border-radius:50%;

  color:#747b86;

  background:
    rgba(255,255,255,.015);

  transition:
    transform .55s,
    color .35s,
    border-color .4s,
    background .4s,
    box-shadow .4s;

}




.lux-arrow span{

  font-size:16px;

  transition:
    transform .45s;

}




.lux-service:hover
.lux-arrow,
.lux-service.active
.lux-arrow{

  color:#fff;

  border-color:
    rgba(40,150,255,.75);

  background:
    rgba(20,130,255,.13);

  box-shadow:
    0 0 35px
    rgba(20,130,255,.18);

  transform:
    scale(1.1);

}




.lux-service:hover
.lux-arrow span,
.lux-service.active
.lux-arrow span{

  transform:
    rotate(45deg);

}






.lux-image{

  position:absolute;

  z-index:10;

  right:105px;

  top:50%;

  width:380px;

  height:245px;

  transform:
    translateY(-50%)
    translateZ(0)
    rotate(4deg)
    scale(.62);

  opacity:0;

  pointer-events:none;

  transition:
    opacity .45s,
    transform .75s
      cubic-bezier(.2,.8,.2,1);

  filter:
    drop-shadow(
      0 35px 70px
      rgba(0,0,0,.65)
    );

}




.lux-service:hover
.lux-image,
.lux-service.active
.lux-image{

  opacity:1;

  transform:
    translateY(-50%)
    translateZ(70px)
    rotate(-2deg)
    scale(1);

}






.lux-image-glow{

  position:absolute;

  inset:-35px;

  border-radius:40px;

  background:
    radial-gradient(
      ellipse,
      rgba(20,130,255,.25),
      transparent 68%
    );

  filter:blur(30px);

  opacity:.45;

}






.lux-image-frame{

  position:relative;

  width:100%;

  height:100%;

  overflow:hidden;

  border-radius:18px;

  border:
    1px solid
    rgba(255,255,255,.22);

  background:#080b10;

  box-shadow:

    0 25px 80px
    rgba(0,0,0,.65),

    inset 0 1px 0
    rgba(255,255,255,.12);

}






.lux-image-frame img{

  width:100%;

  height:100%;

  object-fit:cover;

  display:block;

  transform:
    scale(1.08);

  filter:
    saturate(.9)
    contrast(1.05);

  transition:
    transform 1.3s
      cubic-bezier(.2,.8,.2,1);

}




.lux-service:hover
.lux-image-frame img{

  transform:
    scale(1.16);

}






.lux-image-overlay{

  position:absolute;

  inset:0;

  background:

    linear-gradient(
      135deg,
      rgba(10,110,255,.2),
      transparent 42%
    ),

    linear-gradient(
      to top,
      rgba(0,0,0,.72),
      transparent 60%
    );

}






.lux-image-shine{

  position:absolute;

  left:-130%;

  top:0;

  width:80%;

  height:100%;

  transform:
    skewX(-22deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.12),
      transparent
    );

}




.lux-service:hover
.lux-image-shine{

  animation:
    luxShine
    1.3s
    ease;

}






.lux-image-info{

  position:absolute;

  left:17px;

  bottom:15px;

  display:flex;

  align-items:center;

  gap:7px;

  color:#fff;

  font-size:7px;

  font-weight:600;

  letter-spacing:.17em;

}




.lux-status{

  width:5px;

  height:5px;

  border-radius:50%;

  background:#31a4ff;

  box-shadow:
    0 0 12px
    #1687ff;

  animation:
    luxStatus
    2s
    ease-in-out
    infinite;

}






.lux-footer{

  display:flex;

  justify-content:center;

  align-items:center;

  gap:10px;

  margin-top:42px;

  color:#4e545f;

  font-size:10px;

}




.lux-footer a{

  color:#83bdff;

  text-decoration:none;

  transition:
    color .3s,
    transform .3s;

}

.lux-footer a:hover{

  color:#fff;

  transform:
    translateX(5px);

}

.lux-footer b{

  font-size:14px;

  font-weight:400;

}


.ch-rp-filter.active{color:#fff;border-color:#3e7dff;background:linear-gradient(120deg,#1263ed,#6744ed);box-shadow:0 8px 26px rgba(49,91,255,.30),inset 0 1px rgba(255,255,255,.2)}


.ch-rp-page.active{color:#fff;border-color:#19c59c;background:linear-gradient(135deg,#08a87e,#12b995);box-shadow:0 8px 22px rgba(13,192,150,.22)}



.ultra-portfolio,
.ultra-portfolio * {
  box-sizing:border-box;
}

.ultra-portfolio {

  --bg:#030303;

  position:relative;

  width:100vw;
  max-width:100vw;

  margin-left:calc(50% - 50vw);

  padding:90px 0;

  overflow:hidden;

  background:
    radial-gradient(
      ellipse 70% 50% at 50% 105%,
      rgba(174,0,120,.20),
      transparent 70%
    ),
    #030303;

  color:#fff;

  isolation:isolate;
}






.up-noise {

  position:absolute;

  inset:0;

  z-index:-10;

  opacity:.035;

  pointer-events:none;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}






.up-grid {

  position:absolute;

  inset:0;

  z-index:-9;

  background-image:
    linear-gradient(
      rgba(255,255,255,.02) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.02) 1px,
      transparent 1px
    );

  background-size:70px 70px;

  transform:
    perspective(600px)
    rotateX(55deg)
    scale(1.8);

  transform-origin:
    center bottom;

  opacity:.4;

  mask-image:
    linear-gradient(
      to bottom,
      transparent 15%,
      black 60%,
      transparent 100%
    );

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      transparent 15%,
      black 60%,
      transparent 100%
    );

  animation:
    gridMove
    18s
    linear
    infinite;
}






.up-orb {

  position:absolute;

  border-radius:50%;

  filter:blur(110px);

  pointer-events:none;

  z-index:-8;
}




.up-orb-1 {

  width:500px;
  height:500px;

  left:-300px;
  top:-250px;

  background:
    rgba(61,73,255,.14);

  animation:
    orbA
    15s
    ease-in-out
    infinite alternate;
}




.up-orb-2 {

  width:600px;
  height:600px;

  right:-350px;
  top:100px;

  background:
    rgba(226,0,145,.12);

  animation:
    orbB
    18s
    ease-in-out
    infinite alternate;
}




.up-orb-3 {

  width:800px;
  height:350px;

  left:50%;
  bottom:-280px;

  transform:
    translateX(-50%);

  background:
    rgba(175,0,110,.18);

  animation:
    orbC
    10s
    ease-in-out
    infinite alternate;
}






.up-beam {

  position:absolute;

  width:1px;

  height:850px;

  top:-300px;

  background:
    linear-gradient(
      to bottom,
      transparent,
      rgba(255,255,255,.14),
      transparent
    );

  opacity:.25;

  z-index:-7;

  pointer-events:none;
}




.up-beam-1 {

  left:20%;

  transform:
    rotate(20deg);

  animation:
    beamA
    10s
    ease-in-out
    infinite alternate;
}




.up-beam-2 {

  right:20%;

  transform:
    rotate(-20deg);

  animation:
    beamB
    13s
    ease-in-out
    infinite alternate;
}






.up-particles {

  position:absolute;

  inset:0;

  pointer-events:none;

  z-index:-5;
}




.up-particles i {

  position:absolute;

  width:2px;
  height:2px;

  border-radius:50%;

  background:#fff;

  opacity:.25;

  box-shadow:
    0 0 10px #fff;

  animation:
    particle
    var(--time)
    ease-in-out
    infinite alternate;
}




.up-particles i:nth-child(1){
  left:8%;top:20%;--time:7s;
}



.up-particles i:nth-child(2){
  left:17%;top:70%;--time:9s;
}



.up-particles i:nth-child(3){
  left:29%;top:14%;--time:6s;
}



.up-particles i:nth-child(4){
  left:38%;top:80%;--time:10s;
}



.up-particles i:nth-child(5){
  left:48%;top:18%;--time:7s;
}



.up-particles i:nth-child(6){
  left:58%;top:75%;--time:8s;
}



.up-particles i:nth-child(7){
  left:69%;top:12%;--time:9s;
}



.up-particles i:nth-child(8){
  left:78%;top:68%;--time:6s;
}



.up-particles i:nth-child(9){
  left:90%;top:25%;--time:8s;
}



.up-particles i:nth-child(10){
  left:12%;top:45%;--time:11s;
}



.up-particles i:nth-child(11){
  left:73%;top:45%;--time:7s;
}



.up-particles i:nth-child(12){
  left:85%;top:82%;--time:9s;
}



.up-particles i:nth-child(13){
  left:42%;top:35%;--time:8s;
}



.up-particles i:nth-child(14){
  left:55%;top:50%;--time:10s;
}



.up-particles i:nth-child(15){
  left:25%;top:55%;--time:7s;
}



.up-particles i:nth-child(16){
  left:95%;top:55%;--time:8s;
}






.up-cursor-light {

  position:absolute;

  width:500px;
  height:500px;

  border-radius:50%;

  pointer-events:none;

  z-index:-2;

  transform:
    translate(-50%,-50%);

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,.05),
      transparent 65%
    );

  filter:blur(20px);

  transition:
    left .3s ease,
    top .3s ease;
}






.up-panel {

  position:relative;

  width:
    min(var(--wrap),calc(100% - 2*var(--gut)));

  margin:auto;

  padding:
    80px 0 35px;

  border-radius:
    44px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.065),
      rgba(255,255,255,.015) 45%,
      rgba(255,255,255,.035)
    );

  border:
    1px solid
    rgba(255,255,255,.11);

  box-shadow:

    0 80px 180px
    rgba(0,0,0,.58),

    inset 0 1px 0
    rgba(255,255,255,.09),

    inset 0 -1px 0
    rgba(255,255,255,.025);

  backdrop-filter:
    blur(20px);

  -webkit-backdrop-filter:
    blur(20px);

  overflow:hidden;

  transform-style:
    preserve-3d;
}






.up-panel::before {

  content:"";

  position:absolute;

  inset:-1px;

  border-radius:45px;

  padding:1px;

  background:
    conic-gradient(
      from 0deg,
      transparent,
      rgba(255,255,255,.15),
      transparent,
      rgba(180,0,140,.15),
      transparent
    );

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

  -webkit-mask-composite:xor;

  mask-composite:exclude;

  animation:
    borderRotate
    10s
    linear
    infinite;

  pointer-events:none;
}




.up-panel-inner-glow {

  position:absolute;

  width:800px;
  height:350px;

  top:-260px;
  left:50%;

  transform:
    translateX(-50%);

  background:
    radial-gradient(
      ellipse,
      rgba(255,255,255,.075),
      transparent 70%
    );

  filter:blur(40px);

  pointer-events:none;
}
.up-header {

  position:relative;

  z-index:30;

  text-align:center;

  padding:
    0 30px;

  margin-bottom:
    75px;
}

.up-eyebrow {

  display:flex;

  align-items:center;

  justify-content:center;

  gap:11px;

  margin-bottom:23px;

  color: #fff;

  font:
    600 9px
    Arial,
    sans-serif;

  letter-spacing:
    3.5px;
}

.up-dot {

  width:6px;
  height:6px;

  border-radius:50%;

  background:#fff;

  box-shadow:
    0 0 15px #fff;

  animation:
    dotPulse
    2.5s
    ease-in-out
    infinite;
}

.up-line {

  width:30px;
  height:1px;

  background: #fff;
}

.up-header h2 {

  margin:0 auto;

  max-width:900px;

  font:
    650 clamp(40px,4.6vw,70px)
    Inter,
    Arial,
    sans-serif;

  line-height:
    .98;

  letter-spacing:
    -4px;
}




.up-header h2 span {

  display:block;

  background:
    linear-gradient(
      100deg,
      #fff 0%,
      #888 45%,
      #fff 70%,
      #aaa 100%
    );

  background-size:
    250% auto;

  -webkit-background-clip:text;

  background-clip:text;

  -webkit-text-fill-color:
    transparent;

  animation:
    textFlow
    7s
    linear
    infinite;
}




.up-header p {

  max-width:590px;

  margin:
    22px auto 0;

  color: #fff;
  font:
    14px/1.7
    Inter,
    Arial,
    sans-serif;
}

.up-stage {

  position:relative;

  width:100%;

  display:flex;

  flex-direction:column;

  gap:20px;

  overflow:hidden;

  perspective:
    1400px;

  perspective-origin:
    center center;

  transform-style:
    preserve-3d;
}




.up-stage-light {

  position:absolute;

  width:700px;
  height:300px;

  left:50%;
  top:50%;

  transform:
    translate(-50%,-50%);

  background:
    radial-gradient(
      ellipse,
      rgba(255,255,255,.035),
      transparent 70%
    );

  filter:blur(30px);

  pointer-events:none;

  z-index:0;
}






.up-track {

  display:flex;

  width:max-content;

  gap:18px;

  transform-style:
    preserve-3d;

  will-change:
    transform;
}




.up-track-one {

  animation:
    upScrollLeft
    44s
    linear
    infinite;
}




.up-track-two {

  animation:
    upScrollRight
    48s
    linear
    infinite;
}






.up-card {

  position:relative;

  flex:
    0 0 auto;

  width:410px;
  height:235px;

  overflow:hidden;

  border-radius:
    18px;

  background:#080808;

  border:
    1px solid
    rgba(255,255,255,.11);

  box-shadow:

    0 35px 80px
    rgba(0,0,0,.48),

    inset 0 1px 0
    rgba(255,255,255,.08);

  transform-style:
    preserve-3d;

  transform:
    perspective(1400px)
    translateZ(0);

  transition:

    transform .7s
    cubic-bezier(.16,1,.3,1),

    box-shadow .5s ease,

    border-color .5s ease,

    filter .5s ease;

  isolation:isolate;
}






.up-card img {

  position:relative;

  z-index:1;

  display:block;

  width:100%;
  height:100%;

  object-fit:cover;

  object-position:
    top center;

  transform:
    translateZ(0)
    scale(1.001);

  transition:
    transform 1s
    cubic-bezier(.16,1,.3,1),

    filter .7s ease;
}






.up-card-glass {

  position:absolute;

  inset:0;

  z-index:3;

  pointer-events:none;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.12),
      transparent 25%,
      transparent 72%,
      rgba(255,255,255,.035)
    );
}






.up-card-shine {

  position:absolute;

  z-index:6;

  top:-120%;

  left:-80%;

  width:42%;

  height:350%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.17),
      transparent
    );

  transform:
    rotate(21deg);

  pointer-events:none;

  transition:
    left 1s
    cubic-bezier(.16,1,.3,1);
}






.up-card-label {

  position:absolute;

  top:13px;
  left:13px;

  z-index:7;

  padding:
    5px 8px;

  border-radius:
    30px;

  background:
    rgba(0,0,0,.28);

  border:
    1px solid
    rgba(255,255,255,.14);

  backdrop-filter:
    blur(10px);

  color:
    rgba(255,255,255,.7);

  font:
    9px Arial;

  letter-spacing:
    1px;
}






.up-card:hover {

  z-index:100;

  transform:
    perspective(1400px)
    translateZ(80px)
    translateY(-12px)
    scale(1.035);

  border-color:
    rgba(255,255,255,.3);

  box-shadow:

    0 50px 110px
    rgba(0,0,0,.7),

    0 0 70px
    rgba(180,0,130,.14),

    inset 0 1px 0
    rgba(255,255,255,.18);
}




.up-card:hover img {

  transform:
    translateZ(35px)
    scale(1.07);

  filter:
    brightness(1.06)
    contrast(1.02);
}




.up-card:hover .up-card-shine {

  left:135%;
}






.up-fade {

  position:absolute;

  top:-20px;
  bottom:-20px;

  width:190px;

  z-index:20;

  pointer-events:none;
}




.up-fade-left {

  left:0;

  background:
    linear-gradient(
      90deg,
      rgba(8,8,8,.99),
      rgba(8,8,8,.7) 35%,
      transparent
    );
}




.up-fade-right {

  right:0;

  background:
    linear-gradient(
      270deg,
      rgba(8,8,8,.99),
      rgba(8,8,8,.7) 35%,
      transparent
    );
}






.up-bottom-bar {

  position:relative;

  display:flex;

  align-items:center;

  justify-content:space-between;

  width:
    calc(100% - 70px);

  min-height:65px;

  margin:
    40px auto 0;

  padding:
    14px 18px;

  border-radius:
    15px;

  background:
    rgba(255,255,255,.035);

  border:
    1px solid
    rgba(255,255,255,.08);

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.05);
}




.up-stat {

  display:flex;

  align-items:center;

  gap:13px;
}




.up-stat strong {

  font:
    700 26px
    Inter,
    Arial;

  letter-spacing:
    -1.5px;
}




.up-stat span,
.up-stat small {

  display:block;

  font-family: 'Inter', system-ui, sans-serif;
}

.up-stat span {
  color: #fff;
  font-size:10px;
}

.up-stat small {

  margin-top:3px;
  color: #fff;
  font-size:8px;
}

.up-live {
  display:flex;
  align-items:center;
  gap:8px;
  color: #fff;
  font:
    8px Arial;

  letter-spacing:
    2px;
}




.up-live span {

  width:5px;
  height:5px;

  border-radius:50%;

  background:#9dffb4;

  box-shadow:
    0 0 12px #9dffb4;

  animation:
    livePulse
    2s
    ease-in-out
    infinite;
}

.up-cta {

  display:flex;

  align-items:center;

  gap:10px;

  color:#fff;

  font:
    9px Arial;

  letter-spacing:
    1.5px;

  cursor:pointer;
}

.up-cta b {

  display:flex;

  align-items:center;

  justify-content:center;
  color: #fff;
  width:28px;
  height:28px;

  border-radius:50%;
  cursor: pointer;
  border:
    1px solid #fff;

  font-size:14px;

  font-weight:400;

  transition:
    transform .4s ease,
    background .4s ease;
}

.up-cta:hover b {

  transform:
    rotate(45deg);

  background:
    rgba(255,255,255,.1);
}

.up-stage:hover
.up-track {

  animation-play-state:
    paused;
}
.lux-agency {
    --white: #fff;
    --muted: rgba(255,255,255,.62);
    --soft: rgba(255,255,255,.42);
    --line: rgba(255,255,255,.10);
    --blue: #3b82f6;
    --purple: #8b5cf6;

    position: relative !important;

    width: 100vw !important;
    max-width: 100vw !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    padding: 0 !important;

    min-height: 820px;

    overflow: hidden !important;

    isolation: isolate;

    background:
        radial-gradient(
            900px 650px at 0% -10%,
            rgba(15,105,255,.30),
            transparent 67%
        ),
        radial-gradient(
            850px 650px at 100% -5%,
            rgba(145,45,255,.25),
            transparent 67%
        ),
        radial-gradient(
            700px 500px at 50% 65%,
            rgba(20,60,140,.08),
            transparent 70%
        ),
        #050505 !important;

    color: #fff !important;
}






.lux-agency .lux-grid {
    position: absolute;

    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size: 75px 75px;

    opacity: .32;

    mask-image:
        radial-gradient(
            ellipse at center,
            black 10%,
            transparent 78%
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse at center,
            black 10%,
            transparent 78%
        );

    animation:
        gridDrift 20s linear infinite;

    z-index: -8;
}






.lux-agency .lux-blue {

    position: absolute;

    width: 700px;
    height: 700px;

    left: -300px;
    top: -360px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0,125,255,.38),
            rgba(0,80,200,.12) 43%,
            transparent 72%
        );

    filter: blur(35px);

    animation:
        luxBlue
        11s
        ease-in-out
        infinite alternate;

    z-index: -7;
}






.lux-agency .lux-purple {

    position: absolute;

    width: 680px;
    height: 680px;

    right: -280px;
    top: -320px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(165,60,255,.32),
            rgba(120,30,210,.10) 42%,
            transparent 72%
        );

    filter: blur(40px);

    animation:
        luxPurple
        13s
        ease-in-out
        infinite alternate;

    z-index: -7;
}






.lux-agency .lux-center-glow {

    position: absolute;

    width: 700px;
    height: 400px;

    left: 50%;
    top: 42%;

    transform: translate(-50%,-50%);

    background:
        radial-gradient(
            ellipse,
            rgba(62,95,255,.10),
            transparent 68%
        );

    filter: blur(40px);

    animation:
        centerPulse
        7s
        ease-in-out
        infinite alternate;

    z-index: -6;
}






.lux-agency .lux-mouse-light {

    position: absolute;

    width: 480px;
    height: 480px;

    left: var(--mx,50%);
    top: var(--my,40%);

    transform: translate(-50%,-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(85,135,255,.09),
            transparent 68%
        );

    filter: blur(18px);

    pointer-events: none;

    transition:
        left .9s cubic-bezier(.2,.8,.2,1),
        top .9s cubic-bezier(.2,.8,.2,1);

    z-index: -3;
}






.lux-agency .lux-orb {

    position: absolute;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #fff;

    box-shadow:
        0 0 14px rgba(110,160,255,.8),
        0 0 35px rgba(110,160,255,.4);

    opacity: .65;

    animation:
        orbFloat
        var(--time)
        ease-in-out
        infinite alternate;

    z-index: -2;
}






.lux-agency .lux-noise {

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: .035;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

    z-index: 15;
}






.lux-agency .lux-inner {

    position: relative;

    width: 100% !important;

    max-width: 1500px !important;

    margin: 0 auto !important;

    padding:
        88px
        55px
        75px !important;

    display: flex;

    flex-direction: column;

    align-items: center;

    z-index: 5;
}






.lux-agency .lux-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding:
        8px
        14px;

    border:
        1px solid
        rgba(255,255,255,.11);

    border-radius: 100px;

    background:
        rgba(255,255,255,.035);

    backdrop-filter:
        blur(15px);

    -webkit-backdrop-filter:
        blur(15px);

    color:
        rgba(255,255,255,.70);

    font-family: "Inter", system-ui, sans-serif;

    font-size:
        11px;

    letter-spacing:
        .5px;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.07);

    animation:
        luxReveal
        .9s
        cubic-bezier(.2,.8,.2,1)
        both;
}

.lux-agency .eyebrow-dot {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #65a8ff,
            #a879ff
        );

    box-shadow:
        0 0 14px
        rgba(80,140,255,.7);
}

.lux-agency .lux-proof {

    display: flex;

    align-items: center;

    gap: 13px;

    margin-top: 28px;

    margin-bottom: 39px;

    animation:
        luxReveal
        .9s
        .08s
        cubic-bezier(.2,.8,.2,1)
        both;
}




.lux-agency .lux-avatars {

    display: flex;

    align-items: center;
}

.lux-agency .lux-avatar {

    width: 32px !important;
    height: 32px !important;

    margin-left: -8px;

    border-radius: 50% !important;

    border:
        2px solid
        #050505 !important;

    object-fit: cover !important;

    transition:
        transform .35s ease,
        box-shadow .35s ease;

    animation:
        avatarMove
        4s
        ease-in-out
        infinite;
}




.lux-agency .lux-avatar:first-child {
    margin-left: 0;
}




.lux-agency .lux-avatar:nth-child(2) {
    animation-delay: -.7s;
}




.lux-agency .lux-avatar:nth-child(3) {
    animation-delay: -1.4s;
}




.lux-agency .lux-avatar:nth-child(4) {
    animation-delay: -2.1s;
}




.lux-agency .lux-avatar:hover {

    transform:
        translateY(-7px)
        scale(1.12);

    box-shadow:
        0 0 0 3px
        rgba(255,255,255,.08),
        0 12px 35px
        rgba(50,110,255,.3);
}




.lux-agency .lux-proof-content {

    display: flex;

    flex-direction: column;

    gap: 4px;
}




.lux-agency .lux-stars {

    font-size:
        11px;

    letter-spacing:
        2px;

    color:
        #fff;
}




.lux-agency .lux-proof-text {

    color:
        rgba(255,255,255,.55);

    font-size:
        11px;

    white-space:
        nowrap;
}






.lux-agency .lux-heading {

    width: 100% !important;

    max-width: 1080px !important;

    margin: 0 !important;

    padding: 0 !important;

    color: #fff !important;

    text-align: center !important;

    font-family: "Inter", system-ui, sans-serif !important;

    font-size:
        clamp(
            60px,
            6.5vw,
            96px
        ) !important;

    font-weight:
        700 !important;

    line-height:
        .94 !important;

    letter-spacing:
        -5.7px !important;

    animation:
        luxHeading
        1.15s
        .13s
        cubic-bezier(.16,1,.3,1)
        both;
}




.lux-agency .lux-gradient {

    background:
        linear-gradient(
            100deg,
            #fff 0%,
            #fff 28%,
            #b8caff 67%,
            #d8c5ff 100%
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;
}






.lux-agency .lux-description {

    width: 100% !important;

    max-width: 760px !important;

    margin:
        35px
        auto
        0 !important;

    color:
        rgba(255,255,255,.61)
        !important;

    text-align:
        center !important;

    font-family: "Inter", system-ui, sans-serif !important;

    font-size:
        17px !important;

    line-height:
        1.55 !important;

    letter-spacing:
        -.15px !important;

    animation:
        luxReveal
        1s
        .32s
        cubic-bezier(.2,.8,.2,1)
        both;
}






.lux-agency .lux-cta {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 32px;

    animation:
        luxReveal
        1s
        .42s
        cubic-bezier(.2,.8,.2,1)
        both;
}




.lux-agency .lux-primary {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding:
        14px
        22px;

    min-width:
        160px;

    border-radius:
        100px;

    background:
        linear-gradient(
            135deg,
            #fff,
            #e8edff
        );

    color:
        #050505 !important;

    text-decoration:
        none !important;

    font-size:
        13px;

    font-weight:
        600;

    overflow:
        hidden;

    box-shadow:
        0 15px 50px
        rgba(255,255,255,.08);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}




.lux-agency .lux-primary::before {

    content: "";

    position: absolute;

    width: 70px;
    height: 180%;

    left: -110px;
    top: -40px;

    transform:
        rotate(20deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.9),
            transparent
        );

    animation:
        luxShimmer
        4s
        ease-in-out
        infinite;
}




.lux-agency .lux-primary:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 20px 60px
        rgba(70,120,255,.22);
}




.lux-agency .lux-secondary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding:
        14px
        20px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius:
        100px;

    background:
        rgba(255,255,255,.025);

    color:
        rgba(255,255,255,.68)
        !important;

    text-decoration:
        none !important;

    font-size:
        13px;

    backdrop-filter:
        blur(12px);

    transition:
        .3s ease;
}




.lux-agency .lux-secondary:hover {

    background:
        rgba(255,255,255,.07);

    color:
        #fff !important;

    border-color:
        rgba(255,255,255,.18);
}






.lux-agency .lux-trust {

    width: 100%;

    margin-top:
        105px;

    animation:
        luxReveal
        1s
        .55s
        cubic-bezier(.2,.8,.2,1)
        both;
}




.lux-agency .lux-trust-title {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        16px;

    margin-bottom:
        25px;
}




.lux-agency .trust-line {

    width:
        80px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.13)
        );
}




.lux-agency .trust-line.right {

    transform:
        rotate(180deg);
}




.lux-agency .trust-label {

    color:
        rgba(255,255,255,.38);

    font-size:
        9px;

    font-weight:
        500;

    text-transform:
        uppercase;

    letter-spacing:
        2.5px;
}






.lux-agency .lux-trust-logos {

    display:
        grid;

    grid-template-columns:
        repeat(5,1fr);

    gap:
        12px;

    width:
        100%;
}




.lux-agency .lux-logo-card {

    min-height:
        76px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding:
        12px;

    border:
        1px solid
        rgba(255,255,255,.065);

    border-radius:
        14px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.038),
            rgba(255,255,255,.012)
        );

    transition:
        transform .4s
        cubic-bezier(.2,.8,.2,1),
        border-color .4s ease,
        background .4s ease;

    overflow:
        hidden;
}




.lux-agency .lux-logo-card:hover {

    transform:
        translateY(-6px);

    border-color:
        rgba(255,255,255,.15);

    background:
        rgba(255,255,255,.055);
}




.lux-agency .lux-logo-card img {

    width:
        auto;

    max-width:
        110px;

    max-height:
        25px;

    object-fit:
        contain;

    filter:
        grayscale(1)
        brightness(0)
        invert(1);

    opacity:
        .55;

    transition:
        transform .4s ease,
        opacity .4s ease;
}




.lux-agency .lux-logo-card:hover img {

    opacity:
        .95;

    transform:
        scale(1.05);
}




.lux-agency .lux-logo-caption {

    font-size:
        9px;

    color:
        rgba(255,255,255,.30);

    text-align:
        center;

    white-space:
        nowrap;
}






.elementor-element:has(.lux-agency) {

    width:
        100% !important;

    max-width:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;
}




.elementor-element:has(.lux-agency)
> .elementor-widget-container {

    width:
        100% !important;

    max-width:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;
}




.ptx-card.active {

  transform:
    perspective(1400px)
    translateY(-8px)
    translateZ(20px)
    scale(1);

  border-color:
    rgba(255,255,255,.18);

  box-shadow:
    0 45px 120px
    rgba(0,0,0,.52),
    0 0 80px
    rgba(0,130,255,.025);

}

.cx-gallery-filter:hover,.cx-gallery-filter.active{color:#dce6ff;border-color:rgba(104,145,255,.48);background:linear-gradient(135deg,rgba(36,76,160,.5),rgba(76,37,135,.35));box-shadow:0 0 25px rgba(54,86,210,.12)}


.ch-header-menu a:hover,
.ch-header-menu a.active{color:#fff}


.ch-header-menu a.active:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:14px;
  height:2px;
  border-radius:2px;
  background:#477fff;
  box-shadow:0 0 12px rgba(71,127,255,.55);
}


.stagebg .glow{filter:blur(105px) !important;opacity:.62 !important;will-change:transform;}

.lux-agency,
.cx-platform-services,.cx-rescue,.cx-global,.cx-process-premium,.cx-stack,.cx-final-cta,
.ch-recent-projects,
.cx-support-plans,.cx-client-experience,
.ultra-portfolio,
.lux-services,
.tech-stack-premium,
.lux-portfolio,
.cx-engagement,.cx-promise,
.premium-trust-section,#premiumTrust,
.cx-contact-premium,.cx-conversion-band{
  background:transparent !important;
}

.ch-recent-projects .ch-rp-bg,
.tech-stack-premium .tech-bg,
.ultra-portfolio .up-noise,
#premiumTrust .ptx-bg{background-color:transparent !important;}

/* ===== media queries ===== */


@media(max-width:820px){

  .stagebg .glow{opacity:.26;filter:blur(65px)}
}




@media (max-width:1180px){
.stack.right{grid-area:right}
}






@media(max-width:1050px){


  .lux-stage{
    height:500px;
  }


  .lux-camera{
    width:600px;
    height:390px;
  }


  .lux-card{
    width:330px;
    height:230px;
  }


  .lux-hud{
    transform:scale(.85);
  }
}

@media(max-width:700px){


  .lux-portfolio{
    padding:65px 0 35px;
  }


  .lux-wrap{
    width:92vw;
  }


  .lux-heading h2{
    font-size:42px;
    letter-spacing:-3px;
  }


  .lux-heading h2 span{
    letter-spacing:-2px;
  }


  .lux-heading p{
    font-size:12px;
  }


  .lux-stage{
    height:400px;
    margin-top:30px;
  }


  .lux-camera{
    width:430px;
    height:300px;
  }


  .lux-card{
    width:255px;
    height:175px;
    border-radius:9px;
  }


  .lux-card-10,
  .lux-card-9{
    opacity:0;
  }


  .lux-card-8{
    transform:
      translate(-50%,-50%)
      translateZ(-130px)
      translate(75px,-45px)
      rotate(7deg)
      scale(.76);
  }


  .lux-card-7{
    transform:
      translate(-50%,-50%)
      translateZ(-80px)
      translate(55px,-28px)
      rotate(5deg)
      scale(.82);
  }


  .lux-card-6{
    transform:
      translate(-50%,-50%)
      translateZ(-45px)
      translate(32px,-17px)
      rotate(3deg)
      scale(.88);
  }


  .lux-card-5{
    transform:
      translate(-50%,-50%)
      translateZ(-15px)
      translate(15px,-5px)
      rotate(2deg)
      scale(.92);
  }


  .lux-card-4{
    transform:
      translate(-50%,-50%)
      translateZ(10px)
      translate(5px,0)
      rotate(1deg)
      scale(.95);
  }


  .lux-card-3{
    transform:
      translate(-50%,-50%)
      translateZ(-40px)
      translate(-30px,12px)
      rotate(-3deg)
      scale(.88);
  }


  .lux-card-2{
    transform:
      translate(-50%,-50%)
      translateZ(-90px)
      translate(-55px,28px)
      rotate(-5deg)
      scale(.78);
  }


  .lux-card-1{
    transform:
      translate(-50%,-50%)
      translateZ(55px)
      scale(1);
  }


  .lux-center{
    transform:
      translate(-50%,-50%)
      translateZ(100px)
      scale(.75);
  }


  .lux-hud{
    display:none;
  }


  .lux-floating-tag{
    font-size:6px;
    padding:5px 8px;
  }


  .lux-tag-1{
    left:5%;
    top:10%;
  }


  .lux-tag-2{
    right:5%;
    top:17%;
  }


  .lux-tag-3{
    left:10%;
    bottom:5%;
  }


  .lux-bottom{
    grid-template-columns:1fr auto;
  }


  .lux-scroll{
    display:none;
  }


  .lux-next{
    display:none;
  }


  .lux-dots{
    justify-self:center;
  }
}






@media(max-width:430px){


  .lux-heading h2{
    font-size:37px;
  }


  .lux-stage{
    height:350px;
  }


  .lux-camera{
    width:360px;
  }


  .lux-card{
    width:225px;
    height:155px;
  }
}


@media(max-width:700px){

  .lux-camera-frame{inset:-18px -20px;border-radius:17px}

  .lux-camera-meta{top:-14px;font-size:5px}

  .meta-top-left{left:-8px}
.meta-top-right{right:-8px}

  .lux-depth-label{display:none}
}


@media(max-width:430px){

  .lux-camera-frame{inset:-14px -15px}
}





@media(prefers-reduced-motion:reduce){


  .lux-aurora,
  .lux-grid,
  .lux-orbit,
  .lux-particles i,
  .lux-center-ring,
  .lux-card-shine,
  .lux-hud,
  .lux-floating-tag,
  .lux-heading h2 span,
  .lux-hud-left,
  .lux-hud-right{
    animation:none !important;
  }
}



@media(max-width:800px){

  .tech-container{padding:78px 0 35px}

  .tech-heading h2{font-size:43px;letter-spacing:-2px}

  .tech-heading p{font-size:12px;margin-top:22px}

  .tech-grid{grid-template-columns:repeat(2,1fr);margin-top:55px}

  .tech-item{height:175px}

  .tech-item:nth-child(4n){border-right:1px solid var(--line)}

  .tech-item:nth-child(2n){border-right:0}

  .tech-item:nth-last-child(-n+4){border-bottom:1px solid var(--line)}

  .tech-item:nth-last-child(-n+2){border-bottom:0}

  .tech-item>span{margin-top:17px;font-size:10px}
}


@media(max-width:480px){

  .tech-container{width:88vw;padding-top:65px}

  .tech-heading h2{font-size:37px}

  .tech-heading p{font-size:11px;line-height:1.6}

  .tech-eyebrow{font-size:7px;letter-spacing:2px}

  .tech-item{height:150px}

  .tech-footer{font-size:6px;gap:10px;letter-spacing:1.5px}

  .footer-line{width:35px}
}


@media(prefers-reduced-motion:reduce){

  .smoke,.tech-stars,.tech-item,.tech-icon,.tech-item>span{animation:none!important;transition:none!important}
}





@media(max-width:800px){

  .tech-progress{display:none}


  .tech-item{
    opacity:1;
    transform:none;
  }


  .tech-item.tech-visible:hover{
    transform:
      perspective(800px)
      scale(1.015);
  }


  .tech-card-shine{display:none}
}



@media(prefers-reduced-motion:reduce){

  .tech-ambient-orb,
  .tech-beam,
  .tech-stars,
  .tech-card-shine,
  .progress-track i{
    animation:none!important;
  }


  .tech-item{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }
}




@media(max-width:800px){

  .tech-live-logo{
    opacity:.9;
    transform:translateZ(30px) scale(.82);
  }

  .tech-item:hover .tech-live-logo{
    transform:translateZ(45px) scale(.92);
  }

  .tech-item:hover .tech-icon{opacity:.06}

  .tech-grid:before{inset:-15px -8px}
}


@media(max-width:480px){

  .tech-live-badge{font-size:6px;letter-spacing:1.6px}

  .tech-live-logo{width:43px;height:43px}
}




@media(max-width:800px){

  .tech-stack-premium .tech-live-logo{
    width:70px;height:70px;
  }

  .tech-stack-premium .tech-live-logo img{
    width:54px;height:54px;
  }
}


@media(max-width:480px){

  .tech-stack-premium .tech-live-logo{
    width:58px;height:58px;
  }

  .tech-stack-premium .tech-live-logo img{
    width:45px;height:45px;
  }

  .tech-stack-premium .tech-item>span{
    margin-top:13px;
    font-size:10px;
  }
}



@media(max-width:800px){

  .tech-stack-premium .tech-live-logo{
    width:76px;height:76px;
  }

  .tech-stack-premium .tech-live-logo img{
    width:58px;height:58px;
  }
}


@media(max-width:480px){

  .tech-stack-premium .tech-live-logo{
    width:64px;height:64px;
  }

  .tech-stack-premium .tech-live-logo img{
    width:48px;height:48px;
  }
}




@media(min-width:1100px){

  .tech-stack-premium .tech-item{height:220px}
}




@media(max-width:800px){

  .tech-stack-premium .tech-grid{
    margin-top:52px;
    border-radius:18px;
  }

  .tech-stack-premium .tech-item{
    min-height:178px;
  }

  .tech-stack-premium .tech-live-logo{
    width:78px;height:78px;
  }

  .tech-stack-premium .tech-live-logo img,
  .tech-stack-premium .inline-brand-logo{
    width:58px;height:58px;
  }
}


@media(max-width:480px){

  .tech-stack-premium .tech-item{
    min-height:154px;
  }

  .tech-stack-premium .tech-live-logo{
    width:66px;height:66px;
  }

  .tech-stack-premium .tech-live-logo img,
  .tech-stack-premium .inline-brand-logo{
    width:48px;height:48px;
  }

  .tech-stack-premium .tech-item>span:not(.tech-card-shine):not(.tech-card-corner):not(.tech-card-index){
    font-size:10px;
  }
}






@media(max-width:950px){



  .lux-container{

    width:
      calc(100% - 40px);

  }



  .lux-heading-row{

    display:block;

  }



  .lux-intro{

    margin-top:25px;

  }



  .lux-service{

    grid-template-columns:
      50px
      1fr
      55px;

  }



  .lux-service-meta{

    display:none;

  }



  .lux-image{

    right:90px;

    width:330px;

    height:215px;

  }
}






@media(max-width:650px){



  .lux-container{

    width:
      calc(100% - 28px);

  }



  .lux-header{

    margin-bottom:45px;

  }



  .lux-heading-row h2{

    font-size:
      43px;

    line-height:.98;

  }



  .lux-intro{

    max-width:100%;

  }



  .lux-intro p{

    font-size:10px;

  }



  .lux-service{

    min-height:95px;

    grid-template-columns:
      28px
      1fr
      40px;

    gap:10px;

  }



  .lux-service:hover,
  .lux-service.active{

    min-height:155px;

  }



  .lux-service-title h3{

    font-size:24px;

  }



  .lux-service-title p{

    max-width:280px;

    font-size:10px;

  }



  .lux-service:hover
  .lux-service-title h3{

    transform:
      translateX(5px);

  }



  .lux-image{

    display:none;

  }



  .lux-arrow{

    width:36px;

    height:36px;

  }



  .lux-arrow span{

    font-size:13px;

  }



  .lux-orb{

    opacity:.3;

  }



  .lux-grid{

    opacity:.15;

  }
}






@media(prefers-reduced-motion:reduce){


  .lux-aurora,
  .lux-orb,
  .lux-grid,
  .lux-status{

    animation:none !important;

  }
}






@media(max-width:1024px){


  .ultra-portfolio {

    padding:
      70px 0 80px;
  }


  .up-panel {

    width:
      min(var(--wrap),calc(100% - 2*var(--gut)));

    border-radius:
      34px;

    padding-top:
      65px;
  }


  .up-card {

    width:
      350px;

    height:
      200px;
  }
}

@media(max-width:767px){


  .ultra-portfolio {

    padding:
      45px 0 55px;
  }

  .up-panel {

    width:
      min(var(--wrap),calc(100% - 2*var(--gut)));

    border-radius:
      25px;

    padding:
      55px 0 25px;
  }


  .up-header {

    padding:
      0 22px;

    margin-bottom:
      45px;
  }


  .up-header h2 {

    font-size:
      33px;

    letter-spacing:
      -2px;
  }


  .up-header p {

    font-size:
      13px;
  }


  .up-stage {

    gap:
      13px;
  }


  .up-track {

    gap:
      12px;
  }


  .up-card {

    width:
      285px;

    height:
      160px;

    border-radius:
      13px;
  }


  .up-fade {

    width:
      60px;
  }


  .up-bottom-bar {

    width:
      calc(100% - 28px);

    margin-top:
      28px;
  }


  .up-live {

    display:none;
  }


  .up-cta span {

    display:none;
  }
}






@media(prefers-reduced-motion:reduce){


  .up-track,
  .up-grid,
  .up-orb,
  .up-beam,
  .up-particles i,
  .up-header h2 span,
  .up-dot,
  .up-live span,
  .up-panel::before {

    animation:none!important;
  }
}






@media(max-width:1000px){


    .lux-agency .lux-inner {

        padding:
            75px
            35px
            60px !important;
    }


    .lux-agency .lux-trust-logos {

        grid-template-columns:
            repeat(3,1fr);
    }
}






@media(max-width:767px){


    .lux-agency {

        min-height:
            auto;
    }


    .lux-agency .lux-inner {

        padding:
            58px
            18px
            50px !important;
    }


    .lux-agency .lux-heading {

        font-size:
            46px !important;

        line-height:
            .98 !important;

        letter-spacing:
            -3px !important;
    }


    .lux-agency .lux-description {

        margin-top:
            25px !important;

        font-size:
            15px !important;
    }


    .lux-agency .lux-description br {

        display:
            none;
    }


    .lux-agency .lux-cta {

        width:
            100%;

        flex-direction:
            column;

        gap:
            9px;
    }


    .lux-agency .lux-primary,
    .lux-agency .lux-secondary {

        width:
            100%;

        max-width:
            280px;
    }


    .lux-agency .lux-trust {

        margin-top:
            75px;
    }


    .lux-agency .lux-trust-logos {

        grid-template-columns:
            repeat(2,1fr);

        gap:
            9px;
    }


    .lux-agency .lux-logo-card {

        min-height:
            70px;
    }


    .lux-agency .lux-logo-caption {

        font-size:
            8px;
    }


    .lux-agency .lux-grid {

        background-size:
            55px 55px;
    }
}






@media(max-width:480px){


    .lux-agency .lux-inner {

        padding:
            48px
            15px
            42px !important;
    }


    .lux-agency .lux-heading {

        font-size:
            39px !important;

        letter-spacing:
            -2.4px !important;
    }


    .lux-agency .lux-proof {

        margin-top:
            25px;

        margin-bottom:
            31px;
    }


    .lux-agency .lux-avatar {

        width:
            29px !important;

        height:
            29px !important;
    }


    .lux-agency .lux-proof-text {

        font-size:
            10px;
    }


    .lux-agency .lux-stars {

        font-size:
            10px;
    }
}






@media(prefers-reduced-motion:reduce){


    .lux-agency *,
    .lux-agency::before,
    .lux-agency::after{

        animation:
            none !important;

        transition:
            none !important;
    }
}

/* ============== ADDED: WordPress Journey premium section CSS ============== */
.wp-journey-premium{
  position:relative;
  width:100%;
  overflow:hidden;
  isolation:isolate;
  background:var(--pit);
  padding:clamp(70px,10vw,140px) 0;
  cursor:none;
}
.wp-journey-premium *{cursor:none}

.wjp-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.wjp-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000,transparent 75%);
  opacity:.5;
}
.wjp-glow{
  position:absolute;left:8%;bottom:-10%;width:60%;height:70%;
  background:radial-gradient(ellipse at center,var(--bolt-glow),transparent 70%);
  filter:blur(40px);
  opacity:.55;
}
.wjp-sphere{
  position:absolute;right:8%;top:14%;width:64px;height:64px;border-radius:50%;
  background:
    radial-gradient(circle at 32% 28%,rgba(255,255,255,.75),rgba(143,182,255,.35) 42%,rgba(0,20,60,.9) 78%);
  box-shadow:0 0 50px rgba(61,123,255,.35),inset 0 0 20px rgba(0,0,0,.4);
  animation:wjpFloat 7s ease-in-out infinite;
}
@keyframes wjpFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-22px)}
}

.wjp-wrap{position:relative;z-index:1;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}

.wjp-head{text-align:center;max-width:820px;margin:0 auto 64px}
.wjp-eyebrow{
  display:inline-block;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bolt-3);margin-bottom:22px;
}
.wjp-title{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2.1rem,5.4vw,3.6rem);
  line-height:1.06;letter-spacing:-.01em;
  text-transform:uppercase;color:var(--paper);
}
.wjp-title span{
  background:linear-gradient(90deg,var(--bolt-3),var(--bolt-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.wjp-lede{margin-top:26px;font-size:1.05rem;line-height:1.7;color:var(--paper-2)}

.wjp-body{display:grid;grid-template-columns:280px 1fr;gap:40px;align-items:start}
@media (max-width:860px){.wjp-body{grid-template-columns:1fr}}

.wjp-rail{
  position:sticky;top:calc(var(--nav-h) + 24px);
  background:var(--slab);border:1px solid var(--line);border-radius:var(--r-l);
  padding:22px;
}
.wjp-rail-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:16px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.wjp-rail-label{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dust)}
.wjp-count{font-family:var(--mono);font-size:.78rem;color:var(--dust);padding:5px 10px;border:1px solid var(--line-2);border-radius:999px}
.wjp-count b{color:var(--bolt-3);font-weight:600}

.wjp-track{display:flex;flex-direction:column;gap:4px}
.wjp-step{
  display:flex;align-items:center;gap:12px;text-align:left;
  background:none;border:0;padding:11px 10px;border-radius:var(--r-m);
  color:var(--dust);font-family:var(--body);font-size:.92rem;font-weight:500;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.wjp-step:hover{background:rgba(255,255,255,.035);color:var(--paper-2)}
.wjp-step-n{
  flex:none;width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:.7rem;color:var(--dust);
  border:1px solid var(--line-2);
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.wjp-step.is-active{color:var(--paper)}
.wjp-step.is-active .wjp-step-n{
  background:var(--bolt);border-color:var(--bolt);color:#fff;
  box-shadow:0 0 0 4px var(--bolt-glow);
}

.wjp-panels{position:relative}
.wjp-panel{display:none}
.wjp-panel.is-active{
  display:block;
  animation:wjpPanelIn .55s var(--ease-out) both;
}
@keyframes wjpPanelIn{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}
.wjp-panel-tag{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.wjp-panel-n{font-family:var(--mono);font-size:.78rem;color:var(--bolt-3);border:1px solid var(--line-2);border-radius:6px;padding:3px 8px}
.wjp-panel-tag>span:last-child{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dust)}

.wjp-panel h3{font-family:var(--display);font-weight:700;font-size:clamp(1.4rem,2.6vw,1.9rem);line-height:1.22;color:var(--paper);max-width:640px}
.wjp-panel h3 span{
  background:linear-gradient(90deg,var(--bolt-3),var(--bolt-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.wjp-panel p{margin-top:16px;color:var(--paper-2);line-height:1.7;max-width:640px}

.wjp-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.wjp-chips span{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;color:var(--paper-2);
  border:1px solid var(--line-2);border-radius:999px;padding:6px 13px;
  transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease);
}
.wjp-chips span:hover{border-color:var(--bolt-3);color:var(--paper);background:rgba(0,75,253,.08)}

.wjp-highlight{
  margin-top:28px;display:flex;gap:14px;align-items:flex-start;
  background:var(--slab-2);border:1px solid var(--line);border-left:2px solid var(--bolt);
  border-radius:var(--r-m);padding:18px 20px;max-width:640px;
}
.wjp-highlight-icon{
  flex:none;width:34px;height:34px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,75,253,.12);color:var(--bolt-3);
}
.wjp-highlight-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.wjp-highlight h4{font-family:var(--display);font-weight:600;font-size:.98rem;color:var(--paper)}
.wjp-highlight p{margin-top:5px;font-size:.88rem;color:var(--dust)}

.wjp-final-row{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.wjp-lottie{width:110px;height:110px;flex:none;filter:drop-shadow(0 0 24px var(--bolt-glow))}
.wjp-feats{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:28px}
@media (max-width:560px){.wjp-feats{grid-template-columns:1fr}}
.wjp-feat{background:var(--slab-2);border:1px solid var(--line);border-radius:var(--r-m);padding:18px}
.wjp-feat-icon{
  display:inline-flex;width:32px;height:32px;border-radius:8px;align-items:center;justify-content:center;
  background:rgba(0,75,253,.12);color:var(--bolt-3);margin-bottom:12px;
}
.wjp-feat-icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.wjp-feat h4{font-family:var(--display);font-weight:600;font-size:.92rem;color:var(--paper)}
.wjp-feat p{margin-top:5px;font-size:.82rem;color:var(--dust);line-height:1.6}

/* ---- custom ring + dot cursor, scoped to this section only ---- */
.wjp-cursor-ring,.wjp-cursor-dot{
  position:fixed;top:0;left:0;z-index:60;pointer-events:none;
  border-radius:50%;
  opacity:0;
  transform:translate(-50%,-50%);
  transition:opacity .25s var(--ease),width .25s var(--ease),height .25s var(--ease),border-color .25s var(--ease);
}
.wjp-cursor-ring{
  width:38px;height:38px;
  border:1.5px solid var(--bolt-3);
  box-shadow:0 0 18px var(--bolt-glow);
}
.wjp-cursor-dot{
  width:26px;height:26px;
  background:var(--pit);
  border:1px solid var(--bolt-3);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 14px var(--bolt-glow);
}
.wjp-cursor-mark{width:13px;height:13px}
.wjp-cursor-mark .mk-brace{fill:var(--paper)}
.wjp-cursor-mark .mk-arm{fill:var(--bolt-3)}
.wp-journey-premium:hover .wjp-cursor-ring,
.wp-journey-premium:hover .wjp-cursor-dot{opacity:1}
.wjp-cursor-ring.is-active{width:64px;height:64px;border-color:#fff}
.wjp-cursor-dot.is-active{transform:translate(-50%,-50%) scale(1.3)}


/* =========================================================
   GLOBAL CODENHULK MOUSE CURSOR
   Same cursor across the entire website
   ========================================================= */
html, body {
  cursor: none !important;
}

body * {
  cursor: none !important;
}

.global-cursor-ring,
.global-cursor-dot {
  position: fixed !important;
  top: 0;
  left: 0;
  z-index: 2147483647 !important;
  pointer-events: none !important;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  will-change: left, top, transform, width, height, opacity;
}

.global-cursor-ring {
  width: 38px;
  height: 38px;
  border: 1.5px solid #8fb6ff;
  background: transparent;
  box-shadow:
    0 0 18px rgba(0,75,253,.55),
    0 0 34px rgba(0,75,253,.20);
  transition:
    width .25s cubic-bezier(.16,1,.3,1),
    height .25s cubic-bezier(.16,1,.3,1),
    border-color .25s ease,
    box-shadow .25s ease,
    opacity .2s ease;
}

.global-cursor-dot {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #03050a;
  border: 1px solid #8fb6ff;
  box-shadow:
    0 0 14px rgba(0,75,253,.55),
    inset 0 0 8px rgba(0,75,253,.12);
  transition:
    width .25s cubic-bezier(.16,1,.3,1),
    height .25s cubic-bezier(.16,1,.3,1),
    transform .25s cubic-bezier(.16,1,.3,1),
    opacity .2s ease,
    border-color .25s ease;
}

.global-cursor-dot svg {
  width: 13px;
  height: 13px;
  display: block;
}

.global-cursor-dot .mk-brace {
  fill: #eef2f9;
}

.global-cursor-dot .mk-arm {
  fill: #8fb6ff;
}

body.global-cursor-active .global-cursor-ring,
body.global-cursor-active .global-cursor-dot {
  opacity: 1;
}

body.global-cursor-hover .global-cursor-ring {
  width: 58px;
  height: 58px;
  border-color: #fff;
  box-shadow:
    0 0 22px rgba(0,75,253,.72),
    0 0 45px rgba(0,75,253,.25);
}

body.global-cursor-hover .global-cursor-dot {
  width: 30px;
  height: 30px;
  border-color: #fff;
}

body.global-cursor-click .global-cursor-ring {
  width: 30px;
  height: 30px;
}

@media (hover:none), (pointer:coarse) {
  html, body, body * {
    cursor: auto !important;
  }
  .global-cursor-ring,
  .global-cursor-dot {
    display: none !important;
  }
}

/* Disable the older section-specific cursor visuals so there is only
   one cursor system across the whole website. */
.spot,
.lux-cursor,
.lux-cursor-dot,
.lux-cursor-light,
.up-cursor-light,
.wjp-cursor-ring,
.wjp-cursor-dot {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


/* =========================================================
   EXACT GLOBAL CODENHULK CURSOR
   Matches the supplied reference image
   ========================================================= */
html, body, body * {
  cursor: none !important;
}

.global-cursor-ring,
.global-cursor-dot {
  position: fixed !important;
  pointer-events: none !important;
  z-index: 2147483647 !important;
  left: 0;
  top: 0;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
}

.global-cursor-ring {
  width: 39px !important;
  height: 39px !important;
  border: 1.5px solid rgba(139, 184, 255, .98) !important;
  background: transparent !important;
  box-shadow:
    0 0 7px rgba(45, 118, 255, .38),
    0 0 18px rgba(0, 75, 253, .28) !important;
  transition: opacity .18s ease !important;
}

.global-cursor-dot {
  width: 26px !important;
  height: 26px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #03060d !important;
  border: 1px solid rgba(139, 184, 255, .95) !important;
  box-shadow:
    0 0 7px rgba(45, 118, 255, .32),
    inset 0 0 5px rgba(0, 75, 253, .10) !important;
  transition: opacity .18s ease !important;
}

.global-cursor-dot svg {
  width: 13px !important;
  height: 13px !important;
}

.global-cursor-dot .mk-brace {
  fill: #f4f7ff !important;
}

.global-cursor-dot .mk-arm {
  fill: #8fb9ff !important;
}

/* Grow + brighten the cursor whenever it's over a button/link. */
body.global-cursor-hover .global-cursor-ring,
body.global-cursor-hover .global-cursor-dot {
  transition:
    width .25s cubic-bezier(.16,1,.3,1),
    height .25s cubic-bezier(.16,1,.3,1),
    border-color .25s ease,
    box-shadow .25s ease !important;
}

body.global-cursor-hover .global-cursor-ring {
  width: 60px !important;
  height: 60px !important;
  border-color: #fff !important;
  box-shadow:
    0 0 22px rgba(0,75,253,.72),
    0 0 45px rgba(0,75,253,.25) !important;
}

body.global-cursor-hover .global-cursor-dot {
  width: 32px !important;
  height: 32px !important;
  border-color: #fff !important;
  transform: translate(-50%, -50%) !important;
}

body.global-cursor-click .global-cursor-ring,
body.global-cursor-click .global-cursor-dot {
  width: initial !important;
  height: initial !important;
  transform: translate(-50%, -50%) !important;
}

body.global-cursor-click .global-cursor-ring {
  width: 39px !important;
  height: 39px !important;
}

body.global-cursor-click .global-cursor-dot {
  width: 26px !important;
  height: 26px !important;
}

@media (hover:none), (pointer:coarse) {
  html, body, body * {
    cursor: auto !important;
  }
  .global-cursor-ring,
  .global-cursor-dot {
    display: none !important;
  }
}

/* Show the normal hand/pointer icon on interactive elements,
   on top of the custom ring+dot cursor. */
body a, body button, body input, body textarea, body select,
body [role="button"], body .btn, body .link, body .filter,
body .pager button, body .jn-step, body .tech-item, body .work,
body .panel-hover, body .lux-card, body .lux-service, body .service,
body [tabindex] {
  cursor: pointer !important;
}


.global-cursor-dot svg{
  width:14px !important;
  height:11px !important;
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
}
.global-cursor-dot{
  overflow:visible !important;
}
.global-cursor-dot .mk-brace{
  fill:#f5f8ff !important;
  opacity:1 !important;
}
.global-cursor-dot .mk-arm{
  fill:#72a8ff !important;
  opacity:1 !important;
}


.global-cursor-dot svg{
  width:14px !important;
  height:11px !important;
  display:block !important;
  overflow:visible !important;
}
.global-cursor-dot svg .mk-brace{
  fill:#f7f9ff !important;
}
.global-cursor-dot svg .mk-arm{
  fill:#6ea4ff !important;
}

/* ==========================================================================
   MV — STATEMENT SECTION  (hero-grade band, every text animated)
   Scoped under .mv-state so nothing above/below is affected.
   ========================================================================== */
.mv-state{
  --mv-violet:#a78bfa;
  --mv-violet-2:#7c5cff;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding-block:clamp(96px,12vw,168px);
  text-align:center;
}
.mv-state::before{
  content:"";
  position:absolute;inset-inline:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-2) 18%,var(--line-3) 50%,var(--line-2) 82%,transparent);
}

/* ---------- ambience: two corner glows, drifting motes, faint grid ---------- */
.mv-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.mv-glow{position:absolute;border-radius:50%;filter:blur(70px);will-change:transform,opacity}
.mv-glow-a{
  top:-24%;left:-14%;
  width:min(58vw,720px);aspect-ratio:1;
  background:radial-gradient(circle,rgba(0,75,253,.55) 0%,rgba(0,75,253,.16) 42%,transparent 70%);
  animation:mvGlowA 16s ease-in-out infinite;
}
.mv-glow-b{
  top:-30%;right:-16%;
  width:min(62vw,780px);aspect-ratio:1;
  background:radial-gradient(circle,rgba(124,92,255,.5) 0%,rgba(124,92,255,.14) 44%,transparent 72%);
  animation:mvGlowB 19s ease-in-out infinite;
}
@keyframes mvGlowA{
  0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.85}
  50%{transform:translate3d(6%,5%,0) scale(1.14);opacity:1}
}
@keyframes mvGlowB{
  0%,100%{transform:translate3d(0,0,0) scale(1.06);opacity:.8}
  50%{transform:translate3d(-7%,6%,0) scale(.94);opacity:1}
}
.mv-grid{
  position:absolute;inset:-10%;
  background-image:
    linear-gradient(rgba(140,175,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(140,175,255,.05) 1px,transparent 1px);
  background-size:78px 78px;
  -webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 42%,#000 8%,transparent 76%);
  mask-image:radial-gradient(ellipse 62% 58% at 50% 42%,#000 8%,transparent 76%);
  animation:mvGridDrift 34s linear infinite;
}
@keyframes mvGridDrift{to{background-position:78px 78px,78px 78px}}
.mv-mote{
  position:absolute;border-radius:50%;
  background:rgba(226,234,252,.75);
  box-shadow:0 0 8px rgba(190,210,255,.55);
  opacity:0;
  animation:mvMote linear infinite;
  will-change:transform,opacity;
}
@keyframes mvMote{
  0%{opacity:0;transform:translate3d(0,14px,0)}
  18%{opacity:.9}
  70%{opacity:.55}
  100%{opacity:0;transform:translate3d(var(--mx,10px),-46px,0)}
}

/* ---------------------------- layout ---------------------------- */
.mv-inner{position:relative;z-index:2;max-width:980px;margin-inline:auto}

/* ------------------------- badge pill ------------------------- */
.mv-badge{
  position:relative;
  display:inline-flex;align-items:center;gap:10px;
  padding:9px 18px 9px 15px;
  border-radius:999px;
  border:1px solid var(--line-2);
  background:linear-gradient(180deg,rgba(20,28,46,.9),rgba(10,14,23,.9));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-family:var(--body);
  font-size:.8rem;font-weight:600;letter-spacing:.01em;
  color:var(--paper-2);
  overflow:hidden;
  opacity:0;transform:translate3d(0,16px,0) scale(.96);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);
}
.mv-in .mv-badge{opacity:1;transform:none}
.mv-badge::after{ /* light sweeps across the pill, forever */
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.16) 50%,transparent 66%);
  transform:translateX(-130%);
}
.mv-in .mv-badge::after{animation:mvSweep 4.2s var(--ease-out) 1.1s infinite}
@keyframes mvSweep{0%{transform:translateX(-130%)}45%,100%{transform:translateX(130%)}}
.mv-badge i{
  width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--bolt-2);
  box-shadow:0 0 0 3px rgba(0,75,253,.24);
  animation:mvPing 2.4s ease-in-out infinite;
}
@keyframes mvPing{50%{box-shadow:0 0 0 8px rgba(0,75,253,0)}}

/* ------------------------ social proof row ------------------------ */
.mv-proof{
  display:flex;align-items:center;justify-content:center;gap:14px;
  flex-wrap:wrap;
  margin-top:34px;
}
.mv-faces{display:flex}
.mv-faces img{
  width:38px;height:38px;border-radius:50%;
  object-fit:cover;
  border:2px solid #0a0e17;
  margin-left:-11px;
  opacity:0;transform:scale(.5) translateY(10px);
  transition:opacity .5s var(--ease-out),transform .6s cubic-bezier(.34,1.56,.64,1);
  transition-delay:calc(180ms + var(--i,0)*90ms);
}
.mv-faces img:first-child{margin-left:0}
.mv-in .mv-faces img{opacity:1;transform:none}
.mv-in .mv-faces img{animation:mvBob 5s ease-in-out infinite;animation-delay:calc(1s + var(--i,0)*.34s)}
@keyframes mvBob{50%{transform:translateY(-4px)}}
.mv-faces img:hover{transform:translateY(-6px) scale(1.1);z-index:3;border-color:var(--bolt-2)}

.mv-rate{text-align:left;line-height:1.3}
.mv-stars{display:flex;gap:2px;font-size:.82rem;color:var(--amber)}
.mv-stars b{
  opacity:0;transform:scale(.3) rotate(-40deg);display:inline-block;
  transition:opacity .35s ease,transform .5s cubic-bezier(.34,1.56,.64,1);
  transition-delay:calc(420ms + var(--i,0)*80ms);
}
.mv-in .mv-stars b{opacity:1;transform:none;animation:mvTwinkle 3.4s ease-in-out infinite;animation-delay:calc(1.2s + var(--i,0)*.22s)}
@keyframes mvTwinkle{50%{opacity:.55;transform:scale(1.16)}}
.mv-proof-txt{font-size:.85rem;color: #ffffff}

/* --------------------------- headline --------------------------- */
.mv-h{
  margin:26px 0 0;
  font-family:var(--display);
  font-weight:800;font-stretch:112%;
  font-size:clamp(2.15rem,7.4vw,5.2rem);
  line-height:1.02;letter-spacing:-.03em;
  text-transform:none;
}
.mv-in .mv-h{animation:mvBreathe 9s ease-in-out 1.6s infinite}
@keyframes mvBreathe{50%{transform:translateY(-5px)}}
.mv-line{display:block}

/* word machinery — shared by headline + paragraph */
.mv-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.mv-wi{
  display:inline-block;
  opacity:0;transform:translate3d(0,112%,0) rotate(5deg);
  transition:transform .95s var(--ease-out),opacity .6s ease,color .3s ease;
  transition-delay:calc(var(--base,0ms) + var(--i,0)*58ms);
  will-change:transform;
}
.mv-in .mv-wi{opacity:1;transform:none}
/* once settled, words respond to the pointer instantly */
.mv-done .mv-wi{transition-delay:0s;transition-duration:.4s}
.mv-done .mv-h .mv-wi:hover{transform:translateY(-8px) scale(1.03);color:#fff}

/* gradient words — the colour actually flows */
.mv-grad{
  background:linear-gradient(100deg,#ffffff 4%,#c9d6ff 30%,var(--mv-violet) 58%,var(--mv-violet-2) 78%,#ffffff 100%);
  background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
.mv-in .mv-grad{animation:mvFlow 6.5s ease-in-out 1.1s infinite alternate}
@keyframes mvFlow{from{background-position:0% 0}to{background-position:100% 0}}
.mv-done .mv-h .mv-grad:hover{filter:drop-shadow(0 6px 22px rgba(124,92,255,.5))}

/* ---------------------------- lede ---------------------------- */
.mv-sub{
  margin:28px auto 0;
  max-width:62ch;
  font-size:clamp(1rem,1.3vw,1.14rem);
  line-height:1.68;
  color:var(--dust);
}
.mv-sub .mv-w{overflow:visible}
.mv-sub .mv-wi{
  transform:translate3d(0,16px,0);
  filter:blur(7px);
  transition:transform .8s var(--ease-out),opacity .8s ease,filter .8s ease;
  transition-delay:calc(var(--base,0ms) + var(--i,0)*26ms);
}
.mv-in .mv-sub .mv-wi{filter:blur(0)}

/* ---------------------------- buttons ---------------------------- */
.mv-cta{
  display:flex;justify-content:center;flex-wrap:wrap;gap:14px;
  margin-top:40px;
}
.mv-cta .btn{
  opacity:0;transform:translate3d(0,20px,0);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out),box-shadow .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease);
  transition-delay:calc(var(--i,0)*110ms + 260ms);
}
.mv-in .mv-cta .btn{opacity:1;transform:none}
.mv-in .mv-cta .btn:hover{transform:translateY(-3px)}

/* ---------------------------- footnote ---------------------------- */
.mv-note{
  margin-top:30px;
  font-family:var(--mono);
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color: #fff;
  opacity:0;transform:translateY(10px);
  transition:opacity .8s ease .62s,transform .8s var(--ease-out) .62s;
}
.mv-in .mv-note{opacity:1;transform:none}
.mv-note em{font-style:normal;color:var(--bolt-3)}

@media (max-width:640px){
  .mv-proof{gap:10px}
  .mv-faces img{width:32px;height:32px}
  .mv-cta .btn{width:100%;justify-content:center}
}

/* no-js + reduced motion: everything is simply visible and still */
.no-js .mv-badge,.no-js .mv-wi,.no-js .mv-cta .btn,.no-js .mv-note,
.no-js .mv-faces img,.no-js .mv-stars b{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){
  .mv-badge,.mv-wi,.mv-cta .btn,.mv-note,.mv-faces img,.mv-stars b{
    opacity:1 !important;transform:none !important;filter:none !important;transition:none !important;
  }
  .mv-glow,.mv-grid,.mv-mote,.mv-h,.mv-badge::after{animation:none !important}
  .mv-grad{animation:none !important}
}

/* ==========================================================================
   MV — SCREENSHOT AUTO-SCROLL ON HOVER
   Portfolio thumbs hold a full-page screenshot. Hovering pans it top→bottom
   so the whole page can be read inside the card, then it eases back.
   ========================================================================== */

/* the image is laid out at its true height so it can travel inside the card */
.work img,
.up-card img{
  height:auto;
  min-height:100%;
  object-fit:cover;
  object-position:top center;
  transform-origin:top center;
  backface-visibility:hidden;
}
.work>a{display:block;height:100%}

/* hover transforms are driven inline by JS — neutralise the old scale-up */
.work:hover img{transform:none;filter:saturate(1) brightness(.95)}
.up-card:hover img{transform:none;filter:brightness(1.06) contrast(1.02)}

@media (hover:none){
  .work img,.up-card img{height:100%;min-height:0}
}
@media (prefers-reduced-motion:reduce){
  .work img,.up-card img{height:100%;min-height:0;transition:none !important}
}

/* ---------------- position overrides: statement leads the page ------------- */
.mv-first{
  min-height:min(100svh,880px);
  display:grid;
  align-items:center;
  padding-top:calc(var(--nav-h) + 66px);
  padding-bottom:clamp(64px,8vw,112px);
}
.mv-first::before{display:none}          /* page top needs no hairline */
.mv-first .wrap{width:100%}

@media (max-width:900px){
  .mv-first{min-height:auto;padding-top:calc(var(--nav-h) + 48px)}
}

/* ---- trusted-by strip, now anchored to the banner ---- */
.mv-strip{
  margin-top:clamp(46px,6vw,80px);
  text-align:center;
  opacity:0;transform:translateY(18px);
  transition:opacity .9s ease .78s,transform .9s var(--ease-out) .78s;
}
.mv-in .mv-strip{opacity:1;transform:none}
.mv-strip .strip-label{letter-spacing:.2em}
.mv-strip .marquee-item{font-size:1.02rem}
@media (max-width:900px){
  .mv-strip{margin-top:40px}
}
/* ---------------- rising light trails on the live background ---------------- */
.stage-rise{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:.8;
  mix-blend-mode:screen;
  pointer-events:none;
}
@media (prefers-reduced-motion:reduce){ .stage-rise{display:none} }