/* ──────────────────────────────────────────────
   Main Stylesheet — Imports all partials
   Floza Theme v1.0.0
   ────────────────────────────────────────────── */

/* Global */
@import 'global/_reset.css';
@import 'global/_tokens.css';
@import 'global/_typography.css';
@import 'global/_utilities.css';

/* Components */
@import 'components/_navbar.css';
@import 'components/_hero.css';
@import 'components/_cards.css';
@import 'components/_buttons.css';
@import 'components/_forms.css';
@import 'components/_blog.css';
@import 'components/_whatsapp-float.css';

/* ──────────────────────────────────────────────
   Additional page-level styles
   ────────────────────────────────────────────── */

/* ── Section: Problem — Dark premium layout ── */
.problem-section {
	position: relative;
	background: var(--color-dark);
	padding-block: var(--space-5xl);
	overflow: hidden;
}

/* Subtle grid pattern bg */
.problem-section__bg {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
	background-size: 60px 60px;
	mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 0%, transparent 85%);
	-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 0%, transparent 85%);
	pointer-events: none;
}

/* Header */
.problem__header {
	text-align: center;
	margin-block-end: var(--space-3xl);
}

.problem__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: rgba(234, 67, 53, 0.12);
	border: 1px solid rgba(234, 67, 53, 0.2);
	color: #f87171;
	padding: 0.3rem 0.9rem;
	border-radius: var(--radius-full);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	margin-block-end: 1.4rem;
	letter-spacing: 0.02em;
}

.problem__title {
	font-size: clamp(1.7rem, 4vw, 2.8rem);
	font-weight: var(--fw-extrabold);
	color: var(--color-white);
	line-height: 1.2;
	margin-block-end: 0.8rem;
}

.problem__title-em {
	color: var(--color-primary);
	font-style: normal;
}

.problem__subtitle {
	font-size: var(--fs-md);
	color: var(--color-gray-400);
	max-width: 520px;
	margin-inline: auto;
	line-height: 1.7;
}

/* Grid */
.problem-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
}

@media (max-width: 768px) {
	.problem-grid {
		grid-template-columns: 1fr;
	}
}

/* Glass cards */
.problem-card {
	position: relative;
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-xl);
	padding: 2rem;
	display: flex;
	align-items: flex-start;
	gap: 1.3rem;
	overflow: hidden;
	transition: transform var(--duration-normal) var(--ease-out),
	            border-color var(--duration-normal) var(--ease-out),
	            box-shadow var(--duration-normal) var(--ease-out);
}

