.hero__aside {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-4) 0;
}

.dashboard {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  box-shadow: var(--shadow-float);
  transform: rotate(1deg);
  transform-origin: center center;
}

@media (min-width: 960px) {
  .hero__grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-16);
  }

  .hero__aside {
    justify-content: flex-end;
    padding: var(--space-8) var(--space-4) var(--space-8) var(--space-10);
  }

  .dashboard {
    transform: rotate(1deg);
    transform-origin: 52% 48%;
  }

  .dashboard::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, var(--color-primary-100), transparent 50%, var(--color-cta-muted));
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
  }
}

.dashboard__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.dashboard__title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary-dark);
}

.dashboard__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-success);
  background: #E8F2ED;
  padding: 4px 10px;
  border-radius: 100px;
}

.dashboard__status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-success);
  animation: pulse 2s ease infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.dashboard__chart {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 140px;
  margin-bottom: var(--space-6);
  padding-inline: 4px;
}

.dashboard__bar {
  flex: 1;
  border-radius: 4px 4px 0 0;
  transform-origin: bottom;
  transform: scaleY(0);
  animation: growBar 0.8s var(--ease-out) forwards;
}

.dashboard__bar:nth-child(1) { background: var(--color-primary); animation-delay: 0.6s; height: 42%; }
.dashboard__bar:nth-child(2) { background: var(--color-cta); animation-delay: 0.7s; height: 58%; }
.dashboard__bar:nth-child(3) { background: var(--color-accent); animation-delay: 0.8s; height: 48%; }
.dashboard__bar:nth-child(4) { background: var(--color-primary); animation-delay: 0.9s; height: 72%; }
.dashboard__bar:nth-child(5) { background: var(--color-primary-light); animation-delay: 1.0s; height: 65%; }
.dashboard__bar:nth-child(6) { background: var(--color-cta); animation-delay: 1.1s; height: 88%; }

@keyframes growBar {
  to { transform: scaleY(1); }
}

.dashboard__kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.dashboard__kpi {
  padding: var(--space-4);
  background: var(--color-primary-50);
  border-radius: var(--radius-card);
}

.dashboard__kpi-value {
  font-family: var(--font-mono);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--color-primary-dark);
  line-height: 1.2;
}

.dashboard__kpi-value--accent { color: var(--color-cta-accessible); }

.dashboard__kpi-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-text);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.landing-footer {
  background: var(--color-primary-dark);
  color: rgba(247, 245, 242, 0.7);
  padding: var(--space-8) var(--container-padding);
  font-size: 0.875rem;
  text-align: center;
}

@media (min-width: 768px) {
  .site-logo__img { height: 64px; }
  .site-logo__text { font-size: 1.0625rem; }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard { transform: rotate(1deg); }
  .dashboard__bar { animation: none; transform: scaleY(1); }
  .dashboard__status-dot { animation: none; }
}