/* =========================
   BUTTON (universal) — interactions
   - hover: scale +5%, slight brighten
   - active: scale -2%
   - icon: отдельно увеличивается заметнее
   ========================= */

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap: 12px;

    height: 54px;
    padding: 0 22px;
    border-radius: 12px;

    font-weight: 800;
    text-decoration:none;
    user-select:none;

    transform: scale(1);
    transition: transform .16s ease, filter .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.btn:hover{
    transform: scale(1.05);
    filter: brightness(1.04);
}

.btn:active{
    transform: scale(0.98);
    filter: brightness(1);
}

/* icon/arrow slot */
.btn__icon{
    width: 30px;
    height: 30px;
    display:grid;
    place-items:center;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1;

    transform: scale(1);
    transform-origin: center;
    transition: transform .16s ease;
}

/* стрелка увеличивается отдельно (заметнее) */
.btn:hover .btn__icon{
    transform: scale(1.2);
}
.btn:active .btn__icon{
    transform: scale(0.98);
}

/* variants */
.btn--primary{
    /* простой градиент (изумрудный, без бликов) */
    background: linear-gradient(344deg, #0a8f2acc 0%, #087a24 100%);
    color:#fff;
    box-shadow: 0 14px 30px rgba(10,143,42,.18);
}

.btn--primary:hover{
    background: linear-gradient(130deg, #0a8f2acc 0%, #087a24 100%);
}

.btn--ghost{
    background: rgba(15,23,42,.06);
    color:#0f172a;
    box-shadow: none;
}

/* sizes */
.btn--sm{ height: 44px; padding: 0 16px; border-radius: 10px; }
.btn--md{ height: 50px; padding: 0 18px; border-radius: 12px; max-width: 300px;}
.btn--lg{ height: 56px; padding: 0 22px; border-radius: 14px; }

/* block on mobile */
@media (max-width: 768px){
    .btn--block{ width: 100%; }
}