/* Лендинг /services/forms. Дизайн-система по мотивам kinescope.ru:
   тёплый белый фон, плотный гротеск в заголовках, оранжевый и фиолетовый акценты.
   Все стили скоупятся под .forms-landing, чтобы не задевать другие страницы. */

html {
    scroll-behavior: smooth;
}

.forms-landing {
    --fl-bg: #FCFCF7;
    --fl-bg-beige: #F3F1E9;
    --fl-ink: #050505;
    --fl-ink-soft: rgba(34, 34, 34, 0.64);
    --fl-orange: #FF691E;
    --fl-orange-hover: #E85A12;
    --fl-purple: #6B61FC;
    --fl-dark: #1A1A1A;
    --fl-radius: 12px;
    --fl-radius-btn: 10px;
    --fl-font-head: 'Inter Tight', Arial, sans-serif;

    background: var(--fl-bg);
    color: var(--fl-ink);
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    overflow-x: hidden;
}

.forms-landing .fl-container {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Типографика --- */

.forms-landing h1 {
    font-family: var(--fl-font-head);
    font-weight: 600;
    font-size: clamp(38px, 28px + 3vw, 64px);
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: var(--fl-ink);
    margin: 0 0 24px;
}

.forms-landing .fl-h2 {
    font-family: var(--fl-font-head);
    font-weight: 600;
    font-size: clamp(28px, 22px + 1.8vw, 44px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--fl-ink);
    margin: 0 0 16px;
    text-align: center;
}

.forms-landing h3 {
    font-family: var(--fl-font-head);
    font-weight: 600;
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--fl-ink);
    margin: 0 0 10px;
}

.forms-landing p {
    color: var(--fl-ink-soft);
}

/* --- Кнопки --- */

.forms-landing .fl-btn {
    display: inline-block;
    font-family: var(--fl-font-head);
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    padding: 14px 32px;
    border-radius: var(--fl-radius-btn);
    text-decoration: none;
    text-align: center;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.forms-landing .fl-btn--orange {
    background: var(--fl-orange);
    color: #fff;
}

.forms-landing .fl-btn--orange:hover {
    background: var(--fl-orange-hover);
    color: #fff;
}

.forms-landing .fl-btn--dark {
    background: var(--fl-dark);
    color: #fff;
}

.forms-landing .fl-btn--dark:hover {
    background: #000;
    color: #fff;
}

.forms-landing .fl-btn--ghost {
    background: #fff;
    color: var(--fl-ink);
    border: 1px solid rgba(5, 5, 5, 0.15);
}

.forms-landing .fl-btn--ghost:hover {
    border-color: var(--fl-ink);
    color: var(--fl-ink);
}

/* --- Hero --- */

.forms-landing .fl-hero {
    text-align: center;
    padding: 90px 20px 100px;
    background: url('/images/landings/forms/bg-hero.png') center / cover no-repeat;
}

.forms-landing .fl-hero__eyebrow {
    display: inline-block;
    font-family: var(--fl-font-head);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: -0.01em;
    color: var(--fl-purple);
    background: rgba(107, 97, 252, 0.08);
    border: 1px solid rgba(107, 97, 252, 0.25);
    border-radius: 100px;
    padding: 6px 16px;
    margin-bottom: 28px;
}

.forms-landing .fl-hero__sub {
    max-width: 560px;
    margin: 0 auto 40px;
    font-size: 18px;
    line-height: 1.55;
}

.forms-landing .fl-hero__actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.forms-landing .fl-hero__image {
    max-width: 960px;
    margin: 70px auto 0;
}

/* Двухколоночный hero: текст слева, картинка справа */
.forms-landing .fl-hero__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}

.forms-landing .fl-hero__content {
    text-align: left;
}

.forms-landing .fl-hero__content .fl-hero__sub {
    margin-left: 0;
    margin-right: 0;
}

.forms-landing .fl-hero__content .fl-hero__actions {
    justify-content: flex-start;
}

.forms-landing .fl-hero__inner .fl-hero__image {
    max-width: 100%;
    margin: 0;
    background: var(--fl-bg-beige);
    border-radius: 24px;
    padding: 36px;
}

.forms-landing .fl-hero__image img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    display: block;
}

/* --- Секции --- */

.forms-landing .fl-section {
    padding: 90px 0;
}

.forms-landing .fl-section--beige {
    background: var(--fl-bg-beige);
}

