/* Homepage security: a quiet canvas with detailed, finite SVG demonstrations. */
.home-security { --hs-ease: cubic-bezier(.22, 1, .36, 1); background: #f8f8ff; padding-block: 64px; }
.home-security > .wrap { max-width: 1760px; padding-inline: clamp(24px, 4vw, 64px); }
.hs-intro { display: grid; grid-template-columns: 1.14fr 1fr; align-items: center; gap: 32px; margin-bottom: 28px; }
.hs-copy { min-width: 0; }
.hs-copy .kicker { display: flex; align-items: center; gap: 14px; color: #006aff; font-size: 14px; letter-spacing: .14em; }
.hs-copy .kicker::after { content: ''; width: 58px; height: 2px; background: linear-gradient(90deg, #006aff 0 33%, #46b900 33% 66%, #ff9700 66%); }
.home-security h2 { margin: 22px 0 18px; max-width: none; color: #0c1035; font-size: clamp(42px, 3.4vw, 60px); line-height: 1.12; letter-spacing: -.025em; font-weight: 700; text-wrap: balance; }
.hs-blue { color: #0073ff; }.hs-green { color: #35ae00; }.hs-orange { color: #f58b00; }
.hs-copy .lede { max-width: 61ch; font-size: 20px; line-height: 1.5; color: #59657b; }
.hs-art { width: 100%; min-width: 0; }
.hs-hero-svg { width: 100%; height: auto; max-height: 340px; overflow: visible; }
.hs-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.hs-card-entry { min-width: 0; display: flex; }
.hs-card { --hs-accent: #087aff; --hs-soft: #e5efff; --hs-border: #cddfff; position: relative; isolation: isolate; display: flex; flex-direction: column; width: 100%; overflow: hidden; padding: 24px 24px 0; background: #fff; color: #111535; border: 1px solid var(--hs-border); border-radius: 16px; box-shadow: 0 12px 26px -22px rgb(49 69 126 / .2); transition: transform 200ms var(--hs-ease), box-shadow 200ms ease, border-color 200ms ease; }
.hs-card--two-factor { --hs-accent: #36b508; --hs-soft: #e9f7e4; --hs-border: #d8ecd0; }
.hs-card--roles { --hs-accent: #ff8d00; --hs-soft: #fff1e0; --hs-border: #ffe3c7; }
.hs-card-head { display: flex; align-items: center; gap: 18px; min-height: 54px; }
.hs-card-icon { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; background: var(--hs-soft); color: var(--hs-accent); }
.hs-card-icon svg { width: 30px; height: 30px; }
.hs-card h3 { margin: 0; font-size: 18px; font-weight: 650; line-height: 1.35; letter-spacing: -.025em; }
.hs-card > p { margin: 18px 0 0; font-size: 16px; line-height: 1.5; color: #536078; position: relative; z-index: 2; }
.hs-card-art { display: flex; justify-content: flex-end; align-items: flex-end; height: 108px; margin-top: auto; position: relative; z-index: 1; }
.hs-card-svg { width: 150px; height: 112px; overflow: visible; }
.hs-wave { position: absolute; bottom: 0; left: 0; width: 100%; height: 85px; color: var(--hs-soft); opacity: .75; z-index: -1; }
.home-security .note-bar { margin-top: 24px; padding: 12px 16px; font-size: 13px; box-shadow: none; background: rgb(255 255 255 / .75); }
.hs-cards .reveal { transition-delay: calc(var(--i, 0) * 100ms); }
@keyframes hs-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes hs-shield-rise { from { opacity: 0; transform: translateY(20px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes hs-close { from { transform: translateY(-4px); } to { transform: none; } }
@keyframes hs-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes hs-fingerprint { from { stroke-dashoffset: 60; opacity: .3; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes hs-signal { 0% { opacity: 0; offset-distance: 0%; } 15%, 80% { opacity: 1; } 100% { opacity: 0; offset-distance: 100%; } }
.hs-shield { transform-box: fill-box; transform-origin: center; }
.hs-signal { opacity: 0; offset-rotate: 0deg; }
.hs-signal--blue { offset-path: path('M47 173C47 70 380 50 476 85'); }
.hs-signal--green { offset-path: path('M179 199C165 239 410 310 511 226'); }
.hs-copy.in:not(.no-anim) > * { animation: hs-rise 450ms var(--hs-ease) backwards; }
.hs-copy.in:not(.no-anim) h2 { animation-delay: 80ms; }
.hs-copy.in:not(.no-anim) p { animation-delay: 160ms; }
.hs-art.in:not(.no-anim) .hs-base { animation: hs-rise 450ms var(--hs-ease) 200ms backwards; }
.hs-art.in:not(.no-anim) .hs-base--middle { animation-delay: 280ms; }
.hs-art.in:not(.no-anim) .hs-base--top { animation-delay: 360ms; }
.hs-art.in:not(.no-anim) .hs-shield { animation: hs-shield-rise 650ms var(--hs-ease) 400ms backwards; }
.hs-art.in:not(.no-anim) .hs-lock { animation: hs-rise 350ms var(--hs-ease) 800ms backwards; }
.hs-art.in:not(.no-anim) .hs-shackle { animation: hs-close 250ms var(--hs-ease) 1200ms backwards; }
.hs-art.in:not(.no-anim) .hs-path { stroke-dasharray: 1; animation: hs-draw 900ms var(--hs-ease) 700ms backwards; }
.hs-art.in:not(.no-anim) .hs-tile { animation: hs-rise 450ms var(--hs-ease) 900ms backwards; }
.hs-art.in:not(.no-anim) .hs-tile--1 { animation-delay: 1000ms; }
.hs-art.in:not(.no-anim) .hs-tile--2 { animation-delay: 1100ms; }
.hs-art.in:not(.no-anim) .hs-tile--3 { animation-delay: 1200ms; }
.hs-art.in:not(.no-anim) .hs-nodes { animation: hs-rise 350ms var(--hs-ease) 1100ms backwards; }
.hs-art.in:not(.no-anim) .hs-signal { animation: hs-signal 700ms var(--hs-ease) 1600ms both; }
/* Longer, distinct card demonstrations, followed by stable final artwork. */
@keyframes hs-server-build { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes hs-phone-enter { from { opacity: 0; transform: translate(12px, 16px) rotate(3deg); } to { opacity: 1; transform: none; } }
@keyframes hs-lock-seal { 0% { opacity: 0; transform: scale(.9); } 55% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: none; } }
@keyframes hs-person-enter { from { opacity: 0; transform: translateY(18px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes hs-audit-scan { 0% { opacity: 0; transform: translate(-12px, -7px); } 25% { opacity: 1; transform: translate(-12px, -7px); } 70% { opacity: 1; transform: translate(8px, 3px); } 100% { opacity: 1; transform: none; } }
@keyframes hs-scan-beam { 0% { opacity: 0; transform: translateY(-15px); } 20%, 75% { opacity: .8; } 100% { opacity: 0; transform: translateY(40px); } }
@keyframes hs-icon-ring { from { opacity: .6; transform: scale(.9); } to { opacity: 0; transform: scale(1.25); } }
@keyframes hs-hover-server { 40% { transform: translateY(-5px); } 100% { transform: none; } }
@keyframes hs-hover-lock { 45% { transform: scale(1.1); } 100% { transform: none; } }
@keyframes hs-hover-person { 45% { transform: translateY(-4px) scale(1.04); } 100% { transform: none; } }
.hs-detail-lock, .hs-verify, .hs-person { transform-box: fill-box; transform-origin: center; }
.hs-card-icon { position: relative; }
.hs-card-icon::after { content: ''; position: absolute; inset: -4px; border: 1px solid var(--hs-accent); border-radius: 18px; opacity: 0; pointer-events: none; }
.hs-phone-scan { opacity: 0; }
.hs-card-entry.in:not(.no-anim):not(.hs-card-done) .hs-card-icon::after { animation: hs-icon-ring 850ms var(--hs-ease) 250ms backwards; }
.hs-card-entry.in:not(.no-anim):not(.hs-card-done) .hs-icon-path { stroke-dasharray: 1; animation: hs-draw 850ms var(--hs-ease) 200ms backwards; }
.hs-card-entry.in:not(.no-anim):not(.hs-card-done) .hs-server { animation: hs-server-build 650ms var(--hs-ease) 200ms backwards; }
.hs-card-entry.in:not(.no-anim):not(.hs-card-done) .hs-server--1 { animation-delay: 400ms; }
.hs-card-entry.in:not(.no-anim):not(.hs-card-done) .hs-server--2 { animation-delay: 600ms; }
.hs-card-entry.in:not(.no-anim):not(.hs-card-done) .hs-led { animation: hs-rise 550ms var(--hs-ease) 1000ms backwards; }
.hs-card-entry.in:not(.no-anim):not(.hs-card-done) .hs-detail-lock { animation: hs-lock-seal 650ms var(--hs-ease) 1200ms backwards; }
.hs-card-entry.in:not(.no-anim):not(.hs-card-done) .hs-detail-shackle { animation: hs-close 300ms var(--hs-ease) 1500ms backwards; }
.hs-card-entry.in:not(.no-anim):not(.hs-card-done) .hs-phone { animation: hs-phone-enter 700ms var(--hs-ease) 200ms backwards; }
.hs-card-entry.in:not(.no-anim):not(.hs-card-done) .hs-fingerprint path { stroke-dasharray: 60; animation: hs-fingerprint 1100ms var(--hs-ease) 550ms backwards; }
.hs-card-entry.in:not(.no-anim):not(.hs-card-done) .hs-phone-scan { animation: hs-scan-beam 1100ms ease 550ms both; }
.hs-card-entry.in:not(.no-anim):not(.hs-card-done) .hs-verify { animation: hs-lock-seal 500ms var(--hs-ease) 1500ms backwards; }
.hs-card-entry.in:not(.no-anim):not(.hs-card-done) .hs-check { stroke-dasharray: 1; animation: hs-draw 450ms var(--hs-ease) 1700ms backwards; }
.hs-card-entry.in:not(.no-anim):not(.hs-card-done) .hs-person { animation: hs-person-enter 650ms var(--hs-ease) 200ms backwards; }
.hs-card-entry.in:not(.no-anim):not(.hs-card-done) .hs-person--middle { animation-delay: 450ms; }
.hs-card-entry.in:not(.no-anim):not(.hs-card-done) .hs-person--front { animation: hs-person-enter 650ms var(--hs-ease) 700ms backwards, hs-hover-person 650ms var(--hs-ease) 1350ms; }
.hs-card-entry.in:not(.no-anim):not(.hs-card-done) .hs-doc-lines path { animation: hs-rise 450ms var(--hs-ease) 200ms backwards; }
.hs-card-entry.in:not(.no-anim):not(.hs-card-done) .hs-doc-lines path:nth-child(2) { animation-delay: 350ms; }
.hs-card-entry.in:not(.no-anim):not(.hs-card-done) .hs-doc-lines path:nth-child(3) { animation-delay: 500ms; }
.hs-card-entry.in:not(.no-anim):not(.hs-card-done) .hs-doc-lines path:nth-child(4) { animation-delay: 650ms; }
.hs-card-entry.in:not(.no-anim):not(.hs-card-done) .hs-doc-lines path:nth-child(5) { animation-delay: 800ms; }
.hs-card-entry.in:not(.no-anim):not(.hs-card-done) .hs-magnifier { animation: hs-audit-scan 1500ms var(--hs-ease) 550ms backwards; }
@media (hover: hover) and (pointer: fine) {
  .hs-card-entry.in:not(.no-anim) .hs-respond .hs-server { animation: hs-hover-server 650ms var(--hs-ease); }
  .hs-card-entry.in:not(.no-anim) .hs-respond .hs-server--1 { animation-delay: 80ms; }
  .hs-card-entry.in:not(.no-anim) .hs-respond .hs-server--2 { animation-delay: 160ms; }
  .hs-card-entry.in:not(.no-anim) .hs-respond .hs-detail-lock { animation: hs-hover-lock 750ms var(--hs-ease); }
  .hs-card-entry.in:not(.no-anim) .hs-respond .hs-phone-scan { animation: hs-scan-beam 900ms ease both; }
  .hs-card-entry.in:not(.no-anim) .hs-respond .hs-check { animation: hs-draw 650ms var(--hs-ease) backwards; }
  .hs-card-entry.in:not(.no-anim) .hs-respond .hs-person { animation: hs-hover-person 650ms var(--hs-ease); }
  .hs-card-entry.in:not(.no-anim) .hs-respond .hs-person--middle { animation-delay: 100ms; }
  .hs-card-entry.in:not(.no-anim) .hs-respond .hs-person--front { animation-delay: 200ms; }
  .hs-card-entry.in:not(.no-anim) .hs-respond .hs-magnifier { animation: hs-audit-scan 1000ms var(--hs-ease); }
}
/* A second automatic demonstration makes each card legible without hovering. */
@keyframes hs-demo-server { 0%, 100% { transform: none; } 35%, 60% { transform: translateY(-9px); } }
@keyframes hs-demo-lock { 0%, 100% { transform: none; } 35%, 65% { transform: translate(-4px, -7px) scale(1.14); } }
@keyframes hs-demo-phone { 0%, 100% { transform: none; } 30%, 70% { transform: translateY(-7px) rotate(-3deg); } }
@keyframes hs-demo-verify { 0%, 100% { transform: none; } 45%, 65% { transform: scale(1.18); } }
@keyframes hs-demo-person { 0%, 100% { transform: none; } 40%, 65% { transform: translateY(-8px); } }
@keyframes hs-demo-front { 0%, 100% { transform: none; } 40%, 65% { transform: translateY(-8px) scale(1.1); } }
@keyframes hs-demo-audit { 0%, 100% { transform: none; } 25% { transform: translate(-18px, -14px); } 60% { transform: translate(5px, -6px); } }
@keyframes hs-demo-line { 0%, 100% { opacity: 1; } 35% { opacity: .35; } 65% { opacity: 1; } }
@keyframes hs-demo-icon { 0%, 100% { transform: none; } 35% { transform: translateY(-3px) rotate(-5deg); } 65% { transform: translateY(-3px) rotate(4deg); } }
.hs-card-entry.in .hs-demonstrate .hs-card-icon svg { animation: hs-demo-icon 1600ms var(--hs-ease); }
.hs-card-entry.in .hs-demonstrate .hs-card-icon::after { animation: hs-icon-ring 1200ms var(--hs-ease) 300ms; }
.hs-card-entry.in .hs-demonstrate .hs-server--1 { animation: hs-demo-server 1800ms var(--hs-ease); }
.hs-card-entry.in .hs-demonstrate .hs-server--2 { animation: hs-demo-server 1800ms var(--hs-ease) 150ms; }
.hs-card-entry.in .hs-demonstrate .hs-led { animation: hs-demo-line 1400ms ease 450ms; }
.hs-card-entry.in .hs-demonstrate .hs-detail-lock { animation: hs-demo-lock 2200ms var(--hs-ease); }
.hs-card-entry.in .hs-demonstrate .hs-phone { animation: hs-demo-phone 1800ms var(--hs-ease); }
.hs-card-entry.in .hs-demonstrate .hs-phone-scan { animation: hs-scan-beam 1300ms ease 100ms both; }
.hs-card-entry.in .hs-demonstrate .hs-fingerprint path { stroke-dasharray: 60; animation: hs-fingerprint 1200ms var(--hs-ease) 150ms backwards; }
.hs-card-entry.in .hs-demonstrate .hs-check { stroke-dasharray: 1; animation: hs-draw 600ms var(--hs-ease) 1000ms backwards; }
.hs-card-entry.in .hs-demonstrate .hs-verify { animation: hs-demo-verify 2200ms var(--hs-ease); }
.hs-card-entry.in .hs-demonstrate .hs-person--back { animation: hs-demo-person 1700ms var(--hs-ease); }
.hs-card-entry.in .hs-demonstrate .hs-person--middle { animation: hs-demo-person 1700ms var(--hs-ease) 180ms; }
.hs-card-entry.in .hs-demonstrate .hs-person--front { animation: hs-demo-front 2200ms var(--hs-ease); }
.hs-card-entry.in .hs-demonstrate .hs-doc-lines path { animation: hs-demo-line 1100ms ease 200ms; }
.hs-card-entry.in .hs-demonstrate .hs-doc-lines path:nth-child(2) { animation-delay: 350ms; }
.hs-card-entry.in .hs-demonstrate .hs-doc-lines path:nth-child(3) { animation-delay: 500ms; }
.hs-card-entry.in .hs-demonstrate .hs-doc-lines path:nth-child(4) { animation-delay: 650ms; }
.hs-card-entry.in .hs-demonstrate .hs-doc-lines path:nth-child(5) { animation-delay: 800ms; }
.hs-card-entry.in .hs-demonstrate .hs-magnifier { animation: hs-demo-audit 2200ms var(--hs-ease); }
.hs-motion-paused, .hs-motion-paused * { animation-play-state: paused !important; }

@media (hover: hover) and (pointer: fine) {
  .hs-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--hs-accent) 45%, white); box-shadow: 0 16px 28px -20px color-mix(in srgb, var(--hs-accent) 24%, transparent); }
}
[data-theme='dark'] .home-security { background: #101425; }
[data-theme='dark'] .home-security h2, [data-theme='dark'] .hs-card { color: var(--ink); }
[data-theme='dark'] .hs-copy .lede, [data-theme='dark'] .hs-card > p { color: var(--ink-2); }
[data-theme='dark'] .hs-card { background: #171d30; border-color: color-mix(in srgb, var(--hs-accent) 30%, #171d30); }
[data-theme='dark'] .hs-wave { opacity: .1; }
[data-theme='dark'] .home-security .note-bar { background: #171d30; }
@media (max-width: 1250px) {
  .hs-intro { grid-template-columns: 1.15fr 1fr; gap: 24px; }
  .home-security h2 { font-size: 44px; }
  .hs-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hs-card-art { height: 110px; }
}
@media (max-width: 900px) {
  .home-security { padding-block: 48px; }
  .hs-intro { grid-template-columns: 1fr; gap: 24px; }
  .hs-art { max-width: 600px; margin-inline: auto; }
  .hs-copy .lede { max-width: 62ch; }
}
@media (max-width: 599px) {
  .home-security h2 { font-size: clamp(30px, 8vw, 42px); letter-spacing: -.025em; }
  .hs-copy .lede { font-size: 17px; }
  .hs-cards { grid-template-columns: 1fr; gap: 16px; }
  .hs-card { padding: 22px 22px 0; }
  .hs-card h3 { font-size: 18px; }
  .hs-card-art { height: 116px; }
  .home-security .note-bar { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .home-security .reveal, .home-security .reveal *, .home-security .hs-card { animation: none !important; transition: none !important; opacity: 1; transform: none; }
  .home-security .hs-signal, .home-security .hs-phone-scan { display: none; }
  .home-security .hs-detail-lock, .home-security .hs-verify, .home-security .hs-magnifier { translate: none !important; }
}