:root {

    --color-navy: #1c2247;

    --color-navy-dark: #131633;

    --color-ink: #1f233e;

    --color-muted: #7a809d;

    --color-snow: #f4f6fb;

    --color-surface: #ffffff;

    --color-line: #e1e4f0;

    --color-accent: #d73131;

    --color-accent-dark: #b82828;

    --color-primary: #233475;

    --color-success: #2ead57;

    --radius-lg: 24px;

    --radius-md: 16px;

    --shadow-soft: 0 25px 60px rgba(23, 27, 61, 0.12);

    --shadow-card: 0 20px 40px rgba(16, 18, 40, 0.08);

}



*,

*::before,

*::after {

    box-sizing: border-box;

}

html {

    overflow-x: hidden;

}



body {

    font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    margin: 0;

    color: var(--color-ink);

    background: #f3f4fb;

    line-height: 1.6;

    overflow-x: hidden;

}



img {

    max-width: 100%;

    height: auto;

    display: block;

}



a {

    color: inherit;

    text-decoration: none;

}



.text-accent {

    color: var(--color-accent) !important;

}



.brand-joker {

    color: #d73131;

    font-weight: 600;

}



.brand-auto {

    color: #1c2247;

    font-weight: 600;

}



.hero-section h1 .brand-joker {

    color: #d73131;

}



.hero-section h1 .brand-auto {

    color: #1c2247;

}



.container-xl {

    max-width: 1220px;

    margin: 0 auto;

    padding: 0 20px;

}



.btn-accent {

    --bs-btn-color: #fff;

    --bs-btn-bg: var(--color-accent);

    --bs-btn-border-color: var(--color-accent);

    --bs-btn-hover-color: #fff;

    --bs-btn-hover-bg: var(--color-accent-dark);

    --bs-btn-hover-border-color: var(--color-accent-dark);

    --bs-btn-focus-shadow-rgb: 240, 68, 82;

    border-radius: 999px;

    padding-inline: 28px;

}



.btn-outline-primary {

    border-radius: 999px;

    color: var(--color-accent);

    border-color: var(--color-accent);

    font-weight: 600;

}



.btn-outline-primary:hover {

    background: var(--color-accent);

    color: #fff;

}



.btn-outline-light {

    border-color: rgba(255, 255, 255, 0.6);

    color: #fff;

    border-radius: 999px;

}



.btn-navy {

    background: var(--color-navy);

    color: #fff;

    border: none;

    border-radius: 999px;

    padding-inline: 36px;

}



.btn-navy:hover {

    background: var(--color-navy-dark);

    color: #fff;

}



.btn-danger {

    --bs-btn-bg: var(--color-accent);

    --bs-btn-border-color: var(--color-accent);

    --bs-btn-hover-bg: var(--color-accent-dark);

    --bs-btn-hover-border-color: var(--color-accent-dark);

    border-radius: 6px;

    text-transform: uppercase;

    font-weight: 700;

    font-size: 0.85rem;

    padding-inline: 20px;

    white-space: nowrap;

}



.btn-ghost {

    border: 1px solid rgba(255, 255, 255, 0.45);

    color: #fff;

    border-radius: 999px;

    padding: 6px 18px;

}



.btn-outline-secondary {

    color: var(--color-ink);

    border-color: var(--color-line);

    font-size: 0.85rem;

    white-space: nowrap;

}



.eyebrow {

    font-size: 0.85rem;

    letter-spacing: 0.3em;

    text-transform: uppercase;

    font-weight: 600;

    color: var(--color-accent);

    display: inline-block;

    margin-bottom: 0.75rem;

}



.section {

    padding: 80px 0;

}



.section-light {

    background: #fff;

}



.section-muted {

    background: var(--color-snow);

}



.section-heading h2 {

    margin-bottom: 0.5rem;

    font-weight: 700;

}



.section-heading p {

    color: var(--color-muted);

    max-width: 720px;

    margin: 0 auto;

}



.top-info {

    background: var(--color-snow);

    border-bottom: 1px solid var(--color-line);

    padding: 18px 0;

    font-size: 0.9rem;

    color: var(--color-ink);

}



.top-info i {

    color: var(--color-accent);

}



.logo-top img {

    max-height: 65px;

    width: auto;

    display: block;

}



.logo-text p {

    font-size: 1.3rem;

    letter-spacing: 0.02em;

}



.logo-text small {

    display: block;

}



.primary-nav {

    background: var(--color-navy);

    padding: 0;

    border-bottom: 4px solid var(--color-accent);

}



.primary-nav .navbar-toggler {

    border: none;

    box-shadow: none;

}



.primary-nav .navbar-toggler-icon {

    filter: invert(1);

}



.primary-nav .navbar-brand {

    font-weight: 600;

    color: #fff;

}

.primary-nav .navbar-brand .brand-auto {

    color: #d73131;

}



