/* =====================================================================
   CATEGORY ZERO — "Niche Genesis" bespoke design system.
   This is neither the MetaX root-brand system (css/metax-root.css) nor
   an ordinary topic theme — Category Zero is the root category itself,
   the academy that teaches how any of the other 40 (or a 41st) gets
   built. Its visual identity is a "genesis / point-of-origin" motif:
   near-black void, a single radiating origin point, hairline coordinate
   grid, amber/ember accent — deliberately distinct from both the
   violet/cyan MetaX brand and any individual topic's palette.
   ===================================================================== */

:root {
  --gz-void: #060504;
  --gz-void-2: #0b0806;
  --gz-panel: rgba(30, 22, 14, 0.55);
  --gz-panel-solid: #14100a;
  --gz-line: rgba(245, 196, 81, 0.14);
  --gz-line-strong: rgba(245, 196, 81, 0.34);
  --gz-text: #f4efe6;
  --gz-muted: #b8ab96;
  --gz-dim: #7a6f5c;
  --gz-amber: #f5c451;
  --gz-ember: #ff6a3d;
  --gz-white: #fff8ec;
  --gz-grad-genesis: linear-gradient(120deg, #f5c451 0%, #ff6a3d 55%, #ffe9b0 100%);
  --gz-grad-text: linear-gradient(100deg, #ffe9b0, #f5c451 50%, #ff8a5c);
  --gz-radius: 20px;
  --gz-radius-sm: 12px;
  --gz-shadow-glow: 0 0 70px -14px rgba(245, 196, 81, 0.45);
  --gz-maxw: 1180px;
  --gz-font: "Space Grotesk", "Inter", system-ui, sans-serif;
  --gz-font-mono: "JetBrains Mono", "Space Grotesk", monospace;
  --gz-font-body: "Inter", system-ui, sans-serif;
}

body.gz-root { margin: 0; background: var(--gz-void); color: var(--gz-text); font-family: var(--gz-font-body); line-height: 1.65; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
body.gz-root * { box-sizing: border-box; }
body.gz-root h1, body.gz-root h2, body.gz-root h3, body.gz-root h4 { font-family: var(--gz-font); font-weight: 700; line-height: 1.16; letter-spacing: -0.01em; margin: 0 0 .5em; }
body.gz-root p { margin: 0 0 1em; color: var(--gz-muted); }
body.gz-root a { color: inherit; text-decoration: none; }
body.gz-root ul, body.gz-root ol { margin: 0; padding: 0; list-style: none; }

/* ---------- Void backdrop + origin point ---------- */
.gz-void { position: fixed; inset: 0; z-index: -3;
  background: radial-gradient(circle at 50% 42%, rgba(245,196,81,.16), transparent 42%), var(--gz-void); }
.gz-origin { position: fixed; top: 40%; left: 50%; width: 2px; height: 2px; z-index: -2; pointer-events: none; }
.gz-origin::before, .gz-origin::after { content: ""; position: absolute; top: 50%; left: 50%; border-radius: 50%; border: 1px solid var(--gz-line); transform: translate(-50%,-50%); }
.gz-origin::before { width: 480px; height: 480px; animation: gzRing1 30s linear infinite; }
.gz-origin::after { width: 820px; height: 820px; animation: gzRing2 46s linear infinite reverse; opacity: .6; }
@keyframes gzRing1 { from{transform:translate(-50%,-50%) rotate(0);} to{transform:translate(-50%,-50%) rotate(360deg);} }
@keyframes gzRing2 { from{transform:translate(-50%,-50%) rotate(0);} to{transform:translate(-50%,-50%) rotate(360deg);} }
.gz-grid-veil { position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image: linear-gradient(rgba(245,196,81,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(245,196,81,.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 25%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 25%, transparent 75%); }

.gz-wrap { width: 100%; max-width: var(--gz-maxw); margin: 0 auto; padding: 0 20px; }
.gz-sect { position: relative; padding: 72px 0; }
.gz-sect-tight { padding: 40px 0; }
.gz-coord { font-family: var(--gz-font-mono); font-size: .72rem; letter-spacing: .18em; color: var(--gz-dim); text-transform: uppercase; }
.gz-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--gz-font); font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gz-amber); font-weight: 600; padding: 6px 14px; border: 1px solid var(--gz-line-strong); border-radius: 100px; background: rgba(245,196,81,.06); margin-bottom: 18px; }
.gz-gradient-text { background: var(--gz-grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.gz-title { font-size: clamp(1.9rem, 6vw, 3.1rem); margin-bottom: 14px; }
.gz-lead-txt { color: var(--gz-muted); max-width: 64ch; font-size: 1.02rem; }

/* ---------- Nav (minimal, bespoke — not the MetaX mega nav) ---------- */
.gz-nav { position: sticky; top: 0; z-index: 400; backdrop-filter: blur(16px); background: rgba(6,5,4,.7); border-bottom: 1px solid var(--gz-line); }
.gz-nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; height: 64px; max-width: var(--gz-maxw); margin: 0 auto; padding: 0 20px; }
.gz-back { display: flex; align-items: center; gap: 8px; color: var(--gz-muted); font-size: .85rem; }
.gz-back:hover { color: var(--gz-amber); }
.gz-nav-badge { font-family: var(--gz-font-mono); font-size: .68rem; letter-spacing: .18em; color: var(--gz-amber); text-transform: uppercase; border: 1px solid var(--gz-line-strong); border-radius: 100px; padding: 6px 12px; }

/* ---------- Buttons ---------- */
.gz-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 100px; font-family: var(--gz-font); font-weight: 600; font-size: .95rem; cursor: pointer; border: none; transition: transform .2s, box-shadow .2s; white-space: nowrap; }
.gz-btn-primary { background: var(--gz-grad-genesis); color: #1a1206; box-shadow: var(--gz-shadow-glow); }
.gz-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 0 90px -10px rgba(245,196,81,.65); }
.gz-btn-ghost { background: var(--gz-panel); color: var(--gz-text); border: 1px solid var(--gz-line-strong); }
.gz-btn-ghost:hover { border-color: var(--gz-amber); color: var(--gz-amber); transform: translateY(-3px); }

/* ---------- Hero ---------- */
.gz-hero { position: relative; text-align: center; padding: clamp(50px,9vw,96px) 20px clamp(34px,5vw,60px); }
.gz-hero .gz-zero { font-family: var(--gz-font-mono); font-size: clamp(5rem, 22vw, 11rem); font-weight: 700; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(245,196,81,.5); opacity: .5; margin-bottom: -30px; user-select: none; }
.gz-hero h1 { font-size: clamp(2.3rem, 8vw, 4.4rem); margin: 8px 0 18px; max-width: 22ch; margin-left: auto; margin-right: auto; }
.gz-hero .gz-lead { color: var(--gz-muted); font-size: clamp(1rem, 3.2vw, 1.2rem); max-width: 62ch; margin: 0 auto 26px; }
.gz-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-bottom: 8px; }

/* ---------- Stat rail ---------- */
.gz-rail { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; margin-top: 40px; padding-top: 34px; border-top: 1px solid var(--gz-line); }
.gz-rail-item { text-align: center; min-width: 120px; }
.gz-rail-item .num { font-family: var(--gz-font-mono); font-size: 1.6rem; color: var(--gz-amber); }
.gz-rail-item .lbl { font-size: .74rem; color: var(--gz-dim); text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; }

/* ---------- Vacancy comparison table ---------- */
.gz-vacancy-grid { display: grid; gap: 14px; margin-top: 30px; }
.gz-vacancy-row { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 18px 20px; border-radius: var(--gz-radius-sm); background: var(--gz-panel); border: 1px solid var(--gz-line); }
.gz-vacancy-row .vf { font-family: var(--gz-font); font-weight: 600; color: var(--gz-white); font-size: .96rem; }
.gz-vacancy-row .vg { color: var(--gz-muted); font-size: .88rem; }
.gz-vacancy-row .vx { color: var(--gz-ember); font-size: .82rem; font-weight: 600; }
@media (min-width: 760px) { .gz-vacancy-row { grid-template-columns: 1.1fr 1.6fr 1fr; align-items: center; gap: 18px; } }

/* ---------- Method / 5 stages ---------- */
.gz-method-grid { display: grid; gap: 18px; grid-template-columns: 1fr; margin-top: 30px; }
.gz-method-card { position: relative; padding: 26px 24px 24px; border-radius: var(--gz-radius); background: var(--gz-panel); border: 1px solid var(--gz-line); transition: transform .3s, border-color .3s; }
.gz-method-card:hover { transform: translateY(-6px); border-color: var(--gz-line-strong); }
.gz-method-card .mno { font-family: var(--gz-font-mono); font-size: .78rem; color: var(--gz-amber); letter-spacing: .1em; }
.gz-method-card h3 { font-size: 1.12rem; margin: 8px 0; }
.gz-method-card p { font-size: .9rem; margin-bottom: 0; }
@media (min-width: 700px) { .gz-method-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1040px) { .gz-method-grid.cols-5 { grid-template-columns: repeat(5,1fr); } }

/* ---------- Course Series TOC (accordion) ---------- */
.gz-toc { margin-top: 30px; border-radius: var(--gz-radius); border: 1px solid var(--gz-line); overflow: hidden; }
.gz-toc-module { border-bottom: 1px solid var(--gz-line); }
.gz-toc-module:last-child { border-bottom: none; }
.gz-toc-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 22px; cursor: pointer; background: var(--gz-panel); transition: background .2s; }
.gz-toc-head:hover { background: rgba(245,196,81,.06); }
.gz-toc-head .thn { font-family: var(--gz-font-mono); color: var(--gz-amber); font-size: .8rem; flex-shrink: 0; }
.gz-toc-head h4 { margin: 0; font-size: 1rem; flex: 1; }
.gz-toc-head .tlessons { font-size: .76rem; color: var(--gz-dim); white-space: nowrap; }
.gz-toc-head .tchev { color: var(--gz-dim); transition: transform .25s; }
.gz-toc-module.open .tchev { transform: rotate(180deg); }
.gz-toc-body { max-height: 0; overflow: hidden; transition: max-height .35s ease; background: rgba(255,255,255,.015); }
.gz-toc-module.open .gz-toc-body { max-height: 900px; }
.gz-toc-body ul { padding: 4px 22px 20px 60px; }
.gz-toc-body li { padding: 8px 0; font-size: .88rem; color: var(--gz-muted); border-bottom: 1px dashed var(--gz-line); }
.gz-toc-body li:last-child { border-bottom: none; }
.gz-toc-body li .lnum { color: var(--gz-dim); font-family: var(--gz-font-mono); font-size: .78rem; margin-right: 10px; }

