/* ============================================================
   NORMA CS — ДЕМО-ДОСТУП: КОНТЕНТНАЯ ЧАСТЬ
   Подключать после общих стилей шаблона.
   Все правила ограничены .demo-landing / .demo-landing-modal.
   ============================================================ */

.demo-landing {
    --demo-primary: #009ae0;
    --demo-primary-dark: #007bb5;
    --demo-accent: #64c425;
    --demo-accent-dark: #50ab18;
    --demo-text: #1a2a3a;
    --demo-text-muted: #587083;
    --demo-text-light: #7f929f;
    --demo-line: #dfe7ee;
    --demo-soft: #f7fbfd;
    --demo-success: #218838;
    color: var(--demo-text);
    padding-bottom: 25px;
}

.demo-landing *,
.demo-landing *::before,
.demo-landing *::after {
    box-sizing: border-box;
}

.demo-landing .demo-hero,
.demo-landing .demo-card,
.demo-landing .demo-step,
.demo-landing .demo-proof,
.demo-landing .demo-faq {
    background: #fff;
    border: 1px solid var(--demo-line);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(36, 63, 92, 0.08);
}

.demo-landing .demo-hero {
    padding: 42px 40px;
    margin: 30px 0 58px;
    background: linear-gradient(140deg, #fff 0%, #f5fbfd 100%);
}

.demo-landing .page-title-left {
    margin: 0 0 21px;
    font-size: 42px;
    font-weight: 500;
    line-height: 1.18;
    color: var(--demo-text);
}

.demo-landing .page-title-left span {
    color: var(--demo-accent);
}

.demo-landing .demo-eyebrow {
    display: inline-block;
    margin: 0 0 13px;
    color: #16859c;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.demo-landing .demo-lead {
    max-width: 690px;
    margin: 0 0 27px;
    color: #4d6275;
    font-size: 19px;
    line-height: 1.58;
}

.demo-landing .demo-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 24px;
    margin-bottom: 28px;
}

.demo-landing .btn-demo-download,
.demo-landing .btn-demo-hero-form,
.demo-landing .btn-demo-start,
.demo-landing .btn-demo-submit,
.demo-landing .btn-demo-success-secondary,
.demo-landing .btn-download-step {
    text-decoration: none;
    border: 0;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}

.demo-landing .btn-demo-download,
.demo-landing .btn-demo-hero-form {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 13px 25px;
    color: #fff !important;
    background: var(--demo-primary);
    border-radius: 8px;
    font-size: 17px;
    font-weight: 700;
}

.demo-landing .btn-demo-download:hover,
.demo-landing .btn-demo-download:focus,
.demo-landing .btn-demo-hero-form:hover,
.demo-landing .btn-demo-hero-form:focus {
    color: #fff !important;
    background: var(--demo-primary-dark);
    box-shadow: 0 5px 16px rgba(0, 154, 224, .32);
    text-decoration: none;
    transform: translateY(-2px);
}

.demo-landing .demo-download-icon {
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
}

.demo-landing .demo-secondary-link,
.demo-landing .step-anchor-link,
.demo-landing .faq-modal-link,
.demo-landing .demo-inline-button {
    color: #087eaa;
    border: 0;
    padding: 0;
    font: inherit;
    font-weight: 600;
    line-height: 1.45;
    text-decoration: underline;
    text-underline-offset: 3px;
    background: transparent;
    cursor: pointer;
}

.demo-landing .demo-secondary-link:hover,
.demo-landing .demo-secondary-link:focus,
.demo-landing .step-anchor-link:hover,
.demo-landing .step-anchor-link:focus,
.demo-landing .faq-modal-link:hover,
.demo-landing .faq-modal-link:focus,
.demo-landing .demo-inline-button:hover,
.demo-landing .demo-inline-button:focus {
    color: var(--demo-accent-dark);
    text-decoration: none;
}

.demo-landing .demo-trust-list {
    display: grid;
    gap: 10px;
    max-width: 700px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--demo-text-muted);
    font-size: 15px;
    line-height: 1.4;
}

.demo-landing .demo-trust-list li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.demo-landing .demo-trust-list i {
    margin-top: 2px;
    color: var(--demo-accent);
}

.demo-landing .demo-start-card {
    height: 100%;
    padding: 30px;
    color: var(--demo-text);
    background: #fff;
    border: 1px solid #dcebf0;
    border-radius: 10px;
    box-shadow: 0 5px 18px rgba(36, 63, 92, .07);
}

.demo-landing .demo-start-card-label {
    margin: 0 0 18px;
    font-size: 21px;
    font-weight: 600;
}

.demo-landing .demo-start-list {
    display: grid;
    gap: 13px;
    margin: 0 0 19px;
    padding: 0;
    list-style: none;
    counter-reset: demo-start-counter;
}

.demo-landing .demo-start-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #344c60;
    font-size: 16px;
    line-height: 1.35;
}

