/* ============================================================
   CODEDBYBRO — ПОЛНОСТЬЮ ПРОКОММЕНТИРОВАННЫЙ CSS
   Ниже каждый крупный селектор помечен русским комментарием:
   что он делает и за какую часть интерфейса отвечает.
   ============================================================ */

/* =========================================================

   RESET

========================================================= */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;

}

body {

    font-family: "Inter", sans-serif;

    background: #08090a;

    color: #f2f4f3;

    line-height: 1.5;

    overflow-x: hidden;

}

a {

    color: inherit;

    text-decoration: none;

}

button {

    font: inherit;

}

/* Центральный контейнер: ограничивает ширину контента и центрирует его. */
.container {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

}

/* =========================================================

   HEADER

========================================================= */

/* Липкая верхняя панель сайта. */
.header {

    position: sticky;

    top: 0;

    z-index: 100;

    background: rgba(8, 9, 10, 0.82);

    backdrop-filter: blur(18px);

    border-bottom: 1px solid rgba(255, 255, 255, 0.07);

}

/* Внутренний ряд шапки: логотип, меню и кнопка. */
.header-inner {

    height: 82px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}

/* Контейнер логотипа. */
.logo {

    display: flex;

    align-items: center;

    gap: 11px;

    font-weight: 700;

}

/* Квадратная отметка CB внутри логотипа. */
.logo-mark {

    width: 38px;

    height: 38px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    background: #c7ff4d;

    color: #08090a;

    font-size: 12px;

    font-weight: 900;

    box-shadow:

        0 0 25px rgba(199, 255, 77, 0.14);

}

/* Текстовое название бренда codedbybro. */
.logo-text {

    font-size: 15px;

    letter-spacing: -0.02em;

}

/* Горизонтальное меню навигации. */
.navigation {

    display: flex;

    gap: 34px;

}

/* Ссылки основного меню. */
.navigation a {

    color: #858a89;

    font-size: 13px;

    font-weight: 500;

    transition: color 0.25s ease;

}

/* Стили элемента .navigation a:hover. */
.navigation a:hover {

    color: #fff;

}

/* Кнопка действия в шапке. */
.header-button {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 11px 16px;

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 9px;

    color: #dfe2e0;

    font-size: 12px;

    font-weight: 600;

    transition:

        background 0.25s ease,

        border-color 0.25s ease,

        transform 0.25s ease;

}

/* Стили элемента .header-button span. */
.header-button span {

    color: #c7ff4d;

}

/* Стили элемента .header-button:hover. */
.header-button:hover {

    background: rgba(199, 255, 77, 0.07);

    border-color: rgba(199, 255, 77, 0.3);

    transform: translateY(-2px);

}

/* =========================================================

   HERO

========================================================= */

/* Главный первый экран. */
.hero {

    position: relative;

    min-height: 700px;

    display: flex;

    align-items: center;

    border-bottom: 1px solid rgba(255, 255, 255, 0.06);

    overflow: hidden;

}

/* Мягкое декоративное свечение в hero. */
.hero-glow {

    position: absolute;

    width: 600px;

    height: 600px;

    right: -220px;

    top: 50px;

    border-radius: 50%;

    background: rgba(199, 255, 77, 0.035);

    filter: blur(80px);

    pointer-events: none;

}

/* Сетка hero: текст слева и визуализация справа. */
.hero-grid {

    display: grid;

    grid-template-columns: 1.05fr 0.95fr;

    align-items: center;

    gap: 60px;

}

/* Текстовая часть первого экрана. */
.hero-content {

    padding: 90px 0;

}

/* Небольшой статусный бейдж над заголовком. */
.eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 27px;

    padding: 8px 12px;

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 100px;

    background: rgba(255, 255, 255, 0.025);

    color: #9da3a1;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 0.04em;

}

/* Зелёная точка статуса онлайн. */
.status-dot {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: #c7ff4d;

    box-shadow: 0 0 12px rgba(199, 255, 77, 0.8);

}

/* Главный заголовок hero. */
.hero h1 {

    max-width: 680px;

    font-size: clamp(48px, 6vw, 78px);

    line-height: 0.98;

    letter-spacing: -0.065em;

    font-weight: 800;

}

/* Вторая часть главного заголовка. */
.hero h1 span {

    display: block;

    color: #6f7674;

}

/* Описание под главным заголовком. */
.hero-description {

    max-width: 570px;

    margin-top: 30px;

    color: #919795;

    font-size: 16px;

    line-height: 1.8;

}

/* Ряд кнопок hero. */
.hero-actions {

    display: flex;

    gap: 12px;

    margin-top: 35px;

}

/* Общие стили кнопок. */
.button {

    min-height: 48px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    padding: 0 20px;

    border-radius: 9px;

    font-size: 12px;

    font-weight: 700;

    transition:

        transform 0.25s ease,

        background 0.25s ease,

        border-color 0.25s ease;

}

/* Основная зелёная кнопка. */
.button-primary {

    background: #c7ff4d;

    color: #08090a;

}

/* Стили элемента .button-primary:hover. */
.button-primary:hover {

    transform: translateY(-3px);

    box-shadow:

        0 12px 35px rgba(199, 255, 77, 0.13);

}

/* Вторичная контурная кнопка. */
.button-secondary {

    border: 1px solid rgba(255, 255, 255, 0.1);

    color: #d5d8d7;

}

/* Стили элемента .button-secondary:hover. */
.button-secondary:hover {

    background: rgba(255, 255, 255, 0.04);

    border-color: rgba(255, 255, 255, 0.2);

    transform: translateY(-3px);

}

/* Короткая техническая строка под кнопками. */
.hero-note {

    display: flex;

    align-items: center;

    gap: 13px;

    margin-top: 55px;

    color: #666d6b;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 0.04em;

}

