/* ============================================================
   Podium eSports — styles.css
   ============================================================ */

:root {
  --dark: #090b0b;
  --dark-2: #151515;
  --dark-offering: #121515;
  --light: #efeee9;
  --accent: #c6f24e;
  --accent-dark: #b6e23c;
  --text-on-dark: #f5f5f5;
  --muted-on-dark: #8f8f8f;
  --text-on-light: #111111;
  --muted-on-light: #6f6f69;
  --border-dark: rgba(255, 255, 255, 0.14);
  --border-light: rgba(0, 0, 0, 0.22);

  --push-distance: 280px;
  --header-h: 78px;

  --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Helvetica Neue", Helvetica, Arial, "Archivo", sans-serif;
  --font-serif: Georgia, "Times New Roman", "Times", serif;
}

/* ---------- Reset / base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background: var(--dark);
  color: var(--text-on-dark);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; }

.container {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 48px;
}

/* ---------- Section backgrounds ---------- */
/* position:relative makes each section the positioning context for its
   page-index number, so the number lands in the section's bottom-right
   corner (below its content) rather than at the content block's bottom. */
.section-dark  { background: var(--dark);  color: var(--text-on-dark); position: relative; }
.section-light { background: var(--light); color: var(--text-on-light); position: relative; }
.section-accent{ background: var(--accent); color: var(--dark); position: relative; }

/* ---------- Small labels ---------- */
.kicker,
.section-tag {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.section-tag { color: var(--text-on-light); margin-bottom: 56px; }
.section-tag--accent { color: var(--accent); }

/* ---------- Display headings ---------- */
.section-title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.02em;
  font-size: clamp(2.4rem, 6.1vw, 5.15rem);
}
.accent { color: var(--accent); }

/* ---------- Page index numbers ---------- */
.page-index {
  position: absolute;
  /* Anchored to the section (full width) but kept aligned to the centered
     content column's right edge via calc, so it clears the section's bottom
     padding while staying in line with the content. */
  right: max(48px, calc((100% - 1600px) / 2 + 48px));
  bottom: 28px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--muted-on-dark);
}
.page-index--dark { color: rgba(11, 11, 11, 0.55); }

/* ============================================================
   BRAND / LOGO
   ============================================================ */
.brand { display: inline-flex; align-items: center; gap: 14px; }
.brand__mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
  transition: background 0.3s ease;
}
.brand__p {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  color: var(--dark);
  transform: translateY(-1px);
  transition: color 0.3s ease;
}
.brand__name {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.01em;
  font-size: 20px;
  text-transform: uppercase;
  color: var(--accent);
  transition: color 0.3s ease;
}
.brand__accent { color: var(--accent); text-transform: none; transition: color 0.3s ease; }

/* ============================================================
   PAGE WRAPPER (push target)
   ============================================================ */
.page {
  position: relative;
  min-height: 100vh;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
/* NOTE: no `will-change`/`transform` here while closed — an active transform
   or will-change would make `.page` the containing block for the fixed header
   and break its sticky positioning. The transform is applied only when open. */
body.nav-open .page { transform: translateX(calc(var(--push-distance) * -1)); }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  z-index: 50;
  background: rgba(11, 11, 11, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-dark);
  transition: background 0.3s ease, border-color 0.3s ease;
}
.site-header.scrolled {
  background: rgba(11, 11, 11, 0.94);
}

/* Adaptive header when overlapping a light / lime section */
.site-header.on-light {
  background: rgba(239, 238, 233, 0.88);
  border-bottom-color: rgba(0, 0, 0, 0.10);
}
.site-header.on-light .brand__mark { background: var(--dark); }
.site-header.on-light .brand__p { color: var(--accent); }
.site-header.on-light .brand__name { color: var(--text-on-light); }
.site-header.on-light .brand__accent { color: var(--text-on-light); }
.site-header.on-light .nav-desktop a { color: var(--text-on-light); }
.site-header.on-light .nav-desktop a:hover { color: var(--accent-dark); }
.site-header.on-light .nav-toggle span { background: var(--dark); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.nav-desktop { display: flex; gap: 56px; }
.nav-desktop a {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-on-dark);
  position: relative;
  padding: 4px 0;
  transition: color 0.2s ease;
}
.nav-desktop a::after {
  content: "";
  position: absolute; left: 0; bottom: -3px;
  width: 0; height: 2px;
  background: var(--accent);
  transition: width 0.25s ease;
}
.nav-desktop a:hover { color: var(--accent); }
.nav-desktop a:hover::after { width: 100%; }

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  background: none; border: none;
  cursor: pointer;
  z-index: 60;
}
.nav-toggle span {
  display: block;
  width: 26px; height: 2px;
  background: var(--text-on-dark);
  transition: transform 0.3s ease, opacity 0.2s ease;
}
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   OFF-CANVAS PUSH MENU
   ============================================================ */
