/* ═══════════════════════════════════════════════════════════════
   LWServers V2 — index.css
   Gateway / home page styles only.
   Requires: base.css, nav.css
═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   HERO
───────────────────────────────────────────────────────────── */

.home-hero {
  padding: 36px var(--page-px) 28px;
  position: relative;
  overflow: hidden;          /* contains the 3D canvas */
}
/* hero content floats above the 3D scene */
.home-hero > :not(.gl-scene) { position: relative; z-index: 1; }

/* Headline + globe on one row. The globe is a real element here, not a
   backdrop, so it holds its own space and the copy wraps against it. */
.home-hero-mid {
  display: flex;
  align-items: center;
  gap: 12px;
}
.home-hero-copy { min-width: 0; flex: 1 1 auto; }

/* The feature slot: globe underneath, partner promo on top. Sized by
   the globe, so the box is identical whether or not a promo is live. */
.home-hero-feature {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Hero partner promo (js/partners.js, hero-flagged partner) ── */
.hero-promo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* The globe below is pointer-events:none; the promo must take clicks. */
  pointer-events: auto;
}
.hero-promo[hidden] { display: none; }

.hero-promo-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: min(100%, 210px);
  padding: 12px 12px 13px;
  border-radius: var(--r-lg);
  text-align: center;
  /* Opaque enough to keep text legible over a moving 3D scene — a
     translucent card over spinning particles is unreadable. */
  background: color-mix(in srgb, var(--bg-root, #0d1117) 88%, transparent);
  border: 1px solid var(--accent-border);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
}

.hero-promo .creator-avatar,
.hero-promo .creator-avatar-fallback { width: 40px; height: 40px; }

.hero-promo-eyebrow {
  font-family: var(--font-data);
  font-size: 8.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
}
.hero-promo-name {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 800;
  color: var(--text-1);
  line-height: 1.2;
}
.hero-promo-focus {
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hero-promo-actions { display: flex; flex-direction: column; gap: 5px; width: 100%; margin-top: 3px; }
.hero-promo-btn {
  padding: 6px 8px;
  border-radius: var(--r-md);
  font-family: var(--font-data);
  font-size: 10.5px;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  border: 1px solid var(--border-2);
  background: var(--glass-bg-3);
  color: var(--text-1);
  transition: all var(--t-fast);
}
.hero-promo-btn:hover { border-color: var(--border-3); }
.hero-promo-btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #04160c;
}
.hero-promo-btn.primary:hover { filter: brightness(1.06); }

/* Sends anyone who wants the giveaway's terms to the full partner card,
   which carries them in full. The hero states there ARE terms; it does
   not try to fit them. */
.hero-promo-terms {
  font-family: var(--font-data);
  font-size: 9.5px;
  color: var(--text-3);
  text-decoration: none;
  margin-top: 1px;
}
.hero-promo-terms:hover { color: var(--text-2); }

/* 3D constellation globe (js/global-3d.js mounts a canvas in #glScene).
   Decorative: pointer-events none, aria-hidden, no data. Sized as a
   square panel — the module reads clientWidth/clientHeight and observes
   the element, so the box drives the render, not the other way round.
   A radial mask feathers the edges so it sits IN the page rather than
   looking like a pasted-on tile. */
.home-hero .gl-scene {
  position: relative;
  z-index: 0;
  flex: 0 0 auto;
  /* 30vw, not 38: measured, 38vw left the headline 147–191px on phones
     and "Command Center" overflowed onto 4 lines. */
  width: clamp(120px, 30vw, 190px);
  aspect-ratio: 1;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 55%, transparent 78%);
  mask-image: radial-gradient(circle at 50% 50%, #000 55%, transparent 78%);
}
.home-hero .gl-scene::before {   /* soft core glow behind the globe */
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: 118%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 65%);
  filter: blur(6px);
}
.home-hero .gl-scene canvas { display: block; width: 100%; height: 100%; }

/* Below 480px the row stops working: "Command Center" needs ~250px at
   the mobile title size, and side-by-side leaves less than that, so the
   headline broke onto 4 lines. Under that width the globe drops below
   the copy at a comfortable size instead of strangling it. 480 keeps
   the side-by-side layout on the ~493px phones this was designed for. */
