/* ===========================
   АДАПТИВНЫЕ СТИЛИ (MEDIA.CSS)
   ===========================*/
@media (min-width: 991px) {
	.burger-btn {
		display:none;
	}
	.nav-menu > .menu-item-has-children > a::after {
  	content: '';
  	display: inline-block;
  	vertical-align: middle;
  	width: 10px;
  	height: 5px;
  	border-left: 5px solid transparent;
  	border-right: 5px solid transparent;
  	border-top: 5px solid var(--color-text-light);
  	position: absolute;
  	right: 0;
  	top: 50%;
  	transform: translateY(-50%) rotate(0deg);
  	transition: border-top-color var(--transition-fast), transform var(--transition-fast);
	}
	.nav-menu .menu-item-has-children a {
  	padding-right: 22px;
	}
	.nav-menu .menu-item-has-children:hover a::after {
  	border-top-color: var(--color-primary);
  	transform: translateY(-50%) rotate(180deg);
	}
	.nav-menu > .menu-item > a::before {
  	content: '';
  	position: absolute;
  	bottom: 0;
  	left: 0;
  	width: 0;
  	height: 4px;
  	background-color: var(--color-primary);
  	transition: width var(--transition-fast);
	}
	.nav-menu > .menu-item > a:hover::before, .nav-menu > .menu-item-has-children:has(.sub-menu:hover) > a::before {
  	width: 100%;
	}
	.nav-menu .sub-menu {
	position: absolute;
  	top: 100%;
  	left: 0;
  	min-width: 180px;
  	background: #fff;
  	box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  	border-radius: 8px;
  	padding: 8px 0;
  	z-index: 100;
	}
	.nav-menu .menu-item:hover .sub-menu {
  	display: block;
	}
}
/* =====================================
   БОЛЬШИЕ ДЕСКТОПЫ (1440px и выше)
   ===================================== */
@media (min-width: 1440px) {
  .container {
    max-width: 1200px;
  }
  
  .hero__title {
    font-size: 100px;
  }
  
  .hero__title-accent {
    font-size: 84px;
    font-style: italic;
  }
}

/* =====================================
   ДЕСКТОПЫ (1200px - 1439px)
   ===================================== */
@media (max-width: 1439px) {
	.stat-card__value {
		font-size:20px;
	}
	.contact-item.location {
		display:none;
	}
  .container {
    max-width: 1024px;
  }
	.nav-menu .menu-item {
		margin-right:0;
	}
	.hero__title-accent {
		font-size:75px;
	}
	.hero__title {
        font-size: 80px;
    }
	.hero__element {
		left: 74.48%;
	}
	.consultation__info h2 {
    	margin-bottom: 0;
	}
}

/* =====================================
   ПЛАНШЕТЫ (768px - 1199px)
   ===================================== */
