/* HydroNeo reusable customer video modal (.hn-vmodal)
   Shared by the homepage and the IoT page. Include this file plus
   assets/js/hn-video-modal.js; any element with [data-hn-video] opens it. */
html.hn-vmodal-open { overflow: hidden; }
.hn-vmodal {
 position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
 margin: 0; padding: 76px 16px 24px; border: 0; background: transparent; overflow-y: auto;
}
.hn-vmodal[open] { display: flex; }
.hn-vmodal::backdrop { background: rgba(4,20,48,0.84); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.hn-vmodal-panel {
 position: relative; margin: auto;
 width: min(960px, 100%, max(320px, calc((100vh - 260px) * 16 / 9)));
 background: var(--white); border-radius: 16px;
 box-shadow: 0 24px 80px rgba(0,0,0,0.45);
 animation: hnVmodalIn 0.25s ease;
}
@supports (height: 100dvh) {
 .hn-vmodal-panel { width: min(960px, 100%, max(320px, calc((100dvh - 260px) * 16 / 9))); }
}
@keyframes hnVmodalIn { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
.hn-vmodal-close {
 position: absolute; top: -56px; right: 0;
 width: 44px; height: 44px; border-radius: 50%;
 display: flex; align-items: center; justify-content: center;
 background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.28); color: var(--white);
 cursor: pointer; transition: background 0.2s ease;
}
.hn-vmodal-close:hover { background: rgba(255,255,255,0.24); }
.hn-vmodal-close:focus-visible { outline: 3px solid var(--secondary-vivid); outline-offset: 2px; }
.hn-vmodal-close svg { width: 20px; height: 20px; display: block; }
.hn-vmodal-player { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 16px 16px 0 0; overflow: hidden; }
.hn-vmodal-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hn-vmodal-info { padding: 1.25rem 1.5rem 1.4rem; }
.hn-vmodal-name { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.05rem; line-height: 1.35; color: var(--primary); }
.hn-vmodal-context { margin-top: 0.15rem; font-size: 0.875rem; line-height: 1.45; color: var(--text-light); }
.hn-vmodal-quote { margin: 0.8rem 0 0; padding-left: 0.9rem; border-left: 3px solid var(--secondary); font-size: 0.98rem; line-height: 1.55; font-style: italic; color: var(--text-mid); }
@media (max-width: 600px) {
 .hn-vmodal { padding: 68px 12px 16px; }
 .hn-vmodal-info { padding: 1rem 1.1rem 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
 .hn-vmodal-panel { animation: none; }
}