html {
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(circle at top left, rgba(34, 211, 238, 0.16), transparent 28%),
    radial-gradient(circle at 80% 12%, rgba(99, 102, 241, 0.16), transparent 24%),
    radial-gradient(circle at 50% 90%, rgba(16, 185, 129, 0.08), transparent 24%),
    linear-gradient(180deg, #020617 0%, #0f172a 45%, #020617 100%);
  background-attachment: fixed;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.75), transparent 92%);
  opacity: 0.55;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at center, transparent 55%, rgba(2, 6, 23, 0.2) 100%);
}

.glass {
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(148, 163, 184, 0.16);
  box-shadow: 0 24px 80px rgba(2, 6, 23, 0.35);
}

.panel {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(15, 23, 42, 0.68));
  border: 1px solid rgba(148, 163, 184, 0.12);
  box-shadow: 0 18px 60px rgba(2, 6, 23, 0.35);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.grid-card {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(2, 6, 23, 0.82));
  border: 1px solid rgba(148, 163, 184, 0.14);
}

.neo-border {
  position: relative;
}

.neo-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.55), rgba(99, 102, 241, 0.18), rgba(16, 185, 129, 0.22));
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.skip-link {
  left: 0.75rem;
  top: 0.75rem;
  transform: translateY(-140%);
  transition: transform 160ms ease, opacity 160ms ease;
  opacity: 0;
}

.skip-link:focus {
  transform: translateY(0);
  opacity: 1;
  outline: none;
}

.section-anchor {
  scroll-margin-top: 96px;
}

.mono {
  font-family: 'JetBrains Mono', monospace;
}

.display {
  font-family: 'Space Grotesk', sans-serif;
}

/* Emoji flags (🇵🇹 / 🇬🇧) às vezes falham a renderizar em certos ambientes.
   Tornar o layout previsível e evitar problemas de line-height/alinhamento. */
.flag-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  vertical-align: middle;
  transform: translateY(-0.02em);
}