/*
  ZorX — Creator Studio homepage stylesheet (redesign).
  ==================================================================
  WHAT: The dedicated, scoped stylesheet for the new premium homepage
        (Creator Studio for Streamers). Visual target = the reference
        mock: dark immersive atmosphere, mint-green + purple accents,
        cinematic hero, app-like bento cards, glowing CTAs.

  STATUS (Step 1 of the homepage rebuild): FOUNDATION ONLY.
        This file is NOT linked into any page yet, so it renders
        nothing and cannot affect the live site. Later steps will add
        the <link> and the matching markup.

  ARCHITECTURE / SAFETY:
    - Every class is namespaced .zx-home-* / .zx-hero-* / .zx-bento-* /
      .zx-card-* / .zx-trust-* / .zx-cta-* / .zx-nav-* / .zx-mock-* /
      .zx-sec-*. These namespaces were verified UNUSED anywhere in the
      codebase, so this file cannot restyle any existing element.
    - All rules are SCOPED under .zx-home (a wrapper the new homepage
      markup will carry) so nothing here can leak to /features/* pages,
      the auth modal, the profile overlay, or Team Builder — even after
      this file is linked globally.
    - Builds on the Phase-0 design tokens (--zxd-*, defined in
      zorx-ui.css) via var() with literal fallbacks, so the file is
      self-sufficient regardless of load order.
    - No global resets, no element selectors outside .zx-home, no
      !important walls, no large animation loops.

  RULES (see CLAUDE.md): UTF-8 no BOM, LF. Refine the neon-on-dark
  identity; mint (#00ff99) is the interactive accent, purple is the
  secondary highlight, brand neon (#aaff14) stays for the logo/brand.
*/

/* ==================================================================
   0. HOME-SCOPED TOKENS
   ================================================================== */
.zx-home {
  /* Accents (reuse Phase-0 mint; add the reference's purple) */
  --zx-mint: var(--zxd-mint, #00ff99);
  --zx-mint-2: var(--zxd-mint-2, #00ffae);
  --zx-mint-soft: var(--zxd-mint-soft, rgba(0, 255, 153, 0.12));
  --zx-mint-line: var(--zxd-mint-line, rgba(0, 255, 153, 0.32));
  --zx-purple: #8b5cf6;
  --zx-purple-2: #a855f7;
  --zx-purple-soft: rgba(139, 92, 246, 0.14);
  --zx-purple-line: rgba(139, 92, 246, 0.34);

  /* Surfaces (premium black layering) */
  --zx-bg: var(--bg, #0a0d0a);
  --zx-bg-2: #0b0f0c;
  --zx-panel: rgba(18, 24, 20, 0.72);
  --zx-panel-2: rgba(13, 18, 15, 0.85);
  --zx-card-border: rgba(255, 255, 255, 0.08);
  --zx-card-border-hi: rgba(255, 255, 255, 0.14);

  /* Ink */
  --zx-ink: var(--ink, #eaffee);
  --zx-ink-dim: var(--ink-dim, #9ab09b);
  --zx-ink-muted: var(--ink-muted, #5a6c5b);

  /* Radius / shadow / motion (reuse where possible) */
  --zx-r: 16px;
  --zx-r-lg: 22px;
  --zx-r-pill: 999px;
  --zx-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  --zx-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
  --zx-glow-mint: 0 0 28px rgba(0, 255, 153, 0.28);
  --zx-glow-purple: 0 0 30px rgba(139, 92, 246, 0.30);
  --zx-ease: var(--zxd-ease, cubic-bezier(0.16, 1, 0.3, 1));
  --zx-dur-1: var(--zxd-dur-1, 0.16s);
  --zx-dur-2: var(--zxd-dur-2, 0.28s);

  /* Rhythm */
  --zx-sec-pad: clamp(56px, 8vw, 104px);
  --zx-container: 1180px;
  --zx-gap: 18px;
}

/* ==================================================================
   1. BACKGROUND SYSTEM — dark layered atmosphere + grid + glow
   ================================================================== */
.zx-home {
  position: relative;
  background: var(--zx-bg);
  color: var(--zx-ink);
  isolation: isolate;
}
/* Subtle grid + ambient glow, behind everything (no pointer cost). */
.zx-home::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(120% 80% at 50% 0%, #000 38%, transparent 78%);
}
.zx-home::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(60% 42% at 18% 8%, rgba(0, 255, 153, 0.10), transparent 60%),
    radial-gradient(52% 40% at 88% 12%, rgba(139, 92, 246, 0.12), transparent 62%),
    radial-gradient(80% 60% at 50% 120%, rgba(0, 255, 174, 0.06), transparent 70%);
}
/* Section separator: a faint top seam (opt-in). */
.zx-sec-seam {
  position: relative;
}
.zx-sec-seam::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.10) 50%, transparent);
}

/* ==================================================================
   2. LAYOUT — containers, sections, compact rhythm
   ================================================================== */
.zx-home-container {
  width: min(100% - 40px, var(--zx-container));
  margin-inline: auto;
}
.zx-sec {
  position: relative;
  padding-block: var(--zx-sec-pad);
  z-index: var(--zxd-z-base, 1);
}
.zx-sec--tight { padding-block: clamp(40px, 5vw, 64px); }
.zx-sec-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 36px;
  max-width: 640px;
}
.zx-sec-head--split {
  max-width: none;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* ==================================================================
   3. TYPOGRAPHY — display, titles, body, kickers
   ================================================================== */
.zx-home-display {
  font-family: var(--display, 'Bebas Neue', sans-serif);
  font-size: clamp(44px, 7.5vw, 104px);
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin: 0;
  color: var(--zx-ink);
}
.zx-home-display .zx-line { display: block; }
.zx-home-display .zx-line--mint { color: var(--zx-mint); text-shadow: 0 0 30px rgba(0, 255, 153, 0.22); }
.zx-home-display .zx-line--purple { color: var(--zx-purple-2); text-shadow: 0 0 30px rgba(139, 92, 246, 0.26); }
.zx-home-title {
  font-family: var(--display, 'Bebas Neue', sans-serif);
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.0;
  letter-spacing: 0.01em;
  margin: 0;
  color: var(--zx-ink);
}
.zx-home-title .zx-accent { color: var(--zx-purple-2); }
.zx-home-lead {
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.6;
  color: var(--zx-ink-dim);
  max-width: 46ch;
  margin: 0;
}
.zx-home-sub {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--zx-ink-dim);
  margin: 0;
}
.zx-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--zx-mint-2);
  padding: 5px 12px;
  border-radius: var(--zx-r-pill);
  border: 1px solid var(--zx-mint-line);
  background: var(--zx-mint-soft);
}
.zx-kicker--purple {
  color: var(--zx-purple-2);
  border-color: var(--zx-purple-line);
  background: var(--zx-purple-soft);
}
.zx-kicker__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

