@import "tailwindcss";

:root { --ink:#0b0d10; --paper:#f5f3ee; --red:#e1261c; --yellow:#ffd52a; --muted:#6c7077; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-geist), Arial, sans-serif; }
a { color:inherit; text-decoration:none; }
button,input,select { font:inherit; }
.topbar { height:78px; display:flex; align-items:center; justify-content:space-between; padding:0 5vw; background:#0b0d10; color:#fff; position:sticky; top:0; z-index:20; border-bottom:1px solid #2d3035; }
.wordmark,.footer-brand { display:flex; flex-direction:column; letter-spacing:.18em; font-weight:800; line-height:1; }
.wordmark small,.footer-brand small { margin-top:5px; font-size:10px; letter-spacing:.36em; color:#c9cbd0; }
nav { display:flex; gap:30px; font-size:14px; color:#d8dadd; }
nav a:hover { color:#fff; }
.button { display:inline-flex; justify-content:center; align-items:center; min-height:52px; padding:0 26px; border:0; border-radius:2px; background:var(--yellow); color:#0b0d10; font-weight:800; cursor:pointer; transition:.2s transform,.2s background; }
.button:hover { transform:translateY(-2px); background:#ffe05b; }
.button-small { min-height:40px; padding:0 18px; font-size:14px; }
.button-ghost { background:transparent; color:#fff; border:1px solid #62656b; }
.button-ghost:hover { background:#1d2025; }
.hero { min-height:710px; display:grid; grid-template-columns:.9fr 1.1fr; background:radial-gradient(circle at 75% 35%,#30343c 0,#15181d 38%,#090b0e 75%); color:#fff; overflow:hidden; }
.hero-copy { padding:110px 4vw 80px 7vw; position:relative; z-index:2; }
.eyebrow,.kicker { display:flex; align-items:center; gap:10px; text-transform:uppercase; letter-spacing:.18em; font-size:12px; font-weight:800; color:#878c94; }
.eyebrow { color:#c9cbd0; }
.eyebrow span { width:30px; height:3px; background:var(--red); }
h1 { margin:26px 0 20px; font-size:clamp(58px,7vw,108px); letter-spacing:-.07em; line-height:.82; text-transform:uppercase; }
h1 em { color:var(--yellow); font-style:normal; }
.hero-lead { max-width:570px; font-size:19px; line-height:1.6; color:#c4c7cd; }
.hero-actions { display:flex; gap:12px; margin-top:34px; }
.microcopy { margin-top:18px; font-size:12px; color:#888d96; }
.hero-visual { position:relative; min-height:630px; align-self:end; }
.hero-visual:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#090b0e 0,transparent 25%),linear-gradient(0deg,#090b0e 0,transparent 28%); pointer-events:none; }
.hero-visual img { width:100%; height:100%; min-height:710px; object-fit:cover; opacity:.86; }
.offer-stamp { position:absolute; z-index:3; top:75px; right:7%; width:142px; height:142px; border-radius:50%; display:grid; place-items:center; text-align:center; background:var(--red); border:7px double #ff6b64; transform:rotate(7deg); font-weight:900; letter-spacing:.04em; box-shadow:0 15px 40px #0009; }
.hero-price { position:absolute; left:5%; bottom:44px; z-index:4; display:flex; flex-direction:column; }
.hero-price small { text-transform:uppercase; letter-spacing:.15em; color:#b9bdc5; }
.hero-price strong { font-family:var(--font-mono); font-size:clamp(42px,5vw,72px); color:var(--yellow); line-height:1.1; }
.hero-price span { color:#d4d6da; }
.proof { display:grid; grid-template-columns:repeat(4,1fr); background:var(--yellow); padding:26px 7vw; }
.proof div { display:flex; flex-direction:column; border-left:1px solid #bea018; padding-left:24px; }
.proof strong { font-size:26px; }
.proof span { font-size:12px; text-transform:uppercase; letter-spacing:.12em; }
.offers-section,.steps { padding:105px 7vw; }
.section-heading { display:flex; justify-content:space-between; gap:40px; align-items:end; }
.section-heading h2,.quote-copy h2,.contact h2 { margin:12px 0 0; font-size:clamp(38px,5vw,66px); letter-spacing:-.055em; line-height:.95; }
.section-heading>p { max-width:480px; margin:0; color:var(--muted); line-height:1.65; }
.filters { display:flex; gap:8px; margin:42px 0 30px; overflow:auto; }
.filters button { padding:12px 21px; border:1px solid #ccc9c1; background:transparent; border-radius:99px; cursor:pointer; }
.filters button.active { background:var(--ink); color:#fff; border-color:var(--ink); }
.offer-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.offer-card { background:#fff; border:1px solid #dedbd4; overflow:hidden; transition:.25s transform,.25s box-shadow; }
.offer-card:hover { transform:translateY(-5px); box-shadow:0 22px 55px #16181c17; }
.card-image { height:315px; background:#15181d; position:relative; overflow:hidden; }
.card-image img { width:100%; height:100%; object-fit:cover; transition:.4s transform; }
.offer-card:hover .card-image img { transform:scale(1.025); }
.brand-tag { position:absolute; top:14px; left:14px; z-index:2; padding:7px 10px; background:#fff; font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:.1em; }
.brand-tag.dodge { background:#d91e18; color:#fff; }.brand-tag.fiat { background:#9a0d24; color:#fff; }.brand-tag.peugeot { background:#063b7a; color:#fff; }
.card-body { padding:24px; }
.card-title { display:flex; justify-content:space-between; gap:15px; }
.card-title small { color:#8a8d92; text-transform:uppercase; letter-spacing:.12em; font-size:10px; }
.card-title h3 { margin:6px 0 2px; font-size:25px; letter-spacing:-.035em; }.card-title p { margin:0; color:#5c6067; min-height:24px; }
.save { align-self:start; background:#e9f5e7; color:#23651e; padding:7px 9px; font-family:var(--font-mono); font-size:12px; white-space:nowrap; }
.pricing { border-top:1px solid #e8e5df; margin-top:20px; padding-top:17px; display:flex; flex-direction:column; }
.pricing span { color:#73777e; font-size:13px; }.pricing strong { font-family:var(--font-mono); font-size:34px; letter-spacing:-.06em; }.pricing small { font-size:11px; color:#8a8d92; }
.colors { min-height:38px; font-size:12px; color:#656970; display:flex; gap:8px; align-items:center; }.colors span { width:10px; height:10px; border-radius:50%; background:#d7d9dc; border:1px solid #9da0a5; flex:none; }
.quote-link { width:100%; display:flex; justify-content:space-between; border:0; border-top:1px solid #e8e5df; padding:17px 0 0; margin-top:8px; background:transparent; font-weight:800; cursor:pointer; }.quote-link span { color:var(--red); }
.steps { background:#0d0f12; color:#fff; }.steps .kicker { color:#858a93; }.step-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#30343a; margin-top:55px; }.step-grid>div { background:#15181d; padding:42px; }.step-grid b { font-family:var(--font-mono); color:var(--yellow); }.step-grid h3 { font-size:24px; margin:55px 0 12px; }.step-grid p { color:#9da2ab; line-height:1.6; }
.quote-section { padding:105px 7vw; display:grid; grid-template-columns:.9fr 1.1fr; gap:9vw; background:#e8e5de; }.quote-copy p { color:#666a71; line-height:1.65; max-width:520px; }.quote-copy ul { list-style:none; padding:0; margin-top:30px; }.quote-copy li { padding:12px 0; border-bottom:1px solid #cfcbc2; }.quote-copy li:before { content:"✓"; color:#287c25; font-weight:900; margin-right:12px; }
form { background:#fff; padding:38px; display:grid; grid-template-columns:1fr 1fr; gap:20px; box-shadow:0 24px 60px #1112; }form label { display:flex; flex-direction:column; gap:8px; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }input,select { height:52px; border:1px solid #cdc9c1; padding:0 14px; background:#fff; color:#111; border-radius:0; }input:focus,select:focus { outline:3px solid #ffd52a66; border-color:#a58a11; }.consent { grid-column:1/-1; flex-direction:row; align-items:flex-start; text-transform:none; letter-spacing:0; font-weight:400; line-height:1.5; }.consent input { width:18px; height:18px; flex:none; }.consent a,.legal a { text-decoration:underline; }.form .button,form>small { grid-column:1/-1; }form>.button { grid-column:1/-1; }form>small { color:#7d8187; }
.contact { padding:75px 7vw; background:var(--yellow); display:flex; justify-content:space-between; align-items:end; gap:50px; }.contact .kicker { color:#5d521d; }.contact p { max-width:600px; line-height:1.6; }.contact-actions { display:flex; flex-direction:column; gap:12px; text-align:right; font-weight:800; font-size:20px; }
footer { padding:65px 7vw 25px; background:#090b0e; color:#c0c3c9; }.footer-brand { color:#fff; width:max-content; }.legal { display:grid; grid-template-columns:repeat(3,1fr); gap:35px; margin:42px 0; font-size:11px; line-height:1.65; }.footer-bottom { border-top:1px solid #292c31; padding-top:20px; display:flex; justify-content:space-between; font-size:11px; text-transform:uppercase; letter-spacing:.1em; }
.floating-whatsapp { display:none; }
@media (max-width:1000px) { nav { display:none; }.hero { grid-template-columns:1fr; }.hero-copy { padding-bottom:30px; }.hero-visual { min-height:520px; }.hero-visual img { min-height:520px; }.proof { grid-template-columns:1fr 1fr; gap:24px; }.offer-grid { grid-template-columns:1fr 1fr; }.quote-section { grid-template-columns:1fr; }.legal { grid-template-columns:1fr; }.floating-whatsapp { display:grid; position:fixed; right:18px; bottom:18px; z-index:30; width:54px; height:54px; place-items:center; border-radius:50%; background:#25d366; color:#073b19; font-weight:900; box-shadow:0 8px 25px #0004; } }
@media (max-width:650px) { .topbar { height:66px; padding:0 18px; }.topbar .button { display:none; }.hero-copy { padding:70px 22px 24px; }.hero { min-height:auto; }.hero-actions { flex-direction:column; }.hero-visual,.hero-visual img { min-height:480px; }.offer-stamp { width:105px; height:105px; font-size:13px; top:28px; }.hero-price { left:22px; bottom:28px; }.proof { padding:24px 22px; }.proof strong { font-size:20px; }.offers-section,.steps,.quote-section { padding:75px 22px; }.section-heading { align-items:start; flex-direction:column; }.offer-grid { grid-template-columns:1fr; }.card-image { height:310px; }.step-grid { grid-template-columns:1fr; }.step-grid h3 { margin-top:30px; }form { padding:24px; grid-template-columns:1fr; }form label { grid-column:1; }.consent,form>.button,form>small { grid-column:1; }.contact { padding:65px 22px; flex-direction:column; align-items:start; }.contact-actions { text-align:left; }.footer-bottom { flex-direction:column; gap:12px; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }
.hp { position:absolute!important; left:-10000px!important; width:1px!important; height:1px!important; overflow:hidden!important; }
.form-status { grid-column:1/-1; min-height:22px; margin:0; font-size:13px; }
.form-status.success { color:#23651e; }.form-status.error { color:#b31919; }
button:disabled { opacity:.65; cursor:wait; }