.demo-landing .demo-start-list span {
    display: inline-flex;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: #fff;
    background: var(--demo-accent);
    border-radius: 50%;
    font-size: 15px;
    font-weight: 700;
}

.demo-landing .demo-start-note {
    margin: 0 0 20px;
    color: var(--demo-text-light);
    font-size: 14px;
    line-height: 1.48;
}

.demo-landing .btn-demo-start {
    display: block;
    width: 100%;
    padding: 12px 18px;
    color: var(--demo-primary) !important;
    border: 1px solid var(--demo-primary);
    border-radius: 8px;
    background: #fff;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
}

.demo-landing .btn-demo-start:hover,
.demo-landing .btn-demo-start:focus {
    color: #fff !important;
    background: var(--demo-primary);
    text-decoration: none;
}

.demo-landing .demo-section-title {
    margin: 0 0 36px;
    color: var(--demo-text);
    font-size: 30px;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
}

.demo-landing .demo-process {
    margin: 0 0 60px;
}

.demo-landing .demo-steps-with-arrows {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.demo-landing .demo-steps-with-arrows > [class*="col-"] {
    display: flex;
    position: relative;
    padding-right: 26px;
    padding-left: 26px;
}

.demo-landing .demo-steps-with-arrows > [class*="col-"]:not(:last-child)::after {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: -13px;
    width: 28px;
    height: 28px;
    color: var(--demo-primary);
    background: #fff;
    border-radius: 50%;
    content: "→";
    font-size: 25px;
    font-weight: 700;
    line-height: 26px;
    text-align: center;
    transform: translateY(-50%);
}

.demo-landing .demo-step {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    width: 100%;
    min-height: 270px;
    padding: 30px 26px 26px;
}

.demo-landing .demo-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-bottom: 16px;
    color: #fff;
    background: var(--demo-accent);
    border-radius: 50%;
    font-size: 16px;
    font-weight: 700;
}

.demo-landing .demo-step h3 {
    margin: 0 0 12px;
    color: var(--demo-text);
    font-size: 21px;
    font-weight: 600;
    line-height: 1.25;
}

.demo-landing .demo-step p {
    margin: 0 0 10px;
    color: var(--demo-text-muted);
    font-size: 16px;
    line-height: 1.5;
}

.demo-landing .demo-step .demo-step-small {
    margin-bottom: 15px;
    font-size: 14px;
}

.demo-landing .server-address {
    display: inline-block;
    width: fit-content;
    margin: 1px 0 12px;
    padding: 5px 8px;
    color: #087eaa;
    background: #eef8fa;
    border: 1px solid #d2e9ee;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 700;
}

.demo-landing .demo-step .btn-download-step,
.demo-landing .demo-step .step-anchor-link {
    align-self: flex-start;
    margin-top: auto;
}

.demo-landing .btn-download-step {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 9px 15px;
    color: #fff !important;
    background: var(--demo-primary);
    border-radius: 7px;
    font-size: 15px;
    font-weight: 700;
}

.demo-landing .btn-download-step:hover,
.demo-landing .btn-download-step:focus {
    color: #fff !important;
    background: var(--demo-primary-dark);
    text-decoration: none;
}

.demo-landing .demo-form-section {
    margin: 0 0 60px;
}

.demo-landing .demo-card {
    padding: 38px 40px;
    border-top: 4px solid var(--demo-primary);
}

.demo-landing .demo-form-heading {
    max-width: 760px;
    margin: 0 auto 25px;
    text-align: center;
}

.demo-landing .demo-form-heading h2 {
    margin: 0 0 13px;
    color: var(--demo-text);
    font-size: 30px;
    font-weight: 500;
    line-height: 1.25;
}

.demo-landing .demo-form-heading p:last-child {
    margin: 0;
    color: var(--demo-text-muted);
    font-size: 16px;
    line-height: 1.55;
}

.demo-landing .demo-form-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 760px;
    margin: 0 auto 30px;
    padding: 14px 16px;
    color: #456073;
    background: #f2f9fb;
    border: 1px solid #d4eaf0;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
}

.demo-landing .demo-form-note i {
    margin-top: 2px;
    color: var(--demo-primary);
    font-size: 18px;
}

.demo-landing .demo-form-note p {
    margin: 0;
}

.demo-landing .demo-lead-form {
    max-width: 860px;
    margin: 0 auto;
}

.demo-landing .demo-form-fieldset {
    min-width: 0;
    margin: 0 0 28px;
    padding: 25px 25px 8px;
    border: 1px solid var(--demo-line);
    border-radius: 9px;
}

