@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Sora:wght@400;600;700;800&display=swap');

:root {
  --radius: 0.375rem;
  --background: #ffffff;
  --foreground: #32104F;
  --card: #FFFFFF;
  --card-foreground: #32104F;
  --heading: #3F0A78;
  --primary: #5A189A;
  --primary-deep: #3F0A78;
  --primary-soft: #F3EDFB;
  --royal: #5A189A;
  --magenta: #B51232;
  --lime: #C7E51B;
  --gold: #D4AF37;
  --secondary: #F5F3EE;
  --muted-foreground: #6B5089;
  --border: #E7E1F0;
  
  --gradient-brand: linear-gradient(120deg, #3F0A78 0%, #5A189A 55%, #D4AF37 100%);
  --gradient-ink: linear-gradient(150deg, #2B0754 0%, #3F0A78 55%, #5A189A 100%);
  
  --shadow-card: 0 1px 2px rgba(63, 10, 120, 0.07), 0 12px 32px -14px rgba(63, 10, 120, 0.22);
  --shadow-lift: 0 2px 4px rgba(63, 10, 120, 0.08), 0 28px 56px -22px rgba(63, 10, 120, 0.35);
}

body {
  font-family: 'Manrope', sans-serif;
  color: var(--foreground);
  background-color: var(--background);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Sora', sans-serif;
  color: var(--heading);
  letter-spacing: -0.025em;
}

.text-gradient-brand {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.card-kp {
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease;
}

.card-lift:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
  border-color: rgba(90, 24, 154, 0.35);
}

.surface-ink {
  background-image: var(--gradient-ink);
  color: #f8fafc;
}

.container-kp {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: 84rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.glass-nav {
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .container-kp {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 1280px) {
  .container-kp {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}