/* ========================
   PREMIUM RESPONSIVE DESIGN
   Mobile-First Approach
   ======================== */

/* ========================
   Large Desktop (1400px+)
   ======================== */
@media (min-width: 1400px) {
	.container {
		max-width: 1320px;
	}

	.hero-title {
		font-size: 6rem;
	}
}

/* ========================
   Laptop (992px - 1199px)
   ======================== */
@media (max-width: 1199px) {
	:root {
		--space-3xl: 80px;
		--space-2xl: 56px;
	}

	.hero-content-wrapper {
		gap: var(--space-2xl);
	}

	.features-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.services-grid-premium {
		grid-template-columns: repeat(2, 1fr);
	}

	.footer-grid-premium {
		grid-template-columns: 2fr 1fr 1fr;
	}
}

/* ========================
   Tablet (768px - 991px)
   ======================== */
@media (max-width: 991px) {
	:root {
		--space-3xl: 64px;
		--space-2xl: 48px;
		--space-xl: 40px;
	}

	/* Hide topbar on tablet */
	.header-topbar {
		display: none;
	}

	/* Adjust navigation */
	.nav-menu {
		gap: var(--space-md);
	}

	.nav-link {
		font-size: 0.9375rem;
	}

	/* Hero adjustments */
	.premium-hero {
		padding-top: 100px;
		min-height: auto;
		padding-bottom: var(--space-3xl);
	}

	.hero-content-wrapper {
		grid-template-columns: 1fr;
		gap: var(--space-2xl);
	}

	.hero-text-content {
		padding-right: 0;
		text-align: center;
	}

	.hero-cta-group {
		justify-content: center;
	}

	.hero-stats {
		justify-content: center;
	}

	.hero-visual-content {
		max-width: 500px;
		margin: 0 auto;
	}

	.hero-card-stack {
		height: 400px;
	}

	.card-1,
	.card-2,
	.card-3 {
		width: 280px !important;
	}

	/* Features grid */
	.features-grid {
		grid-template-columns: 1fr;
	}

	.feature-card-premium {
		padding: var(--space-lg);
	}

	/* Services grid */
	.services-grid-premium {
		grid-template-columns: 1fr;
	}

	/* Footer */
	.footer-grid-premium {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-xl);
	}

	.footer-brand {
		grid-column: 1 / -1;
		max-width: 100%;
		text-align: center;
	}

	.footer-social-premium {
		justify-content: center;
	}
}

/* ========================
   Mobile (576px - 767px)
   ======================== */
