@import url("./variables.css");
@import url("./fonts.css");

html, body {
    overflow-x: hidden;
    font-family: var(--ff-body)!important;
    font-weight: var(--fw-light)!important;
    background-color: var(--sl-bg-dark)!important;
}

h1, h2, h3, h4, h5, h6,
.heading {
    font-family: var(--ff-heading);
    font-weight: var(--fw-bold);
    color: var(--sl-light-gray)!important;
    margin: 0;
}

form {
    margin-bottom: 0px!important;
}

button {
    border: none!important;
}

button:focus {
    outline: none!important;
    border: none!important;
}

a:hover {
    text-decoration: none!important;
}

p {
    margin-bottom: 0!important;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none!important;
    margin: 0!important;
}

input[type="number"] {
    -moz-appearance: textfield!important;
}


.sl-primary {
    color: var(--sl-primary)!important;
}

.sl-secondary {
    color: var(--sl-secondary)!important;
}

.light-heading {
    font-family: var(--ff-heading);
    font-weight: var(--fw-light);
}

.sl-btn {
    display: inline-flex;
    transition: transform .15s;
    font-family: var(--ff-heading);
    font-weight: var(--fw-bold);
}

.sl-btn:active {
    transform: translateY(3px) scale(.8);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: var(--sl-gray);
}

.main-section {
    /* background-image: url(../test-img/skin-loan-main-v2.jpg); */
    background-size: cover;
    height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
}

