/* ============================================================
   PAGES.CSS
   All page-specific section styles — Hero, About, Stock,
   Sell Your Car, Contact, Car Detail, and Related Cars.

   TABLE OF CONTENTS:
   1.  Home — Hero Section
   2.  Home — Search Card
   3.  Home — Why Choose Us
   4.  Home — Intro Split Section
   5.  Home — Inventory Section
   6.  Home — Commitment (Dark) Section
   7.  Home — Testimonials
   8.  Home — FAQ Section
   9.  Home — CTA Banner
   10. About — Sections & Grid
   11. About — Values Grid
   12. About — Team Section
   13. Stock — Controls & Layout
   14. Sell Your Car — Steps & Form
   15. Contact — Grid & Info
   16. Car Detail — Layout & Gallery
   17. Car Detail — Spec Table
   18. Car Detail — Sidebar / CTA Panel
   19. Car Detail — Checks Section
   20. Related Cars Section
   21. Responsive — All Pages
============================================================ */


/* ============================================================
   1. HOME — HERO SECTION
   Full viewport height hero with background glow effects,
   left text column, and right search card column.
============================================================ */

.hero {
    min-height:         calc(100vh - var(--header-height));
    display:            flex;
    align-items:        center;
    padding:            60px 0;
    background:         linear-gradient(160deg, #ffffff 60%, #fdf2f2 100%);
    position:           relative;
    overflow:           hidden;
}

/* Top-right decorative glow blob */
.hero::before {
    content:            '';
    position:           absolute;
    top:                -120px;
    right:              -120px;
    width:              620px;
    height:             620px;
    background:         radial-gradient(
                            circle,
                            rgba(204, 0, 0, 0.06) 0%,
                            transparent 70%
                        );
    animation:          heroPulse 9s ease-in-out infinite;
    pointer-events:     none;
}

/* Bottom-left decorative glow blob */
.hero::after {
    content:            '';
    position:           absolute;
    bottom:             -80px;
    left:               -80px;
    width:              400px;
    height:             400px;
    background:         radial-gradient(
                            circle,
                            rgba(204, 0, 0, 0.04) 0%,
                            transparent 70%
                        );
    animation:          heroPulse 12s ease-in-out infinite reverse;
    pointer-events:     none;
}

/* Two-column grid layout */
.hero-inner {
    display:            grid;
    grid-template-columns: 1fr 1fr;
    gap:                64px;
    align-items:        center;
    position:           relative;
    z-index:            1;
}

/* ── Hero Text Column ── */
.hero-text {
    max-width:          600px;
}

/* Live availability badge */
.hero-live {
    display:            inline-flex;
    align-items:        center;
    gap:                7px;
    background:         #ffffff;
    border:             1px solid var(--border);
    padding:            7px 14px;
    border-radius:      var(--radius-xl);
    font-size:          12px;
    font-weight:        600;
    color:              var(--text-3);
    margin-bottom:      22px;
    box-shadow:         var(--shadow-sm);
    animation:          fadeInDown 0.6s ease both;
}

/* Hero main heading */
.hero-title {
    font-size:          clamp(36px, 4.5vw, 62px);
    font-weight:        900;
    letter-spacing:     -2px;
    line-height:        1.08;
    margin-bottom:      18px;
    color:              var(--text);
}

/* Red highlight in heading */
.hero-title-hl {
    color:              var(--primary);
    position:           relative;
}

/* Hero description paragraph */
.hero-desc {
    font-size:          16px;
    color:              var(--text-3);
    line-height:        1.75;
    margin-bottom:      32px;
    max-width:          480px;
}

/* Hero CTA buttons row */
.hero-btns {
    display:            flex;
    gap:                12px;
    flex-wrap:          wrap;
    margin-bottom:      44px;
}

/* Hero stats row */
.hero-stats {
    display:            flex;
    gap:                32px;
    padding-top:        28px;
    border-top:         1px solid var(--border);
    flex-wrap:          wrap;
}

/* Individual stat item */
.hstat h3 {
    font-size:          26px;
    font-weight:        900;
    color:              var(--primary);
    line-height:        1;
    display:            flex;
    align-items:        baseline;
    gap:                2px;
}

.hstat p {
    font-size:          12px;
    color:              var(--text-muted);
    margin-top:         3px;
    font-weight:        400;
}


/* ============================================================
   2. HOME — SEARCH CARD
   The search form card on the right side of the hero.
============================================================ */

.search-card {
    background:         #ffffff;
    border:             1px solid var(--border);
    border-radius:      var(--radius-lg);
    padding:            30px;
    box-shadow:         var(--shadow-lg);
    position:           relative;
}

/* Red top accent bar */
.search-card::before {
    content:            '';
    position:           absolute;
    top:                -1px;
    left:               24px;
    right:              24px;
    height:             3px;
    background:         var(--gradient-red);
    border-radius:      0 0 var(--radius-sm) var(--radius-sm);
}

.search-card h3 {
    font-size:          17px;
    font-weight:        800;
    margin-bottom:      3px;
    color:              var(--text);
}

.search-card .sc-sub {
    font-size:          13px;
    color:              var(--text-muted);
    margin-bottom:      20px;
}

/* Two-column select grid */
.search-form-grid {
    display:            grid;
    grid-template-columns: 1fr 1fr;
    gap:                10px;
    margin-bottom:      16px;
}

/* Selects inside search card */
.search-form-grid select {
    background:         var(--bg-2);
    border:             1.5px solid var(--border);
    color:              var(--text-2);
    padding:            11px 14px;
    border-radius:      var(--radius-sm);
    font-size:          13px;
    font-family:        var(--font-family);
    cursor:             pointer;
    transition:         var(--transition);
    outline:            none;
    width:              100%;
    background-image:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat:  no-repeat;
    background-position: right 12px center;
    padding-right:      34px;
    appearance:         none;
    -webkit-appearance: none;
}

.search-form-grid select:focus {
    border-color:       var(--primary);
    box-shadow:         0 0 0 3px rgba(204, 0, 0, 0.08);
    background-color:   #ffffff;
}

/* Search button */
.btn-search {
    width:              100%;
    display:            flex;
    align-items:        center;
    justify-content:    center;
    gap:                8px;
}


/* ============================================================
   3. HOME — WHY CHOOSE US
============================================================ */

.why-section {
    padding:            var(--space-3xl) 0;
    background:         var(--bg);
}

/* Four-column grid */
.why-grid {
    display:            grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                22px;
}

/* Individual why card */
.why-card {
    background:         var(--bg-2);
    border:             1.5px solid var(--border);
    border-radius:      var(--radius-md);
    padding:            30px 22px;
    transition:         var(--transition);
    cursor:             default;
    position:           relative;
    overflow:           hidden;
}

/* Red top border reveal on hover */
.why-card::after {
    content:            '';
    position:           absolute;
    top:                0;
    left:               0;
    right:              0;
    height:             3px;
    background:         var(--gradient-red);
    transform:          scaleX(0);
    transition:         transform 0.4s ease;
    transform-origin:   left;
}

.why-card:hover::after {
    transform:          scaleX(1);
}

.why-card:hover {
    border-color:       rgba(204, 0, 0, 0.25);
    transform:          translateY(-6px);
    box-shadow:         var(--shadow-md);
}

/* Number badge */
.why-num {
    display:            inline-flex;
    width:              44px;
    height:             44px;
    background:         var(--primary-faint);
    border-radius:      10px;
    align-items:        center;
    justify-content:    center;
    font-size:          16px;
    font-weight:        900;
    color:              var(--primary);
    margin-bottom:      16px;
    transition:         var(--transition);
}

.why-card:hover .why-num {
    background:         var(--gradient-red);
    color:              #ffffff;
}

.why-card h3 {
    font-size:          16px;
    font-weight:        700;
    margin-bottom:      7px;
    color:              var(--text);
}

.why-card p {
    font-size:          13.5px;
    color:              var(--text-3);
    line-height:        1.65;
}


/* ============================================================
   4. HOME — INTRO SPLIT SECTION
============================================================ */

.intro-section {
    padding:            var(--space-3xl) 0;
    background:         var(--bg-2);
}

/* Two-column split layout */
.intro-inner {
    display:            grid;
    grid-template-columns: 1fr 1fr;
    gap:                72px;
    align-items:        center;
}

/* Image column wrapper */
.intro-img-wrap {
    position:           relative;
}

/* Image box */
.intro-img {
    border-radius:      var(--radius-lg);
    overflow:           hidden;
    height:             420px;
    box-shadow:         var(--shadow-lg);
}

.intro-img img {
    width:              100%;
    height:             100%;
    object-fit:         cover;
    transition:         transform 0.6s ease;
}

.intro-img:hover img {
    transform:          scale(1.04);
}

/* Floating stat badge over image */
.intro-img-badge {
    position:           absolute;
    bottom:             20px;
    left:               20px;
    background:         #ffffff;
    border-radius:      var(--radius-md);
    padding:            12px 18px;
    box-shadow:         var(--shadow-md);
    border:             1px solid var(--border);
}

.intro-img-badge strong {
    display:            block;
    font-size:          22px;
    font-weight:        900;
    color:              var(--primary);
    line-height:        1;
}

.intro-img-badge span {
    font-size:          12px;
    color:              var(--text-3);
    margin-top:         3px;
    display:            block;
}

/* Text column */
.intro-txt h2 {
    font-size:          clamp(26px, 2.8vw, 38px);
    font-weight:        900;
    letter-spacing:     -0.8px;
    margin-bottom:      14px;
    color:              var(--text);
    line-height:        1.2;
}

.intro-txt p {
    font-size:          15px;
    color:              var(--text-3);
    line-height:        1.78;
    margin-bottom:      14px;
}

/* Checklist used in intro and about */
.intro-checklist {
    list-style:         none;
    display:            grid;
    grid-template-columns: 1fr 1fr;
    gap:                10px;
    margin-top:         22px;
}

.intro-checklist li {
    display:            flex;
    align-items:        center;
    gap:                9px;
    font-size:          13.5px;
    font-weight:        500;
    color:              var(--text-2);
}

/* Green check icon */
.intro-checklist li::before {
    content:            '✓';
    display:            flex;
    align-items:        center;
    justify-content:    center;
    width:              20px;
    height:             20px;
    background:         var(--primary-faint);
    border-radius:      50%;
    color:              var(--primary);
    font-size:          11px;
    font-weight:        700;
    flex-shrink:        0;
}

/* Buttons below text */
.intro-actions {
    display:            flex;
    gap:                12px;
    flex-wrap:          wrap;
    margin-top:         26px;
}


/* ============================================================
   5. HOME — INVENTORY SECTION
============================================================ */

.inv-section {
    padding:            var(--space-3xl) 0;
    background:         var(--bg);
}

/* Header row: title left, view-all link right */
.inv-head {
    display:            flex;
    align-items:        flex-end;
    justify-content:    space-between;
    margin-bottom:      28px;
    flex-wrap:          wrap;
    gap:                16px;
}

/* "View All" link button */
.view-all-btn {
    color:              var(--primary);
    text-decoration:    none;
    font-size:          var(--font-size-base);
    font-weight:        600;
    display:            flex;
    align-items:        center;
    gap:                5px;
    padding:            9px 18px;
    border:             1.5px solid rgba(204, 0, 0, 0.30);
    border-radius:      var(--radius-xl);
    transition:         var(--transition);
    white-space:        nowrap;
}

.view-all-btn:hover {
    background:         var(--primary);
    color:              #ffffff;
    border-color:       var(--primary);
}


/* ============================================================
   6. HOME — COMMITMENT DARK SECTION
============================================================ */

.commit-section {
    padding:            var(--space-3xl) 0;
    background:         var(--dark);
}

/* Four-column grid */
.commit-grid {
    display:            grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                20px;
    margin-top:         52px;
}

/* Individual commitment card */
.commit-card {
    background:         rgba(255, 255, 255, 0.04);
    border:             1px solid rgba(255, 255, 255, 0.09);
    border-radius:      var(--radius-md);
    padding:            28px 22px;
    text-align:         center;
    transition:         var(--transition);
}

.commit-card:hover {
    background:         rgba(255, 255, 255, 0.07);
    border-color:       rgba(204, 0, 0, 0.30);
    transform:          translateY(-6px);
    box-shadow:         0 12px 32px rgba(0, 0, 0, 0.3);
}

/* Icon square */
.commit-ico {
    width:              56px;
    height:             56px;
    background:         var(--gradient-red);
    border-radius:      14px;
    display:            flex;
    align-items:        center;
    justify-content:    center;
    font-size:          22px;
    margin:             0 auto 16px;
    transition:         var(--transition);
}

.commit-card:hover .commit-ico {
    transform:          rotate(8deg) scale(1.08);
}

.commit-card h3 {
    font-size:          16px;
    font-weight:        700;
    color:              #ffffff;
    margin-bottom:      8px;
}

.commit-card p {
    font-size:          13.5px;
    color:              #999999;
    line-height:        1.65;
}


/* ============================================================
   7. HOME — TESTIMONIALS
============================================================ */

.test-section {
    padding:            var(--space-3xl) 0;
    background:         var(--bg-2);
}

/* Three-column grid */
.test-grid {
    display:            grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                22px;
}

/* Individual testimonial card */
.test-card {
    background:         var(--bg);
    border:             1.5px solid var(--border);
    border-radius:      var(--radius-md);
    padding:            28px;
    transition:         var(--transition);
    display:            flex;
    flex-direction:     column;
}

.test-card:hover {
    box-shadow:         var(--shadow-md);
    transform:          translateY(-4px);
    border-color:       var(--border-dark);
}

/* Star rating */
.stars {
    color:              var(--primary);
    font-size:          15px;
    letter-spacing:     2px;
    margin-bottom:      14px;
}

/* Quote text */
.test-card blockquote {
    font-size:          var(--font-size-base);
    color:              var(--text-3);
    line-height:        1.75;
    margin-bottom:      18px;
    font-style:         italic;
    flex:               1;
}

/* Author row */
.test-author {
    display:            flex;
    align-items:        center;
    gap:                11px;
    margin-top:         auto;
}

/* Avatar circle */
.t-av {
    width:              42px;
    height:             42px;
    border-radius:      50%;
    background:         var(--gradient-red);
    display:            flex;
    align-items:        center;
    justify-content:    center;
    font-size:          15px;
    font-weight:        800;
    color:              #ffffff;
    flex-shrink:        0;
}

.t-av-dark {
    background:         var(--gradient-dark);
}

.t-author-info h4 {
    font-size:          var(--font-size-base);
    font-weight:        700;
    color:              var(--text);
    margin-bottom:      2px;
}

.t-author-info p {
    font-size:          var(--font-size-sm);
    color:              var(--text-muted);
    font-weight:        400;
}


/* ============================================================
   8. HOME — FAQ SECTION
============================================================ */

.faq-section {
    padding:            var(--space-3xl) 0;
    background:         var(--bg);
}

/* Centered narrow wrapper */
.faq-wrap {
    max-width:          760px;
    margin:             0 auto;
}

/* Individual FAQ item */
.faq-item {
    border:             1.5px solid var(--border);
    border-radius:      var(--radius-md);
    margin-bottom:      10px;
    overflow:           hidden;
    transition:         var(--transition);
}

.faq-item:hover {
    border-color:       var(--border-dark);
}

/* Open state */
.faq-item.open {
    border-color:       rgba(204, 0, 0, 0.30);
}

/* Question row */
.faq-q {
    display:            flex;
    align-items:        center;
    justify-content:    space-between;
    padding:            16px 22px;
    cursor:             pointer;
    background:         var(--bg-2);
    transition:         var(--transition);
    gap:                12px;
    user-select:        none;
}

.faq-q:hover {
    background:         var(--bg-3);
}

.faq-q span {
    font-size:          15px;
    font-weight:        600;
    color:              var(--text);
    line-height:        1.4;
}

/* Arrow icon */
.faq-icon {
    width:              28px;
    height:             28px;
    border-radius:      50%;
    background:         var(--bg-3);
    display:            flex;
    align-items:        center;
    justify-content:    center;
    font-size:          13px;
    transition:         var(--transition);
    flex-shrink:        0;
    color:              var(--primary);
    font-weight:        700;
}

.faq-item.open .faq-icon {
    transform:          rotate(180deg);
    background:         var(--primary);
    color:              #ffffff;
}

/* Answer panel — collapses/expands */
.faq-a {
    max-height:         0;
    overflow:           hidden;
    transition:
        max-height  0.38s ease,
        padding     0.38s ease;
    padding:            0 22px;
}

.faq-item.open .faq-a {
    max-height:         300px;
    padding:            0 22px 18px;
}

.faq-a p {
    font-size:          var(--font-size-base);
    color:              var(--text-3);
    line-height:        1.72;
}

/* Footer CTA below FAQs */
.faq-cta {
    text-align:         center;
    margin-top:         36px;
    font-size:          var(--font-size-base);
    color:              var(--text-muted);
}

.faq-cta a {
    color:              var(--primary);
    font-weight:        600;
    text-decoration:    none;
}

.faq-cta a:hover {
    text-decoration:    underline;
}


/* ============================================================
   9. HOME — CTA BANNER
============================================================ */

.cta-section {
    padding:            var(--space-3xl) 0;
    background:         var(--bg-2);
}

/* Dark card */
.cta-card {
    background:         var(--dark);
    border-radius:      var(--radius-lg);
    padding:            72px 40px;
    text-align:         center;
    position:           relative;
    overflow:           hidden;
}

/* Background radial glow */
.cta-glow {
    position:           absolute;
    top:                -100px;
    left:               50%;
    transform:          translateX(-50%);
    width:              500px;
    height:             500px;
    background:         radial-gradient(
                            circle,
                            rgba(204, 0, 0, 0.18) 0%,
                            transparent 70%
                        );
    pointer-events:     none;
}

.cta-card h2 {
    font-size:          clamp(26px, 3vw, 44px);
    font-weight:        900;
    color:              #ffffff;
    margin-bottom:      10px;
    letter-spacing:     -1px;
    position:           relative;
    line-height:        1.2;
}

.cta-card p {
    font-size:          15px;
    color:              #bbbbbb;
    margin-bottom:      28px;
    position:           relative;
    max-width:          480px;
    margin-left:        auto;
    margin-right:       auto;
}

.cta-actions {
    display:            flex;
    gap:                12px;
    justify-content:    center;
    flex-wrap:          wrap;
    position:           relative;
}


/* ============================================================
   10. ABOUT — SECTIONS & GRID
============================================================ */

.about-sec {
    padding:            80px 0;
}

.about-sec-white {
    background:         var(--bg);
}

.about-sec-grey {
    background:         var(--bg-2);
}

/* Two-column about grid */
.about-grid {
    display:            grid;
    grid-template-columns: 1fr 1fr;
    gap:                64px;
    align-items:        center;
}

/* Reversed order variant */
.about-grid-reverse {
    direction:          rtl;
}

.about-grid-reverse > * {
    direction:          ltr;
}

/* Image box */
.about-img {
    border-radius:      var(--radius-lg);
    overflow:           hidden;
    height:             400px;
    box-shadow:         var(--shadow-lg);
    position:           relative;
}

.about-img img {
    width:              100%;
    height:             100%;
    object-fit:         cover;
    transition:         transform 0.6s ease;
}

.about-img:hover img {
    transform:          scale(1.04);
}

/* Text column */
.about-txt h2 {
    font-size:          clamp(24px, 2.6vw, 36px);
    font-weight:        900;
    letter-spacing:     -0.8px;
    margin-bottom:      14px;
    color:              var(--text);
    line-height:        1.25;
}

.about-txt p {
    font-size:          15px;
    color:              var(--text-3);
    line-height:        1.78;
    margin-bottom:      13px;
}


/* ============================================================
   11. ABOUT — VALUES GRID
============================================================ */

.vals-grid {
    display:            grid;
    grid-template-columns: 1fr 1fr;
    gap:                14px;
    margin-top:         22px;
}

.val-item {
    background:         var(--bg-2);
    border:             1.5px solid var(--border);
    border-radius:      var(--radius-sm);
    padding:            14px 16px;
    transition:         var(--transition);
}

.val-item:hover {
    border-color:       var(--primary);
    background:         var(--primary-faint);
}

.val-item h4 {
    font-size:          var(--font-size-sm);
    font-weight:        700;
    color:              var(--primary);
    margin-bottom:      4px;
    text-transform:     uppercase;
    letter-spacing:     0.5px;
}

.val-item p {
    font-size:          13px;
    color:              var(--text-3);
    line-height:        1.55;
}


/* ============================================================
   12. ABOUT — TEAM SECTION
============================================================ */

.team-section {
    padding:            80px 0;
    background:         var(--bg-2);
}

/* Three-column team grid */
.team-grid {
    display:            grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                22px;
    margin-top:         48px;
}

/* Individual team card */
.team-card {
    background:         var(--bg);
    border:             1.5px solid var(--border);
    border-radius:      var(--radius-md);
    padding:            32px;
    text-align:         center;
    transition:         var(--transition);
}

.team-card:hover {
    transform:          translateY(-5px);
    box-shadow:         var(--shadow-md);
    border-color:       rgba(204, 0, 0, 0.20);
}

/* Team member avatar */
.t-avatar {
    width:              76px;
    height:             76px;
    border-radius:      50%;
    display:            flex;
    align-items:        center;
    justify-content:    center;
    font-size:          26px;
    font-weight:        900;
    color:              #ffffff;
    margin:             0 auto 16px;
}

.t-avatar-dark {
    background:         var(--gradient-dark);
}

.t-avatar-red {
    background:         var(--gradient-red);
}

.team-card h3 {
    font-size:          18px;
    font-weight:        800;
    margin-bottom:      4px;
    color:              var(--text);
}

/* Role / job title */
.team-role {
    display:            block;
    font-size:          var(--font-size-xs);
    font-weight:        700;
    color:              var(--primary);
    text-transform:     uppercase;
    letter-spacing:     0.8px;
    margin-bottom:      10px;
}

.team-card p {
    font-size:          13px;
    color:              var(--text-3);
    line-height:        1.65;
}


/* ============================================================
   13. STOCK — CONTROLS & LAYOUT
============================================================ */

.stock-section {
    padding:            48px 0 80px;
}

/* Search bar + sort buttons row */
.stock-controls {
    display:            flex;
    align-items:        center;
    gap:                16px;
    margin-bottom:      22px;
    flex-wrap:          wrap;
}

/* Search input wrapper */
.stock-search-bar {
    flex:               1;
    min-width:          200px;
    display:            flex;
    align-items:        center;
    gap:                10px;
    background:         var(--bg);
    border:             1.5px solid var(--border);
    border-radius:      var(--radius-sm);
    padding:            0 16px;
    transition:         var(--transition);
}

.stock-search-bar:focus-within {
    border-color:       var(--primary);
    box-shadow:         0 0 0 3px rgba(204, 0, 0, 0.08);
}

/* Search input */
.stock-search-bar input {
    flex:               1;
    background:         transparent;
    border:             none;
    color:              var(--text);
    padding:            11px 0;
    font-size:          var(--font-size-base);
    font-family:        var(--font-family);
    outline:            none;
}

.stock-search-bar input::placeholder {
    color:              var(--text-muted);
}

/* Sort buttons row */
.stock-sort-btns {
    display:            flex;
    gap:                6px;
    flex-shrink:        0;
}

/* Result count text */
.stock-count {
    font-size:          13.5px;
    color:              var(--text-muted);
    margin-bottom:      18px;
}

.stock-count strong {
    color:              var(--text);
    font-weight:        700;
}


/* ============================================================
   14. SELL YOUR CAR — STEPS & FORM
============================================================ */

/* Steps section */
.sell-steps-section {
    padding:            72px 0 0;
    background:         var(--bg-2);
}

/* Three-column steps row */
.sell-steps-row {
    display:            grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                24px;
    margin-bottom:      0;
}

/* Individual step card */
.sell-step {
    text-align:         center;
    padding:            32px 24px;
    background:         var(--bg);
    border:             1.5px solid var(--border);
    border-radius:      var(--radius-md);
    transition:         var(--transition);
}

.sell-step:hover {
    border-color:       rgba(204, 0, 0, 0.25);
    box-shadow:         var(--shadow-sm);
    transform:          translateY(-4px);
}

/* Step number circle */
.step-n {
    width:              50px;
    height:             50px;
    background:         var(--gradient-red);
    border-radius:      50%;
    display:            flex;
    align-items:        center;
    justify-content:    center;
    font-size:          18px;
    font-weight:        900;
    color:              #ffffff;
    margin:             0 auto 16px;
    box-shadow:         var(--shadow-red);
}

.sell-step h3 {
    font-size:          17px;
    font-weight:        700;
    margin-bottom:      8px;
    color:              var(--text);
}

.sell-step p {
    font-size:          14px;
    color:              var(--text-3);
    line-height:        1.65;
}

/* Form section below steps */
.sell-form-section {
    padding:            64px 0 80px;
    background:         var(--bg-2);
}

/* Narrow centered form wrapper */
.sell-form-wrap {
    max-width:          700px;
    margin:             0 auto;
}


/* ============================================================
   15. CONTACT — GRID & INFO
============================================================ */

.contact-section {
    padding:            60px 0 80px;
}

/* Two-column grid */
.contact-grid {
    display:            grid;
    grid-template-columns: 1fr 1.15fr;
    gap:                64px;
    align-items:        flex-start;
}

/* Left column */
.contact-lhs h2 {
    font-size:          clamp(22px, 2.5vw, 34px);
    font-weight:        900;
    letter-spacing:     -0.6px;
    margin-bottom:      12px;
    color:              var(--text);
    line-height:        1.2;
}

.contact-lhs > p {
    font-size:          15px;
    color:              var(--text-3);
    line-height:        1.75;
    margin-bottom:      28px;
}

/* Contact info list */
.cinfo-list {
    display:            flex;
    flex-direction:     column;
    gap:                12px;
    margin-bottom:      24px;
}

/* Individual contact info item */
.cinfo-item {
    display:            flex;
    align-items:        center;
    gap:                14px;
    padding:            14px 16px;
    background:         var(--bg-2);
    border:             1.5px solid var(--border);
    border-radius:      var(--radius-md);
    transition:         var(--transition);
}

.cinfo-item:hover {
    border-color:       var(--primary);
    transform:          translateX(4px);
}

/* Icon box */
.ci-ico {
    width:              42px;
    height:             42px;
    background:         var(--primary-faint);
    border-radius:      10px;
    display:            flex;
    align-items:        center;
    justify-content:    center;
    font-size:          18px;
    flex-shrink:        0;
}

/* Text next to icon */
.ci-text h4 {
    font-size:          13px;
    font-weight:        700;
    color:              var(--text-2);
    margin-bottom:      2px;
}

.ci-text p {
    font-size:          13px;
    color:              var(--text-3);
    line-height:        1.4;
}

.ci-text a {
    color:              var(--text-3);
    text-decoration:    none;
    transition:         var(--transition);
}

.ci-text a:hover {
    color:              var(--primary);
}

/* Map placeholder box */
.map-box {
    height:             200px;
    border-radius:      var(--radius-md);
    overflow:           hidden;
    border:             1.5px solid var(--border);
    background:         var(--bg-3);
    display:            flex;
    flex-direction:     column;
    align-items:        center;
    justify-content:    center;
    gap:                6px;
    color:              var(--text-muted);
    font-size:          var(--font-size-base);
}

.map-box small {
    font-size:          var(--font-size-xs);
    color:              var(--text-muted);
}


/* ============================================================
   16. CAR DETAIL — LAYOUT & GALLERY
============================================================ */

/* Page top padding */
.car-detail-page {
    padding:            32px 0 80px;
}

/* Breadcrumb navigation */
.breadcrumb {
    display:            flex;
    align-items:        center;
    gap:                8px;
    font-size:          13px;
    color:              var(--text-muted);
    margin-bottom:      24px;
    flex-wrap:          wrap;
}

.breadcrumb a {
    color:              var(--text-muted);
    text-decoration:    none;
    transition:         var(--transition);
}

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

.breadcrumb .sep-bc {
    color:              var(--border-dark);
    font-size:          16px;
}

.breadcrumb .cur {
    color:              var(--text-2);
    font-weight:        500;
}

/* Main two-column detail layout */
.detail-grid {
    display:            grid;
    grid-template-columns: 1fr 380px;
    gap:                36px;
    align-items:        flex-start;
}

/* ── Gallery ── */

/* Gallery outer box */
.gallery-wrap {
    border-radius:      var(--radius-lg);
    overflow:           hidden;
    border:             1.5px solid var(--border);
    box-shadow:         var(--shadow-sm);
}

/* Main large image area */
.gallery-main {
    position:           relative;
    height:             420px;
    overflow:           hidden;
    background:         var(--bg-3);
    cursor:             zoom-in;
}

.gallery-main img {
    width:              100%;
    height:             100%;
    object-fit:         cover;
    transition:         transform 0.5s ease;
}

.gallery-main:hover img {
    transform:          scale(1.03);
}

/* Previous / Next arrow buttons on gallery */
.gallery-prev,
.gallery-next {
    position:           absolute;
    top:                50%;
    transform:          translateY(-50%);
    width:              42px;
    height:             42px;
    background:         rgba(255, 255, 255, 0.92);
    border:             none;
    border-radius:      50%;
    font-size:          20px;
    cursor:             pointer;
    display:            flex;
    align-items:        center;
    justify-content:    center;
    transition:         var(--transition);
    box-shadow:         var(--shadow-sm);
    color:              var(--text);
    z-index:            2;
}

.gallery-prev {
    left:               14px;
}

.gallery-next {
    right:              14px;
}

.gallery-prev:hover,
.gallery-next:hover {
    background:         var(--primary);
    color:              #ffffff;
    transform:          translateY(-50%) scale(1.1);
}

/* Image counter overlay */
.gallery-counter {
    position:           absolute;
    bottom:             14px;
    right:              14px;
    background:         rgba(0, 0, 0, 0.58);
    backdrop-filter:    blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color:              #ffffff;
    padding:            4px 12px;
    border-radius:      var(--radius-full);
    font-size:          var(--font-size-sm);
    font-weight:        600;
    z-index:            2;
}

/* Thumbnails strip below main image */
.gallery-thumbs {
    display:            grid;
    grid-template-columns: repeat(5, 1fr);
    gap:                6px;
    padding:            10px;
    background:         var(--bg-2);
}

.gallery-thumbs img {
    width:              100%;
    height:             64px;
    object-fit:         cover;
    border-radius:      6px;
    cursor:             pointer;
    opacity:            0.58;
    border:             2px solid transparent;
    transition:         var(--transition);
}

.gallery-thumbs img.active,
.gallery-thumbs img:hover {
    opacity:            1;
    border-color:       var(--primary);
}

/* ── Description & Features ── */

.car-desc {
    margin-top:         28px;
    padding:            22px;
    background:         var(--bg-2);
    border-radius:      var(--radius-md);
    border:             1.5px solid var(--border);
}

.car-desc h3 {
    font-size:          17px;
    font-weight:        800;
    margin-bottom:      10px;
    color:              var(--text);
}

.car-desc p {
    font-size:          var(--font-size-base);
    color:              var(--text-3);
    line-height:        1.75;
}

/* Features list section */
.feat-list-section {
    margin-top:         28px;
}

.feat-list-section h3 {
    font-size:          17px;
    font-weight:        800;
    margin-bottom:      14px;
    color:              var(--text);
}

/* Two-column features grid */
.feat-list {
    display:            grid;
    grid-template-columns: 1fr 1fr;
    gap:                8px;
    list-style:         none;
}

.feat-list li {
    display:            flex;
    align-items:        center;
    gap:                8px;
    font-size:          13.5px;
    color:              var(--text-3);
    padding:            8px 12px;
    background:         var(--bg-2);
    border:             1px solid var(--border);
    border-radius:      var(--radius-sm);
    line-height:        1.4;
}

/* Green check before each feature */
.feat-list li::before {
    content:            '✓';
    color:              var(--green);
    font-weight:        700;
    font-size:          12px;
    flex-shrink:        0;
}


/* ============================================================
   17. CAR DETAIL — SPEC TABLE
============================================================ */

.spec-table {
    margin-top:         28px;
}

.spec-table h3 {
    font-size:          18px;
    font-weight:        800;
    margin-bottom:      16px;
    color:              var(--text);
}

/* Table grid */
.spec-grid {
    display:            grid;
    grid-template-columns: 1fr 1fr;
    gap:                0;
    border:             1.5px solid var(--border);
    border-radius:      var(--radius-md);
    overflow:           hidden;
}

/* Each spec row */
.spec-row {
    display:            contents;
}

.spec-row > div {
    padding:            11px 16px;
    font-size:          13.5px;
    border-bottom:      1px solid var(--border);
}

/* Last row — no bottom border */
.spec-row:last-child > div {
    border-bottom:      none;
}

/* Label cell (left) */
.spec-row > div:first-child {
    background:         var(--bg-2);
    font-weight:        600;
    color:              var(--text-2);
    border-right:       1px solid var(--border);
}

/* Value cell (right) */
.spec-row > div:last-child {
    color:              var(--text-3);
    background:         var(--bg);
}


/* ============================================================
   18. CAR DETAIL — SIDEBAR / CTA PANEL
============================================================ */

/* Sticky sidebar */
.detail-sidebar {
    display:            flex;
    flex-direction:     column;
    gap:                18px;
    position:           sticky;
    top:                calc(var(--header-height) + 20px);
}

/* Price panel card */
.price-panel {
    background:         var(--bg);
    border:             1.5px solid var(--border);
    border-radius:      var(--radius-lg);
    padding:            26px;
    box-shadow:         var(--shadow-md);
}

.price-panel .car-name {
    font-size:          22px;
    font-weight:        900;
    margin-bottom:      4px;
    color:              var(--text);
    line-height:        1.2;
}

.price-panel .car-tagline {
    font-size:          13px;
    color:              var(--text-muted);
    margin-bottom:      18px;
}

/* Big price display */
.big-price {
    font-size:          34px;
    font-weight:        900;
    color:              var(--text);
    margin-bottom:      4px;
    letter-spacing:     -1px;
    line-height:        1;
}

.big-price span {
    font-size:          var(--font-size-base);
    font-weight:        400;
    color:              var(--text-muted);
    letter-spacing:     0;
}

/* Finance note below price */
.finance-note {
    font-size:          12.5px;
    color:              var(--text-muted);
    margin-bottom:      18px;
    display:            flex;
    align-items:        center;
    gap:                6px;
}

.finance-note strong {
    color:              var(--primary);
}

/* CTA buttons column */
.cta-btns {
    display:            flex;
    flex-direction:     column;
    gap:                10px;
}

/* Reserve panel */
.reserve-panel {
    background:         var(--primary-faint);
    border:             1.5px dashed rgba(204, 0, 0, 0.30);
    border-radius:      var(--radius-md);
    padding:            18px;
    text-align:         center;
}

.reserve-panel strong {
    display:            block;
    font-size:          16px;
    color:              var(--primary);
    font-weight:        700;
    margin-bottom:      4px;
}

.reserve-panel p {
    font-size:          13px;
    color:              var(--text-3);
    line-height:        1.55;
    margin-bottom:      14px;
}

/* Dealer contact panel — dark */
.contact-panel {
    background:         var(--dark);
    border-radius:      var(--radius-md);
    padding:            20px;
}

.contact-panel h4 {
    font-size:          var(--font-size-base);
    font-weight:        700;
    color:              #ffffff;
    margin-bottom:      12px;
}

.dealer-info {
    display:            flex;
    align-items:        center;
    gap:                10px;
    margin-bottom:      14px;
}

.dealer-logo {
    width:              44px;
    height:             44px;
    background:         var(--gradient-red);
    border-radius:      10px;
    display:            flex;
    align-items:        center;
    justify-content:    center;
    font-size:          18px;
    font-weight:        900;
    color:              #ffffff;
    flex-shrink:        0;
}

.dealer-name {
    font-size:          14px;
    font-weight:        700;
    color:              #ffffff;
    line-height:        1.3;
}

.dealer-loc {
    font-size:          12px;
    color:              #aaaaaa;
}

.dealer-btns {
    display:            flex;
    flex-direction:     column;
    gap:                8px;
}

/* Phone / WhatsApp link buttons */
.dealer-tel {
    display:            flex;
    align-items:        center;
    gap:                8px;
    padding:            11px 14px;
    background:         rgba(255, 255, 255, 0.08);
    border-radius:      var(--radius-sm);
    text-decoration:    none;
    color:              #ffffff;
    font-size:          13.5px;
    font-weight:        600;
    transition:         var(--transition);
    border:             1px solid rgba(255, 255, 255, 0.06);
}

.dealer-tel:hover {
    background:         rgba(255, 255, 255, 0.14);
}

.dealer-wa {
    background:         rgba(37, 211, 102, 0.12);
    color:              #25d366;
    border-color:       rgba(37, 211, 102, 0.15);
}

.dealer-wa:hover {
    background:         #25d366;
    color:              #ffffff;
}


/* ============================================================
   19. CAR DETAIL — CHECKS SECTION
============================================================ */

.checks-section {
    margin-top:         28px;
    padding:            22px;
    background:         var(--bg);
    border:             1.5px solid var(--border);
    border-radius:      var(--radius-md);
}

.checks-section h3 {
    font-size:          16px;
    font-weight:        800;
    margin-bottom:      14px;
    color:              var(--text);
}

.check-items {
    display:            flex;
    flex-direction:     column;
    gap:                10px;
}

.check-item {
    display:            flex;
    align-items:        center;
    gap:                10px;
    font-size:          13.5px;
}

/* Check circle icon */
.check-item .ci {
    width:              28px;
    height:             28px;
    border-radius:      50%;
    display:            flex;
    align-items:        center;
    justify-content:    center;
    font-size:          13px;
    flex-shrink:        0;
}

.ci-pass {
    background:         var(--green-bg);
    color:              var(--green);
}

.ci-warn {
    background:         rgba(245, 158, 11, 0.10);
    color:              #d97706;
}

.check-item span {
    color:              var(--text-2);
    font-weight:        500;
    line-height:        1.4;
}


/* ============================================================
   20. RELATED CARS SECTION
============================================================ */

.related-section {
    padding:            60px 0;
    background:         var(--bg-2);
    border-top:         1px solid var(--border);
}

.related-title {
    font-size:          24px;
    font-weight:        900;
    margin-bottom:      24px;
    color:              var(--text);
    letter-spacing:     -0.5px;
}


/* ============================================================
   21. RESPONSIVE — ALL PAGES
   Adjusts every page section for tablet and mobile screens.
============================================================ */

/* ── Large Tablet ── */
@media (max-width: 1100px) {

    /* Why grid: 2 columns */
    .why-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Commit grid: 2 columns */
    .commit-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Testimonials: 1 column */
    .test-grid {
        grid-template-columns: 1fr;
        max-width:          600px;
        margin-left:        auto;
        margin-right:       auto;
    }

    /* Car detail: full width */
    .detail-grid {
        grid-template-columns: 1fr;
    }

    /* Sidebar no longer sticky */
    .detail-sidebar {
        position:           static;
    }
}

/* ── Tablet ── */
@media (max-width: 900px) {

    /* Hero: single column */
    .hero-inner {
        grid-template-columns: 1fr;
        gap:                40px;
    }

    .hero-text {
        text-align:         center;
        max-width:          100%;
    }

    .hero-desc {
        max-width:          100%;
        margin-left:        auto;
        margin-right:       auto;
    }

    .hero-btns {
        justify-content:    center;
    }

    .hero-stats {
        justify-content:    center;
    }

    /* Intro: single column */
    .intro-inner {
        grid-template-columns: 1fr;
        gap:                36px;
    }

    /* About grid: single column */
    .about-grid {
        grid-template-columns: 1fr;
        gap:                36px;
        direction:          ltr;
    }

    /* Contact grid: single column */
    .contact-grid {
        grid-template-columns: 1fr;
        gap:                40px;
    }

    /* Team grid: 2 columns */
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Sell steps: single column */
    .sell-steps-row {
        grid-template-columns: 1fr;
        max-width:          480px;
        margin-left:        auto;
        margin-right:       auto;
    }

    /* Values grid: single column */
    .vals-grid {
        grid-template-columns: 1fr;
    }

    /* CTA */
    .cta-card {
        padding:            52px 24px;
    }
}

/* ── Mobile ── */
@media (max-width: 768px) {

    /* Why grid: single column */
    .why-grid {
        grid-template-columns: 1fr;
    }

    /* Commit grid: single column */
    .commit-grid {
        grid-template-columns: 1fr;
    }

    /* Inventory header */
    .inv-head {
        flex-direction:     column;
        align-items:        flex-start;
    }

    /* Gallery thumbnails: 4 columns */
    .gallery-thumbs {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Gallery main: smaller */
    .gallery-main {
        height:             280px;
    }

    /* Features list: single column */
    .feat-list {
        grid-template-columns: 1fr;
    }

    /* Spec grid: single column */
    .spec-grid {
        grid-template-columns: 1fr;
    }

    .spec-row > div:first-child {
        border-right:       none;
        border-bottom:      1px solid var(--border);
    }

    /* Team grid: single column */
    .team-grid {
        grid-template-columns: 1fr;
    }

    /* Checklist: single column */
    .intro-checklist {
        grid-template-columns: 1fr;
    }

    /* Search card grid: single column */
    .search-form-grid {
        grid-template-columns: 1fr;
    }

    /* Stock controls */
    .stock-controls {
        flex-direction:     column;
        align-items:        stretch;
    }

    .stock-sort-btns {
        justify-content:    center;
    }

    /* Hero stats */
    .hero-stats {
        gap:                20px;
    }

    /* Sell form section */
    .sell-form-section {
        padding:            48px 0 60px;
    }
}

/* ── Small Mobile ── */
@media (max-width: 480px) {

    /* Hero */
    .hero {
        padding:            40px 0;
    }

    .hero-title {
        font-size:          clamp(30px, 7vw, 44px);
        letter-spacing:     -1.5px;
    }

    /* Search card */
    .search-card {
        padding:            22px;
    }

    /* Intro image */
    .intro-img {
        height:             280px;
    }

    /* About image */
    .about-img {
        height:             260px;
    }

    /* Gallery */
    .gallery-main {
        height:             240px;
    }

    .gallery-thumbs {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Big price */
    .big-price {
        font-size:          28px;
    }

    /* CTA */
    .cta-card {
        padding:            44px 18px;
    }

    .cta-actions {
        flex-direction:     column;
        align-items:        center;
    }

    /* Team card */
    .team-card {
        padding:            24px;
    }

    /* Testimonials */
    .test-card {
        padding:            22px;
    }

    /* FAQ */
    .faq-q {
        padding:            14px 16px;
    }

    .faq-q span {
        font-size:          14px;
    }


    
}