/* Homepage, layout aligned to funder-games-home-mockup.png */

/* Contain hero/logo filter glow so horizontal scroll metrics stay viewport-wide (Chromium includes blur in overflow). */
.page-home main {
  overflow-x: clip;
}

/* Nav link spacing matches styles.css (.nav-links) on every route so the header doesn’t reflow when visiting /. */

/* Hero vertical rhythm: tune these; they apply reliably (not tied to mark size alone) */
.hero-mockup {
  /* Narrow screens: extra top padding so mark + rings clear the nav (see --hero-mobile-vertical-nudge) */
  --hero-mobile-vertical-nudge: 0px;
  --hero-outer-pad-top: calc(clamp(1rem, 3.2vw, 2.5rem) + var(--hero-mobile-vertical-nudge));

  /* Half gap so hero → first section matches the same rhythm as section → section */
  --hero-outer-pad-bottom: calc(var(--section-y-gap) / 2);

  /* Shared with .hero-mockup-rings (sibling) so ring focal tracks the mark, not % of full section height. */
  --hero-title-fs: clamp(1.75rem, 4.6vw, 2.75rem);
  --hero-title-lh: 1.1;
  --hero-title-box: calc(var(--hero-title-fs) * var(--hero-title-lh));
  --hero-tagline-fs: max(0.8125rem, calc(var(--hero-title-fs) / 3));

  /*
    Mark size: title-relative caps how small it gets on phones; vw floor lets it scale up on
    desktop (otherwise 4–5× a ~2.5rem title stays ~12rem / ~190px, reads “tiny”).
  */
  --hero-mark-size: min(max(calc(var(--hero-title-box) * 6), min(54vw, 38rem)), min(98vw, 64rem));

  /* Space directly above / below the logo image (inside .hero-mockup-mark-wrap) */
  --hero-logo-pad-top: clamp(0.35rem, 1.1vw, 0.9rem);
  --hero-logo-pad-bottom: clamp(0.08rem, 0.35vw, 0.22rem);

  /*
    logo_flat_white.svg is a full square viewBox; the mark does not fill the canvas, so there is
    transparent padding (especially below). Overlap pulls the wordmark up without clipping art.
    Increase (e.g. 0.35–0.5) if a gap remains; decrease if text touches the mark.
  */
  --hero-logo-svg-overlap: 0.2;

  /*
    Ring center in the rings layer’s box (hero padding box): section top padding + mark-wrap top pad +
    optical center within the square mark asset (slightly above 50% reads centered on the glyph).
  */
  --hero-rings-focal-y: calc(
    var(--hero-outer-pad-top) + var(--hero-logo-pad-top) + var(--hero-mark-size) * 0.455
  );

  position: relative;
  padding: var(--hero-outer-pad-top) 0 var(--hero-outer-pad-bottom);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.hero-mockup-rings {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    repeating-radial-gradient(
      circle at 50% var(--hero-rings-focal-y),
      transparent 0,
      transparent 48px,
      rgba(255, 255, 255, 0.04) 48px,
      rgba(255, 255, 255, 0.04) 49px,
      transparent 50px,
      transparent 112px
    ),
    repeating-radial-gradient(
      circle at 50% var(--hero-rings-focal-y),
      transparent 0,
      transparent 112px,
      color-mix(in srgb, var(--primary) 14%, transparent) 112px,
      color-mix(in srgb, var(--primary) 14%, transparent) 113px,
      transparent 114px,
      transparent 200px
    );
  opacity: 0.85;
  mask-image: radial-gradient(ellipse 85% 70% at 50% var(--hero-rings-focal-y), black 20%, transparent 72%);
}

.hero-mockup-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: min(64rem, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* At least one screen tall; can grow so headline + scroll cue are never clipped */
.hero-mockup-viewport {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: calc(
    100svh - var(--site-nav-min-height) - var(--hero-outer-pad-top) - var(--hero-outer-pad-bottom) -
      env(safe-area-inset-bottom, 0px)
  );
  overflow: visible;
  flex-shrink: 0;
}

.hero-mockup-viewport-top {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.hero-mockup-viewport-spacer {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

.hero-mockup-viewport-bottom {
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;

  /* DOM: h1 then link; reverse shows scroll above headline */
  gap: clamp(1.1rem, 3.25vw, 2.35rem);
  margin-top: clamp(1.35rem, 4.5vh, 3.25rem);
  padding-bottom: clamp(0.65rem, 2.5vh, 1.35rem);
  container-type: inline-size;
  container-name: hero-fold;
}

.hero-mockup-mark-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  box-sizing: content-box;
  margin: 0;
  margin-bottom: calc(var(--hero-mark-size) * -1 * var(--hero-logo-svg-overlap));

  /* Horizontal inset still scales with mark; vertical uses --hero-logo-pad-* so edits are visible */
  padding: var(--hero-logo-pad-top) calc(var(--hero-mark-size) * 0.02) var(--hero-logo-pad-bottom);
}

/* Flat white SVG: crisp edge + charcoal depth + teal/gold ambient (hero-only usage) */
.hero-mockup-mark {
  display: block;
  width: var(--hero-mark-size);
  max-width: 100%;
  height: auto;
  aspect-ratio: 1;
  filter: drop-shadow(0 0 0.75px rgba(255, 255, 255, 0.5)) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35))
    drop-shadow(0 8px 28px rgba(0, 0, 0, 0.42))
    drop-shadow(0 0 36px color-mix(in srgb, var(--primary) 38%, transparent))
    drop-shadow(0 0 72px color-mix(in srgb, var(--primary) 18%, transparent))
    drop-shadow(0 0 96px color-mix(in srgb, var(--gold) 12%, transparent));
}

/* Display type: funder-games Regular.otf (ttf fallback) is lowercase a–z only (see styles.css :root) */
.hero-mockup-wordmark {
  margin: 0 auto clamp(0.5rem, 1.5vw, 1rem);
  max-width: min(100%, 52rem);
  font-family: var(--font-display);
  text-transform: lowercase;
  font-weight: 700;
  letter-spacing: var(--display-letter-spacing);
  font-size: clamp(1.7rem, 5vw, 3.35rem);
  line-height: 1.05;
  text-align: center;
  background: linear-gradient(180deg, var(--silver-top) 0%, var(--silver-mid) 45%, var(--silver-bottom) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

/* Hero headline: funder-games display (lowercase a–z only; matches wordmark treatment) */
.page-home h1.hero-mockup-headline {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 100%;
  width: 100%;
  padding-inline: clamp(0.35rem, 2vw, 1rem);
  font-family: var(--font-display);
  font-weight: 700;
  font-style: normal;
  text-transform: lowercase;
  white-space: nowrap;
  overflow-x: visible;
  text-align: center;
  letter-spacing: var(--display-letter-spacing);

  /* One line: scales with the hero-bottom container width (fallback clamp for older engines) */
  font-size: clamp(0.75rem, 2.75vw + 0.38rem, 2.55rem);
  line-height: 1.1;
  word-spacing: normal;

  /* Heavy teal-forward fill; slight highlight on top, near-primary at bottom */
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--primary) 52%, var(--silver-top)) 0%,
    color-mix(in srgb, var(--primary) 76%, var(--silver-mid)) 45%,
    color-mix(in srgb, var(--primary) 96%, var(--primary-hover)) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

@supports (font-size: 1cqi) {
  .page-home h1.hero-mockup-headline {
    font-size: clamp(0.75rem, calc(0.28rem + 4cqi), 2.55rem);
  }
}

/* Narrow viewports: single-line nowrap overflows; allow balanced wrap without changing desktop hero. */
@media (max-width: 740px) {
  .hero-mockup {
    --hero-mobile-vertical-nudge: calc(var(--hero-mark-size) * 0.58);
  }

  .page-home h1.hero-mockup-headline {
    white-space: normal;
    text-wrap: balance;
    line-height: 1.12;
  }
}

.hero-mockup-sub {
  margin: clamp(1.15rem, 3vw, 1.85rem) auto 0;
  max-width: min(36rem, 100%);
  font-size: clamp(0.9rem, 1.35vw, 1.05rem);
  line-height: 1.55;
  font-weight: 500;
  color: var(--muted);
  text-transform: none;
}

.hero-mockup-ideal {
  margin: clamp(0.85rem, 2vw, 1.15rem) auto 0.65rem;
  max-width: min(36rem, 100%);
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: color-mix(in srgb, var(--gold) 85%, var(--text));
}

.hero-proof-list {
  margin: 0;
  padding-left: 1.15rem;
  max-width: min(40rem, 100%);
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  line-height: 1.55;
  color: var(--muted);
}

.hero-proof-list li {
  margin-bottom: 0.5rem;
}

.proof-week-outro {
  margin: 1.15rem 0 0;
  max-width: min(40rem, 100%);
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  line-height: 1.55;
  color: var(--muted);
}

/* Scroll reveals (armed via script.js): first-week, process, flagship, co-dev focus */
@media (prefers-reduced-motion: no-preference) {
  /* “What you get in the first week”: slide in from the right */
  .page-home .proof-week-section.scroll-reveal--armed:not(.is-in-view) .section-head,
  .page-home .proof-week-section.scroll-reveal--armed:not(.is-in-view) .hero-proof-list li,
  .page-home .proof-week-section.scroll-reveal--armed:not(.is-in-view) .proof-week-outro {
    opacity: 0;
    transform: translate3d(2.25rem, 0, 0);
  }

  .page-home .proof-week-section.scroll-reveal--armed .section-head,
  .page-home .proof-week-section.scroll-reveal--armed .hero-proof-list li,
  .page-home .proof-week-section.scroll-reveal--armed .proof-week-outro {
    transition:
      opacity 0.55s ease,
      transform 0.55s ease;
  }

  .page-home .proof-week-section.is-in-view .section-head {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.04s;
  }

  .page-home .proof-week-section.is-in-view .hero-proof-list li:nth-child(1) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.12s;
  }

  .page-home .proof-week-section.is-in-view .hero-proof-list li:nth-child(2) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.22s;
  }

  .page-home .proof-week-section.is-in-view .hero-proof-list li:nth-child(3) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.32s;
  }

  .page-home .proof-week-section.is-in-view .proof-week-outro {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.42s;
  }

  /* Horizontal slide widens document scrollWidth on narrow viewports; use vertical motion only. */
  @media (max-width: 740px) {
    .page-home .proof-week-section.scroll-reveal--armed:not(.is-in-view) .section-head,
    .page-home .proof-week-section.scroll-reveal--armed:not(.is-in-view) .hero-proof-list li,
    .page-home .proof-week-section.scroll-reveal--armed:not(.is-in-view) .proof-week-outro {
      transform: translate3d(0, 0.85rem, 0);
    }
  }

  /* “What to expect”: column 1 from bottom, 2 from top, 3 from bottom; staggered 1 → 2 → 3 */
  .page-home .process-expect-section.scroll-reveal--armed:not(.is-in-view) .section-head {
    opacity: 0;
  }

  .page-home .process-expect-section.scroll-reveal--armed:not(.is-in-view) .grid-3 > .card:nth-child(1) {
    opacity: 0;
    transform: translate3d(0, 1.5rem, 0);
  }

  .page-home .process-expect-section.scroll-reveal--armed:not(.is-in-view) .grid-3 > .card:nth-child(2) {
    opacity: 0;
    transform: translate3d(0, -1.5rem, 0);
  }

  .page-home .process-expect-section.scroll-reveal--armed:not(.is-in-view) .grid-3 > .card:nth-child(3) {
    opacity: 0;
    transform: translate3d(0, 1.5rem, 0);
  }

  .page-home .process-expect-section.scroll-reveal--armed .section-head {
    transition: opacity 0.48s ease;
  }

  .page-home .process-expect-section.scroll-reveal--armed .grid-3 > .card {
    transition:
      opacity 0.55s ease,
      transform 0.55s ease;
  }

  .page-home .process-expect-section.is-in-view .section-head {
    opacity: 1;
    transition-delay: 0s;
  }

  .page-home .process-expect-section.is-in-view .grid-3 > .card:nth-child(1) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0s;
  }

  .page-home .process-expect-section.is-in-view .grid-3 > .card:nth-child(2) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.2s;
  }

  .page-home .process-expect-section.is-in-view .grid-3 > .card:nth-child(3) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.4s;
  }

  /* Flagship project: headline → visual → copy ladder (recipe: weighty ease, tight child stagger) */
  .page-home .flagship-reveal {
    --flagship-ease: cubic-bezier(0.22, 1, 0.36, 1);
  }

  .page-home .flagship-reveal.scroll-reveal--armed:not(.is-in-view) > .section-head {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
  }

  .page-home .flagship-reveal.scroll-reveal--armed:not(.is-in-view) .games-flagship-visual {
    opacity: 0;
    transform: translate3d(0, 24px, 0) scale(0.985);
  }

  .page-home
    .flagship-reveal.scroll-reveal--armed:not(.is-in-view)
    .games-flagship-card
    .games-flagship-body
    > .hero-mockup-sub,
  .page-home .flagship-reveal.scroll-reveal--armed:not(.is-in-view) .games-flagship-meta,
  .page-home .flagship-reveal.scroll-reveal--armed:not(.is-in-view) .games-flagship-features li,
  .page-home .flagship-reveal.scroll-reveal--armed:not(.is-in-view) .games-flagship-card .button-row {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
  }

  .page-home .flagship-reveal.scroll-reveal--armed > .section-head {
    transition:
      opacity 0.6s var(--flagship-ease),
      transform 0.6s var(--flagship-ease);
  }

  .page-home .flagship-reveal.scroll-reveal--armed .games-flagship-visual {
    transition:
      opacity 0.8s var(--flagship-ease),
      transform 0.8s var(--flagship-ease);
  }

  .page-home
    .flagship-reveal.scroll-reveal--armed
    .games-flagship-card
    .games-flagship-body
    > .hero-mockup-sub,
  .page-home .flagship-reveal.scroll-reveal--armed .games-flagship-meta,
  .page-home .flagship-reveal.scroll-reveal--armed .games-flagship-features li,
  .page-home .flagship-reveal.scroll-reveal--armed .games-flagship-card .button-row {
    transition:
      opacity 0.52s var(--flagship-ease),
      transform 0.52s var(--flagship-ease);
  }

  .page-home .flagship-reveal.is-in-view > .section-head {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0s;
  }

  .page-home .flagship-reveal.is-in-view .games-flagship-visual {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    transition-delay: 0.12s;
  }

  .page-home .flagship-reveal.is-in-view .games-flagship-card .games-flagship-body > .hero-mockup-sub {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.3s;
  }

  .page-home .flagship-reveal.is-in-view .games-flagship-meta {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.38s;
  }

  .page-home .flagship-reveal.is-in-view .games-flagship-features li:nth-child(1) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.46s;
  }

  .page-home .flagship-reveal.is-in-view .games-flagship-features li:nth-child(2) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.54s;
  }

  .page-home .flagship-reveal.is-in-view .games-flagship-features li:nth-child(3) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.62s;
  }

  .page-home .flagship-reveal.is-in-view .games-flagship-card .button-row {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.7s;
  }

  /* Co-development focus: three columns from bottom; same stagger as “What to expect” */
  .page-home .co-dev-focus-section.scroll-reveal--armed:not(.is-in-view) .section-head {
    opacity: 0;
  }

  .page-home .co-dev-focus-section.scroll-reveal--armed:not(.is-in-view) .grid-3 > .card {
    opacity: 0;
    transform: translate3d(0, 1.5rem, 0);
  }

  .page-home .co-dev-focus-section.scroll-reveal--armed .section-head {
    transition: opacity 0.48s ease;
  }

  .page-home .co-dev-focus-section.scroll-reveal--armed .grid-3 > .card {
    transition:
      opacity 0.55s ease,
      transform 0.55s ease;
  }

  .page-home .co-dev-focus-section.is-in-view .section-head {
    opacity: 1;
    transition-delay: 0s;
  }

  .page-home .co-dev-focus-section.is-in-view .grid-3 > .card:nth-child(1) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0s;
  }

  .page-home .co-dev-focus-section.is-in-view .grid-3 > .card:nth-child(2) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.2s;
  }

  .page-home .co-dev-focus-section.is-in-view .grid-3 > .card:nth-child(3) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.4s;
  }
}