.brand-mark {

    width: 48px;

    height: 48px;

    border-radius: 16px;

    background: linear-gradient(135deg, var(--color-accent), #ff6b5f);

    color: #fff;

    font-weight: 700;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 1.1rem;

}



.brand-mark--classic {

    background: transparent;

    border: 2px solid rgba(255, 255, 255, 0.3);

    color: #fff;

    font-weight: 700;

    letter-spacing: 1px;

}



.brand-title {

    color: #fff;

    font-size: 1.1rem;

    font-weight: 600;

    line-height: 1.2;

}



.brand-title span {

    color: var(--color-accent);

}



.primary-nav .nav-link {

    color: rgba(255, 255, 255, 0.8);

    font-weight: 600;

    text-transform: uppercase;

    font-size: 0.82rem;

    padding: 16px 18px;

    white-space: nowrap;

    border-right: 1px solid rgba(255, 255, 255, 0.08);

}



.primary-nav .nav-link.active,

.primary-nav .nav-link:hover {

    color: #fff;

    background: var(--color-accent);

}



.primary-nav .navbar-nav {

    gap: 0;

    flex-wrap: wrap;

}



.nav-cta {

    border-radius: 6px;

    font-size: 0.85rem;

}



.hero-section {

    background: var(--color-snow);

    color: var(--color-ink);

    padding: 100px 0 60px;

    border-bottom: 4px solid var(--color-line);

    margin-bottom: 20px;

}



.hero-section h1 {

    font-size: clamp(2rem, 4vw, 3.5rem);

    font-weight: 700;

    margin-bottom: 1rem;

}



.hero-section h1 span {

    color: var(--color-accent);

}



.hero-section .lead {

    color: var(--color-ink);

    margin-bottom: 1.5rem;

}



.hero-checklist {

    list-style: none;

    padding: 0;

    margin: 0;

    display: flex;

    flex-direction: column;

    gap: 0.75rem;

    color: var(--color-ink);

}



.hero-checklist i {

    color: var(--color-accent);

    margin-right: 0.5rem;

}



.hero-side {

    position: relative;

    padding-right: 50px;

    display: flex;

    flex-direction: column;

    gap: 24px;

}



.hero-media {

    background: #fff;

    border-radius: var(--radius-lg);

    padding: 18px;

    box-shadow: var(--shadow-card);

}



.hero-media__frame iframe {

    border: 0;

    border-radius: 18px;

}



.hero-media__image img,

.hero-media__image--default {

    width: 100%;

    border-radius: 18px;

    display: block;

    object-fit: cover;

    min-height: 280px;

}



.hero-media__image--default {

    background: linear-gradient(135deg, #f0e7ff, #ffe7e2);

}



.hero-side__gift {

    text-align: center;

    display: flex;

    flex-direction: column;

    align-items: center;

}



.hero-side__gift-text {

    font-weight: 700;

    color: var(--color-navy);

    margin-bottom: 16px;

    display: inline-block;

    max-width: 420px;

}



.hero-side__stripe {

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    width: 12px;

    background: var(--color-navy);

    border-radius: 999px;

}



.hero-anniversary {

    margin-top: 24px;

    border-left: 4px solid var(--color-accent);

    padding: 16px;

    font-weight: 600;

    color: var(--color-accent);

    background: #fff;

    border-radius: 12px;

    box-shadow: var(--shadow-card);

}



.hero-anniversary--highlight {

    background: #fff0f3;

}



.hero-countdown {

    display: grid;

    grid-template-columns: repeat(4, minmax(60px, 1fr));

    gap: 10px;

}



.hero-countdown div {

    background: var(--color-navy);

    color: #fff;

    text-align: center;

    border-radius: 12px;

    padding: 12px 6px;

}



.hero-countdown span {

    font-size: 1.3rem;

    font-weight: 700;

    display: block;

}



.hero-countdown small {

    font-size: 0.75rem;

    text-transform: uppercase;

    letter-spacing: 0.05em;

}



.hero-countdown--dark div {

    background: var(--color-navy);

    color: #fff;

}



.calculator-section {

    padding: 80px 0;

    background: #f3f4fb;

}



.calculator-card {

    background: #fff;

    border-radius: var(--radius-lg);

    padding: 50px;

    box-shadow: var(--shadow-card);

}



.calculator-title {

    font-size: 2rem;

    margin-bottom: 0.5rem;

}



.calculator-subtitle {

    color: var(--color-muted);

    margin-bottom: 1.5rem;

}



.calculator-form {

    display: flex;

    flex-direction: column;

    gap: 24px;

}



.calculator-field label {

    font-weight: 600;

    margin-bottom: 6px;

    display: block;

}



.calculator-field input[type="text"] {

    width: 100%;

    border: 1px solid var(--color-line);

    border-radius: 10px;

    padding: 12px 16px;

    font-weight: 600;

    margin-bottom: 8px;

}



.calculator-field input[type="text"]:focus {

    outline: 2px solid rgba(32, 63, 154, 0.2);

    border-color: var(--color-navy);

}



.calculator-field input[type="range"] {

    width: 100%;

}



.range-hint {

    display: flex;

    justify-content: space-between;

    color: var(--color-muted);

    font-size: 0.85rem;

}



.calculator-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

    gap: 12px;

}



.calc-select {

    width: 100%;

    border: 1px solid var(--color-line);

    border-radius: 10px;

    padding: 10px 14px;

    font-size: 0.95rem;

    color: var(--color-ink);

    background: #fff;

}



.calc-select:disabled {

    background: #f0f2f8;

}



.calculator-note {

    margin-top: 8px;

    color: var(--color-accent);

    font-size: 0.9rem;

}



.calculator-consent {

    font-size: 0.85rem;

    color: var(--color-muted);

}



.form-consent-note {

    font-size: 0.82rem;

    color: var(--color-muted);

    margin: 0.5rem 0 0;

    line-height: 1.45;

}



.form-consent-note a {

    color: var(--color-accent);

    text-decoration: underline;

}



.form-consent-note--inverse {

    color: rgba(255, 255, 255, 0.82);

}



.form-consent-note--inverse a {

    color: #fff;

}



.calculator-summary {

    background: var(--color-navy);

    color: #fff;

    border-radius: var(--radius-lg);

    padding: 32px;

    min-height: 100%;

    position: relative;

}



.calculator-summary__totals {

    display: flex;

    flex-direction: column;

    gap: 12px;

    margin-bottom: 24px;

}


.calculator-summary__item {

    display: flex;

    justify-content: space-between;

    margin-bottom: 14px;

    font-size: 0.95rem;

}



.calculator-summary__item strong {

    font-size: 1.3rem;

}



.calculator-summary__decision {

    margin-bottom: 24px;

    padding: 0;

    border: 0;

    background: none;

}


.calculator-summary__status {

    display: block;

    font-size: 0.95rem;

    font-weight: 600;

    color: #fff;

    letter-spacing: 0.02em;

}


.calculator-summary__hint {

    margin: 4px 0 0;

    color: rgba(255, 255, 255, 0.75);

    font-size: 0.9rem;

}


.calculator-summary__field {

    margin-bottom: 12px;

}



.calculator-rate {

    font-size: 0.95rem;

    margin-bottom: 16px;

}



.form-label--light {

    color: rgba(255, 255, 255, 0.8);

    font-size: 0.8rem;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    margin-bottom: 4px;

}



.form-control--inverse {

    background: rgba(255, 255, 255, 0.1);

    border: 1px solid rgba(255, 255, 255, 0.3);

    color: #fff;

}



.form-control--inverse:focus {

    background: rgba(255, 255, 255, 0.15);

    border-color: #fff;

    color: #fff;

    box-shadow: none;

}



.form-control--inverse::placeholder {

    color: rgba(255, 255, 255, 0.8);

}



.calculator-summary .btn {

    border-radius: 10px;

}



.calculator-disclaimer {

    font-size: 0.85rem;

    line-height: 1.5;

    max-width: 720px;

    margin-left: auto;

    margin-right: auto;

}


.calculator-modal {

    position: fixed;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 1050;

}



.calculator-modal[hidden] {

    display: none !important;

}



.calculator-modal__overlay {

    position: absolute;

    inset: 0;

    background: rgba(8, 7, 20, 0.5);

    backdrop-filter: blur(2px);

}



.calculator-modal__window {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    background: #fff;

    border-radius: 18px;

    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);

    width: min(900px, 90vw);

    max-height: 80vh;

    display: flex;

    flex-direction: column;

}