/* ==================================================================
   4. BUTTON SYSTEM — glowing mint primary, dark outline secondary
   ================================================================== */
.zx-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--body, 'Inter', sans-serif);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  padding: 13px 22px;
  border-radius: 12px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--zx-dur-1) var(--zx-ease),
              box-shadow var(--zx-dur-2) var(--zx-ease),
              background-color var(--zx-dur-2) var(--zx-ease),
              border-color var(--zx-dur-2) var(--zx-ease),
              color var(--zx-dur-2) var(--zx-ease);
}
.zx-cta svg { transition: transform var(--zx-dur-1) var(--zx-ease); }
.zx-cta:active { transform: translateY(1px); }
.zx-cta:focus-visible { outline: none; box-shadow: var(--zxd-focus-ring, 0 0 0 2px #0a0d0a, 0 0 0 4px #00ff99); }
.zx-cta--primary {
  background: linear-gradient(180deg, var(--zx-mint-2), var(--zx-mint));
  color: #04130c;
  border-color: var(--zx-mint);
  box-shadow: var(--zx-glow-mint);
}
.zx-cta--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 36px rgba(0, 255, 153, 0.45);
}
.zx-cta--primary:hover svg { transform: translateX(3px); }
.zx-cta--secondary {
  background: rgba(255, 255, 255, 0.03);
  color: var(--zx-ink);
  border-color: var(--zx-card-border-hi);
}
.zx-cta--secondary:hover {
  border-color: var(--zx-mint-line);
  color: var(--zx-mint-2);
}
.zx-cta--ghost {
  background: transparent;
  color: var(--zx-ink-dim);
  border-color: transparent;
  padding-inline: 12px;
}
.zx-cta--ghost:hover { color: var(--zx-ink); }
.zx-cta--lg { padding: 15px 28px; font-size: 15px; }
.zx-cta--block { width: 100%; }

/* ==================================================================
   5. NAVBAR — sticky premium app-bar (opt-in classes)
   ================================================================== */
.zx-nav {
  position: sticky;
  top: 0;
  z-index: var(--zxd-z-sticky, 100);
  background: linear-gradient(180deg, rgba(8, 11, 9, 0.92), rgba(8, 11, 9, 0.62));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.zx-nav__inner {
  width: min(100% - 40px, var(--zx-container));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 18px;
  height: 64px;
}
.zx-nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-inline: auto;
}
.zx-nav__link {
  font-size: 13.5px;
  color: var(--zx-ink-dim);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 9px;
  transition: color var(--zx-dur-2) var(--zx-ease), background-color var(--zx-dur-2) var(--zx-ease);
}
.zx-nav__link:hover { color: var(--zx-ink); background: rgba(255, 255, 255, 0.04); }
.zx-nav__link--active { color: var(--zx-mint-2); }
.zx-nav__cta { display: flex; align-items: center; gap: 10px; }
.zx-nav__burger {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid var(--zx-card-border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--zx-ink);
  place-items: center;
  cursor: pointer;
}

/* ==================================================================
   6. CARD / BENTO SYSTEM — premium bordered glass-dark cards
   ================================================================== */
.zx-bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--zx-gap);
}
.zx-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border-radius: var(--zx-r-lg);
  border: 1px solid var(--zx-card-border);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 40%),
    var(--zx-panel);
  box-shadow: var(--zx-shadow);
  overflow: hidden;
  text-decoration: none;
  color: var(--zx-ink);
  transition: transform var(--zx-dur-2) var(--zx-ease),
              border-color var(--zx-dur-2) var(--zx-ease),
              box-shadow var(--zx-dur-2) var(--zx-ease);
}
/* Lit top edge for depth. */
.zx-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18) 50%, transparent);
}
.zx-card:hover {
  transform: translateY(-4px);
  border-color: var(--zx-mint-line);
  box-shadow: var(--zx-shadow-lg), 0 0 30px rgba(0, 255, 153, 0.10);
}
.zx-card--purple:hover {
  border-color: var(--zx-purple-line);
  box-shadow: var(--zx-shadow-lg), 0 0 30px rgba(139, 92, 246, 0.14);
}
/* Bento sizing utilities. */
.zx-card--span2 { grid-column: span 2; }
.zx-card--span3 { grid-column: span 3; }
.zx-card--feature { grid-column: span 3; min-height: 300px; }

