/* =========================
   INDEX.CSS
   Somente estilos do index
========================= */

/* HERO */
.hero {
	padding: 72px 0 36px;
	position: relative;
	overflow: hidden;
}

.hero::after {
	content: "";
	position: absolute;
	right: -120px;
	top: 50%;
	transform: translateY(-50%);

	width: 600px;
	height: 600px;

	background: radial-gradient(
		circle,
		rgba(56, 189, 248, 0.12),
		transparent 60%
	);

	filter: blur(60px);
	pointer-events: none;
	z-index: 0;
}

.hero-container {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	align-items: center;
	gap: 40px;
}

.hero-content {
	max-width: 720px;
	width: 100%;
}

.hero-title {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-bottom: 14px;
}

.hero-title .line-1,
.hero-title .line-3 {
	line-height: 1.05;
}

.hero-title .line-1 {
	font-size: 3.2rem;
	font-weight: 700;
	letter-spacing: -0.5px;
}

.hero-title .line-2 {
	font-size: 2.2rem;
	font-weight: 600;
	color: #38bdf8;
	line-height: 0.9;
	margin: 2px 0;
}

.hero-title .line-3 {
	font-size: 3.2rem;
	font-weight: 700;
	letter-spacing: -0.5px;
}

.hero p {
	font-size: 1.25rem; 
	line-height: 1.7;
	color: #cbd5f5;
	max-width: 560px;
	width: 100%;
}

.btn-sencundary {
	width: fit-content;
	min-width: 260px;
}

.hero-visual {
	display: flex;
	justify-content: center;
	align-items: center;
}

.hero-x {
	width: min(560px, 100%);
	height: auto;

	opacity: 0.18;

	filter:
		drop-shadow(0 25px 80px rgba(56, 189, 248, 0.25))
		blur(0.2px);

	transform: scale(1.05);
}


/* SEÇÕES (padding global) */
section {
	padding: 48px 0;
}

/* PAIN POINTS */
.pain-points h2 {
	font-size: 2.2rem;
	margin-bottom: 8px;
}

.section-subtitle {
	color: #cbd5f5;
	font-size: 1.15rem;
	max-width: 780px;
	margin-bottom: 22px;
}

.pain-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}

.pain-card {
	background: rgba(17, 24, 39, 0.68);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	padding: 22px;
	min-height: 150px;

	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
	backdrop-filter: blur(10px);

	transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.pain-card h3 {
	font-size: 1.25rem;
	margin-bottom: 10px;
	letter-spacing: -0.2px;
}

.pain-card p {
	font-size: 1.05rem;
	color: #cbd5f5;
	line-height: 1.55;
}

.pain-card:hover {
	transform: translateY(-4px);
	border-color: rgba(56, 189, 248, 0.22);
	box-shadow: 0 26px 70px rgba(0, 0, 0, 0.24);
}

/* SOLUTION */
.solution {
	padding: 28px 0 18px;
}

.solution .container {
	display: block;
}

.solution-card {
	width: 100%;
	max-width: none;
	border-radius: 18px;
	padding: 28px;

	background: rgba(17, 24, 39, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 18px 55px rgba(0, 0, 0, 0.25);

	transition: transform 160ms ease, box-shadow 160ms ease;
}

.solution-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 22px 65px rgba(0, 0, 0, 0.28);
}

.solution-card h2 {
	margin-bottom: 10px;
	font-size: 2rem;
}

.solution-card p {
	color: #cbd5f5;
	font-size: 1.15rem;
	line-height: 1.7;
	max-width: 85ch;
}

.solution-card.is-gradient {
	position: relative;
	border: 1px solid transparent;

	background:
		linear-gradient(rgba(17, 24, 39, 0.65), rgba(17, 24, 39, 0.65)) padding-box,
		linear-gradient(90deg, rgba(74, 222, 128, 0.85), rgba(56, 189, 248, 0.85)) border-box;

	box-shadow:
		0 20px 60px rgba(0, 0, 0, 0.28),
		inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

/* SEÇÕES: TITULOS + TEXTOS (INDEX) */
.features {
	padding-top: 28px;
}

.features h2,
.how-it-works h2,
.target h2,
.faq h2,
.final-cta h2 {
	font-size: 2.2rem;
	margin-bottom: 10px;
}

.features .container > p,
.how-it-works .container > p,
.target .container > p,
.faq .container > p {
	color: #cbd5f5;
	font-size: 1.15rem;
	max-width: 85ch;
}

/* FEATURES GRID */
.features-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	margin-top: 18px;
}

.feature-card {
	background: rgba(17, 24, 39, 0.68);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	padding: 22px;
	min-height: 150px;

	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
	backdrop-filter: blur(10px);

	transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.feature-card h3 {
	font-size: 1.25rem;
	margin-bottom: 10px;
	letter-spacing: -0.2px;
}

.feature-card p {
	font-size: 1.05rem;
	color: #cbd5f5;
	line-height: 1.55;
}

.feature-card:hover {
	transform: translateY(-4px);
	border-color: rgba(56, 189, 248, 0.22);
	box-shadow: 0 26px 70px rgba(0, 0, 0, 0.24);
}

/* HOW IT WORKS */
.how-it-works .steps {
	margin-top: 16px;
	list-style: none;
	padding: 0;

	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}

.how-it-works .steps li {
	background: rgba(17, 24, 39, 0.45);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 14px;
	padding: 16px 18px;

	color: #e5e7eb;
	font-size: 1.05rem;
	line-height: 1.45;

	position: relative;
	overflow: hidden;
}

.how-it-works .steps li::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(74, 222, 128, 0.10), rgba(56, 189, 248, 0.10));
	opacity: 0.5;
	pointer-events: none;
}

