/*
  Global reset / normalization rules. Applying `box-sizing: border-box`
  everywhere simplifies width calculations by including padding/borders in
  the element's total size; this avoids surprises when setting width/height
  on nested elements.
*/
* {
  box-sizing: border-box;
}

/*
  Opt-in smooth scroll native behavior for anchor navigation. It's subtle,
  non-invasive, and degrades gracefully in browsers that don't support it.
*/
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: #0f0f0f;
  color: white;
}

/* Reusable layout container */
.container {
  width: min(1000px, 92%);
  margin: 0 auto;
}

/*
  Top navigation bar uses `position: sticky` so it remains visible without
  taking the overhead of `fixed` which would remove it from document flow.
  The semi-transparent background with blur (backdrop-filter) gives a
  modern 'frosted glass' effect and allows content to scroll under it.
  A thin border reinforces separation from the page content.
*/
.topbar {
  position: sticky;
  top: 0;
  background: rgba(15, 15, 15, 0.8);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 10;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
}

.logo {
  font-weight: 700;
  letter-spacing: 0.5px;
}

.links a {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  margin-left: 16px;
  font-size: 0.95rem;
}

.links a:hover {
  color: white;
}

/* Hero */
.hero {
  min-height: 80vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 64px 0;
}
.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;   /* horizontally center */
  justify-content: center;
  text-align: center;
}

.hero-inner h1 {
  font-size: clamp(2.6rem, 6vw, 4rem);
  margin: 0 0 12px;
}

.subtitle {
  margin: 0 auto 24px;
  max-width: 60ch;
  color: rgba(255,255,255,0.75);
  font-size: 1.05rem;
}

/* Buttons (fixes the “full width white bar” look) */
.cta-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn {
  display: inline-block;
  padding: 12px 18px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.2px;
  transition: transform 0.15s ease, opacity 0.15s ease;
  width: auto;            /* important */
  max-width: 100%;
}

.btn:hover {
  transform: translateY(-1px);
  opacity: 0.95;
}

.btn.primary {
  background: white;
  color: black;
  border: 1px solid white;
}

.btn.ghost {
  background: transparent;
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

/* Sections */
.section {
  padding: 72px 0;
}

.section.alt {
  background: rgba(255, 255, 255, 0.03);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

h2 {
  margin: 0 0 18px;
  font-size: 1.6rem;
}

.lead {
  color: rgba(255,255,255,0.78);
  line-height: 1.7;
  max-width: 75ch;
}

/* Cards */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 20px;
}

.card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 18px;
}

.card h3 {
  margin: 0 0 8px;
}

.card p {
  margin: 0;
  color: rgba(255,255,255,0.75);
  line-height: 1.5;
}

.contact-line {
  color: rgba(255,255,255,0.78);
}

/* Links section */
.links-grid {
  grid-template-columns: repeat(3, 1fr);
}

.link-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
}

.link-list li {
  margin: 10px 0;
}

a {
  color: rgba(255,255,255,0.88);
}

a:hover {
  color: white;
}

.muted {
  color: rgba(255,255,255,0.7);
}

/* Video */
.video-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 14px;
}

.video {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
}

.video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
}

/* Makes the latest video section wider than the normal container */
.video-wide {
  width: min(1300px, 96%);
  margin: 0 auto;
}
/* Icon links */
.icon-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: rgba(255,255,255,0.88);
}

.icon-link:hover {
  color: white;
}

.icon-link img {
  width: 18px;
  height: 18px;
  display: block;
}

/* Optional: subtle “lift” on hover for premium feel */
.icon-link:hover img {
  transform: translateY(-1px);
  transition: transform 0.15s ease;
}
/* Icon row for platform links */
.icon-row {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 12px;
}

/* Clickable icon button */
.icon-btn {
  width: 44px;
  height: 44px;              /* good tap target size */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.icon-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
}

.icon-btn img {
  width: 22px;
  height: 22px;
  display: block;
}

/*
  Responsive overrides apply only below the breakpoint. This section is
  intentionally concise to avoid cascading specificity issues and makes
  it clear that the mobile adjustments are grouped together. The 800px
  threshold was picked because it aligns with the narrowest layout where
  the three-column grid becomes impractical.
*/
/* Responsive overrides */
/* Intro split layout (desktop) */
.intro-split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}

.intro-copy {
  flex: 1 1 55%;
  min-width: 0;
}

.intro-media {
  flex: 1 1 45%;
  display: flex;
  justify-content: flex-end;
}

.intro-media img {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}
@media (max-width: 800px) {
  .grid {
    grid-template-columns: 1fr;
  }

  .links a {
    margin-left: 12px;
  }

  .links-grid {
    grid-template-columns: 1fr;
  }

  .video-grid {
    grid-template-columns: 1fr;
  }
  /* Intro split layout (mobile) */
.intro-split {
  flex-direction: column;
  align-items: flex-start;
}

.intro-media {
  width: 100%;
  justify-content: center;
  margin-top: 18px;
}

.intro-media img {
  max-width: 520px;
}
  
}