/* Active nav link */
.nav-active {
  border-bottom: 3px solid var(--primary);
  color: var(--primary);
  font-weight: 600;
  transition: all 0.3s ease;
}

/* Variables */
:root {
  --bg: #fafafa;
  --text: #222222;
  --primary: #005286; /* Firm name + contact bar */
  --secondary: #e4f0f7;
  --accent: #0084a8;
}

::selection {
  color: white;
  background: salmon;
}

body {
  font-family: "Inter", sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
}

html {
  scroll-behavior: smooth;
}
section {
  scroll-margin-top: 80px; /* offset for sticky header */
}

/* Firm name */
.firm-name {
  color: var(--primary);
  font-family: "Playfair Display", serif;
}

/* Highlighted span */
.highlight {
  color: var(--accent);
  font-weight: 600;
}

/* Glass effect */
.glass {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(255, 255, 255, 0.8);
}
@media (max-width: 768px) {
  .glass {
    backdrop-filter: none; /* disable heavy blur on phones */
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.95);
  }
}

/* Hero background */
.hero-bg {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    white,
    #cacaca 40px,
    transparent 40px,
    transparent 80px
  );
  opacity: 0.2;
  z-index: -1;
}

/* Reveal animations */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  will-change: transform, opacity; /* GPU optimize */
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* Nav underline */
.link-underline {
  position: relative;
}
.link-underline:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 2px;
  width: 0;
  background: var(--accent);
  transition: width 0.25s ease;
}
.link-underline:hover:after {
  width: 100%;
}

/* Chinmay link hover effect */
.chinmay-link {
  background: linear-gradient(90deg, #a855f7, #ec4899, #fbbf24);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  background-size: 200% auto;
  transition: background-position 0.5s ease;
}
.chinmay-link:hover {
  background-position: right center;
}
