<style>
/* ====== SCOPE: Ð¢Ð¾Ð»ÑŒÐºÐ¾ ÑÑ‚Ð° Ñ„Ð¾Ñ€Ð¼Ð° ====== */
.hbspt-form form {
    --hs-gap: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: var(--hs-gap);
    align-items: flex-start !important;
    max-width: 1200px;
}

/* Ð£Ð±Ð¸Ñ€Ð°ÐµÐ¼ Ð²Ð»Ð¸ÑÑŽÑ‰Ð¸Ðµ ÐºÐ¾Ð½Ñ‚ÐµÐ¹Ð½ÐµÑ€Ñ‹ HubSpot, Ñ‡Ñ‚Ð¾Ð±Ñ‹ Ð¿Ð¾Ð»Ñ ÑÑ‚Ð°Ð»Ð¸ flex-ÑÐ»ÐµÐ¼ÐµÐ½Ñ‚Ð°Ð¼Ð¸ */
/* Ð’ÐÐ–ÐÐž: Ð˜ÑÐºÐ»ÑŽÑ‡Ð°ÐµÐ¼ .hs-dependent-field Ð¸Ð· ÑÑ‚Ð¾Ð³Ð¾ Ð¿Ñ€Ð°Ð²Ð¸Ð»Ð°, Ñ‡Ñ‚Ð¾Ð±Ñ‹ ÑƒÐ¿Ñ€Ð°Ð²Ð»ÑÑ‚ÑŒ Ð¸Ð¼ Ð¾Ñ‚Ð´ÐµÐ»ÑŒÐ½Ð¾ */
.hbspt-form form fieldset.form-columns-1,
.hbspt-form form fieldset.form-columns-2 {
    display: contents !important;
}

/* [Ð Ð•Ð¨Ð•ÐÐ˜Ð• 1, Ð§ÐÐ¡Ð¢Ð¬ 1] Ð—Ð°Ð²Ð¸ÑÐ¸Ð¼Ð¾Ðµ Ð¿Ð¾Ð»Ðµ (Ñ‡ÐµÐºÐ±Ð¾ÐºÑ) Ð´Ð¾Ð»Ð¶Ð½Ð¾ Ð·Ð°Ð½Ð¸Ð¼Ð°Ñ‚ÑŒ Ð²ÑÑŽ ÑˆÐ¸Ñ€Ð¸Ð½Ñƒ */
/* Ð­Ñ‚Ð¾ Ð·Ð°ÑÑ‚Ð°Ð²Ð¸Ñ‚ ÐµÐ³Ð¾ Ð¿Ð¾ÑÐ²Ð¸Ñ‚ÑŒÑÑ Ð½Ð° Ð½Ð¾Ð²Ð¾Ð¹ ÑÑ‚Ñ€Ð¾ÐºÐµ Ð¿Ð¾Ð´ ÑÐµÐ»ÐµÐºÑ‚Ð¾Ñ€Ð¾Ð¼ "TYPE OF USE" */
.hbspt-form form .hs-dependent-field {
    flex-basis: 100%;
    margin: 0;
    padding: 0;
}

/* Ð£ÑÑ‚Ð°Ð½Ð°Ð²Ð»Ð¸Ð²Ð°ÐµÐ¼ 2 ÐºÐ¾Ð»Ð¾Ð½ÐºÐ¸ Ð´Ð»Ñ Ð¾ÑÐ½Ð¾Ð²Ð½Ð¾Ð¹ ÑÐµÑ‚ÐºÐ¸ Ð¿Ð¾ ÑƒÐ¼Ð¾Ð»Ñ‡Ð°Ð½Ð¸ÑŽ */
.hbspt-form form .hs-form-field {
    flex: 0 1 calc((100% - var(--hs-gap)) / 2); /* 2 ÐºÐ¾Ð»Ð¾Ð½ÐºÐ¸ */
    margin: 0;
    position: relative;
}

