/* ==================== */
/* MOBILE-FIRST RESPONSIVE CSS */
/* Медиа-запросы для планшетов и десктопов */
/* ==================== */

/* Планшеты (769px и выше) */
@media (min-width: 769px) {

	/* Увеличиваем отступы контейнера */
	.container {
		padding: 0 20px;
	}

	/* Увеличиваем размеры заголовков для планшетов */
	h1 {
		font-size: 2.5rem;
	}

	h2 {
		font-size: 2rem;
	}

	h3 {
		font-size: 1.6rem;
	}

	/* Увеличиваем базовый размер текста */
	p {
		font-size: 1.05rem;
	}

	.hero-subtitle {
		font-size: 1.2rem;
	}

	/* Скрываем кнопку меню на планшетах и десктопах */
	.menu-toggle {
		display: none;
	}

	/* Показываем навигацию как горизонтальное меню */
	.main-nav {
		position: static;
		width: auto;
		height: auto;
		background: transparent;
		padding: 0;
	}

	.nav-list {
		flex-direction: row;
		gap: 1rem;
		padding: 0;
	}

	.nav-item {
		border-bottom: none;
	}

	.nav-link {
		padding: 0.5rem 1rem;
		font-size: 1rem;
	}

	/* Hero секция для планшетов */
	.hero {
		padding: 140px 0 80px;
		margin-top: 70px;
	}

	.hero h1 {
		font-size: 2.8rem;
	}

	.hero-subtitle {
		max-width: 80%;
	}

	.calculator-hero {
		padding: 2rem;
		max-width: 450px;
	}

	/* Увеличиваем паддинги секций */
	section {
		padding: 60px 0;
	}

	.section-title {
		font-size: 2rem;
		margin-bottom: 2.5rem;
	}

	/* Сетки для планшетов - 2 колонки */
	.steps-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.75rem;
	}

	.benefits-grid,
	.testimonials-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.75rem;
	}

	.blog-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.75rem;
	}

	/* Увеличиваем карточки */
	.step-card,
	.benefit-card,
	.testimonial-card,
	.result-card {
		padding: 2rem;
	}

	.step-icon {
		font-size: 3rem;
	}

	/* Секция "Обо мне" для планшетов */
	.about-content {
		grid-template-columns: 1fr 2fr;
		gap: 2.5rem;
		text-align: left;
	}

	.about-photo-placeholder {
		height: 350px;
	}

	.credentials li {
		text-align: left;
	}

	/* Увеличиваем аватары */
	.author-avatar {
		width: 55px;
		height: 55px;
		font-size: 1.1rem;
	}

	/* Форма рассылки для планшетов */
	.newsletter-form {
		flex-direction: row;
		max-width: 500px;
	}

	/* Увеличиваем бейджи */
	.number-badge {
		padding: 10px 24px;
		font-size: 1.2rem;
	}

	/* Апсейл для планшетов */
	.upsell {
		padding: 2.5rem;
	}

	/* Футер для планшетов */
	.footer-content {
		grid-template-columns: repeat(2, 1fr);
		text-align: left;
	}

	/* Декоративные элементы для планшетов */
	.numerical-symbols::before {
		font-size: 3rem;
		top: 8%;
		left: 3%;
	}

	.section-divider {
		width: 80px;
		margin: 1.75rem auto 2.5rem;
	}

	.section-divider::before {
		left: -35px;
	}

	.section-divider::after {
		right: -35px;
	}
}

