/* Globals */
html, body { height: 100%; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.container { max-width: 1200px; }

/* Reusable utilities to mirror Tailwind tokens used in markup */
.gradient-bg {
  background: linear-gradient(135deg, #6366f1 0%, #ec4899 50%, #10b981 100%);
}
.glass-effect { backdrop-filter: blur(10px); background: rgba(255,255,255,.1); }
.iti { width: 100% !important; }

/* Shortcuts */
.nav-link { color: #374151; transition: color .2s; }
.nav-link:hover { color: #6366f1; }

.footer-link { color: #9ca3af; transition: color .2s; }
.footer-link:hover { color: #fff; }

.social-btn { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:.5rem; background:#1f2937; transition: background .2s; }
.social-btn:hover { background:#6366f1; }

.label { display:block; color:#374151; font-weight:600; margin-bottom:.5rem; }
.input {
  width:100%; padding:.75rem 1rem; border:1px solid #d1d5db; border-radius:.5rem;
  outline: none; transition: box-shadow .2s, border-color .2s;
}
.input:focus { border-color:#6366f1; box-shadow: 0 0 0 4px rgba(99,102,241,.2); }

.li-check { display:flex; align-items:center; gap:.75rem; }
.li-check::before { content:"✓"; color:#10b981; }

/* Buttons */
.btn-primary {
  display:inline-block; background:#6366f1; color:#fff; padding:.75rem 1.25rem;
  border-radius:.5rem; font-weight:600; transition:opacity .2s, transform .2s;
}
.btn-primary:hover { opacity:.9; transform: translateY(-1px); }

.btn-secondary {
  display:inline-block; background:#ec4899; color:#fff; padding:.75rem 1.25rem;
  border-radius:.5rem; font-weight:600; transition:opacity .2s, transform .2s;
}
.btn-secondary:hover { opacity:.9; transform: translateY(-1px); }

.btn-dark {
  display:inline-block; background:#111827; color:#fff; padding:.75rem 1.25rem;
  border-radius:.5rem; font-weight:600; transition:opacity .2s, transform .2s;
}
.btn-dark:hover { opacity:.95; transform: translateY(-1px); }

.btn-outline {
  display:inline-block; border:1px solid #d1d5db; color:#374151; padding:.75rem 1.25rem;
  border-radius:.5rem; background:#fff; transition: background .2s, color .2s;
}
.btn-outline:hover { background:#f9fafb; }

/* Subpage header/footer */
.sub-header { position:sticky; top:0; background:rgba(255,255,255,.9); backdrop-filter: blur(8px); border-bottom:1px solid #f3f4f6; z-index:40; }
.brand { display:flex; align-items:center; gap:.5rem; font-weight:800; color:#1f2937; }
.brand::before {
  content:"M"; display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:.75rem; color:#fff; background: linear-gradient(135deg, #6366f1, #ec4899, #10b981);
}
.mobile-menu { padding:1rem 1.5rem; border-top:1px solid #f3f4f6; background:#fff; }

.sub-footer {
  padding:2rem 1rem; text-align:center; color:#9ca3af; background:#0b1222; border-top:1px solid #0f172a;
}

/* Page titles & prose */
.page-title { font-size:2.25rem; line-height:1.2; font-weight:800; color:#1f2937; margin-bottom:2rem; }
.prose-section h2 { font-size:1.25rem; font-weight:700; margin:1.25rem 0 .5rem; color:#111827; }
.prose-section p, .prose-section li { color:#374151; line-height:1.75; }

/* Feature grid helpers */
.feature-item { display:flex; align-items:flex-start; gap:1rem; }
.feature-badge {
  width:3rem; height:3rem; color:#fff; border-radius:.75rem; display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0;
}
.feature-title { font-size:1.25rem; font-weight:700; color:#111827; }