/* ZE Group — Companies Hub (clean, professional constellation landing). */

.hub{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:
    radial-gradient(1200px 720px at 80% 12%, rgba(46,117,214,0.16), transparent 62%),
    radial-gradient(900px 640px at 10% 92%, rgba(46,117,214,0.08), transparent 62%),
    linear-gradient(165deg, var(--navy-950) 0%, var(--navy-900) 62%, var(--navy-850) 100%);
  padding:96px 0;
}
.hub .blueprint-grid{opacity:.5;}

/* Soft static auras for depth */
.hub-aura{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;opacity:.45;will-change:transform;}
.hub-aura--1{width:520px;height:520px;top:-150px;right:-90px;background:radial-gradient(circle,rgba(46,117,214,0.22),transparent 70%);}
.hub-aura--2{width:460px;height:460px;bottom:-170px;left:-110px;background:radial-gradient(circle,rgba(201,162,75,0.12),transparent 70%);}

/* Square-ish stage holding the ellipse + nodes */
.hub-stage{
  position:relative;
  width:100%;
  max-width:940px;
  margin:0 auto;
  aspect-ratio:1000 / 620;
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
  transform:translate3d(var(--px,0),var(--py,0),0);
}

/* Static connector lines (center → each node) */
.hub-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1;}
.hub-lines line{
  stroke:rgba(255,255,255,0.12);
  stroke-width:1;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:1 7;
  stroke-linecap:round;
}

/* Static dashed orbit rings */
.hub-orbit{
  position:absolute;inset:4% 2%;
  border:1px dashed rgba(255,255,255,0.12);
  border-radius:50%;
  z-index:1;
}
.hub-orbit--inner{inset:22% 20%;border-color:rgba(255,255,255,0.06);}

/* Center emblem */
.hub-center{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  z-index:3;text-align:center;
}
.hub-center-badge{position:relative;display:inline-flex;align-items:center;justify-content:center;}
.hub-center-badge::before{
  content:"";position:absolute;inset:-30px;border-radius:50%;
  background:radial-gradient(circle,rgba(46,117,214,0.20),transparent 70%);
}
.hub-center-mark{display:inline-flex;align-items:center;gap:12px;position:relative;}
.hub-center-mark b{
  font-family:var(--font-display);font-weight:700;font-size:26px;letter-spacing:.06em;color:#fff;
}
.hub-center-badge img{max-height:56px;width:auto;position:relative;}
.hub-eyebrow{
  display:block;margin-top:16px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold);
}

/* Company nodes */
.hub-node{
  position:absolute;
  transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:18px;
  z-index:4;text-align:center;
  opacity:0;
  animation:hub-fade .6s ease forwards;
  animation-delay:calc(var(--i) * .1s + .15s);
}
.hub-badge{
  position:relative;
  width:clamp(88px,11vw,118px);
  height:clamp(88px,11vw,118px);
  border-radius:0;
  display:grid;place-items:center;
  background:
    radial-gradient(circle at 50% 34%, rgba(255,255,255,0.06), rgba(9,20,40,0.78) 74%);
  border:1px solid color-mix(in srgb, var(--accent) 38%, rgba(255,255,255,0.12));
  box-shadow:
    0 16px 40px -16px rgba(4,10,24,.75),
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 0 22px rgba(0,0,0,.4);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.hub-badge-ring{
  position:absolute;inset:-8px;border-radius:0;
  border:1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  opacity:0;transform:scale(.92);
  transition:opacity .35s ease, transform .35s ease;
}
.hub-badge img{width:90%;height:90%;object-fit:contain;}
.hub-badge-fallback{font-family:var(--font-display);font-weight:700;font-size:30px;color:var(--accent);}
.hub-node-name{
  font-family:var(--font-display);font-weight:600;font-size:clamp(14px,1.4vw,16px);
  color:rgba(255,255,255,.8);letter-spacing:.01em;position:relative;
  transition:color .3s ease;
}
.hub-node-name::after{
  content:"";position:absolute;left:50%;bottom:-8px;width:0;height:2px;background:var(--accent);
  transform:translateX(-50%);transition:width .3s ease;border-radius:2px;
}

/* Refined hover */
.hub-node:hover .hub-badge{
  transform:translateY(-6px);
  border-color:color-mix(in srgb, var(--accent) 75%, transparent);
  box-shadow:
    0 24px 54px -20px rgba(4,10,24,.85),
    0 0 26px -6px color-mix(in srgb, var(--accent) 55%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.06);
}
.hub-node:hover .hub-badge-ring{opacity:1;transform:scale(1);}
.hub-node:hover .hub-node-name{color:#fff;}
.hub-node:hover .hub-node-name::after{width:100%;}

@keyframes hub-fade{to{opacity:1;}}

/* ===== Responsive: collapse the orbit into a stacked layout ===== */
@media (max-width:768px){
  .hub{padding:100px 0 72px;}
  .hub-stage{
    aspect-ratio:auto;
    display:flex;flex-direction:column;align-items:center;gap:36px;
    transform:none;
  }
  .hub-lines,.hub-orbit{display:none;}
  .hub-center{position:static;transform:none;order:-1;margin-bottom:8px;}
  .hub-node{
    position:static !important;
    transform:none;left:auto !important;top:auto !important;
    opacity:1;animation:none;
    flex-direction:row;gap:18px;width:100%;max-width:340px;
    padding:14px 18px;border:1px solid var(--line);border-radius:14px;
    background:rgba(255,255,255,0.03);
  }
  .hub-badge{width:64px;height:64px;flex:none;}
  .hub-node-name{font-size:16px;}
  .hub-node-name::after{left:0;transform:none;}
  .hub-node:hover .hub-badge{transform:none;}
}

@media (prefers-reduced-motion: reduce){
  .hub-node{animation:none;opacity:1;}
}