.calculator-modal__header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 18px 28px;

    border-bottom: 1px solid var(--color-line);

}



.calculator-modal__body {

    padding: 20px 28px;

    overflow: auto;

}



.calculator-modal__close {

    border: none;

    background: transparent;

    font-size: 1.6rem;

    line-height: 1;

    cursor: pointer;

}



.calculator-modal__body table {

    width: 100%;

    border-collapse: collapse;

}



.calculator-modal__body th,

.calculator-modal__body td {

    padding: 10px 12px;

    border-bottom: 1px solid var(--color-line);

    text-align: left;

}



.calculator-modal__body tbody tr:last-child td {

    border-bottom: none;

}



@media (max-width: 992px) {

    .calculator-card {

        padding: 30px;

    }

}



@media (max-width: 576px) {

    .calculator-card {

        padding: 20px;

    }



    .calculator-summary {

        padding: 24px;

    }

}



.hero-card {

    background: #fff;

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-soft);

    overflow: hidden;

}



.hero-card__header,

.hero-card__footer {

    padding: 20px 28px;

    background: var(--color-snow);

}



.hero-card__body {

    padding: 28px;

}



.hero-card__body .label {

    font-size: 0.85rem;

    color: var(--color-muted);

}



.hero-card__body .value {

    font-size: 1.25rem;

    font-weight: 700;

    margin: 0;

}



.hero-card .divider {

    height: 1px;

    background: var(--color-line);

    margin: 24px 0;

}



.hero-metrics {

    margin-top: 32px;

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));

    gap: 12px;

}



.hero-metrics > div {

    padding: 16px 20px;

    border-radius: 18px;

    background: #fff;

    text-align: center;

    box-shadow: var(--shadow-card);

}



.hero-metrics .label {

    font-size: 1.8rem;

    font-weight: 700;

}



.hero-metrics span {

    color: var(--color-muted);

    font-size: 0.9rem;

}



.benefit-card {

    background: #fff;

    border-radius: var(--radius-md);

    padding: 28px;

    box-shadow: var(--shadow-card);

    text-align: left;

    height: 100%;

}



.benefit-card i {

    font-size: 1.9rem;

    color: var(--color-accent);

    margin-bottom: 1rem;

}



.benefit-card h3 {

    font-size: 1.25rem;

    line-height: 1.2;

    margin-bottom: 0.5rem;

    word-break: break-word;

}



.benefit-card p {

    margin-bottom: 0;

}



.dual-step-section {

    padding-top: 80px;

    padding-bottom: 70px;

}



.two-step-card {

    border-radius: var(--radius-lg);

    border: 2px solid var(--color-navy);

    background: #fff;

    padding: 32px;

    box-shadow: 0 25px 60px rgba(11, 14, 40, 0.12);

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

}



.two-step-card__title h3 {

    margin-bottom: 0.5rem;

}



.two-step-card__title p {

    max-width: 640px;

    color: var(--color-muted);

    margin-bottom: 0;

}



.two-step-card__step[hidden] {

    display: none !important;

}



.two-step-card__step label {

    font-weight: 600;

    color: var(--color-ink);

}



.two-step-card__step .form-control {

    border-radius: 12px;

}



.two-step-card__actions {

    margin-top: 1.5rem;

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

}



.two-step-card__message {

    margin-top: 1rem;

    font-size: 0.95rem;

    color: var(--color-success);

    min-height: 1.2em;

}



@media (max-width: 576px) {

    .two-step-card {

        padding: 24px;

    }



    .two-step-card__actions {

        flex-direction: column;

    }



    .two-step-card__actions .btn {

        width: 100%;

    }

}



