.hk-hero {
  --hk-accent: var(--primary);
  --hk-size: 520px;
  --hk-head: 74px;
  --cx: 70%; --cy: 45%;
  position: relative;
  height: 100svh;
  min-height: 560px;
  margin-top: calc(-1 * var(--hk-head));
  padding: calc(var(--hk-head) + 1.25rem) 1.5rem 1.75rem;
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(60% 60% at 72% 50%, rgba(139,121,250,.14), transparent 70%),
    radial-gradient(40% 40% at 20% 80%, rgba(45,220,177,.06), transparent 70%),
    var(--bg);
}
.hk-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(520px circle at var(--cx) var(--cy), rgba(139,121,250,.09), rgba(45,220,177,.03) 42%, transparent 66%);
  opacity: 0; transition: opacity .8s;
}
.hk-hero.is-lit::before { opacity: 0; }
.hk-hero__grid {
  width: 100%;
  max-width: 1240px;
  height: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
}
.hk-hero__text { position: relative; z-index: 3; }
.hk-hero__visual { position: relative; z-index: 3; height: 100%; display: flex; flex-direction: column; justify-content: center; min-height: 0; pointer-events: none; }
.hk-hero__visual > * { pointer-events: auto; }
.hk-wheel-slot { width: var(--hk-size); max-width: 100%; aspect-ratio: 1; margin: 0 auto; flex: 0 0 auto; pointer-events: none; }

.hk-hero .hero-badges { display: inline-flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.4rem; }
.hk-hero h1 {
  font-size: clamp(2.4rem, 4.8vw, 4.3rem);
  line-height: 1.08;
  letter-spacing: -.025em;
  font-weight: 800;
  color: var(--white);
  margin: 0 0 1.1rem;
  text-wrap: balance;
}
.hk-hero h1 .accent { color: var(--primary); white-space: nowrap; }
.hk-hero h1 .accent-underline { position: relative; white-space: nowrap; }
.hk-hero h1 .accent-underline::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.02em; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transform: scaleX(0); transform-origin: left center;
  transition: transform .8s cubic-bezier(.2,.8,.2,1) .7s;
}
.hk-hero.is-ready h1 .accent-underline::after { transform: scaleX(1); }
.hk-hero .hero-lead { font-size: clamp(1.02rem, 1.5vw, 1.2rem); line-height: 1.6; color: var(--primary-2); max-width: 560px; margin: 0 0 1.8rem; }
.hk-hero__actions { display: flex; gap: .9rem; flex-wrap: wrap; }
.hk-hero__reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.hk-hero.is-ready .hk-hero__reveal { opacity: 1; transform: none; }
.hk-hero.is-ready .hk-hero__reveal:nth-child(2) { transition-delay: .1s; }
.hk-hero.is-ready .hk-hero__reveal:nth-child(3) { transition-delay: .2s; }
.hk-hero.is-ready .hk-hero__reveal:nth-child(4) { transition-delay: .3s; }

