.financial-dashboard {
  position: relative;
  width: 400px;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dashboard-main {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: var(--radius-2xl);
  padding: 2rem;
  width: 300px;
  height: 200px;
  position: relative;
  overflow: hidden;
  animation: dashboardPulse 4s ease-in-out infinite;
}

.dashboard-main::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, transparent, rgba(59, 130, 246, 0.1), transparent);
  animation: dashboardShimmer 3s ease-in-out infinite;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.dashboard-title {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  font-weight: var(--font-weight-medium);
}

.dashboard-value {
  font-size: 1.5rem;
  font-weight: var(--font-weight-bold);
  color: var(--phirst-blue-light);
  animation: valueCounter 2s ease-out;
}

.dashboard-chart {
  position: relative;
  height: 60px;
  margin-bottom: 1rem;
  overflow: hidden;
}

.chart-line {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--phirst-blue), var(--phirst-blue-light));
  animation: chartGrow 3s ease-out;
  transform-origin: left;
}

.chart-line::before {
  content: '';
  position: absolute;
  top: -30px;
  left: 20%;
  width: 60%;
  height: 30px;
  background: linear-gradient(45deg, transparent, rgba(59, 130, 246, 0.3));
  border-radius: 50%;
  animation: chartWave 4s ease-in-out infinite;
}

.chart-dots {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 10%;
}

.chart-dot {
  width: 6px;
  height: 6px;
  background: var(--phirst-blue-light);
  border-radius: 50%;
  animation: dotPulse 2s ease-in-out infinite;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.8);
}

.chart-dot:nth-child(2) { animation-delay: 0.5s; }
.chart-dot:nth-child(3) { animation-delay: 1s; }
.chart-dot:nth-child(4) { animation-delay: 1.5s; }

