/* =========================
       Saldo Certo — Design Tokens
       ========================= */
    :root{
      --azure: #3A86F5;     /* CTA */
      --air:   #EAF2FF;     /* Cards */
      --night: #1B3A57;     /* Títulos / valores */
      --snow:  #FAFBFD;     /* Fundo */
      --slate: #667085;     /* Texto secundário */
      --green: #27AE60;     /* Sucesso */

      --radius-xl: 24px;
      --radius-lg: 18px;
      --radius-md: 14px;

      --shadow-soft: 0 14px 40px rgba(17, 24, 39, 0.10);
      --shadow-card: 0 10px 30px rgba(17, 24, 39, 0.08);

      --container: 1120px;
      --gutter: 20px; /* mobile */
      --space-1: 8px;
      --space-2: 16px;
      --space-3: 24px;
      --space-4: 32px;
      --space-5: 48px;
      --space-6: 64px;
    }

    *{ box-sizing: border-box; }
    html, body{ height: 100%; }
    body{
      margin: 0;
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background: var(--snow);
      color: var(--night);
      line-height: 1.35;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    a{ color: inherit; text-decoration: none; }
    img{ max-width: 100%; display: block; }
    button{ font-family: inherit; }

    /* Helpers */
    .container{
      width: 100%;
      max-width: var(--container);
      margin: 0 auto;
      padding: 0 var(--gutter);
    }

    .muted{ color: var(--slate); }
    .night{ color: var(--night); }
    .sr-only{
      position: absolute;
      width: 1px; height: 1px;
      padding: 0; margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      border: 0;
    }

    /* =========================
       Header
       ========================= */
    header{
      padding: var(--space-3) 0;
    }
    .nav{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-2);
    }
    .brand{
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-height: 44px;
    }
    .brand img{
      width: 40px;
      height: 40px;
      border-radius: 12px;
    }
    .brand-name{
      font-weight: 600;
      letter-spacing: -0.02em;
      color: var(--night);
    }

    .nav-links{
      display: none; /* mobile: escondido, vira menu simples no futuro */
      gap: 18px;
      font-weight: 500;
      color: var(--slate);
    }

    /* =========================
       Hero
       ========================= */
    .hero{
      padding: var(--space-2) 0 var(--space-6);
    }
    .hero-wrap{
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-4);
      align-items: center;
    }
    .hero-copy{
      max-width: 640px;
    }

    .kicker{
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 999px;
      background: rgba(234, 242, 255, 0.75);
      color: var(--night);
      font-weight: 500;
      font-size: 14px;
      width: fit-content;
    }
    .kicker-dot{
      width: 10px; height: 10px;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 0 6px rgba(39, 174, 96, 0.14);
    }

    h1{
      margin: var(--space-3) 0 var(--space-2);
      font-size: 40px;
      line-height: 1.05;
      letter-spacing: -0.04em;
      font-weight: 600;
      color: var(--night);
    }
    .highlight{
      color: var(--azure);
    }

    .lead{
      margin: 0 0 var(--space-3);
      font-size: 16px;
      color: var(--slate);
      max-width: 56ch;
    }

    .benefits{
      margin: 0 0 var(--space-3);
      padding: 0;
      list-style: none;
      display: grid;
      gap: 10px;
      color: var(--slate);
      font-size: 15px;
    }
    .benefits li{
      display: flex;
      gap: 10px;
      align-items: flex-start;
    }
    .check{
      flex: 0 0 auto;
      width: 18px; height: 18px;
      border-radius: 6px;
      background: rgba(58, 134, 245, 0.12);
      display: grid;
      place-items: center;
      margin-top: 2px;
    }
    .check svg{ width: 12px; height: 12px; }

    .cta-row{
      display: grid;
      gap: 10px;
      margin-top: var(--space-2);
    }
    .btn{
      width: 100%;
      border: 0;
      cursor: pointer;
      border-radius: 999px;
      padding: 14px 18px;
      font-weight: 600;
      letter-spacing: -0.01em;
      font-size: 15px;
      transition: transform .08s ease, box-shadow .15s ease, opacity .15s ease;
      min-height: 48px;
    }
    .btn-primary{
      background: var(--azure);
      color: var(--snow);
      box-shadow: 0 10px 30px rgba(58, 134, 245, 0.28);
    }
    .btn-primary:hover{ transform: translateY(-1px); }
    .btn-primary:active{ transform: translateY(0px); opacity: .92; }

    .subnote{
      font-size: 12.5px;
      color: var(--slate);
      text-align: center;
    }

    .hero-media{
      position: relative;
      display: grid;
      place-items: center;
    }
    .blob{
      position: absolute;
      width: min(420px, 92%);
      height: min(420px, 92%);
      background: rgba(234, 242, 255, 0.9);
      border-radius: 999px;
      filter: blur(0px);
      z-index: 0;
    }
    .phone{
      width: min(340px, 92%);
      z-index: 1;
      filter: drop-shadow(0 24px 50px rgba(17, 24, 39, 0.25));
      transform: rotate(6deg);
      border-radius: 26px;
    }

    .phone-desktop{ display: block; }
    .phone-mobile{ display: none; }

    /* ===== NOVA SEÇÃO FEATURES ===== */

.section{
position:relative;
padding:110px 0;
overflow:hidden;
}

.section::before{
content:"";
position:absolute;
left:0;
top:0;
bottom:0;
width:80%;
background:#E5EEFF;
clip-path:polygon(0 0,100% 50%,0 100%);
z-index:0;
}

.features-container{
display:grid;
gap:60px;
align-items:center;
position:relative;
z-index:1;
}

