/* =========================================================
   Home motion (v1.0.0) — living versions of: Who I Am, Tools, ERP Architecture,
   Infrastructure in Motion and the Digital Lab. Canvas for light, DOM for content.
   Colours follow the site theme tokens.
   ========================================================= */
.hm-ident, .hm-tools, .hm-erp, .hm-net, .hm-lab {
    --hm-gold: var(--gold-rgb, 248, 184, 78);
    --hm-cyan: var(--cyan-rgb, 56, 217, 255);
    --hm-purple: var(--purple-rgb, 169, 112, 255);
    --hm-green: var(--green-rgb, 83, 233, 164);
    --hm-ink: var(--ink-rgb, 255, 255, 255);
    --hm-text: rgb(var(--text-rgb, 247, 245, 240));
    --hm-muted: rgb(var(--muted-rgb, 170, 166, 177));
    --hm-panel: rgba(var(--s4-rgb, 13, 13, 20), .84);
    position: relative;
    isolation: isolate;
}
.hm-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
[class*="c-"] { --c: var(--hm-gold, 248, 184, 78); }
.c-gold, .c-yellow { --c: var(--gold-rgb, 248, 184, 78); }
.c-cyan { --c: var(--cyan-rgb, 56, 217, 255); }
.c-purple { --c: var(--purple-rgb, 169, 112, 255); }
.c-green { --c: var(--green-rgb, 83, 233, 164); }
.c-red { --c: var(--red-rgb, 255, 97, 94); }
.c-pink { --c: var(--pink-rgb, 255, 94, 188); }
.c-blue { --c: var(--blue-rgb, 95, 145, 255); }
.c-orange { --c: 255, 150, 70; }

/* ---------- shared: the core (photo + rings) ---------- */
.hm-ident-core, .hm-tools-core {
    position: absolute; left: 50%; top: 50%; z-index: 4;
    width: var(--core, 132px); height: var(--core, 132px);
    transform: translate(-50%, -50%);
    display: grid; place-items: center; pointer-events: none;
}
.hm-photo { position: relative; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: #111; box-shadow: 0 0 0 4px rgba(7, 7, 11, .9), 0 0 50px rgba(var(--hm-gold), .45), 0 0 110px rgba(var(--hm-cyan), .14); }
.hm-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
.hm-ring { position: absolute; border-radius: 50%; pointer-events: none; }
.hm-ring--a { inset: -8px; background: conic-gradient(from 0deg, rgb(var(--hm-gold)), transparent 30%, rgb(var(--hm-cyan)) 52%, transparent 80%, rgb(var(--hm-gold))); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); animation: hmSpin 6s linear infinite; filter: drop-shadow(0 0 7px rgba(var(--hm-gold), .7)); }
.hm-ring--b { inset: -26px; border: 1px dashed rgba(var(--hm-gold), .35); animation: hmSpin 26s linear infinite reverse; }
.hm-core-name { position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%); display: grid; justify-items: center; gap: 3px; white-space: nowrap; text-align: center; }
.hm-core-name b { font-size: 15px; color: var(--hm-text); text-shadow: 0 2px 14px rgba(0, 0, 0, .8); }
.hm-core-name small { font-size: 9.5px; letter-spacing: .2em; font-weight: 800; color: rgb(var(--hm-gold)); }
@keyframes hmSpin { to { transform: rotate(360deg); } }
@keyframes hmPulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes hmBlink { 50% { opacity: .3; } }

/* ---------- shared: info card ---------- */
.hm-card {
    position: absolute; z-index: 7;
    width: min(340px, calc(100% - 32px));
    padding: 15px 17px;
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(var(--hm-ink, 255, 255, 255), .07), rgba(var(--hm-ink, 255, 255, 255), .015)), rgba(var(--s3-rgb, 10, 10, 16), .9);
    border: 1px solid rgba(var(--c, var(--gold-rgb, 248, 184, 78)), .45);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .45), 0 0 34px rgba(var(--c, var(--gold-rgb, 248, 184, 78)), .14);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    transition: border-color .4s, box-shadow .4s;
}
.hm-card.is-swap { animation: hmCardIn .5s cubic-bezier(.2, .8, .2, 1); }
@keyframes hmCardIn { from { opacity: .2; transform: var(--card-from, translateY(10px)); } }
.hm-card-kicker { display: flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 800; letter-spacing: .14em; color: rgb(var(--c, var(--gold-rgb, 248, 184, 78))); text-transform: uppercase; }
.hm-card-kicker i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; animation: hmBlink 1.4s infinite; }
.hm-card strong { display: block; margin-top: 5px; font-size: 17px; line-height: 1.35; color: rgb(var(--text-rgb, 247, 245, 240)); }
.hm-card p { margin: 6px 0 0; font-size: 13px; line-height: 1.75; color: rgb(var(--text-3-rgb, 199, 195, 204)); }
.hm-card-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 9px 15px; border-radius: 999px; background: rgb(var(--c, var(--gold-rgb, 248, 184, 78))); color: rgb(var(--on-accent-rgb, 23, 17, 9)); font-weight: 800; font-size: 13px; text-decoration: none; transition: transform .25s, filter .25s; }
.hm-card-cta:hover { transform: translateY(-2px); filter: brightness(1.08); }
.hm-card-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; color: rgb(var(--green-rgb, 83, 233, 164)); }
.hm-card-foot i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: hmBlink 1.2s infinite; }