.forms-landing .fl-section--channels {
    background: var(--fl-bg-beige) url('/images/landings/forms/bg-channels.png') center / cover no-repeat;
}

.forms-landing .fl-section--steps {
    background: url('/images/landings/forms/bg-steps.png') center / cover no-repeat;
}

/* Чеклист «Что вы получите» */
.forms-landing .fl-deliver {
    list-style: none;
    max-width: 980px;
    margin: 50px auto 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.forms-landing .fl-deliver__item {
    position: relative;
    padding: 24px 26px 24px 62px;
    background: #fff;
    border: 1px solid rgba(5, 5, 5, 0.08);
    border-radius: var(--fl-radius);
    font-size: 16px;
    line-height: 1.55;
    color: var(--fl-ink-soft);
}

.forms-landing .fl-deliver__item::before {
    content: "\2713";
    position: absolute;
    left: 24px;
    top: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.14);
    color: #16a34a;
    font-size: 14px;
    font-weight: 700;
}

.forms-landing .fl-deliver__lead {
    color: var(--fl-ink);
    font-weight: 600;
}

.forms-landing .fl-section__sub + .fl-deliver {
    margin-top: 0;
}

/* Лёгкий список задач (SEO long-tail) */
.forms-landing .fl-tasklist {
    max-width: 980px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 44px;
}

.forms-landing .fl-tasklist li {
    position: relative;
    padding-left: 34px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--fl-ink-soft);
}

.forms-landing .fl-tasklist li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.14);
    color: #16a34a;
    font-size: 12px;
    font-weight: 700;
}

/* Портфолио - карточки работ */
.forms-landing .fl-works {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.forms-landing .fl-work {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(5, 5, 5, 0.08);
    border-radius: var(--fl-radius);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.forms-landing .fl-work:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(25, 23, 28, 0.10);
}

.forms-landing .fl-work__img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    background: var(--fl-bg-beige);
}

.forms-landing .fl-work__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px 24px 24px;
}

.forms-landing .fl-work__title {
    margin: 0 0 10px;
    font-family: var(--fl-font-head);
    font-weight: 600;
    font-size: 19px;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--fl-ink);
}

.forms-landing .fl-work__desc {
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--fl-ink-soft);
}

.forms-landing .fl-work__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.forms-landing .fl-work__tag {
    padding: 5px 12px;
    border-radius: 100px;
    background: var(--fl-bg-beige);
    font-size: 13px;
    color: var(--fl-ink-soft);
}

.forms-landing .fl-work__more {
    margin-top: auto;
    font-family: var(--fl-font-head);
    font-weight: 500;
    font-size: 15px;
    color: var(--fl-purple);
}

.forms-landing .fl-work__more::after {
    content: " \2192";
}

/* Портфолио - детальная страница проекта */
.forms-landing .project-header {
    text-align: center;
    padding: 70px 20px 0;
}

.forms-landing .project-header h1 {
    margin: 0 0 18px;
    font-family: var(--fl-font-head);
    font-weight: 600;
    font-size: clamp(28px, 20px + 2.2vw, 46px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--fl-ink);
}

.forms-landing .project-meta {
    display: flex;
    justify-content: center;
    gap: 12px 28px;
    flex-wrap: wrap;
}

.forms-landing .project-meta-item {
    font-size: 15px;
    color: var(--fl-ink-soft);
}

.forms-landing .project-meta-item strong {
    color: var(--fl-ink);
    font-weight: 600;
}

.forms-landing .project-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px 20px;
}

.forms-landing .back-link {
    display: inline-block;
    margin-bottom: 24px;
    font-family: var(--fl-font-head);
    font-weight: 500;
    font-size: 15px;
    color: var(--fl-purple);
    text-decoration: none;
}

.forms-landing .back-link::before {
    content: "\2190  ";
}

.forms-landing .project-image {
    display: block;
    width: 100%;
    border-radius: var(--fl-radius);
}

.forms-landing .project-images {
    display: grid;
    gap: 20px;
}

.forms-landing .project-section {
    background: #fff;
    border: 1px solid rgba(5, 5, 5, 0.08);
    border-radius: var(--fl-radius);
    padding: 32px 34px;
    margin-bottom: 20px;
}

.forms-landing .project-section h2 {
    margin: 0 0 16px;
    font-family: var(--fl-font-head);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--fl-ink);
}

.forms-landing .project-section p {
    margin: 0 0 12px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--fl-ink-soft);
}

.forms-landing .project-section p:last-child {
    margin-bottom: 0;
}