/* Стили элемента .hero-note span. */
.hero-note span {

    color: #c7ff4d;

}

/* =========================================================

   HERO VISUAL

========================================================= */

/* Контейнер центральной технической анимации. */
.hero-visual {

    position: relative;

    min-height: 500px;

    display: grid;

    place-items: center;

}

/* Большой круг ONLINE. */
.network-core {

    position: relative;

    width: 235px;

    height: 235px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    border: 1px solid rgba(199, 255, 77, 0.22);

    background:

        radial-gradient(

            circle at center,

            rgba(199, 255, 77, 0.12),

            rgba(12, 14, 14, 0.9) 60%

        );

    box-shadow:

        0 0 90px rgba(199, 255, 77, 0.08),

        inset 0 0 45px rgba(199, 255, 77, 0.04);

}

/* Внутреннее свечение круга ONLINE. */
.core-glow {

    position: absolute;

    inset: 28px;

    border-radius: 50%;

    background: rgba(199, 255, 77, 0.08);

    filter: blur(25px);

}

/* Центральный графический символ сети. */
.core-icon {

    position: relative;

    width: 70px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    margin-bottom: 18px;

}

/* Стили элемента .core-icon::before, .core-icon::after. */
.core-icon::before,

/* Стили элемента .core-icon::after. */
.core-icon::after {

    content: "";

    position: absolute;

    width: 34px;

    height: 34px;

    border: 1px solid rgba(199, 255, 77, 0.55);

    border-radius: 50%;

}

/* Стили элемента .core-icon::before. */
.core-icon::before {

    transform: translateX(-17px);

}

/* Стили элемента .core-icon::after. */
.core-icon::after {

    transform: translateX(17px);

}

/* Стили элемента .core-icon span. */
.core-icon span {

    position: relative;

    z-index: 2;

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: #c7ff4d;

    box-shadow:

        0 0 13px rgba(199, 255, 77, 0.9);

}

/* Текст ONLINE / NETWORK. */
.core-label {

    position: relative;

    text-align: center;

}

/* Стили элемента .core-label strong. */
.core-label strong {

    display: block;

    font-size: 15px;

    letter-spacing: 0.15em;

}

/* Стили элемента .core-label small. */
.core-label small {

    color: #656c69;

    font-size: 8px;

    letter-spacing: 0.25em;

}

/* Общие стили орбит вокруг ONLINE. */
.visual-orbit {

    position: absolute;

    border: 1px solid rgba(255, 255, 255, 0.06);

    border-radius: 50%;

    pointer-events: none;

}

/* Первая орбита. */
.orbit-one {

    width: 330px;

    height: 330px;

    transform: rotate(25deg);

}

/* Вторая орбита. */
.orbit-two {

    width: 430px;

    height: 210px;

    transform: rotate(-35deg);

}

/* Третья орбита. */
.orbit-three {

    width: 260px;

    height: 460px;

    transform: rotate(60deg);

}

/* Плавающие карточки HTTPS и SERVER. */
.floating-card {

    position: absolute;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 13px 15px;

    border: 1px solid rgba(255, 255, 255, 0.09);

    background: rgba(10, 12, 12, 0.82);

    backdrop-filter: blur(16px);

    border-radius: 12px;

    box-shadow:

        0 20px 50px rgba(0, 0, 0, 0.35);

}

/* Верхняя карточка HTTPS. */
.card-top {

    top: 65px;

    right: 20px;

}

/* Нижняя карточка SERVER. */
.card-bottom {

    bottom: 60px;

    left: 20px;

}

/* Маленькая иконка внутри технической карточки. */
.mini-icon {

    width: 30px;

    height: 30px;

    display: grid;

    place-items: center;

    border-radius: 8px;

    background: rgba(199, 255, 77, 0.08);

    color: #c7ff4d;

    font-size: 12px;

}

/* Основной текст плавающей карточки. */
.floating-card strong {

    display: block;

    font-size: 10px;

}

/* Вторичный текст плавающей карточки. */
.floating-card small {

    display: block;

    margin-top: 2px;

    color: #5d6461;

    font-size: 7px;

    letter-spacing: 0.08em;

}

/* =========================================================

   SECTION HEADINGS

========================================================= */

/* Стили элемента .services-section, .process-section, .about-section, .cta-section. */
.services-section,

/* Стили элемента .process-section, .about-section, .cta-section. */
.process-section,

/* Стили элемента .about-section, .cta-section. */
.about-section,

/* Секция контактов / CTA. */
.cta-section {

    padding: 125px 0;

}

/* Заголовок каждой большой секции. */
.section-heading {

    display: flex;

    align-items: end;

    justify-content: space-between;

    gap: 50px;

    margin-bottom: 65px;

}

/* Небольшой технический номер секции. */
.section-number {

    display: block;

    margin-bottom: 17px;

    color: #68706d;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.2em;

}

/* Большой заголовок секции. */
.section-heading h2 {

    font-size: clamp(38px, 5vw, 61px);

    line-height: 1;

    letter-spacing: -0.06em;

}

/* Вторая часть заголовка секции. */
.section-heading h2 span {

    color: #666e6b;

}

/* Короткий пояснительный текст рядом с заголовком. */
.section-heading > p {

    max-width: 300px;

    color: #717876;

    font-size: 12px;

    line-height: 1.7;

}

/* =========================================================

   SERVICES

========================================================= */

/* Сетка карточек услуг. */
.services-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 16px;

}

/* Карточка одной услуги. */
.service-card {

    --mouse-x: 50%;

    --mouse-y: 50%;

    position: relative;

    min-height: 420px;

    display: flex;

    flex-direction: column;

    padding: 31px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.075);

    border-radius: 18px;

    background: #0d0f10;

    transition:

        transform 0.35s ease,

        border-color 0.35s ease;

}

