/* Visual experiment pack.
   Remove this file and visual-experiments.js from HTML pages to disable the whole pack. */

:root{
  --vx-cyan:rgba(0,200,255,.8);
  --vx-blue:rgba(75,108,255,.52);
  --vx-line:rgba(122,226,255,.18);
  --vx-panel:rgba(7,24,42,.72);
}

body.vx-ready{position:relative}
.vx-blueprint{
  position:fixed;
  inset:0;
  z-index:-4;
  pointer-events:none;
  opacity:.7;
  background-image:
    linear-gradient(rgba(122,226,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(122,226,255,.045) 1px,transparent 1px),
    radial-gradient(circle at 18% 24%,rgba(0,200,255,.12),transparent 28rem),
    radial-gradient(circle at 82% 74%,rgba(75,108,255,.1),transparent 30rem);
  background-size:72px 72px,72px 72px,100% 100%,100% 100%;
  mask-image:radial-gradient(ellipse at center,#000 18%,transparent 86%);
}
.vx-blueprint::before,
.vx-blueprint::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,transparent 0 12%,rgba(0,200,255,.16) 12.15%,transparent 12.4% 44%,rgba(75,108,255,.12) 44.2%,transparent 44.45%),
    linear-gradient(0deg,transparent 0 28%,rgba(0,200,255,.12) 28.2%,transparent 28.45% 72%,rgba(122,226,255,.1) 72.2%,transparent 72.45%);
  transform:translate3d(var(--vx-shift-x,0),var(--vx-shift-y,0),0);
  transition:transform .2s linear;
}
.vx-blueprint::after{
  filter:blur(18px);
  opacity:.42;
}

