/* Homepage "No More Software Bloat" video gallery — compact thumbs + autoplay player (white theme) */
.home-videos.hv{background:#fff!important;padding:84px 20px 96px!important}
.hv-box{max-width:1180px;margin:0 auto}
.hv-lead{margin:40px 0 18px!important;color:#6b7280!important;font-size:17px!important;text-align:left}
.hv-wrap{display:grid;grid-template-columns:minmax(0,34%) minmax(0,1fr);gap:18px;align-items:stretch}
.hv-side{position:relative;min-height:0}
.hv-thumbs{position:absolute;inset:0;overflow-y:auto;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:max-content;gap:12px;align-content:start;padding:2px 6px 2px 2px;scrollbar-width:thin}
.hv-thumb{position:relative;display:block;width:100%;aspect-ratio:16/10;padding:0;margin:0;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;background:#f1f3f5;cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s}
.hv-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.hv-thumb:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(17,24,39,.12);border-color:#cfd5db}
.hv-thumb:hover img{transform:scale(1.04)}
.hv-thumb.on{border-color:#00cc88;box-shadow:0 0 0 3px rgba(0,204,136,.25)}
.hv-play{position:absolute;inset:auto auto 10px 10px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.92);color:#111;font-size:11px;box-shadow:0 4px 12px rgba(0,0,0,.2);transition:.2s}
.hv-thumb:hover .hv-play{background:#00cc88;color:#04140d}
.hv-now{position:absolute;left:10px;bottom:10px;display:none;padding:4px 9px;border-radius:999px;background:#00cc88;color:#04140d;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.hv-thumb.on .hv-now{display:inline-block}.hv-thumb.on .hv-play{display:none}
.hv-main{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#0b0d10;border:1px solid #e5e7eb;box-shadow:0 22px 50px rgba(17,24,39,.16)}
/* Clean player: YouTube UI cropped off and blocked; our own volume control only */
.hv-frame{position:absolute;inset:0;overflow:hidden}
.hv-frame iframe,.hv-frame #hvPlayer{position:absolute;left:50%;top:50%;width:100%;height:calc(100% + 120px);transform:translate(-50%,-50%);border:0;pointer-events:none}
.hv-shield{position:absolute;inset:0;z-index:1;background:transparent}
.hv-main:not(.playing) .hv-frame{opacity:0}.hv-frame{transition:opacity .35s}
.hv-vol{position:absolute;right:14px;bottom:14px;z-index:3;display:flex;flex-direction:column;align-items:center;gap:8px}
.hv-vol-btn{width:42px;height:42px;border-radius:50%;border:0;display:grid;place-items:center;background:rgba(255,255,255,.95);color:#111;font-size:16px;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.28);transition:.2s}
.hv-vol-btn:hover{background:#00cc88;color:#04140d}
.hv-vol-pop{order:-1;height:0;opacity:0;overflow:hidden;padding:0 8px;border-radius:999px;background:rgba(255,255,255,.95);box-shadow:0 6px 18px rgba(0,0,0,.25);transition:height .2s,opacity .2s,padding .2s,visibility .2s;visibility:hidden;display:flex;align-items:center;justify-content:center}
.hv-vol:hover .hv-vol-pop,.hv-vol:focus-within .hv-vol-pop{height:120px;opacity:1;padding:12px 8px;visibility:visible}
.hv-vol-pop input{-webkit-appearance:none;appearance:none;writing-mode:vertical-lr;direction:rtl;width:6px;height:96px;margin:0;border-radius:6px;cursor:pointer;background:linear-gradient(to top,#00cc88 var(--v,0%),#d9dde2 var(--v,0%))}
.hv-vol-pop input::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#00a874;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.hv-vol-pop input::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#00a874;border:2px solid #fff}
.hv-vol-pop input::-moz-range-track{background:transparent}
@media(max-width:900px){
  .hv-wrap{grid-template-columns:1fr}
  .hv-main{order:-1}
  .hv-side{position:static}
  .hv-thumbs{position:static;display:flex;overflow-x:auto;overflow-y:hidden;padding-bottom:6px;scroll-snap-type:x mandatory}
  .hv-thumb{flex:0 0 46%;scroll-snap-align:start}
}
@media(max-width:520px){.home-videos.hv{padding:56px 16px 64px!important}.hv-thumb{flex-basis:64%}}
