/* Consent banner. Docked bottom-left rather than across the whole viewport:
   the page already has a fixed header, and a full-width bar on mobile hides
   the primary CTA — the one thing the landing exists to show. */

.consent-banner {
  position: fixed;
  z-index: var(--z-overlay);
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  max-width: 30rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1.125rem 1.25rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, var(--a-12));
  background: rgba(12, 14, 22, var(--a-95));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-4);
  color: #e8eaf2;
  animation: consent-banner-in var(--dur-slow) ease-out both;
}

@keyframes consent-banner-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .consent-banner { animation: none; }
}

.consent-banner__title {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}

.consent-banner__body {
  margin: 0;
  font-size: 0.83rem;
  line-height: var(--leading-normal);
  color: rgba(232, 234, 242, var(--a-72));
}

.consent-banner__actions {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
}

.consent-banner__button {
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 0.55rem 1.15rem;
  border-radius: 0.6rem;
  font-size: 0.85rem;
  font-weight: var(--weight-semibold);
  transition: opacity 140ms ease, background-color 140ms ease;
}

.consent-banner__button:focus-visible {
  outline: 2px solid #8b6bff;
  outline-offset: 2px;
}

.consent-banner__button--ghost {
  background: rgba(255, 255, 255, var(--a-08));
  color: rgba(232, 234, 242, var(--a-85));
}

.consent-banner__button--ghost:hover {
  background: rgba(255, 255, 255, var(--a-12));
}

.consent-banner__button--primary {
  background: #6d4aff;
  color: #fff;
}

.consent-banner__button--primary:hover {
  opacity: 0.9;
}

@media (min-width: 640px) {
  .consent-banner {
    left: 1.5rem;
    right: auto;
    bottom: 1.5rem;
  }
}