/* ============================================================
   Vaultun public website styles (loads alongside app.css)
   ============================================================ */

.site{background:
  radial-gradient(900px 480px at 90% -8%, #efeaff 0%, transparent 60%),
  radial-gradient(700px 380px at -5% 10%, #f3f0ff 0%, transparent 55%),
  #ffffff;}

.container{max-width:1160px;margin:0 auto;padding:0 24px}

/* nav (single shared partial: partials/marketing_nav.php) */
.site-nav{display:flex;align-items:center;gap:30px;padding:20px 0}
.site-nav .brand-name{font-size:20px}
.nav-links{display:flex;gap:26px;margin-left:18px}
.nav-links a{font-size:14px;color:var(--ink-2);font-weight:500;display:flex;align-items:center;gap:5px}
.nav-links a:hover{color:var(--purple-600)}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:14px}
.nav-cta a.signin{font-weight:600;font-size:14px;color:var(--ink-2)}

/* hero */
.hero{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:54px 0 40px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--purple-100);color:var(--purple-700);font-size:12.5px;font-weight:600;padding:6px 13px;border-radius:999px}
.hero h1{font-size:54px;line-height:1.05;letter-spacing:-.03em;margin:22px 0 0}
.hero h1 .u{position:relative;color:var(--purple-600)}
.hero h1 .u::after{content:'';position:absolute;left:0;right:0;bottom:4px;height:10px;background:var(--purple-100);z-index:-1;border-radius:3px}
.hero p.lead{font-size:17px;color:var(--muted);line-height:1.6;margin:22px 0 28px;max-width:480px}
.hero-cta{display:flex;gap:14px}
.btn-lg{padding:14px 24px;font-size:15px;border-radius:13px}
.trust-row{display:flex;gap:22px;margin-top:26px;flex-wrap:wrap}
.trust-row .ti{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);font-weight:500}
.trust-row .ti svg{width:15px;height:15px;color:var(--purple-600)}

/* hero mock card */
.hero-mock{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-lg);padding:18px}
.hm-top{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.hm-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.hm-stat{border:1px solid var(--line);border-radius:12px;padding:12px}
.hm-stat b{font-size:18px}.hm-stat span{font-size:10.5px;color:var(--muted);display:block}

/* sections */
.section{padding:56px 0}
.section-tag{text-align:center;color:var(--purple-600);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.section h2{text-align:center;font-size:34px;letter-spacing:-.02em;margin:10px 0 0}
.section p.sub{text-align:center;color:var(--muted);max-width:560px;margin:14px auto 0;font-size:16px}

/* split cards */
.split{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:8px}
.split-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:34px;box-shadow:var(--shadow)}
.split-card .kicker{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--purple-600)}
.split-card h3{font-size:26px;margin:10px 0 12px;letter-spacing:-.02em}
.split-card p{color:var(--muted);line-height:1.6}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0 20px}
.checks .ck{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-2)}
.checks .ck svg{width:16px;height:16px;color:var(--purple-600);flex:none}

/* trust logos */
.logos{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;opacity:.7;margin-top:26px}
.logos .lg{font-weight:700;color:var(--muted-2);font-size:17px;letter-spacing:.02em}

/* feature grid */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 24px;margin-top:40px}
.feature{text-align:center}
.feature .fi{width:54px;height:54px;border-radius:15px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.feature .fi svg{width:25px;height:25px}
.feature h4{font-size:16px;margin-bottom:8px}
.feature p{color:var(--muted);font-size:13.5px;line-height:1.55;max-width:280px;margin:0 auto}

/* pricing */
.pricing-wrap{background:var(--bg-soft);border:1px solid var(--line);border-radius:24px;padding:44px 30px;margin-top:8px}
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px}
.plan{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;display:flex;flex-direction:column}
.plan.featured{border:2px solid var(--purple-500);box-shadow:0 18px 40px rgba(109,93,246,.16);position:relative}
.plan .pop{position:absolute;top:16px;right:16px;background:var(--purple-100);color:var(--purple-700);font-size:10.5px;font-weight:700;padding:4px 9px;border-radius:999px;letter-spacing:.04em}
.plan h4{font-size:17px}
.plan .desc{color:var(--muted);font-size:12.5px;margin:6px 0 16px;min-height:34px}
.plan .price{font-size:38px;font-weight:800;letter-spacing:-.02em}
.plan .price span{font-size:14px;color:var(--muted);font-weight:500}
.plan ul{list-style:none;padding:0;margin:18px 0 22px;display:flex;flex-direction:column;gap:10px}
.plan li{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-2)}
.plan li svg{width:15px;height:15px;color:var(--purple-600);flex:none}
.plan .btn{margin-top:auto}

/* cta + footer */
.cta-band{text-align:center;padding:64px 0}
.cta-band h2{font-size:36px;letter-spacing:-.02em}
.cta-band p{color:var(--muted);font-size:17px;margin:14px 0 26px}
.foot{border-top:1px solid var(--line);padding:30px 0;text-align:center;color:var(--muted);font-size:13px}
.foot .lock{display:inline-flex;align-items:center;gap:8px;color:var(--ink-2);font-weight:600;margin-bottom:6px}
.foot .lock svg{width:16px;height:16px;color:var(--purple-600)}

@media(max-width:920px){
  .hero{grid-template-columns:1fr}.hero h1{font-size:40px}
  .split,.features,.plans{grid-template-columns:1fr}
  .checks{grid-template-columns:1fr}
  .nav-links{display:none}
}