:root {
  --bs-body-bg: #f5f3ff;
  --gradient-start: #4f46e5;
  --gradient-mid: #7c3aed;
  --gradient-end: #a855f7;
  --gradient-bg: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #a855f7 100%);
  --gradient-navbar: linear-gradient(90deg, #3730a3 0%, #6d28d9 100%);
  --accent-blue: #4f46e5;
  --accent-purple: #7c3aed;
  --accent-violet: #a855f7;
}

.navbar-brand {
  font-weight: 700;
  letter-spacing: -0.5px;
}

/* Gradient navbar */
.navbar-gradient {
  background: var(--gradient-navbar) !important;
}

/* Gradient hero */
.hero-gradient {
  background: var(--gradient-bg);
  position: relative;
  overflow: hidden;
}

.hero-gradient::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 30% 50%, rgba(255,255,255,0.08) 0%, transparent 50%),
              radial-gradient(circle at 70% 30%, rgba(255,255,255,0.05) 0%, transparent 40%);
  pointer-events: none;
}

/* Gradient footer */
.footer-gradient {
  background: var(--gradient-navbar);
}

.tool-card {
  transition: transform 0.2s, box-shadow 0.2s;
}

.tool-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0.5rem 1.5rem rgba(109, 40, 217, 0.18);
}

/* Gradient-themed card icon colours */
.icon-indigo  { color: var(--accent-blue); }
.icon-violet  { color: var(--accent-violet); }
.icon-purple  { color: var(--accent-purple); }

/* Gradient outline button */
.btn-outline-grad {
  color: var(--accent-purple);
  border-color: var(--accent-purple);
  background: transparent;
}

.btn-outline-grad:hover {
  background: var(--gradient-bg);
  border-color: transparent;
  color: #fff;
}

/* Solid gradient button */
.btn-grad {
  background: var(--gradient-bg);
  border: none;
  color: #fff;
}

.btn-grad:hover {
  background: linear-gradient(135deg, #3730a3 0%, #6d28d9 50%, #9333ea 100%);
  color: #fff;
}

.chart-container {
  min-height: 400px;
}

.data-input-section {
  background: #fff;
  border-radius: 0.5rem;
}

/* Section heading accent */
.section-heading::after {
  content: '';
  display: block;
  width: 3rem;
  height: 3px;
  background: var(--gradient-bg);
  border-radius: 2px;
  margin: 0.5rem auto 0;
}