/* ==========================================================================
   Naukri Profile Optimisation page - loaded only on /services/naukri-profile-optimisation
   A "career data" composition: recruiter-search simulation, candidate dashboards and skill networks.
   All candidate content is fictional. No third-party branding or interface is reproduced.
   ========================================================================== */

/* ----- structural helpers ----- */
.b { display: block; height: .55em; border-radius: 99px; background: #dfe5e0; margin: .55em 0; } .b.dk { background: #1a2420; }
.w50 { width: 50%; } .w60 { width: 60%; } .w80 { width: 80%; }
.nk-fine { margin: clamp(22px, 3vw, 34px) 0 0; font-size: .82rem; color: var(--mute-d); max-width: 70ch; }
.nk-fine.dark-fine { color: var(--mute-l); }
.nk-big { font-size: clamp(2.1rem, 4.6vw, 4rem); line-height: 1; letter-spacing: -.045em; font-weight: 800; color: #fff; max-width: 17ch; }
.nk-big.sm { font-size: clamp(1.9rem, 4vw, 3.3rem); max-width: 22ch; margin-inline: auto; }
.nk-big span { color: var(--green); }

/* ----- the fictional candidate dashboard ----- */
.np { position: relative; container-type: inline-size; background: #fff; color: #16201b; border-radius: 18px; overflow: hidden; line-height: 1.45; box-shadow: 0 50px 90px -34px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .5) inset; text-align: left; }
.np > * { font-size: clamp(9.5px, 2.9cqw, 14px); }
.np-head { display: flex; align-items: center; gap: 3cqw; padding: 4cqw 5cqw; background: linear-gradient(120deg, #0d1a12, #16251a 70%); color: #fff; transition: box-shadow .5s, opacity .5s; }
.np-av { flex: none; display: grid; place-items: center; width: 12cqw; height: 12cqw; border-radius: 50%; background: linear-gradient(135deg, #7ED957, #2f7d17); color: #07120a; font-weight: 800; font-size: 4.4cqw !important; }
.np-id { min-width: 0; flex: 1; } .np-name { margin: 0; font-weight: 800; font-size: 1.3em; letter-spacing: -.02em; line-height: 1.15; }
.np-headline { margin: .25em 0 0; font-size: .95em; color: #cfe0cf; }
.np-fict { flex: none; align-self: flex-start; font-size: .68em !important; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: #bdf09f; border: 1px solid rgba(126, 217, 87, .45); border-radius: 99px; padding: .3em .8em; }
.np-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-bottom: 1px solid #e8ece8; }
.np-stats > div { padding: 2.6cqw 5cqw; border-top: 1px solid #eef2ee; transition: opacity .5s, box-shadow .5s, background .5s; } .np-stats > div:nth-child(-n+2) { border-top: 0; }
.np-stats dt { font-size: .74em; letter-spacing: .1em; text-transform: uppercase; color: #78847d; font-weight: 700; } .np-stats dd { margin: .15em 0 0; font-weight: 700; font-size: 1em; }
.np-block { padding: 3cqw 5cqw; border-bottom: 1px solid #e8ece8; transition: opacity .5s, box-shadow .5s, background .5s; }
.np-block h5 { margin: 0 0 .5em; font-size: .78em; letter-spacing: .12em; text-transform: uppercase; color: var(--green-ink); font-weight: 800; }
.np-block p { margin: 0; color: #34413a; font-size: .96em; }
.np-skills { display: flex; flex-wrap: wrap; gap: 1.4cqw; list-style: none; margin: 0; padding: 0; }
.np-skills li { padding: .3em .85em; border-radius: 999px; font-size: .9em; background: rgba(126, 217, 87, .14); color: #1d5a0a; border: 1px solid rgba(47, 125, 23, .3); font-weight: 600; transition: background .4s, color .4s, box-shadow .4s, transform .4s var(--ease), opacity .4s; }
.np-skills li.pop { animation: nkPop .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes nkPop { from { opacity: 0; transform: translateY(8px) scale(.85); } to { opacity: 1; transform: none; } }
.np-job { display: flex; gap: 3cqw; } .np-job > i { flex: none; width: 8cqw; height: 8cqw; border-radius: 7px; background: linear-gradient(135deg, #e3e9e4, #cfd8d1); }
.np-job b { display: block; font-size: 1em; } .np-job span { display: block; font-size: .8em; color: #78847d; margin-bottom: .25em; } .np-job p { font-size: .92em; }
.np-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5cqw 3cqw; padding: 3cqw 5cqw; background: #f6f8f6; }
.np-foot p { margin: 0; display: inline-flex; align-items: center; gap: 1.6cqw; font-size: .82em; font-weight: 600; color: #34413a; transition: opacity .5s, box-shadow .5s; border-radius: 6px; }
.np-resume span { display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--green); color: #07120a; } .np-resume svg { width: 1em; height: 1em; }
.np-seg { display: inline-flex; gap: 3px; } .np-seg i { width: 1.2em; height: .4em; border-radius: 3px; background: var(--green); }
/* highlight states (set by JS) */
.np.has-focus [data-sec] { opacity: .3; } .np.has-focus [data-sec].is-focus { opacity: 1; }
.np [data-sec].is-focus { box-shadow: inset 0 0 0 2px var(--green), 0 0 26px rgba(126, 217, 87, .4); background-color: rgba(126, 217, 87, .09); }
.np-head.is-focus { background-color: #16251a; }
/* simulator match states */
.np [data-f].is-match { background: rgba(126, 217, 87, .28); box-shadow: 0 0 0 .25em rgba(126, 217, 87, .28); border-radius: 4px; color: #0f3d05; }
.np [data-f].is-miss { text-decoration: underline dotted #98a39b; text-underline-offset: .25em; }
.np-skills li.is-match { background: var(--green); color: #07120a; border-color: var(--green); box-shadow: 0 0 18px rgba(126, 217, 87, .55); transform: translateY(-2px); }
.np-head [data-f].is-match { color: #07120a; background: #bdf09f; }
.np.is-swap { animation: nkSwap .6s var(--ease); } @keyframes nkSwap { from { opacity: .35; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   1. Hero
   ========================================================================== */
.nk-hero { position: relative; display: flex; align-items: center; overflow: hidden; min-height: min(100svh, 960px); padding: calc(var(--header-h) + clamp(34px, 5vw, 70px)) 0 clamp(90px, 9vw, 130px); background: radial-gradient(110% 100% at 85% 100%, #0f1a13, var(--black) 60%); }
.nk-hero-glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(560px 560px at 72% 46%, rgba(126, 217, 87, .24), transparent 70%); animation: nkGlow 5s ease-out both; } @keyframes nkGlow { from { opacity: 0; } to { opacity: 1; } }
.nk-hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.nk-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: clamp(30px, 5vw, 80px); align-items: center; width: 100%; }
.nk-label { display: inline-flex; align-items: center; gap: 12px; font-size: .76rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--green); margin: 0 0 22px; } .nk-label::before { content: ''; width: 34px; height: 1.5px; background: currentColor; }
.nk-title { font-size: clamp(2.5rem, 5.6vw, 4.9rem); line-height: 1.02; letter-spacing: -.045em; font-weight: 800; color: #fff; }
.nk-title .ln { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; } .nk-title .lni { display: inline-block; will-change: transform; }
.nk-title em { font-style: normal; background: linear-gradient(100deg, #7ED957 10%, #d3f7bd 90%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.nk-rule { display: block; width: 130px; height: 2px; margin: 26px 0 4px; background: linear-gradient(90deg, var(--green), transparent); transform-origin: left; animation: nkRule 1.5s 1s var(--ease) both; } @keyframes nkRule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.nk-lead { margin-top: 22px; } .nk-ctas { margin-top: 30px; }
.nk-stage { position: relative; }
.nk-stage-3d { position: relative; padding: 60px 0 30% 0; }
.nk-stage-3d .np-hero { width: 82%; transform: perspective(1200px) rotateY(-8deg) rotateX(3deg); transform-origin: 20% 50%; animation: nkHeroIn 1.3s .45s var(--ease) both; }
@keyframes nkHeroIn { from { opacity: 0; transform: perspective(1200px) translateY(60px) rotateY(-20deg) rotateX(14deg) scale(.95); } }
.nk-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.nk-links path { fill: none; stroke: var(--green); stroke-opacity: .65; stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-dasharray: 220; stroke-dashoffset: 220; animation: nkDash 2.2s 1.8s var(--ease) forwards; } @keyframes nkDash { to { stroke-dashoffset: 0; } }
.nk-tag { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 99px; font-size: .78rem; font-weight: 700; color: #fff; background: rgba(21, 26, 24, .88); border: 1px solid rgba(126, 217, 87, .4); backdrop-filter: blur(8px); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .7); white-space: nowrap; }
.nk-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.nk-tag.t1 { left: 2%; top: 0; animation: nkFloat 7s ease-in-out infinite; } .nk-tag.t2 { left: 36%; top: 0; animation: nkFloat 8s -2s ease-in-out infinite; } .nk-tag.t3 { left: 0; bottom: 6%; animation: nkFloat 9s -4s ease-in-out infinite; }
@keyframes nkFloat { 50% { transform: translateY(-8px); } }
.nk-search { position: absolute; right: 0; bottom: 0; width: 58%; padding: 16px 18px 18px; border-radius: 18px; background: rgba(15, 22, 18, .92); border: 1px solid rgba(126, 217, 87, .35); backdrop-filter: blur(14px); box-shadow: 0 40px 70px -26px rgba(0, 0, 0, .85), 0 0 60px -20px rgba(126, 217, 87, .45); color: #fff; animation: nkFloat 9s -1s ease-in-out infinite; }
.ns-top { margin: 0 0 12px; display: flex; align-items: center; gap: 9px; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--green); }
.ns-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(126, 217, 87, .6); animation: nkPulse 2s infinite; } @keyframes nkPulse { 70% { box-shadow: 0 0 0 9px rgba(126, 217, 87, 0); } 100% { box-shadow: 0 0 0 0 rgba(126, 217, 87, 0); } }
.ns-input { margin: 0; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); font-size: .88rem; font-weight: 600; }
.ns-ic { display: grid; color: var(--green); } .ns-ic svg { width: 16px; height: 16px; }
.ns-caret { width: 1.5px; height: 1.1em; background: var(--green); animation: nkBlink 1s steps(1) infinite; } @keyframes nkBlink { 50% { opacity: 0; } }
.ns-filters { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px; } .ns-filters u { text-decoration: none; font-size: .72rem; font-weight: 600; padding: 5px 11px; border-radius: 99px; background: rgba(126, 217, 87, .14); color: #bdf09f; border: 1px solid rgba(126, 217, 87, .3); }
.ns-hit { margin: 12px 0 0; font-size: .74rem; color: var(--mute-d); }
.nk-demo { margin: 16px 0 0; font-size: .74rem; letter-spacing: .04em; color: var(--mute-d); text-align: right; }

/* ==========================================================================
   2. Why it matters (sticky profile + document layer)
   ========================================================================== */
.nk-why { padding-block: clamp(56px, 6vw, 92px); }
.nk-why-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); grid-template-areas: "head side" "items side"; column-gap: clamp(28px, 5vw, 72px); align-items: start; } .nk-why-head { grid-area: head; } .nk-bens { grid-area: items; }
.nk-why-side { grid-area: side; align-self: center; max-width: 400px; width: 100%; justify-self: end; }
.nk-sticky { position: relative; padding-bottom: 40px; }
.nk-sticky .np { box-shadow: 0 34px 60px -30px rgba(8, 8, 8, .5), 0 0 0 1px var(--line-l); }
.nk-sticky-label { position: absolute; left: 14px; bottom: 0; margin: 0; padding: 7px 14px; border-radius: 99px; background: var(--black); color: var(--green); font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.nk-lede { margin: 16px 0 0; font-size: 1.02rem; line-height: 1.7; color: var(--mute-l); max-width: 60ch; }
.nk-bens { list-style: none; margin: clamp(22px, 3vw, 32px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.nk-ben { position: relative; padding: 16px 18px 16px 20px; border-radius: 16px; background: var(--soft); border: 1px solid var(--line-l); cursor: pointer; transition: background .35s, border-color .35s, box-shadow .35s, transform .35s var(--ease); }
.nk-ben::before { content: ''; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 3px; background: var(--green-ink); transform: scaleY(.25); transform-origin: top; opacity: .4; transition: transform .45s var(--ease), opacity .3s; }
.nk-ben:hover { transform: translateY(-2px); } .nk-ben:focus-visible { outline: 2px solid var(--green-ink); outline-offset: 3px; }
.nk-ben.is-active { background: #fff; border-color: rgba(47, 125, 23, .5); box-shadow: 0 20px 36px -24px rgba(8, 8, 8, .35); } .nk-ben.is-active::before { transform: scaleY(1); opacity: 1; background: var(--green); }
.nk-ben h3 { font-size: 1.08rem; letter-spacing: -.025em; } .nk-ben p { margin: 6px 0 0; font-size: .88rem; line-height: 1.55; color: var(--mute-l); }
.nk-ben mark { background: linear-gradient(transparent 62%, rgba(126, 217, 87, .55) 62%) no-repeat 0 0 / 0% 100%; color: inherit; transition: background-size .8s var(--ease) .15s; } .nk-ben.is-active mark { background-size: 100% 100%; }

/* ==========================================================================
   4. Profile essentials
   ========================================================================== */
.nk-ess-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.nk-ess-view { position: sticky; top: calc(var(--header-h) + 22px); }
.nk-ess-frame { border-radius: 22px; padding: clamp(14px, 2.2vw, 26px); background: radial-gradient(100% 80% at 30% 0%, #16271b, #0b0f0d); box-shadow: 0 50px 80px -40px rgba(8, 8, 8, .6); overflow: hidden; }
.nk-ess-frame .np { transition: transform .7s var(--ease); }
.nk-ess-cap { margin: 14px 0 0; text-align: center; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--green-ink); }
.nk-ess-list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.nk-ess-item { border-bottom: 1px solid var(--line-l); }
.nk-ess-btn { width: 100%; display: grid; grid-template-columns: 60px minmax(0, 1fr) 40px; align-items: center; gap: 12px; padding: 24px 0; text-align: left; color: var(--text-l); }
.nk-ess-n { font-size: .95rem; font-weight: 800; letter-spacing: .1em; color: var(--green-ink); }
.nk-ess-t { font-size: clamp(1.25rem, 2.2vw, 1.8rem); font-weight: 800; letter-spacing: -.035em; transition: transform .4s var(--ease), color .3s; }
.nk-ess-btn i { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-l); display: grid; place-items: center; transition: transform .4s var(--ease), background .3s; } .nk-ess-btn i svg { width: 16px; height: 16px; }
.nk-ess-btn:hover .nk-ess-t { transform: translateX(6px); }
.nk-ess-item.is-open .nk-ess-t { color: var(--green-ink); } .nk-ess-item.is-open .nk-ess-btn i { transform: rotate(135deg); background: var(--green); border-color: var(--green); }
.nk-ess-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); } .nk-ess-panel > div { overflow: hidden; min-height: 0; visibility: hidden; padding-left: 72px; transition: visibility 0s .5s; }
.nk-ess-item.is-open .nk-ess-panel { grid-template-rows: 1fr; } .nk-ess-item.is-open .nk-ess-panel > div { visibility: visible; transition: visibility 0s; }
.nk-ess-panel p { margin: 0 0 12px; color: var(--mute-l); max-width: 48ch; }
.nk-ess-panel ul { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 8px; } .nk-ess-panel li { position: relative; padding-left: 22px; font-size: .92rem; font-weight: 600; } .nk-ess-panel li::before { content: ''; position: absolute; left: 0; top: .5em; width: 10px; height: 2px; background: var(--green-ink); }

/* ==========================================================================
   6. Skills & keywords explorer
   ========================================================================== */
.nk-skx { background: radial-gradient(80% 70% at 15% 100%, #0f1a13, var(--black) 60%); }
.nk-roles { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(26px, 4vw, 44px); }
.nk-role { padding: 13px 22px; border-radius: 99px; font-weight: 700; font-size: .92rem; color: var(--text-d); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .16); transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease); }
.nk-role:hover { border-color: rgba(126, 217, 87, .6); transform: translateY(-2px); } .nk-role[aria-selected="true"] { background: var(--green); color: #07120a; border-color: var(--green); }
.nk-skx-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(26px, 5vw, 70px); align-items: center; }
.nk-net { position: relative; aspect-ratio: 16 / 10; border-radius: 26px; background: radial-gradient(60% 60% at 50% 50%, rgba(126, 217, 87, .1), transparent 70%), rgba(255, 255, 255, .025); border: 1px solid rgba(255, 255, 255, .1); }
.nk-net svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.nk-net svg path { fill: none; stroke: rgba(126, 217, 87, .28); stroke-width: 1.2; vector-effect: non-scaling-stroke; transition: stroke .4s, stroke-opacity .4s; }
.nk-net svg path.on { stroke: var(--green); stroke-opacity: .9; stroke-dasharray: 6 6; animation: nkMarch 1.4s linear infinite; } .nk-net svg path.sk { stroke-opacity: .55; stroke-dasharray: none; animation: none; stroke-width: 1; }
.nk-net-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; width: clamp(110px, 17%, 170px); aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; text-align: center; padding: 10px; background: radial-gradient(circle at 30% 25%, #1f3a24, #0c140e); border: 1px solid var(--green); box-shadow: 0 0 60px -6px rgba(126, 217, 87, .5), inset 0 0 30px rgba(126, 217, 87, .15); }
.nk-net-core b { font-size: clamp(.78rem, 1.15vw, 1rem); line-height: 1.15; color: #fff; letter-spacing: -.01em; } .nk-net-core small { margin-top: 4px; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--green); }
.nk-net-cat { position: absolute; transform: translate(-50%, -50%); z-index: 2; padding: 9px 16px; border-radius: 99px; font-size: clamp(.68rem, .95vw, .82rem); font-weight: 700; color: #fff; background: #131a16; border: 1px solid rgba(255, 255, 255, .22); white-space: nowrap; cursor: pointer; transition: background .3s, color .3s, border-color .3s, box-shadow .3s; }
.nk-net-cat:hover { border-color: var(--green); } .nk-net-cat.on { background: var(--green); color: #07120a; border-color: var(--green); box-shadow: 0 0 34px -4px rgba(126, 217, 87, .8); }
.nk-net-dot { position: absolute; transform: translate(-50%, -50%) scale(0); z-index: 3; width: 14px; height: 14px; padding: 0; border-radius: 50%; background: var(--green); border: 3px solid #0c140e; box-shadow: 0 0 14px rgba(126, 217, 87, .8); cursor: pointer; opacity: 0; animation: nkDot .55s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes nkDot { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.nk-net-dot span, .nk-sk::after { pointer-events: none; }
.nk-net-dot:hover span { opacity: 1; } .nk-net-dot:hover { z-index: 6; }
.nk-net-dot span { opacity: 0; transition: opacity .25s; position: absolute; left: 50%; bottom: 150%; transform: translateX(-50%); padding: 5px 11px; border-radius: 8px; background: #fff; color: #0b110d; font-size: .72rem; font-weight: 700; white-space: nowrap; box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .6); }
.nk-skx-lead { margin: 0 0 22px; color: var(--text-d); font-size: 1.04rem; line-height: 1.7; }
.nk-cats { display: grid; gap: 8px; margin-bottom: 20px; }
.nk-cat { display: flex; align-items: center; gap: 14px; text-align: left; padding: 14px 18px; border-radius: 16px; font-weight: 700; color: var(--text-d); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .12); transition: background .3s, border-color .3s, transform .3s var(--ease); }
.nk-cat span { font-size: .78rem; letter-spacing: .1em; color: var(--green); } .nk-cat:hover { transform: translateX(4px); border-color: rgba(126, 217, 87, .5); }
.nk-cat[aria-selected="true"] { background: rgba(126, 217, 87, .14); border-color: var(--green); color: #fff; }
.nk-skx-detail { padding: 20px 22px; border-radius: 18px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); }
.nk-skx-tip { margin: 0 0 14px; font-size: .9rem; color: var(--mute-d); }
.nk-skx-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.nk-sk { position: relative; padding: 9px 16px; border-radius: 99px; font-size: .86rem; font-weight: 700; color: #07120a; background: var(--green); transition: transform .3s var(--ease), box-shadow .3s; animation: nkPop .55s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
.nk-sk:hover, .nk-sk:focus-visible, .nk-sk[aria-expanded="true"] { transform: translateY(-3px); box-shadow: 0 10px 24px -8px rgba(126, 217, 87, .7); }
.nk-sk::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translate(-50%, 6px); width: max-content; max-width: 220px; padding: 9px 12px; border-radius: 10px; background: #fff; color: #0b110d; font-size: .76rem; font-weight: 600; line-height: 1.4; text-align: left; opacity: 0; visibility: hidden; transition: opacity .25s, transform .25s var(--ease); box-shadow: 0 14px 28px -10px rgba(0, 0, 0, .7); z-index: 5; }
.nk-sk:hover::after, .nk-sk:focus-visible::after, .nk-sk[aria-expanded="true"]::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* ==========================================================================
   9. Why HRA (zigzag)
   ========================================================================== */
.nk-hra { background: var(--black); }
.nk-hra-orb { position: absolute; z-index: -1; width: 520px; height: 520px; left: 50%; top: 24%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(126, 217, 87, .12), transparent); }
.nk-zig { list-style: none; margin: clamp(40px, 6vw, 80px) 0 0; padding: 0; position: relative; }
.nk-zig::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(transparent, rgba(126, 217, 87, .45), transparent); }
.nk-zig-i { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(30px, 8vw, 130px); padding: clamp(22px, 3vw, 40px) 0; opacity: 0; transform: translateY(40px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.nk-zig-i.in { opacity: 1; transform: none; }
.nk-zig-i.r { margin-top: clamp(-30px, -2vw, -10px); }
.nk-zig-i > div { max-width: 460px; } .nk-zig-i.l > div { grid-column: 1; justify-self: end; text-align: right; } .nk-zig-i.r > div { grid-column: 2; grid-row: 1; }

.nk-zig-i h3 { font-size: clamp(1.4rem, 2.6vw, 2.2rem); letter-spacing: -.04em; line-height: 1.08; } .nk-zig-i p { margin: 12px 0 0; color: var(--mute-d); }
.nk-zig-line { position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 6px rgba(126, 217, 87, .15), 0 0 20px var(--green); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .nk-hero { min-height: 0; } .nk-hero-grid, .nk-ess-grid, .nk-skx-grid { grid-template-columns: minmax(0, 1fr); }
  .nk-ess-view { position: static; }

}
@media (max-width: 900px) {

  .nk-ess-view { position: sticky; top: calc(var(--header-h) + 8px); z-index: 4; margin-bottom: 14px; background: #fff; padding-bottom: 6px; } .nk-ess-frame { max-height: 270px; padding: 10px; } .nk-ess-cap { display: none; }
  .nk-ess-frame .np { transform: translateY(var(--ty, 0px)); }

  .nk-net { display: none; }

  .nk-zig::before { left: 14px; } .nk-zig-i, .nk-zig-i.r { grid-template-columns: minmax(0, 1fr); padding-left: 44px; margin-top: 0; gap: 8px; }
  .nk-zig-i.l > div, .nk-zig-i.r > div { grid-column: 1; grid-row: 2; justify-self: start; text-align: left; } 
  .nk-zig-line { left: 14px; top: 2.5rem; }
}
@media (max-width: 620px) {
  .nk-stage-3d { padding-bottom: 0; } .nk-stage-3d .np-hero { width: 100%; transform: none; } .nk-search { position: relative; width: 100%; margin-top: 16px; animation: none; } .nk-tag { display: none; } .nk-links { display: none; } .nk-demo { text-align: left; }
  .np-stats { grid-template-columns: minmax(0, 1fr); } .np-stats > div:nth-child(2) { border-top: 1px solid #eef2ee; }
  .nk-bens { grid-template-columns: minmax(0, 1fr); }
  .nk-ess-btn { grid-template-columns: 44px minmax(0, 1fr) 36px; } .nk-ess-panel > div { padding-left: 56px; }

  .nk-roles { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; } .nk-role { flex: none; }
  .nk-big { font-size: clamp(1.9rem, 9vw, 2.6rem); }
}
@media (max-width: 900px) {
  .nk-why-grid, .nk-ess-grid { display: flex; flex-direction: column; } .nk-why-grid { gap: 0; } .nk-why-head { order: 1; } .nk-why-side { order: 2; } .nk-bens { order: 3; }
  .nk-why-side { max-width: none; justify-self: auto; align-self: stretch; position: sticky; top: calc(var(--header-h) + 6px); z-index: 4; margin: 18px 0 14px; }
  .nk-sticky { padding: 0; max-height: 230px; overflow: hidden; border-radius: 18px; box-shadow: 0 18px 34px -18px rgba(8, 8, 8, .5); }
  .nk-sticky .np { transform: translateY(var(--ty, 0px)); transition: transform .6s var(--ease); border-radius: 0; box-shadow: none; } .nk-sticky-label { display: none; }
}
@media (max-width: 620px) {
  .nk-why, .nk-ess, .nk-skx, .nk-hra, .nk-faq { padding-block: 60px; }
  .nk-ess .sec-head, .nk-skx .sec-head { margin-bottom: 28px; }
  .nk-hero { padding-bottom: 80px; }
}@media (hover: none) { .nk-role:hover, .nk-cat:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .nk-links path, .nk-rule, .nk-hero-glow, .nk-stage-3d .np-hero, .ns-dot, .ns-caret, .nk-tag, .nk-search, .nk-net svg path.on, .nk-sk, .np-skills li.pop, .nk-net-dot { animation: none !important; }
  .nk-links path { stroke-dashoffset: 0; } .nk-net-dot { opacity: 1; transform: translate(-50%, -50%); }
  .nk-zig-i { opacity: 1 !important; transform: none !important; } .nk-ben mark { background-size: 100% 100%; } .nk-ben { transition: none; }
  .nk-ess-panel { transition: none !important; }
}

/* ==========================================================================
   Contact panel (above the footer)
   ========================================================================== */
.nk-contact-panel { position: relative; display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; padding: clamp(28px, 5vw, 60px); border-radius: 28px; background: linear-gradient(135deg, #fff 0%, var(--green-soft) 100%); border: 1px solid rgba(47, 125, 23, .22); box-shadow: 0 40px 80px -50px rgba(27, 110, 0, .45); overflow: hidden; }
.nk-contact-panel::before { content: ""; position: absolute; width: 380px; height: 380px; right: -120px; top: -160px; border-radius: 50%; background: radial-gradient(closest-side, rgba(126, 217, 87, .35), transparent); pointer-events: none; }
.nk-contact-copy { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; } .nk-contact-copy .display { margin: 0; } .nk-contact-copy > p:not(.eyebrow) { margin: 0; color: var(--mute-l); max-width: 52ch; }
.nk-contact-ways { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.nk-contact-ways a { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 18px; background: #fff; border: 1px solid rgba(8, 8, 8, .08); transition: transform .35s, border-color .35s, box-shadow .35s; min-width: 0; }
.nk-contact-ways a:hover { transform: translateX(6px); border-color: rgba(47, 125, 23, .5); box-shadow: 0 18px 36px -24px rgba(27, 110, 0, .5); }
.nk-cw-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--green); color: #080808; } .nk-cw-ic svg { width: 20px; height: 20px; }
.nk-contact-ways small { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mute-l); } .nk-contact-ways strong { display: block; overflow-wrap: anywhere; color: #080808; }
@media (max-width: 900px) { .nk-contact-panel { grid-template-columns: 1fr; border-radius: 22px; } .nk-contact-copy .btn { width: 100%; justify-content: center; } }
@media (max-width: 720px) { .nk-contact-ways strong { overflow-wrap: break-word; word-break: normal; font-size: .93rem; } .nk-contact-ways a { padding: 14px 16px; gap: 12px; } .nk-contact { padding-block: 56px; } }
@media (prefers-reduced-motion: reduce) { .nk-contact-ways a { transition: none; } }