.forms-landing .project-section ul {
    margin: 0;
    padding-left: 22px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--fl-ink-soft);
}

.forms-landing .project-section li {
    margin-bottom: 8px;
}

.forms-landing .project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.forms-landing .project-tag {
    padding: 6px 14px;
    border-radius: 100px;
    background: var(--fl-bg-beige);
    font-size: 14px;
    color: var(--fl-ink-soft);
}

.forms-landing .project-link {
    display: inline-block;
    font-family: var(--fl-font-head);
    font-weight: 500;
    font-size: 16px;
    color: var(--fl-purple);
    text-decoration: none;
}

.forms-landing .project-link::after {
    content: " \2192";
}

.forms-landing .project-link-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    border-radius: var(--fl-radius-btn);
    background: var(--fl-orange);
    color: #fff;
    font-family: var(--fl-font-head);
    font-weight: 500;
    font-size: 16px;
    text-decoration: none;
    transition: background 0.15s ease;
}

.forms-landing .project-link-button:hover {
    background: var(--fl-orange-hover);
}

/* Компактный тёмный callout (кросс-продажа услуги) */
.forms-landing .fl-callout {
    max-width: 1120px;
    margin: 0 auto;
    background: var(--fl-dark);
    border-radius: 16px;
    padding: 40px 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}

.forms-landing .fl-callout__title {
    margin: 0 0 8px;
    font-family: var(--fl-font-head);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    color: #fff;
}

.forms-landing .fl-callout__text {
    margin: 0;
    max-width: 620px;
    font-size: 16px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.7);
}

.forms-landing .fl-callout .fl-btn {
    flex-shrink: 0;
}

@media (max-width: 1000px) {
    .forms-landing .fl-works {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .forms-landing .fl-works {
        grid-template-columns: 1fr;
    }

    .forms-landing .fl-callout {
        padding: 32px 24px;
    }
}

.forms-landing .fl-h2--sep {
    margin-top: 80px;
}

/* FAQ (аккордеон на нативном details) */
.forms-landing .fl-faq {
    max-width: 820px;
    margin: 50px auto 0;
    display: grid;
    gap: 14px;
}

.forms-landing .fl-faq__item {
    background: #fff;
    border: 1px solid rgba(5, 5, 5, 0.08);
    border-radius: var(--fl-radius);
    padding: 0 26px;
}

.forms-landing .fl-faq__item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 22px 0;
    font-family: var(--fl-font-head);
    font-weight: 600;
    font-size: 17px;
    color: var(--fl-ink);
}

.forms-landing .fl-faq__item summary::-webkit-details-marker {
    display: none;
}

.forms-landing .fl-faq__item summary::after {
    content: "+";
    flex-shrink: 0;
    font-size: 26px;
    font-weight: 400;
    line-height: 1;
    color: var(--fl-purple);
}

.forms-landing .fl-faq__item[open] summary::after {
    content: "\2212";
}

.forms-landing .fl-faq__answer {
    padding: 0 0 24px;
    font-size: 16px;
    line-height: 1.55;
    color: var(--fl-ink-soft);
}

.forms-landing .fl-section__sub {
    text-align: center;
    max-width: 520px;
    margin: 0 auto 50px;
    font-size: 17px;
}

/* --- Карточки каналов --- */

.forms-landing .fl-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.forms-landing .fl-card {
    background: #fff;
    border: 1px solid rgba(5, 5, 5, 0.06);
    border-radius: var(--fl-radius);
    padding: 28px 24px;
}

.forms-landing .fl-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.forms-landing .fl-card__icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.forms-landing .fl-card__tag {
    display: inline-block;
    font-family: var(--fl-font-head);
    font-weight: 500;
    font-size: 13px;
    color: var(--fl-ink-soft);
    background: var(--fl-bg-beige);
    border-radius: 100px;
    padding: 4px 12px;
}

.forms-landing .fl-card p {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
}

.forms-landing .fl-card p a {
    color: var(--fl-purple);
    text-decoration: underline;
}

.forms-landing .fl-card p a:hover {
    color: var(--fl-orange);
}

