/* ============================================================
   THE VAULT — design system, matched to fjeltstudios.com
   Light body (#FBFBFC) with a dot grid, blue gradient hero with
   white text and a red emphasis word, deep-navy CTAs and footer,
   brand blue (#5B73E8) accents, Geist. Same class names as before
   so every page and script keeps working; only the skin changed.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap");

.vault {
  /* --- surfaces (light) --- */
  --canvas: #fbfbfc;
  --surface-1: #ffffff;
  --surface-2: #f6f8ff;
  --surface-3: #eef2ff;
  --hairline: #e6e9f2;
  --hairline-strong: #d5daea;

  /* --- brand --- */
  --accent: #5b73e8;
  --accent-bright: #6e86ff;
  --accent-deep: #3f55c8;
  --accent-ghost: rgba(91, 115, 232, 0.12);
  --accent-ghost-2: rgba(91, 115, 232, 0.06);
  --navy: #0b1020;
  --navy-2: #11162a;

  /* --- ink (dark on light) --- */
  --ink: #0b1020;
  --ink-muted: #474e66;
  --ink-subtle: #7a8199;
  --ink-faint: #a7aec2;

  /* --- semantic --- */
  --ok: #16a34a;
  --warn: #d97706;
  --leak: #ff3b3b;
  --emphasis: #ff3b3b;

  /* --- elevation (soft, not neon) --- */
  --shadow-sm: 0 1px 2px rgba(11, 16, 32, 0.06), 0 3px 10px rgba(11, 16, 32, 0.05);
  --shadow-md: 0 12px 34px rgba(11, 16, 32, 0.10);
  --glow-sm: 0 6px 20px rgba(91, 115, 232, 0.26);
  --glow-md: 0 16px 44px rgba(91, 115, 232, 0.24);
  --glow-ring: 0 0 0 3px rgba(91, 115, 232, 0.22);

  /* --- radius --- */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;

  /* --- rhythm --- */
  --gutter: clamp(20px, 5vw, 56px);
  --stack: clamp(72px, 10vw, 130px);
  --max: 1120px;
  --measure: 62ch;

  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 300;
  color: var(--ink);
  background-color: var(--canvas);
  background-image: radial-gradient(circle, rgba(11, 16, 32, 0.045) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.55;
  position: relative;
}

/* soft blue wash at the very top, under the hero.
   Higher specificity than `.vault > *` so it stays absolute. */
.vault .vault__aura {
  position: absolute; top: 0; left: 0; right: 0; height: 780px;
  z-index: 0; pointer-events: none;
  background: radial-gradient(1100px 500px at 50% -12%, rgba(91, 115, 232, 0.14), transparent 62%);
}
.vault > * { position: relative; z-index: 1; }

.vault *, .vault *::before, .vault *::after { box-sizing: border-box; }

/* ---------- layout ---------- */
.v-shell { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.v-section { padding-block: var(--stack); scroll-margin-top: 84px; }
.v-section + .v-section { border-top: 1px solid var(--hairline); }

/* ---------- HERO (blue, white text) ---------- */
.v-hero {
  position: relative;
  background: linear-gradient(168deg, #3546c4 0%, #4a63e6 40%, #6f88ff 100%);
  color: #fff;
  overflow: hidden;
}
.v-hero::after { /* subtle dot grid over the blue, like the live site */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.10) 1px, transparent 1px);
  background-size: 22px 22px;
}
.v-hero > * { position: relative; z-index: 1; }
.v-hero .v-eyebrow { color: rgba(255, 255, 255, 0.86); }
.v-hero .v-eyebrow::before { background: linear-gradient(90deg, #fff, transparent); }
.v-hero .v-lead { color: rgba(255, 255, 255, 0.82); }
.v-hero .v-muted { color: rgba(255, 255, 255, 0.72); }
.v-hero a.v-muted:hover { color: #fff; }
.v-hero .v-badge { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.22); color: rgba(255, 255, 255, 0.9); }
.v-hero .v-dot { background: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, 0.8); }
.v-hero header a { color: #fff !important; } /* beats inline color on the logo */
.v-emph { color: var(--emphasis); }

/* hero buttons: white primary, outlined ghost */
.v-hero .v-btn--primary { background: #fff; color: var(--navy); box-shadow: 0 10px 30px rgba(4, 9, 26, 0.28); }
.v-hero .v-btn--primary:hover { background: #fff; color: var(--navy); box-shadow: 0 14px 40px rgba(4, 9, 26, 0.36); }
.v-hero .v-btn--ghost { border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.v-hero .v-btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); color: #fff; }

/* ---------- type ---------- */
.vault h1, .vault h2, .vault h3 { font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; margin: 0; color: inherit; }
.v-display { font-size: clamp(2.4rem, 6vw, 4.2rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.03; }
.v-h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); letter-spacing: -0.03em; }
.v-h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 500; }
.v-lead { font-size: clamp(1.05rem, 1.7vw, 1.28rem); color: var(--ink-muted); max-width: var(--measure); font-weight: 300; }
.v-body { color: var(--ink-muted); max-width: var(--measure); }
.v-muted { color: var(--ink-subtle); }
.vault strong, .vault b { font-weight: 600; color: inherit; }
.vault a { color: var(--accent-deep); text-decoration: none; }
.vault a:hover { color: var(--accent); }

.v-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.74rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-deep);
}
.v-eyebrow::before { content: ""; width: 22px; height: 1px; background: linear-gradient(90deg, var(--accent), transparent); }

