/* Identidade visual GTA6AGORA — inspirada na atmosfera da página oficial de mídia */
:root {
  --vi-black: #08070a;
  --vi-surface: #111014;
  --vi-white: #f7f4f1;
  --vi-muted: rgba(247, 244, 241, .72);
  --vi-pink: #f24d93;
  --vi-peach: #ff9c7a;
  --vi-purple: #8d4eb7;
  --vi-glass: rgba(10, 8, 13, .58);
  --vi-border: rgba(255, 255, 255, .13);
}

html {
  scroll-padding-top: 88px;
  scrollbar-width: thin;
  scrollbar-color: #666 #20202b;
}

body {
  background: var(--vi-black);
  overflow-x: hidden;
}

/* Scrollbar escura e compacta, semelhante à referência */
::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

::-webkit-scrollbar-track {
  background: #20202b;
}

::-webkit-scrollbar-thumb {
  min-height: 54px;
  border: 3px solid #20202b;
  border-radius: 2px;
  background: #696969;
}

::-webkit-scrollbar-thumb:hover {
  background: #858585;
}

::-webkit-scrollbar-button:single-button {
  display: block;
  width: 14px;
  height: 14px;
  background-color: #20202b;
  background-position: center;
  background-repeat: no-repeat;
}

::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: linear-gradient(135deg, transparent 50%, #ddd 50%), linear-gradient(45deg, #ddd 50%, transparent 50%);
  background-size: 4px 4px;
  background-position: 4px 7px, 7px 7px;
}

::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: linear-gradient(45deg, transparent 50%, #ddd 50%), linear-gradient(135deg, #ddd 50%, transparent 50%);
  background-size: 4px 4px;
  background-position: 4px 4px, 7px 4px;
}

/* Cabeçalho transparente sobre o hero e em vidro ao rolar */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  background: linear-gradient(180deg, rgba(5, 4, 7, .62), rgba(5, 4, 7, 0));
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  transition: background .42s ease, backdrop-filter .42s ease, border-color .42s ease, box-shadow .42s ease;
}

.site-header.is-scrolled,
.site-header.menu-open {
  background: var(--vi-glass);
  border-color: var(--vi-border);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
}

.site-header .header-inner {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(18px, 2vw, 34px);
  height: 96px;
}

/* Logo sempre à esquerda */
.site-header .logo {
  position: relative;
  z-index: 2;
  justify-self: start;
  flex: none;
}

/* Navegação central com seleção branca em forma de cápsula */
.site-header .main-nav {
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}

.site-header .nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 clamp(14px, 1.35vw, 24px);
  border: 1px solid transparent;
  border-radius: 999px;
  color: rgba(255, 255, 255, .9);
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
  transition: color .3s ease, background-color .3s ease, transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease;
}

.site-header .nav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, .1);
  transform: translateY(-1px);
}

.site-header .nav-link.active {
  color: #111014;
  background: #fff;
  border-color: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}

.site-header .nav-link.active::after {
  display: none;
}

.site-header .header-actions {
  justify-self: end;
}

/* Hero com arte estática */
.hero {
  min-height: min(900px, 100svh);
  padding-top: 78px;
  background: var(--vi-black);
}

.hero-bg .hero-picture,
.hero-bg .hero-image {
  width: 100%;
  height: 100%;
  display: block;
}

.hero-bg .hero-image {
  object-fit: cover;
  object-position: center center;
  transform: scale(1.015);
  animation: viHeroReveal 1.25s cubic-bezier(.22, 1, .36, 1) both;
}

.hero-overlay {
  background:
    linear-gradient(90deg, rgba(7, 5, 9, .94) 0%, rgba(7, 5, 9, .72) 28%, rgba(7, 5, 9, .13) 61%, rgba(7, 5, 9, .22) 100%),
    linear-gradient(0deg, var(--vi-black) 0%, rgba(8, 7, 10, .3) 28%, transparent 58%);
}

.hero-content {
  padding-top: 104px;
  padding-bottom: 70px;
}

.hero-title {
  max-width: 660px;
}

.hero-title span {
  text-shadow: 0 5px 30px rgba(0, 0, 0, .42);
}

.hero-desc {
  max-width: 500px;
  color: var(--vi-muted);
  font-size: 15px;
}

