:root{color-scheme:dark;--cyan:#22d3ee;--orange:#e95420;--ink:#070e17}*{box-sizing:border-box}body{margin:0;background:var(--ink);color:#eef4f9;font-family:Inter,ui-sans-serif,system-ui,sans-serif}#hero{position:relative;isolation:isolate;min-height:780px;height:100svh;overflow:hidden;background:radial-gradient(ellipse at 68% 60%,#112a3b55,transparent 48%),#070e17}.ambient{position:absolute;inset:0;z-index:-1;background-image:radial-gradient(#63849b32 .6px,transparent .8px);background-size:32px 32px;mask-image:linear-gradient(transparent,#0008)}header{height:94px;padding:0 5%;display:flex;align-items:center;gap:12px;font-size:14px;font-weight:750;letter-spacing:.08em}header img{width:46px;height:46px}header a{margin-left:auto;color:#95a9b9;text-decoration:none;font-size:12px;font-weight:450;letter-spacing:0}.copy{position:absolute;left:5%;top:23%;width:29%;z-index:3}.eyebrow{font-size:10px;letter-spacing:.19em;color:#a4bbcb;margin-bottom:28px}h1{font-size:clamp(36px,3.35vw,68px);line-height:1.05;letter-spacing:-.055em;margin:0;font-weight:650}em{font-style:normal;color:var(--orange)}.copy p{color:#94a7b6;font-size:clamp(13px,1.05vw,18px);line-height:1.7;max-width:370px;margin:28px 0}.cta{display:inline-flex;gap:48px;padding:14px 20px;background:var(--orange);border-radius:8px;font-size:14px;font-weight:600;color:white;text-decoration:none}#scene{position:absolute;inset:0;z-index:1}#scene canvas{display:block;width:100%;height:100%;touch-action:pan-y}.fallback{position:absolute;left:49%;top:26%;width:28%;height:43%;object-fit:contain}.webgl-ready .fallback{display:none}#connections{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible}#nodes{position:absolute;inset:0;pointer-events:none;z-index:4}.node{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;border:1px solid #668ca22f;background:linear-gradient(130deg,#102031bb,#08121be8);backdrop-filter:blur(10px);border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-width:106px;padding:17px 18px;color:#e6eff5;transition:border-color .3s,background .3s,box-shadow .3s;font:inherit;font-size:12px;white-space:nowrap;cursor:pointer}.node svg{width:29px;height:29px;stroke:currentColor;fill:none;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}.node small{font-size:9px;letter-spacing:.12em;color:#849eae}.node.active,.node:hover,.node:focus-visible{border-color:var(--accent);box-shadow:0 0 28px color-mix(in srgb,var(--accent) 12%,transparent);background:#102031}.node.remote{min-width:78px;background:transparent;border-color:transparent;padding:4px;color:#91a9ba;font-size:10px}.controls{position:absolute;left:64%;bottom:14%;transform:translateX(-50%);display:flex;gap:8px;z-index:5}button{font:inherit}button:focus-visible,a:focus-visible{outline:2px solid var(--cyan);outline-offset:5px}.controls button{border:1px solid #60798c55;background:#0a1521bd;color:#a9bdcb;border-radius:30px;padding:10px 16px;font-size:11px;cursor:pointer}.controls button:hover{color:white;border-color:#8db0c7}.caption{position:absolute;left:64%;bottom:9%;transform:translateX(-50%);display:flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.02em;color:#a0b5c5;z-index:4;white-space:nowrap}.dot{width:5px;height:5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}footer{position:absolute;bottom:25px;left:5%;right:5%;display:flex;justify-content:space-between;color:#5e7689;font-size:9px;letter-spacing:.12em;z-index:4}@media(max-width:800px){#hero{height:auto;min-height:1100px}header{height:74px}.copy{top:112px;width:90%;position:absolute}.copy h1{font-size:38px}.copy h1 br{display:none}.copy p{max-width:520px;margin:20px 0}.eyebrow{margin-bottom:20px}.cta{padding:11px 16px}.node{min-width:72px;padding:11px 9px;font-size:10px;border-radius:10px;gap:6px}.node svg{width:23px;height:23px}.node small{font-size:8px}.controls{left:50%;bottom:10%;gap:5px}.controls button{padding:9px 11px;font-size:10px}.caption{left:50%;bottom:6%}footer{bottom:15px;font-size:8px}footer span:last-child{display:none}.fallback{left:25%;top:47%;width:50%;height:28%}}@media(prefers-reduced-motion:reduce){*{transition:none!important}.dot{box-shadow:none}}
:root{--card-text:#f2f8fc}
.node{color:var(--card-text);font-size:13px;font-weight:550;min-width:114px;padding:19px 21px;border:1px solid color-mix(in srgb,var(--accent) 48%,#607788);background:linear-gradient(145deg,#19222ff2,#070c14f5 72%);box-shadow:0 14px 32px #0008,inset 0 1px 0 #b8d9ed20,inset 0 -1px 0 #0009;overflow:hidden;transition:transform .55s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .4s,background .3s}
.node svg{width:33px;height:33px;stroke-width:1.55;filter:drop-shadow(0 0 5px #d3efff22)}
.node small{color:#c2d6e3;font-size:10px;letter-spacing:.09em}
.node::after{content:"";position:absolute;inset:-60% -100%;background:linear-gradient(110deg,transparent 40%,#c4eaff14 48%,#c4eaff24 50%,transparent 58%);transform:translateX(-55%);transition:transform .8s;pointer-events:none}
.node:hover,.node:focus-visible{transform:translate(-50%,-55%) scale(1.045);background:linear-gradient(145deg,#213042,#0b1520);box-shadow:0 20px 40px #000a,0 0 35px color-mix(in srgb,var(--accent) 22%,transparent),inset 0 1px 0 #dbf3ff4a;border-color:var(--accent)}
.node:hover::after,.node:focus-visible::after{transform:translateX(55%)}
.node.active{color:#fff;box-shadow:0 14px 35px #0009,0 0 26px color-mix(in srgb,var(--accent) 18%,transparent)}
.node.remote{border:none;background:none;box-shadow:none;color:#d4eaf4;overflow:visible;min-width:85px;padding:4px;font-size:11px}
.node.remote::after{display:none}
@media(max-width:800px){.node{min-width:76px;padding:11px 10px;font-size:11px}.node svg{width:26px;height:26px}.node small{font-size:8px}.node.remote{font-size:10px}}
@media(prefers-reduced-motion:reduce){.node:hover,.node:focus-visible{transform:translate(-50%,-50%)}.node::after{display:none}}

header{position:relative;z-index:6}

.node.remote svg{display:none}

.node{border-width:2px}
.node .border-flow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;filter:none}
.border-spark{stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:14 86;opacity:0;filter:drop-shadow(0 0 4px var(--accent))}
.node.data-active{border-color:color-mix(in srgb,var(--accent) 80%,#b6d7e7)}
.node.remote .border-flow{display:none}

.node[data-service="odoo"] small{white-space:normal;text-align:center;line-height:1.4}
@media(max-width:800px){.node[data-service="odoo"]{width:96px}.node[data-service="odoo"] small{max-width:76px}}

.node .card-socket{position:absolute;width:16px;height:16px;z-index:3;pointer-events:none;overflow:visible;filter:none}
.node.remote .card-socket{display:none}

/* Reveal the complete scene together; retain layout while shaders warm up. */
#scene,#connections,#nodes,.controls,.caption{opacity:0;visibility:hidden;transition:opacity .45s ease}
.scene-ready #scene,.scene-ready #connections,.scene-ready #nodes,.scene-ready .controls,.scene-ready .caption{opacity:1;visibility:visible}

/* Embeddable square illustration. */
body{background:#000}#hero{width:min(100%,1024px);height:auto;min-height:0;aspect-ratio:1;margin:auto;container-type:inline-size;background:#000}
#hero.capture{width:100%;max-width:none}
#hero .node{width:clamp(50px,9.8cqw,100px);height:clamp(50px,9.8cqw,100px);min-width:0;padding:.65cqw;gap:.5cqw;font-size:clamp(10px,1.5cqw,15px);border-radius:1cqw;border-width:1.5px}
#hero .node svg:not(.card-socket):not(.border-flow){width:3.2cqw;height:3.2cqw}
#hero .node small{font-size:clamp(7.5px,.95cqw,10px);letter-spacing:0;line-height:1.2;max-width:100%;white-space:normal}
#hero .node[data-service="odoo"]{width:clamp(50px,9.8cqw,100px)}
#hero .controls{left:50%;bottom:2%;gap:.7cqw}
#hero .controls button{font-size:1cqw;padding:.7cqw 1.1cqw}
#hero .caption,.capture .controls{display:none}
.fallback-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:3;pointer-events:none;opacity:1;transition:opacity .45s}
.webgl-ready .fallback-photo{opacity:0}
.static-scene #scene,.static-scene #nodes,.static-scene #connections,.static-scene .controls{visibility:hidden;opacity:0}

.capture,.capture *{cursor:none!important}

/* Invisible accessible hit areas track each small 3D cube. */
#hero .node.remote{display:block;width:5cqw;height:5cqw;padding:0;border:0;background:none;box-shadow:none;opacity:0;transform:translate(-50%,-50%)}
#hero .node.remote:focus-visible{opacity:1;outline:1px solid #8298aa;outline-offset:2px}

/* The host page supplies the background, including during loading. */
html,body,#hero,.embed-page,.embed-page #hero{background:transparent;color-scheme:normal}
#hero .ambient{display:none}

:root{color-scheme:normal}

/* Socket geometry follows the same square illustration scale as the cards. */
#hero .node .card-socket{width:1.5625cqw;height:1.5625cqw}

@media(hover:hover){#hero .node:not(.remote):hover{transform:translate(-50%,-50%) scale(1.5);z-index:10}}
#hero .node:not(.remote):focus-visible{transform:translate(-50%,-50%) scale(1.5);z-index:10}

/* Keep connector details accessible on the photograph fallback. */
.static-scene #nodes{visibility:visible;opacity:1}
.static-scene .node:not(.remote){opacity:1;background:linear-gradient(145deg,#19222f,#070c14 72%)}
.static-scene .node:not(.remote):hover,.static-scene .node:not(.remote):focus-visible{opacity:1}

/* Tooltips remain readable and unscaled while the connector grows. */
.connector-tooltip{position:absolute;left:clamp(105px,var(--tip-x),calc(100% - 105px));top:calc(var(--tip-y) + max(37.5px,7.35cqw) + 9px);transform:translateX(-50%);z-index:20;padding:8px 11px;border:1px solid #668ca266;border-radius:8px;background:#0b1520;color:#edf8fc;font-size:11px;line-height:1.4;white-space:nowrap;box-shadow:0 6px 20px #0008;pointer-events:none}
.connector-tooltip[hidden]{display:none}
.capture .connector-tooltip{display:none}

.fallback-photo img{display:block;width:100%;height:100%;object-fit:contain}