/* Versão B: só o que muda em relação ao lp.css (base da página spartads.pt/en). Mobile-first, desktop a partir de 771px. */

/* HERO */
.hero-b .hero-logo { width: 160px; }
.hero-b h1 { margin-top: 45px; font-size: 34px; font-weight: 700; line-height: 1.2; }
.hero-b .hero-sub { font-size: 16px; }

/* 3 PILARES (vidro, metade sobre o hero) */
.pillars-wrap { position: relative; z-index: 1; padding: 0 25px; }
.pillars { display: grid; gap: 10px; max-width: 1134px; margin: -50px auto 0; }
.pillar {
  padding: 30px 40px 31px;
  border: 1px solid #e8e8e8;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.31);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
}
.pillar h2 {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: 36px;
  line-height: 1.1;
  text-transform: uppercase;
  color: #0e0e0f;
}
.pillar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin-bottom: 18px;
  border-radius: 6px;
  background: rgba(0, 122, 254, 0.11);
}
.pillar-icon svg { width: 28px; height: 28px; fill: #007aff; }
.pillar p { margin-top: 21px; font-size: 18px; line-height: 1.3; font-weight: 300; color: #030617; }

/* PORQUE NOS ESCOLHEM (usa o estilo da carta da A) */
.why { padding-bottom: 80px; }

/* IA */
.ai { padding: 85px 35px 67px; background: #007aff; color: #fff; }
.ai-inner { max-width: 1100px; margin: 0 auto; }
.ai-text { text-align: left; }
.ai h2 {
  font-family: 'Anton', sans-serif;
  font-weight: 700;
  font-size: 44px;
  line-height: 1.1;
  text-transform: uppercase;
}
.ai-text p { margin-top: 15px; font-size: 16px; line-height: 1.3; font-weight: 300; }
.ai-list { margin: 40px 0 0; padding: 0; list-style: none; }
.ai-list li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 0 6px;
  border-bottom: 1px solid #fff;
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
}
.ai-list li:last-child { border-bottom: 0; }
.ai-check {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 36px;
  border-radius: 3px;
  background: #3cb371;
}
.ai-check svg { width: 16px; height: 16px; fill: #e5ff3f; }

/* O QUE GANHA */
.gains { padding: 99px 25px 70px; }
.gains .title { color: #0e0e0f; }
.gains-grid { display: grid; gap: 20px; max-width: 1134px; margin: 41px auto 0; }
.gain {
  padding: 42px 40px 37px;
  border: 1px solid #e8e8e8;
  border-radius: 14px;
  background: #fff;
  box-shadow: 2px 2px 14px rgba(0, 0, 0, 0.18);
}
.gain-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 6px;
  background: rgba(0, 122, 254, 0.11);
}
.gain-icon img { width: 28px; height: 28px; }
.gain h3 { margin-top: 14px; font-size: 20px; line-height: 1.25; font-weight: 500; color: #0e0e0f; }
.gain p { margin-top: 10px; font-size: 16px; line-height: 1.3; font-weight: 300; color: #0e0e0f; }

/* BARRA FIXA (texto mais comprido) */
.sticky-cta { left: 20px; right: 20px; }
.sticky-cta strong { font-size: 20px; line-height: 31px; }
.sticky-cta span { font-size: 12px; line-height: 20px; }

@media (min-width: 771px) {
  .hero-b { padding-bottom: 160px; }
  .hero-b h1 { margin-top: 45px; font-size: 62px; }
  .hero-b .hero-sub { margin-top: 20px; font-size: 26px; }
  .hero-b .cta-block { margin-top: 40px; }
  .hero-b > .review { margin-top: 35px; }
  .hero-b .badges { margin-top: 39px; }

  .pillars-wrap { padding: 0 20px; }
  .pillars { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .pillar h2 { font-size: 42px; }
  .pillar p { font-size: 26px; }

  .why { padding-top: 80px; }

  .ai { padding: 85px 20px 90px; }
  .ai-inner { display: grid; grid-template-columns: 525fr 515fr; gap: 60px; align-items: start; }
  .ai h2 { font-size: 70px; }
  .ai-text { text-align: right; }
  .ai-text p { font-size: 20px; }
  .ai-list { margin-top: 0; padding-left: 0; }
  .ai-list li { font-size: 14px; line-height: 20px; font-weight: 500; }

  .gains { padding: 100px 20px 70px; }
  .gains-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 40px; }
  .gain h3 { font-size: 26px; }
  .gain p { font-size: 20px; }
}