@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;500;600;700&family=Noto+Serif+Bengali:wght@500;600;700&display=swap');

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}

.font-heading {
  font-family: var(--font-heading);
}

.hero-pattern {
  background-image: radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--color-accent) 20%, transparent) 0 2px, transparent 3px), radial-gradient(circle at 80% 65%, color-mix(in srgb, var(--color-primary) 14%, transparent) 0 2px, transparent 3px);
  background-size: 34px 34px, 46px 46px;
}

.glass-nav {
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-border);
}

.image-card {
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: 0 16px 35px color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.image-card img {
  transition: transform .7s cubic-bezier(.2, .8, .2, 1), filter .7s ease;
}

.image-card:hover img {
  transform: scale(1.07);
  filter: saturate(1.12);
}

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

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

.float-badge {
  animation: float 4s ease-in-out infinite;
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

@keyframes pulseLine {

  0%,
  100% {
    width: 3rem;
  }

  50% {
    width: 5rem;
  }
}

.pulse-line {
  animation: pulseLine 2.5s ease-in-out infinite;
}

.mobile-menu {
  display: none;
}

.mobile-menu.open {
  display: block;
}

@media (max-width: 768px) {
  .hero-title {
    font-size: clamp(2.2rem, 12vw, 4rem);
    line-height: 1.2;
  }

  .hero-image {
    min-height: 330px;
  }
}