/* =========================================================
   1. Who I Am — living constellation
   ========================================================= */
.hm-ident { --core: clamp(104px, 13vw, 138px); min-height: 680px; border-radius: 30px; overflow: hidden; }
.hm-ident-node {
    position: absolute; left: 0; top: 0; z-index: 5;
    display: flex; align-items: center; gap: 8px;
    padding: 6px 12px 6px 8px; border-radius: 999px;
    background: var(--hm-panel); border: 1px solid rgba(var(--c), .3);
    color: var(--hm-text); font: inherit; cursor: pointer;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    will-change: transform;
    transition: border-color .3s, background .3s, box-shadow .3s;
    white-space: nowrap;
}
.hm-ident-node em { font-style: normal; font-size: 10px; font-weight: 800; color: rgb(var(--c)); opacity: .85; }
.hm-ident-node strong { font-size: 12.5px; font-weight: 700; }
.hm-star { position: relative; width: 12px; height: 12px; border-radius: 50%; background: rgb(var(--c)); box-shadow: 0 0 10px rgb(var(--c)), 0 0 24px rgba(var(--c), .6); flex: none; }
.hm-star::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgb(var(--c)); opacity: 0; }
.hm-ident-node.is-active, .hm-ident-node:hover, .hm-ident-node:focus-visible { border-color: rgb(var(--c)); background: linear-gradient(90deg, rgba(var(--c), .22), rgba(var(--c), .06)), var(--hm-panel); box-shadow: 0 0 0 1px rgba(var(--c), .4), 0 0 30px rgba(var(--c), .3); outline: none; }
.hm-ident-node.is-active .hm-star::after { animation: hmPulse 1.6s ease-out infinite; }
.hm-ident-card { left: 50%; bottom: 22px; transform: translateX(-50%); --card-from: translate(-50%, 10px); text-align: center; }
.hm-ident-card .hm-card-kicker { justify-content: center; }

/* =========================================================
   2. Tools orbiting the developer
   ========================================================= */
