/* ==========================================================================
   Responsive Breakpoints
   Desktop-first overrides — base styles above already target desktop.
   ========================================================================== */

/* ---- Large tablets / small laptops (≤1024px) -------------------------- */
@media (max-width: 1024px) {
	.hero__inner {
		grid-template-columns: 1fr;
		gap: var(--space-6);
		text-align: center;
	}

	.hero__tags {
		justify-content: center;
	}

	.hero__rule {
		margin-inline: auto;
	}

	.hero__visual {
		order: -1;
		width: min(60%, 380px);
	}

	.service-card {
		flex-basis: calc((100% - var(--space-4)) / 2);
	}

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

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

	.ai-section__inner,
	.about__inner,
	.contact__inner {
		grid-template-columns: 1fr;
	}

	/* Single column: chips would overflow the stage's side gutters */
	.ai-stage { width: min(100%, 360px); }
	.ai-chip--points { inset-inline-start: -6%; }
	.ai-chip--treatment { inset-inline-end: -5%; }

	.about__inner .about__portrait {
		justify-self: center;
		width: 60%;
	}

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

/* ---- Tablets / large phones (≤768px) ----------------------------------- */
@media (max-width: 768px) {
	:root {
		--space-8: 4.5rem;
		--space-9: 6rem;
	}

	.nav__menu {
		position: fixed;
		inset: 0;
		z-index: -1;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(13, 13, 13, 0.97);
		backdrop-filter: blur(20px);
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--dur-mid) var(--ease-soft), visibility var(--dur-mid) var(--ease-soft);
	}

	.nav__menu.is-open {
		opacity: 1;
		visibility: visible;
		z-index: 90;
	}

	.nav__list {
		flex-direction: column;
		gap: var(--space-5);
	}

	.nav__link {
		font-size: 1.25rem;
	}

	.nav__burger {
		display: flex;
	}

	.nav__actions .btn--sm {
		display: none;
	}

	body.nav-open .nav__burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
	body.nav-open .nav__burger span:nth-child(2) { opacity: 0; }
	body.nav-open .nav__burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

	.service-card {
		flex-basis: calc((100% - var(--space-4)) / 2);
	}

	.gallery__grid,
	.benefits__grid {
		grid-template-columns: 1fr 1fr;
	}

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

/* ---- Phones (≤560px) ---------------------------------------------------- */
@media (max-width: 560px) {
	.service-card {
		flex-basis: 100%;
	}

	.gallery__grid,
	.benefits__grid {
		grid-template-columns: 1fr;
	}

	.service-card--featured {
		min-height: 300px;
	}

	.hero__visual {
		width: min(82%, 320px);
	}

	.hero__tags {
		gap: var(--space-1);
	}

	.hero__deco-frame {
		display: none;
	}

	.about__stats {
		gap: var(--space-4);
		flex-wrap: wrap;
	}

	.phone-mockup {
		width: min(100%, 240px);
	}

	.ai-steps {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-3) var(--space-4);
	}

	/* keep the floating chips fully inside the viewport */
	.ai-chip--points { inset-inline-start: 3%; top: 4%; }
	.ai-chip--treatment { inset-inline-end: 3%; }
	.ai-chip--natural { bottom: 10px; }

	.ai-section__actions {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-3);
	}

	.modal__panel {
		padding: var(--space-5) var(--space-4);
	}

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