.service-card::before {

    content: "";

    position: absolute;

    width: 300px;

    height: 300px;

    left: var(--mouse-x);

    top: var(--mouse-y);

    transform: translate(-50%, -50%);

    background: radial-gradient(

        circle,

        rgba(199, 255, 77, 0.08),

        transparent 65%

    );

    pointer-events: none;

}

/* Эффект наведения на услугу. */
.service-card:hover {

    transform: translateY(-7px);

    border-color: rgba(199, 255, 77, 0.24);

}

/* Выделенная первая карточка услуги. */
.service-featured {

    border-color: rgba(199, 255, 77, 0.17);

    background:

        linear-gradient(

            135deg,

            rgba(199, 255, 77, 0.045),

            #0d0f10 55%

        );

}

/* Номер услуги в правом верхнем углу. */
.service-number {

    position: absolute;

    top: 25px;

    right: 27px;

    color: #3f4643;

    font-size: 10px;

    font-weight: 700;

}

/* Большая иконка услуги. */
.service-icon {

    width: 52px;

    height: 52px;

    display: grid;

    place-items: center;

    margin-bottom: 38px;

    border-radius: 13px;

    border: 1px solid rgba(199, 255, 77, 0.16);

    background: rgba(199, 255, 77, 0.05);

    color: #c7ff4d;

    font-size: 17px;

}

/* Техническая категория услуги. */
.service-tag {

    margin-bottom: 12px;

    color: #606764;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.2em;

}

/* Название услуги. */
.service-content h3 {

    font-size: 27px;

    letter-spacing: -0.04em;

}

/* Короткое описание услуги. */
.service-content > p {

    max-width: 470px;

    margin-top: 14px;

    color: #777e7b;

    font-size: 12px;

    line-height: 1.8;

}

/* Список возможностей услуги. */
.service-content ul {

    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: 21px;

    list-style: none;

}

/* Отдельный технический тег услуги. */
.service-content li {

    padding: 6px 9px;

    border: 1px solid rgba(255, 255, 255, 0.06);

    border-radius: 6px;

    color: #777e7b;

    font-size: 9px;

}

/* Нижняя часть карточки: цена и действие. */
.service-footer {

    margin-top: auto;

    padding-top: 28px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-top: 1px solid rgba(255, 255, 255, 0.06);

}

/* Цена услуги. */
.service-footer strong {

    color: #e8ebe9;

    font-size: 13px;

}

/* Кнопка подробного описания услуги. */
.service-arrow {

    width: 38px;

    height: 38px;

    display: grid;

    place-items: center;

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 8px;

    background: transparent;

    color: #c7ff4d;

    cursor: pointer;

    transition:

        background 0.25s ease,

        transform 0.25s ease;

}

/* Стили элемента .service-arrow:hover. */
.service-arrow:hover {

    background: #c7ff4d;

    color: #08090a;

    transform: rotate(8deg);

}

/* Ссылка на страницу контактов для шестой карточки. */
.service-link {

    color: #c7ff4d;

    font-size: 11px;

    font-weight: 700;

}

/* =========================================================

   PROCESS

========================================================= */

/* Секция процесса работы. */
.process-section {

    background: #0b0d0e;

    border-top: 1px solid rgba(255, 255, 255, 0.05);

    border-bottom: 1px solid rgba(255, 255, 255, 0.05);

}

/* Сетка из трёх этапов работы. */
.process-grid {

    display: grid;

    grid-template-columns: 1fr auto 1fr auto 1fr;

    align-items: center;

    gap: 25px;

}

/* Номер этапа. */
.process-item span {

    color: #c7ff4d;

    font-size: 10px;

    font-weight: 700;

}

/* Название этапа. */
.process-item h3 {

    margin-top: 16px;

    font-size: 20px;

    letter-spacing: -0.03em;

}

/* Описание этапа. */
.process-item p {

    max-width: 260px;

    margin-top: 9px;

    color: #6e7572;

    font-size: 11px;

    line-height: 1.7;

}

/* Разделительная линия между этапами. */
.process-line {

    width: 70px;

    height: 1px;

    background: rgba(255, 255, 255, 0.08);

}

/* =========================================================

   ABOUT

========================================================= */

/* Сетка секции обо мне. */
.about-grid {

    display: grid;

    grid-template-columns: 0.75fr 1.25fr;

    gap: 120px;

}

/* Большой декоративный заголовок обо мне. */
.about-title h2 {

    font-size: clamp(58px, 8vw, 105px);

    line-height: 0.82;

    letter-spacing: -0.08em;

}

/* Стили элемента .about-title h2 span. */
.about-title h2 span {

    color: #686f6c;

}

/* Стили элемента .about-text. */
.about-text {

    padding-top: 25px;

}

/* Главный текст о специалисте. */
.about-lead {

    max-width: 650px;

    font-size: 25px;

    line-height: 1.45;

    letter-spacing: -0.035em;

    color: #e3e6e4;

}

/* Дополнительные абзацы о компетенциях. */
.about-text > p:not(.about-lead) {

    max-width: 590px;

    margin-top: 25px;

    color: #747b78;

    font-size: 13px;

    line-height: 1.9;

}

/* Сетка/ряд технологических тегов. */
.skills {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 35px;

}

/* Один технологический тег. */
.skills span {

    padding: 8px 12px;

    border: 1px solid rgba(255, 255, 255, 0.07);

    border-radius: 7px;

    color: #9da39f;

    font-size: 9px;

}

/* =========================================================

   CTA

========================================================= */

/* Секция контактов / CTA. */
.cta-section {

    padding-top: 80px;

}

/* Большая карточка контактов. */
.cta-box {

    position: relative;

    padding: 65px;

    overflow: hidden;

    border: 1px solid rgba(199, 255, 77, 0.17);

    border-radius: 22px;

    background:

        radial-gradient(

            circle at 90% 0%,

            rgba(199, 255, 77, 0.08),

            transparent 40%

        ),

        #0d0f10;

}