.product-card {

    background: #fff;

    border-radius: var(--radius-lg);

    padding: 32px;

    height: 100%;

    box-shadow: var(--shadow-card);

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



.product-card__icon {

    width: 56px;

    height: 56px;

    border-radius: 18px;

    background: rgba(240, 68, 82, 0.12);

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 1.5rem;

    color: var(--color-accent);

}



.product-card__price {

    font-weight: 700;

    font-size: 1.25rem;

}



.service-card__media {

    width: 100%;

    aspect-ratio: 5 / 2;

    border-radius: var(--radius-md);

    background: linear-gradient(135deg, #f4f6fb, #e8ecfa);

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    margin-bottom: 1rem;

    position: relative;

}



.service-card__media img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.service-card__media--empty {

    border: 2px dashed var(--color-line);

    color: var(--color-muted);

    text-align: center;

    flex-direction: column;

    gap: 0.2rem;

    font-size: 0.95rem;

    text-transform: none;

}



.service-card__media--hero {

    aspect-ratio: 16 / 6;

    margin-top: 1.5rem;

}



.application-section {

    padding-top: 30px;

}



.application-card {

    border-radius: var(--radius-lg);

    background: #fff;

    box-shadow: 0 25px 60px rgba(16, 18, 40, 0.08);

    padding: 32px;

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

    border: 2px solid rgba(28, 34, 71, 0.15);

}



.application-card__intro h3 {

    margin-bottom: 0.35rem;

}



.application-card__intro p {

    margin-bottom: 0;

    color: var(--color-muted);

}



.application-card__footer {

    margin-top: 1rem;

    display: flex;

    flex-wrap: wrap;

    gap: 1rem;

    align-items: center;

    justify-content: space-between;

}



.application-card__footer .form-check-input {

    margin-top: 0.2rem;

}



.application-card__footer button {

    min-width: 180px;

}



@media (max-width: 768px) {

    .application-card {

        padding: 24px;

    }



    .application-card__footer {

        flex-direction: column;

        align-items: flex-start;

    }



.application-card__footer button {

    width: 100%;

    }

}



.service-detail-hero {

    padding: 60px 0;

    background: var(--color-snow);

}



.service-detail-hero h1 {

    font-size: clamp(2rem, 4vw, 3.2rem);

    margin-bottom: 1rem;

}



.service-hero-list {

    list-style: none;

    padding: 0;

    margin: 1rem 0;

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

    gap: 0.5rem 1.5rem;

}



.service-hero-list li {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    font-weight: 500;

}



.service-hero-list i {

    color: var(--color-accent);

}



.service-hero-stats {

    display: flex;

    gap: 1.2rem;

    flex-wrap: wrap;

    margin-top: 1rem;

}



.service-hero-stats div {

    background: #fff;

    border-radius: var(--radius-md);

    padding: 16px 20px;

    box-shadow: var(--shadow-card);

    flex: 1 1 140px;

}



.service-hero-stats span {

    font-size: 0.85rem;

    color: var(--color-muted);

    display: block;

}



.service-hero-stats strong {

    font-size: 1.2rem;

}



.service-slider {

    position: relative;

    border-radius: var(--radius-lg);

    overflow: hidden;

    background: #111632;

}



.service-slider__track {

    position: relative;

    min-height: 320px;

}



.service-slider__slide {

    position: absolute;

    inset: 0;

    opacity: 0;

    transition: opacity 0.4s ease;

}



.service-slider__slide.is-active {

    opacity: 1;

    position: absolute;

}



.service-slider__slide img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.service-slider__slide span {

    position: absolute;

    left: 20px;

    bottom: 20px;

    background: rgba(0, 0, 0, 0.6);

    color: #fff;

    padding: 6px 12px;

    border-radius: 999px;

    font-size: 0.9rem;

}



.service-slider__slide--placeholder {

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    text-align: center;

    padding: 40px;

}



.service-slider__empty strong {

    display: block;

    font-size: 1.2rem;

}



.service-slider__nav {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    border: none;

    width: 42px;

    height: 42px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.85);

    color: var(--color-ink);

    z-index: 2;

}



[data-slider-prev] {

    left: 12px;

}



[data-slider-next] {

    right: 12px;

}



.service-lead-card {

    border: 2px solid rgba(28, 34, 71, 0.15);

    border-radius: var(--radius-lg);

    padding: 32px;

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: 2rem;

    background: #fff;

    box-shadow: var(--shadow-card);

}



.service-lead-form__footer {

    margin-top: 1rem;

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 1rem;

    justify-content: space-between;

}



.requirement-card {

    background: #fff;

    border-radius: var(--radius-md);

    padding: 24px;

    box-shadow: var(--shadow-card);

    height: 100%;

}



.requirement-card h3 {

    margin-bottom: 0.8rem;

}



.requirement-card ul {

    padding-left: 1rem;

    margin: 0;

    display: flex;

    flex-direction: column;

    gap: 0.4rem;

}



.requirements-section {

    background: var(--color-snow);

}



.requirement-card--home {

    text-align: left;

}



.requirement-card__icon {

    display: flex;

    justify-content: center;

    margin-bottom: 1rem;

}



.requirement-card__circle {

    width: 88px;

    height: 88px;

    border-radius: 50%;

    border: 6px solid #d2a654;

    background: radial-gradient(circle at 30% 30%, #30406b, #0c1433);

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 2rem;

}



.service-testimonials .testimonial-card {

    background: #fff;

    border-radius: var(--radius-md);

    padding: 24px;

    height: 100%;

    box-shadow: var(--shadow-card);

}



.testimonial-card__author {

    margin-top: 1rem;

    display: flex;

    flex-direction: column;

    color: var(--color-muted);

}



.service-faq .accordion-button:focus {

    box-shadow: none;

}



.service-other .product-card {

    height: 100%;

}



@media (max-width: 768px) {

    .service-hero-stats {

        flex-direction: column;

    }



    .service-lead-card {

        padding: 24px;

    }

}

.feature-list {

    list-style: none;

    padding: 0;

    margin: 0;

    display: flex;

    flex-direction: column;

    gap: 0.6rem;

    color: var(--color-muted);

}



.feature-list i {

    color: var(--color-success);

    margin-right: 0.4rem;

}



.feature-list--detail {

    color: var(--color-ink);

}



.empty-state {

    padding: 32px;

    border-radius: var(--radius-md);

    background: var(--color-snow);

    text-align: center;

    color: var(--color-muted);

}



.process-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

    gap: 24px;

}



.process-grid article {

    background: #fff;

    padding: 28px;

    border-radius: var(--radius-md);

    box-shadow: var(--shadow-card);

}



.process-grid .step {

    width: 48px;

    height: 48px;

    border-radius: 12px;

    background: rgba(240, 68, 82, 0.15);

    color: var(--color-accent);

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-weight: 700;

    margin-bottom: 1rem;

}



.cta-panel {

    background: linear-gradient(120deg, #1f254f, #10132c);

    color: #fff;

    padding: 80px 0;

}



.cta-panel h2 {

    font-size: clamp(1.8rem, 3vw, 2.6rem);

}



.cta-form {

    background: #fff;

    border-radius: var(--radius-md);

    padding: 28px;

}



.cta-form .form-label {

    font-weight: 600;

}



.page-hero {

    padding: 80px 0 40px;

}



.service-hero,

.blog-hero,

.contacts-hero {

    background: linear-gradient(135deg, #f7f5ff, #fef4ef);

    border-bottom: 1px solid var(--color-line);

}



.detail-page {

    padding: 80px 0;

    background: var(--color-snow);

}



.pill-group {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 24px;

}



.pill {

    padding: 6px 16px;

    border-radius: 999px;

    border: 1px solid var(--color-line);

    color: var(--color-muted);

    font-weight: 600;

    font-size: 0.9rem;

}



.pill.active {

    background: var(--color-ink);

    color: #fff;

    border-color: var(--color-ink);

}



.info-card {

    background: #fff;

    border-radius: var(--radius-lg);

    padding: 24px;

    box-shadow: var(--shadow-card);

}



.contact-card {

    background: #fff;

    padding: 32px;

    border-radius: var(--radius-md);

    text-align: center;

    box-shadow: var(--shadow-card);

    height: 100%;

}



.contact-card i {

    font-size: 2rem;

    color: var(--color-accent);

    margin-bottom: 1rem;

}



.contact-socials {

    margin-top: 0.75rem;

}



.contact-socials a {

    font-weight: 600;

    color: var(--color-accent);

    text-decoration: none;

}



.contact-socials a:hover {

    color: var(--color-navy);

}



.map-placeholder {

    background: #fff;

    border-radius: var(--radius-lg);

    padding: 60px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px dashed var(--color-line);

}



.detail-card {

    background: #fff;

    border-radius: var(--radius-lg);

    padding: 40px;

    box-shadow: var(--shadow-soft);

}



.detail-sidebar {

    background: #fff;

    border-radius: var(--radius-lg);

    padding: 32px;

    box-shadow: var(--shadow-card);

}

.detail-media img {
    width: 100%;
    display: block;
}

.detail-related {
    margin-top: 12px;
}

.detail-related__title {
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-muted);
    margin-bottom: 12px;
    font-weight: 600;
}

.detail-related__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.detail-related__list li {
    margin-bottom: 16px;
}

.detail-related__list a {
    display: block;
    color: var(--color-ink);
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 4px;
    transition: color .2s ease;
}

.detail-related__list a:hover {
    color: var(--color-primary);
}

.detail-related__list span {
    font-size: 0.85rem;
    color: var(--color-muted);
}



.detail-hint {

    padding: 18px;

    border-radius: var(--radius-md);

    background: var(--color-snow);

    margin-top: 20px;

}



.detail-hint .label {

    font-size: 0.75rem;

    letter-spacing: 0.15em;

    text-transform: uppercase;

    color: var(--color-muted);

}



.blog-card {

    background: #fff;

    border-radius: var(--radius-lg);

    padding: 32px;

    box-shadow: var(--shadow-card);

    height: 100%;

    position: relative;

}



.blog-card__badge {

    font-size: 0.85rem;

    color: var(--color-accent);

    font-weight: 600;

    margin-bottom: 0.5rem;

}



.blog-card a {

    color: var(--color-accent);

    font-weight: 600;

}



.blog-detail p {

    margin-bottom: 1rem;

    color: var(--color-ink);

}



.site-footer {

    background: #121027;

    color: #fff;

    padding: 80px 0 40px;

    margin-top: 60px;

}



.site-footer .footer-links a,

.site-footer .footer-contacts a {

    color: rgba(255, 255, 255, 0.8);

}



.footer-links li {

    margin-bottom: 0.5rem;

}



.footer-contacts .label {

    display: block;

    font-size: 0.85rem;

    color: rgba(255, 255, 255, 0.6);

}



.footer-meta {

    margin-top: 40px;

    padding-top: 24px;

    border-top: 1px solid rgba(255, 255, 255, 0.1);

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

    gap: 12px;

}



@media (max-width: 992px) {

    .hero-section {

        text-align: center;

    }



    .hero-checklist {

        align-items: center;

    }



    .hero-card {

        margin-top: 20px;

    }



    .primary-nav .navbar-collapse {

        background: #fff;

        padding: 20px;

        border-radius: var(--radius-md);

        margin-top: 16px;

        box-shadow: var(--shadow-card);

    }



    .primary-nav .nav-link {

        background: #1f233e;

        color: #fff;

        border-right: none;

        border-bottom: 1px solid rgba(255, 255, 255, 0.15);

        border-radius: 6px;

        margin-bottom: 12px;

    }



    .primary-nav .nav-link:last-child {

        border-bottom: none;

        margin-bottom: 0;

    }



    .top-line .d-flex {

        flex-direction: column;

        align-items: flex-start !important;

    }

}



@media (max-width: 576px) {

    .hero-card__body .value {

        font-size: 1rem;

    }



    .section {

        padding: 60px 0;

    }



    .map-placeholder {

        padding: 32px;

    }



    .detail-card,

    .detail-sidebar {

        padding: 24px;

    }



    .top-contacts {

        width: 100%;

        display: flex;

        flex-direction: column;

        gap: 8px;

    }

}



/* Footer */



.site-footer {

    padding: 70px 0 50px;

}



.site-footer .footer-top {

    margin-bottom: 56px;

}



.site-footer .footer-divider {

    height: 1px;

    background: rgba(255, 255, 255, 0.18);

    margin-bottom: 48px;

}



.site-footer .footer-logo img {

    max-width: 150px;

    height: auto;

    display: block;

}



.site-footer .footer-links li {

    margin-bottom: 12px;

}



.site-footer .footer-links a {

    color: rgba(255, 255, 255, 0.72);

    text-decoration: none;

    transition: 0.2s ease;

    line-height: 1.45;

}



.site-footer .footer-links a:hover {

    color: #fff;

}



.site-footer .footer-map {

    border-radius: 16px;

    overflow: hidden;

}



.site-footer .footer-map iframe {

    display: block;

    border: 0;

}



.site-footer .footer-socials {

    display: flex;

    gap: 12px;

    flex-wrap: wrap;

}



.site-footer .footer-socials a {

    width: 42px;

    height: 42px;

    border-radius: 50%;

    background: #fff;

    color: #111;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    font-size: 18px;

    transition: 0.2s ease;

}



.site-footer .footer-socials a:hover {

    transform: translateY(-2px);

}



.site-footer .footer-policy-links {

    display: flex;

    flex-direction: column;

    gap: 8px;

}



.site-footer .footer-policy-links a {

    color: #fff;

    font-weight: 600;

    text-decoration: underline;

    line-height: 1.4;

}



.site-footer .footer-legal {

    max-width: 860px;

    line-height: 1.65;

    font-size: 15px;

}



.site-footer .footer-legal p {

    margin-bottom: 22px;

}



@media (max-width: 991.98px) {

    .site-footer {

        padding: 50px 0 36px;

    }



    .site-footer .footer-top {

        margin-bottom: 40px;

    }



    .site-footer .footer-divider {

        margin-bottom: 32px;

    }



    .site-footer .footer-logo img {

        max-width: 130px;

    }



    .site-footer .footer-map iframe {

        height: 300px;

    }

}



.hero-carousel {

    background: #fff;

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-card);

    padding: 18px;

}



.hero-slide {

    display: flex;

    flex-direction: column;

    gap: 16px;

}



.hero-slide__media {

    border-radius: var(--radius-md);

    overflow: hidden;

    background: var(--color-snow);

    min-height: 200px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.hero-slide__media img {

    width: 100%;

    height: auto;

    object-fit: cover;

}



.hero-slide__media--empty {

    border: 1px dashed var(--color-line);

    color: var(--color-muted);

    font-size: 0.9rem;

    padding: 30px 10px;

    text-align: center;

}



.hero-slide__eyebrow {

    font-size: 0.75rem;

    text-transform: uppercase;

    letter-spacing: 0.2em;

    color: var(--color-accent);

}



.hero-slide__body h3 {

    margin-bottom: 0.3rem;

}



.hero-slide__body p {

    margin-bottom: 0;

    color: var(--color-muted);

}



.loyalty-card {

    background: #fff;

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-card);

    height: 100%;

    display: flex;

    flex-direction: column;

}



.loyalty-card__media {

    border-top-left-radius: var(--radius-lg);

    border-top-right-radius: var(--radius-lg);

    overflow: hidden;

    min-height: 180px;

    background: var(--color-snow);

    display: flex;

    align-items: center;

    justify-content: center;

}



.loyalty-card__media img {

    width: 100%;

    height: auto;

    object-fit: cover;

}



.loyalty-card__media--empty {

    border: 1px dashed var(--color-line);

    color: var(--color-muted);

    font-size: 0.9rem;

    padding: 20px;

    text-align: center;

}



.loyalty-card__body {

    padding: 24px;

    flex: 1;

    display: flex;

    flex-direction: column;

}



.loyalty-card__badge {

    font-size: 0.75rem;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    color: var(--color-accent);

}



.loyalty-card__rate {

    font-weight: 700;

    font-size: 1.2rem;

    margin-bottom: 1rem;

}



.loyalty-card__body ul {

    list-style: none;

    padding: 0;

    margin: 0 0 1rem 0;

}



.loyalty-card__body li {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 0.4rem;

}



.hero-section--about {

    background: var(--color-snow);

}



.about-story {

    background: #fff;

}



.about-story__text p {

    color: var(--color-muted);

    margin-bottom: 1rem;

}



.about-stats {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

    gap: 16px;

}



.about-stat-card {

    background: var(--color-snow);

    border-radius: var(--radius-md);

    padding: 18px;

    box-shadow: var(--shadow-card);

    text-align: left;

}



.about-stat-card i {

    color: var(--color-accent);

    font-size: 1.5rem;

    margin-bottom: 0.5rem;

    display: inline-block;

}



.about-stat-card h3 {

    margin-bottom: 0.35rem;

    font-size: 1.35rem;

}



.about-stat-card p {

    margin-bottom: 0;

    color: var(--color-muted);

    font-size: 0.95rem;

}



.about-timeline__list {

    position: relative;

    padding-left: 24px;

    border-left: 2px solid var(--color-line);

}



.timeline-item {

    position: relative;

    padding: 16px 0 16px 18px;

}



.timeline-item__dot {

    position: absolute;

    left: -34px;

    top: 24px;

    width: 16px;

    height: 16px;

    border-radius: 50%;

    background: var(--color-accent);

    box-shadow: 0 0 0 6px rgba(215, 49, 49, 0.2);

}



.timeline-item__body h3 {

    font-size: 1.15rem;

    margin-bottom: 0.35rem;

}



.timeline-item__body p {

    margin-bottom: 0;

    color: var(--color-muted);

}



.about-gallery {

    background: var(--color-snow);

}



.about-gallery__grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

    gap: 20px;

}