.demo-landing .demo-form-fieldset--primary {
    border-color: #bcddea;
    background: linear-gradient(180deg, #fbfeff 0%, #fff 100%);
}

.demo-landing .demo-form-fieldset--optional {
    background: #fcfdfe;
}

.demo-landing .demo-form-fieldset legend {
    width: auto;
    margin: 0;
    padding: 0 8px;
    color: var(--demo-text);
    border: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
}

.demo-landing .demo-form-fieldset legend span {
    color: var(--demo-text-light);
    font-size: 13px;
    font-weight: 400;
}

.demo-landing .demo-required-note {
    margin: -1px 0 18px;
    color: var(--demo-text-light);
    font-size: 13px;
}

.demo-landing .demo-required-note span,
.demo-landing .demo-field label > span,
.demo-landing .demo-label + .demo-radio-group + .demo-field-error + span {
    color: #d94141;
}

.demo-landing .demo-field {
    margin-bottom: 20px;
}

.demo-landing .demo-field label,
.demo-landing .demo-label {
    display: block;
    margin: 0 0 7px;
    color: #31495d;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}

.demo-landing .demo-field input[type="text"],
.demo-landing .demo-field input[type="email"],
.demo-landing .demo-field input[type="tel"],
.demo-landing .demo-field select,
.demo-landing .demo-field textarea {
    display: block;
    width: 100%;
    min-height: 45px;
    padding: 10px 12px;
    color: var(--demo-text);
    background: #fff;
    border: 1px solid #c9d8e0;
    border-radius: 6px;
    box-shadow: none;
    font: inherit;
    font-size: 16px;
    line-height: 1.35;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.demo-landing .demo-field textarea {
    min-height: 88px;
    resize: vertical;
}

.demo-landing .demo-field select {
    cursor: pointer;
}

.demo-landing .demo-field input:focus,
.demo-landing .demo-field select:focus,
.demo-landing .demo-field textarea:focus {
    border-color: var(--demo-primary);
    box-shadow: 0 0 0 3px rgba(0, 154, 224, .12);
}

.demo-landing .demo-field input[aria-invalid="true"],
.demo-landing .demo-field select[aria-invalid="true"],
.demo-landing .demo-field textarea[aria-invalid="true"] {
    border-color: #d94141;
}

.demo-landing .demo-field-hint {
    display: block;
    margin: 6px 0 0;
    color: var(--demo-text-light);
    font-size: 13px;
    line-height: 1.4;
}

.demo-landing .demo-field-error {
    display: block;
    min-height: 0;
    margin-top: 5px;
    color: #c62828;
    font-size: 13px;
    line-height: 1.35;
}

.demo-landing .demo-radio-group {
    display: grid;
    gap: 10px;
}

.demo-landing .demo-radio,
.demo-landing .demo-check {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0;
    color: #40576a;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    cursor: pointer;
}

.demo-landing .demo-radio input,
.demo-landing .demo-check input {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin: 2px 0 0;
    accent-color: var(--demo-primary);
    cursor: pointer;
}

.demo-landing .demo-connection-id-field {
    margin-top: 21px;
    padding: 18px;
    background: #f4fbfd;
    border: 1px solid #d6ebf0;
    border-radius: 8px;
}

.demo-landing .demo-connection-id-field[hidden],
.demo-landing .demo-captcha-wrap[hidden],
.demo-landing .demo-form-success[hidden],
.demo-landing #demo-task-other-wrap[hidden] {
    display: none !important;
}

.demo-landing .demo-check-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px 20px;
}

.demo-landing .demo-consent {
    margin: 0 0 21px;
}

.demo-landing .demo-check--consent {
    color: #536b7d;
    font-size: 13px;
}

.demo-landing .demo-check--consent a {
    color: #087eaa;
    text-decoration: underline;
}

.demo-landing .demo-captcha-wrap {
    margin: 0 0 20px;
    padding: 17px;
    background: #fffdf4;
    border: 1px solid #eee0a7;
    border-radius: 8px;
}

.demo-landing .demo-captcha-message {
    margin: 0 0 11px;
    color: #63551e;
    font-size: 14px;
}

.demo-landing .demo-form-actions {
    text-align: center;
}

.demo-landing .btn-demo-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 260px;
    min-height: 52px;
    padding: 13px 28px;
    color: #fff;
    background: var(--demo-primary);
    border-radius: 8px;
    font-size: 17px;
    font-weight: 700;
}

.demo-landing .btn-demo-submit:hover:not(:disabled),
.demo-landing .btn-demo-submit:focus:not(:disabled) {
    background: var(--demo-primary-dark);
    box-shadow: 0 5px 16px rgba(0, 154, 224, .32);
    transform: translateY(-2px);
}

.demo-landing .btn-demo-submit:disabled {
    opacity: .72;
    cursor: not-allowed;
}

.demo-landing .demo-submit-loader {
    display: none;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: demo-spinner .7s linear infinite;
}

.demo-landing .btn-demo-submit.is-loading .demo-submit-loader {
    display: block;
}

@keyframes demo-spinner {
    to { transform: rotate(360deg); }
}

.demo-landing .demo-form-status {
    min-height: 20px;
    margin: 12px 0 0;
    color: #c62828;
    font-size: 14px;
    line-height: 1.4;
}

