/* RuangVisual — brand layer on top of Tabler */
:root {
  --rv-primary: #206bc4;
  --rv-accent: #ae3ec9;
  --rv-dark: #182433;
}

body { background-color: #f4f6fa; }

.rv-brand-gradient {
  background: linear-gradient(135deg, #182433 0%, #206bc4 55%, #ae3ec9 100%);
}

.rv-logo-nav {
  height: 32px; width: auto; object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(32,107,196,.25));
}

.rv-hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(1200px 600px at 20% -10%, rgba(32,107,196,.35), transparent),
              linear-gradient(135deg, #0b1320 0%, #16233a 60%, #1c2b4a 100%);
  color: #fff;
}

.rv-hero .badge-soft {
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,.2);
}

/* Decorative floating blobs in hero */
.rv-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .35;
  pointer-events: none;
  z-index: 0;
  animation: rv-float 9s ease-in-out infinite;
}
.rv-blob-1 { width: 380px; height: 380px; background: #206bc4; top: -120px; right: -80px; }
.rv-blob-2 { width: 280px; height: 280px; background: #ae3ec9; bottom: -100px; left: -60px; animation-delay: -4s; }
.rv-blob-3 { width: 220px; height: 220px; background: #4299e1; top: 40%; left: 55%; animation-delay: -2s; }
.rv-hero .container { position: relative; z-index: 1; }

@keyframes rv-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(20px, -30px) scale(1.08); }
}

.rv-icon-float {
  animation: rv-float-icon 5s ease-in-out infinite;
}
@keyframes rv-float-icon {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

.rv-feature-icon {
  width: 76px; height: 76px; border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px;
  transition: transform .3s ease, box-shadow .3s ease;
}

.rv-feature-card {
  transition: transform .3s ease, box-shadow .3s ease;
}
.rv-feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 36px rgba(16, 24, 40, .12);
}
.rv-feature-card:hover .rv-feature-icon {
  transform: scale(1.1) rotate(-4deg);
}

.rv-section-title {
  position: relative;
  display: inline-block;
}
.rv-section-title::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -10px; transform: translateX(-50%);
  width: 64px; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, #206bc4, #ae3ec9);
}

.rv-pricing-card {
  transition: transform .3s ease, box-shadow .3s ease;
}
.rv-pricing-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 34px rgba(16,24,40,.1);
}
.rv-pricing-card.featured {
  border: 2px solid var(--rv-primary);
  box-shadow: 0 12px 30px rgba(32,107,196,.18);
  transform: translateY(-4px);
}
.rv-pricing-card.featured:hover {
  transform: translateY(-10px);
}

.rv-persona-icon {
  width: 84px; height: 84px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; margin: 0 auto;
  transition: transform .3s ease;
}
.rv-persona-card:hover .rv-persona-icon {
  transform: scale(1.12);
}

.rv-stat-number {
  font-size: 2.4rem;
  font-weight: 800;
  background: linear-gradient(90deg, #fff, #9ec5ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* WhatsApp floating button */
.rv-whatsapp-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 1030;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 28px; box-shadow: 0 8px 20px rgba(0,0,0,.25);
  transition: transform .15s ease;
}
.rv-whatsapp-fab:hover { transform: scale(1.08); color: #fff; }
.rv-whatsapp-fab .pulse {
  position: absolute; inset: 0; border-radius: 50%;
  background: #25D366; opacity: .6;
  animation: rv-pulse 2s infinite;
}
@keyframes rv-pulse {
  0% { transform: scale(1); opacity: .55; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* Dashboard shell */
.rv-sidebar {
  width: 260px; min-height: 100vh; position: fixed; top: 0; left: 0; z-index: 1020;
  background: var(--rv-dark); color: #cbd5e1;
  transition: transform .2s ease;
}
.rv-sidebar .nav-link { color: #a9b6c9; border-radius: 8px; margin: 2px 10px; padding: .55rem .9rem; }
.rv-sidebar .nav-link.active, .rv-sidebar .nav-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.rv-sidebar .nav-link i { margin-right: .6rem; font-size: 1.1rem; }
.rv-content { margin-left: 260px; }

@media (max-width: 991.98px) {
  .rv-sidebar { transform: translateX(-100%); }
  body.rv-sidebar-open .rv-sidebar { transform: translateX(0); }
  .rv-content { margin-left: 0; }
}

.rv-stat-card .rv-stat-icon {
  width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}

#rv-notif-list { max-height: 380px; overflow-y: auto; width: 360px; }

.table-rv thead th { white-space: nowrap; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: #6c7a91; }