@import "base/reset.css";
@import "base/layout.css";
@import "base/variables.css";
@import "base/header.css";
@import "base/labels.css";
@import "base/breadcrumbs.css";

h2 {
    color: #B71C1C !important;
}


body, .credit-landing { background: #e4e9f2; color: #1a1a1a; font-family: 'Inter', Arial, sans-serif; }
.credit-wave-top, .credit-wave-bot, .credit-divider { width: 100%; }
.credit-divider svg, .credit-wave-top svg, .credit-wave-bot svg { display: block; margin: 0 auto; }

.credit-hero--wow {
    background: linear-gradient(115deg, #fff 60%, #e4e9f2 100%);
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    margin: 32px auto 0 auto;
    padding: 56px 32px 32px 32px;
    min-height: 420px;
    box-shadow: 0 8px 32px #00000013;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 90px;
    align-items: center;
    max-width: 1100px;
}
.credit-hero__glow {
    position: absolute;
    top: 30%;
    left: 10%;
    width: 400px; height: 240px;
    background: radial-gradient(ellipse at center, #B71C1C40 0%, #e4e9f200 80%);
    filter: blur(32px);
    z-index: 0;
    pointer-events: none;
}
.credit-hero__content {
    z-index: 1;
    max-width: 540px;
    margin: auto 0 auto 2em;
}
.credit-hero h1 {
    font-size: 2.3rem;
    font-weight: 900;
    letter-spacing: -1px;
    margin-bottom: 14px;
    line-height: 1.08;
}
.credit-hero__accent {
    display: inline-block;
    font-size: 2.1rem;
    background: #181818;
    color: #fff;
    border-radius: 1rem;
    padding: 7px 18px 7px 18px;
    box-shadow: 0 4px 18px #0002;
    font-style: italic;
    font-weight: 900;
    letter-spacing: -1.5px;
    margin-bottom: 6px;
}
.credit-hero__accent--alt { background: #B71C1C; margin-left: 0.6em; }
.credit-hero__desc {
    font-size: 1.2rem;
    color: #3e3e3e;
    margin-bottom: 28px;
    margin-top: 4px;
}
.credit-hero__btn {
    font-size: 1.1rem;
    font-weight: 700;
}
.credit-hero__image {
    max-width: 500px;
    width: 100%;
    align-self: flex-end;
    z-index: 1;
    position: absolute;
    top: 25px;
    right: 50px;
}
.credit-hero__image img {
    width: 100%;
    filter: drop-shadow(0 16px 24px #b71c1c33);
    border-radius: 1.6rem;
    background: transparent;
}

/* Кнопка с эффектом */
.btn-red {
    background: #B71C1C;
    color: #fff;
    border-radius: 8px;
    padding: 16px 40px;
    border: none;
    font-size: 1.2rem;
    font-weight: bold;
    box-shadow: 0 4px 16px #B71C1C25;
    transition: background .2s, box-shadow .2s, transform .1s;
    text-decoration: none;
    display: inline-block;
    outline: none;
}
.btn-red:hover, .btn-red:focus { background: #ff2a2a; color: #fff; transform: translateY(-2px) scale(1.04); box-shadow: 0 6px 20px #B71C1C55; }

.credit-animate-pulse {
    animation: credit-pulse 1.5s infinite alternate cubic-bezier(.4,0,.2,1);
}
@keyframes credit-pulse {
    0% { box-shadow: 0 0 0 0 #b71c1c44; }
    100% { box-shadow: 0 0 0 18px #b71c1c08; }
}

.credit-conditions--glass {
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 32px #b71c1c13, 0 1.5px 12px #0002;
    position: relative;
    overflow: hidden;
    z-index: 1;
    display: flex;
    justify-content: center;
    gap: 36px;
    border-radius: 8px;
    margin: 32px auto 0 auto;
    padding: 32px 24px;
    max-width: 1000px;
    font-size: 1.14rem;
}
.credit-conditions__item {
    text-align: center;
    min-width: 120px;
    position: relative;
    margin: 0 10px;
    padding: 26px 12px 18px 12px;
}

.cc-value {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 6px;
    color: #B71C1C;
    position: relative; z-index: 1;
}
.cc-label {
    color: #636c7c;
    font-size: 1rem;
    position: relative; z-index: 1;
}

/* Steps */
.credit-steps--glass {
    background: rgba(255,255,255,0.94);
    backdrop-filter: blur(5px);
    border-radius: 8px;
    box-shadow: 0 6px 24px #b71c1c11, 0 1.5px 10px #0001;
    max-width: 900px;
    margin: 36px auto;
    padding: 32px 24px;
}
.credit-steps__list {
    display: flex;
    gap: 24px;
    justify-content: center;
    margin-top: 14px;
}
.credit-step {
    background: rgba(255,255,255,0.97);
    box-shadow: 0 2px 14px #b71c1c10, 0 1.5px 8px #0002;
    border-radius: 5px;
    padding: 30px 20px;
    margin: 0 10px;
    font-size: 1.12rem;
    font-weight: 600;
    position: relative;
    min-width: 145px;
    transition: transform .16s, box-shadow .16s;
}
.credit-step span {
    display: block;
    font-size: 2.5rem;
    font-weight: bold;
    color: #B71C1C;
    margin-bottom: 6px;
}
.credit-step:hover { transform: translateY(-6px) scale(1.03); box-shadow: 0 8px 24px #b71c1c17; }

/* Требования */
.credit-reqs {
    background: #fff;
    max-width: 700px;
    margin: 36px auto;
    border-radius: 8px;
    padding: 28px 24px;
    color: #1a1a1a;
    text-align: center;
    box-shadow: 0 2px 10px #0001;
}
.credit-reqs h2 { font-size: 1.8rem; font-weight: 700; margin-bottom: 12px; color: #B71C1C;}
.credit-reqs ul {
    display: flex;
    flex-wrap: wrap;
    gap: 22px 40px;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 1.16rem;
}
.credit-reqs li { color: #1a1a1a; }

.credit-form-block {
    background: #fff;
    color: #181818;
    border-radius: 8px;
    max-width: 520px;
    margin: 48px auto 0 auto;
    padding: 32px 28px;
    box-shadow: 0 8px 48px #00000008;
    text-align: center;
}
.credit-form-block h2 { font-size: 1.6rem; font-weight: 800; margin-bottom: 20px; color: #B71C1C;}
.credit-form__fields {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 24px;
}
.credit-form input {
    font-size: 1.08rem;
    padding: 15px 18px;
    border: 1.5px solid #d6dae1;
    border-radius: 1.1rem;
    background: #f3f6fa;
    color: #222;
    outline: none;
    transition: border .2s;
}
.credit-form input:focus { border-color: #B71C1C; }
.credit-form .btn-red { width: 100%; margin-top: 10px; }
.credit-form__privacy {
    margin-top: 18px;
    font-size: 0.92rem;
    color: #888;
}
.credit-form__privacy a { color: #B71C1C; text-decoration: underline; }

.credit-faq {
    max-width: 850px;
    margin: 56px auto 0 auto;
    background: #fff;
    color: #1a1a1a;
    border-radius: 8px;
    padding: 36px 32px;
    box-shadow: 0 2px 10px #0001;
}
.credit-faq h2 { font-size: 1.4rem; margin-bottom: 18px; font-weight: 700; color: #B71C1C;}
.faq-list details {
    background: #f3f6fa;
    border-radius: 5px;
    margin-bottom: 12px;
    padding: 15px 20px;
    cursor: pointer;
    box-shadow: 0 1px 5px #0001;
}
.faq-list summary {
    font-size: 1.13rem;
    font-weight: 600;
    color: #1a1a1a;
    outline: none;
}
.faq-list p { color: #636c7c; font-size: 1.01rem; margin-top: 8px; }

.credit-final-cta {
    text-align: center;
    margin: 64px auto 24px auto;
}
.credit-final-cta h2 {
    font-size: 2rem;
    color: #1a1a1a;
    font-weight: 900;
    margin-bottom: 16px;
}
.credit-final-cta p {
    color: #636c7c;
    font-size: 1.19rem;
    margin-bottom: 24px;
}
.credit-final-cta .btn-red { font-size: 1.15rem; }

@media (max-width: 900px) {
    .credit-hero--wow { flex-direction: column; align-items: center; padding: 40px 12px; }
    .credit-hero__image { margin: 0 auto; display: none}
    .credit-conditions--glass, .credit-steps__list, .credit-why ul, .credit-reqs ul { flex-direction: column; gap: 18px; }
    .credit-conditions--glass, .credit-steps--glass, .credit-why, .credit-reqs, .credit-faq, .credit-form-block {
        padding-left: 8px; padding-right: 8px;
    }
}

@media (max-width: 540px) {
    .credit-hero--wow { padding: 22px 3vw; min-height: unset; }
    .credit-hero h1 { font-size: 1.3rem; }
    .credit-steps__list { gap: 12px; }
    .credit-step { min-width: 120px; padding: 14px 8px; }
    .credit-form-block, .credit-faq { padding: 22px 3vw; }
    .credit-hero__glow {display: none}
}