/* ─────────────────────────────────────────────
   systemisAI — custom stylesheet
   Tailwind CDN handles utility classes.
   Only non-utility / pseudo-element rules live here.
───────────────────────────────────────────── */

/* ── Scroll behaviour ─────────────────────── */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 112px; /* clears sticky nav (h-24 = 96px + buffer) */
}

/* ── Nav link hover underline ─────────────── */
.nav-link {
  position: relative;
  transition: color 0.3s ease;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: rgba(59, 130, 246, 0.7);
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link:hover::after {
  width: 100%;
}

.nav-logo {
  height: 220px;
  transform: translateY(16px); /* positivo = baja, negativo = sube */
}

/* ── Language switcher buttons ────────────── */
.lang-btn {
  transition: all 0.25s ease;
}

.lang-btn.active {
  color: #fff;
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.4);
}

.lang-btn:not(.active) {
  color: rgba(156, 163, 175, 1);
  background: transparent;
  border-color: transparent;
}

.lang-btn:not(.active):hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

/* ── Gradient text (hero headline) ───────── */
.text-gradient {
  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 40%, #22d3ee 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: brightness(1.1);
}