:root{
  --royal:#0D2BD9;
  --gold:#F2B705;
  --ink:#0B0F1A;
}

body{ font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; }
h1,h2,h3{ font-family: Sora, Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; }

.v-text{ color: rgba(11, 15, 26, 0.78); }
.v-text-strong{ color: rgba(11, 15, 26, 0.90); }
.v-text-muted{ color: rgba(11, 15, 26, 0.66); }
.v-text-invert{ color: rgba(255,255,255,0.82); }
.v-text-invert-muted{ color: rgba(255,255,255,0.70); }

.v-btn{ position:relative; overflow:hidden; }
.v-btn::after{ content:""; position:absolute; inset:-2px; background: radial-gradient(circle at 20% 20%, rgba(242,183,5,0.35), transparent 55%); opacity:0; transition: opacity 220ms ease; }
.v-btn:hover::after{ opacity:1; }
.v-btn{ transition: transform 220ms ease, box-shadow 220ms ease; }
.v-btn:hover{ transform: translateY(-1px); }
.v-btn:active{ transform: translateY(0px) scale(0.99); }

.v-navlink{ position:relative; }
.v-navlink::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:6px;
  height:2px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(242,183,5,0.0), rgba(242,183,5,0.92), rgba(13,43,217,0.75));
  opacity:0;
  transform: scaleX(0.55);
  transform-origin: center;
  transition: opacity 220ms ease, transform 220ms ease;
}
.v-navlink:hover::after{ opacity:0.65; transform: scaleX(1); }
.v-navlink.is-active::after{ opacity:1; transform: scaleX(1); }

.v-grid{
  background-image:
    radial-gradient(circle at 20% 10%, rgba(242,183,5,0.24), transparent 55%),
    radial-gradient(circle at 85% 30%, rgba(13,43,217,0.20), transparent 52%),
    linear-gradient(to bottom, rgba(0,0,0,0.04) 1px, transparent 1px),
    linear-gradient(to right, rgba(0,0,0,0.04) 1px, transparent 1px);
  background-size: auto, auto, 24px 24px, 24px 24px;
  background-position: 0 0, 0 0, 0 0, 0 0;
  animation: vgrid 18s ease-in-out infinite;
}

@keyframes vgrid{
  0%,100%{background-position: 0 0, 0 0, 0 0, 0 0;}
  50%{background-position: 40px -18px, -30px 22px, 14px 14px, 14px 14px;}
}

.v-skew-section{
  position: relative;
}

.v-skew-section::before{
  content:"";
  position:absolute;
  inset:-80px 0 -80px 0;
  background: linear-gradient(135deg, rgba(13,43,217,0.10), rgba(242,183,5,0.08));
  transform: skewY(-4deg);
  z-index:0;
}

.v-skew-section > *{
  position:relative;
  z-index:1;
}

.v-card{
  position:relative;
  transform: perspective(1200px) rotateX(0deg) rotateY(0deg) skewX(-8deg);
  transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
}

.v-card::before,
.v-reveal::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  background: radial-gradient(circle at 20% 20%, rgba(242,183,5,0.20), transparent 55%),
              radial-gradient(circle at 85% 30%, rgba(13,43,217,0.18), transparent 50%);
  opacity:0;
  transition: opacity 260ms ease;
}

.v-card:hover::before,
.v-reveal.is-visible:hover::before{
  opacity:1;
}

.v-card:hover{
  transform: perspective(1200px) rotateX(6deg) rotateY(-10deg) skewX(-8deg) translateY(-6px);
  border-color: rgba(13,43,217,0.26);
  box-shadow: 0 26px 80px rgba(11,15,26,0.10);
}

.v-reveal.is-visible{
  position:relative;
}

.v-reveal.is-visible:not(.v-card){
  transition: opacity 700ms ease, transform 700ms ease, filter 700ms ease, box-shadow 260ms ease, border-color 260ms ease;
}

.v-reveal.is-visible:not(.v-card):hover{
  transform: translateY(-4px);
  border-color: rgba(13,43,217,0.22);
  box-shadow: 0 22px 70px rgba(11,15,26,0.10);
}

