/* =========================================================================
   Shared site chrome — header + footer, identical on every public page.
   Loaded by index, conditions and contact.

   Everything is namespaced `lc-` because the legal and contact pages also load
   Bootstrap: an unprefixed `.btn` or `.container` here would silently restyle
   their content. Nothing in this file touches `body` either, so each page keeps
   its own type and layout.
   ========================================================================= */

.lc-hd, .lc-ft {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --lc-brand: #6d28d9;
  --lc-brand-2: #a855f7;
}

.lc-hd *, .lc-ft * { box-sizing: border-box; }

.lc-wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ================= HEADER ================= */
.lc-hd {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid #eef2f7;
}

.lc-hd-in {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.lc-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

/* The logo art is a square app icon, so it pairs with a text wordmark —
   at 40px its own "Chat" lettering would be unreadable. */
.lc-brand img { width: 40px; height: 40px; border-radius: 11px; display: block; }

.lc-brand span {
  font-size: 21px;
  font-weight: 800;
  color: #111827;
  letter-spacing: -0.02em;
}

.lc-nav { display: flex; align-items: center; gap: 28px; }

.lc-nav a {
  font-size: 15px;
  font-weight: 500;
  color: #374151;
  text-decoration: none;
}

.lc-nav a:hover { color: var(--lc-brand); }

/* ================= BUTTON ================= */
.lc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.15s, background 0.15s;
}

.lc-btn-primary {
  background: linear-gradient(135deg, var(--lc-brand), var(--lc-brand-2));
  color: #fff;
  box-shadow: 0 8px 20px rgba(109, 40, 217, 0.24);
}

.lc-btn-primary:hover { transform: translateY(-1px); color: #fff; }

.lc-btn-sm { padding: 9px 18px; font-size: 14px; }

/* ================= FOOTER ================= */
.lc-ft {
  background: #0b0b0f;
  color: #9ca3af;
  padding: 60px 0 34px;
}

.lc-ft-top {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.lc-ft .lc-brand span { color: #fff; }

.lc-ft-tag {
  font-size: 14px;
  margin: 14px 0 0;
  max-width: 300px;
  line-height: 1.6;
  color: #9ca3af;
}

.lc-ft-cols { display: flex; gap: 64px; flex-wrap: wrap; }

.lc-ft-col h4 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  margin: 0 0 14px;
  font-weight: 700;
}

.lc-ft-col a {
  display: block;
  font-size: 14px;
  color: #9ca3af;
  padding: 5px 0;
  text-decoration: none;
}

.lc-ft-col a:hover { color: #fff; }

.lc-ft-btm {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 13.5px;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 991px) {
  .lc-nav { display: none; }
}

@media (max-width: 575px) {
  .lc-wrap { padding: 0 16px; }
  .lc-ft-cols { gap: 36px; }
  .lc-btn { padding: 11px 18px; font-size: 14px; }
}