/* Ultra-light custom styles for VIRTUALTECH */

:root{
  --navy:#050816;
  --cyan:#22d3ee;
  --silver: rgba(226,232,240,.9);
  --glass: rgba(255,255,255,.06);
  --glass2: rgba(255,255,255,.10);
}

html{scroll-behavior:smooth;}

/* Glass + glow */
.glass{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.glow-cyan{
  box-shadow:
    0 0 0 1px rgba(34,211,238,.22),
    0 10px 40px rgba(34,211,238,.10);
}

/* Subtle animated background grid */
.bg-grid{
  background-image:
    linear-gradient(rgba(34,211,238,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,211,238,.10) 1px, transparent 1px);
  background-size: 42px 42px;
}

/* Lightweight fade/slide */
@keyframes vstFadeUp{
  from{opacity:0; transform: translateY(10px);}
  to{opacity:1; transform: translateY(0);} 
}

.vst-anim{
  opacity:0;
  animation: vstFadeUp .7s ease forwards;
  animation-delay: var(--delay, 0ms);
}

/* Mobile menu slide */
@keyframes vstSlideDown{
  from{opacity:0; transform: translateY(-8px);} 
  to{opacity:1; transform: translateY(0);} 
}

.vst-menu{
  animation: vstSlideDown .18s ease-out;
}

/* Lightweight carousel */
.vst-carousel-track{
  display:flex;
  gap:16px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.vst-carousel-track::-webkit-scrollbar{display:none;}
.vst-carousel-item{
  min-width: 330px;
  scroll-snap-align:start;
}
@media (min-width: 640px){
  .vst-carousel-item{min-width: 410px;}
}
@media (min-width: 1024px){
  .vst-carousel-item{min-width: 460px;}
}


@media (prefers-reduced-motion: reduce){
  .vst-carousel-track{scroll-behavior:auto;}
}


/* Premium micro interactions */
.vst-hover-glow:hover{box-shadow: 0 0 0 1px rgba(34,211,238,.25), 0 18px 55px rgba(34,211,238,.12);}

.vst-sweep{
  position:absolute;
  inset:-20% -40% auto -40%;
  height:160%;
  background: linear-gradient(90deg, transparent, rgba(34,211,238,.18), transparent);
  transform: translateX(-60%);
  opacity: .0;
}
.vst-hero-card:hover .vst-sweep{opacity:1; animation: vstSweep 1.2s ease-out;}
@keyframes vstSweep{
  0%{transform: translateX(-60%);}
  100%{transform: translateX(60%);}
}

/* Focus ring polish */
:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(34,211,238,.35);
}