/* ÐŸÐ¾Ð»Ðµ MESSAGE Ð·Ð°Ð½Ð¸Ð¼Ð°ÐµÑ‚ Ð²ÑÑŽ ÑˆÐ¸Ñ€Ð¸Ð½Ñƒ Ð¸ Ð²ÑÐµÐ³Ð´Ð° Ð½Ð°Ñ…Ð¾Ð´Ð¸Ñ‚ÑÑ Ð² ÐºÐ¾Ð½Ñ†Ðµ */
.hbspt-form form .hs_message {
    flex-basis: 100% !important; /* Ð—Ð°Ð½Ð¸Ð¼Ð°ÐµÑ‚ Ð²ÑÑŽ ÑˆÐ¸Ñ€Ð¸Ð½Ñƒ */
    order: 999;                  /* ÐžÐ¿ÑƒÑÐºÐ°ÐµÑ‚ÑÑ Ð²Ð½Ð¸Ð· */
}

/* Ð‘Ð»Ð¾Ðº Ð¾Ñ‚Ð¿Ñ€Ð°Ð²ÐºÐ¸ */
.hbspt-form form .hs_submit {
    flex-basis: 100%;
    order: 1000;                  /* Ð“Ð°Ñ€Ð°Ð½Ñ‚Ð¸Ñ€Ð¾Ð²Ð°Ð½Ð½Ð¾ Ð¿Ð¾ÑÐ»ÐµÐ´Ð½Ð¸Ð¹ */
    margin-top: 12px;
}

/* ====== Ð˜Ð½Ð¿ÑƒÑ‚Ñ‹/ÑÐµÐ»ÐµÐºÑ‚Ñ‹/Ñ‚ÐµÐºÑÑ‚Ð°Ñ€Ð¸Ñ ====== */
/* ÐžÐ±Ñ‰Ð¸Ðµ ÑÑ‚Ð¸Ð»Ð¸ Ð´Ð»Ñ Ð²ÑÐµÑ… Ð¿Ð¾Ð»ÐµÐ¹ Ð²Ð²Ð¾Ð´Ð° */
.hbspt-form form input.hs-input,
.hbspt-form form select.hs-input,
.hbspt-form form textarea.hs-input {
    width: 100% !important;
    background: transparent !important;
    color: #fff !important; /* Ð˜Ð—ÐœÐ•ÐÐ•ÐÐž */
    border: 0 !important;
    border-bottom: 1px solid #fff !important; /* Ð˜Ð—ÐœÐ•ÐÐ•ÐÐž */
    border-radius: 0 !important;
    font-size: 13px !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
}

/* Ð’Ñ‹Ñ€Ð°Ð²Ð½Ð¸Ð²Ð°ÐµÐ¼ Ð²Ñ‹ÑÐ¾Ñ‚Ñƒ Ð¿Ð¾Ð»ÐµÐ¹ input Ð¸ select */
.hbspt-form form input.hs-input,
.hbspt-form form select.hs-input {
    height: 50px;
    box-sizing: border-box;
    padding: 22px 0 12px 0 !important;
}

/* Ð¡Ñ‚Ð¸Ð»Ð¸ Ð´Ð»Ñ textarea Ð²Ñ‹Ð½ÐµÑÐµÐ½Ñ‹ Ð¾Ñ‚Ð´ÐµÐ»ÑŒÐ½Ð¾ */
.hbspt-form form textarea.hs-input {
    min-height: 120px !important;
    resize: vertical;
    padding: 14px 0 !important;
    /* [Ð Ð•Ð¨Ð•ÐÐ˜Ð• 2] Ð”Ð¾Ð±Ð°Ð²Ð»ÑÐµÐ¼ Ð¿ÐµÑ€ÐµÐ½Ð¾Ñ ÑÑ‚Ñ€Ð¾Ðº Ð´Ð»Ñ textarea */
    white-space: pre-wrap !important; /* ÐžÐ±ÐµÑÐ¿ÐµÑ‡Ð¸Ð²Ð°ÐµÑ‚ Ð¿ÐµÑ€ÐµÐ½Ð¾Ñ Ñ‚ÐµÐºÑÑ‚Ð° */
    overflow-wrap: break-word; /* Ð”Ð¾Ð¿Ð¾Ð»Ð½Ð¸Ñ‚ÐµÐ»ÑŒÐ½Ð¾ Ð´Ð»Ñ Ð¿ÐµÑ€ÐµÐ½Ð¾ÑÐ° Ð´Ð»Ð¸Ð½Ð½Ñ‹Ñ… ÑÐ»Ð¾Ð² */
}