.demo-landing .demo-form-success {
    max-width: 720px;
    margin: 10px auto 0;
    padding: 32px 25px;
    color: #315244;
    background: #f3fbef;
    border: 1px solid #cfe7c0;
    border-radius: 10px;
    text-align: center;
}

.demo-landing .demo-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 13px;
    color: #fff;
    background: var(--demo-accent);
    border-radius: 50%;
    font-size: 23px;
}

.demo-landing .demo-form-success h2 {
    margin: 0 0 12px;
    color: #2b4d3e;
    font-size: 27px;
    font-weight: 600;
}

.demo-landing .demo-form-success p {
    max-width: 600px;
    margin: 0 auto 22px;
    font-size: 16px;
    line-height: 1.55;
}

.demo-landing .demo-success-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px 22px;
}

.demo-landing .btn-demo-success-secondary {
    padding: 10px 16px;
    color: #2b7944;
    background: #fff;
    border: 1px solid #72b98c;
    border-radius: 7px;
    font-size: 15px;
    font-weight: 700;
}

.demo-landing .btn-demo-success-secondary:hover,
.demo-landing .btn-demo-success-secondary:focus {
    color: #fff;
    background: #3c9d5f;
}

.demo-landing .demo-proof-fullwidth {
    margin: 0 0 58px;
}

.demo-landing .demo-proof {
    padding: 43px 25px 30px;
}

.demo-landing .demo-proof .demo-section-title {
    margin-bottom: 27px;
}

.demo-landing .demo-metrics {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin: 0;
    border-top: 1px solid #e7eef2;
    border-bottom: 1px solid #e7eef2;
}

.demo-landing .demo-metrics > .col-sm-3 {
    display: flex;
    padding: 0;
}

.demo-landing .demo-metric {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 25px 19px;
}

.demo-landing .demo-metrics > .col-sm-3:not(:last-child) .demo-metric {
    border-right: 1px solid #e7eef2;
}

.demo-landing .demo-metric-icon {
    display: inline-flex;
    flex: 0 0 56px;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    color: var(--demo-accent);
    background: #f3faef;
    border: 1px solid #dcefd0;
    border-radius: 10px;
    font-size: 24px;
}

.demo-landing .demo-metrics > .col-sm-3:nth-child(even) .demo-metric-icon {
    color: var(--demo-primary);
    background: #f1f9fb;
    border-color: #d5ebf0;
}

.demo-landing .demo-metric-content {
    min-width: 0;
}

.demo-landing .demo-metric-content strong {
    display: block;
    margin-bottom: 4px;
    color: var(--demo-text);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.15;
}

.demo-landing .demo-metric-content span {
    display: block;
    color: var(--demo-text-light);
    font-size: 13px;
    line-height: 1.36;
}

.demo-landing .demo-faq {
    max-width: 1040px;
    margin: 0 auto 60px;
    padding: 43px 35px;
}

.demo-landing .demo-faq .demo-section-title {
    margin-bottom: 27px;
}

.demo-landing .accordion-classic {
    overflow: hidden;
    border: 1px solid var(--demo-line);
    border-radius: 8px;
}

.demo-landing .accordion-item {
    border-bottom: 1px solid var(--demo-line);
    background: #fff;
}

.demo-landing .accordion-item:last-child {
    border-bottom: 0;
}

.demo-landing .accordion-item.active {
    background: #f8fcfd;
}

.demo-landing .accordion-header {
    position: relative;
    display: block;
    width: 100%;
    padding: 18px 57px 18px 22px;
    color: #294155;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.38;
    text-align: left;
    cursor: pointer;
}

.demo-landing .accordion-header:hover,
.demo-landing .accordion-header:focus {
    color: #087eaa;
    outline: none;
}

.demo-landing .accordion-header::after {
    position: absolute;
    top: 50%;
    right: 22px;
    color: var(--demo-primary);
    content: "+";
    font-size: 27px;
    font-weight: 400;
    line-height: 1;
    transform: translateY(-50%);
}

.demo-landing .accordion-header[aria-expanded="true"]::after {
    content: "−";
}

.demo-landing .accordion-body {
    padding: 0 22px 20px;
    color: var(--demo-text-muted);
    font-size: 16px;
    line-height: 1.58;
}

.demo-landing .accordion-body p {
    margin: 0 0 12px;
}

.demo-landing .accordion-body p:last-child {
    margin-bottom: 0;
}

.demo-landing .demo-final {
    margin: 0 0 25px;
    padding: 45px 55px;
    background: var(--demo-accent);
    border-radius: 12px;
}

.demo-landing .demo-final-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    max-width: 1030px;
    margin: 0 auto;
}

.demo-landing .demo-final-text {
    max-width: 600px;
}

.demo-landing .demo-final-text h2 {
    margin: 0 0 11px;
    color: #fff;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2;
}