.about-gallery__item {

    background: #fff;

    border-radius: var(--radius-md);

    overflow: hidden;

    box-shadow: var(--shadow-card);

}



.about-gallery__item img {

    width: 100%;

    height: 220px;

    object-fit: cover;

    display: block;

}



.about-gallery__placeholder {

    height: 220px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--color-snow);

    color: var(--color-muted);

    font-size: 0.9rem;

}



.about-gallery__item figcaption {

    padding: 12px 16px;

    font-size: 0.95rem;

    color: var(--color-muted);

}



 .policy-card {

    background: #fff;

    border-radius: var(--radius-lg);

    padding: 32px;

    box-shadow: var(--shadow-card);

 }



.policy-card h1 {

    margin-bottom: 1.5rem;

}



.policy-body p {

    margin-bottom: 1rem;

    color: var(--color-ink);

 }



.map-embed iframe {

    width: 100%;

    border: 0;

    min-height: 360px;

    border-radius: var(--radius-lg);

}



 @media (max-width: 575.98px) {

    .policy-card {

        padding: 20px;

    }

 }

@media (max-width: 767.98px) {

    .about-timeline__list {

        padding-left: 18px;

    }



    .timeline-item__dot {

        left: -28px;

    }

}

.lead-popup {

    position: fixed;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 1050;

    background: rgba(5, 10, 35, 0.55);

    transition: opacity 0.3s ease;

}



