/* ============================================================
   NASRAOUI AUTO — design tokens
   ============================================================ */
:root{
  --ink:        #10192B;
  --ink-soft:   #223151;
  --cream:      #F6F1E7;
  --cream-dim:  #EDE6D6;
  --brass:      #B08D57;
  --brass-dim:  #8C6F44;
  --rosso:      #A32638;
  --rosso-dim:  #7E1D2B;
  --charcoal:   #1C1C1C;
  --line:       #DAD3C4;
  --white:      #FFFFFF;

  --font-display: 'Fraunces', serif;
  --font-body:    'Archivo', sans-serif;

  --radius: 3px;
  --container: 1180px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--cream);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight:600; margin:0 0 .4em; color: var(--ink); line-height:1.15; }
p{ margin:0 0 1em; max-width: 62ch; }
:focus-visible{ outline: 2px solid var(--rosso); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }

.wrap{ max-width: var(--container); margin:0 auto; padding: 0 28px; }

/* ---------- header ---------- */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: var(--cream); border-bottom: 1px solid var(--line);
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; height:76px; }
.brand{ display:flex; align-items:center; }
.brand-logo{ height:52px; width:auto; display:block; }
.footer-logo{ width:210px; max-width:60vw; height:auto; display:block; }
.main-nav{ display:flex; align-items:center; gap: 34px; }
.main-nav a{ font-size: .93rem; font-weight:600; color: var(--ink-soft); position:relative; padding: 4px 0; }
.main-nav a:hover{ color: var(--rosso); }
.header-actions{ display:flex; align-items:center; gap:16px; }

.lang-toggle{
  display:flex; border:1px solid var(--ink); border-radius: 999px; overflow:hidden;
}
.lang-toggle button{
  background:none; border:none; padding:6px 13px; font-size:.78rem; font-weight:700; color: var(--ink-soft);
}
.lang-toggle button.active{ background: var(--ink); color: var(--cream); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 12px 24px; border-radius: var(--radius); font-weight:700; font-size:.92rem;
  border: 1px solid transparent; transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn-primary{ background: var(--rosso); color: var(--white); }
.btn-primary:hover{ background: var(--rosso-dim); }
.btn-outline{ border-color: var(--ink); color: var(--ink); }
.btn-outline:hover{ background: var(--ink); color: var(--cream); }
.btn-ghost{ color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.btn-block{ width:100%; }
.btn-sm{ padding: 8px 16px; font-size:.82rem; }

/* ---------- hero ---------- */
.hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--line); }
.hero .wrap{ display:grid; grid-template-columns: 1.05fr .95fr; align-items:center; gap: 40px; padding-top: 64px; padding-bottom: 64px; min-height: 560px; }
.hero-eyebrow{ font-size:.85rem; color: var(--brass-dim); font-weight:700; margin-bottom:18px; }
.hero h1{ font-size: clamp(2.6rem, 5vw, 4.1rem); max-width: 11ch; }
.hero h1 em{ font-style: italic; color: var(--rosso); }
.hero p.lead{ font-size:1.15rem; color: var(--ink-soft); max-width: 42ch; margin-bottom: 30px; }
.hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; }
.hero-art{ position:relative; }
.hero-art svg{ width:100%; height:auto; transform: rotate(-4deg); }
.hero-stats{ display:flex; gap: 36px; margin-top: 46px; padding-top: 28px; border-top:1px solid var(--line); }
.hero-stats div strong{ display:block; font-family: var(--font-display); font-size:1.9rem; color: var(--ink); }
.hero-stats div span{ font-size:.82rem; color: var(--ink-soft); }

/* ---------- sections ---------- */
section{ padding: 88px 0; }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom: 44px; flex-wrap:wrap; }
.section-head h2{ font-size: clamp(1.9rem, 3vw, 2.6rem); max-width: 16ch; margin:0; }
.section-head p{ color: var(--ink-soft); margin:0; }
.eyebrow{ font-size:.8rem; font-weight:700; color: var(--brass-dim); letter-spacing:.02em; margin-bottom:10px; display:block; }

