/* Start:/local/templates/.default/css/hero-cta.css?177607749836117*/
/* ========================================
   Hero CTA Section
   ======================================== */
.hero-cta-section {
    background: #0f0c09;
    padding: 80px 0;
    border-top: 1px solid rgba(188,148,94,.2);
    border-bottom: 1px solid rgba(188,148,94,.2);
    position: relative;
    overflow: hidden;
}
.hero-cta-section::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 55%;
    height: 100%;
    background: repeating-linear-gradient(
        -55deg,
        transparent,
        transparent 20px,
        rgba(188,148,94,.02) 20px,
        rgba(188,148,94,.02) 21px
    );
    pointer-events: none;
}

/* ---- Scroll animations ---- */
.hero-cta-left,
.hero-cta-feature {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .65s ease, transform .65s ease;
}
.hero-cta-left {
    transform: translateX(-28px);
}
.hero-cta-left.hca-visible,
.hero-cta-feature.hca-visible {
    opacity: 1;
    transform: translate(0);
}

/* ---- Tagline ---- */
.hero-cta-tagline {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 11px;
    letter-spacing: 5px;
    color: #bc945e;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 22px;
}
.hero-cta-tagline::before {
    content: '';
    display: block;
    width: 36px;
    height: 1px;
    background: #bc945e;
    flex-shrink: 0;
}

/* ---- Title ---- */
.hero-cta-title {
    font-size: 44px;
    font-weight: 800;
    color: #fff;
    line-height: 1.12;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin: 0 0 20px;
}
.hero-cta-title em {
    font-style: normal;
    color: #bc945e;
}

/* ---- Divider ---- */
.hero-cta-divider {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, #bc945e, transparent);
    margin-bottom: 24px;
}

/* ---- Description ---- */
.hero-cta-desc {
    font-size: 15px;
    line-height: 1.75;
    color: #888;
    margin-bottom: 32px;
    max-width: 500px;
}

/* ---- Primary button ---- */
.hero-cta-buttons {
    margin-bottom: 28px;
}
.hero-cta-btn-primary {
    display: inline-block;
    padding: 14px 42px;
    background: #bc945e;
    color: #fff !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-decoration: none !important;
    border: 1px solid #bc945e;
    transition: background .28s, color .28s;
    cursor: pointer;
}
.hero-cta-btn-primary:hover {
    background: transparent;
    color: #bc945e !important;
}