.lead-popup[hidden] {

    opacity: 0;

    pointer-events: none;

}



.lead-popup.is-visible {

    opacity: 1;

}



.lead-popup__window {

    background: #fff;

    padding: 32px;

    border-radius: 20px;

    max-width: 380px;

    width: 90%;

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);

    position: relative;

    z-index: 2;

}



.lead-popup__overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

}



.lead-popup__close {

    position: absolute;

    top: 12px;

    right: 12px;

    border: none;

    background: transparent;

    font-size: 1.5rem;

    line-height: 1;

    color: var(--color-muted);

    cursor: pointer;

}



.popup-open {

    overflow: hidden;

}



.popup-form .btn {

    border-radius: 12px;

}



.cookie-banner {

    position: fixed;

    left: 0;

    right: 0;

    bottom: 0;

    z-index: 1040;

    background: linear-gradient(120deg, var(--color-navy), var(--color-navy-dark));

    color: #fff;

    padding: 20px;

    border-top: 3px solid var(--color-accent);

    transform: translateY(100%);

    transition: transform 0.3s ease;

}



.cookie-banner.is-visible {

    transform: translateY(0);

}



.cookie-banner__content {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

}



.cookie-banner a {

    color: #fff;

    text-decoration: underline;

    font-weight: 600;

}



