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

:root {
    --clr-primary: #e53935;
    --clr-primary-dark: #b71c1c;
    --clr-primary-light: #ffdedc;

    --clr-bg: #ffffff;
    --clr-bg-muted: #f5f6fa;
    --clr-border: #e0e2e8;
    --clr-shadow: rgba(80, 90, 140, 0.08);

    --clr-text: #222222;
    --clr-text-muted: #5d5d6d;

    --ff-base: 'Inter', sans-serif;
    --fs-h1: clamp(2.2rem, 1.3vw + 2rem, 3.2rem);
    --fs-h2: 1.6rem;
    --fs-h3: 1.45rem;
    --fs-base: 1rem;
    --fw-bold: 700;
    --fw-semibold:600;


    --radius-lg: 2rem;
    --radius-md: 1.25rem;
    --radius-sm: .75rem;

    --sp-section: clamp(2.5rem, 6vw, 4rem);
}

html { scroll-behavior: smooth; }

.container-narrow { max-width: 1400px; margin-inline:auto; padding-inline: 1rem; }
.text-center{ text-align:center; }


.btn-primary{
    display:inline-block; cursor:pointer; user-select:none;
    padding:1rem 2.75rem; border:none; border-radius:var(--radius-md);
    font-size:1.15rem; font-weight:var(--fw-bold); line-height:1;
    color:#fff; background:var(--clr-primary);
    box-shadow:0 6px 22px var(--clr-shadow);
    transition:transform .16s cubic-bezier(.4,0,.2,1), box-shadow .2s;
}
.btn-primary:hover{ background:var(--clr-primary-dark); transform:translateY(-2px) scale(1.02); box-shadow:0 12px 34px var(--clr-shadow);}
.btn-primary:active{ transform:translateY(0); }

.tradein-btn{
    display:inline-block; cursor:pointer; user-select:none;
    padding:1rem 2.75rem; border:none; border-radius: 8px;
    font-size:1.15rem; font-weight:var(--fw-bold); line-height:1;
    color:#fff; background:var(--clr-primary);
    box-shadow:0 6px 22px var(--clr-shadow);
    transition:transform .16s cubic-bezier(.4,0,.2,1), box-shadow .2s;
    margin-block:2.5rem 1rem;
}
.tradein-btn:hover{ background:var(--clr-primary-dark); transform:translateY(-2px) scale(1.02); box-shadow:0 12px 34px var(--clr-shadow);}
.tradein-btn:active{ transform:translateY(0); }

.tradein-hero-glass{
    position:relative; isolation:isolate;
    margin-block:var(--sp-section);
    background:linear-gradient(135deg,rgba(255,255,255,.64) 0%, rgba(245,247,252,.64) 100%);
    border:1px solid rgba(255,255,255,.4);
    border-radius:8px;
    backdrop-filter:blur(24px);
    box-shadow:0 4px 40px rgba(70,80,120,.08);
    display:flex; align-items:center; justify-content:space-between;
    gap:3rem; padding:3rem 4rem;
    max-width:1400px; margin-inline:auto;
}

.tradein-hero-glass::before,
.tradein-hero-glass::after{
    content:""; position:absolute; border-radius:50%;
    filter:blur(60px); z-index:-1; opacity:.5;
}
.tradein-hero-glass::before{
    width:320px; height:320px; background:var(--clr-primary-light);
    top:-80px; left:-90px;
}
.tradein-hero-glass::after{
    width:380px; height:380px; background:#73b4fa44;
    bottom:-120px; right:-120px;
}

