html { scroll-behavior: smooth; }
body { font-family: 'Plus Jakarta Sans', sans-serif; }
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }.text-gradient-brand {
    background: linear-gradient(135deg, #d61c77 0%, #6b21a8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.card-hover {
    transition: all 0.3s ease;
}
.card-hover:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 15px 30px -5px rgba(107, 33, 168, 0.1); 
    border-color: rgba(214, 28, 119, 0.2);
}
.btn-gradient {
    background: linear-gradient(135deg, #d61c77 0%, #8b5cf6 100%);
    transition: all 0.3s ease;
}
.btn-gradient:hover {
    background: linear-gradient(135deg, #b01260 0%, #7c3aed 100%);
    box-shadow: 0 4px 15px rgba(214, 28, 119, 0.25);
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.to-\[\#1e1b4b\] {
  --tw-gradient-to: #1e1b4b var(--tw-gradient-to-position);
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0,
      "opsz" 24;
}
.text-gradient-brand {
  background: linear-gradient(135deg, #d61c77 0%, #6b21a8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.card-hover {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05),
      0 10px 10px -5px rgba(0, 0, 0, 0.01);
  border-color: #d61c77;
}
.btn-gradient {
  background: linear-gradient(135deg, #d61c77 0%, #8b5cf6 100%);
  transition: all 0.3s ease;
}
.btn-gradient:hover {
  background: linear-gradient(135deg, #b01260 0%, #7c3aed 100%);
  box-shadow: 0 10px 20px -5px rgba(214, 28, 119, 0.3);
  transform: translateY(-1px);
}
.metric-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
}

/* ========== Root Theme Variables ========== */
:root {
  --primary: #d61c77;
  --primary-dark: #b01260;
  --secondary: #6b21a8;
  --accent: #9d4edd;

  --background-light: #ffffff;
  --background-soft: #fdf7fa;
  --background-dark: #101622;

  --text-main: #1e1b4b;
  --text-secondary: #475569;

  --border-color: #f3e8f0;
  --surface: #faf5f9;
}

/* ========== Typography ========== */
body {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: var(--text-main);
  background: var(--background-light);
}

/* Headings */
h1, h2, h3, h4, h5 {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: #faf5f9;;
}

/* ========== Backgrounds ========== */
.bg-primary { background: var(--primary); }
.bg-secondary { background: var(--secondary); }
.bg-accent { background: var(--accent); }

.bg-light { background: var(--background-light); }
.bg-soft { background: var(--background-soft); }
.bg-dark { background: var(--background-dark); }

/* ========== Text Colors ========== */
.text-primary { color: var(--primary); }
.text-secondary { color: var(--text-secondary); }
.text-white { color: #fff; }

/* ========== Gradients ========== */
.bg-brand-gradient {
  background: linear-gradient(135deg, #d61c77 0%, #9d4edd 100%);
}

.bg-brand-gradient-hover:hover {
  background: linear-gradient(135deg, #b01260 0%, #7e22ce 100%);
}

.text-gradient {
  background: linear-gradient(135deg, #d61c77 0%, #6b21a8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ========== Shadows ========== */
.shadow-glow {
  box-shadow: 0 0 20px rgba(214, 28, 119, 0.15);
}

/* ========== Utilities ========== */
.rounded { border-radius: 10px; }
.border { border: 1px solid var(--border-color); }
.p-20 { padding: 20px; }
.m-20 { margin: 20px; }


.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }.text-gradient-brand {
  background: linear-gradient(135deg, #d61c77 0%, #6b21a8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.card-hover {
  transition: all 0.3s ease;
}
.card-hover:hover { 
  transform: translateY(-5px); 
  box-shadow: 0 15px 30px -5px rgba(107, 33, 168, 0.1); 
  border-color: rgba(214, 28, 119, 0.2);
}
.btn-gradient {
  background: linear-gradient(135deg, #d61c77 0%, #8b5cf6 100%);
  transition: all 0.3s ease;
}
.btn-gradient:hover {
  background: linear-gradient(135deg, #b01260 0%, #7c3aed 100%);
  box-shadow: 0 4px 15px rgba(214, 28, 119, 0.25);
}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}
.text-gradient {
  background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}