/* Декоративное кольцо внутри блока контактов. */
.cta-decoration {

    position: absolute;

    width: 260px;

    height: 260px;

    right: -100px;

    bottom: -120px;

    border-radius: 50%;

    border: 1px solid rgba(199, 255, 77, 0.12);

}

/* Заголовок контактного блока. */
.cta-box h2 {

    max-width: 750px;

    font-size: clamp(44px, 6vw, 76px);

    line-height: 0.95;

    letter-spacing: -0.065em;

}

/* Анимируемая вторая часть контактного заголовка. */
.cta-box h2 span {

    display: block;

    color: #6b726f;

}

/* Подсказка, как описать задачу. */
.cta-box > p {

    max-width: 550px;

    margin-top: 25px;

    color: #777e7b;

    font-size: 13px;

    line-height: 1.8;

}

/* Сетка каналов связи. */
.contact-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 10px;

    margin-top: 45px;

}

/* Отдельная карточка контакта. */
.contact-item {

    position: relative;

    min-height: 110px;

    padding: 19px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    border: 1px solid rgba(255, 255, 255, 0.07);

    border-radius: 11px;

    background: rgba(255, 255, 255, 0.02);

    transition:

        background 0.25s ease,

        border-color 0.25s ease,

        transform 0.25s ease;

}

/* Стили элемента .contact-item:hover. */
.contact-item:hover {

    transform: translateY(-4px);

    background: rgba(199, 255, 77, 0.04);

    border-color: rgba(199, 255, 77, 0.2);

}

/* Подпись типа контакта. */
.contact-label {

    color: #59605d;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.18em;

}

/* Основной адрес/ник контакта. */
.contact-item strong {

    margin-top: 15px;

    color: #d9ddda;

    font-size: 11px;

}

/* Стрелка контакта. */
.contact-arrow {

    position: absolute;

    top: 18px;

    right: 18px;

    color: #c7ff4d;

    font-size: 13px;

}

/* =========================================================

   FOOTER

========================================================= */

/* Нижняя часть сайта. */
.footer {

    padding: 30px 0;

    border-top: 1px solid rgba(255, 255, 255, 0.06);

    color: #555c59;

    font-size: 9px;

}

/* Внутренняя строка футера. */
.footer-inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

}

/* Стили элемента .footer .logo-mark. */
.footer .logo-mark {

    width: 29px;

    height: 29px;

    border-radius: 8px;

    font-size: 9px;

}

/* Стили элемента .footer .logo-text. */
.footer .logo-text {

    color: #737a77;

    font-size: 11px;

}

/* =========================================================

   ANIMATIONS

========================================================= */

/* Начальное скрытое состояние анимации появления. */
.reveal {

    opacity: 0;

    transform: translateY(25px);

    transition:

        opacity 0.7s ease,

        transform 0.7s ease;

}

/* Показанный элемент после прокрутки. */
.reveal.visible {

    opacity: 1;

    transform: translateY(0);

}

/* =========================================================

   RESPONSIVE

========================================================= */

/* Адаптивная версия: эти правила срабатывают на уменьшенной ширине экрана. */
@media (max-width: 900px) {

/* Горизонтальное меню навигации. */
    .navigation {

        display: none;

    }

/* Сетка hero: текст слева и визуализация справа. */
    .hero-grid {

        grid-template-columns: 1fr;

    }

/* Главный первый экран. */
    .hero {

        min-height: auto;

    }

/* Текстовая часть первого экрана. */
    .hero-content {

        padding: 90px 0 30px;

    }

/* Контейнер центральной технической анимации. */
    .hero-visual {

        min-height: 480px;

    }

/* Сетка секции обо мне. */
    .about-grid {

        grid-template-columns: 1fr;

        gap: 45px;

    }

/* Сетка из трёх этапов работы. */
    .process-grid {

        grid-template-columns: 1fr;

        gap: 35px;

    }

/* Разделительная линия между этапами. */
    .process-line {

        display: none;

    }

/* Описание этапа. */
    .process-item p {

        max-width: 500px;

    }

/* Сетка каналов связи. */
    .contact-grid {

        grid-template-columns: 1fr;

    }

}

/* Адаптивная версия: эти правила срабатывают на уменьшенной ширине экрана. */
@media (max-width: 650px) {

/* Центральный контейнер: ограничивает ширину контента и центрирует его. */
    .container {

        width: min(100% - 30px, 1180px);

    }

/* Внутренний ряд шапки: логотип, меню и кнопка. */
    .header-inner {

        height: 70px;

    }

/* Кнопка действия в шапке. */
    .header-button {

        padding: 9px 11px;

        font-size: 10px;

    }

/* Текстовая часть первого экрана. */
    .hero-content {

        padding-top: 70px;

    }

/* Главный заголовок hero. */
    .hero h1 {

        font-size: 48px;

    }

/* Описание под главным заголовком. */
    .hero-description {

        font-size: 14px;

    }

/* Ряд кнопок hero. */
    .hero-actions {

        flex-direction: column;

    }

/* Общие стили кнопок. */
    .button {

        width: 100%;

    }

/* Контейнер центральной технической анимации. */
    .hero-visual {

        min-height: 400px;

    }

/* Большой круг ONLINE. */
    .network-core {

        width: 190px;

        height: 190px;

    }

/* Первая орбита. */
    .orbit-one {

        width: 270px;

        height: 270px;

    }

/* Вторая орбита. */
    .orbit-two {

        width: 340px;

        height: 170px;

    }

/* Третья орбита. */
    .orbit-three {

        width: 210px;

        height: 370px;

    }

/* Плавающие карточки HTTPS и SERVER. */
    .floating-card {

        transform: scale(0.85);

    }

/* Верхняя карточка HTTPS. */
    .card-top {

        right: -5px;

    }

/* Нижняя карточка SERVER. */
    .card-bottom {

        left: -5px;

    }

/* Стили элемента .services-section, .process-section, .about-section, .cta-section. */
    .services-section,

/* Стили элемента .process-section, .about-section, .cta-section. */
    .process-section,

/* Стили элемента .about-section, .cta-section. */
    .about-section,

/* Секция контактов / CTA. */
    .cta-section {

        padding: 85px 0;

    }

/* Заголовок каждой большой секции. */
    .section-heading {

        display: block;

        margin-bottom: 40px;

    }

/* Короткий пояснительный текст рядом с заголовком. */
    .section-heading > p {

        margin-top: 25px;

    }

/* Сетка карточек услуг. */
    .services-grid {

        grid-template-columns: 1fr;

    }

/* Карточка одной услуги. */
    .service-card {

        min-height: 390px;

    }

/* Большая карточка контактов. */
    .cta-box {

        padding: 35px 25px;

    }

/* Заголовок контактного блока. */
    .cta-box h2 {

        font-size: 45px;

    }

/* Внутренняя строка футера. */
    .footer-inner {

        flex-direction: column;

        align-items: flex-start;

    }

}