.zx-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.zx-card__badge {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--zx-mint-2);
  border: 1px solid var(--zx-mint-line);
  background: var(--zx-mint-soft);
  padding: 3px 9px;
  border-radius: var(--zx-r-pill);
  white-space: nowrap;
}
.zx-card__badge--purple { color: var(--zx-purple-2); border-color: var(--zx-purple-line); background: var(--zx-purple-soft); }
.zx-card__title {
  font-family: var(--display, 'Bebas Neue', sans-serif);
  font-size: clamp(20px, 2vw, 28px);
  letter-spacing: 0.01em;
  margin: 0;
}
.zx-card__desc { font-size: 13px; line-height: 1.5; color: var(--zx-ink-dim); margin: 0; }
.zx-card__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--zx-ink);
}
.zx-card__cta svg { transition: transform var(--zx-dur-1) var(--zx-ease); }
.zx-card:hover .zx-card__cta { color: var(--zx-mint-2); }
.zx-card:hover .zx-card__cta svg { transform: translateX(3px); }

/* ==================================================================
   7. MOCK WINDOW SYSTEM — editor frame, topbar, side panel
   ================================================================== */
.zx-mock-win {
  position: relative;
  border-radius: var(--zx-r);
  border: 1px solid var(--zx-card-border-hi);
  background: var(--zx-panel-2);
  box-shadow: var(--zx-shadow-lg);
  overflow: hidden;
}
.zx-mock-win__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--zx-card-border);
  background: rgba(255, 255, 255, 0.02);
}
.zx-mock-win__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--zx-ink-muted); }
.zx-mock-win__dot--live { background: #ff4d6d; box-shadow: 0 0 8px rgba(255, 77, 109, 0.7); margin-left: auto; }
.zx-mock-win__body { display: grid; grid-template-columns: 1fr 168px; min-height: 240px; }
.zx-mock-win__stage {
  position: relative;
  background:
    radial-gradient(80% 80% at 50% 40%, rgba(139, 92, 246, 0.16), transparent 60%),
    linear-gradient(160deg, #0c130e, #0a0d0a);
}
/* Stage scanline + lower-third (pure CSS, no asset). */
.zx-mock-win__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 4px);
  opacity: 0.5;
}
.zx-mock-win__stage::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 14%;
  height: 24%;
  border-radius: 10px;
  border: 1px solid var(--zx-mint-line);
  background: linear-gradient(90deg, rgba(0, 255, 153, 0.20), rgba(0, 255, 174, 0.04));
}
.zx-mock-win__panel {
  border-left: 1px solid var(--zx-card-border);
  background: rgba(255, 255, 255, 0.015);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.zx-mock-win__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  color: var(--zx-ink-dim);
}
.zx-mock-win__chip {
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
}
/* Generic media mock (reuses Phase-0 .zxd-mock__media if present). */
.zx-mock-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  border: 1px solid var(--zx-card-border);
  background: linear-gradient(160deg, #0e150f, #0a0d0a);
  overflow: hidden;
}
.zx-mock-media::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* ==================================================================
   8. HERO LAYOUT
   ================================================================== */