@media (max-width: 480px) {
  .home-hero-mid { flex-direction: column; align-items: stretch; gap: 6px; }
  /* Stretch, not center: the feature box must be wider than the globe so
     the globe can be sized inside it. Sizing the box BY the globe made
     the two the same width, and the promo card — taller than a 210px
     globe — then covered it completely. On a real S23 the globe was
     invisible behind the card. */
  .home-hero-feature { align-self: stretch; }
  .home-hero .gl-scene { width: min(260px, 72%); margin: 0 auto; }
  /* Carrying a promo, the globe has to be bigger than the CARD or it is
     simply hidden behind it — the card runs ~292px tall on a phone, so a
     260px globe disappeared entirely. Only when a promo is present; on
     its own the globe stays the smaller size. */
  .home-hero-feature.has-promo .gl-scene { width: min(340px, 96%); }
  /* Comfortably inside the globe, so it reads as sitting ON the scene. */
  .hero-promo-inner { width: min(86%, 215px); }
}

/* Logo + funding card share the top row of the hero. */
.home-hero-top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}

.home-hero-logo {
  width: 96px;
  height: 96px;
  display: block;
  margin: 0;
  flex-shrink: 0;
  border-radius: 22px;
  object-fit: contain;
  filter: drop-shadow(0 8px 24px rgba(0, 232, 122, 0.35));
  animation: hero-logo-float 6s ease-in-out infinite;
}

/* ── Funding card — the condensed replacement for the old full-width
   funding section (removed 2026-07-21). Deliberately small: it states
   the promise and offers the two actions, and nothing more. The
   donate → Pro mechanics live on the surfaces that need them
   (js/pro-gate.js, /account, /about). ── */
.home-fund {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 430px;
  padding: 10px 12px;
  border-radius: var(--r-lg);
  border: 1px solid var(--accent-border);
  background: var(--accent-glow-2);
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
}

.home-fund-eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-data);
  font-size: 9px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
}

.home-fund-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

.home-fund-line {
  margin: 5px 0 8px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-2);
}
.home-fund-line b { color: var(--text-1); font-weight: 600; }

.home-fund-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.home-fund-btn {
  flex: 1 1 auto;
  text-align: center;
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: var(--r-md);
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  color: var(--text-1);
  border: 1px solid var(--border-2);
  background: var(--glass-bg-3);
  transition: all var(--t-fast);
}
.home-fund-btn:hover { border-color: var(--border-3); }
.home-fund-btn.primary {
  color: #04160c;
  background: var(--accent);
  border-color: var(--accent);
}
.home-fund-btn.primary:hover { filter: brightness(1.06); }

/* Narrow screens: the card sits beside a 96px logo, so it only gets
   ~190px. At the desktop sizes the two buttons overflowed that and
   wrapped — and a wrapped flex button stretches full width, doubling
   the card's height. Trim the eyebrow and the button metrics so both
   stay on one row and the card stays about as tall as the logo. */
@media (max-width: 480px) {
  .home-fund { padding: 9px 10px; }
  .home-fund-more { display: none; }
  .home-fund-line { font-size: 12px; margin: 4px 0 7px; }
  .home-fund-actions { flex-wrap: nowrap; gap: 5px; }
  .home-fund-btn { padding: 6px 4px; font-size: 10px; letter-spacing: -0.2px; }
}

@keyframes hero-logo-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

.home-hero-eyebrow {
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.home-hero-eyebrow::before {
  content: '';
  width: 14px;
  height: 1px;
  background: var(--accent);
  opacity: 0.5;
}

.home-hero-title {
  font-family: var(--font-ui);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.05;
  color: var(--text-1);
  margin-bottom: 10px;
}

.home-hero-title span { color: var(--accent); }

.home-hero-sub {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.6;
  max-width: 320px;
}

.coverage-strip {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.coverage-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 1px;
  padding: 6px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-2);
  color: var(--text-3);
  background: var(--glass-bg);
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
}