/* ---- Catalog links block ---- */
.hero-cta-catalog {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.hero-cta-catalog-label {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #555;
    white-space: nowrap;
}
.hero-cta-catalog-links {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.hero-cta-catalog-link {
    display: inline-block;
    padding: 7px 16px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #aaa !important;
    text-decoration: none !important;
    border: 1px solid rgba(255,255,255,.12);
    transition: border-color .25s, color .25s, background .25s;
}
.hero-cta-catalog-link i {
    margin-right: 4px;
    font-size: 10px;
    transition: transform .25s;
}
.hero-cta-catalog-link:hover {
    border-color: #bc945e;
    color: #bc945e !important;
    background: rgba(188,148,94,.05);
}
.hero-cta-catalog-link:hover i {
    transform: translateX(3px);
}

/* ---- Features column ---- */
.hero-cta-features {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding-left: 30px;
    border-left: 1px solid rgba(188,148,94,.12);
}
.hero-cta-feature {
    padding: 20px 16px;
    display: flex;
    gap: 18px;
    align-items: flex-start;
    border-bottom: 1px solid rgba(255,255,255,.04);
    border-left: 2px solid transparent;
    transition: border-left-color .3s, background .3s, opacity .65s ease, transform .65s ease;
    cursor: default;
}
.hero-cta-feature:last-child { border-bottom: none; }
.hero-cta-feature:hover {
    border-left-color: #bc945e;
    background: rgba(188,148,94,.04);
}

/* Icon wrap — animated circle */
.hero-cta-feature-icon-wrap {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border: 1px solid rgba(188,148,94,.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bc945e;
    font-size: 16px;
    transition: background .3s, border-color .3s, transform .3s;
    margin-top: 2px;
}
.hero-cta-feature:hover .hero-cta-feature-icon-wrap {
    background: #bc945e;
    border-color: #bc945e;
    color: #fff;
    transform: scale(1.08);
}

.hero-cta-feature-title {
    font-size: 13px;
    font-weight: 700;
    color: #e0d5c5;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
    transition: color .25s;
}
.hero-cta-feature:hover .hero-cta-feature-title { color: #bc945e; }
.hero-cta-feature-text {
    font-size: 13px;
    color: #666;
    line-height: 1.65;
}

/* ---- Responsive ---- */
@media (max-width: 991px) {
    .hero-cta-title { font-size: 32px; }
    .hero-cta-section { padding: 60px 0; }
    .hero-cta-features {
        padding-left: 0;
        border-left: none;
        border-top: 1px solid rgba(188,148,94,.12);
        margin-top: 44px;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .hero-cta-feature {
        flex: 1 1 200px;
        border-bottom: none;
        border-right: 1px solid rgba(255,255,255,.04);
    }
    .hero-cta-feature:last-child { border-right: none; }
}
@media (max-width: 767px) {
    .hero-cta-title { font-size: 26px; }
    .hero-cta-section { padding: 50px 0; }
    .hero-cta-section::after { display: none; }
    .hero-cta-catalog { flex-direction: column; align-items: flex-start; gap: 10px; }
    .hero-cta-features { flex-direction: column; }
    .hero-cta-feature { border-right: none; border-bottom: 1px solid rgba(255,255,255,.04); }
    .hero-cta-feature:last-child { border-bottom: none; }
}

/* ========================================
   Catalog CTA Strip — Premium
   ======================================== */

/* Full-viewport break-out */
.catalog-cta-strip {
    position: relative;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    margin-top: 50px;
    margin-bottom: 50px;
    background: #080604;
    overflow: hidden;
    padding: 0;
    box-sizing: border-box;
}

/* Diagonal texture */
.catalog-cta-strip::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        -55deg,
        transparent 0, transparent 18px,
        rgba(188,148,94,.012) 18px, rgba(188,148,94,.012) 19px
    );
    pointer-events: none;
    z-index: 0;
}

/* Warm glow top-right */
.ccs-glow {
    position: absolute;
    top: -120px; right: -80px;
    width: 560px; height: 560px;
    background: radial-gradient(ellipse, rgba(188,148,94,.09) 0%, transparent 62%);
    pointer-events: none;
    z-index: 0;
}

/* Gradient border — top */
.ccs-border-top {
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(188,148,94,.18) 15%,
        rgba(188,148,94,.65) 50%,
        rgba(188,148,94,.18) 85%,
        transparent 100%
    );
    position: relative;
    z-index: 2;
}
/* Gradient border — bottom */
.ccs-border-bottom {
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(188,148,94,.12) 20%,
        rgba(188,148,94,.38) 50%,
        rgba(188,148,94,.12) 80%,
        transparent 100%
    );
    position: relative;
    z-index: 2;
}

/* Inner flex */
.ccs-inner {
    display: flex;
    align-items: stretch;
    position: relative;
    z-index: 1;
    min-height: 220px;
}

/* ---- Left content ---- */
.ccs-left {
    flex: 1 1 0;
    padding: 52px 56px 52px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 1px solid rgba(188,148,94,.1);
}

/* Tag / label */
.ccs-tag {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 9.5px;
    letter-spacing: 4.5px;
    color: #bc945e;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .5s ease, transform .5s ease;
}
.ccs-tag::before {
    content: '';
    display: block;
    width: 0;
    height: 1px;
    background: #bc945e;
    flex-shrink: 0;
    transition: width .75s cubic-bezier(.22,1,.36,1);
}
.catalog-cta-strip.ccs-visible .ccs-tag {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .15s;
}
.catalog-cta-strip.ccs-visible .ccs-tag::before { width: 32px; }

/* Heading */
.ccs-heading {
    font-size: 30px;
    font-weight: 800;
    color: #ece4d8;
    text-transform: uppercase;
    letter-spacing: .5px;
    line-height: 1.22;
    margin: 0 0 36px;
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .6s ease, transform .6s ease;
    transition-delay: .28s;
}
.ccs-heading em { font-style: normal; color: #bc945e; }
.catalog-cta-strip.ccs-visible .ccs-heading {
    opacity: 1;
    transform: translateY(0);
}

/* Features line */
.ccs-features-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
    font-size: 10px;
    letter-spacing: 2px;
    color: #5a5248;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .55s ease, transform .55s ease;
    transition-delay: .38s;
}
.catalog-cta-strip.ccs-visible .ccs-features-line {
    opacity: 1;
    transform: translateY(0);
}
.ccs-dot {
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(188,148,94,.35);
    flex-shrink: 0;
}

/* Stats row */
.ccs-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s ease, transform .6s ease;
    transition-delay: .55s;
}
.catalog-cta-strip.ccs-visible .ccs-stats {
    opacity: 1;
    transform: translateY(0);
}
.ccs-stat {
    display: flex;
    flex-direction: column;
    padding-right: 32px;
}
.ccs-stat-num-wrap {
    display: flex;
    align-items: baseline;
    gap: 2px;
    line-height: 1;
}
.ccs-stat-num {
    font-size: 40px;
    font-weight: 800;
    color: #bc945e;
    letter-spacing: -2px;
    font-variant-numeric: tabular-nums;
}
.ccs-stat-suffix {
    font-size: 22px;
    font-weight: 700;
    color: rgba(188,148,94,.65);
    line-height: 1;
    letter-spacing: 0;
}
.ccs-stat-label {
    font-size: 9px;
    letter-spacing: 3px;
    color: #46413c;
    text-transform: uppercase;
    margin-top: 7px;
}
.ccs-stat-sep {
    width: 1px;
    height: 44px;
    background: rgba(188,148,94,.13);
    margin: 0 32px 0 0;
    align-self: center;
    flex-shrink: 0;
}

