@font-face {
  font-family: 'WildRune';
  src: url('assets/fonts/WildRune.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Innerspace';
  src: url('assets/fonts/Innerspace.ttf') format('truetype');
  font-display: swap;
}

:root {
  /* Same tokens as the live game (frontend-source/src/index.css) — this
     site is meant to read as a continuation of the app, not a separate
     brand, so the palette/fonts are copied, not reinvented. */
  --eco-primary: #71cfaf;
  --eco-secondary: #a7d83c;
  --eco-warm: #ef9e29;
  --eco-black: #2f2929;
  --eco-white: #fdfbee;
  --ink-1: #2f2929;
  --ink-2: #46392a;
  --surface: #fbf1cd;
  --surface-2: #fffdf3;
  --line: rgba(47, 41, 41, 0.15);
  --shadow: 0 20px 44px rgba(13, 31, 22, 0.16);
  --radius-xl: 24px;
  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --maxw: 1160px;
  --font-display: 'WildRune', Georgia, serif;
  --font-body: 'Innerspace', system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink-1);
  font-family: var(--font-body);
  word-spacing: 10px;
  line-height: 1.55;
  background:
    radial-gradient(circle at 12% 4%, rgba(113, 207, 175, 0.22), transparent 22%),
    radial-gradient(circle at 86% 16%, rgba(167, 216, 60, 0.16), transparent 20%),
    linear-gradient(180deg, #fdfbee 0%, #f3ecd3 100%);
  min-height: 100vh;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

.section-pad {
  width: min(100% - 2.2rem, var(--maxw));
  margin: 0 auto;
  padding: 4.5rem 0;
}

.site-header {
  width: min(100% - 2rem, var(--maxw));
  margin: 1.1rem auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.1rem;
  position: sticky;
  top: 0.7rem;
  z-index: 30;
  backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(219, 232, 189, 0.8);
  border-radius: 999px;
  padding: 0.55rem 0.75rem;
  box-shadow: 0 8px 30px rgba(39, 48, 17, 0.1);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  min-width: 0;
}

.brand-mark {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 6px;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.brand-text {
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.main-nav a {
  text-decoration: none;
  font-size: 0.96rem;
  color: var(--ink-2);
  padding: 0.5rem 0.8rem;
  border-radius: 999px;
}

.main-nav a:hover,
.main-nav a:focus-visible {
  background: rgba(167, 216, 60, 0.23);
  outline: none;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
}

.menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  place-items: center;
  padding: 0;
}

.menu-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink-1);
  margin: 3px auto;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(100vh - 6.4rem);
  border-radius: var(--radius-xl);
  overflow: hidden;
  isolation: isolate;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(9, 20, 15, 0.94) 0%, rgba(9, 20, 15, 0.8) 55%, rgba(9, 20, 15, 0.92) 100%);
  z-index: -1;
}

.hero-video {
  opacity: 0.55;
}

.hero .eyebrow {
  color: var(--eco-white);
  background: rgba(113, 207, 175, 0.25);
  border-color: rgba(113, 207, 175, 0.45);
}

.hero h1,
.hero-subtitle {
  color: var(--eco-white);
}

.hero-subtitle {
  margin-top: 0.6rem;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1vw + 0.9rem, 1.35rem);
  opacity: 0.92;
}

.hero-content {
  max-width: 62ch;
  padding: 2.5rem;
}

.hero-lede {
  color: rgba(253, 251, 238, 0.86) !important;
}

.eyebrow {
  display: inline-block;
  margin: 0 0 0.9rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #31421a;
  background: rgba(167, 216, 60, 0.28);
  border: 1px solid rgba(136, 194, 63, 0.45);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.15;
  font-family: var(--font-display);
  word-spacing: normal;
}

h1 {
  font-size: clamp(2rem, 3vw + 1rem, 4.2rem);
  letter-spacing: -0.02em;
  max-width: 14ch;
}

h2 {
  font-size: clamp(1.4rem, 2vw + 1rem, 2.45rem);
  letter-spacing: -0.01em;
}

h3 {
  font-size: clamp(1.08rem, 1.4vw + 0.8rem, 1.4rem);
}

p {
  margin: 0;
}