/* Botões grandes e arredondados, mantendo os mesmos links e estrutura */
.btn,
.card-link {
  transition: transform .28s cubic-bezier(.22, 1, .36, 1), background-color .28s ease, color .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.btn-lg,
.btn-outline,
.media-style-button {
  min-height: 54px;
  padding: 0 28px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .3);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .09em;
  justify-content: center;
}

.btn-pink.btn-lg,
.btn-pink.btn-login {
  background: var(--vi-white);
  color: #0b090d;
  border: 1px solid var(--vi-white);
  box-shadow: none;
}

.btn-pink.btn-lg:hover,
.btn-pink.btn-login:hover {
  background: var(--vi-pink);
  border-color: var(--vi-pink);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(242, 77, 147, .25);
}

.btn-dark.btn-lg,
.btn-outline {
  background: rgba(9, 8, 11, .32);
  color: #fff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.btn-dark.btn-lg:hover,
.btn-outline:hover {
  background: #fff;
  border-color: #fff;
  color: #09080b;
  transform: translateY(-2px);
}

.hero-buttons {
  gap: 12px;
}

/* Seções mais limpas, com espaço e hierarquia semelhantes à referência */
.explore,
.news,
.secondary-highlights {
  background: var(--vi-black);
}

.explore,
.news {
  padding-top: clamp(72px, 9vw, 128px);
  padding-bottom: clamp(72px, 9vw, 128px);
}

.section-title {
  color: var(--vi-white);
  font-size: clamp(32px, 4.2vw, 62px);
  line-height: .98;
  letter-spacing: -.015em;
  padding-bottom: 20px;
}

.section-title::after {
  width: 92px;
  height: 4px;
  background: linear-gradient(90deg, var(--vi-peach), var(--vi-pink), var(--vi-purple));
  box-shadow: none;
}

.explore-grid {
  gap: 20px;
}

.explore-card {
  border-radius: 18px;
  border-color: rgba(255, 255, 255, .1);
  background: var(--vi-surface);
}

.explore-card:hover {
  transform: translateY(-7px);
  border-color: rgba(255, 255, 255, .25);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .38);
}

.explore-card .card-img img {
  transition: transform .7s cubic-bezier(.22, 1, .36, 1), filter .7s ease;
}

.explore-card:hover .card-img img {
  transform: scale(1.075);
  filter: saturate(1.08) contrast(1.04);
}

.card-grad {
  background: linear-gradient(0deg, rgba(10, 8, 13, .98) 20%, rgba(10, 8, 13, .5) 55%, rgba(10, 8, 13, .03) 100%);
}

.card-icon {
  background: rgba(255, 255, 255, .92);
  color: #0b090d;
  box-shadow: none;
}

.card-link {
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  color: #fff;
  background: rgba(0, 0, 0, .2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.card-link:hover {
  color: #0b090d;
  background: #fff;
  border-color: #fff;
  transform: translateY(-2px);
}

/* Aparição suave ao entrar na tela */
.vi-reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .8s ease, transform .9s cubic-bezier(.22, 1, .36, 1);
}

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

@keyframes viHeroReveal {
  from { opacity: 0; transform: scale(1.07); }
  to { opacity: 1; transform: scale(1.015); }
}

@media (max-width: 1280px) {
  .site-header .header-inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
  }

  .site-header .nav-link {
    min-height: 44px;
    padding: 0 12px;
    font-size: 11px;
  }
}

@media (max-width: 1050px) {
  .site-header .main-nav {
    display: none;
  }

  .site-header .header-inner {
    display: flex;
    justify-content: space-between;
    height: 68px;
  }

  .hero { padding-top: 68px; }
  .hero-bg .hero-image { object-position: 60% center; }
  .hero-overlay {
    background:
      linear-gradient(0deg, var(--vi-black) 0%, rgba(8, 7, 10, .62) 45%, rgba(8, 7, 10, .13) 100%),
      linear-gradient(90deg, rgba(8, 7, 10, .72), transparent 80%);
  }
}

@media (max-width: 600px) {
  .hero { min-height: 820px; }
  .hero-content { padding-top: 76px; }
  .hero-buttons { flex-direction: column; align-items: stretch; }
  .btn-lg { width: 100%; }
  .section-title { font-size: 38px; }
  .explore-card { border-radius: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg .hero-image,
  .vi-reveal {
    animation: none;
    transition: none;
  }

  .vi-reveal {
    opacity: 1;
    transform: none;
  }
}