/* Coverage states reflect indexing status, not segment activeness:
     cov-full    = every WZ indexed (green)
     cov-sampled = at least one WZ uploaded (amber)
     cov-pending = no data yet (muted) */
.coverage-chip.cov-full {
  border-color: var(--accent-border);
  color: var(--accent);
  background: var(--accent-glow-2);
}
.coverage-chip.cov-sampled {
  border-color: var(--amber-border);
  color: var(--amber);
  background: var(--amber-glow);
}
.coverage-chip.cov-pending {
  border-color: var(--border-2);
  color: var(--text-3);
  background: var(--glass-bg-3);
}

.coverage-chip .coverage-range {
  font-weight: 700;
  letter-spacing: 0.5px;
}
.coverage-chip .coverage-meta {
  opacity: 0.85;
  font-weight: 400;
  letter-spacing: 0.3px;
}

.coverage-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.coverage-chip.cov-full .coverage-dot {
  box-shadow: 0 0 6px currentColor;
}

/* Hero-strip caption sitting just under the chips. */
.coverage-note {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.5;
  max-width: 620px;
}
.coverage-note b { color: var(--accent); }

/* ── Hero stat strip — live totals from the global snapshot
   (js/home-stats.js). 2×2 on phones, one row from 480px up: four
   numbers squeezed onto a narrow screen become unreadable. ── */
.home-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 20px;
  max-width: 560px;
}

.home-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
  box-shadow: inset 0 1px 0 var(--glass-shine);
}

.home-stat-num {
  font-family: var(--font-data);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--accent);
  line-height: 1.15;
  /* Numbers swap in after the fetch — reserve the line so the caption
     underneath doesn't jump. */
  min-height: 1.15em;
}

.home-stat-lbl {
  font-family: var(--font-data);
  font-size: 9px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-3);
}

@media (min-width: 480px) {
  .home-stats { grid-template-columns: repeat(4, 1fr); }
}

/* Season banner — promotional row pointing at /clans for 677-804. */
/* ── Presidents Corner flagship banner — first view, both breakpoints.
   Pinned dark + gold so it reads "premium hall" in BOTH site themes. ── */
.prez-home-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px var(--page-px) 10px;
  padding: 16px 18px;
  border-radius: var(--r-lg);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
  background:
    radial-gradient(ellipse at top right, rgba(240, 180, 69, 0.16), transparent 55%) padding-box,
    radial-gradient(ellipse at bottom left, rgba(0, 232, 122, 0.05), transparent 60%) padding-box,
    linear-gradient(180deg, #141a26, #0a0d13) padding-box,
    linear-gradient(158deg,
      rgba(255, 226, 158, 0.8), rgba(240, 180, 69, 0.25) 30%,
      rgba(255, 255, 255, 0.07) 52%, rgba(200, 140, 40, 0.55) 100%) border-box;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35), 0 0 30px rgba(240, 180, 69, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.prez-home-banner:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4), 0 0 42px rgba(240, 180, 69, 0.18);
}
.prez-home-crown {
  font-size: 34px; line-height: 1; flex-shrink: 0;
  filter: drop-shadow(0 0 14px rgba(240, 180, 69, 0.55));
}
.prez-home-body { min-width: 0; flex: 1; }
.prez-home-eyebrow {
  font-family: var(--font-data); font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #f0b445;
}
.prez-home-title {
  font-family: var(--font-ui); font-size: 19px; font-weight: 800;
  margin-top: 2px;
  background: linear-gradient(100deg, #f6e8c5, #f0b445 45%, #ffe9b0 60%, #d29a33);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.prez-home-sub {
  font-family: var(--font-ui); font-size: 12.5px; color: #98a2b0;
  margin-top: 3px;
}
.prez-home-sub b { color: #ffd98a; font-family: var(--font-data); }
.prez-home-cta {
  flex-shrink: 0;
  font-family: var(--font-data); font-size: 12px; font-weight: 800;
  color: #1c1204;
  background: linear-gradient(120deg, #ffd98a, #f0b445);
  border-radius: 999px;
  padding: 9px 14px;
  box-shadow: 0 6px 18px rgba(240, 180, 69, 0.3);
  white-space: nowrap;
}
@media (max-width: 480px) {
  .prez-home-cta { display: none; }   /* the whole banner is the tap target */
}

/* gold accent variant of a tool card (Presidents) */
.tool-card-gold {
  border-color: rgba(240, 180, 69, 0.4) !important;
  background:
    radial-gradient(ellipse at top, rgba(240, 180, 69, 0.12), transparent 65%),
    var(--glass-bg);
}
.tool-card-gold .tool-icon { color: #f0b445; background: rgba(240, 180, 69, 0.1); }
.tool-card-gold:hover { border-color: rgba(240, 180, 69, 0.65) !important; }

.season-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px var(--page-px) 24px;
  padding: 14px 16px;
  border-radius: var(--r-lg);
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at top right, rgba(245, 158, 11, 0.12), transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(78, 168, 50, 0.10), transparent 65%),
    var(--glass-bg-2);
  border: 1px solid var(--amber-border);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.season-banner:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(245, 158, 11, 0.15);
}

.season-banner-pulse {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 12px var(--amber);
  animation: season-pulse 2s ease-in-out infinite;
}
@keyframes season-pulse {
  0%, 100% { opacity: 1;    transform: scale(1); }
  50%      { opacity: 0.4;  transform: scale(1.2); }
}

.season-banner-body { flex: 1; min-width: 0; }
.season-banner-eyebrow {
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--amber);
  font-weight: 700;
}
.season-banner-title {
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--text-1);
  margin-top: 2px;
}
.season-banner-sub {
  font-size: 12px;
  color: var(--text-2);
  margin-top: 2px;
  line-height: 1.5;
}