.hero-content > p {
  margin-top: 1.1rem;
  max-width: 56ch;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.72rem;
  margin-top: 1.5rem;
}

.btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0.7rem 1.2rem;
  font-weight: 600;
  border: 1px solid transparent;
}

.btn-primary {
  background: linear-gradient(130deg, var(--eco-primary), var(--eco-secondary));
  color: var(--eco-black);
  box-shadow: 0 8px 24px rgba(136, 194, 63, 0.34);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  transform: translateY(-1px);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.86);
  border-color: var(--line);
}


.metrics {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 1rem;
}

.metric-card,
.feature,
.partner-card {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.metrics article:first-child {
  padding: 1.1rem;
}

.metric-card {
  padding: 1.1rem;
}

.metric {
  font-size: 1.32rem;
  font-weight: 700;
  margin-bottom: 0.45rem;
}

.section-heading {
  max-width: 66ch;
  margin-bottom: 1.35rem;
}

.grid-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}

.feature {
  padding: 1.2rem;
}

.feature ul {
  margin: 0.9rem 0 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.45rem;
}

.mini-visual {
  margin-top: 1rem;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
}

.mini-visual--contain {
  background: linear-gradient(180deg, rgba(113, 207, 175, 0.14), rgba(167, 216, 60, 0.08));
}

.mini-visual--contain img {
  object-fit: contain !important;
  padding: 0.6rem 0;
}

.mini-visual img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}

.partner-banner {
  margin: 0 0 1.1rem;
  padding: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  height: 280px;
}

.partner-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ecoworld {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 2rem;
  align-items: center;
}

.story p {
  margin-top: 0.8rem;
  max-width: 72ch;
}

.mentor-quote {
  margin: 1.4rem 0 0;
  padding: 1rem 1.2rem;
  border-left: 3px solid var(--eco-primary);
  background: rgba(113, 207, 175, 0.1);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.mentor-quote p {
  font-style: italic;
  color: var(--ink-2);
}

.mentor-attribution {
  margin-top: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.mentor-attribution img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface);
}

.mentor-attribution cite {
  font-style: normal;
  font-size: 0.9rem;
  color: var(--ink-2);
}

.story-art {
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-2);
  box-shadow: var(--shadow);
  padding: 1rem;
}

.story-art img {
  width: 100%;
  height: 100%;
  max-height: 420px;
  object-fit: contain;
  display: block;
}

.timeline {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.82rem;
}

.timeline li {
  position: relative;
  padding: 1rem 1rem 1rem 1.2rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--shadow);
}

.timeline li::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  border-radius: 999px;
  background: linear-gradient(var(--eco-primary), var(--eco-secondary));
}

.timeline p {
  margin-top: 0.5rem;
}

.partner-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.contact {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  padding: 2.5rem 1.5rem;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(244, 249, 232, 0.74)),
    radial-gradient(circle at top left, rgba(167, 216, 60, 0.2), transparent 30%);
}

.contact-content {
  max-width: 60ch;
  margin: 0 auto;
}

.contact-bg {
  position: absolute;
  inset: 0;
  background: url('assets/game/forest-clearing.png') center / cover no-repeat;
  opacity: 0.16;
  z-index: 0;
  pointer-events: none;
  border-radius: var(--radius-xl);
}

.contact > * {
  position: relative;
  z-index: 1;
}

.contact-layout {
  display: flex;
  justify-content: center;
  margin-top: 1.35rem;
}

.contact-form {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 1.6rem;
  display: grid;
  gap: 1rem;
  max-width: 560px;
  width: 100%;
  text-align: left;
}

.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-row {
  display: grid;
  gap: 0.35rem;
}

.form-row label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-2);
}

.form-row input,
.form-row textarea {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--ink-1);
  background: #fff;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  resize: vertical;
}

.form-row input:focus,
.form-row textarea:focus {
  border-color: var(--eco-secondary);
  box-shadow: 0 0 0 3px rgba(136, 194, 63, 0.2);
}

.form-row input:invalid:not(:placeholder-shown),
.form-row textarea:invalid:not(:placeholder-shown) {
  border-color: #b44;
}

.form-submit {
  width: 100%;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  border: none;
}

.form-note {
  font-size: 0.82rem;
  color: #445532;
  text-align: center;
  margin: 0;
}