.hero-mockup-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.65rem 1rem;
  margin: clamp(0.35rem, 1.5vw, 0.65rem) 0 0;
}

.hero-scroll-down {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin: 0 auto;
  max-width: min(36rem, 100%);
  text-decoration: none;
  color: color-mix(in srgb, var(--primary) 72%, var(--muted));
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.page-home .hero-scroll-down {
  transition:
    color 0.2s ease,
    transform 0.2s ease,
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.page-home .hero-scroll-down--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.page-home .hero-scroll-down--hidden,
.page-home .hero-scroll-down--hidden:hover {
  transform: none;
}

.page-home .hero-scroll-down--hidden .hero-scroll-down-graphic {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .page-home .hero-scroll-down {
    transition-duration: 0.01ms;
  }
}

.hero-scroll-down:hover {
  color: color-mix(in srgb, var(--primary) 88%, var(--text));
  transform: translateY(2px);
}

.hero-scroll-down:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 65%, transparent);
  outline-offset: 4px;
  border-radius: 4px;
}

.hero-scroll-down-graphic {
  display: block;
  color: color-mix(in srgb, var(--primary) 78%, var(--muted));
}

@media (prefers-reduced-motion: no-preference) {
  .hero-scroll-down-graphic {
    animation: hero-scroll-nudge 2.4s ease-in-out infinite;
  }
}