.features-copy{
max-width:420px;
}

.features-copy h2{
font-size:34px;
font-weight:600;
line-height:1.15;
margin-bottom:14px;
}

.features-copy p{
color:var(--slate);
font-size:15px;
}

.features{
display:grid;
gap:30px;
}

.features .card{
background:rgba(234,242,255,.75);
border-radius:28px;
padding:48px 36px 60px;
min-height:360px;
box-shadow:0 18px 40px rgba(0,0,0,.08);
display:flex;
flex-direction:column;
justify-content:space-between;
text-align:center;
transition:.2s ease;
  align-items: center;

}

.features .card:hover{
transform:translateY(-6px);
box-shadow:0 26px 60px rgba(0,0,0,.12);
}

.icon img{
height:96px;
margin-bottom:20%;
}

.features .card h3{
font-size:20px;
font-weight:600;
line-height:1.2;
}

.features .card p{
color:var(--slate);
font-size:14px;
margin-top:75px;
margin-bottom:20px;
}

.step{
margin-top:28px;
font-weight:500;
opacity:.55;
font-size:14px;
letter-spacing:1px;
}

@media(min-width:768px){

.features-container{
grid-template-columns:1fr 2fr;
}

.features{
grid-template-columns:1fr 1fr 1fr;
}

}

/* =========================
   MOBILE LAYOUT COMPLETO
   ========================= */

@media (max-width: 767px){

/* HEADER */

header{
  padding: 12px 0;
}

.brand img{
  width: 32px;
  height: 32px;
}

/* HERO */

.hero{
  padding: 32px 0 56px;
}

.hero-wrap{
  grid-template-columns: 1fr;
  gap: 28px;
}

.hero-copy{
  text-align: center;
  margin: auto;
}

.cta-row{
  justify-items: center;
}

.subnote{
  text-align: center;
}

h1{
  font-size: 32px;
  line-height: 1.1;
}

.lead{
  font-size: 15px;
}

.benefits{
  font-size: 14px;
}

.hero-media{
  order: 2;
  margin-top: 8px;
}

.phone{
  width: 78%;
  max-width: 320px;
  transform: rotate(0deg);
  margin: auto;
}

.blob{
  width: 320px;
  height: 320px;
  left: 50%;
  transform: translateX(-50%);
}

/* FEATURES SECTION */

.section{
  padding: 72px 0;
}

.section::before{
  display: none;
}

.features-container{
  gap: 36px;
}

.features-copy{
  text-align: center;
  max-width: none;
}

.features-copy h2{
  font-size: 26px;
}

.features-copy p{
  font-size: 14px;
}

.features{
  gap: 18px;
}

.features .card{
  padding: 28px 22px;
  min-height: auto;
  border-radius: 22px;
}

.icon img{
  height: 64px;
  margin-bottom: 14px;
}

.features .card h3{
  font-size: 18px;
}

.features .card p{
  margin-top: 18px;
  font-size: 14px;
}

.step{
  margin-top: 18px;
}

/* FOOTER */

.footer-top{
  gap: 28px;
}

.footer-cols{
  grid-template-columns: 1fr;
  gap: 18px;
}

.footer-bottom{
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

}



    /* =========================
       Footer
       ========================= */
    footer{
      padding: var(--space-6) 0 var(--space-5);
    }
    .footer-box{
      background: rgba(234, 242, 255, 0.45);
      border: 1px solid rgba(27, 58, 87, 0.06);
      border-radius: var(--radius-xl);
      padding: var(--space-4);
      box-shadow: var(--shadow-soft);
    }
    .footer-top{
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-4);
      align-items: start;
    }
    .footer-cta .btn{
      max-width: 320px;
    }
    .footer-cols{
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-3);
    }
    .footer-col h4{
      margin: 0 0 10px;
      font-size: 13px;
      font-weight: 600;
      color: var(--night);
    }
    .footer-col a{
      display: block;
      padding: 8px 0;
      color: var(--slate);
      font-size: 14px;
    }
    .footer-col a:hover{
      color: var(--night);
    }
    .footer-bottom{
      margin-top: var(--space-4);
      padding-top: var(--space-3);
      border-top: 1px solid rgba(27, 58, 87, 0.10);
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 10px;
      color: var(--slate);
      font-size: 12.5px;
    }

    /* Troca de mockup no MOBILE */
    .phone-desktop{ display: none; }
    .phone-mobile{ display: block; }


    /* =========================
       Breakpoints (mobile-first)
       ========================= */



/* >= 1100px (desktop) */
@media (min-width: 1100px){

  /* HERO */
header{
    padding: 8px 0;
  }

  .hero{
    padding-top: 0;
  }

  h1{
    margin-top: 8px;
  }


  .hero-wrap{
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: var(--space-5);
  }

  .hero-media{
    justify-self: end;
  }

  .phone{
    width: min(380px, 92%);
    transform: rotate(6deg);
  }
  

  /* STEPS / CARDS */
  .cards{
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px; /* mais respiro entre cards */
  }

  .cards .card:nth-child(3){
    grid-column: auto;
    max-width: none;
    justify-self: stretch;
  }

  /* FOOTER */
  .footer-top{
    grid-template-columns: 1fr 1.4fr;
    align-items: start;
    gap: 48px;
  }

  .footer-cta{
    max-width: 360px;
  }

  .footer-cols{
    grid-template-columns: 1fr 1fr 1fr;
    gap: 28px;
  }

  .footer-bottom{
    justify-content: space-between;
    align-items: center;
  }
  /* Troca de mockup no DESKTOP */
.phone-desktop{ display: block; }
.phone-mobile{ display: none; }

}