.offcanvas {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: var(--push-distance);
  background: var(--dark-2);
  border-left: 1px solid var(--border-dark);
  padding: calc(var(--header-h) + 28px) 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 40;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
body.nav-open .offcanvas { transform: translateX(0); }

.offcanvas__link {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 26px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-dark);
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.offcanvas__link:hover { color: var(--accent); padding-left: 8px; }
.offcanvas__mail {
  margin-top: auto;
  color: var(--accent);
  font-size: 14px;
  word-break: break-all;
}

/* Overlay */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 30;
  opacity: 0;
  transition: opacity 0.3s ease;
}
body.nav-open .overlay { display: block; opacity: 1; }

/* ============================================================
   01 · HERO
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 46%, rgba(198, 242, 78, 0.05), transparent 46%),
    var(--dark);
}
.hero__inner {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* Vertical only — keep the horizontal padding from .container so the hero
     content's left edge aligns with every other section. */
  padding-top: calc(var(--header-h) + 44px);
  padding-bottom: 64px;
  z-index: 2;
}
.kicker { color: var(--muted-on-dark); display: inline-flex; align-items: center; letter-spacing: 0.16em; }
.kicker__dot {
  width: 9px; height: 9px;
  background: var(--accent);
  border-radius: 50%;
  margin-right: -3px; /* overlaps the leading "P" like the spec */
}

.hero__main {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  gap: 36px;
  padding: 40px 0;
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.035em;
  font-size: clamp(2.5rem, 8vw, 8.4rem);
  color: var(--text-on-dark);
}
.hero__lead {
  position: relative;
  z-index: 2;
  color: var(--text-on-dark);
  font-size: 1.05rem;
  line-height: 1.5;
  max-width: 360px;
}
.hero__foot { display: flex; align-items: center; }
.hero__explore {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
  transition: color 0.2s ease, letter-spacing 0.2s ease;
}
.hero__explore:hover { color: var(--accent); letter-spacing: 0.26em; }

/* Concentric rings wrapping the lead text */
.hero__ring-group { position: relative; }
.ring {
  display: none; /* shown on larger screens */
  position: absolute;
  border: 1px solid rgba(198, 242, 78, 0.32);
  border-radius: 50%;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
}
.ring--1 { width: 100%; height: 100%; border-color: rgba(198, 242, 78, 0.34); }
.ring--2 { width: 57%; height: 57%; border-color: rgba(198, 242, 78, 0.55); }

/* ============================================================
   02 · ABOUT
   ============================================================ */
.about { padding: 110px 0 100px; }
.about .section-title { color: var(--text-on-light); }
.about__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
.about__lead {
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.35;
  color: var(--text-on-light);
  margin-bottom: 28px;
}
.about__text { color: var(--muted-on-light); font-size: 1rem; line-height: 1.55; }

/* Stats bar */
.stats { padding: 84px 0 96px; }
.stats__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
.stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
}
.stat__number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.8rem, 7vw, 4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--dark);
}
.stat__label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dark);
}

/* ============================================================
   03 · VALUES
   ============================================================ */
.values { padding: 100px 0; }
.values .section-title { color: var(--text-on-dark); }
.values__head { margin-bottom: 88px; }
.values__intro {
  color: var(--muted-on-dark);
  max-width: 360px;
  margin-top: 18px;
  font-size: 1rem;
  line-height: 1.5;
}
.values__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.value-card {
  border: 1px solid var(--border-dark);
  padding: 34px 30px;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.value-card:hover {
  border-color: var(--accent);
  background: rgba(198, 242, 78, 0.04);
  transform: translateY(-4px);
}
.value-card__num {
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
}
/* Fixed offset (not bottom-anchored) so every card title starts at the same
   vertical baseline regardless of title/body line count, matching the spec. */
.value-card__body { margin-top: 190px; }
.value-card__title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.7rem;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}
.value-card__text { color: var(--muted-on-dark); font-size: 0.95rem; line-height: 1.5; }

/* ============================================================
   04 · OFFERING
   ============================================================ */
