body {
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
}

h1,
h2,
h3,
.font-display {
  font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
}

.font-data,
code,
kbd {
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

.hero-bg,
.bg-art {
  background-size: cover;
  background-position: center;
}

@keyframes floatY {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-14px);
  }
}

@keyframes marqueeX {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes eqBar {
  0%,
  100% {
    transform: scaleY(0.25);
  }
  50% {
    transform: scaleY(1);
  }
}

@keyframes pulseDot {
  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.45);
  }
  50% {
    opacity: 0.65;
    box-shadow: 0 0 0 8px rgba(14, 165, 233, 0);
  }
}

@keyframes scanline {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 120px;
  }
}

@keyframes shimmerX {
  from {
    background-position: -200% 0;
  }
  to {
    background-position: 200% 0;
  }
}

@keyframes spinOnce {
  to {
    transform: rotate(360deg);
  }
}

@keyframes snowfall {
  from {
    transform: translateY(-10vh);
  }
  to {
    transform: translateY(110vh);
  }
}

@keyframes blinkCaret {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

.float-slow {
  animation: floatY 6s ease-in-out infinite;
}
.float-slower {
  animation: floatY 9s ease-in-out infinite;
}
.pulse-dot {
  animation: pulseDot 2s ease-in-out infinite;
}
.spin-load {
  animation: spinOnce 0.9s linear infinite;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marqueeX 30s linear infinite;
}
.marquee-track:hover {
  animation-play-state: paused;
}

.eq-bar {
  transform-origin: bottom;
  animation: eqBar 1.1s ease-in-out infinite;
}

.site-header {
  transition:
    box-shadow 0.3s ease,
    background 0.3s ease;
}
.site-header.is-scrolled {
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.08);
}

#mobileMenu {
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}
#mobileMenu.menu-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
}

.accordion-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}
.accordion-body > div {
  overflow: hidden;
}
.accordion-item.open .accordion-body {
  grid-template-rows: 1fr;
}
.accordion-item .accordion-chevron {
  transition: transform 0.3s ease;
}
.accordion-item.open .accordion-chevron {
  transform: rotate(180deg);
}

[data-slide] {
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
  transform: scale(1.04);
}
[data-slide].slide-active {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.drag-scroll {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.drag-scroll::-webkit-scrollbar {
  display: none;
}
.drag-scroll > * {
  scroll-snap-align: start;
}

.scanlines {
  position: relative;
  overflow: hidden;
}
.scanlines::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.05) 0px,
    rgba(255, 255, 255, 0.05) 1px,
    transparent 1px,
    transparent 4px
  );
  animation: scanline 6s linear infinite;
}

.holo-shine {
  background: linear-gradient(
    110deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0) 70%
  );
  background-size: 200% 100%;
  animation: shimmerX 3.2s linear infinite;
}

.pixelated {
  image-rendering: pixelated;
}

.snow-layer span {
  position: absolute;
  top: -10vh;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.85);
  animation: snowfall linear infinite;
}

input[type="range"] {
  accent-color: #0284c7;
}

.tab-btn.tab-active {
  background: #0f172a;
  color: #fff;
}

.toast-box {
  transform: translateY(16px);
  opacity: 0;
  transition:
    transform 0.35s ease,
    opacity 0.35s ease;
}
.toast-box.toast-show {
  transform: translateY(0);
  opacity: 1;
}

.caret-blink::after {
  content: "_";
  animation: blinkCaret 1s steps(1) infinite;
}

.compare-handle {
  touch-action: none;
}

.skill-node.is-locked {
  filter: grayscale(0.9);
  opacity: 0.55;
}
.skill-node.is-open {
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.35);
}

.sfx-pad {
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease;
}
.sfx-pad.pad-hit {
  transform: scale(0.94);
  box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.3);
}