.demo-landing .demo-final-text p {
    margin: 0;
    color: rgba(255,255,255,.93);
    font-size: 16px;
    line-height: 1.52;
}

.demo-landing .demo-final-buttons {
    display: flex;
    flex: 0 0 255px;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

.demo-landing .demo-final .btn-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 51px;
    padding: 13px 20px;
    color: var(--demo-accent) !important;
    background: #fff !important;
    border-color: #fff !important;
    border-radius: 8px;
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

.demo-landing .demo-final .btn-info:hover,
.demo-landing .demo-final .btn-info:focus {
    color: var(--demo-accent-dark) !important;
    box-shadow: 0 5px 15px rgba(0,0,0,.15);
    text-decoration: none;
    transform: translateY(-2px);
}

.demo-landing .demo-final .demo-help-link {
    color: #fff;
    font-size: 15px;
    text-align: center;
}

.demo-landing .demo-final .demo-help-link:hover,
.demo-landing .demo-final .demo-help-link:focus {
    color: #fff;
}

.demo-landing .demo-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* Модальное окно с инструкцией: область видимости ограничена этим модальным окном. */
.demo-landing-modal .modal-header {
    padding: 20px 25px;
    background: #f7fbfd;
    border-bottom: 1px solid #e0edf2;
}

.demo-landing-modal .modal-title {
    margin: 0;
    color: var(--demo-text);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
}

.demo-landing-modal .modal-header .close {
    font-size: 28px;
    opacity: .6;
}

.demo-landing-modal .modal-header .close:hover {
    opacity: 1;
}

.demo-landing-modal .modal-body {
    padding: 27px 30px;
}

.demo-landing-modal .instruction-step {
    display: flex;
    gap: 17px;
    margin-bottom: 25px;
    padding-bottom: 23px;
    border-bottom: 1px solid #e8f0f3;
}

.demo-landing-modal .instruction-step:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.demo-landing-modal .step-number {
    display: inline-flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: #fff;
    background: var(--demo-accent);
    border-radius: 50%;
    font-size: 17px;
    font-weight: 700;
}

.demo-landing-modal .step-content {
    flex: 1;
}

.demo-landing-modal .step-content p {
    margin: 0 0 10px;
    color: var(--demo-text-muted);
    font-size: 15px;
    line-height: 1.6;
}

.demo-landing-modal .step-content code {
    padding: 3px 8px;
    color: #087eaa;
    background: #f0f7fa;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
}

.demo-landing-modal .image-caption {
    color: var(--demo-text-light) !important;
    font-size: 13px !important;
    font-style: italic;
}

.demo-landing-modal .modal-footer {
    padding: 15px 25px;
    background: #f7fbfd;
    border-top: 1px solid #e0edf2;
}

.demo-landing-modal .btn-defaultt {
    color: #fff;
    background: var(--demo-accent);
    border-color: var(--demo-accent);
}

.demo-landing-modal .btn-defaultt:hover,
.demo-landing-modal .btn-defaultt:focus {
    color: #fff;
    background: var(--demo-accent-dark);
    border-color: var(--demo-accent-dark);
}

@media (max-width: 1199px) {
    .demo-landing .demo-hero {
        padding: 35px 30px;
    }

    .demo-landing .page-title-left {
        font-size: 36px;
    }

    .demo-landing .demo-step {
        min-height: 295px;
        padding-right: 21px;
        padding-left: 21px;
    }

    .demo-landing .demo-steps-with-arrows > [class*="col-"] {
        padding-right: 18px;
        padding-left: 18px;
    }

    .demo-landing .demo-final {
        padding: 42px 40px;
    }
}

@media (max-width: 991px) {
    .demo-landing .demo-hero {
        padding: 30px 25px;
    }

    .demo-landing .demo-start-card {
        margin-top: 25px;
    }

    .demo-landing .demo-steps-with-arrows > [class*="col-"] {
        padding-right: 13px;
        padding-left: 13px;
    }

    .demo-landing .demo-step {
        min-height: 320px;
        padding: 24px 18px;
    }

    .demo-landing .demo-step h3 {
        font-size: 19px;
    }

    .demo-landing .demo-step p {
        font-size: 15px;
    }

    .demo-landing .demo-metric {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 21px 13px;
    }

    .demo-landing .demo-metric-content strong {
        font-size: 18px;
    }

    .demo-landing .demo-final-content {
        gap: 25px;
    }
}

@media (max-width: 767px) {
    .demo-landing {
        padding-bottom: 15px;
    }

    .demo-landing .demo-hero {
        padding: 27px 19px;
        margin-top: 15px;
        margin-bottom: 38px;
    }

    .demo-landing .page-title-left {
        font-size: 29px;
        text-align: left;
    }

    .demo-landing .demo-lead {
        font-size: 16px;
    }

    .demo-landing .demo-hero-actions {
        align-items: stretch;
        gap: 15px;
    }

    .demo-landing .btn-demo-download,
    .demo-landing .btn-demo-hero-form {
        width: 100%;
    }

    .demo-landing .demo-secondary-link {
        text-align: center;
    }

    .demo-landing .demo-start-card {
        padding: 24px 20px;
    }

    .demo-landing .demo-section-title {
        margin-bottom: 27px;
        font-size: 25px;
    }

    .demo-landing .demo-process,
    .demo-landing .demo-form-section,
    .demo-landing .demo-proof-fullwidth,
    .demo-landing .demo-faq {
        margin-bottom: 42px;
    }

    .demo-landing .demo-steps-with-arrows > [class*="col-"] {
        display: block;
        padding-right: 15px;
        padding-bottom: 40px;
        padding-left: 15px;
    }

    .demo-landing .demo-steps-with-arrows > [class*="col-"]:last-child {
        padding-bottom: 0;
    }

    .demo-landing .demo-steps-with-arrows > [class*="col-"]:not(:last-child)::after {
        top: auto;
        right: auto;
        bottom: 5px;
        left: 50%;
        content: "↓";
        transform: translateX(-50%);
    }

    .demo-landing .demo-step {
        min-height: auto;
        padding: 23px 20px;
    }

    .demo-landing .demo-step .btn-download-step,
    .demo-landing .demo-step .step-anchor-link {
        margin-top: 12px;
    }

    .demo-landing .demo-card {
        padding: 27px 18px;
    }

    .demo-landing .demo-form-heading h2 {
        font-size: 25px;
    }

    .demo-landing .demo-form-fieldset {
        padding: 20px 15px 4px;
    }

    .demo-landing .demo-form-fieldset legend {
        font-size: 18px;
    }

    .demo-landing .demo-check-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .demo-landing .btn-demo-submit {
        width: 100%;
    }

    .demo-landing .demo-proof {
        padding: 30px 18px 18px;
    }

    .demo-landing .demo-metrics {
        display: block;
    }

    .demo-landing .demo-metrics > .col-sm-3 {
        display: block;
    }

    .demo-landing .demo-metrics > .col-sm-3:not(:last-child) .demo-metric {
        border-right: 0;
        border-bottom: 1px solid #e7eef2;
    }

    .demo-landing .demo-metric {
        flex-direction: row;
        align-items: center;
        padding: 18px 6px;
    }

    .demo-landing .demo-faq {
        padding: 30px 18px;
    }

    .demo-landing .accordion-header {
        padding: 16px 48px 16px 16px;
        font-size: 16px;
    }

    .demo-landing .accordion-header::after {
        right: 16px;
    }

    .demo-landing .accordion-body {
        padding: 0 16px 17px;
        font-size: 15px;
    }

    .demo-landing .demo-final {
        padding: 34px 22px;
    }

    .demo-landing .demo-final-content {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .demo-landing .demo-final-text h2 {
        font-size: 26px;
    }

    .demo-landing .demo-final-buttons {
        flex-basis: auto;
        width: 100%;
    }

    .demo-landing-modal .modal-body {
        padding: 22px 17px;
    }

    .demo-landing-modal .instruction-step {
        gap: 12px;
    }

    .demo-landing-modal .step-number {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
        font-size: 15px;
    }
}


/* =====================================================================
   NormaCS — быстрые правки страницы демо-доступа
   Дописать В КОНЕЦ файла /assets/template/css/NormaCS_download_css-4.css
   (порядок важен: блок должен идти после существующих медиазапросов).

   Почему нужен !important: в /assets/template/css/theme-styles.css
   внутри @media screen and (max-width:550px) объявлено
       .page-header h2, h1 { font-size: 3em !important }
       h2               { font-size: 2.25em !important }
   Эти правила перебивают адаптивные размеры лендинга, поэтому
   заголовки на телефоне становятся крупнее, чем на десктопе.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Состояния валидации и отправки (используются в demo-2.js)
   --------------------------------------------------------------------- */

.demo-landing .demo-lead-form input.has-error,
.demo-landing .demo-lead-form select.has-error,
.demo-landing .demo-lead-form textarea.has-error {
    border-color: #d64545;
    background-color: #fdf6f6;
    box-shadow: 0 0 0 3px rgba(214, 69, 69, .12);
}

.demo-landing .demo-field-error {
    display: block;
    min-height: 0;
    margin-top: 6px;
    color: #c53030;
    font-size: 13px;
    line-height: 1.35;
}

.demo-landing .demo-field-error:empty {
    display: none;
}

.demo-landing .demo-form-status {
    margin: 12px 0 0;
    color: #16859c;
    font-size: 14px;
    line-height: 1.4;
}

.demo-landing .demo-form-status.is-error {
    color: #c53030;
}

.demo-landing .btn-demo-submit[disabled] {
    opacity: .65;
    cursor: progress;
}

/* ---------------------------------------------------------------------
   2. Увеличенные зоны нажатия у радио и чекбоксов
      Сейчас высота элементов 17 px — меньше минимальных 44 px.
   --------------------------------------------------------------------- */

.demo-landing .demo-radio,
.demo-landing .demo-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 44px;
    padding: 10px 8px;
    margin: 0;
    border-radius: 8px;
    cursor: pointer;
}

.demo-landing .demo-radio:hover,
.demo-landing .demo-check:hover {
    background: #f5fbfd;
}

.demo-landing .demo-radio input[type="radio"],
.demo-landing .demo-check input[type="checkbox"] {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin: 1px 0 0;
}

.demo-landing .demo-radio > span,
.demo-landing .demo-check > span {
    padding-top: 2px;
    line-height: 1.35;
}

.demo-landing .demo-radio input:focus-visible,
.demo-landing .demo-check input:focus-visible {
    outline: 2px solid #16859c;
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   3. Мобильные заголовки: перебиваем !important темы
   --------------------------------------------------------------------- */

@media (max-width: 767px) {
    .demo-landing .demo-section-title {
        font-size: 24px !important;
        line-height: 1.22;
        margin-bottom: 22px;
    }

    .demo-landing-modal .modal-title,
    .demo-landing-modal .modal-header h2 {
        font-size: 21px !important;
        line-height: 1.25;
    }

    .demo-landing .demo-final-text h2 {
        font-size: 22px !important;
        line-height: 1.24;
    }

    .demo-landing .demo-form-success h2 {
        font-size: 22px !important;
    }
}

@media (max-width: 560px) {
    .demo-landing .page-title-left {
        font-size: 27px !important;
        line-height: 1.2;
        margin-bottom: 16px;
        hyphens: none;
        overflow-wrap: break-word;
    }

    .demo-landing .demo-lead {
        font-size: 15px !important;
        line-height: 1.45;
    }

    /* Первый экран: обещание + кнопка должны попадать в один экран */
    .demo-landing .demo-hero {
        padding: 20px 16px;
        margin-top: 10px;
        margin-bottom: 26px;
    }

    .demo-landing .demo-eyebrow {
        margin-bottom: 8px;
        font-size: 11px;
    }

    .demo-landing .demo-trust-list {
        margin-top: 18px;
    }

    .demo-landing .demo-trust-list li {
        font-size: 14px;
        line-height: 1.35;
    }
}

/* ---------------------------------------------------------------------
   4. Липкая кнопка скачивания на телефоне
      Основная кнопка сейчас находится на 850 px от верха и не видна
      на первом экране. Панель появляется после прокрутки первого экрана.
   --------------------------------------------------------------------- */

@media (max-width: 767px) {
    .demo-sticky-cta {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1030;
        display: flex;
        gap: 10px;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, .97);
        border-top: 1px solid #dfe9ee;
        box-shadow: 0 -4px 18px rgba(21, 44, 56, .1);
        transform: translateY(120%);
        transition: transform .22s ease;
    }

    .demo-sticky-cta.is-visible {
        transform: translateY(0);
    }

    .demo-sticky-cta.is-suppressed {
        transform: translateY(120%);
    }

    .demo-sticky-cta > a {
        flex: 1 1 0;
        min-height: 46px;
        padding: 12px 10px;
        border-radius: 8px;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.2;
        text-align: center;
        text-decoration: none;
    }

    .demo-sticky-cta__download {
        color: #fff;
        background: #16859c;
    }

    .demo-sticky-cta__form {
        color: #16859c;
        background: #fff;
        border: 1px solid #16859c;
    }

    /* чтобы панель не перекрывала футер */
    .demo-landing {
        padding-bottom: 80px;
    }
}

@media (min-width: 768px) {
    .demo-sticky-cta {
        display: none;
    }
}

/* ---------------------------------------------------------------------
   5. Модальное окно инструкции: прокрутка длинного содержимого
   --------------------------------------------------------------------- */

.demo-landing-modal .modal-body {
    max-height: calc(100vh - 190px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.demo-landing-modal .instruction-step img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-top: 10px;
    border: 1px solid #dfe9ee;
    border-radius: 6px;
}

/* ============================================================
   Блок «Возможности системы»
   Все селекторы ограничены .demo-landing — на другие страницы
   не влияют. Используются переменные, объявленные в .demo-landing.
   ============================================================ */

.demo-landing .demo-features {
    margin: 0 0 60px;
}

.demo-landing .demo-features-head {
    max-width: 760px;
    margin: 0 auto 34px;
    text-align: center;
}

.demo-landing .demo-features .demo-section-title {
    margin-bottom: 14px;
}

.demo-landing .demo-features-lead {
    margin: 0;
    color: var(--demo-text-muted);
    font-size: 17px;
    line-height: 1.55;
}

.demo-landing .demo-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.demo-landing .demo-feature {
    display: flex;
    flex-direction: column;
    padding: 28px 26px;
    background: #fff;
    border: 1px solid var(--demo-line);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(36, 63, 92, 0.08);
    transition: transform .2s ease, box-shadow .2s ease;
}

.demo-landing .demo-feature:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(36, 63, 92, 0.12);
}

.demo-landing .demo-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 18px;
    border-radius: 10px;
}

