:root {
    --navy: #0d1b30;
    --navy-2: #13233d;
    --red: #e2001a;
    --red-dark: #b80015;
    --gray-bg: #f4f5f7;
    --text-muted: #6c7688;
}

body {
    font-family: 'Segoe UI', Roboto, Arial, sans-serif;
    color: #1c2431;
}

a { text-decoration: none; }

/* ---------- Top bar / Navbar ---------- */
.top-bar {
    background: var(--navy);
    color: #cfd6e4;
    font-size: .8rem;
    padding: 6px 0;
}

.main-navbar {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    padding: 10px 0;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    color: var(--red);
    line-height: 1.05;
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    font-weight: 700;
}

.brand-text small {
    display: block;
    font-size: .6rem;
    letter-spacing: 2px;
    color: var(--navy);
    font-weight: 600;
}

.main-navbar .nav-link {
    color: var(--navy);
    font-weight: 600;
    font-size: .92rem;
    padding: .5rem .8rem;
}

.main-navbar .nav-link:hover,
.main-navbar .nav-link.active {
    color: var(--red);
}

.btn-brand-red {
    background: var(--red);
    color: #fff !important;
    font-weight: 700;
    border-radius: 4px;
    padding: .55rem 1.2rem;
    border: none;
}

.btn-brand-red:hover { background: var(--red-dark); color: #fff; }

.btn-brand-navy {
    background: var(--navy);
    color: #fff !important;
    font-weight: 700;
    border-radius: 4px;
    padding: .55rem 1.2rem;
    border: none;
}

.btn-brand-navy:hover { background: var(--navy-2); color: #fff; }

.btn-outline-brand {
    border: 2px solid var(--navy);
    color: var(--navy);
    font-weight: 700;
    border-radius: 4px;
    padding: .5rem 1.1rem;
}

.btn-outline-brand:hover { background: var(--navy); color: #fff; }

/* ---------- Hero sections ---------- */
.hero {
    background: linear-gradient(120deg, rgba(13,27,48,.92), rgba(13,27,48,.55)), url('https://images.unsplash.com/photo-1519681393784-d120267933ba?w=1600') center/cover no-repeat;
    color: #fff;
    padding: 90px 0 70px;
}

.hero h1 {
    font-weight: 800;
    font-size: 2.6rem;
}

.hero .highlight { color: var(--red); }

.page-hero {
    background: linear-gradient(120deg, rgba(13,27,48,.93), rgba(13,27,48,.65)), url('https://images.unsplash.com/photo-1519681393784-d120267933ba?w=1600') center/cover no-repeat;
    color: #fff;
    padding: 55px 0;
}

.page-hero h1 { font-weight: 800; }
.page-hero .breadcrumb-line { color: #b9c3d6; font-size: .9rem; }

/* ---------- Sections ---------- */
.section { padding: 60px 0; }
.section-title {
    font-weight: 800;
    text-align: center;
    margin-bottom: 35px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 1.4rem;
    color: var(--navy);
}

.section-alt { background: var(--gray-bg); }

.icon-box {
    background: #fff;
    border: 1px solid #eceff3;
    border-radius: 8px;
    padding: 22px 16px;
    text-align: center;
    height: 100%;
    transition: box-shadow .2s ease, transform .2s ease;
}

.icon-box:hover { box-shadow: 0 8px 22px rgba(0,0,0,.08); transform: translateY(-3px); }

.icon-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin: 0 auto 12px;
}

.icon-box.red .icon-circle,
.step-num { background: var(--red); }

/* ---------- Cards (vehicles / parts) ---------- */
.card-item {
    border: 1px solid #eceff3;
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
    background: #fff;
    transition: box-shadow .2s ease, transform .2s ease;
}

.card-item:hover { box-shadow: 0 10px 26px rgba(0,0,0,.1); transform: translateY(-4px); }

.card-item img { width: 100%; height: 190px; object-fit: cover; }

.card-item .body { padding: 16px; }

.card-item .price { color: var(--red); font-weight: 800; font-size: 1.05rem; }

.card-item h6 { font-weight: 700; margin-bottom: 2px; }
.card-item .meta { font-size: .82rem; color: var(--text-muted); }

/* ---------- Markets banner ---------- */
.market-tag {
    position: absolute;
    background: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: .75rem;
    font-weight: 700;
    box-shadow: 0 3px 8px rgba(0,0,0,.15);
}

/* ---------- CTA strip ---------- */
.cta-strip {
    background: var(--red);
    color: #fff;
}

/* ---------- Footer ---------- */
.site-footer {
    background: var(--navy);
    color: #cfd6e4;
}

.site-footer a { color: #cfd6e4; }
.site-footer a:hover { color: #fff; }
.site-footer h6 { color: #fff; margin-bottom: 14px; }

/* ---------- Forms ---------- */
.form-card {
    background: #fff;
    border: 1px solid #eceff3;
    border-radius: 10px;
    padding: 28px;
}

.filter-card {
    background: #fff;
    border: 1px solid #eceff3;
    border-radius: 10px;
    padding: 20px;
}

.category-list a {
    display: block;
    padding: 8px 4px;
    color: var(--navy);
    border-bottom: 1px solid #f0f0f0;
    font-size: .92rem;
}

.category-list a:hover,
.category-list a.active { color: var(--red); font-weight: 600; }

/* ---------- Process steps ---------- */
.process-step { text-align: center; }
.step-num {
    width: 42px; height: 42px;
    border-radius: 50%;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800;
    margin: 0 auto 10px;
}

/* ---------- Utilities ---------- */
.text-red { color: var(--red); }
.bg-navy { background: var(--navy); }