/* Десктоп (1025px и выше) */
@media (min-width: 1025px) {

	/* Увеличиваем максимальную ширину контейнера */
	.container {
		max-width: 1200px;
	}

	/* Увеличиваем размеры заголовков для десктопа */
	h1 {
		font-size: 3.5rem;
	}

	h2 {
		font-size: 2.5rem;
	}

	h3 {
		font-size: 1.75rem;
	}

	h4 {
		font-size: 1.5rem;
	}

	/* Увеличиваем базовый размер текста */
	p {
		font-size: 1.125rem;
		line-height: 1.7;
	}

	.hero-subtitle {
		font-size: 1.4rem;
	}

	/* Увеличиваем логотип */
	.logo {
		font-size: 1.75rem;
	}

	/* Увеличиваем отступы навигации */
	.nav-list {
		gap: 1.5rem;
	}

	/* Hero секция для десктопа */
	.hero {
		padding: 160px 0 100px;
		margin-top: 70px;
	}

	.hero h1 {
		font-size: 3.5rem;
		margin-bottom: 1.5rem;
	}

	.hero-subtitle {
		max-width: 600px;
		margin-bottom: 3rem;
	}

	.calculator-hero {
		padding: 2.5rem;
		max-width: 500px;
	}

	/* Увеличиваем паддинги секций */
	section {
		padding: 80px 0;
	}

	.section-title {
		font-size: 2.5rem;
		margin-bottom: 3rem;
	}

	/* Сетки для десктопа - 3+ колонки */
	.steps-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 2rem;
	}

	.benefits-grid,
	.testimonials-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 2rem;
	}

	.blog-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 2rem;
	}

	/* Анимации ховеров для десктопа */
	.step-card:hover {
		transform: translateY(-8px);
		box-shadow: var(--shadow-xl);
	}

	.step-card:hover .step-icon {
		transform: scale(1.1) rotate(5deg);
	}

	.benefit-card:hover {
		transform: translateX(8px);
		border-left-color: var(--accent-color);
	}

	.testimonial-card:hover {
		transform: translateY(-5px);
		box-shadow: var(--shadow-lg);
	}

	.blog-card:hover {
		transform: translateY(-8px);
		box-shadow: var(--shadow-xl);
	}

	.blog-card:hover .blog-image-placeholder {
		transform: scale(1.05);
	}

	.result-card:hover {
		transform: translateY(-5px);
		box-shadow: var(--shadow-lg);
	}

	/* Увеличиваем карточки */
	.step-card,
	.benefit-card,
	.testimonial-card {
		padding: 2.5rem 2rem;
	}

	.result-card {
		padding: 2.5rem;
	}

	.step-icon {
		font-size: 3.5rem;
	}

	/* Секция "Обо мне" для десктопа */
	.about-content {
		gap: 3rem;
	}

	.about-photo-placeholder {
		height: 400px;
	}

	/* Увеличиваем аватары */
	.author-avatar {
		width: 60px;
		height: 60px;
		font-size: 1.2rem;
	}

	/* Увеличиваем изображения блога */
	.blog-image-placeholder {
		height: 220px;
	}

	/* Увеличиваем бейджи */
	.number-badge {
		padding: 10px 24px;
		font-size: 1.25rem;
	}

	/* Апсейл для десктопа */
	.upsell {
		padding: 3.5rem;
		margin-top: 3rem;
	}

	.upsell::before {
		width: 300px;
		height: 300px;
	}

	/* Футер для десктопа */
	.footer-content {
		grid-template-columns: repeat(3, 1fr);
		gap: 3rem;
		margin-bottom: 3rem;
	}

	footer {
		padding: 60px 0 40px;
	}

	/* Декоративные элементы для десктопа */
	.numerical-symbols::before {
		font-size: 4rem;
		top: 10%;
		left: 5%;
	}

	.section-divider {
		width: 100px;
		margin: 2rem auto 3rem;
	}

	.section-divider::before {
		left: -40px;
	}

	.section-divider::after {
		right: -40px;
	}
}

/* Большие десктопы (1201px и выше) */
@media (min-width: 1201px) {
	.container {
		max-width: 1300px;
	}

	/* Дополнительные стили для очень больших экранов */
	.hero h1 {
		font-size: 4rem;
	}
}

/* ==================== */
/* СПЕЦИАЛЬНЫЕ МЕДИА-ЗАПРОСЫ */
/* ==================== */

/* Высокие экраны (минимальная высота 800px) */
@media (min-height: 800px) and (max-width: 768px) {
	.hero {
		padding: 140px 0 80px;
		min-height: 70vh;
		display: flex;
		align-items: center;
	}
}

/* Портретные планшеты */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {

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

	.hero h1 {
		font-size: 2.5rem;
	}
}

