/* Vaultly — SaaS product landing page
 * Dark, terminal-inspired. Space Grotesk + Space Mono.
 * Color: deep charcoal bg, teal accent (#00e5b4), subtle green glow.
 */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root {
  --v-bg:       #09090f;
  --v-bg-card:  #111118;
  --v-bg-raise: #16161f;
  --v-border:   rgba(255,255,255,0.06);
  --v-border-h: rgba(0,229,180,0.2);
  --v-fg:       #e2e8f0;
  --v-fg-muted: #64748b;
  --v-fg-faint: #334155;
  --v-teal:     #00e5b4;
  --v-teal-dim: rgba(0,229,180,0.08);
  --v-teal-glow:rgba(0,229,180,0.12);
  --v-font-h:   'Space Grotesk', sans-serif;
  --v-font-mono:'Space Mono', monospace;
  --r:          10px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; scroll-behavior:smooth; }
body {
  background: var(--v-bg);
  color: var(--v-fg);
  font-family: var(--v-font-h);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { text-decoration:none; color:inherit; }

/* ── NAV ──────────────────────────────────────────────── */
.v-nav {
  position: sticky; top:0; z-index:100;
  background: rgba(9,9,15,0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--v-border);
}
.v-nav-inner {
  max-width: 1120px; margin:0 auto;
  padding: 0 2rem;
  display: flex; align-items:center; justify-content:space-between;
  height: 60px;
}
.v-logo {
  display:flex; align-items:center; gap:8px;
  font-family: var(--v-font-mono);
  font-size: 1rem; font-weight:700;
  color: var(--v-fg);
  letter-spacing: -0.02em;
}
.v-nav-links { display:flex; align-items:center; gap:2rem; }
.v-nav-links a {
  font-size: 0.875rem; color: var(--v-fg-muted);
  transition: color 0.2s;
}
.v-nav-links a:hover { color: var(--v-fg); }
.v-nav-cta {
  background: var(--v-teal) !important;
  color: #09090f !important;
  padding: 0.45rem 1.1rem;
  border-radius: var(--r);
  font-weight: 600; font-size:0.875rem;
  transition: opacity 0.2s;
}
.v-nav-cta:hover { opacity:0.85; }

/* ── HERO ─────────────────────────────────────────────── */
.v-hero {
  position:relative;
  min-height: 90vh;
  display:flex; align-items:center;
  padding: 5rem 2rem;
  overflow: hidden;
}
.v-hero-grid {
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(0,229,180,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,180,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 40%, transparent 100%);
}
.v-hero-inner {
  max-width: 1120px; margin:0 auto; width:100%;
  display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center;
}
.v-chip {
  display:inline-flex; align-items:center; gap:8px;
  background: var(--v-teal-dim);
  border: 1px solid var(--v-border-h);
  color: var(--v-teal);
  font-size: 0.78rem; font-weight:500; font-family:var(--v-font-mono);
  padding: 0.4rem 0.9rem; border-radius:100px;
  margin-bottom: 1.75rem; letter-spacing:0.02em;
}
.v-chip-dot {
  width:6px; height:6px; border-radius:50%;
  background: var(--v-teal);
  animation: blink 2s infinite;
}
@keyframes blink {
  0%,100% { opacity:1; } 50% { opacity:0.3; }
}
.v-headline {
  font-size: clamp(2.25rem,4.5vw,3.5rem);
  font-weight:700; line-height:1.1; letter-spacing:-0.04em;
  margin-bottom:1.25rem;
}
.v-headline em {
  font-style:normal;
  background: linear-gradient(90deg, var(--v-teal), #5ae8c8);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.v-sub {
  font-size:1.05rem; color:var(--v-fg-muted); line-height:1.75;
  max-width:500px; margin-bottom:2.25rem;
}
.v-hero-actions { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:2.5rem; }
.v-btn-primary {
  background: var(--v-teal); color:#09090f;
  padding:0.7rem 1.5rem; border-radius:var(--r);
  font-weight:600; font-size:0.925rem;
  transition: box-shadow 0.2s, transform 0.2s;
}
.v-btn-primary:hover {
  box-shadow: 0 0 24px rgba(0,229,180,0.3);
  transform: translateY(-1px);
}
.v-btn-ghost {
  display:flex; align-items:center; gap:7px;
  color:var(--v-fg-muted); font-size:0.9rem;
  transition:color 0.2s;
}
.v-btn-ghost:hover { color:var(--v-fg); }
.v-social-proof {
  display:flex; align-items:center; gap:0.85rem;
  font-size:0.875rem; color:var(--v-fg-muted);
}
.v-social-proof strong { color:var(--v-fg); }
.v-avatars { display:flex; }
.v-av {
  width:28px; height:28px; border-radius:50%;
  border:2px solid var(--v-bg);
  margin-left:-8px; opacity:0.8;
}
.v-avatars .v-av:first-child { margin-left:0; }

/* ── HERO VISUAL — dashboard mockup ──────────────────── */
.v-hero-visual { position:relative; }
.v-dashboard {
  background: var(--v-bg-card);
  border: 1px solid var(--v-border);
  border-radius: 14px;
  overflow:hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,229,180,0.06);
}
.v-dash-header {
  display:flex; align-items:center; gap:8px;
  padding:12px 16px;
  background: var(--v-bg-raise);
  border-bottom: 1px solid var(--v-border);
}
.v-dash-dot {
  width:11px; height:11px; border-radius:50%;
}
.v-dash-dot.red    { background:#ff5f57; }
.v-dash-dot.yellow { background:#febc2e; }
.v-dash-dot.green  { background:#28c840; }
.v-dash-title {
  font-family:var(--v-font-mono); font-size:0.75rem;
  color:var(--v-fg-muted); margin-left:auto;
}
.v-dash-search {
  display:flex; align-items:center; gap:8px;
  margin:14px 16px;
  background: rgba(255,255,255,0.03);
  border:1px solid var(--v-border);
  border-radius:8px; padding:8px 12px;
  font-size:0.8rem; color:var(--v-fg-faint);
  font-family:var(--v-font-mono);
}
.v-cred-list { padding:0 16px; }
.v-cred-item {
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-radius:8px;
  margin-bottom:4px; cursor:pointer;
  transition: background 0.15s;
}
.v-cred-item:hover, .v-cred-item.active {
  background: rgba(255,255,255,0.04);
}
.v-cred-icon {
  width:32px; height:32px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:0.85rem; font-weight:700; color:#fff;
  flex-shrink:0;
}
.v-cred-meta { flex:1; }
.v-cred-meta span { display:block; font-size:0.85rem; font-weight:500; }
.v-cred-sub { color:var(--v-fg-muted); font-size:0.75rem; font-family:var(--v-font-mono); }
.v-cred-badge {
  font-size:0.7rem; font-weight:600; padding:3px 8px;
  border-radius:4px; font-family:var(--v-font-mono);
}
.v-cred-badge.secure {
  background:rgba(34,197,94,0.1); color:#22c55e;
}
.v-cred-badge.warn {
  background:rgba(251,191,36,0.1); color:#fbbf24;
}
.v-dash-footer {
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 16px; margin-top:4px;
  border-top:1px solid var(--v-border);
  font-size:0.72rem; font-family:var(--v-font-mono);
  color:var(--v-fg-muted);
}
.v-dash-health { color:#22c55e; }
.v-stat-float {
  position:absolute;
  background:var(--v-bg-card);
  border:1px solid var(--v-border-h);
  border-radius:10px; padding:10px 14px;
  display:flex; flex-direction:column;
  box-shadow:0 8px 24px rgba(0,0,0,0.4);
}
.stat-a { top:-20px; right:-20px; }
.stat-b { bottom:-20px; left:-20px; }
.v-sf-num {
  font-family:var(--v-font-mono); font-size:1rem;
  font-weight:700; color:var(--v-teal);
}
.v-sf-label {
  font-size:0.7rem; color:var(--v-fg-muted); margin-top:1px;
}

/* ── FEATURES ─────────────────────────────────────────── */
.v-section-inner {
  max-width:1120px; margin:0 auto; padding:6rem 2rem;
}
.v-section-label {
  font-family:var(--v-font-mono); font-size:0.72rem;
  font-weight:700; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--v-teal); display:block; margin-bottom:1rem;
}
.v-section-heading {
  font-size:clamp(1.9rem,3.5vw,2.6rem);
  font-weight:700; line-height:1.15; letter-spacing:-0.03em;
  margin-bottom:3rem;
}
.v-section-heading em {
  font-style:normal;
  background:linear-gradient(90deg,var(--v-teal),#5ae8c8);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.v-features { background: var(--v-bg-card); border-top:1px solid var(--v-border); }
.v-features-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
}
.v-feat {
  background:var(--v-bg-card);
  padding:2rem;
  border:1px solid var(--v-border);
  transition:background 0.2s, border-color 0.2s;
}
.v-feat:hover {
  background:var(--v-bg-raise);
  border-color:var(--v-border-h);
}
.v-feat-icon {
  width:40px; height:40px;
  background:var(--v-teal-dim);
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.25rem;
}
.v-feat h3 {
  font-size:1rem; font-weight:600;
  margin-bottom:0.6rem; letter-spacing:-0.02em;
}
.v-feat p { font-size:0.875rem; color:var(--v-fg-muted); line-height:1.7; }

/* ── PRICING ──────────────────────────────────────────── */
.v-pricing { border-top:1px solid var(--v-border); }
.v-pricing-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem;
}
.v-price-card {
  background:var(--v-bg-card); border:1px solid var(--v-border);
  border-radius:14px; padding:2rem; position:relative;
  transition:border-color 0.2s;
}
.v-price-card.featured {
  border-color:var(--v-teal-dim);
  box-shadow:0 0 0 1px var(--v-border-h),
             0 0 40px rgba(0,229,180,0.07);
}
.v-pc-badge {
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--v-teal); color:#09090f;
  font-size:0.7rem; font-weight:700; padding:3px 10px;
  border-radius:100px; white-space:nowrap;
  font-family:var(--v-font-mono);
}
.v-pc-tier {
  font-family:var(--v-font-mono); font-size:0.78rem;
  font-weight:700; text-transform:uppercase; letter-spacing:0.12em;
  color:var(--v-teal); margin-bottom:0.75rem;
}
.v-pc-price {
  font-size:2rem; font-weight:700; letter-spacing:-0.04em;
  margin-bottom:0.5rem;
}
.v-pc-price span { font-size:2.25rem; }
.v-pc-desc { font-size:0.85rem; color:var(--v-fg-muted); margin-bottom:1.5rem; }
.v-pc-list { list-style:none; margin-bottom:2rem; }
.v-pc-list li {
  font-size:0.875rem; padding:0.4rem 0;
  border-bottom:1px solid var(--v-border);
  display:flex; align-items:center; gap:8px;
}
.v-pc-list li::before { content:'→'; color:var(--v-teal); font-size:0.8rem; }
.v-pc-btn {
  display:block; text-align:center;
  padding:0.65rem 1rem; border-radius:var(--r);
  font-size:0.875rem; font-weight:600;
  transition:all 0.2s;
}
.v-pc-btn.solid {
  background:var(--v-teal); color:#09090f;
}
.v-pc-btn.solid:hover { box-shadow:0 0 20px rgba(0,229,180,0.3); }
.v-pc-btn.outline {
  border:1px solid var(--v-border-h); color:var(--v-fg-muted);
}
.v-pc-btn.outline:hover { color:var(--v-fg); border-color:var(--v-teal); }

/* ── FOOTER ───────────────────────────────────────────── */
.v-footer {
  border-top:1px solid var(--v-border);
  padding:2rem;
}
.v-footer-inner {
  max-width:1120px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:1rem;
}
.v-footer-links {
  display:flex; gap:1.5rem;
}
.v-footer-links a { font-size:0.85rem; color:var(--v-fg-muted); transition:color 0.2s; }
.v-footer-links a:hover { color:var(--v-fg); }
.v-footer-copy { font-size:0.8rem; color:var(--v-fg-faint); }
.v-footer-copy a { color:var(--v-teal); }

/* ── RESPONSIVE ───────────────────────────────────────── */
@media (max-width:900px) {
  .v-hero-inner { grid-template-columns:1fr; }
  .v-hero-visual { display:none; }
  .v-features-grid { grid-template-columns:1fr 1fr; }
  .v-pricing-grid { grid-template-columns:1fr; }
}
@media (max-width:600px) {
  .v-features-grid { grid-template-columns:1fr; }
  .v-nav-links a:not(.v-nav-cta) { display:none; }
}