/* TARGET */
.target p {
	margin-bottom: 14px;
}

.target-list {
	list-style: none;
	padding: 0;
	margin-top: 10px;

	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.target-list li {
	padding: 10px 14px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 1.02rem;

	background: rgba(17, 24, 39, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: #e5e7eb;
}

/* FAQ */
.faq-item {
	background: rgba(17, 24, 39, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 16px;
	padding: 18px 20px;
	margin-top: 14px;

	box-shadow: 0 16px 45px rgba(0, 0, 0, 0.16);
	transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.faq-item h3 {
	font-size: 1.18rem;
	margin-bottom: 6px;
}

.faq-item p {
	color: #cbd5f5;
	font-size: 1.05rem;
	line-height: 1.55;
}

.faq-item:hover {
	transform: translateY(-2px);
	border-color: rgba(56, 189, 248, 0.18);
	box-shadow: 0 22px 60px rgba(0, 0, 0, 0.22);
}

/* CTA FINAL */
.final-cta .container {
	margin-top: 6px;
	border-radius: 18px;
	padding: 28px;

	background:
		linear-gradient(rgba(17, 24, 39, 0.60), rgba(17, 24, 39, 0.60)) padding-box,
		linear-gradient(90deg, #4ade80, #38bdf8) border-box;

	border: 1px solid transparent;
	box-shadow: 0 22px 70px rgba(0, 0, 0, 0.26);
}

.final-cta h2 {
	margin-bottom: 12px;
}

/* =========================
   RESPONSIVO (sem repetição)
========================= */

/* Tablet (4->2 colunas) */
@media (max-width: 1100px) {
	.pain-grid,
	.features-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.how-it-works .steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Mobile (2->1 coluna) */
@media (max-width: 640px) {
	.hero::after {
		display: none;
	}

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

	.hero-title .line-1,
	.hero-title .line-3 {
		font-size: 2.1rem;
	}

	.hero-title .line-2 {
		font-size: 1.4rem;
	}

	.hero p {
		font-size: 1rem;
	}

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

	.how-it-works .steps {
		grid-template-columns: 1fr;
	}

	.final-cta .container {
		padding: 22px 18px;
		border-radius: 16px;
	}

	.solution-card {
		padding: 22px 18px;
		border-radius: 16px;
	}

	.solution-card h2 {
		font-size: 1.6rem;
	}
}

/* Layout hero em telas menores */
@media (max-width: 900px) {
	.hero-container {
		grid-template-columns: 1fr;
	}

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

	.hero-visual {
		min-height: auto;
		order: 2;
		margin-top: 10px;
	}

	.hero-x {
		width: min(420px, 92%);
		opacity: 0.12;
		transform: none;
	}

	.btn-sencundary {
		width: 100%;
	}
}

/* =========================
   ANIMAÇÕES (somente index)
========================= */

.hero .hero-content {
	animation: heroIn 1000ms ease forwards;
}

@keyframes heroIn {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* default: não some nada */
[data-reveal] {
	opacity: 1;
	transform: none;
}

/* só ativa animação quando o JS adiciona html.js */
html.js [data-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 650ms ease, transform 650ms ease;
	will-change: opacity, transform;
}

html.js [data-reveal].is-visible {
	opacity: 1;
	transform: translateY(0);
}

html.js [data-reveal="left"] {
	transform: translateX(-18px);
}

html.js [data-reveal="right"] {
	transform: translateX(18px);
}

html.js [data-reveal-delay="1"] {
	transition-delay: 80ms;
}
html.js [data-reveal-delay="2"] {
	transition-delay: 140ms;
}
html.js [data-reveal-delay="3"] {
	transition-delay: 200ms;
}
html.js [data-reveal-delay="4"] {
	transition-delay: 260ms;
}

@media (prefers-reduced-motion: reduce) {
	html.js [data-reveal] {
		opacity: 1;
		transform: none;  
		transition: none;
	}
}