/* Camada visual: imagens e profundidade sem perder a leitura do conteúdo. */
body {
  background: #0c0c10;
}

.brand-logo img {
  display: block;
  width: 150px;
  height: auto;
}

.footer-content {
  position: relative;
  min-height: 64px;
  justify-content: space-between;
}

.footer-content > p {
  position: absolute;
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
}

.hero {
  isolation: isolate;
  min-height: 650px;
  display: grid;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: linear-gradient(90deg, #0d0d11 3%, rgba(13, 13, 17, .96) 31%, rgba(13, 13, 17, .53) 65%, rgba(13, 13, 17, .18)), linear-gradient(0deg, #101014 0%, transparent 31%), url('../images/hero-kitchen.png');
  background-position: center;
  background-size: cover;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle at 34% 22%, rgba(163, 105, 255, .2), transparent 28%), linear-gradient(90deg, rgba(9, 9, 12, .45), transparent);
}

.hero-copy {
  padding: 24px 0;
}

.app-showcase {
  transform: rotate(1.6deg);
  border: 1px solid rgba(255, 255, 255, .48);
  box-shadow: 0 35px 80px rgba(0, 0, 0, .62), 0 0 0 9px rgba(170, 120, 255, .06);
}

.steps article, .feature-grid article {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(33, 33, 42, .96), rgba(18, 18, 24, .96));
  border-color: rgba(203, 185, 235, .1);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.steps article::after, .feature-grid article::after {
  content: '';
  position: absolute;
  width: 120px;
  height: 120px;
  right: -70px;
  bottom: -75px;
  border-radius: 50%;
  background: rgba(157, 101, 250, .13);
  filter: blur(13px);
}

.steps article:hover, .feature-grid article:hover {
  transform: translateY(-5px);
  border-color: rgba(192, 159, 255, .42);
  box-shadow: 0 18px 32px rgba(0, 0, 0, .24);
}

.features {
  isolation: isolate;
  overflow: hidden;
  background: #101014;
}

.features::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: linear-gradient(90deg, rgba(12, 12, 16, .97) 3%, rgba(12, 12, 16, .89) 48%, rgba(12, 12, 16, .62)), linear-gradient(0deg, rgba(12, 12, 16, .92), rgba(12, 12, 16, .35)), url('../images/cta-gourmet.png');
  background-position: center;
  background-size: cover;
}

.features::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(circle at 19% 5%, rgba(159, 100, 255, .18), transparent 27%);
}

.comparison {
  background: linear-gradient(180deg, #15151b, #0e0e12);
}

.comparison-card {
  background: linear-gradient(112deg, rgba(32, 32, 39, .98) 18%, rgba(22, 22, 29, .88)), url('../images/cta-gourmet.png');
  background-size: cover;
  background-position: right center;
  box-shadow: 0 28px 64px rgba(0, 0, 0, .28);
}

.price-card {
  position: relative;
  overflow: hidden;
}

.price-card::before {
  content: '';
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  top: -170px;
  right: -120px;
  background: rgba(178, 135, 255, .24);
  filter: blur(38px);
}

.price-card > * { position: relative; }

.faq {
  isolation: isolate;
  overflow: hidden;
  background: #141419;
}

.faq::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: linear-gradient(90deg, rgba(15, 15, 20, .96) 4%, rgba(15, 15, 20, .91) 47%, rgba(15, 15, 20, .72)), linear-gradient(0deg, rgba(15, 15, 20, .95), rgba(15, 15, 20, .42)), url('../images/faq-delivery-counter.png');
  background-position: center;
  background-size: cover;
}

.faq::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 50% 0, rgba(139, 92, 246, .13), transparent 32%);
}

.faq details {
  background: rgba(31, 31, 39, .92);
  backdrop-filter: blur(7px);
}

.cta-box {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(24, 24, 30, .98) 18%, rgba(24, 24, 30, .72) 63%, rgba(24, 24, 30, .12)), url('../images/cta-gourmet.png');
  background-position: right center;
  background-size: cover;
  box-shadow: 0 24px 55px rgba(0, 0, 0, .28);
}

@media (max-width: 780px) {
  .brand-logo img { width: 136px; }
  .footer-content > p { position: static; transform: none; white-space: normal; text-align: left; }
  .hero { min-height: auto; }
  .hero::before { background-position: 67% center; background-image: linear-gradient(90deg, rgba(13, 13, 17, .95), rgba(13, 13, 17, .76)), linear-gradient(0deg, #101014, transparent 45%), url('../images/hero-kitchen.png'); }
  .app-showcase { transform: none; }
  .comparison-card, .cta-box { background-position: 70% center; }
}