@media (max-width: 767px) {
	:root {
		--space-3xl: 48px;
		--space-2xl: 40px;
		--space-xl: 32px;
		--space-lg: 24px;
	}

	/* Typography adjustments */
	h1 {
		font-size: clamp(2.5rem, 10vw, 3.5rem);
	}

	h2 {
		font-size: clamp(2rem, 8vw, 2.5rem);
	}

	h3 {
		font-size: clamp(1.5rem, 6vw, 1.75rem);
	}

	p {
		font-size: 1rem;
	}

	/* Navigation - Mobile Menu */
	.mobile-nav-toggle {
		display: flex;
	}

	.nav-menu-container {
		position: fixed;
		top: 0;
		left: -100%;
		width: 280px;
		height: 100vh;
		background: var(--white-pure);
		box-shadow: var(--shadow-strong);
		transition: var(--transition-smooth);
		z-index: 9999;
		padding: 80px 24px 24px;
	}

	.nav-menu-container.active {
		left: 0;
	}

	.nav-menu {
		flex-direction: column;
		gap: 0;
	}

	.nav-link {
		display: block;
		padding: 16px 0;
		border-bottom: 1px solid rgba(10, 22, 40, 0.05);
	}

	.header-cta {
		margin-left: auto;
	}

	.header-cta .btn-primary {
		padding: 10px 24px;
		font-size: 0.875rem;
	}

	/* Hero adjustments */
	.premium-hero {
		padding-top: 80px;
		padding-bottom: var(--space-2xl);
	}

	.hero-badge {
		font-size: 0.75rem;
		padding: 8px 16px;
	}

	.hero-title {
		font-size: 2.5rem;
		margin-bottom: var(--space-md);
	}

	.hero-description {
		font-size: 1.0625rem;
		margin-bottom: var(--space-lg);
	}

	.hero-cta-group {
		flex-direction: column;
		gap: var(--space-sm);
	}

	.btn-premium-primary,
	.btn-premium-secondary {
		width: 100%;
		justify-content: center;
		padding: 16px 32px;
		font-size: 1rem;
	}

	.hero-stats {
		flex-direction: column;
		gap: var(--space-md);
		align-items: center;
	}

	.hero-stat {
		text-align: center;
	}

	.hero-stat-number {
		font-size: 2rem;
	}

	.hero-visual-content {
		display: none;
	}

	/* Section headers */
	.section-header-premium {
		margin-bottom: var(--space-xl);
	}

	.section-title-premium {
		font-size: 2rem;
	}

	.section-description-premium {
		font-size: 1rem;
	}

	/* Feature cards */
	.feature-card-premium {
		padding: var(--space-lg);
	}

	.feature-icon-premium {
		width: 64px;
		height: 64px;
		font-size: 1.75rem;
	}

	.feature-title-premium {
		font-size: 1.25rem;
	}

	/* Service cards */
	.service-card-premium {
		padding: var(--space-lg);
	}

	.service-icon-premium {
		width: 70px;
		height: 70px;
		font-size: 2rem;
	}

	.service-title-premium {
		font-size: 1.25rem;
	}

	/* Footer */
	.footer-grid-premium {
		grid-template-columns: 1fr;
		gap: var(--space-xl);
	}

	.footer-brand {
		text-align: left;
	}

	.footer-social-premium {
		justify-content: flex-start;
	}
}

/* ========================
   Small Mobile (< 576px)
   ======================== */
@media (max-width: 575px) {
	:root {
		--space-3xl: 40px;
		--space-2xl: 32px;
		--space-xl: 24px;
		--space-lg: 20px;
	}

	.container {
		padding: 0 16px;
	}

	/* Hero */
	.hero-title {
		font-size: 2.25rem;
	}

	.hero-stat-number {
		font-size: 1.75rem;
	}

	.hero-stat-label {
		font-size: 0.875rem;
	}

	/* Cards */
	.feature-card-premium,
	.service-card-premium {
		padding: var(--space-md);
	}

	.feature-icon-premium,
	.service-icon-premium {
		width: 56px;
		height: 56px;
		font-size: 1.5rem;
	}

	/* Footer */
	.premium-footer {
		padding-top: var(--space-2xl);
	}

	.footer-main-premium {
		padding-bottom: var(--space-xl);
	}

	.footer-social-premium a {
		width: 40px;
		height: 40px;
		font-size: 1rem;
	}
}

/* ========================
   Print Styles
   ======================== */
@media print {
	.premium-header,
	.header-topbar,
	.hero-visual-content,
	.premium-footer,
	.mobile-nav-toggle,
	.hero-cta-group {
		display: none;
	}

	body {
		background: white;
		color: black;
	}

	.premium-hero,
	.premium-services {
		background: white;
		color: black;
	}
}

/* ========================
   Reduced Motion
   ======================== */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	body::before {
		animation: none;
	}

	.floating-card {
		animation: none;
	}

	.hero-diagonal-accent {
		animation: none;
	}
}

/* ========================
   Dark Mode Support
   ======================== */
@media (prefers-color-scheme: dark) {
	/* Already dark theme, but can add overrides if needed */
}

/* ========================
   High Contrast Mode
   ======================== */
@media (prefers-contrast: high) {
	:root {
		--gold-primary: #FFD700;
		--midnight-navy: #000000;
	}

	.btn-premium-primary,
	.feature-icon-premium,
	.service-icon-premium {
		border: 2px solid currentColor;
	}
}