html {
  scroll-behavior: smooth;
}


.mesh-bg {
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(255, 255, 255, 0.09), transparent),
    radial-gradient(ellipse 50% 40% at 90% 20%, rgba(255, 255, 255, 0.04), transparent),
    radial-gradient(ellipse 40% 50% at 10% 60%, rgba(255, 255, 255, 0.03), transparent);
}

@keyframes banner-fade-in {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.hero-banner-text {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(90vw, 720px);
  height: 140px;
  background-image: url("banner.png");
  background-repeat: no-repeat;
  background-size: 180% auto;
  background-position: 88% center;
  opacity: 0;
  animation: banner-fade-in 1.8s ease forwards;
  animation-delay: 0.3s;
  mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
  filter: brightness(0.85);
  pointer-events: none;
}

@media (min-width: 640px) {
  .hero-banner-text {
    height: 180px;
    background-size: 160% auto;
    background-position: 85% center;
  }
}

@media (min-width: 1024px) {
  .hero-banner-text {
    height: 220px;
    width: min(85vw, 900px);
    background-size: 150% auto;
    background-position: 82% center;
  }
}


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

.animate-float {
  animation: float 6s ease-in-out infinite;
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Glass card */
.glass-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-card:hover {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
}


.tab-panel {
  display: none;
  animation: fade-up 0.4s ease;
}

.tab-panel.active {
  display: block;
}


.text-gradient {
  background: linear-gradient(to bottom, #ffffff 30%, rgba(255, 255, 255, 0.55));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/
.grid-overlay {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%);
}


.mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.mobile-menu.open {
  max-height: 320px;
}