:root{--ink:#111827;--muted:#4b5563;--bg:#f8fafc;--card:#fff;--line:#e5e7eb;--accent:#d62828;--accent2:#1d4ed8;--dark:#0f172a;--r:14px}
body.wrench{--accent:#1d4ed8;--accent2:#d62828}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);background:var(--bg)}
img{max-width:100%;height:auto;display:block}a{color:var(--accent)}
.wrap{max-width:1100px;margin:0 auto;padding:0 18px}
header.top{position:sticky;top:0;z-index:20;background:var(--dark);color:#fff}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:10px;padding-bottom:10px}
.brand{font-weight:800;letter-spacing:.3px;color:#fff;text-decoration:none;font-size:1.1rem}
.brand span{color:var(--accent)}body.wrench .brand span{color:#60a5fa}
.switch{display:flex;background:#1e293b;border-radius:999px;padding:3px;font-size:.85rem}
.switch a{color:#cbd5e1;text-decoration:none;padding:6px 12px;border-radius:999px;white-space:nowrap}
.switch a.on{background:var(--accent);color:#fff;font-weight:700}
.hero{background:linear-gradient(160deg,var(--dark),#1e293b);color:#fff;padding:28px 0 36px}
.hero .wrap{display:grid;gap:22px}
.eyebrow{display:inline-block;background:#fff1;border:1px solid #fff3;padding:4px 10px;border-radius:999px;font-size:.8rem;letter-spacing:.4px}
h1{font-size:2.1rem;line-height:1.12;margin:12px 0}h2{font-size:1.6rem;line-height:1.2;margin:0 0 14px}h3{margin:0 0 6px}
.hero p.lead{color:#cbd5e1;font-size:1.08rem}
.hero .shot{background:#fff;border-radius:var(--r);padding:12px}
.price{font-size:1.4rem;font-weight:800}.tbd{background:#fef3c7;color:#92400e;border:1px dashed #d97706;padding:1px 6px;border-radius:6px;font-weight:700;font-size:.85em}
.buybox{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px}
.qty{display:flex;align-items:center;background:#fff;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.qty button{border:0;background:#f1f5f9;width:40px;height:46px;font-size:1.3rem;cursor:pointer}
.qty input{width:46px;height:46px;border:0;text-align:center;font-size:1.05rem;color:var(--ink)}
.btn{display:inline-block;border:0;cursor:pointer;background:var(--accent);color:#fff;font-weight:800;padding:14px 22px;border-radius:10px;font-size:1.02rem;text-decoration:none;text-align:center}
.btn.alt{background:#fff;color:var(--ink);border:2px solid var(--line)}.btn.block{width:100%}
section{padding:40px 0}section.alt{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.grid{display:grid;gap:14px}.g2,.g3{grid-template-columns:1fr}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:0;list-style:none}.chips li{background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-weight:600}
ul.check{list-style:none;padding:0}ul.check li{padding:8px 0 8px 30px;position:relative;border-bottom:1px solid var(--line)}
ul.check li:before{content:"✔";position:absolute;left:4px;color:var(--accent);font-weight:900}
table.spec{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--r);overflow:hidden}
table.spec td,table.spec th{padding:10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.video{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:#000;cursor:pointer}
.video img{width:100%;height:100%;object-fit:cover;opacity:.85}.video .play{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:3.5rem;text-shadow:0 2px 12px #000}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.src{font-size:.78rem;color:var(--muted)}.src a{color:var(--muted)}
details{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:10px}summary{font-weight:700;cursor:pointer}
.bundle{background:linear-gradient(135deg,#d62828,#1d4ed8);color:#fff;border-radius:18px;padding:22px}
.bundle .btn{background:#fff;color:var(--dark)}
.final{background:var(--dark);color:#fff;text-align:center}
footer{background:#020617;color:#94a3b8;padding:28px 0;font-size:.9rem}footer a{color:#e2e8f0}
.modal{position:fixed;inset:0;background:#0009;display:none;align-items:flex-end;justify-content:center;z-index:50}
.modal.open{display:flex}.sheet{background:#fff;width:100%;max-width:520px;border-radius:18px 18px 0 0;padding:20px;max-height:92vh;overflow:auto}
.sheet h2{font-size:1.3rem}.line{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line)}
.payslot{border:2px dashed #94a3b8;border-radius:12px;padding:18px;text-align:center;color:var(--muted);margin:14px 0;background:#f8fafc}
.field{display:block;margin:8px 0}.field input,.field textarea{width:100%;padding:11px;border:1px solid var(--line);border-radius:8px;font:inherit}
.x{float:right;background:none;border:0;font-size:1.6rem;cursor:pointer}
.ok{text-align:center}.ok .big{font-size:3rem}
.mock-note{background:#fef3c7;color:#92400e;text-align:center;font-size:.8rem;padding:6px}
@media(min-width:760px){h1{font-size:3rem}.hero .wrap{grid-template-columns:1.1fr .9fr;align-items:center}.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.modal{align-items:center}.sheet{border-radius:18px}}
/* ===== v2 flashy layer (transform/opacity animations only) ===== */
:root{--accent:#e11d2e;--accent-2:#ff4d4d;--gold:#f5c542;--dark:#0a0a0a;--steel:#1f2937}
body.wrench{--accent:#1e6bff;--accent-2:#38bdf8;--dark:#06101f;--steel:#334155}
body{background:#f5f5f4}
header.top{background:#000}.switch a.on{background:var(--accent)}
.hero{position:relative;overflow:hidden;background:radial-gradient(1200px 500px at 70% 30%,color-mix(in srgb,var(--accent) 35%,transparent),transparent 60%),linear-gradient(160deg,var(--dark),var(--steel));padding:34px 0 48px}
.hero:before{content:"";position:absolute;inset:-20%;background:repeating-linear-gradient(115deg,#ffffff06 0 2px,transparent 2px 22px);transform:translateZ(0)}
h1.display{font-size:clamp(2.4rem,9vw,4.6rem);font-weight:900;letter-spacing:-1px;line-height:1.02}
.grad{background:linear-gradient(90deg,var(--gold),var(--accent-2),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.uline{position:relative;display:inline-block}.uline:after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:6px;border-radius:3px;background:var(--gold);transform-origin:left;transform:scaleX(0);animation:ul 1s .4s ease-out forwards}
@keyframes ul{to{transform:scaleX(1)}}
.badge{position:relative;overflow:hidden;display:inline-flex;gap:8px;align-items:center;background:linear-gradient(90deg,#b8860b,var(--gold));color:#111;font-weight:900;padding:7px 14px;border-radius:999px;font-size:.85rem;letter-spacing:.5px;text-transform:uppercase}
.badge:after{content:"";position:absolute;top:0;bottom:0;width:40%;left:0;background:linear-gradient(100deg,transparent,#fff9,transparent);transform:translateX(-150%);animation:shine 3.2s infinite}
@keyframes shine{60%,100%{transform:translateX(350%)}}
.hero .shot{background:none;padding:0;position:relative;transform:rotate(-3deg)}
.hero .shot:before{content:"";position:absolute;inset:8%;background:var(--accent);filter:blur(50px);opacity:.55;border-radius:50%}
.hero .shot img{position:relative;border-radius:18px;box-shadow:0 30px 60px #000a;border:3px solid #ffffff22;width:100%;aspect-ratio:16/10;object-fit:cover}
.hero .float{animation:float 6s ease-in-out infinite}@keyframes float{50%{transform:translateY(-10px)}}
.btn{background:linear-gradient(180deg,var(--accent-2),var(--accent));box-shadow:0 8px 24px color-mix(in srgb,var(--accent) 45%,transparent)}
.pulse{animation:pulse 2.2s infinite}@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.price-soon{display:inline-block;color:var(--gold);font-weight:800;font-size:1.25rem}
.marquee{overflow:hidden;background:#000;color:#fff;padding:12px 0;border-block:3px solid var(--gold)}
.marquee .track{display:flex;gap:34px;width:max-content;animation:mq 28s linear infinite;font-weight:900;text-transform:uppercase;letter-spacing:1px;font-size:1.05rem}
.marquee .track span:after{content:"★";color:var(--gold);margin-left:34px}
@keyframes mq{to{transform:translateX(-50%)}}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}.reveal.in{opacity:1;transform:none}
.clips{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.clip{position:relative;border-radius:14px;overflow:hidden;background:#000;aspect-ratio:16/9}
.clip video,.clip img.fr{width:100%;height:100%;object-fit:cover;display:block}
.clip figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px 8px 6px;background:linear-gradient(transparent,#000c);color:#fff;font-size:.78rem;font-weight:700}
.yt{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000}.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.photo{border-radius:14px;overflow:hidden;background:#111}.photo img{width:100%;aspect-ratio:4/3;object-fit:cover}
.photo.contain img{object-fit:contain;background:#000}
.steps{counter-reset:s;display:grid;gap:16px}
.step{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;display:grid}
.step .txt{padding:14px 16px}.step h3:before{counter-increment:s;content:counter(s);display:inline-grid;place-items:center;width:30px;height:30px;margin-right:8px;border-radius:50%;background:var(--accent);color:#fff;font-size:.95rem}
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:#000e;color:#fff;transform:translateY(110%);transition:transform .3s}
.buybar.show{transform:none}.buybar .btn{padding:11px 18px}
@media(min-width:760px){.buybar{display:none}.clips{grid-template-columns:repeat(4,1fr)}.step{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}.uline:after{transform:none}}
.clip figcaption{pointer-events:none}.clip figcaption a{pointer-events:auto}
figure{margin:0}.clip figcaption{font-size:.72rem}