/* innovdeHR — own colour zone (body.is-hr.hr-page). Texture = attendance/roster grid, where EVL has its hex mesh. */
.hr-page .btn:not(.btn--ghost):not(.link-arrow){ --btn-bg:var(--hr-grad); --btn-fg:#fff; box-shadow:0 10px 30px -12px rgba(14,56,255,.7); }
.hr-page .btn--ghost:hover{ border-color:var(--hr-cyan); }
.hr-page .link-arrow{ color:var(--hr-cyan); }
.hr-page button.link-arrow{ padding:0; background:none; border:0; font:inherit; font-weight:600; cursor:pointer; }
.hr-page .section--raised{ background:var(--hr-raised); }
.hr-page .text-2{ color:#A7B3D6; }
.hr-grad{ background:var(--hr-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---- 1 · Hero ---- */
.hr-hero{ position:relative; min-height:100svh; display:grid; align-items:center; padding:calc(var(--header-h) + clamp(32px, 6vh, 72px)) 0 clamp(56px, 8vh, 96px); overflow:hidden; isolation:isolate; }
.hr-roster{ position:absolute; inset:0; z-index:-2; width:100%; height:100%;
  -webkit-mask-image:linear-gradient(transparent 6%, #000 30%, #000 70%, transparent), radial-gradient(60% 75% at 72% 50%, #000 20%, transparent 78%); -webkit-mask-composite:source-in; mask-image:linear-gradient(transparent 6%, #000 30%, #000 70%, transparent), radial-gradient(60% 75% at 72% 50%, #000 20%, transparent 78%); mask-composite:intersect; }
.hr-hero__glow{ position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(40% 50% at 78% 40%, rgba(14,56,255,.30), transparent 70%), radial-gradient(30% 40% at 62% 70%, rgba(0,229,255,.12), transparent 70%), radial-gradient(40% 50% at 0% 100%, rgba(77,124,255,.08), transparent 70%); }
.hr-hero__grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(32px, 5vw, 72px); align-items:center; }
.hr-hero__copy{ display:grid; gap:26px; }
.hr-eyebrow{ display:inline-flex; align-items:center; gap:10px; justify-self:start; padding:6px 14px 6px 6px; border-radius:var(--r-pill); border:1px solid rgba(140,160,255,.22); background:rgba(14,56,255,.08); }
.hr-mark{ width:28px; height:28px; }
.hr-eyebrow span{ font:600 15px/1 var(--font-display); color:var(--text); }
.hr-eyebrow small{ font:500 11px/1 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:#7C88B0; }
.hr-hero__title{ font-size:clamp(2.4rem, 4.2vw, 4.4rem); max-width:15ch; }
.hr-hero__chips{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.hr-hero__chips li{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:#A7B3D6; }
.hr-hero__chips .ti{ color:var(--hr-cyan); font-size:17px; }
.hr-hero__visual{ display:grid; gap:14px; perspective:1600px; }
.hr-frame--hero{ transform:rotateY(-7deg) rotateX(3deg); transform-origin:0 50%; box-shadow:0 50px 120px -40px rgba(14,56,255,.55), 0 30px 80px -30px rgba(0,0,0,.9); }
.hr-view{ position:absolute; inset:0; opacity:0; transition:opacity .6s var(--ease-out); }
.hr-view.is-active{ opacity:1; }
.hr-tabs{ display:flex; flex-wrap:wrap; gap:4px; padding:4px; justify-self:start; border-radius:var(--r-pill); border:1px solid rgba(140,160,255,.18); background:rgba(10,13,36,.7); }
.hr-tab{ position:relative; overflow:hidden; padding:9px 16px; border-radius:var(--r-pill); font:500 13.5px/1 var(--font-body); color:#A7B3D6; transition:color var(--dur-ui), background-color var(--dur-ui); }
.hr-tab[aria-selected="true"]{ color:#fff; background:rgba(14,56,255,.35); }
.hr-tab i{ position:absolute; left:14px; right:14px; bottom:4px; height:2px; border-radius:2px; background:var(--hr-grad); transform:scaleX(0); transform-origin:0 50%; }
.hr-tab[aria-selected="true"] i{ transform:scaleX(var(--prog, 0)); }
.hr-caption{ margin:0; min-height:1.6em; font-size:14px; color:#A7B3D6; }
.hr-caption b{ color:var(--text); font-weight:600; }
.hr-caption__item[hidden]{ display:none; }
@media (max-width:1000px){ .hr-hero__grid{ grid-template-columns:1fr; } .hr-frame--hero{ transform:none; } .hr-hero{ min-height:auto; } }

/* capability strip */
.hr-caps{ border-block:1px solid rgba(140,160,255,.12); background:linear-gradient(90deg, rgba(14,56,255,.06), rgba(0,229,255,.04)); }
.hr-caps__list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); }
.hr-caps__list li{ display:flex; align-items:center; gap:14px; padding:26px 22px; font:500 15px/1.4 var(--font-body); color:var(--text); }
.hr-caps__list li + li{ border-left:1px solid rgba(140,160,255,.12); }
.hr-caps__list .ti{ flex:none; display:grid; place-items:center; width:42px; height:42px; border-radius:12px; font-size:21px; color:var(--hr-cyan); background:rgba(0,229,255,.08); border:1px solid rgba(0,229,255,.2); }
@media (max-width:1100px){ .hr-caps__list{ grid-template-columns:repeat(2, minmax(0,1fr)); } .hr-caps__list li:nth-child(3){ border-left:0; } .hr-caps__list li:nth-child(n+3){ border-top:1px solid rgba(140,160,255,.12); } }
@media (max-width:560px){ .hr-caps__list{ grid-template-columns:1fr; } .hr-caps__list li + li{ border-left:0; border-top:1px solid rgba(140,160,255,.12); } }

/* ---- 2 · ERP vs innovdeHR ---- */
.hr-vs__grid{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:20px; align-items:stretch; }
.hr-vs__card{ position:relative; display:grid; gap:14px; align-content:start; padding:clamp(24px, 3vw, 40px); border-radius:var(--r-4); border:1px solid var(--line); background:var(--hr-card); }
.hr-vs__card h3{ font:600 clamp(26px, 2.6vw, 36px)/1.1 var(--font-display); }
.hr-vs__q{ font:500 12px/1.5 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:#7C88B0; }
.hr-vs__card--erp{ background:linear-gradient(160deg, rgba(4,111,164,.22), var(--ink-900) 70%); }
.hr-vs__card--erp .link-arrow{ color:var(--brand-bright); }
.hr-vs__card--hr{ background:linear-gradient(160deg, rgba(14,56,255,.28), var(--hr-card) 70%); border-color:rgba(77,124,255,.4); }
.hr-vs__card--hr::before{ content:""; position:absolute; left:12%; right:12%; top:-1px; height:1px; background:var(--hr-grad); }
.hr-vs__or{ align-self:center; display:grid; place-items:center; width:54px; height:54px; border-radius:50%; border:1px solid var(--line-strong); font:500 12px/1 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:#7C88B0; background:var(--hr-page); }
@media (max-width:900px){ .hr-vs__grid{ grid-template-columns:1fr; } .hr-vs__or{ justify-self:center; } }

/* ---- 3 · Modules (P7) ---- */
.hr-p7 .p7__card.hr-mod{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(24px, 4vw, 56px); align-items:center;
  background:linear-gradient(160deg, #131a45, var(--hr-card) 45%, #0b0f2a); border-color:rgba(140,160,255,.16); }
.hr-mod__copy{ display:grid; gap:16px; }
.hr-mod__copy h3{ font:600 clamp(24px, 2.6vw, 36px)/1.12 var(--font-display); }
.hr-mod__eyebrow{ display:flex; align-items:center; gap:12px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--hr-cyan); }
.hr-mod__eyebrow span{ display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:var(--hr-grad); color:#fff; letter-spacing:0; font-weight:600; }
.hr-tags{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.hr-tags li{ padding:7px 12px; border-radius:var(--r-pill); font-size:13px; color:#C7D1F0; border:1px solid rgba(140,160,255,.2); background:rgba(14,56,255,.08); }
@media (max-width:900px){ .hr-p7 .p7__card.hr-mod{ grid-template-columns:1fr; } }

/* ---- 4 · Biometrics ---- */
.hr-bio__stage{ position:relative; display:grid; gap:28px; justify-items:center; }
.hr-bio__lines{ display:none; }
.hr-term{ position:relative; width:min(220px, 56vw); }
.hr-term svg{ display:block; width:100%; height:auto; filter:drop-shadow(0 30px 60px rgba(14,56,255,.35)); }
.hr-term__scan{ animation:hrScan 3.2s var(--ease-inout) infinite; }
@keyframes hrScan{ 0%{ transform:translateY(0); opacity:.0; } 10%{ opacity:.9; } 50%{ transform:translateY(146px); opacity:.9; } 60%,100%{ transform:translateY(146px); opacity:0; } }
.hr-term__fp path{ stroke-dasharray:80; stroke-dashoffset:0; animation:hrFp 4.8s ease-in-out infinite; }
.hr-term__fp path:nth-child(2){ animation-delay:.15s; } .hr-term__fp path:nth-child(3){ animation-delay:.3s; } .hr-term__fp path:nth-child(4){ animation-delay:.45s; } .hr-term__fp path:nth-child(5){ animation-delay:.6s; }
@keyframes hrFp{ 0%,15%{ stroke-dashoffset:80; stroke:#4D7CFF; } 45%,80%{ stroke-dashoffset:0; stroke:#00E5FF; } 100%{ stroke-dashoffset:0; stroke:#4D7CFF; } }
.hr-term__led{ animation:hrLed 2.4s ease-in-out infinite; }
@keyframes hrLed{ 50%{ opacity:.3; } }
.hr-term__ring{ position:absolute; left:50%; top:73.5%; width:46%; aspect-ratio:1; translate:-50% -50%; border-radius:50%; border:1px solid rgba(0,229,255,.5); opacity:0; animation:hrRing 3.2s var(--ease-out) infinite; pointer-events:none; }
.hr-term__ring + .hr-term__ring{ animation-delay:1.6s; }
@keyframes hrRing{ 0%{ transform:scale(.8); opacity:.8; } 100%{ transform:scale(2.2); opacity:0; } }
.hr-spots{ list-style:none; margin:0; padding:0; width:100%; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
@media (max-width:620px){ .hr-spots{ grid-template-columns:1fr; } }
.hr-spot{ display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:var(--r-2); border:1px solid rgba(140,160,255,.16); background:rgba(18,23,57,.85); font-size:15px; line-height:1.4; }
.hr-spot__icon{ flex:none; display:grid; place-items:center; width:40px; height:40px; border-radius:12px; font-size:20px; color:var(--hr-cyan); background:rgba(0,229,255,.08); }
/* desktop scene (hr.js adds .is-scene) */
.hr-bio.is-scene .hr-bio__pin{ box-sizing:border-box; height:100vh; height:100svh; display:flex; flex-direction:column; padding:calc(var(--header-h) + clamp(12px, 3vh, 36px)) 0 clamp(16px, 4vh, 40px); }
.hr-bio.is-scene .hr-bio__pin .section__head{ flex:none; margin-bottom:clamp(8px, 2vh, 24px); }
.hr-bio.is-scene .hr-bio__pin .section__head h2{ font-size:min(var(--fs-h2), 6vh); }
.hr-bio.is-scene .hr-bio__stage{ display:block; flex:1 1 auto; min-height:0; max-height:640px; }
.hr-bio.is-scene{ padding-top:0; }
.hr-bio.is-scene .hr-term{ position:absolute; left:50%; top:50%; width:min(30vh, 210px); translate:-50% -50%; }
.hr-bio.is-scene .hr-bio__lines{ display:block; position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.hr-bio__lines path{ fill:none; stroke:rgba(0,229,255,.55); stroke-width:1; }
.hr-bio__lines circle{ fill:var(--hr-cyan); }
.hr-bio.is-scene .hr-spots{ display:block; position:absolute; inset:0; }
.hr-bio.is-scene .hr-spot{ position:absolute; width:min(32%, 360px); padding:11px 14px; font-size:14px; }
.hr-bio__enrol{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:clamp(24px, 4vw, 64px); align-items:center; margin-top:clamp(56px, 7vw, 100px); }
.hr-bio__enrol-copy{ display:grid; gap:14px; }
.hr-bio__enrol-copy h3{ font:600 clamp(22px, 2.2vw, 30px)/1.15 var(--font-display); }
@media (max-width:900px){ .hr-bio__enrol{ grid-template-columns:1fr; } }
.hr-note{ margin-top:32px; font-size:12.5px; color:var(--text-3); max-width:80ch; }

/* ---- 5 · Workforce intelligence ---- */
.hr-bento{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; }
.hr-bento__matrix{ grid-column:span 2; grid-row:span 2; display:grid; grid-template-rows:1fr auto; gap:20px; padding:22px; border-radius:var(--r-4); border:1px solid rgba(140,160,255,.16); background:linear-gradient(160deg, #121a48, var(--hr-card)); overflow:hidden; }
.hr-bento__body{ display:grid; gap:10px; }
.hr-bento__body h3{ font:600 22px/1.2 var(--font-display); }
.hr-matrix{ display:grid; grid-template-columns:repeat(var(--cols, 24), 1fr); gap:4px; align-content:start; min-height:180px; }
.hr-matrix i{ aspect-ratio:1; border-radius:3px; background:rgba(255,255,255,.05); transition:background-color .6s, box-shadow .6s; }
.hr-matrix i.s1, .hr-legend i.s1{ background:linear-gradient(135deg, rgba(0,229,255,.7), rgba(77,124,255,.7)); }
.hr-matrix i.s2, .hr-legend i.s2{ background:rgba(77,124,255,.85); }
.hr-matrix i.s3, .hr-legend i.s3{ background:rgba(167,139,250,.75); }
.hr-matrix i.s4, .hr-legend i.s4{ background:#FF6B6B; box-shadow:0 0 12px rgba(255,107,107,.6); }
.hr-matrix i.s0, .hr-legend i.s0{ background:rgba(255,255,255,.08); }
.hr-matrix i.is-now{ outline:1px solid rgba(255,255,255,.7); outline-offset:1px; }
.hr-legend{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px 18px; font-size:13px; color:#A7B3D6; }
.hr-legend li{ display:inline-flex; align-items:center; gap:7px; }
.hr-legend i{ width:10px; height:10px; border-radius:3px; }
.hr-insight{ display:grid; gap:14px; align-content:start; padding:22px; border-radius:var(--r-3); border:1px solid rgba(140,160,255,.14); background:var(--hr-card); }
.hr-insight p{ margin:0; font-size:15px; line-height:1.55; color:#C7D1F0; }
.hr-insight__badge{ justify-self:start; display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 8px; border-radius:var(--r-pill); font:500 12px/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--hr-cyan); background:rgba(0,229,255,.08); border:1px solid rgba(0,229,255,.22); }
.hr-insight__badge .ti{ font-size:16px; }
@media (max-width:1100px){ .hr-bento{ grid-template-columns:repeat(2, minmax(0,1fr)); } .hr-bento__matrix{ grid-row:auto; } }
@media (max-width:620px){ .hr-bento{ grid-template-columns:1fr; } .hr-bento__matrix{ grid-column:auto; } }

/* ---- 6 · Surfaces ---- */
.hr-surf{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; }
.hr-surf__card{ position:relative; display:grid; gap:12px; align-content:start; padding:26px 22px 28px; border-radius:var(--r-3); border:1px solid rgba(140,160,255,.14);
  background:radial-gradient(80% 60% at 50% 0%, rgba(14,56,255,.18), transparent 70%), var(--hr-card); transform-style:preserve-3d; }
.hr-surf__num{ position:absolute; top:18px; right:20px; font-size:11px; letter-spacing:.14em; color:#5D6890; }
.hr-surf__icon{ display:grid; place-items:center; width:64px; height:64px; margin-bottom:6px; border-radius:20px; font-size:30px; color:#fff; background:var(--hr-grad); box-shadow:0 14px 34px -12px rgba(14,56,255,.8); }
.hr-surf__card h3{ font:600 20px/1.2 var(--font-display); }
@media (max-width:1100px){ .hr-surf{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:520px){ .hr-surf{ grid-template-columns:1fr; } }

/* ---- 8 · FAQ ---- */
.hr-faq__grid{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:clamp(32px, 5vw, 80px); align-items:start; }
.hr-faq__grid .section__head{ position:sticky; top:calc(var(--header-h) + 32px); margin-bottom:0; }
@media (max-width:900px){ .hr-faq__grid{ grid-template-columns:1fr; } .hr-faq__grid .section__head{ position:static; } }
.hr-faq__list{ display:grid; gap:10px; }
.hr-qa{ border-radius:var(--r-2); border:1px solid rgba(140,160,255,.14); background:var(--hr-card); transition:border-color var(--dur-ui); }
.hr-qa[open]{ border-color:rgba(77,124,255,.45); }
.hr-qa summary{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 22px; cursor:pointer; list-style:none; font:600 17px/1.35 var(--font-display); }
.hr-qa summary::-webkit-details-marker{ display:none; }
.hr-qa summary i{ position:relative; flex:none; width:28px; height:28px; border-radius:50%; border:1px solid var(--line-strong); }
.hr-qa summary i::before, .hr-qa summary i::after{ content:""; position:absolute; left:50%; top:50%; width:10px; height:1.5px; translate:-50% -50%; background:var(--hr-cyan); transition:transform var(--dur-ui) var(--ease-out); }
.hr-qa summary i::after{ transform:rotate(90deg); }
.hr-qa[open] summary i::after{ transform:rotate(0deg); }
.hr-qa summary:focus-visible{ outline:2px solid var(--hr-cyan); outline-offset:-2px; border-radius:var(--r-2); }
.hr-qa__a{ padding:0 22px 22px; }
.hr-qa__a p{ margin:0; color:#A7B3D6; line-height:1.65; max-width:62ch; }

@media (prefers-reduced-motion: reduce){
  .hr-term__scan, .hr-term__fp path, .hr-term__led, .hr-term__ring{ animation:none; }
  .hr-view{ transition:none; }
}