/* HumanoSys art-directed homepage */

.hs-studio-home { background:#0a0c10; color:#f4f1e8; overflow:hidden; }
.hs-studio-home section { position:relative; }

.hs-studio-hero {
    --studio-accent:#f4c62f;
    min-height:88svh;
    display:grid;
    align-items:center;
    padding:116px 0 62px;
    background:
        radial-gradient(circle at 76% 38%,color-mix(in srgb,var(--studio-accent) 11%,transparent),transparent 27%),
        linear-gradient(145deg,#090b0f 0%,#0d1117 62%,#090b0f 100%);
    overflow:hidden;
}

.hs-studio-hero::before {
    content:"";
    position:absolute;
    inset:0;
    background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
    background-size:78px 78px;
    mask-image:linear-gradient(to bottom,#000,transparent 92%);
    pointer-events:none;
}

.hs-studio-hero__grid {
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:minmax(0,.78fr) minmax(480px,1.22fr);
    align-items:center;
    gap:clamp(46px,6vw,92px);
}

.hs-studio-kicker {
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:18px;
    color:#96938d;
    font-size:.61rem;
    font-weight:800;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.hs-studio-kicker i { width:32px; height:1px; background:var(--studio-accent); }

.hs-studio-copy h1 {
    max-width:620px;
    margin:0;
    color:#f7f4ec;
    font-size:clamp(3rem,4.8vw,5.15rem);
    line-height:.95;
    font-weight:610;
    letter-spacing:-.068em;
}

.hs-studio-copy h1 em { color:var(--studio-accent); font-style:normal; }

.hs-studio-copy__lower {
    max-width:520px;
    margin-top:25px;
    padding-top:22px;
    border-top:1px solid rgba(255,255,255,.1);
}

.hs-studio-copy__lower p {
    margin:0 0 24px;
    color:#a09d96;
    font-size:.92rem;
    line-height:1.68;
}

.hs-studio-actions { display:flex; flex-wrap:wrap; gap:16px; align-items:center; }

.hs-studio-proof {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:9px 24px;
    margin-top:30px;
    color:#74716b;
    font-size:.62rem;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.hs-studio-proof span { display:flex; align-items:center; gap:8px; }
.hs-studio-proof b { color:var(--studio-accent); font-size:.58rem; }

/* Hero system map */
.hs-system-map {
    position:relative;
    min-height:620px;
    isolation:isolate;
}

.hs-system-map__disc {
    position:absolute;
    left:50%;
    top:50%;
    width:min(34vw,500px);
    aspect-ratio:1;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:var(--studio-accent);
    box-shadow:0 0 120px color-mix(in srgb,var(--studio-accent) 13%,transparent);
    transition:background .55s ease,box-shadow .55s ease;
}

.hs-system-map__ring,
.hs-system-map__ring::before {
    position:absolute;
    left:50%; top:50%;
    transform:translate(-50%,-50%);
    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;
    content:"";
}

.hs-system-map__ring { width:min(42vw,600px); aspect-ratio:1; animation:hs-studio-spin 30s linear infinite; }
.hs-system-map__ring::before { width:74%; aspect-ratio:1; border-style:dashed; }

.hs-system-map__core {
    position:absolute;
    z-index:4;
    left:50%; top:50%;
    width:min(62%,430px);
    transform:translate(-50%,-50%) rotate(-1.5deg);
    border:1px solid rgba(255,255,255,.12);
    background:#0d1015;
    box-shadow:0 35px 90px rgba(0,0,0,.42);
    transition:transform .45s cubic-bezier(.2,.8,.2,1);
}

.hs-system-map__top,
.hs-system-map__bottom {
    min-height:42px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:0 14px;
    color:#817e78;
    font-size:.57rem;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.hs-system-map__top strong { color:var(--studio-accent); font-weight:800; }

.hs-system-map__media { position:relative; height:280px; overflow:hidden; background:#11151b; }
.hs-system-map__media img {
    width:100%; height:100%; object-fit:cover;
    filter:saturate(.76) brightness(.72) contrast(1.06);
    transition:opacity .28s ease,transform .65s cubic-bezier(.2,.8,.2,1),filter .45s ease;
}
.hs-system-map__core.is-switching .hs-system-map__media img { opacity:.18; transform:scale(1.035); }

.hs-system-map__caption {
    position:absolute;
    inset:auto 0 0;
    padding:50px 18px 17px;
    background:linear-gradient(transparent,rgba(7,9,12,.94));
}

.hs-system-map__caption small { display:block; color:var(--studio-accent); font-size:.58rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.hs-system-map__caption strong { display:block; margin-top:6px; color:#fff; font-size:1.25rem; letter-spacing:-.035em; }
.hs-system-map__caption p { margin:6px 0 0; color:#96938d; font-size:.73rem; line-height:1.45; }

.hs-map-node {
    position:absolute;
    z-index:6;
    min-width:118px;
    padding:10px 12px;
    border:1px solid rgba(255,255,255,.11);
    background:rgba(8,10,13,.82);
    color:#dbd7cf;
    backdrop-filter:blur(10px);
    box-shadow:0 16px 42px rgba(0,0,0,.28);
    cursor:pointer;
    transition:transform .25s ease,border-color .25s ease,background .25s ease;
}

.hs-map-node span { display:block; color:#6f6c66; font-size:.54rem; font-weight:800; letter-spacing:.12em; }
.hs-map-node strong { display:block; margin-top:5px; font-size:.76rem; font-weight:700; }
.hs-map-node::after { content:""; position:absolute; width:6px; height:6px; border-radius:50%; background:var(--studio-accent); box-shadow:0 0 16px color-mix(in srgb,var(--studio-accent) 50%,transparent); }
.hs-map-node:hover,.hs-map-node.is-active { transform:translateY(-4px); border-color:color-mix(in srgb,var(--studio-accent) 45%,transparent); background:#111419; }
.hs-map-node--1 { left:3%; top:23%; }
.hs-map-node--1::after { right:-4px; top:50%; }
.hs-map-node--2 { right:2%; top:17%; }
.hs-map-node--2::after { left:-4px; top:50%; }
.hs-map-node--3 { left:0; bottom:20%; }
.hs-map-node--3::after { right:-4px; top:50%; }
.hs-map-node--4 { right:1%; bottom:23%; }
.hs-map-node--4::after { left:-4px; top:50%; }
.hs-map-node--5 { left:50%; bottom:1%; transform:translateX(-50%); }
.hs-map-node--5:hover,.hs-map-node--5.is-active { transform:translate(-50%,-4px); }
.hs-map-node--5::after { left:50%; top:-4px; }

.hs-studio-baseline {
    position:absolute;
    left:0; right:0; bottom:0;
    border-top:1px solid rgba(255,255,255,.08);
}

.hs-studio-baseline .hs-container {
    min-height:46px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    color:#706d67;
    font-size:.59rem;
    letter-spacing:.08em;
    text-transform:uppercase;
}

/* Operating stack — inspired by editorial infographic logic, not copied. */
.hs-stack-section {
    padding:100px 0;
    background:#f1eee6;
    color:#171a20;
}

.hs-stack-grid {
    display:grid;
    grid-template-columns:minmax(320px,.82fr) minmax(520px,1.18fr);
    gap:clamp(56px,7vw,110px);
    align-items:center;
}

.hs-stack-copy > span,.hs-flow-head > span,.hs-scope-copy > span {
    color:#8c8a83;
    font-size:.61rem;
    font-weight:800;
    letter-spacing:.15em;
    text-transform:uppercase;
}

.hs-stack-copy h2,.hs-flow-head h2,.hs-scope-copy h2 {
    margin:16px 0 18px;
    font-size:clamp(2.4rem,4vw,4.5rem);
    line-height:.97;
    font-weight:620;
    letter-spacing:-.06em;
}

.hs-stack-copy > p,.hs-flow-head p,.hs-scope-copy p {
    max-width:560px;
    margin:0;
    color:#676966;
    font-size:.9rem;
    line-height:1.68;
}

.hs-stack-tabs { margin-top:30px; border-top:1px solid rgba(17,20,25,.14); }
.hs-stack-tab {
    width:100%;
    min-height:56px;
    display:grid;
    grid-template-columns:38px 1fr auto;
    align-items:center;
    gap:12px;
    padding:0;
    border:0;
    border-bottom:1px solid rgba(17,20,25,.12);
    background:transparent;
    color:#747670;
    text-align:left;
}
.hs-stack-tab span { color:#a8a69f; font-size:.59rem; font-weight:800; }
.hs-stack-tab strong { color:#34383d; font-size:.83rem; font-weight:700; }
.hs-stack-tab i { width:26px; height:1px; background:#bbb8af; transition:width .25s ease,background .25s ease; }
.hs-stack-tab.is-active strong { color:#12151a; }
.hs-stack-tab.is-active i { width:48px; background:#c39b00; }

.hs-stack-stage {
    position:relative;
    min-height:600px;
    display:grid;
    place-items:center;
}

.hs-stack-shadow {
    position:absolute;
    width:390px;
    height:110px;
    left:50%; bottom:8%;
    transform:translateX(-50%);
    border-radius:50%;
    background:rgba(12,15,19,.16);
    filter:blur(34px);
}

.hs-stack-tower { position:relative; width:360px; height:500px; perspective:1000px; }
.hs-stack-layer {
    --layer:#15181d;
    position:absolute;
    left:50%;
    width:310px;
    height:84px;
    transform:translateX(-50%) translateY(calc(var(--n) * 82px)) skewY(-5deg);
    transform-origin:center;
    background:var(--layer);
    border:1px solid rgba(0,0,0,.16);
    box-shadow:0 18px 38px rgba(0,0,0,.11);
    transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .3s ease,opacity .3s ease;
}
.hs-stack-layer::before {
    content:"";
    position:absolute;
    inset:0 auto 0 -28px;
    width:28px;
    background:color-mix(in srgb,var(--layer) 72%,#000);
    transform:skewY(44deg);
    transform-origin:right top;
}
.hs-stack-layer::after {
    content:attr(data-label);
    position:absolute;
    left:18px; top:50%;
    transform:translateY(-50%) skewY(5deg);
    color:#fff;
    font-size:.68rem;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
}
.hs-stack-layer.is-active { transform:translateX(-50%) translateY(calc(var(--n) * 82px - 8px)) skewY(-5deg) scale(1.035); filter:brightness(1.06); z-index:6; }

.hs-stack-panel {
    position:absolute;
    right:0;
    bottom:6%;
    width:270px;
    padding:18px 19px;
    border:1px solid rgba(17,20,25,.13);
    background:rgba(255,255,255,.72);
    backdrop-filter:blur(12px);
}
.hs-stack-panel span { color:#b18e00; font-size:.57rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.hs-stack-panel h3 { margin:8px 0 7px; font-size:1.05rem; color:#171a20; }
.hs-stack-panel p { margin:0; color:#6b6d69; font-size:.78rem; line-height:1.55; }

/* Field-to-decision poster */
.hs-flow-section {
    padding:100px 0 110px;
    background:#f4c62f;
    color:#111318;
    overflow:hidden;
}

.hs-flow-head {
    display:grid;
    grid-template-columns:.65fr 1.35fr;
    gap:60px;
    align-items:end;
    margin-bottom:46px;
}
.hs-flow-head h2 { margin-bottom:0; max-width:780px; }
.hs-flow-head p { color:rgba(17,19,24,.66); }
.hs-flow-head > span { color:rgba(17,19,24,.54); }

.hs-flow-poster {
    position:relative;
    min-height:590px;
    display:grid;
    place-items:center;
    overflow:hidden;
}

.hs-flow-sheet {
    position:relative;
    width:min(72%,820px);
    height:430px;
    overflow:hidden;
    transform:rotate(-1.6deg);
    background:#101318;
    box-shadow:0 40px 90px rgba(68,50,0,.26);
}
.hs-flow-sheet img { width:100%; height:100%; object-fit:cover; filter:saturate(.72) brightness(.61) contrast(1.08); }
.hs-flow-sheet::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(12,14,18,.82),rgba(12,14,18,.13) 46%,rgba(12,14,18,.45)); }

.hs-flow-peel {
    position:absolute;
    z-index:4;
    left:11%; right:15%; bottom:7%;
    height:88px;
    background:#171a20;
    transform:rotate(7deg) skewX(-12deg);
    box-shadow:0 16px 42px rgba(64,47,0,.34);
}
.hs-flow-peel::after { content:""; position:absolute; right:-26px; top:0; border-top:44px solid transparent; border-bottom:44px solid transparent; border-left:26px solid #252930; }

.hs-flow-node {
    position:absolute;
    z-index:5;
    width:144px;
    min-height:74px;
    padding:12px 13px;
    background:#111318;
    color:#fff;
    box-shadow:0 12px 30px rgba(67,49,0,.24);
}
.hs-flow-node span { color:#f4c62f; font-size:.57rem; font-weight:800; }
.hs-flow-node strong { display:block; margin:7px 0 3px; font-size:.83rem; }
.hs-flow-node small { color:#8f8c86; font-size:.65rem; line-height:1.35; }
.hs-flow-node--1 { left:2%; top:16%; }
.hs-flow-node--2 { left:14%; bottom:20%; }
.hs-flow-node--3 { right:5%; top:18%; }
.hs-flow-node--4 { right:1%; bottom:18%; }

.hs-flow-line { position:absolute; z-index:3; height:1px; background:rgba(17,19,24,.45); transform-origin:left center; }
.hs-flow-line--1 { left:14%; top:30%; width:23%; transform:rotate(12deg); }
.hs-flow-line--2 { left:25%; bottom:31%; width:21%; transform:rotate(-14deg); }
.hs-flow-line--3 { right:16%; top:32%; width:20%; transform:rotate(-13deg); }
.hs-flow-line--4 { right:12%; bottom:30%; width:24%; transform:rotate(14deg); }

.hs-flow-center {
    position:absolute;
    z-index:6;
    left:50%; top:50%;
    transform:translate(-50%,-50%);
    width:220px;
    text-align:center;
    color:#fff;
}
.hs-flow-center span { color:#f4c62f; font-size:.6rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.hs-flow-center strong { display:block; margin-top:10px; font-size:1.8rem; line-height:1; letter-spacing:-.05em; }

/* Scope scene */
.hs-scope-section {
    padding:106px 0;
    background:#0b0e13;
    color:#f4f1e9;
}

.hs-scope-grid {
    display:grid;
    grid-template-columns:.72fr 1.28fr;
    gap:clamp(60px,8vw,120px);
    align-items:center;
}
.hs-scope-copy > span { color:#77736d; }
.hs-scope-copy h2 { color:#fff; max-width:560px; }
.hs-scope-copy p { color:#95928c; }

.hs-scope-orbit { position:relative; min-height:560px; }
.hs-scope-orbit__disc {
    position:absolute;
    left:50%; top:50%;
    width:430px; height:430px;
    transform:translate(-50%,-50%);
    border-radius:50%;
    border:1px solid rgba(244,198,47,.24);
}
.hs-scope-orbit__disc::before,.hs-scope-orbit__disc::after {
    content:""; position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.09);
}
.hs-scope-orbit__disc::before { inset:13%; }
.hs-scope-orbit__disc::after { inset:29%; border-style:dashed; animation:hs-studio-spin 22s linear infinite reverse; }

.hs-scope-card {
    position:absolute;
    width:230px;
    padding:16px 18px;
    border:1px solid rgba(255,255,255,.1);
    background:#101319;
    box-shadow:0 20px 48px rgba(0,0,0,.24);
    transition:transform .3s ease,border-color .3s ease;
}
.hs-scope-card:hover { transform:translateY(-6px); border-color:rgba(244,198,47,.35); }
.hs-scope-card span { color:#f4c62f; font-size:.58rem; font-weight:800; letter-spacing:.12em; }
.hs-scope-card strong { display:block; margin:8px 0 4px; color:#fff; font-size:.9rem; }
.hs-scope-card small { color:#7f7c76; font-size:.69rem; line-height:1.4; }
.hs-scope-card--1 { left:2%; top:8%; }
.hs-scope-card--2 { right:7%; top:25%; }
.hs-scope-card--3 { left:15%; bottom:25%; }
.hs-scope-card--4 { right:0; bottom:4%; }

.hs-scope-core {
    position:absolute;
    left:50%; top:50%;
    transform:translate(-50%,-50%);
    text-align:center;
}
.hs-scope-core img { width:48px; height:48px; margin-bottom:10px; }
.hs-scope-core strong { display:block; color:#fff; font-size:1.1rem; }
.hs-scope-core small { color:#77736d; font-size:.65rem; }

.hs-studio-final {
    padding:78px 0;
    background:#f1eee6;
    color:#15181d;
}
.hs-studio-final__grid {
    display:grid;
    grid-template-columns:1.35fr .65fr;
    gap:60px;
    align-items:end;
}
.hs-studio-final h2 {
    max-width:800px;
    margin:0;
    font-size:clamp(2.3rem,4vw,4.4rem);
    line-height:.98;
    letter-spacing:-.06em;
}
.hs-studio-final p { margin:0 0 20px; color:#676a66; font-size:.88rem; line-height:1.6; }

@keyframes hs-studio-spin { to { transform:translate(-50%,-50%) rotate(360deg); } }

@media (max-width: 1050px) {
    .hs-studio-hero__grid,.hs-stack-grid,.hs-scope-grid { grid-template-columns:1fr; }
    .hs-system-map { min-height:560px; }
    .hs-system-map__disc { width:440px; }
    .hs-system-map__ring { width:540px; }
    .hs-stack-stage { min-height:560px; }
}

@media (max-width: 760px) {
    .hs-studio-hero { min-height:auto; padding:106px 0 74px; }
    .hs-studio-copy h1 { font-size:clamp(2.7rem,13vw,4.5rem); }
    .hs-studio-proof { grid-template-columns:1fr; }
    .hs-system-map { min-height:430px; }
    .hs-system-map__disc { width:310px; }
    .hs-system-map__ring { width:380px; }
    .hs-system-map__core { width:76%; }
    .hs-system-map__media { height:220px; }
    .hs-map-node { display:none; }
    .hs-stack-section,.hs-flow-section,.hs-scope-section { padding:74px 0; }
    .hs-stack-stage { min-height:520px; transform:scale(.88); margin:-20px 0; }
    .hs-flow-head,.hs-studio-final__grid { grid-template-columns:1fr; gap:22px; }
    .hs-flow-poster { min-height:500px; }
    .hs-flow-sheet { width:90%; height:340px; }
    .hs-flow-node { width:122px; }
    .hs-flow-node--2,.hs-flow-node--4 { display:none; }
    .hs-scope-orbit { min-height:620px; transform:scale(.9); margin:-30px; }
}

@media (prefers-reduced-motion:reduce) {
    .hs-system-map__ring,.hs-scope-orbit__disc::after { animation:none; }
}