.mbg-01 {
  background-image:
    linear-gradient(
      100deg,
      rgba(2, 6, 23, 0.95) 0%,
      rgba(2, 6, 23, 0.7) 60%,
      rgba(2, 6, 23, 0.85) 100%
    ),
    url("/images/img0.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.mbg-02 {
  background-image:
    linear-gradient(rgba(2, 6, 23, 0.9), rgba(2, 6, 23, 0.9)),
    url("/images/img3.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.mbg-03 {
  background-image:
    linear-gradient(
      105deg,
      rgba(3, 105, 161, 0.92) 0%,
      rgba(8, 47, 73, 0.9) 60%,
      rgba(2, 6, 23, 0.95) 100%
    ),
    url("/images/img5.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.mbg-04 {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url("/images/img0.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.mbg-05 {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url("/images/img4.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.mbg-06 {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url("/images/img10.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.mbg-07 {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url("/images/img2.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.mbg-08 {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
    url("/images/img1.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.mbg-09 {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
    url("/images/img5.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.mbg-10 {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url("/images/img1.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.mbg-11 {
  background-image:
    linear-gradient(
      100deg,
      rgba(2, 6, 23, 0.95) 0%,
      rgba(2, 6, 23, 0.7) 60%,
      rgba(2, 6, 23, 0.85) 100%
    ),
    url("/images/img6.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.mbg-12 {
  background-image:
    linear-gradient(
      105deg,
      rgba(3, 105, 161, 0.93) 0%,
      rgba(8, 47, 73, 0.9) 60%,
      rgba(2, 6, 23, 0.95) 100%
    ),
    url("/images/img3.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.mbg-13 {
  background-image:
    linear-gradient(180deg, rgba(2, 6, 23, 0.3) 0%, rgba(2, 6, 23, 0.9) 80%),
    url("/images/img1.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.mbg-14 {
  background-image:
    linear-gradient(180deg, rgba(2, 6, 23, 0.3) 0%, rgba(2, 6, 23, 0.9) 80%),
    url("/images/img7.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.mbg-15 {
  background-image:
    linear-gradient(
      100deg,
      rgba(2, 6, 23, 0.95) 0%,
      rgba(2, 6, 23, 0.7) 60%,
      rgba(2, 6, 23, 0.85) 100%
    ),
    url("/images/img2.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.mbg-16 {
  background-image:
    linear-gradient(
      100deg,
      rgba(2, 6, 23, 0.96) 0%,
      rgba(2, 6, 23, 0.75) 60%,
      rgba(2, 6, 23, 0.88) 100%
    ),
    url("/images/img7.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.mbg-17 {
  background-image:
    linear-gradient(
      100deg,
      rgba(2, 6, 23, 0.92) 0%,
      rgba(15, 23, 42, 0.85) 60%,
      rgba(8, 47, 73, 0.9) 100%
    ),
    url("/images/img5.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.mbg-18 {
  background-image:
    linear-gradient(
      100deg,
      rgba(2, 6, 23, 0.92) 0%,
      rgba(2, 6, 23, 0.55) 55%,
      rgba(2, 6, 23, 0.75) 100%
    ),
    url("/images/img4.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.mbg-19 {
  background-image:
    linear-gradient(
      100deg,
      rgba(2, 6, 23, 0.92) 0%,
      rgba(2, 6, 23, 0.55) 55%,
      rgba(2, 6, 23, 0.75) 100%
    ),
    url("/images/img1.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.mbg-20 {
  background-image:
    linear-gradient(
      100deg,
      rgba(2, 6, 23, 0.92) 0%,
      rgba(2, 6, 23, 0.55) 55%,
      rgba(2, 6, 23, 0.75) 100%
    ),
    url("/images/img7.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.mbg-21 {
  background-image:
    linear-gradient(rgba(2, 6, 23, 0.85), rgba(2, 6, 23, 0.85)),
    url("/images/img5.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.mbg-22 {
  background-image:
    linear-gradient(180deg, rgba(2, 6, 23, 0.25) 0%, rgba(2, 6, 23, 0.9) 75%),
    url("/images/img1.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.mbg-23 {
  background-image:
    linear-gradient(180deg, rgba(2, 6, 23, 0.25) 0%, rgba(2, 6, 23, 0.9) 75%),
    url("/images/img2.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.mbg-24 {
  background-image:
    linear-gradient(90deg, rgba(2, 6, 23, 0.85) 0%, rgba(2, 6, 23, 0.4) 100%),
    url("/images/img4.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.mbg-25 {
  background-image:
    linear-gradient(
      115deg,
      rgba(240, 249, 255, 0.96) 0%,
      rgba(224, 242, 254, 0.92) 55%,
      rgba(255, 255, 255, 0.88) 100%
    ),
    url("/images/img8.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.mbg-26 {
  background-image:
    linear-gradient(
      105deg,
      rgba(3, 105, 161, 0.92) 0%,
      rgba(8, 47, 73, 0.9) 60%,
      rgba(2, 6, 23, 0.95) 100%
    ),
    url("/images/img8.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.mbg-27 {
  background-image:
    linear-gradient(
      100deg,
      rgba(2, 6, 23, 0.95) 0%,
      rgba(2, 6, 23, 0.65) 55%,
      rgba(2, 6, 23, 0.85) 100%
    ),
    url("/images/img3.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.mbg-28 {
  background-image:
    linear-gradient(rgba(2, 6, 23, 0.9), rgba(2, 6, 23, 0.9)),
    url("/images/img9.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.mbg-29 {
  background-image:
    linear-gradient(
      105deg,
      rgba(3, 105, 161, 0.92) 0%,
      rgba(8, 47, 73, 0.9) 60%,
      rgba(2, 6, 23, 0.95) 100%
    ),
    url("/images/img6.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.mbg-30 {
  background-image:
    linear-gradient(
      100deg,
      rgba(2, 6, 23, 0.95) 0%,
      rgba(2, 6, 23, 0.7) 60%,
      rgba(2, 6, 23, 0.85) 100%
    ),
    url("/images/img3.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.mbg-31 {
  background-image:
    linear-gradient(
      115deg,
      rgba(240, 249, 255, 0.96) 0%,
      rgba(224, 242, 254, 0.92) 55%,
      rgba(255, 255, 255, 0.9) 100%
    ),
    url("/images/img0.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.cookie-banner {
  transform: translateY(120%);
  opacity: 0;
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.45s ease;
}
.cookie-banner.cookie-show {
  transform: translateY(0);
  opacity: 1;
}

#contact-form .iti {
  --iti-border-color: #cbd5e1;
  --iti-dialcode-color: #64748b;
  --iti-dropdown-bg: #ffffff;
  --iti-hover-color: #f1f5f9;
  --iti-arrow-color: #64748b;
  display: block;
  width: 100%;
}
@media (max-width: 768px) {
  html, body{
    overflow-x:hidden;
    max-width:100%;
  }
}