@keyframes hero-scroll-nudge {
  0%,
  100% {
    transform: translateY(0);
  }

  45% {
    transform: translateY(6px);
  }
}

.page-home #proof-week {
  scroll-margin-top: calc(var(--site-nav-min-height) + 0.75rem);
}

.page-home .hero-mockup .btn-primary,
.page-home .hero-mockup .btn-secondary {
  box-sizing: border-box;
  min-height: unset;
  padding: 0.65em 1.5em;
  width: fit-content;
  min-width: min(10.5rem, 100%);
  max-width: min(18rem, 94vw);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Flagship → co-dev: same band as section vertical gap (margin so it’s independent of section padding) */
.page-home #games .co-dev-focus-section {
  margin-top: var(--section-y-gap);
}

/* Home flagship card: two-column layout + feature rows with icon panels */
.page-home .games-flagship-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 3.2vw, 2rem);
  align-items: center;
  padding: clamp(1.2rem, 2.8vw, 1.75rem);
  border-radius: 0.65rem;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);

  /* Allow logo drop-shadow (filter) to extend past the card edge */
  overflow: visible;
}

.page-home .games-flagship-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--primary) 32%, transparent),
    transparent
  );
}

.page-home .games-flagship-visual {
  border-radius: 0.5rem;
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--bg) 78%, var(--primary)) 0%,
    var(--bg) 50%,
    color-mix(in srgb, var(--primary) 14%, transparent) 100%
  );
  box-sizing: border-box;
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;

  /* Tight frame: gradient box matches logo aspect */
  padding: clamp(0.2rem, 0.75vw, 0.45rem);
}