.problem-card:hover {
	transform: translateY(-4px);
	border-color: rgba(255, 255, 255, 0.14);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

/* Accent glow line at bottom */
.problem-card__accent {
	position: absolute;
	bottom: 0;
	left: 10%;
	right: 10%;
	height: 2px;
	border-radius: 2px;
	opacity: 0;
	transition: opacity var(--duration-normal) var(--ease-out);
}

.problem-card:hover .problem-card__accent {
	opacity: 1;
}

.problem-card:nth-child(1) .problem-card__accent { background: linear-gradient(90deg, transparent, #ef4444, transparent); }
.problem-card:nth-child(2) .problem-card__accent { background: linear-gradient(90deg, transparent, #f59e0b, transparent); }
.problem-card:nth-child(3) .problem-card__accent { background: linear-gradient(90deg, transparent, #3b82f6, transparent); }
.problem-card:nth-child(4) .problem-card__accent { background: linear-gradient(90deg, transparent, #22c55e, transparent); }

/* Card hover tinted glow per card */
.problem-card:nth-child(1):hover { box-shadow: 0 20px 50px rgba(239, 68, 68, 0.1), 0 0 0 1px rgba(239, 68, 68, 0.1); }
.problem-card:nth-child(2):hover { box-shadow: 0 20px 50px rgba(245, 158, 11, 0.1), 0 0 0 1px rgba(245, 158, 11, 0.1); }
.problem-card:nth-child(3):hover { box-shadow: 0 20px 50px rgba(59, 130, 246, 0.1), 0 0 0 1px rgba(59, 130, 246, 0.1); }
.problem-card:nth-child(4):hover { box-shadow: 0 20px 50px rgba(34, 197, 94, 0.1), 0 0 0 1px rgba(34, 197, 94, 0.1); }

/* Glass Icon Containers */
.problem-card__icon {
	width: 52px;
	height: 52px;
	min-width: 52px;
	border-radius: var(--radius-lg);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	flex-shrink: 0;
	margin-top: 0.2rem;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.12);
	transition: all var(--duration-normal) var(--ease-out);
}

.problem-card:hover .problem-card__icon {
	transform: scale(1.08);
}

.problem-card__icon i {
	font-size: 1.35rem;
	position: relative;
	z-index: 1;
	line-height: 1;
}

.problem-card__icon--red {
	background: rgba(239, 68, 68, 0.15);
	border-color: rgba(239, 68, 68, 0.25);
	color: #f87171;
	box-shadow: 0 4px 16px rgba(239, 68, 68, 0.15);
}

.problem-card__icon--amber {
	background: rgba(245, 158, 11, 0.15);
	border-color: rgba(245, 158, 11, 0.25);
	color: #fbbf24;
	box-shadow: 0 4px 16px rgba(245, 158, 11, 0.15);
}

.problem-card__icon--blue {
	background: rgba(59, 130, 246, 0.15);
	border-color: rgba(59, 130, 246, 0.25);
	color: #60a5fa;
	box-shadow: 0 4px 16px rgba(59, 130, 246, 0.15);
}

.problem-card__icon--green {
	background: rgba(34, 197, 94, 0.15);
	border-color: rgba(34, 197, 94, 0.25);
	color: #4ade80;
	box-shadow: 0 4px 16px rgba(34, 197, 94, 0.15);
}

/* Content */
.problem-card__content {
	flex: 1;
	min-width: 0;
}


.problem-card__title {
	font-size: var(--fs-md);
	font-weight: var(--fw-bold);
	color: var(--color-white);
	margin-block-end: 0.5rem;
}

.problem-card__text {
	font-size: var(--fs-sm);
	color: var(--color-gray-400);
	line-height: 1.7;
}

/* ── Section: Features ── */
.features-section {
	background: var(--color-white);
}

.features-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--space-2xl);
}

/* ── Section: How It Works ── */
.how-it-works-section {
	background: var(--color-light);
}

.steps-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: var(--space-xl);
	position: relative;
}

/* Connecting line between steps */
.steps-grid::before {
	content: '';
	position: absolute;
	top: 28px;
	inset-inline: 15%;
	height: 2px;
	background: linear-gradient(to left, var(--color-gray-200), var(--color-primary), var(--color-gray-200));
	z-index: 0;
}

@media (max-width: 768px) {
	.steps-grid::before {
		display: none;
	}
}

.step-card {
	position: relative;
	z-index: 1;
}

/* ── Section: Testimonials ── */
.testimonials-section {
	background: var(--color-white);
}

.testimonials-slider {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	gap: var(--space-xl);
	padding-bottom: var(--space-xl);
	margin-inline: calc(var(--container-padding) * -1);
	padding-inline: var(--container-padding);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.testimonials-slider::-webkit-scrollbar {
    display: none;
}

/* ── Section: Pricing ── */
.pricing-section {
	background: var(--color-light);
}

.pricing-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-xl);
	align-items: stretch;
	max-width: 1100px;
	margin-inline: auto;
}

@media (max-width: 1024px) {
	.pricing-grid {
		grid-template-columns: 1fr;
		max-width: 420px;
		gap: var(--space-2xl);
	}
}

/* ── Section: FAQ ── */
.faq-section {
	background: var(--color-white);
}

.faq-list {
	max-width: var(--container-narrow);
	margin-inline: auto;
}

/* ── Section: Final CTA ── */
.final-cta {
	background: var(--gradient-hero);
	position: relative;
	overflow: hidden;
}

.final-cta::before {
	content: '';
	position: absolute;
	top: 50%;
	inset-inline-start: 50%;
	transform: translate(-50%, -50%);
	width: 800px;
	height: 800px;
	background: var(--gradient-glow);
	border-radius: 50%;
	filter: blur(100px);
	pointer-events: none;
}

.final-cta__inner {
	position: relative;
	z-index: 1;
	text-align: center;
	max-width: 700px;
	margin-inline: auto;
}

.final-cta__title {
	font-size: var(--fs-2xl);
	font-weight: var(--fw-extrabold);
	color: var(--color-white);
	margin-block-end: var(--space-lg);
}

.final-cta__text {
	font-size: var(--fs-md);
	color: var(--color-gray-400);
	margin-block-end: var(--space-2xl);
}

.final-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-md);
}

.final-cta .hero__btn-secondary {
	background: var(--color-white);
	color: var(--color-secondary);
}

.final-cta .hero__btn-secondary:hover {
	background: var(--color-white);
	color: var(--color-secondary);
}

/* ── Footer ── */
.site-footer {
	background: var(--color-light);
	border-top: 1px solid var(--color-gray-200);
	padding-block: var(--space-3xl) var(--space-xl);
}

.footer-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--space-lg);
	margin-block-end: var(--space-2xl);
}

