/* Landing styles (moto template-like). Scoped with .mf-* to avoid impacting other pages. */

:root {
  --mf-bg: #0b0d10;
  --mf-bg2: #0f1520;
  --mf-text: #e9eef7;
  --mf-muted: rgba(233, 238, 247, 0.72);
  --mf-line: rgba(233, 238, 247, 0.12);
  --mf-accent: #00a2dd; /* reuse existing brand blue */
}

.mf-page {
  background: radial-gradient(1200px 700px at 15% -10%, rgba(0, 162, 221, 0.22), transparent 60%),
              radial-gradient(800px 500px at 90% 10%, rgba(52, 74, 203, 0.18), transparent 55%),
              linear-gradient(180deg, var(--mf-bg), var(--mf-bg2));
  color: var(--mf-text);
}

.mf-page a { color: inherit; }

.mf-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: rgba(11, 13, 16, 0.72);
  border-bottom: 1px solid var(--mf-line);
}

.mf-nav .navbar-brand img { height: 44px; width: auto; }

.mf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 600;
  border: 1px solid rgba(0, 162, 221, 0.35);
  background: linear-gradient(135deg, rgba(0, 162, 221, 0.22), rgba(52, 74, 203, 0.18));
  color: var(--mf-text);
}

.mf-btn:hover { opacity: 0.92; }

.mf-hero {
  padding: 56px 0 26px;
}

.mf-hero-card {
  border: 1px solid var(--mf-line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

.mf-hero-media {
  min-height: 280px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.mf-kicker {
  display: inline-block;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--mf-muted);
}

.mf-title {
  font-size: 40px;
  line-height: 1.08;
  color: var(--mf-text);
  margin-top: 10px;
}

.mf-subtitle { color: var(--mf-muted); font-size: 16px; }

.mf-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.mf-metric {
  border: 1px solid var(--mf-line);
  border-radius: 14px;
  padding: 14px;
  background: rgba(255,255,255,0.03);
}

.mf-metric .v { font-size: 22px; font-weight: 700; }
.mf-metric .k { color: var(--mf-muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }

.mf-ticker {
  margin-top: 18px;
  border-top: 1px solid var(--mf-line);
  border-bottom: 1px solid var(--mf-line);
  padding: 12px 0;
  color: var(--mf-muted);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
}

.mf-section { padding: 46px 0; }
.mf-section-title { color: var(--mf-text); font-size: 28px; margin-bottom: 8px; }
.mf-section-lead { color: var(--mf-muted); margin-bottom: 18px; }

.mf-card {
  border: 1px solid var(--mf-line);
  background: rgba(255,255,255,0.03);
  border-radius: 16px;
  padding: 18px;
  height: 100%;
}

.mf-card h3 { color: var(--mf-text); font-size: 18px; margin-bottom: 8px; }
.mf-card p { color: var(--mf-muted); margin: 0; }

.mf-product-card img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--mf-line);
  background: rgba(255,255,255,0.04);
}

.mf-product-card .name { font-size: 16px; font-weight: 700; margin: 10px 0 12px; color: var(--mf-text); }

.mf-faq .q { cursor: pointer; user-select: none; font-weight: 700; color: var(--mf-text); }
.mf-faq .a { display: none; color: var(--mf-muted); margin-top: 8px; }

.mf-footer {
  border-top: 1px solid var(--mf-line);
  padding: 28px 0;
  color: var(--mf-muted);
}

@media (max-width: 991px) {
  .mf-title { font-size: 34px; }
  .mf-metrics { grid-template-columns: 1fr; }
  .mf-hero-media { min-height: 220px; }
}

/* Auth pages (login/register/etc) reuse the landing look */
.mf-auth .mf-auth-main {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.mf-auth .logo {
  display: block;
  margin: 0 auto;
  max-height: 56px;
  width: auto;
}

.mf-auth .card {
  border: 1px solid var(--mf-line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: none;
}

.mf-auth .card-body,
.mf-auth .card,
.mf-auth label {
  color: var(--mf-text);
}

.mf-auth .text-muted { color: var(--mf-muted) !important; }

.mf-auth .form-control,
.mf-auth select.form-control,
.mf-auth textarea.form-control {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--mf-line);
  color: var(--mf-text);
}

.mf-auth .form-control:focus,
.mf-auth select.form-control:focus,
.mf-auth textarea.form-control:focus {
  background: rgba(255,255,255,0.06);
  border-color: rgba(0, 162, 221, 0.55);
  box-shadow: 0 0 0 0.2rem rgba(0, 162, 221, 0.18);
  color: var(--mf-text);
}

.mf-auth .form-control::placeholder,
.mf-auth textarea.form-control::placeholder {
  color: rgba(233, 238, 247, 0.55);
}

.mf-auth .custom-control-label::before {
  background-color: rgba(255,255,255,0.06);
  border-color: var(--mf-line);
}

.mf-auth .btn-primary,
.mf-auth .btn-login {
  border: 1px solid rgba(0, 162, 221, 0.35);
  background: linear-gradient(135deg, rgba(0, 162, 221, 0.22), rgba(52, 74, 203, 0.18));
  color: var(--mf-text);
}

.mf-auth .btn-primary:hover,
.mf-auth .btn-login:hover {
  opacity: 0.92;
}

.mf-auth a,
.mf-auth .btn-link {
  color: rgba(233, 238, 247, 0.9);
}

.mf-auth a:hover,
.mf-auth .btn-link:hover {
  color: var(--mf-text);
  opacity: 0.95;
}

.mf-auth .invalid-feedback {
  display: block;
}