/* ==========================================================================
   Components — Buttons, Cards, Section Titles, Gradient Text
   Inspired by taalas.com — clean, minimal, with irat.ai color palette
   ========================================================================== */

/* --- Buttons --- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-6);
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	line-height: 1;
	border: 2px solid transparent;
	border-radius: var(--radius-lg);
	cursor: pointer;
	transition: all var(--duration-normal) var(--ease-out);
	text-decoration: none;
	white-space: nowrap;
}

.btn--primary {
	background: var(--gradient-primary);
	color: #fff;
	border-color: transparent;
}

.btn--primary:hover {
	opacity: 0.9;
	transform: translateY(-1px);
	box-shadow: var(--shadow-lg);
	color: #fff;
}

.btn--outline {
	background: transparent;
	color: var(--color-accent);
	border-color: var(--color-accent);
}

.btn--outline:hover {
	background: var(--color-accent);
	color: #fff;
}

.btn--lg {
	padding: var(--space-4) var(--space-8);
	font-size: var(--text-base);
	border-radius: var(--radius-xl);
}

.btn--ghost {
	background: transparent;
	color: var(--color-text);
	border-color: var(--color-border);
}

.btn--ghost:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

/* --- Cards (taalas-inspired) --- */
.card {
	background: #fff;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: var(--radius-lg);
	padding: var(--space-6) var(--space-6) var(--space-8);
	display: flex;
	flex-direction: column;
	min-height: 280px;
	transition: transform 0.6s var(--ease-out),
	            box-shadow 0.6s var(--ease-out);
}

.card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

/* Glass variant for dark sections */
.card--glass {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-top-color: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}

.card--glass:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.18);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

/* Dark section cards override — white cards on dark bg */
.section--dark .card:not(.card--glass) {
	background: #fff;
	color: var(--color-secondary);
}

.section--dark .card:not(.card--glass) .card__title {
	color: var(--color-secondary);
}

.section--dark .card:not(.card--glass) .card__text {
	color: #6B7280;
}

.card__icon {
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-lg);
	background: var(--gradient-primary);
	color: #fff;
	font-size: var(--text-xl);
	margin-bottom: var(--space-6);
}

.card__title {
	font-size: var(--text-xl);
	font-weight: var(--weight-bold);
	color: var(--color-heading);
	margin-bottom: var(--space-3);
}

.card__text {
	font-size: var(--text-sm);
	color: var(--color-muted);
	line-height: var(--leading-normal);
	margin-top: auto;
}

/* --- Section titles --- */
.section-header {
	text-align: center;
	max-width: 700px;
	margin-inline: auto;
	margin-bottom: var(--space-12);
}

.section-title {
	font-size: var(--text-4xl);
	font-weight: var(--weight-bold);
	color: var(--color-heading);
	line-height: var(--leading-tight);
	margin-bottom: var(--space-4);
}

.section-subtitle {
	font-size: var(--text-lg);
	color: var(--color-muted);
	line-height: var(--leading-normal);
}

/* --- Gradient text (taalas-style) --- */
.gradient-text {
	background: var(--gradient-text);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: var(--text-4xl);
	font-weight: var(--weight-bold);
	line-height: var(--leading-tight);
}

/* --- Numbered counter (taalas-style numbered cards) --- */
.numbered {
	counter-reset: item-counter;
}

.numbered__item {
	counter-increment: item-counter;
}

.numbered__item::before {
	content: counter(item-counter, decimal-leading-zero);
	font-size: var(--text-4xl);
	font-weight: var(--weight-bold);
	background: var(--gradient-text);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	display: block;
	margin-bottom: var(--space-8);
	line-height: 1;
}

/* --- Badge --- */
.badge {
	display: inline-block;
	padding: var(--space-1) var(--space-3);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-radius: var(--radius-full);
	background: var(--gradient-primary);
	color: #fff;
}