/* ---------- Book series ---------- */
.gz-book-grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 26px; }
.gz-book-card { padding: 24px; border-radius: var(--gz-radius-sm); background: var(--gz-panel); border: 1px solid var(--gz-line); }
.gz-book-card .bvol { font-family: var(--gz-font-mono); font-size: .74rem; color: var(--gz-amber); letter-spacing: .1em; text-transform: uppercase; }
.gz-book-card h4 { font-size: 1.02rem; margin: 8px 0; }
.gz-book-card p { font-size: .88rem; margin-bottom: 0; }
@media (min-width: 700px) { .gz-book-grid { grid-template-columns: repeat(3,1fr); } }

/* ---------- Founding / community section ---------- */
.gz-cred-ladder { display: grid; gap: 14px; margin-top: 26px; }
.gz-cred-rung { display: flex; gap: 16px; align-items: flex-start; padding: 20px; border-radius: var(--gz-radius-sm); background: var(--gz-panel); border: 1px solid var(--gz-line); }
.gz-cred-rung .rn { font-family: var(--gz-font-mono); color: var(--gz-amber); font-size: 1.1rem; flex-shrink: 0; width: 26px; }
.gz-cred-rung h4 { font-size: .98rem; margin-bottom: 4px; }
.gz-cred-rung p { font-size: .87rem; margin-bottom: 0; }

