/* DISCORDsimple marketing site — compact utility layer on top of Bootstrap 5.
   Mirrors the class names used across CCMS marketing pages so copy ports 1:1. */
:root {
  --ds-dark: #1e2129;
  --ds-blurple: #5865F2;
  --ds-ink: #1e293b;
  --ds-muted: #64748b;
  --ds-line: #e2e8f0;
}
body { color: var(--ds-ink); }

/* Recolor Bootstrap's primary to Discord blurple so btn-primary / text-primary
   pick up the brand accent without touching every utility class. */
.text-primary { color: var(--ds-blurple) !important; }
.btn-primary {
  --bs-btn-bg: var(--ds-blurple);
  --bs-btn-border-color: var(--ds-blurple);
  --bs-btn-hover-bg: #4752c4;
  --bs-btn-hover-border-color: #4752c4;
  --bs-btn-active-bg: #4752c4;
  --bs-btn-active-border-color: #4752c4;
  --bs-btn-disabled-bg: var(--ds-blurple);
  --bs-btn-disabled-border-color: var(--ds-blurple);
}
.accordion-button:not(.collapsed) { color: #4752c4; background-color: rgba(88,101,242,.08); }
.accordion-button:focus { border-color: rgba(88,101,242,.4); box-shadow: 0 0 0 .2rem rgba(88,101,242,.2); }
a { color: var(--ds-blurple); }

.page-hero {
  background: radial-gradient(1200px 500px at 20% -10%, rgba(88,101,242,.22), transparent 60%), var(--ds-dark);
  color: #fff;
  padding: 4.5rem 0 3.5rem;
}
.page-hero .display-title { font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.display-title { font-size: clamp(2rem, 4vw, 3rem); }
.page-hero .lead { color: rgba(255,255,255,.85); }
.page-hero .kicker { color: #b5bdff; }

.subhero { background: var(--ds-dark); }

.section { padding: 3rem 0; }
.section.pt-0 { padding-top: 0; }

.kicker { text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-weight: 700; color: var(--ds-blurple); }
.muted { color: var(--ds-muted); }

.card-soft {
  background: #fff;
  border: 1px solid var(--ds-line);
  border-radius: 14px;
  padding: 1.75rem;
  box-shadow: 0 2px 14px rgba(30,33,41,.05);
}

.list-check { list-style: none; padding-left: 0; margin-bottom: 0; }
.list-check li { position: relative; padding-left: 1.6rem; margin-bottom: .5rem; }
.list-check li::before {
  content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  color: var(--ds-blurple); position: absolute; left: 0; top: .15rem; font-size: .8rem;
}

.cta-band { background: var(--ds-dark); color: #fff; border-radius: 18px; padding: 2.5rem; }
.cta-band .muted { color: rgba(255,255,255,.75); }

.badge-coming-soon {
  display: inline-block; background: rgba(88,101,242,.15); color: #b5bdff;
  border: 1px solid rgba(88,101,242,.4); border-radius: 999px;
  padding: .3rem .8rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}

.pricing-card { background: var(--ds-dark); color: #fff; }
.pricing-card .kicker, .pricing-card .list-check li { color: #fff; }

footer.site-footer { background: var(--ds-dark); color: #94a3b8; }
footer.site-footer a { color: #cbd5e1; text-decoration: none; }
footer.site-footer a:hover { color: #fff; }

/* Cookie consent banner */
.cookie-banner {
  position: fixed;
  left: 1rem; right: 1rem; bottom: 1rem;
  z-index: 1080;
  background: var(--ds-dark);
  color: #e5e7eb;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: .5rem;
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .35);
}
.cookie-banner-inner {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .85rem 1.1rem;
}
.cookie-banner .cookie-text { flex: 1 1 320px; font-size: .85rem; line-height: 1.4; margin: 0; }
.cookie-banner .cookie-text a { color: #fff; text-decoration: underline; }
.cookie-banner .cookie-actions { display: flex; gap: .5rem; flex-shrink: 0; }
@media (max-width: 575.98px) {
  .cookie-banner .cookie-actions { width: 100%; }
  .cookie-banner .cookie-actions .btn { flex: 1 1 auto; }
}