/* VENTURES HARBOR — DESIGN OVERRIDE LAYER */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ---------- 1. Typography ---------- */
body,
button,
input,
select,
textarea {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.page-section-title,
.card-title,
.modal-title,
.sh-title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--vh-ink);
}
.text-muted,
.page-section-sub,
.sh-sub {
  color: var(--vh-slate);
}
.text-navy { color: var(--vh-ink); }
.text-gold { color: var(--vh-gold-ink); }
.gradient-text {
  background: linear-gradient(90deg, #2563EB, #3B82F6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gradient-text--gold {
  background: linear-gradient(90deg, #F5C518, #C79E0F);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 2. Top navbar (browse, venture detail, about, contact…) */
.navbar {
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(8, 20, 33, .08), 0 8px 30px rgba(8, 20, 33, .06);
  border-bottom: 0;
}

.navbar.scrolled {
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 1px 0 rgba(8, 20, 33, .08), 0 10px 34px rgba(8, 20, 33, .10);
}
.navbar .nav-container {
  max-width: 1360px;
  gap: clamp(14px, 2.5vw, 32px);
}
.nav-logo,
.nav-logo .logo-text {
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1;
  white-space: nowrap;
}

.navbar .nav-logo,
.navbar .nav-logo .logo-text { color: var(--vh-ink); }
.sidebar .nav-logo .logo-text,
.footer-logo .logo-text { color: #fff; }

.footer-logo .logo-icon { width: 30px; height: 30px; }
.footer-logo .logo-text { font-size: 1.05rem; letter-spacing: .05em; }

.sidebar .nav-logo .logo-icon { width: 26px; height: 26px; }
.sidebar .nav-logo .logo-text { font-size: .72rem; letter-spacing: .06em; }

@media (max-width: 1024px) {
  .sidebar .nav-logo { gap: .4rem; }
  .sidebar .nav-logo .logo-icon { width: 22px; height: 22px; }
  .sidebar .nav-logo .logo-text { font-size: .64rem; letter-spacing: .03em; }
}
.nav-link {
  font-size: 14.5px;
  font-weight: 600;
  color: #33415C;
  transition: color .25s;
}
.nav-link:hover,
.nav-link.active { color: var(--vh-blue); }
.nav-link.active::after,
.nav-link::after { background: var(--vh-blue); }

.nav-search {
  border-radius: 999px;
  background: rgba(8, 20, 33, .05);
  border: 1px solid rgba(8, 20, 33, .08);
  padding: 9px 16px;
  box-shadow: none;
}
.nav-search input {
  font-size: 13.5px;
  color: var(--vh-ink);
  background: transparent;
}
.nav-search input::placeholder { color: var(--gray-400); }

.btn-create-venture {
  border-radius: 999px !important;
  background: var(--vh-gold) !important;
  color: var(--vh-ink) !important;
  font-weight: 800;
  font-size: 14px;
  padding: 11px 20px;
  border: 0 !important;
  box-shadow: 0 6px 18px rgba(245, 197, 24, .25);
  transition: transform .25s, box-shadow .25s;
}
.btn-create-venture:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(245, 197, 24, .4);
}

.nav-avatar-btn {
  border-radius: 999px;
  border: 1px solid rgba(8, 20, 33, .14);
  padding: 6px 12px 6px 6px;
  transition: border-color .25s, background .25s;
}
.nav-avatar-btn:hover { border-color: rgba(37, 99, 235, .4); background: #F7F8FA; }
.nav-avatar {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--vh-blue);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
}
.nav-avatar-name { font-size: 13.5px; font-weight: 700; color: var(--vh-ink); }

.nav-dropdown {
  border-radius: 16px;
  border: 1px solid var(--vh-line);
  box-shadow: 0 20px 48px rgba(8, 20, 33, .16);
  padding: 8px;
}
.nav-dropdown-item {
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #33415C;
  padding: 10px 12px;
}
.nav-dropdown-item:hover { background: var(--vh-surface); color: var(--vh-ink); }
.nav-dropdown-item.danger { color: #C0392B; }
.nav-dropdown-item.danger:hover { background: #FDECEA; color: #A5281B; }
.nav-hamburger span { background: var(--vh-ink); }

.vh-nav-signin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 999px;
  background: rgba(8, 20, 33, .04);
  border: 1px solid rgba(8, 20, 33, .16);
  color: #33415C;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: color .25s, border-color .25s, background .25s, transform .25s;
}
.vh-nav-signin:hover {
  border-color: rgba(8, 20, 33, .34);
  background: rgba(8, 20, 33, .07);
  color: #081421;
  transform: translateY(-3px);
}

/* ---------- 3. Buttons ---------- */
.btn {
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0;
  transition: transform .25s, box-shadow .25s, background .25s, border-color .25s, color .25s;
}
.btn--primary,
.btn-primary,
.btn-join {
  background: var(--vh-blue);
  border-color: var(--vh-blue);
  color: #fff;
  box-shadow: 0 10px 30px rgba(37, 99, 235, .28);
}
.btn--primary:hover,
.btn-primary:hover,
.btn-join:hover {
  background: #1D4ED8;
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(37, 99, 235, .45);
}
.btn--secondary,
.btn-secondary {
  background: var(--vh-ink);
  border-color: var(--vh-ink);
  color: #fff;
}
.btn--secondary:hover,
.btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(8, 20, 33, .3);
}
.btn--gold {
  background: var(--vh-gold);
  border-color: var(--vh-gold);
  color: var(--vh-ink);
  box-shadow: 0 6px 18px rgba(245, 197, 24, .25);
}
.btn--gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(245, 197, 24, .4);
}
.btn--outline,
.btn-details {
  background: #fff;
  border: 1px solid var(--vh-line);
  color: var(--vh-ink);
}
.btn--outline:hover,
.btn-details:hover {
  border-color: var(--vh-blue);
  background: #F5F8FF;
  color: var(--vh-ink);
}
.btn--ghost { color: #33415C; }
.btn--ghost:hover { background: var(--vh-surface); color: var(--vh-ink); }
.btn--danger { background: #C0392B; border-color: #C0392B; color: #fff; }
.btn--danger:hover { background: #A5281B; transform: translateY(-2px); }
.btn--success { background: #157347; border-color: #157347; color: #fff; }
.btn--glass {
  background: rgba(8, 20, 33, .05);
  border: 1px solid rgba(8, 20, 33, .1);
  color: var(--vh-ink);
}
.btn--glass:hover { background: rgba(8, 20, 33, .09); color: var(--vh-ink); }
.btn--icon, .btn--icon-lg { border-radius: 999px; }

/* ---------- 4. Cards & surfaces ---------- */
.card,
.vc,
.stat-card,
.dash-qa-card,
.auth-card {
  border-radius: 24px;
  border: 1px solid var(--vh-line);
  background: #fff;
  box-shadow: 0 2px 10px rgba(8, 20, 33, .04);
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.card--hover:hover,
.vc:hover,
.dash-qa-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 50px rgba(8, 20, 33, .12);
  border-color: rgba(37, 99, 235, .3);
}
.stat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(8, 20, 33, .1);
}
.card--dark {
  background: var(--vh-ink);
  border-color: rgba(255, 255, 255, .08);
  color: #fff;
}
.card-header,
.card-footer { border-color: var(--vh-line); }
.card-title { font-size: 17px; font-weight: 800; }

.stat-card-icon { border-radius: 15px; }
.stat-card-value { font-weight: 800; letter-spacing: -.03em; color: var(--vh-ink); }
.stat-card-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gray-400);
}

.vc-icon { border-radius: 14px; background: #EFF4FF; color: var(--vh-blue); }
.vc-name { font-weight: 800; letter-spacing: -.01em; }
.vc-financials, .vc-stats { border-radius: 16px; background: var(--vh-surface); }
.vc-fin-lbl, .vc-fin-label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8896AC;
}
.vc-fin-val, .vc-fin-value { font-weight: 800; color: var(--vh-ink); }

/* ---------- 5. Forms ---------- */
.form-label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #33415C;
}
.form-control,
.form-select,
.form-textarea,
.otp-input {
  border-radius: 14px;
  border: 1px solid var(--vh-line);
  background: #fff;
  color: var(--vh-ink);
  font-size: 14.5px;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.form-control::placeholder,
.form-textarea::placeholder { color: var(--gray-400); }
.form-control:focus,
.form-select:focus,
.form-textarea:focus,
.otp-input:focus {
  border-color: var(--vh-blue);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
  outline: 0;
}
.form-control--error { border-color: #B3261E; }
.form-control--error:focus { box-shadow: 0 0 0 4px rgba(179, 38, 30, .12); }
.form-error { color: #B3261E; }
.form-hint { color: var(--vh-slate); }
.file-upload {
  border-radius: 18px;
  border: 1.5px dashed var(--vh-line);
  background: var(--vh-surface);
}
.file-upload:hover { border-color: var(--vh-blue); background: #F5F8FF; }
.radio-option,
.chip {
  border-radius: 999px;
  border: 1px solid var(--vh-line);
  transition: all .25s;
}
.radio-option:hover, .chip:hover { border-color: var(--vh-blue); }
.range-slider::-webkit-slider-thumb { background: var(--vh-blue); }
.range-slider::-moz-range-thumb { background: var(--vh-blue); }

/* ---------- 6. Badges ---------- */
.badge {
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.badge--gold,
.badge--warning,
.badge--pending {
  background: rgba(245, 197, 24, .14);
  color: var(--vh-gold-ink);
}
.badge--navy, .badge--dark { background: var(--vh-ink); color: #fff; }
.badge--info { background: #EFF4FF; color: var(--vh-blue); }
.badge--success, .badge--verified { background: #E7F7EF; color: #157347; }
.badge--danger, .badge--rejected { background: #FDECEA; color: #B3261E; }
.badge--gray, .badge--unverified { background: var(--vh-surface); color: var(--vh-slate); }

.sidebar {
  background: var(--vh-ink);
  border-right: 1px solid rgba(255, 255, 255, .06);
}
.sidebar-header { border-bottom: 1px solid rgba(255, 255, 255, .07); }
.sidebar-logo-text,
.sidebar-logo {
  color: #fff;
  font-weight: 800;
  letter-spacing: -.02em;
}
.sidebar-section-title {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .38);
}
.sidebar-nav-item {
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, .68);
  transition: background .22s, color .22s;
}
.sidebar-nav-item:hover {
  background: rgba(255, 255, 255, .06);
  color: #fff;
}
.sidebar-nav-item.active {
  background: rgba(37, 99, 235, .18);
  color: #fff;
  box-shadow: inset 3px 0 0 var(--vh-gold);
}
.sidebar-nav-item.active .sidebar-icon { color: var(--vh-gold); }
.sidebar-nav-item--danger { color: #FF8A80; }
.sidebar-nav-item--danger:hover { background: rgba(255, 138, 128, .12); color: #FF8A80; }
.sidebar-badge {
  border-radius: 999px;
  background: var(--vh-blue);
  color: #fff;
  font-weight: 800;
}
.sidebar-badge--gold { background: var(--vh-gold); color: var(--vh-ink); }
.sidebar-badge--danger { background: #C0392B; color: #fff; }
.sidebar-footer { border-top: 1px solid rgba(255, 255, 255, .07); }
.sidebar-user { border-radius: 14px; transition: background .22s; }
.sidebar-user:hover { background: rgba(255, 255, 255, .06); }
.sidebar-user-name { color: #fff; font-weight: 700; }
.sidebar-user-role { color: rgba(255, 255, 255, .5); }
.sidebar-collapse-btn {
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .8);
  background: transparent;
}
.sidebar-collapse-btn:hover { border-color: var(--vh-gold); color: var(--vh-gold); }

.page-wrapper, .dashboard-body { background: var(--vh-surface); }
.page-content { background: transparent; }

/* ---------- 8. Dashboard specifics ---------- */
.dash-welcome {
  border-radius: 26px;
  background: var(--vh-ink);
  background-image: radial-gradient(700px 320px at 85% -20%, rgba(37, 99, 235, .28), transparent 60%);
  border: 1px solid rgba(255, 255, 255, .07);
  color: #fff;
}
.dash-welcome-title { color: #fff; font-weight: 800; letter-spacing: -.02em; }
.dash-welcome-date { color: rgba(255, 255, 255, .55); }
.dash-qa-icon { border-radius: 15px; }
.dash-qa-arrow { color: var(--vh-blue); }
.vli-icon { border-radius: 14px; }
.vli-prog-bar, .progress-bar, .vc-prog-bar {
  border-radius: 999px;
  background: #EAEEF4;
  overflow: hidden;
}
.vli-prog-fill, .progress-fill, .vc-prog-fill {
  border-radius: 999px;
  background: linear-gradient(90deg, #2563EB, #3B82F6);
}
.progress-fill--success { background: linear-gradient(90deg, #157347, #22A96B); }
.progress-fill--warning { background: linear-gradient(90deg, #C79E0F, #F5C518); }
.progress-fill--danger { background: linear-gradient(90deg, #B3261E, #E05A50); }
.meetup-date-box { border-radius: 16px; background: #EFF4FF; color: var(--vh-blue); }
.activity-item, .notif-item, .dash-meetup-item, .dash-venture-item, .venture-list-item {
  border-radius: 16px;
  transition: background .22s;
}
.activity-item:hover, .notif-item:hover, .venture-list-item:hover { background: var(--vh-surface); }

/* ---------- 9. Tables ---------- */
.table-wrap {
  border-radius: 24px;
  border: 1px solid var(--vh-line);
  box-shadow: 0 2px 10px rgba(8, 20, 33, .04);
}
.table thead tr { background: var(--vh-surface); border-color: var(--vh-line); }
.table th {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
  color: #8896AC;
}
.table tbody tr { border-color: var(--vh-line); }
.table tbody tr:hover { background: var(--vh-surface); }
.table-avatar-img { border-radius: 999px; background: var(--vh-blue); }

/* ---------- 10. Tabs, modals, misc ---------- */
.tabs { border-color: var(--vh-line); }
.tab-btn {
  font-size: 14px;
  font-weight: 700;
  color: var(--vh-slate);
  transition: color .22s;
}
.tab-btn:hover { color: var(--vh-ink); }
.tab-btn.active { color: var(--vh-blue); }
.tab-btn.active::after { background: var(--vh-blue); }
.tabs--pill .tab-btn { border-radius: 999px; }
.tabs--pill .tab-btn.active { background: var(--vh-blue); color: #fff; }

.modal {
  border-radius: 26px;
  border: 1px solid var(--vh-line);
  box-shadow: 0 32px 70px rgba(8, 20, 33, .24);
}
.modal-overlay { background: rgba(8, 20, 33, .55); backdrop-filter: blur(4px); }
.modal-header, .modal-footer { border-color: var(--vh-line); }
.modal-title { font-size: 20px; font-weight: 800; }
.modal-desc { color: var(--vh-slate); }
.modal-close { border-radius: 999px; color: var(--gray-400); }
.modal-close:hover { background: var(--vh-surface); color: var(--vh-ink); }

.divider { background: var(--vh-line); }
.empty-state-icon { border-radius: 22px; background: var(--vh-surface); color: var(--gray-400); }
.empty-state-title { font-weight: 800; color: var(--vh-ink); }
.empty-state-desc { color: var(--vh-slate); }
.step-circle { border-radius: 999px; }
.step-item.active .step-circle,
.step-circle.active { background: var(--vh-blue); color: #fff; }
.step-item.done .step-circle,
.step-circle.done { background: var(--vh-gold); color: var(--vh-ink); }
.step-connector { background: var(--vh-line); }
.tooltip {
  border-radius: 12px;
  background: var(--vh-ink);
  font-size: 12.5px;
  font-weight: 600;
}
.skeleton { background: var(--vh-surface); border-radius: 12px; }

/* 11. Section headers & dark page heroes */
.page-section-title { font-size: clamp(28px, 3vw, 40px); line-height: 1.08; }
.sh-line { background: var(--vh-blue); }
.browse-hero {
  position: relative;
  overflow: hidden;
  min-height: 420px;
  display: flex;
  align-items: center;
  background: #000;
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0) 40%, #000 100%),
    radial-gradient(900px 500px at 50% -10%, rgba(37, 99, 235, .2), transparent 60%);
  color: #fff;
}

.browse-hero-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.browse-hero-scanner {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;

  opacity: 0;
  transition: opacity 1.2s ease;
}
.browse-hero-scanner[data-vh-scanner-ready] { opacity: 1; }

.browse-hero-scrim {
  position: absolute;
  inset: 0;

  background:
    radial-gradient(720px 260px at 50% 54%, rgba(2, 6, 16, .68), transparent 78%),
    linear-gradient(180deg,
      rgba(2, 6, 16, .62) 0%,
      rgba(2, 6, 16, .10) 30%,
      rgba(2, 6, 16, .10) 66%,
      rgba(2, 6, 16, .90) 100%);
}
/* Keep the search column above the background. */
.browse-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
}
@media (max-width: 900px) {
  .browse-hero { min-height: 0; }

  .browse-hero-scrim {
    background:
      radial-gradient(420px 200px at 50% 50%, rgba(2, 6, 16, .74), transparent 76%),
      linear-gradient(180deg, rgba(2, 6, 16, .78) 0%, rgba(2, 6, 16, .3) 34%, rgba(2, 6, 16, .95) 100%);
  }
}

.browse-hero h1,
.browse-hero .h1,
.browse-hero .page-section-title { color: #fff; }
.browse-hero p,
.browse-hero .page-section-sub {
  /* Was .7, which lost the line against the animated wave graphic behind it —
     the strokes are light and moving, so a translucent grey had nothing steady
     to sit against. Brighter ink plus the deeper radial below is what makes it
     readable without hiding the animation. */
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 12px rgba(2, 6, 16, .75);
}

/* ---------- 12. Auth pages ---------- */
.auth-left {
  background: #000;
  background-image: radial-gradient(900px 600px at 20% 0%, rgba(37, 99, 235, .28), transparent 60%);
}
.auth-brand,
.auth-brand-text { color: #fff; font-weight: 800; letter-spacing: .1em; white-space: nowrap; }
.auth-hero-text { color: #fff; font-weight: 800; letter-spacing: -.03em; }
.auth-features { color: rgba(255, 255, 255, .75); }
.auth-feat-check { color: var(--vh-gold); }
.auth-stat { color: #fff; font-weight: 800; }
.auth-stat-div { background: rgba(255, 255, 255, .16); }
.auth-testimonial { color: rgba(255, 255, 255, .8); }
.auth-test-av { border-radius: 999px; background: var(--vh-blue); }
.auth-card { border-radius: 26px; box-shadow: 0 24px 60px rgba(8, 20, 33, .1); }
.auth-tabs { background: var(--vh-surface); border-radius: 999px; }
.auth-tab { border-radius: 999px; font-weight: 700; color: var(--vh-slate); }
.auth-tab.active { background: var(--vh-blue); color: #fff; }
.auth-link, .auth-switch a { color: var(--vh-blue); font-weight: 600; }
.social-btn { border-radius: 14px; border: 1px solid var(--vh-line); font-weight: 700; }
.social-btn:hover { border-color: var(--vh-blue); background: #F5F8FF; }
.social-btn--dark { background: var(--vh-ink); color: #fff; border-color: var(--vh-ink); }
.ps-seg { border-radius: 999px; }
.verify-icon { border-radius: 999px; background: #EFF4FF; color: var(--vh-blue); }

/* ---------- 13. Footer (about / contact) ---------- */
.footer { background: #0D0D0D; border-top: 1px solid rgba(255, 255, 255, .06); }
.footer-container { max-width: 1360px; }
.footer-logo { color: #fff; font-weight: 800; letter-spacing: .08em; }
.footer-tagline { color: var(--vh-gold); font-weight: 700; }
.footer-desc, .footer-owner-intro { color: rgba(255, 255, 255, .5); }
.footer-links-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .4);
}
.footer-links-list a {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, .65);
  transition: color .25s;
}
.footer-links-list a:hover { color: var(--vh-gold); }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .08); }
.footer-copy { color: rgba(255, 255, 255, .45); }
.footer-socials a {
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .6);
  transition: border-color .25s, color .25s;
}
.footer-socials a:hover { border-color: var(--vh-gold); color: var(--vh-gold); }

/* ---------- 14. Page-specific corrections ---------- */

.browse-filters {
  border: 1px solid var(--vh-line);
  border-radius: 24px;
  box-shadow: 0 2px 10px rgba(8, 20, 33, .04);
}

.browse-hero .chip {
  border: 1px solid rgba(255, 255, 255, .25);
  color: rgba(255, 255, 255, .85);
  background: rgba(0, 0, 0, .78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.browse-hero .chip:hover {
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
  background: rgba(0, 0, 0, .82);
}
.browse-hero .chip.active,
.chip.active {
  background: var(--vh-gold);
  color: var(--vh-ink);
  border-color: var(--vh-gold);
}
.browse-search-box {
  border-radius: 999px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .3);
}
.browse-search-box input { color: var(--vh-ink); }

/* Warning callouts: keep them gold, but the design's gold. */
.razorpay-demo-note,
.legal-disclaimer {
  background: #FFFBEC;
  border: 1px solid rgba(245, 197, 24, .45);
  border-radius: 14px;
  color: var(--vh-gold-ink);
}

/* Filter pills used on browse / venture lists. */
.filter-btn {
  border-radius: 999px;
  border: 1px solid var(--vh-line);
  background: #fff;
  color: #33415C;
  font-weight: 700;
  transition: all .25s;
}
.filter-btn:hover { border-color: var(--vh-blue); }
.filter-btn.active {
  background: var(--vh-blue);
  border-color: var(--vh-blue);
  color: #fff;
}

/* ---------- 15. Motion safety ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001s !important; transition-duration: .001s !important; }
}