/* ---- Right panel ---- */
.ccs-right {
    flex-shrink: 0;
    width: 340px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 44px 44px 44px 52px;
    opacity: 0;
    transform: translateX(26px);
    transition: opacity .65s ease, transform .65s ease;
    transition-delay: .32s;
}
.catalog-cta-strip.ccs-visible .ccs-right {
    opacity: 1;
    transform: translateX(0);
}

/* The framed panel */
.ccs-panel {
    position: relative;
    padding: 30px 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
    width: 100%;
}
/* Corner brackets — TL + BR via ::before ::after */
.ccs-panel::before,
.ccs-panel::after {
    content: '';
    position: absolute;
    width: 22px; height: 22px;
    border-color: rgba(188,148,94,.35);
    border-style: solid;
    transition: width .35s, height .35s, border-color .3s;
}
.ccs-panel::before { top: 0; left: 0;  border-width: 1px 0 0 1px; }
.ccs-panel::after  { bottom: 0; right: 0; border-width: 0 1px 1px 0; }
/* TR + BL via child spans */
.ccs-corner-tr,
.ccs-corner-bl {
    position: absolute;
    width: 22px; height: 22px;
    border-color: rgba(188,148,94,.35);
    border-style: solid;
    pointer-events: none;
    transition: width .35s, height .35s, border-color .3s;
}
.ccs-corner-tr { top: 0; right: 0; border-width: 1px 1px 0 0; }
.ccs-corner-bl { bottom: 0; left: 0; border-width: 0 0 1px 1px; }
/* Expand corners on hover */
.ccs-panel:hover::before,
.ccs-panel:hover::after { width: 30px; height: 30px; border-color: rgba(188,148,94,.7); }
.ccs-panel:hover .ccs-corner-tr,
.ccs-panel:hover .ccs-corner-bl { width: 30px; height: 30px; border-color: rgba(188,148,94,.7); }

.ccs-panel-text {
    font-size: 10px;
    color: #4a4540;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin: 0;
}

/* CTA button */
.ccs-btn {
    display: block;
    width: 100%;
    padding: 16px 24px;
    background: #bc945e;
    color: #fff !important;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    text-decoration: none !important;
    text-align: center;
    border: 1px solid #bc945e;
    position: relative;
    overflow: hidden;
    transition: background .3s, color .3s, box-shadow .3s;
    cursor: pointer;
    /* Pulse animation */
    animation: ccsPulse 3s ease-out infinite;
}
/* Shimmer sweep */
.ccs-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 55%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 25%,
        rgba(255,255,255,.22) 50%,
        transparent 75%
    );
    transition: left .55s ease;
    pointer-events: none;
}
.ccs-btn:hover::before { left: 160%; }
.ccs-btn:hover {
    background: transparent;
    color: #bc945e !important;
    box-shadow: none;
    animation: none;
}
@keyframes ccsPulse {
    0%   { box-shadow: 0 0 0 0   rgba(188,148,94,.4); }
    65%  { box-shadow: 0 0 0 11px rgba(188,148,94,0); }
    100% { box-shadow: 0 0 0 0   rgba(188,148,94,0); }
}

