:root {
  --bg: #071b33;
  --navy: #0d2d4f;
  --accent: #2e86ff;
  --accent-soft: #dceeff;
  --success: #16a34a;
  --warning: #f59e0b;
  --danger: #dc2626;
  --muted: #7f91a8;
  --card: #ffffff;
  --text: #0f172a;
}
body {
  font-family: 'Inter', sans-serif;
  background: linear-gradient(135deg, #f2f8ff 0%, #eaf4ff 100%);
  color: var(--text);
}
.navbar { background: linear-gradient(90deg, var(--bg), var(--navy)); }
.navbar-brand, .nav-link, .text-muted { color: #eef6ff !important; }
.hero-card, .glass-card, .card {
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(46, 134, 255, 0.12);
  box-shadow: 0 18px 45px rgba(13, 45, 79, 0.10);
}
.hero-card { border-radius: 1.75rem; overflow: hidden; position: relative; }
.hero-card::after {
  content: "";
  position: absolute;
  inset: -20% auto auto -10%;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(46,134,255,0.18), transparent 70%);
  pointer-events: none;
  animation: pulse 6s ease-in-out infinite;
}
.hero-visual { min-height: 320px; background: linear-gradient(145deg, #0f2a4d, #1f4f86); color: white; }
.hero-dashboard {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 12px;
}
.dashboard-top { display: flex; gap: 8px; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.8); }
.dashboard-body { display: grid; gap: 12px; margin-top: 8px; }
.mini-card {
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 16px;
  padding: 14px;
  backdrop-filter: blur(10px);
  animation: floatUp 4s ease-in-out infinite;
}
.success-card { animation-delay: 0.8s; }
.hero-pill {
  display: inline-block;
  padding: 0.5rem 0.8rem;
  border-radius: 999px;
  background: rgba(46,134,255,0.09);
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 600;
}
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(8px);
  opacity: 0.7;
  animation: drift 7s ease-in-out infinite;
}
.orb-one { width: 110px; height: 110px; background: rgba(255,255,255,0.2); top: 20px; right: 20px; }
.orb-two { width: 140px; height: 140px; background: rgba(46,134,255,0.3); bottom: -25px; left: -20px; animation-delay: 1s; }
.btn-primary { background: linear-gradient(90deg, var(--accent), #1d4ed8); border: none; }
.btn-outline-light { border-color: rgba(255,255,255,0.2); }
.badge-soft { background: var(--accent-soft); color: var(--accent); }
.stat-card { min-height: 140px; }
.status-pill { display:inline-block; padding:0.35rem 0.8rem; border-radius:999px; font-size:0.8rem; font-weight:700; }
.status-success { background:#dcfce7; color:var(--success); }
.status-pending { background:#fef3c7; color:var(--warning); }
.status-failed { background:#fee2e2; color:var(--danger); }
.table-responsive { border-radius: 1rem; overflow: hidden; }
.form-control, .form-select { border-radius: 0.85rem; border-color: #cbd5e1; }
section { scroll-margin-top: 90px; }
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.08); opacity: 1; }
}
@keyframes floatUp {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
}
@keyframes drift {
  0%, 100% { transform: translateY(0px) translateX(0px); }
  50% { transform: translateY(-10px) translateX(10px); }
}
@media (max-width: 768px) { .hero-card { padding: 1rem; } }