/* ---------- CTA / form ---------- */
.gz-cta-band { text-align: center; border-radius: var(--gz-radius); padding: 56px 26px; position: relative; overflow: hidden; background: radial-gradient(ellipse at 50% 0%, rgba(245,196,81,.16), transparent 70%), var(--gz-void-2); border: 1px solid var(--gz-line-strong); }
.gz-cta-band h2 { font-size: clamp(1.8rem,6vw,2.8rem); margin-bottom: 14px; }
.gz-cta-band p { color: var(--gz-muted); max-width: 58ch; margin: 0 auto 28px; }

.gz-form-card { background: var(--gz-panel); border: 1px solid var(--gz-line); border-radius: var(--gz-radius); padding: 28px; max-width: 620px; margin: 0 auto; }
.gz-form-card .form-row { margin-bottom: 16px; text-align: left; }
.gz-form-card label { display: block; font-size: .82rem; font-weight: 600; color: var(--gz-muted); margin-bottom: 6px; }
.gz-form-card input, .gz-form-card select, .gz-form-card textarea { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--gz-line-strong); background: rgba(6,5,4,.7); color: var(--gz-text); font-family: var(--gz-font-body); font-size: .92rem; }
.gz-form-card textarea { resize: vertical; min-height: 90px; }
.gz-form-card input:focus, .gz-form-card select:focus, .gz-form-card textarea:focus { outline: none; border-color: var(--gz-amber); }
.gz-form-consent { display: flex; align-items: flex-start; gap: 10px; font-size: .8rem; color: var(--gz-dim); margin-bottom: 18px; text-align: left; }
.gz-form-consent input { width: auto; margin-top: 3px; }
.gz-form-success { display: none; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 12px; background: rgba(62,230,176,.1); border: 1px solid rgba(62,230,176,.4); color: #3ee6b0; font-size: .9rem; margin-top: 14px; }
.gz-form-success.show { display: flex; }

/* ---------- Footer ---------- */
.gz-footer { border-top: 1px solid var(--gz-line); padding: 40px 0; margin-top: 20px; }
.gz-footer-inner { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; }
.gz-footer p { font-size: .82rem; color: var(--gz-dim); margin: 0; }
.gz-footer a { color: var(--gz-muted); font-size: .82rem; }
.gz-footer a:hover { color: var(--gz-amber); }

/* ---------- Reveal ---------- */
.gz-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.gz-reveal.in { opacity: 1; transform: translateY(0); }
.gz-page-fade { animation: gzPageIn .6s ease both; }
@keyframes gzPageIn { from{opacity:0;transform:translateY(14px);} to{opacity:1;transform:none;} }