/* ───────────────────────────────────────────────────────────────
   Venue-Ops — marketing front page foundation
   Built on the Venue-Ops design system tokens + brand-refresh additions.
   Shared by all three landing-page directions.
   ─────────────────────────────────────────────────────────────── */

:root {
  /* Core ink / surfaces (from design system) */
  --ink:        #020817;  /* near-black */
  --slate-900:  #0f172a;  /* primary */
  --slate-700:  #334155;
  --slate-600:  #475569;
  --slate-500:  #64748b;  /* muted text */
  --slate-400:  #94a3b8;
  --slate-300:  #cbd5e1;
  --slate-200:  #e2e8f0;  /* borders */
  --slate-100:  #f1f5f9;  /* muted bg */
  --slate-50:   #f8fafc;
  --white:      #ffffff;

  /* Brand-refresh additions */
  --shell:      #eef0f3;  /* soft slate panel surface */
  --indigo:     #6366f1;  /* brand accent */
  --indigo-600: #4f46e5;
  --indigo-500: #6366f1;
  --indigo-400: #818cf8;
  --indigo-300: #a5b4fc;
  --indigo-100: #e0e7ff;
  --indigo-50:  #eef2ff;

  /* Status palette (from design system) */
  --status-blue-bg:#dbeafe; --status-blue-fg:#1d4ed8;
  --status-green-bg:#dcfce7; --status-green-fg:#15803d;
  --status-yellow-bg:#fef9c3; --status-yellow-fg:#a16207;
  --status-purple-bg:#f3e8ff; --status-purple-fg:#7e22ce;
  --status-orange-bg:#ffedd5; --status-orange-fg:#9a3412;
  --status-gray-bg:#f3f4f6; --status-gray-fg:#374151;

  /* Type */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono", "Courier New", monospace;

  /* Shadows (brand refresh) */
  --shadow-tile: 0 1px 2px rgba(15,23,42,.06);
  --shadow-card: 0 1px 2px rgba(15,23,42,.06), 0 12px 32px -12px rgba(15,23,42,.18);
  --shadow-lift: 0 1px 2px rgba(15,23,42,.06), 0 20px 48px -18px rgba(15,23,42,.22);
  --shadow-mark: 0 1px 2px rgba(15,23,42,.06), 0 8px 24px -10px rgba(99,102,241,.55);

  --radius: 0.5rem;
}

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-sans); color: var(--ink); }

/* The brand lockup — reused across directions.
   .vlogo wraps a rounded indigo square + inline V-glyph + wordmark. */
.vlogo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.vlogo__mark {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--indigo); box-shadow: var(--shadow-mark);
  flex: none;
}
.vlogo__mark svg { width: 20px; height: 20px; display: block; }
.vlogo__word { font-weight: 700; letter-spacing: -0.02em; font-size: 17px; white-space: nowrap; }
.vlogo__word .dot { color: var(--indigo); }
.vlogo__word .ai { color: var(--indigo); }

/* Waitlist form base */
.wl-input {
  font: inherit; font-size: 15px;
  padding: 13px 15px; border-radius: 10px;
  border: 1px solid var(--slate-200); background: var(--white);
  color: var(--ink); width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.wl-input:focus { outline: none; border-color: var(--indigo-400); box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.wl-input::placeholder { color: var(--slate-400); }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }