:root {
  --vital-hatter-mely: #0b131f;
  --vital-hatter-felulet: #142032;
  --vital-uveg-hatter: rgba(20, 32, 50, 0.65);
  --vital-uveg-keret: rgba(255, 255, 255, 0.12);
  --vital-akcentus-turkiz: #00f2fe;
  --vital-akcentus-smaragd: #10b981;
  --vital-akcentus-hover: #38ef7d;
  --vital-szoveg-vilagos: #f8fafc;
  --vital-szoveg-halkan: #94a3b8;
  --vital-atmenet-fo: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%);
  --vital-atmenet-gomb: linear-gradient(135deg, #10b981 0%, #00f2fe 100%);
  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Poppins', sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--vital-hatter-mely);
  color: var(--vital-szoveg-vilagos);
  font-family: var(--font-body);
  overflow-x: hidden;
  position: relative;
}

/* Background SVG Pattern Layer */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(rgba(0, 242, 254, 0.05) 1px, transparent 0);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 0;
}

/* Progress Indicator Bar */
.vital-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  width: 100%;
  background: var(--vital-atmenet-fo);
  transform-origin: left center;
  z-index: 100;
  animation: vitalProgress linear;
  animation-timeline: scroll();
}

@keyframes vitalProgress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Viewport Animations (Scroll-driven view reveal) */
.vital-scroll-reveal {
  animation: vitalFadeIn linear both;
  animation-timeline: view();
  animation-range: entry 10% cover 30%;
}

@keyframes vitalFadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Interactive Hover States */
.vital-uveg-elem {
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.vital-uveg-elem:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 242, 254, 0.4) !important;
  box-shadow: 0 15px 30px -10px rgba(0, 242, 254, 0.25);
}

.vital-menu-link {
  transition: color 0.2s ease;
}

.vital-menu-link:hover {
  color: var(--vital-akcentus-turkiz) !important;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--vital-hatter-mely);
}

::-webkit-scrollbar-thumb {
  background: var(--vital-hatter-felulet);
  border-radius: 4px;
  border: 1px solid var(--vital-uveg-keret);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--vital-akcentus-smaragd);
}