:root{ --accent:#18a0fb; --accent-contrast:#ffffff; --text:#1a1a1a; --muted:#6b7280; --bg:#ffffff; --surface:#f8fafc; }
*{ box-sizing:border-box; }
body{ margin:0; color:var(--text); background:var(--bg); font-family: "Montserrat", Arial, sans-serif; }
a{ color:var(--accent); text-decoration:none; } a:hover{ text-decoration:underline; }

.cpd-header{ position:sticky; top:0; z-index:50; background:var(--bg); border-bottom:1px solid #e5e7eb; }
.cpd-header__inner{ max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:12px 20px; }
.cpd-logo{ display:flex; align-items:center; font-weight:700; font-size:18px; gap:8px; color:var(--text); }
.cpd-logo__bolt{ font-size:20px; }
.cpd-menu{ display:flex; gap:18px; list-style:none; margin:0; padding:0; }
.cpd-cta{ background:var(--accent); color:var(--accent-contrast); padding:10px 16px; border-radius:9999px; }

.cpd-main{ min-height:60vh; }
.cpd-container{ max-width:1200px; margin:0 auto; padding:24px 20px; }

.cpd-hero{ background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%); color:white; padding:70px 20px; }
.cpd-hero__content{ max-width:1200px; margin:0 auto; }
.cpd-hero h1{ font-size:40px; margin:0 0 10px; }
.cpd-hero p{ font-size:18px; margin:0 0 20px; }

.cpd-section{ padding:24px 0; }
.cpd-section__header{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px; }
.cpd-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:18px; }
@media (max-width:900px){ .cpd-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){ .cpd-grid{ grid-template-columns: 1fr; } }

.cpd-card{ border:1px solid #e5e7eb; border-radius:14px; overflow:hidden; background:#fff; display:flex; flex-direction:column; }
.cpd-card__image img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }
.cpd-card__body{ padding:12px; display:flex; flex-direction:column; gap:8px; }
.cpd-card__title{ margin:0; font-size:18px; }
.cpd-card__specs{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; color:var(--muted); }
.cpd-card__bottom{ display:flex; align-items:center; justify-content:space-between; margin-top:8px; }
.cpd-card__price{ font-size:18px; }

.cpd-btn{ display:inline-flex; align-items:center; justify-content:center; padding:10px 14px; border-radius:10px; border:1px solid #e5e7eb; background:#fff; color:var(--text); text-decoration:none; }
.cpd-btn--primary{ background:var(--accent); color:var(--accent-contrast); border-color:transparent; }
.cpd-link{ text-decoration:underline; }

.cpd-footer{ background:var(--surface); border-top:1px solid #e5e7eb; margin-top:40px; }
.cpd-footer__grid{ max-width:1200px; margin:0 auto; padding:24px 20px; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:900px){ .cpd-footer__grid{ grid-template-columns:1fr; } }
.cpd-footer__bottom{ border-top:1px solid #e5e7eb; padding:12px 20px; text-align:center; }

.cpd-filters{ background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:12px; margin-bottom:16px; }
.cpd-filters__row{ display:grid; grid-template-columns: repeat(5, 1fr); gap:12px; }
.cpd-filters label{ display:flex; flex-direction:column; gap:6px; font-size:14px; }
.cpd-filters input, .cpd-filters select{ padding:8px; border:1px solid #e5e7eb; border-radius:8px; }
@media (max-width:1100px){ .cpd-filters__row{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width:700px){ .cpd-filters__row{ grid-template-columns: 1fr; } }

.cpd-vehicle__header h1{ margin:0 0 10px; }
.cpd-vehicle__gallery{ border-radius:12px; overflow:hidden; }
.cpd-vehicle__content{ display:grid; grid-template-columns: 360px 1fr; gap:24px; margin-top:18px; }
@media (max-width:900px){ .cpd-vehicle__content{ grid-template-columns:1fr; } }
.cpd-specs{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:10px; }
.cpd-specs li{ display:flex; align-items:center; justify-content:space-between; padding:8px 10px; background:var(--surface); border-radius:10px; }
.cpd-specs li span.cpd-spec-label{ display:flex; align-items:center; gap:8px; }
.cpd-icon{ width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; }

/* Calculator */
.cpd-calc{ display:grid; grid-template-columns: repeat(3,1fr); gap:12px; }
.cpd-calc label{ display:flex; flex-direction:column; gap:6px; }
.cpd-calc__result{ margin-top:16px; font-weight:600; }
@media (max-width:900px){ .cpd-calc{ grid-template-columns:1fr; } }

/* Education strip */
.cpd-education{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
.cpd-edu__item{ background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:16px; text-align:center; }
.cpd-edu__icon{ font-size:24px; }

/* Gallery */
.cpd-gallery__main img{ width:100%; height:auto; display:block; border-radius:12px; }
.cpd-gallery__thumbs{ display:flex; gap:10px; list-style:none; padding:10px 0 0; margin:0; flex-wrap:nowrap; overflow-x:auto; }
.cpd-gallery__thumbs li{ flex:0 0 auto; }
.cpd-gallery__thumbs img{ display:block; width:90px; height:90px; object-fit:cover; border-radius:8px; border:1px solid #e5e7eb; }

/* Description container */
.cpd-desc-box{ background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:16px; }

/* Recommended */
.cpd-reco{ margin-top:28px; }
.cpd-reco .cpd-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width:1100px){ .cpd-reco .cpd-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){ .cpd-reco .cpd-grid{ grid-template-columns: 1fr; } }


/* Menu color & hover */
.cpd-menu a{ color:#000000; text-decoration:none; }
.cpd-menu a:hover, .cpd-menu a:focus{ color:#18a0fb; text-decoration:underline; }
.cpd-logo__img{ display:block; height:48px; width:auto; object-fit:contain; }