.main-auth-section {
    height: 100vh;
    background-image: url(../landing-img/skinLoan--Registration-v1.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero-pad {
    padding: 0px 50px 20px;
    height: 92%;
}

.main-pad {
    padding: 20px 50px;
}

.standart-section {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

.custom-nav {
    margin-left: 45px;
}

.sl-nav {
    font-size: 16px;
    color: var(--sl-gray);
}

.navbar-dark .navbar-nav .nav-link {
    font-family: var(--ff-body);
    font-weight: var(--fw-light);
    color: var(--sl-gray)!important;
    transition: all .5s;
}

.nav-link {
    text-decoration: underline;
    padding: 0px 35px!important;
}

.navbar-dark .navbar-nav .nav-link:hover {
    transition: all .5s;
    color: var(--sl-secondary)!important;
}

.sl-reg-btn {
    font-size: 16px;
    border-radius: 35px;
    background-color: transparent;
    color: var(--sl-primary);
    padding: 18px 25px;
    border: 3px solid var(--sl-secondary);
    cursor: pointer;
    transition: hover .5s;
}

.sl-reg-btn:hover {
    transition: all .5s;
    color: var(--sl-primary);
    background-color: var(--sl-secondary);
}

.sl-login-btn {
    padding: 0px 25px;
    color: var(--sl-gray);
    transition: all .5s;
}

.sl-login-btn:hover {
    color: var(--sl-primary);
    transition: all .5s;
}

.sl-card {
    border-radius: 25px 25px 60px 25px;
    padding: 25px 30px;
    position: relative;
    background: var(--sl-card-bg);
}

.sl-card-title {
    display: flex;
    align-items: start;
    justify-content: space-between;
}

.sl-card h3 {
    font-size: 24px;
}

.sl-card p {
    color: var(--sl-light-gray);
    font-size: 16px;
}

.hero-text {
    margin-bottom: 35px;
}

.hero-header {
    font-family: var(--ff-heading);
    font-weight: var(--fw-light);
    color: var(--sl-light-gray);
    font-size: 58px;
}

.hero-subtitle {
    font-family: var(--ff-body);
    font-size: 20px;
    color: var(--sl-gray);
}

.product-control {
    color: var(--sl-light-gray);
    background: var(--sl-bg-dark);
    font-size: 16px;
    padding: 15px 25px;
    display: block;
    width: 100%;
    border-radius: 35px;
    outline: none;
    z-index: 22;
    border: 2px solid var(--sl-bg-dark);
    transition: all 1s;
}

.product-control::-webkit-input-placeholder {
    color: var(--sl-gray-v2)!important;
}

.product-control::-moz-placeholder {
    color: var(--sl-gray-v2)!important;
}

.product-control:-moz-placeholder {
    color: var(--sl-gray-v2)!important;
}

.product-control:-ms-input-placeholder  {
    color: var(--sl-gray-v2)!important;
}

.product-control:focus {
    color: var(--sl-light-gray);
    background: var(--sl-bg-dark);
    border: 2px solid var(--sl-secondary);
    transition: 1s;
}

.product-control.error {
    border: 2px solid var(--sl-red);
}

.product-control.correct {
    border: 2px solid var(--sl-green);
}

.sl-danger-btn {
    background-color: var(--sl-bg-red);
    color: var(--sl-white);
    border-radius: 35px;
    padding: 5px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    transition: all 1s; 
    font-size: 19px;
    margin-bottom: 1px;
    font-family: var(--ff-heading);
    font-weight: var(--fw-bold);
}

.sl-secondary-btn {
    background-color: var(--sl-light-card)!important;
    color: var(--sl-bg-dark)!important;
}

.sl-brand-btn {
    background-color: var(--sl-secondary);
    color: var(--sl-light-gray);
    border-radius: 35px;
    padding: 5px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    transition: all 1s; 
}

.sl-brand-btn p {
    font-size: 19px;
    margin-left: auto;
    margin-bottom: 1px;
    font-family: var(--ff-heading);
    font-weight: var(--fw-bold);
}

.round-arrow {
    line-height: 0px;
    margin-bottom: 0px;
    margin-left: auto;
}

.next-step {
    transform: rotate(0.125turn);
}

.sl-brand-btn:hover {
    transition: 1s;
    transform: scale(1.05);
    background-color: var(--sl-secondary);
    color: var(--sl-light-gray);
}

.sl-brand-btn p:hover {
    color: var(--sl-light-gray);
}

.sl-brand-btn:hover p {
    color: var(--sl-light-gray);
}

.round-arrow svg {
    transition: 1s;
}

.sl-brand-btn:hover .round-arrow svg {
    transition: 1s;
    transform: scale(1.1);
    transform: rotate(-0.38turn);
}

.sl-brand-btn:hover .round-arrow.next-step svg {
    transform: rotate(-0.5turn);
}

.sl-brand-btn:active {
    transform: translateY(3px) scale(.8);
}

.container-sl {
    display: block;
    position: relative;
    padding-left: 35px;
    padding-top: 2px;
    margin-bottom: 5px;
    cursor: pointer;
    font-size: 15px;
    color: var(--sl-gray-v2);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: all 1s;
}
  
.container-sl input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
  
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 6px;
    height: 25px;
    width: 25px;
    background: var(--sl-bg-dark);
}
  
.container-sl:hover input ~ .checkmark {
    background-color: var(--sl-hover-dark);
    transition: 1s;
}
  
.container-sl input:checked ~ .checkmark {
    background-color: var(--sl-secondary);
}
  
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
  
.container-sl input:checked ~ .checkmark:after {
    display: block;
}

.reg-text {
    color: var(--sl-gray-v2);
}
  
.container-sl .checkmark:after {
    left: 9px;
    top: 5px;
    width: 8px;
    height: 13px;
    border: solid var(--sl-white);
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.forgot-text {
    display: block;
    margin-top: 25px;
    color: var(--sl-secondary);
    font-size: 14px;
}

.forgot-text:hover {
    color: var(--sl-secondary);
}

.align-center {
    align-items: center;
}

.sl-form {
    margin-bottom: 25px!important;
}

.sl-max-225 {
    max-width: 225px;
}

.sl-max-240 {
    max-width: 240px;
}

.sl-max-295 {
    max-width: 295px;
}

.sl-max-305 {
    max-width: 305px;
}

.sl-max-325 {
    max-width: 325px;
}

.ml-15 {
    margin-left: 15px;
}

.mt-5 {
    margin-top: 5px;
}

.mt-10 {
    margin-top: 10px;
}

.mt-15 {
    margin-top: 15px;
}

.mt-20 {
    margin-top: 20px;
}

.mt-24 {
    margin-top: 24px;
}

.mt-25 {
    margin-top: 25px;
}

.mt-30 {
    margin-top: 30px;
}

.mt-35 {
    margin-top: 35px;
}

.mt--15 {
    margin-top: -15px;
}

.mt--35 {
    margin-top: -35px;
}

.mb-5 {
    margin-bottom: 5px!important;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-15 {
    margin-bottom: 15px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-25 {
    margin-bottom: 25px;
}

.mb-30 {
    margin-bottom: 30px!important;
}

.mb-35 {
    margin-bottom: 35px;
}

.pt-20 {
    padding-top: 20px;
}

.h-100 {
    height: 100%;
}

.align-block {
    height: 76%;
    align-items: center;
}

.alert h3 {
    font-size: 24px;
}

.alert p {
    color: var(--sl-light-gray);
    font-size: 16px;
}

.alert-danger {
    border-radius: 25px!important;
    background-color: var(--sl-bg-red)!important;
    border-color: var(--sl-bg-red)!important;
}

.alert-success {
    border-radius: 25px!important;
    color: var(--sl-gray)!important;
    background-color: var(--sl-bg-green)!important;
    border-color: var(--sl-bg-green)!important;   
}

.sl-card-header {
    display: flex;
    align-items: center;
}

.card-header-flag {
    width: 23px;
    margin-right: 15px;
}

.password-icon {
    width: 26px;
}

.view-pass-btn {
    top: 15px;
    position: absolute;
    z-index: 22;
    right: 25px;
    background-color: transparent;
    background: transparent;
}

.pad-r-7-5 {
    padding-right: 7.5px!important;
}

.pad-l-7-5 {
    padding-left: 7.5px!important;
}

.legal-text {
    margin-top: 10px;
    font-size: 12px!important;
    color: var(--sl-gray-v2)!important;
}

.verify-block {
    background: var(--sl-bg-dark);
    padding: 15px;
    border-radius: 20px;
    margin-top: 25px;
    color: var(--sl-gray-v2);
}

.verify-link {
    color: var(--sl-secondary)!important;
}

.full-nav {
    position: relative;
    padding: 20px 30px;
    border-radius: 0px 0px 25px 25px;
    background: var(--sl-card-bg);
}

.nav-section {
    margin-left: 240px;
    max-width: 1200px;
}

.nav-account-logo {
    position: absolute;
    z-index: 999;
    left: 45px;
    top: 15px;
}

.dashboard-section {
    max-width: 1200px;
    margin: 0 auto;
}

.drop-email {
    font-size: 16px;
    color: var(--sl-light-gray);
    font-family: var(--ff-heading);
    font-weight: var(--fw-bold);
}

.logout-icon {
    width: 17px;
}

.logout-btn {
    width: 100%;
    z-index: 22;
    margin-top: 10px;
    display: flex;
    font-size: 14px;
}

.logout-text {
    margin-left: 10px;
    font-size: 14px;
    color: var(--sl-gray-v2); 
    cursor: pointer;
}

.drop-position {
    position: relative;
}

.drop-content {
    position: absolute;
    display: none;
    z-index: 999;
    top: 35px;
    right: 0px;
    background: var(--sl-bg-dark);
    border: 1px solid var(--sl-secondary);
    border-radius: 18px;
    padding: 15px 20px;
    transition: all 1s;
}

.drop-content.show-dropcontent {
    display: block;
    transition: all 1s;
}


.user-name {
    display: flex;
    margin-left: auto;
    width: max-content;
    align-items: center;
    cursor: pointer;
}

.user-nav-drop  {
    width: 11px;
    margin-left: 15px;
    -webkit-transition: .2s ease;
    -moz-transition: .2s ease;
    -o-transition: .2s ease;
    transition: .2s ease;
}

.rotated {
    -webkit-transition: .2s ease;
    -moz-transition: .2s ease;
    -o-transition: .2s ease;
    transition: .2s ease;
    transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg); 
    -o-transform: rotate(180deg);
}

.user-nav-icon {
    width: 26px;
    margin-right: 10px;
}

.username {
    font-family: var(--ff-heading);
    font-weight: var(--fw-light);
    font-size: 16px;
    color: var(--sl-gray);
}

.home-menu {
    width: 240px;
    z-index: 99;
    margin: 0px;
    height: 100vh;
    top: 0;
    position: fixed;
    white-space: nowrap;
}

.home-button {
    font-size: 16px;
    display: block;
    font-family: var(--ff-heading);
    font-weight: var(--fw-bold);
    transition: all 1s;
    margin-top: 7px;
    padding: 12px 20px;
    max-width: fit-content;
    cursor: pointer;
    color: var(--sl-gray);
    background-color: transparent;
    border-radius: 25px;
}

.home-button:hover {
    color: var(--sl-secondary);
}

.home-button.active {
    background: var(--sl-card-bg);
    cursor: pointer;
    color: var(--sl-secondary);
    border-radius: 25px;
    transition: all 1s;
}

.home-button.active:hover {
    opacity: .5;
    transition: all 1s;
}

.home-button:hover .icon-fill {
    fill: var(--sl-secondary);
    transition: all 1s;
}

.mobile-btn {
    display: flex;
    align-items: center;
}

.btn-text {
    margin-left: 10px;
} 

.icon-fill {
    fill: var(--sl-gray);
    transition: all 1s;
}

.home-position {
    padding: 80px 20px 0px;
}

.main-part {
    margin-left: 240px;
    padding: 35px 35px 20px;
}

.indicator {
    position: absolute;
    top: 25px;
    left: -3px;
    width: 7px;
    height: 100px;
    border-radius: 4px;
}

.indicator.ind-approved {
    background-color: var(--sl-green);
    box-shadow: 0px 0px 8px rgba(0, 212, 157, 0.35);
}

.indicator.ind-review {
    background-color: var(--sl-secondary);
    box-shadow: 0px 0px 8px rgba(103, 55, 255, 0.35);
}

.left-indicator {
    position: absolute;
    top: 25px;
    left: -3px;
    width: 7px;
    height: 155px;
    border-radius: 4px;
    background-color: var(--sl-primary);
    box-shadow: 0px 0px 8px rgba(255, 103, 55, 0.35);
}

.chip {
    font-size: 14px;
    font-family: var(--ff-body);
    white-space: nowrap;
    padding: 10px 20px;
    border-radius: 20px;
}

.chip.chip--approved {
    color: var(--sl-green);
    background: rgba(0, 212, 157, 0.35);
}

.chip.chip--review {
    color: var(--sl-secondary);
    background: var(--sl-bg-dark);
}

.step-title {
    padding: 0px 0px 20px;
}

.step-title h2 {
    font-size: 28px;
}

.block-label {
    font-size: 18px;
    color: var(--sl-gray);
    margin-bottom: 5px;
}

.muted {
    font-size: 14px!important;
    color: var(--sl-light-gray);
}

.app-meta {
    display: flex;
    margin-top: 25px;
    align-items: center;
}

.application-header {
    font-size: 20px;
    margin-bottom: 5px;
}

.application-subheader {
    font-size: 14px;
    color: var(--sl-light-gray);
}

.app-data-block {
    margin-right: 60px;
}

.app-tooltip {
    font-family: var(--ff-heading);
    font-weight: var(--fw-light);
    color: var(--sl-gray-v2)!important;
    font-size: 14px!important;
}

.app-data {
    font-family: var(--ff-heading);
    font-weight: var(--fw-bold);
    color: var(--sl-gray);
    font-size: 18px!important;
}

.toast {
    background-image: none!important;
    border-radius: 25px 25px 60px 25px!important;
    padding: 15px 25px 15px 15px!important;
    box-shadow: none!important;
    color: var(--sl-white)!important;
    opacity: 1;
}

.toast-message {
    margin-left: 35px;
}

#toast-container>.toast-info {
    background-image: none!important;
}

#toast-container>.toast-success {
    background-image: none!important;
}

.toast-success {
    background-color: #1f8477!important;
    background-image: none!important;
}

.toast-info {
    background-color: #3D108A!important;
}

.toast-error {
    background-color: #8A1041!important;
}

.hint-block {
    padding: 20px;
    border-radius: 25px;
    background: var(--sl-card-bg);
    position: relative;
}

.hint-point {
    display: flex;
    align-items: center;
}

.hint-number {
    height: 28px;
    width: 28px;
    position: relative;
    z-index: 22;
    border-radius: 50%;
    display: flex;
    color: var(--sl-gray-v2);
    align-items: center;
    justify-content: center;
    margin-right: 25px;
    border: 3px solid #2f214c;
    background-color: var(--sl-bg-dark);
}

.hint-number.active {
    background-color: var(--sl-primary);
    border: 5px solid var(--sl-secondary);
    color: var(--sl-light-gray);
}

.hint-text h5 {
    font-size: 18px;
    color: var(--sl-gray);
}

.hint-text p {
    font-size: 14px;
    color: var(--sl-gray-v2);
    font-family: var(--ff-heading);
    font-weight: var(--fw-light);
}

.hint-line {
    position: absolute;
    width: 4px;
    z-index: 1;
    left: 32px;
    height: 260px;
    border-radius: 4px;
    top: 52px;
    background-color: var(--sl-bg-dark);
}

.active-line {
    position: absolute;
    width: 4px;
    z-index: 2;
    left: 32px;
    height: 70px;
    border-radius: 4px;
    top: 52px;
    background-color: var(--sl-secondary);
}

.active-line-2 {
    position: absolute;
    width: 4px;
    z-index: 2;
    left: 32px;
    height: 160px;
    border-radius: 4px;
    top: 52px;
    background-color: var(--sl-secondary);
}

.active-line-3 {
    position: absolute;
    width: 4px;
    z-index: 2;
    left: 32px;
    height: 250px;
    border-radius: 4px;
    top: 52px;
    background-color: var(--sl-secondary);
}

.details-link {
    display: flex;
    margin-left: auto;
    align-items: center;
}

.details-link span {
    color: var(--sl-secondary);
    font-family: var(--ff-heading);
    font-weight: var(--fw-bold);
    font-size: 14px;
    margin-right: 5px;
}

.app-details {
    display: flex;
    padding: 15px 0px;
    margin-top: -1px;
    border-top: 1px solid var(--sl-bg-dark);
    border-bottom: 1px solid var(--sl-bg-dark);
    align-items: center;
}

.app-details.last {
    border-bottom: 0px!important;
}

.app-details p {
    color: var(--sl-gray)!important;
}

.promo-comission {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.app-details h4 {
    margin-left: auto;
}

.old-comis {
    position: relative;
    margin-right: 15px;
}

.old-comis p {
    font-size: 16px;
    position: relative;
    z-index: 1;
    color: var(--sl-gray-v2)!important;
    font-family: var(--ff-heading);
}

.crossed-line {
    position: absolute;
    background-color: var(--sl-primary);
    border-radius: 3px;
    width: 3px;
    z-index: 3;
    left: 12px;
    top: -3px;
    height: 30px;
    transform: rotate(65deg);
}

.input-descr {
    color: var(--sl-gray-v2)!important;
    font-size: 14px!important;
}

.full-v {
    display: block;
}

.mobile-v {
    display: none;
}

.sl-error {
    color: var(--sl-red)!important;
}

.mt-mb-15 {
    margin-top: -15px;
    margin-bottom: 15px!important;
}

.benefits-pad {
    background-color: var(--sl-card-bg-2);
    margin-bottom: 15px;
    border-radius: 65px;
    padding: 35px 50px;
    margin-top: 20px;
}

.land-light-heading {
    font-family: var(--ff-heading);
    font-weight: var(--fw-light);
    color: var(--sl-light-gray);
    margin-bottom: 35px;
    font-size: 32px;
}

.light-card {
    background-color: var(--sl-light-card);
    border-radius: 25px;
    position: relative;
    padding: 30px 30px 100px 30px;
}

.light-card h3 {
    font-weight: var(--fw-bold);
    font-family: var(--ff-heading);
    font-size: 26px;
    color: var(--sl-light-gray);
}

.light-card p {
    font-family: var(--ff-heading);
    margin-top: 10px;
    font-size: 16px;
    color: var(--sl-gray);
}

.choose-grid{
    display:grid;
    /* 6 одинаковых «виртуальных» колонки */
    grid-template-columns:repeat(6,1fr);
    gap:20px;

    /* 2 карточки сверху (по 3 колонки) + 3 снизу (по 2 колонки) */
    grid-template-areas:
      "vault   vault   vault   credit credit credit"
      "payout  payout  terms   terms  pricing pricing";
}

/* задаём, какие карточки растягиваются на 2 ячейки */
.vault  { grid-area:vault;  }
.credit { grid-area:credit; }
.payout { grid-area:payout; }
.terms  { grid-area:terms;  }
.pricing{ grid-area:pricing;}

.vault-img {
    position: absolute;
    width: 200px;
    top: 10px;
    right: 0;
}

.zero-img {
    position: absolute;
    width: 200px;
    top: 15px;
    right: 30px;
}

.payout-img {
    position: absolute;
    width: 150px;
    bottom: -20px;
    right: -5px;
}

.terms-img {
    position: absolute;
    width: 130px;
    bottom: 5px;
    right: 10px
}

.pricing-img {
    position: absolute;
    width: 140px;
    bottom: 0px;
    right: 0px;
}

.step-card {
    background-color: var(--sl-card-bg-2);
    text-align: left;
    border-radius: 25px;
    padding: 30px;
}

.step-card h3 {
    font-weight: var(--fw-bold);
    font-family: var(--ff-heading);
    font-size: 26px;
    color: var(--sl-light-gray);
}

.step-card p {
    font-family: var(--ff-heading);
    margin-top: 10px;
    font-size: 16px;
    color: var(--sl-gray);
}

.steps-grid {
    display:grid;
    position: relative;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin:0 auto;
}

.sl-line-1 {
    position: absolute;
    top: 27px;
    left: 310px;
}

.sl-line-2 {
    position: absolute;
    top: 27px;
    right: 310px;
}

.review-card {
    background-color: var(--sl-card-bg-2);
    position: relative;
    padding: 20px;
    border-radius: 25px;
}

.review-card p {
    color: var(--sl-light-gray);
    font-family: var(--ff-heading);
    font-size: 16px;
    padding: 25px 22px;
}

.up-quote {
    position: absolute;
    top: 15px;
    left: 20px;
}

.low-quote {
    position: absolute;
    right: 20px;
    top: 95px;
}

.ticker-container {
    display: flex;
    width: 100%;
}

.review-avatar {
    width: 50px;
    height: 50px;
}

.avatar-block {
    display: flex;
    align-items: center;
    margin-top: 15px;
}

.user-info {
    margin-left: 20px;
}

.user-info p {
    font-size: 20px;
    padding: 0;
    color: var(--sl-gray);
    font-family: var(--ff-heading);
}

.step-number {
    margin: 0 auto 35px;
}

.step-flow {
    text-align: center;
}

.faq {
    margin-bottom: 20px;
    position: relative;
    padding: 25px 30px;
    border-radius: 25px;
    background: var(--sl-card-bg-2);
}

.faq:hover {
    cursor: pointer;
}

.plus {
    width: 19px;
    height: 19px;
    position: absolute;
    top: 34px;
    right: 30px;
    -webkit-transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    transition: .5s ease;
}

.faq.active .plus {
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
}

.faq__question p {
    font-family: var(--ff-heading);
    font-weight: var(--fw-bold);
    color: var(--sl-light-gray);
    font-size: 28px;
    margin-bottom: 0px!important;
    padding-right: 45px;
}

.faq__answer {
    display: none;
}
.faq__answer p {
    font-family: var(--ff-heading);
    color: var(--sl-gray);
    font-size: 16px;
    margin-bottom: 0px;
    padding-top: 15px;
}

.faq.active .faq__answer {
    display: block;
}

.faq-max-width {
    max-width: 730px;
    margin: 5px auto 0px!important;
}

.footer-indent {
    padding: 25px 75px 0px;
}

.footer-bg {
    background-color: var(--sl-secondary);
    padding: 65px 80px 10px;
    border-radius: 65px 65px 0px 0px;
}

.footer-title {
    color: var(--sl-light-gray);
    margin-top: 15px;
    margin-bottom: 0px;
    font-size: 20px;
}

.terms-card {
    background: var(--sl-card-bg);
    padding: 20px;
    border-radius: 25px;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.terms-title {
    font-family: var(--ff-heading);
    font-weight: var(--fw-bold);
    font-size: 24px;
    color: var(--sl-light-gray);
    margin-bottom: 0;
}

.terms-subtitle {
    font-family: var(--ff-heading);
    color: var(--sl-gray);
    font-size: 16px;
    margin-bottom: 0;
}

.calculate-card {
    background-color: var(--sl-card-bg-2);
    padding: 30px;
    border-radius: 25px;
}

.calc-offer-title {
    font-family: var(--ff-heading);
    font-weight: var(--fw-bold);
    color: var(--sl-light-gray);
    font-size: 28px;
}

.calc-block-title {
    font-family: var(--ff-heading);
    font-weight: var(--fw-bold);
    color: var(--sl-light-gray);
    font-size: 24px;
}

.calc-discount {
    font-family: var(--ff-heading);
    font-weight: var(--fw-light);
    color: var(--sl-gray-v2);
    font-size: 14px;
}

.calc-hurry-icon {
    width: 30px;
    height: 30px;
    margin-right: 15px;
}

.discount-info {
    display: flex;
    align-items: center;
    padding: 10px 0px 25px;
}

.calc-box {
    background-color: var(--sl-light-card);
    padding: 30px;
    border-radius: 25px;
}

.offer-row {
    display: flex;
    align-items: center;
    padding: 15px 0px;
}

.offer-row p {
    font-size: 16px;
    margin-bottom: 0;
    font-family: var(--ff-heading);
    color: var(--sl-gray);
}

.offer-row strong {
    margin-left: auto;
    font-size: 20px;
    font-family: var(--ff-heading);
    font-weight: var(--fw-bold);
    color: var(--sl-light-gray);
}

.offer-border {
    border-top: 1px solid var(--sl-bg-dark);
}

.calc-note {
    font-family: var(--ff-heading);
    color: var(--sl-gray-v2);
    font-size: 12px;
}

.promo-comis {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.sl-align-center {
    align-items: center;
}

.sl-loader--flow{ width:240px; }
.flow-svg{ width:100%; height:auto; display:block; }

.hero-wrap { position: relative; }
.hero-content, .hero-stats, .custom-darck-navbar { position: relative; z-index: 1; }
.hero-bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }

.hero-bg::before {
  content: "";
  position: absolute; left: 0; right: 0; height: 100%; z-index: 2; pointer-events: none;
}

.hero-bg::after {
    content: "";
    position: absolute; left: 0; right: 0; height: 100px; z-index: 2; pointer-events: none;
}

.hero-bg::before{
  top: 0;
  background: radial-gradient(400px 350px at 70% 40%, rgba(39, 38, 40, 0) 0%, rgba(39, 38, 40, 0) 60%, rgba(10, 0, 44, 0.9) 100%), linear-gradient(220deg, rgba(10, 0, 44, 0) 0% 0%, rgba(10, 0, 44, 0.65) 100%);
}

.hero-bg::after{
  bottom: 0;
  background: linear-gradient(to top, rgba(10,0,44,0.92), rgba(10,0,44,0));
}

.v-marquee{
  position:absolute;
  top:-20vh; bottom:-20vh;
  left:var(--left, 0px);
  width:var(--card-w);
  display:flex; justify-content:center;
}

.v-col-1 {
    --left: -70px;
}

.v-col-2 {
   --left: 240px;
}

.v-col-3 {
    --left: 550px;
}

.v-col-4 {
    --left: 860px;
}

.v-col-5 {
    --left: 1170px;
}

.terms-text {
    font-family: var(--ff-body);
    color: var(--sl-light-gray);
    font-size: 18px;
    margin-bottom: 10px!important;
}

.user-icon-sl {
    width: 25px;
    height: 25px;
}

.sl-preloader{
  position:fixed; inset:0; background:#0A002C;
  display:grid; place-items:center;
  z-index:9999; transition: opacity .35s ease, visibility .35s ease;
}
.sl-preloader.is-hidden{ opacity:0; visibility:hidden; }

.sl-loader--cards{
  display:flex; gap:20px; perspective:600px;
}
.sl-card-load {
  width:100px; height:130px; border-radius:12px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    radial-gradient(120% 120% at 10% 10%, var(--sl-secondary), transparent 50%),
    radial-gradient(120% 120% at 90% 90%, var(--sl-primary), transparent 50%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  transform-origin:50% 80%;
  animation: floatY 1.6s ease-in-out infinite alternate, tilt 3.2s ease-in-out infinite;
}
.sl-card-load:nth-child(2){ animation-delay:.2s, .1s;}
.sl-card-load:nth-child(3){ animation-delay:.4s, .2s;}

@keyframes floatY{ from{ transform: translateY(24px);} to{ transform: translateY(-30px);} }
@keyframes tilt{ 50%{ transform: translateY(-26px) rotateY(26deg);} }

@media (prefers-reduced-motion: reduce){ .sl-card-load{ animation:none; } }



.v-track{
  animation: vscroll var(--speed, 48s) linear infinite;
  display:flex; flex-direction:column; gap:var(--gap);
}
.v-up .v-track{ animation-direction: reverse; }

/* Половина контента (3 карточки) */
.v-seq{ display:flex; flex-direction:column; gap:var(--gap); }

/* Карточка фиксированной высоты/ширины */
.skin-card{ width:var(--card-w); height:var(--card-h); display:block; object-fit:cover; }

.v-track{ backface-visibility:hidden; transform:translateZ(0); will-change:transform; }
@keyframes vscroll{
  from{ transform: translate3d(0,0,0); }
  to  { transform: translate3d(0, calc(-1 * var(--loop-h) - 0.2px), 0); }
}

/* Уважение предпочтений пользователя */
@media (prefers-reduced-motion: reduce){
  .v-track{ animation:none !important; }
}

/* Адаптив — можно подвинуть колонки, если нужно */
@media (max-width: 992px){
  .v-marquee:nth-child(5){ display:none; }  /* минус одна колонка на планшете */
}
@media (max-width: 768px){
  .v-marquee:nth-child(4){ display:none; }  /* минус ещё одна на мобилке */
}

.marquee{
  position: relative;
  overflow: hidden;
  /* скорость по умолчанию: пикселей в секунду (можно переопределить inline) */
  --px-per-sec: 60;
}

.marquee::before, .marquee::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0px;
    bottom: 0px;
    width: 80px;
    pointer-events: none;
    background: linear-gradient(to right, rgb(10, 0, 44), rgba(10, 0, 44, 0));
}

.marquee::after {
    right: 0px;
    transform: scaleX(-1);
}

/* Бесконечный трек */
.marquee__track{
  display: flex;
  will-change: transform;
  transform: translate3d(0,0,0);   /* GPU */
}

/* Половинки (оригинал + клон) */
.marquee__seq{
  display: flex;
  margin-right: 24px;
}

/* Карточки одинаковой ширины: никаких auto, чтобы не было дробных ширин */
.marquee__seq > .review-card{
  flex: 0 0 var(--review-card-w);
  width: var(--review-card-w);
  margin-right: var(--card-gap);
}

/* Последней карте убираем правый отступ, чтобы ширина seq считалась ровно */
.marquee__seq > .review-card:last-child{ margin-right: 0; }

/* Небольшой адаптив при желании */
@media (max-width: 576px){
  :root{ --review-card-w: 320px; --card-gap: 16px; }
}

.sl-scroll-position {
    overflow: auto!important;
    justify-content: center!important;
    -webkit-box-pack: start!important;
    -webkit-justify-content: flex-start!important;
    -ms-flex-pack: start!important;
    padding-bottom: 10px;
    justify-content: flex-start!important;
    -webkit-flex-wrap: nowrap!important;
    -ms-flex-wrap: nowrap!important;
    flex-wrap: nowrap!important;
    display: -webkit-box!important;
    max-width: 1220px!important;
    -webkit-box-pack: center!important;
    -webkit-justify-content: center!important;
    -ms-flex-pack: center!important;
    justify-content: center!important;
}

.sl-block-fix-pay {
    position: fixed;
    width: 100%;
    bottom: 20px;
    z-index: 99;
    padding: 15px 15px;
    display: none;
}

.sl-shadow {
    filter: drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.60));
    margin: 0 auto;
}

.sl-footer-btn-block {
    display: flex;
    margin-top: 15px;
    align-items: center;
}

.sl-footer-btn {
    color: var(--sl-primary);
    font-family: var(--ff-heading);
    font-weight: var(--fw-bold);
    margin-right: 10px;
    font-size: 14px;
    transition: all .5s;
}

.sl-footer-btn:hover {
    color: var(--sl-light-gray);
}

.footer-subtitle {
    font-family: var(--ff-heading);
    font-weight: var(--fw-bold);
    color: var(--sl-light-gray);
    margin-bottom: 15px;
    font-size: 20px;
}

.footer-nav {
    font-family: var(--ff-heading);
    font-weight: var(--fw-light);
    font-size: 16px;
    color: var(--sl-light-gray);
    display: block;
    margin-bottom: 15px;
    text-decoration: underline;
    transition: all .5s;
}

.footer-nav:hover {
    color: var(--sl-primary);
    text-decoration: none;
}

.legal-text-block {
    text-align: center;
    margin-top: 50px;
    padding-top: 20px;
    border-top: 1px solid var(--sl-gray);
}

.footer-legal-text {
    color: var(--sl-gray);
    font-size: 14px;
    font-family: var(--ff-body);
}

.calc-section {
    margin-top: -70px;
}

.sl-nav-item {
    list-style: none;
}

.trusted-block {
    display: flex;
    margin-top: 35px;
    align-items: center;
}

.trusted-icon {
    width: 110px;
    height: 40px;
}

.trusted-info {
    margin-left: 15px;
}

.trusted-info p {
    font-size: 16px;
    color: var(--sl-light-gray);
}



#loan-toasts{
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}

.loan-toast{
  pointer-events: auto;
  min-width: 260px;
  max-width: 380px;
  color: #EEE;
  background: none;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 20px 55px 20px 20px;
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-column-gap: 12px;
  align-items: center;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transform: translateY(12px);
  opacity: 0;
  animation: toast-in .35s ease forwards;
}

.loan-toast__icon{
  width: 40px; height: 40px;
  border-radius: 8px;
  background: linear-gradient(135deg, #FF6737, #6737FF);
  display: grid; place-items: center;
  font-weight: 700;
}

.loan-toast__title{
  margin: 0; font-size: 14px; line-height: 1.3; color: #fff;
}
.loan-toast__meta{
  margin: 4px 0 0; font-size: 12px; color: #B7B7B7;
}

.loan-toast__close{
  position: absolute; top: 6px; right: 6px;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,.06);
  border: none; color: #fff; cursor: pointer; place-items: center;
}

.loan-toast:hover{ box-shadow: 0 20px 44px rgba(0,0,0,.45); }
.loan-toast__close:hover{ background: rgba(255,255,255,.12); }


@keyframes toast-in{
  from{ transform: translateY(12px); opacity: 0; }
  to  { transform: translateY(0);    opacity: 1; }
}
@keyframes toast-out{
  to { transform: translateY(12px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce){
  .loan-toast{ animation: none !important; opacity: 1; transform: none; }
}

@media(max-width: 767px) {
    .full-v {
        display: none;
    }

    .mobile-v {
        display: block;
    }

    .sl-card {
        padding: 25px 25px;
    }

    .home-menu {
        width: 100%;
        padding: 0px;
        top: auto;
        bottom: 0px;
        margin: auto;
        height: fit-content;
        border-right: none;
        background: transparent;
    }

    .main-part {
        margin-left: 0px;
        padding: 35px 15px 140px;
    }

    .main-pad {
        padding: 20px 15px;
    }

    .benefits-pad {
        padding: 25px 15px 1px;
        position: relative;
        border-radius: 35px;
    }

    .home-position {
        margin: 0px 15px;
        backdrop-filter: blur(7px);
        -webkit-backdrop-filter: blur(7px);
        padding: 0px;
        background: var(--sl-card-bg);
        border-radius: 25px 25px 0px 0px;
        justify-content: center;
        display: flex;
    }

    .home-button.active {
        background: transparent;
    }

    .mobile-btn {
        display: block;
    }

    .home-button {
        text-align: center;
        padding: 15px 50px;
    }

    .btn-text {
        margin-top: 5px;
        margin-left: 0px;
    }

    .sl-card-title {
        display: block;
    }

    .chip {
        width: fit-content;
    }

    .mobile-top-20 {
        margin-top: 20px;
    }

    .app-meta {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .details-link {
        margin-left: 0px;
    }

    .sl-brand-btn {
        max-width: 100%;
    }

    .pad-r-7-5 {
        padding-right: 15px!important;
    }

    .pad-l-7-5 {
        padding-left: 15px!important;
    }

    .details-link span {
        white-space: nowrap;
    }

    .app-details p {
        font-size: 14px;
    }

    .app-details h4 {
        font-size: 20px;
    }

    .user-nav-drop {
        margin-top: 6px;
    }

    .full-nav {
        height: 60px;
    }

    .footer-indent {
        padding: 25px 15px 0px;
    }

    .hero-pad {
        padding: 0px 0px 20px;
        height: auto;
    }

    .main-section {
        height: auto;
    }

    .hero-header {
        font-size: 42px;
        text-align: center;
    }

    .hero-wrap {
        padding: 0px 15px;
    }

    .hero-subtitle {
        text-align: center;
    }

    .terms-card {
        margin-top: 15px;
    }

    .hero-stats {
        margin-top: 15px;
        padding-bottom: 35px;
    }

    .hero-text {
        padding-top: 280px;
    }

    .hero-bg::before {
        background: radial-gradient(225px 250px at 65% 12%, rgba(39, 38, 40, 0) 0%, rgba(39, 38, 40, 0) 55%, rgba(10, 0, 44, 0.95) 100%), linear-gradient(220deg, rgba(10, 0, 44, 0) 0% 0%, rgba(10, 0, 44, 0.65) 100%);
    }

    .v-col-1 {
        --left: -115px;
    }

    .v-col-2 {
        --left: 195px;
    }

    .choose-grid {
        display: block;
    }

    .light-card {
        text-align: center;
        margin-bottom: 24px;
        padding: 30px 30px 30px 30px;
    }

    .choose-img-mobile {
        width: 150px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        padding-bottom: 20px;
    }

    .land-light-heading {
        margin-bottom: 20px;
    }

    .steps-grid {
        display: block;
    }

    .step-card {
        text-align: center;
        margin-bottom: 24px;
    }

    .step-number {
        margin: 0px auto 20px;
    }

    .calculate-card {
        padding: 30px 15px;
    }

    .mobile-mt-15 {
        margin-top: 15px;
    }

    .mobile-mt--20 {
        margin-top: -20px;
    }

    .mobile-mt--35 {
        margin-top: -35px;
    }

    .faq__question p {
        font-size: 20px;
    }

    .calc-box {
        padding: 30px 20px;
    }

    .main-auth-section {
        background-image: none;
    }

    .reg-text {
        text-align: center;
    }

    .sl-block-fix-pay {
        bottom: 5px;
    }

    .sl-brand-btn p {
        padding-left: 35px;
    }

    .footer-bg {
        text-align: center;
        padding: 35px 20px 10px;
    }

    .sl-footer-btn-block {
        justify-content: center;
    }

    .sl-footer-btn-block{
        margin-bottom: 20px;
    }

    .footer-col {
        margin-bottom: 35px;
    }

    .calc-section {
        margin-top: -40px;
    }

    .collapse.show {
        background-color: var(--sl-card-bg-2);
        position: fixed;
        width: 100%;
        z-index: 999;
        top: 50px;
        left: 0px;
        text-align: center;
        padding: 20px;
        border-radius: 16px;
    }

    .custom-nav {
        margin-left: 0px;
    }

    .sl-nav {
        padding: 15px 0px;
    }

    #loan-toasts {
        bottom: auto;
        top: 20px;
    }
}