:root {
  --vk: #12995a; --vk-soft: #5fd39b; --vk-line: rgba(18,153,90,0.3); --vk-wash: rgba(18,153,90,0.06);
  --ink-2: rgba(255,255,255,0.72); --ink-3: rgba(255,255,255,0.52); --hair: rgba(255,255,255,0.08);
  --ease: cubic-bezier(0.16,1,0.3,1);
}
.htd-crumbs { display:flex; align-items:center; gap:8px; font-size:13px; margin-bottom:22px; flex-wrap:wrap; }
.htd-crumbs a { color:rgba(255,255,255,0.5); text-decoration:none; }
.htd-crumbs a:hover { color:#fff; }
.htd-crumbs span { color:rgba(255,255,255,0.35); }
.htd-crumbs [aria-current] { color:var(--vk); }

.htd-hero { display:grid; grid-template-columns:1.12fr 0.88fr; gap:44px; align-items:start; }
.htd-hero > *, .htd-specwrap > * { min-width:0; }
.htd-gallery { position:sticky; top:96px; }
.htd-tabs { display:inline-flex; gap:4px; padding:4px; border-radius:999px; background:rgba(255,255,255,0.05); border:1px solid var(--hair); margin-bottom:12px; }
.htd-tab { font:600 13px/1 Inter,sans-serif; color:var(--ink-3); background:none; border:0; padding:10px 16px; border-radius:999px; cursor:pointer; transition:background .2s, color .2s; }
.htd-tab:hover { color:#fff; }
.htd-tab[aria-selected="true"] { background:var(--vk); color:#06150d; }
.htd-tab:focus-visible, .htd-thumb:focus-visible, .htd-stage:focus-visible, .htd-lb button:focus-visible { outline:2px solid var(--vk-soft); outline-offset:2px; }
.htd-stage { position:relative; display:block; width:100%; aspect-ratio:4/3; background:#fff; border-radius:20px; border:0; padding:0; overflow:hidden; cursor:zoom-in; box-shadow:0 30px 70px -30px rgba(0,0,0,0.9), 0 0 0 1px rgba(18,153,90,0.25); }
.htd-stage img { position:absolute; inset:5%; width:90%; height:90%; object-fit:contain; transition:opacity .25s var(--ease), transform .5s var(--ease); }
.htd-stage:hover img { transform:scale(1.025); }
.htd-stage.is-swapping img { opacity:0; }
.htd-count { position:absolute; right:14px; bottom:14px; font:600 12px/1 Inter,sans-serif; color:#333; background:rgba(255,255,255,0.9); border:1px solid #e3e3e3; padding:7px 11px; border-radius:999px; }
.htd-label { position:absolute; left:14px; top:14px; font:700 11px/1 Inter,sans-serif; letter-spacing:1.2px; text-transform:uppercase; color:#fff; background:#14211a; padding:7px 11px; border-radius:999px; }
.htd-thumbs { display:flex; gap:8px; margin-top:12px; overflow-x:auto; padding:2px 2px 8px; scrollbar-width:thin; scroll-snap-type:x proximity; }
.htd-thumb { flex:0 0 84px; height:66px; border-radius:10px; background:#fff; border:2px solid transparent; padding:4px; cursor:pointer; opacity:0.62; transition:opacity .2s, border-color .2s, transform .2s; scroll-snap-align:start; }
.htd-thumb img { width:100%; height:100%; object-fit:contain; display:block; }
.htd-thumb:hover { opacity:1; transform:translateY(-2px); }
.htd-thumb[aria-current="true"] { opacity:1; border-color:var(--vk); }

.htd-tag { display:inline-block; font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--vk); background:rgba(18,153,90,0.1); border:1px solid var(--vk-line); padding:5px 12px; border-radius:100px; }
.htd-tag--new { background:var(--vk); color:#06150d; border-color:var(--vk); margin-right:6px; }
.htd-h1 { font-family:Sora,sans-serif; font-size:clamp(30px,4.2vw,50px); font-weight:800; color:#fff; line-height:1.02; letter-spacing:-0.02em; margin:16px 0 10px; }
.htd-h1 small { display:block; font-size:0.44em; font-weight:600; color:var(--vk-soft); letter-spacing:0; margin-top:10px; line-height:1.3; }
.htd-lede { font-size:15.5px; color:var(--ink-2); line-height:1.72; margin:0 0 22px; }
.htd-lede strong { color:#fff; }
.htd-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:24px; }
.htd-stats div { padding:14px 14px 13px; border-radius:14px; background:var(--vk-wash); border:1px solid rgba(18,153,90,0.22); }
.htd-stats div:first-child { grid-column:span 2; background:linear-gradient(135deg, rgba(18,153,90,0.2), rgba(18,153,90,0.05)); }
.htd-stats b { display:block; font-family:Sora,sans-serif; font-size:22px; font-weight:800; color:var(--vk-soft); line-height:1.05; }
.htd-stats div:first-child b { font-size:30px; }
.htd-stats span { display:block; font-size:11.5px; color:var(--ink-3); margin-top:5px; line-height:1.4; }
.htd-ctas { display:flex; gap:10px; flex-wrap:wrap; }
.htd-btn { display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:var(--vk-soft); border:1px solid rgba(18,153,90,0.45); padding:12px 20px; border-radius:11px; text-decoration:none; transition:border-color .2s, transform .2s, background .2s; }
.htd-btn:hover { border-color:var(--vk); transform:translateY(-2px); }
.htd-btn:active { transform:translateY(0); }
.htd-btn--solid { background:var(--vk); color:#06150d; border-color:var(--vk); box-shadow:0 10px 26px -8px rgba(18,153,90,0.6); }
.htd-btn--solid:hover { background:#16b06a; }
.htd-pair { margin-top:22px; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.htd-pair div { padding:12px 14px; border-left:3px solid var(--vk); background:rgba(255,255,255,0.02); border-radius:0 10px 10px 0; }
.htd-pair b { display:block; color:#fff; font-size:13px; }
.htd-pair span { display:block; font-size:12px; color:var(--ink-3); margin-top:3px; line-height:1.45; }

.htd-sec { margin-top:84px; }
.htd-eyebrow { font-size:12px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:var(--vk); margin:0 0 8px; }
.htd-h2 { font-family:Sora,sans-serif; font-size:clamp(24px,3vw,34px); font-weight:800; color:#fff; line-height:1.12; margin:0 0 22px; letter-spacing:-0.01em; }
.htd-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; counter-reset:s; }
.htd-steps li { list-style:none; position:relative; padding:24px 22px 22px; border-radius:16px; background:rgba(255,255,255,0.025); border:1px solid var(--hair); counter-increment:s; }
.htd-steps li::before { content:counter(s); display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--vk); color:#06150d; font:800 15px/1 Sora,sans-serif; margin-bottom:14px; }
.htd-steps b { display:block; color:#fff; font-size:16px; margin-bottom:6px; }
.htd-steps p { font-size:13.5px; color:var(--ink-3); line-height:1.6; margin:0; }

.htd-specwrap { display:grid; grid-template-columns:0.9fr 1.1fr; gap:36px; align-items:start; }
.htd-specimg { position:sticky; top:96px; background:#fff; border-radius:18px; padding:20px; }
.htd-specimg img { width:100%; height:auto; display:block; }
.htd-specimg figcaption { font-size:12px; color:#666; margin-top:10px; text-align:center; }
.htd-spec { width:100%; border-collapse:collapse; border:1px solid var(--hair); border-radius:12px; overflow:hidden; background:rgba(255,255,255,0.02); }
.htd-spec th, .htd-spec td { padding:11px 14px; border-bottom:1px solid rgba(255,255,255,0.06); font-size:13px; text-align:left; vertical-align:top; }
.htd-spec th { color:var(--ink-3); font-weight:500; width:40%; }
.htd-spec td { color:#fff; font-weight:600; }
.htd-spec tr:nth-child(even) { background:rgba(255,255,255,0.015); }

.htd-mosaic { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:190px; gap:12px; }
.htd-mosaic button { background:#fff; border:0; border-radius:14px; padding:10px; cursor:zoom-in; overflow:hidden; transition:transform .3s var(--ease), box-shadow .3s; }
.htd-mosaic button:hover { transform:translateY(-3px); box-shadow:0 18px 40px -18px rgba(18,153,90,0.7); }
.htd-mosaic img { width:100%; height:100%; object-fit:contain; display:block; }
.htd-mosaic .tall { grid-row:span 2; }
.htd-mosaic .wide { grid-column:span 2; }

.htd-vids { display:grid; grid-template-columns:0.6fr 1.4fr; gap:18px; align-items:start; }
.htd-vids figure { margin:0; }
.htd-vids video { width:100%; display:block; border-radius:16px; background:#000; border:1px solid var(--vk-line); }
.htd-vids figure:first-child video { max-height:600px; }
.htd-vids figcaption { font-size:12.5px; color:var(--ink-3); margin-top:8px; }

.htd-cta { margin-top:84px; padding:36px; border-radius:22px; background:radial-gradient(120% 140% at 0% 0%, rgba(18,153,90,0.24), rgba(18,153,90,0.03) 60%); border:1px solid var(--vk-line); display:grid; grid-template-columns:1.3fr auto; gap:24px; align-items:center; }
.htd-cta p { color:var(--ink-2); font-size:14.5px; line-height:1.65; margin:0; }

.htd-lb { position:fixed; inset:0; z-index:9999; background:rgba(6,10,8,0.94); display:none; align-items:center; justify-content:center; padding:56px 70px; }
.htd-lb.open { display:flex; }
.htd-lb figure { margin:0; max-width:100%; max-height:100%; display:flex; flex-direction:column; align-items:center; }
.htd-lb img { max-width:min(1400px,100%); max-height:calc(100vh - 150px); background:#fff; border-radius:14px; padding:16px; object-fit:contain; }
.htd-lb figcaption { color:var(--ink-2); font-size:13px; margin-top:12px; text-align:center; }
.htd-lb button { position:absolute; width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,0.2); background:rgba(255,255,255,0.06); color:#fff; font-size:22px; cursor:pointer; transition:background .2s; }
.htd-lb button:hover { background:rgba(18,153,90,0.4); }
.htd-lb .x { top:16px; right:16px; }
.htd-lb .prev { left:14px; top:50%; transform:translateY(-50%); }
.htd-lb .next { right:14px; top:50%; transform:translateY(-50%); }

@media (max-width:960px) {
  .htd-hero, .htd-specwrap { grid-template-columns:1fr; gap:28px; }
  .htd-gallery, .htd-specimg { position:static; }
  .htd-mosaic { grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; }
  .htd-cta { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .htd-steps, .htd-vids, .htd-pair { grid-template-columns:1fr; }
  .htd-stats { grid-template-columns:1fr 1fr; }
  .htd-thumb { flex-basis:68px; height:54px; }
  .htd-lb { padding:56px 10px; }
  .htd-lb .prev, .htd-lb .next { top:auto; bottom:14px; transform:none; }
  .htd-cta { padding:24px; }
  .htd-spec th { width:44%; }
}
@media (prefers-reduced-motion:reduce) {
  .htd-stage img, .htd-thumb, .htd-btn, .htd-mosaic button { transition:none; }
  .htd-stage:hover img { transform:none; }
}

/* ---- model pages (shared by /brands/vkin/<model>/) ---- */
.htd-stage--static { cursor:default; }
.htd-stage--static:hover img { transform:none; }
.vkm-fit { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.vkm-fit div { padding:22px; border-radius:16px; background:rgba(255,255,255,0.025); border:1px solid var(--hair); }
.vkm-fit b { display:block; color:#fff; font-size:16px; margin-bottom:6px; }
.vkm-fit p { font-size:13.5px; color:var(--ink-3); line-height:1.6; margin:0; }
.vkm-faq { display:grid; gap:10px; max-width:900px; }
.vkm-faq details { border:1px solid var(--hair); border-radius:14px; background:rgba(255,255,255,0.02); padding:0 20px; }
.vkm-faq summary { cursor:pointer; list-style:none; padding:18px 0; color:#fff; font-weight:600; font-size:15px; display:flex; justify-content:space-between; gap:16px; }
.vkm-faq summary::-webkit-details-marker { display:none; }
.vkm-faq summary::after { content:"+"; color:var(--vk-soft); font-size:20px; line-height:1; }
.vkm-faq details[open] summary::after { content:"\2212"; }
.vkm-faq summary:focus-visible { outline:2px solid var(--vk-soft); outline-offset:4px; border-radius:6px; }
.vkm-faq p { color:var(--ink-2); font-size:14px; line-height:1.7; margin:0 0 18px; }
.vkm-rel { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; }
.vkm-rel a { display:block; text-decoration:none; border:1px solid var(--hair); border-radius:14px; overflow:hidden; background:rgba(255,255,255,0.02); transition:transform .25s var(--ease), border-color .25s; }
.vkm-rel a:hover { transform:translateY(-3px); border-color:var(--vk-line); }
.vkm-rel a:focus-visible { outline:2px solid var(--vk-soft); outline-offset:2px; }
.vkm-rel .im { background:#fff; height:120px; display:flex; align-items:center; justify-content:center; padding:10px; }
.vkm-rel img { max-height:100px; max-width:100%; object-fit:contain; }
.vkm-rel b { display:block; color:#fff; font-size:14px; padding:12px 14px 2px; }
.vkm-rel span { display:block; color:var(--ink-3); font-size:12px; padding:0 14px 14px; }
@media (max-width:960px) { .vkm-fit { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { .vkm-rel a { transition:none; } }