.hbspt-form form select.hs-input.is-placeholder {
    color: transparent !important;
}

.hbspt-form form select.hs-input option {
    color: #000; /* ÐžÐ¿Ñ†Ð¸Ð¸ Ð² Ð²Ñ‹Ð¿Ð°Ð´Ð°ÑŽÑ‰ÐµÐ¼ ÑÐ¿Ð¸ÑÐºÐµ Ð¾Ð±Ñ‹Ñ‡Ð½Ð¾ ÑÐ¸ÑÑ‚ÐµÐ¼Ð½Ñ‹Ðµ, Ð¾ÑÑ‚Ð°Ð²Ð»ÑÐµÐ¼ Ñ‡ÐµÑ€Ð½Ñ‹Ð¼Ð¸ Ð´Ð»Ñ Ñ‡Ð¸Ñ‚Ð°ÐµÐ¼Ð¾ÑÑ‚Ð¸ */
}

.hbspt-form form input.hs-input:focus,
.hbspt-form form select.hs-input:focus,
.hbspt-form form textarea.hs-input:focus {
    border-bottom-color: #fff !important; /* Ð˜Ð—ÐœÐ•ÐÐ•ÐÐž */
}

/* ====== Â«Ð›ÐµÐ¹Ð±Ð» ÐºÐ°Ðº Ð¿Ð»ÐµÐ¹ÑÑ…Ð¾Ð»Ð´ÐµÑ€Â» ====== */
.hbspt-form form .hs-form-field > label {
    position: absolute; top: 25px; left: 0; right: 0; color: #fff; /* Ð˜Ð—ÐœÐ•ÐÐ•ÐÐž */
    font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
    line-height: 1; pointer-events: none; user-select: none;
    transition: opacity .18s ease, visibility .18s ease;
}

/* Ð˜ÑÐºÐ»ÑŽÑ‡Ð°ÐµÐ¼ Ð»ÐµÐ¹Ð±Ð» Ð´Ð»Ñ ÐºÐ°ÑÑ‚Ð¾Ð¼Ð½Ð¾Ð³Ð¾ Ñ‡ÐµÐºÐ±Ð¾ÐºÑÐ° Ð¸Ð· ÑÑ‚Ð¾Ð³Ð¾ Ð¿Ñ€Ð°Ð²Ð¸Ð»Ð° */
.hbspt-form form .hs-fieldtype-booleancheckbox > label {
    display: none;
}

/* Ð¡ÐºÑ€Ñ‹Ñ‚ÑŒ Ð»ÐµÐ¹Ð±Ð» Ð¿Ñ€Ð¸ Ñ„Ð¾ÐºÑƒÑÐµ/Ð²Ð²Ð¾Ð´Ðµ/... */
.hbspt-form form .hs-form-field:not(.error):focus-within > label,
.hbspt-form form .hs-form-field:has(input:not(:placeholder-shown)) > label,
.hbspt-form form .hs-form-field:has(textarea:not(:placeholder-shown)) > label,
.hbspt-form form .hs-form-field:has(input:required:valid) > label,
.hbspt-form form .hs-form-field:has(textarea:required:valid) > label,
.hbspt-form form .hs-form-field:has(select option:checked:not([disabled])) > label,
.hbspt-form form .hs-form-field:has(input:-webkit-autofill) > label {
    opacity: 0;
    visibility: hidden;
}

.hbspt-form form .hs-form-field:has(.hs-input.error) > label {
    display: none !important;
}

/* ====== [Ð Ð•Ð¨Ð•ÐÐ˜Ð• 1, Ð§ÐÐ¡Ð¢Ð¬ 2] Ð¡Ñ‚Ð¸Ð»Ð¸Ð·Ð°Ñ†Ð¸Ñ ÐºÐ°ÑÑ‚Ð¾Ð¼Ð½Ð¾Ð³Ð¾ Ñ‡ÐµÐºÐ±Ð¾ÐºÑÐ° ====== */
/* Ð£Ð±Ð¸Ñ€Ð°ÐµÐ¼ Ð»Ð¸ÑˆÐ½Ð¸Ðµ Ð¾Ñ‚ÑÑ‚ÑƒÐ¿Ñ‹ Ð¸ Ð¼Ð°Ñ€ÐºÐµÑ€Ñ‹ ÑÐ¿Ð¸ÑÐºÐ° */
.hbspt-form form .inputs-list {
    list-style-type: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ÐšÐ¾Ð½Ñ‚ÐµÐ¹Ð½ÐµÑ€ Ð´Ð»Ñ Ñ‡ÐµÐºÐ±Ð¾ÐºÑÐ° Ð¸ Ñ‚ÐµÐºÑÑ‚Ð° */
.hbspt-form form .hs-fieldtype-booleancheckbox .inputs-list li {
    display: flex;
    align-items: center;
    gap: 12px; /* Ð Ð°ÑÑÑ‚Ð¾ÑÐ½Ð¸Ðµ Ð¼ÐµÐ¶Ð´Ñƒ Ñ‡ÐµÐºÐ±Ð¾ÐºÑÐ¾Ð¼ Ð¸ Ñ‚ÐµÐºÑÑ‚Ð¾Ð¼ */
}

/* Ð¡ÐºÑ€Ñ‹Ð²Ð°ÐµÐ¼ Ð¾Ñ€Ð¸Ð³Ð¸Ð½Ð°Ð»ÑŒÐ½Ñ‹Ð¹ Ð¸Ð½Ð¿ÑƒÑ‚ Ñ‡ÐµÐºÐ±Ð¾ÐºÑÐ° */
.hbspt-form form .hs-fieldtype-booleancheckbox input[type="checkbox"] {
    display: none;
}

/* Ð¢ÐµÐºÑÑ‚ Ñ€ÑÐ´Ð¾Ð¼ Ñ Ñ‡ÐµÐºÐ±Ð¾ÐºÑÐ¾Ð¼ */
.hbspt-form form .hs-fieldtype-booleancheckbox label span {
    color: #fff; /* Ð˜Ð—ÐœÐ•ÐÐ•ÐÐž */
    font-size: 13px;
    cursor: pointer;
}

/* Ð Ð¸ÑÑƒÐµÐ¼ ÐºÐ°ÑÑ‚Ð¾Ð¼Ð½Ñ‹Ð¹ Ñ‡ÐµÐºÐ±Ð¾ÐºÑ Ñ Ð¿Ð¾Ð¼Ð¾Ñ‰ÑŒÑŽ Ð¿ÑÐµÐ²Ð´Ð¾ÑÐ»ÐµÐ¼ÐµÐ½Ñ‚Ð° */
.hbspt-form form .hs-fieldtype-booleancheckbox label span::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid #fff; /* Ð˜Ð—ÐœÐ•ÐÐ•ÐÐž */
    background-color: transparent;
    vertical-align: middle;
    margin-right: 12px; /* ÐžÑ‚ÑÑ‚ÑƒÐ¿ ÑÐ¿Ñ€Ð°Ð²Ð° Ð¾Ñ‚ Ñ‡ÐµÐºÐ±Ð¾ÐºÑÐ° */
    transition: background-color 0.2s ease;
}

/* Ð Ð¸ÑÑƒÐµÐ¼ "Ð³Ð°Ð»Ð¾Ñ‡ÐºÑƒ" Ð¿Ñ€Ð¸ Ð²Ñ‹Ð±Ð¾Ñ€Ðµ Ñ‡ÐµÐºÐ±Ð¾ÐºÑÐ° */
.hbspt-form form .hs-fieldtype-booleancheckbox input[type="checkbox"]:checked + span::before {
    background-color: #fff; /* Ð˜Ð—ÐœÐ•ÐÐ•ÐÐž */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); /* Ð˜Ð—ÐœÐ•ÐÐ•ÐÐž Ñ†Ð²ÐµÑ‚ Ð³Ð°Ð»Ð¾Ñ‡ÐºÐ¸ Ð½Ð° Ñ‡ÐµÑ€Ð½Ñ‹Ð¹ */
    background-position: center;
    background-repeat: no-repeat;
    background-size: 14px 14px;
}


