/* ── CMMC Readiness SaaS — Shared Styles ── */
:root {
  --blue:    #0d6efd;
  --blue2:   #0a58ca;
  --green:   #198754;
  --red:     #dc3545;
  --amber:   #fd7e14;
  --bg:      #0a0e1a;
  --surf:    #111827;
  --surf2:   #1a2233;
  --border:  rgba(255,255,255,.08);
  --border2: rgba(255,255,255,.14);
  --text1:   #f1f5f9;
  --text2:   #94a3b8;
  --text3:   #64748b;
  --cyan:    #00d8f0;
  --mono:    'JetBrains Mono', 'Fira Code', monospace;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text1);
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.6;
  min-height: 100vh;
}
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Nav ── */
.nav {
  display: flex; align-items: center; gap: 24px;
  padding: 0 32px; height: 60px;
  background: rgba(10,14,26,.9);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(12px);
}
.nav-brand {
  font-weight: 800; font-size: 1.1rem; color: var(--text1);
  display: flex; align-items: center; gap: 8px;
}
.nav-brand span { color: var(--cyan); }
.nav-links { display: flex; gap: 20px; margin-left: auto; }
.nav-links a { color: var(--text2); font-size: .875rem; font-weight: 500; }
.nav-links a:hover { color: var(--text1); text-decoration: none; }
.nav-links .btn { padding: 6px 18px; font-size: .8125rem; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 24px; border-radius: 8px; font-weight: 600; font-size: .9375rem;
  border: none; cursor: pointer; transition: opacity .15s, transform .1s;
  text-decoration: none !important;
}
.btn:active { transform: scale(.97); }
.btn-pri { background: var(--blue); color: #fff; }
.btn-pri:hover { background: var(--blue2); opacity: 1; }
.btn-sec { background: var(--surf2); color: var(--text1); border: 1px solid var(--border2); }
.btn-sec:hover { border-color: var(--text3); }
.btn-out { background: transparent; color: var(--cyan); border: 1.5px solid var(--cyan); }
.btn-out:hover { background: rgba(0,216,240,.08); }
.btn-sm { padding: 6px 16px; font-size: .8125rem; }
.btn-danger { background: var(--red); color: #fff; }

/* ── Cards ── */
.card {
  background: var(--surf); border: 1px solid var(--border);
  border-radius: 12px; padding: 24px;
}

/* ── Form inputs ── */
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-label { font-size: .8125rem; font-weight: 600; color: var(--text2); }
.form-input {
  background: var(--surf2); border: 1px solid var(--border2); border-radius: 8px;
  padding: 10px 14px; color: var(--text1); font-size: .9375rem;
  outline: none; transition: border-color .2s;
  width: 100%;
}
.form-input:focus { border-color: var(--cyan); }
.form-input::placeholder { color: var(--text3); }

/* ── Alerts ── */
.alert {
  padding: 12px 16px; border-radius: 8px; font-size: .875rem;
  display: flex; align-items: flex-start; gap: 10px;
}
.alert-err  { background: rgba(220,53,69,.12);  border: 1px solid rgba(220,53,69,.3);  color: #f8a4ac; }
.alert-ok   { background: rgba(25,135,84,.12);  border: 1px solid rgba(25,135,84,.3);  color: #75c999; }
.alert-info { background: rgba(13,110,253,.12); border: 1px solid rgba(13,110,253,.3); color: #93b8ff; }

/* ── Plan badges ── */
.badge {
  display: inline-block; padding: 2px 10px; border-radius: 20px;
  font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.badge-free { background: rgba(100,116,139,.2); color: var(--text2); }
.badge-pro  { background: rgba(0,216,240,.15);  color: var(--cyan); }
.badge-team { background: rgba(13,110,253,.2);  color: #93b8ff; }

/* ── Lock overlay (paywall gate) ── */
.paywall-gate {
  position: relative; overflow: hidden; border-radius: 8px;
}
.paywall-gate::after {
  content: '';
  position: absolute; inset: 0;
  backdrop-filter: blur(6px);
  background: rgba(10,14,26,.7);
  display: flex; align-items: center; justify-content: center;
}
.paywall-prompt {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; text-align: center; padding: 24px;
}
.paywall-icon { font-size: 2rem; }
.paywall-title { font-weight: 700; font-size: 1rem; color: var(--text1); }
.paywall-desc  { font-size: .875rem; color: var(--text2); max-width: 320px; }

/* ── Utility ── */
.container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.section   { padding: 64px 0; }
.text-center { text-align: center; }
.text-muted  { color: var(--text2); }
.mt-1 { margin-top: 8px; }  .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; }
.mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; }
.gap-2 { gap: 16px; } .gap-3 { gap: 24px; }
.flex { display: flex; } .flex-col { flex-direction: column; }
.items-center { align-items: center; }
.w-full { width: 100%; }

/* ── Responsive ── */
@media (max-width: 640px) {
  .nav { padding: 0 16px; }
  .nav-links { gap: 12px; }
  .section { padding: 40px 0; }
}