/* ---------- Use cases — octopus hub + Arms ---------- */
.use-cases__stage{
  position:relative;
  margin-top:42px;
  padding:clamp(12px, 2vw, 24px) 0;
  min-height:420px;
}
.use-cases__hub{
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  width:clamp(80px, 11vw, 96px);
  height:clamp(80px, 11vw, 96px);
  grid-column:2;
  grid-row:1 / 3;
  justify-self:center;
  align-self:center;
  margin:0;
}
.use-cases__hub-glow{
  position:absolute;
  inset:-10px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(123,194,196,0.35) 0%, rgba(33,114,133,0.12) 55%, transparent 72%);
  animation:use-cases-hub-pulse 4.2s ease-in-out infinite;
}
.use-cases__hub-core{
  position:relative;
  font-family:var(--font-display);
  font-weight:700;
  font-size:14px;
  letter-spacing:0.06em;
  color:#07121d;
  background:linear-gradient(145deg, var(--teal), var(--teal-dark));
  border:2px solid rgba(190,235,237,0.55);
  border-radius:50%;
  width:clamp(58px, 8vw, 68px);
  height:clamp(58px, 8vw, 68px);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 0 6px rgba(123,194,196,0.1), 0 0 32px rgba(123,194,196,0.18);
}
.use-cases__tentacles{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  pointer-events:none;
  overflow:visible;
}
.use-cases-tentacle__body{
  fill:rgba(255,255,255,0.1);
  stroke:rgba(255,255,255,0.88);
  stroke-width:2.2;
  stroke-linejoin:round;
  stroke-linecap:round;
}
.use-cases-tentacle__body--dim{
  fill:rgba(255,255,255,0.04);
  stroke:rgba(255,255,255,0.28);
}
.use-cases-tentacle__ridge{
  fill:none;
  stroke:rgba(255,255,255,0.38);
  stroke-width:0.9;
  stroke-linecap:round;
}
.use-cases-tentacle__ridge--dim{
  stroke:rgba(255,255,255,0.14);
}
.use-cases-tentacle__sucker{
  fill:rgba(255,255,255,0.18);
  stroke:rgba(255,255,255,0.82);
  stroke-width:0.8;
}
.use-cases-tentacle__sucker--dim{
  fill:rgba(255,255,255,0.07);
  stroke:rgba(255,255,255,0.28);
}

/* Radial octopus — Piers centre, Arms around */
.use-cases__grid{
  list-style:none;
  margin:0;
  padding:0;
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(88px, 128px) minmax(0, 1fr);
  grid-template-rows:auto auto auto;
  column-gap:clamp(36px, 9vw, 96px);
  row-gap:clamp(32px, 5.5vw, 56px);
  align-items:center;
}
.use-case[data-arm="communications"]{grid-column:1;grid-row:1;justify-self:end;align-self:start;}
.use-case[data-arm="finance"]{grid-column:3;grid-row:1;justify-self:start;align-self:start;}
.use-case[data-arm="client"]{grid-column:1;grid-row:2;justify-self:end;}
.use-case[data-arm="intelligence"]{grid-column:3;grid-row:2;justify-self:start;}
.use-case[data-arm="marketing"],
.use-case--wide{
  grid-column:1 / -1;
  grid-row:3;
  max-width:min(100%, 420px);
  justify-self:center;
  width:100%;
}

