/* Variant 3: purple-forward palette with underline nav */
:root {
  --coral-pink: #7a47b5;
  --teal: #6a3a9a;
  --violet: #6a3a9a;
  --warm-orange: #7a47b5;
  --soft-turquoise: #7a47b5;
  --lavender: #f5f0fb;

  --charcoal: #1a1a1a;
  --slate: #7a7a7a;
  --off-white: #f5f0fb;
  --light-gray: #e4d7f4;
}

body {
  background:
    radial-gradient(circle at 10% 14%, rgba(122, 71, 181, 0.2), transparent 34%),
    radial-gradient(circle at 86% 12%, rgba(106, 58, 154, 0.16), transparent 38%),
    #f5f0fb;
}

.site-header {
  background: rgba(41, 24, 58, 0.95);
  border-bottom: 1px solid rgba(122, 71, 181, 0.45);
}

.brand-text {
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.brand-logo {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid rgba(122, 71, 181, 0.45);
}

.nav-links,
.nav-actions {
  gap: 0.35rem;
}

.nav-links a,
.nav-actions a {
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  position: relative;
}

.nav-links a::after,
.nav-actions a::after {
  content: "";
  position: absolute;
  left: 0.7rem;
  right: 0.7rem;
  bottom: 0.35rem;
  height: 2px;
  background: transparent;
  transition: background-color 180ms ease;
}

.nav-links a:hover::after,
.nav-actions a:hover::after,
.nav-links a[aria-current="page"]::after {
  background: #7a47b5;
}

.nav-links a[aria-current="page"] {
  background: rgba(122, 71, 181, 0.14);
}

.nav-actions .nav-contact {
  border-color: rgba(122, 71, 181, 0.7);
}

.main-nav .nav-donate {
  background: #7a47b5;
  border-color: #7a47b5;
  color: #ffffff;
}

.main-nav .nav-donate:hover {
  background: #6a3a9a;
  border-color: #6a3a9a;
}

.hero-v3 {
  min-height: 80vh;
}

.hero-v3 .hero-image {
  background:
    linear-gradient(20deg, rgba(13, 30, 46, 0.2), rgba(13, 30, 46, 0.12)),
    url("Images/linkedin-sales-solutions-1LyBcHrH4J8-unsplash.jpg") center 18% / cover no-repeat;
}

.hero-v3 .hero-overlay {
  background: linear-gradient(105deg, rgba(9, 24, 37, 0.9) 18%, rgba(9, 24, 37, 0.6) 52%, rgba(9, 24, 37, 0.15) 80%);
}

.hero-v3 .hero-content {
  max-width: 820px;
  gap: 1.1rem;
}

.hero-v3 .eyebrow {
  color: #f5f0fb;
}

.hero-v3 h1 {
  max-width: 16ch;
}

.hero-v3 .hero-cta-row {
  gap: 0.65rem;
}

.hero-v3 .btn-primary {
  background: #7a47b5;
  color: #ffffff;
}

.hero-v3 .btn-primary:hover {
  background: #6a3a9a;
}

.hero-v3 .btn-secondary {
  background: #6a3a9a;
  color: #ffffff;
}

.hero-v3 .btn-secondary:hover {
  background: #7a47b5;
}

.hero-v3 .btn-tertiary {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.5);
  color: #ffffff;
}

.hero-v3 .btn-tertiary:hover {
  background: rgba(255, 255, 255, 0.12);
}

.trust-band {
  border-top-color: #e4d7f4;
  border-bottom-color: #e4d7f4;
  background: #f5f0fb;
}

.section.workshops {
  background: linear-gradient(140deg, rgba(122, 71, 181, 0.14), rgba(106, 58, 154, 0.1));
}

.section.recordings-cta {
  background: linear-gradient(140deg, rgba(122, 71, 181, 0.09), rgba(106, 58, 154, 0.05));
  border-top: 1px solid rgba(122, 71, 181, 0.16);
  border-bottom: 1px solid rgba(122, 71, 181, 0.14);
}

.site-footer {
  background: #2a193b;
}

.meta,
.section-lead {
  color: #7a7a7a;
}

.legal-disclosures {
  margin-top: 1.6rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.compliance-note {
  margin: 0 0 0.8rem;
  color: rgba(220, 225, 228, 0.9);
  font-size: 0.92rem;
  line-height: 1.55;
}

.compliance-note:last-child {
  margin-bottom: 0;
}

.photo-credits {
  margin-top: 0.6rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: rgba(220, 225, 228, 0.92);
}

.photo-credits p {
  margin: 0.2rem 0;
}

.photo-credits a {
  color: #d2e6ff;
  text-underline-offset: 2px;
}

.photo-credits a:hover {
  color: #ffffff;
}

@media (max-width: 980px) {
  .nav-links a::after,
  .nav-actions a::after {
    left: 0.45rem;
    right: 0.45rem;
  }
}
