/* Zilla Engine · hub hero. Scoped to .ze-hero, safe to drop into any page. */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");
.ze-hero{--ze-bg:#0f1113;--ze-text:#f2f2f3;--ze-muted:#8b8c92;--ze-engine:#F26B1D;--ze-live:#4ade80;--ze-pod:#17191d;--ze-dash:#3a3c42;
  position:relative;overflow:hidden;background:var(--ze-bg);color:var(--ze-text);font-family:'Space Grotesk',system-ui,sans-serif;padding:96px 64px 80px}
.ze-hero *{box-sizing:border-box}
.ze-hero__glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 55% 55% at 72% 55%,rgba(242,107,29,.12),transparent 70%)}
.ze-hero__inner{position:relative;max-width:1312px;margin:0 auto;display:grid;grid-template-columns:minmax(0,580px) minmax(0,1fr);gap:40px;align-items:center}
.ze-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--ze-engine)}
.ze-h1{margin:18px 0 0;font-size:clamp(40px,4.2vw,58px);line-height:1.03;letter-spacing:-.02em;font-weight:700}
.ze-h1 span{color:var(--ze-engine)}
.ze-sub{margin:22px 0 0;font-size:18px;line-height:1.5;color:#b9bac0;max-width:520px}
.ze-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.ze-btn{display:inline-block;padding:15px 24px;border-radius:999px;font-weight:700;font-size:16px;text-decoration:none;transition:transform .2s,box-shadow .2s}
.ze-btn--primary{background:var(--ze-engine);color:#140a03}
.ze-btn--primary:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(242,107,29,.35)}
.ze-btn--ghost{border:1px solid var(--ze-dash);color:var(--ze-text);font-weight:600}
.ze-btn--ghost:hover{border-color:var(--ze-text)}

/* hub: everything placed in % of a 760×620 box so it scales */
.ze-hub-wrap{container-type:inline-size}
.ze-hub{position:relative;width:100%;aspect-ratio:760/620}
.ze-hub__lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ze-ring{fill:none;stroke:#24272d;stroke-width:1.5;vector-effect:non-scaling-stroke;animation:ze-fi .6s ease .6s both}
.ze-belt{vector-effect:non-scaling-stroke;fill:none}
.ze-belt--live{stroke:var(--ze-engine);stroke-width:3;stroke-dasharray:8 8;animation:ze-fi .4s ease var(--d) both,ze-belt 1.2s linear 1s infinite}
.ze-belt--open{stroke:var(--ze-dash);stroke-width:1.5;stroke-dasharray:3 7;opacity:.7;animation:ze-fi .4s ease var(--d) both,ze-belt 3s linear 1s infinite}
.ze-core{position:absolute;left:50%;top:50%;width:29cqw;aspect-ratio:1;transform:translate(-50%,-50%)}
.ze-core__glow{position:absolute;inset:0;border-radius:50%;background:radial-gradient(closest-side,rgba(242,107,29,.33),transparent);animation:ze-fi .8s ease .3s both}
.ze-core__spin{position:absolute;inset:13.6%;animation:ze-pop .7s cubic-bezier(.2,.8,.2,1) .4s both}
.ze-mark{width:100%;height:100%;display:block;animation:ze-spin 14s linear .4s infinite;transform-origin:center}

.ze-pod{position:absolute;transform:translate(-50%,-50%);animation:ze-pod .5s cubic-bezier(.2,.8,.2,1) var(--d) both;font-size:clamp(9px,1.71cqw,13px)}
.ze-pod--league{width:25cqw;min-width:128px;padding:.77em .92em;border-radius:14px;background:var(--ze-pod);border:1px solid var(--c);box-shadow:0 0 30px color-mix(in srgb,var(--c) 27%,transparent);color:var(--ze-text);text-decoration:none;transition:transform .25s,box-shadow .25s}
a.ze-pod--league:hover{transform:translate(-50%,-50%) scale(1.06);box-shadow:0 0 44px color-mix(in srgb,var(--c) 45%,transparent)}
.ze-pod__head{display:flex;align-items:center;gap:.6em}
.ze-pod__badge{width:2em;height:2em;flex:none}
.ze-pod__name{font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ze-pod__game{display:flex;align-items:center;justify-content:space-between;gap:.4em;margin-top:.6em;padding:.45em .6em;border-radius:8px;background:#0b0c0e;font-size:.77em;color:#cfd0d4}
.ze-pod__game span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:38%}
.ze-pod__score{font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:1.3em;color:var(--c);font-variant-numeric:tabular-nums}
.ze-pod__status{font-family:'IBM Plex Mono',monospace;font-size:.7em;letter-spacing:.14em;text-transform:uppercase;margin-top:.5em;color:var(--ze-muted)}
.ze-pod__status--live{color:var(--ze-live)}
.ze-pod__status--live::before{content:"";display:inline-block;width:.6em;height:.6em;border-radius:50%;background:currentColor;margin-right:.45em;animation:ze-blink 1.4s ease infinite}
.ze-pod--open{width:21cqw;min-width:110px;height:8.9cqw;min-height:44px;border-radius:14px;border:1.5px dashed var(--ze-dash);display:flex;align-items:center;justify-content:center;gap:.5em;color:#6b6d74;text-decoration:none;transition:color .2s,border-color .2s}
.ze-pod--open b{font-size:1.4em;font-weight:400}
a.ze-pod--open:hover{color:var(--ze-engine);border-color:var(--ze-engine)}

.ze-stats{display:flex;justify-content:center;gap:28px;margin-top:8px;animation:ze-fi .4s ease 2s both}
.ze-stat{text-align:center}
.ze-stat b{display:block;font-size:22px;font-variant-numeric:tabular-nums}
.ze-stat span{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--ze-muted)}

.ze-in{animation:ze-up .6s cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
@keyframes ze-fi{from{opacity:0}}
@keyframes ze-up{from{opacity:0;transform:translateY(18px)}}
@keyframes ze-pop{from{opacity:0;transform:scale(.8)}}
@keyframes ze-pod{from{opacity:0;transform:translate(-50%,-50%) scale(.8)}}
@keyframes ze-belt{to{stroke-dashoffset:-32}}
@keyframes ze-spin{to{transform:rotate(360deg)}}
@keyframes ze-blink{50%{opacity:.3}}

@media (max-width:960px){
  .ze-hero{padding:72px 20px 56px}
  .ze-hero__inner{grid-template-columns:1fr;gap:28px}
  .ze-hub-wrap{max-width:620px;width:100%;margin:0 auto}
}
@media (max-width:520px){
  .ze-pod__game{display:none}     /* phones: pods show name + status only */
  .ze-pod--open span{display:none}
  .ze-pod--open{width:auto;min-width:0;height:auto;min-height:0;padding:.55em .9em}
}
@media (prefers-reduced-motion:reduce){
  .ze-hero *,.ze-hero *::before{animation:none!important;transition:none!important}
}