/* Ландшафтные планшеты */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
	.hero {
		padding: 120px 0 80px;
	}

	.about-content {
		grid-template-columns: 1fr 1.5fr;
	}
}

/* Устройства с поддержкой ховера (не сенсорные) */
@media (hover: hover) and (pointer: fine) {

	/* Включение ховер-эффектов только для устройств с курсором */
	.nav-link:hover {
		color: var(--accent-color);
		background: rgba(255, 255, 255, 0.1);
	}

	.read-more:hover {
		color: var(--secondary-color);
		padding-right: 2rem;
	}

	.read-more:hover::after {
		transform: translateY(-50%) translateX(3px);
	}

	.newsletter-alternative a:hover {
		color: var(--white);
	}

	.number-badge:hover::before {
		left: 100%;
	}
}

/* Сенсорные устройства */
@media (hover: none) and (pointer: coarse) {

	/* Оптимизация для сенсорных устройств */
	.btn {
		min-height: 44px;
		/* Минимальный размер для удобного тапа */
	}

	.nav-link {
		padding: 12px 16px;
		/* Увеличиваем область тапа */
	}

	input,
	select,
	textarea {
		font-size: 16px;
		/* Предотвращает масштабирование в iOS */
	}
}

/* Темная тема (опционально) */
@media (prefers-color-scheme: dark) {
	/* Автоматическое переключение для пользователей с темной темой */
	/* Можно добавить темную тему позже */
}

/* Печать */
@media print {

	/* Стили для печати */
	.menu-toggle,
	.nav-overlay,
	.newsletter,
	.upsell {
		display: none !important;
	}

	.hero {
		background: white !important;
		color: black !important;
	}

	a {
		color: black !important;
		text-decoration: underline !important;
	}
}

/* ==================== */
/* МОДАЛЬНЫЕ ОКНА И ФОРМЫ ОПЛАТЫ */
/* ==================== */

.client-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.modal-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(5px);
}

.modal-content {
	position: relative;
	background: var(--white);
	border-radius: var(--border-radius-lg);
	padding: 2rem;
	max-width: 500px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: var(--shadow-xl);
	animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
	from {
		opacity: 0;
		transform: translateY(-50px) scale(0.9);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.modal-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	background: none;
	border: none;
	font-size: 1.5rem;
	cursor: pointer;
	color: var(--text-light);
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: var(--transition);
}

.modal-close:hover {
	background: var(--background-light);
	color: var(--text-dark);
}

.client-form .input-group {
	margin-bottom: 1.5rem;
}

.client-form label {
	display: block;
	margin-bottom: 0.5rem;
	font-weight: 600;
	color: var(--text-dark);
}

.client-form input {
	width: 100%;
	padding: 12px 16px;
	border: 2px solid var(--background-light);
	border-radius: var(--border-radius);
	font-size: 16px;
	/* Предотвращает zoom в iOS */
	transition: var(--transition);
}

.client-form input:focus {
	outline: none;
	border-color: var(--primary-color);
	box-shadow: 0 0 0 3px rgba(93, 74, 237, 0.1);
}

/* Индикатор загрузки оплаты */
.payment-loader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 10001;
	color: var(--white);
}

.loader-spinner {
	width: 50px;
	height: 50px;
	border: 3px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	border-top-color: var(--accent-color);
	animation: spin 1s ease-in-out infinite;
	margin-bottom: 1rem;
}

/* Адаптация для мобильных */
@media (max-width: 768px) {
	.client-modal {
		padding: 10px;
	}

	.modal-content {
		padding: 1.5rem;
		margin: 10px;
	}

	.client-form input {
		padding: 14px 16px;
		/* Увеличиваем для удобства touch */
	}

	.modal-close {
		top: 0.5rem;
		right: 0.5rem;
		width: 35px;
		height: 35px;
	}
}

/* Улучшения для touch-устройств */
@media (hover: none) and (pointer: coarse) {
	.client-form input {
		font-size: 16px;
		/* Предотвращает zoom в iOS */
		min-height: 44px;
		/* Минимальный размер для touch */
	}

	.btn {
		min-height: 50px;
		/* Удобнее для нажатия пальцем */
	}
}