/* Vision AI page: builds on hrms.css */
.vz-hero { background: radial-gradient(ellipse at 50% 110%, #1C8BDB 0%, #0B3A66 45%, #061B33 100%); padding-bottom: 0; }
.vz-grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(110, 197, 247, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(110, 197, 247, 0.08) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%); mask: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%); animation: vz-grid 20s linear infinite; }
@keyframes vz-grid { to { background-position: 0 48px, 48px 0; } }
.vz-hero .hr-hero-copy h1 span { color: #7CD0FA; }

.vz-console { border-radius: 1rem 1rem 0 0; overflow: hidden; background: #0A1628; box-shadow: 0 -10px 70px -10px rgba(51, 177, 245, 0.45), 0 0 0 1px rgba(110, 197, 247, 0.25); text-align: left; animation: hr-rise 1s cubic-bezier(.2, .8, .2, 1) both 0.2s; }
.vz-console-top { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1rem; background: #0E1E36; color: #DCEBF7; font-size: 0.85rem; border-bottom: 1px solid rgba(110, 197, 247, 0.15); }
.vz-console-top b { display: flex; align-items: center; gap: 0.5rem; }
.vz-console-top span { color: #8FA6C6; font-size: 0.78rem; }
.vz-console-top em { margin-left: auto; font-style: normal; font-size: 0.7rem; color: #8FA6C6; border: 1px solid rgba(143, 166, 198, 0.4); padding: 0.15rem 0.5rem; border-radius: 99px; }
.vz-rec { display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #F04438; box-shadow: 0 0 8px #F04438; animation: vz-blink 1.2s ease-in-out infinite; }
@keyframes vz-blink { 50% { opacity: 0.3; } }
.vz-console-body { display: grid; grid-template-columns: 1fr 260px; gap: 0.6rem; padding: 0.6rem; }
.vz-feeds { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.vz-feed { position: relative; border-radius: 0.5rem; overflow: hidden; background: #1B2B44; }
.vz-svg { display: block; width: 100%; height: auto; }
.vz-cam { position: absolute; left: 0.5rem; top: 0.5rem; display: flex; align-items: center; gap: 0.35rem; font-size: 0.66rem; font-weight: 600; color: #fff; background: rgba(6, 16, 30, 0.7); padding: 0.2rem 0.5rem; border-radius: 0.3rem; }
.vz-cam i { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: #F04438; animation: vz-blink 1.2s ease-in-out infinite; }
.vz-box { fill: none; stroke-width: 2; animation: vz-pulse 1.6s ease-in-out infinite; }
.vz-box.is-ok { stroke: #32D583; } .vz-box.is-bad { stroke: #F04438; } .vz-box.is-warn { stroke: #FDB022; }
@keyframes vz-pulse { 50% { stroke-opacity: 0.45; } }
.vz-tag { font-size: 9px; font-weight: 700; font-family: inherit; paint-order: stroke; stroke: rgba(6, 16, 30, 0.85); stroke-width: 3px; }
.vz-tag.is-ok { fill: #6CE9A6; } .vz-tag.is-bad { fill: #FDA29B; } .vz-tag.is-warn { fill: #FEC84B; }
.vz-scanline { fill: rgba(124, 208, 250, 0.35); animation: vz-scan 3s linear infinite; }
@keyframes vz-scan { from { transform: translateY(0); } to { transform: translateY(180px); } }
.vz-walk { animation: vz-walk 6s ease-in-out infinite; }
@keyframes vz-walk { 50% { transform: translateX(-12px); } }
.vz-enter { animation: vz-enter 5s ease-in-out infinite; }
@keyframes vz-enter { 0%, 20% { transform: translate(0, 0); } 60%, 80% { transform: translate(70px, -4px); } 100% { transform: translate(0, 0); } }
.vz-zone { animation: vz-zone 5s ease-in-out infinite; }
@keyframes vz-zone { 0%, 40% { fill: rgba(240, 68, 56, 0.1); } 60%, 80% { fill: rgba(240, 68, 56, 0.35); } }
.vz-belt { animation: vz-belt 3s linear infinite; }
@keyframes vz-belt { to { transform: translateX(50px); } }
.vz-defect { animation: vz-defect 3s ease-in-out infinite; }
@keyframes vz-defect { 0%, 30% { opacity: 0; } 45%, 85% { opacity: 1; } 100% { opacity: 0; } }
.vz-alerts { display: grid; align-content: start; gap: 0.45rem; padding: 0.4rem; }
.vz-alerts > small { font-size: 0.7rem; font-weight: 600; color: #8FA6C6; text-transform: uppercase; letter-spacing: 0.08em; margin: 0.2rem 0.2rem 0.3rem; }
.vz-alert { display: flex; gap: 0.6rem; align-items: center; padding: 0.55rem 0.65rem; border-radius: 0.6rem; background: #12233D; border: 1px solid rgba(110, 197, 247, 0.12); animation: hr-in 0.5s ease both; animation-delay: calc(1s + var(--i) * 0.35s); }
.vz-alert i { flex: none; width: 0.6rem; height: 0.6rem; border-radius: 50%; }
.vz-alert.is-bad i { background: #F04438; box-shadow: 0 0 8px #F04438; } .vz-alert.is-warn i { background: #FDB022; } .vz-alert.is-ok i { background: #32D583; }
.vz-alert b { display: block; font-size: 0.78rem; color: #F2F7FC; }
.vz-alert em { font-style: normal; font-size: 0.66rem; color: #8FA6C6; }

/* Why visual */
.vz-why-art { background: radial-gradient(circle at 50% 40%, #1C5FA0 0%, #0B3A66 55%, #061B33 100%); }
.vz-eye { color: #fff; }

/* Feature mocks */
.vz-win .vz-big { background: #0A1628; }
.vz-dot-bad { width: 2rem; height: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #F04438; color: #fff; font-weight: 700; flex: none; }
.vz-heat { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.45rem; padding: 1rem; }
.vz-heat span { display: flex; align-items: center; justify-content: center; height: 3.2rem; border-radius: 0.5rem; font-size: 0.75rem; font-weight: 600; background: #EEF2F6; color: #98A2B3; }
.hr-feat.is-in .vz-heat span { animation: vz-heat 0.35s ease forwards; animation-delay: calc(0.2s + var(--i) * 0.05s); }
@keyframes vz-heat { to { background: var(--c); color: var(--t); } }
.vz-heat .is-b { --c: #33B1F5; --t: #fff; } .vz-heat .is-i { --c: #FEC84B; --t: #7A2E0E; } .vz-heat .is-s { --c: #FDA29B; --t: #7A271A; }
.vz-legend { padding: 0 1rem 1rem; } .vz-legend .is-b { --c: #33B1F5; } .vz-legend .is-i { --c: #FEC84B; } .vz-legend .is-s { --c: #FDA29B; }
.vz-defrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; padding: 0.8rem; }
.vz-defrow span { display: grid; padding: 0.6rem; border-radius: 0.6rem; background: #F7FAFD; font-size: 0.72rem; color: #667085; text-align: center; }
.vz-defrow b { font-size: 1.1rem; color: #101828; }
.vz-trend { display: flex; align-items: flex-end; gap: 0.7rem; height: 180px; padding: 1rem 1rem 0.4rem; }
.vz-trend span { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 0.3rem; }
.vz-trend i { width: 100%; max-width: 36px; height: 0; border-radius: 0.35rem 0.35rem 0 0; background: linear-gradient(180deg, #FDA29B, #F04438); }
.vz-trend span:nth-last-child(-n+3) i { background: linear-gradient(180deg, #33B1F5, #0078BE); }
.hr-feat.is-in .vz-trend i { animation: hr-h 0.7s ease forwards; animation-delay: calc(0.2s + var(--i) * 0.08s); }
.vz-trend em { font-style: normal; font-size: 0.66rem; color: #98A2B3; }
.vz-cams .hr-dest span { background: linear-gradient(135deg, #1C5FA0, #061B33); }
.vz-record { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: center; width: 100%; max-width: 680px; }
.vz-snap { position: relative; border-radius: 0.8rem; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0, 20, 50, 0.8); border: 3px solid #fff; }
.vz-snap span { position: absolute; left: 0.5rem; bottom: 0.5rem; font-size: 0.68rem; font-weight: 600; color: #fff; background: rgba(6, 16, 30, 0.75); padding: 0.2rem 0.5rem; border-radius: 0.3rem; }
.vz-rec-card { max-width: none; }

/* Benefit phone */
.vz-phone { width: 100%; max-width: 330px; background: #0A1628; border-radius: 1.4rem; padding: 1.1rem; border: 6px solid #101828; box-shadow: 0 30px 60px -30px rgba(0, 40, 90, 0.7); display: grid; gap: 0.5rem; }
.vz-phone > b { color: #fff; font-size: 0.95rem; margin-bottom: 0.3rem; }
.vz-orb { color: #fff; }
.vz-orb span { font-size: 0.8rem; }

.vz-related { padding: 3rem 0 1rem; }
.vz-related h2 { font-size: 1.5rem; font-weight: 600; margin-bottom: 1.2rem; text-align: center; }
.vz-related-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; }

@media (max-width: 1023px) {
  .vz-console-body { grid-template-columns: 1fr; }
  .vz-alerts { grid-template-columns: 1fr 1fr; } .vz-alerts > small { grid-column: span 2; }
  .vz-alert:nth-child(n+5) { display: none; }
}
@media (max-width: 640px) {
  .vz-feeds { grid-template-columns: 1fr; } .vz-feed:nth-child(n+2) { display: none; }
  .vz-alerts { grid-template-columns: 1fr; } .vz-alerts > small { grid-column: auto; }
  .vz-heat { grid-template-columns: repeat(3, 1fr); }
  .vz-record { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .vz-grid-bg, .vz-scanline, .vz-walk, .vz-enter, .vz-zone, .vz-belt, .vz-defect, .vz-box, .vz-rec, .vz-cam i { animation: none; }
  .vz-defect { opacity: 1; }
}

.vz .hr-scene--sea .hr-s2 { top: 8%; right: 4%; }