/* =============================================================================
 * TEAM FORGE — Forge XI HUB GATEWAY (Faz 2)
 * The hub page (/forge-xi) reworked into the entry gate of the sales journey.
 * Builds on forge-xi.css tokens (--fx-*); adds a deep-navy origin palette for the
 * manifesto hero and uses the existing gold family (--fx-gold*) as origin accent.
 * Self-contained + .gw-scoped: touches no storefront/cart CSS and no other page.
 * Mobile-first: base rules are the small-screen layout; min-width queries scale up.
 * ========================================================================== */

/* Deep navy / anthracite origin palette (The First XI atmosphere). */
.fxgw { --gw-navy-0: #070b16; --gw-navy-1: #0b1224; --gw-navy-2: #111c38; }

.gw-main { max-width: var(--fx-maxw); margin: 0 auto; padding: 0 20px; }
.gw-eyebrow { font-family: var(--fx-font-display); text-transform: uppercase; letter-spacing: 0.3em; font-size: 0.72rem; color: var(--fx-gold); margin: 0 0 16px; }
.gw-h2 { font-family: var(--fx-font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: clamp(1.4rem, 4vw, 2rem); color: var(--fx-ink); margin: 0 0 14px; line-height: 1.12; }
.gw-lead { color: var(--fx-muted); font-size: 1rem; line-height: 1.62; max-width: 60ch; margin: 0; }

/* -------------------------------- A. HERO -------------------------------- */
.gw-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--fx-line-soft);
  background:
    radial-gradient(120% 90% at 50% -12%, rgba(212,175,55,0.12), transparent 55%),
    linear-gradient(180deg, var(--gw-navy-2) 0%, var(--gw-navy-1) 44%, var(--gw-navy-0) 100%); }
.gw-hero-inner { max-width: var(--fx-maxw); margin: 0 auto; padding: clamp(52px, 12vw, 116px) 20px clamp(36px, 6vw, 64px); text-align: center; position: relative; z-index: 1; }
.gw-manifesto { font-family: var(--fx-font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em;
  font-size: clamp(1.85rem, 6.2vw, 3.9rem); line-height: 1.05; margin: 0 auto; max-width: 17ch; color: var(--fx-ink); }
.gw-manifesto .gw-gold { color: var(--fx-gold); }
.gw-hero-sub { color: var(--fx-muted); font-size: clamp(1rem, 2.1vw, 1.16rem); line-height: 1.5; max-width: 52ch; margin: 18px auto 30px; }
.gw-cta { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--fx-font-display);
  text-transform: uppercase; letter-spacing: 0.09em; font-size: 1rem; padding: 16px 34px; border-radius: 12px;
  color: #10100c; background: linear-gradient(135deg, #e9cf82, var(--fx-gold)); border: 1px solid var(--fx-gold);
  box-shadow: 0 10px 30px -10px rgba(212,175,55,0.5); transition: transform 0.14s ease, box-shadow 0.14s ease; }
.gw-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -10px rgba(212,175,55,0.6); }
.gw-cta:focus-visible { outline: 2px solid var(--fx-gold); outline-offset: 3px; }
.gw-cta svg { width: 16px; height: 16px; }

/* --------------------------- B. MICRO-DEMO ------------------------------- *
 * SVG + CSS only, no library. Role dots flow from a pool into pitch slots on a
 * ~7s loop; prefers-reduced-motion freezes them in their slots (see bottom).   */
.gw-demo-wrap { max-width: 540px; margin: 34px auto 0; }
.gw-demo { width: 100%; height: auto; display: block; }
.gw-demo-cap { text-align: center; color: var(--fx-muted); font-size: 0.8rem; letter-spacing: 0.05em; margin: 12px 0 0; }
.gw-pitch-line { fill: none; stroke: var(--fx-gold-dim); stroke-width: 1; opacity: 0.45; }
.gw-slot { fill: none; stroke: var(--fx-gold-dim); stroke-width: 1.4; opacity: 0.5; }
.gw-dot circle { fill: var(--fx-gold); }
.gw-dot { animation: gw-flow 7s ease-in-out infinite; will-change: transform, opacity; }
@keyframes gw-flow {
  0%       { transform: translate(var(--sx), var(--sy)); opacity: 0; }
  8%       { opacity: 1; }
  50%, 86% { transform: translate(var(--ex), var(--ey)); opacity: 1; }
  100%     { transform: translate(var(--sx), var(--sy)); opacity: 0; }
}

