/* ── Hero ───────────────────────────────────────────────────── */
.hero {
  padding: 72px 20px 96px; text-align: center;
}
.hero-inner { max-width: 760px; margin: 0 auto; }
.hero-title {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(34px, 7vw, 56px); margin: 10px 0 14px;
}
.hero-sub { font-size: var(--text-md); color: var(--t2); max-width: 520px; margin: 0 auto 26px; }
.hero-cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ── Section shell (shared by every homepage section) ───────── */
.home-sections { max-width: var(--container-wide); margin: 0 auto; padding: 0 20px 60px; }
.home-section { margin-bottom: 48px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.section-head h2 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800; }
.section-more {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: .05em; color: var(--accent); white-space: nowrap;
}
.section-more:hover { color: var(--t1); }
.home-section-note { font-size: var(--text-sm); color: var(--t3); margin: -6px 0 14px; }

/* ── Team builder promo ─────────────────────────────────────── */
.tb-promo {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 28px; text-align: center;
}
.tb-promo-copy { max-width: 560px; margin: 0 auto; }
.tb-promo-copy h2 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; margin-bottom: 10px; }
.tb-promo-copy p { font-size: var(--text-base); color: var(--t2); line-height: 1.6; margin-bottom: 18px; }

/* ── Most-used Pokemon (real usage, ranked) ──────────────────── */
/* Capped at 5 columns (not just "as many 150px tiles as fit") via the
   minmax-of-a-fraction trick — a track can't be narrower than 1/5 of the
   row, so auto-fill never lays out a 6th, while the 140px floor still lets
   it collapse to fewer columns on narrow viewports. */
.top-mon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(140px, (100% - 4 * 14px) / 5), 1fr)); gap: 14px; }
.top-mon-card {
  position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 22px 14px 18px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.top-mon-card:hover { border-color: var(--accent-b); transform: translateY(-3px); box-shadow: 0 16px 32px -20px var(--shadow-strong); }
.top-mon-rank {
  position: absolute; top: 10px; left: 10px; min-width: 24px; height: 24px; padding: 0 6px;
  font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 800; color: var(--accent);
  background: var(--accent-d); border-radius: 999px; display: flex; align-items: center; justify-content: center;
}
.top-mon-name { font-size: var(--text-md); font-weight: 800; }
.top-mon-types { display: flex; gap: 4px; justify-content: center; }

/* ── Best-of-roster: highest-stat tiles (bigger, richer) ────── */
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.stat-tile {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 22px; display: flex; flex-direction: column; gap: 14px;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
a.stat-tile:hover { border-color: var(--accent-b); transform: translateY(-3px); box-shadow: 0 16px 32px -20px var(--shadow-strong); }
.stat-tile-label {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--t3);
}
.stat-tile-mon { display: flex; align-items: center; gap: 12px; }
.stat-tile-name { font-size: var(--text-lg); font-weight: 800; display: block; margin-bottom: 4px; }
.stat-tile-types { display: flex; gap: 4px; }
.stat-tile-value { font-family: var(--font-mono); font-size: 34px; font-weight: 800; color: var(--accent); line-height: 1; }

/* ── Explore the data ────────────────────────────────────────── */
.data-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.data-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 22px; display: flex; flex-direction: column; gap: 10px;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.data-card:hover { border-color: var(--accent-b); transform: translateY(-3px); box-shadow: 0 16px 32px -20px var(--shadow-strong); }
.data-card h3 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 800; }
.data-card p { font-size: var(--text-sm); color: var(--t2); line-height: 1.5; }
.data-card-preview { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 2px; }
.data-chip {
  font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 700; color: var(--t2);
  background: var(--bg2); border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px;
}
.data-card-cta { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: .05em; color: var(--accent); margin-top: auto; padding-top: 4px; }
.data-card-featured { background: var(--accent-d); border-color: var(--accent-b); justify-content: center; text-align: center; }
.data-card-featured .data-card-cta { font-size: var(--text-sm); }

/* ── Type chart preview + dual-chart CTA ─────────────────────── */
.dual-chart-cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 13px 20px;
  background: var(--accent-d); border: 1px solid var(--accent-b); border-radius: var(--radius);
  font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; color: var(--accent);
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.dual-chart-cta:hover { background: var(--accent-b); color: var(--t1); }