.zx-hero {
  position: relative;
  padding: clamp(56px, 9vh, 110px) 0 clamp(40px, 6vh, 72px);
}
.zx-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.zx-hero__copy { display: flex; flex-direction: column; gap: 20px; }
.zx-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.zx-hero__pills { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.zx-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--zx-ink-dim);
  padding: 7px 12px;
  border-radius: var(--zx-r-pill);
  border: 1px solid var(--zx-card-border);
  background: rgba(255, 255, 255, 0.02);
}
.zx-pill svg { color: var(--zx-mint-2); }

/* Small hero sponsor credit (replaces the old feature pills) */
.zx-powered {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  letter-spacing: .2px;
  color: var(--zx-ink-dim);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: var(--zx-r-pill);
  border: 1px solid var(--zx-card-border);
  background: rgba(255, 255, 255, 0.02);
  transition: border-color .18s ease, color .18s ease;
}
.zx-powered strong { color: var(--zx-mint-2); font-weight: 700; }
.zx-powered:hover { border-color: var(--zx-mint-2); color: var(--zx-ink); }

/* ==================================================================
   9. TRUST STRIP
   ================================================================== */
.zx-trust {
  border-block: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.012);
}
.zx-trust__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding-block: 16px;
}
.zx-trust__item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--zx-ink-dim);
}
.zx-trust__item svg { color: var(--zx-mint-2); }
/* Stat variant (numbers ONLY when verified; otherwise hidden via markup). */
.zx-trust__stat { display: flex; flex-direction: column; gap: 2px; }
.zx-trust__num { font-family: var(--display, 'Bebas Neue', sans-serif); font-size: clamp(24px, 2.6vw, 34px); color: var(--zx-ink); }
.zx-trust__num--purple { color: var(--zx-purple-2); }
.zx-trust__lbl { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--zx-ink-muted); }

/* ==================================================================
   10. FEATURE BAND ("Everything you need")
   ================================================================== */
.zx-feat {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--zx-gap);
}
.zx-feat__item { display: flex; flex-direction: column; gap: 8px; }
.zx-feat__icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--zx-mint-2);
  border: 1px solid var(--zx-mint-line);
  background: var(--zx-mint-soft);
}
.zx-feat__icon--purple { color: var(--zx-purple-2); border-color: var(--zx-purple-line); background: var(--zx-purple-soft); }
.zx-feat__title { font-family: var(--display, 'Bebas Neue', sans-serif); font-size: 19px; }
.zx-feat__desc { font-size: 12.5px; line-height: 1.5; color: var(--zx-ink-dim); }

/* ==================================================================
   11. PRICING TEASER (Free vs Pro)
   ================================================================== */
.zx-price { display: grid; grid-template-columns: 1fr 1fr; gap: var(--zx-gap); max-width: 760px; }
.zx-price__card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 26px;
  border-radius: var(--zx-r-lg);
  border: 1px solid var(--zx-card-border);
  background: var(--zx-panel);
}
.zx-price__card--pro {
  border-color: var(--zx-mint-line);
  box-shadow: var(--zx-glow-mint);
  background:
    linear-gradient(180deg, rgba(0, 255, 153, 0.05), transparent 45%),
    var(--zx-panel);
}
.zx-price__name { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--zx-ink-dim); }
.zx-price__amount { font-family: var(--display, 'Bebas Neue', sans-serif); font-size: clamp(38px, 5vw, 56px); line-height: 1; }
.zx-price__amount span { font-size: 0.4em; color: var(--zx-ink-muted); }
.zx-price__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.zx-price__list li { font-size: 13px; color: var(--zx-ink-dim); display: flex; gap: 9px; align-items: flex-start; }
.zx-price__list li svg { color: var(--zx-mint-2); flex: none; margin-top: 2px; }