.page-home .games-flagship-visual img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;

  /* Teal rim + glow on the mark, then charcoal depth */
  filter: drop-shadow(0 0 1.5px color-mix(in srgb, var(--primary) 78%, transparent))
    drop-shadow(0 0 12px color-mix(in srgb, var(--primary) 45%, transparent))
    drop-shadow(0 0 26px color-mix(in srgb, var(--primary) 32%, transparent))
    drop-shadow(0 0 48px color-mix(in srgb, var(--primary) 18%, transparent))
    drop-shadow(0 4px 22px rgba(0, 0, 0, 0.45));
}

.page-home .games-flagship-body {
  min-width: 0;
}

.page-home .games-flagship-lead {
  margin-bottom: 0.75rem;
}

.page-home .games-flagship-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.65rem;
  margin: 0 0 1rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.page-home .games-flagship-meta-sep {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 55%, var(--muted));
  opacity: 0.85;
}

.page-home .games-flagship-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}

.page-home .games-flagship-features li {
  margin: 0;
}

.page-home .games-flagship-feature {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem 1rem;
  align-items: center;
  padding: 0.7rem 0.8rem;
  border-radius: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
  background: linear-gradient(
    125deg,
    color-mix(in srgb, var(--surface-2) 100%, transparent) 0%,
    color-mix(in srgb, var(--primary) 7%, var(--surface)) 100%
  );
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 6px 18px rgba(0, 0, 0, 0.18);
}

