/* 1. Обнуление */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

ul, ol {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    display: block;
}

/* 2. Переменные (Настраиваем "пульт управления" сайтом) */
:root {
    /* Шрифты */
    --font-main: 'Manrope', sans-serif;
    --font-accent: 'Acumin Variable Concept', sans-serif;

    /* Цвета (добавь свои из дизайна) */
    --color-dark: #1a1a1a;
    --color-white: #ffffff;
    --color-accent: #007bff; /* Пример */
    
    /* Переменные для иконок, если нужно будет менять размеры массово */
    --icon-size: 24px;
}

/* Подключаем Manrope */
@font-face {
    font-family: 'Manrope';
    src: url('assets/fonts/Manrope-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Manrope';
    src: url('assets/fonts/Manrope-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Manrope';
    src: url('assets/fonts/Manrope-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

/* Подключаем Acumin Variable */
@font-face {
    font-family: 'Acumin Variable Concept';
    src: url('assets/fonts/AcuminVariableConcept.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

/* Применяем базовый шрифт к сайту */
/*body {
    font-family: var(--font-main);
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-dark);
}*/
/*версия для фона с картинкой*/
body { 
    margin: 0; 
    padding: 0; 
    min-height: 100vh; 
    
    /* Установка фона */ 
    background-image: url('assets/images/back2.webp'); 
    
    /* Центрируем по горизонтали и прижимаем к верху */ 
    background-position: center top; 
    
    /* Запрещаем повторение */
    background-repeat: no-repeat; 
    
    /* КЛЮЧЕВОЕ ИСПРАВЛЕНИЕ: 
       Меняем fixed на scroll (или просто удаляем), чтобы фон уходил вверх при скролле.
       А также задаем ширину 1200px. Второе значение 'auto' сохранит пропорции высоты. */ 
    background-attachment: scroll; 
    background-size: 1200px auto; 
    
    /* Основной шрифт и цвет текста */ 
    font-family: var(--font-main); 
    color: var(--color-white); 
    
    /* Запасной цвет фона, соответствующий твоей теме */
    background-color: #000215; 
 }

/* Общие настройки контейнера */
.container {
    max-width: 1200px; /* Твой заданный размер */
    margin: 0 auto;
    padding: 0 20px;   /* Отступы, чтобы на 1200px контент не прилипал к краям */
}

/* Шапка */
.main-header {
    background-color: #000215; /* Темно-синий/черный фон как на скрине */
    padding: 25px 20px;
    color: var(--color-white);
	max-width: 1200px;
    margin: 0 auto;
}

.header-nav {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Расталкиваем Лого, Меню и Контакты */
}

/* Логотип */
.logo a {
    font-family: var(--font-accent);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

/* Навигация */
.nav-list {
    display: flex;
    gap: 40px; /* Расстояние между пунктами меню */
}

.nav-link {
    font-size: 18px;
    font-weight: 500;
    transition: color 0.3s ease;
    color: #fff;
}

.nav-link:hover {
    color: #9d87ed;
    opacity: 1;
	
}

/* Кнопки контактов */
.header-actions {
    display: flex;
    gap: 25px;
}

.btn-outline {
    display: inline-block;
    padding: 10px 25px;
    border: 2px solid #ffffff;
    border-radius: 50px;
    font-size: 18px;
    transition: all 0.3s ease;
}

.btn-outline:hover {
    border-color: transparent;
    /* Добавляем легкое свечение в тон градиента */
    box-shadow: 10px 10px 10px rgba(105, 31, 219, 0.4);
	background-color: rgba(26, 8, 89, 0.4);
}

.btn-outline:hover::before {
    opacity: 1; /* Проявляем градиент */

}

/* Планшетная версия */
@media (max-width: 900px) {
    .nav-list {
        gap: 20px; /* Уменьшаем расстояние между пунктами, чтобы влезло */
    }

    .header-actions .btn-outline:first-child {
        display: none; /* Скрываем почту */
    }
}
/* Мобильная версия */
@media (max-width: 450px) {
    .main-header {
        padding: 15px 0; /* Уменьшаем отступы хедера для экономии места */
    }

    .header-nav {
        flex-direction: column; /* Элементы встают друг под друга */
        gap: 15px;
    }

    /* Скрываем весь блок с кнопками (почта и телефон) */
    .header-actions {
        display: none;
    }

    .nav-list {
        gap: 40px;
        justify-content: center; /* Центрируем пункты меню */
        flex-wrap: wrap; /* Если названия длинные, они мягко перенесутся */
    }

    .nav-link {
        font-size: 16px; /* Уменьшаем шрифт, чтобы всё влезло в одну-две строки */
    }

    .logo a {
        font-size: 28px; /* Чуть меньше логотип */
    }
}

/* Основной фрейм Hero */
.hero {
    padding: 120px 0; /* Отступ сверху и снизу */
    min-height: 50vh; /* Занимает почти весь экран */
    display: flex;
    align-items: center; /* Центрируем по вертикали */
	max-width: 1200px;
    margin: 0 auto;
}

.hero-container {
    margin-left: auto;
}

.hero-content {
    max-width: 1000px; /* Ограничиваем ширину текста */
	margin-left: auto;
}

.hero-title {
    font-family: var(--font-accent);
    font-size: 82px; /* Крупный премиальный шрифт */
    font-weight: 500;
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: -2px;
    color: var(--color-white);
}



/* Планшет (1000px - 750px) */
@media (max-width: 1000px) {
    .hero {
        padding: 80px 30px;
    }
    
    .hero-title {
        font-size: 56px; /* Уменьшаем для средних экранов */
        letter-spacing: -1px;
    }
}

/* Телефон (450px и менее) */
@media (max-width: 450px) {
    .hero {
        padding: 60px 20px;

    }

    .hero-container {
        justify-content: center; /* Текст по центру */
    }

    .hero-title {
        font-size: 30px; /* Компактный размер для смартфона */
        line-height: 1.2;
        letter-spacing: 0;
    }
}

.about-section {
    padding: 120px 0;
	max-width: 1200px;
    margin: 0 auto;
}

/* Первый блок: Прижат влево по умолчанию */
.about-block {
    max-width: 490px;
    margin: 0 0 55px 70px;
}

.section-title {
    font-size: 64px;
    font-family: var(--font-accent);
    margin-bottom: 25px;
    line-height: 1;
}

.subtitle {
    font-size: 24px;
    color: #6b94d1; /* Твой новый контрастный цвет */
    margin-bottom: 40px;
    font-weight: 500;
}

.about-text p {
    font-size: 22px;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Второй блок: Занимает правую половину и стоит ниже */
.approach-block {
    max-width: 500px; /* Ширина правой колонки */
    margin-left: auto; /* Выталкиваем блок в правую часть контейнера */
}

.approach-title {
    font-size: 22px;
    color: #6b94d1;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.approach-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: flex-start; 
}

.approach-item {
	width: fit-content;    
    border: 1px solid rgba(255, 255, 255, 1);
    border-radius: 50px;
    padding: 18px 65px;
    font-size: 22px;
    transition: all 0.3s ease;
    text-align: left; 
}

.approach-item:hover {
    border-color: #6b94d1;
    background: rgba(107, 148, 209, 0.1);
    box-shadow: 0 5px 20px rgba(107, 148, 209, 0.2);
    transform: translateX(10px); /* Легкий сдвиг вправо при наведении */
}


/* Телефон (450px и менее) */
@media (max-width: 450px) {

.approach-list{
	padding: 0 25px;
}
.approach-title {
	padding: 0 25px;
}
.section-title {
    font-size: 40px;
}
.approach-item {
	font-size: 16px;
    padding: 20px 20px;
}
}

.services-section {
    padding: 100px 0;
}

.services-intro-block {
    max-width: 395px;
    margin: 0 0 55px 70px;
}

/* Смещение списка услуг вправо (как Approach) */
.services-list {
    max-width: 850px;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    gap: 80px; /* Большой отступ между блоками услуг */
}

.service-item {
    width: 100%;
}

.service-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
    position: relative; /* Для позиционирования линии */
}

.service-icon {
    width: 50px; /* Подбери размер под свои иконки */
    height: auto;
}

.service-name {
    font-size: 32px;
    font-family: var(--font-accent);
    color: var(--color-white);
    text-transform: uppercase;
    flex-grow: 1;
    position: relative;
}

/* Розовая линия под названием */
.service-name::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 0;
    width: 100%; /* Линия на всю ширину названия */
    height: 2px;
    background-color: #ef1ba3; /* Твой розовый цвет */
	font-weight: 400;
}

.service-body {
    padding-left: 70px; /* Сдвигаем текст, чтобы он был под названием, а не под иконкой */
}

.service-desc {
    font-size: 18px;
    margin-bottom: 25px;
    opacity: 0.9;
}

.service-details {
    list-style: none;
    margin-bottom: 25px;
}

.service-details li {
    font-size: 22px;
    font-weight: 400;
    margin-bottom: 12px;
    position: relative;
    padding-left: 20px;
}

/* Точки у списка (тоже розовые для стиля) */
.service-details li::before {
    content: '•';
    color: #ef1ba3;
    position: absolute;
    left: 0;
}

.service-footer {
    font-size: 18px;
    line-height: 1.5;
    opacity: 0.7;
    max-width: 600px;
}

.container{
    max-width: 1200px;
    margin: 0 auto;
}

/* Планшет (1000px - 750px) */
@media (max-width: 1000px) {

.container {
	
	padding: 0 50px;
}}

/* Телефон (450px и менее) */
@media (max-width: 450px) {

.service-details li {
	transform: translateX(-20px)
}
.container {
	
	padding: 0 25px;
}
.service-name {
	font-size: 30px;
}
.service-footer {
font-size: 16px;}
.service-desc {
font-size: 16px;}

}


.contact-section {
    padding: 100px 0;
}

.contact-card {
    /* Рамка и форма */
    border: 3px solid #ffffff;
    border-radius: 120px; /* Большой радиус для эффекта овала */
    padding: 80px 100px;
    max-width: 1100px;
    margin: 0 auto;
    
    /* Фон (если нужен легкий оттенок, как на макете) */
    background-color: rgba(255, 255, 255, 0.02);
}

.contact-title {
    font-family: var(--font-accent);
    font-size: 84px; /* Крупный шрифт как на скрине */
    font-weight: 400;
    color: #ffffff;
    margin-bottom: 40px;
    text-transform: uppercase;
}

.contact-text {
    font-size: 18px;
    line-height: 1.4;
    color: #ffffff;
    margin-bottom: 30px;
    font-weight: 400;
}

.contact-info {
    font-style: normal;
    font-size: 16px;
    line-height: 1.6;
    color: #ffffff;
    margin-top: 40px;
}

.company-name {
    font-weight: 700;
    font-style: italic;
    display: inline-block;
    margin-bottom: 5px;
}

.contact-info a {
    color: #ffffff;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.contact-info a:hover {
    opacity: 0.7;
}


/* Телефон (450px и менее) */
@media (max-width: 450px) {
.contact-title {
	font-size: 48px;
}
.contact-card {
	padding: 50px 50px;
}
}

.main-footer {
    padding: 80px 0 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.footer-grid {
    display: grid;
    /* Четыре колонки: первая узкая, остальные распределены */
    grid-template-columns: 1fr 1.5fr 1.5fr;
    gap: 40px;
    margin-bottom: 80px;
	padding: 0 60px;
}

/* Навигация слева */
.footer-nav {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.footer-nav a {
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.footer-nav a:hover {
    opacity: 1;
}

/* Заголовки (Labels) */
.footer-label {
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

/* Данные (Values) */
.footer-value {
    font-size: 16px;
    line-height: 1.6;
    opacity: 0.7;
    margin-bottom: 30px;
}

.footer-value a {
    color: inherit;
    text-decoration: none;
}

/* Нижняя часть с копирайтом */
.footer-bottom {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    opacity: 0.9;
    letter-spacing: 1px;
    line-height: 1.5;
}
/* Условие для мобильных устройств (ширина экрана до 450px) */
@media (max-width: 450px) {
    .footer-grid .footer-col:first-child {
        display: none;
    }

    /* Опционально: корректируем сетку, чтобы остальные колонки 
       заняли освободившееся место ровно */
    .footer-grid {
        grid-template-columns: 1fr; /* На мобилке лучше выстроить всё в одну колонку */
        gap: 30px;
    }
}