/* Capital Rent — black, brushed gold and a red accent, like the logo */
:root{
  --bg:#0e0d0d; --bg-2:#151414; --surface:#1a1919; --text:#f3efe8; --muted:#a9a39a; --line:rgba(201,164,92,.2);
  --accent:#c9a45c; --accent-ink:#0e0d0d; --red:#c8202b; --nav-bg:rgba(14,13,13,.9); --icon-bg:rgba(201,164,92,.12); --badge-bg:#000;
  --display:"Marcellus","Noto Naskh Arabic",Georgia,serif; --body:"Inter Tight","Noto Sans Arabic",system-ui,sans-serif;
  --radius:10px; --btn-radius:6px; --h-weight:400; --h-track:0;
}
.gold,.hl{background:linear-gradient(100deg,#9c7330,#f0d699 45%,#b8862f 80%);-webkit-background-clip:text;background-clip:text;color:transparent}
.btn-accent{background:linear-gradient(100deg,#b8862f,#e8c97f 50%,#b8862f);color:#0e0d0d}
.eyebrow{color:var(--red)}
.hero{background:radial-gradient(50% 70% at 80% 40%,rgba(201,164,92,.14),transparent 70%)}
.road{position:absolute;inset:auto 0 0;width:100%;height:clamp(90px,14vw,180px);fill:none;stroke-width:2}
.road path:first-child{stroke:rgba(201,164,92,.35)}
.road path:last-child{stroke:rgba(200,32,43,.45)}
.hero-logo{background:#000;box-shadow:0 0 0 1px rgba(201,164,92,.35),0 40px 80px -30px rgba(0,0,0,.8)}

.fleet{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.car{text-align:center}
.car-art{width:100%;height:auto;margin:6px 0 18px;fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s}
.car:hover .car-art{transform:translateX(8px)}
.car p{color:var(--red);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase}

.steps-title{margin:clamp(48px,6vw,72px) 0 20px;font-size:28px}
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.steps li{display:flex;gap:16px;align-items:flex-start;padding:22px;border-top:2px solid var(--accent);background:var(--surface)}
.steps b{font:400 34px/1 var(--display);color:var(--accent)}
.steps h4{font:600 17px/1.3 var(--body);margin-bottom:4px}
.steps p{color:var(--muted);font-size:15px}

[dir="rtl"] .car:hover .car-art{transform:translateX(-8px)}
[dir="rtl"] .car p{letter-spacing:0}
[dir="rtl"] .road{transform:scaleX(-1)}

@media (max-width:900px){.steps{grid-template-columns:1fr}}