/* Shared SellSync brand styling for content pages */
:root {
  --brand-blue: #2979FF;
  --brand-blue-dark: #007bff;
  --brand-blue-hover: #1a6ef5;
  --brand-blue-soft: #e8f2ff;
  --brand-blue-glow: rgba(41, 121, 255, 0.18);
  --text-dark: #1f2937;
  --text-muted: #6b7280;
  --border: #e5e7eb;
  --page-bg: #ffffff;
}

@keyframes logoFadeIn {
  0%   { opacity: 0; transform: scale(0.92); }
  100% { opacity: 1; transform: scale(1); }
}

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

.hero-logo {
  width: 100px;
  height: 100px;
  object-fit: contain;
  display: block;
  margin: 0 auto 20px;
  opacity: 0;
  animation: logoFadeIn 0.8s ease-out forwards;
}

.hero-animate-title {
  opacity: 0;
  animation: fadeUp 0.6s ease-out 0.6s forwards;
}

.hero-animate-meta {
  opacity: 0;
  animation: fadeUp 0.6s ease-out 0.75s forwards;
}

.hero-animate-sub {
  opacity: 0;
  animation: fadeUp 0.6s ease-out 0.85s forwards;
}

.hero-animate-extra {
  opacity: 0;
  animation: fadeUp 0.6s ease-out 1.05s forwards;
}