/* ============================================================================
   New Covenant Rigs — design tokens.

   SINGLE SOURCE OF TRUTH for colour, elevation and radius. Previously :root
   was declared twice (index.html inline and style.css) with slightly different
   values, which is how palettes drift. Every page links this first; nothing
   else should define a raw hex for UI chrome.

   HIERARCHY — three surfaces, so depth is structural rather than decorative:
     --bg        page ground
     --surface   cards, panels, containers
     --float     modals, hover states, floating nav

   ACCENTS — gold leads, cyan supports.
     Gold is the brand and owns primary CTAs. Cyan is the interactive/tech
     accent: links, focus rings, active states, the 3D hero. Warm amber is
     reserved for badges and status. Vibrant colour beyond these belongs to
     product photography, not to UI chrome.
   ============================================================================ */
:root {
  /* ---- elevation surfaces ---- */
  --bg:            #0B0F19;   /* slate navy page ground */
  --surface:       #161F33;   /* cards, panels */
  --surface-2:     #182238;   /* card gradient top stop */
  --float:         #212D4A;   /* modals, hover, floating nav */

  /* ---- brand: gold leads ---- */
  --gold:          #C9A227;
  --gold-soft:     #E8D48B;
  --gold-deep:     #9A7B1D;

  /* ---- interactive accent: cyan supports ---- */
  --cyan:          #00E5FF;
  --cyan-deep:     #0088FF;

  /* ---- status / badges ---- */
  --amber:         #FFB800;
  --orange:        #FF6B00;
  --success:       #34D399;

  /* ---- type ---- */
  --text:          #F8FAFC;
  --text-muted:    #94A3B8;

  /* ---- lines and edges ---- */
  --line:          rgba(255, 255, 255, 0.07);
  --line-strong:   rgba(255, 255, 255, 0.14);

  /* ---- elevation shadows: multi-tier, plus an inner bevel ---- */
  --elev-1:
    0 10px 30px -10px rgba(0, 0, 0, 0.5),
    0 20px 25px -5px rgba(0, 0, 0, 0.3),
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.1);
  --elev-2:
    0 20px 40px -15px rgba(201, 162, 39, 0.20),
    0 30px 35px -10px rgba(0, 0, 0, 0.6),
    inset 0 1px 2px 0 rgba(255, 255, 255, 0.2);
  --elev-cyan:
    0 20px 40px -15px rgba(0, 229, 255, 0.20),
    0 30px 35px -10px rgba(0, 0, 0, 0.6),
    inset 0 1px 2px 0 rgba(255, 255, 255, 0.2);

  --radius:        16px;
  --radius-sm:     12px;
  --pad-card:      24px;

  /* ---- legacy aliases -------------------------------------------------
     Older rules across the site still reference these names. Mapping them
     here migrates every one of them at once instead of leaving two palettes
     alive during the transition. */
  --deep-navy:     var(--bg);
  --panel:         var(--surface);
  --panel-2:       var(--float);
  --ink-light:     var(--text);
  --muted:         var(--text-muted);
}

/* Type scale. Cinzel is retained for headings — it is the brand's voice — and
   Inter carries body and metadata for legibility at small sizes on mobile. */
body {
  font-family: 'Inter', 'Montserrat', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: 'Cinzel', Georgia, serif; font-weight: 700; }
h1 { letter-spacing: 0.01em; }

/* Metadata / specs: medium weight on muted, per the brief. */
.meta, .spec, .cx-specs li, .foot-col a, small {
  font-weight: 500;
  color: var(--text-muted);
}

/* ============================================================================
   Elevated surface — the one card treatment used everywhere.
   ============================================================================ */
