/* ============================================================
   01 - HERO  (above-the-fold). All classes prefixed .hero-.
   Tokens only (rank hexes are DATA, used inline elsewhere).
   Reuses .card/.btn/.grad-text/.display/.tnum/.reveal.
   Left column is the pitch, right column is the stat stack that
   used to sit in its own band under the hero.
   ============================================================ */

.hero-section {
  position: relative;
  min-height: min(76vh, 760px);
  display: flex;
  align-items: center;
  /* the shell is a fixed left sidebar now, so there is no top bar to clear */
  padding: clamp(48px, 6vw, 96px) 0 clamp(56px, 8vw, 104px);
  overflow: hidden; /* contain the backdrop bleed */
}

/* ---------- hero scrim ----------
   The site background is now a photo (theme.css paints it on .bg-base) behind a
   flat veil, so the hero no longer carries a picture of its own. All that is left
   is a faint pool of shade under the left column, where the title and sub-copy sit
   on the photo as plain text. It fades out well before the section edges so the
   hero does not read as a darker band stuck on top of the page. */
.hero-backdrop { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero-backdrop::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(96% 108% at 14% 48%, rgba(7,9,16,.34), transparent 74%);
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(30px, 4.6vw, 66px);
  align-items: center;
  width: 100%;
}

/* ---------- LEFT column ---------- */
.hero-copy { max-width: 560px; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--hairline);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color var(--t), color var(--t), transform var(--t-fast) var(--e-spring);
}
.hero-badge:hover { border-color: var(--hairline-strong); color: var(--text); transform: translateY(-1px); }
.hero-badge-tag {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  background: var(--accent-grad);
  color: #06121f;
}
.hero-badge-live {
  display: inline-flex; align-items: center; gap: 6px;
  padding-left: 11px; margin-left: 1px;
  border-left: 1px solid var(--hairline-strong);
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--safe);
}
.hero-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--safe); box-shadow: 0 0 8px rgba(87,217,163,.85); animation: pulse 2.4s var(--e-in-out) infinite; }

.hero-title {
  margin-top: 24px;
  font-weight: 800;
  color: var(--text);
}
.hero-title-kicker {
  display: block;
  font-size: clamp(15px, 2vw, 21px);
  font-weight: 700;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: clamp(6px, 1vw, 12px);
}
/* Capped at 86px, not the old 92px: BEDWARS is one unbreakable word and the
   sidebar takes 250px off the window that the vw sizing is measured against,
   so the biggest step has to still fit the narrower left column. */
.hero-accent {
  display: block;
  font-size: clamp(44px, 7.6vw, 86px);
  line-height: .92;
  letter-spacing: -0.035em;
  font-weight: 800;
  filter: drop-shadow(0 8px 34px rgba(150,180,220,.28));
}

.hero-sub {
  margin-top: 22px;
  max-width: 46ch;
  font-size: clamp(16px, 1.75vw, 19px);
  line-height: 1.6;
  color: var(--text-dim);
}

.hero-cta { margin-top: 34px; gap: 14px; }

/* ---------- RIGHT column: the numbers ---------- */
.hero-figures { position: relative; z-index: 1; min-width: 0; }

.hero-stats {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* One glass row per stat. The transition has to be restated in full: .reveal in
   site.css owns opacity/transform, and a plain `transition` shorthand here would
   reset its transition-delay to 0 and silently kill the 1/2/3 stagger. So the
   stagger is written per property, and the hover fades stay instant. */
.hero-stat {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 18px 20px;
  border-radius: var(--r-md);
  transition: border-color var(--t), background var(--t),
              opacity .7s var(--e-out) calc(var(--i, 0) * 80ms),
              transform .7s var(--e-out) calc(var(--i, 0) * 80ms);
}
.hero-stat:hover { border-color: var(--hairline-strong); background: var(--surface-2); }

.hero-stat-ic {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 12px;
  background: var(--accent-grad-soft);
  border: 1px solid var(--hairline);
  color: var(--accent);
}
.hero-stat-ic svg { width: 19px; height: 19px; }

.hero-stat-text { display: flex; flex-direction: column; min-width: 0; }
/* min-width + overflow-wrap so no count-up can ever push its own card sideways */
.hero-stat-v {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 700;
  line-height: 1.05;
  min-height: 1em;                 /* reserve height before count-up fills it */
  min-width: 0;
  overflow-wrap: anywhere;
  filter: drop-shadow(0 4px 18px rgba(150,180,220,.18));
}
.hero-stat-k {
  margin-top: 5px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .085em;
  text-transform: uppercase;
  color: var(--text-mute);
  line-height: 1.35;
}

/* faint one-line fair-play nod under the stack. Sits on the page rather than on
   glass, so it uses --text-mute instead of the dimmer --text-faint the old stats
   band used: it has to hold up over a photo. */
.hero-note {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  padding: 0 2px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-mute);
}
.hero-note-ic { width: 16px; height: 16px; color: var(--accent); flex: 0 0 auto; opacity: .85; }

/* ============================================================
   Responsive
   Two columns want roughly 920px of room. Under 1024px the sidebar
   is a drawer and the hero gets the whole window, but from 1024px up
   it hands 250px to the fixed sidebar, so the same layout needs a
   window 250px wider. That is why one column comes back in the middle.
   ============================================================ */
@media (max-width: 979px), (min-width: 1024px) and (max-width: 1239px) {
  .hero-section { min-height: 0; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(34px, 5vw, 48px); }
  .hero-copy { max-width: 620px; }
  .hero-figures { max-width: 620px; }
}

@media (max-width: 620px) {
  .hero-stat { padding: 15px 16px; gap: 13px; }
  .hero-stat-ic { width: 36px; height: 36px; border-radius: 10px; }
  .hero-stat-ic svg { width: 17px; height: 17px; }
  .hero-note { font-size: 12.5px; }
}

@media (max-width: 480px) {
  .hero-cta .btn { flex: 1 1 auto; }
  .hero-badge { font-size: 12px; flex-wrap: wrap; }
}

/* Respect reduced motion for the bespoke decorative animation. */
@media (prefers-reduced-motion: reduce) {
  .hero-badge-dot { animation: none; }
}