@media (max-width: 1199px) {
	.about__text {
		margin-right:0;
	}
  /* ===== ОБЩИЕ СТИЛИ ===== */
  .container {
    max-width: 100%;
    padding: 0 15px;
  }
  
  /* ===== ПЕРЕМЕННЫЕ ДЛЯ ПЛАНШЕТОВ ===== */
  :root {
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 20px;
    --font-size-xl: 28px;
    --font-size-2xl: 32px;
    --font-size-3xl: 56px;
    --font-size-4xl: 72px;
    
    --spacing-xs: 6px;
    --spacing-sm: 10px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-2xl: 24px;
    --spacing-3xl: 32px;
    --spacing-4xl: 40px;
    --spacing-5xl: 56px;
    --spacing-6xl: 80px;
  }
  
	.header__contact-actions {
		margin:20px 0 16px 0;
	}
  /* ===== ШАПКА ===== */
  .header__top-content {
    flex-direction: column;
    align-items: center;
  }
  
  .header__contact-info {
    order: 3;
    justify-content: center;
  }
  
  .header__logo {
    order: 1;
  }
  
  .header__contact-actions {
    order: 2;
  }
  
  .nav-menu {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .nav-menu__link {
    font-size: 14px;
    padding: var(--spacing-sm);
  }
  
  /* ===== HERO ===== */
  .hero {
    height: 800px;
  }
  
  .hero__background {
    height: 900px;
  }
  
  .hero__title {
    font-size: 56px;
    line-height: 1.2;
  }
  
  .hero__title-accent {
    font-size: 48px;
  }
  
  .hero__content {
    padding-top: 16px;
  }
  
  .hero__info {
    max-width: 100%;
    align-items: center;
  }
  
  .hero__element {
    display: none; /* Скрываем декоративный элемент на планшетах */
  }
  
  /* ===== УСЛУГИ ===== */
  .services__grid {
    flex-direction: column;
    align-items: center;
  }
  
  .services__divider {
    display: none; /* Убираем разделитель */
  }
  
  .service-card {
    width: 100%;
    max-width: 450px;
	  margin-right:0;
	  margin-bottom:30px;
  }
  .services__grid .service-card:last-child {
	margin-bottom:0px;
}
  .service-card__image {
    width: 100%;
  }
	.consultation__info h2 {
        margin-bottom: 40px;
    }
  /* ===== ПРЕИМУЩЕСТВА ===== */
  .features__grid {
    flex-wrap: wrap;
  }
  
  .feature-card, .features__grid .feature-card:last-child {
    flex: 1 1 45%;
	  margin:8px;
  }
  
  /* ===== ПРАЙСЫ ===== */
  .pricing__filters {
    justify-content: center;
  }
  
  .price-table {
    font-size: 12px;
  }
  
  .price-table__cell {
    padding: var(--spacing-sm);
  }
  
  /* ===== TIMELINE ===== */
  
  .timeline__step--left .timeline__step-content {
    text-align: left;
}
  /* ===== КАРТА ГЛУБИН ===== */
  
  /* ===== О НАС ===== */
  .about__content {
    flex-direction: column;
  }
  
  .about__stats {
    justify-content: center;
  }
  
  .stat-card {
    min-width: 150px;
  }
  
  .gallery-slider {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
  }
	.about__gallery {
		margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
	}
	.about__gallery.left {
		margin-top: 0px;
		margin-bottom: 20px;
	}
	.about__text.right {
		margin-left:0;
	}
  /* ===== ФУТЕР ===== */
  .footer__content {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .footer__company,
  .footer__services,
  .footer__pages,
  .footer__contact-actions {
    flex: 1 1 45%;
    min-width: 250px;
  }
  
  /* ===== ФОРМА КОНТАКТОВ ===== */
  .contact-form__content {
    flex-direction: column;
    gap: var(--spacing-xl);
  }
	.hero__decoration {
		left: 0px;
        top: -5px;
        width: 72px;
	}
	.all-pages .hero__content {
        padding-top: 26px;
    }
	.all-pages .hero__decoration {
		width:53px;
	}
	.all-pages .hero__text {
    	margin-top: 40px;
	}
}
@media (max-width: 991px) {
	.nav-menu {
		display:none;
		position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background: #fff;
        bottom:0;
		z-index: 1000;
		text-align: center;
		padding-top:50px;
	}
	.nav-menu.open, .nav-menu .sub-menu.open {
		display:block;
	}
	.header__nav {
		text-align:right;
	}
	.nav-menu .menu-item {
		width:100%;
	}
	.nav-menu .menu-item a {
		color:#000;
	}
	.menu-close {
		display:block;
		font-size: 30px;
    	position: absolute;
    	right: 15px;
    	cursor: pointer;
    	top: 0px;
	}
	.nav-menu .sub-menu li a {
		font-weight:400;
	}
	.nav-menu .sub-menu {
		background:#9991;
	}
	.nav-menu .arrow {
		width: 45px;
    	display: block;
    	height: 45px;
    	position: absolute;
    	top: 0;
    	right: 0;
    	background: #9995;
		cursor:pointer;
	}
	.nav-menu .arrow:after {
		content: '';
    	border: 8px solid transparent;
    	border-top: 8px solid #696969;
    	display: inline-block;
    	margin-top: 20px;
		cursor:pointer;
	}
	.depth-map__filters {
		width: 100%;
    	flex-wrap: wrap;
    	flex-direction: unset;
    	margin-bottom: 12px;
	}
	.filter-btn {
		margin:4px;
	}
	.depth-map__content {
		flex-direction: column-reverse;
	}
	.depth-map__map {
		width:100%;
		flex: none;
        height: 453px;
        margin-right: 0;
	}
	.all-pages .hero__title {
		font-size: 35px;
	}
	.hero__background.hero-pages {
		height:700px;
	}
	.form-block {
		flex-direction: column;
	}
	.inputs-block {
		width:100%;
	}
	.submit-block {
		margin-top: 16px;
	}
	.all-pages .hero {
    	height: 495px;
	}
}
/* =====================================
   МОБИЛЬНЫЕ УСТРОЙСТВА (320px - 767px)
   ===================================== */
@media (max-width: 767px) {
	.timeline__step--left {
		padding-right:10px;
	}
	.timeline__step--right {
    padding-left: 10px;
}
	.nav-menu .arrow {
		width:39px;
		height:39px;
	}
	.nav-menu .arrow:after {
		margin-top:17px;
	}
	.header__contact-actions {
        margin: 0;
    }
	.hero__decoration {
		width:53px;
	}
	.hero__info {
		margin-top:15px;
	}
  /* ===== КРИТИЧЕСКИ ВАЖНЫЕ ПРАВИЛА ДЛЯ МОБИЛЬНЫХ ===== */
  html {
    overflow-x: hidden;
  }
	.timeline__dot {
		width: 12px;
        height: 12px;
	}
  .timeline__step--right .timeline__dot {
        left: -5.5px;
    }
	.timeline__step--left .timeline__dot {
        right: -6.5px;
    }
  body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
  }
  
  * {
    max-width: 100%;
    box-sizing: border-box;
  }
  
  /* ===== ПЕРЕМЕННЫЕ ДЛЯ МОБИЛЬНЫХ ===== */
  :root {
    --font-size-xs: 11px;
    --font-size-sm: 13px;
    --font-size-md: 15px;
    --font-size-lg: 18px;
    --font-size-xl: 22px;
    --font-size-2xl: 26px;
    --font-size-3xl: 36px;
    --font-size-4xl: 48px;
    
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 10px;
    --spacing-lg: 12px;
    --spacing-xl: 16px;
    --spacing-2xl: 20px;
    --spacing-3xl: 24px;
    --spacing-4xl: 32px;
    --spacing-5xl: 40px;
    --spacing-6xl: 56px;
  }
  
  .container {
    padding: 0 10px;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
  }
  
  /* ===== ШАПКА ===== */
  .header__top {
    padding: var(--spacing-md) 0;
  }
  
  .header__top-content {
    flex-direction: column;
  }
  
  .header__contact-info {
    flex-direction: column;
    text-align: center;
  }
	.header__social-phone {
		margin-bottom: 16px;
    	margin-top: 20px;
	}
  .header__logo-text {
    align-items: center;
  }
  
  .header__contact-actions {
    flex-direction: column;
  }
  
  .header__social {
    justify-content: center;
  }
	.c-button {
		font-size:14px;
		padding:10px 32px;
	}
  .header__phone-section {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
  }
	.header__contact-info {
		display:none;
	}
  /* ===== МОБИЛЬНАЯ НАВИГАЦИЯ ===== */
  .header__nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    margin: 0;
  }
  
  .nav-menu__item {
    flex-shrink: 0;
    min-width: max-content;
  }
  
  .nav-menu__link {
    font-size: 12px;
    padding: 8px 12px;
    white-space: nowrap;
  }
  
  /* ===== HERO ===== */
  .hero {
    height: 600px;
  }
  
  .hero__background {
    height: 700px;
  }
  
  .hero__title, .hero__title-accent {
    font-size: 40px;
    line-height: 1.1;
  }
  
  .hero__promo-text {
    font-size:20px;
  }
	.hero__promo {
		padding: 10px 20px;
    	background-color: rgba(255, 255, 255, 0.1);
    	border-radius: 8px;
		margin-bottom: 24px;
	}
	.hero__cta {
		margin-top:32px;
	}
	.hero__description {
		font-size:16px;
	}
	.hero {
        height: auto;
        padding-bottom: 113px;
    }
  .hero__cta {
    width: 100%;
    max-width: 280px;
  }
  
  /* ===== УСЛУГИ ===== */
  .services {
    padding: var(--spacing-4xl) 0;
  }
  
  .service-card {
    width: 100%;
    max-width: 100%;
  }
  
  .service-card__image {
    height: 250px;
  }
  
  /* ===== КОНСУЛЬТАЦИЯ ===== */
  .consultation {
    padding: var(--spacing-4xl) 0;
  }
  
  .consultation__title {
    font-size: var(--font-size-xl);
    text-align: center;
  }
  
  .consultation__benefits-title {
    text-align: center;
  }
  
  .consultation__background {
    
  }
  
  /* ===== ПРЕИМУЩЕСТВА ===== */
  .features {
    padding: var(--spacing-4xl) 0;
  }
  
  .features__grid {
    flex-direction: column;
	  align-content: center;
  }
  
  .feature-card {
    flex: none;
    width: 100%;
    min-width: auto;
	  margin:6px;
  }
  
  /* ===== ПРАЙСЫ ===== */
  .pricing {
    padding: var(--spacing-4xl) 0;
  }
  
  .pricing__filters {
    flex-direction: column;
    align-items: stretch;
  }
  
  /* ===== АДАПТИВНАЯ ТАБЛИЦА ===== */
  .pricing__table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: 100%;
  }
  
  .price-table {
    min-width: 600px;
    width: 600px;
    font-size: 11px;
  }
  
  .price-table__cell {
    padding: 6px 4px;
    white-space: nowrap;
    font-size: 10px;
  }
  
  .price-table__cell:first-child {
    min-width: 120px;
    width: 120px;
  }
  
  /* ===== АДАПТИВНЫЕ ИЗОБРАЖЕНИЯ ===== */
  img {
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box;
  }
  
  /* ===== ФИКСАЦИЯ ПЕРЕПОЛНЕНИЯ ===== */
  .hero__background,
  .hero__overlay,
   {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
  }
	img.hero__bg-image, .hero__overlay-image {
		width:auto;
		height:100% !important;
	}
  .services__divider {
    display: none;
  }
  
  /* ===== ИСПРАВЛЕНИЕ ШИРИНЫ ЭЛЕМЕНТОВ ===== */
  .header__top-content,
  .header__contact-info,
  .header__logo,
  .header__contact-actions {
    width: 100%;
    max-width: 100%;
  }
  
  /* ===== TIMELINE ===== */
  .timeline {
    padding: var(--spacing-4xl) 0;
  }
  
  .timeline__illustration, .modal .consultation__background {
    display: none;
  }
  
  /* ===== КАРТА ГЛУБИН ===== */
  .depth-map {
    padding: var(--spacing-4xl) 0;
  }
  
  .depth-map__map {
    height: 300px;
  }
  
  .depth-map__placeholder-text {
    font-size: var(--font-size-md);
  }
  
  /* ===== О НАС ===== */
  .about {
    padding: var(--spacing-4xl) 0;
  }
  
  .about__stats {
    flex-direction: column;
    align-items: center;
  }
  
  .stat-card {
    margin-right:0;
	  margin-bottom:10px;
	}
  
  /* ===== FAQ ===== */
  .faq {
    padding: var(--spacing-4xl) 0;
  }
  
  .faq__filters {
    flex-direction: column;
  }
  
  .faq__question {
    padding: var(--spacing-lg) var(--spacing-sm);
  }
  
  .faq__question-text {
    font-size: var(--font-size-md);
  }
  
  /* ===== РЕГИОНЫ ===== */
  .regions {
    padding: var(--spacing-4xl) 0;
  }
  
  /* ===== ФОРМА КОНТАКТОВ ===== */
  .contact-form {
    padding: var(--spacing-3xl) 0;
  }
  
  .contact-form__title {
    font-size: 24px;
	  margin-bottom:30px;
  }
	.form-input {
		padding:12px 24px;
		font-size:16px;
	}
	.checkbox__text {
		font-size:14px;
	}
  /* ===== ФУТЕР ===== */:
	.contact-form__description {
		font-size: 16px;
	}
  .footer__company,
  .footer__contact-actions {
    width: 100%;
    flex: none;
    min-width: auto;
  }
	.phone-info {
		margin-right:0;
		align-items: center;
	}
	.footer__contact-actions {
		align-items: center;
	}
  .footer__nav {
    flex-direction: column;
    gap: var(--spacing-md);
  }
	.header__logo {
		justify-content: center;
	}
	.footer__services, .footer__pages {
		width:auto;
		min-width:unset;
	}
	.all-pages .hero__decoration {
        top: 0;
        bottom: auto;
    }
	.inputs-block {
		flex-direction: column;
	}
	.inputs-input {
		margin-bottom:16px;
	}
	.sogl {
		margin-top:0;
	}
	.all-pages .hero__title {
        font-size: 32px;
		line-height: 40px;
    }
	.hero__background.hero-pages {
        height: 731px;
    }
	h1, .all-pages h2.section-header__title {
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 30px;
    }
	.content-page .regions__tags {
    margin: 40px 0 60px;
    }
	h2 {
    font-size: 20px;
    line-height: 24px;
    margin-top: 30px;
    }
	.feature-card, #post-contacts .feature-card {
		height:auto;
	}
	.contacts-card__subtitle {
    	text-align: unset;
	}
	.contacts-card__title {
		margin-top: 0;
		font-size: 20px;
		text-align:unset;
	}
	.feature-card {
		justify-content: flex-start;
		flex-direction: row;
	}
	.feature-card__icon {
		width: 56px;
		height:56px;
		margin-bottom: 0;
		flex: none;
        margin-right: 24px;
	}
	.feature-card {
		padding:16px;
	}
	.feature-card__title {
		text-align: unset;
	}
	.flex-404 {
		flex-direction: column;
	}
	.flex-404-item.left {
    	margin-right: 0;
    	margin-bottom: 30px;
	}
	.to-main {
		margin-top:30px;
	}
	.consultation__details {
		align-items: center;
    	flex-direction: column;
	}
	.consultation__form .inputs-input, .contact-form__form .inputs-input, .modal .inputs-input {
		margin-bottom:0;
	}
	.consultation__background {
		top: auto;
    	bottom: 0;
	}
	.consultation__benefits {
		margin-right: 0;
    	margin-bottom: 30px;
	}
	.modal-content {
		padding:25px;
	}
	.modal-title {
    font-size: 24px;
    line-height: 24px;
    margin-bottom: 30px;
    }
	.modal-body {
    margin-top: 30px;
    }
	.modal-text {
    font-size: 14px;
    line-height: 20px;
    }
	.all-pages .hero {
		height:auto;
	}
}

