/* ── Variáveis ────────────────────────────────────────────────────── */
:root {
	--hn-primary: #3762f0;
	--hn-primary-dark: #2548c7;
	--hn-primary-light: #eef1fd;
	--hn-accent: #7c3aed;
	--hn-success: #22c55e;
	--hn-warn: #f59e0b;
	--hn-text: #0f1728;
	--hn-muted: #6b7280;
}
.dark-mode {
	--hn-text: #fff;
	--hn-muted: rgba(255,255,255,.55);
}

/* ── Utilitários ─────────────────────────────────────────────────── */
.hn-section        { padding: 88px 0; }
.hn-section-alt    { padding: 88px 0; background: #f8f9fc; }
.hn-section-dark   { padding: 88px 0; background: linear-gradient(155deg, #eaf2ff 0%, #dceafe 55%, #cfe3ff 100%); color: #0f2d42; }
.dark-mode .hn-section-dark { background: linear-gradient(155deg, #04060c 0%, #0a1730 55%, #13294d 100%); color: #fff; }
.hn-label          { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--hn-primary); background: var(--hn-primary-light); padding: .35em .9em; border-radius: 999px; margin-bottom: 1rem; }
.hn-label-light    { color: #a5b4fc; background: rgba(255,255,255,.08); }
.hn-hero .hn-label-light { color: var(--hn-primary); background: var(--hn-primary-light); }
.dark-mode .hn-hero .hn-label-light { color: #a5b4fc; background: rgba(255,255,255,.08); }

/* ── Hero ────────────────────────────────────────────────────────── */
.hn-hero {
	padding: 96px 0 80px;
	background: linear-gradient(155deg, #eaf2ff 0%, #dbe9ff 55%, #cfe3ff 100%);
	position: relative;
	overflow: hidden;
}
.dark-mode .hn-hero {
	background: linear-gradient(155deg, #04060c 0%, #0a1730 55%, #13294d 100%);
}
.hn-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 70% 60% at 60% 40%, rgba(99,102,241,.12) 0%, transparent 70%);
	pointer-events: none;
}
.dark-mode .hn-hero::before {
	background: radial-gradient(ellipse 70% 60% at 60% 40%, rgba(99,102,241,.18) 0%, transparent 70%);
}
.hn-hero-headline {
	font-size: clamp(2rem, 5vw, 3.25rem);
	font-weight: 800;
	line-height: 1.15;
	color: #0f2d42;
	letter-spacing: -.02em;
}
.dark-mode .hn-hero-headline { color: #fff; }
.hn-hero-headline em {
	font-style: normal;
	background: linear-gradient(90deg, var(--hn-primary), var(--hn-accent));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.dark-mode .hn-hero-headline em {
	background: linear-gradient(90deg, #818cf8, #c084fc);
	-webkit-background-clip: text;
	background-clip: text;
}
.hn-hero-sub {
	font-size: 1.125rem;
	color: #3c5871;
	line-height: 1.7;
	max-width: 560px;
}
.dark-mode .hn-hero-sub { color: rgba(255,255,255,.75); }
.hn-hero-brand { color: var(--hn-primary); }
.dark-mode .hn-hero-brand { color: #fff; }
.hn-cta-primary {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: var(--hn-primary);
	color: #fff !important;
	font-weight: 700;
	font-size: 1rem;
	padding: .875rem 2rem;
	border-radius: 10px;
	text-decoration: none;
	transition: background .2s, transform .15s, box-shadow .2s;
	box-shadow: 0 4px 20px rgba(55,98,240,.45);
}
.hn-cta-primary:hover {
	background: var(--hn-primary-dark);
	transform: translateY(-2px);
	box-shadow: 0 8px 28px rgba(55,98,240,.5);
}
.hn-cta-secondary {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	color: rgba(255,255,255,.8) !important;
	font-weight: 600;
	font-size: .95rem;
	text-decoration: none;
	padding: .875rem 1.25rem;
	border: 1.5px solid rgba(255,255,255,.2);
	border-radius: 10px;
	transition: border-color .2s, color .2s;
}
.hn-cta-secondary:hover { border-color: rgba(255,255,255,.5); color: #fff !important; }
.hn-hero .hn-cta-secondary { color: #1e3a5f !important; border-color: rgba(30,58,95,.25); }
.hn-hero .hn-cta-secondary:hover { border-color: rgba(30,58,95,.5); color: #0f2d42 !important; }
.dark-mode .hn-hero .hn-cta-secondary { color: rgba(255,255,255,.8) !important; border-color: rgba(255,255,255,.2); }
.dark-mode .hn-hero .hn-cta-secondary:hover { border-color: rgba(255,255,255,.5); color: #fff !important; }
.hn-hero-guarantee {
	font-size: .8rem;
	color: rgba(15,45,66,.55);
	margin-top: .75rem;
}
.dark-mode .hn-hero-guarantee { color: rgba(255,255,255,.45); }
.hn-hero-stat {
	border-left: 1.5px solid rgba(15,45,66,.15);
	padding-left: 1.5rem;
}
.hn-hero-stat strong { display: block; font-size: 1.75rem; font-weight: 800; color: #0f2d42; }
.hn-hero-stat span   { font-size: .8rem; color: rgba(15,45,66,.65); }
.hn-hero-stat:first-child { border: 0; padding-left: 0; }
.dark-mode .hn-hero-stat { border-left-color: rgba(255,255,255,.12); }
.dark-mode .hn-hero-stat strong { color: #fff; }
.dark-mode .hn-hero-stat span   { color: rgba(255,255,255,.55); }

/* ── Trust bar ───────────────────────────────────────────────────── */
.hn-trust { background: #fff; border-bottom: 1px solid #e5e7eb; padding: 18px 0; }
.hn-trust-item { font-size: .82rem; font-weight: 600; color: var(--hn-muted); display: flex; align-items: center; gap: .5rem; }
.hn-trust-item i { font-size: 1.1rem; color: var(--hn-success); }

/* ── Problem ─────────────────────────────────────────────────────── */
.hn-pain-card {
	background: #fff;
	border: 1.5px solid #e5e7eb;
	border-radius: 14px;
	padding: 1.5rem;
	transition: border-color .2s, box-shadow .2s;
}
.hn-pain-card:hover {
	border-color: #fca5a5;
	box-shadow: 0 4px 20px rgba(239,68,68,.08);
}
.hn-pain-icon {
	width: 44px; height: 44px;
	border-radius: 10px;
	display: flex; align-items: center; justify-content: center;
	background: #fef2f2;
	margin-bottom: 1rem;
}

/* ── Feature cards ───────────────────────────────────────────────── */
.hn-feature-card {
	background: #fff;
	border: 1.5px solid #e5e7eb;
	border-radius: 16px;
	padding: 2rem;
	height: 100%;
	transition: border-color .2s, transform .2s, box-shadow .2s;
	position: relative;
	overflow: hidden;
}
.hn-feature-card::after {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: var(--card-accent, var(--hn-primary));
	opacity: 0;
	transition: opacity .2s;
}
.hn-feature-card:hover {
	border-color: transparent;
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(15,23,40,.08);
}
.hn-feature-card:hover::after { opacity: 1; }
.hn-feature-icon {
	width: 52px; height: 52px;
	border-radius: 14px;
	display: flex; align-items: center; justify-content: center;
	margin-bottom: 1.25rem;
}
.hn-feature-card .hn-credit-badge {
	display: inline-block;
	font-size: .72rem;
	font-weight: 600;
	color: var(--hn-muted);
	background: #f3f4f6;
	padding: .2em .7em;
	border-radius: 999px;
	margin-top: auto;
}
.hn-feature-card-highlight {
	background: linear-gradient(135deg, #eef1fd 0%, #f0eeff 100%);
	border-color: #c7d2fe;
}

/* ── Steps ───────────────────────────────────────────────────────── */
.hn-step-num {
	width: 44px; height: 44px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--hn-primary);
	color: #fff;
	font-weight: 800;
	font-size: 1.1rem;
	flex-shrink: 0;
}
.hn-step-line {
	flex: 1;
	height: 2px;
	background: linear-gradient(90deg, var(--hn-primary), #c084fc);
	opacity: .25;
}

/* ── For who ─────────────────────────────────────────────────────── */
.hn-who-card {
	border-radius: 16px;
	padding: 2rem;
	height: 100%;
	border: 1.5px solid transparent;
	background: #fff;
	transition: border-color .2s, box-shadow .2s;
}
.hn-who-card:hover { border-color: var(--hn-primary); box-shadow: 0 8px 28px rgba(55,98,240,.1); }
.hn-who-avatar {
	width: 52px; height: 52px;
	border-radius: 14px;
	font-size: 1.6rem;
	display: flex; align-items: center; justify-content: center;
	margin-bottom: 1rem;
}

/* ── Comparativo ─────────────────────────────────────────────────── */
.hn-compare-table th { font-weight: 700; background: #f8f9fc; }
.hn-compare-table td, .hn-compare-table th { vertical-align: middle; text-align: center; border-color: #e5e7eb; }
.hn-compare-table td:first-child, .hn-compare-table th:first-child { text-align: left; }
.hn-compare-col-highlight { background: #eef1fd; }

/* ── Testimonials ────────────────────────────────────────────────── */
.hn-testimonial {
	background: #fff;
	border: 1.5px solid #e5e7eb;
	border-radius: 16px;
	padding: 2rem;
	height: 100%;
}
.hn-testimonial-highlight { border-color: #c7d2fe; }
.hn-stars { color: #f59e0b; font-size: .9rem; letter-spacing: .05em; }
.hn-testimonial-avatar {
	width: 44px; height: 44px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--hn-primary), var(--hn-accent));
	display: flex; align-items: center; justify-content: center;
	color: #fff;
	font-weight: 700;
	font-size: 1rem;
	flex-shrink: 0;
}

/* ── CTA Banner ──────────────────────────────────────────────────── */
.hn-cta-banner {
	background: linear-gradient(135deg, #3762f0 0%, #7c3aed 100%);
	border-radius: 20px;
	padding: 4rem 3rem;
	position: relative;
	overflow: hidden;
}
.hn-cta-banner::before {
	content: '';
	position: absolute;
	top: -40%; right: -10%;
	width: 400px; height: 400px;
	background: radial-gradient(circle, rgba(255,255,255,.08), transparent 70%);
	pointer-events: none;
}
.hn-cta-btn-light {
	display: inline-flex; align-items: center; gap: .5rem;
	background: #fff;
	color: var(--hn-primary) !important;
	font-weight: 700;
	font-size: 1rem;
	padding: .875rem 2rem;
	border-radius: 10px;
	text-decoration: none;
	transition: transform .15s, box-shadow .2s;
	box-shadow: 0 4px 20px rgba(0,0,0,.15);
}
.hn-cta-btn-light:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.2); }

/* ── FAQ ─────────────────────────────────────────────────────────── */
.hn-faq .accordion-button:not(.collapsed) { background: var(--hn-primary-light); color: var(--hn-primary); box-shadow: none; }
.hn-faq .accordion-button { font-weight: 600; font-size: .95rem; }
.hn-faq .accordion-item { border-color: #e5e7eb; border-radius: 12px !important; overflow: hidden; margin-bottom: .5rem; }

/* ── Dark mode ───────────────────────────────────────────────────── */
.dark-mode .hn-label:not(.hn-label-light) {
	color: #a5b4fc;
	background: rgba(99,102,241,.16);
}
.dark-mode .hn-section-alt { background: #191632; }
.dark-mode .hn-trust {
	background: rgba(255,255,255,.04);
	border-bottom-color: rgba(255,255,255,.1);
}
.dark-mode .hn-pain-card {
	background: rgba(255,255,255,.05);
	border-color: rgba(255,255,255,.12);
}
.dark-mode .hn-pain-card:hover {
	border-color: rgba(239,68,68,.4);
	box-shadow: 0 4px 20px rgba(239,68,68,.15);
}
.dark-mode .hn-feature-card {
	background: rgba(255,255,255,.05);
	border-color: rgba(255,255,255,.12);
}
.dark-mode .hn-feature-card:hover {
	border-color: transparent;
	box-shadow: 0 12px 32px rgba(0,0,0,.45);
}
.dark-mode .hn-feature-card-highlight {
	background: linear-gradient(135deg, rgba(99,102,241,.18) 0%, rgba(124,58,237,.16) 100%);
	border-color: rgba(199,210,254,.3);
}
.dark-mode .hn-feature-card .hn-credit-badge { background: rgba(255,255,255,.08); }
.dark-mode .hn-who-card { background: rgba(255,255,255,.05); }
.dark-mode .hn-who-card:hover { box-shadow: 0 8px 28px rgba(55,98,240,.25); }
.dark-mode .hn-compare-table th { background: rgba(255,255,255,.06); }
.dark-mode .hn-compare-table td,
.dark-mode .hn-compare-table th { border-color: rgba(255,255,255,.12); }
.dark-mode .hn-compare-col-highlight { background: rgba(99,102,241,.14); }
.dark-mode .hn-testimonial {
	background: rgba(255,255,255,.05);
	border-color: rgba(255,255,255,.12) !important;
}
.dark-mode .hn-testimonial-highlight { border-color: rgba(199,210,254,.3) !important; }

/* ── Misc ────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
	.hn-section, .hn-section-alt, .hn-section-dark { padding: 64px 0; }
	.hn-hero { padding: 72px 0 60px; }
}