/* HumanoSys homepage refinement — aligned geometry, clearer interaction. */

/* Hero: the product is rectangular, so the supporting geometry follows it. */
.hs-system-map__disc{
    width:min(43vw,570px)!important;
    aspect-ratio:1.28!important;
    border-radius:40px 120px 40px 40px!important;
    transform:translate(-50%,-50%) rotate(-7deg)!important;
    opacity:.82;
}
.hs-system-map__ring{
    width:min(47vw,630px)!important;
    aspect-ratio:1.28!important;
    border-radius:52px 140px 52px 52px!important;
    transform:translate(-50%,-50%) rotate(-4deg)!important;
    animation:hs-portal-breathe 7s ease-in-out infinite!important;
}
.hs-system-map__ring::before{
    width:82%!important;
    aspect-ratio:1.28!important;
    border-radius:36px 112px 36px 36px!important;
}
.hs-system-map__core{
    width:min(66%,460px)!important;
    transform:translate(-50%,-50%) rotate(1deg)!important;
    box-shadow:0 38px 92px rgba(0,0,0,.46),0 0 0 1px rgba(255,255,255,.025)!important;
}
.hs-system-map__media{height:292px!important}
.hs-system-map__core::before{
    content:"";position:absolute;inset:-9px;z-index:-1;border:1px solid color-mix(in srgb,var(--studio-accent) 32%,transparent);transform:translate(15px,13px);pointer-events:none
}
.hs-map-node{min-width:132px!important;padding:12px 14px!important}
.hs-map-node::before{content:"";position:absolute;top:0;left:0;width:0;height:2px;background:var(--studio-accent);transition:width .35s ease}
.hs-map-node.is-active::before{width:100%}
.hs-map-node.is-active{border-color:color-mix(in srgb,var(--studio-accent) 58%,transparent)!important;box-shadow:0 18px 52px rgba(0,0,0,.36),0 0 26px color-mix(in srgb,var(--studio-accent) 10%,transparent)!important}