/* =====================================
   МАЛЕНЬКИЕ МОБИЛЬНЫЕ (до 479px)
   ===================================== */
@media (max-width: 479px) {
  .container {
    padding: 0 8px;
  }
  .hero__background.hero-pages {
        height: 851px;
    }
  /* ===== УМЕНЬШЕННЫЕ РАЗМЕРЫ ===== */
  :root {
    --font-size-xs: 10px;
    --font-size-sm: 12px;
    --font-size-md: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 32px;
    --font-size-4xl: 40px;
  }
  
  .service-card__image {
    height: 200px;
  }
  
  .contact-item__text {
    font-size: 10px;
  }
  
  .header__company-name {
    font-size: var(--font-size-md);
  }
  
  .header__company-desc {
    font-size: 10px;
  }
	.inputs-input input {
		width: 100%;
    	margin-right: 0;
	}
	.hero__background.hero-pages {
        height: 784px;
    }
	.services {
        margin-top: 0;
    }
	.hero {
		padding-bottom:25px;
	}
	.galleryid-58 .gallery-item {
		width:100% !important;
	}
}

/* =====================================
   ОПТИМИЗАЦИЯ ДЛЯ РЕТИНА ДИСПЛЕЕВ
   ===================================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Стили для высокой плотности пикселей */
  img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimizeQuality;
  }
}