/* Карточка-ссылка (хаб услуг на /services) */
.forms-landing a.fl-card {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.forms-landing a.fl-card:hover {
    border-color: var(--fl-purple);
    box-shadow: 0 11px 26px rgba(25, 23, 28, 0.08);
}

.forms-landing .fl-card__more {
    display: inline-block;
    margin-top: 14px;
    font-family: var(--fl-font-head);
    font-weight: 500;
    font-size: 14px;
    color: var(--fl-purple);
}

/* Блок «Другие услуги» внизу лендингов */
.forms-landing .fl-related {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 40px;
}

.forms-landing .fl-related__card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid rgba(5, 5, 5, 0.08);
    border-radius: var(--fl-radius);
    padding: 16px 18px;
    text-decoration: none;
    color: var(--fl-ink);
    font-family: var(--fl-font-head);
    font-weight: 500;
    font-size: 15px;
    line-height: 1.25;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.forms-landing .fl-related__card:hover {
    border-color: var(--fl-purple);
    box-shadow: 0 8px 20px rgba(25, 23, 28, 0.08);
    color: var(--fl-ink);
}

.forms-landing .fl-related__card img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
}

.forms-landing .fl-related__all {
    text-align: center;
    margin-top: 36px;
}

@media (max-width: 900px) {
    .forms-landing .fl-related {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .forms-landing .fl-related {
        grid-template-columns: 1fr;
    }
}

/* --- Шаги --- */

.forms-landing .fl-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 50px;
}

.forms-landing .fl-step {
    background: #fff;
    border: 1px solid rgba(5, 5, 5, 0.06);
    border-radius: var(--fl-radius);
    padding: 28px 24px;
}

.forms-landing .fl-step__num {
    font-family: var(--fl-font-head);
    font-weight: 600;
    font-size: 15px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--fl-ink);
    border-radius: 50%;
    margin-bottom: 20px;
}

.forms-landing .fl-step p {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
}

/* --- Условия (в стиле тарифных карточек) --- */

.forms-landing .fl-terms {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 50px;
    align-items: stretch;
}

.forms-landing .fl-term {
    position: relative;
    background: #fff;
    border: 3px solid transparent;
    border-radius: var(--fl-radius);
    padding: 32px 24px 28px;
    box-shadow: 0 11px 26px rgba(25, 23, 28, 0.05);
}

.forms-landing .fl-term--featured {
    border-color: var(--fl-purple);
}

.forms-landing .fl-term__icon {
    display: block;
    width: 54px;
    height: 54px;
    margin-bottom: 16px;
}

.forms-landing .fl-term__badge {
    position: absolute;
    top: -14px;
    right: 20px;
    font-family: var(--fl-font-head);
    font-weight: 500;
    font-size: 13px;
    color: #fff;
    background: var(--fl-purple);
    border-radius: 100px;
    padding: 5px 14px;
}

.forms-landing .fl-term p {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
}

/* --- Тёмный CTA-блок --- */

.forms-landing .fl-cta {
    padding: 0 20px 40px;
}

.forms-landing .fl-cta__inner {
    max-width: 1120px;
    margin: 90px auto 0;
    background: var(--fl-dark) url('/images/landings/forms/bg-cta.png') center / cover no-repeat;
    border-radius: 16px;
    padding: 70px 60px;
    text-align: center;
}

.forms-landing .fl-cta__person {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 36px;
}

.forms-landing .fl-cta__photo {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
}

.forms-landing .fl-cta__greeting {
    color: #fff;
    font-family: var(--fl-font-head);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.35;
    text-align: left;
}