.season-banner-cta {
  flex-shrink: 0;
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--amber);
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.10);
  border: 1px solid var(--amber-border);
  white-space: nowrap;
  transition: all var(--t-fast);
}
.season-banner:hover .season-banner-cta {
  background: rgba(245, 158, 11, 0.20);
  color: #fff;
  border-color: var(--amber);
}

/* ─────────────────────────────────────────────────────────────
   QUICK ACCESS CARDS
───────────────────────────────────────────────────────────── */

.quick-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 var(--page-px);
  margin-bottom: 28px;
}

.quick-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border-radius: var(--r-lg);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform var(--t-base) var(--ease), border-color var(--t-base);
  background: var(--glass-bg);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-shine);
}

.quick-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--glass-shine) 0%, transparent 50%);
  pointer-events: none;
}

.quick-card:hover { transform: translateY(-2px); border-color: var(--border-3); }
.quick-card:active { transform: translateY(0); }

.quick-card.primary {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  border-color: var(--accent-border);
  background: rgba(0, 232, 122, 0.06);
}

.quick-card.primary::before {
  background: linear-gradient(135deg, rgba(0,232,122,0.08) 0%, transparent 50%);
}

.quick-card-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--glass-bg-3);
  border: 1px solid var(--border-1);
  position: relative;
  z-index: 1;
}

.quick-card.primary .quick-card-icon {
  background: var(--accent-glow-2);
  border-color: var(--accent-border);
}

.quick-card-icon svg {
  width: 18px;
  height: 18px;
  stroke: var(--text-2);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.quick-card.primary .quick-card-icon svg { stroke: var(--accent); }

.quick-card-body { position: relative; z-index: 1; flex: 1; }

.quick-card-label {
  font-family: var(--font-data);
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 3px;
}

.quick-card.primary .quick-card-label { color: rgba(0,232,122,0.6); }

.quick-card-title {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 2px;
}

.quick-card-desc { font-size: 11px; color: var(--text-3); line-height: 1.4; }

.quick-card-arrow {
  position: absolute;
  bottom: 14px;
  right: 14px;
  font-size: 14px;
  color: var(--text-3);
  transition: transform var(--t-base), color var(--t-base);
  z-index: 1;
}

.quick-card:hover .quick-card-arrow { color: var(--accent); transform: translate(2px, -2px); }
.quick-card.primary .quick-card-arrow { color: var(--accent); }

/* ─────────────────────────────────────────────────────────────
   TOOLS GRID
───────────────────────────────────────────────────────────── */

.tools-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  padding: 0 var(--page-px);
  margin-bottom: 20px;
}

