/* ==========================================================================
 *  DESIGN SYSTEM v3 — OrgHub (Landing + Dashboards)
 *  Shared: buttons, cards, typography, glass, ripple
 * ========================================================================== */

/* ── Typography ── */
.ds-display {
  margin: 0;
  font-size: clamp(36px, 5.8vw, 60px);
  font-weight: 850;
  letter-spacing: -.04em;
  line-height: 1.06;
  color: var(--ds-ink, #0f172a);
}
.ds-display em {
  font-style: normal;
  background: var(--grad-ds-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ds-h2 {
  margin: 0 0 12px;
  font-size: clamp(26px, 4.2vw, 40px);
  font-weight: 850;
  letter-spacing: -.03em;
  line-height: 1.12;
  color: var(--ds-ink, #0f172a);
}
.ds-lead {
  margin: 0;
  font-size: clamp(16px, 2.2vw, 19px);
  line-height: 1.6;
  color: #374151;
}
.ds-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--ds-radius-pill, 999px);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--ds-blue) 10%, #fff);
  color: var(--ds-blue-dark);
  border: 1px solid color-mix(in srgb, var(--ds-blue) 18%, transparent);
}

/* ── Glass cards ── */
.ds-card {
  position: relative;
  background: var(--ds-glass);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--ds-glass-border);
  border-radius: var(--ds-radius);
  box-shadow: var(--ds-shadow);
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s, border-color .3s;
}
.ds-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ds-shadow-hover);
}
.ds-card--glow::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: var(--card-glow, var(--grad-ds-primary));
  opacity: 0;
  filter: blur(20px);
  z-index: -1;
  transition: opacity .4s;
  pointer-events: none;
}
.ds-card--glow:hover::before { opacity: .4; }
.ds-card--glow:hover { border-color: color-mix(in srgb, var(--ds-purple) 35%, var(--ds-glass-border)); }

/* ── Buttons ── */
.ds-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: var(--ds-radius-pill);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 15px;
  font-weight: 750;
  letter-spacing: -.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .2s cubic-bezier(.16, 1, .3, 1), box-shadow .25s, filter .25s, background .25s;
  -webkit-tap-highlight-color: transparent;
}
.ds-btn:hover { transform: translateY(-2px) scale(1.02); }
.ds-btn:active { transform: translateY(0) scale(.98); }
.ds-btn--block { width: 100%; }
.ds-btn--lg { padding: 17px 30px; font-size: 16px; }
.ds-btn--sm { padding: 10px 16px; font-size: 13px; }

.ds-btn--gradient {
  background: var(--grad-ds-btn);
  color: #fff;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--ds-purple) 35%, transparent), 0 1px 2px rgba(15, 23, 42, .1);
}
.ds-btn--gradient:hover {
  background: var(--grad-ds-btn-hover);
  box-shadow: var(--ds-shadow-glow), 0 8px 24px color-mix(in srgb, var(--ds-purple) 30%, transparent);
}

.ds-btn--ghost {
  background: #fff;
  color: var(--ds-ink, #111827);
  border-color: #E5E7EB;
  box-shadow: 0 1px 2px rgba(17,24,39,.04);
}
.ds-btn--ghost:hover {
  background: #fff;
  border-color: color-mix(in srgb, var(--ds-blue) 35%, #E5E7EB);
  box-shadow: 0 4px 16px rgba(17,24,39,.08);
}

.ds-btn--dark {
  background: var(--ds-ink);
  color: #fff;
  box-shadow: 0 4px 16px rgba(15, 23, 42, .2);
}
.ds-btn--dark:hover { box-shadow: 0 8px 28px rgba(15, 23, 42, .28); }

/* Ripple */
.ds-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  transform: scale(0);
  animation: dsRipple .6s ease-out;
  pointer-events: none;
}
@keyframes dsRipple {
  to { transform: scale(2.5); opacity: 0; }
}

/* ── Billing toggle ── */
.ds-toggle {
  display: inline-flex;
  padding: 4px;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-glass);
  border: 1px solid var(--ds-glass-border);
  box-shadow: var(--ds-shadow);
}
.ds-toggle__btn {
  padding: 10px 20px;
  border: none;
  border-radius: var(--ds-radius-pill);
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  transition: background .2s, color .2s, box-shadow .2s;
}
.ds-toggle__btn.is-active {
  background: var(--grad-ds-btn);
  color: #fff;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--ds-purple) 30%, transparent);
}
.ds-toggle__save {
  margin-left: 8px;
  padding: 4px 10px;
  border-radius: var(--ds-radius-pill);
  font-size: 11px;
  font-weight: 800;
  background: color-mix(in srgb, var(--ds-emerald) 15%, #fff);
  color: var(--ds-emerald-dark);
}

/* ── Trust chips ── */
.ds-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: var(--ds-radius-pill);
  font-size: 12px;
  font-weight: 650;
  color: #475569;
  background: var(--ds-glass);
  backdrop-filter: blur(12px);
  border: 1px solid var(--ds-glass-border);
  transition: border-color .2s, transform .2s;
}
.ds-chip:hover { border-color: color-mix(in srgb, var(--ds-blue) 25%, transparent); transform: translateY(-1px); }
.ds-chip a { color: inherit; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  .ds-btn, .ds-card, .ds-chip, .ds-ripple { transition: none !important; animation: none !important; transform: none !important; }
}