.v-reveal{
  position:relative;
  opacity:0;
  transform: translateY(18px) rotate(-0.4deg);
  filter: blur(6px);
  transition: opacity 700ms ease, transform 700ms ease, filter 700ms ease;
}

.v-reveal.is-visible{
  opacity:1;
  transform: translateY(0) rotate(0deg);
  filter: blur(0px);
}

.v-shape{
  position:absolute;
  border-radius: 999px;
  filter: blur(0px);
  opacity:0.9;
}

.v-shape--a{
  width: 520px;
  height: 520px;
  background: radial-gradient(circle at 30% 30%, rgba(242,183,5,0.35), transparent 60%),
              radial-gradient(circle at 70% 70%, rgba(13,43,217,0.35), transparent 60%);
  top: -180px;
  left: -180px;
  transform: rotate(22deg);
}

.v-shape--b{
  width: 640px;
  height: 640px;
  background: radial-gradient(circle at 30% 30%, rgba(13,43,217,0.35), transparent 58%),
              radial-gradient(circle at 70% 70%, rgba(242,183,5,0.25), transparent 60%);
  bottom: -240px;
  right: -240px;
  transform: rotate(-18deg);
}

.v-float{
  animation: vfloat 9s ease-in-out infinite;
}

.v-adelay-n1700{ animation-delay: -1.7s; }
.v-adelay-n1900{ animation-delay: -1.9s; }
.v-adelay-n2100{ animation-delay: -2.1s; }
.v-adelay-n2200{ animation-delay: -2.2s; }
.v-adelay-n2400{ animation-delay: -2.4s; }

@keyframes vfloat{
  0%,100%{transform: translateY(0px) translateX(0px)}
  50%{transform: translateY(-14px) translateX(10px)}
}

@media (prefers-reduced-motion: reduce){
  .v-grid{ animation:none !important; }
  .v-float{ animation:none !important; }
  .v-card{ transition:none !important; }
  .v-reveal{ transition:none !important; opacity:1 !important; transform:none !important; }
  .v-card:hover,
  .v-reveal.is-visible:hover{
    transform:none !important;
  }
}

.v-toast{
  pointer-events:auto;
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.25);
  backdrop-filter: blur(10px);
}

.v-toast[data-variant="success"]{background: rgba(16, 185, 129, 0.10); border: 1px solid rgba(16, 185, 129, 0.22);}
.v-toast[data-variant="error"]{background: rgba(239, 68, 68, 0.10); border: 1px solid rgba(239, 68, 68, 0.22);}
.v-toast[data-variant="info"]{background: rgba(59, 130, 246, 0.10); border: 1px solid rgba(59, 130, 246, 0.22);}

.v-toast-title{color: rgba(255,255,255,0.92); font-weight: 700; font-size: 13px;}
.v-toast-msg{color: rgba(255,255,255,0.72); font-size: 13px; margin-top: 2px; line-height: 1.35;}

.v-backtop{
  position: fixed;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  border: 1px solid rgba(11,15,26,0.10);
  background: rgba(255,255,255,0.92);
  color: rgba(11,15,26,0.92);
  box-shadow: 0 16px 42px rgba(11,15,26,0.14);
  backdrop-filter: blur(10px);
  display: grid;
  place-items: center;
  transition: transform 220ms ease, box-shadow 220ms ease, opacity 220ms ease;
  opacity: 0;
  transform: translateY(10px);
}

.v-backtop.is-visible{
  opacity: 1;
  transform: translateY(0px);
}

.v-backtop:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 70px rgba(11,15,26,0.18);
}

.v-backtop:active{
  transform: translateY(0px) scale(0.98);
}

.v-backtop-ring{
  position: absolute;
  inset: 0;
  width: 56px;
  height: 56px;
  transform: rotate(-90deg);
  z-index: 0;
}

.v-backtop-track{
  fill: none;
  stroke: rgba(242,183,5,0.22);
  stroke-width: 4;
}

.v-backtop-progress{
  fill: none;
  stroke: var(--gold);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 125.6;
  stroke-dashoffset: 125.6;
  transition: stroke-dashoffset 80ms linear;
  z-index: 0;
}