.footer-logo {
	justify-content: center;
}

.footer-description {
	font-size: var(--fs-sm);
	color: var(--color-gray-500);
	line-height: 1.8;
	max-width: 50ch;
}

.footer-social {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.footer-social__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.04);
	border: 1px solid var(--color-gray-200);
	color: var(--color-gray-500);
	font-size: 1.1rem;
	transition: all var(--duration-fast) var(--ease-out);
}

.footer-social__link:hover {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}

/* Footer bottom bar */
.footer-bottom {
	border-top: 1px solid var(--color-gray-200);
	padding-block-start: var(--space-lg);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	font-size: var(--fs-xs);
	color: var(--color-gray-400);
}

.footer-bottom p {
	margin: 0;
}

.footer-bottom__credit {
	color: var(--color-primary);
	text-decoration: none;
	font-weight: var(--fw-semibold);
	transition: color var(--duration-fast) var(--ease-out);
}

.footer-bottom__credit:hover {
	color: var(--color-primary-dark);
}

@media (max-width: 640px) {
	.footer-bottom {
		flex-direction: column;
		text-align: center;
	}
}

/* ── Page header / Breadcrumbs ── */
.page-header {
	margin-block-end: var(--space-3xl);
	padding-block-start: var(--space-5xl);
}

.page-title {
	font-size: var(--fs-2xl);
	font-weight: var(--fw-extrabold);
}

.breadcrumbs {
	margin-block-end: var(--space-lg);
}

.breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	font-size: var(--fs-sm);
}

.breadcrumbs__item::after {
	content: '/';
	margin-inline-start: var(--space-sm);
	color: var(--color-gray-400);
}

.breadcrumbs__item:last-child::after {
	display: none;
}

.breadcrumbs__item--current {
	color: var(--color-gray-500);
}

/* ── Pagination ── */
.pagination,
.nav-links {
	display: flex;
	justify-content: center;
	gap: var(--space-sm);
	margin-block-start: var(--space-3xl);
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: var(--space-sm);
	border-radius: var(--radius-md);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	background: var(--color-white);
	border: 1px solid var(--color-gray-200);
	transition: all var(--duration-fast) var(--ease-out);
}

.page-numbers:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.page-numbers.current {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
}

/* ── Single post ── */
.single-post__header {
	margin-block-end: var(--space-2xl);
	padding-block-start: var(--space-5xl);
}

.single-post__title {
	font-size: var(--fs-2xl);
	font-weight: var(--fw-extrabold);
	margin-block-end: var(--space-md);
}

.single-post__meta {
	display: flex;
	gap: var(--space-lg);
	font-size: var(--fs-sm);
	color: var(--color-gray-500);
}

.single-post__thumbnail {
	margin-block-end: var(--space-2xl);
	border-radius: var(--radius-xl);
	overflow: hidden;
}

.single-post__footer {
	margin-block-start: var(--space-3xl);
	padding-block-start: var(--space-xl);
	border-top: 1px solid var(--color-gray-200);
}

.single-post__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	align-items: center;
}

.tag-link {
	display: inline-block;
	padding: var(--space-xs) var(--space-md);
	background: var(--color-gray-100);
	border-radius: var(--radius-full);
	font-size: var(--fs-xs);
	transition: all var(--duration-fast) var(--ease-out);
}

.tag-link:hover {
	background: var(--color-primary-light);
	color: var(--color-primary-dark);
}

/* ── Post Navigation ── */
.post-navigation {
	margin-block-start: var(--space-3xl);
}

.post-navigation .nav-links {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-xl);
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
	padding: var(--space-lg);
	background: var(--color-gray-100);
	border-radius: var(--radius-lg);
	transition: background var(--duration-fast) var(--ease-out);
}

.post-navigation .nav-previous:hover,
.post-navigation .nav-next:hover {
	background: var(--color-primary-light);
}

.nav-subtitle {
	display: block;
	font-size: var(--fs-xs);
	color: var(--color-gray-500);
	margin-block-end: var(--space-xs);
}

.nav-title {
	font-weight: var(--fw-semibold);
}