.cookie-banner .btn {

    min-width: 140px;

    border-radius: 30px;

    background: var(--color-accent);

    color: #fff;

    border: none;

    padding: 10px 24px;

    font-weight: 600;

}



.cookie-banner .btn:hover {

    background: var(--color-accent-dark);

}

.reviews-widget {
    text-align: center;
}

.reviews-widget__frame {
    max-width: 720px;
    margin: 0 auto;
}

.reviews-widget__frame iframe {
    width: 100%;
    min-height: 520px;
    border: none;
}

.hero-section--filial .address-card {
    display: flex;
    gap: 16px;
    padding: 16px 20px;
    border-radius: var(--radius-md);
    background: var(--color-snow);
    margin-top: 24px;
    align-items: center;
}

.hero-section--filial .address-card i {
    font-size: 32px;
    color: var(--color-primary);
}

.filials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

.filial-card {
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    padding: 20px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(20, 23, 46, 0.03);
    height: 100%;
}

.filial-card__header {
    margin-bottom: 12px;
}

.filial-card__city {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-muted);
}

.filial-card__address {
    flex-grow: 1;
    min-height: 48px;
    color: var(--color-ink);
}

.filial-card.is-current {
    border-color: var(--color-accent);
    box-shadow: 0 12px 40px rgba(215, 49, 49, 0.15);
}

.filial-card .btn.disabled {
    cursor: default;
    opacity: 1;
}


/* Yandex rewiews */

.reviews-widget-section {
    padding: 90px 0;
    background: #f4f6fb;
}

.reviews-widget-section__heading {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 36px;
}

.reviews-widget-section__eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    font-size: 13px;
    line-height: 1;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: #e45b56;
}

.reviews-widget-section__title {
    margin: 0;
    font-size: 46px;
    line-height: 1.15;
    font-weight: 800;
    color: #1f2d5a;
}

.reviews-widget-box {
    width: 100%;
    max-width: 740px;
    margin: 0 auto;
    background: transparent;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
}

/* div, который приходит из админки */
.reviews-widget-box > div {
    width: 100% !important;
    max-width: none !important;
    height: 820px !important;
    overflow: hidden !important;
    position: relative !important;
    background: transparent !important;
}

/* iframe Яндекса */
.reviews-widget-box iframe {
    display: block;
    width: 100% !important;
    height: 820px !important;
    border: 0 !important;
    background: transparent !important;
}

