/*    20. RESPONSIVE — MOBILE (max-width: 768px)
   ------------------------------------------- */
@media (max-width: 768px) {
	:root {
		--text-6xl: 3.5rem;
		--text-5xl: 2.8rem;
		--text-4xl: 2.2rem;
		--text-3xl: 1.8rem;
	}

	.container {
		padding: 0 var(--space-lg);
	}

	.section {
		padding: var(--space-3xl) 0;
	}

	/* Mobile Navigation — toggle in header-top, desktop elements hidden */
	/* Hide desktop elements on mobile — use slide panel instead */
	#primary-menu,
	.btn-nav-cta,
	.header-btn {
		display: none;
	}

	.menu-toggle {
		display: flex;
	}

	/* Content must clear the fixed header on mobile (header ~61-72px) */
	.site-main {
		padding-top: 96px;
	}

	/* ===== Slide Panel — mobile drawer (smooth, GPU transform) ===== */
	body.menu-open {
		overflow: hidden;
	}

	.slide-panel-wrapper {
		--panel-stagger-1: 0.06s;
		--panel-stagger-2: 0.12s;

		display: flex;
		position: fixed;
		top: 0;
		right: 0;
		width: 85vw;
		max-width: 360px;
		height: 100vh;
		height: 100dvh;
		flex-direction: column;
		background: linear-gradient(180deg, var(--color-bg-secondary) 0%, #0f0520 100%);
		padding: 0;
		transform: translateX(100%);
		transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1), visibility 0.45s;
		visibility: hidden;
		z-index: var(--z-overlay);
		align-items: stretch;
		box-shadow: -24px 0 60px rgba(0, 0, 0, 0.55);
		will-change: transform;
	}

	.slide-panel-wrapper.open {
		transform: translateX(0);
		visibility: visible;
	}

	/* Gradient accent bar at the very top */
	.slide-panel-accent {
		height: 4px;
		flex-shrink: 0;
		background: linear-gradient(90deg, var(--color-accent), var(--color-purple), var(--color-accent-light));
		background-size: 200% 100%;
		animation: slide-accent-flow 5s linear infinite;
	}

	@keyframes slide-accent-flow {
		from { background-position: 0% 0; }
		to   { background-position: 200% 0; }
	}

	/* Panel header — brand + tagline + close */
	.slide-panel-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-sm);
		padding: var(--space-sm) var(--space-lg);
		border-bottom: 1px solid rgba(255, 255, 255, 0.06);
		background: rgba(26, 10, 46, 0.45);
		flex-shrink: 0;
	}

	.slide-brand-block {
		display: flex;
		flex-direction: column;
		min-width: 0;
	}

	.slide-brand {
		font-family: var(--font-heading);
		font-size: var(--text-xl);
		font-weight: 800;
		line-height: 1.1;
		color: var(--color-text-primary);
	}

	.slide-brand-tag {
		font-size: var(--text-xs);
		color: var(--color-text-muted);
		letter-spacing: 0.3px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.slide-close {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 38px;
		height: 38px;
		background: rgba(255, 255, 255, 0.06);
		border: 1px solid rgba(255, 255, 255, 0.1);
		border-radius: 50%;
		color: var(--color-text-primary);
		font-size: 24px;
		font-weight: 300;
		line-height: 1;
		cursor: pointer;
		transition: all var(--transition-fast);
		position: relative;
		z-index: 2;
		flex-shrink: 0;
	}

	.slide-close:hover {
		background: rgba(255, 210, 30, 0.15);
		border-color: var(--color-accent);
		color: var(--color-accent);
		transform: rotate(90deg) scale(1.05);
	}

	/* User / guest card */
	.slide-user-card {
		display: flex;
		align-items: center;
		gap: var(--space-sm);
		margin: var(--space-sm) var(--space-lg) var(--space-xs);
		padding: var(--space-xs) var(--space-md);
		background: linear-gradient(135deg, rgba(255, 210, 30, 0.10), rgba(59, 91, 219, 0.08));
		border: 1px solid var(--color-glass-border);
		border-radius: var(--radius-md);
		flex-shrink: 0;
		opacity: 0;
		transform: translateY(14px);
		transition: opacity 0.4s ease var(--panel-stagger-1), transform 0.4s cubic-bezier(0.32, 0.72, 0, 1) var(--panel-stagger-1);
	}

	.slide-panel-wrapper.open .slide-user-card {
		opacity: 1;
		transform: translateY(0);
	}

	.slide-user-avatar {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border-radius: 50%;
		overflow: hidden;
		flex-shrink: 0;
		background: linear-gradient(135deg, var(--color-accent), var(--color-purple));
		border: 2px solid rgba(255, 255, 255, 0.14);
		color: var(--color-text-primary);
	}

	.slide-avatar-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.slide-user-meta {
		display: flex;
		flex-direction: column;
		min-width: 0;
	}

	.slide-user-name {
		font-weight: 700;
		font-size: var(--text-sm);
		color: var(--color-text-primary);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.slide-user-role {
		font-size: var(--text-xs);
		color: var(--color-text-muted);
	}

	.slide-user-status {
		margin-left: auto;
		display: inline-flex;
	}

	.slide-status-dot {
		display: inline-block;
		width: 9px;
		height: 9px;
		border-radius: 50%;
		background: #e6b800;
		box-shadow: 0 0 8px rgba(34, 197, 94, 0.7);
		animation: slide-status-pulse 2s ease-out infinite;
	}

	@keyframes slide-status-pulse {
		0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
		50%      { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
	}

	/* Scrollable menu area */
	.slide-menu-wrap {
		flex: 1 1 auto;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: var(--space-sm);
		padding-top: var(--space-xs);
	}

	.slide-menu-label {
		display: block;
		padding: var(--space-sm) var(--space-xl) var(--space-xs);
		font-family: var(--font-mono);
		font-size: var(--text-xs);
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 3px;
		color: var(--color-accent);
		opacity: 0;
		transform: translateX(14px);
		transition: opacity 0.4s ease var(--panel-stagger-2), transform 0.4s cubic-bezier(0.32, 0.72, 0, 1) var(--panel-stagger-2);
	}

	.slide-panel-wrapper.open .slide-menu-label {
		opacity: 1;
		transform: translateX(0);
	}

	/* Menu list — full vertical list */
	#slide-menu {
		display: flex;
		flex-direction: column;
		list-style: none;
		padding: 0;
		margin: 0;
		gap: 2px;
	}

	#slide-menu .menu-item {
		opacity: 0;
		transform: translateX(24px);
		transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
	}

	.slide-panel-wrapper.open #slide-menu .menu-item {
		opacity: 1;
		transform: translateX(0);
	}

	.slide-panel-wrapper.open #slide-menu .menu-item:nth-child(1)  { transition-delay: 0.06s; }
	.slide-panel-wrapper.open #slide-menu .menu-item:nth-child(2)  { transition-delay: 0.09s; }
	.slide-panel-wrapper.open #slide-menu .menu-item:nth-child(3)  { transition-delay: 0.12s; }
	.slide-panel-wrapper.open #slide-menu .menu-item:nth-child(4)  { transition-delay: 0.15s; }
	.slide-panel-wrapper.open #slide-menu .menu-item:nth-child(5)  { transition-delay: 0.18s; }
	.slide-panel-wrapper.open #slide-menu .menu-item:nth-child(6)  { transition-delay: 0.21s; }
	.slide-panel-wrapper.open #slide-menu .menu-item:nth-child(7)  { transition-delay: 0.24s; }
	.slide-panel-wrapper.open #slide-menu .menu-item:nth-child(8)  { transition-delay: 0.27s; }
	.slide-panel-wrapper.open #slide-menu .menu-item:nth-child(9)  { transition-delay: 0.30s; }
	.slide-panel-wrapper.open #slide-menu .menu-item:nth-child(10) { transition-delay: 0.33s; }
	.slide-panel-wrapper.open #slide-menu .menu-item:nth-child(11) { transition-delay: 0.36s; }
	.slide-panel-wrapper.open #slide-menu .menu-item:nth-child(12) { transition-delay: 0.39s; }

	#slide-menu .menu-item a {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-sm);
		margin: 1px var(--space-sm);
		padding: 11px var(--space-md);
		font-size: var(--text-base);
		font-weight: 500;
		color: var(--color-text-secondary);
		border-radius: var(--radius-md);
		transition: color var(--transition-fast), background var(--transition-fast), padding-left var(--transition-fast);
	}

	#slide-menu .menu-item a::after {
		content: '→';
		font-size: var(--text-base);
		color: var(--color-accent);
		opacity: 0;
		transform: translateX(-6px);
		transition: opacity var(--transition-fast), transform var(--transition-fast);
	}

	#slide-menu .menu-item a:hover,
	#slide-menu .menu-item.current-menu-item a {
		color: var(--color-accent);
		background: linear-gradient(90deg, rgba(255, 210, 30, 0.12), rgba(255, 210, 30, 0.02));
		padding-left: calc(var(--space-md) + 8px);
	}

	#slide-menu .menu-item a:hover::after,
	#slide-menu .menu-item.current-menu-item a::after {
		opacity: 1;
		transform: translateX(0);
	}

	#slide-menu .menu-item.current-menu-item a::before {
		content: '';
		position: absolute;
		left: 0;
		top: 22%;
		height: 56%;
		width: 3px;
		background: linear-gradient(180deg, var(--color-accent), var(--color-purple));
		border-radius: 0 3px 3px 0;
	}

	/* Slide footer — CTAs + social + copyright */
	.slide-footer {
		display: flex;
		flex-direction: column;
		gap: var(--space-xs);
		padding: var(--space-sm) var(--space-lg) calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
		border-top: 1px solid rgba(255, 255, 255, 0.06);
		background: rgba(8, 3, 16, 0.35);
		flex-shrink: 0;
	}

	.slide-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		padding: 10px 18px;
		font-size: var(--text-sm);
		font-weight: 600;
		border-radius: var(--radius-md);
		transition: all var(--transition-fast);
		text-decoration: none;
	}

	.slide-btn-primary {
		background: var(--color-accent);
		color: var(--color-bg-dark);
	}

	.slide-btn-primary:hover {
		background: var(--color-accent-light);
		color: var(--color-bg-dark);
		transform: translateY(-1px);
		box-shadow: var(--shadow-accent);
	}

	.slide-btn-ghost {
		background: rgba(255, 255, 255, 0.06);
		color: var(--color-text-primary);
		border: 1px solid rgba(255, 255, 255, 0.1);
	}

	.slide-btn-ghost:hover {
		background: rgba(255, 255, 255, 0.1);
		color: var(--color-text-primary);
		transform: translateY(-1px);
	}

	.slide-social {
		display: flex;
		justify-content: center;
		gap: var(--space-sm);
		margin-top: var(--space-xs);
	}

	.slide-social-link {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 38px;
		height: 38px;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.06);
		border: 1px solid rgba(255, 255, 255, 0.1);
		color: var(--color-text-secondary);
		transition: all var(--transition-fast);
	}

	.slide-social-link:hover {
		background: rgba(255, 210, 30, 0.15);
		border-color: var(--color-accent);
		color: var(--color-accent);
		transform: translateY(-2px);
	}

	.slide-copyright {
		text-align: center;
		font-size: var(--text-xs);
		color: var(--color-text-muted);
		margin-top: var(--space-xs);
	}

	.btn-nav-cta {
		display: none;
	}

	/* Mobile menu overlay — dimmed + blurred backdrop */
	.slide-overlay {
		display: block;
		position: fixed;
		inset: 0;
		z-index: calc(var(--z-overlay) - 1);
		background: rgba(8, 3, 16, 0.62);
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--transition-base), visibility var(--transition-base);
		pointer-events: none;
	}

	.slide-overlay.active {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	/* Hero */
	.hero-actions {
		flex-direction: column;
		align-items: center;
	}

	.hero-stats {
		gap: var(--space-xl);
		flex-wrap: wrap;
	}

	.stat-number {
		font-size: var(--text-2xl);
	}

	.hero-scroll-indicator {
		display: none;
	}

	/* Services */
	.services-grid {
		grid-template-columns: 1fr;
	}

	/* Prototype */
	.prototype-grid,
	.prototype-grid-full {
		grid-template-columns: 1fr;
	}

	/* About */
	.about-story-grid {
		grid-template-columns: 1fr;
	}

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

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

	/* Footer */
	.footer-container {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.footer-desc {
		max-width: none;
	}

	/* 404 */
	.error-404-title {
		font-size: 6rem;
	}

	/* Process */
	.process-step {
		flex-direction: column;
		gap: var(--space-md);
	}

	/* Pricing */
	.pricing-grid {
		grid-template-columns: 1fr;
	}

	/* FAQ */
	.faq-question {
		font-size: var(--text-sm);
		padding: var(--space-md) var(--space-lg);
	}

	/* Portal CTA */
	.portal-cta-wrap {
		grid-template-columns: 1fr;
		gap: 40px;
		text-align: center;
	}

	.portal-cta-features {
		grid-template-columns: 1fr 1fr;
		text-align: left;
		max-width: 400px;
		margin-left: auto;
		margin-right: auto;
	}

	.portal-cta-actions {
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}

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

	/* Page Hero */
	.page-hero {
		padding: 120px 0 var(--space-2xl);
	}

	/* CTA */
	.cta-title {
		font-size: var(--text-3xl);
	}

	.cta-actions {
		flex-direction: column;
		align-items: center;
	}

	/* Hero mobile fix — prevent 100vh overscroll on iOS Safari */
	.hero-section {
		min-height: 0;
		min-height: calc(100vh - 60px);
		min-height: calc(100dvh - 60px);
	}

	/* Mobile: stop the full-background scale/rotate and blurred-orb float.
	   On phones these run constantly (blur + transform repaints), which makes
	   the whole hero look like it's shifting/jittering and hammers the GPU. */
	.hero-gradient-overlay,
	.hero-orb {
		animation: none;
	}

	/* All inputs: prevent iOS zoom on focus.
	   body prefix gives higher specificity than the base form styles, so the
	   16px rule still wins without !important — keeps the theme easy to override. */
	body input[type="text"],
	body input[type="email"],
	body input[type="tel"],
	body input[type="url"],
	body input[type="password"],
	body input[type="search"],
	body input[type="number"],
	body textarea,
	body select,
	body .bw-form-input,
	body .contact-form input,
	body .contact-form select,
	body .contact-form textarea {
		font-size: 16px;
	}

	/* Filters */
	.prototype-filters {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: var(--space-sm);
		-webkit-overflow-scrolling: touch;
	}

	.filter-btn {
		white-space: nowrap;
		flex-shrink: 0;
	}
}