.forms-landing .fl-cta__title {
    font-family: var(--fl-font-head);
    font-weight: 600;
    font-size: clamp(28px, 20px + 2.5vw, 48px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #fff;
    margin-bottom: 18px;
}

.forms-landing .fl-cta__sub {
    color: rgba(255, 255, 255, 0.55);
    font-size: 16px;
    max-width: 480px;
    margin: 0 auto 40px;
}

/* Перекраска кнопок из includes/telegram_buttons.html.twig под эту дизайн-систему */

.forms-landing .buttons_section__buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.forms-landing .buttons_section__buttons .button {
    display: inline-block;
    font-family: var(--fl-font-head);
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    padding: 14px 32px;
    border-radius: var(--fl-radius-btn);
    border: 0;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.forms-landing .button-telegram {
    background: var(--fl-orange);
    color: #fff;
}

.forms-landing .button-telegram:hover {
    background: var(--fl-orange-hover);
    color: #fff;
}

.forms-landing .buttons_section__buttons .button-group {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.forms-landing .button-group:hover {
    border-color: #fff;
    color: #fff;
    background: transparent;
}

.forms-landing .button-whatsapp {
    background: #25D366;
    color: #fff;
}

.forms-landing .button-whatsapp:hover {
    background: #1EBE5A;
    color: #fff;
}

/* --- Адаптив --- */

@media (max-width: 900px) {
    .forms-landing .fl-cards,
    .forms-landing .fl-steps,
    .forms-landing .fl-terms {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .forms-landing .fl-hero__inner {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .forms-landing .fl-hero__content {
        text-align: center;
    }

    .forms-landing .fl-hero__content .fl-hero__sub {
        margin-left: auto;
        margin-right: auto;
    }

    .forms-landing .fl-hero__content .fl-hero__actions {
        justify-content: center;
    }

    .forms-landing .fl-hero__inner .fl-hero__image {
        max-width: 560px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .forms-landing .fl-hero {
        padding: 60px 16px 70px;
    }

    .forms-landing .fl-section {
        padding: 60px 0;
    }

    .forms-landing .fl-cta__inner {
        padding: 50px 24px;
        margin-top: 60px;
    }
}

@media (max-width: 600px) {
    .forms-landing .fl-cards,
    .forms-landing .fl-steps,
    .forms-landing .fl-terms,
    .forms-landing .fl-deliver,
    .forms-landing .fl-tasklist {
        grid-template-columns: 1fr;
    }

    .forms-landing .fl-hero__actions .fl-btn,
    .forms-landing .buttons_section__buttons .button {
        display: block;
        width: 100%;
    }

    .forms-landing .fl-cta__person {
        flex-direction: column;
    }

    .forms-landing .fl-cta__greeting {
        text-align: center;
    }
}

/* --- Промо-блок автора (внутри hero) --- */
.forms-landing .fl-hero--with-promo {
    padding-bottom: 70px;
}

.forms-landing .fl-promo {
    margin-top: 60px;
    padding: 0 20px;
}

.forms-landing .fl-promo__inner {
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 40px 52px;
    border-radius: 28px;
    overflow: hidden;
    position: relative;
    display: grid;
    grid-template-columns: 230px auto;
    gap: 44px;
    align-items: center;
    text-align: left;
    background:
        radial-gradient(rgba(255, 255, 255, 0.10) 1.5px, transparent 1.6px) 0 0 / 26px 26px,
        radial-gradient(circle at 88% 10%, rgba(74, 222, 128, 0.32), transparent 60%),
        linear-gradient(120deg, #0b3d24 0%, #0f5230 55%, #14663b 100%);
}

.forms-landing .fl-promo__photo {
    width: 230px;
    height: 230px;
    border-radius: 50%;
    border: 5px solid rgba(255, 255, 255, 0.14);
    overflow: hidden;
}

.forms-landing .fl-promo__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
}

.forms-landing .fl-promo__body {
    color: #fff;
}

.forms-landing .fl-promo__title {
    font-family: var(--fl-font-head);
    font-weight: 700;
    font-size: 40px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}

.forms-landing .fl-promo__title span {
    color: #4ade80;
}

.forms-landing .fl-promo__name {
    font-family: var(--fl-font-head);
    font-weight: 500;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 26px;
}

.forms-landing .fl-promo__stats {
    display: flex;
    gap: 44px;
    margin-bottom: 28px;
}

.forms-landing .fl-promo__stat {
    display: flex;
    flex-direction: column;
}

.forms-landing .fl-promo__stat b {
    font-family: var(--fl-font-head);
    font-weight: 700;
    font-size: 48px;
    line-height: 1;
    color: #4ade80;
}

.forms-landing .fl-promo__stat span {
    margin-top: 6px;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.75);
}

.forms-landing .fl-promo__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.forms-landing .fl-promo__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1px solid rgba(74, 222, 128, 0.5);
    border-radius: 100px;
    background: rgba(74, 222, 128, 0.08);
    color: #fff;
    font-family: var(--fl-font-head);
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.forms-landing .fl-promo__badge::before {
    content: "\203A";
    color: #4ade80;
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
}

@media (max-width: 768px) {
    .forms-landing .fl-promo__inner {
        width: auto;
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 20px;
        padding: 32px 24px;
        text-align: center;
    }

    .forms-landing .fl-promo__photo {
        width: 180px;
        height: 180px;
    }

    .forms-landing .fl-promo__title {
        font-size: 32px;
    }

    .forms-landing .fl-promo__stats {
        justify-content: center;
    }

    .forms-landing .fl-promo__badges {
        justify-content: center;
    }
}