/* ── NAV: index-specific btn-nav colour ── */
.btn-nav {
	background: var(--accent-2);
}

/* ── PREMIUM BUTTON (purple, used in hero + CTA) ── */
.btn-premium {
	background: var(--accent-2);
	color: #fff;
	text-decoration: none;
	padding: 0.75rem 1.75rem;
	border-radius: 8px;
	font-weight: 700;
	font-size: 0.95rem;
	transition: opacity 0.2s, transform 0.2s;
}
.btn-premium:hover {
	opacity: 0.88;
	transform: translateY(-1px);
}

/* ── USE CASES ── */
.use-cases-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.5rem;
	margin-top: 2rem;
}

.use-case-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 1.75rem;
}

.use-case-role {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 0.75rem;
}

.use-case-story {
	color: var(--muted);
	font-size: 0.9rem;
	line-height: 1.65;
}

/* ── HERO ── */
.hero {
	max-width: 860px;
	margin: 0 auto;
	padding: 6rem 2rem 5rem;
	text-align: center;
}

.badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: rgba(79, 142, 247, 0.12);
	border: 1px solid rgba(79, 142, 247, 0.3);
	color: var(--accent);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.3rem 0.85rem;
	border-radius: 999px;
	margin-bottom: 1.75rem;
}

.badge::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--success);
	animation: pulse 2s infinite;
}

h1 {
	font-size: clamp(2.2rem, 5vw, 3.5rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
	margin-bottom: 1.5rem;
}

h1 em {
	font-style: normal;
	background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.hero-sub {
	font-size: 1.125rem;
	color: var(--muted);
	max-width: 620px;
	margin: 0 auto 2.5rem;
}

.hero-actions {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
}

.btn-primary {
	background: var(--accent);
	color: #fff;
	text-decoration: none;
	padding: 0.75rem 1.75rem;
	border-radius: 8px;
	font-weight: 700;
	font-size: 0.95rem;
	transition: opacity 0.2s, transform 0.2s;
}

.btn-primary:hover {
	opacity: 0.88;
	transform: translateY(-1px);
}

/* ── SECTIONS ── */
.section {
	max-width: 1040px;
	margin: 0 auto;
	padding: 5rem 2rem;
}

.section-label {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 0.75rem;
}

.section-title {
	font-size: clamp(1.6rem, 3vw, 2.25rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	margin-bottom: 1rem;
}

.section-body {
	color: var(--muted);
	font-size: 1.05rem;
	max-width: 580px;
	margin-bottom: 3rem;
}

/* ── TAX CARDS ── */
.tax-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 1.5rem;
}

.tax-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 2rem;
	position: relative;
	overflow: hidden;
}

.tax-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
}

.tax-card.time::before {
	background: var(--danger);
}
.tax-card.capital::before {
	background: var(--warn);
}
.tax-card.sla::before {
	background: var(--accent);
}

.tax-icon {
	font-size: 2rem;
	margin-bottom: 1rem;
}

.tax-name {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 0.4rem;
}

.tax-card.time .tax-name {
	color: var(--danger);
}
.tax-card.capital .tax-name {
	color: var(--warn);
}
.tax-card.sla .tax-name {
	color: var(--accent);
}

.tax-card h3 {
	font-size: 1.25rem;
	font-weight: 700;
	margin-bottom: 0.75rem;
}

.tax-card p {
	color: var(--muted);
	font-size: 0.9rem;
	line-height: 1.65;
}

.tax-card ul {
	list-style: none;
	margin-top: 1rem;
}

.tax-card ul li {
	color: var(--muted);
	font-size: 0.875rem;
	padding: 0.3rem 0;
	padding-left: 1.25rem;
	position: relative;
}

.tax-card ul li::before {
	content: "→";
	position: absolute;
	left: 0;
	color: var(--border);
}

/* ── SOLUTION SECTION ── */
.solution-wrapper {
	background: var(--surface);
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}

.pillars {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.5rem;
	margin-top: 3rem;
}

.pillar {
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 1.5rem;
}

.pillar-icon {
	font-size: 1.5rem;
	margin-bottom: 0.75rem;
}

.pillar h4 {
	font-size: 0.95rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
}

.pillar p {
	color: var(--muted);
	font-size: 0.85rem;
	line-height: 1.6;
}

/* ── CTA ── */
.cta-section {
	text-align: center;
	padding: 6rem 2rem;
	max-width: 700px;
	margin: 0 auto;
}

.cta-section h2 {
	font-size: clamp(1.8rem, 4vw, 2.75rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	margin-bottom: 1rem;
}

.cta-section p {
	color: var(--muted);
	margin-bottom: 2.5rem;
	font-size: 1.05rem;
}

/* ── SMALL MOBILE (≤ 400px) ── */
@media (max-width: 400px) {
	body {
		overflow-x: hidden;
	}
	.section {
		padding: 3rem 1rem;
	}
	.hero {
		padding: 4rem 1rem 3rem;
	}
	.cta-section {
		padding: 4rem 1rem;
	}
	.tax-grid {
		grid-template-columns: 1fr;
	}
}