:root{--navy:#0b1b2e;--accent:#ff6a2b;--accent-d:#e55418;--ink:#1c2733}
body{font-family:Inter,sans-serif;color:var(--ink)}
h1,h2,h3,h4,h5,.brand{font-family:Sora,sans-serif}
.topbar{background:var(--navy);color:#fff;font-size:.85rem}
.brand{font-weight:800;font-size:1.5rem;display:flex;align-items:center;gap:.5rem}
.brand b{color:var(--accent)}
.logo-mark{width:22px;height:22px;border-radius:6px 2px 6px 2px;background:var(--accent);display:inline-block;transform:skewX(-10deg)}
.nav-link{font-weight:500}.nav-link:hover{color:var(--accent)}
.badge-accent{background:var(--accent)}
.btn-accent{background:var(--accent);color:#fff;border:0;font-weight:600}
.btn-accent:hover{background:var(--accent-d);color:#fff}
.hero{background:radial-gradient(circle at 80% 20%,#17406b,transparent 55%),var(--navy);color:#fff;padding:5rem 0}
.pill{background:rgba(255,106,43,.18);color:#ffb08f;padding:.35rem .8rem;border-radius:99px;font-size:.8rem;font-weight:600}
.finder{color:var(--ink);border-radius:20px}
.chip{border:1px solid #d5dbe2;border-radius:99px;background:#fff}
.chip.active,.chip:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.bg-navy{background:var(--navy)}
.pcard{border:1px solid #e8ecf0;border-radius:18px;overflow:hidden;transition:.25s;height:100%;background:#fff}
.pcard:hover{transform:translateY(-6px);box-shadow:0 16px 36px rgba(11,27,46,.12)}
.pimg{background:linear-gradient(145deg,#eef2f6,#dde4ec);padding:1.5rem;position:relative}
.pimg svg{width:100%;height:150px}
.tag{position:absolute;top:12px;left:12px;background:var(--accent);color:#fff;font-size:.7rem;font-weight:700;padding:.25rem .6rem;border-radius:99px}
.price{font-family:Sora;font-weight:700;font-size:1.15rem}
.price s{color:#9aa5b1;font-weight:400;font-size:.9rem;margin-left:.4rem}
.swatch{width:16px;height:16px;border-radius:50%;display:inline-block;border:2px solid #fff;box-shadow:0 0 0 1px #cbd3dc}
.step{background:rgba(255,255,255,.06);border-radius:18px;padding:2rem;height:100%}
.step span{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--accent);font-weight:700;margin-bottom:1rem}
.stars{color:#f5b301;letter-spacing:2px}
.review{border-radius:18px;border:1px solid #e8ecf0}
.cart-row{display:flex;gap:.75rem;align-items:center;padding:.75rem 0;border-bottom:1px solid #eef1f4}
.cart-row .thumb{width:64px;height:48px;background:#e6ebf1;border-radius:8px;padding:4px}
.qty button{width:26px;height:26px;border:1px solid #d5dbe2;background:#fff;border-radius:6px;line-height:1}

/* hero slider */
.hero-wrap{background:var(--navy)}
.carousel-item img{height:640px;object-fit:cover}
.overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,27,46,.92),rgba(11,27,46,.35))}
.caption{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;color:#fff;max-width:1320px;left:0;right:0;margin:auto}
.caption>*{max-width:560px}.caption .pill{max-width:none}
.carousel-item.active .anim{animation:up .8s both}
.a1{animation-delay:.1s!important}.a2{animation-delay:.3s!important}.a3{animation-delay:.5s!important}.a4{animation-delay:.7s!important}
@keyframes up{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
.carousel-item.active img{animation:kb 9s ease-out both}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.08)}}
.pulse{animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,106,43,.6)}70%{box-shadow:0 0 0 16px rgba(255,106,43,0)}100%{box-shadow:0 0 0 0 rgba(255,106,43,0)}}
.finder-wrap{position:absolute;inset:0;display:flex;align-items:center;pointer-events:none;z-index:5}
.finder-wrap .finder{pointer-events:auto}
.float-in{animation:up 1s .5s both,float 5s 1.5s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-8px)}}
.carousel-indicators{z-index:6;margin-bottom:1.5rem}
.carousel-control-prev,.carousel-control-next{z-index:6;width:6%}
@media(max-width:991px){.finder-wrap{position:static;display:block;padding:1rem 0;pointer-events:auto}.carousel-item img{height:480px}}
/* scroll reveal */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .7s,transform .7s}
.reveal.show{opacity:1;transform:none}
.text-accent{color:var(--accent)}
/* vehicle tiles */
.tile{position:relative;display:block;border-radius:18px;overflow:hidden;aspect-ratio:4/5;color:#fff;text-decoration:none}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.tile:hover img{transform:scale(1.12)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(11,27,46,.85))}
.tile span{position:absolute;left:16px;bottom:14px;z-index:2;font-family:Sora;font-weight:700}
.tile:hover span i{margin-left:6px}.tile span i{transition:.3s}
.btn-accent,.pcard{transition:.25s}
.btn-accent:hover{transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* before/after section */
.feature-panel{background:#fff;border-radius:24px;padding:2.5rem;border:1px solid #e8ecf0}
.eyebrow{text-transform:uppercase;letter-spacing:.15em;font-size:.78rem;font-weight:600;color:var(--accent);margin-bottom:.75rem}
.stitch{width:34px;height:34px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px #cbd3dc;transition:.2s}
.stitch:hover{transform:scale(1.15)}.stitch.active{box-shadow:0 0 0 2px var(--navy)}
.cmp{position:relative;border-radius:24px;overflow:hidden;min-height:420px;height:100%;background:#111;user-select:none;touch-action:pan-y}
.cmp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.75)}
.after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--pos))}
.carpet,.quilt{position:absolute;left:10%;right:10%;top:42%;bottom:0;clip-path:polygon(8% 0,92% 0,100% 100%,0 100%)}
.carpet{background:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.5px) 0 0/5px 5px,#1c2024}
.quilt{background:repeating-linear-gradient(45deg,transparent 0 26px,var(--stitch) 26px 28px),repeating-linear-gradient(-45deg,transparent 0 26px,var(--stitch) 26px 28px),#14171b;box-shadow:inset 0 0 0 6px #0c0e11;transition:background .3s}
.lbl{position:absolute;bottom:16px;background:rgba(11,27,46,.75);color:#fff;padding:.4rem .9rem;border-radius:99px;font-size:.85rem;backdrop-filter:blur(4px)}
.l-left{left:16px}.l-right{right:16px}
.handle{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;background:#fff;transform:translateX(-50%);pointer-events:none}
.handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:#fff;display:grid;grid-auto-flow:column;place-items:center;font-size:.8rem;box-shadow:0 4px 16px rgba(0,0,0,.3)}
.cmp input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.hot{position:absolute;display:flex;align-items:center;gap:.5rem;transform:translate(-8px,-8px);z-index:2}
.hot i{width:16px;height:16px;border-radius:50%;background:var(--stitch);border:3px solid #fff;animation:pulse 2s infinite;flex:none}
.hot b{background:#fff;color:var(--ink);font-size:.72rem;padding:.25rem .55rem;border-radius:6px;white-space:nowrap}
@media(max-width:575px){.hot b{display:none}.feature-panel{padding:1.5rem}}