/* ==========================================================================
   Responsive — Mobile-first breakpoints
   ========================================================================== */

/* Tablet and below */
@media (max-width: 1024px) {
	.grid--4 {
		grid-template-columns: repeat(2, 1fr);
	}

	.footer-grid {
		grid-template-columns: 1fr 1fr;
	}

	.solution__block {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}

	.solution__block:nth-child(even) {
		direction: ltr;
	}

	.hero__content {
		bottom: 5rem;
	}

	.pricing-card--featured {
		transform: none;
	}

	.pricing-card--featured:hover {
		transform: translateY(-4px);
	}

	.value-prop__inner,
	.customers__inner {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}

	.features__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.about__grid {
		grid-template-columns: 1fr;
	}

	.contact__grid {
		grid-template-columns: 1fr;
	}
}

/* Mobile */
@media (max-width: 768px) {
	:root {
		--container-padding: var(--space-4);
		--header-height: 64px;
	}

	.header-nav {
		display: none;
	}

	.mobile-menu-toggle {
		display: block;
	}

	/* Mobile menu open state */
	.site-header.menu-open .header-nav {
		display: block;
		position: fixed;
		top: var(--header-height);
		left: 0;
		right: 0;
		bottom: 0;
		background: var(--color-bg);
		padding: var(--space-8);
		z-index: var(--z-overlay);
		overflow-y: auto;
	}

	.site-header.menu-open .header-nav .nav-list {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-4);
	}

	.site-header.menu-open .header-nav .nav-list a {
		font-size: var(--text-lg);
		padding: var(--space-2) 0;
	}

	.mobile-menu-toggle .bar-1,
	.mobile-menu-toggle .bar-2,
	.mobile-menu-toggle .bar-3 {
		transition: transform var(--duration-normal) var(--ease-out),
		            opacity var(--duration-fast);
	}

	.site-header.menu-open .mobile-menu-toggle span:nth-child(1) {
		transform: rotate(45deg) translate(5px, 5px);
	}
	.site-header.menu-open .mobile-menu-toggle span:nth-child(2) {
		opacity: 0;
	}
	.site-header.menu-open .mobile-menu-toggle span:nth-child(3) {
		transform: rotate(-45deg) translate(5px, -5px);
	}

	.grid--2,
	.grid--3,
	.grid--4 {
		grid-template-columns: 1fr;
	}

	.footer-grid {
		grid-template-columns: 1fr;
	}

	.hero__content {
		bottom: 3rem;
	}

	.section {
		padding-block: var(--space-12);
	}

	.section--lg {
		padding-block: var(--space-20);
	}

	.section-title {
		font-size: var(--text-3xl);
	}

	.gradient-text {
		font-size: var(--text-3xl);
	}

	.features__grid,
	.pricing__grid,
	.about__grid {
		grid-template-columns: 1fr;
	}

	.pricing-toggle {
		flex-direction: column;
		border-radius: var(--radius-lg);
	}

	.pricing-toggle__btn {
		justify-content: center;
	}

	.customers__stats {
		gap: var(--space-8);
	}
}

/* Small mobile */
@media (max-width: 480px) {
	.btn--lg {
		width: 100%;
	}

	.pricing-card {
		padding: var(--space-6);
	}

	.stat__number {
		font-size: var(--text-4xl);
	}
}