.use-case{
  margin:0;
  padding:20px 20px 18px;
  border-radius:16px;
  border:1px solid rgba(123,194,196,0.14);
  background:rgba(8,22,34,0.82);
  backdrop-filter:blur(8px);
  display:flex;
  flex-direction:column;
  gap:14px;
  position:relative;
  opacity:0;
  transform:translateY(14px) scale(0.98);
  transition:opacity .55s ease, transform .65s cubic-bezier(0.22, 1, 0.36, 1), border-color .4s ease;
}
.use-case.is-placed{
  opacity:1;
  transform:translateY(0) scale(1);
  border-color:rgba(123,194,196,0.28);
}
.use-cases__stage.is-active .use-case.is-placed{
  box-shadow:0 8px 28px -12px rgba(0,0,0,0.45);
}
.use-case__grip{
  display:none;
}
.use-case__arm{
  font-family:var(--font-display);
  font-weight:600;
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--teal);
  margin:0;
  padding-top:4px;
}
.use-case__desc{
  margin:0;
  font-size:15px;
  line-height:1.5;
  color:var(--ink);
}
.use-case__chat{display:flex;flex-direction:column;gap:10px;}
.use-case__bubble{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:11px 14px;
  border-radius:12px;
  background:rgba(123,194,196,0.08);
  border:1px solid rgba(123,194,196,0.18);
}
.use-case__bubble--you{
  background:rgba(244,184,96,0.08);
  border-color:rgba(244,184,96,0.22);
}
.use-case__who{
  font-family:var(--font-display);
  font-weight:600;
  font-size:10px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--teal);
  flex:none;
  padding-top:2px;
}
.use-case__bubble--you .use-case__who{color:var(--buddy-out,#f4b860);}
.use-case__bubble p{margin:0;font-size:15px;line-height:1.45;color:var(--ink);}

@keyframes use-cases-hub-pulse{
  0%,100%{opacity:0.55;transform:scale(1);}
  50%{opacity:1;transform:scale(1.06);}
}

/* ---------- Integrations ---------- */
.integrations__groups{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  margin-top:42px;
}
.integrations__group{
  padding:22px 20px 20px;
  border-radius:16px;
  border:1px solid rgba(123,194,196,0.14);
  background:rgba(123,194,196,0.04);
}
.integrations__category{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:13px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 14px;
}
.integrations__icon{
  width:40px;
  height:40px;
  flex:none;
  overflow:visible;
  object-fit:contain;
}
.integrations__icon--email,
.integrations__icon--accounts{
  display:block;
  width:32px;
  height:32px;
  transform:translateY(-5px);
}
.integrations__icon-frame,
.integrations__icon-ring{
  fill:none;
  stroke:var(--teal);
  stroke-width:1.8;
  stroke-linejoin:round;
  stroke-linecap:round;
}
.integrations__icon-glass{
  fill:rgba(123,194,196,0.35);
  stroke:var(--teal);
  stroke-width:1.7;
  stroke-linejoin:round;
}
.integrations__icon-glass-hi{
  fill:none;
  stroke:rgba(190,235,237,0.55);
  stroke-width:1.2;
  stroke-linecap:round;
}
.integrations__icon-cork{
  fill:#e8c4a8;
  stroke:var(--teal);
  stroke-width:1.4;
}
.integrations__icon-paper{
  fill:#f3e8cf;
  stroke:var(--teal);
  stroke-width:1.6;
  stroke-linejoin:round;
}
.integrations__icon-accent{
  fill:var(--buddy-out,#f4b860);
}
.integrations__icon-accent-fill{
  fill:var(--buddy-out,#f4b860);
  stroke:var(--teal);
  stroke-width:1.2;
}
.integrations__icon-teal{
  fill:none;
  stroke:var(--teal);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.integrations__icon-teal-fill{
  fill:var(--teal);
  stroke:var(--teal);
  stroke-width:1.2;
}
.integrations__icon-muted{
  fill:none;
  stroke:rgba(123,194,196,0.55);
  stroke-width:1.3;
}
.integrations__icon-dot{
  fill:rgba(123,194,196,0.7);
}
.integrations__icon-chest-base{
  fill:rgba(123,194,196,0.22);
  stroke:var(--teal);
  stroke-width:1.6;
  stroke-linejoin:round;
}
.integrations__icon-chest-lid{
  fill:rgba(123,194,196,0.34);
  stroke:var(--teal);
  stroke-width:1.6;
  stroke-linejoin:round;
}
.integrations__icon-pearl{
  fill:rgba(244,184,96,0.45);
  stroke:var(--teal);
  stroke-width:1.4;
}
.integrations__icon-spokes line{
  stroke:var(--teal);
  stroke-width:2.6;
  stroke-linecap:round;
}
.integrations__icon-wheel-dot{
  fill:rgba(190,235,237,0.9);
}
.integrations__icon-compass-face{
  fill:rgba(123,194,196,0.14);
  stroke:var(--teal);
  stroke-width:1.5;
}
.integrations__icon-compass-hub{
  fill:#f2fafb;
  stroke:var(--teal);
  stroke-width:1.2;
}
.integrations__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.integrations__item{
  font-family:var(--font-display);
  font-weight:600;
  font-size:15px;
  color:#F2FAFB;
  padding:10px 12px;
  border-radius:10px;
  background:rgba(18,38,62,0.35);
  border:1px solid rgba(123,194,196,0.12);
}
.integrations__note{
  margin:28px auto 0;
  max-width:52ch;
  text-align:center;
  font-size:15px;
  color:var(--muted);
}

@media (max-width:900px){
  .integrations__groups{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:640px){
  .integrations__groups{grid-template-columns:1fr;gap:12px;margin-top:32px;}
}

@media (max-width:1024px){
  .use-cases__stage{min-height:0;padding:8px 0;}
  .use-cases__hub{display:none;}
  .use-cases__tentacles{
    display:block;
    z-index:1;
  }
  .use-cases__grid{
    grid-template-columns:1fr;
    grid-template-rows:none;
    column-gap:0;
    row-gap:clamp(36px, 9vw, 52px);
  }
  .use-case[data-arm],
  .use-case--wide{
    grid-column:1;
    grid-row:auto;
    justify-self:stretch;
    max-width:none;
    position:relative;
    z-index:2;
  }
  .use-case{
    opacity:1;
    transform:none;
    border-color:rgba(123,194,196,0.28);
  }
  .use-cases-tentacle--mobile .use-cases-tentacle__body{
    stroke-width:2;
    stroke:rgba(255,255,255,0.95);
  }
}

@media (prefers-reduced-motion:reduce){
  .use-case{opacity:1;transform:none;transition:none;}
  .use-cases__hub-glow{animation:none;}
}