.tool-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  border-radius: var(--r-lg);
  text-align: center;
  text-decoration: none;
  background: var(--glass-bg);
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-shine);
  transition: all var(--t-base) var(--ease);
  position: relative;
  overflow: hidden;
}

.tool-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--glass-shine) 0%, transparent 60%);
  pointer-events: none;
}

.tool-card:hover { border-color: var(--border-3); transform: translateY(-1px); }

.tool-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--r-md);
  background: var(--glass-bg-3);
  border: 1px solid var(--border-1);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.tool-icon svg {
  width: 16px;
  height: 16px;
  stroke: var(--text-2);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tool-label { font-family: var(--font-ui); font-size: 11px; font-weight: 600; color: var(--text-1); position: relative; z-index: 1; }
.tool-sub { font-size: 10px; color: var(--text-3); line-height: 1.3; position: relative; z-index: 1; }

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE — desktop
───────────────────────────────────────────────────────────── */

@media (min-width: 769px) {
  .home-hero { padding: 48px var(--page-px-desk) 32px; }
  /* Desktop has room, so the globe becomes a proper feature rather than
     decoration squeezed beside the text. The old left/right offsets are
     gone with the absolute positioning they belonged to. */
  .home-hero-mid { gap: 32px; align-items: center; }
  .home-hero .gl-scene { width: clamp(240px, 26vw, 380px); }
  .hero-promo-inner { width: min(100%, 250px); padding: 16px 16px 17px; gap: 7px; }
  .hero-promo .creator-avatar,
  .hero-promo .creator-avatar-fallback { width: 52px; height: 52px; }
  .hero-promo-name { font-size: 16px; }
  .hero-promo-focus { font-size: 12px; }
  .hero-promo-btn { font-size: 11.5px; padding: 8px 10px; }
  /* No margin-bottom here — .home-hero-top owns the gap now. */
  .home-hero-logo { width: 120px; height: 120px; border-radius: 26px; }
  .home-hero-top { gap: 18px; margin-bottom: 22px; }
  .home-fund { padding: 12px 14px; }
  .home-fund-line { font-size: 13px; }
  .home-hero-title { font-size: 44px; }
  .home-hero-sub { max-width: 480px; font-size: 15px; }
  .home-stats { margin-top: 26px; }
  .home-stat { padding: 12px 14px; }
  .home-stat-num { font-size: 21px; }
  .quick-grid { grid-template-columns: 2fr 1fr 1fr; padding: 0 var(--page-px-desk); }
  .quick-card.primary { grid-column: auto; }
  .tools-grid { grid-template-columns: repeat(3, 1fr); padding: 0 var(--page-px-desk); gap: 12px; }
}

/* Hero promo headline offer — the hook, in the most valuable slot on
   the site. Replaces the focus line there: with only ~250px of card,
   one loud reason to click beats two quiet ones. */
.hero-promo-offer {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  padding: 6px 10px;
  border-radius: var(--r-md);
  color: #1c1204;
  background: linear-gradient(120deg, #ffd98a, #f0b445);
  box-shadow: 0 4px 14px rgba(240, 180, 69, 0.25);
}

/* Very narrow phones: the promo card is content-height (~292px) while
   the globe is width-driven, so below ~400px the card outgrew the globe
   and covered it again. Tighten the card rather than inflate the globe,
   which would eat the whole screen. */
@media (max-width: 400px) {
  .hero-promo-inner { gap: 4px; padding: 10px 10px 11px; }
  .hero-promo .creator-avatar,
  .hero-promo .creator-avatar-fallback { width: 32px; height: 32px; }
  .hero-promo-name { font-size: 13px; }
  .hero-promo-offer { font-size: 12px; padding: 5px 8px; }
  .hero-promo-btn { font-size: 10px; padding: 5px 8px; }
  .hero-promo-terms { font-size: 9px; }
}