.dashboard-stats {
  display: flex;
  justify-content: space-between;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.stat-icon {
  color: var(--phirst-blue-light);
  font-size: 1rem;
}

.stat-text {
  color: rgba(255, 255, 255, 0.9);
  font-weight: var(--font-weight-semibold);
  font-size: 0.9rem;
}

.floating-metrics {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.metric-card {
  position: absolute;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: var(--radius-lg);
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.9);
  font-weight: var(--font-weight-medium);
  animation: metricFloat 8s ease-in-out infinite;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.metric-card i {
  color: var(--phirst-blue-light);
  font-size: 1.1rem;
}

.metric-1 {
  top: 10%;
  right: -10%;
  animation-delay: 0s;
}

.metric-2 {
  bottom: 30%;
  left: -20%;
  animation-delay: 2s;
}

.metric-3 {
  top: 60%;
  right: -15%;
  animation-delay: 4s;
}

@keyframes dashboardPulse {
  0%, 100% { 
    transform: scale(1);
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.2);
  }
  50% { 
    transform: scale(1.02);
    box-shadow: 0 0 50px rgba(59, 130, 246, 0.4);
  }
}

@keyframes dashboardShimmer {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

@keyframes valueCounter {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes chartGrow {
  0% { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

@keyframes chartWave {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50% { transform: translateY(-10px) scaleY(1.2); }
}

@keyframes dotPulse {
  0%, 100% { 
    transform: scale(1);
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.8);
  }
  50% { 
    transform: scale(1.3);
    box-shadow: 0 0 20px rgba(59, 130, 246, 1);
  }
}

@keyframes metricFloat {
  0%, 100% { 
    transform: translateY(0px) rotate(0deg);
    opacity: 0.8;
  }
  25% { 
    transform: translateY(-15px) rotate(1deg);
    opacity: 1;
  }
  50% { 
    transform: translateY(-25px) rotate(0deg);
    opacity: 0.9;
  }
  75% { 
    transform: translateY(-15px) rotate(-1deg);
    opacity: 1;
  }
}

.btn-icon {
  transition: transform var(--transition-fast);
  font-size: 1rem;
}

.btn-primary:hover .btn-icon {
  transform: translateX(4px);
}

.enhanced-hover {
  transition: all var(--transition-normal);
}

.enhanced-hover:hover {
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.1);
}

.glow-effect {
  position: relative;
}

.glow-effect::after {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(45deg, var(--phirst-blue), var(--phirst-blue-light), var(--phirst-blue));
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity var(--transition-normal);
  filter: blur(6px);
}

.glow-effect:hover::after {
  opacity: 0.7;
}

.slide-in-left {
  animation: slideInLeft 0.8s ease-out;
}

.slide-in-right {
  animation: slideInRight 0.8s ease-out;
}

.slide-in-up {
  animation: slideInUp 0.8s ease-out;
}

@keyframes slideInLeft {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInRight {
  0% {
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInUp {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.bounce-in {
  animation: bounceIn 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes bounceIn {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
  70% {
    transform: scale(0.9);
    opacity: 0.9;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.stagger-animation > * {
  animation-fill-mode: both;
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.stagger-animation > *:nth-child(1) { animation-delay: 0.1s; }
.stagger-animation > *:nth-child(2) { animation-delay: 0.2s; }
.stagger-animation > *:nth-child(3) { animation-delay: 0.3s; }
.stagger-animation > *:nth-child(4) { animation-delay: 0.4s; }
.stagger-animation > *:nth-child(5) { animation-delay: 0.5s; }
.stagger-animation > *:nth-child(6) { animation-delay: 0.6s; }

.parallax-element {
  will-change: transform;
}

.smooth-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.smooth-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.timeline-visual {
  position: relative;
  width: 400px;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.timeline-center {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.timeline-core {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--phirst-blue), var(--phirst-blue-dark));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2rem;
  position: relative;
  z-index: 3;
  animation: timelinePulse 3s ease-in-out infinite;
  box-shadow: 0 0 30px rgba(59, 130, 246, 0.5);
}

.timeline-rings {
  position: absolute;
  inset: 0;
}

.timeline-ring {
  position: absolute;
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 50%;
  animation: timelineRotate 20s linear infinite;
}

.timeline-ring.ring-1 {
  inset: -20px;
  animation-duration: 15s;
}

.timeline-ring.ring-2 {
  inset: -40px;
  animation-duration: 25s;
  animation-direction: reverse;
}

.timeline-ring.ring-3 {
  inset: -60px;
  animation-duration: 35s;
}

.timeline-markers {
  position: absolute;
  inset: 0;
}

.timeline-marker {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  animation: markerFloat 6s ease-in-out infinite;
}

.marker-dot {
  width: 12px;
  height: 12px;
  background: var(--phirst-blue-light);
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.8);
  animation: dotGlow 2s ease-in-out infinite alternate;
}

.marker-year {
  font-size: 0.9rem;
  font-weight: var(--font-weight-semibold);
  color: var(--phirst-blue-light);
  background: rgba(59, 130, 246, 0.1);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(59, 130, 246, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.marker-1 {
  top: 10%;
  left: 10%;
  animation-delay: 0s;
}

.marker-2 {
  top: 20%;
  right: 10%;
  animation-delay: 1.5s;
}

.marker-3 {
  bottom: 20%;
  right: 15%;
  animation-delay: 3s;
}

.marker-4 {
  bottom: 10%;
  left: 15%;
  animation-delay: 4.5s;
}

@keyframes timelinePulse {
  0%, 100% { 
    transform: scale(1);
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.5);
  }
  50% { 
    transform: scale(1.05);
    box-shadow: 0 0 50px rgba(59, 130, 246, 0.8);
  }
}

@keyframes timelineRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes markerFloat {
  0%, 100% { 
    transform: translateY(0px);
    opacity: 0.8;
  }
  50% { 
    transform: translateY(-10px);
    opacity: 1;
  }
}

@keyframes dotGlow {
  0% { 
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.8);
    transform: scale(1);
  }
  100% { 
    box-shadow: 0 0 25px rgba(59, 130, 246, 1);
    transform: scale(1.1);
  }
}

.team-network {
  position: relative;
  width: 400px;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.network-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}

.center-node {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--phirst-blue), var(--phirst-blue-dark));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2rem;
  animation: centerPulse 3s ease-in-out infinite;
  box-shadow: 0 0 30px rgba(59, 130, 246, 0.6);
}

.network-connections {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.connection-line {
  stroke: rgba(59, 130, 246, 0.4);
  stroke-width: 2;
  stroke-dasharray: 5,5;
  animation: connectionFlow 4s linear infinite;
}

.connection-line.line-2 { animation-delay: 0.8s; }
.connection-line.line-3 { animation-delay: 1.6s; }
.connection-line.line-4 { animation-delay: 2.4s; }
.connection-line.line-5 { animation-delay: 3.2s; }

.network-nodes {
  position: absolute;
  inset: 0;
}

.network-node {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  animation: nodeFloat 8s ease-in-out infinite;
  z-index: 2;
}

.node-avatar {
  width: 50px;
  height: 50px;
  background: rgba(59, 130, 246, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(59, 130, 246, 0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--phirst-blue-light);
  font-size: 1.2rem;
  transition: all var(--transition-normal);
}

.node-avatar:hover {
  background: rgba(59, 130, 246, 0.3);
  border-color: rgba(59, 130, 246, 0.6);
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}

.node-title {
  font-size: 0.8rem;
  font-weight: var(--font-weight-semibold);
  color: var(--phirst-blue-light);
  background: rgba(59, 130, 246, 0.1);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(59, 130, 246, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.node-1 {
  top: 15%;
  left: 20%;
  animation-delay: 0s;
}

.node-2 {
  top: 15%;
  right: 15%;
  animation-delay: 1s;
}

.node-3 {
  right: 5%;
  top: 50%;
  animation-delay: 2s;
}

.node-4 {
  bottom: 10%;
  right: 25%;
  animation-delay: 3s;
}

.node-5 {
  bottom: 15%;
  left: 10%;
  animation-delay: 4s;
}

@keyframes centerPulse {
  0%, 100% { 
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.6);
  }
  50% { 
    transform: translate(-50%, -50%) scale(1.05);
    box-shadow: 0 0 50px rgba(59, 130, 246, 0.8);
  }
}

@keyframes connectionFlow {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 20; }
}

@keyframes nodeFloat {
  0%, 100% { 
    transform: translateY(0px) scale(1);
    opacity: 0.8;
  }
  25% { 
    transform: translateY(-8px) scale(1.02);
    opacity: 1;
  }
  50% { 
    transform: translateY(-15px) scale(1);
    opacity: 0.9;
  }
  75% { 
    transform: translateY(-8px) scale(1.02);
    opacity: 1;
  }
}