.page-home .games-flagship-feature-icon {
  width: 3.35rem;
  height: 3.35rem;
  flex-shrink: 0;
  border-radius: 0.45rem;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--primary) 16%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--primary) 38%, transparent);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 0 0 1px rgba(0, 0, 0, 0.2) inset;
  color: color-mix(in srgb, var(--primary) 72%, var(--text));
}

.page-home .games-flagship-feature-icon svg {
  display: block;
}

.page-home .games-flagship-feature-text {
  margin: 0;
  font-size: clamp(0.9rem, 1.25vw, 0.98rem);
  line-height: 1.5;
  font-weight: 500;
  color: var(--muted);
}

@media (min-width: 720px) {
  .page-home .games-flagship-card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  }
}

@media (max-width: 420px) {
  .page-home .games-flagship-feature {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .page-home .games-flagship-feature-text {
    text-align: center;
  }
}

/* Values, three columns + dividers */
.values-mockup {
  padding: calc(var(--section-y-gap) / 2) 0;
  border-bottom: 1px solid var(--border);
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

.values-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 1.75rem;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

.values-col:last-child {
  border-right: none;
}

.values-col h3 {
  font-family: Inter, system-ui, sans-serif;
  font-size: clamp(1.2rem, 2.2vw, 1.45rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  margin-bottom: 0.35rem;
  color: var(--text);
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: unset;
  filter: none;
}

.values-sub {
  display: block;
  font-family: Inter, sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--muted);
  margin-bottom: 1rem;
}

.values-col p {
  font-size: 0.9rem;
  line-height: 1.65;
  margin-bottom: 1.25rem;
}

.values-col .btn {
  font-size: 0.72rem;
  padding: 0.55rem 1rem;
}

.values-follow-label {
  margin: 1rem 0 0.4rem;
  font-family: Inter, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.values-col .values-social-row {
  justify-content: center;
  margin-top: 0.15rem;
}

/* News + About */
.feed-mockup {
  padding: calc(var(--section-y-gap) / 2) 0;
}

.feed-mockup-grid {
  align-items: start;
  gap: clamp(1.5rem, 4vw, 3rem);
}

.feed-heading {
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  margin: 0 0 1.25rem;
  color: var(--muted);
  font-family: Inter, sans-serif;
  font-weight: 600;
}

.about-lined {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  letter-spacing: var(--display-letter-spacing);
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  display: inline-block;
  width: 100%;
  max-width: 18rem;
}

.feed-about p {
  max-width: 36rem;
  margin-bottom: 1.25rem;
}

.feed-about .btn-primary {
  margin-bottom: 2rem;
}

.social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
}

.social-link {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent);
  color: var(--primary);
  transition:
    background 0.2s,
    transform 0.15s;
}

.social-link:hover {
  background: color-mix(in srgb, var(--primary) 38%, transparent);
  transform: translateY(-2px);
}

/* Tooltips, hover + keyboard focus; no duplicate native title (avoids double popovers) */
.social-link::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 0.4rem);
  left: 50%;
  z-index: 20;
  padding: 0.3rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--bg);
  background: color-mix(in srgb, var(--primary) 88%, #fff);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(4px);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease,
    visibility 0.15s;
}

.social-link:hover::after,
.social-link:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .social-link::after {
    transition: none;
  }
}

.social-link svg {
  width: 1rem;
  height: 1rem;
}

@media (max-width: 900px) {
  .values-grid {
    grid-template-columns: 1fr;
  }

  .values-col {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.25rem 0;
  }

  .values-col:last-child {
    border-bottom: none;
  }
}

@media (max-width: 740px) {
  .feed-mockup-grid {
    grid-template-columns: 1fr;
  }
}