/* Shared visual layer for site wide components and page families. */


html { scroll-padding-top: 90px; }
body { min-height: 100vh; }
::selection { color: #101916; background: #8bd9b3; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #426454; border: 2px solid var(--bg); border-radius: 8px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 4px;
}

#main-nav {
  min-height: 76px;
  padding-inline: clamp(20px, 5vw, 72px);
  border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
#main-nav.scrolled {
  background: rgba(16, 25, 22, .9);
  border-color: var(--border);
  box-shadow: 0 12px 36px rgba(0, 0, 0, .16);
  backdrop-filter: blur(18px);
}
.nav-links { gap: clamp(14px, 2vw, 28px); }
.nav-links a, .page-nav-back { font-size: .82rem; letter-spacing: .01em; }
.nav-links a:hover, .page-nav-back:hover { color: var(--green); }
.nav-discord { border-radius: 999px; background: var(--surface-md); }

.hero-title, .page-hero h1 { letter-spacing: -.045em; }
.hero-title { max-width: 1040px; }
.hero-sub, .page-hero-desc { max-width: 680px; color: #bdc8be; }
.hero-eyebrow, .section-eyebrow, .page-hero-eyebrow, .page-section-label {
  letter-spacing: .12em;
}
.hero-secondary-cta { margin: 0; }
.btn-spatial, .btn-discord-hero, .btn-outline, .nav-discord {
  border-radius: 999px;
  letter-spacing: .025em;
}
.btn-spatial { padding: 14px 26px; }
.btn-outline { padding: 12px 20px; }
.btn-outline:hover { border-color: var(--green); color: var(--text); transform: translateY(-2px); }

.page-card, .gamedev-card, .blog-card, .team-card, .contact-form, .analytics-feature, .community-card {
  border-radius: var(--radius-lg);
  border-color: var(--border);
  background-color: var(--surface);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .08);
}
.page-card:hover, .gamedev-card:hover, .blog-card:hover, .team-card:hover {
  border-color: rgba(139, 217, 179, .38);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .18);
}
.page-card h3, .gamedev-card h3 { letter-spacing: -.01em; }
.page-card-tags span, .gamedev-tech span { border-radius: 999px; }
.page-hero { padding-top: clamp(132px, 17vh, 190px); }
.page-hero-ambient { opacity: .7; }
.page-section { padding-block: clamp(64px, 8vw, 96px); }
.page-section + .page-section { padding-top: 0; }

#hero {
  background: radial-gradient(ellipse at 50% 18%, rgba(139, 217, 179, .055), transparent 43%);
}
#hero .blueprint-marks, #hero .titleblock-row { opacity: .2; }
.hero-pillars { border-top-color: var(--border); }
.pillar-divider { background: var(--border); }
#threejs-bg.webgl-unavailable { display: none; }

input, textarea, select { border-radius: var(--radius-sm); }
.footer-col a:hover, .footer-legal a:hover { color: var(--green); }
.page-footer-links { flex-wrap: wrap; justify-content: flex-end; gap: 10px 16px; }
.page-footer-links a:hover { color: var(--green); }

@media (max-width: 860px) {
  #main-nav { min-height: 68px; }
  .hero-line1, .hero-line2 { font-size: clamp(3rem, 8vw, 5.5rem); }
  .hero-pillars { flex-wrap: wrap; justify-content: center; row-gap: 12px; }
  .pillar-divider { display: none; }
}

@media (max-width: 560px) {
  .hero-line1, .hero-line2 { font-size: clamp(2.3rem, 9.7vw, 3.75rem); }
  .hero-sub, .page-hero-desc { font-size: 1rem; }
  .hero-cta-row { gap: 10px; }
  .hero-cta-row > a { justify-content: center; }
  .page-hero-cta > a { flex: 1 1 100%; justify-content: center; }
  .page-footer-inner { align-items: flex-start; gap: 16px; }
  .page-footer-links { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}