:root {
  --color-primary: #7c3aed;
  --color-primary-dark: #5b21b6;
  --color-accent: #a78bfa;
  --color-text: #1a1028;
  --color-text-light: #6b7280;
  --color-bg: #fdfaff;
  --color-bg-alt: #f5f0ff;
  --color-border: #e0d5f5;
  --font-heading: 'Lato', sans-serif;
  --font-body: 'Lato', sans-serif;
}

.hero {
  background-image: linear-gradient(160deg, rgba(30,10,60,0.85) 0%, rgba(50,20,90,0.72) 100%), url('https://images.pexels.com/photos/3683074/pexels-photo-3683074.jpeg?auto=compress&cs=tinysrgb&w=1920');
  background-size: cover;
  background-position: center;
}

.hero h1,
.hero-sub {
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}