/* ------------------------------ sections --------------------------------- */
.gw-section { padding: clamp(46px, 7vw, 84px) 0; border-top: 1px solid var(--fx-line-soft); }
.gw-section-head { text-align: center; margin-bottom: 30px; }
.gw-section-head .gw-lead { margin: 0 auto; }

/* --------------------------- C. FOUR LAYERS ------------------------------ */
.gw-layers { display: grid; grid-template-columns: 1fr; gap: 14px; }
.gw-layer { background: var(--fx-panel); border: 1px solid var(--fx-line-soft); border-radius: var(--fx-radius); padding: 22px 20px; }
.gw-layer-n { font-family: var(--fx-font-display); font-size: 1.05rem; color: var(--fx-gold); letter-spacing: 0.1em; }
.gw-layer h3 { font-family: var(--fx-font-display); text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.06rem; color: var(--fx-ink); margin: 8px 0 6px; }
.gw-layer p { color: var(--fx-muted); font-size: 0.9rem; line-height: 1.55; margin: 0; }

/* ------------------------ D. ROLE SHOWCASE (20) -------------------------- *
 * HIERARCHY (canonical rev 16): characterName = small gold eyebrow (wide
 * tracking); Role Name = main headline. characterName is NEVER shown alone.     */
.gw-roles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.gw-role { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--fx-panel);
  border: 1px solid var(--fx-line-soft); border-radius: var(--fx-radius); padding: 14px 14px 16px;
  transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease; }
.gw-role:hover { transform: translateY(-3px); border-color: var(--fx-line); box-shadow: 0 12px 30px rgba(0,0,0,0.5); }
.gw-role:focus-visible { outline: 2px solid var(--fx-gold); outline-offset: 2px; }
.gw-role-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.gw-role-mono { font-family: var(--fx-font-display); font-weight: 700; color: var(--fx-gold); font-size: 0.98rem; letter-spacing: 0.08em; }
.gw-role-pos { font-size: 0.58rem; letter-spacing: 0.12em; color: var(--fx-muted); border: 1px solid var(--fx-line-soft); border-radius: 999px; padding: 2px 8px; }
.gw-role-eyebrow { font-family: var(--fx-font-display); text-transform: uppercase; letter-spacing: 0.24em; font-size: 0.6rem; color: var(--fx-gold); margin-bottom: 3px; }
.gw-role-name { font-family: var(--fx-font-display); text-transform: uppercase; letter-spacing: 0.02em; font-size: 1rem; color: var(--fx-ink); line-height: 1.08; }
.gw-role-line { font-size: 0.76rem; color: var(--fx-muted); line-height: 1.42; margin-top: 6px; }

/* --------------------- E. ORIGIN (First XI) link ------------------------- */
.gw-origin { text-align: center; padding: clamp(40px, 6vw, 72px) 0; border-top: 1px solid var(--fx-line-soft); }
.gw-origin-link { display: inline-flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--fx-muted); }
.gw-origin-link span { font-size: 0.9rem; letter-spacing: 0.02em; }
.gw-origin-link b { font-family: var(--fx-font-display); text-transform: uppercase; letter-spacing: 0.14em; color: var(--fx-gold); font-size: 1.06rem; }
.gw-origin-link:hover b { color: var(--fx-ink); }
.gw-origin-link:focus-visible { outline: 2px solid var(--fx-gold); outline-offset: 4px; border-radius: 4px; }

/* ------------------------------ responsive ------------------------------- */
@media (min-width: 600px)  { .gw-roles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 820px)  { .gw-layers { grid-template-columns: repeat(2, 1fr); } .gw-roles { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .gw-layers { grid-template-columns: repeat(4, 1fr); } .gw-roles { grid-template-columns: repeat(5, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .gw-dot { animation: none; transform: translate(var(--ex), var(--ey)); opacity: 1; }
  .gw-cta, .gw-role { transition: none; }
}