/* ====== ÐžÑˆÐ¸Ð±ÐºÐ¸ ====== */
.hbspt-form form .hs-error-msgs {
    position: absolute;
    top: 50px; left: 0; margin: 0 !important; padding: 0 !important;
}

.hbspt-form form .hs-error-msgs ul,
.hbspt-form form .hs-error-msgs li {
    list-style: none !important; margin: 0 !important; padding: 0 !important;
}
.hbspt-form form .hs-error-msg {
    color: #ff4747 !important; font-size: 12px !important;
}

/* ====== ÐšÐ½Ð¾Ð¿ÐºÐ° ====== */
.hbspt-form form .actions {
    width: 270px !important;
    margin: 0 auto !important;
    margin: 20px auto 0 0 !important;
    padding: 0 !important;
}
.hbspt-form form .hs-button {
    width: 100% !important;
    height: 54px !important; line-height: 54px !important;
    background: #ffff00 !important; /* Ð˜Ð—ÐœÐ•ÐÐ•ÐÐž */
    color: #000 !important; /* Ð˜Ð—ÐœÐ•ÐÐ•ÐÐž */
    border: none !important;
    border-radius: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    font-size: 14px !important;
    cursor: pointer !important;
    text-align: center;
    margin-top: 25px;
}

/* ====== ÐÐ´Ð°Ð¿Ñ‚Ð¸Ð² ====== */
@media (max-width: 600px) {
    .hbspt-form form .hs-form-field {
        flex-basis: 100%; /* 1 ÐºÐ¾Ð»Ð¾Ð½ÐºÐ° */
    }
}


.hs_i_acknowledge_that_data_packages_start_from__5_000.hs-i_acknowledge_that_data_packages_start_from__5_000.hs-fieldtype-booleancheckbox.field.hs-form-field {
    width: 50%;
    margin-top: 4px;
    margin-right: 10px;
}

/* ====== «Лейбл как плейсхолдер» (Улучшенная версия с Floating Label для белой формы) ====== */
/* Этот блок заменяет все предыдущие стили для лейблов-плейсхолдеров */

/* Позиция лейбла по умолчанию (выглядит как плейсхолдер) */
.hbspt-form form .hs-form-field > label {
    position: absolute;
    top: 25px;
    left: 0;
    right: 0;
    color: #fff; /* ИЗМЕНЕНО: Основной цвет текста - белый */
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1;
    pointer-events: none;
    user-select: none;
    transform: translateY(-50%); /* Для более точного вертикального центрирования */
    transition: top .2s ease, font-size .2s ease, transform .2s ease, color .2s ease;
}

/* Исключаем лейбл для кастомного чекбокса, как и раньше */
.hbspt-form form .hs-fieldtype-booleancheckbox > label {
    display: none;
}

/* "Активное" состояние лейбла (когда он "всплывает") */
/* Это происходит при фокусе или когда в поле есть значение. */
.hbspt-form form .hs-form-field:focus-within > label,
.hbspt-form form .hs-form-field:has(input:not(:placeholder-shown)) > label,
.hbspt-form form .hs-form-field:has(textarea:not(:placeholder-shown)) > label,
.hbspt-form form .hs-form-field:has(select:not(.is-placeholder)) > label,
.hbspt-form form .hs-form-field:has(input:-webkit-autofill) > label {
    top: 8px; /* Поднимаем лейбл вверх */
    font-size: 10px; /* Уменьшаем шрифт */
    transform: translateY(0); /* Сбрасываем центрирование */
    color: rgba(255, 255, 255, 0.75); /* УЛУЧШЕНИЕ: Делаем цвет чуть менее ярким для визуального акцента */
}

/* Убедимся, что лейбл при ошибке остается видимым и "всплывшим" */
.hbspt-form form .hs-form-field:has(.hs-input.error) > label {
    display: block !important;
    top: 8px;
    font-size: 10px;
    transform: translateY(0);
    color: rgba(255, 255, 255, 0.75);
}

</style>