.ccs-panel-note {
    font-size: 9.5px;
    color: #352f28;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* ---- Responsive ---- */
@media (max-width: 1199px) {
    .ccs-right { width: 300px; padding: 40px 32px 40px 44px; }
    .ccs-heading { font-size: 26px; }
}
@media (max-width: 991px) {
    .ccs-heading { font-size: 22px; }
    .ccs-stat-num { font-size: 32px; }
    .ccs-right { width: 260px; padding: 36px 24px 36px 36px; }
    .ccs-left { padding: 44px 36px 44px 0; }
}
@media (max-width: 767px) {
    .catalog-cta-strip { margin-top: 28px; margin-bottom: 28px; }
    .ccs-inner { flex-direction: column; }
    .ccs-left {
        padding: 44px 0 36px;
        border-right: none;
        border-bottom: 1px solid rgba(188,148,94,.1);
    }
    .ccs-right { width: 100%; padding: 36px 0 44px; }
    .ccs-heading { font-size: 20px; }
    .ccs-stat-num { font-size: 30px; }
    .ccs-stat-sep { height: 36px; }
    .ccs-btn { width: 100%; }
    .ccs-glow { display: none; }
    .ccs-features-line { font-size: 9px; gap: 8px; }
}

/* ========================================
   Steps Section — Этапы работы (light, premium)
   ======================================== */
.steps-section {
    background:
        radial-gradient(circle, rgba(191,113,44,.052) 1.5px, transparent 1.5px),
        linear-gradient(160deg, #faf8f5 0%, #f1ebe3 55%, #e9dfd2 100%);
    background-size: 32px 32px, auto;
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(188,148,94,.22);
    border-bottom: 1px solid rgba(188,148,94,.22);
}

/* Warm radial glow — top left */
.steps-section::before {
    content: '';
    position: absolute;
    top: -100px; left: -80px;
    width: 520px; height: 520px;
    background: radial-gradient(ellipse, rgba(191,113,44,.08) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}
/* Secondary glow — bottom right */
.steps-section::after {
    content: '';
    position: absolute;
    bottom: -80px; right: -60px;
    width: 400px; height: 400px;
    background: radial-gradient(ellipse, rgba(188,148,94,.055) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

/* ---- Header ---- */
.steps-hd {
    text-align: center;
    margin-bottom: 56px;
    position: relative;
    z-index: 1;
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .65s ease, transform .65s ease;
}
.steps-section.sts-visible .steps-hd { opacity: 1; transform: translateY(0); }

.steps-hd-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-size: 10px;
    letter-spacing: 5px;
    color: #bc945e;
    text-transform: uppercase;
    font-weight: 600;
    margin: 0 0 14px;
}
.steps-hd-tag::before,
.steps-hd-tag::after {
    content: '';
    display: block;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, #bf712c, #bc945e);
    flex-shrink: 0;
    transition: width .8s cubic-bezier(.22,1,.36,1);
    transition-delay: .2s;
}
.steps-section.sts-visible .steps-hd-tag::before,
.steps-section.sts-visible .steps-hd-tag::after { width: 32px; }

.steps-hd-title {
    font-size: 42px;
    font-weight: 800;
    color: #1a1714;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.1;
    margin: 0 0 18px;
}
.steps-hd-title em { font-style: normal; color: #bf712c; }

.steps-hd-line {
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #bf712c, #bc945e, transparent);
    margin: 0 auto;
    transition: width .9s cubic-bezier(.22,1,.36,1);
    transition-delay: .38s;
}
.steps-section.sts-visible .steps-hd-line { width: 64px; }

/* ---- Steps track ---- */
.steps-track {
    display: grid;
    grid-template-columns: 1fr 36px 1fr 36px 1fr;
    align-items: stretch;
    gap: 0;
    position: relative;
    z-index: 1;
}

/* ---- Arrow connector — draws in ---- */
.step-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bf712c;
    font-size: 18px;
    position: relative;
    top: -18px;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: opacity .4s ease, transform .55s cubic-bezier(.22,1,.36,1);
}
.steps-section.sts-visible .step-connector { opacity: 1; transform: scaleX(1); }
/* Stagger per position — select by :nth-child within .steps-track */
.steps-track > .step-connector:nth-child(2) { transition-delay: .44s; }
.steps-track > .step-connector:nth-child(4) { transition-delay: .60s; }

/* ---- Bridge between rows ---- */
.steps-bridge {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    position: relative;
    z-index: 1;
}
.steps-bridge::before,
.steps-bridge::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(188,148,94,.28);
    max-width: 40%;
    transform: scaleX(0);
    transition: transform .7s cubic-bezier(.22,1,.36,1);
    transition-delay: .6s;
}
.steps-bridge::before { transform-origin: right; }
.steps-bridge::after  { transform-origin: left; }
.steps-section.sts-visible .steps-bridge::before,
.steps-section.sts-visible .steps-bridge::after { transform: scaleX(1); }

.steps-bridge-icon {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(188,148,94,.55);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bf712c;
    font-size: 12px;
    margin: 0 14px;
    flex-shrink: 0;
    opacity: 0;
    transform: scale(0);
    transition: opacity .45s, transform .5s cubic-bezier(.34,1.56,.64,1);
    transition-delay: .65s;
}
.steps-section.sts-visible .steps-bridge-icon {
    opacity: 1;
    transform: scale(1);
}
@keyframes bridgePulse {
    0%,100% { transform: scale(1) translateY(0); }
    50%      { transform: scale(1.12) translateY(3px); }
}
/* pulse kicks in after pop completes */
.steps-section.sts-visible .steps-bridge-icon {
    animation: bridgePulse 2s ease-in-out infinite;
    animation-delay: 1.2s;
}

/* ---- Step card ---- */
.step-item {
    position: relative;
    padding: 30px 24px 28px;
    border: 1px solid rgba(188,148,94,.2);
    background: #fff;
    box-shadow: 0 2px 18px rgba(0,0,0,.055);
    overflow: hidden;
    cursor: default;
    z-index: 1;
    opacity: 0;
    transform: translateY(48px) scale(.95);
    transition:
        opacity .65s ease,
        transform .7s cubic-bezier(.22,1,.36,1),
        border-color .28s,
        box-shadow .28s;
}
.step-item.si-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.step-item:hover {
    border-color: rgba(188,148,94,.55);
    box-shadow: 0 14px 48px rgba(188,148,94,.18);
    transform: translateY(-6px) scale(1);
    transition:
        border-color .22s,
        box-shadow .25s,
        transform .25s ease;
}

/* One-time shimmer sweep on reveal */
@keyframes stpShimmer {
    0%   { left: -100%; }
    100% { left: 170%; }
}
.step-item::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 20%,
        rgba(255,255,255,.55) 50%,
        transparent 80%
    );
    pointer-events: none;
    z-index: 10;
}
.step-item.si-visible::before {
    animation: stpShimmer 1s ease forwards;
    animation-delay: .3s;
}

/* Big background number */
.step-n {
    position: absolute;
    bottom: -18px;
    right: 6px;
    font-size: 104px;
    font-weight: 900;
    color: rgba(191,113,44,.06);
    line-height: 1;
    letter-spacing: -4px;
    pointer-events: none;
    user-select: none;
    opacity: 0;
    transform: scale(1.5) translateX(14px);
    transition: opacity .85s ease, transform .85s ease;
    transition-delay: .45s;
}
.step-item.si-visible .step-n {
    opacity: 1;
    transform: scale(1) translateX(0);
}

/* Small badge — spin in */
.step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid rgba(191,113,44,.45);
    border-radius: 50%;
    font-size: 9.5px;
    font-weight: 700;
    color: #bf712c;
    letter-spacing: .5px;
    margin-bottom: 14px;
    opacity: 0;
    transform: rotate(-180deg) scale(.4);
    transition: opacity .45s ease, transform .52s cubic-bezier(.34,1.56,.64,1);
    transition-delay: .18s;
}
.step-item.si-visible .step-badge {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* Icon circle — spring pop */
.step-icon-wrap {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(188,148,94,.28);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bc945e;
    font-size: 17px;
    margin-bottom: 18px;
    opacity: 0;
    transform: scale(0);
    transition:
        opacity .5s cubic-bezier(.34,1.56,.64,1),
        transform .5s cubic-bezier(.34,1.56,.64,1),
        background .28s, border-color .28s, color .28s;
    transition-delay: .24s;
}
.step-item.si-visible .step-icon-wrap {
    opacity: 1;
    transform: scale(1);
}
.step-item:hover .step-icon-wrap {
    background: #bc945e;
    border-color: #bc945e;
    color: #fff;
    transform: scale(1.08);
    transition-delay: 0s;
}

.step-title {
    font-size: 11.5px;
    font-weight: 700;
    color: #1a1714;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0 0 10px;
    line-height: 1.4;
    transition: color .25s;
}
.step-item:hover .step-title { color: #bf712c; }

.step-desc {
    font-size: 12.5px;
    color: #7a6f65;
    line-height: 1.72;
    margin: 0;
}

/* Left accent bar on hover — gradient draw */
.step-item::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, #bf712c 0%, #bc945e 100%);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform .38s cubic-bezier(.22,1,.36,1);
}
.step-item:hover::after { transform: scaleY(1); }

/* ---- Responsive ---- */
@media (max-width: 991px) {
    .steps-hd-title { font-size: 32px; }
    .steps-track { grid-template-columns: 1fr 28px 1fr 28px 1fr; }
    .step-title { font-size: 11px; }
    .steps-section::after { display: none; }
}
@media (max-width: 767px) {
    .steps-hd-title { font-size: 26px; }
    .steps-track { grid-template-columns: 1fr; }
    .step-connector { display: none; }
    .step-item { margin-bottom: 8px; }
    .steps-bridge { padding: 10px 0; }
    .steps-bridge::before,
    .steps-bridge::after { max-width: 30%; }
}

/* ========================================
   Reviews Section — Отзывы
   ======================================== */
.reviews-section {
    background: #080604;
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(188,148,94,.15);
    border-bottom: 1px solid rgba(188,148,94,.15);
}
/* Diagonal texture */
.reviews-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        -55deg,
        transparent 0, transparent 18px,
        rgba(188,148,94,.011) 18px, rgba(188,148,94,.011) 19px
    );
    pointer-events: none;
    z-index: 0;
}