.v-key {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: "Geist Mono", monospace; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.14em;
  color: var(--accent-deep); padding: 4px 10px; border: 1px solid var(--hairline-strong);
  border-radius: var(--r-pill); background: var(--accent-ghost-2);
}
.v-hero .v-key { color: #fff; border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.12); }
.v-key::before { content: "#"; opacity: 0.6; }

/* ---------- cards ---------- */
.v-card {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: clamp(20px, 3vw, 30px);
  box-shadow: var(--shadow-sm);
}
.v-card--glow { box-shadow: var(--glow-md); border-color: rgba(91, 115, 232, 0.28); }
.v-grid { display: grid; gap: 16px; }
@media (min-width: 720px) { .v-grid--2 { grid-template-columns: 1fr 1fr; } .v-grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* ---------- buttons ---------- */
.v-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: inherit; font-size: 0.98rem; font-weight: 500;
  padding: 14px 26px; border-radius: var(--r-pill); border: 1px solid transparent; cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease; text-align: center;
}
.v-btn--primary { color: #fff; background: var(--navy); box-shadow: var(--shadow-md); }
.v-btn--primary:hover { transform: translateY(-1px); background: var(--navy-2); color: #fff; box-shadow: 0 16px 40px rgba(11, 16, 32, 0.22); }
.v-btn--ghost { color: var(--ink); background: transparent; border-color: var(--hairline-strong); }
.v-btn--ghost:hover { border-color: var(--accent); color: var(--accent-deep); background: var(--accent-ghost-2); }
.v-btn--lg { padding: 17px 34px; font-size: 1.05rem; }
.v-btn--block { display: flex; width: 100%; }

/* ---------- forms ---------- */
.v-field { display: flex; flex-direction: column; gap: 8px; }
.v-label { font-size: 0.9rem; color: var(--ink-muted); font-weight: 400; }
.v-input {
  font-family: inherit; font-size: 1rem; color: var(--ink);
  background: #fff; border: 1px solid var(--hairline-strong);
  border-radius: var(--r-md); padding: 13px 15px; width: 100%;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.v-input::placeholder { color: var(--ink-faint); }
.v-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--glow-ring); }

/* ---------- misc ---------- */
.v-rule { height: 1px; background: var(--hairline); border: 0; margin: 0; }
.v-badge {
  display: inline-flex; align-items: center; gap: 7px; font-size: 0.8rem; color: var(--ink-muted);
  padding: 6px 12px; border: 1px solid var(--hairline); border-radius: var(--r-pill); background: var(--surface-1);
}
.v-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px rgba(91, 115, 232, 0.6); }

/* dark section (footer / dark CTA), inverts on the light body */
.v-dark { background: var(--navy); color: #fff; }
.v-dark .v-lead, .v-dark .v-body { color: rgba(255, 255, 255, 0.8); }
.v-dark .v-muted { color: rgba(255, 255, 255, 0.6); }
.v-dark .v-key { color: #fff; border-color: rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.1); }
.v-dark .v-eyebrow { color: rgba(255, 255, 255, 0.85); }
.v-dark.v-card { background: linear-gradient(165deg, var(--navy) 0%, #151b34 100%); border-color: rgba(255,255,255,0.08); }
.v-dark .v-key { color: #fff; }
.v-dark .v-btn--primary { background: #fff; color: var(--navy); }
.v-dark .v-btn--primary:hover { background: #fff; color: var(--navy); box-shadow: 0 16px 40px rgba(0,0,0,0.35); }

.v-fadein { opacity: 1; transform: none; }
.vault.is-armed .v-fadein { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
.vault.is-armed .v-fadein.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .vault *, .vault *::before, .vault *::after { transition: none !important; animation: none !important; }
  .v-fadein { opacity: 1; transform: none; }
}