/* Orbital integration reference, adapted to Formora's graphite site. */
.connections.integration-universe { padding:0; overflow:hidden; position:relative; isolation:isolate; background:#090a0c; }
.integration-shell { width:min(1640px,90%); min-height:clamp(680px,47.45vw,864px); padding:110px 0 100px; margin:auto; display:grid; grid-template-columns:minmax(0,.39fr) minmax(0,.61fr); gap:2%; align-items:center; position:relative; }
.integration-copy { position:relative; z-index:2; padding-bottom:4px; }
.integration-universe .integration-copy h2 { font-size:clamp(52px,6.15vw,112px); line-height:.96; font-weight:600; letter-spacing:-.055em; color:#f7f7f8; margin:0; }
.integration-universe .integration-copy p { max-width:610px; margin:32px 0 0; color:#b7c6e5; font-size:clamp(16px,1.47vw,27px); line-height:1.58; }
.integration-visual { position:relative; width:100%; aspect-ratio:1000/660; min-width:0; }
.integration-visual:before { content:''; position:absolute; inset:12% 3% -1%; background:radial-gradient(ellipse at 51% 51%,#737bde27,transparent 64%); pointer-events:none; }
.integration-routes { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.integration-orbit { fill:none; stroke:#738ac323; stroke-width:.8; }
.integration-route { fill:none; stroke:#9bb9ff; stroke-width:2.3; stroke-linecap:round; }
.integration-route-glow { fill:none; stroke:#6889ff; stroke-width:9; opacity:.9; }
.integration-flow { opacity:0; transition:opacity .2s ease; }
.integration-visual[data-active] .integration-flow { opacity:1; }
.integration-signal { fill:#f8fbff; opacity:0; filter:url(#integration-point-glow); }
.logo-node { position:absolute; left:var(--node-x); top:var(--node-y); width:var(--node-size); min-width:44px; aspect-ratio:1; transform:translate(-50%,-50%); z-index:2; }
.logo-tile { display:grid; place-items:center; position:relative; width:100%; height:100%; padding:0; border:1px solid #aebce181; border-radius:20%; background:linear-gradient(138deg,#303546,#171b28 49%,#22283c); transform:rotate(var(--node-tilt)); color:#d8d7ef; box-shadow:inset 1px 1px 1px #ffffff38,inset -1px -1px 2px #8194d73b,4px 6px 0 -2px #4a588044,8px 15px 24px -14px #000e; transition:opacity .22s,border-color .22s,box-shadow .22s; cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.logo-tile:before { content:''; position:absolute; inset:3px; border:1px solid #a0b2eb13; border-radius:18%; pointer-events:none; }
.logo-tile img { width:57%; height:57%; object-fit:contain; filter:drop-shadow(0 4px 3px #06091744); user-select:none; -webkit-user-drag:none; }
.logo-tile[disabled] { cursor:default; }
.integration-visual[data-active] .logo-tile[aria-pressed=false] { opacity:.82; }
.logo-tile[aria-pressed=true] { opacity:1; border-color:#dceaff; box-shadow:inset 1px 1px 2px #fff9,inset -2px -2px 3px #b5d2ff88,3px 5px 0 -1px #6989f1c2,0 0 8px 2px #739bffcc,0 0 30px 4px #6689ff88; }
.logo-tile:focus-visible { outline:2px solid #eef4ff; outline-offset:8px; }
.logo-tile.logo-porcelain { background:linear-gradient(138deg,#ffffff,#e6eaff 60%,#bdc5ed); border-color:#e4ebff; }
.logo-tile.logo-porcelain:before { border-color:#ffffff40; }
.logo-tile.logo-calendar img { width:53%; height:53%; }
.logo-tile.logo-slack img { width:58%; height:58%; }
.logo-tile.logo-365 img { width:60%; height:60%; }
.logo-tile.logo-api { display:flex; flex-direction:column; justify-content:center; gap:5%; }
.logo-api svg { width:32%; height:32%; }
.logo-api span { font-size:clamp(10px,1.2vw,21px); font-weight:600; line-height:1; }
.logo-webhook svg { width:56%; height:56%; }
.formora-hub { position:absolute; left:49.5%; top:50.5%; width:24%; aspect-ratio:1.02; transform:translate(-50%,-50%); z-index:3; pointer-events:none; }
.formora-hub-face { width:100%; height:100%; display:grid; place-items:center; transform:rotate(10deg); border:1px solid #c5d5ffc9; border-radius:20%; background:radial-gradient(ellipse at 87% 99%,#6163c462,transparent 62%),linear-gradient(130deg,#303549,#151827 60%,#2b2c4b); box-shadow:inset 1px 1px 3px #ffffff59,inset -1px -1px 3px #b4c3ff66,5px 8px 0 -2px #7276ba68,0 0 30px 1px #697aff29; transition:box-shadow .22s,border-color .22s; }
.formora-hub-face img { width:46%; height:46%; filter:drop-shadow(0 3px 2px #bdc4ff33); }
.integration-visual[data-active] .formora-hub-face { border-color:#d8e4ff; box-shadow:inset 1px 1px 3px #ffffffb0,inset -2px -2px 6px #a5b4ff88,5px 8px 0 -2px #7d80d286,0 0 7px #b6cfff88,0 0 32px 2px #6175ed59; }
.integration-context { position:absolute; left:33%; top:18.2%; z-index:5; max-width:34%; padding:6px 13px; border:1px solid #879fe18c; border-radius:15px; background:#111829d9; box-shadow:0 0 14px -5px #678dff70; color:#d6e4ff; font-size:clamp(11px,1.05vw,19px); line-height:1.4; white-space:nowrap; opacity:0; transition:opacity .18s; pointer-events:none; }
.integration-visual[data-active] .integration-context { opacity:1; }
.integration-universe .integration-note,.integration-universe .integration-hint { position:absolute; bottom:clamp(45px,5.8vw,105px); margin:0; color:#adc0df; font-size:clamp(11px,.88vw,16px); line-height:1.6; z-index:4; }
.integration-note { left:0; }
.integration-hint { right:0; text-align:right; }
.integration-touch-copy,.integration-touch-hint { display:none; }
.integration-static-list { font-size:12px; color:#adc0df; margin-top:20px; }
@media(hover:none),(pointer:coarse) {
  .integration-pointer-copy,.integration-pointer-hint { display:none; }
  .integration-touch-copy,.integration-touch-hint { display:inline; }
}
@media(max-width:1050px) and (min-width:801px) {
  .integration-shell { width:92%; grid-template-columns:minmax(0,.4fr) minmax(0,.6fr); min-height:640px; }
  .integration-universe .integration-copy h2 { font-size:clamp(47px,5.95vw,64px); }
  .integration-context { padding:5px 9px; font-size:11px; }
}
@media(max-width:800px) {
  .integration-shell { width:calc(100% - 44px); min-height:0; padding:65px 0 36px; grid-template-columns:1fr; gap:35px; }
  .integration-copy { max-width:600px; }
  .integration-universe .integration-copy h2 { font-size:clamp(44px,8vw,64px); line-height:1.02; letter-spacing:-.06em; }
  .integration-universe .integration-copy p { max-width:560px; font-size:16px; line-height:1.7; margin-top:24px; }
  .integration-visual { max-width:650px; margin:0 auto 39px; }
  .integration-context { top:auto; bottom:-35px; left:50%; transform:translateX(-50%); max-width:100%; padding:6px 12px; font-size:12px; }
  .integration-universe .integration-note,.integration-universe .integration-hint { position:static; font-size:11px; }
  .integration-universe .integration-note { margin-top:8px; }
  .integration-universe .integration-hint { text-align:left; margin-top:-28px; }
  .logo-api span { font-size:clamp(9px,2vw,14px); }
}
@media(max-width:480px) {
  .integration-shell { padding-top:58px; gap:28px; }
  .integration-universe .integration-copy h2 { font-size:44px; }
  .integration-universe .integration-copy p { font-size:15px; margin-top:22px; }
  .integration-visual { margin-bottom:42px; }
  .logo-tile { border-width:.8px; box-shadow:inset 1px 1px 1px #ffffff38,3px 4px 0 -2px #4a588044,4px 9px 12px -9px #000e; }
  .logo-tile[aria-pressed=true] { box-shadow:inset 1px 1px 1px #fff9,0 0 12px 1px #739bffbb; }
  .formora-hub-face { box-shadow:inset 1px 1px 2px #ffffff59,3px 4px 0 -2px #7276ba68,0 0 17px #697aff29; }
  .integration-context { font-size:11px; bottom:-38px; }
  .integration-universe .integration-note,.integration-universe .integration-hint { font-size:10px; }
}
@media(max-width:350px) { .integration-shell { width:calc(100% - 36px); } .integration-universe .integration-copy h2 { font-size:40px; } }
@media(prefers-reduced-motion:reduce) {
  .integration-universe *, .integration-universe *:before { transition:none !important; }
  .integration-signal { display:none; }
}
@media(forced-colors:active) {
  .integration-routes,.integration-visual:before { display:none; }
  .logo-tile,.formora-hub-face { border:1px solid ButtonText; background:Canvas; box-shadow:none; opacity:1 !important; }
  .logo-tile[aria-pressed=true] { outline:2px solid Highlight; }
  .integration-context { border-color:ButtonText; color:CanvasText; background:Canvas; }
}

/* Shared page rhythm and material; keep the supplied layout and stable logo positions. */
.connections.integration-universe{background:#10141c;overflow:clip}
.integration-shell{width:min(1280px,calc(100% - 112px));min-height:0;padding:110px 0 45px;grid-template-columns:minmax(0,.38fr) minmax(0,.62fr);gap:30px 20px}
.integration-universe .integration-copy h2{font-family:Manrope,sans-serif;font-size:clamp(46px,4.6vw,76px);line-height:1.04;font-weight:500;letter-spacing:-.05em;color:#edf1f7}
.integration-universe .integration-copy p{font-size:17px;line-height:1.8;color:#9daabb;max-width:370px;margin-top:26px}
.integration-visual:before{background:radial-gradient(ellipse at 51% 51%,#4f739e24,transparent 65%)}
.integration-orbit{stroke:#8ea9cd20}
.integration-route{stroke:#bed9fa;stroke-width:2}
.integration-route-glow{stroke:#79a3d5;stroke-width:7;opacity:.65}
.logo-tile{background:linear-gradient(138deg,#303e52,#172130 49%,#233044);border-color:#adc8e66b;box-shadow:inset 1px 1px 1px #ffffff38,inset -1px -1px 2px #8eb4db33,4px 6px 0 -2px #526c8b44,8px 15px 24px -14px #000b}
.logo-tile[aria-pressed=true]{border-color:#e1efff;box-shadow:inset 1px 1px 2px #fff8,inset -2px -2px 3px #b5d2ff66,3px 5px 0 -1px #6c93b9b3,0 0 8px 2px #8bb8e59c,0 0 27px 3px #75a3cf55}
.formora-hub-face{background:radial-gradient(ellipse at 87% 99%,#627eb34d,transparent 62%),linear-gradient(130deg,#35445c,#192233 60%,#303c58);border-color:#d0e2fbbd;box-shadow:inset 1px 1px 3px #ffffff59,inset -1px -1px 3px #b4d4ff55,5px 8px 0 -2px #6f8bad59,0 0 27px 1px #92b6e124}
.integration-visual[data-active] .formora-hub-face{border-color:#e4efff;box-shadow:inset 1px 1px 3px #ffffffa0,inset -2px -2px 6px #afc9ed77,5px 8px 0 -2px #7d9ac875,0 0 7px #b6d5f577,0 0 30px 2px #7396c24d}
.integration-context{font-size:clamp(10px,.82vw,14px);padding:6px 11px;max-width:none;background:#142033eb;border-color:#8caed18c;color:#d6e6f9;box-shadow:0 0 14px -5px #83b6df55}
.integration-footer{grid-column:1/-1;display:flex;justify-content:space-between;align-items:start;gap:24px;position:relative;z-index:4}
.integration-universe .integration-note,.integration-universe .integration-hint{position:static;font-size:10px;color:#7d91ac;margin:0;line-height:1.7}
.integration-static-list{grid-column:1/-1;color:#91a6bf;font-size:11px;line-height:1.7}
@media(max-width:1280px){.integration-shell{width:calc(100% - 72px);padding-top:100px}.integration-universe .integration-copy h2{font-size:clamp(44px,4.8vw,64px)}.integration-universe .integration-copy p{font-size:15px;max-width:330px}}
@media(max-width:1050px) and (min-width:801px){.integration-shell{min-height:0;gap:28px 18px}.integration-universe .integration-copy h2{font-size:49px}.integration-universe .integration-copy p{font-size:14px;margin-top:23px}.integration-context{font-size:10px;padding:5px 8px}}
@media(max-width:800px){.integration-shell{width:calc(100% - 40px);padding:85px 0 15px;grid-template-columns:1fr;gap:28px}.integration-universe .integration-copy h2{font-size:clamp(38px,7vw,54px);line-height:1.08;letter-spacing:-.045em}.integration-universe .integration-copy p{font-size:14px;line-height:1.8;max-width:460px;margin-top:20px}.integration-visual{max-width:640px;margin-bottom:38px}.integration-context{top:auto;bottom:-33px;left:50%;transform:translateX(-50%);font-size:11px;padding:6px 11px}.integration-footer{gap:14px;flex-wrap:wrap}.integration-universe .integration-note,.integration-universe .integration-hint{font-size:9px;text-align:left}.integration-universe .integration-hint{margin-left:auto}}
@media(max-width:480px){.integration-universe .integration-copy h2{font-size:39px}.integration-universe .integration-copy p{font-size:13px}.integration-footer{display:block}.integration-universe .integration-hint{margin:8px 0 0}.integration-visual{margin-bottom:40px}.logo-api span{font-size:10px}}
@media(max-width:350px){.integration-shell{width:calc(100% - 36px)}.integration-universe .integration-copy h2{font-size:35px}}
@media(forced-colors:active){.logo-tile,.formora-hub-face,.integration-visual[data-active] .formora-hub-face{background:Canvas;border-color:ButtonText;box-shadow:none}.integration-context{background:Canvas;color:CanvasText;border-color:ButtonText}}