.on-ink{ background: var(--ink); color: var(--cream); }
.on-ink h2, .on-ink h3, .on-ink h4{ color: var(--cream); }
.on-ink p{ color: #C9CFDC; }

/* ---------- how it works ---------- */
.steps{ display:grid; grid-template-columns: repeat(3,1fr); gap: 32px; counter-reset: step; }
.step{ border-top: 3px solid var(--brass); padding-top: 18px; }
.step::before{ counter-increment: step; content: counter(step); font-family: var(--font-display); font-size:2.4rem; color: var(--brass); display:block; margin-bottom: 8px; }
.step h3{ font-size:1.2rem; }
.step p{ color: var(--ink-soft); font-size: .95rem; }

/* ---------- car grid & cards ---------- */
.toolbar{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-bottom: 34px; }
.toolbar select, .toolbar input[type="text"]{
  padding: 10px 14px; border:1px solid var(--ink); border-radius: var(--radius); background: var(--white);
  font-family: var(--font-body); font-size:.9rem; color: var(--ink);
}
.seg{ display:inline-flex; border:1px solid var(--ink); border-radius: 999px; overflow:hidden; }
.seg button{ background:none; border:none; padding:9px 18px; font-size:.85rem; font-weight:700; color:var(--ink); }
.seg button.active{ background: var(--ink); color: var(--cream); }

.grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.card{
  background: var(--white); border:1px solid var(--line); border-radius: var(--radius); overflow:hidden;
  display:flex; flex-direction:column;
}
.card-media{ aspect-ratio: 4/3; position:relative; display:flex; align-items:center; justify-content:center; }
.card-media svg{ width:72%; }
.tag{
  position:absolute; top:12px; left:12px; background: var(--ink); color: var(--cream);
  font-size:.72rem; font-weight:700; padding:5px 10px; border-radius: 999px; text-transform:uppercase; letter-spacing:.03em;
}
.tag.sale{ background: var(--rosso); }
.card-body{ padding: 20px 20px 22px; display:flex; flex-direction:column; gap:10px; flex:1; }
.card-body h3{ font-size:1.15rem; margin:0; }
.card-meta{ font-size:.82rem; color: var(--ink-soft); display:flex; gap:10px; flex-wrap:wrap; }
.card-meta span{ border-right:1px solid var(--line); padding-right:10px; }
.card-meta span:last-child{ border-right:none; }
.card-price{ margin-top:auto; display:flex; align-items:baseline; justify-content:space-between; padding-top:12px; border-top:1px dashed var(--line); }
.card-price strong{ font-family: var(--font-display); font-size:1.35rem; color: var(--ink); }
.card-price small{ color: var(--ink-soft); }

/* ---------- car detail ---------- */
.detail{ display:grid; grid-template-columns: 1.15fr .85fr; gap: 56px; }
.gallery-main{ background: var(--white); border:1px solid var(--line); border-radius: var(--radius); aspect-ratio: 4/3; display:flex; align-items:center; justify-content:center; margin-bottom:14px; overflow:hidden; }
.gallery-main svg{ width:70%; }
.gallery-thumbs{ display:flex; gap:10px; }
.gallery-thumbs div{ flex:1; aspect-ratio: 1/1; background: var(--white); border:1px solid var(--line); border-radius: var(--radius); display:flex; align-items:center; justify-content:center; }
.gallery-thumbs svg{ width:55%; opacity:.7; }
.spec-list{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; margin: 26px 0; padding: 22px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.spec-list div{ display:flex; flex-direction:column; gap:2px; }
.spec-list span{ font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; color: var(--brass-dim); font-weight:700; }
.spec-list strong{ font-size:1rem; color: var(--ink); }
.buy-box{ background: var(--white); border:1px solid var(--line); border-radius: var(--radius); padding: 26px; position:sticky; top: 96px; height:fit-content; }
.buy-box .price{ font-family: var(--font-display); font-size:2.1rem; color: var(--ink); margin-bottom:4px; }
.buy-box .price small{ font-family: var(--font-body); font-size:.9rem; color: var(--ink-soft); }
.buy-box form{ display:flex; flex-direction:column; gap:12px; margin: 18px 0; }
.buy-box label{ font-size:.8rem; font-weight:700; color: var(--ink-soft); display:block; margin-bottom:5px; }
.buy-box input{ width:100%; padding:10px 12px; border:1px solid var(--ink); border-radius: var(--radius); font-family:inherit; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* ---------- checkout ---------- */
.checkout-grid{ display:grid; grid-template-columns: 1fr .8fr; gap: 56px; }
.summary-card{ background: var(--white); border:1px solid var(--line); border-radius: var(--radius); padding:24px; }
.summary-row{ display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px dashed var(--line); font-size:.94rem; }
.summary-row.total{ border-bottom:none; padding-top:16px; font-weight:700; font-size:1.1rem; color: var(--ink); }

/* ---------- footer ---------- */
footer{ background: var(--ink); color: var(--cream); padding: 60px 0 28px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 40px; }
.footer-grid h4{ color: var(--cream); font-size: .85rem; text-transform:uppercase; letter-spacing:.04em; font-family: var(--font-body); font-weight:700; margin-bottom:14px; }
.footer-grid a{ color:#C9CFDC; font-size:.9rem; display:block; margin-bottom:9px; }
.footer-grid a:hover{ color: var(--white); }
.footer-bottom{ border-top:1px solid #2A3A5C; padding-top: 22px; display:flex; justify-content:space-between; color:#93A0BE; font-size:.82rem; flex-wrap:wrap; gap:10px; }

/* ---------- utility ---------- */
.empty-state{ text-align:center; padding: 60px 20px; border:1px dashed var(--line); border-radius: var(--radius); }
.faq-item{ padding:22px 0; border-bottom:1px solid var(--line); }
.faq-item h3{ font-size:1.15rem; margin-bottom:8px; }
.faq-item p{ color: var(--ink-soft); margin:0; }
.badge-list{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.badge-list span{ font-size:.78rem; border:1px solid var(--line); padding:6px 12px; border-radius:999px; color: var(--ink-soft); }

/* ---------- responsive ---------- */
@media (max-width: 920px){
  .hero .wrap{ grid-template-columns: 1fr; padding-top:44px; min-height:auto; }
  .hero-art{ order:-1; max-width: 340px; margin:0 auto; }
  .steps{ grid-template-columns: 1fr; }
  .grid{ grid-template-columns: repeat(2,1fr); }
  .detail, .checkout-grid{ grid-template-columns: 1fr; }
  .buy-box{ position:static; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .main-nav{ display:none; }
}
@media (max-width: 560px){
  .grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
  .hero-stats{ flex-wrap:wrap; gap:24px; }
  .brand-logo{ height:40px; }
}