html {
  scroll-padding-top: calc(var(--ec-header-height) + var(--ec-notice-height) + 16px);
}

.ec-hero-roulette {
  background-color: #120f14;
}

.ec-hero-roulette .ec-hero-bg-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.ec-hero-roulette .ec-hero-bg-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.1) contrast(1.05) brightness(0.9);
}

.ec-hero-panel-roulette {
  background: radial-gradient(circle at top left, rgba(241, 107, 95, 0.38), transparent 55%), rgba(10, 6, 4, 0.9);
}

.ec-hero-cta {
  max-width: 100%;
}

.ec-hero-actions-center {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ec-space-sm);
}

.ec-section-concept {
  background: radial-gradient(circle at top left, rgba(241, 107, 95, 0.04), transparent 55%), var(--ec-color-bg);
}

.ec-grid-concept {
  align-items: center;
  gap: var(--ec-space-2xl);
}

.ec-grid-concept-points .ec-card {
  height: 100%;
}

.ec-section-flow {
  background: radial-gradient(circle at 0% 0%, rgba(241, 107, 95, 0.06), transparent 55%), var(--ec-color-ivory);
}

.ec-grid-flow {
  align-items: center;
  gap: var(--ec-space-2xl);
}

.ec-card-step {
  height: 100%;
}

.ec-flow-steps {
  margin-top: var(--ec-space-lg);
}

.ec-flow-note {
  margin-top: var(--ec-space-md);
}

.ec-section-benefits {
  background: radial-gradient(circle at 100% 0%, rgba(241, 107, 95, 0.05), transparent 55%), var(--ec-color-bg);
}

.ec-benefits-grid {
  align-items: stretch;
}

.ec-benefit-card {
  height: 100%;
}

.ec-benefits-cta .ec-hero-actions {
  justify-content: center;
}

.ec-section-related {
  background: radial-gradient(circle at 0% 100%, rgba(241, 107, 95, 0.06), transparent 55%), var(--ec-color-bg-soft);
}

.ec-related-grid {
  align-items: stretch;
}

.ec-related-card {
  height: 100%;
}

.ec-related-card .ec-card-footer {
  justify-content: flex-start;
}

@media (max-width: 1024px) {
  .ec-grid-concept,
  .ec-grid-flow {
    gap: var(--ec-space-xl);
  }
}

@media (max-width: 768px) {
  .ec-grid-concept,
  .ec-grid-flow {
    display: flex;
    flex-direction: column;
  }
  .ec-section-benefits .ec-benefits-cta .ec-hero-actions {
    flex-direction: column;
  }
  .ec-section-benefits .ec-benefits-cta .ec-hero-actions .ec-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .ec-flow-steps {
    display: flex;
    flex-direction: column;
  }
}