.tradein-hero-glass .hero-content{ max-width:540px; }
.tradein-hero-glass h1{
    font-size:var(--fs-h1); font-weight:800; line-height:1.08;
    letter-spacing:-.02em; margin-bottom:1rem;
}
.tradein-hero-glass h1 span{
    background:linear-gradient(90deg, var(--clr-primary) 15%, #ff9c99 85%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.tradein-hero-glass p{
    font-size:1.15rem; color:var(--clr-text-muted); margin-bottom:2rem; max-width:480px;
}
.hero-visual{ width:100%; max-width:560px; filter:drop-shadow(0 10px 36px rgba(70,80,120,.1)); }

@media(max-width:1000px){
    .tradein-hero-glass{ flex-direction:column; text-align:center; padding:3rem 2rem; }
    .hero-visual{ display:none; }
}

.tradein-section{
    background:var(--clr-bg);
    border-radius: 8px;
    padding:var(--sp-section) clamp(1rem,6vw,3rem);
    max-width:1400px; margin-inline:auto;
    box-shadow:0 6px 32px rgba(80,90,140,.06);
}

.tradein-title{
    position:relative; font-size:var(--fs-h1); font-weight:900;
    line-height:1.1; letter-spacing:-.02em; margin-bottom:1rem;
}
.tradein-title .highlight{ color:var(--clr-primary); }
.tradein-title__underline{
    position:absolute; left:0; bottom:-14px; pointer-events:none;
    width:110%; height:32px;
}

.tradein-subtitle{ font-size:1.25rem; color:var(--clr-text-muted); margin-bottom:2.5rem; }

.tradein-steps-row{
    display:flex; flex-wrap:wrap; gap:2rem; justify-content:center; margin-bottom:3rem;
}
.tradein-step-card{
    background:var(--clr-bg-muted); border-radius: 8px; text-align:center;
    padding:2.25rem 2rem 1.75rem; min-width:210px; max-width:260px;
    font-size:1.1rem; font-weight:var(--fw-semibold); color:var(--clr-text);
    transition:box-shadow .14s, transform .14s;
}
.tradein-step-card .step-icon{ font-size:2.4rem; display:block; margin-bottom:1.25rem; }
.tradein-step-card:hover{ box-shadow:0 8px 26px rgba(80,90,140,.06); transform:translateY(-2px); }

.tradein-section__title{ font-size:var(--fs-h2); font-weight:var(--fw-bold); text-align:center; margin-bottom:1.4rem; }

.tradein-benefits-list{
    display:flex; flex-wrap:wrap; gap:.75rem 1.75rem; justify-content:center; margin-bottom:3rem;
    font-size:1.05rem; font-weight:var(--fw-semibold); color:var(--clr-text);
}
.tradein-benefits-list li{ position:relative; padding-left:1rem; }
.tradein-benefits-list li::before{
    content:""; position:absolute; left:0; top:0.55em; width:.55em; height:.55em;
    background:var(--clr-primary); border-radius:50%; transform:translateY(-50%);
}

.tradein-info-block{
    background:var(--clr-bg-muted); border-radius: 8px;
    padding:2rem 2.5rem; text-align:center; font-size:1.15rem;
    color:var(--clr-text);
    margin-inline:auto; margin-bottom:2.75rem; max-width:720px;
    line-height: 2em;
}

.docs-strict{
    position:relative; background:var(--clr-bg); border:2px solid var(--clr-border);
    border-top:6px solid var(--clr-primary); border-radius:var(--radius-sm);
    padding:2.25rem 1.75rem 1.75rem; max-width:520px; margin-inline:auto;
    box-shadow:0 8px 26px rgba(80,90,140,.04);
}
.docs-strict__title{ text-transform:uppercase; text-align:center; font-size:var(--fs-h3); font-weight:var(--fw-bold); margin-bottom:1.25rem; letter-spacing:.02em; }
.docs-strict__list{ list-style:none; margin:0; padding:0; }
.docs-strict__list li{ font-size:1.05rem; font-weight:var(--fw-semibold); color:var(--clr-text);
    padding:.7rem 0; border-bottom:1px solid var(--clr-border);
}
.docs-strict__list li:last-child{ border-bottom:none; }


    .docs-section {
        margin:90px auto 40px;
        max-width:1400px;
    }
        .docs-section__title{
            font:800 2rem/1.2 'Inter',sans-serif;
            margin:0 0 36px;
            color:#1f1f23;
        }
        .docs-cards{
            display:grid;
            grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
            gap:32px;
        }
        .docs-card{
            background:#fff;
            border:1px solid #e1e4eb;
            border-radius:8px;
            padding:42px 36px 34px;
            box-shadow:0 2px 12px rgba(40,60,90,.04);
            transition:transform .15s,box-shadow .15s;
        }
        .docs-card:hover{
            transform:translateY(-4px);
            box-shadow:0 6px 28px rgba(40,60,90,.07);
        }

        .docs-card__label{
            font:700 1.4rem/1.3 'Inter',sans-serif;
            margin:0 0 14px;
        }
        .docs-card__desc{
            font:400 1.05rem/1.45 'Inter',sans-serif;
            color:#444;max-width:340px;
        }
        @media(max-width:700px){
            .docs-section{margin:60px auto 32px;}
            .docs-section__title{font-size:1.6rem;}
        }

 .tradein-modal {
     position: fixed;
     z-index: 1101;
     left: 0; top: 0; right: 0; bottom: 0;
     display: none;
     align-items: center;
     justify-content: center;
 }
.tradein-modal__overlay {
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    background: rgba(22, 21, 21, 0.67);
}
.tradein-modal__content {
    position: relative;
    background: #fff;
    border-radius: 18px;
    padding: 34px 32px 22px 32px;
    max-width: 410px;
    width: 94vw;
    box-shadow: 0 8px 36px rgba(0,0,0,0.20);
    z-index: 2;
}
.tradein-modal__close {
    position: absolute;
    right: 18px;
    top: 14px;
    background: none;
    border: none;
    font-size: 2.1rem;
    color: #d32f2f;
    cursor: pointer;
}
.tradein-modal__title {
    margin-bottom: 18px;
    font-size: 1.31rem;
    font-weight: 700;
    color: #222;
    text-align: center;
}
.tradein-modal__fields input {
    width: 100%;
    padding: 13px 14px;
    border-radius: 11px;
    border: 1.2px solid #eee;
    font-size: 1.09rem;
    margin-bottom: 13px;
    background: #fafbff;
}
.tradein-modal__submit {
    width: 100%;
    background: linear-gradient(157deg, #c8102e 70%, #222 100%);
    color: #fff;
    border: none;
    border-radius: 11px;
    font-size: 1.11rem;
    font-weight: 700;
    padding: 13px 0;
    margin-top: 4px;
    cursor: pointer;
    transition: background 0.16s;
}
.tradein-modal__submit:hover {
    background: linear-gradient(157deg, #b71c1c 70%, #111 100%);
}
.tradein-modal__privacy {
    margin-top: 13px;
    font-size: 12.5px;
    color: #777;
    text-align: center;
}
.tradein-modal__privacy a {
    color: #c8102e;
    text-decoration: underline;
}
@media (max-width: 520px) {
    .tradein-modal__content {padding: 21px 7vw;}
}