/* ----------------------------------------------------------------------
 * Zoorage marketing site — shared styles.
 * Mirrors design/src/styles/tokens.css. Star Wars galaxy chrome framing
 * a parchment-light content card with gold accents.
 * ---------------------------------------------------------------------- */

:root {
  --color-bg:               #fafaf7;
  --color-surface-alt:      #f2f0ea;
  --color-ink:              #0a0e1a;
  --color-ink-muted:        #4a4f5c;
  --color-ink-soft:         #7a8092;
  --color-line:             #e4e1d7;

  --color-frame:            #050714;
  --color-frame-ink:        #e8e6f5;
  --color-frame-ink-muted:  #9a93c8;

  --color-gold:             #f5c518;
  --color-gold-deep:        #a6841c;
  --color-gold-soft:        #ffe89c;
  --color-saber-red:        #ff4757;
  --color-saber-blue:       #4fc3f7;
  --color-saber-purple:     #b57cff;

  --font-display: "Orbitron", "Bebas Neue", "SF Pro Display", ui-sans-serif, system-ui, sans-serif;
  --font-sans:    ui-sans-serif, system-ui, -apple-system, "PingFang TC", "Noto Sans TC", "Segoe UI", Roboto, sans-serif;

  --tracking-wide:    0.05em;
  --tracking-widest:  0.3em;
  --tracking-crawl:   0.45em;

  --shadow-frame:        0 40px 120px -40px rgba(5, 7, 20, 0.7);
  --shadow-glow-gold:    0 0 32px rgba(245, 197, 24, 0.45);
  --shadow-saber-red:    0 0 24px rgba(255, 71, 87, 0.55);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  color: var(--color-frame-ink);
  background:
    radial-gradient(2px 2px at 12% 18%, rgba(255, 255, 255, 0.85), transparent 60%),
    radial-gradient(1.5px 1.5px at 26% 78%, rgba(255, 255, 255, 0.6), transparent 60%),
    radial-gradient(1px 1px at 38% 32%, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(2px 2px at 64% 12%, rgba(245, 197, 24, 0.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 75% 64%, rgba(181, 124, 255, 0.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 88%, rgba(79, 195, 247, 0.6), transparent 60%),
    radial-gradient(1px 1px at 92% 32%, rgba(255, 255, 255, 0.45), transparent 60%),
    radial-gradient(circle at 20% -10%, #2a1466 0%, transparent 50%),
    radial-gradient(circle at 95% 110%, #1a0d3d 0%, transparent 55%),
    linear-gradient(180deg, #050714 0%, #0a0824 60%, #050714 100%);
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

/* ─── Layout ─────────────────────────────────────────────────────────── */

.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 16px 64px;
  min-height: 100vh;
}

.brand {
  text-align: center;
  margin-bottom: 32px;
}
.brand .wordmark {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.5rem;
  letter-spacing: var(--tracking-widest);
  color: #ffffff;
  text-shadow: 0 0 12px rgba(245, 197, 24, 0.45);
  margin: 0;
  text-decoration: none;
  display: inline-block;
}
.brand .wordmark:hover { color: var(--color-gold-soft); }

.brand .crawl {
  font-family: var(--font-display);
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-crawl);
  color: var(--color-gold);
  margin: 8px 0 0;
}
.brand .underline {
  margin: 12px auto 0;
  height: 1px;
  width: 96px;
  background: linear-gradient(to right, transparent, rgba(245, 197, 24, 0.7), transparent);
}

/* ─── Card (parchment scroll on space) ───────────────────────────────── */

.card {
  position: relative;
  width: 100%;
  max-width: 720px;
  background: var(--color-bg);
  color: var(--color-ink);
  border: 1px solid color-mix(in srgb, var(--color-gold) 40%, transparent);
  border-radius: 16px;
  box-shadow: var(--shadow-frame);
  padding: 48px 40px;
}
.card::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid color-mix(in srgb, var(--color-gold) 22%, transparent);
  border-radius: 12px;
  pointer-events: none;
}

@media (max-width: 540px) {
  .card { padding: 32px 24px; }
}

/* ─── Typography inside card ─────────────────────────────────────────── */

.eyebrow {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-crawl);
  color: var(--color-gold-deep);
  margin: 0 0 16px;
}

h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 5.5vw, 3rem);
  line-height: 1.1;
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink);
  margin: 0 0 12px;
}

.tagline {
  font-size: 1.125rem;
  color: var(--color-ink-muted);
  margin: 0 0 32px;
}

h2 {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-gold-deep);
  margin: 40px 0 12px;
}

p { margin: 0 0 16px; color: var(--color-ink); }
strong { color: var(--color-ink); font-weight: 700; }

a { color: var(--color-saber-red); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
a:hover { color: var(--color-ink); }

.divider {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--color-line), transparent);
  margin: 32px 0;
  border: 0;
}

/* ─── CTA buttons ─────────────────────────────────────────────────────── */

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

.cta {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  padding: 12px 24px;
  border-radius: 9999px;
  border: 0;
  text-decoration: none;
  transition: filter 150ms ease, transform 150ms ease;
}
.cta:hover { filter: brightness(1.1); transform: translateY(-1px); }

.cta--primary {
  background: var(--color-gold);
  color: var(--color-frame);
  box-shadow: var(--shadow-glow-gold);
}
.cta--danger {
  background: var(--color-saber-red);
  color: #ffffff;
  box-shadow: var(--shadow-saber-red);
}
.cta--ghost {
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-line);
}
.cta--ghost:hover { border-color: var(--color-ink); background: var(--color-surface-alt); }

/* ─── Email block (support page) ─────────────────────────────────────── */

.email-block {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink);
  background: var(--color-surface-alt);
  padding: 12px 20px;
  border-radius: 12px;
  border: 1px solid var(--color-line);
  margin: 8px 0 16px;
}
.email-block:hover { color: var(--color-saber-red); border-color: var(--color-saber-red); }

/* ─── Footer ─────────────────────────────────────────────────────────── */

.page-footer {
  margin-top: 32px;
  padding-top: 0;
  text-align: center;
  font-size: 0.75rem;
  color: var(--color-frame-ink-muted);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-family: var(--font-display);
  font-weight: 600;
}

/* ─── Back link (support / privacy) ──────────────────────────────────── */

.back-link {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gold-deep);
  margin: 0 0 24px;
  border: 0;
}
.back-link:hover { color: var(--color-saber-red); }