.form-status {
  margin: 0;
  font-size: 0.88rem;
  text-align: center;
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.7rem;
  border: 1px solid transparent;
}

.form-status.success {
  color: #255d10;
  background: rgba(136, 194, 63, 0.14);
  border-color: rgba(136, 194, 63, 0.35);
}

.form-status.error {
  color: #8c2f2f;
  background: rgba(255, 232, 232, 0.95);
  border-color: rgba(177, 76, 76, 0.4);
}

.form-success {
  font-size: 0.9rem;
  color: #2e6b10;
  font-weight: 600;
  text-align: center;
  background: rgba(136, 194, 63, 0.14);
  border: 1px solid rgba(136, 194, 63, 0.35);
  border-radius: var(--radius-sm);
  padding: 0.65rem;
  margin: 0;
}

.partner-card {
  padding: 1rem;
}

.partner-card p {
  margin-top: 0.55rem;
}

.small {
  font-size: 0.88rem;
  color: #445532;
}

/* --- Final CTA: bright closing pitch, mentors flanking the button ---
   Grid (not flex) on purpose: explicit auto|1fr|auto columns can't
   collapse into a stacked column the way flex items can when their
   percentage-based max-width/intrinsic sizing gets ambiguous. */
.final-cta {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
  align-items: end;
  justify-items: center;
  border-radius: var(--radius-xl);
  min-height: 360px;
  padding: 2.5rem 1rem 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(113, 207, 175, 0.35), transparent 60%),
    linear-gradient(180deg, #16311f 0%, #0d1f16 100%);
}

.final-cta-content {
  position: relative;
  z-index: 2;
  grid-column: 2;
  max-width: 46ch;
  text-align: center;
  padding-bottom: 2.5rem;
}

.final-cta-content h2 {
  color: #fdfbee;
  font-size: clamp(1.8rem, 2.4vw + 1rem, 2.8rem);
  text-shadow: 0 0 24px rgba(113, 207, 175, 0.55);
}

.final-cta-content p {
  color: rgba(253, 251, 238, 0.85);
  margin-top: 0.8rem;
}

.btn-cta {
  display: inline-block;
  margin-top: 1.4rem;
  font-size: 1.05rem;
  padding: 0.9rem 2.2rem;
  box-shadow: 0 0 32px rgba(167, 216, 60, 0.5);
}

.final-cta-mentor {
  /* Explicit width (not width:auto) — the image is portrait (~2:3), and
     inside a `minmax(0, 1fr)` grid column an unloaded lazy-loaded img with
     no width to go on has no intrinsic size to lay out the track with.
     That leaves the column at 0 width, which in turn keeps the image's
     rendered box out of the viewport intersection that would trigger its
     lazy-load — a deadlock where the mentors never appear. A fixed width
     sidesteps it. Height is 100% of the card itself (position: absolute,
     top/bottom: 0 on the desktop rule below) rather than of the grid row,
     so the figures always span the card's full height regardless of how
     tall the text content next to them ends up being. */
  z-index: 1;
  width: 227px;
  max-width: none;
  object-fit: contain;
  object-position: bottom;
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.35));
}

@media (min-width: 621px) {
  .final-cta-mentor {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%;
    grid-column: unset;
  }

  .final-cta-mentor--left {
    left: -0.5rem;
  }

  .final-cta-mentor--right {
    right: -0.5rem;
    transform: scaleX(-1);
  }
}

@media (max-width: 860px) {
  .final-cta-mentor {
    width: 147px;
  }
}

@media (max-width: 620px) {
  .final-cta {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "content content"
      "left right";
    padding-top: 2rem;
  }
  .final-cta-content {
    /* No grid-column here: the desktop rule's grid-column: 2 is already
       overridden by grid-area, and re-setting grid-column: auto AFTER
       grid-area silently undoes the area's two-column span — leaving the
       content (and the full-width CTA inside it) squeezed into a single
       1fr column, i.e. half the card. */
    grid-area: content;
    padding-bottom: 1rem;
    /* 95%, not 100% — the text and the full-width CTA below should keep a
       small breathing margin from the card edges (per design feedback). */
    width: 95%;
  }
  .final-cta-mentor {
    grid-column: auto;
    width: 107px;
    height: 160px;
  }
  .final-cta-mentor--left {
    grid-area: left;
    margin-right: 0;
  }
  .final-cta-mentor--right {
    grid-area: right;
    margin-left: 0;
  }
  /* On a phone the final CTA should read as one big full-width action
     button, not a floating pill. */
  .btn-cta {
    display: flex;
    width: 100%;
    box-sizing: border-box;
  }
}

