/* VaultPass palette */
:root{
  --vp-bg: #0f172a;
  --vp-panel: #0b1226;
  --vp-card: #111a33;
  --vp-border: #1e2a4a;
  --vp-text: #e5e7eb;
  --vp-dim: #a7b0c0;
  --vp-blue: #3888ff; /* VaultPass blue */
  --vp-blue-ghost: rgba(56,136,255,0.12);
}

.vp-bg{ background: var(--vp-bg); color: var(--vp-text); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; line-height: 1.6; }
.vp-wrap{ max-width: 1100px; margin: 0 auto; padding: 24px; }
h1,h2,h3{ margin: 0 0 10px; }
p{ margin: 0 0 12px; color: var(--vp-dim); }
.vp-accent{ color: var(--vp-blue); }

.vp-hero{ padding: 56px 24px 24px; }
.vp-sub{ max-width: 760px; }

.vp-cta-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:14px; }
.vp-btn{ background: transparent; border: 1px solid var(--vp-border); color: var(--vp-text); padding: 10px 14px; border-radius: 10px; text-decoration: none; }
.vp-btn:hover{ border-color: var(--vp-blue); color: var(--vp-blue); }
.vp-btn-primary{ background: var(--vp-blue); border-color: var(--vp-blue); color: #0b1020; font-weight: 600; }
.vp-btn-primary:hover{ box-shadow: 0 0 0 4px var(--vp-blue-ghost); }

.vp-steps{ display:grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin-top: 10px; }
.vp-step{ background: var(--vp-panel); border: 1px solid var(--vp-border); border-radius: 14px; padding: 16px; }

.vp-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin-top: 12px; }
.vp-card{ background: var(--vp-card); border: 1px solid var(--vp-border); border-radius: 14px; overflow: hidden; display:flex; flex-direction:column; }
.vp-card img{ width:100%; height: 180px; object-fit: cover; background:#0a0f20; }
.vp-card-body{ padding: 14px; display:flex; flex-direction:column; gap:10px; }
.vp-tags{ display:flex; gap:8px; flex-wrap:wrap; }
.vp-tags span{ background: #0c1733; border: 1px solid var(--vp-border); padding: 4px 8px; border-radius: 999px; font-size: 12px; color: #c6d1e6; }

.vp-slab{ margin: 24px 0; }
.vp-slab-inner{ background: var(--vp-panel); border: 1px solid var(--vp-border); border-radius: 14px; padding: 20px; }

.vp-faq{ display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap:14px; margin-top: 10px; }
.vp-faq-item{ background: var(--vp-panel); border: 1px solid var(--vp-border); border-radius: 14px; padding: 16px; }

.vp-end{ padding: 24px 0 40px; }