/* =========================================================
   FINAL READABILITY / HERO / CONTACT PAGE
========================================================= */

/* Квадратная отметка CB внутри логотипа. */
.logo-mark {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    font-size: 17px;
    box-shadow:
        0 0 0 1px rgba(199,255,77,.08),
        0 0 34px rgba(199,255,77,.18),
        inset 0 0 18px rgba(255,255,255,.08);
    position: relative;
}

/* Текстовое название бренда codedbybro. */
.logo-text {
    font-size: 19px;
    font-weight: 800;
}

/* Стили элемента .footer .logo-mark. */
.footer .logo-mark {
    width: 50px;
    height: 50px;
    font-size: 16px;
}

/* Большой круг ONLINE. */
.network-core {
    width: 285px;
    height: 285px;
}

/* Центральный графический символ сети. */
.core-icon {
    width: 95px;
    height: 68px;
    margin-bottom: 22px;
}

/* Стили элемента .core-icon::before, .core-icon::after. */
.core-icon::before,
/* Стили элемента .core-icon::after. */
.core-icon::after {
    width: 46px;
    height: 46px;
}

/* Стили элемента .core-icon span. */
.core-icon span {
    width: 8px;
    height: 8px;
}

/* Стили элемента .core-label strong. */
.core-label strong {
    font-size: 20px;
}

/* Стили элемента .core-label small. */
.core-label small {
    font-size: 10px;
}

/* Плавающие карточки HTTPS и SERVER. */
.floating-card {
    padding: 16px 18px;
}

/* Основной текст плавающей карточки. */
.floating-card strong {
    font-size: 12px;
}

/* Вторичный текст плавающей карточки. */
.floating-card small {
    font-size: 8px;
}

/* Маленькая иконка внутри технической карточки. */
.mini-icon {
    width: 36px;
    height: 36px;
    font-size: 14px;
}

/* Карточка одной услуги. */
.service-card {
    min-height: 455px;
    padding: 36px;
    border-radius: 20px;
}

/* Большая иконка услуги. */
.service-icon {
    width: 62px;
    height: 62px;
    border-radius: 15px;
    font-size: 21px;
}

/* Техническая категория услуги. */
.service-tag {
    font-size: 10px;
}

/* Название услуги. */
.service-content h3 {
    font-size: 30px;
}

/* Короткое описание услуги. */
.service-content > p {
    font-size: 15px;
    line-height: 1.78;
}

/* Отдельный технический тег услуги. */
.service-content li {
    padding: 8px 11px;
    font-size: 11px;
}

/* Цена услуги. */
.service-footer strong {
    font-size: 18px;
}

/* Кнопка подробного описания услуги. */
.service-arrow {
    width: 48px;
    height: 48px;
    font-size: 18px;
}

/* Стили элемента .process-item > span. */
.process-item > span {
    font-size: 13px;
}

/* Название этапа. */
.process-item h3 {
    font-size: 23px;
}

/* Описание этапа. */
.process-item p {
    font-size: 14px;
    line-height: 1.8;
}

/* Главный текст о специалисте. */
.about-lead {
    font-size: 28px;
}

/* Дополнительные абзацы о компетенциях. */
.about-text > p:not(.about-lead) {
    font-size: 15px;
    line-height: 1.9;
}

/* Один технологический тег. */
.skills span {
    font-size: 11px;
    padding: 9px 13px;
}

/* Подсказка, как описать задачу. */
.cta-box > p {
    font-size: 16px;
    line-height: 1.85;
    max-width: 720px;
}

/* Отдельная карточка контакта. */
.contact-item {
    min-height: 140px;
    padding: 24px;
}

/* Подпись типа контакта. */
.contact-label {
    font-size: 10px;
}

/* Основной адрес/ник контакта. */
.contact-item strong {
    font-size: 15px;
}

/* Стрелка контакта. */
.contact-arrow {
    font-size: 17px;
}

/* Floating contact widget */
/* Стили элемента .site-chat-trigger. */
.site-chat-trigger {
    position: fixed;
    right: 26px;
    bottom: 26px;
    z-index: 999;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    min-height: 54px;
    padding: 0 18px 0 12px;
    border: 1px solid rgba(199,255,77,.28);
    border-radius: 999px;
    background: rgba(13,15,16,.92);
    color: #f2f4f3;
    cursor: pointer;
    backdrop-filter: blur(18px);
    box-shadow:
        0 18px 50px rgba(0,0,0,.40),
        0 0 35px rgba(199,255,77,.08);
    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease;
}

/* Стили элемента .site-chat-trigger:hover. */
.site-chat-trigger:hover {
    transform: translateY(-4px);
    border-color: rgba(199,255,77,.55);
    background: rgba(199,255,77,.08);
}

