@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
}

.footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap
}

@media (max-width: 435px) {
	
	.footer {
	justify-content: center;
	text-align: center
}

}

 /* 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 8px;
	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: 2.5px;
	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.05fr .95fr;
	gap: 28px;
	align-items: center;
	padding: 25px 0 0px
}

.hero img {
	width: 70%
}

.hero a {
	margin-right: 2px
}

@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;
	}
	
.hero a {
	width: 75%;
	margin: 10px 0 10px 13%;
	display: flex;
	justify-content: center;
	align-items: center;
}
	
}

.gk {
	font-size: clamp(26px,3vw,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: 30px
}

.title {
	font-size: 18px;
	color: #fff;
	font-family: Artegra-bold;
	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-item:hover {
	 box-shadow: var(--shadow-hover)
}

 .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: 24px;
	 height: 24px;
	 stroke: var(--text);
	 fill: none;
	 margin: 10% 0 0;
	 stroke-width: 2;
	 transition: transform .2s ease;
	 vertical-align: middle
}
 .faq-q[aria-expanded="true"] svg {
	 transform: rotate(45deg)
}

 @media (max-width:640px) {
	 
 .faq-q {
	 width: 100%;
	 align-items: flex-end
	 }
	 
 }

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

 .faq-a a {
	 display: inline-flex;
	 font-size: 16px;
	 font-weight: 900;
	 margin: 0 2px !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
}

 @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 10px !important
	}
}

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