/* ─── Responsive: tablet, mobile, small phone ─── */

body {
	padding-left: env(safe-area-inset-left, 0px);
	padding-right: env(safe-area-inset-right, 0px);
}

/* Tablet landscape / small laptop (≤1024px) */
@media (max-width: 1024px) {
	.hero .container {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.hero-content {
		text-align: center;
	}

	.hero-lead,
	.hero-trust {
		margin-inline: auto;
	}

	.hero-actions {
		justify-content: center;
	}

	.hero-trust {
		justify-content: center;
		width: 100%;
		max-width: 28rem;
	}

	.hero-showcase {
		max-width: 560px;
		margin-inline: auto;
		width: 100%;
	}

	.hero-float-card--code {
		left: 0;
	}

	.hero-float-card--cloud {
		right: 0;
	}

	.services-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}

	.services-header .section-lead {
		max-width: none;
	}

	.services-bento {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
	}

	.service-card,
	.service-card--featured,
	.services-bento .service-card:nth-child(2),
	.services-bento .service-card:nth-child(3),
	.services-bento .service-card:nth-child(4) {
		grid-column: 1;
		grid-row: auto;
	}

	.service-card--featured .service-card-inner,
	.service-card--wide .service-card-inner--wide {
		grid-template-columns: 1fr;
	}

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

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

	.process-step::after {
		display: none;
	}

	.about-layout {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.team-culture-grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

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

	.team-grid--lead {
		grid-template-columns: 1fr;
	}

	.team-card--lead {
		grid-template-columns: 1fr;
	}

	.team-card--lead .team-card-photo {
		aspect-ratio: 4 / 5;
		max-height: 420px;
	}
}

/* Tablet portrait (≤768px) */
@media (max-width: 768px) {
	:root {
		--header-h: 68px;
		--section-pad: 4rem;
	}

	.container {
		width: min(100% - 1.5rem, var(--max));
	}

	.site-header {
		background: rgba(250, 251, 253, 0.94);
		backdrop-filter: blur(16px) saturate(1.4);
		border-bottom: 1px solid var(--border);
	}

	.site-header .container {
		gap: 0.75rem;
		padding-inline: max(0px, env(safe-area-inset-left, 0px))
			max(0px, env(safe-area-inset-right, 0px));
	}

	.nav-desktop {
		display: none;
	}

	.nav-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
	}

	.nav-mobile {
		padding: 1rem 1.25rem max(1.5rem, env(safe-area-inset-bottom, 0px));
		padding-left: max(1.25rem, env(safe-area-inset-left, 0px));
		padding-right: max(1.25rem, env(safe-area-inset-right, 0px));
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.nav-mobile a {
		min-height: 48px;
		display: flex;
		align-items: center;
	}

	.nav-mobile .btn-pill {
		justify-content: center;
		margin-top: 0.5rem;
	}

	.brand {
		gap: 0.6rem;
		min-width: 0;
		flex: 1;
	}

	.brand-logo {
		width: 38px;
		height: 38px;
	}

	.brand-name {
		font-size: 0.82rem;
		letter-spacing: 0.03em;
	}

	/* Hero */
	.hero {
		min-height: auto;
		padding: calc(var(--header-h) + 1.75rem) 0 3rem;
	}

	.hero h1 {
		font-size: clamp(2rem, 8vw, 2.75rem);
	}

	.hero-lead {
		font-size: 1rem;
	}

	.hero-badge {
		margin-inline: auto;
	}

	.hero-showcase {
		order: -1;
		max-width: 100%;
	}

	.hero-showcase-frame {
		border-radius: 20px;
	}

	.hero-showcase-inner {
		border-radius: 18px;
		aspect-ratio: 4 / 3;
	}

	.hero-float-card {
		display: none;
	}

	.hero-trust {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 0.75rem;
		padding-top: 1.5rem;
		text-align: center;
	}

	.hero-trust-item strong {
		font-size: 1.1rem;
	}

	.hero-trust-item span {
		font-size: 0.72rem;
		line-height: 1.35;
	}

	.hero-actions {
		width: 100%;
		max-width: 22rem;
		margin-inline: auto;
	}

	.btn-primary,
	.btn-ghost {
		min-height: 48px;
		justify-content: center;
	}

	/* Marquee */
	.marquee {
		padding: 1rem 0;
	}

	.marquee-track span {
		font-size: 0.75rem;
	}

	/* Sections */
	.services,
	.about,
	.process,
	.team-section,
	.team-culture,
	.team-values {
		padding-block: var(--section-pad);
	}

	.section-title {
		font-size: clamp(1.65rem, 6vw, 2.1rem);
	}

	.section-lead {
		font-size: 1rem;
	}

	.service-card {
		padding: 0;
	}

	.service-body {
		padding: 1.15rem 1.25rem 1.35rem;
	}

	.service-card:not(.service-card--featured):not(.service-card--wide) .service-visual {
		height: 160px;
		margin: 0.75rem 0.75rem 0;
	}

	.service-card--featured {
		padding: 0;
	}

	.service-card--featured .service-card-inner {
		padding: 1.25rem;
		gap: 1rem;
	}

	.service-card--wide .service-card-inner--wide {
		padding: 1.25rem;
	}

	.about-quote {
		padding: 1.25rem 1.35rem;
		font-size: 0.95rem;
	}

	.process-grid {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.cta {
		padding-bottom: var(--section-pad);
	}

	.cta-panel {
		padding: 2.5rem 1.5rem;
		border-radius: 20px;
	}

	.cta-actions {
		flex-direction: column;
		width: 100%;
		max-width: 20rem;
		margin-inline: auto;
	}

	.cta-actions .btn-primary,
	.cta-actions .btn-ghost {
		width: 100%;
	}

	/* Footer */
	.footer-top {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 1.5rem;
	}

	.footer-links {
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.75rem 1.5rem;
	}

	.footer-tagline {
		flex-wrap: wrap;
		justify-content: center;
		padding-inline: 0.5rem;
		font-size: 0.95rem;
		line-height: 1.5;
	}

	.site-footer {
		padding-bottom: max(2rem, env(safe-area-inset-bottom, 0px));
	}

	/* Team page */
	.page-hero {
		padding: 2.5rem 0 2rem;
	}

	.page-hero h1 {
		font-size: clamp(1.85rem, 7vw, 2.5rem);
	}

	.page-hero-lead {
		font-size: 1rem;
	}

	.team-section-head {
		margin-bottom: 2rem;
	}

	.team-grid {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}

	.team-stats {
		grid-template-columns: 1fr 1fr;
	}

	.team-card h3 {
		font-size: 1.05rem;
		padding: 1rem 1.15rem 0;
		word-break: break-word;
	}

	.team-card--lead h3 {
		font-size: 1.2rem;
	}

	.team-role,
	.team-bio {
		padding-inline: 1.15rem;
	}

	.team-card--lead .team-card-body {
		padding: 1.35rem;
	}

	.team-card--lead .team-role,
	.team-card--lead .team-bio,
	.team-card--lead h3 {
		padding-inline: 0;
	}

	.team-card:not(.team-card--lead) .team-card-photo--portrait {
		aspect-ratio: 4 / 5;
		max-height: 360px;
	}

	.team-values-list li {
		flex-direction: column;
		align-items: flex-start;
		padding: 1.25rem;
	}

	.page-teams .cta {
		padding-bottom: var(--section-pad);
	}
}

/* Phone (≤480px) */
@media (max-width: 480px) {
	:root {
		--header-h: 60px;
	}

	.brand-tagline {
		display: none;
	}

	.brand-name {
		font-size: 0.75rem;
	}

	.hero h1 {
		font-size: 1.85rem;
		line-height: 1.12;
	}

	.hero-trust {
		grid-template-columns: 1fr;
		max-width: 14rem;
		gap: 1rem;
	}

	.hero-actions {
		flex-direction: column;
		max-width: none;
	}

	.hero-actions .btn-primary,
	.hero-actions .btn-ghost {
		width: 100%;
	}

	.services-header {
		margin-bottom: 2rem;
	}

	.service-num {
		font-size: 2rem;
	}

	.team-stats {
		grid-template-columns: 1fr;
	}

	.team-card--lead .team-card-photo {
		max-height: none;
	}

	.footer-links {
		flex-direction: column;
		align-items: center;
		gap: 0.65rem;
	}

	.footer-links a {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
}

/* Reduce motion on touch / coarse pointer hover effects */
@media (hover: none) {
	.service-card:hover,
	.team-card:hover,
	.about-feature:hover,
	.team-stats li:hover {
		transform: none;
	}

	.service-card:hover .service-visual img,
	.team-card:hover .team-card-photo--img img {
		transform: none;
	}
}