/* Стили элемента .site-chat-icon. */
.site-chat-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #c7ff4d;
    color: #08090a;
    font-weight: 900;
}

/* Стили элемента .site-chat-pulse. */
.site-chat-pulse {
    position: absolute;
    left: 26px;
    top: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #c7ff4d;
    box-shadow: 0 0 14px rgba(199,255,77,.9);
    animation: chatPulse 2s infinite;
}

/* Стили элемента .site-chat-label. */
.site-chat-label {
    font-size: 13px;
    font-weight: 700;
}

/* Кадровая анимация: меняет состояние элемента во времени. */
@keyframes chatPulse {
    0%,100% { transform: scale(1); opacity: .8; }
    50% { transform: scale(1.65); opacity: .25; }
}

@media (max-width: 650px) {
/* Большой круг ONLINE. */
    .network-core {
        width: 230px;
        height: 230px;
    }

/* Стили элемента .core-label strong. */
    .core-label strong {
        font-size: 17px;
    }

/* Карточка одной услуги. */
    .service-card {
        min-height: 0;
        padding: 29px;
    }

/* Название услуги. */
    .service-content h3 {
        font-size: 26px;
    }

/* Короткое описание услуги. */
    .service-content > p {
        font-size: 14px;
    }

/* Название этапа. */
    .process-item h3 {
        font-size: 21px;
    }

/* Описание этапа. */
    .process-item p {
        font-size: 13px;
    }

/* Главный текст о специалисте. */
    .about-lead {
        font-size: 22px;
    }

/* Дополнительные абзацы о компетенциях. */
    .about-text > p:not(.about-lead) {
        font-size: 14px;
    }

/* Подсказка, как описать задачу. */
    .cta-box > p {
        font-size: 14px;
    }

/* Стили элемента .contact-choice-card. */
    .contact-choice-card {
        padding: 30px 22px;
    }

/* Стили элемента .contact-choice-grid. */
    .contact-choice-grid {
        grid-template-columns: 1fr;
    }

/* Стили элемента .site-chat-trigger. */
    .site-chat-trigger {
        right: 15px;
        bottom: 15px;
    }
}

/* ============================================================
   ДОПОЛНИТЕЛЬНЫЕ ЭФФЕКТЫ И ФУНКЦИИ НОВОЙ ВЕРСИИ
============================================================ */

/* Вторая часть заголовков: мягко переливается между зелёным, голубым и фиолетовым. */
.animated-accent {
    background: linear-gradient(90deg, #c7ff4d 0%, #6fffd8 45%, #9b8cff 85%, #c7ff4d 100%);
    background-size: 260% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    animation: headingColorShift 7s ease-in-out infinite;
}

/* Анимация движения цветового градиента в заголовке. */
@keyframes headingColorShift {
    0%, 100% { background-position: 0% 50%; filter: drop-shadow(0 0 0 rgba(199,255,77,0)); }
    50% { background-position: 100% 50%; filter: drop-shadow(0 0 18px rgba(111,255,216,.10)); }
}

/* Большое фоновое свечение всей страницы. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -3;
    background:
        radial-gradient(circle at 15% 15%, rgba(199,255,77,.035), transparent 25%),
        radial-gradient(circle at 85% 35%, rgba(111,255,216,.025), transparent 25%),
        radial-gradient(circle at 50% 85%, rgba(155,140,255,.02), transparent 30%);
}

/* Три независимых мягких свечения создают глубину фона без яркой перегрузки. */
.hero::before,
.services-section::before,
.about-section::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    filter: blur(95px);
    opacity: .38;
    pointer-events: none;
}

/* Зелёное свечение в верхней части страницы. */
.hero::before {
    right: 4%;
    top: 18%;
    background: rgba(199,255,77,.06);
}

/* Голубоватое свечение возле каталога услуг. */
.services-section::before {
    left: -12%;
    top: 32%;
    background: rgba(111,255,216,.035);
}

/* Фиолетовое свечение возле блока обо мне. */
.about-section::before {
    right: -8%;
    bottom: 4%;
    background: rgba(155,140,255,.035);
}

/* Не даём декоративным пятнам мешать содержимому секций. */
.services-section,
.about-section {
    position: relative;
    isolation: isolate;
}

.services-section > .container,
.about-section > .container {
    position: relative;
    z-index: 1;
}

/* Более заметные номера секций — пользователь просил увеличить их. */
.section-number {
    font-size: 13px;
    letter-spacing: .17em;
}

/* Чуть увеличиваем пояснительный текст возле заголовков секций. */
.section-heading > p {
    font-size: 14px;
}

/* Увеличенная строка 01 под hero. */
.hero-note {
    font-size: 13px;
}

/* Крупнее текст внутренних карточек услуг. */
.service-tag {
    font-size: 11px;
}

.service-content > p {
    font-size: 16px;
    line-height: 1.8;
}

.service-content li {
    font-size: 12px;
}

/* Увеличиваем номер каждой карточки услуги. */
.service-number {
    font-size: 13px;
}

/* Увеличенная цена. */
.service-footer strong {
    font-size: 19px;
}

/* Кнопка стрелки становится удобнее на мобильном и десктопе. */
.service-arrow {
    width: 50px;
    height: 50px;
    font-size: 19px;
}

/* ============================================================
   МОДАЛЬНОЕ ОКНО УСЛУГ
============================================================ */

/* Затемнение всей страницы при открытии подробностей услуги. */
.service-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s ease, visibility .3s ease;
}

/* Состояние открытого модального окна. */
.service-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Размытый фон за карточкой подробного описания. */
.service-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4,5,6,.74);
    backdrop-filter: blur(13px);
}