.demo-landing .demo-feature-icon svg {
    width: 28px;
    height: 28px;
}

.demo-landing .demo-feature-icon--blue {
    color: #0f7fa8;
    background: #eef8fc;
    border: 1px solid #cfe8f2;
}

.demo-landing .demo-feature-icon--green {
    color: var(--demo-accent-dark);
    background: #f3faef;
    border: 1px solid #dcefd0;
}

.demo-landing .demo-feature-title {
    margin: 0 0 10px;
    color: var(--demo-text);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.28;
}

.demo-landing .demo-feature-text {
    margin: 0;
    color: var(--demo-text-muted);
    font-size: 16px;
    line-height: 1.5;
}

/* ------------------------------------------------------------
   CTA-карточка
   ------------------------------------------------------------ */

.demo-landing .demo-feature--cta {
    justify-content: center;
    background: linear-gradient(150deg, #f4fbef 0%, #eaf7e2 100%);
    border-color: #d3ead0;
}

.demo-landing .demo-feature--cta:hover {
    box-shadow: 0 12px 28px rgba(60, 120, 45, 0.14);
}

.demo-landing .demo-feature-cta-text {
    margin: 0 0 20px;
    color: #24422a;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.45;
}

.demo-landing .demo-feature-cta-button {
    display: inline-block;
    align-self: flex-start;
    padding: 12px 22px;
    color: #fff;
    background: var(--demo-accent);
    border: 1px solid var(--demo-accent-dark);
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.demo-landing .demo-feature-cta-button:hover,
.demo-landing .demo-feature-cta-button:focus {
    color: #fff;
    background: var(--demo-accent-dark);
    box-shadow: 0 8px 18px rgba(80, 171, 24, 0.28);
    text-decoration: none;
}

.demo-landing .demo-feature-cta-button:focus-visible {
    outline: 2px solid var(--demo-primary-dark);
    outline-offset: 2px;
}

/* ------------------------------------------------------------
   Адаптив: 3 колонки на десктопе, 2 на планшете, 1 на телефоне
   ------------------------------------------------------------ */

@media (max-width: 991px) {
    .demo-landing .demo-features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .demo-landing .demo-features-head {
        margin-bottom: 28px;
    }

    .demo-landing .demo-feature-cta-button {
        align-self: stretch;
        width: 100%;
    }
}

@media (max-width: 767px) {
    .demo-landing .demo-features {
        margin-bottom: 42px;
    }

    .demo-landing .demo-features-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .demo-landing .demo-features-head {
        margin-bottom: 22px;
    }

    .demo-landing .demo-features-lead {
        font-size: 16px;
    }

    .demo-landing .demo-feature {
        padding: 22px 20px;
    }

    .demo-landing .demo-feature-icon {
        width: 46px;
        height: 46px;
        margin-bottom: 14px;
    }

    .demo-landing .demo-feature-icon svg {
        width: 25px;
        height: 25px;
    }

    .demo-landing .demo-feature-title {
        font-size: 18px;
    }

    .demo-landing .demo-feature-cta-button {
        align-self: stretch;
        width: 100%;
    }
}

/* Липкая панель осталась с одной кнопкой — растягиваем её на всю ширину. */
@media (max-width: 767px) {
    .demo-landing .demo-sticky-cta > a:only-child {
        flex: 1 1 100%;
    }
}

/* ============================================================
   Визуал в правой части первого экрана
   (заменил карточку «Как начать работу»)
   ============================================================ */

.demo-landing .demo-hero-visual {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid #dcebf0;
    border-radius: 10px;
    box-shadow: 0 5px 18px rgba(36, 63, 92, .08);
}

.demo-landing .demo-hero-visual picture {
    display: block;
}

.demo-landing .demo-hero-visual img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 9px;
}

@media (min-width: 992px) {
    /* оптически выравниваем визуал с блоком заголовка */
    .demo-landing .demo-hero-visual {
        margin-top: 34px;
    }
}

@media (max-width: 991px) {
    .demo-landing .demo-hero-visual {
        margin-top: 25px;
    }
}

@media (max-width: 767px) {
    .demo-landing .demo-hero-visual {
        margin-top: 22px;
    }
}

/* ============================================================
   Отступ при прокрутке к блокам по якорю
   Главное меню закреплено сверху и перекрывало верх блока формы.
   scroll-margin-top действует и для scrollIntoView из demo-2.js,
   и для обычного перехода по ссылке #demo-form-card.
   ============================================================ */

.demo-landing #demo-form-card,
.demo-landing #demo-features,
.demo-landing #demo-faq,
.demo-landing #demo-form-success {
    scroll-margin-top: 102px;
}