:root{
  --bg:#090909;--surface:#111214;--surface-2:#17181b;--text:#f7f7f5;--muted:#a8a8ad;
  --orange:#ff3b0a;--orange-2:#ff6a00;--shopee:#ee4d2d;--pink:#f169b6;--line:#2a2b2f;--white:#fff;
  --max:1180px;--radius:24px;--shadow:0 24px 60px rgba(0,0,0,.28)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.55}
a{color:inherit;text-decoration:none}
button{font:inherit}
.section{width:min(var(--max),calc(100% - 32px));margin:auto;padding:72px 0}
.eyebrow{margin:0 0 12px;color:#ff7a45;font-size:.76rem;font-weight:900;letter-spacing:.14em}
.section-head{max-width:760px;margin-bottom:30px}
.section-head h2,.closing h2,.bridge-card h2{margin:0;font-size:clamp(2rem,7vw,4.6rem);line-height:.98;letter-spacing:-.055em}
.section-head p:last-child{color:var(--muted)}
.topbar{min-height:34px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px max(14px,calc((100vw - var(--max))/2));font-size:.68rem;font-weight:850;letter-spacing:.06em;background:#ee4d2d;color:#fff}
.topbar a{text-decoration:underline;text-underline-offset:3px}
.site-header{height:68px;position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:0 max(16px,calc((100vw - var(--max))/2));background:rgba(9,9,9,.88);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.07)}
.brand{display:flex;align-items:center}.brand img{width:168px;height:auto}
.menu-toggle{width:44px;height:44px;background:transparent;border:0;display:grid;place-content:center;gap:6px}
.menu-toggle span{display:block;width:24px;height:2px;background:#fff}
.site-nav{display:none;position:absolute;left:16px;right:16px;top:76px;padding:12px;background:#151517;border:1px solid #29292e;border-radius:18px;box-shadow:var(--shadow)}
.site-nav.open{display:grid}.site-nav a{padding:13px 14px;border-radius:12px}.site-nav a:hover{background:#202024}
.site-nav .nav-buy{background:var(--shopee);color:#fff}
.hero{min-height:calc(100svh - 102px);padding-top:46px;position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;inset:0 -30vw auto;height:520px;background:radial-gradient(circle at 75% 20%,rgba(241,105,182,.14),transparent 35%),radial-gradient(circle at 20% 45%,rgba(255,59,10,.18),transparent 35%);pointer-events:none}
.speed-lines{position:absolute;left:-15vw;right:-15vw;top:43%;height:160px;transform:skewY(-2deg);background:repeating-linear-gradient(to bottom,transparent 0 22px,rgba(255,59,10,.1) 23px 24px,transparent 25px 31px,rgba(255,92,10,.78) 32px 35px);opacity:.75}
.hero-copy{position:relative;z-index:2}
.hero h1{font-size:clamp(3.2rem,15vw,8.8rem);line-height:.82;letter-spacing:-.07em;margin:0;max-width:1000px;font-style:italic;font-weight:1000;text-transform:uppercase}
.hero h1 span{color:var(--orange)}
.lead{max-width:660px;color:#c9c9cd;font-size:1.04rem;margin:24px 0}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:0 20px;border-radius:999px;font-weight:900}
.btn-shopee{background:var(--shopee);color:#fff;box-shadow:0 12px 30px rgba(238,77,45,.2)}
.btn-shopee:hover{background:#f05a3b}.btn-shopee b{font-size:1.2em}
.btn-ghost{border:1px solid #3a3b40;background:rgba(255,255,255,.03)}
.bag-icon{display:grid;place-items:center;width:25px;height:25px;border:2px solid #fff;border-radius:6px;font-size:.73rem}
.shop-note{display:grid;gap:2px;margin-top:17px;font-size:.78rem;color:#90939a}.shop-note strong{color:#d9dade}
.hero-visual{position:relative;margin-top:38px}
.car-stage{height:290px;position:relative;border-radius:28px;overflow:hidden;background:linear-gradient(180deg,#101012 0,#070708 62%,#1b120c 100%);border:1px solid #26262b}
.trail{position:absolute;height:4px;background:linear-gradient(90deg,transparent,var(--orange),#ff9a47,transparent);left:-10%;right:20%;box-shadow:0 0 18px rgba(255,70,10,.7)}
.trail-a{top:74px;transform:rotate(3deg)}.trail-b{top:118px;transform:rotate(-1deg);opacity:.7}
.vf3-car{position:absolute;left:50%;bottom:27px;width:min(86%,480px);height:152px;transform:translateX(-50%)}
.vf3-car .body{position:absolute;left:4%;right:0;bottom:25px;height:82px;border-radius:20px 32px 20px 18px;background:linear-gradient(120deg,#dba6c7,#f08ac6 55%,#bc658e);box-shadow:0 10px 40px rgba(241,105,182,.24)}
.vf3-car .roof{position:absolute;left:26%;right:14%;top:3px;height:74px;border-radius:24px 28px 10px 8px;background:#f1b3d3;clip-path:polygon(8% 50%,24% 8%,85% 0,100% 48%,100% 100%,0 100%)}
.vf3-car .glass{position:absolute;left:31%;right:20%;top:18px;height:50px;background:#090a0c;border-radius:16px 22px 5px 5px;clip-path:polygon(10% 17%,85% 0,100% 100%,0 100%)}
.vf3-car .bumper{position:absolute;right:0;bottom:37px;width:18px;height:42px;background:#1a1a1c;border-radius:5px}
.wheel{position:absolute;bottom:0;width:72px;height:72px;border-radius:50%;background:radial-gradient(circle,#222 0 24%,#0a0a0a 25% 60%,#39393c 61% 66%,#111 67%);border:2px solid #26262a}
.wheel-a{left:15%}.wheel-b{right:10%}
.store-badge{position:absolute;right:14px;top:14px;display:grid;padding:12px 14px;border-radius:16px;background:rgba(238,77,45,.94);box-shadow:0 12px 30px rgba(0,0,0,.24);line-height:1.05}
.store-badge small{font-size:.55rem;letter-spacing:.12em}.store-badge strong{font-size:1rem}.store-badge span{font-size:.63rem;margin-top:4px}
.proof-strip{position:relative;display:grid;grid-template-columns:1fr;gap:10px;margin-top:18px}
.proof-strip div{display:flex;align-items:center;gap:14px;padding:16px;border:1px solid #27282c;background:#111214;border-radius:18px}
.proof-strip strong{font-size:1.05rem;color:#ff7040}.proof-strip span{font-size:.87rem;color:#b7b8bd}
.bridge-section{padding-top:30px}
.bridge-card{display:grid;gap:22px;padding:24px;border-radius:28px;background:linear-gradient(140deg,#f5f3ef,#fff);color:#111}
.bridge-card p{color:#5d6066}.bridge-card .eyebrow{color:#d64425}
.shop-link-card{display:grid;grid-template-columns:1fr auto;gap:3px 14px;align-content:center;padding:20px;border-radius:20px;background:var(--shopee);color:#fff;min-height:118px}
.shop-link-card span{grid-column:1;font-size:.72rem;font-weight:900;letter-spacing:.12em}.shop-link-card strong{grid-column:1;font-size:1.15rem}.shop-link-card b{grid-column:2;grid-row:1/3;align-self:center;font-size:2rem}
.product-grid,.review-grid{display:grid;gap:14px}
.product-card,.review-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.product-kicker{font-weight:900;color:#ff6b37;font-size:.78rem;letter-spacing:.12em}
.product-card h3{margin:12px 0 8px;font-size:1.2rem}.product-card p,.review-card footer{margin:0;color:var(--muted)}
.product-card{display:grid;grid-template-columns:110px 1fr;gap:18px;align-items:center}
.product-visual{width:110px;height:110px;border-radius:22px;background:#0b0b0c;display:grid;place-items:center;border:1px solid #2b2b2e;position:relative;overflow:hidden}
.damper span{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;border:6px double #333;background:#090909;color:white;font-weight:1000;font-style:italic;font-size:1.8rem;box-shadow:0 0 0 2px #111}
.rubber i{display:block;width:78px;height:48px;border:12px solid #1f2022;border-radius:7px;transform:skewX(-14deg);box-shadow:inset 0 0 0 3px #050505}
.foams{display:flex;flex-direction:column;gap:5px;padding:17px}.foams i{display:block;width:76px;height:13px;border-radius:5px;background:#2d2d31}.foams i:first-child{width:34px;height:30px}
.inline-buy{display:grid;gap:16px;margin-top:18px;padding:20px;border-radius:22px;background:#151517;border:1px solid #303137}
.inline-buy div{display:grid;gap:4px}.inline-buy span{color:var(--muted);font-size:.88rem}
.notice{margin-top:12px;padding:18px;border-radius:18px;background:#17110e;border:1px solid #4a2718;color:#d7c2b9}.notice strong{color:#ff855b}
.reviews{background:linear-gradient(180deg,transparent,rgba(241,105,182,.055),transparent)}
.stars{color:#ffb21a;letter-spacing:.08em}.review-card p{font-size:1.08rem;line-height:1.5}.review-card footer{margin-top:18px;font-size:.82rem}
.reviews-cta{display:grid;gap:12px;justify-items:start;margin-top:18px;padding:20px;border-left:3px solid var(--shopee);background:#111214;border-radius:0 18px 18px 0}.reviews-cta p{margin:0;color:#c4c5ca}
.faq-list{display:grid;gap:10px}.faq details{border:1px solid #292a2e;background:#111214;border-radius:18px;padding:18px}.faq summary{cursor:pointer;font-weight:800}.faq details p{color:#aaaeb4;margin:12px 0 0}
.closing-card{text-align:left;padding:30px;border-radius:30px;background:#f5f4f0;color:#111;position:relative;overflow:hidden}
.closing-card:after{content:"";position:absolute;right:-10%;bottom:-40%;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,#ee4d2d 0,#f169b6 45%,transparent 66%);opacity:.28}
.closing-card p{max-width:650px;color:#55575d}.closing-card .eyebrow{color:#c73810}.closing-card .btn{position:relative;z-index:2}.btn-large{min-height:58px;padding-inline:24px}
.site-footer{padding:44px 16px 110px;border-top:1px solid #202125;text-align:center;color:#7f8188}.site-footer img{filter:invert(1);opacity:.95}.site-footer p{margin:12px 0 4px}.site-footer small{display:block;margin-top:12px}.footer-shop{display:inline-block;color:#ff7358;font-weight:800;margin-top:6px}
.mobile-cta{position:fixed;z-index:60;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));height:60px;padding:6px;display:grid;grid-template-columns:.8fr 1.7fr;gap:6px;border:1px solid #37383d;border-radius:20px;background:rgba(18,18,20,.94);backdrop-filter:blur(18px);box-shadow:0 16px 48px rgba(0,0,0,.42)}
.mobile-cta a{display:grid;place-items:center;border-radius:15px;font-weight:900}.mobile-cta .primary{background:var(--shopee);color:white}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease}.reveal.visible{opacity:1;transform:none}
@media(min-width:720px){
  .section{padding:92px 0}.menu-toggle{display:none}.site-nav{display:flex;position:static;padding:0;background:transparent;border:0;box-shadow:none;gap:4px}.site-nav a{padding:10px 13px}
  .hero{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center}.hero-copy{padding:20px 0}.hero-visual{margin-top:0}.car-stage{height:390px}.vf3-car{width:min(94%,620px);height:200px}.vf3-car .body{height:105px}.vf3-car .roof{height:96px}.vf3-car .glass{height:64px}.wheel{width:92px;height:92px}.proof-strip{grid-column:1/-1;grid-template-columns:repeat(3,1fr)}
  .bridge-card{grid-template-columns:1.15fr .85fr;align-items:center;padding:42px}.product-grid{grid-template-columns:repeat(3,1fr)}.product-card{grid-template-columns:1fr;align-content:start}.product-visual{width:100%;height:190px}
  .inline-buy{grid-template-columns:1fr auto;align-items:center}.review-grid{grid-template-columns:1fr 1fr}.reviews-cta{grid-template-columns:1fr auto;align-items:center;justify-items:stretch}.mobile-cta{display:none}.site-footer{padding-bottom:50px}
}
@media(min-width:1024px){.hero h1{font-size:6.6rem}.car-stage{height:460px}.product-visual{height:230px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}}

/* Real VF3 hero — enthusiast-first */
.real-car-stage{min-height:340px}
.real-vf3{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% center;display:block;transform:scale(1.015)}
.hero-image-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.03) 0%,rgba(0,0,0,.06) 52%,rgba(0,0,0,.62) 100%),linear-gradient(90deg,rgba(0,0,0,.16),transparent 45%)}
.hero-stamp{position:absolute;left:16px;bottom:16px;display:grid;line-height:.95;text-transform:uppercase;font-style:italic;text-shadow:0 3px 14px rgba(0,0,0,.6)}
.hero-stamp small{font-size:.62rem;letter-spacing:.16em;color:#ff9a73;font-weight:900;margin-bottom:5px}
.hero-stamp strong{font-size:1.42rem;font-weight:1000;letter-spacing:-.04em}
.hero-stamp span{font-size:.92rem;font-weight:900;color:#fff}
.hero h1{max-width:900px}
.hero h1 span{background:linear-gradient(90deg,#ff4d12,#ff8a45 55%,#f169b6);-webkit-background-clip:text;background-clip:text;color:transparent}
@media(max-width:719px){
  .hero{padding-top:34px}
  .hero h1{font-size:clamp(3rem,14.6vw,5rem)}
  .real-car-stage{height:360px}
  .real-vf3{object-position:61% center}
  .hero-actions .btn-shopee{flex:1 1 100%}
}
@media(min-width:720px){
  .real-car-stage{height:520px}
  .real-vf3{object-position:56% center}
  .hero-stamp{left:22px;bottom:22px}
  .hero-stamp strong{font-size:1.85rem}
}

/* VF3 identity + featured combo hierarchy */
.vf3-chip{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;padding:7px 10px 7px 7px;border:1px solid #35363b;border-radius:12px;background:#111214;font-size:.68rem;font-weight:900;letter-spacing:.1em;color:#bfc1c7}
.vf3-chip span{display:grid;place-items:center;min-width:40px;height:28px;padding:0 8px;border-radius:8px;background:#f169b6;color:#090909;font-size:.82rem;letter-spacing:-.03em;font-style:italic}
.hero-product{display:block;max-width:620px;margin:24px 0 16px;padding:20px;border-radius:24px;border:1px solid rgba(255,255,255,.16);background:linear-gradient(145deg,#f5f4ef 0%,#ece9e4 58%,#f3b4d7 140%);color:#0b0b0c;box-shadow:0 22px 60px rgba(0,0,0,.28);transform:rotate(-.35deg);transition:transform .22s ease,box-shadow .22s ease}
.hero-product:hover{transform:rotate(0) translateY(-3px);box-shadow:0 30px 70px rgba(0,0,0,.34)}
.hero-product-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.hero-product-tag{display:inline-flex;padding:6px 9px;border-radius:999px;background:#0a0a0b;color:#fff;font-size:.63rem;font-weight:950;letter-spacing:.11em}
.hero-product-arrow{font-size:1.5rem;font-weight:900}
.hero-product strong{display:block;font-size:clamp(2.45rem,9vw,5rem);line-height:.82;letter-spacing:-.07em;font-weight:1000;font-style:italic;text-transform:uppercase}
.hero-product strong em{font-style:inherit;color:#ee4d2d}
.hero-product small{display:block;margin-top:14px;color:#55585f;font-size:.8rem;font-weight:750}
.vf3-corner-mark{position:absolute;right:14px;bottom:14px;z-index:3;font-size:clamp(3.6rem,12vw,7rem);font-weight:1000;font-style:italic;letter-spacing:-.12em;line-height:.75;color:rgba(255,255,255,.13);text-shadow:none}
.featured-bridge{background:linear-gradient(135deg,#f8f7f3 0%,#fff 58%,#f6d2e8 160%);border:1px solid rgba(255,255,255,.25)}
.featured-product-link{background:linear-gradient(135deg,#111214,#26272b);position:relative;overflow:hidden}
.featured-product-link:before{content:"VF3";position:absolute;right:-8px;bottom:-15px;font-size:5.5rem;font-weight:1000;font-style:italic;letter-spacing:-.1em;color:rgba(255,255,255,.06)}
.featured-product-link span,.featured-product-link strong,.featured-product-link b{position:relative;z-index:1}
.combo-section{border-top:1px solid rgba(255,255,255,.06)}
.combo-section .section-head{position:relative}
.combo-section .section-head:after{content:"VF3";position:absolute;right:0;top:-22px;font-size:clamp(4rem,15vw,9rem);font-weight:1000;font-style:italic;letter-spacing:-.12em;color:rgba(241,105,182,.06);pointer-events:none}
.product-card{border-radius:20px}
.product-visual{border-radius:18px}
@media(max-width:719px){
  .hero-product{margin-top:20px;padding:17px;border-radius:20px}
  .hero-product strong{font-size:clamp(2.5rem,14vw,4rem)}
  .hero .lead{margin-bottom:0}
  .hero-actions{margin-top:12px}
  .proof-strip div:first-child{border-color:rgba(241,105,182,.3)}
  .featured-bridge{padding:22px}
  .shop-link-card{min-height:104px}
}
@media(min-width:720px){
  .hero{grid-template-columns:.96fr 1.04fr}
  .hero-product{padding:24px}
}

/* Engineering noise-map layer */
.car-hotspot{position:absolute;z-index:4;display:flex;align-items:center;gap:7px;color:#fff;font-size:.58rem;font-weight:950;letter-spacing:.14em;text-shadow:0 2px 8px rgba(0,0,0,.75);pointer-events:none}
.car-hotspot i{position:relative;width:13px;height:13px;border-radius:50%;background:#ff5a1f;border:2px solid #fff;box-shadow:0 0 0 5px rgba(255,90,31,.16),0 0 22px rgba(255,90,31,.75)}
.car-hotspot i:after{content:"";position:absolute;inset:-9px;border:1px solid rgba(255,255,255,.65);border-radius:50%;animation:hotspotPulse 2s ease-out infinite}
.hotspot-window{left:61%;top:43%}
.hotspot-door{left:68%;top:60%}
@keyframes hotspotPulse{0%{transform:scale(.5);opacity:0}25%{opacity:1}100%{transform:scale(1.7);opacity:0}}

.diagnostic-section{padding-top:28px}
.diagnostic-shell{position:relative;overflow:hidden;padding:24px;border:1px solid #2b2c31;border-radius:28px;background:
linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0)),
repeating-linear-gradient(90deg,transparent 0 47px,rgba(255,255,255,.025) 48px 49px),
repeating-linear-gradient(0deg,transparent 0 47px,rgba(255,255,255,.025) 48px 49px),
#0d0e10}
.diagnostic-shell:before{content:"VF3";position:absolute;right:-18px;top:-30px;font-size:9rem;font-weight:1000;font-style:italic;letter-spacing:-.12em;color:rgba(241,105,182,.045);pointer-events:none}
.diagnostic-head{position:relative;z-index:1;display:grid;gap:18px;margin-bottom:22px}
.diagnostic-head h2{margin:0;font-size:clamp(2rem,8vw,4.4rem);line-height:.95;letter-spacing:-.055em}
.diagnostic-head h2 span{color:#f169b6}
.diagnostic-code{justify-self:start;padding:7px 10px;border:1px solid #3b3c42;border-radius:8px;color:#9b9da5;font:800 .64rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em}
.diagnostic-grid{position:relative;z-index:1;display:grid;gap:12px}
.diagnostic-card{display:grid;grid-template-columns:auto 70px 1fr;gap:14px;align-items:center;padding:18px;border:1px solid #2c2d32;border-radius:18px;background:rgba(17,18,20,.9)}
.diag-index{align-self:start;font:900 .68rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#ff7040}
.diag-icon{width:70px;height:70px;position:relative;border:1px solid #36373c;border-radius:14px;background:#090a0b}
.diag-window i{position:absolute;left:12px;right:12px;top:15px;bottom:16px;border:4px solid #d9dbe0;border-radius:7px 7px 3px 3px;transform:skewX(-8deg)}
.diag-window i:after{content:"";position:absolute;left:7px;right:7px;bottom:-13px;height:4px;border-radius:4px;background:#ff5a1f}
.diag-door i:first-child{position:absolute;left:14px;right:13px;top:13px;bottom:12px;border:4px solid #d9dbe0;border-radius:7px}
.diag-door i:last-child{position:absolute;width:18px;height:4px;right:16px;top:34px;border-radius:5px;background:#ff5a1f}
.diag-label{margin:0 0 5px;color:#ff8055;font-size:.64rem;font-weight:900;letter-spacing:.12em}
.diagnostic-card h3{margin:0 0 5px;font-size:1rem}
.diagnostic-card p:last-child{margin:0;color:#92959d;font-size:.82rem}
.diagnostic-result{display:flex;min-height:170px;flex-direction:column;justify-content:space-between;padding:20px;border-radius:20px;background:linear-gradient(135deg,#f5f4ef,#fff 56%,#f5cae3);color:#0b0b0c;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.diag-result-kicker{font-size:.64rem;font-weight:950;letter-spacing:.13em;color:#c63b1d}
.diagnostic-result strong{font-size:clamp(2rem,9vw,3.5rem);font-style:italic;line-height:.85;letter-spacing:-.065em}
.diag-result-link{font-size:.78rem;font-weight:900}
.diagnostic-flow{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px;padding:12px 14px;border-radius:14px;border:1px dashed #3b3c42;color:#a1a4ac;font:800 .62rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em}
.diagnostic-flow b{color:#ff6534}
@media(max-width:719px){
  .car-hotspot span{display:none}
  .hotspot-window{left:58%;top:42%}
  .hotspot-door{left:67%;top:58%}
  .diagnostic-card{grid-template-columns:32px 60px 1fr;gap:10px;padding:14px}
  .diag-icon{width:60px;height:60px}
  .diagnostic-result{min-height:155px}
}
@media(min-width:720px){
  .diagnostic-shell{padding:34px}
  .diagnostic-head{grid-template-columns:1fr auto;align-items:start}
  .diagnostic-code{justify-self:end}
  .diagnostic-grid{grid-template-columns:1fr 1fr .92fr}
  .diagnostic-card{grid-template-columns:auto 74px 1fr}
}

/* Preserve the original VF3 Auto Custom logo identity */
.brand img{width:196px;height:auto;filter:invert(1);display:block}
.hero-brand-lockup{display:block;width:min(360px,82vw);height:auto;filter:invert(1);margin:0 0 18px}
.site-footer img{width:min(300px,78vw);height:auto;filter:invert(1);opacity:1}
.hero-copy:before{content:"";position:absolute;left:0;top:-18px;width:120px;height:3px;background:linear-gradient(90deg,#fff,transparent);transform:skewX(-28deg);opacity:.35}
.hero-product,.featured-product-link,.diagnostic-shell{clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px))}
@media(max-width:719px){
  .brand img{width:168px}
  .hero-brand-lockup{width:min(330px,88vw);margin-bottom:15px}
}

/* MOBILE-FIRST PASS 2026-09-18
   Phone is the primary layout. Desktop only enhances the same hierarchy. */
.mobile-hero-product{display:none}

@media(max-width:719px){
  html{scroll-padding-top:62px}
  body{padding-bottom:76px;overflow-x:hidden}

  /* Remove the desktop promo strip on phones: conversion is already handled by the fixed CTA. */
  .topbar{display:none}

  .site-header{
    height:58px;
    padding:0 14px;
    background:rgba(8,8,9,.96);
  }
  .brand img{width:148px}
  .menu-toggle{width:40px;height:40px}
  .menu-toggle span{width:22px}
  .site-nav{top:64px;left:10px;right:10px}

  /* Make the real VF3 the first thing seen after the header. */
  .hero{
    display:flex;
    flex-direction:column;
    min-height:auto;
    width:calc(100% - 24px);
    padding:12px 0 38px;
  }
  .hero:before{height:360px;opacity:.55}
  .speed-lines{display:none}
  .hero-visual{order:1;margin:0}
  .hero-copy{order:2;padding:0;margin-top:18px}
  .proof-strip{order:3;margin-top:18px}

  /* Header already contains the original logo: do not repeat a giant logo in the hero on phone. */
  .hero-brand-lockup{display:none}

  .real-car-stage{
    height:292px;
    min-height:292px;
    border-radius:20px;
  }
  .real-vf3{
    object-position:59% center;
    transform:scale(1.01);
  }
  .hero-image-shade{
    background:
      linear-gradient(180deg,rgba(0,0,0,.02) 0%,rgba(0,0,0,.04) 46%,rgba(0,0,0,.72) 100%),
      linear-gradient(90deg,rgba(0,0,0,.12),transparent 48%);
  }
  .hero-stamp{left:13px;bottom:13px}
  .hero-stamp small{font-size:.54rem}
  .hero-stamp strong{font-size:1.1rem}
  .hero-stamp span{font-size:.7rem}
  .vf3-corner-mark{right:12px;bottom:12px;font-size:3.4rem}

  .car-hotspot i{width:11px;height:11px}
  .hotspot-window{left:57%;top:41%}
  .hotspot-door{left:66%;top:57%}

  /* Product badge on the car: fast path from VF3 visual to the hero product. */
  .mobile-hero-product{
    position:absolute;
    z-index:6;
    left:12px;
    top:12px;
    display:grid;
    grid-template-columns:1fr auto;
    gap:1px 10px;
    min-width:154px;
    padding:10px 12px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:14px;
    background:rgba(8,8,9,.82);
    backdrop-filter:blur(10px);
    box-shadow:0 10px 24px rgba(0,0,0,.22);
  }
  .mobile-hero-product span{
    grid-column:1;
    color:#ff8057;
    font-size:.55rem;
    font-weight:950;
    letter-spacing:.12em;
  }
  .mobile-hero-product strong{
    grid-column:1;
    font-size:.84rem;
    line-height:1;
    font-style:italic;
    letter-spacing:-.025em;
  }
  .mobile-hero-product b{
    grid-column:2;
    grid-row:1/3;
    align-self:center;
    font-size:1.15rem;
  }

  .vf3-chip{
    margin:0 0 10px;
    padding:5px 8px 5px 5px;
    border-radius:10px;
    font-size:.58rem;
  }
  .vf3-chip span{min-width:34px;height:24px;font-size:.7rem}

  .eyebrow{
    margin-bottom:9px;
    font-size:.63rem;
    line-height:1.35;
    letter-spacing:.11em;
  }

  .hero h1{
    max-width:100%;
    margin:0;
    font-size:clamp(2.8rem,11.5vw,3.75rem);
    line-height:.86;
    letter-spacing:-.067em;
  }
  .hero .lead{
    margin:15px 0 0;
    max-width:34rem;
    color:#b9bbc1;
    font-size:.94rem;
    line-height:1.55;
  }

  /* Hero product remains dominant without swallowing the whole viewport. */
  .hero-product{
    margin:18px 0 12px;
    padding:15px 16px 16px;
    border-radius:18px;
    transform:none;
    clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
  }
  .hero-product-topline{margin-bottom:10px}
  .hero-product-tag{padding:5px 8px;font-size:.56rem}
  .hero-product-arrow{font-size:1.2rem}
  .hero-product strong{
    font-size:clamp(2.45rem,10.7vw,3.25rem);
    line-height:.82;
  }
  .hero-product small{
    margin-top:10px;
    font-size:.72rem;
    line-height:1.35;
  }

  .hero-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    margin-top:10px;
  }
  .hero-actions .btn{
    width:100%;
    min-height:48px;
    padding:0 15px;
    font-size:.86rem;
  }
  .hero-actions .btn-ghost{min-height:44px}
  .bag-icon{width:22px;height:22px;font-size:.65rem}

  .proof-strip{gap:8px}
  .proof-strip div{
    padding:12px 13px;
    gap:10px;
    border-radius:14px;
  }
  .proof-strip strong{min-width:50px;font-size:.86rem}
  .proof-strip span{font-size:.76rem;line-height:1.35}

  /* Tight vertical rhythm for the rest of the phone experience. */
  .section{
    width:calc(100% - 24px);
    padding:48px 0;
  }
  .bridge-section{padding-top:8px}
  .bridge-card,.featured-bridge{
    gap:18px;
    padding:18px;
    border-radius:20px;
  }
  .bridge-card h2,.section-head h2,.closing h2{
    font-size:clamp(2rem,9.5vw,3rem);
    line-height:.94;
  }
  .bridge-card p{font-size:.9rem}
  .shop-link-card{
    min-height:92px;
    padding:16px;
    border-radius:16px;
  }

  .diagnostic-section{padding-top:10px}
  .diagnostic-shell{
    padding:17px;
    border-radius:20px;
    clip-path:none;
  }
  .diagnostic-head{gap:11px;margin-bottom:15px}
  .diagnostic-head h2{
    font-size:clamp(2rem,9.2vw,2.9rem);
    line-height:.95;
  }
  .diagnostic-code{font-size:.55rem}
  .diagnostic-grid{gap:9px}
  .diagnostic-card{
    grid-template-columns:26px 52px 1fr;
    gap:9px;
    padding:12px;
    border-radius:14px;
  }
  .diag-icon{width:52px;height:52px;border-radius:11px}
  .diag-index{font-size:.58rem}
  .diag-label{font-size:.55rem}
  .diagnostic-card h3{font-size:.9rem;line-height:1.2}
  .diagnostic-card p:last-child{font-size:.73rem;line-height:1.4}
  .diagnostic-result{
    min-height:132px;
    padding:16px;
    border-radius:16px;
  }
  .diagnostic-result strong{font-size:clamp(2rem,9.5vw,2.7rem)}
  .diagnostic-flow{font-size:.53rem;gap:6px;padding:10px 11px}

  .combo-section .section-head:after{display:none}
  .section-head{margin-bottom:20px}
  .section-head p:last-child{font-size:.9rem;line-height:1.5}

  .product-grid{gap:10px}
  .product-card{
    grid-template-columns:84px 1fr;
    gap:13px;
    padding:14px;
    border-radius:16px;
  }
  .product-visual{
    width:84px;
    height:84px;
    border-radius:14px;
  }
  .product-card h3{margin:7px 0 4px;font-size:1rem}
  .product-card p{font-size:.78rem;line-height:1.4}
  .product-kicker{font-size:.58rem}
  .damper span{width:52px;height:52px;font-size:1.25rem}
  .rubber i{width:58px;height:38px;border-width:9px}
  .foams{padding:12px}
  .foams i{width:58px;height:10px}
  .foams i:first-child{width:28px;height:22px}

  .inline-buy{margin-top:12px;padding:15px;border-radius:16px}
  .inline-buy strong{font-size:.92rem}
  .inline-buy span{font-size:.75rem}
  .inline-buy .btn{min-height:46px;font-size:.82rem}

  .review-grid{gap:10px}
  .review-card{padding:16px;border-radius:16px}
  .review-card p{font-size:.94rem}
  .reviews-cta{padding:15px}
  .faq details{padding:15px;border-radius:15px}
  .faq summary{font-size:.9rem}
  .faq details p{font-size:.82rem}

  .closing-card{padding:20px;border-radius:20px}
  .closing-card p{font-size:.88rem}

  /* Smaller conversion rail, less obstruction, same persistent access. */
  .mobile-cta{
    left:8px;
    right:8px;
    bottom:calc(8px + env(safe-area-inset-bottom));
    height:54px;
    padding:5px;
    grid-template-columns:.72fr 1.6fr;
    border-radius:17px;
  }
  .mobile-cta a{
    border-radius:13px;
    font-size:.82rem;
    white-space:nowrap;
  }
}

@media(min-width:720px){
  .hero-brand-lockup{display:block}
}

/* Shopee-inspired product shelf — no prices, direct product links only */
.shop-catalog{padding-top:22px}
.catalog-shell{
  overflow:hidden;
  border-radius:22px;
  background:#f5f5f5;
  color:#222;
  box-shadow:0 24px 60px rgba(0,0,0,.18);
}
.catalog-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px 18px;
  background:#ee4d2d;
  color:#fff;
}
.catalog-brand{display:flex;align-items:center;gap:11px}
.catalog-brand>div{display:grid;gap:1px}
.catalog-brand small{font-size:.58rem;font-weight:800;letter-spacing:.1em;opacity:.88}
.catalog-brand strong{font-size:1rem;line-height:1.1}
.catalog-bag{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:2px solid #fff;
  border-radius:8px;
  font-size:.8rem;
  font-weight:1000;
}
.catalog-note{font-size:.68rem;font-weight:700;opacity:.9}
.catalog-tabs{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:12px 12px 10px;
  background:#fff;
  border-bottom:1px solid #e8e8e8;
  scrollbar-width:none;
}
.catalog-tabs::-webkit-scrollbar{display:none}
.catalog-tabs span{
  flex:0 0 auto;
  padding:7px 11px;
  border:1px solid #e3e3e3;
  border-radius:999px;
  background:#fff;
  color:#666;
  font-size:.72rem;
  font-weight:700;
}
.catalog-tabs .active{
  border-color:#ee4d2d;
  color:#ee4d2d;
  background:#fff7f5;
}
.shopee-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  padding:10px;
}
.shopee-card{
  min-width:0;
  overflow:hidden;
  border:1px solid #ececec;
  border-radius:8px;
  background:#fff;
  color:#222;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.shopee-card:hover{
  transform:translateY(-2px);
  border-color:#ee4d2d;
  box-shadow:0 6px 20px rgba(238,77,45,.14);
}
.shopee-image{
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  background:linear-gradient(135deg,#fafafa,#ececec);
}
.shopee-image img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.shopee-badge{
  position:absolute;
  left:0;
  top:10px;
  padding:5px 8px;
  border-radius:0 4px 4px 0;
  background:#ee4d2d;
  color:#fff;
  font-size:.56rem;
  font-weight:900;
  letter-spacing:.06em;
}
.shopee-card-body{padding:10px}
.shopee-card h3{
  display:-webkit-box;
  min-height:2.7em;
  margin:0 0 9px;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  font-size:.78rem;
  font-weight:600;
  line-height:1.35;
}
.shopee-meta{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:4px 8px;
  color:#777;
  font-size:.65rem;
}
.shopee-meta span:first-child{color:#ee4d2d}
.shopee-open{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:10px;
  padding-top:9px;
  border-top:1px solid #f0f0f0;
  color:#ee4d2d;
  font-size:.7rem;
  font-weight:800;
}
.shopee-open b{font-size:.9rem}
.catalog-footnote{
  margin:0;
  padding:2px 14px 15px;
  color:#888;
  font-size:.64rem;
  line-height:1.45;
}

@media(max-width:719px){
  .shop-catalog{width:calc(100% - 16px);padding-top:6px}
  .catalog-shell{border-radius:18px}
  .catalog-bar{padding:13px 14px}
  .catalog-note{display:none}
  .catalog-brand strong{font-size:.92rem}
  .catalog-bag{width:31px;height:31px}
  .catalog-tabs{padding:10px 9px 8px}
  .shopee-grid{gap:7px;padding:8px}
  .shopee-card-body{padding:9px}
  .shopee-card h3{font-size:.75rem}
  .shopee-meta{font-size:.61rem}
  .catalog-footnote{padding:2px 11px 12px;font-size:.6rem}
}

@media(min-width:720px){
  .shopee-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:14px}
  .shopee-card h3{font-size:.86rem}
  .shopee-card-body{padding:12px}
}

/* Full Shopee catalog */
.catalog-store-link{font-size:.7rem;font-weight:850;text-decoration:underline;text-underline-offset:3px}
.catalog-tabs button{
  flex:0 0 auto;
  padding:7px 11px;
  border:1px solid #e3e3e3;
  border-radius:999px;
  background:#fff;
  color:#666;
  font:700 .72rem/1.2 inherit;
  cursor:pointer;
}
.catalog-tabs button.active{
  border-color:#ee4d2d;
  color:#ee4d2d;
  background:#fff7f5;
}
.shopee-card[hidden]{display:none!important}
.shopee-category{
  display:inline-flex;
  margin:0 0 7px;
  color:#ee4d2d;
  font-size:.55rem;
  line-height:1;
  font-weight:900;
  letter-spacing:.08em;
}
.shopee-placeholder{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:linear-gradient(145deg,#121315,#24262a);
  color:#fff;
  text-align:center;
}
.shopee-placeholder span{
  font-size:1.2rem;
  font-weight:1000;
  font-style:italic;
  letter-spacing:-.04em;
}
.shopee-placeholder strong{
  color:#ee4d2d;
  font-size:1.35rem;
  letter-spacing:.2em;
  transform:skewX(-12deg);
}
.shopee-placeholder small{
  color:#b8bac1;
  font-size:.5rem;
  font-weight:900;
  letter-spacing:.12em;
}
@media(max-width:719px){
  .catalog-store-link{font-size:.64rem}
  .catalog-tabs button{padding:7px 10px;font-size:.67rem}
  .shopee-category{font-size:.5rem}
}

/* CONVERSION-FIRST FLOW
   Hero -> compact proof -> Shopee catalog. Keep visitors moving toward product links. */
.proof-strip>a{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px;
  border:1px solid rgba(238,77,45,.45);
  background:linear-gradient(135deg,rgba(238,77,45,.16),#111214);
  border-radius:18px;
}
.proof-strip>a strong{font-size:1.05rem;color:#ff7040}
.proof-strip>a span{font-size:.87rem;color:#d4d5d9}

.shop-catalog{
  padding-top:18px;
  padding-bottom:54px;
}

@media(max-width:719px){
  /* Keep first visit short: product list begins almost immediately after hero. */
  .hero{padding-bottom:14px}
  .hero .lead{font-size:.9rem;line-height:1.45}
  .hero-actions{margin-top:8px}
  .hero-actions .btn-ghost{display:none}

  /* Detail highlights become one short horizontal rail instead of another vertical block. */
  .proof-strip{
    display:flex;
    gap:8px;
    overflow-x:auto;
    margin-top:12px;
    padding-bottom:2px;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }
  .proof-strip::-webkit-scrollbar{display:none}
  .proof-strip>div,
  .proof-strip>a{
    flex:0 0 180px;
    min-height:66px;
    padding:10px 11px;
    border-radius:13px;
    scroll-snap-align:start;
    align-items:flex-start;
    flex-direction:column;
    gap:3px;
  }
  .proof-strip strong,
  .proof-strip>a strong{
    min-width:0;
    font-size:.7rem;
    line-height:1.15;
  }
  .proof-strip span,
  .proof-strip>a span{
    font-size:.68rem;
    line-height:1.3;
  }

  /* Catalog is intentionally pulled upward and made the next major surface. */
  .shop-catalog{
    width:calc(100% - 16px);
    padding-top:6px;
    padding-bottom:36px;
  }
  .catalog-shell{box-shadow:0 14px 34px rgba(0,0,0,.16)}
  .catalog-bar{position:sticky;top:58px;z-index:8}
  .catalog-tabs{position:sticky;top:112px;z-index:7}
}

/* On wider screens the same hierarchy remains: no long explainer before products. */
@media(min-width:720px){
  .shop-catalog{padding-top:28px}
}

/* BRAND MOTION SYSTEM
   Canonical visual identity derived from the signature night VF3 photo:
   black night, warm red/orange light trails, dusty rose VF3. */
:root{
  --brand-night:#070707;
  --brand-trail-red:#ff3212;
  --brand-trail-orange:#ff7818;
  --brand-vf3-rose:#c9879f;
}

/* Reuse the photo's motion language without repeating the photo everywhere. */
.site-header:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-1px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--brand-trail-red) 24%,var(--brand-trail-orange) 48%,transparent 82%);
  opacity:.42;
  pointer-events:none;
}
.hero:after{
  content:"";
  position:absolute;
  left:-8%;right:-8%;bottom:4px;
  height:3px;
  background:linear-gradient(90deg,transparent 0,var(--brand-trail-red) 18%,var(--brand-trail-orange) 52%,transparent 88%);
  box-shadow:0 0 18px rgba(255,71,20,.24);
  transform:skewX(-18deg);
  opacity:.7;
  pointer-events:none;
}
.hero h1 span{
  background:linear-gradient(90deg,var(--brand-trail-red),var(--brand-trail-orange) 55%,var(--brand-vf3-rose));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.catalog-shell{
  border-top:2px solid var(--brand-trail-red);
}
.catalog-bar{
  background:linear-gradient(100deg,#e94b2e 0%,#ee4d2d 68%,#f36b2f 100%);
}
.mobile-cta .primary,
.btn-shopee{
  background:linear-gradient(100deg,#f04428 0%,#f45131 58%,#f66a2f 100%);
}
@media(max-width:719px){
  .hero:after{bottom:0;height:2px}
  .real-car-stage{box-shadow:0 14px 34px rgba(255,63,20,.08)}
}


/* Product image integrity fix
   Never crop Shopee product artwork; keep the full poster/photo visible. */
.shopee-image{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
}
.shopee-image img{
  object-fit:contain;
  object-position:center center;
  background:#fff;
}

/* On phones, keep catalog chrome from covering the first product row while scrolling. */
@media(max-width:719px){
  .catalog-bar,
  .catalog-tabs{
    position:static;
    top:auto;
  }
  .shopee-grid{padding-top:8px}
}