/* Большая карточка подробного описания. */
.service-modal-card {
    position: relative;
    width: min(760px, 100%);
    max-height: min(820px, calc(100vh - 48px));
    overflow: auto;
    padding: 46px;
    border: 1px solid rgba(199,255,77,.18);
    border-radius: 24px;
    background:
        radial-gradient(circle at 100% 0%, rgba(199,255,77,.09), transparent 35%),
        radial-gradient(circle at 0% 100%, rgba(111,255,216,.05), transparent 30%),
        #0c0f10;
    box-shadow: 0 40px 120px rgba(0,0,0,.55), 0 0 70px rgba(199,255,77,.05);
    transform: translateY(24px) scale(.98);
    transition: transform .35s ease;
}

/* Плавный подъём карточки при открытии. */
.service-modal.is-open .service-modal-card {
    transform: translateY(0) scale(1);
}

/* Кнопка закрытия модального окна. */
.service-modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    background: rgba(255,255,255,.025);
    color: #dfe4e1;
    cursor: pointer;
    font-size: 26px;
    line-height: 1;
    transition: .25s ease;
}

/* Эффект наведения на закрывающую кнопку. */
.service-modal-close:hover {
    color: #08090a;
    background: #c7ff4d;
    border-color: #c7ff4d;
    transform: rotate(4deg);
}

/* Номер услуги внутри модального окна. */
.service-modal-number {
    display: block;
    color: #c7ff4d;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .18em;
}

/* Категория услуги. */
.service-modal-tag {
    display: inline-block;
    margin-top: 22px;
    color: #69726f;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
}

/* Название услуги внутри модального окна. */
.service-modal-card h2 {
    max-width: 650px;
    margin-top: 10px;
    font-size: clamp(38px, 6vw, 66px);
    line-height: .98;
    letter-spacing: -.06em;
}

/* Подробное описание выбранной услуги. */
.service-modal-description {
    max-width: 650px;
    margin-top: 24px;
    color: #a0a8a4;
    font-size: 17px;
    line-height: 1.85;
}

/* Контейнер списка работ внутри услуги. */
.service-modal-details {
    margin-top: 34px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,.07);
}

/* Заголовок списка работ. */
.service-modal-details-title {
    color: #5f6864;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

/* Список того, что входит в услугу. */
.service-modal-details ul {
    margin-top: 15px;
    display: grid;
    gap: 11px;
    list-style: none;
}

/* Одна строка списка в модальном окне. */
.service-modal-details li {
    position: relative;
    padding-left: 20px;
    color: #dce2df;
    font-size: 15px;
    line-height: 1.6;
}

/* Зелёная точка перед пунктом списка. */
.service-modal-details li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .7em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #c7ff4d;
    box-shadow: 0 0 12px rgba(199,255,77,.65);
}

/* Нижняя панель модального окна: цена + кнопка заявки. */
.service-modal-footer {
    margin-top: 34px;
    padding-top: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid rgba(255,255,255,.07);
}

/* Цена в модальном окне. */
.service-modal-footer strong {
    color: #fff;
    font-size: 22px;
}

/* Когда открыто модальное окно — блокируем прокрутку основной страницы. */
body.modal-open {
    overflow: hidden;
}

/* ============================================================
   СТРАНИЦА CONTACT.HTML
============================================================ */

/* У всей страницы контактов тот же тёмный фон и глубина. */
.contact-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 12% 20%, rgba(199,255,77,.035), transparent 26%),
        radial-gradient(circle at 88% 58%, rgba(111,255,216,.028), transparent 25%),
        #08090a;
}

/* Декоративные светящиеся пятна на contact.html. */
.contact-bg-glow {
    position: fixed;
    width: 440px;
    height: 440px;
    border-radius: 50%;
    filter: blur(110px);
    pointer-events: none;
    z-index: -1;
}

/* Зелёное свечение слева. */
.contact-bg-glow-one {
    top: 10%;
    left: -180px;
    background: rgba(199,255,77,.045);
}

/* Голубое свечение справа. */
.contact-bg-glow-two {
    top: 42%;
    right: -180px;
    background: rgba(111,255,216,.035);
}

/* Фиолетовое свечение внизу. */
.contact-bg-glow-three {
    bottom: -220px;
    left: 40%;
    background: rgba(155,140,255,.035);
}

/* Первый экран страницы контактов. */
.contact-hero {
    position: relative;
    padding: 110px 0 95px;
    overflow: hidden;
}

/* Две колонки: текст + техническая панель. */
.contact-layout {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: 70px;
}

/* Главный заголовок страницы контактов. */
.contact-intro h1 {
    max-width: 780px;
    margin-top: 16px;
    font-size: clamp(50px, 7vw, 86px);
    line-height: .95;
    letter-spacing: -.07em;
}

/* Описание под заголовком контактов. */
.contact-intro > p {
    max-width: 640px;
    margin-top: 30px;
    color: #929b97;
    font-size: 17px;
    line-height: 1.85;
}

/* Строка статуса под описанием. */
.contact-status {
    margin-top: 38px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    color: #707975;
    font-size: 12px;
}

/* Светящаяся точка статуса. */
.contact-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #c7ff4d;
    box-shadow: 0 0 18px rgba(199,255,77,.8);
}

/* Жирная часть статуса. */
.contact-status strong {
    color: #e6ebe8;
    font-size: 14px;
}

/* Техническая терминальная панель справа. */
.contact-terminal {
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 22px;
    background:
        linear-gradient(145deg, rgba(199,255,77,.035), transparent 45%),
        #0d0f10;
    overflow: hidden;
    box-shadow: 0 35px 100px rgba(0,0,0,.36);
}

/* Верхняя строка терминальной панели. */
.contact-terminal-top {
    min-height: 58px;
    padding: 0 19px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,.06);
    color: #66706c;
    font-size: 11px;
    letter-spacing: .08em;
}