.hm-tool-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.hm-tool-filters button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(var(--ink-rgb, 255, 255, 255), .12); background: rgba(var(--s4-rgb, 13, 13, 20), .6); color: rgb(var(--text-3-rgb, 199, 195, 204)); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: all .25s; }
.hm-tool-filters button i { font-style: normal; font-size: 11px; padding: 1px 8px; border-radius: 99px; background: rgba(var(--ink-rgb, 255, 255, 255), .08); }
.hm-tool-filters button:hover { color: rgb(var(--text-rgb, 247, 245, 240)); border-color: rgba(var(--gold-rgb, 248, 184, 78), .45); }
.hm-tool-filters button.is-on { background: rgb(var(--gold-rgb, 248, 184, 78)); color: rgb(var(--on-accent-rgb, 23, 17, 9)); border-color: transparent; }
.hm-tools { --core: clamp(96px, 11vw, 128px); height: clamp(640px, 64vw, 820px); border-radius: 30px; overflow: hidden; }
.hm-tool {
    position: absolute; left: 0; top: 0; z-index: 5;
    display: grid; justify-items: center; gap: 6px;
    width: 92px; text-decoration: none; color: var(--hm-text);
    will-change: transform, opacity;
    transition: opacity .4s, filter .4s;
    -webkit-tap-highlight-color: transparent;
}
.hm-tool-glyph {
    width: 46px; height: 46px; border-radius: 15px;
    display: grid; place-items: center;
    font-size: 12px; font-weight: 900; letter-spacing: .02em; color: rgb(var(--c));
    background: radial-gradient(circle at 30% 25%, rgba(var(--c), .35), rgba(var(--c), .08) 60%), rgba(var(--s4-rgb, 13, 13, 20), .92);
    border: 1px solid rgba(var(--c), .5);
    box-shadow: 0 0 18px rgba(var(--c), .28), inset 0 1px 0 rgba(255, 255, 255, .12);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, background .35s;
    direction: ltr;
}
.hm-tool-name { max-width: 100%; padding: 2px 7px; border-radius: 8px; font-size: 10.5px; font-weight: 700; line-height: 1.35; text-align: center; background: rgba(var(--s3-rgb, 10, 10, 16), .72); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hm-tool:hover .hm-tool-glyph, .hm-tool:focus-visible .hm-tool-glyph, .hm-tool.is-active .hm-tool-glyph { transform: scale(1.18) rotate(-4deg); background: radial-gradient(circle at 30% 25%, rgba(var(--c), .6), rgba(var(--c), .2) 60%), rgba(var(--s4-rgb, 13, 13, 20), .92); box-shadow: 0 0 30px rgba(var(--c), .6), 0 0 0 3px rgba(var(--c), .25); }
.hm-tool:focus-visible { outline: none; }
.hm-tool.is-ping .hm-tool-glyph { animation: hmPing .9s ease-out; }
@keyframes hmPing { 30% { box-shadow: 0 0 34px rgba(var(--c), .9), 0 0 0 6px rgba(var(--c), .25); transform: scale(1.12); } }
.hm-tool.is-dim { opacity: .14; filter: grayscale(.7); pointer-events: none; }
.hm-tools-card { inset-inline-start: 22px; top: 50%; transform: translateY(-50%); --card-from: translateY(calc(-50% + 10px)); width: min(320px, calc(100% - 32px)); }

/* =========================================================
   3. ERP Architecture — living honeycomb
   ========================================================= */
.hm-erp { --hex: 64px; height: 640px; }
.hm-hex {
    position: absolute; left: 0; top: 0; z-index: 3;
    width: calc(var(--hex) * 1.732); height: calc(var(--hex) * 2);
    padding: 0; border: 0; cursor: pointer; color: var(--hm-text, #fff); font: inherit;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    background: linear-gradient(160deg, rgba(var(--c, var(--gold-rgb, 248, 184, 78)), .65), rgba(var(--ink-rgb, 255, 255, 255), .08) 45%, rgba(var(--c, var(--gold-rgb, 248, 184, 78)), .35));
    transition: transform .4s cubic-bezier(.2, .8, .2, 1), filter .4s, opacity .5s;
    will-change: transform;
}
.hm-hex-in {
    position: absolute; inset: 2px;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    display: grid; place-content: center; justify-items: center; gap: 3px;
    padding: 0 12%; text-align: center;
    background: radial-gradient(circle at 50% 20%, rgba(var(--c, var(--gold-rgb, 248, 184, 78)), .22), transparent 65%), rgb(var(--s3-rgb, 10, 10, 16));
    transition: background .4s;
}
html[data-site-theme] .hm-hex-in { background: radial-gradient(circle at 50% 20%, rgba(var(--c, var(--gold-rgb, 248, 184, 78)), .25), transparent 65%), rgba(var(--s3-rgb, 10, 10, 16), .82); }
.hm-hex-in em { font-style: normal; font-size: 10px; font-weight: 800; color: rgb(var(--c, var(--gold-rgb, 248, 184, 78))); }
.hm-hex-in strong { font-size: clamp(10px, calc(var(--hex) * .17), 12.5px); line-height: 1.3; overflow-wrap: anywhere; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hm-hex:hover, .hm-hex:focus-visible, .hm-hex.is-active { filter: drop-shadow(0 0 16px rgba(var(--c, var(--gold-rgb, 248, 184, 78)), .7)); outline: none; }
.hm-hex.is-active .hm-hex-in, .hm-hex:hover .hm-hex-in { background: radial-gradient(circle at 50% 30%, rgba(var(--c, var(--gold-rgb, 248, 184, 78)), .45), rgba(var(--c, var(--gold-rgb, 248, 184, 78)), .08) 70%), rgb(var(--s3-rgb, 10, 10, 16)); }
.hm-hex.is-flash { animation: hmHexFlash .9s ease-out; }
@keyframes hmHexFlash { 30% { filter: drop-shadow(0 0 20px rgba(var(--c, var(--gold-rgb, 248, 184, 78)), .95)) brightness(1.25); } }
.hm-hex--core { cursor: default; z-index: 4; --c: var(--gold-rgb, 248, 184, 78); background: conic-gradient(from var(--spin, 0deg), rgb(var(--gold-rgb, 248, 184, 78)), rgb(var(--cyan-rgb, 56, 217, 255)), rgb(var(--purple-rgb, 169, 112, 255)), rgb(var(--gold-rgb, 248, 184, 78))); animation: hmCoreSpin 8s linear infinite; }
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes hmCoreSpin { to { --spin: 360deg; } }
.hm-hex--core .hm-hex-in img { width: 42%; max-width: 46px; }
.hm-hex--core .hm-hex-in b { font-size: 11px; letter-spacing: .14em; color: rgb(var(--gold-rgb, 248, 184, 78)); }
.hm-hex--core .hm-hex-in small { font-size: 9px; color: rgb(var(--muted-rgb, 170, 166, 177)); }
.hm-erp-card { inset-inline-start: 20px; top: 50%; transform: translateY(-50%); --card-from: translateY(calc(-50% + 10px)); width: min(300px, calc(100% - 32px)); }
.hm-erp-feed { display: grid; gap: 6px; padding: 12px 18px 16px; border-top: 1px solid rgba(var(--ink-rgb, 255, 255, 255), .07); min-height: 108px; }
.hm-erp-feed span { unicode-bidi: plaintext; display: flex; align-items: center; gap: 9px; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: rgb(var(--text-3-rgb, 199, 195, 204)); animation: hmFeedIn .45s cubic-bezier(.2, .8, .2, 1); }
.hm-erp-feed span i { font-style: normal; color: rgb(var(--green-rgb, 83, 233, 164)); }
.hm-erp-feed span b { color: rgb(var(--c, var(--gold-rgb, 248, 184, 78))); font-weight: 700; }
.hm-erp-feed span:not(:last-child) { opacity: .55; }
@keyframes hmFeedIn { from { opacity: 0; transform: translateY(8px); } }

/* =========================================================
   4. Infrastructure in Motion — a packet's journey
   ========================================================= */
.hm-net { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: center; gap: 10px; padding: 70px 24px 40px; min-height: 340px; }
.hm-net-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; overflow: visible; pointer-events: none; }
.hm-net-cable { fill: none; stroke: rgba(var(--ink-rgb, 255, 255, 255), .1); stroke-width: 3; stroke-linecap: round; }
.hm-net-cable--flow { stroke: url(#hmNetGrad); stroke-width: 2; stroke-dasharray: 3 12; animation: hmDash 1s linear infinite; opacity: .75; }
@keyframes hmDash { to { stroke-dashoffset: -15; } }
.hm-net-node { position: relative; z-index: 2; display: grid; justify-items: center; gap: 4px; text-align: center; }
.hm-net-node:nth-child(odd) { transform: translateY(-26px); }
.hm-net-node:nth-child(even) { transform: translateY(26px); }
.hm-dev { position: relative; width: 84px; height: 84px; border-radius: 24px; display: grid; place-items: center; background: radial-gradient(circle at 30% 20%, rgba(var(--hm-cyan), .14), transparent 60%), rgba(var(--s4-rgb, 13, 13, 20), .92); border: 1px solid rgba(var(--ink-rgb, 255, 255, 255), .12); box-shadow: 0 14px 34px rgba(0, 0, 0, .4); transition: border-color .35s, box-shadow .35s, transform .35s cubic-bezier(.2, .8, .2, 1); }
.hm-dev-svg { width: 62%; height: auto; overflow: visible; }
.hm-dev-svg .d-body { fill: rgba(var(--ink-rgb, 255, 255, 255), .06); stroke: rgba(var(--ink-rgb, 255, 255, 255), .55); stroke-width: 1.6; stroke-linejoin: round; }
.hm-dev-svg .d-screen { fill: rgba(var(--hm-cyan), .12); stroke: rgba(var(--hm-cyan), .55); stroke-width: 1.2; }
.hm-dev-svg .d-code { fill: none; stroke: rgba(var(--hm-cyan), .7); stroke-width: 1.6; stroke-linecap: round; }
.hm-dev-svg .d-ports rect { fill: rgba(var(--hm-cyan), .25); stroke: rgba(var(--hm-cyan), .7); stroke-width: 1; }
.hm-dev-svg .d-led { fill: rgb(var(--hm-green)); }
.hm-dev-svg .d-check { fill: none; stroke: rgb(var(--hm-green)); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .35; transition: opacity .3s; }
.hm-dev-leds { position: absolute; bottom: 8px; display: flex; gap: 4px; }
.hm-dev-leds i { width: 4px; height: 4px; border-radius: 50%; background: rgba(var(--hm-green), .35); }
.hm-net-node strong { font-size: 12px; letter-spacing: .12em; color: var(--hm-text); margin-top: 6px; }
.hm-net-node small { font-size: 11.5px; color: var(--hm-muted); }
.hm-net-meta { font: 10px/1.4 ui-monospace, Menlo, Consolas, monospace; color: rgba(var(--hm-cyan), .8); }
.hm-net-status { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translate(-50%, 6px); padding: 5px 10px; border-radius: 10px; background: rgba(var(--s3-rgb, 10, 10, 16), .95); border: 1px solid rgba(var(--hm-green), .45); color: rgb(var(--hm-green)); font-size: 11px; font-weight: 700; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .3s, transform .35s cubic-bezier(.2, .8, .2, 1); box-shadow: 0 10px 24px rgba(0, 0, 0, .4); }
.hm-net-node.is-active .hm-net-status { opacity: 1; transform: translate(-50%, 0); }
.hm-net-node.is-active .hm-dev { border-color: rgba(var(--hm-cyan), .8); box-shadow: 0 0 0 4px rgba(var(--hm-cyan), .12), 0 0 40px rgba(var(--hm-cyan), .35); transform: scale(1.08); }
.hm-net-node.is-active .hm-dev-leds i { animation: hmLed .3s steps(2) infinite; }
.hm-net-node.is-active .hm-dev-leds i:nth-child(2) { animation-delay: .1s; }
.hm-net-node.is-active .hm-dev-leds i:nth-child(3) { animation-delay: .2s; }
@keyframes hmLed { 50% { background: rgb(var(--hm-green)); box-shadow: 0 0 6px rgb(var(--hm-green)); } }
.hm-net-node.is-done .hm-dev-svg .d-check, .hm-net-node.is-active .hm-dev-svg .d-check { opacity: 1; }
.hm-net-node.is-done .hm-dev { border-color: rgba(var(--hm-green), .45); }
.hm-packet { position: absolute; left: 0; top: 0; z-index: 3; width: 16px; height: 16px; margin: -8px; border-radius: 50%; background: rgb(var(--hm-cyan)); box-shadow: 0 0 14px rgb(var(--hm-cyan)), 0 0 34px rgba(var(--hm-cyan), .6); pointer-events: none; opacity: 0; transition: background .3s, box-shadow .3s; }
.hm-packet i { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(var(--hm-cyan), .6); animation: hmPulse 1.2s ease-out infinite; }
.hm-packet.is-secure { background: rgb(var(--hm-gold)); box-shadow: 0 0 14px rgb(var(--hm-gold)), 0 0 34px rgba(var(--hm-gold), .6); }
.hm-packet.is-secure i { border-color: rgba(var(--hm-gold), .6); }
.hm-packet.is-response { background: rgb(var(--hm-green)); box-shadow: 0 0 14px rgb(var(--hm-green)), 0 0 34px rgba(var(--hm-green), .6); }
.hm-packet.is-response i { border-color: rgba(var(--hm-green), .6); }
.hm-net-steps { list-style: none; margin: 0; padding: 0 24px 14px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.hm-net-steps li { display: grid; gap: 7px; font-size: 11.5px; color: rgb(var(--muted-rgb, 170, 166, 177)); text-align: center; }
.hm-net-steps li i { height: 4px; border-radius: 4px; background: rgba(var(--ink-rgb, 255, 255, 255), .08); overflow: hidden; position: relative; }
.hm-net-steps li i::after { content: ""; position: absolute; inset: 0; width: 0; background: linear-gradient(90deg, rgb(var(--cyan-rgb, 56, 217, 255)), rgb(var(--green-rgb, 83, 233, 164))); transition: width .5s; }
.hm-net-steps li.is-done i::after, .hm-net-steps li.is-active i::after { width: 100%; }
.hm-net-steps li.is-active { color: rgb(var(--text-rgb, 247, 245, 240)); font-weight: 700; }
.hm-net-log span { unicode-bidi: plaintext; animation: hmFeedIn .45s cubic-bezier(.2, .8, .2, 1); }

/* =========================================================
   5. Digital Lab — an atom of experiments
   ========================================================= */
.hm-lab { width: min(300px, 100%); aspect-ratio: 1; margin: 22px auto 0; }
.hm-lab-nucleus { position: absolute; left: 50%; top: 50%; z-index: 3; width: 74px; height: 74px; margin: -37px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #fff8e6, rgb(var(--hm-gold)) 40%, rgba(var(--hm-gold), .35) 75%); box-shadow: 0 0 40px rgba(var(--hm-gold), .7), 0 0 90px rgba(var(--hm-gold), .3); animation: hmNucleus 3.2s ease-in-out infinite; }
.hm-lab-nucleus b { font-size: 20px; font-weight: 900; color: rgb(var(--on-accent-rgb, 23, 17, 9)); letter-spacing: .04em; }
@keyframes hmNucleus { 50% { transform: scale(1.07); box-shadow: 0 0 56px rgba(var(--hm-gold), .85), 0 0 120px rgba(var(--hm-gold), .35); } }
.hm-lab-tag { position: absolute; left: 0; top: 0; z-index: 4; padding: 2px 7px; border-radius: 8px; font-size: 10px; font-weight: 800; color: rgb(var(--c, var(--gold-rgb, 248, 184, 78))); background: rgba(var(--s3-rgb, 10, 10, 16), .85); border: 1px solid rgba(var(--c, var(--gold-rgb, 248, 184, 78)), .4); pointer-events: none; will-change: transform; transition: opacity .3s; }
.hm-lab-term { display: flex; align-items: center; gap: 6px; margin-top: 14px; padding: 10px 14px; border-radius: 12px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(var(--ink-rgb, 255, 255, 255), .08); font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: rgb(var(--green-rgb, 83, 233, 164)); min-height: 42px; direction: ltr; text-align: left; overflow: hidden; white-space: nowrap; }
.hm-lab-prompt { color: rgb(var(--gold-rgb, 248, 184, 78)); }
.hm-caret { width: 7px; height: 14px; background: currentColor; animation: hmBlink 1s steps(2) infinite; flex: none; }
.lab-list article[data-hm-lab-item] { position: relative; transition: background .3s, border-color .3s, transform .3s; border-radius: 14px; cursor: default; outline: none; }
.lab-list article[data-hm-lab-item].is-active { background: rgba(var(--c, var(--gold-rgb, 248, 184, 78)), .07); }
.lab-list article[data-hm-lab-item].is-active span:first-child { color: rgb(var(--c, var(--gold-rgb, 248, 184, 78))); }
.hm-lab-bar { position: relative; overflow: hidden; }
.hm-lab-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, rgba(var(--c, var(--gold-rgb, 248, 184, 78)), .55), rgb(var(--c, var(--gold-rgb, 248, 184, 78)))); box-shadow: 0 0 12px rgba(var(--c, var(--gold-rgb, 248, 184, 78)), .55); transition: width 1.6s cubic-bezier(.2, .8, .2, 1); position: relative; overflow: hidden; }
.hm-lab-bar i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .45) 50%, transparent 80%); transform: translateX(-100%); animation: hmShine 2.6s ease-in-out infinite; }
@keyframes hmShine { 60%, 100% { transform: translateX(100%); } }
.lab-list.is-in .hm-lab-bar i { width: var(--p); }

/* ---------- phones ---------- */
@media (max-width: 860px) {
    .hm-ident { min-height: 620px; }
    .hm-tools { height: 760px; }
    .hm-tools-card, .hm-erp-card { top: auto; bottom: 14px; left: 14px; right: 14px; inset-inline-start: 14px; transform: none; --card-from: translateY(10px); width: auto; }
    .hm-erp { height: 620px; }
}
.hm-erp.is-compact .hm-hex-in strong { display: none; }
.hm-erp.is-compact .hm-hex-in em { font-size: 13px; }
@media (max-width: 760px) {
    .hm-ident { --core: 86px; min-height: 600px; }
    .hm-ident-node { padding: 0; width: 34px; height: 34px; border-radius: 50%; justify-content: center; gap: 0; }
    .hm-ident-node strong { display: none; }
    .hm-ident-node .hm-star { display: none; }
    .hm-ident-node em { font-size: 11px; opacity: 1; }
    .hm-ident-card { bottom: 14px; width: calc(100% - 24px); }
    .hm-tools { --core: 72px; height: auto; aspect-ratio: 1 / 1.55; }
    .hm-tools-core .hm-ring--b, .hm-tools-core .hm-core-name { display: none; }
    .hm-tool { width: 36px; }
    .hm-tool-glyph { width: 34px; height: 34px; border-radius: 11px; font-size: 9.5px; }
    .hm-tool-name { display: none; }
    .hm-tool-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
    .hm-tool-filters::-webkit-scrollbar { display: none; }
    .hm-tool-filters button { flex: none; }
    .hm-net { grid-template-columns: 1fr; gap: 26px; padding: 26px 18px; }
    .hm-net-node { grid-template-columns: 72px 1fr; justify-items: start; text-align: start; column-gap: 14px; transform: none !important; }
    .hm-net-node:nth-child(even) { margin-inline-start: 40px; }
    .hm-net-node > .hm-dev { width: 72px; height: 72px; }
    .hm-net-node strong { margin-top: 0; }
    .hm-net-node > .hm-dev { grid-row: span 5; }
    .hm-net-status { position: static; grid-column: 2; justify-self: start; margin-top: 4px; transform: translateY(4px); }
    .hm-net-node.is-active .hm-net-status { transform: none; }
    .hm-net-node.is-done:first-of-type .hm-net-status { opacity: 1; }
    .hm-net-steps { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .hm-ring--a, .hm-ring--b, .hm-hex--core, .hm-net-cable--flow, .hm-lab-nucleus, .hm-lab-bar i::after, .hm-packet i, .hm-card-kicker i { animation: none !important; }
}

/* =========================================================
   6. Odoo module factory
   ========================================================= */
.of-stage { --hm-gold: var(--gold-rgb, 248, 184, 78); --hm-cyan: var(--cyan-rgb, 56, 217, 255); --hm-green: var(--green-rgb, 83, 233, 164); --hm-purple: var(--purple-rgb, 169, 112, 255); position: relative; isolation: isolate; height: 700px; border-radius: 30px; overflow: hidden; }
.of-core { position: absolute; left: 50%; top: 50%; z-index: 4; width: var(--core, 120px); height: var(--core, 120px); transform: translate(-50%, -50%); display: grid; place-items: center; pointer-events: none; }
.of-core-disc { position: relative; width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #ffffff, #f1eef6 60%, #dcd6e6); box-shadow: 0 0 0 5px rgba(7, 7, 11, .85), 0 0 50px rgba(var(--hm-purple), .45), 0 0 110px rgba(var(--hm-gold), .18); animation: ofBreath 4s ease-in-out infinite; }
.of-core-disc img { width: 68%; height: auto; display: block; }
.of-wordmark { font: 800 calc(var(--core, 120px) * .26)/1 "Inter", system-ui, sans-serif; letter-spacing: -.02em; color: #4b4453; direction: ltr; }
.of-core-ring { position: absolute; inset: -12px; border-radius: 50%; background: conic-gradient(from 0deg, rgb(var(--hm-purple)), transparent 28%, rgb(var(--hm-gold)) 50%, transparent 78%, rgb(var(--hm-purple))); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); animation: hmSpin 7s linear infinite; filter: drop-shadow(0 0 8px rgba(var(--hm-purple), .8)); }
.of-core-count { position: absolute; top: calc(100% + 18px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 11px; font-weight: 800; letter-spacing: .08em; color: rgb(var(--hm-gold)); text-shadow: 0 2px 10px rgba(0, 0, 0, .8); }
.of-core-count b { font-size: 15px; color: rgb(var(--text-rgb, 247, 245, 240)); }
@keyframes ofBreath { 50% { transform: scale(1.04); } }

.of-station { position: absolute; left: 0; top: 0; z-index: 5; display: grid; justify-items: center; gap: 5px; pointer-events: none; will-change: transform; }
.of-station i { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: 15px; color: rgb(var(--hm-cyan)); background: rgba(var(--s4-rgb, 13, 13, 20), .92); border: 1px solid rgba(var(--hm-cyan), .35); box-shadow: 0 10px 24px rgba(0, 0, 0, .4); transition: all .35s; direction: ltr; }
.of-station b { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; color: rgb(var(--muted-rgb, 170, 166, 177)); transition: color .35s; }
.of-station[data-of-station="idea"] i { --s: var(--gold-rgb, 248, 184, 78); }
.of-station[data-of-station="code"] i { --s: var(--cyan-rgb, 56, 217, 255); }
.of-station[data-of-station="test"] i { --s: var(--green-rgb, 83, 233, 164); }
.of-station[data-of-station="install"] i { --s: var(--purple-rgb, 169, 112, 255); }
.of-station i { color: rgb(var(--s)); border-color: rgba(var(--s), .35); }
.of-station.is-on i { transform: scale(1.18); background: rgba(var(--s), .2); border-color: rgb(var(--s)); box-shadow: 0 0 0 5px rgba(var(--s), .12), 0 0 30px rgba(var(--s), .55); }
.of-station.is-on b { color: rgb(var(--text-rgb, 247, 245, 240)); }

.of-mod { position: absolute; left: 0; top: 0; z-index: 5; display: grid; justify-items: center; gap: 5px; width: 92px; padding: 0; border: 0; background: none; color: rgb(var(--text-rgb, 247, 245, 240)); font: inherit; cursor: pointer; will-change: transform, opacity; transition: opacity .5s, filter .5s; }
.of-mod-glyph { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 12px; font-weight: 900; color: rgb(var(--c)); background: radial-gradient(circle at 30% 25%, rgba(var(--c), .38), rgba(var(--c), .08) 62%), rgba(var(--s4-rgb, 13, 13, 20), .94); border: 1px solid rgba(var(--c), .55); box-shadow: 0 0 18px rgba(var(--c), .3); transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; direction: ltr; }
.of-mod-name { overflow-wrap: anywhere; max-width: 100%; padding: 1px 6px; border-radius: 7px; font-size: 10.5px; font-weight: 700; line-height: 1.35; text-align: center; background: rgba(var(--s3-rgb, 10, 10, 16), .72); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.of-new { position: absolute; top: -8px; inset-inline-end: 14px; padding: 1px 6px; border-radius: 99px; font-style: normal; font-size: 9px; font-weight: 900; color: rgb(var(--on-accent-rgb, 23, 17, 9)); background: rgb(var(--hm-green)); box-shadow: 0 0 12px rgba(var(--hm-green), .7); animation: hmBlink 1.6s infinite; }
.of-mod.is-ghost { opacity: .18; filter: grayscale(1); }
.of-mod.is-ghost .of-mod-glyph { border-style: dashed; box-shadow: none; }
.of-mod.is-born .of-mod-glyph { animation: ofBorn .9s cubic-bezier(.2, .8, .2, 1); }
@keyframes ofBorn { 0% { transform: scale(.3); } 55% { transform: scale(1.3); box-shadow: 0 0 40px rgba(var(--c), 1), 0 0 0 8px rgba(var(--c), .25); } }
.of-mod:hover .of-mod-glyph, .of-mod:focus-visible .of-mod-glyph, .of-mod.is-hot .of-mod-glyph { transform: scale(1.18); box-shadow: 0 0 30px rgba(var(--c), .65), 0 0 0 3px rgba(var(--c), .25); }
.of-mod:focus-visible { outline: none; }
.of-stage.is-dense .of-mod { width: 46px; }
.of-stage.is-dense .of-mod-name { display: none; }

.of-capsule { position: absolute; left: 0; top: 0; z-index: 6; width: 46px; height: 46px; margin: -23px; border-radius: 14px; display: grid; place-items: center; background: radial-gradient(circle at 30% 25%, rgba(var(--c, var(--gold-rgb, 248, 184, 78)), .6), rgba(var(--c, var(--gold-rgb, 248, 184, 78)), .15) 65%), rgb(var(--s4-rgb, 13, 13, 20)); border: 1.5px solid rgb(var(--c, var(--gold-rgb, 248, 184, 78))); box-shadow: 0 0 26px rgba(var(--c, var(--gold-rgb, 248, 184, 78)), .7); pointer-events: none; opacity: 0; transition: opacity .3s; will-change: transform; }
.of-capsule b { font-size: 12px; font-weight: 900; color: #fff; direction: ltr; }
.of-capsule i { position: absolute; inset: -7px; border-radius: 18px; border: 1.5px solid rgba(var(--c, var(--gold-rgb, 248, 184, 78)), .55); animation: hmPulse 1.3s ease-out infinite; }

.of-card { inset-inline-start: 22px; top: 50%; transform: translateY(-50%); --card-from: translateY(calc(-50% + 10px)); width: min(330px, calc(100% - 32px)); }
.of-code { margin-top: 10px; padding: 10px 12px; min-height: 92px; border-radius: 12px; background: rgba(0, 0, 0, .38); border: 1px solid rgba(var(--ink-rgb, 255, 255, 255), .07); font: 11.5px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: rgb(var(--hm-green)); white-space: pre-wrap; word-break: break-word; text-align: left; }
.of-code .k { color: rgb(var(--hm-purple)); }
.of-code .s { color: rgb(var(--hm-gold)); }
.of-code .m { color: rgb(var(--muted-rgb, 170, 166, 177)); }
.of-code.is-desc { font-family: inherit; font-size: 13px; line-height: 1.75; color: rgb(var(--text-3-rgb, 199, 195, 204)); white-space: normal; text-align: start; }
.of-code-caret { display: inline-block; width: 7px; height: 13px; vertical-align: -2px; background: currentColor; animation: hmBlink 1s steps(2) infinite; }
.of-progress { display: block; height: 4px; margin-top: 12px; border-radius: 4px; background: rgba(var(--ink-rgb, 255, 255, 255), .08); overflow: hidden; }
.of-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, rgb(var(--hm-gold)), rgb(var(--hm-cyan)), rgb(var(--hm-green)), rgb(var(--hm-purple))); transition: width .3s linear; }

@media (max-width: 860px) {
    .of-stage { height: 820px; }
    .of-card { top: auto; bottom: 14px; left: 14px; right: 14px; inset-inline-start: 14px; transform: none; --card-from: translateY(10px); width: auto; }
}
@media (max-width: 760px) {
    .of-stage { height: 620px; }
    .of-mod { width: 40px; }
    .of-mod-glyph { width: 34px; height: 34px; border-radius: 10px; font-size: 10.5px; }
    .of-mod-name { display: none; }
    .of-new { top: -9px; inset-inline-end: -10px; font-size: 8px; }
    .of-station i { width: 34px; height: 34px; border-radius: 11px; font-size: 12px; }
    .of-station b { font-size: 10px; }
    .of-code { min-height: 76px; font-size: 11px; }
    .of-core-count { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .of-core-disc, .of-core-ring, .of-capsule i, .of-new { animation: none !important; }
}

/* admin → Motion: a section switched off stays as a still picture */
.is-still .hm-ring--a, .is-still .hm-ring--b, .is-still .hm-hex--core, .is-still .hm-net-cable--flow, .is-still .hm-lab-nucleus, .is-still .hm-lab-bar i::after, .is-still .hm-packet i, .is-still .hm-card-kicker i,
.of-stage.is-still .of-core-disc, .of-stage.is-still .of-core-ring, .of-stage.is-still .of-capsule i, .of-stage.is-still .of-new { animation: none !important; }
[dir="rtl"] .of-code.is-desc { direction: rtl; }

/* Code Arena link in the menus */
.desktop-nav .nav-arena-link, .mobile-nav .nav-arena-link, .mobile-nav .nav-arena-link span { display: inline-flex; align-items: center; gap: 7px; }
.nav-arena-bolt { width: 14px; height: 14px; flex: none; fill: rgb(var(--gold-rgb, 243, 182, 75)); filter: drop-shadow(0 0 5px rgba(var(--gold-rgb, 243, 182, 75), .8)); animation: navArenaZap 2.6s ease-in-out infinite; }
@keyframes navArenaZap { 0%, 82%, 100% { opacity: 1; transform: none; } 86% { opacity: .35; transform: scale(.85) rotate(-8deg); } 90% { opacity: 1; transform: scale(1.18) rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .nav-arena-bolt { animation: none; } }