/* Lisra hub visuals, shared by index.html and investor-presentation.html.
   .mh = Meet Lisra (services wired into the logo). Icons come from images/icons.svg. */
/* the hub: six services wired into Lisra. Positions are % of the picture, so they hold at every width.
   Quiet on purpose: hairline wires, one small spark at a time, the service's edge warms as it sends.
   One clock (requestAnimationFrame in the script below) drives --g and --b, so nothing switches on or off */
.mh{position:absolute;inset:0;z-index:1;pointer-events:none}
.mh-ring{position:absolute;left:50%;top:41.5%;width:82.25%;aspect-ratio:1;translate:-50% -50%;overflow:visible;
  animation:mhSpin 180s linear infinite}
.mh-ring circle{fill:none;stroke:#d6b66d;stroke-opacity:.3;stroke-width:.36;stroke-linecap:round;stroke-dasharray:0 2.4}
@keyframes mhSpin{to{rotate:360deg}}
.mh-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mh-wires path{fill:none;stroke-linecap:round}
.mh-wires .w-base{stroke-width:.8}
.mh-wires .w-tail{stroke:#f3dba6;stroke-width:1.1}
.mh-wires .w-head{fill:#fff3d8}
/* a service: dark glass with a fine gold edge that catches the light from the top left */
.mh-node{--g:0;position:absolute;left:var(--x);top:var(--y);width:12%;aspect-ratio:1;translate:-50% -50%;
  border-radius:50%;display:grid;place-items:center;border:1px solid transparent;
  background:radial-gradient(circle at 50% 22%,rgba(58,47,30,.95),rgba(16,13,9,.97) 66%) padding-box,
    linear-gradient(150deg,rgba(240,216,166,.7),rgba(214,182,109,.1) 42%,rgba(214,182,109,.06) 62%,rgba(190,150,82,.45)) border-box;
  box-shadow:0 10px 24px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,238,198,.12)}
.mh-node::before{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid rgba(246,222,170,.85);
  opacity:var(--g);will-change:opacity}
.mh-node svg{position:relative;width:42%;height:42%;fill:none;stroke:url(#mhIconGold);stroke-width:1.2;
  stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.mh-node .is-fill{fill:url(#mhIconGold);stroke:none}
/* Lisra: only the transparent logo, a still soft light behind it that warms a little as each spark arrives */
.mh-core{--b:0;position:absolute;left:50%;top:41.5%;width:20%;aspect-ratio:1;translate:-50% -50%;display:grid;place-items:center}
.mh-core-glow{position:absolute;inset:-55%;border-radius:50%;
  background:radial-gradient(circle,rgba(236,200,128,.2),rgba(214,182,109,.06) 40%,rgba(214,182,109,0) 64%)}
.mh-core-bloom{position:absolute;inset:-12%;border-radius:50%;opacity:var(--b);will-change:opacity;
  background:radial-gradient(circle,rgba(255,232,180,.22),rgba(246,214,148,0) 66%)}
.mh-logo{position:relative;width:100%;height:auto;filter:drop-shadow(0 8px 16px rgba(0,0,0,.55))}
.mh-sky{position:absolute;left:50%;width:5.2%;aspect-ratio:1;translate:-50% -50%;display:grid;place-items:center;
  border-radius:50%;background:radial-gradient(circle,#0e0b08 58%,rgba(14,11,8,0) 72%)}
.mh-sky.is-sun{top:8.6%}
.mh-sky.is-moon{top:74.1%}
.mh-sky svg{width:100%;height:100%;fill:none;stroke:url(#mhIconGold);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.mh-sky.is-moon svg{width:84%;height:84%;fill:rgba(230,203,143,.12)}
@media (prefers-reduced-motion: reduce){.mh-ring{animation:none}}

/* .hx = hero: one agent across industries. A soft light sweeps round the logo; each industry it passes
   warms (--g) and its hairline glows. The sweep and the warmth come from one clock in hubs.js */
.hx{position:relative;width:100%;max-width:460px;aspect-ratio:1;margin:0 auto;container-type:inline-size}
.hx-rings{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.hx-rings circle{fill:none;stroke:#d6b66d}
.hx-rings .r-out{stroke-opacity:.26;stroke-width:.3;stroke-linecap:round;stroke-dasharray:0 1.9}
.hx-rings .r-in{stroke-opacity:.12;stroke-width:.25}
.hx-sweep{position:absolute;inset:7%;border-radius:50%;pointer-events:none;will-change:transform;
  background:conic-gradient(from 0deg,rgba(214,182,109,0) 0deg 285deg,rgba(214,182,109,.05) 320deg,rgba(226,194,128,.14) 357deg,rgba(246,224,176,.34) 359.6deg,rgba(214,182,109,0) 360deg);
  -webkit-mask:radial-gradient(circle,transparent 16%,#000 30%,#000 66%,transparent 72%);
  mask:radial-gradient(circle,transparent 16%,#000 30%,#000 66%,transparent 72%)}
.hx-spokes{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.hx-spokes line{stroke-linecap:round}
.hx-spokes .s-base{stroke:rgba(214,182,109,.16);stroke-width:.8}
.hx-spokes .s-lit{stroke:#f1d9a3;stroke-width:1;opacity:0}
.hx-core{position:absolute;left:50%;top:50%;width:24%;translate:-50% -50%;display:flex;flex-direction:column;align-items:center;
  text-align:center;pointer-events:none}
.hx-core::before{content:"";position:absolute;left:50%;top:34%;width:240%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle,rgba(236,200,128,.17),rgba(214,182,109,.05) 42%,rgba(214,182,109,0) 66%)}
.hx-logo{position:relative;width:62%;height:auto;filter:drop-shadow(0 8px 16px rgba(0,0,0,.55))}
.hx-name{position:relative;margin-top:7%;font-size:clamp(10px,2.7cqw,13px);font-weight:300;letter-spacing:.01em;color:var(--ink,#f6efe1);white-space:nowrap}
.hx-sub{position:relative;margin-top:2%;font-size:clamp(6.5px,1.6cqw,8px);letter-spacing:.2em;text-transform:uppercase;color:var(--muted,#b9ad97);white-space:nowrap}
.hx-node{--g:0;position:absolute;left:var(--x);top:var(--y);translate:-50% -50%;display:flex;flex-direction:column;align-items:center;
  gap:clamp(4px,1.3cqw,7px);text-decoration:none;z-index:2}
.hx-tile{position:relative;width:clamp(40px,11.6cqw,54px);aspect-ratio:1;border-radius:30%;display:grid;place-items:center;
  color:#dcc28c;border:1px solid transparent;
  background:radial-gradient(circle at 50% 18%,rgba(62,50,32,.96),rgba(17,14,10,.97) 70%) padding-box,
    linear-gradient(150deg,rgba(240,216,166,.62),rgba(214,182,109,.09) 44%,rgba(214,182,109,.05) 62%,rgba(190,150,82,.4)) border-box;
  box-shadow:0 10px 22px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,238,198,.1);transition:translate .35s ease}
.hx-tile::before{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1px solid rgba(246,222,170,.85);opacity:var(--g);
  box-shadow:0 0 18px rgba(232,196,120,.28);will-change:opacity}
.hx-tile .lx-i{width:44%;height:44%;stroke-width:1.4}
.hx-lb{font-size:clamp(9px,2.4cqw,11px);font-weight:300;letter-spacing:.01em;color:var(--muted,#b9ad97);white-space:nowrap;transition:color .3s ease}
.hx-node:hover .hx-tile,.hx-node:focus-visible .hx-tile{translate:0 -2px}
.hx-node:hover .hx-lb,.hx-node:focus-visible .hx-lb{color:#e6cf9a}
.hx-node:focus-visible{outline:none}
.hx-node:focus-visible .hx-tile{outline:1px solid rgba(246,222,170,.8);outline-offset:3px}
@media (prefers-reduced-motion: reduce){.hx-sweep{display:none}}

/* .cx = What Lisra does: every channel on one slow orbit round the logo. A fine ring of light leaves the
   logo every few seconds; each channel catches it (--g) as it passes. Orbit and ring share one clock */
.cx{position:relative;width:100%;max-width:520px;aspect-ratio:1;margin:0 auto;container-type:inline-size}
.cx-orbit{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.cx-orbit circle{fill:none;stroke:#d6b66d}
.cx-orbit .o-path{stroke-opacity:.22;stroke-width:.28;stroke-linecap:round;stroke-dasharray:0 1.6}
.cx-orbit .o-in{stroke-opacity:.1;stroke-width:.22}
.cx-wave{position:absolute;left:50%;top:50%;width:84%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;
  border:1px solid rgba(240,212,152,.55);box-shadow:0 0 18px rgba(232,196,120,.18),inset 0 0 18px rgba(232,196,120,.08);
  opacity:0;will-change:transform,opacity}
.cx-spokes{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.cx-spokes line{stroke-linecap:round;stroke-width:.8}
.cx-core{position:absolute;left:50%;top:50%;width:21%;aspect-ratio:1;translate:-50% -50%;display:grid;place-items:center;pointer-events:none}
.cx-core::before{content:"";position:absolute;inset:-60%;border-radius:50%;
  background:radial-gradient(circle,rgba(236,200,128,.2),rgba(214,182,109,.06) 40%,rgba(214,182,109,0) 64%)}
.cx-logo{position:relative;width:100%;height:auto;filter:drop-shadow(0 8px 16px rgba(0,0,0,.55))}
.cx-node{--g:0;position:absolute;left:0;top:0;display:flex;align-items:center;gap:clamp(6px,1.6cqw,9px);
  padding:clamp(5px,1.3cqw,7px) clamp(10px,2.8cqw,15px) clamp(5px,1.3cqw,7px) clamp(5px,1.3cqw,7px);border-radius:999px;
  border:1px solid transparent;white-space:nowrap;will-change:transform;
  background:linear-gradient(165deg,rgba(40,33,23,.94),rgba(17,14,10,.96)) padding-box,
    linear-gradient(150deg,rgba(240,216,166,.5),rgba(214,182,109,.08) 46%,rgba(190,150,82,.32)) border-box;
  box-shadow:0 10px 22px rgba(0,0,0,.5);font-size:clamp(10px,2.6cqw,12.5px);font-weight:300;color:var(--ink,#f6efe1)}
.cx-node::before{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1px solid rgba(246,222,170,.9);
  box-shadow:0 0 16px rgba(232,196,120,.3);opacity:var(--g);will-change:opacity}
.cx-ic{width:clamp(22px,6cqw,28px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;color:#dcc28c;
  background:radial-gradient(circle at 50% 25%,rgba(214,182,109,.18),rgba(214,182,109,.04))}
.cx-ic .lx-i{width:58%;height:58%;stroke-width:1.5}
@media (prefers-reduced-motion: reduce){.cx-wave{display:none}}
/* narrow screens: the pill folds into an icon with a small label under it, so neighbours never touch */
@container (max-width: 430px){
  .cx-node{flex-direction:column;gap:4px;padding:0;border:0;background:none;box-shadow:none}
  .cx-node::before{display:none}
  .cx-ic{position:relative;width:34px;border:1px solid transparent;
    background:radial-gradient(circle at 50% 22%,rgba(62,50,32,.96),rgba(17,14,10,.97) 70%) padding-box,
      linear-gradient(150deg,rgba(240,216,166,.55),rgba(214,182,109,.08) 46%,rgba(190,150,82,.34)) border-box;
    box-shadow:0 8px 18px rgba(0,0,0,.5)}
  .cx-ic::before{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid rgba(246,222,170,.9);
    box-shadow:0 0 14px rgba(232,196,120,.3);opacity:var(--g)}
  .cx-t{font-size:9.5px;color:var(--muted,#b9ad97);text-shadow:0 1px 6px rgba(0,0,0,.8)}
}

/* 2026-10-15 (owner): the channels are pictures, not pills. No box, no border: a large illustrated icon in
   the Lisra metallic style with its name underneath; the ring of light warms the glow behind each icon (--g). */
.cx-node{flex-direction:column!important;align-items:center!important;gap:clamp(5px,1.4cqw,8px)!important;padding:0!important;border:0!important;
  background:none!important;box-shadow:none!important;white-space:nowrap}
.cx-node::before{display:none!important}
.cx-art{position:relative;width:clamp(42px,12.4cqw,64px);aspect-ratio:1;display:grid;place-items:center}
.cx-art::before{content:"";position:absolute;inset:-26%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(236,200,128,.22),rgba(214,182,109,.06) 46%,rgba(214,182,109,0) 68%);opacity:calc(.35 + var(--g) * .65)}
.cx-svg{position:relative;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 6px 10px rgba(0,0,0,.55))}
.cx-svg .cx-gl{opacity:calc(.3 + var(--g) * .7)}
.cx-t{font-size:clamp(9.5px,2.5cqw,12.5px);font-weight:300;letter-spacing:.02em;color:#cfc6b4;text-shadow:0 1px 8px rgba(0,0,0,.85);transition:color .4s ease}
.cx-node .cx-dt{animation:cxType 1.3s ease-in-out infinite}
.cx-node .cx-dt.d2{animation-delay:.18s}.cx-node .cx-dt.d3{animation-delay:.36s}
@keyframes cxType{0%,100%{opacity:.35}45%{opacity:1}}
.cx-node .cx-w{animation:cxWave 2s ease-in-out infinite}.cx-node .cx-w.w2{animation-delay:.3s}
@keyframes cxWave{0%,100%{opacity:.35}45%{opacity:1}}
@container (max-width: 430px){
  .cx-art{width:36px}
  .cx-art::before{inset:-18%}
  .cx-t{font-size:9.5px;color:var(--muted,#b9ad97)}
}
@media (prefers-reduced-motion: reduce){.cx-node .cx-dt,.cx-node .cx-w{animation:none;opacity:1}}