.vx-progress{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:3px;
  z-index:1200;
  pointer-events:none;
  background:rgba(122,226,255,.08);
}
.vx-progress span{
  display:block;
  height:100%;
  width:calc(var(--vx-scroll,0) * 100%);
  background:linear-gradient(90deg,var(--accent-2,#4b6cff),var(--accent,#00c8ff),#78f7ff);
  box-shadow:0 0 20px rgba(0,200,255,.75);
}
.vx-markers{
  position:fixed;
  right:.85rem;
  top:50%;
  z-index:60;
  transform:translateY(-50%);
  display:grid;
  gap:.6rem;
  pointer-events:none;
}
.vx-marker{
  width:.38rem;
  height:.38rem;
  border-radius:999px;
  background:rgba(122,226,255,.28);
  box-shadow:0 0 0 1px rgba(122,226,255,.2);
  transition:transform .25s,background .25s,box-shadow .25s;
}
.vx-marker.is-active{
  transform:scale(1.75);
  background:var(--accent,#00c8ff);
  box-shadow:0 0 18px rgba(0,200,255,.7);
}

.vx-code-particles{
  position:absolute;
  inset:0;
  z-index:2;
  overflow:hidden;
  pointer-events:none;
}
.vx-code-particle{
  position:absolute;
  color:rgba(120,247,255,.35);
  font:600 clamp(.7rem,1.4vw,1.05rem)/1 "Inter",system-ui,sans-serif;
  letter-spacing:.08em;
  text-shadow:0 0 18px rgba(0,200,255,.28);
  animation:vxFloatCode var(--vx-dur,14s) ease-in-out infinite alternate;
}
@keyframes vxFloatCode{
  from{transform:translate3d(0,0,0) rotate(-4deg);opacity:.2}
  50%{opacity:.72}
  to{transform:translate3d(var(--vx-dx,2rem),var(--vx-dy,-3rem),0) rotate(5deg);opacity:.28}
}

.service-card,
.tier,
.article-card,
.doc-panel,
.hero-card{
  transform-style:preserve-3d;
}
.vx-tilt{
  will-change:transform;
  transition:transform .18s ease,box-shadow .25s ease,border-color .25s ease;
}
.vx-tilt:hover{
  box-shadow:0 34px 100px rgba(0,200,255,.18),0 0 0 1px rgba(122,226,255,.18) inset;
}

.work-list{position:relative}
.work-row{
  position:relative;
}
.work-row::after{
  content:"";
  position:absolute;
  inset:.7rem .9rem auto auto;
  width:5.6rem;
  height:3.4rem;
  border:1px solid rgba(122,226,255,.18);
  border-radius:.45rem;
  background:
    linear-gradient(rgba(122,226,255,.18) 0 1px,transparent 1px) 0 .65rem/100% 1px no-repeat,
    radial-gradient(circle at .55rem .35rem,rgba(0,200,255,.7) 0 .13rem,transparent .14rem),
    radial-gradient(circle at .95rem .35rem,rgba(122,226,255,.42) 0 .13rem,transparent .14rem),
    linear-gradient(145deg,rgba(7,24,42,.64),rgba(0,200,255,.08));
  opacity:.62;
  pointer-events:none;
  transform:translateY(.15rem);
  transition:opacity .25s,transform .25s,box-shadow .25s;
}
.work-row:hover::after{
  opacity:1;
  transform:translateY(0);
  box-shadow:0 0 28px rgba(0,200,255,.18);
}

.section,
.mission-section,
.calculator-section,
.faq-section,
.process,
.contact{
  position:relative;
}
.vx-divider{
  position:absolute;
  left:clamp(1.25rem,5vw,5rem);
  right:clamp(1.25rem,5vw,5rem);
  top:0;
  height:1px;
  pointer-events:none;
  overflow:hidden;
  background:linear-gradient(90deg,transparent,rgba(122,226,255,.18),transparent);
}
.vx-divider::before{
  content:"";
  position:absolute;
  inset:0 auto 0 -20%;
  width:20%;
  background:linear-gradient(90deg,transparent,rgba(120,247,255,.88),transparent);
  animation:vxScan 4.8s ease-in-out infinite;
}
@keyframes vxScan{to{transform:translateX(700%)}}

.vx-cursor{
  position:fixed;
  left:0;
  top:0;
  width:9rem;
  height:9rem;
  z-index:1199;
  pointer-events:none;
  opacity:0;
  border-radius:50%;
  background:radial-gradient(circle,rgba(0,200,255,.16),rgba(75,108,255,.06) 42%,transparent 72%);
  mix-blend-mode:screen;
  transform:translate(-50%,-50%);
  transition:opacity .25s;
}
body.vx-pointer .vx-cursor{opacity:1}

.tiers{position:relative}
.tier{position:relative;overflow:hidden}
.tier::before{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--accent,#00c8ff),transparent);
  transform:scaleX(0);
  opacity:.8;
  transition:transform .35s ease;
}
.tier:hover::before{transform:scaleX(1)}
.tier:hover .price{
  text-shadow:0 0 34px rgba(0,200,255,.28);
}

.inquiry-form{
  position:relative;
  overflow:hidden;
}
.inquiry-form::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(135deg,rgba(0,200,255,.55),transparent 28%,rgba(75,108,255,.36),transparent 68%,rgba(120,247,255,.45));
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  padding:1px;
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  transition:opacity .25s;
}
.inquiry-form:focus-within::before{opacity:1}
.inquiry-form:focus-within{
  box-shadow:0 28px 100px rgba(0,200,255,.18),0 0 55px rgba(75,108,255,.12);
}

.vx-intro{
  position:fixed;
  inset:0;
  z-index:9998;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 42%,rgba(0,200,255,.18),transparent 26rem),
    linear-gradient(145deg,#020713,#071629);
  color:#effbff;
  animation:vxIntroOut .9s cubic-bezier(.16,1,.3,1) .62s forwards;
  pointer-events:none;
}
.vx-intro strong{
  font-family:"Instrument Serif",Georgia,serif;
  font-size:clamp(2.5rem,8vw,6rem);
  font-weight:400;
  letter-spacing:.02em;
  text-shadow:0 0 34px rgba(0,200,255,.35);
}
.vx-intro strong::before,
.vx-intro strong::after{color:var(--accent,#00c8ff)}
.vx-intro strong::before{content:"{";margin-right:.35rem}
.vx-intro strong::after{content:"}";margin-left:.35rem}
@keyframes vxIntroOut{
  to{opacity:0;visibility:hidden;transform:scale(1.02)}
}

@media(max-width:767px){
  .vx-markers,.vx-cursor,.vx-code-particles{display:none}
  .work-row::after{display:none}
  .vx-divider{left:1.25rem;right:1.25rem}
}
@media(hover:none),(pointer:coarse){
  .vx-tilt{transform:none!important}
  .vx-cursor{display:none}
}
@media(prefers-reduced-motion:reduce){
  .vx-blueprint::before,
  .vx-blueprint::after,
  .vx-code-particle,
  .vx-divider::before,
  .vx-intro{animation:none!important}
  .vx-intro{display:none}
}