@import url('/css/styles.css?v=8d8ba006');

/* ============================================================
   ZENITH SUITE — the home-home (/)
   A living sky: starfield fade-in, Earth peeking from below,
   the sun tracking across, the moon centered and changing phase.
   Shares the v1 design system; adds the hero + the app constellation.
   ============================================================ */

/* ------------------------------------------------------------
   CLEAN & SHARP — Zenith's own voice, not the studio's terminal.
   No monospace, no [ bracket ] chrome. The home speaks in light,
   crisp sans on black. (suite.css loads only here, so this is
   scoped to the home; the launcher keeps its own system.)
   ------------------------------------------------------------ */
body {
  --zx-mono: var(--zx-sans);   /* retire the "computer type" everywhere on the home */
  text-rendering: optimizeLegibility;
}
.zx-eyebrow { font-weight: 300; letter-spacing: .16em; }
.zx-docs-label { letter-spacing: .14em; }

/* buttons: clean, no brackets, a hairline that sharpens on hover */
.zx-bracket {
  font-weight: 400; letter-spacing: .04em; font-size: 13px;
  border-color: rgba(232, 232, 230, .22); border-radius: 3px; padding: 9px 16px;
}
.zx-bracket:hover { border-color: rgba(232, 232, 230, .8); }
/* the primary action reads as a clean solid, not a terminal token */
.zx-header-right a.zx-bracket:last-child { background: #E8E8E6; color: #000; border-color: #E8E8E6; }
.zx-header-right a.zx-bracket:last-child:hover { background: #fff; color: #000; }

/* waitlist: clean sans field + solid button */
.zx-form input[type="email"] { letter-spacing: 0; font-weight: 300; }
.zx-submit { font-weight: 500; letter-spacing: .02em; }
.zx-confirm, .zx-form-error { letter-spacing: 0; font-weight: 300; }

/* the hero canvas is the whole backdrop */
#zx-sky {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  z-index: 0; display: block; pointer-events: none;
}

/* ---------- hero ---------- */

.zs-hero {
  position: relative; z-index: 2;
  min-height: 100svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  text-align: center;
  padding: 0 24px clamp(90px, 16vh, 190px);
}

.zs-hero-inner {
  opacity: 0;
  animation: zsHeroIn 1.6s cubic-bezier(.16,1,.3,1) .5s forwards;
}
@keyframes zsHeroIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.zs-title {
  font: 100 clamp(48px, 11vw, 118px)/.96 var(--zx-sans);
  letter-spacing: -.03em; margin: 0; color: #E8E8E6;
  text-shadow: 0 0 44px rgba(232, 232, 230, .18);
}
.zs-subtitle {
  font: 300 clamp(13px, 2.1vw, 18px)/1.5 var(--zx-mono);
  letter-spacing: .12em; text-transform: lowercase;
  color: var(--zx-t-60); margin: 20px 0 0;
  text-wrap: pretty;
}
.zs-hero-cue {
  margin-top: clamp(34px, 6vh, 60px);
  font: 300 11.5px/1.6 var(--zx-mono);
  letter-spacing: .18em; color: var(--zx-t-35);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.zs-hero-cue .zx-cue { font-size: 15px; }

/* ---------- the app constellation ---------- */

.zs-suite {
  position: relative; z-index: 2;
  max-width: 1120px; margin: 0 auto;
  padding: clamp(60px, 10vh, 120px) var(--zx-gut) clamp(40px, 8vh, 90px);
}
.zs-suite-head { text-align: center; margin-bottom: clamp(40px, 6vh, 70px); }
.zs-suite-head .zx-eyebrow { justify-content: center; }
.zs-suite-head h2 {
  font: 200 clamp(26px, 4.4vw, 46px)/1.08 var(--zx-sans);
  letter-spacing: -.02em; margin: 0 auto; max-width: 22ch; text-wrap: pretty;
}

.zs-apps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
  list-style: none; padding: 0; margin: 0;
}
.zs-app {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  border: 1px solid var(--zx-line); border-radius: 6px;
  padding: 26px 24px 28px;
  background: linear-gradient(180deg, rgba(232,232,230,.02), transparent);
  color: inherit;
  transition: border-color .4s var(--zx-ease), transform .4s var(--zx-ease), background .4s;
}
a.zs-app:hover {
  border-color: rgba(232, 232, 230, .30);
  transform: translateY(-3px);
  background: linear-gradient(180deg, rgba(232,232,230,.04), transparent);
}
.zs-app-top { display: flex; align-items: center; gap: 12px; }
.zs-app-glyph {
  width: 30px; height: 30px; flex: none;
  color: var(--zs-accent, #E8E8E6);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--zs-accent, #E8E8E6) 55%, transparent));
}
.zs-app-name {
  font: 300 18px/1.2 var(--zx-sans); color: #E8E8E6;
}
.zs-app-tag {
  font: 300 14px/1.55 var(--zx-sans); color: var(--zx-t-55); margin: 0;
}
.zs-app-soon {
  position: absolute; top: 18px; right: 20px;
  font: 300 10px/1 var(--zx-mono); letter-spacing: .2em;
  color: var(--zx-t-32); text-transform: lowercase;
}
.zs-app--soon { cursor: default; }
.zs-app-cta {
  margin-top: auto;
  font: 300 11.5px/1 var(--zx-mono); letter-spacing: .12em;
  color: var(--zs-accent, var(--zx-t-60));
  opacity: 0; transform: translateY(4px);
  transition: opacity .3s, transform .3s;
}
a.zs-app:hover .zs-app-cta { opacity: .85; transform: none; }

/* ---------- suite footer strip ---------- */

.zs-band {
  position: relative; z-index: 2;
  max-width: 1120px; margin: 0 auto;
  padding: clamp(50px, 8vh, 96px) var(--zx-gut);
  text-align: center;
  border-top: 1px solid var(--zx-line-soft);
}
.zs-band h2 {
  font: 100 clamp(30px, 6vw, 62px)/1 var(--zx-sans);
  letter-spacing: -.03em; margin: 0 0 20px;
}
.zs-band p {
  font: 300 15px/1.6 var(--zx-sans); color: var(--zx-t-55);
  max-width: 46ch; margin: 0 auto 34px;
}

/* home reuses the shared waitlist form + footer styles from styles.css */

@media (prefers-reduced-motion: reduce) {
  .zs-hero-inner { opacity: 1; animation: none; transform: none; }
}