:root { --red:#ce191c; --red-dark:#9f1013; --navy:#071c3b; --ink:#111318; --muted:#68707c; --line:#dfe2e6; --paper:#f4f4f2; --white:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial,Helvetica,sans-serif; }
a { color:inherit; text-decoration:none; }
button,a { -webkit-tap-highlight-color:transparent; }
main { overflow:hidden; }

.site-header { height:92px; padding:0 clamp(22px,5vw,80px); display:flex; align-items:center; justify-content:space-between; background:#fff; border-bottom:1px solid #e7e7e7; position:relative; z-index:20; }
.brand { display:flex; align-items:center; gap:12px; }
.brand img { width:58px; height:58px; border-radius:50%; object-fit:cover; }
.brand span { display:flex; flex-direction:column; line-height:.92; }
.brand b { color:var(--red); font-size:12px; letter-spacing:.18em; }
.brand strong { font-size:22px; letter-spacing:.02em; }
nav { display:flex; align-items:center; gap:36px; font-size:14px; font-weight:700; }
nav a { position:relative; padding:10px 0; }
nav a:after { content:""; position:absolute; left:0; bottom:2px; width:0; height:2px; background:var(--red); transition:.25s; }
nav a:hover:after,nav a:focus-visible:after { width:100%; }
.header-call { display:flex; flex-direction:column; text-align:right; }
.header-call small { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.18em; }
.header-call b { color:var(--navy); font-size:18px; }

.hero { min-height:680px; display:grid; grid-template-columns:1.05fr .95fr; background:#fff; }
.hero-copy { padding:clamp(70px,9vw,132px) clamp(26px,5vw,80px) 52px; display:flex; flex-direction:column; justify-content:center; }
.eyebrow { margin:0 0 24px; display:flex; align-items:center; gap:12px; color:var(--red); font-weight:800; font-size:12px; letter-spacing:.16em; text-transform:uppercase; }
.eyebrow span { width:34px; height:2px; background:currentColor; display:block; }
h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:26px; max-width:690px; font-size:clamp(56px,6.4vw,104px); line-height:.88; letter-spacing:-.065em; text-transform:uppercase; }
.hero-lead { max-width:620px; color:#515964; font-size:18px; line-height:1.7; }
.hero-actions { display:flex; gap:12px; margin-top:18px; flex-wrap:wrap; }
.button { min-height:54px; display:inline-flex; align-items:center; justify-content:center; gap:28px; padding:0 24px; border:1px solid transparent; font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; transition:transform .2s,background .2s,color .2s; }
.button:hover { transform:translateY(-2px); }
.button span { font-size:20px; }
.button-primary { background:var(--red); color:#fff; }
.button-primary:hover { background:var(--red-dark); }
.button-ghost { border-color:#b9bec5; background:#fff; }
.button-dark { background:var(--navy); color:#fff; }
.button-light { background:#fff; color:var(--ink); }
.hero-details { display:flex; gap:56px; margin-top:54px; }
.hero-details div { display:flex; flex-direction:column; gap:7px; }
.hero-details small { color:#9197a0; text-transform:uppercase; letter-spacing:.15em; font-size:10px; }
.hero-details strong { color:var(--navy); font-size:14px; }

.hero-visual { min-height:680px; position:relative; background:linear-gradient(135deg,#081c3b 0%,#07142b 55%,#030914 100%); overflow:hidden; display:flex; align-items:center; justify-content:center; }
.hero-visual:before { content:""; position:absolute; width:540px; height:540px; border:120px solid rgba(255,255,255,.025); border-radius:50%; right:-140px; top:-150px; }
.speed-lines { position:absolute; inset:0; background:repeating-linear-gradient(151deg,transparent 0,transparent 54px,rgba(255,255,255,.035) 55px,rgba(255,255,255,.035) 57px); }
.visual-card { width:min(57%,420px); aspect-ratio:.84; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.15); transform:skewX(-5deg); position:relative; display:flex; align-items:center; justify-content:center; box-shadow:0 40px 80px rgba(0,0,0,.35); }
.visual-card:before { content:""; position:absolute; inset:16px; border:1px solid rgba(255,255,255,.12); }
.visual-card img { width:74%; height:auto; object-fit:contain; position:relative; z-index:2; transform:skewX(5deg); filter:drop-shadow(0 20px 26px rgba(0,0,0,.28)); }
.visual-number { position:absolute; color:rgba(255,255,255,.035); font-size:190px; font-weight:900; letter-spacing:-.12em; right:-18px; bottom:-30px; }
.part-tag { position:absolute; z-index:4; background:#fff; color:var(--navy); font-size:10px; font-weight:900; letter-spacing:.16em; padding:12px 17px; box-shadow:0 10px 26px rgba(0,0,0,.22); }
.tag-one { top:22%; left:9%; }
.tag-two { right:6%; bottom:28%; background:var(--red); color:#fff; }
.stock-badge { position:absolute; z-index:4; left:11%; bottom:13%; color:white; display:flex; flex-direction:column; padding-left:16px; border-left:3px solid var(--red); }
.stock-badge b { font-size:19px; text-transform:uppercase; }
.stock-badge span { font-size:11px; color:#aab3c3; margin-top:4px; }

.trust-strip { display:grid; grid-template-columns:repeat(3,1fr); background:var(--navy); color:#fff; padding:0 clamp(25px,5vw,80px); }
.trust-strip p { margin:0; min-height:94px; display:flex; align-items:center; gap:22px; border-right:1px solid rgba(255,255,255,.12); padding:0 34px; font-weight:700; font-size:14px; }
.trust-strip p:first-child { padding-left:0; }
.trust-strip p:last-child { border:0; }
.trust-strip span { color:var(--red); font-size:11px; letter-spacing:.12em; }

.products { padding:120px clamp(24px,6vw,96px); max-width:1550px; margin:auto; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:60px; margin-bottom:58px; }
.section-heading h2,.location h2 { margin:0; max-width:760px; font-size:clamp(46px,5vw,76px); line-height:.95; letter-spacing:-.055em; text-transform:uppercase; }
.section-heading>p { max-width:420px; color:var(--muted); line-height:1.7; font-size:15px; }
.product-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.product-card { min-height:590px; padding:42px; position:relative; overflow:hidden; display:grid; grid-template-columns:100px 1fr; grid-template-rows:auto 1fr auto; border:1px solid var(--line); }
.collision-card { background:#fff; }
.mechanical-card { background:var(--navy); color:#fff; border-color:var(--navy); }
.product-card:after { content:""; position:absolute; width:260px; height:260px; border:65px solid currentColor; opacity:.025; border-radius:50%; right:-80px; top:-90px; }
.card-index { color:var(--red); font-weight:900; font-size:13px; letter-spacing:.15em; padding-top:8px; }
.card-title p { margin-bottom:6px; color:#7a828c; font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
.card-title h3 { margin:0; font-size:clamp(46px,5vw,78px); text-transform:uppercase; letter-spacing:-.05em; }
.product-card ul { grid-column:2; display:grid; grid-template-columns:1fr 1fr; gap:14px 22px; align-content:center; margin:24px 0 40px; padding:0; list-style:none; }
.product-card li { display:flex; align-items:center; gap:12px; font-weight:700; font-size:16px; border-bottom:1px solid rgba(120,125,132,.22); padding-bottom:12px; }
.check-icon { width:24px; height:24px; flex:0 0 24px; display:inline-grid; place-items:center; background:var(--red); color:#fff; font-size:12px; }
.product-card>a { grid-column:2; justify-self:start; display:flex; align-items:center; gap:30px; border-bottom:2px solid var(--red); padding:12px 0; font-weight:900; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.product-card>a span { font-size:18px; color:var(--red); }
.availability-note { text-align:center; color:#6f7680; margin:38px 0 0; }
.availability-note a { color:var(--red); font-weight:800; border-bottom:1px solid var(--red); }

.about { min-height:620px; display:grid; grid-template-columns:.9fr 1.1fr; background:var(--red); color:#fff; }
.about-mark { min-height:620px; display:grid; place-items:center; font-size:clamp(170px,24vw,410px); font-weight:900; letter-spacing:-.16em; line-height:1; color:rgba(255,255,255,.075); overflow:hidden; border-right:1px solid rgba(255,255,255,.15); padding-right:.15em; }
.about-copy { padding:110px clamp(28px,7vw,110px); }
.eyebrow-light { color:#fff; }
.about-copy h2 { font-size:clamp(52px,6vw,86px); line-height:.9; letter-spacing:-.06em; text-transform:uppercase; max-width:780px; }
.about-copy>p:not(.eyebrow) { max-width:670px; font-size:17px; line-height:1.8; color:rgba(255,255,255,.82); }
.about-list { display:grid; grid-template-columns:repeat(3,1fr); margin-top:48px; border-top:1px solid rgba(255,255,255,.24); }
.about-list div { display:flex; flex-direction:column; padding:26px 20px 0 0; gap:14px; }
.about-list b { font-size:11px; letter-spacing:.15em; }
.about-list span { font-weight:800; font-size:14px; }

.location { max-width:1550px; margin:auto; padding:120px clamp(24px,6vw,96px); display:grid; grid-template-columns:.9fr 1.1fr; gap:20px; }
.location-panel { background:#fff; padding:62px; }
.location-panel h2 { font-size:clamp(45px,4.8vw,72px); margin-bottom:50px; }
.contact-row { display:grid; grid-template-columns:120px 1fr; gap:20px; border-top:1px solid var(--line); padding:20px 0; }
.contact-row small { color:#8a9099; text-transform:uppercase; letter-spacing:.15em; font-size:10px; }
.contact-row strong,.contact-row a { font-size:17px; line-height:1.55; }
.contact-row a { color:var(--red); font-weight:900; font-size:24px; }
.location-actions { display:flex; gap:10px; margin-top:34px; flex-wrap:wrap; }
.map-card { position:relative; min-height:660px; background:#d8dadd; overflow:hidden; color:var(--navy); }
.map-grid { position:absolute; inset:0; opacity:.7; background-image:linear-gradient(#c5c9cf 1px,transparent 1px),linear-gradient(90deg,#c5c9cf 1px,transparent 1px); background-size:70px 70px; transform:rotate(12deg) scale(1.4); }
.map-road { position:absolute; height:34px; width:130%; left:-15%; background:#f7f7f3; box-shadow:0 0 0 4px #c3c7cd; }
.road-one { top:44%; transform:rotate(-16deg); }
.road-two { top:57%; transform:rotate(28deg); }
.map-pin { position:absolute; z-index:2; top:39%; left:52%; width:96px; height:96px; transform:translate(-50%,-50%) rotate(45deg); border-radius:50% 50% 50% 5%; background:var(--red); box-shadow:0 14px 30px rgba(84,0,0,.25); display:grid; place-items:center; }
.map-pin span { transform:rotate(-45deg); color:#fff; font-size:22px; font-weight:900; }
.map-card>p { position:absolute; left:44px; bottom:55px; font-size:18px; max-width:300px; line-height:1.5; }
.map-link { position:absolute; right:40px; top:36px; background:var(--navy); color:#fff; padding:15px 18px; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }

.cta { background:var(--navy); color:#fff; padding:84px clamp(24px,6vw,96px); display:flex; align-items:center; justify-content:space-between; gap:40px; }
.cta p { color:#b8c0cd; font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
.cta h2 { margin:0; max-width:900px; font-size:clamp(38px,5vw,68px); line-height:.95; letter-spacing:-.05em; text-transform:uppercase; }

footer { background:#0c0e12; color:#fff; padding:70px clamp(24px,6vw,96px) 28px; display:grid; grid-template-columns:1.1fr .8fr 1fr; gap:50px; align-items:start; }
.footer-brand { display:flex; gap:16px; align-items:center; }
.footer-brand img { width:74px; height:74px; object-fit:cover; border-radius:50%; }
.footer-brand p { margin:0; display:flex; flex-direction:column; }
.footer-brand b { color:var(--red); font-size:13px; letter-spacing:.18em; }
.footer-brand span { font-size:28px; font-weight:900; }
.footer-links { display:grid; gap:14px; font-size:13px; font-weight:700; }
.footer-links a:hover { color:var(--red); }
.social-links { display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; }
.social-links>a { display:flex; align-items:center; gap:8px; border:1px solid #2b2e34; border-radius:999px; padding:8px 13px 8px 8px; transition:border-color .2s,color .2s; }
.social-links>a:hover { border-color:var(--red); }
.social-links span { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:#202329; color:#fff; }
.social-links>a:first-child span { background:#d62976; }
.social-links>a:last-child span { background:#1877f2; }
.social-links svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; }
.social-links .icon-fill { fill:currentColor; stroke:none; }
.footer-contact { text-align:right; color:#818997; font-size:13px; line-height:1.8; }
.footer-contact span { color:#fff; font-size:24px; font-weight:900; }
.copyright { margin:34px 0 0; padding-top:22px; border-top:1px solid #24272d; color:#656c77; font-size:11px; }
.developer-credit { grid-column:2/-1; margin:34px 0 0; padding-top:15px; border-top:1px solid #24272d; display:flex; align-items:center; justify-content:flex-end; gap:7px; color:#858c97; font-size:11px; }
.developer-credit strong { color:#fff; }
.developer-credit>b { color:#fff; letter-spacing:.04em; }
.credit-whatsapp { width:26px; height:26px; display:grid; place-items:center; margin-left:5px; border-radius:50%; background:#18a958; color:#fff; }
.credit-whatsapp svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.floating-whatsapp { position:fixed; z-index:30; right:22px; bottom:22px; background:#18a958; color:#fff; display:flex; align-items:center; gap:10px; padding:10px 18px 10px 10px; border-radius:999px; box-shadow:0 12px 30px rgba(0,0,0,.25); font-size:13px; }
.floating-whatsapp span { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:#fff; color:#118747; font-size:10px; font-weight:900; }

@media (max-width:960px) {
  .site-header { height:78px; padding:0 20px; }
  .brand img { width:48px; height:48px; } .brand strong { font-size:18px; } .brand b { font-size:9px; }
  nav { display:none; } .header-call b { font-size:15px; }
  .hero { grid-template-columns:1fr; } .hero-copy { min-height:610px; } .hero-visual { min-height:560px; }
  .trust-strip p { padding:0 15px; font-size:12px; gap:10px; }
  .section-heading { align-items:flex-start; flex-direction:column; gap:20px; }
  .product-grid,.about,.location { grid-template-columns:1fr; }
  .about-mark { display:none; } .about-copy { min-height:580px; }
  .map-card { min-height:520px; }
  .cta { flex-direction:column; align-items:flex-start; }
  footer { grid-template-columns:1fr 1fr; } .footer-contact { grid-column:1/-1; text-align:left; } .developer-credit { justify-content:flex-start; }
}

@media (max-width:640px) {
  .header-call small { display:none; } .header-call b { font-size:13px; }
  .hero-copy { padding:76px 22px 44px; min-height:620px; }
  h1 { font-size:54px; }
  .hero-lead { font-size:16px; }
  .hero-actions,.location-actions { display:grid; grid-template-columns:1fr; }
  .button { width:100%; }
  .hero-details { gap:26px; margin-top:40px; } .hero-details strong { font-size:12px; }
  .hero-visual { min-height:480px; } .visual-card { width:68%; } .visual-number { font-size:120px; }
  .tag-one { left:4%; } .tag-two { right:3%; }
  .trust-strip { grid-template-columns:1fr; padding:0 22px; }
  .trust-strip p,.trust-strip p:first-child { min-height:68px; padding:0; border-right:0; border-bottom:1px solid rgba(255,255,255,.12); }
  .products,.location { padding-top:84px; padding-bottom:84px; }
  .section-heading h2,.location h2 { font-size:44px; }
  .product-card { min-height:0; padding:28px 22px; grid-template-columns:54px 1fr; }
  .card-title h3 { font-size:45px; }
  .product-card ul { grid-column:1/-1; grid-template-columns:1fr; margin-top:38px; }
  .product-card>a { grid-column:1/-1; }
  .about-copy { padding:84px 24px; } .about-copy h2 { font-size:50px; }
  .about-list { grid-template-columns:1fr; } .about-list div { flex-direction:row; align-items:center; }
  .location-panel { padding:38px 24px; } .contact-row { grid-template-columns:1fr; gap:9px; }
  .map-card { min-height:450px; } .map-card>p { left:24px; bottom:30px; }
  .cta { padding-top:68px; padding-bottom:68px; }
  .cta h2 { font-size:42px; }
  footer { grid-template-columns:1fr; } .footer-contact { grid-column:auto; } .copyright { grid-column:auto; margin-bottom:0; } .developer-credit { grid-column:auto; margin-top:0; padding-top:16px; flex-wrap:wrap; }
}

@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }