:root{
  --brand:#ef4444; --brand-2:#f87171;
  --bg:#0b111d; --bg-2:#0f172a; --surface:#0e1624;
  --txt:#e5e7eb; --muted:#9aa3b2; --border:#1f2937;
  --wa:#25D366; --ig:#e1306c;
  --shadow:0 20px 60px rgba(0,0,0,.35);
  --container:1200px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
img{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:inherit}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--txt);
  background:var(--bg-2);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.container{max-width:var(--container);margin:0 auto;padding:0 16px}
.section{padding:64px 0}
.section-head h2{
  margin:0 0 8px;
  font-family:Poppins,Inter,sans-serif;
  font-weight:800;
  letter-spacing:-.02em;
  font-size:clamp(22px,2.6vw,32px)
}
.section-head p{margin:0 0 16px;color:var(--muted)}
.alt{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0))}

/* ===== HEADER ===== */
.header{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(180deg,#0f1629,#0c1221);
  border-bottom:1px solid #ffffff14;
  box-shadow:0 6px 18px rgba(0,0,0,.25)
}
.header-grid{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:84px}
.brand img{height:52px;width:auto;filter:drop-shadow(0 6px 12px rgba(0,0,0,.35))}
.menu{display:flex;gap:16px;list-style:none;margin:0;padding:0;align-items:center;justify-content:center}
.menu a{color:#c7cfdb;padding:10px 14px;border-radius:10px;font-weight:700}
.menu a:hover{color:#fff;background:#ffffff12}
.menu-cta{border:1px solid #ffffff26}
.actions{display:flex;gap:10px}

/* ===== BOTÕES (mais compactos) ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:8px 12px;            /* reduzido */
  border-radius:10px;          /* reduzido */
  border:1px solid #ffffff1f;
  background:#0b1220;
  font-weight:700;             /* antes 800 */
  font-size:0.9rem;            /* reduzido */
  box-shadow:0 8px 18px rgba(0,0,0,.25);
  cursor:pointer;
  transition:transform .15s,filter .15s
}
.btn:hover{transform:translateY(-1px)}
.btn.primary{
  background:linear-gradient(145deg,#1fae58,#16a34a);
  border-color:#168a43;
  color:#fff
}
.btn.ghost{
  border:2px solid #1f3e8a;
  color:#93c5fd
}
.hero .actions .btn{padding:10px 14px} /* hero específico */
.btn-lg{padding:12px 18px;font-size:1rem} /* CTA final */

/* ===== HAMBURGER ===== */
.hamb{width:34px;height:26px;background:none;border:0;cursor:pointer;display:none;position:relative}
.hamb span{position:absolute;left:0;right:0;height:3px;background:#e9edf6;border-radius:2px;transition:.25s;transform-origin:left center}
.hamb span:nth-child(1){top:0}
.hamb span:nth-child(2){top:11px}
.hamb span:nth-child(3){top:22px}
.hamb.open span:nth-child(1){transform:rotate(45deg);top:2px}
.hamb.open span:nth-child(2){opacity:0}
.hamb.open span:nth-child(3){transform:rotate(-45deg);top:22px}
.menu-wrap{flex:1 1 auto}
@media (max-width:900px){
  .hamb{display:block}
  .menu-wrap{
    display:none;
    position:absolute;
    left:0;right:0;top:100%;
    background:linear-gradient(180deg,#0f1629,#0c1221);
    border-bottom:1px solid #ffffff14;
    box-shadow:0 14px 30px rgba(0,0,0,.35);
    z-index:49
  }
  .menu-wrap.open{display:block}
  .menu{flex-direction:column;gap:0;padding:8px}
  .menu a{display:block;width:100%}
}

/* ===== HERO ===== */
.hero{
  padding:72px 0;
  background:radial-gradient(1200px 500px at -10% -30%, rgba(239,68,68,.18), transparent),
             linear-gradient(to bottom, #0f1629, #0b111d);
  color:#fff
}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}
.hero-copy h1{
  font-family:Poppins,Inter,sans-serif;
  font-weight:800;
  font-size:clamp(32px,6vw,58px);
  line-height:1.05;
  letter-spacing:-.02em
}
.hero-copy .hero-sub{color:#d2d7e2;margin:6px 0 12px}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.badge{
  background:#0b1220;
  color:#e5e7eb;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid #ffffff1a
}
.hero-art img{border-radius:16px;box-shadow:var(--shadow)}

/* ===== CARDS ===== */
.cards{display:grid;gap:16px}
@media (min-width:1025px){.cards{grid-template-columns:repeat(3,1fr)}}
@media (min-width:768px) and (max-width:1024px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:767px){.cards{grid-template-columns:1fr}}
.card{
  background:#0e1624;
  color:#e6eaf2;
  border:1px solid #ffffff14;
  border-radius:16px;
  padding:16px;
  position:relative;
  overflow:hidden;
  transition:transform .18s ease,box-shadow .22s ease,border-color .18s ease
}
.card img{width:100%;height:180px;object-fit:cover;border-radius:10px;margin-bottom:10px}
.card:hover{transform:translateY(-6px) scale(1.01);box-shadow:var(--shadow)}
.card h3{margin:4px 0 6px;font-weight:800}
.card p{margin:0 0 10px;color:#c7d0de}
.card .chip{
  background:#111827;
  border:1px solid #263043;
  color:#dbe3f0;
  padding:8px 10px;
  border-radius:999px;
  font-weight:700;
  cursor:pointer
}
.card .chip:hover{filter:brightness(1.1)}

/* ===== CASES ===== */
.cases{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.case{
  background:#111827;
  border:1px solid #243042;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.25);
  transition:transform .22s,box-shadow .22s
}
.case img{width:100%;height:180px;object-fit:cover}
.case:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(0,0,0,.35)}
.case-info{padding:14px}
.case-info h3{margin:0 0 6px;font-weight:800}


/* === Ajuste para imagens de Cases de Sucesso === */
.case img {
  height: auto;       /* remove a altura fixa de 180px */
  width: 100%;        /* garante largura total do card */
  object-fit: cover;  /* mantém o enquadramento sem distorcer */
}




/* ===== SOBRE ===== */
.about{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}
@media (max-width:900px){.about{grid-template-columns:1fr}}
.about-list{list-style:'✓  ';padding-left:16px;color:#d6dee9}
.stats{display:flex;gap:14px;margin-top:12px}
.stat{
  background:#0e1624;
  border:1px solid #ffffff14;
  border-radius:12px;
  padding:12px 16px;
  text-align:center
}
.stat strong{display:block;font-size:1.3rem}

/* ===== LISTA DETALHADA DE SERVIÇOS ===== */
.service-list{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:18px
}
.service-list article{
  background:#0e1624;
  border:1px solid #ffffff14;
  border-radius:14px;
  padding:16px;
  box-shadow:var(--shadow)
}
.service-list h3{
  margin:0 0 6px;
  font-weight:800;
  color:#fff
}
.service-list p{margin:0;color:#c7d0de}

/* ===== DEPOIMENTOS ===== */
.testimonials .testi-grid{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr))
}
.testi{
  margin:0;
  background:#0e1624;
  border:1px solid #ffffff14;
  border-radius:14px;
  padding:16px;
  color:#d7dbe6;
  box-shadow:var(--shadow)
}
.testi p{margin:0 0 10px}
.testi footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#aeb7c7;
  font-weight:600
}
.stars{color:#fbbf24;letter-spacing:1px}

/* ===== CTA FINAL ===== */
.cta-final{
  background:linear-gradient(160deg,#ef4444,#b91c1c);
  padding:46px 0;
  text-align:center
}
.cta-final h2{margin:0 0 10px}

/* ===== FORM ===== */
.form.form-stack{
  max-width:880px;
  margin:0 auto;
  background:#0b1220;
  color:#e5e7eb;
  border:1px solid #243042;
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:22px
}
.form.form-stack label{
  display:grid;
  gap:6px;
  margin-bottom:12px;
  font-weight:600
}
.form.form-stack input,
.form.form-stack select,
.form.form-stack textarea{
  background:#0f172a;
  color:#e5e7eb;
  border:1px solid #253047;
  border-radius:12px;
  padding:12px;
  font:inherit
}
.form.form-stack input:focus,
.form.form-stack select:focus,
.form.form-stack textarea:focus{
  outline:none;
  border-color:#ef4444;
  box-shadow:0 0 0 3px rgba(239,68,68,.25)
}
.form-ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:760px){.grid{grid-template-columns:1fr}}

/* ===== FOOTER ===== */
.site-footer{
  padding:30px 0;
  background:#0b111d;
  border-top:1px solid #ffffff14;
  color:#e5e7eb
}
.foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px
}
.site-footer a{color:#e5e7eb}
.site-footer a:hover{color:#fff}

/* ===== EFFECTS ===== */
.tilt:hover{transform:translateY(-8px) rotate3d(.5,1,0,.6deg)}
.parallax:hover img{transform:scale(1.03)}
.parallax img{transition:transform .35s ease}
.wa{cursor:pointer}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ===== SKIP LINK ===== */
.skip{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden
}
.skip:focus{
  left:16px;
  top:16px;
  width:auto;
  height:auto;
  padding:8px 12px;
  border-radius:8px;
  background:#111;
  color:#fff;
  z-index:9999
}

/* ============================================================
   AJUSTES FINAIS • MarkStamp
   (adicione este bloco no final de styles.css)
   ============================================================ */

/* ===== 1) Logo maior no cabeçalho =====
   Aumenta a altura mínima do header e o tamanho da logo
   em desktop e mobile para dar mais destaque à marca.
*/
.header-grid {
  min-height: 96px;   /* antes era 84px */
}
.brand img {
  height: 72px;       /* antes era 52px */
}
@media (max-width: 900px){
  .brand img { height: 60px; }
  .header-grid { min-height: 86px; }
}

/* ===== 2) Imagens nos CARDS e CASES =====
   Impede que as imagens “estourem” dentro dos balões.
   Escolha entre object-fit: contain (não corta) ou cover (preenche).
   Abaixo está a combinação recomendada:
      - Serviços (cards) mostram a imagem inteira (contain)
      - Cases de sucesso preenchem o espaço (cover)
*/

/* --- Cards de serviços: imagem inteira, sem corte --- */
.card img {
  width: 100%;
  aspect-ratio: 16/9;
  height: auto;
  object-fit: contain;        /* mostra a imagem completa */
  background: #0b1220;        /* fundo neutro */
  padding: 8px;               /* espaço interno */
  border-radius: 12px;
}

/* --- Cases de sucesso: estilo banner, cobre todo o espaço --- */
.case img {
  width: 100%;
  height: 220px;              /* altura fixa para manter padrão */
  object-fit: cover;          /* preenche cortando sobras */
  border-radius: 12px;
}

/* ===== 3) Hero Art (imagem principal) =====
   Limita a largura máxima em telas muito grandes.
*/
.hero-art img {
  width: 100%;
  max-width: 600px;
  border-radius: 16px;
}
/* ============================================================
   MOBILE: Banner hero primeiro e em largura total
   ============================================================ */
@media (max-width: 900px) {
  /* Reordena a grade: imagem antes do texto */
  .hero-grid {
    display: flex;
    flex-direction: column;
  }
  .hero-art {
    order: -1;           /* faz a imagem vir antes do texto */
    width: 100%;
    margin-bottom: 20px; /* espaço entre o banner e o texto */
  }
  .hero-art img {
    width: 100%;         /* ocupa toda a largura da tela */
    height: auto;
    max-height: none;    /* altura livre */
    border-radius: 0;    /* sem cantos arredondados para full-width */
  }
}

/* ============================================================
   Ajuste: Mostrar imagem de Performance sem cortes
   ============================================================ */
.case img[src*="perfomance"] {
  width: 100%;
  height: auto;          /* altura automática para manter proporção */
  object-fit: contain;   /* mostra a arte completa, mesmo que sobrem bordas */
  background: #0b1220;   /* fundo neutro para as bordas que sobrarem */
  padding: 8px;          /* pequeno respiro ao redor */
  border-radius: 12px;
}
/* ============================================================
   Padronização de tamanho para TODAS as imagens dos Cases
   ============================================================ */
.case img {
  width: 100%;
  height: 280px;         /* altura fixa padrão para todos */
  object-fit: contain;   /* mostra a arte completa sem cortar */
  background: #0b1220;   /* fundo neutro nas bordas */
  padding: 8px;          /* respiro interno */
  border-radius: 12px;
}
/* ===== Ajuste das imagens dos cards O que Fazemos ===== */
.cards .card img {
  width: 100%;           /* ocupa toda a largura do card */
  height: auto;          /* mantém a proporção original */
  object-fit: cover;     /* garante cobertura completa sem distorcer */
  border-radius: 10px;   /* mantém o arredondamento existente */
  display: block;        /* evita espaçamento extra */
}