/* Stack: every layer carries its own functional meaning. */
.hs-stack-stage{min-height:560px!important}
.hs-stack-tower{height:470px!important;width:390px!important}
.hs-stack-layer{
    appearance:none;border:1px solid rgba(0,0,0,.14);cursor:pointer;text-align:left;color:#fff;
    height:88px!important;width:330px!important;padding:17px 20px 13px!important;
    display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
}
.hs-stack-layer::after{content:none!important}
.hs-stack-layer__name{display:block;transform:skewY(5deg);font-size:.69rem;font-weight:820;letter-spacing:.12em;text-transform:uppercase}
.hs-stack-layer__detail{display:block;margin-top:7px;transform:skewY(5deg);font-size:.55rem;line-height:1.25;letter-spacing:.065em;text-transform:uppercase;color:rgba(255,255,255,.72);white-space:nowrap}
.hs-stack-layer:nth-child(2) .hs-stack-layer__name,.hs-stack-layer:nth-child(2) .hs-stack-layer__detail{color:#171a20}
.hs-stack-layer.is-active{transform:translateX(calc(-50% + 26px)) translateY(calc(var(--n) * 82px - 8px)) skewY(-5deg)!important;box-shadow:0 28px 58px rgba(0,0,0,.19)!important}
.hs-stack-panel{right:-1%!important;bottom:3%!important;width:286px!important;box-shadow:0 24px 60px rgba(32,30,22,.12)}
.hs-stack-tabs{max-width:520px}
.hs-stack-tab{cursor:pointer}

/* Field → Decision: one stage + one ordered control rail. */
.hs-flow-section{padding:82px 0 92px!important}
.hs-flow-head{margin-bottom:32px!important;grid-template-columns:.42fr 1.58fr!important}
.hs-flow-head h2{font-size:clamp(2.2rem,3.5vw,3.9rem)!important;max-width:700px!important}
.hs-flow-workbench{display:grid;grid-template-columns:minmax(0,1.34fr) minmax(290px,.66fr);gap:0;min-height:470px;border:1px solid rgba(17,19,24,.18);background:#111318;box-shadow:0 34px 80px rgba(73,52,0,.22);overflow:hidden}
.hs-flow-stage-card{position:relative;min-height:470px;overflow:hidden;background:#0e1116;isolation:isolate}
.hs-flow-stage-card::before{content:"";position:absolute;z-index:2;inset:0;background:linear-gradient(90deg,rgba(10,12,16,.72),transparent 48%),linear-gradient(0deg,rgba(10,12,16,.76),transparent 48%);pointer-events:none}
.hs-flow-stage-card::after{content:"";position:absolute;z-index:3;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,#f4c62f,transparent 74%)}
.hs-flow-stage-card img{width:100%;height:100%;min-height:470px;object-fit:cover;filter:saturate(.78) brightness(.64) contrast(1.05);transition:opacity .28s ease,transform .7s cubic-bezier(.2,.8,.2,1),filter .35s ease}
.hs-flow-stage-card.is-switching img{opacity:.2;transform:scale(1.035);filter:blur(2px) saturate(.7) brightness(.54)}
.hs-flow-stage-copy{position:absolute;z-index:5;left:32px;right:32px;bottom:28px;max-width:560px;color:#fff}
.hs-flow-stage-copy span{display:block;color:#f4c62f;font-size:.58rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase}
.hs-flow-stage-copy h3{margin:9px 0 8px;font-size:clamp(1.6rem,2.4vw,2.55rem);line-height:1;letter-spacing:-.045em}
.hs-flow-stage-copy p{max-width:500px;margin:0;color:#a8a49b;font-size:.8rem;line-height:1.55}
.hs-flow-steps{position:relative;display:grid;grid-template-rows:repeat(4,1fr);background:#171a20}
.hs-flow-steps::before{content:"";position:absolute;left:28px;top:12.5%;bottom:12.5%;width:1px;background:rgba(255,255,255,.09)}
.hs-flow-step{position:relative;z-index:2;display:grid;grid-template-columns:42px 1fr;align-items:center;gap:9px;padding:18px 22px;border:0;border-bottom:1px solid rgba(255,255,255,.08);background:transparent;color:#87847e;text-align:left;cursor:pointer;transition:background .28s ease,color .28s ease,transform .28s ease}
.hs-flow-step:last-child{border-bottom:0}
.hs-flow-step::before{content:"";position:absolute;left:25px;width:7px;height:7px;border-radius:50%;background:#3b3e43;border:2px solid #171a20;box-shadow:0 0 0 1px #44484e;transition:background .25s ease,box-shadow .25s ease}
.hs-flow-step span{padding-left:24px;color:#676a6f;font-size:.58rem;font-weight:800;letter-spacing:.1em}
.hs-flow-step strong{display:block;color:#d9d6cf;font-size:.83rem}
.hs-flow-step small{display:block;margin-top:4px;color:#777a7d;font-size:.63rem;line-height:1.35}
.hs-flow-step.is-active{background:#20242b;color:#fff;transform:translateX(-8px)}
.hs-flow-step.is-active::before{background:#f4c62f;box-shadow:0 0 0 4px rgba(244,198,47,.13),0 0 18px rgba(244,198,47,.28)}
.hs-flow-step.is-active span{color:#f4c62f}.hs-flow-step.is-active strong{color:#fff}.hs-flow-step.is-active small{color:#a7a49d}

/* Scope: cards become controls and the center explains the active level. */
.hs-scope-section{padding:88px 0!important}
.hs-scope-orbit{min-height:520px!important}
.hs-scope-orbit::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px;border-radius:50%;background:#f4c62f;box-shadow:0 0 18px rgba(244,198,47,.65);transform-origin:0 0;animation:hs-scope-marker 9s linear infinite}
.hs-scope-card{appearance:none;text-align:left;cursor:pointer;color:inherit}
.hs-scope-card::before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:2px;background:#f4c62f;transform:scaleY(0);transform-origin:bottom;transition:transform .3s ease}
.hs-scope-card.is-active{border-color:rgba(244,198,47,.42)!important;background:#151921!important;transform:translateY(-5px)}
.hs-scope-card.is-active::before{transform:scaleY(1)}
.hs-scope-core{width:235px;padding:22px 20px;background:rgba(12,15,20,.78);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(10px)}
.hs-scope-core img{width:38px!important;height:38px!important;margin-bottom:11px!important}
.hs-scope-core span{display:block;color:#f4c62f;font-size:.56rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.hs-scope-core strong{margin-top:7px;font-size:1rem!important}
.hs-scope-core small{display:block;margin-top:7px;line-height:1.45!important}

@keyframes hs-portal-breathe{0%,100%{opacity:.58;transform:translate(-50%,-50%) rotate(-4deg) scale(1)}50%{opacity:.9;transform:translate(-50%,-50%) rotate(-3.2deg) scale(1.012)}}
@keyframes hs-scope-marker{from{transform:rotate(0deg) translateX(215px)}to{transform:rotate(360deg) translateX(215px)}}

@media(max-width:1050px){
    .hs-system-map__disc{width:500px!important}.hs-system-map__ring{width:550px!important}
    .hs-flow-workbench{grid-template-columns:1fr}.hs-flow-steps{grid-template-columns:repeat(4,1fr);grid-template-rows:none}.hs-flow-steps::before{left:12.5%;right:12.5%;top:28px;bottom:auto;width:auto;height:1px}.hs-flow-step{grid-template-columns:1fr;padding:18px 14px 16px;text-align:center}.hs-flow-step::before{left:50%;top:24px;transform:translateX(-50%)}.hs-flow-step span{padding:18px 0 0}.hs-flow-step.is-active{transform:none}
}
@media(max-width:700px){
    .hs-system-map__disc{width:88%!important}.hs-system-map__ring{width:96%!important}.hs-system-map__core{width:72%!important}.hs-system-map__media{height:220px!important}
    .hs-stack-layer{width:280px!important}.hs-stack-layer__detail{font-size:.49rem}.hs-stack-panel{position:relative!important;right:auto!important;bottom:auto!important;margin:430px auto 0;width:min(100%,300px)!important}.hs-stack-stage{min-height:610px!important}
    .hs-flow-head{grid-template-columns:1fr!important;gap:12px!important}.hs-flow-stage-card,.hs-flow-stage-card img{min-height:380px}.hs-flow-steps{grid-template-columns:1fr 1fr}.hs-flow-steps::before{display:none}.hs-flow-step{text-align:left;grid-template-columns:34px 1fr}.hs-flow-step::before{left:18px;top:50%;transform:translateY(-50%)}.hs-flow-step span{padding:0 0 0 18px}
    .hs-scope-orbit::after{display:none}
}