.site-footer {
  width: min(100% - 2.2rem, var(--maxw));
  margin: 1rem auto 1.8rem;
  border: 1px solid var(--line);
  background: rgba(255, 253, 243, 0.9);
  border-radius: 22px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.2rem;
  font-size: 0.85rem;
  color: var(--ink-2);
}

.site-footer a {
  text-decoration: none;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  background: rgba(113, 207, 175, 0.22);
  outline: none;
}

.footer-links {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

/* --- Feature grid (Block E) --- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.feature-card {
  background: rgba(255, 253, 243, 0.92);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 1.2rem;
}

.feature-card h3 {
  color: var(--ink-1);
}

.feature-card p {
  margin-top: 0.5rem;
  color: var(--ink-2);
}

.partners-body {
  margin-top: 0.6rem;
  max-width: 68ch;
  color: var(--ink-2);
}

/* --- Language switch: collapsed by default, opens as an overlay so it
   never pushes the header's other items around --- */
.lang-switch {
  position: relative;
  flex-shrink: 0;
}

.lang-toggle {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  border: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: 999px;
  padding: 0.4rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-2);
  cursor: pointer;
}

.lang-toggle::after {
  content: "▾";
  font-size: 0.65rem;
  opacity: 0.7;
}

.lang-menu {
  display: none;
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  flex-direction: column;
  gap: 0.15rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.3rem;
  background: var(--surface-2);
  box-shadow: var(--shadow);
  z-index: 50;
  min-width: 4.5rem;
}

.lang-menu.open {
  display: flex;
}

.lang-menu button {
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.4rem 0.6rem;
  border-radius: 10px;
  cursor: pointer;
  color: var(--ink-2);
  text-align: left;
}

.lang-menu button.active {
  background: var(--eco-primary);
  color: var(--eco-black);
}

.nav-play {
  background: var(--eco-primary) !important;
  color: var(--eco-black) !important;
  font-weight: 700;
  margin-left: 0.3rem;
}

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.7s ease;
}

.reveal.show {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1080px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 2.8rem;
  }

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

  .metrics article:first-child {
    grid-column: 1 / -1;
  }

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

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

  .story-art {
    order: -1;
    max-width: 320px;
    margin: 0 auto;
  }

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

/* Six nav links + a play button + the language switch no longer fit inline
   next to the wordmark past this width — collapse into the hamburger menu
   well before the general small-screen breakpoint below, instead of
   letting the nav text overflow and overlap the logo. */
@media (max-width: 1300px) {
  .menu-toggle {
    display: grid;
  }

  .main-nav {
    position: absolute;
    top: calc(100% + 0.6rem);
    left: 0;
    right: 0;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 253, 243, 0.97);
    box-shadow: var(--shadow);
    padding: 0.45rem;
    display: grid;
    gap: 0.25rem;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .main-nav.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .main-nav a {
    padding: 0.75rem 0.8rem;
    border-radius: 10px;
  }

  .nav-play {
    margin-left: 0;
  }
}

@media (max-width: 760px) {
  .section-pad {
    width: min(100% - 1.2rem, var(--maxw));
    padding: 3.2rem 0;
  }

  .site-header {
    width: min(100% - 1rem, var(--maxw));
    border-radius: 20px;
    top: 0.5rem;
    padding: 0.5rem;
  }

  .brand-text {
    font-size: 0.98rem;
  }

  .partner-banner {
    height: 200px;
  }

  .grid-two,
  .partner-grid,
  .metrics,
  .feature-grid {
    grid-template-columns: 1fr;
  }

  .lang-switch {
    order: 3;
  }

  h1 {
    max-width: 100%;
  }

  .site-footer {
    width: min(100% - 1.2rem, var(--maxw));
    border-radius: 16px;
  }
}