@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; --text:#FFFFFF; --card:#121212; --bd:#2A2A2A; --accent:#FFFFFF; }

 * { 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 { 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: 40px; height: 40px; border-radius: 6px; margin-top: 8px; background:#fff }

.brand .name { font-weight: 900; letter-spacing: 0.5px; margin-top: 4px; font-size: clamp(20px, 2.6vw, 25px) }

 /* Marca maior */
.nav { display: flex; gap: 22px; align-items: center }

.btn { display: inline-flex; padding: 12px 18px; border-radius: 999px; border: 1px solid #fff; background:#fff; color:#000; font-weight: 800 }

.btn:hover { background: #000; color: #fff; transition: all .2s ease-in-out; }

.btn i { margin-top: 3px; vertical-align: middle;}

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 }

/* HERO: esquerda texto, direita gráfico */
.hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px; align-items: center; padding: 36px 0 }

.hero img { width: 70% }

@media (max-width: 980px) {
	
.hero { grid-template-columns: 1fr }

.hero img { width: 50%; margin-top: 50px; }
	
}

@media (max-width: 640px) {
	
.hero img { width: 80%; margin-top: 0px; }
	
}

.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; margin-bottom: 25px }

/* GRÁFICO hero */
.chart { border-radius: var(--radius); padding: 14px; background:#090909 }

.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: 14px; align-items: center; border-radius: 14px; padding: 14px; background:#090909 }

 .icon { width: 46px; height: 46px; font-size: 18px; padding: 12.5px; background: #000; 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-radius: 14px; padding: 16px; background:#090909 }

 .card i { display: inline-flex; margin-bottom: 4px; vertical-align: middle;}

 .steps { display: grid; gap: 10px }

 .step { display: flex; gap: 12px; align-items: flex-start }

 .num { width: 28px; height: 28px; border-radius: 100%; background:#fff; color:#000; font-weight: 900; display: grid; place-items: center }

 .prices { display: flex; 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 }
 }
  
 .faq-item { background: #090909; border-radius: var(--radius); margin: 14px 0; box-shadow: var(--shadow); overflow: hidden }

 .faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px; border: 0; background: transparent; color: var(--text); font-family: Artegra-bold; font-size: 18px; font-weight: 900; line-height: 1.5; text-align: left; cursor: pointer }

 .faq-q svg {width: 20px; height: 20px; stroke: var(--text); fill: none; stroke-width: 2; transition: transform .2s ease }
 .faq-q[aria-expanded="true"] svg { transform: rotate(45deg) }

 .faq-a { display: none; padding: 0 22px 22px }

 .faq-a a { display: inline-flex; font-size: 16px; font-weight: 900; margin: 0 5px !important  }

 .faq-a a i { margin-top: 2px; vertical-align: middle;}

 .faq-a p, .faq-a ul { color: var(--muted); line-height: 1.65; margin: .4rem 0 }

 .faq-a strong { color: var(--text) }

 .note { font-size: 12.5px; color: var(--muted); opacity: .9 }

 .faq-item:hover { box-shadow: var(--shadow-hover) }

 @media (max-width:640px){
 h1 { font-size: 28px }
	 
 .faq-q { width: 100%; font-size: 16px } 
	 
 .faq-a a { display: inline-flex; font-size: 16px; font-weight: 900; margin: 0 0 25px !important; }

 }

 footer { padding: 24px 0; color:#8a8a8a; margin-top: 20px }