.v-backtop-icon{
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--gold);
  color: var(--ink);
  box-shadow: 0 10px 22px rgba(242,183,5,0.22);
}

 .v-marquee{
   position: relative;
   overflow: hidden;
 }

 .v-marquee__fade{
   pointer-events: none;
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 12%, rgba(255,255,255,0) 88%, rgba(255,255,255,1) 100%);
   z-index: 2;
 }

 .v-marquee__track{
   position: relative;
   display: flex;
   gap: 18px;
   overflow: hidden;
   width: max-content;
   will-change: transform;
   animation: vmarquee 18s linear infinite;
 }

 .v-marquee__row{
   display: flex;
   gap: 18px;
   align-items: center;
   flex: 0 0 auto;
   min-width: max-content;
 }

 .v-marquee:hover .v-marquee__track{
   animation-play-state: paused;
 }

 .v-tech{
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 12px 16px;
   border-radius: 16px;
   border: 1px solid rgba(11,15,26,0.10);
   background: rgba(255,255,255,0.92);
   box-shadow: 0 16px 42px rgba(11,15,26,0.10);
   white-space: nowrap;
 }

 .v-tech i{
   font-size: 20px;
   line-height: 1;
   color: rgba(11,15,26,0.78);
 }

 .v-tech span{
   font-size: 13px;
   font-weight: 700;
   letter-spacing: 0.01em;
   color: rgba(11,15,26,0.80);
 }

 .v-tech-svg{
   width: 22px;
   height: 22px;
   display: block;
 }

 @keyframes vmarquee{
   0%{ transform: translateX(0); }
   100%{ transform: translateX(-50%); }
 }

 @media (prefers-reduced-motion: reduce){
   .v-marquee__track{ animation: none !important; }
 }

 html.dark body{
   background: var(--ink);
   color: rgba(255,255,255,0.86);
 }
 
 html.dark .bg-white{ background-color: var(--ink) !important; }
 html.dark .bg-white\/70{ background-color: rgba(11,15,26,0.70) !important; }
 html.dark .bg-white\/60{ background-color: rgba(11,15,26,0.60) !important; }
 html.dark .bg-black\/\[0\.02\]{ background-color: rgba(255,255,255,0.04) !important; }
 html.dark .bg-slate-50{ background-color: #070A12 !important; }
 html.dark .bg-ink{ background-color: #070A12 !important; }
 
 html.dark .text-ink{ color: rgba(255,255,255,0.88) !important; }
 html.dark .text-ink\/80{ color: rgba(255,255,255,0.74) !important; }
 html.dark .text-ink\/70{ color: rgba(255,255,255,0.66) !important; }
 html.dark .text-ink\/50{ color: rgba(255,255,255,0.52) !important; }
 html.dark .text-white\/85{ color: rgba(255,255,255,0.78) !important; }
 
 html.dark .border-black\/5{ border-color: rgba(255,255,255,0.08) !important; }
 html.dark .border-black\/10{ border-color: rgba(255,255,255,0.12) !important; }
 html.dark .border-black\/\[0\.10\]{ border-color: rgba(255,255,255,0.12) !important; }
 
 html.dark .shadow, html.dark .shadow-glow{ box-shadow: 0 26px 80px rgba(0,0,0,0.55) !important; }

 html.dark .v-card,
 html.dark .v-reveal.is-visible:not(.v-card),
 html.dark .v-tech{
   background: rgba(255,255,255,0.06) !important;
   border-color: rgba(255,255,255,0.10) !important;
 }

 html.dark .v-tech i{ color: rgba(255,255,255,0.82) !important; }
 html.dark .v-tech span{ color: rgba(255,255,255,0.82) !important; }

 html.dark .v-marquee__fade{
   background: linear-gradient(90deg, rgba(11,15,26,1) 0%, rgba(11,15,26,0) 12%, rgba(11,15,26,0) 88%, rgba(11,15,26,1) 100%);
 }

 html.dark .v-backtop{
   background: rgba(11,15,26,0.92);
   border-color: rgba(255,255,255,0.12);
   color: rgba(255,255,255,0.90);
 }

 html.dark .v-backtop-track{ stroke: rgba(242,183,5,0.22); }