/* Три маленькие точки терминала. */
.terminal-dots {
    display: flex;
    gap: 7px;
}

/* Одна точка терминала. */
.terminal-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
}

/* Содержимое терминальной панели. */
.contact-terminal-body {
    padding: 34px;
    display: grid;
    gap: 12px;
    min-height: 315px;
}

/* Комментарий в терминальной стилистике. */
.terminal-comment {
    color: #56615b;
    font-size: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Командная строка. */
.terminal-line {
    margin-top: 6px;
    color: #dfe6e2;
    font-size: 17px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Символ командной строки. */
.terminal-line b {
    color: #c7ff4d;
}

/* Результат выполнения условной команды. */
.terminal-result {
    color: #7f8a84;
    font-size: 13px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Полоса прогресса под командой. */
.terminal-progress {
    height: 6px;
    overflow: hidden;
    margin: 8px 0 14px;
    border-radius: 99px;
    background: rgba(255,255,255,.06);
}

/* Заполнение полосы прогресса. */
.terminal-progress span {
    display: block;
    width: 82%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #c7ff4d, #6fffd8);
    box-shadow: 0 0 20px rgba(199,255,77,.25);
}

/* Список технических каналов. */
.terminal-tech-list {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 2px;
}

/* Отдельный технический тег канала. */
.terminal-tech-list span {
    padding: 8px 11px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 8px;
    color: #abb4af;
    background: rgba(255,255,255,.018);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
}

/* Заголовок секции каналов связи. */
.contact-options-section {
    padding: 40px 0 115px;
}

/* Ряд заголовка каналов. */
.contact-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 45px;
}

/* Большой заголовок контактов. */
.contact-section-heading h2 {
    margin-top: 12px;
    font-size: clamp(42px, 5vw, 62px);
    line-height: .98;
    letter-spacing: -.06em;
}

/* Подсказка справа от заголовка. */
.contact-section-heading > p {
    max-width: 340px;
    color: #737e79;
    font-size: 14px;
    line-height: 1.75;
}

/* Три большие карточки связи. */
.contact-options-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

/* Одна карточка канала связи. */
.contact-option {
    position: relative;
    min-height: 250px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 18px;
    background: #0d0f10;
    overflow: hidden;
    transition: transform .3s ease, border-color .3s ease, background .3s ease;
}

/* Мягкое локальное свечение карточки канала. */
.contact-option::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -120px;
    top: -120px;
    border-radius: 50%;
    background: rgba(199,255,77,.055);
    filter: blur(18px);
    pointer-events: none;
}

/* Наведение на карточку канала. */
.contact-option:hover {
    transform: translateY(-7px);
    border-color: rgba(199,255,77,.25);
    background: #0f1213;
}

/* Большая квадратная иконка канала. */
.contact-option-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    border: 1px solid rgba(199,255,77,.16);
    background: rgba(199,255,77,.05);
    color: #c7ff4d;
    font-size: 16px;
    font-weight: 900;
}

/* Внутренний текст карточки контакта. */
.contact-option-content {
    margin-top: 35px;
}

/* Тип канала. */
.contact-option-content > span {
    color: #5d6762;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .18em;
}

/* Адрес / username канала. */
.contact-option-content strong {
    display: block;
    margin-top: 9px;
    color: #e8ecea;
    font-size: 19px;
    word-break: break-word;
}

/* Описание канала. */
.contact-option-content p {
    max-width: 320px;
    margin-top: 10px;
    color: #77817c;
    font-size: 13px;
    line-height: 1.7;
}

/* Стрелка в углу карточки связи. */
.contact-option-arrow {
    position: absolute;
    right: 22px;
    top: 22px;
    color: #c7ff4d;
    font-size: 18px;
}

/* Нижняя информационная карточка на contact.html. */
.contact-note-section {
    padding: 0 0 115px;
}

/* Общий контейнер с советами для заявки. */
.contact-note {
    padding: 46px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 22px;
    background: rgba(255,255,255,.018);
}

/* Заголовок блока советов. */
.contact-note h2 {
    margin-top: 11px;
    font-size: clamp(32px, 5vw, 52px);
    letter-spacing: -.05em;
}

/* Три совета в нижнем блоке. */
.contact-note-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 30px;
}

/* Один совет. */
.contact-note-grid > div {
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.07);
}

/* Номер совета. */
.contact-note-grid span {
    color: #c7ff4d;
    font-size: 12px;
    font-weight: 800;
}

/* Текст совета. */
.contact-note-grid p {
    margin-top: 10px;
    color: #7b8580;
    font-size: 14px;
    line-height: 1.75;
}

/* Уменьшенная, но всё ещё читаемая версия contact.html на телефоне. */
@media (max-width: 900px) {
    .contact-layout {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .contact-options-grid,
    .contact-note-grid {
        grid-template-columns: 1fr;
    }

    .contact-section-heading {
        display: block;
    }

    .contact-section-heading > p {
        margin-top: 22px;
    }
}

/* Дополнительная адаптация модального окна для небольших экранов. */
@media (max-width: 650px) {
    .service-modal {
        padding: 12px;
    }

    .service-modal-card {
        padding: 31px 22px;
        border-radius: 18px;
        max-height: calc(100vh - 24px);
    }

    .service-modal-description {
        font-size: 15px;
    }

    .service-modal-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .service-modal-footer .button {
        width: 100%;
    }

    .contact-hero {
        padding: 80px 0 65px;
    }

    .contact-intro h1 {
        font-size: 48px;
    }

    .contact-intro > p {
        font-size: 15px;
    }

    .contact-terminal-body {
        padding: 25px;
        min-height: 0;
    }

    .contact-option {
        min-height: 220px;
    }

    .contact-note {
        padding: 30px 22px;
    }
}

/* Уменьшаем движение для пользователей, которые включили системную настройку
   "уменьшение анимации" — это полезно для доступности сайта. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}