/* Общие стили в стиле Альбукерке */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Impact', 'Arial Black', sans-serif;
}

:root {
    --saul-yellow: #ffcc00;
    --saul-red: #ff3333;
    --saul-blue: #0066cc;
	--saul-green: #4CAF50;
}

body {
    background-color: #1a1a1a;
    color: #ffffff;
    line-height: 1.4;
}

/* Шапка сайта */
header {
    background: linear-gradient(135deg, var(--saul-red), #990000);
    text-align: center;
    padding: 30px 15px;
    border-bottom: 8px solid var(--saul-yellow);
}

header h1 {
    font-size: 3.5rem;
    color: var(--saul-yellow);
    text-transform: uppercase;
    text-shadow: 3px 3px 0px #000;
    letter-spacing: 2px;
}

header p {
    font-size: 1.5rem;
    color: #fff;
    margin-top: 10px;
    text-transform: uppercase;
    background-color: #000;
    display: inline-block;
    padding: 5px 15px;
}

/* Стили для блоков лендинга */
.block {
    padding: 50px 20px;
    text-align: center;
    border-bottom: 5px solid #333;
}

.block h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    text-transform: uppercase;
}
img {
  max-width: 50%; /* Картинка не станет шире своего контейнера */
  height: auto;    /* Пропорции сохраняются автоматически */
  display: block;  /* Убирает лишние отступы снизу */
  margin: 0 auto;
}

/* Блок 1: Проблемы */
#problems {
    background-color: #222;
}

#problems h2 { 
    color: var(--saul-red); 
}

.grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 600px;
    margin: 0 auto;
}

.card {
    background-color: #333;
    padding: 5px;
    border-left: 10px solid var(--saul-red);
    font-size: 1.2rem;
}

/* Блок 2: Обо мне / Оффер */
#about {
    background: var(--saul-yellow);
    color: #000;
}

#about h2 { 
    color: #000; 
    font-size: 3rem; 
}

.about-text {
    font-size: 1.4rem;
    max-width: 700px;
    margin: 0 auto 30px auto;
    font-family: 'Arial', sans-serif;
    font-weight: bold;
}

.highlight {
    color: var(--saul-red); 
    font-size: 1.8rem;
}

/* Блок 3: Отзывы */
#reviews {
    background-color: #111;
}

#reviews h2 { 
    color: var(--saul-blue); 
}
#contact h3, #reviews h3 {
    letter-spacing: 3px; /* Раздвигаем буквы вширь */
}

/* На смартфонах делаем ширину чуть меньше, чтобы длинные слова не вылезали за экран */
@media (max-width: 480px) {
    #contact h3, #reviews h3 {
        letter-spacing: 2px; 
    }
}

.review-item {
    background-color: #222;
    padding: 20px;
    margin: 15px auto;
    max-width: 600px;
    border: 2px dashed var(--saul-yellow);
    font-family: 'Arial', sans-serif;
    text-align: left;
}

.review-author {
    color: var(--saul-yellow);
    margin-top: 10px;
    font-weight: bold;
    text-align: right;
}

/* Блок 4: Контакты / Кнопка действия */
#contact {
    background: linear-gradient(135deg, var(--saul-blue), #003366);
    border-bottom: none;
}

#contact h2 { 
    color: var(--saul-yellow); 
}

.sub-contact {
    font-size: 1.2rem; 
    margin-bottom: 20px;
}

.cta-button {
    display: inline-block;
    background-color: var(--saul-yellow);
    color: #000;
    padding: 20px 40px;
    font-size: 2rem;
    text-decoration: none;
    text-transform: uppercase;
    border-radius: 5px;
    box-shadow: 0 8px 0px #b38f00, 0 15px 20px rgba(0,0,0,0.5);
    transition: transform 0.1s;
    margin: 20px 0;
    max-width: 90%;
    width: auto;
}

.cta-button:active {
    transform: translateY(4px);
    box-shadow: 0 4px 0px #b38f00, 0 8px 10px rgba(0,0,0,0.5);
}
.max-blue-btn {
    display: inline-block;
    background-color: #0077ff; /* Тот самый синий цвет МАКС */
    color: #ffffff;            /* Белый текст для идеального контраста */
    padding: 20px 40px;
    font-size: 2rem;
    text-decoration: none;
    text-transform: uppercase;
    border-radius: 5px;
    box-shadow: 0 8px 0px #004499, 0 15px 20px rgba(0,0,0,0.5); /* Темно-синяя объемная тень */
    transition: transform 0.1s;
    margin: 20px 0;
    max-width: 90%;
    width: auto;
}

/* Эффект нажатия пальцем для синей кнопки на смартфонах */
.max-blue-btn:active {
    transform: translateY(4px);
    box-shadow: 0 4px 0px #004499, 0 8px 10px rgba(0,0,0,0.5);
}

/* Адаптация размера синей кнопки под экраны смартфонов */
@media (max-width: 480px) {
    .max-blue-btn {
        font-size: 1.5rem;
        padding: 15px 25px;
    }
}

.phone {
    font-size: 2.5rem;
    margin-top: 20px;
    color: #fff;
    display: block;
    text-decoration: none;
}

/* Подвал */
footer {
    background-color: #000;
    text-align: center;
    padding: 20px;
    font-family: 'Arial', sans-serif;
    font-size: 0.9rem;
    color: #666;
}

/* Оптимизация под смартфоны */
@media (max-width: 480px) {
    header h1 { font-size: 2.3rem; }
    header p { font-size: 1.1rem; }
    .block h2 { font-size: 1.8rem; }
    #about h2 { font-size: 2.2rem; }
    .cta-button { font-size: 1.5rem; padding: 15px 25px; }
    .phone { font-size: 1.8rem; }
}
.help-text {
    font-size: 0.8rem;
    color: #aaaaaa;            /* Делаем текст светло-серым, чтобы он не отвлекал от главного */
    text-transform: lowercase; /* Пишем строчными буквами для контраста с капсом */
    font-family: 'Arial', sans-serif; /* Простой аккуратный шрифт */
    margin-left: auto;         /* Сдвигаем подсказку в правый край, ближе к стрелочке */
    padding-right: 10px;       /* Небольшой отступ от самой стрелки */
}

/* КОГДА БЛОК ЗАКРЫТ: выводим призыв к действию */
.spoiler .help-text::before {
    content: "«нажми, чтобы открыть»";
}

/* КОГДА БЛОК ОТКРЫТ: автоматически меняем текст на «закрыть» */
.spoiler[open] .help-text::before {
    content: "«закрыть»";
    color: var(--saul-red);    /* Подсветим красным цветом Сола, намекая на действие */
}

/* Оптимизация под маленькие смартфоны */
@media (max-width: 400px) {
    .help-text {
        display: none;         /* Если экран смартфона совсем крошечный, скрываем текст, чтобы не ломать строку */
    }
}