.rig-card,
.comm-card,
.cx-card,
.card {
  background: linear-gradient(145deg, var(--surface-2) 0%, #111827 100%);
  border: 1px solid var(--line);
  box-shadow: var(--elev-1);
  border-radius: var(--radius);
  padding: var(--pad-card);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.rig-card:hover,
.comm-card:hover,
.cx-card:hover,
.card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: var(--elev-2);
  border-color: rgba(201, 162, 39, 0.28);
}

/* Equal-height cards with uniform inner padding, so a grid never looks ragged
   because one card has an extra line of copy. */
.community-grid,
.cx-grid,
.product-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  align-items: stretch;
}
.community-grid > *,
.cx-grid > *,
.product-grid > * {
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* Push the last element (usually the CTA) to the bottom so CTAs line up. */
.comm-card > :last-child,
.cx-card > :last-child { margin-top: auto; }

/* ============================================================================
   Glassmorphic floating navigation
   ============================================================================ */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(11, 15, 25, 0.75);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
@supports not (backdrop-filter: blur(4px)) {
  /* Without backdrop-filter a translucent bar over scrolling content is
     unreadable, so go opaque rather than pretty. */
  header { background: #0B0F19; }
}

/* ============================================================================
   Tactile pill buttons. Gold leads, so the primary CTA is gold; cyan is the
   secondary/interactive action.
   ============================================================================ */
.btn, .btn-primary, .btn-ghost, .btn-cyan {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-sm);
  padding: 12px 24px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn-primary {
  background: linear-gradient(135deg, var(--gold-soft) 0%, var(--gold) 55%, var(--gold-deep) 100%);
  color: #14100A;                      /* 12.6:1 on gold — passes AAA */
  border: none;
  box-shadow:
    0 4px 15px rgba(201, 162, 39, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.btn-primary:hover {
  box-shadow:
    0 8px 25px rgba(201, 162, 39, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transform: translateY(-2px);
}
.btn-cyan {
  background: linear-gradient(135deg, var(--cyan) 0%, var(--cyan-deep) 100%);
  color: #04121A;
  border: none;
  box-shadow:
    0 4px 15px rgba(0, 229, 255, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.btn-cyan:hover {
  box-shadow:
    0 8px 25px rgba(0, 229, 255, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transform: translateY(-2px);
}
.btn.btn-ghost, .btn-ghost {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line-strong);
  color: var(--text);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(0, 229, 255, 0.45);
  color: var(--cyan);
  transform: translateY(-2px);
}

/* Focus is cyan everywhere — one predictable affordance. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================================================
   Process / trust bar — floats over the seam between hero and page.
   ============================================================================ */
.process-bar {
  position: relative;
  z-index: 5;
  margin: -34px auto 0;
  max-width: 1040px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--elev-1);
}
.process-step {
  background: linear-gradient(145deg, var(--float) 0%, var(--surface) 100%);
  padding: 20px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.process-num {
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px; font-weight: 700;
  color: #04121A;
  background: linear-gradient(135deg, var(--cyan) 0%, var(--cyan-deep) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.process-step h3 {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px; font-weight: 700; margin: 0 0 2px;
  color: var(--text); letter-spacing: 0;
}
.process-step p { margin: 0; font-size: 12.5px; color: var(--text-muted); font-weight: 500; }

@media (max-width: 780px) {
  .process-bar { grid-template-columns: 1fr; margin-top: -20px; }
}

@media (prefers-reduced-motion: reduce) {
  .rig-card, .comm-card, .cx-card, .card,
  .btn, .btn-primary, .btn-ghost, .btn-cyan { transition: none; }
  .rig-card:hover, .comm-card:hover, .cx-card:hover, .card:hover,
  .btn-primary:hover, .btn-ghost:hover, .btn-cyan:hover { transform: none; }
}

/* ============================================================================
   Waitlist / contact forms
   ============================================================================ */
.waitlist-section { padding: 64px 0; }
.waitlist-form {
  max-width: 680px;
  background: linear-gradient(145deg, var(--surface-2) 0%, #111827 100%);
  border: 1px solid var(--line);
  box-shadow: var(--elev-1);
  border-radius: var(--radius);
  padding: var(--pad-card);
}
.wl-hp { position: absolute; left: -9999px; }   /* honeypot, off-screen not hidden */
.wl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wl-field { display: block; margin-bottom: 14px; }
.wl-field > span {
  display: block; margin-bottom: 6px;
  font-size: 12px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted);
}
.wl-field em { text-transform: none; letter-spacing: 0; font-style: normal; opacity: .7; }
.wl-field input, .wl-field select, .wl-field textarea {
  width: 100%; padding: 11px 13px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text); font: inherit; font-size: 14px;
}
.wl-field input::placeholder, .wl-field textarea::placeholder { color: #64748B; }
.wl-field input:focus, .wl-field select:focus, .wl-field textarea:focus {
  border-color: var(--cyan); outline: none;
  box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.15);
}
.wl-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.wl-status { margin: 0; font-size: 13.5px; font-weight: 500; color: var(--text-muted); }
.wl-status.ok  { color: var(--success); }
.wl-status.err { color: var(--amber); }
@media (max-width: 620px) { .wl-row { grid-template-columns: 1fr; } }