/* ==================================================================
   12. FINAL CTA PANEL (purple/green gradient)
   ================================================================== */
.zx-finalcta {
  position: relative;
  border-radius: var(--zx-r-lg);
  padding: clamp(28px, 5vw, 52px);
  border: 1px solid var(--zx-purple-line);
  background:
    radial-gradient(80% 140% at 0% 0%, rgba(139, 92, 246, 0.22), transparent 55%),
    radial-gradient(80% 140% at 100% 100%, rgba(0, 255, 153, 0.16), transparent 55%),
    var(--zx-panel-2);
  box-shadow: var(--zx-shadow-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  overflow: hidden;
}
.zx-finalcta__title { font-family: var(--display, 'Bebas Neue', sans-serif); font-size: clamp(28px, 4vw, 44px); line-height: 1.0; margin: 0; }
.zx-finalcta__title .zx-accent { color: var(--zx-purple-2); }
.zx-finalcta__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ==================================================================
   13. FOOTER
   ================================================================== */
.zx-foot {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.012);
  padding-block: clamp(40px, 6vw, 64px) 28px;
}
.zx-foot__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 28px;
}
.zx-foot__col { display: flex; flex-direction: column; gap: 10px; }
.zx-foot__h { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--zx-ink-muted); margin-bottom: 4px; }
.zx-foot__link { font-size: 13px; color: var(--zx-ink-dim); text-decoration: none; transition: color var(--zx-dur-2) var(--zx-ease); }
.zx-foot__link:hover { color: var(--zx-mint-2); }
.zx-foot__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 12px;
  color: var(--zx-ink-muted);
}
.zx-foot__social { display: flex; gap: 10px; }
.zx-foot__social a {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--zx-ink-dim);
  border: 1px solid var(--zx-card-border);
  background: rgba(255, 255, 255, 0.02);
  transition: color var(--zx-dur-2) var(--zx-ease), border-color var(--zx-dur-2) var(--zx-ease);
}
.zx-foot__social a:hover { color: var(--zx-mint-2); border-color: var(--zx-mint-line); }

/* ==================================================================
   14. RESPONSIVE — desktop-first, tablet, mobile (no h-overflow)
   ================================================================== */
@media (max-width: 1024px) {
  .zx-home-display { font-size: clamp(40px, 9vw, 78px); }
  .zx-hero__grid { grid-template-columns: 1fr; }
  .zx-hero__visual { order: -1; }
  .zx-bento { grid-template-columns: repeat(4, 1fr); }
  .zx-card--feature, .zx-card--span3 { grid-column: span 4; min-height: 0; }
  .zx-card--span2 { grid-column: span 2; }
  .zx-feat { grid-template-columns: repeat(2, 1fr); }
  .zx-foot__grid { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 720px) {
  .zx-nav__links { display: none; }
  .zx-nav__cta .zx-cta:not(.zx-nav__burger) { display: none; }
  .zx-nav__burger { display: grid; }
  .zx-bento { grid-template-columns: 1fr; }
  .zx-card--feature, .zx-card--span3, .zx-card--span2 { grid-column: span 1; }
  .zx-price { grid-template-columns: 1fr; }
  .zx-mock-win__body { grid-template-columns: 1fr; }
  .zx-mock-win__panel { display: none; }
  .zx-feat { grid-template-columns: 1fr 1fr; }
  .zx-foot__grid { grid-template-columns: 1fr 1fr; }
  .zx-sec-head--split { flex-direction: column; align-items: flex-start; }
  .zx-finalcta { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 420px) {
  .zx-feat { grid-template-columns: 1fr; }
  .zx-foot__grid { grid-template-columns: 1fr; }
  .zx-hero__actions .zx-cta { flex: 1 1 auto; }
}

/* ==================================================================
   15. MOTION — subtle only, reduced-motion safe
   ================================================================== */
@media (prefers-reduced-motion: reduce) {
  .zx-cta,
  .zx-card,
  .zx-nav__link,
  .zx-foot__link,
  .zx-foot__social a { transition: none; }
  .zx-cta:hover,
  .zx-card:hover { transform: none; }
}
/* End zorx-home.css */