/* =====================================
   ЛАНДШАФТНАЯ ОРИЕНТАЦИЯ НА МОБИЛЬНЫХ
   ===================================== */
@media (max-width: 767px) and (orientation: landscape) {
  .hero {
    height: 500px;
  }
  
  .hero__background {
    height: 600px;
  }
}

/* =====================================
   ПРИНТ СТИЛИ
   ===================================== */
@media print {
  .hero__background,
  .timeline__background,
  .contact-form__background {
    display: none !important;
  }
  
  .header__nav,
  .hero__cta,
  .btn {
    display: none !important;
  }
  
  body {
    font-size: 12pt;
    line-height: 1.4;
    color: #000;
    background: #fff;
  }
  
  .container {
    max-width: none;
    padding: 0;
  }
}

/* =====================================
   АНИМАЦИИ ДЛЯ МОБИЛЬНЫХ (УПРОЩЕННЫЕ)
   ===================================== */
@media (max-width: 767px) {
  * {
    animation-duration: 0.1s !important;
    animation-delay: 0s !important;
    transition-duration: 0.1s !important;
  }
}

/* =====================================
   HOVER ЭФФЕКТЫ ТОЛЬКО ДЛЯ ДЕСКТОПОВ
   ===================================== */
@media (hover: hover) and (pointer: fine) {
  .service-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    transition: all var(--transition-normal);
  }
  
  .feature-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-normal);
  }
}

/* =====================================
   ТЕМНАЯ ТЕМА (если поддерживается)
   ===================================== */
@media (prefers-color-scheme: dark) {
  /* Стили для темной темы оставим на будущее */
}

/* =====================================
   УМЕНЬШЕННАЯ АНИМАЦИЯ
   ===================================== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}