@import '../variables.css';

/* Секция "Попробуйте FINTRACK SCM" */
.section-try-fintrack {
    position: relative;
    background-color: var(--color-bg-section-light-blue);
}

.section-try-fintrack .section-header {
    margin-bottom: var(--gap-4xl);
}

.start-trial-header {
    margin-top: var(--gap-lg);
}

.anchor-demo {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    overflow: hidden;
}

.subscription-card {
    max-width: 560px;
    margin: 0 auto;
    padding: var(--gap-4xl) var(--gap-3xl);
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-3xl);
    box-shadow: var(--shadow-md);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

/* Заголовок карточки — первый уровень иерархии */
.subscription-card__header {
    font-size: clamp(20px, 2.2vw + 16px, 24px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--color-text-primary);
    margin-bottom: var(--gap-lg);
}

/* Группа «пробный период + цена» — визуальный блок */
.subscription-card__offer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-sm);
    width: 100%;
    padding: var(--gap-2xl) var(--gap-lg);
    background: var(--color-bg-surface-light);
    border-radius: var(--radius-xl);
    margin-bottom: var(--gap-2xl);
}

.subscription-card__trial {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
    align-items: center;
}

.subscription-card__trial-label {
    font-size: var(--font-size-small);
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.subscription-card__trial-value {
    font-size: clamp(28px, 3.5vw + 20px, 36px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
}

.subscription-card__price {
    display: flex;
    align-items: center;
}

.subscription-card__price-text {
    font-size: var(--font-size-body);
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-text-secondary);
}

/* Список преимуществ — читаемый размер и акцент */
.subscription-card__benefits {
    list-style: none;
    margin: 0 0 var(--gap-2xl);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
    text-align: left;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}

.subscription-card__benefits li {
    font-size: var(--font-size-body);
    font-weight: 500;
    line-height: 1.45;
    color: var(--color-text-tertiary);
    padding-left: 1.75em;
    position: relative;
}

.subscription-card__benefits li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-primary);
}

.subscription-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-md);
    justify-content: center;
}

/* Responsive: start-trial */
@media (max-width: 768px) {
    .subscription-card__actions .button {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .subscription-card {
        padding: var(--gap-2xl) var(--gap-xl);
        border-radius: var(--radius-xl);
    }

    .subscription-card__header {
        margin-bottom: var(--gap-md);
    }

    .subscription-card__offer {
        padding: var(--gap-xl) var(--gap-md);
        margin-bottom: var(--gap-xl);
    }

    .subscription-card__trial-value {
        font-size: 24px;
    }

    .subscription-card__benefits {
        margin-bottom: var(--gap-xl);
    }

    .subscription-card__actions {
        flex-direction: column;
        width: 100%;
    }

    .subscription-card__actions .button {
        width: 100%;
    }
}