/* ── MyMetrixLab — Custom CSS ──────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --brand-purple:      #8B5CF6;
  --brand-purple-dark: #6D28D9;
  --brand-orange:      #F97316;
  --brand-dark:        #111827;
  --bs-primary:        #8B5CF6;
  --bs-primary-rgb:    139, 92, 246;
  --bs-link-color:     #8B5CF6;
  --bs-link-hover-color: #6D28D9;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: #111827;
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

/* ── Font weight utilities ───────────────────────────────────────────── */
.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }
.fw-800 { font-weight: 800 !important; }
.fw-900 { font-weight: 900 !important; }

/* ── Colour utilities ────────────────────────────────────────────────── */
.text-purple   { color: var(--brand-purple) !important; }
.text-orange   { color: var(--brand-orange) !important; }
.bg-purple-600 { background-color: var(--brand-purple) !important; }
.bg-gray-50    { background-color: #f9fafb !important; }
.bg-gray-900   { background-color: #111827 !important; }

/* ── Gradient utilities ──────────────────────────────────────────────── */
.purple-grad { background: linear-gradient(135deg, #8B5CF6, #6D28D9) !important; }
.orange-grad { background: linear-gradient(135deg, #F97316, #EA580C) !important; }

/* ── Spacing ─────────────────────────────────────────────────────────── */
.py-6  { padding-top: 5rem !important; padding-bottom: 5rem !important; }
.py-7  { padding-top: 6rem !important; padding-bottom: 6rem !important; }
.gap-2 { gap: .5rem !important; }
.gap-3 { gap: .75rem !important; }

/* ── Navbar (white) ──────────────────────────────────────────────────── */
.navbar-white {
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #f3f4f6;
}
.navbar-white .navbar-nav .nav-link {
  color: #4b5563;
  font-weight: 500;
  font-size: .9rem;
  padding: .5rem .75rem;
  transition: color .15s;
}
.navbar-white .navbar-nav .nav-link:hover { color: var(--brand-purple); }
.navbar-brand-logo {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #8B5CF6, #6D28D9);
  color: #fff;
  font-weight: 900;
  font-size: .85rem;
  letter-spacing: -.5px;
  flex-shrink: 0;
}

/* ── Pill buttons ────────────────────────────────────────────────────── */
.btn-pill {
  border-radius: 9999px !important;
  font-weight: 700;
  font-size: .875rem;
  padding: .6rem 1.5rem;
  transition: opacity .15s, transform .1s;
}
.btn-pill:hover { opacity: .9; }
.btn-pill:active { transform: scale(.98); }

.btn-purple-pill {
  background: linear-gradient(135deg, #8B5CF6, #6D28D9);
  border: none;
  color: #fff;
  border-radius: 9999px !important;
  font-weight: 700;
  font-size: .875rem;
  padding: .6rem 1.5rem;
  transition: opacity .15s;
}
.btn-purple-pill:hover { opacity: .9; color: #fff; }

.btn-outline-gray-pill {
  background: transparent;
  border: 2px solid #e5e7eb;
  color: #374151;
  border-radius: 9999px !important;
  font-weight: 600;
  font-size: .875rem;
  padding: .55rem 1.4rem;
  transition: border-color .15s, color .15s;
}
.btn-outline-gray-pill:hover {
  border-color: var(--brand-purple);
  color: var(--brand-purple);
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero-gradient {
  background: linear-gradient(135deg, #f5f3ff 0%, #fff7ed 50%, #ffffff 100%);
}

/* ── Stat strip ───────────────────────────────────────────────────────── */
.rounded-2xl { border-radius: 16px !important; }

/* ── Test cards ───────────────────────────────────────────────────────── */
.test-card {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 16px;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.test-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0,0,0,.09) !important;
}
.test-card-accent { height: 6px; width: 100%; }
.test-card-body { padding: 1.25rem 1.25rem 1.25rem; flex: 1; display: flex; flex-direction: column; }

/* ── Category/tier filter pills ──────────────────────────────────────── */
.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem 1rem;
  border-radius: 9999px;
  font-size: .8rem;
  font-weight: 600;
  border: 1.5px solid #e5e7eb;
  background: #fff;
  color: #4b5563;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.filter-pill:hover { border-color: var(--brand-purple); color: var(--brand-purple); }
.filter-pill.active-purple {
  background: var(--brand-purple);
  border-color: var(--brand-purple);
  color: #fff;
  box-shadow: 0 4px 12px rgba(139,92,246,.3);
}
.filter-pill.active-dark {
  background: #111827;
  border-color: #111827;
  color: #fff;
}
.filter-pill.active-green {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}

/* ── Tier compare table ──────────────────────────────────────────────── */
.tier-table {
  border: 1px solid #f3f4f6;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.tier-table table { margin: 0; }
.tier-table thead th { background: #fff; border-bottom: 1px solid #f3f4f6; padding: 1rem 1.5rem; font-weight: 600; }
.tier-table tbody td { padding: .85rem 1.5rem; font-size: .875rem; }
.tier-table tbody tr:nth-child(even) td { background: #fafafa; }
.tier-table tbody tr td:last-child { color: var(--brand-purple); font-weight: 600; }

/* ── How it works (purple strip) ─────────────────────────────────────── */
.section-purple { background: var(--brand-purple); }

/* ── Business dashboard mock ─────────────────────────────────────────── */
.dash-mock {
  background: #f9fafb;
  border: 1px solid #f3f4f6;
  border-radius: 24px;
  padding: 1.5rem;
  box-shadow: 0 20px 50px rgba(0,0,0,.08);
}
.dash-card {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.dash-mini {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 12px;
  padding: 1rem;
}
.dash-mini .val { font-size: 1.25rem; font-weight: 900; color: #111827; }
.dash-mini .lbl { font-size: .7rem; color: #9ca3af; margin-top: .1rem; }
.dash-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .75rem;
  font-size: .9rem;
}

/* ── Pricing cards ───────────────────────────────────────────────────── */
.pricing-card {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 24px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  transition: transform .2s;
}
.pricing-card.highlighted {
  background: linear-gradient(135deg, #8B5CF6, #6D28D9);
  color: #fff;
  border: none;
  box-shadow: 0 20px 50px rgba(139,92,246,.35);
  transform: scale(1.04);
}
.pricing-card.highlighted .text-muted { color: rgba(255,255,255,.7) !important; }

/* ── CTA dark section ────────────────────────────────────────────────── */
.cta-dark {
  background: #111827;
  border-radius: 24px;
  position: relative;
  overflow: hidden;
}
.cta-dark::before,
.cta-dark::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.cta-dark::before {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(139,92,246,.35), transparent 60%);
  left: -100px; top: -100px;
}
.cta-dark::after {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(249,115,22,.25), transparent 60%);
  right: -80px; bottom: -80px;
}

/* ── Auth split screen ───────────────────────────────────────────────── */
.auth-split { min-height: 100vh; display: flex; }
.auth-left  { flex: 0 0 50%; max-width: 50%; display: flex; flex-direction: column; justify-content: space-between; padding: 2.5rem; position: relative; overflow: hidden; }
.auth-right { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2.5rem; background: #fff; }
@media (max-width: 767px) {
  .auth-left  { display: none; }
  .auth-right { flex: 0 0 100%; padding: 1.5rem; }
}

/* ── Search input ────────────────────────────────────────────────────── */
.search-wrap { position: relative; }
.search-wrap .bi-search { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: #9ca3af; font-size: .875rem; }
.search-input {
  padding-left: 2.5rem !important;
  border-radius: 9999px !important;
  border: 1.5px solid #e5e7eb !important;
  background: #f9fafb !important;
  font-size: .875rem;
}
.search-input:focus {
  border-color: var(--brand-purple) !important;
  box-shadow: 0 0 0 3px rgba(139,92,246,.12) !important;
  background: #fff !important;
}

/* ── Star rating ─────────────────────────────────────────────────────── */
.star-rating { color: #F97316; font-size: .65rem; letter-spacing: -.05rem; }

/* ── Test engine ─────────────────────────────────────────────────────── */
#q-card { min-height: 280px; }
.option-btn { transition: background .15s, border-color .15s, color .15s; border-radius: 12px !important; }
.option-btn.active { background-color: var(--brand-purple) !important; border-color: var(--brand-purple) !important; color: #fff !important; }
.option-btn:hover:not(.active) { border-color: var(--brand-purple) !important; }
.likert-btn.active { background-color: var(--brand-purple) !important; border-color: var(--brand-purple) !important; color: #fff !important; }
.option-circle { display: inline-block; width: 16px; height: 16px; border: 2px solid currentColor; border-radius: 50%; vertical-align: middle; flex-shrink: 0; }
.transition-width { transition: width .4s ease; }

/* ── Footer (white) ──────────────────────────────────────────────────── */
.footer-white { border-top: 1px solid #f3f4f6; background: #fff; }
.footer-white a { color: #9ca3af; font-size: .875rem; text-decoration: none; transition: color .15s; }
.footer-white a:hover { color: var(--brand-purple); }

/* ── Misc ─────────────────────────────────────────────────────────────── */
.min-vh-75 { min-height: 75vh; }
.rounded-pill-full { border-radius: 9999px !important; }
.text-white-75 { color: rgba(255,255,255,.75) !important; }
.accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(139,92,246,.25); }
.accordion-button:not(.collapsed) { color: var(--brand-purple); }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #c4b5fd; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-purple); }
@media print {
  .navbar, footer, .btn, .alert { display: none !important; }
  .card { box-shadow: none !important; }
}