/* Sistema de cards exclusivo da página inicial. Usa a paleta atual da Sirius. */
.home-card {
  --card-x: 50%;
  --card-y: 50%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--sky) 16%, transparent);
  border-radius: 24px;
  background: linear-gradient(145deg, var(--navy), var(--ink));
  color: var(--white);
  box-shadow: none;
  transition: border-color .28s ease, transform .28s ease, background-color .28s ease;
}

.home-card::before,
.home-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .28s ease;
}

.home-card::before {
  z-index: 0;
  background: radial-gradient(350px circle at var(--card-x) var(--card-y),
    color-mix(in srgb, var(--blue) 20%, transparent), transparent 70%);
}

.home-card::after {
  z-index: 2;
  padding: 1px;
  background: radial-gradient(260px circle at var(--card-x) var(--card-y),
    color-mix(in srgb, var(--sky) 68%, transparent), transparent 75%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

.home-card > * { position: relative; z-index: 1; }

@media (hover: hover) and (pointer: fine) {
  .home-card:hover::before,
  .home-card:hover::after { opacity: 1; }
  .home-card:hover { border-color: color-mix(in srgb, var(--sky) 30%, transparent); }
}

/* A seção pode ser clara; seus cards mantêm a mesma superfície escura. */
.home-card.pain-row,
.home-card.benefit,
.home-card.solution-card,
.home-card.quote,
.home-card.delivery-card {
  background: linear-gradient(145deg, var(--navy), var(--ink));
  border-color: color-mix(in srgb, var(--sky) 16%, transparent);
  color: var(--white);
  box-shadow: none;
}

.home-card.pain-row p,
.home-card.benefit p,
.home-card.solution-card > p,
.home-card.quote blockquote,
.home-card.delivery-card .checklist {
  color: var(--muted);
}

.home-card.pain-row h3,
.home-card.benefit h3,
.home-card.solution-card h3,
.home-card.quote strong,
.home-card.delivery-card .headline { color: var(--white); }

.home-card.pain-row::before { width: auto; height: auto; right: 0; top: 0; filter: none; }
.new-problem .home-card.pain-row::before {
  display: block !important;
  opacity: 0;
  transform: none !important;
}
.new-problem .home-card.pain-row::after {
  display: block !important;
  box-shadow: none !important;
}
.new-problem .home-card.pain-row:hover,
.new-problem .home-card.pain-row.light-active {
  border-color: transparent !important;
  transform: translateY(-2px);
  background: linear-gradient(145deg,rgba(18,18,32,.86),rgba(9,9,18,.76)) !important;
  box-shadow: inset 0 1px 0 rgba(207,198,255,.08),0 25px 62px rgba(0,0,0,.26),0 0 35px rgba(100,80,240,.11) !important;
}
@media (hover: hover) and (pointer: fine) {
  .new-problem .home-card.pain-row:hover::before,
  .new-problem .home-card.pain-row.light-active::before,
  .new-problem .home-card.pain-row:hover::after,
  .new-problem .home-card.pain-row.light-active::after { opacity: 1 !important; }
}
.home-card.pain-row:hover,
.home-card.benefit:hover { box-shadow: none; }

.new-problem .eyebrow {
  border-color: rgba(226,225,255,.16);
  background: rgba(201,200,247,.055);
  color: #d0ceff;
}
.new-problem .eyebrow::before { color: #d0ceff; }

@media (max-width: 620px) {
  body.home-page .new-problem { padding-top: 50px !important; }
}

/* Ícones lineares: mesmo tamanho, traço e tonalidade em todas as seções. */
.home-card .glass-icon,
.home-card .icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 1px solid color-mix(in srgb, var(--blue) 58%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--blue) 9%, var(--ink));
  color: var(--sky);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.home-card .glass-icon::before { display: none; }
.home-card .glass-icon svg,
.home-card .icon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--sky);
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: none;
}

.home-card.benefit .icon { background: color-mix(in srgb, var(--blue) 9%, var(--ink)); color: var(--sky); }
.home-card.benefit p { color: var(--muted); }

/* Projetos são cards de imagem; a luz repousa sobre a arte sem escondê-la. */
.home-card.reel-card {
  background: var(--navy);
  border-color: color-mix(in srgb, var(--sky) 16%, transparent);
  border-radius: 24px;
  box-shadow: none;
}
.home-card.reel-card img { z-index: 0; }
.home-card.reel-card::before { z-index: 1; }
.home-card.reel-card::after { z-index: 2; }

@media (hover: none), (pointer: coarse) {
  .home-card:hover { transform: none; }
  .home-card::before,
  .home-card::after { display: none; }
  .new-problem .home-card.pain-row::before,
  .new-problem .home-card.pain-row::after { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .home-card,
  .home-card::before,
  .home-card::after { transition: none; }
}