/* Offering uses a distinct, slightly lighter dark than the other sections (per spec) */
.offering { padding: 100px 0; background: var(--dark-offering); }
.offering .section-title { color: var(--text-on-dark); }
.offering__head { margin-bottom: 88px; }
.offering__intro {
  color: var(--muted-on-dark);
  max-width: 380px;
  margin-top: 18px;
  font-size: 1rem;
  line-height: 1.5;
}
.offering__grid {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--border-dark);
}
.offer-col { padding: 40px 0 8px; }
.offer-col__tag {
  display: flex;
  align-items: center;
  gap: 46px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.offer-col__num { color: var(--muted-on-dark); }
.offer-col__label { color: var(--accent); }
.offer-col__title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.45rem;
  letter-spacing: -0.02em;
  margin-bottom: 30px;
}
.offer-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 16px;
  color: var(--muted-on-dark);
  font-size: 0.95rem;
}
.offer-list li::before {
  content: "+";
  position: absolute; left: 0; top: 0;
  color: var(--accent);
  font-weight: 700;
}

/* ============================================================
   05 · MISSION
   ============================================================ */
.mission { padding: 110px 0; }
.mission__quote {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-size: clamp(1.6rem, 4.4vw, 3.15rem);
  color: var(--text-on-light);
}

/* CTA / Contact */
.cta { padding: 90px 0 40px; }
.cta__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: end;
  margin-bottom: 80px;
}
.cta__title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.03em;
  font-size: clamp(2.3rem, 5.6vw, 4rem);
  color: var(--dark);
}
.cta__label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dark);
  margin-bottom: 16px;
}
.cta__mail {
  display: inline-block;
  font-size: clamp(1.15rem, 3vw, 1.7rem);
  font-weight: 700;
  color: var(--dark);
  border-bottom: 2px solid var(--dark);
  padding-bottom: 6px;
  transition: opacity 0.2s ease;
  word-break: break-all;
}
.cta__mail:hover { opacity: 0.6; }

.cta__foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 40px;
}
.cta__wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: 17px;
  color: var(--dark);
  text-transform: none;
}
.cta__wordmark .em-e { text-transform: none; }
/* .cta__index uses the shared .page-index absolute corner placement */

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet+ */
@media (min-width: 720px) {
  .stats__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
  }
  .stat { padding: 0 48px; min-height: 300px; gap: 96px; }
  .stat + .stat { border-left: 1px solid var(--border-light); }
  .stat:first-child { padding-left: 0; }

  .values__grid { grid-template-columns: repeat(2, 1fr); }

  /* padding-top pushes all columns (and their left dividers) below the
     horizontal rule so the vertical lines don't touch it (per spec). */
  .offering__grid { grid-template-columns: repeat(3, 1fr); padding-top: 36px; }
  .offer-col { padding: 16px 44px 8px; }
  .offer-col + .offer-col { border-left: 1px solid var(--border-dark); }
  .offer-col:first-child { padding-left: 0; }
  .offer-col:last-child { padding-right: 0; }
}

/* Desktop */
@media (min-width: 940px) {
  .nav-toggle { display: none; }

  .hero__main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    gap: 0;
  }
  /* The headline spans wide; the ring group is overlaid on the right, centered
     on the "THE MOMENT" line, so the outer ring's left edge meets the headline
     period and the lead text nests inside the inner ring (per the spec). */
  .hero__ring-group {
    position: absolute;
    top: 50%;
    right: 4%;
    transform: translateY(-50%);
    width: min(540px, 44vw);
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    margin: 0;
  }
  .hero__ring-group .ring { display: block; }
  .hero__lead {
    max-width: 320px;
    margin: 0;
    text-align: left;
  }

  .about__grid {
    grid-template-columns: 1.5fr 1fr;
    gap: 64px;
    align-items: start;
  }

  .values__head,
  .offering__head {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 60px;
    align-items: start;
  }
  .values__intro,
  .offering__intro { margin-top: 8px; justify-self: start; }

  .values__grid { grid-template-columns: repeat(4, 1fr); }

  /* Keep offering column titles on a single line, as in the spec */
  .offer-col__title { white-space: nowrap; }

  .cta__inner {
    grid-template-columns: 1.5fr 1fr;
    gap: 60px;
    margin-bottom: 100px;
  }
}

/* Show hamburger only below desktop */
@media (max-width: 939px) {
  .nav-desktop { display: none; }
  .nav-toggle { display: flex; }
}

/* Hide off-canvas machinery on desktop */
@media (min-width: 940px) {
  .offcanvas, .overlay { display: none !important; }
  body.nav-open .page { transform: none; }
}

/* Narrow phones */
@media (max-width: 520px) {
  .container { padding: 0 22px; }
  .page-index { right: 22px; }
  .stat { padding: 0; }
  .stat + .stat { border-left: none; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; }
}