/* ── Reset & Base ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --purple:        #7B35D6;
  --purple-dark:   #5B20B0;
  --purple-light:  #EDE9FF;
  --purple-mid:    #9B5CF6;
  --blue:          #3B82F6;
  --blue-dark:     #2563EB;
  --pink:          #C026D3;
  --grad:          linear-gradient(135deg, #7B35D6 0%, #3B82F6 50%, #C026D3 100%);
  --grad-soft:     linear-gradient(135deg, rgba(123,53,214,0.15) 0%, rgba(59,130,246,0.1) 50%, rgba(192,38,211,0.08) 100%);
  --navy:          #0E0E1E;
  --navy-mid:      #16162A;
  --slate:         #1E1E3A;
  --gray:          #6B7090;
  --gray-light:    #EAEAF4;
  --white:         #FFFFFF;
  --off-white:     #F6F5FF;
  --font-head:     'Playfair Display', Georgia, serif;
  --font-body:     'Inter', system-ui, sans-serif;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--white);
  color: var(--navy);
  overflow-x: hidden;
  line-height: 1.6;
}

/* ── Utility ──────────────────────────────────── */
.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--grad-soft); color: var(--purple-dark);
  font-family: var(--font-body); font-weight: 600; font-size: 0.75rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 100px;
  margin-bottom: 20px;
}

.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--grad); color: var(--white);
  font-family: var(--font-body); font-weight: 700; font-size: 1rem;
  padding: 16px 32px; border-radius: 100px; border: none; cursor: pointer;
  text-decoration: none; transition: all 0.25s ease;
  box-shadow: 0 4px 28px rgba(123,53,214,0.45);
}
.btn-primary:hover {
  filter: brightness(1.12);
  transform: translateY(-2px);
  box-shadow: 0 8px 36px rgba(123,53,214,0.55);
}

.btn-outline {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: var(--purple-mid);
  font-family: var(--font-body); font-weight: 600; font-size: 0.95rem;
  padding: 14px 28px; border-radius: 100px;
  border: 2px solid var(--purple-mid); cursor: pointer;
  text-decoration: none; transition: all 0.25s ease;
}
.btn-outline:hover { background: var(--grad-soft); }