/* ---- Left column ---- */
.reviews-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 20px;
    padding-bottom: 20px;
    position: relative;
    z-index: 1;
    opacity: 0;
    transform: translateX(-28px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1);
}
.reviews-section.rvs-visible .reviews-left {
    opacity: 1;
    transform: translateX(0);
}

.reviews-tag {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 9.5px;
    letter-spacing: 4.5px;
    color: #bc945e;
    text-transform: uppercase;
    font-weight: 600;
    margin: 0 0 20px;
}
.reviews-tag::before {
    content: '';
    display: block;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, #bf712c, #bc945e);
    flex-shrink: 0;
    transition: width .8s cubic-bezier(.22,1,.36,1);
    transition-delay: .25s;
}
.reviews-section.rvs-visible .reviews-tag::before { width: 32px; }

.reviews-title {
    font-size: 40px;
    font-weight: 800;
    color: #ece4d8;
    text-transform: uppercase;
    letter-spacing: .5px;
    line-height: 1.15;
    margin: 0 0 22px;
}
.reviews-title em { font-style: normal; color: #bf712c; }

.reviews-divider {
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #bf712c, #bc945e, transparent);
    margin-bottom: 24px;
    transition: width .85s cubic-bezier(.22,1,.36,1);
    transition-delay: .3s;
}
.reviews-section.rvs-visible .reviews-divider { width: 56px; }

.reviews-desc {
    font-size: 14px;
    color: #6a625a;
    line-height: 1.75;
    margin: 0 0 30px;
    max-width: 400px;
}

/* Stars row */
.reviews-stars {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 28px;
}
.reviews-stars .fa {
    font-size: 18px;
    color: #bf712c;
}
.reviews-stars-label {
    font-size: 10px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #4a4540;
    margin-left: 10px;
}

/* Yandex badge */
.reviews-badge {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border: 1px solid rgba(188,148,94,.12);
    background: rgba(188,148,94,.03);
    max-width: 340px;
    transition: border-color .25s, background .25s;
}
.reviews-badge:hover {
    border-color: rgba(188,148,94,.28);
    background: rgba(188,148,94,.06);
}
.reviews-badge-icon {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(188,148,94,.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bf712c;
    font-size: 15px;
    flex-shrink: 0;
}
.reviews-badge-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.reviews-badge-title {
    font-size: 12px;
    font-weight: 700;
    color: #d4c8b8;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.reviews-badge-sub {
    font-size: 10.5px;
    color: #4a4540;
    line-height: 1.4;
}

/* ---- Right column (widget) ---- */
.reviews-right {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding-top: 10px;
    padding-bottom: 10px;
    opacity: 0;
    transform: translateX(28px);
    transition: opacity .75s ease, transform .75s cubic-bezier(.22,1,.36,1);
    transition-delay: .15s;
}
.reviews-section.rvs-visible .reviews-right {
    opacity: 1;
    transform: translateX(0);
}

/* Glow behind widget */
.reviews-glow {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 600px; height: 500px;
    background: radial-gradient(ellipse, rgba(191,113,44,.07) 0%, transparent 62%);
    pointer-events: none;
    z-index: 0;
}

/* Decorative frame with corner brackets */
.reviews-widget-frame {
    position: relative;
    z-index: 1;
    padding: 14px;
}
/* TL + BR corners */
.reviews-widget-frame::before,
.reviews-widget-frame::after {
    content: '';
    position: absolute;
    width: 26px; height: 26px;
    border-color: rgba(188,148,94,.38);
    border-style: solid;
    transition: width .35s, height .35s, border-color .3s;
    pointer-events: none;
}
.reviews-widget-frame::before { top: 0; left: 0; border-width: 1px 0 0 1px; }
.reviews-widget-frame::after  { bottom: 0; right: 0; border-width: 0 1px 1px 0; }
/* TR + BL corners via spans */
.rwf-tr, .rwf-bl {
    position: absolute;
    width: 26px; height: 26px;
    border-color: rgba(188,148,94,.38);
    border-style: solid;
    pointer-events: none;
    transition: width .35s, height .35s, border-color .3s;
}
.rwf-tr { top: 0; right: 0; border-width: 1px 1px 0 0; }
.rwf-bl { bottom: 0; left: 0; border-width: 0 0 1px 1px; }

/* Expand corners on frame hover */
.reviews-widget-frame:hover::before,
.reviews-widget-frame:hover::after { width: 38px; height: 38px; border-color: rgba(188,148,94,.7); }
.reviews-widget-frame:hover .rwf-tr,
.reviews-widget-frame:hover .rwf-bl { width: 38px; height: 38px; border-color: rgba(188,148,94,.7); }

/* Scaler wrapper — desktop: ~1/1.3 scale */
.reviews-widget-scaler {
    display: block;
    width: 560px;
    height: 800px;
    overflow: hidden;
    border-radius: 4px;
    transform: scale(0.769);
    transform-origin: top center;
    margin-bottom: calc(800px * (0.769 - 1)); /* -184.8px: compensate layout height */
}

/* ---- Responsive ---- */
@media (max-width: 1199px) {
    .reviews-title { font-size: 34px; }
}
@media (max-width: 991px) {
    .reviews-right { justify-content: center; }
    .reviews-title { font-size: 28px; }
    .reviews-desc { max-width: 100%; }
}
@media (max-width: 767px) {
    .reviews-left { padding-bottom: 36px; }
    .reviews-right { justify-content: center; }
    .reviews-title { font-size: 26px; }
    /* Scale down further for narrow screens */
    .reviews-widget-scaler {
        transform: scale(.48);
        transform-origin: top left;
        margin-bottom: calc(800px * (.48 - 1)); /* -416px */
    }
}

/* ========================================
   Catalog card — price & order button
   ======================================== */

/* ---- Doors catalog (.item-main cards) ---- */
.item-main__bottom {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.item-main__price {
    font-size: 13px;
    font-weight: 700;
    color: #bc945e;
    letter-spacing: .5px;
    margin: 0;
    line-height: 1;
}
.item-main__price span {
    font-size: 11px;
    font-weight: 400;
    color: rgba(188,148,94,.7);
}
.item-main__order-btn {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #bc945e !important;
    text-decoration: none !important;
    border: 1px solid rgba(188,148,94,.35);
    padding: 6px 14px;
    margin: 0;
    line-height: 1;
    transition: border-color .25s, background .25s, color .25s;
    cursor: pointer;
}
.item-main__order-btn:hover {
    border-color: #bc945e;
    background: rgba(188,148,94,.08);
    color: #bc945e !important;
}

/* ---- Furniture catalog (.single-shop-item cards) ---- */
.shop-item-btns {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.shop-item-btns .cart-button {
    margin-top: 0 !important;
}
.shop-item-price {
    font-size: 14px;
    font-weight: 700;
    color: #bc945e;
    margin: 6px 0 10px;
    letter-spacing: .3px;
    display: block;
}
/* override style.css rule that forces all .meta span to display:block */
.shop-item-price span {
    display: inline !important;
    font-size: 12px;
    font-weight: 400;
    color: rgba(188,148,94,.7);
}
.shop-item-order-btn {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #bc945e !important;
    text-decoration: none !important;
    border: 1px solid rgba(188,148,94,.35);
    padding: 7px 16px;
    margin: 6px 0 10px;
    transition: border-color .25s, background .25s;
    cursor: pointer;
}
.shop-item-order-btn:hover {
    border-color: #bc945e;
    background: rgba(188,148,94,.07);
}

/* ========================================
   Hero Modal
   ======================================== */
#heroModal .modal-content {
    background: #1a1612;
    border: 1px solid rgba(188,148,94,.35);
    border-radius: 2px;
    box-shadow: 0 30px 80px rgba(0,0,0,.8);
}
#heroModal .modal-header {
    border-bottom: 1px solid rgba(188,148,94,.15);
    padding: 24px 30px 18px;
}
#heroModal .modal-title {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}
#heroModal .modal-label {
    display: block;
    font-size: 10px;
    letter-spacing: 4px;
    color: #bc945e;
    text-transform: uppercase;
    margin-bottom: 6px;
}
#heroModal .modal-header .close {
    color: #777;
    opacity: 1;
    text-shadow: none;
    font-size: 24px;
}
#heroModal .modal-header .close:hover { color: #bc945e; }
#heroModal .modal-body { padding: 26px 30px 30px; }
#heroModal .form-group { margin-bottom: 14px; }
#heroModal .form-control {
    background: #231e17;
    border: 1px solid rgba(188,148,94,.2);
    color: #ddd;
    border-radius: 2px;
    height: 44px;
    font-size: 14px;
    transition: border-color .2s;
}
#heroModal .form-control:focus {
    border-color: #bc945e;
    background: #2a2318;
    box-shadow: none;
    color: #fff;
}
#heroModal textarea.form-control { height: auto; }
#heroModal .form-control::-webkit-input-placeholder { color: #555; }
#heroModal .form-control::-moz-placeholder { color: #555; }
#heroModal .btn-hero-submit {
    width: 100%;
    padding: 13px;
    background: #bc945e;
    color: #fff;
    border: none;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    transition: background .25s;
    border-radius: 2px;
    margin-top: 6px;
    cursor: pointer;
}
#heroModal .btn-hero-submit:hover { background: #a07840; }
.hero-result {
    display: none;
    padding: 11px 14px;
    border-radius: 2px;
    font-size: 13px;
    text-align: center;
    margin-bottom: 14px;
}
.hero-result.success {
    background: rgba(188,148,94,.1);
    color: #bc945e;
    border: 1px solid rgba(188,148,94,.35);
    display: block;
}
.hero-result.error {
    background: rgba(180,60,60,.1);
    color: #e88;
    border: 1px solid rgba(180,60,60,.35);
    display: block;
}

/* ========================================
   CLS fix — reserve space for RevSlider banner
   so the layout does not shift when JS initialises the slider
   ======================================== */
.bannercontainer {
    min-height: 480px;
}
@media (min-width: 992px) {
    .bannercontainer { min-height: 560px; }
}
@media (max-width: 767px) {
    .bannercontainer { min-height: 260px; }
}

/* End */
/* /local/templates/.default/css/hero-cta.css?177607749836117 */