/* ссылка Яндекса снизу */
.reviews-widget-box a {
    left: 0 !important;
    width: 100% !important;
    text-align: center !important;
    bottom: 8px !important;
}

@media (max-width: 991.98px) {
    .reviews-widget-section {
        padding: 70px 0;
    }

    .reviews-widget-section__title {
        font-size: 36px;
    }

    .reviews-widget-box {
        max-width: 720px;
    }

    .reviews-widget-box > div,
    .reviews-widget-box iframe {
        height: 760px !important;
    }
}

@media (max-width: 767.98px) {
    .reviews-widget-section__heading {
        margin-bottom: 26px;
    }

    .reviews-widget-section__title {
        font-size: 28px;
    }

    .reviews-widget-box {
        max-width: 740px;
    }

    .reviews-widget-box > div,
    .reviews-widget-box iframe {
        height: 620px !important;
    }
}


/* РКН и ЦБ */

.footer-rkn-link,
.footer-cbr-link {
    margin-top: 18px;
}

.footer-rkn-link a,
.footer-cbr-link a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
    line-height: 1.4;
    transition: color .2s ease, opacity .2s ease;
}

.footer-rkn-link a:hover,
.footer-cbr-link a:hover {
    color: #ffffff;
}

.footer-rkn-link img,
.footer-cbr-link img {
    width: 32px;
    height: 32px;
    display: block;
    flex: 0 0 32px;
    opacity: 0.9;
}

.footer-rkn-link span,
.footer-cbr-link span {
    display: inline-block;
}


/* Примеры оценки */

.appraisal-section {
    padding: 80px 0;
    background: #f7f8fc;
}

.appraisal-section .section-heading {
    max-width: 720px;
    margin: 0 auto 40px;
}

.appraisal-section .section-subtitle {
    color: var(--color-muted);
    margin-top: 12px;
}

.appraisal-slider {
    position: relative;
}

.appraisal-slider__viewport {
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    margin: 0 72px;
    padding-bottom: 16px;
}

.appraisal-slider__viewport::-webkit-scrollbar {
    display: none;
}

.appraisal-slider__track {
    display: flex;
    gap: 24px;
}

.appraisal-card {
    flex: 0 0 clamp(260px, 28vw, 360px);
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.appraisal-card__media {
    width: 100%;
    height: 220px;
    background: #dfe3f1;
}

.appraisal-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.appraisal-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: rgba(51, 51, 51, 0.5);
}

.appraisal-card__body {
    padding: 24px;
}

.appraisal-card__body h3 {
    font-size: 1.05rem;
    margin-bottom: 6px;
}

.appraisal-card__subtitle {
    color: var(--color-muted);
    margin-bottom: 6px;
}

.appraisal-card__specs {
    color: rgba(51, 51, 51, 0.65);
    font-size: 0.9rem;
    margin-bottom: 18px;
}

.appraisal-card__amount {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.appraisal-card__amount span {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: var(--color-muted);
}

.appraisal-card__amount strong {
    font-size: 1.4rem;
    color: var(--color-navy);
}

.appraisal-slider__control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 0;
    background: #fff;
    box-shadow: 0 15px 35px rgba(9, 18, 44, 0.25);
    color: var(--color-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.appraisal-slider__control:hover:not([disabled]) {
    transform: translateY(-50%) scale(1.05);
}

.appraisal-slider__control--prev {
    left: 0;
}

.appraisal-slider__control--next {
    right: 0;
}

.appraisal-slider__control[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
}


/* Эфир заявок */

.live-feed-section {
    padding: 80px 0;
    background: #fff;
}

.live-feed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.live-feed-card {
    background: #fff;
    border-radius: 18px;
    padding: 20px 24px;
    box-shadow: 0 18px 40px rgba(21, 32, 72, 0.08);
    border: 1px solid rgba(15, 23, 56, 0.05);
    display: flex;
    flex-direction: column;
    gap: 18px;
    transition: transform 0.2s ease;
}

.live-feed-card:hover {
    transform: translateY(-2px);
}

.live-feed-card__head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.live-feed-card__head h3 {
    font-size: 1rem;
    margin: 0 0 2px;
}

.live-feed-card__time {
    font-size: 0.85rem;
    color: rgba(51, 51, 51, 0.6);
}

.live-feed-card__icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 3px solid #ff5c5c;
    border-right-color: transparent;
    animation: live-spin 1s linear infinite;
}

[data-live-card][data-state="approved"] .live-feed-card__icon {
    border: 0;
    width: 36px;
    height: 36px;
    background: #22c55e;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
}

[data-live-card][data-state="approved"] .live-feed-card__icon::before {
    content: '✓';
}

.live-feed-card__amount strong {
    font-size: 1.3rem;
}

.live-feed-card__amount span {
    display: block;
    font-size: 0.9rem;
    color: rgba(51, 51, 51, 0.75);
}

.live-feed-card__progress {
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: rgba(51, 51, 51, 0.1);
    overflow: hidden;
}

.live-feed-card__progress-fill {
    --live-progress: 40%;
    width: var(--live-progress);
    height: 100%;
    border-radius: inherit;
    background: #ff5c5c;
    transition: width 0.3s ease;
}

[data-live-card][data-state="approved"] .live-feed-card__progress-fill {
    background: #22c55e;
}

@keyframes live-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 575.98px) {
    .live-feed-card {
        padding: 18px 20px;
    }
}

@media (max-width: 991.98px) {
    .appraisal-slider__viewport {
        margin: 0;
    }
}

@media (max-width: 767.98px) {
    .appraisal-slider {
        padding-bottom: 0;
    }

    .appraisal-slider__control {
        display: none;
    }

    .appraisal-card {
        flex-basis: calc(80vw - 32px);
    }
}