@font-face {
  font-family: 'Artegra-black';
  src: url("../font/ArtegraSans-Black.woff2")format('truetype');
}

@font-face {
  font-family: 'Artegra-bold';
  src: url("../font/ArtegraSans-Bold.woff2")format('truetype');
}

@font-face {
  font-family: 'Artegra-semibold';
  src: url("../font/ArtegraSans-SemiBold.woff2")format('truetype');
}

@font-face {
  font-family: 'Artegra-medium';
  src: url("../font/ArtegraSans-Medium.woff2")format('truetype');
}

@font-face {
  font-family: 'Artegra-regular';
  src: url("../font/ArtegraSans-Regular.woff2")format('truetype');
}

@font-face {
  font-family: 'Artegra-light';
  src: url("../font/ArtegraSans-Light.woff2")format('truetype');
}

:root{
  --bg:#000; --fg:#fff; --muted:#c9c9c9; --dim:#a6a6a6; --line:#1b1b1b;
  --maxw:1180px; --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0; padding:0; background:var(--bg); color:var(--fg);
  font:500 16px/1.6 Artegra-bold, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial}
a{color:inherit; text-decoration:none}
.container{max-width:var(--maxw); margin:0 auto; padding:0 20px}
/* Header com marca predominante à esquerda */
header{border-bottom:1px solid var(--line); background:#000; position:sticky; top:0; z-index:5}
nav{display:flex; align-items:center; justify-content:space-between; height:72px}
.brand{display:flex; gap:12px; align-items:center; letter-spacing:.04em}
.brand img{width:34px; height:34px; border-radius:7px; background:#fff}
.brand .name{font-weight:900; letter-spacing: 0.5px; margin-top: 2px; font-size: clamp(20px, 2.6vw, 30px)} /* Marca maior */
.nav{display:flex; gap:22px; align-items:center}
.btn{padding:12px 18px; border-radius:999px; border:1px solid #fff; background:#fff; color:#000; font-weight:800}
.btn:hover{filter:invert(1) brightness(1.04)}
h1{font-size:clamp(42px,6.6vw,76px); letter-spacing:-.02em; line-height:1.05; margin:8px 0 12px}
h2{font-size:clamp(22px,3vw,28px); margin:0 0 10px}
.muted{color:var(--muted)}
.dim{color:var(--dim); font-family: Artegra-medium;}
section{padding:32px 0; border-top:1px solid var(--line)}

/* HERO: esquerda texto, direita gráfico */
.hero{display:grid; grid-template-columns:1.15fr .85fr; gap:28px; align-items:center; padding:36px 0}
@media (max-width:980px){.hero{grid-template-columns:1fr}}
.gk{font-size:clamp(20px,2.8vw,30px); font-weight:900; color:#eaeaea; margin-top:6px} /* Gateway de pagamento simplificado (maior) */
.lead{font-size:clamp(18px,2.6vw,26px); font-weight:900} /* Headline principal */
.support{color:var(--muted); font-family: Artegra-medium; max-width:60ch}

/* GRÁFICO hero */
.chart{border:1px solid var(--line); border-radius:var(--radius); padding:14px; background:#050505}
.chart .cap{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px}
.chart .nums{display:flex; gap:8px; font-weight:800}
.chart svg{width:100%; height:220px; display:block}

/* FEATURES: 4 colunas com ícones */
.features{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
@media (max-width:1100px){.features{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.features{grid-template-columns:1fr}}
.feat{display:flex; gap:12px; align-items:center; border:1px solid var(--line); border-radius:14px; padding:14px; background:#050505}
.icon{width:40px; height:40px; border:1px solid #333; border-radius:10px; display:grid; place-items:center}

/* COMO FUNCIONA x PREÇOS */
.twocol{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media (max-width:980px){.twocol{grid-template-columns:1fr}}
.card{border:1px solid var(--line); border-radius:14px; padding:16px; background:#050505}
.steps{display:grid; gap:10px}
.step{display:flex; gap:12px; align-items:flex-start}
.num{width:28px; height:28px; border-radius:50%; background:#fff; color:#000; font-weight:900; display:grid; place-items:center}
.prices{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
@media (max-width:1400px){.prices{grid-template-columns:1fr}}
.price b{font-size:24px}

/* Blog & CTA */
.posts{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
@media (max-width:980px){.posts{grid-template-columns:1fr}}

footer{border-top:1px solid var(--line); padding:24px 0; color:#8a8a8a; margin-top:20px}