/* ---------- fixed 3D orbit layer (the wheel lives here, like the ERP page) ---------- */
#hk-orbit { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.hk-anchor { position: absolute; left: var(--ax, 50%); top: var(--ay, 50%); width: 0; height: 0; }
.hk-wheel {
  --tilt: 0deg; --sc: 1; --op: 1; --srot: 0deg; --spin: 0deg;
  position: absolute; left: 0; top: 0;
  width: var(--hk-size); height: var(--hk-size);
  transform: translate(-50%, -50%);
  perspective: 1400px;
  user-select: none; -webkit-user-select: none;
  touch-action: pan-y;
  pointer-events: auto;
  opacity: var(--op);
}
#hk-orbit.is-away .hk-wheel { pointer-events: none; }
.hk-wheel__3d {
  --rx: 0deg; --ry: 0deg;
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(calc(var(--tilt) + var(--rx))) rotateY(var(--ry)) scale(var(--sc));
  transition: transform .12s linear;
}
.hk-wheel__3d::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  transform: translateZ(-120px) scale(1.06);
  background: radial-gradient(circle, rgba(139,121,250,.22), rgba(139,121,250,.05) 55%, transparent 72%);
  animation: hkBreath 6s ease-in-out infinite;
}
.hk-layer { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; transform-style: preserve-3d; }
.hk-layer--glow { border-radius: 50%; transform: translateZ(-60px) scale(.9); background: radial-gradient(circle, rgba(13,13,39,.9), rgba(13,13,39,.4) 60%, transparent 72%); }
.hk-layer--rings { transform: translateZ(-30px) rotate(calc(var(--spin) + var(--srot))); pointer-events: none; }
.hk-layer--sectors { transform: translateZ(0) rotate(var(--spin)); }
.hk-layer--sectors.is-snap, .hk-layer--rings.is-snap { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
#hk-orbit.is-away .hk-layer--sectors, #hk-orbit.is-away .hk-layer--rings { transition: transform 1.1s cubic-bezier(.2,.8,.2,1); }
#hk-orbit.is-away .hk-sector__up { transition: transform 1.1s cubic-bezier(.2,.8,.2,1); }
.hk-layer--flow { transform: translateZ(22px); pointer-events: none; }
.hk-layer--hub { transform: translateZ(70px); pointer-events: none; animation: hkFloatB 7s ease-in-out infinite; }
.hk-layer--hub .hk-hub { pointer-events: auto; }
.hk-wheel__3d { opacity: 0; transform: rotateX(28deg) rotateY(-22deg) scale(.82); }
.hk-host.is-ready .hk-wheel__3d { opacity: 1; transform: rotateX(calc(var(--tilt) + var(--rx))) rotateY(var(--ry)) scale(var(--sc)); transition: opacity 1s ease .15s, transform 1.4s cubic-bezier(.2,.8,.2,1) .15s; }
.hk-host.is-ready.is-live .hk-wheel__3d { transition: transform .12s linear; }
.hk-wheel__3d.is-shake { animation: hkShake .32s ease-out 1; }
@keyframes hkBreath { 0%,100% { opacity: .7; transform: translateZ(-120px) scale(1.02); } 50% { opacity: 1; transform: translateZ(-120px) scale(1.1); } }
@keyframes hkFloatB { 0%,100% { transform: translateZ(70px) translateY(0); } 50% { transform: translateZ(70px) translateY(-9px); } }
@keyframes hkShake { 0% { translate: 0 0; } 25% { translate: 2px -1px; } 50% { translate: -2px 1px; } 75% { translate: 1px 1px; } 100% { translate: 0 0; } }

.hk-wheel text { font-family: var(--font-sans); fill: var(--white); text-anchor: middle; dominant-baseline: central; }
.hk-ring-outer { fill: none; stroke: var(--primary); stroke-opacity: .25; stroke-width: 1.5; stroke-dasharray: 2 6; transform-origin: 500px 500px; animation: hkSpin 90s linear infinite; }
.hk-ring-arcs { fill: none; stroke: var(--primary); stroke-opacity: .55; stroke-width: 3; stroke-dasharray: 260 520; stroke-linecap: round; transform-origin: 500px 500px; animation: hkSpin 60s linear infinite reverse; }
.hk-ring-mid { fill: none; stroke: var(--primary); stroke-opacity: .18; stroke-width: 1; }
.hk-flash { fill: none; stroke: var(--hk-accent, var(--primary)); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 2802; stroke-dashoffset: 2802; opacity: 0; transform-origin: 500px 500px; transform: rotate(-90deg); }
.hk-layer--rings.is-flash .hk-flash { animation: hkFlash .8s cubic-bezier(.2,.7,.2,1) 1; }
@keyframes hkFlash { 0% { stroke-dashoffset: 2802; opacity: .95; } 70% { stroke-dashoffset: 0; opacity: .8; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.hk-tick { stroke: var(--primary); stroke-opacity: .45; stroke-width: 1.5; }
.hk-tick.is-long { stroke-opacity: .8; stroke-width: 2; }
.hk-spoke { stroke: var(--primary); stroke-opacity: .35; stroke-width: 1.5; }
.hk-spoke-end { fill: var(--primary); fill-opacity: .7; }

.hk-sector { --mx: 0px; --my: 0px; --fx: 0px; --fy: -900px; --fr: 0deg; cursor: pointer; outline: none; transform-origin: 500px 500px; transform: translate(var(--fx), var(--fy)) rotate(var(--fr)) scale(.55); opacity: 0; transition: transform 1.1s cubic-bezier(.22,.9,.32,1.08), opacity .45s ease; }
.hk-host.is-ready .hk-sector { transform: translate(var(--mx), var(--my)) scale(1); opacity: 1; transition: transform 1.1s cubic-bezier(.22,.9,.32,1.08), opacity .45s ease; }
.hk-host.is-ready.is-live .hk-sector { transition: transform .25s cubic-bezier(.2,.8,.2,1), opacity .7s; transition-delay: 0s !important; }
.hk-sector__shape { fill: rgba(139,121,250,.09); stroke: rgba(139,121,250,.42); stroke-width: 1.6; transition: fill .35s, stroke .35s; }
.hk-sector__glow { fill: none; stroke: var(--m-color, var(--primary)); stroke-width: 10; stroke-opacity: 0; transition: stroke-opacity .35s; }
.hk-sector__up { transform: rotate(calc(-1 * var(--spin))); transform-box: fill-box; transform-origin: center; }
.hk-sector__icon { fill: none; stroke: var(--primary-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .35s; }
.hk-sector__label { font-size: 27px; font-weight: 800; letter-spacing: .12em; fill: var(--white); opacity: .85; transition: opacity .35s, fill .35s; }
.hk-sector__num { font-size: 14px; font-weight: 600; letter-spacing: .1em; fill: var(--primary-2); opacity: .55; }
.hk-sector:hover .hk-sector__shape, .hk-sector:focus-visible .hk-sector__shape { fill: rgba(139,121,250,.2); stroke: rgba(139,121,250,.75); }
.hk-host.is-ready .hk-sector.is-active { transform: translate(var(--mx), var(--my)) scale(1.035); }
.hk-sector.is-active .hk-sector__shape { fill: color-mix(in srgb, var(--m-color, var(--primary)) 22%, rgba(13,13,39,.4)); stroke: var(--m-color, var(--primary)); }
.hk-sector.is-active .hk-sector__glow { stroke-opacity: .16; }
.hk-sector.is-active .hk-sector__icon { stroke: var(--white); }
.hk-sector.is-active .hk-sector__label { opacity: 1; }

.hk-flow__line { fill: none; stroke: var(--m-color, var(--primary)); stroke-opacity: .16; stroke-width: 1.5; stroke-dasharray: 6 10; animation: hkDashFlow 1.6s linear infinite; }
.hk-flow__dot { fill: var(--m-color, var(--primary)); opacity: .55; }
.hk-flow__dot.x { opacity: 0; }
.hk-flow.is-active .hk-flow__line { stroke-opacity: .55; stroke-width: 2.2; animation-duration: .7s; }
.hk-flow.is-active .hk-flow__dot { opacity: 1; }
.hk-flow.is-active .hk-flow__dot.x { opacity: .9; }
@keyframes hkDashFlow { to { stroke-dashoffset: -32; } }

.hk-hub { cursor: pointer; outline: none; }
.hk-hub__bg { fill: #0b0b24; stroke: rgba(139,121,250,.35); stroke-width: 1.5; }
.hk-hub__ring { fill: none; stroke: var(--hk-accent); stroke-width: 4; stroke-opacity: .85; transition: stroke .5s; transform-origin: 500px 500px; }
.hk-hub.is-pop .hk-hub__ring { animation: hkPop .5s ease-out 1; }
@keyframes hkPop { 0% { transform: scale(1); } 40% { transform: scale(1.05); } 100% { transform: scale(1); } }
.hk-hub__ring2 { fill: none; stroke: var(--hk-accent); stroke-width: 1; stroke-opacity: .35; stroke-dasharray: 4 8; transform-origin: 500px 500px; animation: hkSpin 40s linear infinite; transition: stroke .5s; }
.hk-hub__halo { fill: var(--hk-accent); fill-opacity: .07; transition: fill .5s, fill-opacity .3s; }
.hk-hub:hover .hk-hub__halo, .hk-hub:focus-visible .hk-hub__halo { fill-opacity: .14; }

/* ---------- scenes: per-module enter/exit ---------- */
.hk-scene { opacity: 0; transform: translate(500px, 500px) scale(.92); transform-origin: 0 0; transition: opacity .45s ease, transform .6s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.hk-scene.is-on { opacity: 1; transform: translate(500px, 500px); }
.hk-scene:not(.is-on) * { animation-play-state: paused !important; }
.hk-scene.is-leaving * { animation-play-state: running !important; }
.hk-scene text { font-weight: 700; }
.hk-scene[data-m="tms"]:not(.is-on) { transform: translate(500px, 500px) translateX(-320px); }
.hk-scene[data-m="tms"].is-leaving { transform: translate(500px, 500px) translateX(340px); transition-timing-function: cubic-bezier(.5,0,.9,.4); }
.hk-scene[data-m="wms"]:not(.is-on) { transform: translate(500px, 500px) translateY(240px) scale(.9); }
.hk-scene[data-m="wms"].is-leaving { transform: translate(500px, 500px) translateY(-260px) scale(.9); }
.hk-scene[data-m="fms"]:not(.is-on) { transform: translate(500px, 610px) scaleY(.05) translateY(-110px); }
.hk-scene[data-m="fms"].is-leaving { transform: translate(500px, 560px) scaleY(.05) translateY(-110px); }
.hk-scene[data-m="crm"]:not(.is-on) { transform: translate(500px, 500px) scale(.2) rotate(-40deg); }
.hk-scene[data-m="crm"].is-leaving { transform: translate(500px, 500px) scale(1.9) rotate(20deg); }
.hk-scene[data-m="dms"]:not(.is-on) { transform: translate(500px, 500px) translateY(-300px) rotate(-8deg); }
.hk-scene[data-m="dms"].is-leaving { transform: translate(500px, 500px) translateY(300px) rotate(8deg); }
.hk-scene[data-m="ams"]:not(.is-on) { transform: translate(500px, 500px) scale(1.7); }
.hk-scene[data-m="ams"].is-leaving { transform: translate(500px, 500px) scale(.3); }
.hk-logo { transition: opacity .45s, transform .6s cubic-bezier(.2,.8,.2,1); transform-origin: 500px 500px; }
.hk-logo.is-off { opacity: 0; transform: scale(.6); }
.hk-logo-t { font-size: 15px; font-weight: 700; letter-spacing: .3em; fill: var(--primary-2); }

/* ---------- caption ---------- */
.hk-caption { position: relative; margin: .8rem auto 0; max-width: 540px; min-height: 8.2rem; text-align: center; flex: 0 0 auto; }
.hk-caption__in { transition: opacity .35s, transform .35s; }
.hk-caption.is-swapping .hk-caption__in { opacity: 0; transform: translateY(8px); }
.hk-caption__tag {
  display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--hk-accent); border: 1px solid color-mix(in srgb, var(--hk-accent) 45%, transparent);
  background: color-mix(in srgb, var(--hk-accent) 12%, transparent);
  padding: .22rem .6rem; border-radius: 999px; margin-bottom: .5rem; transition: color .5s, border-color .5s, background .5s;
}
.hk-caption__title { display: block; color: var(--white); font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; margin-bottom: .25rem; }
.hk-caption__text { color: var(--primary-2); font-size: .9rem; line-height: 1.5; margin: 0 0 .55rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hk-stats { display: flex; justify-content: center; gap: 1.6rem; margin: 0 0 .55rem; }
.hk-stat b { display: block; font-size: 1.35rem; font-weight: 800; color: var(--white); letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hk-stat b em { font-style: normal; color: var(--hk-accent); }
.hk-stat span { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--primary-2); }
.hk-caption__row { display: flex; justify-content: center; align-items: center; gap: 1.1rem; }
.hk-caption__link { color: var(--white); font-weight: 700; font-size: .9rem; text-decoration: none; border-bottom: 1px solid var(--hk-accent); transition: border-color .5s; }
.hk-caption__link:hover { color: var(--hk-accent); }
.hk-caption__zoom { font: inherit; font-size: .82rem; font-weight: 600; color: var(--primary-2); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: .28rem .8rem; cursor: pointer; transition: color .3s, border-color .3s; }
.hk-caption__zoom:hover { color: var(--white); border-color: var(--hk-accent); }
.hk-story { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-top: .7rem; font-size: .82rem; color: var(--primary-2); animation: hkFadeIn .5s both; }
.hk-story i { font-style: normal; font-size: .68rem; font-weight: 800; letter-spacing: .12em; color: var(--accent); border: 1px solid var(--accent-soft); background: var(--accent-soft); padding: .12rem .5rem; border-radius: 999px; white-space: nowrap; }
.hk-story span { position: relative; }
.hk-story span::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: linear-gradient(90deg, var(--accent), transparent); transform-origin: left; animation: hkBar var(--hk-step, 5s) linear forwards; }
@keyframes hkBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hkFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.hk-dots { display: flex; justify-content: center; gap: .45rem; margin-top: .55rem; }
.hk-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(155,152,212,.35); transition: background .3s, transform .3s; cursor: pointer; }
.hk-dots i.is-on { background: var(--hk-accent); transform: scale(1.35); }

/* ---------- following sections slide over the orbit ---------- */
.hk-curtain { position: relative; z-index: 2; }
.hk-curtain > section { background: rgba(7,7,26,.72); }
.hk-curtain > section.alt { background: rgba(11,11,33,.86); }

/* ---------- expand card ---------- */
.hk-expand { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1.5rem; }
.hk-expand__backdrop { position: absolute; inset: 0; background: rgba(4,4,16,.72); opacity: 0; transition: opacity .35s; }
.hk-expand.is-open .hk-expand__backdrop { opacity: 1; }
.hk-expand__card {
  position: relative; width: min(920px, 100%); max-height: calc(100svh - 3rem);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1.5rem;
  background: linear-gradient(160deg, #14123a, #0b0b24);
  border: 1px solid rgba(139,121,250,.35); border-radius: 22px; padding: 1.75rem;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  transform-origin: 0 0; opacity: 0;
  transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .35s;
  overflow: auto;
}
.hk-expand.is-open .hk-expand__card { opacity: 1; transform: none !important; }
.hk-expand__close { position: absolute; top: .7rem; right: .8rem; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--white); font-size: 1.4rem; line-height: 1; cursor: pointer; z-index: 2; }
.hk-expand__close:hover { border-color: var(--hk-accent); color: var(--hk-accent); }
.hk-expand__scene { position: relative; aspect-ratio: 1; align-self: center; border-radius: 50%; background: radial-gradient(circle, #0b0b24 60%, rgba(11,11,36,0) 72%); border: 2px solid var(--hk-accent); box-shadow: 0 0 0 10px color-mix(in srgb, var(--hk-accent) 10%, transparent); overflow: hidden; }
.hk-expand__scene svg { width: 100%; height: 100%; display: block; }
.hk-expand__scene .hk-scene { opacity: 1; transform: translate(500px, 500px); }
.hk-expand__body { display: flex; flex-direction: column; justify-content: center; gap: .6rem; }
.hk-expand__body h2 { color: var(--white); font-size: clamp(1.4rem, 2.4vw, 2rem); letter-spacing: -.02em; margin: 0; line-height: 1.15; }
.hk-expand__text { color: var(--primary-2); font-size: .98rem; line-height: 1.6; margin: 0; }
.hk-expand__feats { list-style: none; margin: .4rem 0 .8rem; padding: 0; display: grid; gap: .55rem; }
.hk-expand__feats li { display: grid; grid-template-columns: 40px 1fr; gap: .8rem; align-items: start; opacity: 0; transform: translateX(14px); animation: hkFeat .5s cubic-bezier(.2,.8,.2,1) forwards; }
.hk-expand__feats li:nth-child(2) { animation-delay: .1s; } .hk-expand__feats li:nth-child(3) { animation-delay: .2s; }
@keyframes hkFeat { to { opacity: 1; transform: none; } }
.hk-expand__feats i { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--hk-accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--hk-accent) 40%, transparent); color: var(--hk-accent); }
.hk-expand__feats i svg { width: 20px; height: 20px; }
.hk-expand__feats b { display: block; color: var(--white); font-size: .95rem; }
.hk-expand__feats span { color: var(--primary-2); font-size: .85rem; line-height: 1.45; }
.hk-expand__cta { align-self: flex-start; }

/* ---------- light skin ---------- */
html[data-skin="light"] .hk-hero { background: radial-gradient(60% 60% at 72% 50%, rgba(73,63,219,.10), transparent 70%), var(--bg); }
html[data-skin="light"] .hk-hero::before { background: radial-gradient(560px circle at var(--cx) var(--cy), rgba(73,63,219,.10), rgba(45,220,177,.05) 42%, transparent 66%); }
html[data-skin="light"] .hk-layer--glow { background: radial-gradient(circle, rgba(255,255,255,.95), rgba(255,255,255,.5) 60%, transparent 72%); }
html[data-skin="light"] .hk-wheel__3d::before { background: radial-gradient(circle, rgba(73,63,219,.14), rgba(73,63,219,.04) 55%, transparent 72%); }
html[data-skin="light"] .hk-sector__shape { fill: rgba(255,255,255,.72); stroke: rgba(73,63,219,.3); }
html[data-skin="light"] .hk-sector:hover .hk-sector__shape { fill: rgba(255,255,255,.95); stroke: rgba(73,63,219,.6); }
html[data-skin="light"] .hk-sector.is-active .hk-sector__shape { fill: color-mix(in srgb, var(--m-color, var(--primary)) 16%, #fff); }
html[data-skin="light"] .hk-sector__icon { stroke: #4B4A6A; }
html[data-skin="light"] .hk-sector.is-active .hk-sector__icon { stroke: #12122B; }
html[data-skin="light"] .hk-hub__bg { fill: #FFFFFF; stroke: rgba(73,63,219,.25); }
html[data-skin="light"] .hk-expand__card { background: linear-gradient(160deg, #FFFFFF, #ECECF5); border-color: rgba(73,63,219,.25); }
html[data-skin="light"] .hk-expand__scene { background: radial-gradient(circle, #fff 60%, rgba(255,255,255,0) 72%); }
html[data-skin="light"] .hk-expand__close { background: rgba(18,18,43,.04); }
html[data-skin="light"] .hk-curtain > section { background: rgba(244,244,249,.8); }
html[data-skin="light"] .hk-curtain > section.alt { background: rgba(236,236,245,.9); }
html[data-skin="light"] .sc-road { fill: #D9D9EA; }
html[data-skin="light"] .sc-lane { stroke: rgba(18,18,43,.5); }
html[data-skin="light"] .sc-trailer, html[data-skin="light"] .sc-folder, html[data-skin="light"] .sc-doc, html[data-skin="light"] .sc-node, html[data-skin="light"] .sc-score-bg { fill: #F4F4F9; }
html[data-skin="light"] .sc-wheel, html[data-skin="light"] .sc-pin { fill: #fff; }
html[data-skin="light"] .sc-rim, html[data-skin="light"] .sc-person { stroke: #12122B; }
html[data-skin="light"] .sc-glass { fill: #12122B; opacity: .35; }
html[data-skin="light"] .sc-stamp path { stroke: #fff; }
html[data-skin="light"] .sc-cab { fill: var(--primary-deco); }

/* ---------- keyframes shared by scenes ---------- */
@keyframes hkSpin { to { transform: rotate(360deg); } }
@keyframes hkDash { to { stroke-dashoffset: -84; } }
@keyframes hkDraw { from { stroke-dashoffset: 900; } 45% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
@keyframes hkBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
@keyframes hkPulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.2); opacity: 0; } }
@keyframes hkGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes hkFade { 0%,60% { opacity: 0; } 100% { opacity: 1; } }
@keyframes hkFork { 0%,8% { transform: translateX(-150px); } 42%,58% { transform: translateX(120px); } 92%,100% { transform: translateX(-150px); } }
@keyframes hkLift { 0%,10% { transform: translateY(0); } 40%,60% { transform: translateY(-62px); } 90%,100% { transform: translateY(0); } }
@keyframes hkPick { 0%,70%,100% { fill: rgba(139,121,250,.22); stroke: rgba(139,121,250,.7); } 80%,90% { fill: rgba(45,220,177,.55); stroke: #2DDCB1; } }
@keyframes hkScan { 0% { transform: translateY(-95px); opacity: 0; } 8% { opacity: .75; } 60% { transform: translateY(75px); opacity: .75; } 70%,100% { transform: translateY(75px); opacity: 0; } }
@keyframes hkStamp { 0%,62% { transform: scale(0); opacity: 0; } 72% { transform: scale(1.18); opacity: 1; } 78%,100% { transform: scale(1); opacity: 1; } }
@keyframes hkDocUp { 0%,55% { transform: translateY(0); } 65%,100% { transform: translateY(-14px); } }
@keyframes hkBlink { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes hkOrbitA { 0%,100% { transform: translate(0,0); } 33% { transform: translate(28px,-18px); } 66% { transform: translate(-12px,22px); } }
@keyframes hkOrbitB { 0%,100% { transform: translate(0,0); } 33% { transform: translate(-24px,16px); } 66% { transform: translate(18px,-26px); } }
@keyframes hkOrbitC { 0%,100% { transform: translate(0,0); } 50% { transform: translate(20px,24px); } }
@keyframes hkBall { 0% { transform: translate(-90px,-10px); } 35% { transform: translate(-10px,30px); } 70% { transform: translate(70px,-20px); } 100% { transform: translate(-90px,-10px); } }
@keyframes hkShine { 0%,100% { opacity: .2; } 50% { opacity: .8; } }

.sc-route { fill: none; stroke: var(--accent-deco, var(--accent)); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 900; animation: hkDraw 5s ease-in-out infinite; }
.sc-pin { fill: var(--bg-2); stroke: var(--accent-deco, var(--accent)); stroke-width: 3; }
.sc-pin-pulse { fill: none; stroke: var(--accent-deco, var(--accent)); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: hkPulse 2.4s ease-out infinite; }
.sc-road { fill: #191742; }
.sc-lane { stroke: rgba(255,255,255,.55); stroke-width: 4; stroke-dasharray: 34 50; animation: hkDash 1.1s linear infinite; }
.sc-truck { animation: hkBob 1.1s ease-in-out infinite; }
.sc-glass { fill: #d8f7ef; opacity: .9; }
.sc-wheel { fill: #0b0b24; stroke: var(--primary-2); stroke-width: 4; }
.sc-rim { transform-origin: 0 0; }

.sc-rack { stroke: var(--primary); stroke-opacity: .7; stroke-width: 3; fill: none; }
.sc-box { fill: rgba(139,121,250,.22); stroke: rgba(139,121,250,.7); stroke-width: 2; }
.sc-box.pk { animation: hkPick 6s linear infinite; }
.sc-box.pk.d1 { animation-delay: -1.5s; } .sc-box.pk.d2 { animation-delay: -3s; } .sc-box.pk.d3 { animation-delay: -4.5s; }
.sc-floor { stroke: rgba(155,152,212,.45); stroke-width: 2; }
.sc-fork { animation: hkFork 8s ease-in-out infinite; }
.sc-fork-body { fill: var(--accent-deco, var(--accent)); stroke: #7cf0d4; stroke-width: 2; }
.sc-fork-mast { stroke: var(--primary-2); stroke-width: 5; stroke-linecap: round; }
.sc-fork-load { animation: hkLift 8s ease-in-out infinite; }
.sc-fork-tine { stroke: var(--white); stroke-width: 3; stroke-linecap: round; }

.sc-axis { stroke: rgba(155,152,212,.5); stroke-width: 2; }
.sc-grid { stroke: rgba(155,152,212,.16); stroke-width: 1; }
.sc-bar { fill: rgba(139,121,250,.35); stroke: var(--primary); stroke-width: 2; transform-box: fill-box; transform-origin: bottom; animation: hkGrow 1.1s cubic-bezier(.2,.8,.2,1) both; }
.sc-bar.b2 { animation-delay: .15s; } .sc-bar.b3 { animation-delay: .3s; } .sc-bar.b4 { animation-delay: .45s; } .sc-bar.b5 { animation-delay: .6s; fill: rgba(45,220,177,.35); stroke: var(--accent-deco, var(--accent)); }
.sc-line { fill: none; stroke: var(--accent-deco, var(--accent)); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 900; animation: hkDraw 3.2s ease-out both; }
.sc-dot { fill: var(--accent-deco, var(--accent)); stroke: var(--bg); stroke-width: 2; animation: hkFade 1.6s both; }
.sc-kpi { fill: var(--accent); font-size: 30px; animation: hkFade 2.4s both; }
.sc-kpi-l { fill: var(--primary-2); font-size: 15px; font-weight: 600; letter-spacing: .1em; animation: hkFade 2.4s both; }
.sc-coin { fill: rgba(45,220,177,.12); stroke: var(--accent-deco, var(--accent)); stroke-width: 3; }
.sc-coin-t { fill: var(--accent); font-size: 26px; }

.sc-net-line { stroke: var(--primary); stroke-opacity: .5; stroke-width: 2; }
.sc-node { fill: #12103a; stroke: var(--primary); stroke-width: 2.5; }
.sc-node.c { stroke: var(--accent-deco, var(--accent)); stroke-width: 3; fill: rgba(45,220,177,.12); }
.sc-node-pulse { fill: none; stroke: var(--primary); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: hkPulse 3s ease-out infinite; }
.sc-person { fill: none; stroke: var(--white); stroke-width: 2.2; stroke-linecap: round; }
.sc-packet { fill: var(--accent-deco, var(--accent)); }

.sc-folder { fill: #1c1a4a; stroke: var(--primary); stroke-width: 2.5; }
.sc-doc { fill: #14123a; stroke: var(--primary); stroke-width: 2.5; }
.sc-doc-front { animation: hkDocUp 5s ease-in-out infinite; }
.sc-doc-line { stroke: var(--primary-2); stroke-width: 3; stroke-linecap: round; opacity: .7; }
.sc-scan { fill: var(--accent-deco, var(--accent)); animation: hkScan 5s ease-in-out infinite; }
.sc-stamp { transform-box: fill-box; transform-origin: center; animation: hkStamp 5s ease-out infinite; }
.sc-stamp circle { fill: var(--accent-deco, var(--accent)); }
.sc-stamp path { fill: none; stroke: var(--bg); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.sc-ocr { fill: var(--accent); font-size: 14px; letter-spacing: .2em; animation: hkBlink 1.6s ease-in-out infinite; }

.sc-pitch { fill: rgba(45,220,177,.07); stroke: var(--accent-deco, var(--accent)); stroke-opacity: .7; stroke-width: 2.5; }
.sc-pitch-l { fill: none; stroke: var(--accent-deco, var(--accent)); stroke-opacity: .5; stroke-width: 2; }
.sc-player { stroke: var(--bg); stroke-width: 2; }
.sc-player.a { fill: var(--primary); } .sc-player.b { fill: var(--accent-deco, var(--accent)); }
.sc-player.oa { animation: hkOrbitA 4s ease-in-out infinite; } .sc-player.ob { animation: hkOrbitB 5s ease-in-out infinite; } .sc-player.oc { animation: hkOrbitC 3.4s ease-in-out infinite; }
.sc-ball { fill: var(--white); animation: hkBall 4.2s ease-in-out infinite; }
.sc-trophy { fill: rgba(246,210,75,.18); stroke: #F6D24B; stroke-width: 2.5; stroke-linejoin: round; }
.sc-trophy-shine { fill: #F6D24B; animation: hkShine 2s ease-in-out infinite; }
.sc-score { fill: var(--white); font-size: 22px; letter-spacing: .12em; }
.sc-score-bg { fill: #14123a; stroke: var(--primary); stroke-width: 2; }

/* ---------- responsive ---------- */
@media (max-height: 820px) {
  .hk-hero h1 { font-size: clamp(2rem, 3.8vw, 3.2rem); margin-bottom: .8rem; }
  .hk-hero .hero-lead { font-size: 1rem; margin-bottom: 1.2rem; }
  .hk-hero .hero-badges { margin-bottom: .9rem; }
}
@media (max-width: 1080px) {
  .hk-hero { height: auto; min-height: 100svh; }
  .hk-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; text-align: center; height: auto; }
  .hk-hero .hero-lead { margin-left: auto; margin-right: auto; }
  .hk-hero__actions { justify-content: center; }
  .hk-hero__visual { height: auto; }
  .hk-wheel-slot { width: min(100%, 520px); }
  .hk-expand__card { grid-template-columns: 1fr; padding: 1.25rem; }
  .hk-expand__scene { max-width: 260px; margin: 0 auto; }
}
@media (max-width: 640px) {
  .hk-sector__label { font-size: 30px; }
  .hk-stats { gap: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hk-hero *, .hk-hero *::after, .hk-hero *::before, #hk-orbit *, #hk-orbit *::before, .hk-expand * { animation: none !important; transition: none !important; }
  .hk-hero .hk-hero__reveal { opacity: 1; transform: none; }
  #hk-orbit .hk-sector { opacity: 1; transform: none; }
  .hk-wheel__3d { opacity: 1; transform: none; }
  .hk-scene:not(.is-on) { display: none; }
}

/* ---------- live homepage integration (home-bg aurora + fixed wheel) ---------- */
.has-bgfx section.hk-hero { z-index: auto; background: transparent; }
.has-bgfx section:not(.hk-hero) { background: rgba(7,7,26,.62); }
.has-bgfx section.alt:not(.hk-hero) { background: rgba(13,13,39,.8); }
html[data-skin="light"] .has-bgfx section:not(.hk-hero) { background: rgba(244,244,249,.8); }
html[data-skin="light"] .has-bgfx section.alt:not(.hk-hero) { background: rgba(236,236,245,.9); }

.hk-expand[hidden] { display: none; }

.hk-logo__img--light { display: none; }
html[data-skin="light"] .hk-logo__img--dark { display: none; }
html[data-skin="light"] .hk-logo__img--light { display: inline; }

/* ---------- module background films ---------- */
.hk-hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hk-bg__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1.1s ease, transform 6s ease-out; will-change: opacity; }
.hk-bg__v.is-on { opacity: .38; transform: scale(1); }
.hk-bg__v.is-vivid.is-on { opacity: .6; }
.hk-bg__shade { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(7,7,26,.92) 0%, rgba(7,7,26,.72) 42%, rgba(7,7,26,.55) 100%),
  linear-gradient(180deg, rgba(7,7,26,.85) 0%, rgba(7,7,26,.25) 30%, rgba(7,7,26,.35) 70%, var(--bg) 100%); }
.hk-hero::before { z-index: 1; }
.hk-hero__grid { position: relative; }
html[data-skin="light"] .hk-bg__v.is-on { opacity: .28; }
html[data-skin="light"] .hk-bg__shade { background:
  linear-gradient(90deg, rgba(244,244,249,.94) 0%, rgba(244,244,249,.78) 42%, rgba(244,244,249,.6) 100%),
  linear-gradient(180deg, rgba(244,244,249,.9) 0%, rgba(244,244,249,.3) 30%, rgba(244,244,249,.4) 70%, var(--bg) 100%); }
@media (prefers-reduced-motion: reduce) { .hk-bg__v { display: none; } }

/* ---------- CSS3D particle field (idle background) ---------- */
.hk-particles { --pmx: 0; --pmy: 0; position: absolute; inset: 0; perspective: 900px; transform-style: preserve-3d; opacity: 1; transition: opacity 1.2s ease; }
.hk-hero.has-film .hk-particles { opacity: 0; }
.hk-pl { position: absolute; inset: -12%; transform-style: preserve-3d; transform: translate3d(calc(var(--pmx) * var(--d) * 1px), calc(var(--pmy) * var(--d) * 1px), var(--z)); transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.hk-pl__in { position: absolute; inset: 0; animation: hkDrift var(--dur, 46s) ease-in-out infinite alternate; }
.hk-pl__in span { position: absolute; width: var(--s, 3px); height: var(--s, 3px); border-radius: 50%; background: var(--c, var(--primary)); box-shadow: 0 0 8px var(--c, var(--primary)); opacity: .12; animation: hkTwinkle var(--t, 5s) ease-in-out infinite; animation-delay: var(--dl, 0s); }
.hk-pl__in i { position: absolute; width: 1px; height: var(--h, 60px); background: linear-gradient(180deg, transparent, var(--primary), transparent); opacity: .18; }
@keyframes hkDrift { from { transform: translate3d(-2.5%, -1.5%, 0) rotate(-1.2deg); } to { transform: translate3d(2.5%, 1.5%, 0) rotate(1.2deg); } }
@keyframes hkTwinkle { 0%, 100% { opacity: .1; transform: scale(.8); } 50% { opacity: .75; transform: scale(1.25); } }
html[data-skin="light"] .hk-pl__in span { opacity: .1; }
@media (max-width: 640px) { .hk-pl:nth-child(3) { display: none; } }
@media (prefers-reduced-motion: reduce) { .hk-pl__in, .hk-pl__in span { animation: none !important; } .hk-pl__in span { opacity: .35; } }

/* ---------- tablet/mobile: wheel lives in the slot (no fixed layer, no scroll work) ---------- */
.hk-wheel-slot.is-host { position: relative; pointer-events: auto; }
.hk-wheel-slot.is-host .hk-wheel { left: 50%; top: 50%; }
.hk-wheel-slot.is-host .hk-wheel__3d::before, .hk-wheel-slot.is-host .hk-layer--hub { animation: none; }
@media (hover: none) { .hk-caption__zoom, .hk-expand__close { font-size: 16px; } }
.hk-caption__zoom, .hk-expand__close, .hk-dots i { touch-action: manipulation; }

.sc-speed line { stroke: #8B79FA; stroke-opacity: .55; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 20 60; animation: hkSpeed .7s linear infinite; }
.sc-speed line:nth-child(2) { animation-delay: -.25s; } .sc-speed line:nth-child(3) { animation-delay: -.5s; }
@keyframes hkSpeed { to { stroke-dashoffset: -80; } }
.sc-tyre { fill: #0b0b24; stroke: #2a2860; stroke-width: 5; }
.sc-rimc { fill: #cfc8ff; stroke: #8B79FA; stroke-width: 1.5; }
.sc-rim { stroke: #5a4be0; stroke-width: 2; stroke-linecap: round; animation: hkSpin .45s linear infinite; }
.sc-trailer { fill: #1f1c4d; stroke: #8B79FA; stroke-width: 2.5; }
.sc-cab { fill: #6f5cf0; stroke: #b3a7ff; stroke-width: 2; }
html[data-skin="light"] .sc-tyre { fill: #ffffff; stroke: #4B4A6A; }
html[data-skin="light"] .sc-rimc { fill: #ECECF5; }

/* ---------- scrolled moods: side position + panel morph ---------- */
#hk-orbit.is-away .hk-anchor { transition: left .95s cubic-bezier(.2,.7,.2,1), top .95s cubic-bezier(.2,.7,.2,1); }
.hk-hub__bg, .hk-hub__ring, .hk-clip-r { transition: x .9s cubic-bezier(.2,.8,.2,1), y .9s cubic-bezier(.2,.8,.2,1), width .9s cubic-bezier(.2,.8,.2,1), height .9s cubic-bezier(.2,.8,.2,1), rx .9s cubic-bezier(.2,.8,.2,1), stroke .5s; }
#hk-orbit.is-panel .hk-hub__bg { x: 150px; y: 290px; width: 700px; height: 420px; rx: 26px; }
#hk-orbit.is-panel .hk-hub__ring { x: 144px; y: 284px; width: 712px; height: 432px; rx: 30px; }
#hk-orbit.is-panel .hk-clip-r { x: 156px; y: 296px; width: 688px; height: 340px; rx: 22px; }
#hk-orbit.is-panel .hk-hub__ring2, #hk-orbit.is-panel .hk-hub__halo, #hk-orbit.is-panel .hk-layer--flow { opacity: 0; transition: opacity .5s; }
#hk-orbit.is-panel .hk-layer--sectors .hk-sector { opacity: 0 !important; transform: scale(.35) rotate(var(--fr)) !important; transition: transform .8s cubic-bezier(.6,0,.8,.4), opacity .5s !important; pointer-events: none; }
#hk-orbit.is-panel .hk-layer--rings { opacity: .35; transition: opacity .6s; }
#hk-orbit.is-panel #hk-ticks, #hk-orbit.is-panel #hk-spokes { opacity: .3; }
#hk-orbit.is-panel #hk-scenes { transform: translate(0, -25px); transition: transform .9s cubic-bezier(.2,.8,.2,1); }
#hk-scenes { transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.hk-panel { opacity: 0; transition: opacity .5s; pointer-events: none; }
#hk-orbit.is-panel .hk-panel { opacity: 1; transition-delay: .5s; }
.hk-panel__bar { fill: rgba(7,7,26,.55); }
.hk-panel__t { font-size: 22px; font-weight: 800; letter-spacing: .12em; fill: var(--white); text-anchor: start; }
.hk-panel__lt { font-size: 14px; font-weight: 800; letter-spacing: .2em; fill: #ff5a6a; text-anchor: start; }
.hk-panel__live { fill: #ff5a6a; animation: hkBlink 1.2s ease-in-out infinite; }
html[data-skin="light"] .hk-panel__bar { fill: rgba(244,244,249,.7); }