/* Home Page Styles */

.home-hero {
  position: relative;
  padding: var(--space-10) var(--space-6);
  border-radius: var(--radius-xl);
  background: radial-gradient(1200px 600px at 10% 10%, rgba(59,130,246,0.35) 0%, rgba(16,185,129,0.25) 30%, rgba(99,102,241,0.25) 60%, rgba(255,255,255,0.05) 100%);
  border: 1px solid var(--border-subtle);
}

.home-hero .title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-strong);
  margin: 0 0 var(--space-2);
}

.home-hero .subtitle {
  color: var(--text-secondary);
  margin: 0 0 var(--space-6);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.cta-row .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.status-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.status-card {
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.status-card h4 { 
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-md);
  color: var(--text-strong);
}

.badges { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--radius-full);
  background: var(--surface-glass);
  color: var(--text-strong);
  border: 1px solid var(--border-subtle);
}

.badge.success { background: var(--color-success-alpha); color: var(--color-success); }
.badge.warning { background: var(--color-warning-alpha); color: var(--color-warning); }
.badge.info { background: var(--color-primary-alpha); color: var(--color-primary); }

.section {
  margin-top: var(--space-8);
}

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

.card {
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.card .name { font-weight: var(--font-weight-semibold); color: var(--text-strong); }
.card .price { color: var(--text-secondary); }
.card .change.pos { color: var(--color-success); }
.card .change.neg { color: var(--color-danger); }

@media (max-width: 1024px) {
  .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .status-row { grid-template-columns: 1fr; }
  .cards-grid { grid-template-columns: 1fr; }
}